diff --git a/addons/website_mail_group/controllers/main.py b/addons/website_mail_group/controllers/main.py
index 8f36503aa32..b57c8e22379 100644
--- a/addons/website_mail_group/controllers/main.py
+++ b/addons/website_mail_group/controllers/main.py
@@ -19,14 +19,9 @@
 #
 ##############################################################################
 
-from openerp import SUPERUSER_ID
 from openerp.addons.web import http
 from openerp.addons.web.http import request
-import werkzeug
-import datetime
-import time
 
-from openerp.tools.translate import _
 
 class MailGroup(http.Controller):
     _thread_per_page = 10
@@ -35,45 +30,38 @@ class MailGroup(http.Controller):
         "/groups",
     ], type='http', auth="public", website=True)
     def view(self, **post):
-        cr, uid, context = request.cr , request.uid, request.context
+        cr, uid, context = request.cr, request.uid, request.context
         group_obj = request.registry.get('mail.group')
-        user_obj = request.registry.get('res.users')
-        group_ids = group_obj.search(cr, SUPERUSER_ID, [], context=context)
+        group_ids = group_obj.search(cr, uid, [], context=context)
         values = {
             'groups': group_obj.browse(cr, uid, group_ids, context),
         }
         return request.website.render('website_mail_group.mail_groups', values)
 
     @http.route([
-        "/groups/follow/<int:group_id>",
-    ], type='http', auth="public", website=True)
-    def follow(self, group_id, **post):
-        cr, uid, context = request.cr , request.uid, request.context
+        "/groups/subscription",
+    ], type='json', auth="public", website=True)
+    def subscription(self, group_id=0, action=False ,**post):
+        cr, uid, context = request.cr, request.uid, request.context
         group_obj = request.registry.get('mail.group')
-        group_obj.message_subscribe_users(cr, uid, [group_id], context=context)
-        return werkzeug.utils.redirect('/groups')
+        if action:
+            group_obj.message_subscribe_users(cr, uid, [group_id], context=context)
+        else:
+            group_obj.message_unsubscribe_users(cr, uid, [group_id], context=context)
+        return []
 
     @http.route([
-        "/groups/unfollow/<int:group_id>",
+        "/groups/<model('mail.group'):group>/",
+        "/groups/<model('mail.group'):group>/page/<int:page>/"
     ], type='http', auth="public", website=True)
-    def unfollow(self, group_id, **post):
-        cr, uid, context = request.cr , request.uid, request.context
-        group_obj = request.registry.get('mail.group')
-        group_obj.message_unsubscribe_users(cr, uid, [group_id], context=context)
-        return werkzeug.utils.redirect('/groups')
-
-    @http.route([
-        "/groups/<int:group_id>/",
-        "/groups/<int:group_id>/page/<int:page>/"
-    ], type='http', auth="public", website=True)
-    def thread(self, group_id, page=1, **post):
-        cr, uid, context = request.cr , request.uid, request.context
+    def thread(self, group, page=1, **post):
+        cr, uid, context = request.cr, request.uid, request.context
         group_obj = request.registry.get('mail.group')
         thread_obj = request.registry.get('mail.message')
