diff --git a/media/css/seahub.css b/media/css/seahub.css
index 0990faf5ac..bb217b7b6a 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -412,13 +412,51 @@ textarea:-moz-placeholder {/* for FF */
 }
 .side-tabnav-tabs .tab a {
     display:block;
-    padding:2px 4px;
+    font-size:14px;
+    padding:4px 4px 4px 30px;
     color:#333;
     font-weight:normal;
     border-radius:2px;
+    background:no-repeat scroll 4px 50%;
+}
+.side-tabnav-tabs .tab .lib {
+    background-image:url('../img/lib.png');
+}
+.side-tabnav-tabs .tab-cur .lib {
+    background-image:url('../img/lib_w.png');
+}
+.side-tabnav-tabs .tab .star {
+    background-image:url('../img/star.png');
+}
+.side-tabnav-tabs .tab-cur .star {
+    background-image:url('../img/star_w.png');
+}
+.side-tabnav-tabs .tab .activity {
+    background-image:url('../img/activity.png');
+}
+.side-tabnav-tabs .tab-cur .activity {
+    background-image:url('../img/activity_w.png');
+}
+.side-tabnav-tabs .tab .wiki {
+    background-image:url('../img/wiki.png');
+}
+.side-tabnav-tabs .tab-cur .wiki {
+    background-image:url('../img/wiki_w.png');
+}
+.side-tabnav-tabs .tab .msgs {
+    background-image:url('../img/msgs.png');
+}
+.side-tabnav-tabs .tab-cur .msgs {
+    background-image:url('../img/msgs_w.png');
+}
+.side-tabnav-tabs .tab .clients {
+    background-image:url('../img/clients.png');
+}
+.side-tabnav-tabs .tab-cur .clients {
+    background-image:url('../img/clients_w.png');
 }
 .side-tabnav-tabs .tab a:hover {
-    background:#feefb8;
+    background-color:#feefb8;
     text-decoration:none;
 }
 .side-tabnav-tabs .tab [class*="icon-"],
@@ -433,7 +471,7 @@ textarea:-moz-placeholder {/* for FF */
 }
 .side-tabnav-tabs .tab-cur a,
 .side-tabnav-tabs .tab-cur a:hover {
-    background:#feac74;
+    background-color:#feac74;
 }
 .side-tabnav-tabs .tab-cur [class*="icon-"],
 .side-tabnav-tabs .tab-cur [class*="sf2-icon-"],
diff --git a/media/img/activity.png b/media/img/activity.png
new file mode 100644
index 0000000000..62c95c7ee6
Binary files /dev/null and b/media/img/activity.png differ
diff --git a/media/img/activity_w.png b/media/img/activity_w.png
new file mode 100644
index 0000000000..5332674766
Binary files /dev/null and b/media/img/activity_w.png differ
diff --git a/media/img/clients.png b/media/img/clients.png
new file mode 100644
index 0000000000..19d5ceed0a
Binary files /dev/null and b/media/img/clients.png differ
diff --git a/media/img/clients_w.png b/media/img/clients_w.png
new file mode 100644
index 0000000000..dbcedd1efe
Binary files /dev/null and b/media/img/clients_w.png differ
diff --git a/media/img/lib.png b/media/img/lib.png
new file mode 100644
index 0000000000..e5767018e5
Binary files /dev/null and b/media/img/lib.png differ
diff --git a/media/img/lib_w.png b/media/img/lib_w.png
new file mode 100644
index 0000000000..fbe66713cf
Binary files /dev/null and b/media/img/lib_w.png differ
diff --git a/media/img/msgs.png b/media/img/msgs.png
new file mode 100644
index 0000000000..5d56265cea
Binary files /dev/null and b/media/img/msgs.png differ
diff --git a/media/img/msgs_w.png b/media/img/msgs_w.png
new file mode 100644
index 0000000000..1efec97087
Binary files /dev/null and b/media/img/msgs_w.png differ
diff --git a/media/img/star.png b/media/img/star.png
new file mode 100644
index 0000000000..caa2e3ac34
Binary files /dev/null and b/media/img/star.png differ
diff --git a/media/img/star_w.png b/media/img/star_w.png
new file mode 100644
index 0000000000..5daf008e71
Binary files /dev/null and b/media/img/star_w.png differ
diff --git a/media/img/wiki.png b/media/img/wiki.png
new file mode 100644
index 0000000000..4e17b17cde
Binary files /dev/null and b/media/img/wiki.png differ
diff --git a/media/img/wiki_w.png b/media/img/wiki_w.png
new file mode 100644
index 0000000000..fcc409b38d
Binary files /dev/null and b/media/img/wiki_w.png differ
diff --git a/seahub/templates/home_base.html b/seahub/templates/home_base.html
index 71bfcbe7d6..8ccbae8ff4 100644
--- a/seahub/templates/home_base.html
+++ b/seahub/templates/home_base.html
@@ -9,23 +9,24 @@
         <span id="enable-mods" class="icon-th fright" title="{% trans "Enable Modules" %}"></span>
     </div>
     <ul class="side-tabnav-tabs">
