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: {