diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index a513ed1bfc..57a07dc5da 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -433,9 +433,9 @@
       "integrity": "sha512-YsAX+gnnf1ytv7asZgJP7T56DALQniKtRVtlz0f11PljLV19I1Av+Oz3QcYaRiKhCCB+EMnVKI9Yc14sYKp6lA=="
     },
     "@seafile/seafile-editor": {
-      "version": "0.2.36",
-      "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.2.36.tgz",
-      "integrity": "sha512-L3CsCzGKFHuqxH3aIR7AiLA91araToT1xHwDhG69o2M95dd06hZOgzQ3LxwJXC5SZfvmeMxKw0ii3PvVvfHxvg==",
+      "version": "0.2.37",
+      "resolved": "https://registry.npmjs.org/@seafile/seafile-editor/-/seafile-editor-0.2.37.tgz",
+      "integrity": "sha512-53Md4MNqhw4GmFRyZRsWH1pK9S+sHoaAjbqLW6cMdRtMzxQTBM76pqXSxhVuP7TuGX7f1tLN7piXdVzjZuZVzA==",
       "requires": {
         "@seafile/slate-react": "^0.1.8",
         "autoprefixer": "7.1.6",
@@ -15308,9 +15308,9 @@
       }
     },
     "remark-breaks": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/remark-breaks/-/remark-breaks-1.0.2.tgz",
-      "integrity": "sha512-oVEmI9PH6RihPT84xWw1Z39CbaFRszEVQjlw+T1Di6bKp/RDO/QaLtMB5rrGmClKVoJsv/CYVivGsAdznsDiMA=="
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/remark-breaks/-/remark-breaks-1.0.3.tgz",
+      "integrity": "sha512-ip5hvJE8vsUJCGfgHaEJbf/JfO6KTZV+NBG68AWkEMhrjHW3Qh7EorED41mCt0FFSTrUDeRiNHovKO7cqgPZmw=="
     },
     "remark-parse": {
       "version": "5.0.0",
@@ -15343,9 +15343,9 @@
       }
     },
     "remark-slug": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/remark-slug/-/remark-slug-5.1.1.tgz",