-        <li class="tab {% block cur_my_lib %}{% endblock %}"><a href="{% url 'myhome' %}"><span class="sf2-icon-archive vam"></span><span class="vam">{% trans "Libraries" %}</span></a></li>
-        <li class="tab {% block cur_stars %}{% endblock %}"><a href="{% url 'starred' %}"><span class="icon-star"></span>{% trans "Starred" %}</a></li>
+        <li class="tab {% block cur_my_lib %}{% endblock %}"><a href="{% url 'myhome' %}" class="lib">{% trans "Libraries" %}</a></li>
+        <li class="tab {% block cur_stars %}{% endblock %}"><a href="{% url 'starred' %}" class="star">{% trans "Starred" %}</a></li>
         {% if events_enabled %}
-        <li class="tab {% block cur_activities %}{% endblock %}"><a href="{% url 'activities' %}"><span class="icon-rss"></span>{% trans "Activities" %}</a></li>
+        <li class="tab {% block cur_activities %}{% endblock %}"><a href="{% url 'activities' %}" class="activity">{% trans "Activities" %}</a></li>
         {% endif %}
         {% for mod in mods_enabled %}
         {% if mod == 'personal wiki' %}
-        <li class="tab {% block cur_personal_wiki %}{% endblock %}"><a href="{% url 'personal_wiki' %}"><span class="icon-book"></span>{% trans "Personal Wiki" %}</a></li>
+        <li class="tab {% block cur_personal_wiki %}{% endblock %}"><a href="{% url 'personal_wiki' %}" class="wiki">{% trans "Personal Wiki" %}</a></li>
         {% endif %}
         {% endfor %}
-        <li class="tab {% block cur_messages %}{% endblock %}"><a href="{% url 'message_list' %}"><span class="icon-comment"></span>{% trans "Messages" %}</a></li>
-        <li class="tab {% block cur_clients %}{% endblock %}"><a href="{% url 'client_mgmt' %}"><span class="icon-desktop"></span>{% trans "Clients" %}</a></li>
-        <li class="tab {% block cur_contacts %}{% endblock %}"><a href="{% url 'contacts' %}"><span class="icon-user"></span>{% trans "Contacts" %}</a></li>
+        <li class="tab {% block cur_messages %}{% endblock %}"><a href="{% url 'message_list' %}" class="msgs">{% trans "Messages" %}</a></li>
+        <li class="tab {% block cur_clients %}{% endblock %}"><a href="{% url 'client_mgmt' %}" class="clients">{% trans "Clients" %}</a></li>
+        <li class="tab {% block cur_contacts %}{% endblock %}"><a href="{% url 'contacts' %}" class="">{% trans "Contacts" %}</a></li>
     </ul>
+
     <h3 class="hd">{% trans "Share Admin" %}</h3>
     <ul class="side-tabnav-tabs">
-        <li class="tab {% block cur_share_libs %}{% endblock %}"><a href="{% url 'share_admin' %}"><span class="sf2-icon-archive vam"></span><span class="vam">{% trans "Libraries" %}</span></a></li>
+        <li class="tab {% block cur_share_libs %}{% endblock %}"><a href="{% url 'share_admin' %}" class="lib">{% trans "Libraries" %}</a></li>
         <li class="tab {% block cur_share_folders %}{% endblock %}"><a href="{% url 'list_priv_shared_folders' %}"><span class="icon-folder-close"></span>{% trans "Folders" %}</a></li>
         <li class="tab {% block cur_share_files %}{% endblock %}"><a href="{% url 'list_priv_shared_files' %}"><span class="icon-file"></span>{% trans "Files" %}</a></li>        
         <li class="tab {% block cur_share_links %}{% endblock %}"><a href="{% url 'list_shared_links' %}"><span class="icon-link"></span>{% trans "Links" %}</a></li>