diff --git a/group/templates/group/group_discuss.html b/group/templates/group/group_discuss.html
index 68c5141cef..2dc039ff89 100644
--- a/group/templates/group/group_discuss.html
+++ b/group/templates/group/group_discuss.html
@@ -96,30 +96,34 @@
                     <a href="{% url 'user_profile' msg.from_email %}" title="{{ msg.from_email }}" class="author">{{ msg.from_email|email2nickname }}</a>
                     <span class="time">{{ msg.timestamp|translate_seahub_time }}</span>
                 </div>
-                <p class="msg-con">
-                {% if msg.attachment.src == 'recommend' %}
-                <span class="recommend">{% trans "Recommended" %}
-                  {% if msg.attachment.attach_type == 'file' %}
-                  <a href="{% url 'repo_view_file' msg.attachment.repo_id %}?p={{ msg.attachment.path|urlencode }}" target="_blank">
-                  {% else %}
-                  <a href="{% url 'repo' msg.attachment.repo_id %}?p={{ msg.attachment.path|urlencode }}" target="_blank">
-                  {% endif %}
-                  {{ msg.attachment.name }}</a> :
-                </span>
-                {% endif %}
+                <p class="msg-con">{{ msg.message|seahub_urlize|find_at|linebreaksbr }}</p>
+                {% if msg.attachment %}
+                {% with ma=msg.attachment %}
+                <div class="msg-attachment">
+                    {% if ma.src == 'recommend' %}
+                    {% if ma.attach_type == 'file' %}
+                    <img src="{{ MEDIA_URL }}img/file/{{ ma.name|file_icon_filter }}" alt="{% trans "File"%}" height="18" class="vam" />
+                    <a href="{% url 'repo_view_file' ma.repo_id %}?p={{ ma.path|urlencode }}" target="_blank" class="vam">{{ ma.name }}</a>
+                    {% else %}
+                    <img src="{{ MEDIA_URL }}img/folder-icon-24.png" alt="{% trans "Directory icon"%}" height="20" class="vam" />
+                    <a href="{% url 'repo' ma.repo_id %}?p={{ ma.path|urlencode }}" target="_blank" class="vam">{{ ma.name }}</a>
+                    {% endif %}
+                    {% endif %}
 