-        thread_ids = thread_obj.search(cr, uid, [('type','=','email'),('model','=','mail.group'),('res_id','=',group_id),('parent_message','=',False)])
-        group_ids = group_obj.search(cr, SUPERUSER_ID, [])
+        thread_ids = thread_obj.search(cr, uid, [('type','=','email'), ('model','=','mail.group'), ('res_id','=',group.id), ('parent_message','=',False)])
+        group_ids = group_obj.search(cr, uid, [])
         pager = request.website.pager(
-            url='/groups/%s/' % group_id,
+            url='/groups/%s/' % group.id,
             total=len(thread_ids),
             page=page,
             step=self._thread_per_page,
@@ -84,21 +72,20 @@ class MailGroup(http.Controller):
         values = {
             'groups': group_obj.browse(cr, uid, group_ids, context),
             'thread_list': thread_obj.browse(cr, uid, thread_ids, context),
-            'active_group': group_obj.browse(cr, uid, group_id, context),
+            'active_group': group,
             'pager': pager,
         }
         return request.website.render('website_mail_group.group_thread_list', values)
 
     @http.route([
-        "/groups/thread/<int:message_id>",
+        "/groups/<model('mail.group'):group>/message/<model('mail.message'):message>",
     ], type='http', auth="public", website=True)
-    def get_thread(self, message_id, **post):
-        cr, uid, context = request.cr , request.uid, request.context
-        group_obj = request.registry.get('mail.group')
+    def get_thread(self, group, message, **post):
+        cr, uid, context = request.cr, request.uid, request.context
         thread_obj = request.registry.get('mail.message')
-        child_ids = thread_obj.search(cr, uid, [('parent_id','=',message_id)])
+        child_ids = thread_obj.search(cr, uid, [('parent_id','=',message.id)])
         values = {
-            'main_thread' : thread_obj.browse(cr, uid, message_id, context),
-            'child_thread' : thread_obj.browse(cr, uid, child_ids, context),
+            'main_thread': message,
+            'child_thread': thread_obj.browse(cr, uid, child_ids, context),
         }
         return request.website.render('website_mail_group.group_thread', values)
diff --git a/addons/website_mail_group/static/src/js/website_mail_group.js b/addons/website_mail_group/static/src/js/website_mail_group.js
new file mode 100644
index 00000000000..3b856d12684
--- /dev/null
+++ b/addons/website_mail_group/static/src/js/website_mail_group.js
@@ -0,0 +1,26 @@
+$(document).ready(function () {
+    $('a.js_group').on('click', function (ev) {
+        ev.preventDefault();
+        var $link = $(ev.currentTarget);
+        var href = $link.attr("href");
+        var group_id = href.match(/subscription\/([0-9]+)/)[1];
+        var action = href.match(/action=(.*)/)[1] == 'follow' ? true : false;
+        openerp.jsonRpc("/groups/subscription/", 'call', {
+                    'group_id': parseInt(group_id),
+                    'action' : action,
+                })
+                .then(function (data) {
+                    if (action){
+                        $('li#'+ group_id).toggleClass('hidden visible');
+                        $('.unfollow_' + group_id).toggleClass('visible hidden');
+                        $('.follow_' + group_id).toggleClass('hidden visible');
+                    }
+                    else {
+                        $('li#'+ group_id).toggleClass('visible hidden');
+                        $('.unfollow_' + group_id).toggleClass('hidden visible');
+                        $('.follow_' + group_id).toggleClass('visible hidden');
+                    }
+                });
+        return false;
+    });
+});
diff --git a/addons/website_mail_group/views/website_mail_group.xml b/addons/website_mail_group/views/website_mail_group.xml
index a3abfaf605a..a87365ad803 100644
--- a/addons/website_mail_group/views/website_mail_group.xml
+++ b/addons/website_mail_group/views/website_mail_group.xml
@@ -10,6 +10,9 @@
     </template>
     <template id="mail_groups" name="My Groups">
         <t t-call="website.layout">
+            <t t-set="head">
+                <script type="text/javascript" src="/website_mail_group/static/src/js/website_mail_group.js"></script>
+            </t>
             <div class="row">
                 <div class="container">
                     <div class="col-md-3 col-md-push-1">
@@ -26,12 +29,8 @@
                                     <br/>
                                     <small t-esc="group.description"/>
                                     <br/>
-                                    <t t-if="group.message_is_follower">
-                                        <a class="btn btn-primary" t-attf-href="/groups/unfollow/#{ group.id }">UnFollow</a>
-                                    </t>
-                                    <t t-if="not group.message_is_follower">
-                                        <a class="btn btn-default" t-attf-href="/groups/follow/#{ group.id }">Join Group</a>
-                                    </t>
+                                    <a t-attf-class="btn btn-default js_group #{group.message_is_follower and 'hidden' or 'visible'} follow_#{group.id}" t-attf-href="/groups/subscription/#{ group.id }/?action=follow" t-attf-id="#{group.id}">Join Group</a>
+                                    <a t-attf-class="btn btn-primary js_group #{group.message_is_follower and 'visible' or 'hidden'} unfollow_#{group.id}" t-attf-href="/groups/subscription/#{ group.id }/?action=unfollow" t-attf-id="#{group.id}">UnFollow</a>
                                 </div>
                             </div>
                         </t>
@@ -41,9 +40,9 @@
         </t>
     </template>
     <template id="navigation_menu">
-        <ul class="nav nav-pills nav-stacked">
+        <ul class="nav nav-pills nav-stacked" id="group_follows">
             <t t-foreach="groups" t-as="group">
-                <li t-if="group.message_is_follower"><a t-attf-href="/groups/#{group.id}" t-esc="group.name"/></li>
+                <li t-attf-class="#{group.message_is_follower and 'visible' or 'hidden'}" t-att-id="group.id"><a t-attf-href="/groups/#{group.id}" t-esc="group.name"/></li>
             </t>
         </ul>
     </template>
@@ -69,7 +68,7 @@
                                     <t t-foreach="thread_list" t-as="thread">
                                         <tr>
                                             <td>
-                                                <a t-attf-href="/groups/thread/#{thread.id}" t-esc="thread.subject"></a>
+                                                <a t-attf-href="/groups/#{active_group.id}/message/#{thread.id}" t-esc="thread.subject"></a>
                                                 <img class="img-rounded pull-right mt0" t-att-src="'/website/image?model=mail.message&amp;field=author_avatar&amp;id='+str(thread.id)" style="width : 30px"/>
                                                 <p><small>by <t t-esc="thread.author_id.name and thread.author_id.name or thread.email_from"/> on <t t-esc="thread.date"/></small></p>
                                             </td>
@@ -101,7 +100,7 @@
                             </div>
                         </div>
                     </div>
-                    <t t-foreach="child_thread" t-as="message">
+                    <div class="row" t-foreach="child_thread" t-as="message">
                         <div class="col-md-1 mt0">
                             <img class="img-rounded pull-right mt0" t-att-src="'/website/image?model=mail.message&amp;field=author_avatar&amp;id='+str(message.id)" style="width : 30px"/>
                         </div>
@@ -111,7 +110,7 @@
                                 <t t-raw="message.body"/>
                             </div>
                         </div>
-                    </t>
+                    </div>
                 </div>
             </div>
         </t>