diff --git a/media/css/seahub.css b/media/css/seahub.css
index 4da386761b..1b68377f9b 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1237,6 +1237,13 @@ textarea:-moz-placeholder {/* for FF */
 }
 .msg-header {
 }
+.msg-ops {
+    float:right;
+    margin-right:10px;
+}
+.msg-op {
+    cursor:pointer;
+}
 .msg-username {
 }
 .msg-content p:first-child {
diff --git a/seahub/api2/endpoints/group_discussions.py b/seahub/api2/endpoints/group_discussions.py
index d6e6eded39..8f841e452a 100644
--- a/seahub/api2/endpoints/group_discussions.py
+++ b/seahub/api2/endpoints/group_discussions.py
@@ -65,8 +65,8 @@ class GroupDiscussions(APIView):
             info = get_user_common_info(msg.from_email, avatar_size)
             isoformat_timestr = datetime_to_isoformat_timestr(msg.timestamp)
             msgs.append({
+                "id": msg.pk,
                 "group_id": group_id,
-                "discussion_id": msg.pk,
                 "user_name": info["name"],
                 "user_email": info["email"],
                 "user_login_id": info["login_id"],
@@ -100,8 +100,8 @@ class GroupDiscussions(APIView):
 
         isoformat_timestr = datetime_to_isoformat_timestr(discuss.timestamp)
         return Response({
+            "id": discuss.pk,
             "group_id": group_id,
-            "discussion_id": discuss.pk,
             "user_name": info["name"],
             "user_email": info["email"],
             "user_login_id": info["login_id"],
diff --git a/seahub/templates/js/templates.html b/seahub/templates/js/templates.html
index a8e142cd2d..be93206df6 100644
--- a/seahub/templates/js/templates.html
+++ b/seahub/templates/js/templates.html
@@ -985,6 +985,10 @@
     <img src="<%= avatar_url %>" alt="" width="32" class="msg-avatar avatar-circle" />
     <div class="msg-body">
         <div class="msg-header">
+            <div class="msg-ops">
+                <span class="msg-op js-rep-msg">{% trans "Reply" %}</span>
+                <span class="msg-op js-del-msg">{% trans "Delete" %}</span>
+            </div>
             <a class="msg-username ellipsis" href="<%= user_profile_url %>"><%- user_name %></a>
             <span class="msg-time" title="<%- time %>"><%- time_from_now %></span>
         </div>
diff --git a/static/scripts/app/collections/group-discussions.js b/static/scripts/app/collections/group-discussions.js
index 8d610350a4..8a04e02c3c 100644
--- a/static/scripts/app/collections/group-discussions.js
+++ b/static/scripts/app/collections/group-discussions.js
@@ -1,11 +1,14 @@
 define([
     'underscore',
     'backbone',
-    'common'
-], function(_, Backbone, Common) {
+    'common',
+    'app/models/group-discussion'
+], function(_, Backbone, Common, GroupDiscussion) {
     'use strict';
 
     var GroupDiscussions = Backbone.Collection.extend({
+        model: GroupDiscussion,
+
         setGroupId: function(group_id) {
             this.group_id = group_id;
         },
@@ -13,6 +16,7 @@ define([
         url: function() {
             return Common.getUrl({name: 'group_discussions', group_id: this.group_id});
         }
+
     });
 
     return GroupDiscussions;
diff --git a/static/scripts/app/models/group-discussion.js b/static/scripts/app/models/group-discussion.js
index 1e4ce47b9b..0c425cbda5 100644
--- a/static/scripts/app/models/group-discussion.js
+++ b/static/scripts/app/models/group-discussion.js
@@ -1,7 +1,8 @@
 define([
     'underscore',
-    'backbone'
-], function(_, Backbone) {
+    'backbone',
+    'common'
+], function(_, Backbone, Common) {
     'use strict';
 
     var GroupDiscussion = Backbone.Model.extend({});
diff --git a/static/scripts/app/views/group-discussion.js b/static/scripts/app/views/group-discussion.js
index 6bec5d5e2d..9040d85922 100644
--- a/static/scripts/app/views/group-discussion.js
+++ b/static/scripts/app/views/group-discussion.js
@@ -10,16 +10,18 @@ define([
 
     var View = Backbone.View.extend({
         tagName: 'li',
-        className: 'msg cspt ovhd',
+        className: 'msg ovhd',
 
         template: _.template($('#group-discussion-tmpl').html()),
 
         events: {
             'mouseenter': 'highlight',
-            'mouseleave': 'rmHighlight'
+            'mouseleave': 'rmHighlight',
+            'click .js-del-msg': 'delMessage'
         },
 
         initialize: function() {
+            this.listenTo(this.model, 'destroy', this.remove);
         },
 
         render: function() {
@@ -46,6 +48,23 @@ define([
 
         rmHighlight: function() {
             this.$el.removeClass('hl');
+        },
+
+        delMessage: function() {
+            this.model.destroy({
+                wait: true,
+                success: function() {
+                },
+                error: function(model, response) {
+                    var err;
+                    if (response.responseText) {
+                        err = $.parseJSON(response.responseText).error_msg;
+                    } else {
+                        err = gettext("Failed. Please check the network.");
+                    }
+                    Common.feedback(err, 'error');
+                }
+            });
         }
 
     });