diff --git a/frontend/src/components/dialog/lib-settings.js b/frontend/src/components/dialog/lib-settings.js
new file mode 100644
index 0000000000..dffbd23926
--- /dev/null
+++ b/frontend/src/components/dialog/lib-settings.js
@@ -0,0 +1,129 @@
+import React, { Fragment, useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalHeader, 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';
+import {
+  MetadataStatusManagementDialog as LibExtendedPropertiesSettingPanel,
+  MetadataFaceRecognitionDialog as LibFaceRecognitionSettingPanel,
+  useMetadata
+} from '../../metadata';
+
+import '../../css/lib-settings.css';
+
+const propTypes = {
+  toggleDialog: PropTypes.func.isRequired,
+  repoID: PropTypes.string.isRequired,
+  currentRepoInfo: PropTypes.object.isRequired
+};
+
+const LibSettingsDialog = ({ repoID, currentRepoInfo, toggleDialog, tab }) => {
+  let [activeTab, setActiveTab] = useState(tab || 'historySetting');
+
+  const toggleTab = useCallback((tab) => {
+    setActiveTab(tab);
+  }, []);
+
+  const onTabKeyDown = useCallback((e) => {
+    if (e.key == 'Enter' || e.key == 'Space') {
+      e.target.click();
+    }
+  }, []);
+
+  const { encrypted, is_admin } = currentRepoInfo;
+  const { enableMetadataManagement } = window.app.pageOptions;
+  const { enableMetadata, updateEnableMetadata, enableFaceRecognition, updateEnableFaceRecognition } = useMetadata();
+  const enableHistorySetting = is_admin; // repo owner, admin of the department which the repo belongs to, and ...
+  const enableAutoDelSetting = is_admin && enableRepoAutoDel;
+  const enableExtendedPropertiesSetting = !encrypted && is_admin && enableMetadataManagement;
+  const enableFaceRecognitionSetting = enableExtendedPropertiesSetting && enableMetadata;
+
+  return (
+    <div>
+      <Modal isOpen={true} className="lib-settings-dialog" toggle={toggleDialog}>
+        <ModalHeader toggle={toggleDialog}>
+          {gettext('Settings')}
+        </ModalHeader>
+        <ModalBody className="d-md-flex p-md-0" role="tablist">
+          <Fragment>
+            <div className="lib-setting-nav p-4">
+              <Nav pills className="flex-column">
+                {enableHistorySetting &&
+                <NavItem role="tab" aria-selected={activeTab === 'historySetting'} aria-controls="history-setting-panel">
+                  <NavLink className={activeTab === 'historySetting' ? 'active' : ''} onClick={(toggleTab.bind(this, 'historySetting'))} tabIndex="0" onKeyDown={onTabKeyDown}>
+                    {gettext('History')}
+                  </NavLink>
+                </NavItem>
+                }
+                {enableAutoDelSetting &&
+                <NavItem role="tab" aria-selected={activeTab === 'autoDelSetting'} aria-controls="auto-del-setting-panel">
+                  <NavLink className={activeTab === 'autoDelSetting' ? 'active' : ''} onClick={toggleTab.bind(this, 'autoDelSetting')} tabIndex="0" onKeyDown={onTabKeyDown}>
+                    {gettext('Auto deletion')}
+                  </NavLink>
+                </NavItem>
+                }
+                {enableExtendedPropertiesSetting &&
+                <NavItem role="tab" aria-selected={activeTab === 'extendedPropertiesSetting'} aria-controls="extended-properties-setting-panel">
+                  <NavLink className={activeTab === 'extendedPropertiesSetting' ? 'active' : ''} onClick={toggleTab.bind(this, 'extendedPropertiesSetting')} tabIndex="0" onKeyDown={onTabKeyDown}>
+                    {gettext('Extended properties')}
+                  </NavLink>
+                </NavItem>
+                }
+                {enableFaceRecognitionSetting &&
+                <NavItem role="tab" aria-selected={activeTab === 'faceRecognitionSetting'} aria-controls="face-recognition-setting-panel">
+                  <NavLink className={activeTab === 'faceRecognitionSetting' ? 'active' : ''} onClick={toggleTab.bind(this, 'faceRecognitionSetting')} tabIndex="0" onKeyDown={onTabKeyDown}>
+                    {gettext('Face recognition')}
+                  </NavLink>
+                </NavItem>
+                }
+              </Nav>
+            </div>
+            <TabContent activeTab={activeTab} className="flex-fill">
+              {(enableHistorySetting && activeTab === 'historySetting') &&
+                <TabPane tabId="historySetting" role="tabpanel" id="history-setting-panel">
+                  <LibHistorySettingPanel
+                    repoID={repoID}
+                    toggleDialog={toggleDialog}
+                  />
+                </TabPane>
+              }
+              {(enableAutoDelSetting && activeTab === 'autoDelSetting') &&
+                <TabPane tabId="autoDelSetting" role="tabpanel" id="auto-del-setting-panel">
+                  <LibAutoDelSettingPanel
+                    repoID={repoID}
+                    toggleDialog={toggleDialog}
+                  />
+                </TabPane>
+              }
+              {(enableExtendedPropertiesSetting && activeTab === 'extendedPropertiesSetting') &&
+                <TabPane tabId="extendedPropertiesSetting" role="tabpanel" id="extended-properties-setting-panel">
+                  <LibExtendedPropertiesSettingPanel
+                    repoID={repoID}
+                    value={enableMetadata}
+                    submit={(value) => { updateEnableMetadata(value); }}
+                    toggleDialog={toggleDialog}
+                  />
+                </TabPane>
+              }
+              {(enableFaceRecognitionSetting && activeTab === 'faceRecognitionSetting') &&
+                <TabPane tabId="faceRecognitionSetting" role="tabpanel" id="face-recognition-setting-panel">
+                  <LibFaceRecognitionSettingPanel
+                    repoID={repoID}
+                    value={enableFaceRecognition}
+                    submit={(value) => { updateEnableFaceRecognition(true); }}
+                    toggleDialog={toggleDialog}
+                  />
+                </TabPane>
+              }
+            </TabContent>
+          </Fragment>
+        </ModalBody>
+      </Modal>
+    </div>
+  );
+};
+
+LibSettingsDialog.propTypes = propTypes;
+
+export default LibSettingsDialog;
diff --git a/frontend/src/components/dialog/lib-history-setting-dialog.js b/frontend/src/components/dialog/lib-settings/lib-history-setting-panel.js
similarity index 84%
rename from frontend/src/components/dialog/lib-history-setting-dialog.js
rename to frontend/src/components/dialog/lib-settings/lib-history-setting-panel.js
index 2e7c8cfdfb..76d40124e9 100644
--- a/frontend/src/components/dialog/lib-history-setting-dialog.js
+++ b/frontend/src/components/dialog/lib-settings/lib-history-setting-panel.js
@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
-import { gettext, enableRepoHistorySetting } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api';
-import { Utils } from '../../utils/utils';
-import toaster from '../toast';
+import { Button, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
+import { gettext, enableRepoHistorySetting } from '../../../utils/constants';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { Utils } from '../../../utils/utils';
+import toaster from '../../toast';
 
 const propTypes = {
-  itemName: PropTypes.string.isRequired,
   toggleDialog: PropTypes.func.isRequired,
   repoID: PropTypes.string.isRequired,
 };
@@ -108,14 +107,8 @@ class LibHistorySetting extends React.Component {
   };
 
   render() {
-    const { itemName: repoName } = this.props;
-    let title = gettext('{placeholder} History Setting');
-    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}>
-          <span dangerouslySetInnerHTML={{ __html: title }} className="d-flex mw-100"></span>
-        </ModalHeader>
+      <>
         <ModalBody>
           <Form>
             {!enableRepoHistorySetting &&
@@ -151,7 +144,7 @@ class LibHistorySetting extends React.Component {
           <Button color="secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</Button>
           <Button color="primary" onClick={this.submit}>{gettext('Submit')}</Button>
         </ModalFooter>
-      </Modal>
+      </>
     );
   }
 }
diff --git a/frontend/src/components/dialog/lib-old-files-auto-del-dialog.js b/frontend/src/components/dialog/lib-settings/lib-old-files-auto-del-setting-panel.js
similarity index 83%
rename from frontend/src/components/dialog/lib-old-files-auto-del-dialog.js
rename to frontend/src/components/dialog/lib-settings/lib-old-files-auto-del-setting-panel.js
index c1ec865770..968bca0bca 100644
--- a/frontend/src/components/dialog/lib-old-files-auto-del-dialog.js
+++ b/frontend/src/components/dialog/lib-settings/lib-old-files-auto-del-setting-panel.js
@@ -1,17 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
-import { gettext } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api';
-import { Utils } from '../../utils/utils';
-import toaster from '../toast';
+import { Button, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
+import { gettext } from '../../../utils/constants';
+import { seafileAPI } from '../../../utils/seafile-api';
+import { Utils } from '../../../utils/utils';
+import toaster from '../../toast';
 
 const propTypes = {
   toggleDialog: PropTypes.func.isRequired,
   repoID: PropTypes.string.isRequired,
 };
 
-class LibOldFilesAutoDelDialog extends React.Component {
+class LibOldFilesAutoDelSetting extends React.Component {
 
   constructor(props) {
     super(props);
@@ -93,10 +93,7 @@ class LibOldFilesAutoDelDialog extends React.Component {
 
   render() {
     return (
-      <Modal isOpen={true} toggle={this.props.toggleDialog}>
-        <ModalHeader toggle={this.props.toggleDialog}>
-          {gettext('Auto deletion')}
-        </ModalHeader>
+      <>
         <ModalBody>
           <Form>
             <FormGroup check>
@@ -123,11 +120,11 @@ class LibOldFilesAutoDelDialog extends React.Component {
           <Button color="secondary" onClick={this.props.toggleDialog}>{gettext('Cancel')}</Button>
           <Button color="primary" onClick={this.submit}>{gettext('Submit')}</Button>
         </ModalFooter>
-      </Modal>
+      </>
     );
   }
 }
 
-LibOldFilesAutoDelDialog.propTypes = propTypes;
+LibOldFilesAutoDelSetting.propTypes = propTypes;
 
-export default LibOldFilesAutoDelDialog;
+export default LibOldFilesAutoDelSetting;
diff --git a/frontend/src/components/dir-view-mode/dir-others.js b/frontend/src/components/dir-view-mode/dir-others.js
index 1c9cdb799c..389880c8f9 100644
--- a/frontend/src/components/dir-view-mode/dir-others.js
+++ b/frontend/src/components/dir-view-mode/dir-others.js
@@ -4,9 +4,17 @@ import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import TreeSection from '../tree-section';
 import TrashDialog from '../dialog/trash-dialog';
+import LibSettingsDialog from '../dialog/lib-settings';
+
 import './dir-others.css';
 
 const DirOthers = ({ userPerm, repoID, currentRepoInfo }) => {
+  const showSettings = currentRepoInfo.is_admin; // repo owner, department admin, shared with 'Admin' permission
+  let [isSettingsDialogOpen, setSettingsDialogOpen] = useState(false);
+  const toggleSettingsDialog = () => {
+    setSettingsDialogOpen(!isSettingsDialogOpen);
+  };
+
   const [showTrashDialog, setShowTrashDialog] = useState(false);
   let trashUrl = null;
   const historyUrl = siteRoot + 'repo/history/' + repoID + '/';
@@ -18,6 +26,12 @@ const DirOthers = ({ userPerm, repoID, currentRepoInfo }) => {
   };
   return (
     <TreeSection title={gettext('Others')} className="dir-others">
+      {showSettings &&
+        <div className='dir-others-item text-nowrap' title={gettext('Settings')} onClick={toggleSettingsDialog}>
+          <span className="sf3-font-set-up sf3-font"></span>
+          <span className="dir-others-item-text">{gettext('Settings')}</span>
+        </div>
+      }
       {trashUrl &&
         <div className='dir-others-item text-nowrap' title={gettext('Trash')} onClick={toggleTrashDialog}>
           <span className="sf3-font-trash sf3-font"></span>
@@ -38,6 +52,13 @@ const DirOthers = ({ userPerm, repoID, currentRepoInfo }) => {
           toggleTrashDialog={toggleTrashDialog}
         />
       )}
+      {isSettingsDialogOpen && (
+        <LibSettingsDialog
+          repoID={repoID}
+          currentRepoInfo={currentRepoInfo}
+          toggleDialog={toggleSettingsDialog}
+        />
+      )}
     </TreeSection>
   );
 };
diff --git a/frontend/src/components/dir-view-mode/dir-views.js b/frontend/src/components/dir-view-mode/dir-views.js
index 8e4431919f..f74c6e5e08 100644
--- a/frontend/src/components/dir-view-mode/dir-views.js
+++ b/frontend/src/components/dir-view-mode/dir-views.js
@@ -2,8 +2,9 @@ import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import TreeSection from '../tree-section';
-import { MetadataStatusManagementDialog, MetadataFaceRecognitionDialog, MetadataTreeView, useMetadata } from '../../metadata';
+import { MetadataTreeView, useMetadata } from '../../metadata';
 import ExtensionPrompts from './extension-prompts';
+import LibSettingsDialog from '../dialog/lib-settings';
 
 const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
   const enableMetadataManagement = useMemo(() => {
@@ -12,53 +13,14 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [window.app.pageOptions.enableMetadataManagement, currentRepoInfo]);
 
-  const [showMetadataStatusManagementDialog, setShowMetadataStatusManagementDialog] = useState(false);
-  const [showMetadataFaceRecognitionDialog, setShowMetadataFaceRecognitionDialog] = useState(false);
-  const { enableMetadata, updateEnableMetadata, enableFaceRecognition, updateEnableFaceRecognition, navigation } = useMetadata();
-  const moreOperations = useMemo(() => {
-    if (!enableMetadataManagement || !currentRepoInfo.is_admin) return [];
-    let operations = [
-      { key: 'extended-properties', value: gettext('Extended properties') }
-    ];
-    if (enableMetadata) {
-      operations.push({ key: 'face-recognition', value: gettext('Face recognition') });
-    }
-    return operations;
-  }, [enableMetadataManagement, enableMetadata, currentRepoInfo]);
-
-  const moreOperationClick = useCallback((operationKey) => {
-    switch (operationKey) {
-      case 'extended-properties': {
-        setShowMetadataStatusManagementDialog(true);
-        break;
-      }
-      case 'face-recognition': {
-        setShowMetadataFaceRecognitionDialog(true);
-        break;
-      }
-      default:
-        break;
-    }
-  }, []);
-
-  const closeMetadataManagementDialog = useCallback(() => {
-    setShowMetadataStatusManagementDialog(false);
-  }, []);
-
-  const closeMetadataFaceRecognitionDialog = useCallback(() => {
-    setShowMetadataFaceRecognitionDialog(false);
-  }, []);
-
-  const openMetadataFaceRecognition = useCallback(() => {
-    updateEnableFaceRecognition(true);
-  }, [updateEnableFaceRecognition]);
-
-  const toggleMetadataStatus = useCallback((value) => {
-    updateEnableMetadata(value);
-  }, [updateEnableMetadata]);
+  const { enableMetadata, navigation } = useMetadata();
 
+  let [isSettingsDialogOpen, setSettingsDialogOpen] = useState(false);
+  const toggleSettingsDialog = () => {
+    setSettingsDialogOpen(!isSettingsDialogOpen);
+  };
   const onExtendedProperties = useCallback(() => {
-    setShowMetadataStatusManagementDialog(true);
+    setSettingsDialogOpen(true);
   }, []);
 
   if (!enableMetadataManagement) return null;
@@ -67,9 +29,6 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
     <>
       <TreeSection
         title={gettext('Views')}
-        moreKey={{ name: 'views' }}
-        moreOperations={moreOperations}
-        moreOperationClick={moreOperationClick}
       >
         {!enableMetadata ? (
           <ExtensionPrompts onExtendedProperties={onExtendedProperties} />
@@ -77,20 +36,12 @@ const DirViews = ({ userPerm, repoID, currentPath, currentRepoInfo }) => {
           <MetadataTreeView userPerm={userPerm} currentPath={currentPath} />
         ) : null}
       </TreeSection>
-      {showMetadataStatusManagementDialog && (
-        <MetadataStatusManagementDialog
-          value={enableMetadata}
+      {isSettingsDialogOpen && (
+        <LibSettingsDialog
           repoID={repoID}
-          toggle={closeMetadataManagementDialog}
-          submit={toggleMetadataStatus}
-        />
-      )}
-      {showMetadataFaceRecognitionDialog && (
-        <MetadataFaceRecognitionDialog
-          value={enableFaceRecognition}
-          repoID={repoID}
-          toggle={closeMetadataFaceRecognitionDialog}
-          submit={openMetadataFaceRecognition}
+          currentRepoInfo={currentRepoInfo}
+          tab="extendedPropertiesSetting"
+          toggleDialog={toggleSettingsDialog}
         />
       )}
     </>
@@ -101,7 +52,7 @@ DirViews.propTypes = {
   userPerm: PropTypes.string,
   repoID: PropTypes.string,
   currentPath: PropTypes.string,
-  onNodeClick: PropTypes.func,
+  currentRepoInfo: PropTypes.object.isRequired,
 };
 
 export default DirViews;
diff --git a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
index 24655d8606..f9c68353fc 100644
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
@@ -5,18 +5,16 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
 import { Link, navigate } from '@gatsbyjs/reach-router';
 import { Utils } from '../../utils/utils';
-import { gettext, siteRoot, isPro, username, folderPermEnabled, isSystemStaff, enableResetEncryptedRepoPassword, isEmailConfigured, enableRepoAutoDel } from '../../utils/constants';
+import { gettext, siteRoot, isPro, username, folderPermEnabled, isSystemStaff, enableResetEncryptedRepoPassword, isEmailConfigured } from '../../utils/constants';
 import ModalPortal from '../../components/modal-portal';
 import ShareDialog from '../../components/dialog/share-dialog';
 import LibSubFolderPermissionDialog from '../../components/dialog/lib-sub-folder-permission-dialog';
 import DeleteRepoDialog from '../../components/dialog/delete-repo-dialog';
 import ChangeRepoPasswordDialog from '../../components/dialog/change-repo-password-dialog';
 import ResetEncryptedRepoPasswordDialog from '../../components/dialog/reset-encrypted-repo-password-dialog';
-import LibOldFilesAutoDelDialog from '../../components/dialog/lib-old-files-auto-del-dialog';
 import Rename from '../rename';
 import { seafileAPI } from '../../utils/seafile-api';
 import { userAPI } from '../../utils/user-api';
-import LibHistorySettingDialog from '../dialog/lib-history-setting-dialog';
 import toaster from '../toast';
 import RepoAPITokenDialog from '../dialog/repo-api-token-dialog';
 import RepoShareAdminDialog from '../dialog/repo-share-admin-dialog';
@@ -55,7 +53,6 @@ class SharedRepoListItem extends React.Component {
       isRenaming: false,
       isStarred: this.props.repo.starred,
       isFolderPermissionDialogOpen: false,
-      isHistorySettingDialogShow: false,
       isDeleteDialogShow: false,
       isAPITokenDialogShow: false,
       isTransferDialogShow: false,
@@ -63,7 +60,6 @@ class SharedRepoListItem extends React.Component {
       isRepoDeleted: false,
       isChangePasswordDialogShow: false,
       isResetPasswordDialogShow: false,
-      isOldFilesAutoDelDialogOpen: false
     };
     this.isDeparementOnwerGroupMember = false;
   }
@@ -182,9 +178,6 @@ class SharedRepoListItem extends React.Component {
       case 'Unshare':
         this.onItemUnshare();
         break;
-      case 'History Setting':
-        this.onHistorySettingToggle();
-        break;
       case 'API Token':
         this.onAPITokenToggle();
         break;
@@ -203,9 +196,6 @@ class SharedRepoListItem extends React.Component {
       case 'Unwatch File Changes':
         this.unwatchFileChanges();
         break;
-      case 'Old Files Auto Delete':
-        this.toggleOldFilesAutoDelDialog();
-        break;
       // no default
     }
   };
@@ -273,10 +263,6 @@ class SharedRepoListItem extends React.Component {
     this.setState({ isFolderPermissionDialogOpen: !this.state.isFolderPermissionDialogOpen });
   };
 
-  onHistorySettingToggle = () => {
-    this.setState({ isHistorySettingDialogShow: !this.state.isHistorySettingDialogShow });
-  };
-
   onItemShare = () => {
     this.setState({ isShowSharedDialog: true });
   };
@@ -328,10 +314,6 @@ class SharedRepoListItem extends React.Component {
     this.setState({ isRepoShareAdminDialogOpen: !this.state.isRepoShareAdminDialogOpen });
   };
 
-  toggleOldFilesAutoDelDialog = () => {
-    this.setState({ isOldFilesAutoDelDialogOpen: !this.state.isOldFilesAutoDelDialogOpen });
-  };
-
   onAPITokenToggle = () => {
     this.setState({ isAPITokenDialogShow: !this.state.isAPITokenDialogShow });
   };
@@ -362,9 +344,6 @@ class SharedRepoListItem extends React.Component {
       case 'Share':
         translateResult = gettext('Share');
         break;
-      case 'History Setting':
-        translateResult = gettext('History Setting');
-        break;
       case 'Share Admin':
         translateResult = gettext('Share Admin');
         break;
@@ -380,9 +359,6 @@ class SharedRepoListItem extends React.Component {
       case 'Unwatch File Changes':
         translateResult = gettext('Unwatch File Changes');
         break;
-      case 'Old Files Auto Delete':
-        translateResult = gettext('Auto Deletion Setting');
-        break;
       case 'API Token':
         translateResult = 'API Token'; // translation is not needed here
         break;
@@ -401,9 +377,6 @@ class SharedRepoListItem extends React.Component {
   getAdvancedOperations = () => {
     const operations = [];
     operations.push('API Token');
-    if (enableRepoAutoDel) {
-      operations.push('Old Files Auto Delete');
-    }
     return operations;
   };
 
@@ -435,9 +408,8 @@ class SharedRepoListItem extends React.Component {
               const monitorOp = repo.monitored ? 'Unwatch File Changes' : 'Watch File Changes';
               operations.push(monitorOp);
             }
-            operations.push('Divider', 'History Setting');
             if (Utils.isDesktop()) {
-              operations.push('Advanced');
+              operations.push('Divider', 'Advanced');
             }
             return operations;
           } else {
@@ -803,15 +775,6 @@ class SharedRepoListItem extends React.Component {
             />
           </ModalPortal>
         }
-        {this.state.isHistorySettingDialogShow && (
-          <ModalPortal>
-            <LibHistorySettingDialog
-              repoID={repo.repo_id}
-              itemName={repo.repo_name}
-              toggleDialog={this.onHistorySettingToggle}
-            />
-          </ModalPortal>
-        )}
         {this.state.isAPITokenDialogShow && (
           <ModalPortal>
             <RepoAPITokenDialog
@@ -845,14 +808,6 @@ class SharedRepoListItem extends React.Component {
             />
           </ModalPortal>
         )}
-        {this.state.isOldFilesAutoDelDialogOpen && (
-          <ModalPortal>
-            <LibOldFilesAutoDelDialog
-              repoID={repo.repo_id}
-              toggleDialog={this.toggleOldFilesAutoDelDialog}
-            />
-          </ModalPortal>
-        )}
         {this.state.isTransferDialogShow && (
           <ModalPortal>
             <TransferDialog
diff --git a/frontend/src/css/lib-settings.css b/frontend/src/css/lib-settings.css
new file mode 100644
index 0000000000..11b8036cd6
--- /dev/null
+++ b/frontend/src/css/lib-settings.css
@@ -0,0 +1,53 @@
+.lib-settings-dialog {
+  max-width: 760px;
+}
+
+@media (min-width: 768px) {
+  .lib-settings-dialog .modal-content {
+    min-height: 534px;
+  }
+}
+
+.lib-setting-nav {
+  border-bottom: 1px solid rgba(0,40,100,0.12) !important;
+}
+
+@media (min-width: 768px) {
+  .lib-setting-nav {
+    min-width: 240px;
+    border-bottom: none;
+    border-right: 1px solid rgba(0,40,100,0.12) !important;
+  }
+}
+
+.lib-setting-nav .nav-pills .nav-item .nav-link {
+  margin: 0;
+  padding: 0 10px;
+  height: 32px;
+  flex: 1 1 auto;
+}
+
+.lib-setting-nav .nav-pills .nav-item .nav-link.active {
+  background: #f5f5f5;
+  color: inherit;
+  position: relative;
+}
+
+.lib-setting-nav .nav-pills .nav-item .nav-link.active::before {
+  content: '';
+  display: block;
+  width: 4px;
+  height: 24px;
+  background-color: #ff8000;
+  border-radius: 2px;
+  position: absolute;
+  top: 4px;
+  left: -8px;
+  z-index: 0;
+}
+
+.lib-settings-dialog .tab-pane {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
diff --git a/frontend/src/metadata/components/dialog/metadata-face-recognition-dialog/index.js b/frontend/src/metadata/components/dialog/metadata-face-recognition-dialog/index.js
index fc104d0601..ff2f844a1f 100644
--- a/frontend/src/metadata/components/dialog/metadata-face-recognition-dialog/index.js
+++ b/frontend/src/metadata/components/dialog/metadata-face-recognition-dialog/index.js
@@ -1,6 +1,6 @@
 import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { ModalBody, ModalFooter, Button } from 'reactstrap';
 import classnames from 'classnames';
 import Switch from '../../../../components/common/switch';
 import { gettext } from '../../../../utils/constants';
@@ -10,7 +10,7 @@ import { Utils } from '../../../../utils/utils';
 
 import './index.css';
 
-const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggle, submit }) => {
+const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggleDialog: toggle, submit }) => {
   const [value, setValue] = useState(oldValue);
   const [submitting, setSubmitting] = useState(false);
 
@@ -36,9 +36,8 @@ const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggle, submit
   }, [value]);
 
   return (
-    <Modal className="metadata-face-recognition-dialog" isOpen={true} toggle={onToggle}>
-      <ModalHeader toggle={onToggle}>{gettext('Face recognition management')}</ModalHeader>
-      <ModalBody>
+    <>
+      <ModalBody className="metadata-face-recognition-dialog">
         <Switch
           checked={value}
           disabled={submitting || oldValue}
@@ -48,9 +47,9 @@ const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggle, submit
           onChange={onValueChange}
           placeholder={gettext('Face recognition')}
         />
-        <div className="tip">
+        <p className="tip m-0">
           {gettext('Enable face recognition to identify people in your photos.')}
-        </div>
+        </p>
       </ModalBody>
       {!oldValue && (
         <ModalFooter>
@@ -58,14 +57,14 @@ const MetadataFaceRecognitionDialog = ({ value: oldValue, repoID, toggle, submit
           <Button color="primary" disabled={oldValue === value || submitting} onClick={onSubmit}>{gettext('Submit')}</Button>
         </ModalFooter>
       )}
-    </Modal>
+    </>
   );
 };
 
 MetadataFaceRecognitionDialog.propTypes = {
   value: PropTypes.bool.isRequired,
   repoID: PropTypes.string.isRequired,
-  toggle: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired,
   submit: PropTypes.func.isRequired,
 };
 
diff --git a/frontend/src/metadata/components/dialog/metadata-status-manage-dialog/index.js b/frontend/src/metadata/components/dialog/metadata-status-manage-dialog/index.js
index 4035714a3b..46a23d09ec 100644
--- a/frontend/src/metadata/components/dialog/metadata-status-manage-dialog/index.js
+++ b/frontend/src/metadata/components/dialog/metadata-status-manage-dialog/index.js
@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { ModalBody, ModalFooter, Button } from 'reactstrap';
 import Switch from '../../../../components/common/switch';
 import toaster from '../../../../components/toast';
 import TurnOffConfirmDialog from './turn-off-confirm';
@@ -11,7 +11,7 @@ import { gettext } from '../../../../utils/constants';
 
 import './index.css';
 
-const MetadataStatusManagementDialog = ({ value: oldValue, repoID, toggle, submit }) => {
+const MetadataStatusManagementDialog = ({ value: oldValue, repoID, toggleDialog: toggle, submit }) => {
   const [value, setValue] = useState(oldValue);
   const [submitting, setSubmitting] = useState(false);
   const [showTurnOffConfirmDialog, setShowTurnOffConfirmDialog] = useState(false);
@@ -62,9 +62,8 @@ const MetadataStatusManagementDialog = ({ value: oldValue, repoID, toggle, submi
   return (
     <>
       {!showTurnOffConfirmDialog && (
-        <Modal className="metadata-status-management-dialog" isOpen={true} toggle={onToggle}>
-          <ModalHeader toggle={onToggle}>{gettext('Extended properties management')}</ModalHeader>
-          <ModalBody>
+        <>
+          <ModalBody className="metadata-status-management-dialog">
             <Switch
               checked={value}
               disabled={submitting}
@@ -74,15 +73,15 @@ const MetadataStatusManagementDialog = ({ value: oldValue, repoID, toggle, submi
               onChange={onValueChange}
               placeholder={gettext('Enable extended properties')}
             />
-            <div className="tip">
+            <p className="tip m-0">
               {gettext('After enable extended properties for files, you can add different properties to files, like collaborators, file expiring time, file description. You can also create different views for files based extended properties.')}
-            </div>
+            </p>
           </ModalBody>
           <ModalFooter>
             <Button color="secondary" onClick={onToggle}>{gettext('Cancel')}</Button>
             <Button color="primary" disabled={oldValue === value || submitting} onClick={onSubmit}>{gettext('Submit')}</Button>
           </ModalFooter>
-        </Modal>
+        </>
       )}
       {showTurnOffConfirmDialog && (
         <TurnOffConfirmDialog toggle={turnOffConfirmToggle} submit={turnOffConfirmSubmit} />
@@ -94,7 +93,7 @@ const MetadataStatusManagementDialog = ({ value: oldValue, repoID, toggle, submi
 MetadataStatusManagementDialog.propTypes = {
   value: PropTypes.bool,
   repoID: PropTypes.string.isRequired,
-  toggle: PropTypes.func.isRequired,
+  toggleDialog: PropTypes.func.isRequired,
   submit: PropTypes.func.isRequired,
 };
 
diff --git a/frontend/src/pages/my-libs/mylib-repo-list-item.js b/frontend/src/pages/my-libs/mylib-repo-list-item.js
index 31190087a4..7477deb75e 100644
--- a/frontend/src/pages/my-libs/mylib-repo-list-item.js
+++ b/frontend/src/pages/my-libs/mylib-repo-list-item.js
@@ -12,7 +12,6 @@ import ShareDialog from '../../components/dialog/share-dialog';
 import toaster from '../../components/toast';
 import DeleteRepoDialog from '../../components/dialog/delete-repo-dialog';
 import TransferDialog from '../../components/dialog/transfer-dialog';
-import LibHistorySettingDialog from '../../components/dialog/lib-history-setting-dialog';
 import ChangeRepoPasswordDialog from '../../components/dialog/change-repo-password-dialog';
 import ResetEncryptedRepoPasswordDialog from '../../components/dialog/reset-encrypted-repo-password-dialog';
 import LabelRepoStateDialog from '../../components/dialog/label-repo-state-dialog';
@@ -21,7 +20,6 @@ import Rename from '../../components/rename';
 import MylibRepoMenu from './mylib-repo-menu';
 import RepoAPITokenDialog from '../../components/dialog/repo-api-token-dialog';
 import RepoShareAdminDialog from '../../components/dialog/repo-share-admin-dialog';
-import LibOldFilesAutoDelDialog from '../../components/dialog/lib-old-files-auto-del-dialog';
 import RepoMonitoredIcon from '../../components/repo-monitored-icon';
 import { GRID_MODE, LIST_MODE } from '../../components/dir-view-mode/constants';
 import { userAPI } from '../../utils/user-api';
@@ -52,7 +50,6 @@ class MylibRepoListItem extends React.Component {
       isShareDialogShow: false,
       isDeleteDialogShow: false,
       isTransferDialogShow: false,
-      isHistorySettingDialogShow: false,
       isChangePasswordDialogShow: false,
       isResetPasswordDialogShow: false,
       isLabelRepoStateDialogOpen: false,
@@ -60,7 +57,6 @@ class MylibRepoListItem extends React.Component {
       isAPITokenDialogShow: false,
       isRepoShareAdminDialogOpen: false,
       isRepoDeleted: false,
-      isOldFilesAutoDelDialogOpen: false,
     };
   }
 
@@ -108,9 +104,6 @@ class MylibRepoListItem extends React.Component {
       case 'Transfer':
         this.onTransferToggle();
         break;
-      case 'History Setting':
-        this.onHistorySettingToggle();
-        break;
       case 'Change Password':
         this.onChangePasswordToggle();
         break;
@@ -135,9 +128,6 @@ class MylibRepoListItem extends React.Component {
       case 'Share Admin':
         this.toggleRepoShareAdminDialog();
         break;
-      case 'Old Files Auto Delete':
-        this.toggleOldFilesAutoDelDialog();
-        break;
       default:
         break;
     }
@@ -211,10 +201,6 @@ class MylibRepoListItem extends React.Component {
     this.setState({ isTransferDialogShow: !this.state.isTransferDialogShow });
   };
 
-  onHistorySettingToggle = () => {
-    this.setState({ isHistorySettingDialogShow: !this.state.isHistorySettingDialogShow });
-  };
-
   onChangePasswordToggle = () => {
     this.setState({ isChangePasswordDialogShow: !this.state.isChangePasswordDialogShow });
   };
@@ -239,10 +225,6 @@ class MylibRepoListItem extends React.Component {
     this.setState({ isRepoShareAdminDialogOpen: !this.state.isRepoShareAdminDialogOpen });
   };
 
-  toggleOldFilesAutoDelDialog = () => {
-    this.setState({ isOldFilesAutoDelDialogOpen: !this.state.isOldFilesAutoDelDialogOpen });
-  };
-
   onUnfreezedItem = () => {
     this.setState({
       highlight: false,
@@ -510,15 +492,6 @@ class MylibRepoListItem extends React.Component {
             />
           </ModalPortal>
         )}
-        {this.state.isHistorySettingDialogShow && (
-          <ModalPortal>
-            <LibHistorySettingDialog
-              repoID={repo.repo_id}
-              itemName={repo.repo_name}
-              toggleDialog={this.onHistorySettingToggle}
-            />
-          </ModalPortal>
-        )}
         {this.state.isChangePasswordDialogShow && (
           <ModalPortal>
             <ChangeRepoPasswordDialog
@@ -574,14 +547,6 @@ class MylibRepoListItem extends React.Component {
             />
           </ModalPortal>
         )}
-        {this.state.isOldFilesAutoDelDialogOpen && (
-          <ModalPortal>
-            <LibOldFilesAutoDelDialog
-              repoID={repo.repo_id}
-              toggleDialog={this.toggleOldFilesAutoDelDialog}
-            />
-          </ModalPortal>
-        )}
 
       </Fragment>
     );
diff --git a/frontend/src/pages/my-libs/mylib-repo-menu.js b/frontend/src/pages/my-libs/mylib-repo-menu.js
index a996fbd1d3..8ac876f3fe 100644
--- a/frontend/src/pages/my-libs/mylib-repo-menu.js
+++ b/frontend/src/pages/my-libs/mylib-repo-menu.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import { gettext, isPro, folderPermEnabled, enableRepoSnapshotLabel, enableResetEncryptedRepoPassword, isEmailConfigured, enableRepoAutoDel } from '../../utils/constants';
+import { gettext, isPro, folderPermEnabled, enableRepoSnapshotLabel, enableResetEncryptedRepoPassword, isEmailConfigured } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 
 const propTypes = {
@@ -103,7 +103,7 @@ class MylibRepoMenu extends React.Component {
       operations.push(monitorOp);
     }
 
-    operations.push('Divider', 'History Setting', 'Advanced');
+    operations.push('Divider', 'Advanced');
     // Remove adjacent excess 'Divider'
     for (let i = 0; i < operations.length; i++) {
       if (operations[i] === 'Divider' && operations[i + 1] === 'Divider') {
@@ -120,9 +120,6 @@ class MylibRepoMenu extends React.Component {
     if (this.props.isPC && enableRepoSnapshotLabel) {
       operations.push('Label Current State');
     }
-    if (enableRepoAutoDel) {
-      operations.push('Old Files Auto Delete');
-    }
     return operations;
   };
 
@@ -147,9 +144,6 @@ class MylibRepoMenu extends React.Component {
       case 'Transfer':
         translateResult = gettext('Transfer');
         break;
-      case 'History Setting':
-        translateResult = gettext('History Setting');
-        break;
       case 'Change Password':
         translateResult = gettext('Change Password');
         break;
@@ -174,9 +168,6 @@ class MylibRepoMenu extends React.Component {
       case 'Share Admin':
         translateResult = gettext('Share Admin');
         break;
-      case 'Old Files Auto Delete':
-        translateResult = gettext('Auto Deletion Setting');
-        break;
       case 'Advanced':
         translateResult = gettext('Advanced');
         break;
diff --git a/frontend/src/utils/text-translation.js b/frontend/src/utils/text-translation.js
index 6dbde20e81..811b7411c9 100644
--- a/frontend/src/utils/text-translation.js
+++ b/frontend/src/utils/text-translation.js
@@ -165,10 +165,6 @@ const TextTranslation = {
     key: 'Watch File Changes',
     value: gettext('Watch File Changes')
   },
-  'HISTORY_SETTING': {
-    key: 'History Setting',
-    value: gettext('History Setting')
-  },
   'ADVANCED': {
     key: 'advanced',
     value: gettext('Advanced')
@@ -183,10 +179,6 @@ const TextTranslation = {
     key: 'Label Current State',
     value: gettext('Label Current State')
   },
-  'OLD_FILES_AUTO_DELETE': {
-    key: 'Old Files Auto Delete',
-    value: gettext('Old Files Auto Delete')
-  },
 
   'UNSHARE': {
     key: 'Unshare',
diff --git a/frontend/src/utils/utils.js b/frontend/src/utils/utils.js
index 1b190a8ebf..593eedbb89 100644
--- a/frontend/src/utils/utils.js
+++ b/frontend/src/utils/utils.js
@@ -1,4 +1,5 @@
-import { mediaUrl, gettext, serviceURL, siteRoot, isPro, fileAuditEnabled, canGenerateShareLink, canGenerateUploadLink, shareLinkPasswordMinLength, username, folderPermEnabled, onlyofficeConverterExtensions, enableOnlyoffice, enableSeadoc, enableFileTags, enableRepoSnapshotLabel, enableRepoAutoDel, enableResetEncryptedRepoPassword, isEmailConfigured, isSystemStaff } from './constants';
+import { mediaUrl, gettext, serviceURL, siteRoot, isPro, fileAuditEnabled, canGenerateShareLink, canGenerateUploadLink, shareLinkPasswordMinLength, username, folderPermEnabled, onlyofficeConverterExtensions, enableOnlyoffice, enableSeadoc, enableFileTags, enableRepoSnapshotLabel,
+  enableResetEncryptedRepoPassword, isEmailConfigured, isSystemStaff } from './constants';
 import TextTranslation from './text-translation';
 import React from 'react';
 import toaster from '../components/toast';
@@ -720,7 +721,7 @@ export const Utils = {
     const showResetPasswordMenuItem = isPro && repo.encrypted && enableResetEncryptedRepoPassword && isEmailConfigured;
     const operations = [];
     const DIVIDER = 'Divider';
-    const { SHARE, DELETE, RENAME, TRANSFER, FOLDER_PERMISSION, SHARE_ADMIN, CHANGE_PASSWORD, RESET_PASSWORD, UNWATCH_FILE_CHANGES, WATCH_FILE_CHANGES, HISTORY_SETTING, ADVANCED } = TextTranslation;
+    const { SHARE, DELETE, RENAME, TRANSFER, FOLDER_PERMISSION, SHARE_ADMIN, CHANGE_PASSWORD, RESET_PASSWORD, UNWATCH_FILE_CHANGES, WATCH_FILE_CHANGES, ADVANCED } = TextTranslation;
 
     operations.push(SHARE, DELETE, DIVIDER, RENAME, TRANSFER);
 
@@ -742,7 +743,7 @@ export const Utils = {
       operations.push(monitorOp);
     }
 
-    operations.push(DIVIDER, HISTORY_SETTING);
+    operations.push(DIVIDER);
     const subOpList = Utils.getAdvancedOperations();
     operations.push({ ...ADVANCED, subOpList });
 
@@ -752,7 +753,7 @@ export const Utils = {
 
   getAdvancedOperations: function () {
     const operations = [];
-    const { API_TOKEN, LABEL_CURRENT_STATE, OLD_FILES_AUTO_DELETE } = TextTranslation;
+    const { API_TOKEN, LABEL_CURRENT_STATE } = TextTranslation;
 
     operations.push(API_TOKEN);
 
@@ -760,10 +761,6 @@ export const Utils = {
       operations.push(LABEL_CURRENT_STATE);
     }
 
-    if (enableRepoAutoDel) {
-      operations.push(OLD_FILES_AUTO_DELETE);
-    }
-
     return operations;
   },
 
@@ -796,7 +793,7 @@ export const Utils = {
 
   getSharedRepoOperationList: function (repo, currentGroup, isPublic) {
     const operations = [];
-    const { SHARE, UNSHARE, DELETE, RENAME, FOLDER_PERMISSION, SHARE_ADMIN, UNWATCH_FILE_CHANGES, WATCH_FILE_CHANGES, HISTORY_SETTING, ADVANCED, CHANGE_PASSWORD, RESET_PASSWORD } = TextTranslation;
+    const { SHARE, UNSHARE, DELETE, RENAME, FOLDER_PERMISSION, SHARE_ADMIN, UNWATCH_FILE_CHANGES, WATCH_FILE_CHANGES, ADVANCED, CHANGE_PASSWORD, RESET_PASSWORD, API_TOKEN } = TextTranslation;
 
     const isStaff = currentGroup && currentGroup.admins && currentGroup.admins.indexOf(username) > -1;
     const isRepoOwner = repo.owner_email === username;
@@ -830,9 +827,9 @@ export const Utils = {
               const monitorOp = repo.monitored ? UNWATCH_FILE_CHANGES : WATCH_FILE_CHANGES;
               operations.push(monitorOp);
             }
-            operations.push(DIVIDER, HISTORY_SETTING);
             if (Utils.isDesktop()) {
-              const subOpList = Utils.getAdvancedOperations();
+              operations.push(DIVIDER);
+              const subOpList = [API_TOKEN];
               operations.push({ ...ADVANCED, subOpList });
             }
             return operations;