-      "integrity": "sha512-r591rdoDPJkSSAVvEaTVUkqbMp7c7AyZfif14V0Dp66GQkOHzaPAS6wyhawSbqpS0ZdTnfJS+TltFoxzi6bdIA==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/remark-slug/-/remark-slug-5.1.2.tgz",
+      "integrity": "sha512-DWX+Kd9iKycqyD+/B+gEFO3jjnt7Yg1O05lygYSNTe5i5PIxxxPjp5qPBDxPIzp5wreF7+1ROCwRgjEcqmzr3A==",
       "requires": {
         "github-slugger": "^1.0.0",
         "mdast-util-to-string": "^1.0.0",
diff --git a/frontend/package.json b/frontend/package.json
index 866d3885ef..19a494532c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -6,7 +6,7 @@
     "@reach/router": "^1.2.0",
     "@seafile/dtable": "0.0.35",
     "@seafile/resumablejs": "^1.1.9",
-    "@seafile/seafile-editor": "^0.2.36",
+    "@seafile/seafile-editor": "^0.2.37",
     "MD5": "^1.3.0",
     "autoprefixer": "7.1.6",
     "classnames": "^2.2.6",
diff --git a/frontend/src/components/dialog/delete-repo-dialog.js b/frontend/src/components/dialog/delete-repo-dialog.js
index 942b0b2bb6..ea77d80214 100644
--- a/frontend/src/components/dialog/delete-repo-dialog.js
+++ b/frontend/src/components/dialog/delete-repo-dialog.js
@@ -34,8 +34,8 @@ class DeleteRepoDialog extends Component {
           <p dangerouslySetInnerHTML={{__html: message}}></p>
         </ModalBody>
         <ModalFooter>
-          <Button color="primary" onClick={this.onDeleteRepo}>{gettext('Delete')}</Button>
           <Button color="secondary" onClick={this.toggle}>{gettext('Cancel')}</Button>
+          <Button color="primary" onClick={this.onDeleteRepo}>{gettext('Delete')}</Button>
         </ModalFooter>
       </Modal>
     );
diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js
index 81822b790f..f8c10ddaa4 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -458,12 +458,10 @@ class DirentListItem extends React.Component {
   }
 
   renderItemOperation = () => {
-    let { dirent, selectedDirentList, currentRepoInfo } = this.props;
+    let { dirent, selectedDirentList, currentRepoInfo, showShareBtn } = this.props;
     if (currentRepoInfo.permission === 'cloud-edit' || currentRepoInfo.permission === 'preview') {
       return '';
     }
-
-    let isShowShareBtn = (dirent.type === 'dir' && this.props.showShareBtn) || canGenerateShareLink;
     
     return (
       <Fragment>
@@ -475,7 +473,7 @@ class DirentListItem extends React.Component {
                   <li className="operation-group-item">
                     <i className="op-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemDownload}></i>
                   </li>
-                  {isShowShareBtn &&
+                  {showShareBtn &&
                   <li className="operation-group-item">
                     <i className="op-icon sf2-icon-share" title={gettext('Share')} onClick={this.onItemShare}></i>
                   </li>
@@ -505,7 +503,7 @@ class DirentListItem extends React.Component {
                   <li className="operation-group-item">
                     <i className="op-icon sf2-icon-download" title={gettext('Download')} onClick={this.onItemDownload}></i>
                   </li>
-                  {isShowShareBtn &&
+                  {showShareBtn &&
                   <li className="operation-group-item">
                     <i className="op-icon sf2-icon-share" title={gettext('Share')} onClick={this.onItemShare}></i>
                   </li>
diff --git a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
index 2c4cc50a95..b62b6019ca 100644
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
@@ -8,6 +8,7 @@ import { gettext, siteRoot, isPro, username, folderPermEnabled, isSystemStaff }
 import ModalPortal from '../../components/modal-portal';
 import ShareDialog from '../../components/dialog/share-dialog';
 import LibSubFolderPermissionDialog from '../../components/dialog/lib-sub-folder-permission-dialog';
+import DeleteRepoDialog from '../../components/dialog/delete-repo-dialog';
 import Rename from '../rename';
 import { seafileAPI } from '../../utils/seafile-api';
 
@@ -35,7 +36,8 @@ class SharedRepoListItem extends React.Component {
       isShowSharedDialog: false,
       isRenaming: false,
       isStarred: this.props.repo.starred,
-      isFolderPermissionDialogOpen: false
+      isFolderPermissionDialogOpen: false,
+      isDeleteDialogShow: false
     };
     this.isDeparementOnwerGroupMember = false;
   }
@@ -161,8 +163,8 @@ class SharedRepoListItem extends React.Component {
     this.props.onItemUnshare(this.props.repo);
   }
 
-  onItemDelete = () => {
-    this.props.onItemDelete(this.props.repo);
+  onItemDeleteToggle = () => {
+    this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow})
   }
 
   toggleShareDialog = () => {
@@ -284,7 +286,7 @@ class SharedRepoListItem extends React.Component {
     }
     const shareOperation   = <a href="#" className="op-icon sf2-icon-share" title={gettext('Share')} onClick={this.onItemShare}></a>;
     const unshareOperation = <a href="#" className="op-icon sf2-icon-x3" title={gettext('Unshare')} onClick={this.onItemUnshare}></a>;
-    const deleteOperation  = <a href="#" className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></a>;
+    const deleteOperation  = <a href="#" className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDeleteToggle}></a>;
     
     if (this.isDeparementOnwerGroupMember) {
       return (
@@ -391,6 +393,15 @@ class SharedRepoListItem extends React.Component {
             />
           </ModalPortal>
         )}
+        {this.state.isDeleteDialogShow && 
+            <ModalPortal>
+              <DeleteRepoDialog 
+                repo={this.props.repo}
+                onDeleteRepo={this.props.onItemDelete}
+                toggle={this.onItemDeleteToggle}
+              />
+          </ModalPortal>
+        }
       </Fragment>
     );
   }
diff --git a/frontend/src/markdown-editor.js b/frontend/src/markdown-editor.js
index c736c7f158..32c64e760c 100644
--- a/frontend/src/markdown-editor.js
+++ b/frontend/src/markdown-editor.js
@@ -13,6 +13,8 @@ import InsertRepoImageDialog from './components/dialog/insert-repo-image-dialog'
 import { serialize, deserialize } from '@seafile/seafile-editor/dist/utils/slate2markdown';
 import LocalDraftDialog from './components/dialog/local-draft-dialog';
 import MarkdownViewerToolbar from './components/toolbar/markdown-viewer-toolbar';
+import EditFileTagDialog from './components/dialog/edit-filetag-dialog';
+import RelatedFileDialogs from './components/dialog/related-file-dialogs';
 
 import './css/markdown-viewer/markdown-editor.css';
 
@@ -294,6 +296,11 @@ class MarkdownEditor extends React.Component {
       saving: false,
       isLocked: isLocked,
       lockedByMe: lockedByMe,
+      relatedFiles: [],
+      fileTagList: [],
+      showRelatedFileDialog: false,
+      showEditFileTagDialog: false,
+      viewMode: 'list_related_file',
     };
 
     if (this.state.collabServer) {
@@ -391,6 +398,8 @@ class MarkdownEditor extends React.Component {
       showShareLinkDialog: false,
       showInsertFileDialog: false,
       showInsertRepoImageDialog: false,
+      showRelatedFileDialog: false,
+      showEditFileTagDialog: false,
     });
   }
 
@@ -485,6 +494,28 @@ class MarkdownEditor extends React.Component {
           showInsertRepoImageDialog: true,
         });
         break;
+      case 'related_files':
+        if (this.state.relatedFiles.length > 0) {
+          this.setState({
+            showRelatedFileDialog: true,
+            showMarkdownEditorDialog: true,
+            viewMode: 'list_related_file',
+          });
+        }
+        else {
+          this.setState({
+            showRelatedFileDialog: true,
+            showMarkdownEditorDialog: true,
+            viewMode: 'add_related_file',
+          });
+        }
+        break;
+      case 'file_tags':
+        this.setState({
+          showEditFileTagDialog: true,
+          showMarkdownEditorDialog: true,
+        });
+        break;
       default:
         return;
     }
@@ -562,6 +593,8 @@ class MarkdownEditor extends React.Component {
       });
     }
     this.checkDraft();
+    this.listRelatedFiles();
+    this.listFileTags();
 
     setTimeout(() => {
       let url = new URL(window.location.href);
@@ -571,6 +604,30 @@ class MarkdownEditor extends React.Component {
     }, 100);
   }
 
+  listRelatedFiles = () => {
+    seafileAPI.listRelatedFiles(repoID, filePath).then(res => {
+      this.setState({ relatedFiles: res.data.related_files });
+    });
+  }
+
+  listFileTags = () => {
+    seafileAPI.listFileTags(repoID, filePath).then(res => {
+      let fileTagList = res.data.file_tags;
+      for (let i = 0; i < fileTagList.length; i++) {
+        fileTagList[i].id = fileTagList[i].file_tag_id;
+      }
+      this.setState({ fileTagList: fileTagList });
+    });
+  }
+
+  onRelatedFileChange = () => {
+    this.listRelatedFiles();
+  }
+
+  onFileTagChanged = () => {
+    this.listFileTags();
+  }
+
   setFileInfoMtime = (fileInfo) => {
     this.setState({
       fileInfo: Object.assign({}, this.state.fileInfo, { mtime: fileInfo.mtime, id: fileInfo.id, lastModifier: fileInfo.last_modifier_name })
@@ -736,6 +793,8 @@ class MarkdownEditor extends React.Component {
             onSaving={this.onSaving}
             contentChanged={this.state.contentChanged}
             saving={this.state.saving}
+            fileTagList={this.state.fileTagList}
+            relatedFiles={this.state.relatedFiles}
           />
         </Fragment>
       );
@@ -787,6 +846,30 @@ class MarkdownEditor extends React.Component {
                   />
                 </ModalPortal>
               }
+              {this.state.showEditFileTagDialog &&
+                <ModalPortal>
+                  <EditFileTagDialog
+                    repoID={repoID}
+                    filePath={filePath}
+                    fileTagList={this.state.fileTagList}
+                    toggleCancel={this.toggleCancel}
+                    onFileTagChanged={this.onFileTagChanged}
+                  />
+                </ModalPortal>
+              }
+              {this.state.showRelatedFileDialog &&
+                <ModalPortal>
+                  <RelatedFileDialogs
+                    repoID={repoID}
+                    filePath={filePath}
+                    relatedFiles={this.state.relatedFiles}
+                    toggleCancel={this.toggleCancel}
+                    onRelatedFileChange={this.onRelatedFileChange}
+                    dirent={this.state.fileInfo}
+                    viewMode={this.state.viewMode}
+                  />
+                </ModalPortal>
+              }
             </React.Fragment>
           )}
         </React.Fragment>
diff --git a/media/css/seahub.css b/media/css/seahub.css
index af31839515..299809380d 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -907,6 +907,11 @@ textarea:-moz-placeholder {/* for FF */
     padding:0;
 }
 /**** side-tabnav ****/
+.logo-container {
+  padding: .5rem 1rem;
+  background: #f4f4f7;
+  border-bottom: 1px solid #e8e8e8;
+}
 .side-textnav .hd,
 .side-info .hd {
     padding-bottom:4px;
@@ -915,13 +920,16 @@ textarea:-moz-placeholder {/* for FF */
 }
 @media (max-width: 767px) {
     .side-nav {
-        background: #f8f8f8;
+        background: #fff;
+        display:flex;
+        flex-direction:column;
         width:300px;
+        max-width: calc(100% - 40px);
         position:fixed;
         left:-300px;
         top:0;
         bottom:0;
-        z-index:1;
+        z-index:1002;
         box-shadow:0 0 4px #ccc;
         -webkit-transition: all 0.3s ease;
         -moz-transition: all 0.3s ease;
@@ -932,7 +940,7 @@ textarea:-moz-placeholder {/* for FF */
     }
 }
 .side-nav {
-    padding:20px;
+    padding:0;
     overflow:hidden;
     border-right:1px solid #eee;
 }
@@ -948,8 +956,13 @@ textarea:-moz-placeholder {/* for FF */
     border-right:1px solid #eee;
 }
 .side-nav-con {
-    overflow:hidden;
     padding:20px;
+    overflow:hidden;
+}
+@media (max-width: 767px) {
+  .side-nav-con {
+    overflow-y:auto;
+  }
 }
 .side-nav-con:hover {
     overflow-y:auto;
diff --git a/seahub/help/templates/help/base.html b/seahub/help/templates/help/base.html
index 1a1959c440..4987ebe05e 100644
--- a/seahub/help/templates/help/base.html
+++ b/seahub/help/templates/help/base.html
@@ -1,27 +1,45 @@
 {% extends "base.html" %}
 {% load i18n %}
 
+{% block extra_style %}
+<style type="text/css">
+.side-nav-con .first-hd {
+    margin-top: 0;
+}
+</style>
+{% endblock %}
+
 {% block main_class %}d-flex ovhd{% endblock %}
 
 {% block main_content %}
 <div class="row flex-1 d-flex">
     <div class="side-textnav col-md-3 side-nav">
-        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
-        <h3 class="hd">{% trans "Desktop Client and Syncing" %}</h3>
-        <ul class="side-textnav-tabs">
-            <li class="tab"><a href="{{ SITE_ROOT }}help/install/">{% trans "Install and sync Files" %}</a></li>
-            <li class="tab"><a href="{{ SITE_ROOT }}help/sync_existing/">{% trans "Syncing existing folders" %}</a></li>
-            <li class="tab"><a href="{{ SITE_ROOT }}help/selective_sync/">{% trans "Selective sync sub-folders" %}</a></li>
-            <li class="tab"><a href="{{ SITE_ROOT }}help/unsync_resync/">{% trans "Unsync and resync libraries" %}</a></li>
-            <li class="tab"><a href="{{ SITE_ROOT }}help/sync_interval/">{% trans "Setting sync interval" %}</a></li>
-            <li class="tab"><a href="{{ SITE_ROOT }}help/desktop_proxy/">{% trans "Proxy settings" %}</a></li>
-            <li class="tab"><a href="{{ SITE_ROOT }}help/conflicts/">{% trans "File conflicts" %}</a></li>
-            <li class="tab"><a href="{{ SITE_ROOT }}help/ignore/">{% trans "Excluding files" %}</a></li>
-        </ul>
-        <h3 class="hd">{% trans "Security and Encryption" %}</h3>
-        <ul class="side-textnav-tabs">
-            <li class="tab"><a href="{{ SITE_ROOT }}help/encrypted_libraries/">{% trans "How to use encrypted libraries" %}</a></li>
-        </ul>
+        <div class="hidden-md-up logo-container">
+            <a href="{{ SITE_ROOT }}">
+                {% if seacloud_mode %}
+                <img src="{{ MEDIA_URL }}img/seacloud_logo.png?t=1398068110" title="Seacloud" alt="logo" width="186" height="31" />
+                {% else %}
+                <img src="{{ MEDIA_URL }}{{ logo_path }}" title="{{ site_title }}" alt="logo" width="{{logo_width}}" height="{{logo_height}}" />
+                {% endif %}
+            </a>
+        </div>
+        <div class="side-nav-con">
+            <h3 class="hd first-hd">{% trans "Desktop Client and Syncing" %}</h3>
+            <ul class="side-textnav-tabs">
+                <li class="tab"><a href="{{ SITE_ROOT }}help/install/">{% trans "Install and sync Files" %}</a></li>
+                <li class="tab"><a href="{{ SITE_ROOT }}help/sync_existing/">{% trans "Syncing existing folders" %}</a></li>
+                <li class="tab"><a href="{{ SITE_ROOT }}help/selective_sync/">{% trans "Selective sync sub-folders" %}</a></li>
+                <li class="tab"><a href="{{ SITE_ROOT }}help/unsync_resync/">{% trans "Unsync and resync libraries" %}</a></li>
+                <li class="tab"><a href="{{ SITE_ROOT }}help/sync_interval/">{% trans "Setting sync interval" %}</a></li>
+                <li class="tab"><a href="{{ SITE_ROOT }}help/desktop_proxy/">{% trans "Proxy settings" %}</a></li>
+                <li class="tab"><a href="{{ SITE_ROOT }}help/conflicts/">{% trans "File conflicts" %}</a></li>
+                <li class="tab"><a href="{{ SITE_ROOT }}help/ignore/">{% trans "Excluding files" %}</a></li>
+            </ul>
+            <h3 class="hd">{% trans "Security and Encryption" %}</h3>
+            <ul class="side-textnav-tabs">
+                <li class="tab"><a href="{{ SITE_ROOT }}help/encrypted_libraries/">{% trans "How to use encrypted libraries" %}</a></li>
+            </ul>
+        </div>
     </div>
 
     <div class="help-con article col-md-9 ov-auto flex-1" id="right-panel">{% block help_con %}{% endblock %}</div>
diff --git a/seahub/templates/base.html b/seahub/templates/base.html
index 3b597da243..7ae42b480c 100644
--- a/seahub/templates/base.html
+++ b/seahub/templates/base.html
@@ -239,17 +239,31 @@ $('#info-bar .close').on('click', function() {
 {% endif %}
 
 if ($('.side-nav').length) {
-     $('#logo').addClass('hidden-sm-down');
-     $('#js-toggle-side-nav').removeClass('hide');
+    $('#logo').addClass('hidden-sm-down');
+    $('#js-toggle-side-nav').removeClass('hide');
 }
 $('#js-toggle-side-nav').on('click', function() {
     $('.side-nav').addClass('side-nav-shown');
+    $('').modal({
+        overlayClose: true,
+        onClose: function() {
+            $('.side-nav').removeClass('side-nav-shown');
+            $.modal.close();
+        }});
+    $('#simplemodal-container').css({'display':'none'});
     return false;
 });
 $('.js-close-side-nav').on('click', function() {
     $('.side-nav').removeClass('side-nav-shown');
     return false;
 });
+$(window).on('resize', function() {
+    if ($(window).width() >= 768) {
+        $.modal.close();
+    } else {
+        $('.side-nav').removeClass('side-nav-shown');
+    }
+});
 </script>
 {% block extra_script %}{% endblock %}
 </body>
diff --git a/seahub/templates/js/sysadmin-templates.html b/seahub/templates/js/sysadmin-templates.html
index 420470946f..26eaaaaa54 100644
--- a/seahub/templates/js/sysadmin-templates.html
+++ b/seahub/templates/js/sysadmin-templates.html
@@ -1,7 +1,16 @@
 {% load avatar_tags i18n %}
 
 <script type="text/template" id="side-nav-tmpl">
-    <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
+    <div class="hidden-md-up logo-container">
+        <a href="{{ SITE_ROOT }}">
+            {% if seacloud_mode %}
+            <img src="{{ MEDIA_URL }}img/seacloud_logo.png?t=1398068110" title="Seacloud" alt="logo" width="186" height="31" />
+            {% else %}
+            <img src="{{ MEDIA_URL }}{{ logo_path }}" title="{{ site_title }}" alt="logo" width="{{logo_width}}" height="{{logo_height}}" />
+            {% endif %}
+        </a>
+    </div>
+    <div class="side-nav-con">
     <h3 class="hd">{% trans "System Admin" %}</h3>
     <ul class="side-tabnav-tabs">
 
@@ -137,6 +146,7 @@
             <input type="text" name="name" class="input" value="" placeholder="{% trans "Search groups by name..." %}" title="{% trans "Search groups by name..." %}" aria-label="{% trans "Search groups by name..." %}" />
         </form>
     <% } %>
+    </div>
 </script>
 
 <script type="text/template" id="sysinfo-tmpl">
diff --git a/seahub/templates/sysadmin/base.html b/seahub/templates/sysadmin/base.html
index f6763e5ecc..6a1dc78941 100644
--- a/seahub/templates/sysadmin/base.html
+++ b/seahub/templates/sysadmin/base.html
@@ -11,8 +11,17 @@
 {% block main_content %}
 <div class="row flex-1 d-flex">
     <div id="side-nav" class="side-nav side-tabnav col-md-3">
-        <a href="#" title="{% trans "Close" %}" aria-label="{% trans "Close" %}" class="sf2-icon-x1 sf-popover-close op-icon hidden-md-up js-close-side-nav fright"></a>
-        {% block left_panel %}
+        <div class="hidden-md-up logo-container">
+            <a href="{{ SITE_ROOT }}">
+                {% if seacloud_mode %}
+                <img src="{{ MEDIA_URL }}img/seacloud_logo.png?t=1398068110" title="Seacloud" alt="logo" width="186" height="31" />
+                {% else %}
+                <img src="{{ MEDIA_URL }}{{ logo_path }}" title="{{ site_title }}" alt="logo" width="{{logo_width}}" height="{{logo_height}}" />
+                {% endif %}
+            </a>
+        </div>
+        <div class="side-nav-con">
+            {% block left_panel %}
         <h3 class="hd">{% trans "System Admin" %}</h3>
         <ul class="side-tabnav-tabs">
 
@@ -132,6 +141,7 @@
 
         </ul>
         {% endblock %}
+      </div>
     </div>
 
     <div id="right-panel" class="col-md-9 ov-auto flex-1">
diff --git a/static/scripts/sysadmin-app/views/side-nav.js b/static/scripts/sysadmin-app/views/side-nav.js
index 86464256fc..1039c39baf 100644
--- a/static/scripts/sysadmin-app/views/side-nav.js
+++ b/static/scripts/sysadmin-app/views/side-nav.js
@@ -2,8 +2,9 @@ define([
     'jquery',
     'underscore',
     'backbone',
-    'common'
-], function($, _, Backbone, Common) {
+    'common',
+    'simplemodal'
+], function($, _, Backbone, Common, Simplemodal) {
     'use strict';
 
     var sideNavView = Backbone.View.extend({
@@ -26,6 +27,8 @@ define([
             $(window).on('resize', function() {
                 if ($(window).width() >= 768) {
                     _this.show();
+                } else {
+                    _this.hide();
                 }
             });
         },
@@ -44,11 +47,25 @@ define([
         },
 
         show: function() {
+            var _this = this;
             this.$el.css({ 'left':'0px' });
+            if ($(window).width() < 768) {
+                $('').modal({
+                    overlayClose: true,
+                    onClose: function() {
+                        _this.hide();
+                    }});
+                $('#simplemodal-container').css({'display':'none'});
+            } else {
+                $.modal.close();
+            }
         },
 
         hide: function() {
             this.$el.css({ 'left':'-300px' });
+            if ($(window).width() < 768) {
+                $.modal.close();
+            }
         },
 
         events: {