diff --git a/materialious/src/lib/Api/index.ts b/materialious/src/lib/Api/index.ts
index 71140d2b..dc4d0365 100644
--- a/materialious/src/lib/Api/index.ts
+++ b/materialious/src/lib/Api/index.ts
@@ -73,4 +73,18 @@ export async function getSubscriptions(): Promise<Subscription[]> {
 export async function amSubscribed(authorId: string): Promise<boolean> {
   const subscriptions = (await getSubscriptions()).filter(sub => sub.authorId === authorId);
   return subscriptions.length === 1;
-}
\ No newline at end of file
+}
+
+export async function postSubscribe(authorId: string) {
+  await fetch(buildPath(`auth/subscriptions/${authorId}`), {
+    method: "POST",
+    ...buildAuthHeaders()
+  });
+}
+
+export async function deleteUnsubscribe(authorId: string) {
+  await fetch(buildPath(`auth/subscriptions/${authorId}`), {
+    method: 'DELETE',
+    ...buildAuthHeaders()
+  });
+}
diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index 78896e96..4d87fa21 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { deleteUnsubscribe, postSubscribe } from '$lib/Api/index.js';
 	import PageLoading from '$lib/PageLoading.svelte';
 	import Player from '$lib/Player.svelte';
 	import Thumbnail from '$lib/Thumbnail.svelte';
@@ -8,6 +9,16 @@
 	export let data;
 
 	activePage.set(null);
+
+	async function toggleSubscribed() {
+		if (data.subscribed) {
+			await deleteUnsubscribe(data.video.authorId);
+		} else {
+			await postSubscribe(data.video.authorId);
+		}
+
+		data.subscribed = !data.subscribed;
+	}
 </script>
 
 {#if data}
@@ -33,7 +44,11 @@
 						</div>
 					</nav>
 				</a>
-				<button class:inverse-surface={!data.subscribed} class:border={data.subscribed}>
+				<button
+					on:click={toggleSubscribed}
+					class:inverse-surface={!data.subscribed}
+					class:border={data.subscribed}
+				>
 					{#if !data.subscribed}
 						Subscribe
 					{:else}