diff --git a/media/css/seahub.css b/media/css/seahub.css
index 6515e1ee81..347762df52 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -808,10 +808,6 @@ textarea:-moz-placeholder {/* for FF */
     margin-right:2px;
     vertical-align:middle;
 }
-#add-msg.add-msg-hl {
-    background:#fff;
-    line-height:22px;
-}
 .top-bar-con .msg-count {
     color:red;
 }
@@ -876,7 +872,7 @@ textarea:-moz-placeholder {/* for FF */
     box-shadow:0 0 5px #ccc;
     position:absolute;
     right:0;
-    top:24px;
+    top:-24px;
     z-index:100;/* for pages with jquery tabs*/
 }
 #msg-file-share {
@@ -2484,3 +2480,7 @@ textarea:-moz-placeholder {/* for FF */
     color:#666;
     text-decoration:none;
 }
+#add-msg .icon-pencil {
+    font-size:1em;
+    margin:0 3px 0 0;
+}
diff --git a/seahub/message/templates/message/all_msg_list.html b/seahub/message/templates/message/all_msg_list.html
index c79af75745..28b9b086d2 100644
--- a/seahub/message/templates/message/all_msg_list.html
+++ b/seahub/message/templates/message/all_msg_list.html
@@ -9,11 +9,12 @@
 {% endblock %}
 
 {% block title_panel %}
-<div class="tabnav">
-    <ul class="tabnav-tabs">
+<div class="tabnav w100">
+    <ul class="tabnav-tabs fleft">
         <li class="tabnav-tab"><a href="{% url 'user_notification_list' %}">{% trans "Notices" %}</a></li>
         <li class="tabnav-tab tabnav-tab-cur">{% trans "Messages" %}</li>
     </ul>
+    <button id="add-msg" class="fright"><span class="icon-pencil"></span>{% trans "New Message" %}</button>
 </div>
 {% endblock %}
 
@@ -31,13 +32,30 @@
     <tr data-href="{% url 'user_msg_list' key|id_or_email %}" class="{% if not_read > 0 %}bold{% endif %}">
         <td class="alc">{% avatar key 20 %}</td>
         <td>{{ key }}{% if not_read > 0%}({{not_read}}){% endif %}</td>
-        <td>{{ value.last_msg|truncatechars:60 }}</td>
+        <td>{{ value.last_msg|seahub_urlize|truncatewords_html:12 }}</td>
         <td>{{ value.last_time|translate_seahub_time }}</td>
     </tr>
     {% endwith %}
     {% endfor %}
 </table>
 {% endif %}
+
+<div id="send-msg-popup" class="hide">
+    <img src="{{MEDIA_URL}}img/loading-icon.gif" class="loading-tip" />
+    <form id="send-msg-form" action="{% url 'message_send' %}" method="post" name="send-msg-form" class="hide">{% csrf_token %}
+        <textarea id="mass-msg" name="mass_msg" placeholder="{% trans "message..." %}"></textarea><br/>
+        <select id="mass-email" name="mass_email" multiple="multiple"></select><br/>
+        <div id="msg-file-share">
+            <button type="button" id="msg-file-share-btn"><span class="icon-plus-sign-alt"></span> {% trans "Add files" %}</button>
+            <div id="msg-file-tree" class="hide"></div>
+            <span class="icon-remove hide"></span>
+        </div>
+        <p class="error hide"></p>
+        <input type="submit" value="{% trans "Submit"%}" />
+        <input type="button" value="{% trans "Cancel"%}" class="cancel" />
+    </form>
+</div>
+
 {% endblock %}
 
 {% block extra_script %}
@@ -47,5 +65,109 @@ $(function(){
         location.href = $(this).data('href');
     });
 });
