diff --git a/frontend/src/components/cur-dir-path/dir-path.js b/frontend/src/components/cur-dir-path/dir-path.js
index 9db4254590..04d6a60bee 100644
--- a/frontend/src/components/cur-dir-path/dir-path.js
+++ b/frontend/src/components/cur-dir-path/dir-path.js
@@ -128,7 +128,7 @@ class DirPath extends React.Component {
 
     return (
       <div className="path-container dir-view-path">
-        <span className="cur-view-path-btn mr-1" style={{marginLeft: '-4px'}} onClick={this.props.toggleTreePanel}>
+        <span className="cur-view-path-btn mr-1" onClick={this.props.toggleTreePanel}>
           <span className="sf3-font-side-bar sf3-font"></span>
         </span>
         {this.props.pathPrefix && this.props.pathPrefix.map((item, index) => {
diff --git a/frontend/src/components/cur-dir-path/index.js b/frontend/src/components/cur-dir-path/index.js
index ca7de8a76f..f864747f14 100644
--- a/frontend/src/components/cur-dir-path/index.js
+++ b/frontend/src/components/cur-dir-path/index.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Utils } from '../../utils/utils';
 import SortOptionsDialog from '../../components/dialog/sort-options';
@@ -57,7 +57,7 @@ class CurDirPath extends React.Component {
   render() {
     const isDesktop = Utils.isDesktop();
     return (
-      <Fragment>
+      <div className="cur-dir-path d-flex justify-content-between align-items-center">
         <DirPath
           repoID={this.props.repoID}
           repoName={this.props.repoName}
@@ -104,7 +104,7 @@ class CurDirPath extends React.Component {
           sortItems={this.props.sortItems}
         />
         }
-      </Fragment>
+      </div>
     );
   }
 }
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 3bba4aa167..fe3c6d6054 100644
--- a/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js
+++ b/frontend/src/components/dialog/copy-move-dirent-progress-dialog.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { gettext } from '../../utils/constants';
+import '../../css/copy-move-dirent-progress-dialog.css';
 
 const propTypes = {
   type: PropTypes.oneOf(['move', 'copy']).isRequired,
@@ -13,7 +14,6 @@ const propTypes = {
 class CopyMoveDirentProgressDialog extends React.Component {
 
   render() {
-
     let { type , asyncOperationProgress, asyncOperatedFilesLength } = this.props;
     let title = type === 'move' ? gettext('Move {num} items') : gettext('Copy {num} items');
     title = title.replace('{num}', asyncOperatedFilesLength);
@@ -23,10 +23,10 @@ class CopyMoveDirentProgressDialog extends React.Component {
       textAlign: 'left',
     };
     return (
-      <Modal isOpen={true} toggle={this.props.toggleDialog}>
+      <Modal isOpen={true} toggle={this.props.toggleDialog} className="copy-move-dirent-progress-dialog">
         <ModalHeader toggle={this.props.toggleDialog}>{title}</ModalHeader>
-        <ModalBody style={{minHeight: '80px'}}>
-          <div className="progress" style={{height: '40px'}}>
+        <ModalBody>
+          <div className="progress">
             <div
               className="progress-bar pl-2"
               role="progressbar"
diff --git a/frontend/src/components/toolbar/selected-dirents-toolbar.js b/frontend/src/components/toolbar/selected-dirents-toolbar.js
index 423962ac83..af5affa6b7 100644
--- a/frontend/src/components/toolbar/selected-dirents-toolbar.js
+++ b/frontend/src/components/toolbar/selected-dirents-toolbar.js
@@ -335,12 +335,10 @@ class MultipleDirOperationToolbar extends React.Component {
     return (
       <Fragment>
         <div className="selected-dirents-toolbar">
-          {selectedLen > 0 &&
-            <span className="cur-view-path-btn px-2" style={{ marginLeft: '-10px' }} onClick={this.props.unSelectDirent}>
-              <span className="sf3-font-x-01 sf3-font mr-2" aria-label={gettext('Unselect')} title={gettext('Unselect')}></span>
-              <span>{selectedLen}{' '}{gettext('selected')}</span>
-            </span>
-          }
+          <span className="cur-view-path-btn px-2" onClick={this.props.unSelectDirent}>
+            <span className="sf3-font-x-01 sf3-font mr-2" aria-label={gettext('Unselect')} title={gettext('Unselect')}></span>
+            <span>{selectedLen}{' '}{gettext('selected')}</span>
+          </span>
           {canModify &&
             <span className="cur-view-path-btn" onClick={this.onMoveToggle}>
               <span className="sf3-font-move1 sf3-font" aria-label={gettext('Move')} title={gettext('Move')}></span>
diff --git a/frontend/src/css/copy-move-dirent-progress-dialog.css b/frontend/src/css/copy-move-dirent-progress-dialog.css
new file mode 100644
index 0000000000..10a341ccbb
--- /dev/null
+++ b/frontend/src/css/copy-move-dirent-progress-dialog.css
@@ -0,0 +1,7 @@
+.copy-move-dirent-progress-dialog .modal-body {
+  min-height: 80px;
+}
+
+.copy-move-dirent-progress-dialog .modal-body .progress {
+  height: 40px;
+}
diff --git a/frontend/src/css/draft.css b/frontend/src/css/draft.css
index 4b7d5d203c..dc7aea8582 100644
--- a/frontend/src/css/draft.css
+++ b/frontend/src/css/draft.css
@@ -1,3 +1,11 @@
+#draft {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
 #wrapper {
   height: 100%;
   width: 100%;
@@ -65,9 +73,11 @@
   display: flex;
   margin-right: 10px;
 }
+
 .seafile-toggle-diff .custom-switch .custom-switch-indicator {
   border: 1px solid #e9ecef;
 }
+
 .seafile-toggle-diff .custom-switch-input:checked ~ .custom-switch-indicator {
   background-color: #f19645;
 }
@@ -77,6 +87,7 @@
   background-color: #fff;
   height: 100%;
 }
+
 .review-side-panel-head {
   border-bottom: 1px solid #e5e5e5;
   line-height: 3em;
@@ -84,33 +95,41 @@
   text-align: center;
   font-weight: 700;
 }
+
 .review-side-panel-body {
   padding: 1rem 1rem 3rem;
   overflow-y: scroll;
   height: 100%;
 }
+
 .review-side-panel-body .dirent-table-container {
   padding-left: 0;
 }
+
 .dirent-table-container th {
   word-wrap: break-word;
   word-break: normal;
 }
+
 .dirent-table-container td a:hover {
   text-decoration: underline;
 }
+
 .review-side-panel-item {
   border-bottom: 1px solid #e6e6dd;
   padding: 1em 0;
 }
+
 .review-side-panel-item:last-child {
   border: 0;
 }
+
 .review-side-panel-item .reviewer-info,
 .review-side-panel-item .author-info {
   display: flex;
   align-items: center;
 }
+
 .review-side-panel-header {
   display: flex;
   justify-content: space-between;
@@ -119,20 +138,24 @@
   color: #666;
   font-size: 0.8125rem;
 }
+
 .review-side-panel-item i {
   color: #c8c8c8;
   margin: 5px 5px 0 0;
   font-size: 1rem;
 }
+
 .review-side-panel-item i:hover {
   cursor: pointer;
   color: #a4a4a4;
 }
+
 .review-side-panel-avatar {
   margin-right: 10px;
   height: 1.5rem;
   width: 1.5rem;
 }
+
 .review-side-panel-item .reviewer-name,
 .review-side-panel-item .author-name {
   height: 2rem;
@@ -150,25 +173,31 @@
 .review-side-panel-nav {
   margin: 0;
 }
+
 .review-side-panel-nav .nav-item {
   width: 33.3%;
   padding-top: 4px;
 }
+
 .review-side-panel-nav .nav-item .nav-link {
   margin: 0 auto;
 }
+
 .review-side-panel-nav .nav-item .nav-link.active {
   border-color: #f19645;
   color: #f19645;
 }
+
 .review-side-panel-nav .nav-item i {
   padding: 0 8px;
   font-size: 1rem;
   width: 1rem;
 }
+
 .review-side-panel .tab-content {
   height: calc(100% - 38px);
 }
+
 .review-side-panel .tab-content .tab-pane {
   height: 100%;
 }
diff --git a/frontend/src/css/layout.css b/frontend/src/css/layout.css
index fe52f7a9e6..445afdfe16 100644
--- a/frontend/src/css/layout.css
+++ b/frontend/src/css/layout.css
@@ -102,6 +102,10 @@
   border-bottom: 1px solid #eee;
 }
 
+.cur-view-path .cur-dir-path {
+  height: 32px;
+}
+
 .cur-view-path .cur-view-path-btn {
   cursor: pointer;
   font-size: 14px;
diff --git a/frontend/src/css/lib-content-view.css b/frontend/src/css/lib-content-view.css
index 77d9fa8850..643076accf 100644
--- a/frontend/src/css/lib-content-view.css
+++ b/frontend/src/css/lib-content-view.css
@@ -245,6 +245,10 @@
   background: #f5f5f5;
 }
 
+.dir-view-path .cur-view-path-btn {
+  margin-left: -4px;
+}
+
 .dir-view-path .path-item {
   min-width: 0; /* overwrite some styles */
   padding: 0 6px;
diff --git a/frontend/src/css/selected-dirents-toolbar.css b/frontend/src/css/selected-dirents-toolbar.css
index b7fa8b2af9..30afa22483 100644
--- a/frontend/src/css/selected-dirents-toolbar.css
+++ b/frontend/src/css/selected-dirents-toolbar.css
@@ -1,4 +1,5 @@
 .cur-view-path .selected-dirents-toolbar {
+  margin-top: 24px;
   height: 24px;
 }
 
@@ -7,6 +8,10 @@
   margin-right: 20px;
 }
 
+.cur-view-path .selected-dirents-toolbar .cur-view-path-btn:first-child {
+  margin-left: -10px;
+}
+
 .cur-view-path .selected-dirents-toolbar .dropdown {
   vertical-align: unset;
   height: 24px;
diff --git a/frontend/src/css/toolbar.css b/frontend/src/css/toolbar.css
index cff19a679b..93a4e44300 100644
--- a/frontend/src/css/toolbar.css
+++ b/frontend/src/css/toolbar.css
@@ -34,64 +34,6 @@
 }
 
 /* end file-operation toolbar */
-
-/* begin view-mode toolbar */
-.view-modes {
-  padding: 2px;
-  background-color: #e5e6e7;
-  border-radius: 3px;
-  height: 32px;
-  width: 92px;
-  position: relative;
-}
-
-.sf-view-mode-btn {
-  width: 44px;
-  height: 28px;
-  padding: 0;
-  background-color: transparent;
-  color: #444;
-  font-size: 14px;
-  line-height: 2;
-  border: 0;
-  border-radius: 2px;
-  font-weight: normal;
-  position: absolute;
-  z-index: 2;
-  width: 48px;
-}
-
-.sf-view-mode-btn:hover {
-  background-color: transparent;
-}
-
-.sf-view-mode-btn:focus {
-  color: #444;
-  background-color: transparent;
-  border-color: none;
-  box-shadow: none;
-}
-
-.sf-view-mode-btn.btn-secondary:not(:disabled):not(.disabled):active:focus {
-  box-shadow: none;
-}
-
-.view-modes .view-modes-bg.transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-  background-color: #fff;
-  position: absolute;
-  width: 44px;
-  height: 28px;
-  top: 2px;
-  left: 2px;
-  z-index: 1;
-  opacity: 0.75;
-  border-radius: 3px;
-}
-/* end view-mode toolbar */
-
 #cur-folder-more-op-toggle {
   margin-left: 10px;
   margin-right: -4px;
diff --git a/frontend/src/draft.js b/frontend/src/draft.js
index 433bfd8aed..09ec7fe6b0 100644
--- a/frontend/src/draft.js
+++ b/frontend/src/draft.js
@@ -5,7 +5,7 @@ import './css/draft.css';
 
 export default function Draft() {
   return (
-    <div style={{display: 'flex', flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
+    <div id="draft">
       <h1>Draft module</h1>
       <div>The current module is no longer supported</div>
     </div>
diff --git a/frontend/src/pages/lib-content-view/lib-content-container.js b/frontend/src/pages/lib-content-view/lib-content-container.js
index 231889701e..3bf3619381 100644
--- a/frontend/src/pages/lib-content-view/lib-content-container.js
+++ b/frontend/src/pages/lib-content-view/lib-content-container.js
@@ -187,67 +187,63 @@ class LibContentContainer extends React.Component {
             </div>
           }
           <div className="cur-view-path d-block" style={curViewPathStyle}>
-            <div className="d-flex justify-content-between align-items-center CurDirPath" style={{height: '32px'}}>
-              <CurDirPath
-                repoID={repoID}
-                repoName={this.props.currentRepoInfo.repo_name}
-                repoEncrypted={this.props.repoEncrypted}
-                isGroupOwnedRepo={this.props.isGroupOwnedRepo}
-                pathPrefix={this.props.pathPrefix}
-                currentPath={this.props.path}
-                userPerm={this.props.userPerm}
-                isViewFile={this.props.isViewFile}
-                onTabNavClick={this.props.onTabNavClick}
-                onPathClick={this.onPathClick}
-                updateUsedRepoTags={this.props.updateUsedRepoTags}
-                fileTags={this.props.fileTags}
-                onDeleteRepoTag={this.props.onDeleteRepoTag}
-                direntList={this.props.direntList}
-                sortBy={this.props.sortBy}
-                sortOrder={this.props.sortOrder}
-                sortItems={this.props.sortItems}
-                toggleTreePanel={this.props.toggleTreePanel}
-                currentMode={this.props.currentMode}
-                switchViewMode={this.props.switchViewMode}
-                isCustomPermission={this.props.isCustomPermission}
-                enableDirPrivateShare={this.props.enableDirPrivateShare}
-                showShareBtn={this.props.showShareBtn}
-                onAddFolder={this.props.onAddFolder}
-                onAddFile={this.props.onAddFile}
-                onUploadFile={this.props.onUploadFile}
-                onUploadFolder={this.props.onUploadFolder}
-                fullDirentList={this.props.fullDirentList}
-                filePermission={this.props.filePermission}
-                onFileTagChanged={this.props.onToolbarFileTagChanged}
-                repoTags={this.props.repoTags}
-              />
-            </div>
-            <div style={{marginTop: '24px'}}>
-              <ToolbarForSelectedDirents
-                repoID={this.props.repoID}
-                path={this.props.path}
-                userPerm={this.props.userPerm}
-                repoEncrypted={this.props.repoEncrypted}
-                repoTags={this.props.repoTags}
-                selectedDirentList={this.props.selectedDirentList}
-                direntList={this.props.direntList}
-                onItemsMove={this.props.onItemsMove}
-                onItemsCopy={this.props.onItemsCopy}
-                onItemsDelete={this.props.onItemsDelete}
-                onItemRename={this.props.onItemRename}
-                isRepoOwner={this.props.isRepoOwner}
-                currentRepoInfo={this.props.currentRepoInfo}
-                enableDirPrivateShare={this.props.enableDirPrivateShare}
-                updateDirent={this.props.updateDirent}
-                unSelectDirent={this.props.unSelectDirent}
-                onFilesTagChanged={this.props.onFilesTagChanged}
-                showShareBtn={this.props.showShareBtn}
-                isGroupOwnedRepo={this.props.isGroupOwnedRepo}
-                showDirentDetail={this.props.showDirentDetail}
-                currentMode={this.props.currentMode}
-                switchViewMode={this.props.switchViewMode}
-              />
-            </div>
+            <CurDirPath
+              repoID={repoID}
+              repoName={this.props.currentRepoInfo.repo_name}
+              repoEncrypted={this.props.repoEncrypted}
+              isGroupOwnedRepo={this.props.isGroupOwnedRepo}
+              pathPrefix={this.props.pathPrefix}
+              currentPath={this.props.path}
+              userPerm={this.props.userPerm}
+              isViewFile={this.props.isViewFile}
+              onTabNavClick={this.props.onTabNavClick}
+              onPathClick={this.onPathClick}
+              updateUsedRepoTags={this.props.updateUsedRepoTags}
+              fileTags={this.props.fileTags}
+              onDeleteRepoTag={this.props.onDeleteRepoTag}
+              direntList={this.props.direntList}
+              sortBy={this.props.sortBy}
+              sortOrder={this.props.sortOrder}
+              sortItems={this.props.sortItems}
+              toggleTreePanel={this.props.toggleTreePanel}
+              currentMode={this.props.currentMode}
+              switchViewMode={this.props.switchViewMode}
+              isCustomPermission={this.props.isCustomPermission}
+              enableDirPrivateShare={this.props.enableDirPrivateShare}
+              showShareBtn={this.props.showShareBtn}
+              onAddFolder={this.props.onAddFolder}
+              onAddFile={this.props.onAddFile}
+              onUploadFile={this.props.onUploadFile}
+              onUploadFolder={this.props.onUploadFolder}
+              fullDirentList={this.props.fullDirentList}
+              filePermission={this.props.filePermission}
+              onFileTagChanged={this.props.onToolbarFileTagChanged}
+              repoTags={this.props.repoTags}
+            />
+            <ToolbarForSelectedDirents
+              repoID={this.props.repoID}
+              path={this.props.path}
+              userPerm={this.props.userPerm}
+              repoEncrypted={this.props.repoEncrypted}
+              repoTags={this.props.repoTags}
+              selectedDirentList={this.props.selectedDirentList}
+              direntList={this.props.direntList}
+              onItemsMove={this.props.onItemsMove}
+              onItemsCopy={this.props.onItemsCopy}
+              onItemsDelete={this.props.onItemsDelete}
+              onItemRename={this.props.onItemRename}
+              isRepoOwner={this.props.isRepoOwner}
+              currentRepoInfo={this.props.currentRepoInfo}
+              enableDirPrivateShare={this.props.enableDirPrivateShare}
+              updateDirent={this.props.updateDirent}
+              unSelectDirent={this.props.unSelectDirent}
+              onFilesTagChanged={this.props.onFilesTagChanged}
+              showShareBtn={this.props.showShareBtn}
+              isGroupOwnedRepo={this.props.isGroupOwnedRepo}
+              showDirentDetail={this.props.showDirentDetail}
+              currentMode={this.props.currentMode}
+              switchViewMode={this.props.switchViewMode}
+            />
           </div>
           <div className={`cur-view-content lib-content-container ${this.props.isTreePanelShown ? 'view-mode-container' : ''}`} onScroll={this.onItemsScroll}>
             {!this.props.pathExist && this.errMessage}
diff --git a/frontend/src/pages/wiki/main-panel.js b/frontend/src/pages/wiki/main-panel.js
index fb2af8cc2b..26dae5fc17 100644
--- a/frontend/src/pages/wiki/main-panel.js
+++ b/frontend/src/pages/wiki/main-panel.js
@@ -104,7 +104,7 @@ class MainPanel extends Component {
                 {this.props.permission == 'rw' && (
                   Utils.isDesktop() ?
                     <button className="btn btn-secondary operation-item" title={gettext('Edit')} onClick={this.onEditClick}>{gettext('Edit')}</button> :
-                    <span className="fa fa-pencil-alt mobile-toolbar-icon" title={gettext('Edit')} onClick={this.onEditClick} style={{'fontSize': '1.1rem'}}></span>
+                    <span className="fa fa-pencil-alt mobile-toolbar-icon" title={gettext('Edit')} onClick={this.onEditClick}></span>
                 )}
               </div>
               <div className="common-toolbar">
diff --git a/frontend/src/pages/wiki/wiki.css b/frontend/src/pages/wiki/wiki.css
index 09498a065f..3acb9f37ac 100644
--- a/frontend/src/pages/wiki/wiki.css
+++ b/frontend/src/pages/wiki/wiki.css
@@ -138,4 +138,7 @@ img[src=""] {
   .wiki-page-container .article {
     padding: 0 !important;
   }
+  .wiki-main-panel .mobile-toolbar-icon {
+    font-size: 1.1rem;
+  }
 }
diff --git a/frontend/src/pages/wiki2/main-panel.js b/frontend/src/pages/wiki2/main-panel.js
index 8d617f37f2..9503cebc62 100644
--- a/frontend/src/pages/wiki2/main-panel.js
+++ b/frontend/src/pages/wiki2/main-panel.js
@@ -8,7 +8,6 @@ import { Utils } from '../../utils/utils';
 import Account from '../../components/common/account';
 import WikiTopNav from './top-nav';
 import { getCurrentPageConfig } from './utils';
-import WikiExternalOperations from './wiki-external-operations';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -67,7 +66,7 @@ class MainPanel extends Component {
   };
 
   render() {
-    const { permission, pathExist, isDataLoading, isViewFile, config, onAddWikiPage } = this.props;
+    const { permission, pathExist, isDataLoading, isViewFile, config } = this.props;
     const { currentPageConfig = {}, } = this.state;
     const isViewingFile = pathExist && !isDataLoading && isViewFile;
     const isReadOnly = !(permission === 'rw');
diff --git a/frontend/src/pages/wiki2/view-structure/folders/folder-operation-dropdownmenu.js b/frontend/src/pages/wiki2/view-structure/folders/folder-operation-dropdownmenu.js
index 27fa07bb92..16d76ae5be 100644
--- a/frontend/src/pages/wiki2/view-structure/folders/folder-operation-dropdownmenu.js
+++ b/frontend/src/pages/wiki2/view-structure/folders/folder-operation-dropdownmenu.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
-// import DeleteTip from '@/common/delete-tip';
 import { gettext } from '../../../../utils/constants';
 import Icon from '../../../../components/icon';
 
@@ -20,10 +19,7 @@ export default class FolderOperationDropdownMenu extends Component {
     super(props);
     this.state = {
       isMenuShow: false,
-      showTip: false,
     };
-    // this.isDesktop = checkDesktop();
-    this.position = {};
   }
 
   onDropdownToggle = (e) => {
@@ -43,26 +39,6 @@ export default class FolderOperationDropdownMenu extends Component {
     this.props.onDeleteFolder(this.props.folderId);
   };
 
-  // onClickDelete = (e) => {
-  //   if (this.isDesktop) {
-  //     e.stopPropagation();
-  //     const { top, left } = this.iconRef.getBoundingClientRect();
-  //     this.position = {
-  //       top: top,
-  //       left: left,
-  //     };
-  //     setTimeout(() => {
-  //       this.setState({ showTip: true });
-  //     }, 100);
-  //   } else {
-  //     this.onDeleteFolder(e);
-  //   }
-  // };
-
-  closeTip = () => {
-    this.setState({ showTip: false });
-  };
-
   render() {
     return (
       <>
@@ -79,7 +55,6 @@ export default class FolderOperationDropdownMenu extends Component {
             flip={false}
             modifiers={{ preventOverflow: { boundariesElement: document.body } }}
             positionFixed={true}
-            style={{ zIndex: 1051 }}
           >
             <DropdownItem onClick={this.props.onToggleAddView.bind(this, this.props.folderId)}>
               <Icon symbol={'file'}/>
@@ -89,23 +64,12 @@ export default class FolderOperationDropdownMenu extends Component {
               <Icon symbol={'edit'}/>
               <span className="item-text">{gettext('Modify name')}</span>
             </DropdownItem>
-            <DropdownItem
-              // onMouseDown={this.onClickDelete}
-              onMouseDown={this.onDeleteFolder}
-            >
+            <DropdownItem onMouseDown={this.onDeleteFolder}>
               <Icon symbol={'delete'}/>
               <span className="item-text">{gettext('Delete folder')}</span>
             </DropdownItem>
           </DropdownMenu>
         </Dropdown>
-        {/* {this.isDesktop && this.state.showTip &&
-          <DeleteTip
-            position={this.position}
-            toggle={this.closeTip}
-            onDelete={this.onDeleteFolder}
-            deleteTip={gettext('Are_you_sure_you_want_to_delete_this_folder_and_the_pages_in_it')}
-          />
-        } */}
       </>
     );
   }
diff --git a/frontend/src/pages/wiki2/view-structure/views/drop-target-top-view.js b/frontend/src/pages/wiki2/view-structure/views/drop-target-top-view.js
deleted file mode 100644
index 2540445556..0000000000
--- a/frontend/src/pages/wiki2/view-structure/views/drop-target-top-view.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from 'react';
-import { DropTarget } from 'react-dnd';
-import PropTypes from 'prop-types';
-
-const DropTargetTopView = (Placeholder) => class extends React.Component {
-
-  static propTypes = {
-    connectDropTarget: PropTypes.func.isRequired,
-    isOver: PropTypes.bool,
-    canDrop: PropTypes.bool,
-    draggedPage: PropTypes.object,
-    targetFolderId: PropTypes.string,
-    targetViewId: PropTypes.string,
-    onMoveView: PropTypes.func,
-  };
-
-  render() {
-    const { connectDropTarget, isOver, canDrop, draggedPage } = this.props;
-    const { mode } = draggedPage || {};
-    if (mode !== 'view') {
-      return null;
-    }
-    const style = {
-      position: 'absolute',
-      top: 0,
-      width: '100%',
-      zIndex: canDrop ? 1 : -1,
-    };
-    return connectDropTarget(
-      <div style={style}>
-        <Placeholder />
-        {isOver && canDrop && <div className="view-drop-target" />}
-      </div>
-    );
-  }
-};
-
-const target = {
-  drop(props, monitor) {
-    const sourceRow = monitor.getItem();
-    if (sourceRow.mode !== 'view') {
-      return;
-    }
-    const { targetFolderId, targetViewId } = props;
-    const sourceFolderId = sourceRow.folderId;
-    const draggedViewId = sourceRow.data.id;
-    if (draggedViewId !== targetViewId) {
-      props.onMoveView({
-        moved_view_id: draggedViewId,
-        target_view_id: targetViewId,
-        source_view_folder_id: sourceFolderId,
-        target_view_folder_id: targetFolderId,
-        move_position: 'move_above'
-      });
-    }
-  }
-};
-
-function collect(connect, monitor) {
-  return {
-    connectDropTarget: connect.dropTarget(),
-    isOver: monitor.isOver(),
-    canDrop: monitor.canDrop(),
-    draggedPage: monitor.getItem(),
-  };
-}
-
-class Placeholder extends React.Component {
-
-  static propTypes = {
-    key: PropTypes.string,
-  };
-
-  render() {
-    return (
-      <div key={this.props.key} style={{ height: 40, width: '100%' }}/>
-    );
-  }
-}
-
-export default DropTarget('ViewStructure', target, collect)(DropTargetTopView(Placeholder));
diff --git a/frontend/src/pages/wiki2/view-structure/views/page-dropdownmenu.js b/frontend/src/pages/wiki2/view-structure/views/page-dropdownmenu.js
index 30fa0c8790..e3ceebdf37 100644
--- a/frontend/src/pages/wiki2/view-structure/views/page-dropdownmenu.js
+++ b/frontend/src/pages/wiki2/view-structure/views/page-dropdownmenu.js
@@ -141,7 +141,6 @@ export default class PageDropdownMenu extends Component {
           flip={false}
           modifiers={{ preventOverflow: { boundariesElement: document.body } }}
           positionFixed={true}
-          style={{ zIndex: 1051 }}
         >
           <DropdownItem onClick={this.handleCopyLink}>
             <i className="sf3-font sf3-font-sdoc-link" />
diff --git a/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-left-bar-dialog.css b/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-left-bar-dialog.css
deleted file mode 100644
index bd13973df4..0000000000
--- a/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-left-bar-dialog.css
+++ /dev/null
@@ -1,128 +0,0 @@
-.app-settings-dialog .nav .nav-item {
-  padding: 0;
-}
-
-.app-settings-dialog .nav .nav-item .nav-link {
-  padding: 0.5rem 0;
-  font-weight: normal;
-  transition: none;
-  width: 100%;
-}
-
-.app-settings-dialog .nav .nav-item .nav-link.active {
-  color: #ff8000;
-  text-decoration: none;
-  border-bottom: 0.125rem solid #ff8000;
-}
-
-.app-settings-dialog .nav-pills .nav-item .nav-link {
-  padding: 0.3125rem 1rem 0.3125rem 8px;
-}
-
-.app-settings-dialog .nav-pills .nav-item .nav-link:hover {
-  background-color: #f5f5f5;
-}
-
-.app-settings-dialog .nav-pills .nav-item .nav-link.active {
-  background-color: #ff8000;
-  color: #fff;
-  border: none;
-}
-
-.app-settings-dialog .ellipsis {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.app-settings-dialog {
-  max-width: 800px;
-  height: calc(100% - 56px);
-}
-
-.app-settings-dialog .modal-content {
-  height: 100%;
-}
-
-.app-settings-dialog .app-settings-dialog-content {
-  padding: 0;
-  min-height: 27rem;
-  display: flex;
-  flex-direction: row;
-  overflow: hidden;
-}
-
-.app-settings-dialog-content .app-settings-dialog-side {
-  display: flex;
-  flex: 0 0 25%;
-  padding: 12px 8px;
-  border-right: 1px solid #eee;
-}
-
-.app-settings-dialog-content .app-settings-dialog-main {
-  display: flex;
-  flex: 0 0 75%;
-  padding: 12px 8px;
-  overflow: auto;
-}
-
-.app-settings-dialog-content .app-settings-dialog-main .tab-content {
-  flex: 1;
-}
-
-.app-settings-dialog-content .app-settings-dialog-main .tab-pane {
-  height: 100%;
-}
-
-.app-settings-dialog-content .app-settings-dialog-main .no-search-result {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-top: 100px;
-}
-
-.app-settings-dialog-content .app-settings-dialog-main .no-search-result span {
-  color: #aaa;
-  margin-top: 10px;
-}
-
-.app-settings-dialog-content .app-settings-dialog-main .search-text-clear {
-  line-height: 38px;
-  height: 38px;
-  margin-right: 5px;
-}
-
-.app-setting-dialog-icon {
-  width: 100%;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.app-setting-dialog-icon img {
-  max-height: 128px;
-}
-
-.app-setting-dialog-icon-description {
-  color: #999;
-  font-size: 13px;
-}
-
-.app-setting-dialog-name {
-  padding: 10px;
-}
-
-.app-setting-dialog-name .rename-area-input {
-  width: 85%;
-}
-
-.app-setting-dialog-name .rename-area-submit {
-  width: 15%;
-}
-
-.tip {
-  color: #808080;
-  margin-bottom: 1rem;
-}
diff --git a/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-custom-icon.js b/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-custom-icon.js
deleted file mode 100644
index f678b1d334..0000000000
--- a/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-custom-icon.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button } from 'reactstrap';
-import { seafileAPI } from '../../../../utils/seafile-api';
-import { gettext } from '../../../../utils/constants';
-import { getIconURL } from '../../utils';
-
-class AppSettingsDialogCustomIcon extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      iconName: this.props.config.wiki_icon,
-    };
-    this.fileInput = React.createRef();
-  }
-
-  openFileInput = () => {
-    this.fileInput.current.click();
-  };
-
-  uploadFile = () => {
-    if (!this.fileInput.current.files.length) {
-      return;
-    }
-    const file = this.fileInput.current.files[0];
-    this.uploadLocalFile(file).then((iconName) => {
-      let wikiConfig = Object.assign({}, this.props.config, {
-        wiki_icon: iconName,
-      });
-      this.props.updateConfig(wikiConfig);
-      this.props.onToggle();
-      this.setState({
-        iconName: iconName,
-      });
-    });
-  };
-
-  uploadLocalFile = (imageFile) => {
-    let repoID = this.props.repoId;
-    const name = 'wiki-icon-image-' + Date.now().toString() + '.png';
-    return (
-      seafileAPI.getFileServerUploadLink(repoID, '/').then((res) => {
-        const uploadLink = res.data + '?ret-json=1';
-        const newFile = new File([imageFile], name, {type: imageFile.type});
-        const formData = new FormData();
-        formData.append('parent_dir', '/');
-        formData.append('relative_path', '_Internal/Wiki/Icon');
-        formData.append('file', newFile);
-        return seafileAPI.uploadImage(uploadLink, formData);
-      }).then ((res) => {
-        return name;
-      })
-    );
-  };
-
-  render() {
-    let { iconName } = this.state;
-    const src = getIconURL(this.props.repoId, iconName);
-    if (src) {
-      return (
-        <div className="app-setting-dialog-icon">
-          <img src={src} alt="" width={128} height={128} ></img>
-          <p className="mt-2 mb-1 app-setting-dialog-icon-description">
-            {gettext('Please select a png image within 5MB.')}
-          </p>
-          <p className="app-setting-dialog-icon-description">
-            {gettext('Recommended size is 256x256 px.')}
-          </p>
-          <Button color="primary" outline size="sm" onClick={this.openFileInput}>{gettext('Change icon')}</Button>
-          <input className="d-none" type="file" accept="image/png" onChange={this.uploadFile} ref={this.fileInput} />
-        </div>
-      );
-    } else {
-      return (
-        <div className="app-setting-dialog-icon mb-8">
-          <p className="mt-2 mb-1 app-setting-dialog-icon-description">
-            {gettext('Please select a png image within 5MB.')}
-          </p>
-          <p className="app-setting-dialog-icon-description">
-            {gettext('Recommended size is 256x256 px.')}
-          </p>
-          <Button color="primary" outline size="sm" onClick={this.openFileInput}>{gettext('Upload icon')}</Button>
-          <input className="d-none" type="file" accept="image/png" onChange={this.uploadFile} ref={this.fileInput} />
-        </div>
-      );
-    }
-  }
-}
-
-AppSettingsDialogCustomIcon.propTypes = {
-  onToggle: PropTypes.func.isRequired,
-  config: PropTypes.object.isRequired,
-  updateConfig: PropTypes.func.isRequired,
-  repoId: PropTypes.string.isRequired,
-};
-
-export default AppSettingsDialogCustomIcon;
diff --git a/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-icon-color.css b/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-icon-color.css
deleted file mode 100644
index 91f06c8888..0000000000
--- a/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-icon-color.css
+++ /dev/null
@@ -1,71 +0,0 @@
-.app-settings-dialog-icon-color {
-  padding: 10px;
-}
-
-.app-settings-dialog-theme-color .seafile-multicolor-icon-container {
-  padding: 8px;
-}
-
-.app-settings-dialog-theme-color .theme-color-backdrop {
-  width: 60px;
-  height: 60px;
-  line-height: 60px;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  text-align: center;
-  cursor: pointer;
-  border-radius: 50%;
-}
-
-.app-settings-dialog-theme-color .theme-color-backdrop .dtable-font {
-  color: #fff;
-}
-
-.app-settings-dialog-theme-color .theme-color-backdrop:hover {
-  opacity: 1;
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-#app-settings-dialog-theme-color-input {
-  position: relative;
-}
-
-.app-settings-dialog-theme-color .dtable-icon-drop-down {
-  position: absolute;
-  font-size: 12px;
-  color: #b5b5b5;
-  -webkit-transform: scale(0.8);
-  transform: scale(0.8);
-  right: 10px;
-  top: 10px;
-}
-
-.app-settings-dialog-theme-color #app-settings-dialog-theme-color-input:hover {
-  border-color: rgb(179, 179, 179);
-}
-
-.app-settings-dialog-theme-color .app-theme-colors-content {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-.app-settings-dialog-theme-color .app-theme-colors-content .app-theme-color-item {
-  display: inline-flex;
-  height: fit-content;
-  cursor: pointer;
-}
-
-.app-settings-dialog-theme-color .app-theme-colors-content .colorinput-color {
-  width: 2.25rem;
-  height: 2.25rem;
-  border-radius: 50%;
-}
-
-.app-settings-dialog-theme-color .app-theme-colors-content .colorinput-color.light {
-  color: #555;
-}
diff --git a/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-icon-color.js b/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-icon-color.js
deleted file mode 100644
index 75adcb13b3..0000000000
--- a/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-icon-color.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { FormGroup, Label, Tooltip, Button } from 'reactstrap';
-import IconSettingsPopover from './icon-settings-popover';
-import { gettext } from '../../../../utils/constants';
-import { getIconURL } from '../../utils';
-
-import './app-settings-dialog-icon-color.css';
-
-class AppSettingsDialogIconColor extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isShowIconPopover: false,
-      isTooltipOpen: false,
-    };
-    this.renameRef = React.createRef();
-  }
-
-  onIconPopoverToggle = () => {
-    this.setState({ isShowIconPopover: !this.state.isShowIconPopover });
-  };
-
-  onRenameIconToggle = () => {
-    this.setState({ isTooltipOpen: !this.state.isTooltipOpen });
-  };
-
-  render() {
-    const { wiki_icon } = this.props.config;
-    const src = getIconURL(this.props.repoId, wiki_icon);
-    return (
-      <div className="app-settings-dialog-icon-color">
-        <FormGroup className="app-settings-dialog-theme-color">
-          <Label>{gettext('Wiki icon')}</Label>
-          <div className='position-relative'>
-            {wiki_icon ?
-              <>
-                <img src={src} width={60} height={60} alt="" />
-                <div className="theme-color-backdrop" onClick={this.onIconPopoverToggle} id='app-settings-dialog-icon-backdrop'>
-                  <span className="iconfont icon-edit" ref={this.renameRef} style={{color: '#fff', fontSize: '24px'}}></span>
-                </div>
-              </>
-              :
-              <div onClick={this.onIconPopoverToggle} id='app-settings-dialog-icon-backdrop'>
-                <Button onClick={this.onIconPopoverToggle} size="sm" color="primary">{gettext('Select icon')}</Button>
-              </div>
-            }
-            <Tooltip
-              placement="bottom"
-              isOpen={this.state.isTooltipOpen}
-              target={this.renameRef}
-              toggle={this.onRenameIconToggle}
-            >
-              {gettext('Change icon')}
-            </Tooltip>
-          </div>
-        </FormGroup>
-        {this.state.isShowIconPopover &&
-          <IconSettingsPopover
-            onToggle={this.onIconPopoverToggle}
-            targetId='app-settings-dialog-icon-backdrop'
-            config={this.props.config}
-            updateConfig={this.props.updateConfig}
-            repoId={this.props.repoId}
-          />
-        }
-      </div>
-    );
-  }
-}
-
-AppSettingsDialogIconColor.propTypes = {
-  config: PropTypes.object.isRequired,
-  repoId: PropTypes.string.isRequired,
-  updateConfig: PropTypes.func.isRequired,
-};
-
-export default AppSettingsDialogIconColor;
diff --git a/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-icons.js b/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-icons.js
deleted file mode 100644
index 2a98e6d1a6..0000000000
--- a/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-icons.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { mediaUrl } from '../../../../utils/constants';
-
-const ICON_CLASSNAMES = [
-  'default',
-];
-
-class AppSettingsDialogIcons extends React.Component {
-
-  onClickIcon = () => {
-    if (this.props.config.wiki_icon === 'default') {
-      this.props.updateConfig({ wiki_icon: '' });
-    } else {
-      this.props.updateConfig({ wiki_icon: 'default' });
-    }
-    this.props.onToggle();
-  };
-
-  render() {
-    return (
-      <div className="app-settings-dialog-icons">
-        <div className='d-flex flex-wrap'>
-          {ICON_CLASSNAMES.map((name, index) => {
-            return (
-              <div
-                key={index}
-                onClick={(e) => {
-                  this.onClickIcon(name, e);
-                }}
-                className={`seafile-multicolor-icon-container ${index < 5 ? 'top' : ''}`}
-              >
-                <img src={`${mediaUrl}img/wiki/${name}.png`} alt='' />
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    );
-  }
-}
-
-AppSettingsDialogIcons.propTypes = {
-  onToggle: PropTypes.func.isRequired,
-  config: PropTypes.object.isRequired,
-  updateConfig: PropTypes.func.isRequired,
-};
-
-export default AppSettingsDialogIcons;
diff --git a/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-name.js b/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-name.js
deleted file mode 100644
index 55b54c980c..0000000000
--- a/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/app-settings-dialog-name.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Button, Label } from 'reactstrap';
-import toaster from '../../../../components/toast';
-import { gettext } from '../../../../utils/constants';
-
-class AppSettingsDialogName extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      name: props.config.wiki_name || '',
-    };
-  }
-
-  onChange = (event) => {
-    this.setState({ name: event.target.value });
-  };
-
-  validateName = (name) => {
-    name = name.trim();
-    if (name === '') {
-      return { isValid: false, message: gettext('Name is required') };
-    }
-    if (name.includes('/')) {
-      return { isValid: false, message: gettext('Name cannot contain slash') };
-    }
-    if (name.includes('\\')) {
-      return { isValid: false, message: gettext('Name cannot contain backslash') };
-    }
-    return { isValid: true, message: name };
-  };
-
-  onCommit = () => {
-    const { name } = this.state;
-    const { isValid, message } = this.validateName(name);
-    if (!isValid) {
-      toaster.danger(message);
-      return;
-    } else {
-      this.props.updateConfig({ wiki_name: message });
-    }
-  };
-
-  render() {
-    const { name } = this.state;
-    return (
-      <div className="app-setting-dialog-name">
-        <Label>{gettext('Wiki name')}</Label>
-        <div className="d-flex">
-          <input
-            className="form-control rename-area-input"
-            type="text"
-            value={name}
-            onChange={this.onChange}
-          />
-          <Button className="rename-area-submit" color="primary ml-4" onClick={this.onCommit}>
-            {gettext('Submit')}
-          </Button>
-        </div>
-      </div>
-    );
-  }
-}
-
-AppSettingsDialogName.propTypes = {
-  config: PropTypes.object.isRequired,
-  updateConfig: PropTypes.func.isRequired,
-};
-
-export default AppSettingsDialogName;
diff --git a/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/icon-settings-popover.css b/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/icon-settings-popover.css
deleted file mode 100644
index d09ce945f6..0000000000
--- a/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/icon-settings-popover.css
+++ /dev/null
@@ -1,64 +0,0 @@
-.dtable-icon-settings-popover .popover {
-  max-width: 314px;
-  width: 314px;
-}
-
-.app-icon-settings-popover-nav .nav {
-  border-bottom: 1px solid #efefef;
-}
-
-.app-icon-settings-popover-nav .nav .nav-item {
-  padding: 0;
-}
-
-.app-icon-settings-popover-nav .nav .nav-item .nav-link {
-  margin: 0;
-  display: flex;
-  justify-content: center;
-  font-weight: 600;
-  padding: 0.5rem 0;
-  border-bottom: 0.125rem solid transparent;
-}
-
-.app-icon-settings-popover-nav .nav .nav-item .nav-link.active {
-  color: #ff8000;
-  text-decoration: none;
-  border-bottom: 0.125rem solid #ff8000;
-}
-
-.app-icon-settings-popover-main {
-  height: 300px;
-  display: flex;
-  justify-content: center;
-  padding: 16px 5px;
-  align-items: center;
-}
-
-.app-settings-dialog-icons {
-  height: 260px;
-}
-
-.app-settings-dialog-icons .seafile-multicolor-icon-container {
-  margin: 10px;
-  cursor: pointer;
-  width: 40px;
-  height: 40px;
-  position: relative;
-}
-
-.app-settings-dialog-icons .seafile-multicolor-icon-container.top {
-  margin: 0 10px 10px 10px;
-}
-
-.app-settings-dialog-icons .seafile-multicolor-icon-container img {
-  width: 40px;
-  max-width: fit-content;
-  height: 40px;
-}
-
-.app-settings-dialog-icons .seafile-multicolor-icon-container img.active {
-  width: 42px;
-  height: 42px;
-  border: 2px solid #b6e8e4;
-  border-radius: 50%;
-}
diff --git a/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/icon-settings-popover.js b/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/icon-settings-popover.js
deleted file mode 100644
index 2f1bd80fd2..0000000000
--- a/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/icon-settings-popover.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Nav, NavItem, NavLink, TabContent, TabPane, PopoverBody } from 'reactstrap';
-import SeahubPopover from '../../../../components/common/seahub-popover';
-import { gettext } from '../../../../utils/constants';
-import AppSettingsDialogIcons from './app-settings-dialog-icons';
-import AppSettingsDialogCustomIcon from './app-settings-dialog-custom-icon';
-
-import './icon-settings-popover.css';
-
-export default class IconSettingsPopover extends React.Component {
-
-  static propTypes = {
-    targetId: PropTypes.string.isRequired,
-    onToggle: PropTypes.func.isRequired,
-    config: PropTypes.object.isRequired,
-    updateConfig: PropTypes.func.isRequired,
-    repoId: PropTypes.string.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeTab: 'system',
-    };
-  }
-
-  toggle = (tab) => {
-    if (this.state.activeTab !== tab) {
-      this.setState({ activeTab: tab });
-    }
-  };
-
-  onEnter = (e) => {
-    e.preventDefault();
-    this.props.onToggle();
-  };
-
-  renderContent = () => {
-    let { activeTab } = this.state;
-    return (
-      <>
-        <div className="app-icon-settings-popover-nav">
-          <Nav className="w-100">
-            <NavItem className="w-50">
-              <NavLink
-                className={activeTab === 'system' ? 'active w-100' : 'w-100'}
-                onClick={this.toggle.bind(this, 'system')}
-              >
-                {gettext('System icon')}
-              </NavLink>
-            </NavItem>
-            <NavItem className="w-50">
-              <NavLink
-                className={activeTab === 'custom' ? 'active w-100' : 'w-100'}
-                onClick={this.toggle.bind(this, 'custom')}
-              >
-                {gettext('Custom icon')}
-              </NavLink>
-            </NavItem>
-          </Nav>
-        </div>
-        <div className="app-icon-settings-popover-main">
-          <TabContent activeTab={activeTab}>
-            <TabPane tabId='custom'>
-              <AppSettingsDialogCustomIcon
-                onToggle={this.props.onToggle}
-                config={this.props.config}
-                updateConfig={this.props.updateConfig}
-                repoId={this.props.repoId}
-              />
-            </TabPane>
-            <TabPane tabId='system'>
-              <AppSettingsDialogIcons
-                onToggle={this.props.onToggle}
-                config={this.props.config}
-                updateConfig={this.props.updateConfig}
-              />
-            </TabPane>
-          </TabContent>
-        </div>
-      </>
-    );
-  };
-
-  render() {
-    return (
-      <SeahubPopover
-        placement='bottom-start'
-        target={this.props.targetId}
-        hideSeahubPopover={this.props.onToggle}
-        hideSeahubPopoverWithEsc={this.props.onToggle}
-        onEnter={this.onEnter}
-        hideArrow={true}
-        popoverClassName="dtable-icon-settings-popover"
-      >
-        <PopoverBody className="p-0">
-          {this.renderContent()}
-        </PopoverBody>
-      </SeahubPopover>
-    );
-  }
-}
diff --git a/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/index.js b/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/index.js
deleted file mode 100644
index 5f870028be..0000000000
--- a/frontend/src/pages/wiki2/wiki-left-bar/app-settings-dialog/index.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { Modal, ModalBody, ModalHeader, Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
-import AppSettingsDialogIconColor from './app-settings-dialog-icon-color';
-import AppSettingsDialogName from './app-settings-dialog-name';
-import { gettext } from '../../../../utils/constants';
-
-import './app-left-bar-dialog.css';
-
-class AppSettingsDialog extends React.Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeTab: 'Name',
-    };
-  }
-
-  toggle = (tab) => {
-    if (this.state.activeTab !== tab) {
-      this.setState({ activeTab: tab });
-    }
-  };
-
-  renderContent = () => {
-    const { activeTab } = this.state;
-    return (
-      <Fragment>
-        <div className="app-settings-dialog-side">
-          <Nav pills vertical className="w-100">
-            <NavItem>
-              <NavLink
-                className={activeTab === 'Name' ? 'active' : ''}
-                onClick={this.toggle.bind(this, 'Name')}
-              >
-                {gettext('Wiki name')}
-              </NavLink>
-            </NavItem>
-            <NavItem>
-              <NavLink
-                className={activeTab === 'Icon' ? 'active' : ''}
-                onClick={this.toggle.bind(this, 'Icon')}
-              >
-                {gettext('Icons')}
-              </NavLink>
-            </NavItem>
-          </Nav>
-        </div>
-        <div className="app-settings-dialog-main">
-          <TabContent activeTab={activeTab}>
-            <TabPane tabId="Icon">
-              <AppSettingsDialogIconColor
-                config={this.props.config}
-                repoId={this.props.repoId}
-                updateConfig={this.props.updateConfig}
-              />
-            </TabPane>
-            <TabPane tabId="Name">
-              <AppSettingsDialogName
-                config={this.props.config}
-                updateConfig={this.props.updateConfig}
-              />
-            </TabPane>
-          </TabContent>
-        </div>
-      </Fragment>
-    );
-  };
-
-  render() {
-    return (
-      <Modal isOpen={true} toggle={this.props.toggle} className="app-settings-dialog">
-        <ModalHeader toggle={this.props.toggle}>{gettext('Wiki settings')}</ModalHeader>
-        <ModalBody className="app-settings-dialog-content">
-          {this.renderContent()}
-        </ModalBody>
-      </Modal>
-    );
-  }
-}
-
-AppSettingsDialog.propTypes = {
-  repoId: PropTypes.string.isRequired,
-  toggle: PropTypes.func.isRequired,
-  config: PropTypes.object.isRequired,
-  updateConfig: PropTypes.func.isRequired,
-};
-
-export default AppSettingsDialog;
diff --git a/frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar-icon.jsx b/frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar-icon.jsx
deleted file mode 100644
index a990f264f5..0000000000
--- a/frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar-icon.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, { useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { Tooltip } from 'reactstrap';
-import Icon from '../../../components/icon';
-
-function WikiLeftBarIcon(props) {
-  const [open, setOpen] = useState(false);
-  const inputEl = useRef(null);
-
-  function onMouseEnter() {
-    if (inputEl && inputEl.current) {
-      inputEl.current.style.backgroundColor = '#dedede';
-    }
-  }
-
-  function onMouseLeave() {
-    if (inputEl && inputEl.current) {
-      inputEl.current.style.backgroundColor = '';
-    }
-  }
-
-  return (
-    <>
-      <div
-        className="left-bar-button"
-        ref={inputEl}
-        onClick={props.onClick}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-      >
-        <Icon symbol={props.iconClass}/>
-      </div>
-      <Tooltip
-        placement="right"
-        isOpen={open}
-        target={inputEl}
-        toggle={() => setOpen(!open)}
-        hideArrow={true}
-        fade={false}
-      >
-        {props.tipText}
-      </Tooltip>
-    </>
-  );
-}
-
-WikiLeftBarIcon.propTypes = {
-  onClick: PropTypes.func.isRequired,
-  iconClass: PropTypes.string.isRequired,
-  tipText: PropTypes.string.isRequired,
-};
-
-export default WikiLeftBarIcon;
diff --git a/frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.css b/frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.css
deleted file mode 100644
index 924fffd8ef..0000000000
--- a/frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.wiki-left-bar {
-  flex: 0 0 4%;
-  width: 50px;
-  background: #f5f5f5;
-  border-right: 1px solid #ddd;
-  z-index: 101;
-}
-
-.wiki-left-bar .left-bar-button {
-  height: 50px;
-  line-height: 50px;
-  text-align: center;
-}
-
-.wiki-left-bar .left-bar-button:hover {
-  cursor: pointer;
-}
-
-.wiki-left-bar .left-bar-button .seafile-multicolor-icon {
-  font-size: 22px;
-}
-
-.wiki-left-bar .left-bar-button .seafile-multicolor-icon {
-  color: rgba(0, 0, 0, 0.8);
-}
-
-.wiki-left-bar .left-bar-button:hover .seafile-multicolor-icon {
-  color: rgba(0, 0, 0, 0.9);
-}
diff --git a/frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.js b/frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.js
deleted file mode 100644
index 714c5c5a22..0000000000
--- a/frontend/src/pages/wiki2/wiki-left-bar/wiki-left-bar.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import AppSettingsDialog from './app-settings-dialog/index';
-import Icon from './wiki-left-bar-icon.jsx';
-import { gettext } from '../../../utils/constants';
-
-import './wiki-left-bar.css';
-
-export default class WikiLeftBar extends React.Component {
-
-  static propTypes = {
-    config: PropTypes.object.isRequired,
-    repoId: PropTypes.string.isRequired,
-    updateConfig: PropTypes.func.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isShowSettingsDialog: false,
-    };
-  }
-
-  openPreviewApp = () => {
-    window.open(window.location.href.replace('/wikis/', '/published/'));
-  };
-
-  openAppSettingsDialog = () => {
-    this.setState({ isShowSettingsDialog: true });
-  };
-
-  closeAppSettingsDialog = () => {
-    this.setState({ isShowSettingsDialog: false });
-  };
-
-  render() {
-    return (
-      <div className="wiki-left-bar">
-        <Icon onClick={this.openAppSettingsDialog} iconClass="wiki-settings" tipText={gettext('Settings')}/>
-        <Icon onClick={this.openPreviewApp} iconClass="wiki-preview" tipText={gettext('Go to wiki page to preview')}/>
-        {this.state.isShowSettingsDialog &&
-          <AppSettingsDialog
-            toggle={this.closeAppSettingsDialog}
-            config={this.props.config}
-            repoId={this.props.repoId}
-            updateConfig={this.props.updateConfig}
-          />
-        }
-      </div>
-    );
-  }
-}