diff --git a/group/templates/group/group_info.html b/group/templates/group/group_info.html
index 70dc04ce84..2729ad720d 100644
--- a/group/templates/group/group_info.html
+++ b/group/templates/group/group_info.html
@@ -6,9 +6,11 @@
 
 {% block main_panel %}
 {% if messages %}
+<ul class="messages hide">
     {% for message in messages %}
-    <p class="notification">{{ message }}</p>
+    <li class="info">{{ message }}</li>
     {% endfor %}
+</ul>
 {% endif %}
 
 <h2>{{ group.group_name }}</h2>
@@ -116,19 +118,9 @@
                 {% endif %}
                 {{ msg.message|linebreaksbr|seahub_urlize|find_at }}
                 </p>
-                {% if msg.reply_cnt == 0 %}
-                <a class="reply op" href="#" data="{{ msg.id }}">回复</a>
-                {% else %}
-                <a class="reply op" href="#" data="{{ msg.id }}">{{ msg.reply_cnt }} 回复</a>
-                {% endif %}
-                <a class="replyclose op hide" href="#">收起回复</a>
-                <div class="reply-list hide"></div>
-                <form id="form{{ msg.id }}" class="reply-form hide" method="post" action="">
-                  <input type="hidden" name="msg_id" value="{{ msg.id }}" />
-                  <input type="text" name="message" class="text-input" value=""/>
-                  <input type="submit" class="submit" value="回复" />
-                  <p class="error hide">输入不能为空且应少于150个字符。</p>
-                </form>
+                <button class="reply op" data="{{ msg.id }}"><span class="reply-cnt">{% if msg.reply_cnt != 0 %}{{ msg.reply_cnt }} {% endif %}</span>回复</button>
+                <button class="replyclose op hide">收起回复</button>
+                <div class="reply-bd"></div>
             </div>
         </div>
         </li>
@@ -258,7 +250,14 @@ $('#user-profile').hover(
         $(this).addClass('hide');
     }
 );
