diff --git a/app/components/WebsocketProvider.tsx b/app/components/WebsocketProvider.tsx
index 627c80284..fba51939a 100644
--- a/app/components/WebsocketProvider.tsx
+++ b/app/components/WebsocketProvider.tsx
@@ -11,6 +11,7 @@ import FileOperation from "~/models/FileOperation";
 import Group from "~/models/Group";
 import Pin from "~/models/Pin";
 import Star from "~/models/Star";
+import Subscription from "~/models/Subscription";
 import Team from "~/models/Team";
 import withStores from "~/components/withStores";
 import {
@@ -84,6 +85,7 @@ class WebsocketProvider extends React.Component<Props> {
       policies,
       presence,
       views,
+      subscriptions,
       fileOperations,
     } = this.props;
     if (!auth.token) {
@@ -380,6 +382,20 @@ class WebsocketProvider extends React.Component<Props> {
       }
     );
 
+    this.socket.on(
+      "subscriptions.create",
+      (event: PartialWithId<Subscription>) => {
+        subscriptions.add(event);
+      }
+    );
+
+    this.socket.on(
+      "subscriptions.delete",
+      (event: WebsocketEntityDeletedEvent) => {
+        subscriptions.remove(event.modelId);
+      }
+    );
+
     // received a message from the API server that we should request
     // to join a specific room. Forward that to the ws server.
     this.socket.on("join", (event: any) => {
diff --git a/server/queues/processors/WebsocketsProcessor.ts b/server/queues/processors/WebsocketsProcessor.ts
index 2469201ce..dc244a7d1 100644
--- a/server/queues/processors/WebsocketsProcessor.ts
+++ b/server/queues/processors/WebsocketsProcessor.ts
@@ -11,6 +11,7 @@ import {
   Pin,
   Star,
   Team,
+  Subscription,
 } from "@server/models";
 import {
   presentCollection,
@@ -19,6 +20,7 @@ import {
   presentGroup,
   presentPin,
   presentStar,
+  presentSubscription,
   presentTeam,
 } from "@server/presenters";
 import { Event } from "../../types";
@@ -532,6 +534,22 @@ export default class WebsocketsProcessor {
         return;
       }
 
+      case "subscriptions.create": {
+        const subscription = await Subscription.findByPk(event.modelId);
+        if (!subscription) {
+          return;
+        }
+        return socketio
+          .to(`user-${event.userId}`)
+          .emit(event.name, presentSubscription(subscription));
+      }
+
+      case "subscriptions.delete": {
+        return socketio.to(`user-${event.userId}`).emit(event.name, {
+          modelId: event.modelId,
+        });
+      }
+
       case "teams.update": {
         const team = await Team.scope("withDomains").findByPk(event.teamId);
         if (!team) {