diff --git a/media/css/seahub.css b/media/css/seahub.css
index df599774d5..44fdeb97c2 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -815,7 +815,7 @@ textarea:-moz-placeholder {/* for FF */
     margin-bottom:.5em;
     border-radius:2px;
     padding-bottom:0;
-    height:39px;
+    height:48px;
     overflow:hidden;
 }
 .header-bar h3 {
diff --git a/seahub/templates/js/sysadmin-templates.html b/seahub/templates/js/sysadmin-templates.html
index 43cb0632d8..13067b6d07 100644
--- a/seahub/templates/js/sysadmin-templates.html
+++ b/seahub/templates/js/sysadmin-templates.html
@@ -1,4 +1,4 @@
-{% load i18n %}
+{% load avatar_tags i18n %}
 
 <script type="text/template" id="side-nav-tmpl">
     <h3 class="hd">{% trans "System Admin" %}</h3>
@@ -6,7 +6,8 @@
         <li class="tab <% if (cur_tab == 'dashboard') { %> tab-cur<% } %>">
             <a href="{{ SITE_ROOT }}sysadmin/#dashboard/"><span class="sf2-icon-wrench"></span>{% trans "Info" %}</a>
         </li>
-        <li class="tab <% if (cur_tab == 'devices') { %> tab-cur<% } %>"> <a href="{{ SITE_ROOT }}sysadmin/#desktop-devices/"><span class="sf2-icon-monitor"></span>{% trans "Devices" %}</a>
+        <li class="tab <% if (cur_tab == 'devices') { %> tab-cur<% } %>">
+            <a href="{{ SITE_ROOT }}sysadmin/#desktop-devices/"><span class="sf2-icon-monitor"></span>{% trans "Devices" %}</a>
         </li>
         <li class="tab">
             <a href="{% url "sys_settings" %}"><span class="sf2-icon-cog2"></span>{% trans "Settings" %}</a>
@@ -213,3 +214,22 @@
     <td><%- error_msg %></td>
     <td><time title='<%- time %>'><%- time_from_now %></time></td>
 </script>
+
+<script type="text/template" id="user-info-popup-tmpl">
+    <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
+    <div class="sf-popover-con">
+        <div class="item ovhd">
+            {% avatar request.user 36 %}
+            <div class="txt">
+                <%- app.pageOptions.name %><br />
+                <%- app.pageOptions.username %>
+            </div>
+        </div>
+        <div class="loading-icon loading-tip"></div>
+        <p class="error alc hide"></p>
+        <div id="space-traffic" class="hide"></div>
+        <a class="item" href="{{ SITE_ROOT }}profile/">{% trans "Settings" %}</a>
+        <a href="{{ SITE_ROOT }}" title="{% trans "Exit admin panel" %}" class="item">{% trans "Exit admin panel" %}</a>
+        <a href="{{ SITE_ROOT }}accounts/logout/" class="item" id="logout">{% trans "Log out" %}</a>
+    </div>
+</script>
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index cfceb7ff5f..4efcc346bc 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -1449,7 +1449,7 @@
         <div id="space-traffic" class="hide"></div>
         <a class="item" href="{{ SITE_ROOT }}profile/">{% trans "Settings" %}</a>
         {% if request.user.is_staff %}
-        <a href="{% url 'sys_useradmin' %}" title="{% trans "System Admin" %}" class="item">{% trans "System Admin" %}</a>
+        <a href="{% url 'sysadmin' %}" title="{% trans "System Admin" %}" class="item">{% trans "System Admin" %}</a>
         {% endif %}
         {% if request.user.org and request.user.org.is_staff %}
         <a href="{% url 'org_user_admin'%}" title="{% trans "Admin" %}" class="item">"{% trans "Organization Admin" %}"</a>
diff --git a/seahub/templates/sysadmin/base.html b/seahub/templates/sysadmin/base.html
index c5a1167169..a68bdea78a 100644
--- a/seahub/templates/sysadmin/base.html
+++ b/seahub/templates/sysadmin/base.html
@@ -10,8 +10,11 @@
     <div id="side-nav" class="side-tabnav col-md-3">
         <h3 class="hd">{% trans "System Admin" %}</h3>
         <ul class="side-tabnav-tabs">
-            <li class="tab {% block cur_info %}{% endblock %}">
-                <a href="{{ SITE_ROOT }}sys/info/"><span class="sf2-icon-wrench"></span>{% trans "Info" %}</a>
+            <li class="tab">
+                <a href="{{ SITE_ROOT }}sysadmin/"><span class="sf2-icon-wrench"></span>{% trans "Info" %}</a>
+            </li>
+            <li class="tab">
+                <a href="{{ SITE_ROOT }}sysadmin/#desktop-devices/"><span class="sf2-icon-monitor"></span>{% trans "Devices" %}</a>
             </li>
             <li class="tab {% block cur_settings %}{% endblock %}">
                 <a href="{% url "sys_settings" %}"><span class="sf2-icon-cog2"></span>{% trans "Settings" %}</a>
diff --git a/seahub/templates/sysadmin/sysadmin_backbone.html b/seahub/templates/sysadmin/sysadmin_backbone.html
index 6462f7f384..d06fa80432 100644
--- a/seahub/templates/sysadmin/sysadmin_backbone.html
+++ b/seahub/templates/sysadmin/sysadmin_backbone.html
@@ -2,17 +2,19 @@
 {% load compress %}
 {% load seahub_tags avatar_tags group_avatar_tags %}
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html lang="{{ LANGUAGE_CODE }}">
 <head>
 <title>{{ site_title }}</title>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta name="keywords" content="{% trans "File Collaboration Team Organization" %}" />
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <link rel="icon" type="image/x-icon" href="{{ MEDIA_URL }}img/favicon.png?t=1398068110" />
 <!--[if IE]>
 <link rel="shortcut icon" href="{{ MEDIA_URL }}img/favicon.png?t=1398068110"/>
 <![endif]-->
 
 {% compress css %}
+<link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}"/>
 <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/seahub.css?t=1398068110" />
 <link rel="stylesheet" type="text/css" href="{% static "css/select2-3.5.2.css" %}"/>
 <link rel="stylesheet" type="text/css" href="{% static "css/magnific-popup.css" %}" />
