diff --git a/media/css/seahub.css b/media/css/seahub.css
index c745ae85c4..79067d1136 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -457,6 +457,13 @@ textarea:-moz-placeholder {/* for FF */
 .side-tabnav-tabs .tab-cur .group {
     background-image:url('../img/groups_w.png');
 }
+.side-tabnav-tabs .tab .traffic {
+    background-image:url('../img/traffic.png');
+    background-position: 13px 50%;
+}
+.side-tabnav-tabs .tab-cur .traffic {
+    background-image:url('../img/traffic_w.png');
+}
 .side-tabnav-tabs .tab a:hover {
     background-color:#feefb8;
     text-decoration:none;
diff --git a/media/img/traffic.png b/media/img/traffic.png
new file mode 100644
index 0000000000..316e75ae0f
Binary files /dev/null and b/media/img/traffic.png differ
diff --git a/media/img/traffic_w.png b/media/img/traffic_w.png
new file mode 100644
index 0000000000..50d592c92e
Binary files /dev/null and b/media/img/traffic_w.png differ
diff --git a/seahub/templates/sysadmin/base.html b/seahub/templates/sysadmin/base.html
index d0d5a022d4..18924ef128 100644
--- a/seahub/templates/sysadmin/base.html
+++ b/seahub/templates/sysadmin/base.html
@@ -22,7 +22,7 @@
         </li>
         {% if traffic_stats_enabled %}
         <li class="tab {% block cur_traffic %}{% endblock %}">
-            <a href="{{ SITE_ROOT }}sys/trafficadmin/" class="links">{% trans "Traffic" %}</a>
+            <a href="{{ SITE_ROOT }}sys/trafficadmin/" class="traffic">{% trans "Traffic" %}</a>
         </li>
         {% endif %}
     </ul>
diff --git a/seahub/templates/sysadmin/sys_trafficadmin.html b/seahub/templates/sysadmin/sys_trafficadmin.html
index d90eb6299e..b1642b95bf 100644
--- a/seahub/templates/sysadmin/sys_trafficadmin.html
+++ b/seahub/templates/sysadmin/sys_trafficadmin.html
@@ -1,32 +1,39 @@
-{% extends "admin_base.html" %}
+{% extends "sysadmin/base.html" %}
+
 {% load seahub_tags i18n %}
-{% block nav_trafficadmin_class %}class="cur"{% endblock %}
 
-{% block main_panel %}
+{% block cur_traffic %}tab-cur{% endblock %}
 
-<form action="{{ sys_traffic_admin }}" method="GET" autocomplete="off">
-  <label for="month">{% trans "Month (like 201403):" %}</label>
-  <input type="text" name="month" maxlength="6" value="{{ month }}" />
+{% block extra_style %}
+<style type="text/css">
+#traffic-month-form {
+    margin-top:10px; 
+}
+#traffic-month-form .input {
+    width:100px;
+}
+</style>
+{% endblock %}
+
+{% block right_panel %}
+<h3 class="hd">{% trans "User Traffic" %}</h3>
+
+<form action="{{ sys_traffic_admin }}" method="get" autocomplete="off" id="traffic-month-form">
+    <label for="month">{% trans "Month:" %}</label>
+    <input type="text" name="month" maxlength="6" value="{{ month }}" class="input" />
 </form>
 
 <table>
-  <tr>
-    <th>{% trans "User" %}</th>
-    <th>{% trans "Total Usage" %}</th>
-    <th>{% trans "Shared File View" %}</th>
-    <th>{% trans "Shared File Download" %}</th>
-    <th>{% trans "Shared Folder Download" %}</th>
-  </tr>
-  {% for info in traffic_info_list %}
-  <tr>
-    <td>{{ info.email }}</td>
-    <td>{{ info.total |filesizeformat }}</td>
-    <td>{{ info.file_view |filesizeformat }}</td>
-    <td>{{ info.file_download |filesizeformat }}</td>
-    <td>{{ info.dir_download |filesizeformat }}</td>
-    <td></td>
-  </tr>
-  {% endfor %}
+    <tr>
+        <th>{% trans "User" %}</th>
+        <th>{% trans "Total Usage" %}</th>
+    </tr>
+    {% for info in traffic_info_list %}
+    <tr>
+        <td>{{ info.email }}</td>
+        <td>{{ info.total |filesizeformat }}</td>
+    </tr>
+    {% endfor %}
 </table>
 
 <div id="paginator">