diff --git a/frontend/src/components/cur-dir-path/index.js b/frontend/src/components/cur-dir-path/index.js
index b672dd8796..d43cb8d958 100644
--- a/frontend/src/components/cur-dir-path/index.js
+++ b/frontend/src/components/cur-dir-path/index.js
@@ -1,5 +1,7 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { Utils } from '../../utils/utils';
+import SortOptionsDialog from '../../components/dialog/sort-options';
 import DirPath from './dir-path';
 import DirTool from './dir-tool';
 
@@ -19,7 +21,21 @@ const propTypes = {
 
 class CurDirPath extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      isSortOptionsDialogOpen: false
+    };
+  }
+
+  toggleSortOptionsDialog = () => {
+    this.setState({
+      isSortOptionsDialogOpen: !this.state.isSortOptionsDialogOpen
+    });
+  }
+
   render() {
+    const isDesktop = Utils.isDesktop();
     return (
       <Fragment>
         <DirPath 
@@ -32,6 +48,7 @@ class CurDirPath extends React.Component {
           isViewFile={this.props.isViewFile}
           fileTags={this.props.fileTags}
         />
+        {isDesktop &&
         <DirTool 
           repoID={this.props.repoID}
           repoName={this.props.repoName} 
@@ -39,7 +56,17 @@ class CurDirPath extends React.Component {
           currentPath={this.props.currentPath} 
           updateUsedRepoTags={this.props.updateUsedRepoTags}
           onDeleteRepoTag={this.props.onDeleteRepoTag}
+        />}
+        {!isDesktop && this.props.direntList.length > 0 &&
+        <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
+        {this.state.isSortOptionsDialogOpen &&
+        <SortOptionsDialog
+          toggleDialog={this.toggleSortOptionsDialog}
+          sortBy={this.props.sortBy}
+          sortOrder={this.props.sortOrder}
+          sortItems={this.props.sortItems}
         />
+        }
       </Fragment>
     );
   }
diff --git a/frontend/src/components/dirent-list-view/dirent-none-view.js b/frontend/src/components/dirent-list-view/dirent-none-view.js
index 42601ae907..241e1485c6 100644
--- a/frontend/src/components/dirent-list-view/dirent-none-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-none-view.js
@@ -5,7 +5,7 @@ import Loading from '../loading';
 import ModalPortal from '../modal-portal';
 import CreateFile from '../../components/dialog/create-file-dialog';
 
-import '../../css/tip-for-new-md.css';
+import '../../css/tip-for-new-file.css';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -53,23 +53,18 @@ class DirentNodeView extends React.Component {
 
     return (
       <Fragment>
-        <div className="tip-for-new-file">
-          <p className="text-center">{gettext('This folder has no content at this time.')}</p>
-          <p className="text-center">{gettext('You can create files quickly')}{' +'}</p>
-          <div className="big-new-file-button-group">
-            <div className="d-flex justify-content-center">
-              <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.md')}>
-                {'+ Markdown'}</button>
-              <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.pptx')}>
-                {'+ PPT'}</button>
-            </div>
-            <div className="d-flex justify-content-center">
-              <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.docx')}>
-                {'+ Word'}</button>
-              <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.xlsx')}>
-                {'+ Excel'}</button>
-            </div>
-          </div>
+        <div className="tip-for-new-file text-center">
+          <p className="text-secondary">{gettext('This folder has no content at this time.')}</p>
+          <p className="text-secondary">{gettext('You can create files quickly')}{' +'}</p>
+          <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.md')}>
+            {'+ Markdown'}</button>
+          <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.pptx')}>
+            {'+ PPT'}</button>
+          <br />
+          <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.docx')}>
+            {'+ Word'}</button>
+          <button className="big-new-file-button" onClick={this.onCreateNewFile.bind(this, '.xlsx')}>
+            {'+ Excel'}</button>
         </div>
         {this.state.isCreateFileDialogShow && (
           <ModalPortal>
diff --git a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js b/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
similarity index 98%
rename from frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
rename to frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
index aef8a6204a..8a593ca871 100644
--- a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/multiple-dir-operation-toolbar.js
@@ -35,7 +35,7 @@ const propTypes = {
   updateDirent: PropTypes.func.isRequired,
 };
 
-class MutipleDirOperationToolbar extends React.Component {
+class MultipleDirOperationToolbar extends React.Component {
 
   constructor(props) {
     super(props);
@@ -409,6 +409,6 @@ class MutipleDirOperationToolbar extends React.Component {
   }
 }
 
-MutipleDirOperationToolbar.propTypes = propTypes;
+MultipleDirOperationToolbar.propTypes = propTypes;
 
-export default MutipleDirOperationToolbar;
+export default MultipleDirOperationToolbar;
diff --git a/frontend/src/css/layout.css b/frontend/src/css/layout.css
index 846842c923..980838dba1 100644
--- a/frontend/src/css/layout.css
+++ b/frontend/src/css/layout.css
@@ -95,6 +95,7 @@
   max-height: 40px;
   background:#f9f9f9;
   display: flex;
+  align-items: center;
   flex-shrink: 0;
   justify-content: space-between;
 }
diff --git a/frontend/src/css/tip-for-new-md.css b/frontend/src/css/tip-for-new-file.css
similarity index 64%
rename from frontend/src/css/tip-for-new-md.css
rename to frontend/src/css/tip-for-new-file.css
index 758eb0fe98..5ee370ad9d 100644
--- a/frontend/src/css/tip-for-new-md.css
+++ b/frontend/src/css/tip-for-new-file.css
@@ -1,23 +1,24 @@
 .tip-for-new-file {
   margin: 0 auto;
-  padding: 5em 8em; 
+  padding: 2em 1em;
   align-self: flex-start; /* for repo wiki mode */
 }
+@media (min-width: 768px) {
+  .tip-for-new-file {
+    padding: 5em 8em;
+  }
+}
 .big-new-file-button {
   padding: .9em 2em 1em; 
   border-radius: 8px; 
-  margin: 0 1.5em 1.5em 0;
+  margin: 0 0.75em 1.5em;
   cursor: pointer;
   width: 160px;
+  background: #fff;
+  border: 1px solid #d1d1d1;
 }
 .big-new-file-button:hover,
 .big-new-file-button:focus {
   border-color: #eb9205;
   color: #eb8205;
 }
-.tip-for-new-file p {
-  color: #c4c4c4;
-}
-.big-new-file-button-group {
-  margin: 0 auto;
-}
\ No newline at end of file
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 470c1c289d..0bdc28c55d 100644
--- a/frontend/src/pages/lib-content-view/lib-content-container.js
+++ b/frontend/src/pages/lib-content-view/lib-content-container.js
@@ -191,6 +191,10 @@ class LibContentContainer extends React.Component {
               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}
             />
           </div>
           <div className={`cur-view-content lib-content-container ${this.props.currentMode === 'column' ? 'view-mode-container' : ''}`} onScroll={this.onItemsScroll}>
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 c8705bff16..bd1eacd34a 100644
--- a/frontend/src/pages/lib-content-view/lib-content-toolbar.js
+++ b/frontend/src/pages/lib-content-view/lib-content-toolbar.js
@@ -5,7 +5,7 @@ import { gettext } from '../../utils/constants';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import ViewModeToolbar from '../../components/toolbar/view-mode-toolbar';
 import DirOperationToolBar from '../../components/toolbar/dir-operation-toolbar';
-import MutipleDirOperationToolbar from '../../components/toolbar/mutilple-dir-operation-toolbar';
+import MultipleDirOperationToolbar from '../../components/toolbar/multiple-dir-operation-toolbar';
 import ViewFileToolbar from '../../components/toolbar/view-file-toolbar';
 
 const propTypes = {
@@ -89,7 +89,7 @@ class LibContentToolbar extends React.Component {
           <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 ?
-              <MutipleDirOperationToolbar
+              <MultipleDirOperationToolbar
                 repoID={this.props.repoID} 
                 path={this.props.path}
                 userPerm={this.props.userPerm}
diff --git a/frontend/src/pages/my-libs/my-libs.js b/frontend/src/pages/my-libs/my-libs.js
index bbdb6cf801..453b85041c 100644
--- a/frontend/src/pages/my-libs/my-libs.js
+++ b/frontend/src/pages/my-libs/my-libs.js
@@ -159,7 +159,7 @@ class MyLibraries extends Component {
         </div>
         <div className="main-panel-center flex-row">
           <div className="cur-view-container">
-            <div className="cur-view-path align-items-center">
+            <div className="cur-view-path">
               <h3 className="sf-heading m-0">{gettext('My Libraries')}</h3>
               {(!Utils.isDesktop() && this.state.repoList.length > 0) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
             </div>
diff --git a/frontend/src/pages/repo-wiki-mode/main-panel.js b/frontend/src/pages/repo-wiki-mode/main-panel.js
index 2b2281e4a7..3929b27005 100644
--- a/frontend/src/pages/repo-wiki-mode/main-panel.js
+++ b/frontend/src/pages/repo-wiki-mode/main-panel.js
@@ -8,7 +8,7 @@ import RepoInfo from '../../models/repo-info';
 import CommonToolbar from '../../components/toolbar/common-toolbar';
 import ViewModeToolbar from '../../components/toolbar/view-mode-toolbar';
 import DirOperationToolBar from '../../components/toolbar/dir-operation-toolbar';
-import MutipleDirOperationToolbar from '../../components/toolbar/mutilple-dir-operation-toolbar';
+import MultipleDirOperationToolbar from '../../components/toolbar/multiple-dir-operation-toolbar';
 import CurDirPath from '../../components/cur-dir-path';
 import WikiMarkdownViewer from '../../components/wiki-markdown-viewer';
 import DirentListView from '../../components/dirent-list-view/dirent-list-view';
@@ -170,7 +170,7 @@ class MainPanel extends Component {
             <span className="sf2-icon-menu hidden-md-up d-md-none side-nav-toggle" title={gettext('Side Nav Menu')} onClick={this.onSideNavMenuClick}></span>
             <div className="dir-operation">
               {this.props.isDirentSelected ?
-                <MutipleDirOperationToolbar
+                <MultipleDirOperationToolbar
                   repoID={repoID} 
                   path={this.props.path}
                   selectedDirentList={this.props.selectedDirentList}
diff --git a/frontend/src/pages/shared-libs/shared-libs.js b/frontend/src/pages/shared-libs/shared-libs.js
index 35f255d06b..606e8a6da1 100644
--- a/frontend/src/pages/shared-libs/shared-libs.js
+++ b/frontend/src/pages/shared-libs/shared-libs.js
@@ -372,7 +372,7 @@ class SharedLibraries extends Component {
       <Fragment>
         <div className="main-panel-center">
           <div className="cur-view-container">
-            <div className="cur-view-path align-items-center">
+            <div className="cur-view-path">
               <h3 className="sf-heading m-0">{gettext('Shared with me')}</h3>
               {(!Utils.isDesktop() && this.state.items.length > 0) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
             </div>
diff --git a/frontend/src/pages/shared-with-all/public-shared-view.js b/frontend/src/pages/shared-with-all/public-shared-view.js
index 5a07910a3b..72b0e69d95 100644
--- a/frontend/src/pages/shared-with-all/public-shared-view.js
+++ b/frontend/src/pages/shared-with-all/public-shared-view.js
@@ -217,7 +217,7 @@ class PublicSharedView extends React.Component {
         </div>
         <div className="main-panel-center">
           <div className="cur-view-container">
-            <div className="cur-view-path align-items-center">
+            <div className="cur-view-path">
               <h3 className="sf-heading m-0">{gettext('Shared with all')}</h3>
               {(!Utils.isDesktop() && this.state.repoList.length > 0) && <span className="sf3-font sf3-font-sort action-icon" onClick={this.toggleSortOptionsDialog}></span>}
             </div>