diff --git a/package.json b/package.json
index 58f25a9..16c1f13 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "nodebb-theme-persona",
   "version": "10.2.60",
   "nbbpm": {
-    "compatibility": "^1.14.0"
+    "compatibility": "^1.15.0"
   },
   "description": "Persona theme for NodeBB",
   "main": "theme.less",
diff --git a/public/persona.js b/public/persona.js
index 13da7d6..c7551e3 100644
--- a/public/persona.js
+++ b/public/persona.js
@@ -412,29 +412,28 @@ $(document).ready(function () {
 	}
 
 	function setupFavouriteMorph(parent, uid, username) {
-		parent.find('.btn-morph').click(function (ev) {
-			var type = $(this).hasClass('plus') ? 'follow' : 'unfollow';
+		require(['api'], function (api) {
+			parent.find('.btn-morph').click(function (ev) {
+				var type = $(this).hasClass('plus') ? 'follow' : 'unfollow';
+				var method = $(this).hasClass('plus') ? 'put' : 'del';
 
-			socket.emit('user.' + type, { uid: uid }, function (err) {
-				if (err) {
-					return app.alertError(err.message);
-				}
-
-				app.alertSuccess('[[global:alert.' + type + ', ' + username + ']]');
-			});
+				api[method]('/users/' + uid + '/follow').then(() => {
+					app.alertSuccess('[[global:alert.' + type + ', ' + username + ']]');
+				});
 
-			$(this).toggleClass('plus').toggleClass('heart');
-			$(this).translateAttr('title', type === 'follow' ? '[[global:unfollow]]' : '[[global:follow]]');
+				$(this).toggleClass('plus').toggleClass('heart');
+				$(this).translateAttr('title', type === 'follow' ? '[[global:unfollow]]' : '[[global:follow]]');
 
-			if ($(this).find('b.drop').length === 0) {
-				$(this).prepend('<b class="drop"></b>');
-			}
+				if ($(this).find('b.drop').length === 0) {
+					$(this).prepend('<b class="drop"></b>');
+				}
 
-			var drop = $(this).find('b.drop').removeClass('animate'),
-				x = ev.pageX - drop.width() / 2 - $(this).offset().left,
-				y = ev.pageY - drop.height() / 2 - $(this).offset().top;
+				var drop = $(this).find('b.drop').removeClass('animate'),
+					x = ev.pageX - drop.width() / 2 - $(this).offset().left,
+					y = ev.pageY - drop.height() / 2 - $(this).offset().top;
 
-			drop.css({ top: y + 'px', left: x + 'px' }).addClass('animate');
+				drop.css({ top: y + 'px', left: x + 'px' }).addClass('animate');
+			});
 		});
 	}