+
+$('#main-panel').removeClass('ovhd').css({'position':'relative'});
+$('#add-msg').click(function() {
+    var add_msg_btn = $('#add-msg'),
+        popup = $('#send-msg-popup');
+
+    if (!popup.hasClass('hide')) {
+        popup.addClass('hide');
+        return;
+    }
+    popup.removeClass('hide');
+    $.ajax({
+        url:'{% url 'get_contacts' %}',
+        cache: false,
+        dataType: 'json',
+        success: function(data) {
+            var contacts = data['contacts'],
+                opts = '',
+                email;
+            if (contacts.length > 0) {
+                popup.find('.loading-tip').remove();
+                $('#send-msg-form').removeClass('hide');
+
+                for(var i = 0, len = contacts.length; i < len; i++) {
+                    email = contacts[i].email;
+                    opts += '<option value="' + email + '" data-index="' + i + '">' + email + '</option>';
+                }
+                var format = function(item) {
+                    return contacts[$(item.element).data('index')].avatar + '<span class="vam">' + item.text + '</span>';
+                }
+                $('#mass-email').html(opts).select2({
+                    placeholder: "{% trans "send to: click to select contacts" %}",
+                    formatResult: format,
+                    formatSelection: format,
+                    escapeMarkup: function(m) { return m; }
+                });
+            } else {
+                popup.html('<p>' + "{% trans "please add contacts at first" %}" + '</p>');
+            }
+        },
+        error: function() {
+            popup.html('<p class="error">' + "{% trans "Failed to get your contacts for sending a message." %}" + '</p>');
+        }
+    });
+});
+$(document).click(function(e) {
+    if (e.eventPhase == 2) { // for ff
+        return;
+    }
+    var target = e.target || event.srcElement,
+        popup = $('#send-msg-popup'),
+        popup_switch = $('#add-msg');
+    if (!popup.hasClass('hide') && !popup.is(target) && !popup.find('*').is(target) && !popup_switch.is(target)) {
+        popup.addClass('hide');
+    }    
+});
+$('#msg-file-share-btn').click(function() {
+    var msg_file_share = $('#msg-file-share'),
+        btn = $(this);
+    $.ajax({
+        'url': '{% url 'get_my_unenc_repos' %}',
+        'cache': false,
+        'dataType': 'json',
+        'success': function(data) {
+            btn.addClass('hide');
+            var file_tree = new FileTree();
+            var repos = file_tree.format_repo_data(data);
+            if (repos.length > 0) {
+                file_tree.renderFileTree($('#msg-file-tree').css({'max-height':$(window).height() - $('#title-panel').offset().top - $('#title-panel').height() - $('#send-msg-popup').outerHeight(), 'overflow':'auto'}).data('site_root', '{{SITE_ROOT}}'), repos, {'two_state': true});
+                $('#msg-file-tree').fadeIn(600);
+                msg_file_share.find('.icon-remove').removeClass('hide');
+            } else {
+                msg_file_share.html('<p class="error">' + "{% trans "You don't have any library at present" %}" + '</p>');
+            }
+        },
+        'error': function(jqXHR, textStatus, errorThrown) {
+            if (!jqXHR.responseText) {
+                msg_file_share.html('<p class="error">' + "{% trans "Failed. Please check the network." %}" + '</p>');
+            }
+        }
+    });
+});
+$('#msg-file-share .icon-remove').click(function() {
+        $(this).addClass('hide');
+        $('#msg-file-tree').fadeOut(200);
+        $('#msg-file-share-btn').removeClass('hide');
+});
+$('#send-msg-form .cancel').click(function() {
+        $('#send-msg-popup').addClass('hide');
+        $('#add-msg').removeClass('add-msg-hl');
+});
+
+$('#send-msg-form').submit(function() {
+    var form_id = $(this).attr('id');
+    if (!$('#mass-msg').val()) {
+        apply_form_error(form_id, "{% trans "message is required" %}");
+        return false;
+    }
+    if (!$('#mass-email').val()) { // val is null or ['xx',...]
+        apply_form_error(form_id, "{% trans "contact is required" %}");
+        return false;
+    }
+});
+
 </script>
 {% endblock %}
diff --git a/seahub/message/templates/message/user_msg_list.html b/seahub/message/templates/message/user_msg_list.html
index 2f9b29ff98..11748feece 100644
--- a/seahub/message/templates/message/user_msg_list.html
+++ b/seahub/message/templates/message/user_msg_list.html
@@ -62,7 +62,7 @@
                     <a class="author" href="{% url 'user_msg_list' msg.from_email|id_or_email %}">{{ msg.from_email|email2nickname }}</a>
                     <span class="time">{{ msg.timestamp|translate_seahub_time }}</span>
                 </div>
-                <p class="msg-con">{{ msg.message|safe|seahub_urlize|find_at|linebreaksbr }}</p>
+                <p class="msg-con">{{ msg.message|seahub_urlize|find_at|linebreaksbr }}</p>
                 {% if msg.attachments %}
                 <ul class="msg-attachment">
                     {% for att in msg.attachments %}
diff --git a/seahub/templates/base.html b/seahub/templates/base.html
index 864d24401b..de5e853035 100644
--- a/seahub/templates/base.html
+++ b/seahub/templates/base.html
@@ -43,7 +43,7 @@
                     <div class="account">
                         {% if request.user.is_authenticated %}
                         <a href="{% url 'edit_profile' %}" class="top-link avatar-link" title="{% trans 'Profile Setting' %}">{% avatar request.user 16 %}</a> <span class="my-info">{{ request.user }}</span>
-                        <button class="icon-envelope btn" id="add-msg" title="{% trans "send a message" %}"></button>
+                        <button class="icon-envelope btn" data-url="{% url 'message_list' %}" title="{% trans "messages" %}" id="msg-link"></button>
                         <button class="btn" data-url="{% url 'user_notification_list' %}" id="msg-count" title="{% trans "unread notices" %}">0</button>
                         {% else %}
                         <a href="{{ SITE_ROOT }}accounts/login/" class="top-link">{% trans "Log In" %}</a>
@@ -61,23 +61,6 @@
                         <a href="{{ SITE_ROOT }}accounts/logout/" class="icon-signout top-link" title="{% trans "Log out" %}" id="logout"></a>
                         {% endif %}
                     </div>
-
-                    <div id="send-msg-popup" class="hide">
-                        <img src="{{MEDIA_URL}}img/loading-icon.gif" class="loading-tip" />
-                        <form id="send-msg-form" action="{% url 'message_send' %}" method="post" name="send-msg-form" class="hide">{% csrf_token %}
-                            <textarea id="mass-msg" name="mass_msg" placeholder="{% trans "message..." %}"></textarea><br/>
-                            <select id="mass-email" name="mass_email" multiple="multiple"></select><br/>
-                            <div id="msg-file-share">
-                                <button type="button" id="msg-file-share-btn"><span class="icon-plus-sign-alt"></span> {% trans "Add files" %}</button>
-                                <div id="msg-file-tree" class="hide"></div>
-                                <span class="icon-remove hide"></span>
-                            </div>
-                            <p class="error hide"></p>
-                            <input type="submit" value="{% trans "Submit"%}" />
-                            <input type="button" value="{% trans "Cancel"%}" class="cancel" />
-                        </form>
-                    </div>
-
                 </div>
             </div>
         </div>
@@ -291,114 +274,7 @@ $(document).ready(function(){
         }
     });
 });
