diff --git a/frontend/src/components/toolbar/dir-operation-toolbar.js b/frontend/src/components/toolbar/dir-operation-toolbar.js
index f693f0485e..37728d7e0d 100644
--- a/frontend/src/components/toolbar/dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/dir-operation-toolbar.js
@@ -7,6 +7,7 @@ import ModalPortal from '../modal-portal';
 import CreateFolder from '../../components/dialog/create-folder-dialog';
 import CreateFile from '../../components/dialog/create-file-dialog';
 import ShareDialog from '../../components/dialog/share-dialog';
+import ViewModeToolbar from './view-mode-toolbar';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -22,6 +23,8 @@ const propTypes = {
   onUploadFile: PropTypes.func.isRequired,
   onUploadFolder: PropTypes.func.isRequired,
   direntList: PropTypes.array.isRequired,
+  currentMode: PropTypes.string.isRequired,
+  switchViewMode: PropTypes.func.isRequired,
 };
 
 class DirOperationToolbar extends React.Component {
@@ -167,51 +170,56 @@ class DirOperationToolbar extends React.Component {
     let itemType = path === '/' ? 'library' : 'dir';
     let itemName = path == '/' ? repoName : Utils.getFolderName(path);
 
-    const content = Utils.isDesktop() ? (
-      <Fragment>
-        {Utils.isSupportUploadFolder() ?
-          <button className="btn btn-secondary operation-item" title={gettext('Upload')} onClick={this.onUploadClick}>{gettext('Upload')}</button> :
-          <button className="btn btn-secondary operation-item" title={gettext('Upload')} onClick={this.onUploadFile}>{gettext('Upload')}</button>}
-        <button className="btn btn-secondary operation-item" title={gettext('New')} onClick={this.onCreateClick}>{gettext('New')}</button>
-        {this.props.showShareBtn &&
-          <button className="btn btn-secondary operation-item" title={gettext('Share')} onClick={this.onShareClick}>{gettext('Share')}</button>}
-      </Fragment>
-    ) : (
-      <Dropdown isOpen={this.state.isMobileOpMenuOpen} toggle={this.toggleMobileOpMenu}>
-        <DropdownToggle
-          tag="span"
-          className="sf2-icon-plus mobile-toolbar-icon"
-        />
-        <DropdownMenu>
-          <DropdownItem onClick={this.onUploadFile}>{gettext('Upload')}</DropdownItem>
-          <DropdownItem onClick={this.onCreateFolderToggle}>{gettext('New Folder')}</DropdownItem>
-          <DropdownItem onClick={this.onCreateFileToggle}>{gettext('New File')}</DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-    );
+    let content = null;
+    if (Utils.isDesktop()) {
+      let { showShareBtn } = this.props;
+      content = (
+        <Fragment>
+          {Utils.isSupportUploadFolder() ?
+            <button className="btn btn-secondary operation-item" title={gettext('Upload')} onClick={this.onUploadClick}>{gettext('Upload')}</button> :
+            <button className="btn btn-secondary operation-item" title={gettext('Upload')} onClick={this.onUploadFile}>{gettext('Upload')}</button>}
+          <button className="btn btn-secondary operation-item" title={gettext('New')} onClick={this.onCreateClick}>{gettext('New')}</button>
+          {showShareBtn && <button className="btn btn-secondary operation-item" title={gettext('Share')} onClick={this.onShareClick}>{gettext('Share')}</button>}
+        </Fragment>
+      );
+    } else {
+      content = (
+        <Dropdown isOpen={this.state.isMobileOpMenuOpen} toggle={this.toggleMobileOpMenu}>
+          <DropdownToggle tag="span" className="sf2-icon-plus mobile-toolbar-icon" />
+          <DropdownMenu>
+            <DropdownItem onClick={this.onUploadFile}>{gettext('Upload')}</DropdownItem>
+            <DropdownItem onClick={this.onCreateFolderToggle}>{gettext('New Folder')}</DropdownItem>
+            <DropdownItem onClick={this.onCreateFileToggle}>{gettext('New File')}</DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      );
+    }
 
     return (
       <Fragment>
-        <div className="operation">
-          {content}
+        <div className="dir-operation">
+          <div className="operation">
+            {content}
+          </div>
+          {this.state.isUploadMenuShow && (
+            <ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>
+              <li className="dropdown-item" onClick={this.onUploadFile}>{gettext('Upload Files')}</li>
+              <li className="dropdown-item" onClick={this.onUploadFolder}>{gettext('Upload Folder')}</li>
+            </ul>
+          )}
+          {this.state.isCreateMenuShow && (
+            <ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>
+              <li className="dropdown-item" onClick={this.onCreateFolderToggle}>{gettext('New Folder')}</li>
+              <li className="dropdown-item" onClick={this.onCreateFileToggle}>{gettext('New File')}</li>
+              <li className="dropdown-divider"></li>
+              <li className="dropdown-item" onClick={this.onCreateMarkdownToggle}>{gettext('New Markdown File')}</li>
+              <li className="dropdown-item" onClick={this.onCreateExcelToggle}>{gettext('New Excel File')}</li>
+              <li className="dropdown-item" onClick={this.onCreatePPTToggle}>{gettext('New PowerPoint File')}</li>
+              <li className="dropdown-item" onClick={this.onCreateWordToggle}>{gettext('New Word File')}</li>
+            </ul>
+          )}
         </div>
-        {this.state.isUploadMenuShow && (
-          <ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>
-            <li className="dropdown-item" onClick={this.onUploadFile}>{gettext('Upload Files')}</li>
-            <li className="dropdown-item" onClick={this.onUploadFolder}>{gettext('Upload Folder')}</li>
-          </ul>
-        )}
-        {this.state.isCreateMenuShow && (
-          <ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>
-            <li className="dropdown-item" onClick={this.onCreateFolderToggle}>{gettext('New Folder')}</li>
-            <li className="dropdown-item" onClick={this.onCreateFileToggle}>{gettext('New File')}</li>
-            <li className="dropdown-divider"></li>
-            <li className="dropdown-item" onClick={this.onCreateMarkdownToggle}>{gettext('New Markdown File')}</li>
-            <li className="dropdown-item" onClick={this.onCreateExcelToggle}>{gettext('New Excel File')}</li>
-            <li className="dropdown-item" onClick={this.onCreatePPTToggle}>{gettext('New PowerPoint File')}</li>
-            <li className="dropdown-item" onClick={this.onCreateWordToggle}>{gettext('New Word File')}</li>
-          </ul>
-        )}
+        {Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} />}
         {this.state.isCreateFileDialogShow && (
           <ModalPortal>
             <CreateFile
diff --git a/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js b/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
index cb8b0e6e07..d5026bd954 100644
--- a/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
@@ -14,6 +14,7 @@ import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import ZipDownloadDialog from '../dialog/zip-download-dialog';
 import Rename from '../dialog/rename-dirent';
 import LibSubFolderPermissionDialog from '../dialog/lib-sub-folder-permission-dialog';
+import ViewModeToolbar from './view-mode-toolbar';
 
 import ModalPortal from '../modal-portal';
 import ItemDropdownMenu from '../dropdown-menu/item-dropdown-menu';
@@ -36,6 +37,8 @@ const propTypes = {
   onFilesTagChanged: PropTypes.func.isRequired,
   unSelectDirent: PropTypes.func.isRequired,
   updateDirent: PropTypes.func.isRequired,
+  currentMode: PropTypes.string.isRequired,
+  switchViewMode: PropTypes.func.isRequired,
 };
 
 class MultipleDirOperationToolbar extends React.Component {
@@ -331,23 +334,26 @@ class MultipleDirOperationToolbar extends React.Component {
     
     return (
       <Fragment>
-        <div className="d-flex">
-          <ButtonGroup className="flex-row group-operations">
-            <Button className="secondary group-op-item action-icon sf2-icon-move" title={gettext('Move')} onClick={this.onMoveToggle}></Button>
-            <Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onCopyToggle}></Button>
-            <Button className="secondary group-op-item action-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemsDelete}></Button>
-            <Button className="secondary group-op-item action-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemsDownload}></Button>
-            {this.props.selectedDirentList.length === 1 &&
-              <ItemDropdownMenu 
-                tagName={'button'}
-                item={this.props.selectedDirentList[0]}
-                toggleClass={'fas fa-ellipsis-v dirents-more-menu'}
-                onMenuItemClick={this.onMenuItemClick}
-                getMenuList={this.getDirentMenuList}
-              />
-            }
-          </ButtonGroup>
+        <div className="dir-operation">
+          <div className="d-flex">
+            <ButtonGroup className="flex-row group-operations">
+              <Button className="secondary group-op-item action-icon sf2-icon-move" title={gettext('Move')} onClick={this.onMoveToggle}></Button>
+              <Button className="secondary group-op-item action-icon sf2-icon-copy" title={gettext('Copy')} onClick={this.onCopyToggle}></Button>
+              <Button className="secondary group-op-item action-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemsDelete}></Button>
+              <Button className="secondary group-op-item action-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemsDownload}></Button>
+              {this.props.selectedDirentList.length === 1 &&
+                <ItemDropdownMenu
+                  tagName={'button'}
+                  item={this.props.selectedDirentList[0]}
+                  toggleClass={'fas fa-ellipsis-v dirents-more-menu'}
+                  onMenuItemClick={this.onMenuItemClick}
+                  getMenuList={this.getDirentMenuList}
+                />
+              }
+            </ButtonGroup>
+          </div>
         </div>
+        {Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} />}
         {this.state.isMoveDialogShow && 
           <MoveDirentDialog 
             path={this.props.path}
diff --git a/frontend/src/pages/lib-content-view/lib-content-toolbar.js b/frontend/src/pages/lib-content-view/lib-content-toolbar.js
index f51f35bb4d..8b4439ab97 100644
--- a/frontend/src/pages/lib-content-view/lib-content-toolbar.js
+++ b/frontend/src/pages/lib-content-view/lib-content-toolbar.js
@@ -1,6 +1,5 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { Utils } from '../../utils/utils';
 import { gettext } from '../../utils/constants';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import ViewModeToolbar from '../../components/toolbar/view-mode-toolbar';
@@ -87,48 +86,49 @@ class LibContentToolbar extends React.Component {
       <Fragment>
         <div className="cur-view-toolbar">
           <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.props.onSideNavMenuClick}></span>
-          <div className="dir-operation">
-            {this.props.isDirentSelected ?
-              <MultipleDirOperationToolbar
-                repoID={this.props.repoID} 
-                path={this.props.path}
-                userPerm={this.props.userPerm}
-                repoEncrypted={this.props.repoEncrypted}
-                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}
-                relatedFiles={this.props.relatedFiles}
-                unSelectDirent={this.props.unSelectDirent}
-                onFilesTagChanged={this.props.onFilesTagChanged}
-                showShareBtn={this.props.showShareBtn}
-                isGroupOwnedRepo={this.props.isGroupOwnedRepo}
-                showDirentDetail={this.props.showDirentDetail}
-              /> :
-              <DirOperationToolBar 
-                path={this.props.path}
-                repoID={this.props.repoID}
-                repoName={this.props.repoName}
-                repoEncrypted={this.props.repoEncrypted}
-                direntList={this.props.direntList}
-                showShareBtn={this.props.showShareBtn}
-                enableDirPrivateShare={this.props.enableDirPrivateShare}
-                userPerm={this.props.userPerm}
-                isGroupOwnedRepo={this.props.isGroupOwnedRepo}
-                onAddFile={this.props.onAddFile}
-                onAddFolder={this.props.onAddFolder}
-                onUploadFile={this.props.onUploadFile}
-                onUploadFolder={this.props.onUploadFolder}
-              />
-            }
-          </div>
-          {Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} />}
+          {this.props.isDirentSelected ?
+            <MultipleDirOperationToolbar
+              repoID={this.props.repoID} 
+              path={this.props.path}
+              userPerm={this.props.userPerm}
+              repoEncrypted={this.props.repoEncrypted}
+              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}
+              relatedFiles={this.props.relatedFiles}
+              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}
+            /> :
+            <DirOperationToolBar 
+              path={this.props.path}
+              repoID={this.props.repoID}
+              repoName={this.props.repoName}
+              repoEncrypted={this.props.repoEncrypted}
+              direntList={this.props.direntList}
+              showShareBtn={this.props.showShareBtn}
+              enableDirPrivateShare={this.props.enableDirPrivateShare}
+              userPerm={this.props.userPerm}
+              isGroupOwnedRepo={this.props.isGroupOwnedRepo}
+              onAddFile={this.props.onAddFile}
+              onAddFolder={this.props.onAddFolder}
+              onUploadFile={this.props.onUploadFile}
+              onUploadFolder={this.props.onUploadFolder}
+              currentMode={this.props.currentMode}
+              switchViewMode={this.props.switchViewMode}
+            />
+          }
         </div>
         <CommonToolbar repoID={this.props.repoID} onSearchedClick={this.props.onSearchedClick} searchPlaceholder={gettext('Search files in this library')}/>
       </Fragment>
diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index 1408e80e7a..0ca2bcfd67 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -1725,7 +1725,6 @@ class LibContentView extends React.Component {
 
     return (
       <Fragment>
-
         <div className="main-panel o-hidden">
           <div className="main-panel-north border-left-show">
             <LibContentToolbar