diff --git a/media/css/seahub.css b/media/css/seahub.css
index 9cea000d70..f50b4f125a 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -703,7 +703,7 @@ textarea:-moz-placeholder {/* for FF */
 }
 /* Hide for mobile, show later */
 @media (min-width: 768px) {
-    .side-tabnav {
+    .side-nav {
         position:fixed;
         top:52px;
         bottom:0;
@@ -714,7 +714,7 @@ textarea:-moz-placeholder {/* for FF */
     }
 }
 @media (max-width: 767px) {
-    .side-tabnav {
+    .side-nav {
         background: #f8f8f8;
         width:300px;
         position:fixed;
@@ -728,14 +728,37 @@ textarea:-moz-placeholder {/* for FF */
         box-shadow:0 0 4px #ccc;
     }
 }
-.side-tabnav:hover {
+.side-nav:hover {
     overflow-y:auto;
 }
-.side-tabnav {
+.side-nav {
     -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
     transition: all 0.3s ease;
 }
+.home-side-nav {
+    display:flex;
+    flex-direction:column;
+    padding:0;
+}
+.side-nav-con {
+    overflow:hidden;
+    padding:20px;
+    flex-grow:1;
+}
+.side-nav-con:hover {
+    overflow-y:auto;
+}
+.side-nav-footer {
+    padding: 12px 20px 16px;
+    background: #f8f8f8;
+    border-top:1px solid #eee;
+}
+.side-nav-footer a {
+    color:#333;
+    font-weight: normal;
+    margin-right:0.25rem;
+}
 .side-tabnav .hd {
     margin-bottom:0.5em;
 }
@@ -1184,7 +1207,7 @@ textarea:-moz-placeholder {/* for FF */
     border-radius:4px;
     zoom:1;
 }
-.ui-menu .ui-menu-item a.ui-state-hover { 
+.ui-menu .ui-menu-item a.ui-state-hover {
     border-color:#fbcb09;
     background: #fdf5ce;
     color: #c77405;
@@ -2926,9 +2949,9 @@ button.sf-dropdown-toggle:focus {
     margin:0 3px 0 0;
 }
 .help-con {
-	padding:0 0 0 30px;
+	padding:20px;
 }
-#right-panel .help-con .hd {
+#right-panel.help-con .hd {
     font-weight:normal;
     margin-bottom:15px;
 }
@@ -3542,3 +3565,7 @@ img.thumbnail {
 #link-audit-form .get-code-btn {
     margin-bottom:20px;
 }
+/* about dialog */
+.about-content {
+    width: 300px;
+}
diff --git a/seahub/group/templates/group/group_base.html b/seahub/group/templates/group/group_base.html
index 2ad383cf45..0d6579301d 100644
--- a/seahub/group/templates/group/group_base.html
+++ b/seahub/group/templates/group/group_base.html
@@ -6,7 +6,7 @@
 
 {% block main_content %}
 
-<div class="side-tabnav col-md-3">
+<div class="side-tabnav side-nav col-md-3">
 {% block left_panel %}
     <div class="hd w100 ovhd">
         <h3>
diff --git a/seahub/help/templates/help/help_base.html b/seahub/help/templates/help/help_base.html
index 738e6cca4f..278fab3dd3 100644
--- a/seahub/help/templates/help/help_base.html
+++ b/seahub/help/templates/help/help_base.html
@@ -1,9 +1,10 @@
 {% extends "base.html" %}
 {% load i18n %}
 
-{% block cur_help %}cur{% endblock %}
-{% block left_panel %}
-<div class="side-textnav">
+{% block main_content %}
+<div class="row">
+
+<div class="side-textnav col-md-3 side-nav">
 	<h3 class="hd">{% trans "Client" context "help" %}</h2>
     <ul class="side-textnav-tabs">
 		<li class="tab {%block install %}{% endblock %}"><a href="{{ SITE_ROOT }}help/install/">{% trans "Install and Sync Files" %}</a></li>
@@ -18,10 +19,10 @@
 		<li class="tab {%block view_enc %}{% endblock %}"><a href="{{ SITE_ROOT }}help/view_encrypted/">{% trans "Viewing an encrypted library" %}</a></li>
 	</ul>
 </div>
-{% endblock %}
 
-{% block right_panel %}
-<div class="help-con article">{% block help_con %}{% endblock %}</div>
+<div class="help-con article col-md-9 col-md-offset-3" id="right-panel">{% block help_con %}{% endblock %}</div>
+
+</div>
 {% endblock %}
 
 {% block extra_script %}
diff --git a/seahub/profile/templates/profile/set_profile.html b/seahub/profile/templates/profile/set_profile.html
index 65ec6c1eb5..731297447b 100644
--- a/seahub/profile/templates/profile/set_profile.html
+++ b/seahub/profile/templates/profile/set_profile.html
@@ -7,7 +7,7 @@
 {% block main_content %}
 <div class="row">
 
-<div class="side-tabnav side-textnav col-md-3" id="side-nav" role="navigation">
+<div class="side-nav side-textnav col-md-3" id="side-nav" role="navigation">
     <ul class="side-textnav-tabs">
         <li class="tab"><a href="#user-basic-info">{% trans "Profile" %}</a></li>
         <li class="tab"><a href="#lang-setting">{% trans "Language" %}</a></li>
diff --git a/seahub/templates/base_for_backbone.html b/seahub/templates/base_for_backbone.html
index 2593d039a7..7d2c3adef6 100644
--- a/seahub/templates/base_for_backbone.html
+++ b/seahub/templates/base_for_backbone.html
@@ -75,16 +75,15 @@
         </div>
 
         <div id="main" class="clear container-fluid top-padding">
-            <div class="row">
-                <div class="side-tabnav col-md-3 hide" id="side-nav" role="navigation"></div>
+            <div class="row initial-loading">
+                <span class="loading-icon loading-tip"></span>
+            </div>
+
+            <div class="row main-content hide">
+                <div class="side-nav side-tabnav home-side-nav col-md-3" id="side-nav" role="navigation"></div>
                 <div id="right-panel" class="col-md-9 col-md-offset-3">
                     {% block right_panel %}{% endblock %}
                 </div>
-                <div id="main-panel" class="clear w100 ovhd">
-                    <div id="initial-loading-view">
-                        <span class="loading-icon loading-tip"></span>
-                    </div>
-                </div>
             </div>
 
             <div id="confirm-popup" class="hide">
@@ -108,7 +107,7 @@
         </div>
 
         {% include 'js/templates.html' %}
-</div><!-- wrapper -->
+    </div><!-- wrapper -->
 
 <script type="text/javascript">
 var app = {
diff --git a/seahub/templates/footer.html b/seahub/templates/footer.html
deleted file mode 100644
index ff44f2de4d..0000000000
--- a/seahub/templates/footer.html
+++ /dev/null
@@ -1,23 +0,0 @@
-{% load i18n %}
-<div id="footer" role="contentinfo" class="ovhd">
-  <div class="items fleft">
-    <div class="item">
-      <h4>{% trans "Documents" %}</h4>
-      <ul>
-        <li><a href="http://seafile.com/{% if LANGUAGE_CODE != 'zh-cn' %}en/{% endif %}home/" target="_blank">{% trans "Introduction" %}</a></li>
-	<li><a href="{{SITE_ROOT}}help/" target="_blank">{% trans "Help" %}</a></li>
-      </ul>
-    </div>
-    <div class="item">
-      <h4>{% trans "Client" %}</h4>
-      <ul>
-        <li><a href="{% url 'download_client' %}">{% trans "Seafile for Windows, Mac and Linux" %}</a></li>
-      </ul>
-    </div>
-  </div>
-  <div class="other-info fright">
-    <p>{% trans "Server Version: " %}{{ seafile_version }}</p>
-    <p>© 2016 {% trans "Seafile" %}</p>
-    <p><a href="http://seafile.com/{% if LANGUAGE_CODE != 'zh-cn' %}en/{% endif %}about/" target="_blank">{% trans "About Us" %}</a></p>
-  </div>
-</div>
diff --git a/seahub/templates/home_base.html b/seahub/templates/home_base.html
index 1b5abc6cbb..71663a4d5c 100644
--- a/seahub/templates/home_base.html
+++ b/seahub/templates/home_base.html
@@ -3,7 +3,7 @@
 
 {% block main_content %}
 <div class="row">
-    <div id="side-nav" class="side-tabnav col-md-3" >
+    <div id="side-nav" class="side-nav side-tabnav col-md-3" >
         {% block left_panel %}
         <h3 class="hd">{% trans "Files" %}</h3>
         <ul class="side-tabnav-tabs">
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index c0cbf7cdf4..d12e543526 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -606,6 +606,7 @@
 </script>
 
 <script type="text/template" id="side-nav-tmpl">
+    <div class="side-nav-con">
     <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 "Files" %}</h3>
     <ul class="side-tabnav-tabs">
@@ -704,6 +705,10 @@
             <a href="{{ SITE_ROOT }}share/links/"><span aria-hidden="true" class="sf2-icon-link"></span>{% trans "Links" %}</a>
         </li>
     </ul>
+    </div>
+    <div class="side-nav-footer ovhd" role="contentinfo">
+        {% include 'nav_footer.html' %}
+    </div>
 </script>
 
 <script type="text/template" id="myhome-mods-enable-form-tmpl">
diff --git a/seahub/templates/nav_footer.html b/seahub/templates/nav_footer.html
new file mode 100644
index 0000000000..b7248468d6
--- /dev/null
+++ b/seahub/templates/nav_footer.html
@@ -0,0 +1,11 @@
+{% load i18n %}
+<a href="{{SITE_ROOT}}help/" target="_blank">{% trans "Help" %}</a>
+<a href="#" class="js-about">{% trans "About" %}</a>
+<a href="{% url 'download_client' %}" class="fright"><span aria-hidden="true" class="sf2-icon-monitor vam"></span> <span class="vam">{% trans "Clients" %}</span></a>
+
+<div class="about-content hide">
+    <h3>{% trans "About" %}</h3>
+    <p>{% trans "Server Version: " %}{{ seafile_version }}</p>
+    <p>© 2016 {% trans "Seafile" %}</p>
+    <p><a href="http://seafile.com/en/about/" target="_blank">{% trans "About Us" %}</a></p>
+</div>
diff --git a/seahub/templates/pub_base.html b/seahub/templates/pub_base.html
deleted file mode 100644
index 54a8a83639..0000000000
--- a/seahub/templates/pub_base.html
+++ /dev/null
@@ -1,16 +0,0 @@
-{% extends "base.html" %}
-{% load seahub_tags i18n %}
-{% load url from future %}
-
-{% block sub_title %}{% trans "Organization" %} - {% endblock %}
-{% block cur_pubinfo %}cur{% endblock %}
-
-{% block left_panel %}
-<div class="side-tabnav">
-    <h3 class="hd">{% trans "Organization" %}</h3>
-    <ul class="side-tabnav-tabs">
-        <li class="tab {% block cur_lib %}{% endblock %}"><a href="{{ SITE_ROOT }}#org/"><span class="sf2-icon-library"></span>{% trans "Libraries" %}</a></li>
-        <li class="tab {% block cur_user %}{% endblock %}"><a href="{% url 'pubuser' %}"><span class="sf2-icon-user"></span>{% trans "Members" %}</a></li>
-    </ul>
-</div>
-{% endblock %}
diff --git a/seahub/templates/sysadmin/base.html b/seahub/templates/sysadmin/base.html
index 03165921ed..88742e047d 100644
--- a/seahub/templates/sysadmin/base.html
+++ b/seahub/templates/sysadmin/base.html
@@ -7,7 +7,7 @@
 
 {% block main_content %}
 <div class="row">
-    <div id="side-nav" class="side-tabnav col-md-3">
+    <div id="side-nav" class="side-nav side-tabnav col-md-3">
         {% block left_panel %}
         <h3 class="hd">{% trans "System Admin" %}</h3>
         <ul class="side-tabnav-tabs">
diff --git a/seahub/templates/sysadmin/sysadmin_backbone.html b/seahub/templates/sysadmin/sysadmin_backbone.html
index f748a6e495..711a662bca 100644
--- a/seahub/templates/sysadmin/sysadmin_backbone.html
+++ b/seahub/templates/sysadmin/sysadmin_backbone.html
@@ -58,7 +58,7 @@
 
         <div id="main" class="clear container-fluid top-padding">
             <div class="row">
-                <div class="side-tabnav col-md-3 hide" id="side-nav" role="navigation"></div>
+                <div class="side-nav side-tabnav col-md-3 hide" id="side-nav" role="navigation"></div>
                 <div id="right-panel" class="col-md-9 col-md-offset-3">
                     {% block right_panel %}{% endblock %}
                 </div>
diff --git a/static/scripts/app/router.js b/static/scripts/app/router.js
index 7c89d9a89b..6e79cbae03 100644
--- a/static/scripts/app/router.js
+++ b/static/scripts/app/router.js
@@ -43,7 +43,8 @@ define([
         },
 
         initialize: function() {
-            $('#initial-loading-view').hide();
+            $('.initial-loading').hide();
+            $('.main-content').show();
 
             Common.prepareApiCsrf();
             Common.initLocale();
diff --git a/static/scripts/app/views/side-nav.js b/static/scripts/app/views/side-nav.js
index 221f645fde..8d077751bb 100644
--- a/static/scripts/app/views/side-nav.js
+++ b/static/scripts/app/views/side-nav.js
@@ -28,7 +28,6 @@ define([
                 'can_add_repo': app.pageOptions.can_add_repo,
             };
             this.render();
-            this.$el.show();
             var _this = this;
             $('#js-toggle-side-nav').click(function() {
                 _this.show();
@@ -50,7 +49,8 @@ define([
             'click #group-nav a:first': 'toggleGroupList',
             'click #enable-mods': 'enableMods',
             'click .js-close-side-nav': 'closeNav',
-            'click li > a': 'visitLink'
+            'click li > a': 'visitLink',
+            'click .js-about': 'showAbout'
         },
 
         toggleGroupList: function() {
@@ -176,6 +176,12 @@ define([
             return true;
         },
 
+        showAbout: function() {
+            var $about = this.$('.about-content');
+            $about.modal();
+            return false;
+        }
+
     });
 
     return sideNavView;