diff --git a/frontend/src/components/cur-dir-path/dir-tool.js b/frontend/src/components/cur-dir-path/dir-tool.js
index 8ad67eae2a0..c67e798c6ac 100644
--- a/frontend/src/components/cur-dir-path/dir-tool.js
+++ b/frontend/src/components/cur-dir-path/dir-tool.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
-import { gettext, siteRoot } from '../../utils/constants';
+import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import TextTranslation from '../../utils/text-translation';
 import SeahubPopover from '../common/seahub-popover';
@@ -52,41 +52,21 @@ class DirTool extends React.Component {
 
   getMenu = () => {
     const list = [];
-    const { repoID, userPerm, currentPath } = this.props;
-    const { TAGS, TRASH, HISTORY } = TextTranslation;
-    if (userPerm !== 'rw') {
+    const { userPerm, currentPath } = this.props;
+    if (userPerm !== 'rw' || Utils.isMarkdownFile(currentPath)) {
       return list;
     }
-    if (Utils.isMarkdownFile(currentPath)) {
-      return list;
-    }
-
+    const { TAGS } = TextTranslation;
     list.push(TAGS);
-
-    if (Utils.getFileName(currentPath)) {
-      let trashUrl = siteRoot + 'repo/' + repoID + '/trash/?path=' + encodeURIComponent(currentPath);
-      list.push({...TRASH, href: trashUrl});
-    } else {
-      let trashUrl = siteRoot + 'repo/' + repoID + '/trash/';
-      list.push({...TRASH, href: trashUrl});
-      let historyUrl = siteRoot + 'repo/history/' + repoID + '/';
-      list.push({...HISTORY, href: historyUrl});
-    }
     return list;
   };
 
   onMenuItemClick = (item) => {
-    const { key, href } = item;
+    const { key } = item;
     switch (key) {
       case 'Tags':
         this.setState({isRepoTagDialogOpen: !this.state.isRepoTagDialogOpen});
         break;
-      case 'Trash':
-        location.href = href;
-        break;
-      case 'History':
-        location.href = href;
-        break;
     }
   };
 
diff --git a/frontend/src/components/dir-view-mode/dir-column-nav.css b/frontend/src/components/dir-view-mode/dir-column-nav.css
new file mode 100644
index 00000000000..c7c0abb893a
--- /dev/null
+++ b/frontend/src/components/dir-view-mode/dir-column-nav.css
@@ -0,0 +1,20 @@
+.dir-content-nav .tree-section:first-child {
+  margin-top: 12px;
+}
+
+.dir-content-nav .tree-section:last-child {
+  margin-bottom: 28px;
+}
+
+.dir-others .tree-node-inner:hover {
+  background-color: #f0f0f0;
+  border-radius: 0.25rem;
+}
+
+.dir-others .tree-node-inner .tree-node-text {
+  padding-left: 2rem;
+}
+
+.dir-others .tree-node-inner .left-icon {
+  padding-left: 10px;
+}
diff --git a/frontend/src/components/dir-view-mode/dir-column-nav.js b/frontend/src/components/dir-view-mode/dir-column-nav.js
index c5193b6909d..83a28b69484 100644
--- a/frontend/src/components/dir-view-mode/dir-column-nav.js
+++ b/frontend/src/components/dir-view-mode/dir-column-nav.js
@@ -14,6 +14,9 @@ import { gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import TreeSection from '../../components/tree-section';
 import DirViews from './dir-views';
+import DirOthers from './dir-others';
+
+import './dir-column-nav.css';
 
 const propTypes = {
   currentPath: PropTypes.string.isRequired,
@@ -268,7 +271,17 @@ class DirColumnNav extends React.Component {
             repoID={this.props.repoID}
           />
         </TreeSection>
-        <DirViews repoID={this.props.repoID} currentPath={this.props.currentPath} userPerm={this.props.userPerm} onNodeClick={this.onNodeClick}/>
+        <DirViews
+          repoID={this.props.repoID}
+          currentPath={this.props.currentPath}
+          userPerm={this.props.userPerm}
+          onNodeClick={this.onNodeClick}
+        />
+        <DirOthers
+          repoID={this.props.repoID}
+          currentPath={this.props.currentPath}
+          userPerm={this.props.userPerm}
+        />
       </>
     );
   };
diff --git a/frontend/src/components/dir-view-mode/dir-others.js b/frontend/src/components/dir-view-mode/dir-others.js
new file mode 100644
index 00000000000..7e5b1759e1c
--- /dev/null
+++ b/frontend/src/components/dir-view-mode/dir-others.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { gettext, siteRoot } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import TreeSection from '../tree-section';
+
+const DirOthers = ({ userPerm, repoID, currentPath }) => {
+
+  let trashUrl = null;
+  let historyUrl = null;
+  if (userPerm === 'rw' && !Utils.isMarkdownFile(currentPath)) {
+    if (Utils.getFileName(currentPath)) {
+      trashUrl = siteRoot + 'repo/' + repoID + '/trash/?path=' + encodeURIComponent(currentPath);
+    } else {
+      trashUrl = siteRoot + 'repo/' + repoID + '/trash/';
+      historyUrl = siteRoot + 'repo/history/' + repoID + '/';
+    }
+  }
+
+  return (
+    <TreeSection title={gettext('Others')} className="dir-others">
+      {trashUrl &&
+        <div className='tree-node-inner text-nowrap' title={gettext('Trash')} onClick={() => location.href = trashUrl}>
+          <div className="tree-node-text">{gettext('Trash')}</div>
+          <div className="left-icon">
+            <div className="tree-node-icon">
+              <span className="sf3-font-recycle1 sf3-font"></span>
+            </div>
+          </div>
+        </div>
+      }
+      {historyUrl &&
+        <div className='tree-node-inner text-nowrap' title={gettext('History')} onClick={() => location.href = historyUrl}>
+          <div className="tree-node-text">{gettext('History')}</div>
+          <div className="left-icon">
+            <div className="tree-node-icon">
+              <span className="sf3-font-history sf3-font"></span>
+            </div>
+          </div>
+        </div>
+      }
+    </TreeSection>
+  );
+};
+
+DirOthers.propTypes = {
+  userPerm: PropTypes.string,
+  repoID: PropTypes.string,
+  currentPath: PropTypes.string,
+};
+
+export default DirOthers;
diff --git a/frontend/src/components/dir-view-mode/dir-views/index.js b/frontend/src/components/dir-view-mode/dir-views.js
similarity index 80%
rename from frontend/src/components/dir-view-mode/dir-views/index.js
rename to frontend/src/components/dir-view-mode/dir-views.js
index f2e7b8a5b97..567ff35df2e 100644
--- a/frontend/src/components/dir-view-mode/dir-views/index.js
+++ b/frontend/src/components/dir-view-mode/dir-views.js
@@ -1,13 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { gettext } from '../../../utils/constants';
-import { Utils } from '../../../utils/utils';
-import TreeSection from '../../tree-section';
-import { MetadataStatusManagementDialog, MetadataTreeView } from '../../../metadata';
-import metadataAPI from '../../../metadata/api';
-import toaster from '../../toast';
-
-import './index.css';
+import { gettext } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import TreeSection from '../tree-section';
+import { MetadataStatusManagementDialog, MetadataTreeView } from '../../metadata';
+import metadataAPI from '../../metadata/api';
+import toaster from '../toast';
 
 const DirViews = ({ userPerm, repoID, currentPath, onNodeClick }) => {
   const enableMetadataManagement = useMemo(() => {
@@ -63,11 +61,21 @@ const DirViews = ({ userPerm, repoID, currentPath, onNodeClick }) => {
 
   return (
     <>
-      <TreeSection title={gettext('Views')} moreKey={{ name: 'views' }} moreOperations={moreOperations} moreOperationClick={moreOperationClick}>
+      <TreeSection
+        title={gettext('Views')}
+        moreKey={{ name: 'views' }}
+        moreOperations={moreOperations}
+        moreOperationClick={moreOperationClick}
+      >
         {!loading && metadataStatus && (<MetadataTreeView repoID={repoID} currentPath={currentPath} onNodeClick={onNodeClick} />)}
       </TreeSection>
       {showMetadataStatusManagementDialog && (
-        <MetadataStatusManagementDialog value={metadataStatus} repoID={repoID} toggle={closeMetadataManagementDialog} submit={toggleMetadataStatus} />
+        <MetadataStatusManagementDialog
+          value={metadataStatus}
+          repoID={repoID}
+          toggle={closeMetadataManagementDialog}
+          submit={toggleMetadataStatus}
+        />
       )}
     </>
   );
diff --git a/frontend/src/components/dir-view-mode/dir-views/index.css b/frontend/src/components/dir-view-mode/dir-views/index.css
deleted file mode 100644
index 2ebb4ec5dfc..00000000000
--- a/frontend/src/components/dir-view-mode/dir-views/index.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.dir-content-nav .tree-section:first-child {
-  margin-top: 12px;
-}
-
-.dir-content-nav .tree-section:last-child {
-  margin-bottom: 28px;
-}
diff --git a/frontend/src/components/tree-section/index.js b/frontend/src/components/tree-section/index.js
index 24f0d077e47..46c85e463c2 100644
--- a/frontend/src/components/tree-section/index.js
+++ b/frontend/src/components/tree-section/index.js
@@ -1,10 +1,11 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import ItemDropdownMenu from '../dropdown-menu/item-dropdown-menu';
 
 import './index.css';
 
-const TreeSection = ({ title, children, moreKey, moreOperations, moreOperationClick }) => {
+const TreeSection = ({ title, children, moreKey, moreOperations, moreOperationClick, className }) => {
   const [showChildren, setShowChildren] = useState(true);
   const [highlight, setHighlight] = useState(false);
   const [freeze, setFreeze] = useState(false);
@@ -43,8 +44,13 @@ const TreeSection = ({ title, children, moreKey, moreOperations, moreOperationCl
   }, []);
 
   return (
-    <div className="tree-section">
-      <div className={`tree-section-header${highlight ? ' tree-section-header-hover' : ''}`} onMouseEnter={onMouseEnter} onMouseOver={onMouseOver} onMouseLeave={onMouseLeave}>
+    <div className={classnames('tree-section', {[className]: className})}>
+      <div
+        className={classnames('tree-section-header', {'tree-section-header-hover': highlight})}
+        onMouseEnter={onMouseEnter}
+        onMouseOver={onMouseOver}
+        onMouseLeave={onMouseLeave}
+      >
         <div className="tree-section-header-title">{title}</div>
         <div className="tree-section-header-operations">
           {validMoreOperations.length > 0 && (
@@ -81,6 +87,7 @@ TreeSection.propTypes = {
   children: PropTypes.any,
   moreKey: PropTypes.object,
   moreOperationClick: PropTypes.func,
+  className: PropTypes.string,
 };
 
 export default TreeSection;
diff --git a/frontend/src/pages/wiki2/main-panel.js b/frontend/src/pages/wiki2/main-panel.js
index d357e8f09d2..f38f40c675d 100644
--- a/frontend/src/pages/wiki2/main-panel.js
+++ b/frontend/src/pages/wiki2/main-panel.js
@@ -55,8 +55,6 @@ class MainPanel extends Component {
     return { ...props, docUuid: window.seafile.docUuid, currentPageConfig };
   }
 
-
-
   render() {
     const { permission, pathExist, isDataLoading, isViewFile, config, onUpdatePage } = this.props;
     const { currentPageConfig = {}, } = this.state;