diff --git a/frontend/src/lib/components/PaymentBillComp.svelte b/frontend/src/lib/components/PaymentBillComp.svelte
index c1e8ec1..f4cc4f2 100644
--- a/frontend/src/lib/components/PaymentBillComp.svelte
+++ b/frontend/src/lib/components/PaymentBillComp.svelte
@@ -1,26 +1,45 @@
 <script lang="ts">
 	import { type PaymentBill } from "$lib/types";
-	import { time } from "$wails/models";
+	import { SetPaid } from "$wails/main/App";
+	import { toast } from "svelte-sonner";
 
 	export let paymentBill: PaymentBill = {
 		id: -1,
 		name: "none",
 		payment: null,
 	};
+	export let monthFor: Date = new Date();
 
 	let paymentDate: string = "";
-	if (!!paymentBill.payment?.paymentDate) {
-		// @ts-ignore Yes split exists... The type is time.Time but it's actually a string
-		// Because typescript is a worthless waste of bytes
-		// And I don't know how to properly convert time.Time to Date or String
-		// So I'm doing this bullshit
-		paymentDate = paymentBill.payment!.paymentDate.split("T")[0];
+	$: {
+		if (!!paymentBill.payment?.paymentDate) {
+			// @ts-ignore Yes split exists... The type is time.Time but it's actually a string
+			// Because typescript is a worthless waste of bytes
+			// And I don't know how to properly convert time.Time to Date or String
+			// So I'm doing this bullshit
+			paymentDate = paymentBill.payment!.paymentDate.split("T")[0];
+		}
+	}
+
+	async function doPaid(event: MouseEvent) {
+		const res = await SetPaid(paymentBill.id, monthFor);
+		if (!res.success) {
+			toast.error(`failed setting paid for ${paymentBill.id} and month ${monthFor} with error ${res.error}`);
+			return;
+		}
+		paymentBill.payment = res.data;
 	}
 </script>
 
 <template>
 	<div class="grid grid-cols-2 w-full text-start px-3 text-xl">
 		<p class={paymentBill.payment == null ? "text-red-700" : ""}>{paymentBill.name}</p>
-		<p class="h-[1.6em] cursor-pointer border-2 border-transparent hover:border-solid hover:border-sky-500">{paymentDate}</p>
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
+		<p
+			class="h-[1.6em] cursor-pointer border-2 border-transparent hover:border-solid hover:border-sky-500"
+			on:click={doPaid}
+		>
+			{paymentDate}
+		</p>
 	</div>
 </template>
diff --git a/frontend/src/lib/components/Payments.svelte b/frontend/src/lib/components/Payments.svelte
index d56e952..c79d5a6 100644
--- a/frontend/src/lib/components/Payments.svelte
+++ b/frontend/src/lib/components/Payments.svelte
@@ -42,7 +42,7 @@
 		</div>
 		<div class="">
 			{#each Object.values(paymentsModel) as payment}
-				<PaymentBillComp paymentBill={payment} />
+				<PaymentBillComp paymentBill={payment} monthFor={date} />
 			{/each}
 		</div>
 	</div>