diff --git a/media/css/seahub.css b/media/css/seahub.css
index 95d1599ef9..8b86514938 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -168,6 +168,10 @@ p {
 .op {
     font-size:13px;
 }
+.op-target {
+    color:#c39;
+    word-wrap:break-word;
+}
 .no-deco,
 .no-deco:hover {
     text-decoration:none;
@@ -204,6 +208,25 @@ ul.with-bg li {
     border-style: dashed dashed dashed solid;
     border-left-color: #bbb;
 }
+.outer-caret,
+.inner-caret {
+    height:0;
+    width:1px;
+    border:14px solid;
+    border-color:#CBCBCB transparent;
+    border-bottom-width:0;
+    z-index:100;
+    margin:0 auto;
+}
+.inner-caret {
+    border-top-color:#fff;
+    position:relative;
+    top:-15px;
+    left:-14px;
+}
+.placeholder {
+    color: #aaa;
+}
 .avatar {
     border-radius:3px;
 }
@@ -839,9 +862,6 @@ ul.with-bg li {
     display:block;
     padding:0 12px;
 }
-.op-target {
-    color:#c39;
-}
 #mv-form {
     width:500px;
     padding:10px 20px;
@@ -1007,17 +1027,6 @@ ul.with-bg li {
     width:260px;
     height:80px;
 }
-
-#recommend-msg,
-#recommend-groups {
-    width:450px;
-}
-#recommend-groups {
-    margin-bottom:5px;
-}
-#recommend-msg {
-    height:55px;
-}
 /* group, org */
 .group-list {
     margin-top:20px;
@@ -1335,7 +1344,8 @@ ul.with-bg li {
 }
 /* File comment */
 #file-comment,
-#to-group {
+#to-group,
+#recommend-to-group-form {
     width:400px;
     position:fixed;
     right:10px;
@@ -1371,29 +1381,13 @@ ul.with-bg li {
     word-wrap:break-word;
 }
 #comment-caret,
-#to-group-caret {
+#to-group-caret,
+#recommend-to-group-caret {
     width:28px;
     position:fixed;
     right:27px;
     bottom:26px;
 }
-#comment-outer-caret,
-#comment-inner-caret {
-    height:0;
-    width:1px;
-    border:14px solid;
-    border-color:#CBCBCB transparent;
-    border-bottom-width:0;
-    z-index:100;
-    margin:0 auto;
-}
-#comment-inner-caret {
-    border-top-color:#fff;
-    position:relative;
-    top:-15px;
-    left:-14px;
-}
-.placeholder { color: #aaa; }
 /*to-group*/
 #to-group {
     min-width:100px;
@@ -1407,7 +1401,24 @@ ul.with-bg li {
 #to-group a:hover {
     text-decoration:none;
 }
-
+/*recommend to group*/
+#recommend-to-group-form {
+    padding-bottom:10px;
+}
+#recommend-to-group-form .groups {
+    margin-bottom:6px;
+}
+#recommend-to-group-form .group-checkbox,
+#recommend-to-group-form .group-name {
+    vertical-align:middle;
+}
+#recommend-to-group-form .group-name {
+    margin:0 10px 0 3px;
+}
+#recommend-to-group-form textarea {
+    width:100%;
+    height:5em;
+}
 /* text file diff */
 div.diff-desc { margin: 10px 0; }
 div.diff-desc p { margin: 10px 0; }
diff --git a/templates/repo.html b/templates/repo.html
index 0a6f83b865..406d4a85cd 100644
--- a/templates/repo.html
+++ b/templates/repo.html
@@ -54,6 +54,7 @@
         </span>
         <span class="time">{{ current_commit.props.ctime|translate_commit_time }}</span>
         </p>
+        <div id="ls-ch" class="hide"></div><!--list modification details of a commit-->
     </div>
     {% endif %}
 
@@ -203,12 +204,10 @@
         <input type="submit" value="提交" class="submit" />
         <button class="simplemodal-close">取消</button>
     </form>
+
     {% with attach_type='dir' %}
     {% include "snippets/group_recommend_form.html" %}
     {% endwith %}
-
-    <div id="ls-ch" class="hide"></div><!--let user choose which group if there are more than one groups-->
-    
 {% endblock %}
 
 {% block extra_script %}
diff --git a/templates/repo_view_file.html b/templates/repo_view_file.html
index 652166167a..3a9db6fb59 100644
--- a/templates/repo_view_file.html
+++ b/templates/repo_view_file.html
@@ -185,8 +185,8 @@
         </ul>
     </div>
     <div id="comment-caret" class="hide">