@@ -22,7 +24,7 @@
 </head>
 
 <body>
-    <div id="wrapper" class="{{ LANGUAGE_CODE }}">
+    <div id="wrapper" role="application" class="{{ LANGUAGE_CODE }}">
         <!--[if lt IE 10]>
         <p id="top-browser-tip">{% trans "We no longer support this version of IE. Please upgrade it to version 10 or above." %} <span class="close">{% trans "Close" %}</span></p>
         <![endif]-->
@@ -35,7 +37,7 @@
         {% endif %}
         {% endblock info_bar_message %}
 
-        <div id="header">
+        <div id="header" role="banner" class="navbar navbar-fixed-top">
             <div id="header-inner">
                 {% block notice_panel %}{% endblock %}
                 <a href="{{ SITE_ROOT }}" id="logo" class="fleft">
@@ -47,41 +49,23 @@
                 </a>
 
                 <div id="account" class="fright">
-                    <div id="my-info">
+                    <a id="my-info" href="#" class="no-deco" aria-label="{% trans "View profile and more" %}">
                         {% avatar request.user 36 %} <span class="icon-caret-down vam"></span>
-                    </div>
-                    <div id="user-info-popup" class="top-info-popup hide">
-                        <div class="outer-caret up-outer-caret"><div class="inner-caret"></div></div>
-                        <div class="item ovhd">
-                            {% avatar request.user 36 %}
-                            <div class="txt">
-                                {{ request.user.username|email2nickname }} <br />
-                                {{ request.user.username}}
-                            </div>
-                        </div>
-                        <span class="loading-icon loading-tip"></span>
-                        <div id="space-traffic" class="hide" data-url="{% url 'space_and_traffic' %}"></div>
-                        <a class="item" href="{{ SITE_ROOT }}profile/">{% trans "Settings" %}</a>
-                        <a href="{{ SITE_ROOT }}accounts/logout/" class="item" id="logout">{% trans "Log out" %}</a>
-                    </div>
-                    <div class="manage">
-                        <a href="{{ SITE_ROOT }}" title="{% trans "Exit System Admin" %}"><img src="{{ MEDIA_URL }}img/admin_out.png" alt="" /></a>
-                    </div>
+                    </a>
                 </div>
             </div>
         </div>
 
-        <div id="main" class="clear">
-            <div id="title-panel" class="w100 ovhd">
-            </div>
-            <div id="left-panel">
-                <div class="side-tabnav hide" id="side-nav"></div>
-            </div>
-            <div id="right-panel">
-            </div>
-            <div id="main-panel" class="clear w100 ovhd">
-                <div id="initial-loading-view">
-                    <span class="loading-icon loading-tip"></span>
+        <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 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>
 
@@ -92,7 +76,6 @@
             </div>
         </div>
 
-        {% include 'footer.html' %}
         {% include 'js/sysadmin-templates.html' %}
 </div><!-- wrapper -->
 
diff --git a/static/scripts/sysadmin-app/router.js b/static/scripts/sysadmin-app/router.js
index 820df960b6..226714796a 100644
--- a/static/scripts/sysadmin-app/router.js
+++ b/static/scripts/sysadmin-app/router.js
@@ -7,9 +7,11 @@ define([
     'sysadmin-app/views/dashboard',
     'sysadmin-app/views/desktop-devices',
     'sysadmin-app/views/mobile-devices',
-    'sysadmin-app/views/device-errors'
+    'sysadmin-app/views/device-errors',
+    'app/views/account'
 ], function($, Backbone, Common, SideNavView, DashboardView,
-    DesktopDevicesView, MobileDevicesView, DeviceErrorsView) {
+    DesktopDevicesView, MobileDevicesView, DeviceErrorsView,
+    AccountView) {
     "use strict";
 
     var Router = Backbone.Router.extend({
@@ -39,6 +41,8 @@ define([
             this.mobileDevicesView = new MobileDevicesView();
             this.deviceErrorsView = new DeviceErrorsView();
 
+            app.ui.accountView = this.accountView = new AccountView();
+
             this.currentView = this.dashboardView;
 
             $('#info-bar .close').click(Common.closeTopNoticeBar);