diff --git a/rd_ui/app/scripts/controllers/alerts.js b/rd_ui/app/scripts/controllers/alerts.js
index b09230fd..794dae59 100644
--- a/rd_ui/app/scripts/controllers/alerts.js
+++ b/rd_ui/app/scripts/controllers/alerts.js
@@ -74,6 +74,7 @@
 
     $scope.ops = ['greater than', 'less than', 'equals'];
     $scope.selectedQuery = null;
+    $scope.destinations = Destination.query();
 
     $scope.getDefaultName = function() {
       if (!$scope.alert.query) {
@@ -92,8 +93,6 @@
       });
     };
 
-    $scope.destinations = Destination.query();
-
     $scope.saveChanges = function() {
       if ($scope.alert.name === undefined || $scope.alert.name === '') {
         $scope.alert.name = $scope.getDefaultName();
@@ -110,9 +109,10 @@
         growl.addErrorMessage("Failed saving alert.");
       });
     };
+
   };
 
-  angular.module('redash.directives').directive('alertSubscribers', ['AlertSubscription', function (AlertSubscription) {
+  angular.module('redash.directives').directive('alertSubscribers', ['AlertSubscription', 'Destination', 'growl', function (AlertSubscription, Destination, growl) {
     return {
       restrict: 'E',
       replace: true,
@@ -122,6 +122,40 @@
       },
       controller: function ($scope) {
         $scope.subscribers = AlertSubscription.query({alertId: $scope.alertId});
+        $scope.subscription = {};
+        $scope.destinations = Destination.query();
+
+        $scope.destinationsDisplay = function(destination) {
+            var icons = {
+                'slack': 'fa-slack',
+                'email': 'fa-envelope',
+                'webhook': 'fa-bolt',
+                'hipchat': 'fa-comment-o'
+            }
+            var icon = icons[destination.type] || 'fa-bullseye'
+
+            return '<i class="fa ' + icon + '"></i>&nbsp;' + destination.name
+        };
+
+        $scope.saveSubscriber = function() {
+            $scope.sub = new AlertSubscription({alert_id: $scope.alertId, destination_id: $scope.subscription.destination.id});
+            $scope.sub.$save(function() {
+              growl.addSuccessMessage("Subscribed.");
+              $scope.subscribers.push($scope.sub);
+            }, function() {
+              growl.addErrorMessage("Failed saving subscription.");
+            });
+        };
+
+        $scope.unsubscribe = function(subscriber) {
+            $scope.sub = new AlertSubscription({alert_id: subscriber.alert_id, subscriber_id: subscriber.id});
+            $scope.sub.$delete(function() {
+              growl.addSuccessMessage("Unsubscribed");
+              $scope.subscribers = _.without($scope.subscribers, subscriber);
+            }, function() {
+              growl.addErrorMessage("Failed unsubscribing.");
+            });
+        };
       }
     }
   }]);
@@ -159,7 +193,7 @@
             });
           } else {
             $scope.subscription = new AlertSubscription({alert_id: $scope.alertId});
-            $scope.subscription.$save(function() {
+            $scope.subscription.$delete(function() {
               $scope.subscribers.push($scope.subscription);
               updateClass();
             }, function() {
diff --git a/rd_ui/app/scripts/services/resources.js b/rd_ui/app/scripts/services/resources.js
index 90a0aba2..12431f3f 100644
--- a/rd_ui/app/scripts/services/resources.js
+++ b/rd_ui/app/scripts/services/resources.js
@@ -608,7 +608,12 @@
   };
 
   var AlertSubscription = function ($resource) {
-    var resource = $resource('api/alerts/:alertId/subscriptions/:userId', {alertId: '@alert_id', userId: '@user.id'});
+    var actions = {
+      'get': {method: 'GET'},
+      'save': {method: 'POST'},
+      'delete': {method: 'DELETE'}
+    };
+    var resource = $resource('api/alerts/:alertId/subscriptions/:subscriberId', {alertId: '@alert_id', subscriberId: '@subscriber_id'});
     return resource;
   };
 
diff --git a/rd_ui/app/views/alerts/subscribers.html b/rd_ui/app/views/alerts/subscribers.html
index f6f3d1a8..8d2e1c96 100644
--- a/rd_ui/app/views/alerts/subscribers.html
+++ b/rd_ui/app/views/alerts/subscribers.html
@@ -1,4 +1,23 @@
 <div>
-    <strong>Subscribers</strong> <subscribe-button alert-id="alertId" subscribers="subscribers"></subscribe-button><br/>
-    <img ng-src="{{s.user.gravatar_url}}" class="img-circle" alt="{{s.user.name}}" ng-repeat="s in subscribers"/>
+    <form name="subscribeForm" ng-submit="saveSubscriber()" class="form">
+        <div class="form-group">
+            <label>Add a Destination</label>
+            <ui-select ng-model="subscription.destination">
+                <ui-select-match>{{$select.selected.name}}</ui-select-match>
+                <ui-select-choices repeat="d in destinations">
+                    <span ng-bind-html=destinationsDisplay(d)></span>
+                </ui-select-choices>
+            </ui-select>
+        </div>
+        <div class="form-group">
+            <button class="btn btn-primary">Subscribe</button>
+        </div>
+    </form>
+    <div class="list-group">
+        <label>Currently subscribed</label>
+        <div class="list-group-item" ng-repeat="subscriber in subscribers">
+            <span ng-bind-html=destinationsDisplay(subscriber.destination)></span>
+            <button class="btn btn-xs btn-danger pull-right" ng-click="unsubscribe(subscriber)">Unsubscribe</button>
+        </div>
+    </div>
 </div>