-        <div id="comment-outer-caret">
-            <div id="comment-inner-caret"></div>
+        <div class="outer-caret">
+            <div class="inner-caret"></div>
         </div>
     </div>
     {% endif %}
diff --git a/templates/snippets/bottom_bar.html b/templates/snippets/bottom_bar.html
index 5b654c8f2a..7ea59f7f27 100644
--- a/templates/snippets/bottom_bar.html
+++ b/templates/snippets/bottom_bar.html
@@ -10,16 +10,29 @@ var group_list = []
 {% for group in groups %}
 group_list.push('{{ group.props.group_name }} <{{ group.props.creator_name }}>');
 {% endfor %}
-if (group_list.length == 1) {
-    $('#recommend-groups').val(group_list[0]);
-}
+$('#recommend-to-group-caret').css('left', $('#recommend').offset().left);
 $('#recommend').click(function() {
-    $('#recommend-form').modal({appendTo: '#main'});
-    addAutocomplete('#recommend-groups', '#recommend-form', group_list);
-    $('.ui-autocomplete').css({'max-height': window.innerHeight - $('.ui-autocomplete-input').offset().top - $('.ui-autocomplete-input').height() - 10, 'overflow': 'auto'});
+    if ($('#recommend-to-group-form').hasClass('hide')) {
+        $('#recommend-to-group-form, #recommend-to-group-caret').removeClass('hide');
+    } else {
+        $('#recommend-to-group-form, #recommend-to-group-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');
+    }   
 });
 
-$('#main').append('<div id="to-group" class="hide">{{ repo_group_str|escapejs }}</div><div id="to-group-caret" class="hide"><div id="comment-outer-caret"><div id="comment-inner-caret"></div></div></div>');
+$('#recommend-submit').click(function() {
+    if (!$.trim($('#recommend-to-group-form [name="message"]').val())) {
+        apply_form_error('recommend-form', '推荐语不能为空。');
+        return false;   
+    }
+});
+
+$('#main').append('<div id="to-group" class="hide">{{ repo_group_str|escapejs }}</div><div id="to-group-caret" class="hide"><div class="outer-caret"><div class="inner-caret"></div></div></div>');
 $('#to-group').css({'width':$('#to-group').width(), 'left':$('#click-into-group').offset().left - $('#to-group').width()/3});
 $('#to-group-caret').css('left', $('#click-into-group').offset().left);
 $('#click-into-group').click(function() {
@@ -44,10 +57,4 @@ $(document).click(function(e) {
         $('#to-group, #to-group-caret').addClass('hide');
     }   
 });
-$('#recommend-submit').click(function() {
-    if (!$.trim($('#recommend-msg').val())) {
-        apply_form_error('recommend-form', '推荐语不能为空。');
-        return false;   
-    }
-});
 {% endif %}
diff --git a/templates/snippets/group_recommend_form.html b/templates/snippets/group_recommend_form.html
index d3e54e2b47..d92a90854d 100644
--- a/templates/snippets/group_recommend_form.html
+++ b/templates/snippets/group_recommend_form.html
@@ -1,25 +1,28 @@
 {% load url from future %}
-    <form action="{% url 'group_recommend' %}" method="post" id="recommend-form" class="hide">{% csrf_token %}
+    <form action="{% url 'group_recommend' %}" method="post" id="recommend-to-group-form" class="hide">{% csrf_token %}
         <h3>推荐
         {% for name, link in zipped %}
             {% if forloop.last %}
-                {{ name }}
+            <span class="op-target">{{ name }}</span>
             {% endif %}
         {% endfor %}
         到群组：
         </h3>
-        <div>
-        {% for group in groups %}
-        <input type="checkbox" name="groups" value="{{ group.id }}" {% if forloop.first and forloop.last %} checked {% endif %}>{{ group.group_name }}<br>
-        {% endfor %}
+        <div class="groups">
+            {% for group in groups %}
+            <input type="checkbox" name="groups" value="{{ group.id }}" id="{{ group.id }}" {% if forloop.first and forloop.last %}checked="checked"{% endif %} class="group-checkbox"><label for="{{ group.id }}" class="group-name">{{ group.group_name }}</label>
+            {% endfor %}
         </div>
-
-        <label>推荐语：</label><br />
-        <textarea name="message" id="recommend-msg"></textarea><br />
+        <label>推荐语：</label>
+        <textarea name="message"></textarea>
         <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="提交" />
-        <button class="simplemodal-close">取消</button>
     </form>
+    <div id="recommend-to-group-caret" class="hide">
+        <div class="outer-caret">
+            <div class="inner-caret"></div>
+        </div>
+    </div>