-                {% if msg.attachment.src == 'filecomment' %}
-                <span class="recommend">{% trans "File " %}<a href="{% url 'repo_view_file' msg.attachment.repo_id %}?p={{ msg.attachment.path|urlencode }}&comment_open=true" target="_blank"> {{ msg.attachment.name }}</a> {% trans "has a new comment:"%}</span>
+                    {% if ma.src == 'filecomment' %} {# compatible with comments already exist #}
+                    <img src="{{ MEDIA_URL }}img/file/{{ ma.name|file_icon_filter }}" alt="{% trans "File"%}" height="18" class="vam" />
+                    <a href="{% url 'repo_view_file' ma.repo_id %}?p={{ ma.path|urlencode }}" target="_blank" class="vam">{{ ma.name }}</a>
+                    {% endif %}
+                </div>
+                {% endwith %}
                 {% endif %}
-                
-                {{ msg.message|seahub_urlize|find_at|linebreaksbr }}
-                </p>
                 <span class="say"></span>
             </div>
             <div class="msg-op">
-                <div class="reply-cnt-op{% if msg.reply_cnt < 4 %} hide{% endif %}" data-rstatus="hide">
-                    <span class="reply-cnt" data-url="{% url 'msg_reply' msg.id %}">{% blocktrans with amount=msg.reply_cnt %}{{ amount }} replies{% endblocktrans %}</span>
-                    <span class="hide-reply hide">{% trans "Hide replies" %}</span>
+                <div class="replies-op{% if msg.reply_cnt < 4 %} hide{% endif %}" data-rstatus="hide">
+                    <span class="unfold-replies" data-url="{% url 'msg_reply' msg.id %}">{% blocktrans with amount=msg.reply_cnt %}{{ amount }} replies{% endblocktrans %}</span>
+                    <span class="fold-replies hide">{% trans "Hide replies" %}</span>
+                    <img src="{{MEDIA_URL}}img/loading-icon.gif" alt="" width="16" class="replies-loading-icon hide" />
                 </div>
                 {% if msg.reply_cnt == 0 %}
                 <ul class="reply-list hide"></ul>
diff --git a/group/templates/group/group_manage.html b/group/templates/group/group_manage.html
index 9beebbd742..6fb36eb66c 100644
--- a/group/templates/group/group_manage.html
+++ b/group/templates/group/group_manage.html
@@ -6,15 +6,15 @@
 
 {% block title_panel %}
 <div class="tabnav">
+    <div class="grp-profile fright">
+        {% grp_avatar group.props.id 24 %}<span class="name">{{ group.group_name }}</span>
+    </div>
     <ul class="tabnav-tabs">
         <li class="tabnav-tab"><a href="{% url 'group_info' group.id %}">{% trans "Libraries" %}</a></li>
         <li class="tabnav-tab"><a href="{% url 'group_discuss' group.id %}">{% trans "Discussion" %}</a></li>
         <li class="tabnav-tab"><a href="{% url 'group_wiki' group.id %}">{% trans "Wiki" %}</a></li>
         <li class="tabnav-tab tabnav-tab-cur">{% trans "Admin" %}</li>
     </ul>
-    <div class="fright">
-    {% grp_avatar group.props.id 24 %} <span style="font-size: 16px; font-weight:bold; margin: 0 6px;">{{ group.group_name }}</span>
-    </div>
 </div>
 {% endblock %}
 
diff --git a/group/templates/group/group_wiki.html b/group/templates/group/group_wiki.html
index fe6623c977..40b27d2bce 100644
--- a/group/templates/group/group_wiki.html
+++ b/group/templates/group/group_wiki.html
@@ -9,6 +9,9 @@
 
 
 <div class="tabnav">
+    <div class="grp-profile fright">
+        {% grp_avatar group.props.id 24 %}<span class="name">{{ group.group_name }}</span>
+    </div>
     <ul class="tabnav-tabs">
         <li class="tabnav-tab"><a href="{% url 'group_info' group.id %}">{% trans "Libraries" %}</a></li>
         <li class="tabnav-tab"><a href="{% url 'group_discuss' group.id %}">{% trans "Discussion" %}</a></li>
@@ -16,11 +19,7 @@
         {% if is_staff %}
         <li class="tabnav-tab"><a href="{% url 'group_manage' group.id %}">{% trans "Admin" %}</a></li>
         {% endif %}
-
     </ul>
-    <div class="fright">
-    {% grp_avatar group.props.id 24 %} <span style="font-size: 16px; font-weight:bold; margin: 0 6px;">{{ group.group_name }}</span>
-    </div>
 </div>
 
 {% if not wiki_exists %}
diff --git a/group/templates/group/msg_js.html b/group/templates/group/msg_js.html
index a55ffb24a0..3bc0e19564 100644
--- a/group/templates/group/msg_js.html
+++ b/group/templates/group/msg_js.html
@@ -15,7 +15,7 @@ $('.msg .op').hover(
         $(this).css({'text-decoration':'none'});
     }
 );
