diff --git a/wherehows-web/app/components/dataset-favorite.js b/wherehows-web/app/components/dataset-favorite.js
new file mode 100644
index 0000000000..4472dc9cbf
--- /dev/null
+++ b/wherehows-web/app/components/dataset-favorite.js
@@ -0,0 +1,27 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  actions: {
+    favorites: function(dataset) {
+      var url = '/api/v1/datasets/' + dataset.id + '/favorite'
+      var method = !dataset.isFavorite ? 'POST' : 'DELETE'
+      var token = $("#csrfToken").val().replace('/', '')
+      var _this = this
+      $.ajax({
+        url: url,
+        method: method,
+        headers: {
+          'Csrf-Token': token
+        },
+        dataType: 'json',
+        data: {
+          csrfToken: token
+        }
+      }).done(function(data, txt, xhr){
+        _this.set('dataset.isFavorite', !dataset.isFavorite)
+      }).fail(function(xhr, txt, err){
+        console.log('Error: Could not update dataset favorite.')
+      })
+    }
+  }
+});
diff --git a/wherehows-web/app/templates/components/dataset-favorite.hbs b/wherehows-web/app/templates/components/dataset-favorite.hbs
new file mode 100644
index 0000000000..4966462817
--- /dev/null
+++ b/wherehows-web/app/templates/components/dataset-favorite.hbs
@@ -0,0 +1,4 @@
+<i class="wh-clickable-icon fa {{if dataset.isFavorite 'fa-heart'}} {{unless dataset.isFavorite 'fa-heart-o'}}"
+  {{action "favorites" dataset}}>
+  {{yield}}
+</i>
\ No newline at end of file