diff --git a/app/assets/javascripts/subscription.js.coffee b/app/assets/javascripts/subscription.js.coffee
index 1a430f3aa47437ce1b50760ab27bc903896f4f79..7f8f70cf80f960bb53f1968fa9cd15ad48dcfa9a 100644
--- a/app/assets/javascripts/subscription.js.coffee
+++ b/app/assets/javascripts/subscription.js.coffee
@@ -2,20 +2,38 @@ class @Subscription
   constructor: (container) ->
     $container = $(container)
     @url = $container.attr('data-url')
-    @subscribe_button = $container.find('.js-subscribe-button')
-    @subscription_status = $container.find('.subscription-status')
-    @subscribe_button.unbind('click').click(@toggleSubscription)
+    @subscribeButton = $container.find('.js-subscribe-button')
+    @subscribeButton
+      .off('click')
+      .on('click', @toggleSubscription)
 
-  toggleSubscription: (event) =>
-    btn = $(event.currentTarget)
-    action = btn.find('span').text()
-    current_status = @subscription_status.attr('data-status')
-    btn.addClass('disabled')
+  toggleSubscription: =>
+    subscribed = @subscribeButton.attr('data-subscribed')?
+    @subscribeButton
+      .addClass('disabled')
+      .prop('disabled', 'disabled')
 
     $.post @url, =>
-      btn.removeClass('disabled')
-      status = if current_status == 'subscribed' then 'unsubscribed' else 'subscribed'
-      @subscription_status.attr('data-status', status)
-      action = if status == 'subscribed' then 'Unsubscribe' else 'Subscribe'
-      btn.find('span').text(action)
-      @subscription_status.find('>div').toggleClass('hidden')
+      subscribed = not subscribed
+      @subscribeButton
+        .removeClass('disabled')
+        .prop('disabled', false)
+        .find('.fa')
+        .toggleClass 'fa-volume-up fa-volume-off'
+
+      if subscribed
+        @subscribeButton
+          .attr('data-subscribed', true)
+          .find('.subscribe-text')
+          .text(@subscribeButton.data("unsubscribe-text"))
+          .closest('.subscription')
+          .find('.negation')
+          .hide()
+      else
+        @subscribeButton
+          .removeAttr('data-subscribed', subscribed)
+          .find('.subscribe-text')
+          .text(@subscribeButton.data("subscribe-text"))
+          .closest('.subscription')
+          .find('.negation')
+          .show()
diff --git a/app/views/projects/labels/_label.html.haml b/app/views/projects/labels/_label.html.haml
index 294fec422c54f0bf6d697421acfb9ce39fba31bc..befa47ca641e3a5650ba6d1ed93f8ce4b5f20a5b 100644
--- a/app/views/projects/labels/_label.html.haml
+++ b/app/views/projects/labels/_label.html.haml
@@ -13,8 +13,8 @@
       .label-subscription{data: {url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label)}}
         .subscription-status{data: {status: label_subscription_status(label)}}
 
-        %button.js-subscribe-button.label-subscribe-button.btn.action-buttons{ type: "button", data: { toggle: "tooltip" } }
-          %span= label_subscription_toggle_button_text(label)
+        %button.js-subscribe-button.label-subscribe-button.btn.action-buttons{ type: "button", data: { toggle: "tooltip", subscribed: label.subscribed?(current_user), subscribe_text: "Subscribe", unsubscribe_text: "Unsubscribe" } }
+          %span.subscribe-text= label_subscription_toggle_button_text(label)
 
     - if can? current_user, :admin_label, @project
       = link_to edit_namespace_project_label_path(@project.namespace, @project, label), title: "Edit", class: 'btn action-buttons', data: {toggle: "tooltip"} do
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index d6552ae7f189a3c52aaf645fa457efdb8e2bfad7..7bfc22d0f6d81c735bf85a288e5e72ffaf9f0d68 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -147,14 +147,13 @@
             = icon('rss')
           .title.hide-collapsed
             Notifications
-          - subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed'
-          %button.btn.btn-block.btn-gray.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
-            %span= subscribed ? 'Unsubscribe' : 'Subscribe'
-          .subscription-status.hide-collapsed{data: {status: subscribtion_status}}
-            .unsubscribed{class: ( 'hidden' if subscribed )}
-              You're not receiving notifications from this thread.
-            .subscribed{class: ( 'hidden' unless subscribed )}
-              You're receiving notifications because you're subscribed to this thread.
+          %button.btn.btn-block.btn-gray.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button", data: { subscribed: subscribed, subscribe_text: "Subscribe", unsubscribe_text: "Unsubscribe" } }
+            = icon(subscribed ? 'volume-up' : 'volume-off')
+            %span.subscribe-text= subscribed ? 'Unsubscribe' : 'Subscribe'
+          .subscription-status.hide-collapsed
+            You are
+            %span.negation{ style: ("display:none;" if subscribed) } not
+            subscribed
 
       - project_ref = cross_project_reference(@project, issuable)
       .block.project-reference