-
+$('.reply, .replyclose').hover(
+    function() {
+        $(this).css('color', '#f93');
+    },
+    function() {
+        $(this).css('color', '#080');
+    }
+);
 $('.reply').click(function() {
     var msg_id = $(this).attr('data'),
         msg_bd = $(this).parent();
@@ -268,59 +267,46 @@ $('.reply').click(function() {
         cache: false,
         contentType: 'application/json; charset=utf-8',
         success: function(data) {
-            msg_bd.children('.reply-list').html(data['html']).removeClass('hide');
-        }
-    });
-    msg_bd.children('.reply-form').removeClass('hide');
-    $(this).addClass('hide');
-    msg_bd.children('.replyclose').removeClass('hide');
-    return false;
-});
-
-function reply_at(nickname, msgID) {
-   var form_selector = '#form'+msgID+' .text-input';
-    $(form_selector).focus();
-    $(form_selector).val(nickname);
-    return false;
-}
-
-$('.replyclose').click(function() {
-    var msg_bd = $(this).parent();
-    msg_bd.children('.reply-list').addClass('hide');
-    msg_bd.children('.reply-form').addClass('hide');
-    $(this).addClass('hide');
-    msg_bd.children('.reply').removeClass('hide');
-    return false;
-});
-
-$('.reply-form').each(function(){
-    $(this).submit(function(event) {
-        var form = $(this), 
-            m_id = form.children('input[name="msg_id"]').val(),
-            m = $.trim(form.children('input[name="message"]').val()),
-            msg_bd = form.parent();
-        if (m && m.length <= 150) {
-            $.ajax({
-                type: "POST",
-                url: '{{ SITE_ROOT }}group/reply/' + m_id + '/',
-                dataType: 'json',
-                cache: false,
-                contentType: 'application/json; charset=utf-8',
-                beforeSend: prepareCSRFToken,
-                data: "message="+m,
-                success: function(data) {
-                    msg_bd.children('.reply-list').html(data['html']).attr('class', 'reply-list');
-                    form.children('input[name="message"]').val('');
-                    form.children('.error').attr('Class' , 'error hide');
-                    msg_bd.children('.reply').html(data['reply_cnt'] + ' 回复');
+            msg_bd.children('.reply-bd').html(data['html']).attr('class', 'reply-bd');
+            msg_bd.find('.reply-at').click(function() {
+                msg_bd.find('.reply-input').val('@' + $(this).attr('data') + ' ').focus();
+            });
+            msg_bd.find('.submit').click(function() {
+                var reply = $.trim(msg_bd.find('.reply-input').val());
+                if (reply && reply.length <= 150) {
+                    $.ajax({
+                        type: "POST",
+                        url: '{{ SITE_ROOT }}group/reply/' + msg_id + '/',
+                        dataType: 'json',
+                        cache: false,
+                        contentType: 'application/json; charset=utf-8',
+                        beforeSend: prepareCSRFToken,
+                        data: "message=" + reply,
+                        success: function(data) {
+                            msg_bd.find('.reply-list').append(data['html']);
+                            msg_bd.find('.reply-input').val('');
+                            msg_bd.find('.error').attr('class', 'error hide');
+                            var reply_cnt = parseInt(msg_bd.find('.reply-cnt').html()) + 1 || 1; 
+                            msg_bd.find('.reply-cnt').html(reply_cnt + ' ');
+                            msg_bd.find('.reply-at').click(function() {
+                                msg_bd.find('.reply-input').val('@' + $(this).attr('data') + ' ').focus();
+                            });
+                        }
+                    });
+                } else {
+                    msg_bd.find('.error').removeClass('hide');
                 }
             });
-        } else {
-            form.children('.error').removeClass('hide');
         }
-        return false;
     });
+    $(this).addClass('hide');
+    $(this).next().removeClass('hide'); // show 'replyclose'
 });
 
+$('.replyclose').click(function() {
+    $(this).parent().children('.reply-bd').addClass('hide');
+    $(this).addClass('hide');
+    $(this).prev().removeClass('hide'); // show 'reply'
+});
 </script>
 {% endblock %}
diff --git a/group/templates/group/group_reply_list.html b/group/templates/group/group_reply_list.html
index 670034f828..415eb46be7 100644
--- a/group/templates/group/group_reply_list.html
+++ b/group/templates/group/group_reply_list.html
@@ -1,13 +1,30 @@
 {% load seahub_tags avatar_tags %}
 
-<ul>
+{% if request != 'POST' %}
+
+<ul class="reply-list">
 {% for reply in replies %}
 <li class="w100 ovhd">
 <a href="{% url user_profile reply.from_email %}" class="pic fleft">{% avatar reply.from_email 28 %}</a>
 <div class="txt fright">
 <a href="{% url user_profile reply.from_email %}">{{ reply.nickname }}</a> : {{ reply.message|seahub_urlize|find_at }} -- 
-<a href="javascript:void(0);" class="" onclick="reply_at('@{{ reply.nickname }} ', {{ msg.id }})">回复</a>
+<button class="reply-at op" data="{{ reply.nickname }}">回复</button>
 </div>
 </li>
 {% endfor %}
 </ul>
+<input type="text" name="message" class="reply-input" value=""/>
+<button class="submit">回复</button>
+<p class="error hide">输入不能为空且应少于150个字符。</p>
+
+{% else %}
+
+<li class="w100 ovhd">
+<a href="{% url user_profile reply.from_email %}" class="pic fleft">{% avatar reply.from_email 28 %}</a>
+<div class="txt fright">
+<a href="{% url user_profile reply.from_email %}">{{ reply.nickname }}</a> : {{ reply.message|seahub_urlize|find_at }} -- 
+<button class="reply-at op" data="{{ reply.nickname }}">回复</button>
+</div>
+</li>
+
+{% endif %}
diff --git a/group/views.py b/group/views.py
index 91ccf78f3b..bbdb99b220 100644
--- a/group/views.py
+++ b/group/views.py
@@ -285,18 +285,27 @@ def msg_reply(request, msg_id):
             raise HttpResponse(status=400)
 
         ctx = {}
-        replies = MessageReply.objects.filter(reply_to=msg)
-        for e in replies:
+        if request.method == 'POST':
+            e = msg_reply
             try:
                 p = Profile.objects.get(user=e.from_email)
                 e.nickname = p.nickname
             except Profile.DoesNotExist:
                 e.nickname = e.from_email.split('@')[0]
-        ctx['replies'] = replies
-        ctx['msg'] = msg
+            ctx['request'] = 'POST'
+            ctx['reply'] = e
+        else:
+            replies = MessageReply.objects.filter(reply_to=msg)
+            for e in replies:
+                try:
+                    p = Profile.objects.get(user=e.from_email)
+                    e.nickname = p.nickname
+                except Profile.DoesNotExist:
+                    e.nickname = e.from_email.split('@')[0]
+            ctx['replies'] = replies
+
         html = render_to_string("group/group_reply_list.html", ctx)
-        serialized_data = json.dumps({"html": html,
-                                      "reply_cnt": len(replies)})
+        serialized_data = json.dumps({"html": html})
         return HttpResponse(serialized_data, content_type=content_type)
     else:
         return HttpResponseBadRequest(content_type=content_type)
diff --git a/media/css/seahub.css b/media/css/seahub.css
index 2b5567e478..e9bf7ef291 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -708,20 +708,21 @@ p {
 .msg-hd .group {
     margin-left:30px;
 }
-.msg-bd .op:hover {
-    text-decoration:none;
-}
 .msg-bd a {
     font-weight: normal;
 }
-.msg-bd .recommend {
-    color: #880088;
+.msg-bd .op {
+    padding:0;
+    background:none;
+    border:none;
 }
+.msg-bd .recommend,
 .msg-bd .at {
     color:#808;
 }
 .reply-list {
     color:#444;
+    font-size:12px;
     width:90%;
 }
 .reply-list li {
@@ -730,13 +731,15 @@ p {
 .reply-list .txt {
     width: 93%;
 }
-.reply-list a {
-    font-size:12px;
-}
-.reply-form .text-input {
+.reply-input {
     width:82%;
 }
-
+.reply-at {
+    font-size:12px;
+}
+.reply-at:hover {
+    color:#f93;
+}
 /*file upload*/
 .upload-file-panel {
     width:400px;