diff --git a/src/lib/api.ts b/src/lib/api.ts
index c468af0..c5278f9 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -9,6 +9,15 @@ import rawStandards from "$lib/data/standards.json" assert { type: "json" }
 
 const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
 
+const syncProduct = async (printfulProduct: Printful.Products.Product) => {
+	let webflowProduct = await Webflow.Products.get(printfulProduct.sync_product.external_id);
+	if (webflowProduct)
+		await Webflow.Products.updateUsingPrintful(printfulProduct);
+	else
+		webflowProduct = await Webflow.Products.createUsingPrintful(printfulProduct);
+	await Webflow.Products.syncImages(webflowProduct);
+};
+
 export const app = new Elysia({ prefix: "/api" })
 	.use(cors({
 		origin: '*'
@@ -18,7 +27,7 @@ export const app = new Elysia({ prefix: "/api" })
 
 	// CALCULATOR
 
-	.post("/calculate", async ({ body }) => {
+	.post("/calculate", async ({ body, store }) => {
 		const MAIN_STANDARDS = new Standards(rawStandards as ActivityStandards);
 		interface CalcRequest {
 			player: Player;
@@ -38,35 +47,68 @@ export const app = new Elysia({ prefix: "/api" })
 	})
 
 	// COMMERCE
+	.group("/products", app => app
+		.group("/sync", app => app
+			.state("job", {
+				isSyncing: false,
+				printfulProductId: undefined as undefined | number
+			})
+			.get("/", async ({ store }) => {
+				return store.job;
+			})
+			.post("/:printfulProductId?", async ({ params, store }) => {
+				if (store.job.isSyncing) return "";
+				store.job.isSyncing = true;
+				try {
+					if (params.printfulProductId) {
+						const printfulProductId = +params.printfulProductId;
 
-	.post("/products/sync", async ({ body, set }) => {
-		console.log("Syncing...");
-		const printfulProducts = await Printful.Products.getAll();
-		const webflowProducts = await Webflow.Products.getAll();
-		for (const printfulProduct of printfulProducts) {
-			await sleep(2000);
-			console.log(printfulProduct.name, printfulProduct.id, printfulProduct.external_id);
-			const fullPrintfulProduct = await Printful.Products.get(printfulProduct.id);
+						store.job.printfulProductId = printfulProductId;
 
-			let webflowProduct = webflowProducts
-				.find(webflowProduct => webflowProduct.product.id === printfulProduct.external_id);
-			if (webflowProduct)
-				await Webflow.Products.updateUsingPrintful(fullPrintfulProduct);
-			else
-				webflowProduct = await Webflow.Products.createUsingPrintful(fullPrintfulProduct);
-			await Webflow.Products.syncImages(webflowProduct);
-		}
-		console.log("Done");
-		return "";
-	}, {
-		error({ error }) {
-			console.error(error);
-			return {
-				message: "Failed to sync products",
-				error
-			}
-		}
-	})
+						const printfulProduct = await Printful.Products.get(printfulProductId);
+						await syncProduct(printfulProduct);
+					}
+					else {
+						console.log("Syncing all products...");
+
+						const printfulProducts = await Printful.Products.getAll();
+						const webflowProducts = await Webflow.Products.getAll();
+						for (const printfulProduct of printfulProducts) {
+							store.job.printfulProductId = printfulProduct.id;
+
+							await sleep(2000);
+							const fullPrintfulProduct = await Printful.Products.get(printfulProduct.id);
+
+							let webflowProduct = webflowProducts
+								.find(webflowProduct => webflowProduct.product.id === printfulProduct.external_id);
+							if (webflowProduct)
+								await Webflow.Products.updateUsingPrintful(fullPrintfulProduct);
+							else
+								webflowProduct = await Webflow.Products.createUsingPrintful(fullPrintfulProduct);
+							await Webflow.Products.syncImages(webflowProduct);
+						}
+					}
+					console.log("Done");
+					return "";
+				}
+				catch (error) {
+					throw error;
+				}
+				finally {
+					store.job.isSyncing = false;
+					store.job.printfulProductId = undefined;
+				}
+			}, {
+				error({ error }) {
+					console.error(error);
+					return {
+						message: "Failed to sync product(s)",
+						error
+					}
+				}
+			})
+		)
+	)
 
 	// WEBHOOKS
 
@@ -75,14 +117,7 @@ export const app = new Elysia({ prefix: "/api" })
 		switch (payload.type) {
 			case Printful.Webhook.Event.ProductUpdated: {
 				const printfulProduct = await Printful.Products.get(payload.data.sync_product.id);
-
-				let webflowProduct = await Webflow.Products.get(printfulProduct.sync_product.external_id);
-				if (webflowProduct)
-					await Webflow.Products.updateUsingPrintful(printfulProduct);
-				else
-					webflowProduct = await Webflow.Products.createUsingPrintful(printfulProduct);
-				await Webflow.Products.syncImages(webflowProduct);
-
+				await syncProduct(printfulProduct);
 				break;
 			}
 			case Printful.Webhook.Event.ProductDeleted: {
@@ -101,8 +136,5 @@ export const app = new Elysia({ prefix: "/api" })
 		}
 	});
 
-export type App = typeof app;
-
-const apiWrapper = treaty<App>(app);
-export const api = apiWrapper.api;
+export const api = treaty<typeof app>("localhost:5173").api;
 
diff --git a/src/routes/commerce/+page.svelte b/src/routes/commerce/+page.svelte
index f4d3f8c..66407b7 100644
--- a/src/routes/commerce/+page.svelte
+++ b/src/routes/commerce/+page.svelte
@@ -1,11 +1,46 @@
 <script lang="ts">
-	import { Printful } from "$lib/services/commerce/printful";
+	import { api } from "$lib/api.js";
+	import type { Printful } from "$lib/services/commerce/printful";
+	import { onMount } from "svelte";
 
 	const { data } = $props();
 
-	let isSyncing = $state(false);
+	const synchronizer = $state({
+		isSyncing: false,
+		printfulProductId: undefined as undefined | number,
+		poll: async function () {
+			const res = await api.products.sync.get();
+			if (res.data) {
+				synchronizer.isSyncing = res.data.isSyncing;
+				synchronizer.printfulProductId = res.data.printfulProductId;
+			}
+		},
+		startPolling: () => {
+			const intervalId = setInterval(async () => {
+				await synchronizer.poll();
+				if (!synchronizer.isSyncing) clearInterval(intervalId);
+			}, 100);
+		},
+		syncAll: async () => {
+			synchronizer.startPolling();
+			await api.products.sync.post();
+		},
+		sync: async (printfulProductId: number) => {
+			synchronizer.startPolling();
+			await api.products
+				.sync({ printfulProductId: String(printfulProductId) })
+				.post();
+		},
+	});
 
-	const isPrintfulProductSynced = async (
+	onMount(async () => {
+		await synchronizer.poll();
+		if (synchronizer.isSyncing) {
+			synchronizer.startPolling();
+		}
+	});
+
+	const isProductSynced = async (
 		printfulProduct: Printful.Products.SyncProduct,
 	) => {
 		const webflowProducts = await data.products.webflow;
@@ -13,52 +48,63 @@
 			(p) => p.product.id === printfulProduct.external_id,
 		);
 	};
-
-	const syncProducts = async () => {
-		isSyncing = true;
-		await fetch(`http://localhost:5173/api/products/sync`, {
-			method: "POST",
-		});
-		isSyncing = false;
-	};
 </script>
 
 {#await data.products.printful}
 	<p>Loading...</p>
 {:then printfulProducts}
-	{#if isSyncing}
-		<p>Syncing...</p>
-	{:else}
-		<button onclick={() => syncProducts()} class="btn btn-lg">sync</button>
-		<div class="w-full overflow-x-auto">
-			<table class="table">
-				<thead>
-					<tr>
-						<th>Name</th>
-						<th>Synced</th>
-					</tr>
-				</thead>
-				<tbody>
-					{#each printfulProducts as printfulProduct}
-						<tr class="hover:bg-base-300">
-							<td>{printfulProduct.name}</td>
-							<td>
-								{#await isPrintfulProductSynced(printfulProduct) then isSynced}
-									<div
-										class="badge {isSynced
-											? 'badge-success'
-											: 'badge-error'}"
-									>
-										{isSynced ? "Synced" : "Desynced"}
+	<button
+		disabled={synchronizer.isSyncing}
+		onclick={() => synchronizer.syncAll()}
+		class="btn btn-xl mb-5"
+	>
+		Sync all
+	</button>
+	<div class="w-full overflow-x-auto">
+		<table class="table">
+			<thead>
+				<tr>
+					<th>Name</th>
+					<th>Status</th>
+					<th>Sync</th>
+				</tr>
+			</thead>
+			<tbody>
+				{#each printfulProducts as printfulProduct}
+					<tr class="hover:bg-base-300">
+						<td>{printfulProduct.name}</td>
+						<td>
+							{#await isProductSynced(printfulProduct) then isSynced}
+								{#if synchronizer.printfulProductId === printfulProduct.id}
+									<div class="badge badge-warning">
+										Syncing...
 									</div>
-								{/await}
-							</td>
-						</tr>
-					{/each}
-				</tbody>
-			</table>
-		</div>
-	{/if}
+								{:else if isSynced}
+									<div class="badge badge-success">
+										Synced
+									</div>
+								{:else}
+									<div class="badge badge-error">
+										Desynced
+									</div>
+								{/if}
+							{/await}
+						</td>
+						<td>
+							<button
+								disabled={synchronizer.isSyncing}
+								onclick={() =>
+									synchronizer.sync(printfulProduct.id)}
+								class="btn"
+							>
+								Sync
+							</button>
+						</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
 {:catch error}
 	<p>Something went wrong: {error.message}</p>
 {/await}
diff --git a/tsconfig.json b/tsconfig.json
index 5fa220a..39a4099 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,7 +10,8 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"moduleResolution": "bundler"
+		"moduleResolution": "bundler",
+		"importsNotUsedAsValue": true
 	}
 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files