-$('.reply-cnt-op').hover(
+$('.replies-op').hover(
     function() {
         $(this).children().css({'text-decoration':'underline'});
     },
@@ -23,24 +23,28 @@ $('.reply-cnt-op').hover(
         $(this).children().css({'text-decoration':'none'});
     }
 ).click(function() {
-    var cnt_op = $(this); 
-    var r_cnt = cnt_op.children('.reply-cnt'); 
-    var url = r_cnt.data('url');
-    var h_r = cnt_op.children('.hide-reply'); 
-    var p = cnt_op.parent();
-    var r_list = p.find('.reply-list');
+    var op = $(this); 
+    var uf_r = op.children('.unfold-replies'); 
+    var f_r = op.children('.fold-replies'); 
+    var r_list = op.parent().find('.reply-list');
+    var loading = op.children('.replies-loading-icon');
+    loading.css({'left': uf_r.outerWidth() - 7});
 
-    if (cnt_op.data('rstatus') == 'hide') {
+    if (op.data('rstatus') == 'hide') {
+        uf_r.addClass('unfold-replies-nobg');
+        loading.removeClass('hide');
         $.ajax({
-            url: url,
+            url: uf_r.data('url'),
             dataType: 'json',
             cache: true,
             success: function(data) {
+                loading.addClass('hide');
+                uf_r.removeClass('unfold-replies-nobg');
                 r_list.html(data['html']);
-                r_cnt.addClass('hide');
-                h_r.removeClass('hide')
-                cnt_op.data('rstatus', 'show').data('cnt', data['r_num']);
-                p.find('.reply').hover(
+                uf_r.addClass('hide');
+                f_r.removeClass('hide')
+                op.data('rstatus', 'show').data('r_num', data['r_num']);
+                r_list.children().hover(
                     function() {
                         $(this).find('.op').removeClass('vh');
                     },
@@ -48,7 +52,7 @@ $('.reply-cnt-op').hover(
                         $(this).find('.op').addClass('vh');
                     }
                 );
-                p.find('.reply-at').hover(
+                r_list.find('.reply-at').hover(
                     function() {
                         $(this).css({'text-decoration':'underline'});
                     },
@@ -59,12 +63,12 @@ $('.reply-cnt-op').hover(
             }
         });
     } else {
-        h_r.addClass('hide'); 
-        r_cnt.removeClass('hide');
-        r_list.children(':lt(' + parseInt(cnt_op.data('cnt')-1) + ')').each(function(index) {
+        f_r.addClass('hide'); 
+        uf_r.removeClass('hide');
+        r_list.children(':lt(' + parseInt(op.data('r_num')-1) + ')').each(function(index) {
                 $(this).remove();
         });
-        cnt_op.data('rstatus', 'hide');
+        op.data('rstatus', 'hide');
     }
 });
 $('.reply-input').focus(function() {
@@ -111,14 +115,14 @@ $('.reply-submit').click(function() {
         success: function(data) {
             r_list.html(data['html']).removeClass('hide');
             if (data['r_num'] > 3) {
-                var r_cnt = p.find('.reply-cnt');
+                var r_cnt = p.find('.unfold-replies');
                 r_cnt.html(r_cnt.html().replace(/\d+/, data['r_num']));
-                p.find('.reply-cnt-op').removeClass('hide');
+                p.find('.replies-op').removeClass('hide');
             }
             enable(sm);
             r_input.val('').height(20);
             p.find('.reply-submit, .reply-cancel').addClass('hide');
-            p.find('.reply').hover(
+            r_list.children().hover(
                 function(){
                     $(this).find('.op').removeClass('vh');
                 },
@@ -126,7 +130,7 @@ $('.reply-submit').click(function() {
                     $(this).find('.op').addClass('vh');
                 }
             );
-            p.find('.reply-at').hover(
+            r_list.find('.reply-at').hover(
                 function() {
                     $(this).css({'text-decoration':'underline'});
                 },
diff --git a/group/templates/group/new_msg_reply.html b/group/templates/group/new_msg_reply.html
index e8cbe2dd0d..4bedf60d1f 100644
--- a/group/templates/group/new_msg_reply.html
+++ b/group/templates/group/new_msg_reply.html
@@ -17,35 +17,35 @@
                 <span class="time">{{ msg.timestamp|translate_seahub_time }}</span>
                 <span class="group">{% trans "Group: " %}<a href="{% url 'group_info' msg.group_id %}">{{ msg.group_name }}</a></span>
             </div>
-                <p class="msg-con">
-                {% if msg.attachment.src == 'recommend' %}
-                <span class="recommend">{% trans "Recommended" %}
-                  {% if msg.attachment.attach_type == 'file' %}
-                  <a href="{% url 'repo_view_file' msg.attachment.repo_id %}?p={{ msg.attachment.path|urlencode }}" target="_blank">
-                  {% else %}
-                  <a href="{% url 'repo' msg.attachment.repo_id %}?p={{ msg.attachment.path|urlencode }}" target="_blank">
-                  {% endif %}
-                  {{ msg.attachment.name }}</a> :
-                </span>
-                {% endif %}
+                <p class="msg-con">{{ msg.message|seahub_urlize|find_at|linebreaksbr }}</p>
+                {% if msg.attachment %}
+                {% with ma=msg.attachment %}
+                <div class="msg-attachment">
+                    {% if ma.src == 'recommend' %}
+                    {% if ma.attach_type == 'file' %}
+                    <img src="{{ MEDIA_URL }}img/file/{{ ma.name|file_icon_filter }}" alt="{% trans "File"%}" height="18" class="vam" />
+                    <a href="{% url 'repo_view_file' ma.repo_id %}?p={{ ma.path|urlencode }}" target="_blank" class="vam">{{ ma.name }}</a>
+                    {% else %}
+                    <img src="{{ MEDIA_URL }}img/folder-icon-24.png" alt="{% trans "Directory icon"%}" height="20" class="vam" />
+                    <a href="{% url 'repo' ma.repo_id %}?p={{ ma.path|urlencode }}" target="_blank" class="vam">{{ ma.name }}</a>
+                    {% endif %}
+                    {% endif %}
 
-                {% if msg.attachment.src == 'filecomment' %}
-                <span class="recommend">{% trans "File " %}<a href="{% url 'repo_view_file' msg.attachment.repo_id %}?p={{ msg.attachment.path|urlencode }}&comment_open=true" target="_blank"> {{ msg.attachment.name }}</a> {% trans "has a new comment:"%}</span>
+                    {% if ma.src == 'filecomment' %} {# compatible with comments already exist #}
+                    <img src="{{ MEDIA_URL }}img/file/{{ ma.name|file_icon_filter }}" alt="{% trans "File"%}" height="18" class="vam" />
+                    <a href="{% url 'repo_view_file' ma.repo_id %}?p={{ ma.path|urlencode }}" target="_blank" class="vam">{{ ma.name }}</a>
+                    {% endif %}
+                </div>
+                {% endwith %}
                 {% endif %}
-                    
-                {{ msg.message|seahub_urlize|find_at|linebreaksbr }}
-
-               </p>
                 <span class="say"></span>
             </div>  
             <div class="msg-op">
-                <div class="reply-cnt-op{% if msg.reply_cnt < 4 %} hide{% endif %}" data-rstatus="hide">
-                    <span class="reply-cnt" data-url="{% url 'msg_reply' msg.id %}">{% blocktrans with amount=msg.reply_cnt %}{{ amount }} replies{% endblocktrans %}</span>
-                    <span class="hide-reply hide">{% trans "Hide replies" %}</span>
+                <div class="replies-op{% if msg.reply_cnt < 4 %} hide{% endif %}" data-rstatus="hide">
+                    <span class="unfold-replies" data-url="{% url 'msg_reply' msg.id %}">{% blocktrans with amount=msg.reply_cnt %}{{ amount }} replies{% endblocktrans %}</span>
+                    <span class="fold-replies hide">{% trans "Hide replies" %}</span>
+                    <img src="{{MEDIA_URL}}img/loading-icon.gif" alt="" width="16" class="replies-loading-icon hide" />
                 </div>
-                {% if msg.reply_cnt == 0 %}
-                <ul class="reply-list hide"></ul>
-                {% else %}
                 <ul class="reply-list">
                     {% for r in msg.replies %}
                     <li class="reply w100 ovhd">
@@ -59,7 +59,6 @@
                     </li>
                     {% endfor %}
                 </ul>
-                {% endif %}
                 <textarea placeholder="{% trans "Add a reply..." %}" name="message" class="reply-input"></textarea>
                 <p class="error hide">{% trans "It can not be blank and should be no more than 150 characters." %}</p>
                 <button type="button" class="reply-submit hide" data-url="{% url 'msg_reply' msg.id %}">{% trans "Submit" %}</button>
diff --git a/group/views.py b/group/views.py
index 411b1433bd..35868c45f3 100644
--- a/group/views.py
+++ b/group/views.py
@@ -372,9 +372,12 @@ def msg_reply_new(request):
 
             # get message replies
             reply_list = MessageReply.objects.filter(reply_to=m)
-
-            m.replies = reply_list
             m.reply_cnt = reply_list.count()
+            if m.reply_cnt > 3:
+                m.replies = reply_list[m.reply_cnt - 3:]
+            else:
+                m.replies = reply_list
+
             group_msgs.append(m)
 
     # remove new group msg reply notification
@@ -665,6 +668,7 @@ def group_unshare_repo(request, repo_id, group_id, from_email):
 def group_recommend(request):
     """
     Recommend a file or directory to a group.
+    now changed to 'post a discussion'
     """
     if request.method != 'POST':
         raise Http404
@@ -714,8 +718,8 @@ def group_recommend(request):
                                    src='recommend')
             ma.save()
 
-            group_url = reverse('group_info', args=[group_id])
-            msg = _(u'Successfully recommended to <a href="%(url)s" target="_blank">%(name)s</a>.') %\
+            group_url = reverse('group_discuss', args=[group_id])
+            msg = _(u'Successfully posted to <a href="%(url)s" target="_blank">%(name)s</a>.') %\
                 {'url':group_url, 'name':group.group_name}
             messages.add_message(request, messages.INFO, msg)
 
diff --git a/media/css/seahub.css b/media/css/seahub.css
index 8d8205e241..a0cce7b0d2 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -148,6 +148,7 @@ p {
 .label { color:#333; font-size:12px; font-style:normal; }
 .w100 { width: 100%; }
 .vh { visibility:hidden; }
+.vam { vertical-align:middle; }
 .notification {
     padding:5px;
     background:#FDF;
@@ -1497,6 +1498,11 @@ textarea:-moz-placeholder {/* for FF */
 .msg-main .say {
     background-image:url('../img/say_white.png');
 }
+.msg-attachment {
+    padding-top:10px;
+    border-top:1px solid #e9e9e9;
+    margin-top:12px;
+}
 .msg-hd .author {
     font-weight:bold;
 }
@@ -1522,6 +1528,7 @@ textarea:-moz-placeholder {/* for FF */
     margin-bottom:0;
 }
 .msg-op {
+    color:#444;
     padding:10px 16px;
     background:#f8f8f8;
     border:1px solid #d5d5d5;
@@ -1529,17 +1536,34 @@ textarea:-moz-placeholder {/* for FF */
     border-bottom-left-radius:3px;
     border-bottom-right-radius:3px;
 }
-.reply-cnt-op {
+.replies-op {
     font-weight:bold;
     cursor:pointer;
     margin-bottom:10px;
+    position:relative;
+}
+.unfold-replies,
+.fold-replies {
+    padding-right:14px;
+    background:transparent scroll no-repeat right center;
+}
+.unfold-replies {
+    background-image:url('../img/unfold.png');
+}
+.fold-replies {
+    background-image:url('../img/fold.png');
+}
+.unfold-replies-nobg {
+    background-image:none;
+}
+.replies-loading-icon {
+    position:absolute;
+    top:0;
 }
-.msg .recommend,
 .msg .at {
     color:#808;
 }
 .reply {
-    color:#444;
     line-height:1.2;
     margin-bottom:15px;
 }
@@ -1547,7 +1571,9 @@ textarea:-moz-placeholder {/* for FF */
     width: 93%;
 }
 .reply-con {
-    margin:0;
+    font-size:12px;
+    line-height:1.3;
+    margin:4px 0 0;
 }
 .reply-input {
     width:530px;
@@ -1842,7 +1868,7 @@ textarea:-moz-placeholder {/* for FF */
 /* File comment */
 #file-comment,
 #to-group,
-#recommend-to-group-form {
+#discuss-to-group-form {
     width:400px;
     padding:0 15px;
     position:fixed;
@@ -1875,7 +1901,7 @@ textarea:-moz-placeholder {/* for FF */
 }
 #comment-caret,
 #to-group-caret,
-#recommend-to-group-caret {
+#discuss-to-group-caret {
     width:28px;
     position:fixed;
 }
@@ -1892,12 +1918,13 @@ textarea:-moz-placeholder {/* for FF */
 #to-group a:hover {
     text-decoration:none;
 }
-/*recommend to group*/
-#recommend-to-group-form {
+/*discuss to group*/
+#discuss-to-group-form {
     padding-bottom:10px;
 }
-#recommend-to-group-form textarea {
-    width:100%;
+#discuss-to-group-form .input {
+    padding:5px;
+    width:388px;
     height:5em;
 }
 /* text file diff */
diff --git a/media/img/fold.png b/media/img/fold.png
new file mode 100644
index 0000000000..51164615c3
Binary files /dev/null and b/media/img/fold.png differ
diff --git a/media/img/folder-icon-24.png b/media/img/folder-icon-24.png
index 805892221b..363253a549 100644
Binary files a/media/img/folder-icon-24.png and b/media/img/folder-icon-24.png differ
diff --git a/media/img/unfold.png b/media/img/unfold.png
new file mode 100644
index 0000000000..f5c5c1bdf3
Binary files /dev/null and b/media/img/unfold.png differ
diff --git a/templates/myhome.html b/templates/myhome.html
index 929498c310..c711248113 100644
--- a/templates/myhome.html
+++ b/templates/myhome.html
@@ -22,20 +22,20 @@
     <ul class="info-item-bottom">
         {% if grpmsg_list %}
         <li>
-        {% for grp in grpmsg_list %}<a href="{% url 'group_info' grp.id %}" class="no-bold">{{ grp.group_name }} </a>{% endfor %}
+        {% for grp in grpmsg_list %}<a href="{% url 'group_discuss' grp.id %}" class="no-bold">{{ grp.group_name }} </a>{% endfor %}
         {% blocktrans count counter=grpmsg_list|length %}
-        has new message
+        has new discussion
         {% plural %}
-        have new messages
+        have new discussions
         {% endblocktrans %}
         </li>
         {% endif %}
 
         {% if grpmsg_reply_list %}
         <li><a href="{{ SITE_ROOT }}group/reply/new/" class="no-bold">{% blocktrans count counter=grpmsg_reply_list|length %}
-        one group message has new reply
+        one group discussion has new reply
         {% plural %}
-        {{ counter }} group messages have new replies
+        {{ counter }} group discussions have new replies
         {% endblocktrans %}</a></li>
         {% endif %}
 
diff --git a/templates/snippets/bottom_bar.html b/templates/snippets/bottom_bar.html
index d52d02f51a..3ff0674be7 100644
--- a/templates/snippets/bottom_bar.html
+++ b/templates/snippets/bottom_bar.html
@@ -1,29 +1,33 @@
 {% load i18n %}
 {% load url from future %}
-var Bottom_bar = '<div id="bottom-bar">{% if groups %}<button id="recommend">{% trans "Recommend" %}</button><button id="click-into-group">{% trans "Back to group" %}</button>{% endif %}</div>';
+var Bottom_bar = '<div id="bottom-bar">{% if groups %}<button id="discuss">{% trans "Discuss" %}</button><button id="click-into-group">{% trans "To group" %}</button>{% endif %}</div>';
 $('#wrapper').append(Bottom_bar);
-$('#main-panel').css('margin-bottom', $('#bottom-bar button').outerHeight() + 2);
+$('#main-panel').css('margin-bottom', $('#bottom-bar').outerHeight() + 2);
 $('#footer').addClass('hide');
 
 {% if groups %}
-$('#recommend').click(function() {
-    if ($('#recommend-to-group-form').hasClass('hide')) {
-        $('#recommend-to-group-form, #recommend-to-group-caret').removeClass('hide');
-        $('#recommend-to-group-caret').css('left', $('#recommend').offset().left);
+$('#discuss').click(function() {
+    var form = $('#discuss-to-group-form');
+    var caret = $('#discuss-to-group-caret');
+    if (form.hasClass('hide')) {
+        form.removeClass('hide');
+        caret.removeClass('hide');
+        caret.css({'left': $(this).offset().left});
     } else {
-        $('#recommend-to-group-form, #recommend-to-group-caret').addClass('hide');
+        form.addClass('hide');
+        caret.addClass('hide');
     }
 });
 $(document).click(function(e) {
     var target = e.target || event.srcElement;
-    if (!$('#recommend, #recommend-to-group-form, #recommend-to-group-caret').is(target) && !($('#recommend-to-group-form, #recommend-to-group-caret').find('*').is(target))) {
-        $('#recommend-to-group-form, #recommend-to-group-caret').addClass('hide');
+    if (!$('#discuss, #discuss-to-group-form, #discuss-to-group-caret').is(target) && !($('#discuss-to-group-form, #discuss-to-group-caret').find('*').is(target))) {
+        $('#discuss-to-group-form, #discuss-to-group-caret').addClass('hide');
     }   
 });
 
-$('#recommend-submit').click(function() {
-    if (!$.trim($('#recommend-to-group-form [name="message"]').val())) {
-        apply_form_error('recommend-to-group-form', '{% trans "Please input recommend message." %}');
+$('#discuss-submit').click(function() {
+    if (!$.trim($('#discuss-to-group-form .input').val())) {
+        apply_form_error('discuss-to-group-form', '{% trans "Please input a discussion." %}');
         return false;   
     }
 });
@@ -59,6 +63,6 @@ $(document).click(function(e) {
 
 $(function() {
     var btn_height = $('#bottom-bar button').outerHeight();
-    $('#recommend-to-group-caret, #to-group-caret, #comment-caret').css({'bottom': btn_height + 1});
-    $('#file-comment, #to-group, #recommend-to-group-form').css({'bottom': btn_height + 1 + $('.outer-caret').outerHeight()});
+    $('#discuss-to-group-caret, #to-group-caret, #comment-caret').css({'bottom': btn_height + 1});
+    $('#file-comment, #to-group, #discuss-to-group-form').css({'bottom': btn_height + 1 + $('.outer-caret').outerHeight()});
 });
diff --git a/templates/snippets/group_recommend_form.html b/templates/snippets/group_recommend_form.html
index 7e64112654..4850a56e36 100644
--- a/templates/snippets/group_recommend_form.html
+++ b/templates/snippets/group_recommend_form.html
@@ -1,14 +1,7 @@
-{% load i18n %}
+{% load seahub_tags i18n %}
 {% load url from future %}
-    <form action="{% url 'group_recommend' %}" method="post" id="recommend-to-group-form" class="hide">{% csrf_token %}
-        <h3>{% trans "Recommend" %}
-        {% for name, link in zipped %}
-            {% if forloop.last %}
-            <span class="op-target">{{ name }}</span>
-            {% endif %}
-        {% endfor %}
-        {% trans "to group:"%}
-        </h3>
+    <form action="{% url 'group_recommend' %}" method="post" id="discuss-to-group-form" class="hide">{% csrf_token %}
+        <h3>{% trans "Post a discussion to group" %}</h3>
         <div class="groups">
             {% for group in groups %}
             <label for="{{ group.id }}" class="checkbox-label">
@@ -17,15 +10,28 @@
             </label>
             {% endfor %}
         </div>
-        <label>{% trans "Recommend Message"%}</label>
-        <textarea name="message"></textarea>
+        <textarea name="message" placeholder="{% trans 'discussion' %}" class="input"></textarea>
+        <div class="attachment">
+            {% if attach_type == 'dir' %}
+            <img src="{{ MEDIA_URL }}img/folder-icon-24.png" alt="{% trans 'Directory icon' %}" height="20" class="vam" />
+            {% endif %}
+
+            {% for name,link in zipped %}
+                {% if forloop.last %}
+                    {% if attach_type == 'file' %}
+                    <img src="{{ MEDIA_URL }}img/file/{{ ma.name|file_icon_filter }}" alt="{% trans 'File' %}" height="18" class="vam" />
+                    {% endif %}
+                <span class="vam">{{ name }}</span>
+                {% endif %}
+            {% endfor %}
+        </div>
         <input type="hidden" name="repo_id" value="{{ repo.id }}" />
         <input type="hidden" name="path" value="{{ path }}" />
         <input type="hidden" name="attach_type" value="{{ attach_type }}" />
         <p class="error hide"></p>
-        <input type="submit" id="recommend-submit" class="submit" value="{% trans "Submit"%}" />
+        <input type="submit" id="discuss-submit" class="submit" value="{% trans "Submit"%}" />
     </form>
-    <div id="recommend-to-group-caret" class="hide">
+    <div id="discuss-to-group-caret" class="hide">
         <div class="outer-caret">
             <div class="inner-caret"></div>
         </div>
diff --git a/templates/view_file_base.html b/templates/view_file_base.html
index 94f67f9d75..5e4e74b281 100644
--- a/templates/view_file_base.html
+++ b/templates/view_file_base.html
@@ -105,41 +105,6 @@
     {% include "snippets/group_recommend_form.html" %}
     {% endwith %}
 
-    {% if request.user.is_authenticated %}
-    <div id="file-comment" class="hide">
-        <form id="file-comment-form" action="" method="post">
-            <div class="w100 ovhd">
-                <a class="pic fleft" href="{% url 'user_profile' request.user.username %}">{% avatar request.user.username 48 %}</a>
-                <div id="comment-container" class="txt fright">
-                    <textarea name="message" id="comment-input">{% trans "Leave a message~"%}</textarea><br />
-                    <p class="error hide"></p>
-                    <input type="submit" value="{% trans "Submit"%}" class="submit hide" />
-                </div>
-            </div>
-        </form>
-        <ul id="comment-list">
-        {% if comments %}
-            {% for comment in comments %}
-            <li class="comment ovhd">
-            <a class="pic fleft" href="{% url 'user_profile' comment.from_email %}">{% avatar comment.from_email 48 %}</a>
-            <div class="txt fright">
-                <div class="comment-hd w100 ovhd">
-                    <a href="{% url 'user_profile' comment.from_email %}" title="{{ comment.from_email }}" class="fleft">{{ comment.from_email|email2nickname }}</a>
-                    <span class="time fright">{{ comment.timestamp|translate_seahub_time }}</span>
-                </div>
-                <p class="comment-bd">{{ comment.message|seahub_urlize|find_at|linebreaksbr }}</p>
-            </div>
-            </li>
-            {% endfor %}
-        {% endif %}
-        </ul>
-    </div>
-    <div id="comment-caret" class="hide">
-        <div class="outer-caret">
-            <div class="inner-caret"></div>
-        </div>
-    </div>
-    {% endif %}
 {% endblock %}
 
 {% block extra_script %}
@@ -281,81 +246,6 @@ $('#file-op .history').click(function () {
 
 //bottom bar
 {% include "snippets/bottom_bar.html" %}
-{% if request.user.is_authenticated %}
-$('#main-panel').css({'margin-bottom':0});
-$('#bottom-bar').append('<button id="comment">{% trans "Comment" %}</button>');
-$('#file-comment').css({'max-height':$(window).height() * 0.7 - $('#bottom-bar').height() - $('#comment-caret').height()});
-{% if groups %}
-var gids = '';
-{% for g in groups %}
-gids += '{{ g.id }}_';
-{% endfor %}
-addAtAutocomplete('#comment-input', '#comment-container', gids, "{% url 'group_attention' %}", {'width':'315px','padding-left':'1px','height':'36px','margin':'0','font-size':'13px', 'font-family':'Arial, Helvetica, sans-serif', 'line-height': '1.5em', 'border':'1px solid #ddd'});
-{% endif %}
-$('#comment-input').bind('autocompleteopen', function(e, ui) {
-    var menu = $(this).autocomplete('widget');
-    if (parseInt(menu.css('top')) > 0) {
-        menu.css('max-height', $('#file-comment').height() - parseInt(menu.css('top')));
-    } else {
-        menu.css('max-height', $('#file-comment').offset().top);
-    }
-});
-{% if comment_open %}
-$('#file-comment, #comment-caret').removeClass('hide');
-$(function() { $('#comment-caret').css({'left': $('#comment').offset().left}); });
-$('#comment-list').css({'max-height':parseInt($('#file-comment').css('max-height')) - $('#file-comment-form').outerHeight(true), 'overflow':'auto'});
-{% endif %}
-$('#comment').click(function() {
-    if ($('#file-comment').hasClass('hide')) {
-        $('#file-comment, #comment-caret').removeClass('hide');
-        $('#comment-caret').css({'left':$('#comment').offset().left});
-        $('#comment-list').css({'max-height':parseInt($('#file-comment').css('max-height')) - $('#file-comment-form').outerHeight(true), 'overflow':'auto'});
-    } else {
-        $('#file-comment, #comment-caret').addClass('hide');
-    }
-});
-$(document).click(function(e) {
-    var target = e.target || event.srcElement;
-    if (!$('#comment, #file-comment, #comment-caret').is(target) && !($('#file-comment, #comment-caret').find('*').is(target))) {
-        $('#file-comment, #comment-caret').addClass('hide');
-    }
-});
-
-var comment_input_pre_text = $('#comment-input').val();
-$('#comment-input').css('color', '#999').click(function() {
-    if ($(this).val() == comment_input_pre_text) {
-        $(this).val('').css('color', '#000');
-        $('#file-comment-form .submit').removeClass('hide');
-        $('#comment-list').css({'max-height':parseInt($('#file-comment').css('max-height')) - $('#file-comment-form').outerHeight(true), 'overflow':'auto'});
-    }
-});
-$('#file-comment-form .submit').click(function() {
-    if (!$.trim($('#comment-input').val())) {
-        $('#file-comment-form .error').html('{% trans "Please input a message." %}').removeClass('hide');
-        return false;
-    }
-    $.ajax({
-        url: '{% url 'views.file_comment' %}' + '?p={{path}}',
-        type: 'POST',
-        dataType: 'json',
-        contentType: 'application/json; charset=utf-8',
-        beforeSend: prepareCSRFToken,
-        data: {
-            'repo_id': '{{ repo.id }}',
-            'file_path': '{{ path|urlencode }}',
-            'message': $('#comment-input').val()
-        },
-        success: function(data) {
-            $('#comment-input').val(comment_input_pre_text).css('color', '#999');
-            $('#file-comment-form .submit, #file-comment-form .error').addClass('hide');
-            $('#comment-list').html(data.html);
-        },
-        error: function() {
-            $('#file-comment-form .error').html('{% trans "Failed. Please check the network." %}').removeClass('hide');
-        }   
-    });
-    return false;
-});
-{% endif %}
+$('#main-panel').css('margin-bottom',0);
 </script>
 {% endblock %}