diff --git a/src/lib/components/groove/Footer.svelte b/src/lib/components/groove/Footer.svelte
index e25376f..6b0b77f 100644
--- a/src/lib/components/groove/Footer.svelte
+++ b/src/lib/components/groove/Footer.svelte
@@ -117,12 +117,7 @@
 			<Button variant="outline" size="icon">
 				<SkipBack />
 			</Button>
-			<Button
-				type="submit"
-				formaction="/player?/{player.isPaused ? 'resume' : 'pause'}"
-				variant="outline"
-				size="icon"
-			>
+			<Button type="submit" formaction="/player?/toggle-pause" variant="outline" size="icon">
 				{#if player.isPaused}
 					<Play />
 				{:else}
diff --git a/src/routes/player/+page.server.ts b/src/routes/player/+page.server.ts
index ec27709..fc36438 100644
--- a/src/routes/player/+page.server.ts
+++ b/src/routes/player/+page.server.ts
@@ -22,6 +22,15 @@ export const actions = {
 			isPaused: response.response.isPaused
 		};
 	},
+	'toggle-pause': async () => {
+		const client = new PlayerClient(protoTransport);
+
+		const response = await client.togglePause({});
+
+		return {
+			isPaused: response.response.isPaused
+		};
+	},
 	seek: async ({ request }) => {
 		const formData = await request.formData();