diff --git a/frontend/src/routes/[fam]/[username]/bonuses/+page.svelte b/frontend/src/routes/[fam]/[username]/bonuses/+page.svelte
index 9568b57..47bf461 100644
--- a/frontend/src/routes/[fam]/[username]/bonuses/+page.svelte
+++ b/frontend/src/routes/[fam]/[username]/bonuses/+page.svelte
@@ -210,7 +210,7 @@
 
 	let outstandingConfigs = $derived(allBonusConfigs.filter((c: BonusConfig) => isOutstanding(c)));
 	let doneConfigs = $derived(
-		allBonusConfigs.filter((c: BonusConfig) => isCompleted(c) && !isOutstanding(c))
+		configs.filter((c: BonusConfig) => c.status === 'completed') as BonusConfig[]
 	);
 
 	function isCompleted(cfg: BonusConfig): boolean {
@@ -223,6 +223,7 @@
 		return prog.progress.every((p) => p.achieved);
 	}
 
+	// todo - redundant?
 	function isOutstanding(cfg: BonusConfig): boolean {
 		if (!isCompleted(cfg)) return false;
 		const rewards = allRewards.filter((r) => r.bonusConfigId === cfg.id);
@@ -296,12 +297,10 @@
 			<div class="column member-col" ondragover={handleDragOver} ondrop={handleDropToMember}>
 				<h3>Member</h3>
 				{#each allBonusConfigs.filter((c) => c.target === 'individual' && !doneConfigs.includes(c)) as cfg}
-					{@const done = isCompleted(cfg)}
-					{@const outstanding = isOutstanding(cfg)}
 					<div
 						class="col-card"
-						class:done
-						class:outstanding
+						class:done={outstandingConfigs.includes(cfg)}
+						class:outstanding={outstandingConfigs.includes(cfg)}
 						class:disabled={disabledIds.has(cfg.id)}
 					>
 						<div class="col-card-head">
@@ -334,14 +333,14 @@
 											</div>
 										{/if}
 										<span class="stat {p?.state ?? 'pending'}">
-											{p ? (outstanding ? 'Outstanding' : p.state) : 'Pending'}
+											{p ? (outstandingConfigs.includes(cfg) ? 'Outstanding' : p.state) : 'Pending'}
 										</span>
 									</div>
 								{/if}
 							{/if}
 						{/each}
 						<div class="col-card-foot">
-							{#if !done}
+							{#if !outstandingConfigs.includes(cfg)}
 								<Button variant="secondary" size="sm" onclick={() => openEditConfig(cfg)}>
 									Edit
 								</Button>
@@ -358,13 +357,11 @@
 			<div class="column comp-col" ondragover={handleDragOver} ondrop={handleDropToCompetition}>
 				<h3>Competition</h3>
 				{#each allBonusConfigs.filter((c) => c.target === 'competitive' && !doneConfigs.includes(c)) as cfg}
-					{@const done = isCompleted(cfg)}
-					{@const outstanding = isOutstanding(cfg)}
 					{@const prog = progressByConfigId.get(cfg.id)}
 					<div
 						class="col-card"
-						class:done
-						class:outstanding
+						class:done={outstandingConfigs.includes(cfg)}
+						class:outstanding={outstandingConfigs.includes(cfg)}
 						class:disabled={disabledIds.has(cfg.id)}
 					>
 						<div class="col-card-head">
@@ -394,14 +391,14 @@
 											</div>
 										{/if}
 										<span class="stat {p.state}">
-											{outstanding ? 'Outstanding' : p.state}
+											{outstandingConfigs.includes(cfg) ? 'Outstanding' : p.state}
 										</span>
 									</div>
 								{/each}
 							</div>
 						{/if}
 						<div class="col-card-foot">
-							{#if !done}
+							{#if !outstandingConfigs.includes(cfg)}
 								<Button variant="secondary" size="sm" onclick={() => openEditConfig(cfg)}>
 									Edit
 								</Button>
@@ -418,13 +415,11 @@
 			<div class="column collab-col" ondragover={handleDragOver} ondrop={handleDropToCollaboration}>
 				<h3>Collaboration</h3>
 				{#each allBonusConfigs.filter((c) => c.target === 'collaborative') as cfg}
-					{@const done = isCompleted(cfg)}
-					{@const outstanding = isOutstanding(cfg)}
 					{@const prog = progressByConfigId.get(cfg.id)}
 					<div
 						class="col-card"
-						class:done
-						class:outstanding
+						class:done={outstandingConfigs.includes(cfg)}
+						class:outstanding={outstandingConfigs.includes(cfg)}
 						class:disabled={disabledIds.has(cfg.id)}
 					>
 						<div class="col-card-head">
@@ -457,13 +452,13 @@
 										{cfg.type === 'threshold' ? 'pts' : 'chores'}</span
 									>
 									<span class="stat {team.state}">
-										{team.state}
+										{outstandingConfigs.includes(cfg) ? 'Outstanding' : team.state}
 									</span>
 								</div>
 							{/if}
 						{/if}
 						<div class="col-card-foot">
-							{#if !done}
+							{#if !outstandingConfigs.includes(cfg)}
 								<Button variant="secondary" size="sm" onclick={() => openEditConfig(cfg)}>
 									Edit
 								</Button>
@@ -775,6 +770,22 @@
 								>
 									{editingConfig.status === 'disabled' ? 'Enable' : 'Disable'}
 								</button>
+								{#if editingConfig.status !== 'completed'}
+									<button
+										type="button"
+										class="complete-btn"
+										onclick={async () => {
+											if (!editingConfig) return;
+											if (!confirm('Mark this bonus as completed?')) return;
+											const fd = new FormData();
+											fd.append('id', editingConfig.id);
+											const res = await fetch('?/completeConfig', { method: 'POST', body: fd });
+											if (res.ok) showEditModal = false;
+										}}
+									>
+										Mark Complete
+									</button>
+								{/if}
 								<button
 									type="button"
 									class="delete-btn"
@@ -1049,6 +1060,7 @@
 		display: flex;
 		gap: 0.5rem;
 		margin-top: 1rem;
+		flex-wrap: wrap;
 	}
 	.modal-actions button {
 		padding: 0.5rem 1rem;
@@ -1069,6 +1081,10 @@
 		background: #f59e0b;
 		color: white;
 	}
+	.modal-actions button.complete-btn {
+		background: #10b981;
+		color: white;
+	}
 	.modal-actions button.delete-btn {
 		background: #ef4444;
 		color: white;