-
-$('#add-msg').click(function() {
-    var add_msg_btn = $('#add-msg'),
-        popup = $('#send-msg-popup');
-
-    if (!popup.hasClass('hide')) {
-        popup.addClass('hide');
-        add_msg_btn.removeClass('add-msg-hl');
-        return;
-    }
-
-    popup.removeClass('hide');
-    add_msg_btn.addClass('add-msg-hl');
-    $.ajax({
-        url:'{% url 'get_contacts' %}',
-        cache: false,
-        dataType: 'json',
-        success: function(data) {
-            var contacts = data['contacts'],
-                opts = '',
-                email;
-            if (contacts.length > 0) {
-                popup.find('.loading-tip').remove();
-                $('#send-msg-form').removeClass('hide');
-
-                for(var i = 0, len = contacts.length; i < len; i++) {
-                    email = contacts[i].email;
-                    opts += '<option value="' + email + '" data-index="' + i + '">' + email + '</option>';
-                }
-                var format = function(item) {
-                    return contacts[$(item.element).data('index')].avatar + '<span class="vam">' + item.text + '</span>';
-                }
-                $('#mass-email').html(opts).select2({
-                    placeholder: "{% trans "send to: click to select contacts" %}",
-                    formatResult: format,
-                    formatSelection: format,
-                    escapeMarkup: function(m) { return m; }
-                });
-            } else {
-                popup.html('<p>' + "{% trans "please add contacts at first" %}" + '</p>');
-            }
-        },
-        error: function() {
-            popup.html('<p class="error">' + "{% trans "Failed to get your contacts for sending a message." %}" + '</p>');
-        }
-    });
-});
-$(document).click(function(e) {
-    if (e.eventPhase == 2) { // for ff
-        return;
-    }
-    var target = e.target || event.srcElement,
-        popup = $('#send-msg-popup'),
-        popup_switch = $('#add-msg');
-    if (!popup.hasClass('hide') && !popup.is(target) && !popup.find('*').is(target) && !popup_switch.is(target)) {
-        popup.addClass('hide');
-        $('#add-msg').removeClass('add-msg-hl');
-    }    
-});
-$('#msg-file-share-btn').click(function() {
-    var msg_file_share = $('#msg-file-share'),
-        btn = $(this);
-    $.ajax({
-        'url': '{% url 'get_my_unenc_repos' %}',
-        'cache': false,
-        'dataType': 'json',
-        'success': function(data) {
-            btn.addClass('hide');
-            var file_tree = new FileTree();
-            var repos = file_tree.format_repo_data(data);
-            if (repos.length > 0) {
-                file_tree.renderFileTree($('#msg-file-tree').css({'max-height':$(window).height() - $('#top-bar').height() - $('#send-msg-popup').outerHeight(), 'overflow':'auto'}).data('site_root', '{{SITE_ROOT}}'), repos, {'two_state': true});
-                $('#msg-file-tree').fadeIn(600);
-                msg_file_share.find('.icon-remove').removeClass('hide');
-            } else {
-                msg_file_share.html('<p class="error">' + "{% trans "You don't have any library at present" %}" + '</p>'); 
-            }
-        },
-        'error': function(jqXHR, textStatus, errorThrown) {
-            if (!jqXHR.responseText) {
-                msg_file_share.html('<p class="error">' + "{% trans "Failed. Please check the network." %}" + '</p>'); 
-            }
-        }
-    });
-});
-$('#msg-file-share .icon-remove').click(function() {
-        $(this).addClass('hide');
-        $('#msg-file-tree').fadeOut(200);
-        $('#msg-file-share-btn').removeClass('hide');
-});
-$('#send-msg-form .cancel').click(function() {
-        $('#send-msg-popup').addClass('hide');
-        $('#add-msg').removeClass('add-msg-hl');
-});
-
-$('#send-msg-form').submit(function() {
-    var form_id = $(this).attr('id');
-    if (!$('#mass-msg').val()) {
-        apply_form_error(form_id, "{% trans "message is required" %}");
-        return false;
-    }
-    if (!$('#mass-email').val()) { // val is null or ['xx',...]
-        apply_form_error(form_id, "{% trans "contact is required" %}");
-        return false;
-    }
-});
-
-$('#msg-count').click(function() {
+$('#msg-count, #msg-link').click(function() {
     location.href = $(this).data('url');
 });