From d303eda038873ab4d4464533c7e1313051a82a55 Mon Sep 17 00:00:00 2001
From: JCEEE <0xjceee@proton.me>
Date: Fri, 28 Aug 2026 19:32:32 +0100
Subject: [PATCH] remove payday debug and add multiple ui fixes

---
 frontend/src/lib/components/Button.svelte     |   5 +-
 .../src/lib/components/NoticeDialog.svelte    |  24 +-
 .../src/lib/components/PricingPlans.svelte    |   4 +-
 frontend/src/lib/components/icons.ts          |  12 +
 frontend/src/lib/server/services/chores.ts    |  10 +-
 .../src/lib/server/services/completions.ts    |  10 +-
 frontend/src/lib/server/services/fam.ts       | 143 ---
 frontend/src/lib/server/services/index.ts     |   1 -
 frontend/src/lib/server/services/settings.ts  |   5 +-
 frontend/src/lib/types.ts                     |   1 -
 frontend/src/routes/+page.svelte              |  30 +-
 .../routes/[fam]/[username]/+page.server.ts   |  32 +-
 .../src/routes/[fam]/[username]/+page.svelte  | 914 +++++++++---------
 .../[fam]/[username]/chores/+page.svelte      | 176 +++-
 frontend/src/routes/[fam]/join/+page.svelte   |  10 +-
 .../routes/[fam]/join/[username]/+page.svelte |  11 +-
 frontend/src/routes/admin/+page.svelte        |   5 +-
 frontend/src/routes/pricing/+page.svelte      |   7 +-
 shared/pb/schema.ts                           |   2 +-
 19 files changed, 705 insertions(+), 697 deletions(-)

diff --git a/frontend/src/lib/components/Button.svelte b/frontend/src/lib/components/Button.svelte
index 42c9fa4..66c7d2b 100644
--- a/frontend/src/lib/components/Button.svelte
+++ b/frontend/src/lib/components/Button.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	let { variant = 'primary', size = 'md', href, onclick, children, ...rest }: {
-		variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
+		variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'success';
 		size?: 'sm' | 'md' | 'lg';
 		href?: string;
 		onclick?: () => void;
@@ -46,4 +46,7 @@
 
 	.btn-danger { background: #dc2626; color: #fff; border-color: #dc2626; }
 	.btn-danger:hover { background: #b91c1c; }
+
+	.btn-success { background: #059669; color: #fff; border-color: #059669; }
+	.btn-success:hover { background: #047857; }
 </style>
diff --git a/frontend/src/lib/components/NoticeDialog.svelte b/frontend/src/lib/components/NoticeDialog.svelte
index 4c44d7c..f691bd3 100644
--- a/frontend/src/lib/components/NoticeDialog.svelte
+++ b/frontend/src/lib/components/NoticeDialog.svelte
@@ -1,12 +1,18 @@
 <script lang="ts">
 	import { notices, type NoticeType } from '$lib/stores/notices.svelte';
+	import {
+		checkCircleIcon,
+		alertTriangleIcon,
+		xCircleIcon,
+		infoIcon
+	} from '$lib/components/icons';
 
 	function icon(type: NoticeType) {
 		switch (type) {
-			case 'success': return '✅';
-			case 'warning': return '⚠️';
-			case 'error': return '❌';
-			default: return 'ℹ️';
+			case 'success': return checkCircleIcon;
+			case 'warning': return alertTriangleIcon;
+			case 'error': return xCircleIcon;
+			default: return infoIcon;
 		}
 	}
 </script>
@@ -16,7 +22,7 @@
 		{#each notices.list as notice (notice.id)}
 			<div class="notice notice-{notice.type}">
 				<div class="notice-content">
-					<div class="notice-icon">{icon(notice.type)}</div>
+					<div class="notice-icon">{@html icon(notice.type)}</div>
 					<div class="notice-text">
 						<h4>{notice.title}</h4>
 						{#if notice.message}
@@ -73,6 +79,14 @@
 		font-size: 1.1rem;
 		flex-shrink: 0;
 	}
+	.notice-icon :global(svg) {
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+	.notice-success .notice-icon { color: #059669; }
+	.notice-warning .notice-icon { color: #d97706; }
+	.notice-error .notice-icon { color: #dc2626; }
+	.notice-info .notice-icon { color: #6366f1; }
 	.notice-text h4 {
 		margin: 0 0 0.25rem;
 		font-size: 0.9rem;
diff --git a/frontend/src/lib/components/PricingPlans.svelte b/frontend/src/lib/components/PricingPlans.svelte
index cea8561..1266aca 100644
--- a/frontend/src/lib/components/PricingPlans.svelte
+++ b/frontend/src/lib/components/PricingPlans.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
+	import { checkCircleIcon } from '$lib/components/icons';
 
 	interface Tier {
 		id: 'trial' | 'monthly' | 'yearly';
@@ -84,7 +85,7 @@
 
 			<ul>
 				{#each tier.features as f}
-					<li><span class="tick">✓</span>{f}</li>
+					<li><span class="tick">{@html checkCircleIcon}</span>{f}</li>
 				{/each}
 			</ul>
 		</article>
@@ -202,6 +203,7 @@
 		gap: 0.45rem;
 	}
 	.tick { color: #059669; font-weight: 700; flex-shrink: 0; }
+	.tick :global(svg) { width: 1.05em; height: 1.05em; vertical-align: -0.15em; }
 
 	.form-error {
 		grid-column: 1 / -1;
diff --git a/frontend/src/lib/components/icons.ts b/frontend/src/lib/components/icons.ts
index 7378d23..7d512b7 100644
--- a/frontend/src/lib/components/icons.ts
+++ b/frontend/src/lib/components/icons.ts
@@ -2,6 +2,7 @@ export const dashboardIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fi
 export const choresIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>'
 export const rewardsIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89L17 22l-5-3-5 3 1.523-9.11"/></svg>'
 export const moneyIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>'
+export const coinsIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v6c0 1.66 3.58 3 8 3s8-1.34 8-3V6"/><path d="M4 12v6c0 1.66 3.58 3 8 3s8-1.34 8-3v-6"/></svg>'
 export const handCoinsIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 15h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 17"/><path d="m7 21 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="M2 16l1 1h2"/><path d="M4 12l1 1h2"/><path d="M6 8l1 1h2"/><path d="M2 20l1.5-.5"/><circle cx="16" cy="8" r="2"/></svg>'
 export const gemIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 3h12l4 6-10 13L2 9Z"/><path d="M11 3 8 9l4 13 4-13-3-6"/><path d="M2 9h20"/></svg>'
 export const archiveIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/></svg>'
@@ -17,3 +18,14 @@ export const chatIcon = '<svg width="20" height="20" viewBox="0 0 24 24" fill="n
 export const sendIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>'
 export const checkCircleIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>'
 export const revokeIcon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>'
+export const targetIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg>'
+export const calendarIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>'
+export const sunIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>'
+export const lockIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>'
+export const clockIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>'
+export const giftIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="8" width="18" height="4"/><path d="M12 8v13M12 8C12 8 9 3 6 5s0 3 3 3M12 8c0 0 3-5 6-3s0 3-3 3"/><path d="M5 12v9h14v-9"/></svg>'
+export const chevronLeftIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="m15 6 -6 6 6 6"/></svg>'
+export const chevronRightIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="m9 6 6 6 -6 6"/></svg>'
+export const alertTriangleIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><path d="M12 9v4M12 17h.01"/></svg>'
+export const xCircleIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="m15 9-6 6M9 9l6 6"/></svg>'
+export const infoIcon = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 16v-4M12 8h.01"/></svg>'
diff --git a/frontend/src/lib/server/services/chores.ts b/frontend/src/lib/server/services/chores.ts
index e39145b..bfb4222 100644
--- a/frontend/src/lib/server/services/chores.ts
+++ b/frontend/src/lib/server/services/chores.ts
@@ -10,13 +10,6 @@ export async function myChores(pb: any, famId: string, memberId: string) {
 		pb.collection('bonus_configs').getFullList({ filter: `famId = '${famId}' && status = 'active'` })
 	]);
 	const { payday, paydayTime, tz } = await famMeta(pb, famId);
-	let settings: any = {};
-	try {
-		const s = await pb
-			.collection('settings')
-			.getFullList({ filter: `famId = '${famId}'` });
-		settings = s?.[0] || {};
-	} catch {}
 	return {
 		templates,
 		assigned,
@@ -25,7 +18,6 @@ export async function myChores(pb: any, famId: string, memberId: string) {
 		bonusConfigs,
 		payday,
 		paydayTime,
-		timezone: tz,
-		simulateEow: !!settings.simulateEow
+		timezone: tz
 	};
 }
\ No newline at end of file
diff --git a/frontend/src/lib/server/services/completions.ts b/frontend/src/lib/server/services/completions.ts
index 22e393f..34b48e9 100644
--- a/frontend/src/lib/server/services/completions.ts
+++ b/frontend/src/lib/server/services/completions.ts
@@ -11,13 +11,6 @@ export async function myChores(pb: any, famId: string, memberId: string) {
 		pb.collection('bonus_configs').getFullList({ filter: `famId = '${famId}' && status = 'active'` })
 	]);
 	const { payday, paydayTime, tz } = await famMeta(pb, famId);
-	let settings: any = {};
-	try {
-		const s = await pb
-			.collection('settings')
-			.getFullList({ filter: `famId = '${famId}'` });
-		settings = s?.[0] || {};
-	} catch {}
 	return {
 		templates,
 		assigned,
@@ -26,8 +19,7 @@ export async function myChores(pb: any, famId: string, memberId: string) {
 		bonusConfigs,
 		payday,
 		paydayTime,
-		timezone: tz,
-		simulateEow: !!settings.simulateEow
+		timezone: tz
 	};
 }
 
diff --git a/frontend/src/lib/server/services/fam.ts b/frontend/src/lib/server/services/fam.ts
index 3051433..1573877 100644
--- a/frontend/src/lib/server/services/fam.ts
+++ b/frontend/src/lib/server/services/fam.ts
@@ -172,149 +172,6 @@ export async function weeklySummary(pb: any, famId: string) {
 	return { weekStart: ws, daysInWeek, summaries };
 }
 
-export async function eowPreview(pb: any, famId: string) {
-	const { payday, tz } = await famMeta(pb, famId);
-	const ws = weekStart(payday, tz);
-	const we = periodEnd('weekly', ws);
-
-	const [members, assigned, completions, configs, rewards] = await Promise.all([
-		pb.collection('users').getFullList({ filter: `famId = '${famId}' && role = 'child'` }),
-		pb.collection('assigned_chores').getFullList({ filter: `famId = '${famId}'` }),
-		pb.collection('completions').getFullList({ filter: `famId = '${famId}' && date >= '${ws}'` }),
-		pb
-			.collection('bonus_configs')
-			.getFullList({ filter: `famId = '${famId}' && status = 'active'` })
-			.catch(() => []),
-		pb.collection('rewards').getFullList({ filter: `famId = '${famId}'` }).catch(() => [])
-	]);
-
-	let rewardPointsList: any[] = [];
-	let rewardCashList: any[] = [];
-	try {
-		[rewardPointsList, rewardCashList] = await Promise.all([
-			pb.collection('rewards').getFullList({
-				filter: `famId = '${famId}' && rewardType = 'points' && status = 'claimed' && date >= '${ws}'`
-			}),
-			pb.collection('rewards').getFullList({
-				filter: `famId = '${famId}' && rewardType = 'cash' && status = 'claimed' && date >= '${ws}'`
-			})
-		]);
-	} catch {}
-
-	const assignedList = assigned;
-	const completionsList = completions;
-
-	const summaries = members.map((m: any) => {
-		const mc = completionsList.filter((c: any) => c.memberId === m.id);
-		const weekPoints = mc.reduce((sum: number, c: any) => {
-			const ch = assignedList.find((a: any) => a.id === c.assignedChoreId);
-			return sum + (ch?.type === 'points' ? Number(ch.value) : 0);
-		}, 0);
-		const weekMoney = mc.reduce((sum: number, c: any) => {
-			const ch = assignedList.find((a: any) => a.id === c.assignedChoreId);
-			return sum + (ch?.type === 'money' ? Number(ch.value) : 0);
-		}, 0);
-		const bonusPoints = rewardPointsList
-			.filter((r: any) => r.memberId === m.id)
-			.reduce((sum: number, r: any) => sum + Number(r.value), 0);
-		const bonusMoney = rewardCashList
-			.filter((r: any) => r.memberId === m.id)
-			.reduce((sum: number, r: any) => sum + Number(r.value), 0);
-		return {
-			memberId: m.id,
-			memberName: m.name || m.username || m.id.slice(0, 6),
-			memberColor: m.color,
-			pointsEarned: weekPoints + bonusPoints,
-			moneyEarned: weekMoney + bonusMoney,
-			choresCompleted: mc.length,
-			bonusEarned: bonusPoints
-		};
-	});
-
-	const predictedRewards: any[] = [];
-	const existingRewards = rewards;
-	for (const cfg of configs) {
-		if (cfg.type === 'manual') continue;
-		const pStart = cfg.period ? periodStart(cfg.period, payday, tz) : '';
-		const pEnd = cfg.period ? periodEnd(cfg.period, pStart) : '';
-		const periodCompletions = cfg.period
-			? completionsList.filter(
-					(c: any) => (c.date || '').slice(0, 10) >= pStart && (c.date || '').slice(0, 10) <= pEnd
-				)
-			: completionsList;
-		const cfgRewards = existingRewards.filter((r: any) => r.bonusConfigId === cfg.id);
-
-		const tryEval = (sourceComps: any[]) => {
-			if (cfg.type === 'threshold')
-				return sourceComps.reduce((sum: number, c: any) => {
-					const ch = assignedList.find((a: any) => a.id === c.assignedChoreId);
-					return sum + (ch?.type === 'points' ? Number(ch.value) : 0);
-				}, 0);
-			if (cfg.type === 'count') return sourceComps.length;
-			return 0;
-		};
-
-		if (cfg.target === 'individual') {
-			const targets = cfg.memberId ? members.filter((m: any) => m.id === cfg.memberId) : members;
-			for (const m of targets) {
-				if (cfgRewards.some((r: any) => r.memberId === m.id)) continue;
-				const current = tryEval(periodCompletions.filter((c: any) => c.memberId === m.id));
-				if (cfg.criteriaValue > 0 && current >= Number(cfg.criteriaValue))
-					predictedRewards.push({
-						config: cfg.name,
-						memberName: m.name || m.id.slice(0, 6),
-						type: cfg.rewardType,
-						value: Number(cfg.rewardValue) || 0,
-						detail: `${cfg.type} ${current}/${cfg.criteriaValue}`
-					});
-			}
-		} else if (cfg.target === 'collaborative') {
-			if (cfgRewards.length) continue;
-			const allIds = members.map((m: any) => m.id);
-			const teamComps = periodCompletions.filter((c: any) => allIds.includes(c.memberId));
-			const current = tryEval(teamComps);
-			if (cfg.criteriaValue > 0 && current >= Number(cfg.criteriaValue))
-				predictedRewards.push({
-					config: cfg.name,
-					memberName: 'Everyone',
-					type: cfg.rewardType,
-					value: Number(cfg.rewardValue) || 0,
-					detail: `${cfg.type} ${current}/${cfg.criteriaValue}`
-				});
-		} else if (cfg.target === 'competitive') {
-			if (cfgRewards.length) continue;
-			const scored = members.map((m: any) => ({
-				memberId: m.id,
-				name: m.name,
-				current: tryEval(periodCompletions.filter((c: any) => c.memberId === m.id))
-			}));
-			const qualified = scored.filter((st: any) => st.current >= Number(cfg.criteriaValue));
-			const eligible = qualified.length ? qualified : scored.filter((st: any) => st.current > 0);
-			const winner = eligible.sort((aa: any, bb: any) => bb.current - aa.current)[0];
-			if (winner)
-				predictedRewards.push({
-					config: cfg.name,
-					memberName: winner.name,
-					type: cfg.rewardType,
-					value: Number(cfg.rewardValue) || 0,
-					detail: `winner ${winner.current} pts`
-				});
-		}
-	}
-
-	const nextWeekStart = addDaysStr(ws, 7);
-
-	return {
-		simulateEow: true,
-		weekStart: ws,
-		weekEnd: we,
-		nextWeekStart,
-		summaries,
-		predictedRewards,
-		completionsThisWeek: completionsList.length
-	};
-}
-
 export async function releaseWeek(pb: any, famId: string) {
 	const { payday, paydayTime, tz } = await famMeta(pb, famId);
 	const fams = await pb.collection('fams').getFullList({ filter: `id = '${famId}'` });
diff --git a/frontend/src/lib/server/services/index.ts b/frontend/src/lib/server/services/index.ts
index ae667f7..1afd0fb 100644
--- a/frontend/src/lib/server/services/index.ts
+++ b/frontend/src/lib/server/services/index.ts
@@ -35,7 +35,6 @@ export function createServices(
 					...(timezone !== undefined ? { timezone } : {})
 				}),
 			weeklySummary: (famId: string) => famSvc.weeklySummary(pb, famId),
-			eowPreview: (famId: string) => famSvc.eowPreview(pb, famId),
 			payday: (famId: string) => famSvc.releaseWeek(pb, famId),
 			completeWeek: (famId: string) => famSvc.completeWeek(pb, famId),
 			getProfile: (famId: string) => famSvc.getProfile(pb, famId, uid),
diff --git a/frontend/src/lib/server/services/settings.ts b/frontend/src/lib/server/services/settings.ts
index b653651..65d5268 100644
--- a/frontend/src/lib/server/services/settings.ts
+++ b/frontend/src/lib/server/services/settings.ts
@@ -8,14 +8,13 @@ function resolveServerTz(tz?: string): string {
 export async function getSettings(pb: any, famId: string) {
 	const list = await pb.collection('settings').getFullList({ filter: `famId = '${famId}'` });
 	const s = list?.[0] || {};
-	return { simulateEow: !!s.simulateEow, webhookUrl: s.webhookUrl || '' };
+	return { webhookUrl: s.webhookUrl || '' };
 }
 
 export async function updateSettings(pb: any, famId: string, data: Record<string, unknown>) {
 	const list = await pb.collection('settings').getFullList({ filter: `famId = '${famId}'` });
 	const existing = list?.[0];
 	const patch: Record<string, unknown> = {};
-	if (data.simulateEow !== undefined) patch.simulateEow = !!data.simulateEow;
 	if (data.webhookUrl !== undefined) patch.webhookUrl = String(data.webhookUrl);
 	let s;
 	if (existing) {
@@ -23,5 +22,5 @@ export async function updateSettings(pb: any, famId: string, data: Record<string
 	} else {
 		s = await pb.collection('settings').create({ famId, ...patch });
 	}
-	return { simulateEow: !!s.simulateEow, webhookUrl: s.webhookUrl || '' };
+	return { webhookUrl: s.webhookUrl || '' };
 }
\ No newline at end of file
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index a562fc3..e5656bf 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -182,7 +182,6 @@ export interface Settings {
 	id: string;
 	famId: string;
 	webhookUrl?: string;
-	simulateEow?: boolean;
 }
 
 export interface ChatMessage {
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 2d0afda..b007cb4 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import Footer from '$lib/components/Footer.svelte';
-	import { homeIcon } from '$lib/components/icons';
+	import { homeIcon, checkCircleIcon, chevronRightIcon } from '$lib/components/icons';
 	import { readShortcut, shortcutTarget, type Shortcut } from '$lib/shortcut';
 
 	let shortcut = $state<(Shortcut & { target: string }) | null>(null);
@@ -29,7 +29,7 @@
 			</span>
 			<span class="return-text">
 				<span class="return-fam">{shortcut.famName}</span>
-				<span class="return-sub">Jump back in →</span>
+				<span class="return-sub">Jump back in {@html chevronRightIcon}</span>
 			</span>
 		</a>
 	{/if}
@@ -45,9 +45,9 @@
 					automatically — no spreadsheets, no nagging.
 				</p>
 				<ul class="hero-ticks">
-					<li>Set up in under a minute</li>
-					<li>Kids join with a simple invite code</li>
-					<li>Allowance lands on payday, automatically</li>
+					<li><span class="tick">{@html checkCircleIcon}</span>Set up in under a minute</li>
+					<li><span class="tick">{@html checkCircleIcon}</span>Kids join with a simple invite code</li>
+					<li><span class="tick">{@html checkCircleIcon}</span>Allowance lands on payday, automatically</li>
 				</ul>
 			</div>
 
@@ -56,7 +56,7 @@
 				<p class="card-sub">Free to get going. Takes about a minute.</p>
 				<a class="submit" href="/signup">Create my family</a>
 				<p class="card-alt">
-					<a href="/pricing">See pricing →</a>
+					<a href="/pricing">See pricing {@html chevronRightIcon}</a>
 				</p>
 				<p class="card-alt">
 					Already have a family? <a href="/login">Log in</a>
@@ -119,7 +119,7 @@
 		<div class="cta">
 			<p>Ready to make chores painless?</p>
 			<a class="cta-btn" href="/signup">Create your family</a>
-			<p class="card-alt"><a href="/pricing">or see pricing →</a></p>
+			<p class="card-alt"><a href="/pricing">or see pricing {@html chevronRightIcon}</a></p>
 		</div>
 	</section>
 </main>
@@ -230,10 +230,20 @@
 		gap: 0.6rem;
 	}
 	.hero-ticks li::before {
-		content: "✓";
-		color: #4338ca;
-		font-weight: 700;
+		content: "";
+	}
+	.hero-ticks .tick {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.15rem;
+		height: 1.15rem;
 		margin-right: 0.5rem;
+		color: #4338ca;
+	}
+	.hero-ticks .tick :global(svg) {
+		width: 1.1em;
+		height: 1.1em;
 	}
 
 	/* SIGNUP CARD */
diff --git a/frontend/src/routes/[fam]/[username]/+page.server.ts b/frontend/src/routes/[fam]/[username]/+page.server.ts
index 78e72b7..a2bc0d0 100644
--- a/frontend/src/routes/[fam]/[username]/+page.server.ts
+++ b/frontend/src/routes/[fam]/[username]/+page.server.ts
@@ -35,7 +35,7 @@ export async function load(event) {
 			s.crud.list('rewards', famId),
 			s.crud.list('bonus-configs', famId),
 			s.crud.list('completions', famId),
-			s.settings.get(famId).catch(() => ({ simulateEow: false, webhookUrl: '' }))
+			s.settings.get(famId)
 		]);
 		return {
 			role: 'parent',
@@ -105,8 +105,7 @@ export async function load(event) {
 			tallies: {} as Record<string, unknown>,
 			payday: chores.payday,
 			paydayTime: chores.paydayTime || '18:00',
-			timezone: chores.timezone || 'auto',
-			simulateEow: !!chores.simulateEow
+			timezone: chores.timezone || 'auto'
 		};
 	} catch {
 		return empty;
@@ -114,33 +113,6 @@ export async function load(event) {
 }
 
 export const actions = {
-	setEow: async (event) => {
-		if (!event.locals.user) throw redirect(303, '/login');
-		const famId = event.locals.user.famId;
-		const fd = await event.request.formData();
-		const on = fd.get('on') === 'true';
-		try {
-			const s = createServices(pbUser(event), event.locals.user);
-			const result = await s.settings.update(famId, { simulateEow: on });
-			return { simulateEow: result.simulateEow };
-		} catch (e) {
-			return { error: e instanceof Error ? e.message : 'Failed to update settings' };
-		}
-	},
-
-	previewEow: async (event) => {
-		if (!event.locals.user) throw redirect(303, '/login');
-		const famId = event.locals.user.famId;
-		try {
-			const s = createServices(pbUser(event), event.locals.user);
-			const preview = await s.fam.eowPreview(famId);
-			await s.settings.update(famId, { simulateEow: true });
-			return { preview, simulateEow: true };
-		} catch (e) {
-			return { error: e instanceof Error ? e.message : 'Failed to preview payday' };
-		}
-	},
-
 	claim: async (event) => {
 		if (!event.locals.user) throw redirect(303, '/login');
 		const famId = event.locals.user.famId;
diff --git a/frontend/src/routes/[fam]/[username]/+page.svelte b/frontend/src/routes/[fam]/[username]/+page.svelte
index 735b28a..c1f9a57 100644
--- a/frontend/src/routes/[fam]/[username]/+page.svelte
+++ b/frontend/src/routes/[fam]/[username]/+page.svelte
@@ -6,7 +6,22 @@
 	import { memberApi } from '$lib/client/api';
 	import { formatDDMMYY, formatHumanDate } from '$lib/format';
 	import { ViewHeader, CardGrid, Card, Button } from '$lib/components';
-	import { checkCircleIcon, revokeIcon } from '$lib/components/icons';
+	import {
+		checkCircleIcon,
+		revokeIcon,
+		todoIcon,
+		targetIcon,
+		sunIcon,
+		calendarIcon,
+		lockIcon,
+		clockIcon,
+		giftIcon,
+		handCoinsIcon,
+		moneyIcon,
+		coinsIcon,
+		chevronLeftIcon,
+		chevronRightIcon
+	} from '$lib/components/icons';
 	import type { AssignedChore, Completion, ChoreTemplate, BonusConfig, Reward } from '$lib/types';
 	import { handleOf } from '@shared/slugify';
 	import {
@@ -39,8 +54,6 @@
 	let summary = $state(data.summary);
 	let today = $derived(todayInTz(famTz));
 
-	let simulateEow = $state(!!(data.settings?.simulateEow ?? data.simulateEow));
-	let eowPreview = $state<any>(null);
 	let toast = $state('');
 
 	let parentMembers = $derived(famStore.initialized ? famStore.members : data.members || []);
@@ -496,9 +509,7 @@
 				const configured = Number(cfg.criteriaValue) || 0;
 				// Percent thresholds resolve to an absolute count against the
 				// period's potential (0 when no chores are assigned).
-				const target = isPercent
-					? Math.round((configured / 100) * totalPotential)
-					: configured;
+				const target = isPercent ? Math.round((configured / 100) * totalPotential) : configured;
 
 				// Display percent = completed ÷ period potential (not ÷ threshold),
 				// so a 1-of-7 week reads 14%, not 25%.
@@ -520,15 +531,15 @@
 						? totalPotential > 0 && ratio * 100 >= configured
 						: target > 0 && current >= target;
 
-			const unit = isPercent ? '% of chores' : isCount ? 'chores' : 'pts';
-			const targetLabel = `${configured} ${unit}`;
-			const targetPct = isPercent ? Math.min(100, Math.max(0, configured)) : 100;
-			return {
-				config: cfg,
-				current,
-				criteriaValue: configured,
-				targetPct,
-				targetLabel,
+				const unit = isPercent ? '% of chores' : isCount ? 'chores' : 'pts';
+				const targetLabel = `${configured} ${unit}`;
+				const targetPct = isPercent ? Math.min(100, Math.max(0, configured)) : 100;
+				return {
+					config: cfg,
+					current,
+					criteriaValue: configured,
+					targetPct,
+					targetLabel,
 					target,
 					totalPotential,
 					isPercent,
@@ -562,7 +573,7 @@
 		'December'
 	];
 	function headDate(): Date {
-		return new Date((isCurrentWeek ? todayIso : weekEnd) + 'T00:00:00');
+		return new Date(todayInTz(famTz) + 'T00:00:00');
 	}
 	function headDay(): number {
 		return headDate().getDate();
@@ -753,8 +764,8 @@
 							<div class="pocket-row">
 								{#if pm && pm.rewardValue}
 									<span
-										>Pocket money: £{Number(pm.rewardValue).toFixed(2)} · {pm.criteriaValue || 0}% of
-										chores</span
+										>Pocket money: £{Number(pm.rewardValue).toFixed(2)} · {pm.criteriaValue || 0}%
+										of chores</span
 									>
 								{:else}
 									<span class="unset">Pocket money: amount not set</span>
@@ -775,7 +786,9 @@
 												class="revoke-form"
 											>
 												<input type="hidden" name="id" value={c.id} />
-												<button type="submit" class="revoke-btn" title="Revoke">{@html revokeIcon}</button>
+												<button type="submit" class="revoke-btn" title="Revoke"
+													>{@html revokeIcon}</button
+												>
 											</form>
 										</li>
 									{/each}
@@ -848,8 +861,34 @@
 
 				<Card cols={1} title="Claims" accent="#f59e0b">
 					{#if claimableRewards().length === 0}
-						<p class="empty">No outstanding claims</p>
+						<div class="claims-empty">
+							{@html checkCircleIcon}<span>No outstanding claims</span>
+						</div>
 					{:else}
+						{@const familyOwed = claimableRewards()
+							.filter((r: any) => r.rewardType === 'cash')
+							.reduce((s: number, r: any) => s + Number(r.value), 0)}
+						{@const pendingCount = claimableRewards().filter(
+							(r: any) => r.status === 'requested'
+						).length}
+
+						<div class="claims-summary">
+							<div class="claims-stat">
+								<span class="claims-stat-icon">{@html handCoinsIcon}</span>
+								<div>
+									<div class="claims-stat-value">£{familyOwed.toFixed(2)}</div>
+									<div class="claims-stat-label">Total owed</div>
+								</div>
+							</div>
+							<div class="claims-stat pending">
+								<span class="claims-stat-icon pending">{@html clockIcon}</span>
+								<div>
+									<div class="claims-stat-value">{pendingCount}</div>
+									<div class="claims-stat-label">Awaiting approval</div>
+								</div>
+							</div>
+						</div>
+
 						{#each parentMembers as m}
 							{@const requested = memberRequested(m.id)}
 							{@const outstanding = memberOutstanding(m.id)}
@@ -867,32 +906,19 @@
 							{@const hasClaims = requested.length > 0 || outstanding.length > 0}
 							{#if hasClaims}
 								<div class="member-claims">
-									<h4><span class="dot" style="background:{m.color}"></span> {m.name}</h4>
-									{#if total > 0}
-										<p class="member-total">£{total.toFixed(2)} owed</p>
-									{/if}
-
-									<!-- Issue All: only when payday has run (rewards are requested) -->
-									{#if cashRequested.length > 0}
-										<form
-											class="issue-all-form"
-											method="POST"
-											action="?/issueAll"
-											use:enhance={() => {
-												return async (args: any) => handleResult(args);
-											}}
-										>
-											<input type="hidden" name="memberId" value={m.id} />
-											<Button type="submit" size="sm" variant="secondary"
-												>Issue All ({cashRequested.length}) · £{requestedTotal.toFixed(2)}</Button
-											>
-										</form>
-									{/if}
+									<div class="member-claims-head">
+										<span class="dot" style="background:{m.color}"></span>
+										<span class="member-name">{m.name}</span>
+										{#if total > 0}
+											<span class="member-owed">£{total.toFixed(2)} owed</span>
+										{/if}
+									</div>
 
 									{#if requested.length > 0}
 										<p class="section-label">Requested</p>
 										{#each requested as r}
 											<form
+												class="flex justify-between items-center"
 												method="POST"
 												action="?/claim"
 												use:enhance={() => {
@@ -900,13 +926,14 @@
 												}}
 											>
 												<input type="hidden" name="id" value={r.id} />
-												<div class="payment-row">
-													<span>{r.label}</span>
-													<div class="payment-right">
-														<span class="value">{rewardLabel(r)}</span>
-														<Button type="submit" size="sm" variant="primary">Issue</Button>
-													</div>
+												<div class="flex gap-4">
+													<span class="claim-icon"
+														>{@html r.rewardType === 'cash' ? coinsIcon : giftIcon}</span
+													>
+													<span class="claim-label">{r.label}</span>
+													<span class="claim-value">{rewardLabel(r)}</span>
 												</div>
+												<Button type="submit" size="sm" variant="primary">Issue</Button>
 											</form>
 										{/each}
 									{/if}
@@ -914,17 +941,38 @@
 									{#if outstanding.length > 0}
 										<p class="section-label">Outstanding</p>
 										{#each outstanding as r}
-											<div class="payment-row outstanding">
-												<span>{r.label}</span>
-												<span class="value">
+											<div class="claim-item outstanding">
+												<span class="claim-icon"
+													>{@html r.rewardType === 'cash' ? coinsIcon : giftIcon}</span
+												>
+												<span class="claim-label">{r.label}</span>
+												<span class="claim-value">
 													{rewardLabel(r)}
 													{#if paydayLocked(r)}
-														<span class="owe-locked">🔒 {formatHumanDate(r.settleDate)}</span>
+														<span class="owe-locked"
+															>{@html lockIcon} {formatHumanDate(r.settleDate)}</span
+														>
 													{/if}
 												</span>
 											</div>
 										{/each}
 									{/if}
+									<!-- Issue All: only when payday has run (rewards are requested) -->
+									{#if cashRequested.length > 0}
+										<form
+											class="issue-all-form flex items-center [&>button]:w-full mt-4"
+											method="POST"
+											action="?/issueAll"
+											use:enhance={() => {
+												return async (args: any) => handleResult(args);
+											}}
+										>
+											<input type="hidden" name="memberId" value={m.id} />
+											<Button type="submit" variant="success"
+												>Issue all · £{requestedTotal.toFixed(2)}</Button
+											>
+										</form>
+									{/if}
 								</div>
 							{/if}
 						{/each}
@@ -933,89 +981,6 @@
 			</CardGrid>
 		</div>
 	</div>
-	<CardGrid>
-		<Card cols={3} title="Debug: Preview payday" accent="#f59e0b">
-			<p class="eow-desc">
-				Read-only preview of what the payday rollover will settle for this week. Nothing here is
-				written.
-			</p>
-
-			<form
-				method="POST"
-				action="?/previewEow"
-				use:enhance={() => {
-					return async ({ result }) => {
-						const d = (result as any).data || {};
-						if (d.error) toast = d.error;
-						else {
-							eowPreview = d.preview;
-							simulateEow = !!d.simulateEow;
-						}
-					};
-				}}
-			>
-				<Button type="submit" size="sm" variant="secondary">Preview payday</Button>
-			</form>
-
-			{#if simulateEow}
-				<p class="eow-mode-on">
-					👀 Preview mode is ON — child dashboards show a "payday preview" notice.
-				</p>
-				<form
-					method="POST"
-					action="?/setEow"
-					use:enhance={() => {
-						return async ({ result }) => {
-							const d = (result as any).data || {};
-							if (d.error) toast = d.error;
-							else simulateEow = !!d.simulateEow;
-						};
-					}}
-				>
-					<input type="hidden" name="on" value="false" />
-					<Button type="submit" size="sm" variant="ghost">Turn off preview</Button>
-				</form>
-			{/if}
-
-			{#if eowPreview}
-				<div class="eow-out">
-					<p class="eow-range">
-						Week {formatDDMMYY(eowPreview.weekStart)} → {formatDDMMYY(eowPreview.weekEnd)}
-					</p>
-					<p class="eow-reset">
-						On payday these {eowPreview.completionsThisWeek} completions reset; week starts anew at
-						{formatDDMMYY(eowPreview.nextWeekStart)}.
-					</p>
-
-					<div class="eow-summaries">
-						{#each eowPreview.summaries as s}
-							<div class="eow-row">
-								<span class="eow-name">{s.memberName}</span>
-								<span class="eow-pts">{s.pointsEarned} pts</span>
-								<span class="eow-money">£{Number(s.moneyEarned || 0).toFixed(2)}</span>
-								<span class="eow-chores">{s.choresCompleted} chores</span>
-							</div>
-						{/each}
-					</div>
-
-					{#if eowPreview.predictedRewards.length}
-						<p class="eow-sec">Rewards that would be auto-created</p>
-						<div class="eow-rewards">
-							{#each eowPreview.predictedRewards as r}
-								<span class="eow-reward"
-									>{r.memberName} · {r.config} · {r.type === 'cash'
-										? '£' + Number(r.value).toFixed(2)
-										: r.value + ' pts'}</span
-								>
-							{/each}
-						</div>
-					{:else}
-						<p class="eow-none">No new rewards would be auto-created this week.</p>
-					{/if}
-				</div>
-			{/if}
-		</Card>
-	</CardGrid>
 {:else}
 	<!-- Child View -->
 	{#if loading}
@@ -1026,11 +991,6 @@
 			<Button href={`/${famSlug}/join/${username}`} variant="primary" size="md">Join</Button>
 		</p>
 	{:else}
-		{#if simulateEow}
-			<div class="preview-notice">
-				👀 <b>Payday preview</b> — your parent is checking this week's payday. Nothing is paid out yet.
-			</div>
-		{/if}
 		{#if owedCash > 0}
 			<div class="payday-banner">
 				🎉 You've earned <b>£{owedCash.toFixed(2)}</b> — go get it from your parent!
@@ -1038,7 +998,7 @@
 		{/if}
 		{#if showCountdown}
 			<div class="payday-countdown">
-				<div class="pd-icon">💰</div>
+				<div class="pd-icon">{@html moneyIcon}</div>
 				<div class="pd-body">
 					<p class="pd-title">Payday is today!</p>
 					<p class="pd-num">
@@ -1079,11 +1039,11 @@
 										const old = memberName;
 										memberName = nameInput;
 										try {
-const res = await fetch('/api/members', {
-											method: 'PATCH',
-											headers: { 'Content-Type': 'application/json' },
-											body: JSON.stringify({ name: nameInput })
-										});
+											const res = await fetch('/api/members', {
+												method: 'PATCH',
+												headers: { 'Content-Type': 'application/json' },
+												body: JSON.stringify({ name: nameInput })
+											});
 											if (!res.ok) memberName = old;
 										} catch {
 											memberName = old;
@@ -1138,11 +1098,11 @@ const res = await fetch('/api/members', {
 										memberColor = color;
 										showColorPicker = false;
 										try {
-const res = await fetch('/api/members', {
-											method: 'PATCH',
-											headers: { 'Content-Type': 'application/json' },
-											body: JSON.stringify({ color })
-										});
+											const res = await fetch('/api/members', {
+												method: 'PATCH',
+												headers: { 'Content-Type': 'application/json' },
+												body: JSON.stringify({ color })
+											});
 											if (!res.ok) memberColor = old;
 										} catch {
 											memberColor = old;
@@ -1159,16 +1119,16 @@ const res = await fetch('/api/members', {
 				<span class="hero-pct">{weeklyTotal > 0 ? weeklyPct : 0}%</span>
 				<div class="hero-bars">
 					<div class="bar-wrap hero-bar">
+						{#if pmTargetPct != null}
+							<div class="hero-target-fill" style="width:{pmTargetPct}%"></div>
+						{/if}
 						<div class="bar-fill hero-fill" style="width:{weeklyPct}%"></div>
+						{#if pmTargetPct != null}
+							<span class="hero-target-lbl" style="left:{pmTargetPct}%"
+								>{@html targetIcon} {pmTargetPct}%</span
+							>
+						{/if}
 					</div>
-					{#if pmTargetPct != null}
-						<div class="hero-target">
-							<div class="bar-wrap hero-target-bar">
-								<div class="bar-fill hero-target-fill" style="width:{pmTargetPct}%"></div>
-							</div>
-							<span class="hero-target-lbl">🎯 {pmTargetPct}%</span>
-						</div>
-					{/if}
 				</div>
 				<span class="hero-count">
 					{weeklyTotal > 0 ? `${weeklyDone}/${weeklyTotal} done` : 'no chores yet'}
@@ -1190,12 +1150,14 @@ const res = await fetch('/api/members', {
 
 			<nav class="hero-nav">
 				<button class="hero-nav-btn" onclick={() => navigate(-1)} aria-label="Previous week"
-					>◀</button
+					>{@html chevronLeftIcon}</button
 				>
 				<button class="hero-nav-btn cur" onclick={jumpToNow}
 					>{isCurrentWeek ? 'This week' : `${shortDate(weekStart)}`}</button
 				>
-				<button class="hero-nav-btn" onclick={() => navigate(1)} aria-label="Next week">▶</button>
+				<button class="hero-nav-btn" onclick={() => navigate(1)} aria-label="Next week"
+					>{@html chevronRightIcon}</button
+				>
 			</nav>
 		</header>
 
@@ -1223,7 +1185,7 @@ const res = await fetch('/api/members', {
 								{#if goal.config.rewardType === 'cash'}
 									£{Number(goal.config.rewardValue).toFixed(2)}
 								{:else if goal.config.rewardType === 'prize'}
-									🎁
+									{@html giftIcon}
 								{:else}
 									{goal.config.rewardValue} pts
 								{/if}
@@ -1247,12 +1209,12 @@ const res = await fetch('/api/members', {
 									>{Math.min(goal.current, goal.target)} / {goal.target}</span
 								>
 							{/if}
-						{#if goal.achieved}
-							<span class="goal-badge">✅ earned</span>
-						{:else}
-							<span class="goal-target-pill">🎯 {goal.targetLabel}</span>
-							<span class="goal-pct">{pct}%</span>
-						{/if}
+							{#if goal.achieved}
+								<span class="goal-badge">{@html checkCircleIcon} earned</span>
+							{:else}
+								<span class="goal-pct">{pct}%</span>
+								<span class="goal-target-pill">{@html targetIcon} {goal.targetLabel}</span>
+							{/if}
 						</div>
 					</div>
 				{/each}
@@ -1263,133 +1225,144 @@ const res = await fetch('/api/members', {
 		{#if accessDisabled}
 			<div class="kanban locked">
 				<div class="column col-daily">
-					<h2>🎯 Daily</h2>
-					<p class="empty">🔒 Access paused</p>
+					<h2>{@html sunIcon} Daily</h2>
+					<p class="empty">{@html lockIcon} Access paused</p>
 				</div>
 				<div class="column col-weekly">
-					<h2>📅 Weekly</h2>
-					<p class="empty">🔒</p>
+					<h2>{@html calendarIcon} Weekly</h2>
+					<p class="empty">{@html lockIcon}</p>
 				</div>
 				<div class="column col-done">
-					<h2>✅ Done</h2>
-					<p class="empty">🔒</p>
+					<h2>{@html checkCircleIcon} Done</h2>
+					<p class="empty">{@html lockIcon}</p>
 				</div>
 			</div>
 		{:else}
-		{#if celebrations.length > 0}
-			<div class="celebrations">
-				{#each celebrations as cel}
-					<div class="celebrate-card">
-						<span class="celebrate-emoji">{cel.emoji}</span>
-						<span class="celebrate-text"><strong>{cel.name}</strong> complete — amazing work!</span>
-						<button class="celebrate-close" onclick={() => dismissCelebrate(cel.id)}>✕</button>
-					</div>
-				{/each}
-			</div>
-		{/if}
-		<div class="kanban">
-			<div class="column col-daily">
-				<h2>🎯 Daily ({dailyPending.length})</h2>
-				{#if dailyPending.length === 0}
-					<p class="empty">All done!</p>
-				{:else}
-					{#each dailyPending as chore}
-						<button class="chore" onclick={() => toggle(chore)} disabled={!!togglingIds}>
-							<span class="checkbox">⬜</span>
-							<span class="chore-name">{choreName(chore)}</span>
-							<span class="chore-value">{chore.value} {chore.type}</span>
-						</button>
-					{/each}
-				{/if}
-			</div>
-			<div class="column col-weekly">
-				<h2>
-					📅 Weekly ({weeklyPending.length + memberTodos.filter((t) => !isTodoDone(t.id)).length})
-				</h2>
-				{#if weeklyPending.length === 0 && memberTodos.filter((t) => !isTodoDone(t.id)).length === 0}
-					<p class="empty">All done!</p>
-				{:else}
-					{#each weeklyPending as chore}
-						<button class="chore" onclick={() => toggle(chore)} disabled={!!togglingIds}>
-							<span class="checkbox">⬜</span>
-							<span class="chore-name">{choreName(chore)}</span>
-							<span class="chore-value">{chore.value} {chore.type}</span>
-						</button>
-					{/each}
-					{#each memberTodos.filter((t) => !isTodoDone(t.id)) as todo}
-						{@const urgency = todoUrgency(todo)}
-						{#if todo.type === 'emoji'}
-						<div
-							class="chore todo-chore todo-display"
-							class:todo-blue={urgency === 'blue'}
-							class:todo-green={urgency === 'green'}
-							class:todo-orange={urgency === 'orange'}
-							class:todo-red={urgency === 'red'}
-							class:todo-black={urgency === 'black'}
-						>
-							<span class="checkbox">📋</span>
-							<span class="todo-main">
-								<span class="chore-name">{todo.customName || 'Todo'}</span>
-								{#if todo.completeBy}
-									<span class="todo-due">due {formatHumanDate(todo.completeBy)}</span>
-								{/if}
-							</span>
-							<span class="todo-label">todo</span>
-							<span class="chore-value">{todo.emoji || '🎯'}</span>
-						</div>
-						{:else}
-							<button
-								class="chore todo-chore"
-								class:todo-blue={urgency === 'blue'}
-								class:todo-green={urgency === 'green'}
-								class:todo-orange={urgency === 'orange'}
-								class:todo-red={urgency === 'red'}
-								class:todo-black={urgency === 'black'}
-								onclick={() => toggle(todo)}
-								disabled={!!togglingIds}
+			{#if celebrations.length > 0}
+				<div class="celebrations">
+					{#each celebrations as cel}
+						<div class="celebrate-card">
+							<span class="celebrate-emoji">{cel.emoji}</span>
+							<span class="celebrate-text"
+								><strong>{cel.name}</strong> complete — amazing work!</span
 							>
-								<span class="checkbox">📋</span>
-								<span class="todo-main">
-									<span class="chore-name">{todo.customName || 'Todo'}</span>
-									{#if todo.completeBy}
-										<span class="todo-due">due {formatHumanDate(todo.completeBy)}</span>
-									{/if}
-								</span>
-								<span class="todo-label">todo</span>
-								<span class="chore-value">
-									{todo.type === 'money'
-										? `£${Number(todo.value).toFixed(2)}`
-										: `${todo.value} pts`}
-								</span>
-							</button>
-						{/if}
+							<button class="celebrate-close" onclick={() => dismissCelebrate(cel.id)}>✕</button>
+						</div>
 					{/each}
-				{/if}
-			</div>
-			<div class="column col-done">
-				<h2>✅ Done ({completedToday.length})</h2>
-				{#if completedToday.length === 0}
-					<p class="empty">Nothing yet</p>
-				{:else}
-					{#each completedToday as c}
-						{@const chore = assigned.find((a) => a.id === c.assignedChoreId)}
-						{#if chore}
-							<button class="chore done" onclick={() => toggle(chore)} disabled={!!togglingIds}>
-								<span class="checkbox">✅</span>
+				</div>
+			{/if}
+			<div class="kanban">
+				<div class="column col-daily">
+					<h2>{@html sunIcon} Daily ({dailyPending.length})</h2>
+					{#if dailyPending.length === 0}
+						<p class="empty">All done!</p>
+					{:else}
+						{#each dailyPending as chore}
+							<button class="chore" onclick={() => toggle(chore)} disabled={!!togglingIds}>
+								<span class="checkbox empty"></span>
 								<span class="chore-name">{choreName(chore)}</span>
 								<span class="chore-value">{chore.value} {chore.type}</span>
 							</button>
-						{/if}
-					{/each}
-				{/if}
+						{/each}
+					{/if}
+				</div>
+				<div class="column col-weekly">
+					<h2>
+						{@html calendarIcon} Weekly ({weeklyPending.length +
+							memberTodos.filter((t) => !isTodoDone(t.id)).length})
+					</h2>
+					{#if weeklyPending.length === 0 && memberTodos.filter((t) => !isTodoDone(t.id)).length === 0}
+						<p class="empty">All done!</p>
+					{:else}
+						{#each weeklyPending as chore}
+							<button class="chore" onclick={() => toggle(chore)} disabled={!!togglingIds}>
+								<span class="checkbox empty"></span>
+								<span class="chore-name">{choreName(chore)}</span>
+								<span class="chore-value">{chore.value} {chore.type}</span>
+							</button>
+						{/each}
+						{#each memberTodos.filter((t) => !isTodoDone(t.id)) as todo}
+							{@const urgency = todoUrgency(todo)}
+							{#if todo.type === 'emoji'}
+								<div
+									class="chore todo-chore todo-display"
+									class:todo-blue={urgency === 'blue'}
+									class:todo-green={urgency === 'green'}
+									class:todo-orange={urgency === 'orange'}
+									class:todo-red={urgency === 'red'}
+									class:todo-black={urgency === 'black'}
+								>
+									<span class="checkbox">{@html todoIcon}</span>
+									<span class="todo-main">
+										<span class="chore-name">{todo.customName || 'Todo'}</span>
+									{#if todo.completeBy}
+										{#if todo.completeBy === todayChild}
+											<span class="todo-due due-today">DUE TODAY!</span>
+										{:else}
+											<span class="todo-due">due {formatHumanDate(todo.completeBy)}</span>
+										{/if}
+									{/if}
+									</span>
+									<span class="todo-label">todo</span>
+									<span class="chore-value">{todo.emoji || '🎯'}</span>
+								</div>
+							{:else}
+								<button
+									class="chore todo-chore"
+									class:todo-blue={urgency === 'blue'}
+									class:todo-green={urgency === 'green'}
+									class:todo-orange={urgency === 'orange'}
+									class:todo-red={urgency === 'red'}
+									class:todo-black={urgency === 'black'}
+									onclick={() => toggle(todo)}
+									disabled={!!togglingIds}
+								>
+									<span class="checkbox">{@html todoIcon}</span>
+									<span class="todo-main">
+										<span class="chore-name">{todo.customName || 'Todo'}</span>
+									{#if todo.completeBy}
+										{#if todo.completeBy === todayChild}
+											<span class="todo-due due-today">DUE TODAY!</span>
+										{:else}
+											<span class="todo-due">due {formatHumanDate(todo.completeBy)}</span>
+										{/if}
+									{/if}
+									</span>
+									<span class="todo-label">todo</span>
+									<span class="chore-value">
+										{todo.type === 'money'
+											? `£${Number(todo.value).toFixed(2)}`
+											: `${todo.value} pts`}
+									</span>
+								</button>
+							{/if}
+						{/each}
+					{/if}
+				</div>
+				<div class="column col-done">
+					<h2>{@html checkCircleIcon} Done ({completedToday.length})</h2>
+					{#if completedToday.length === 0}
+						<p class="empty">Nothing yet</p>
+					{:else}
+						{#each completedToday as c}
+							{@const chore = assigned.find((a) => a.id === c.assignedChoreId)}
+							{#if chore}
+								<button class="chore done" onclick={() => toggle(chore)} disabled={!!togglingIds}>
+									<span class="checkbox">{@html checkCircleIcon}</span>
+									<span class="chore-name">{choreName(chore)}</span>
+									<span class="chore-value">{chore.value} {chore.type}</span>
+								</button>
+							{/if}
+						{/each}
+					{/if}
+				</div>
 			</div>
-		</div>
 		{/if}
 
 		<!-- WALLET / CLAIMS -->
 		<div class="wallet">
 			<div class="wallet-top">
-				<span class="wallet-lbl">💰 Wallet</span>
+				<span class="wallet-lbl">{@html moneyIcon} Wallet</span>
 				{#if allTimeCash > 0 || allTimePoints > 0}
 					<span class="wallet-total">
 						<span class="wallet-cash">£{allTimeCash.toFixed(2)}</span>
@@ -1410,17 +1383,18 @@ const res = await fetch('/api/members', {
 								{#if r.rewardType === 'cash'}
 									£{Number(r.value).toFixed(2)}
 								{:else if r.rewardType === 'prize'}
-									🎁
+									{@html giftIcon}
 								{:else}
 									{r.value} pts
 								{/if}
 							</span>
 							{#if r.rewardType === 'points'}
-								<span class="wr-pending">✓ credited</span>
+								<span class="wr-pending">{@html checkCircleIcon} credited</span>
 							{:else if isReq}
-								<span class="wr-pending">⏳ waiting</span>
+								<span class="wr-pending">{@html clockIcon} waiting</span>
 							{:else if paydayLocked(r)}
-								<span class="wr-pending wr-locked">🔒 pays out {formatHumanDate(r.settleDate)}</span
+								<span class="wr-pending wr-locked"
+									>{@html lockIcon} pays out {formatHumanDate(r.settleDate)}</span
 								>
 							{:else}
 								<button
@@ -1662,58 +1636,162 @@ const res = await fetch('/api/members', {
 	}
 
 	.member-claims {
-		margin-bottom: 0.75rem;
+		margin-bottom: 1rem;
+		padding: 0.75rem;
+		background: #fafafa;
+		border: 1px solid #f1f1f3;
+		border-radius: 10px;
 	}
 	.member-claims:last-child {
 		margin-bottom: 0;
 	}
-	.member-claims h4 {
-		display: flex;
-		align-items: center;
-		gap: 0.3rem;
-		margin: 0 0 0.2rem;
-		font-size: 0.85rem;
-	}
-	.payment-row {
-		display: flex;
-		justify-content: space-between;
-		font-size: 0.8rem;
-		padding: 0.1rem 0;
-	}
-	.payment-row .value {
-		font-weight: 600;
-		color: #059669;
-	}
-	.payment-right {
+	.member-claims-head {
 		display: flex;
 		align-items: center;
 		gap: 0.4rem;
+		margin-bottom: 0.5rem;
+	}
+	.member-claims-head .dot {
+		width: 10px;
+		height: 10px;
+		border-radius: 50%;
+		flex-shrink: 0;
+	}
+	.member-name {
+		font-weight: 600;
+		font-size: 0.9rem;
+	}
+	.member-owed {
+		font-size: 0.72rem;
+		font-weight: 600;
+		color: #2563eb;
+		background: #eff6ff;
+		border: 1px solid #dbeafe;
+		padding: 0.1rem 0.45rem;
+		border-radius: 999px;
+	}
+	.issue-all-form {
+		display: flex;
+		justify-content: flex-end;
+	}
+	.section-label {
+		font-size: 0.7rem;
+		font-weight: 700;
+		color: #9ca3af;
+		margin: 0.6rem 0 0.3rem;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+	}
+	.claim-item {
+		margin-bottom: 0.3rem;
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		font-size: 0.8rem;
+		padding: 0.4rem 0.5rem;
+		background: #fff;
+		border: 1px solid #eef0f3;
+		border-radius: 8px;
+	}
+	.claim-item.outstanding {
+		background: #f8f9fb;
+		opacity: 0.75;
+	}
+	.claim-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: #f59e0b;
+		flex-shrink: 0;
+	}
+	.claim-label {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.claim-value {
+		font-weight: 600;
+		color: #059669;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		flex-shrink: 0;
+	}
+	.owe-locked {
+		font-weight: 500;
+		color: #9ca3af;
+		font-size: 0.72rem;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.2rem;
+	}
+	.claim-item :global(button) {
+		margin-left: auto;
+		flex-shrink: 0;
+	}
+	.claims-summary {
+		display: flex;
+		gap: 0.6rem;
+		margin-bottom: 0.9rem;
+	}
+	.claims-stat {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		gap: 0.55rem;
+		padding: 0.6rem 0.7rem;
+		background: linear-gradient(135deg, #fffbeb, #fff);
+		border: 1px solid #fde68a;
+		border-radius: 10px;
+	}
+	.claims-stat.pending {
+		background: linear-gradient(135deg, #eef2ff, #fff);
+		border-color: #c7d2fe;
+	}
+	.claims-stat-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 30px;
+		height: 30px;
+		border-radius: 8px;
+		background: #f59e0b;
+		color: #fff;
+		flex-shrink: 0;
+	}
+	.claims-stat-icon.pending {
+		background: #6366f1;
+	}
+	.claims-stat-value {
+		font-size: 1rem;
+		font-weight: 700;
+		line-height: 1.1;
+		color: #1f2937;
+	}
+	.claims-stat-label {
+		font-size: 0.68rem;
+		color: #6b7280;
+	}
+	.claims-stat.pending .claims-stat-label {
+		color: #4338ca;
+	}
+	.claims-empty {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		color: #059669;
+		font-size: 0.85rem;
+		font-weight: 500;
+		padding: 0.5rem 0;
 	}
-
 	.error {
 		color: #dc2626;
 		padding: 1rem;
 		text-align: center;
 	}
 
-	.section-label {
-		font-size: 0.75rem;
-		font-weight: 600;
-		color: #6b7280;
-		margin: 0.5rem 0 0.25rem;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-	}
-	.member-total {
-		font-size: 0.85rem;
-		font-weight: 600;
-		color: #2563eb;
-		margin: 0 0 0.25rem;
-	}
-	.payment-row.outstanding {
-		opacity: 0.6;
-	}
-
 	.color-dot {
 		display: inline-block;
 		width: 18px;
@@ -1843,46 +1921,42 @@ const res = await fetch('/api/members', {
 	}
 	.hero-bar {
 		flex: 1;
-		height: 12px;
+		height: 16px;
 		background: rgba(255, 255, 255, 0.28);
+		border-radius: 8px;
+		position: relative;
 	}
 	.hero-fill {
-		background: #fff;
+		position: relative;
+		z-index: 2;
+		height: 100%;
+		background: #c7d2fe;
+		border-radius: 8px;
 	}
 	.hero-bars {
 		flex: 1;
-		display: flex;
-		flex-direction: column;
-		gap: 0.3rem;
-		justify-content: center;
 		min-width: 0;
 	}
-	.hero-bars .hero-bar {
-		flex: none;
-		width: 100%;
-	}
-	.hero-target {
-		display: flex;
-		align-items: center;
-		gap: 0.45rem;
-	}
-	.hero-target-bar {
-		flex: 1;
-		height: 8px;
-		background: rgba(255, 255, 255, 0.22);
-	}
 	.hero-target-fill {
-		height: 100%;
-		background: #fde047;
-		border-radius: 4px;
-		transition: width 0.3s ease;
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		z-index: 1;
+		background: rgba(253, 224, 71, 0.45);
+		border-radius: 8px;
 	}
 	.hero-target-lbl {
+		position: absolute;
+		left: 0;
+		bottom: 100%;
+		transform: translateX(-50%);
+		margin-bottom: 4px;
 		font-size: 0.7rem;
 		font-weight: 700;
 		color: #fde047;
 		white-space: nowrap;
-		flex-shrink: 0;
+		z-index: 4;
 	}
 	.hero-count {
 		font-size: 0.8rem;
@@ -1998,11 +2072,16 @@ const res = await fetch('/api/members', {
 
 	/* ── Goals (threshold bonus progress) ── */
 	.goals {
-		display: flex;
-		flex-direction: column;
+		display: grid;
+		grid-template-columns: 1fr;
 		gap: 0.6rem;
 		margin-bottom: 1rem;
 	}
+	@media (min-width: 1024px) {
+		.goals {
+			grid-template-columns: 1fr 1fr;
+		}
+	}
 	.goal-card {
 		background: #fff;
 		border: 1px solid #e5e7eb;
@@ -2027,7 +2106,7 @@ const res = await fetch('/api/members', {
 		color: #1f2937;
 	}
 	.goal-reward {
-		font-size: 0.85rem;
+		font-size: 1.3rem;
 		font-weight: 800;
 		color: #6366f1;
 		white-space: nowrap;
@@ -2055,22 +2134,29 @@ const res = await fetch('/api/members', {
 		top: -4px;
 		bottom: -4px;
 		width: 3px;
-		background: #ef4444;
+		background: #10b981;
 		border-radius: 2px;
 		transform: translateX(-50%);
 		z-index: 2;
 		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8);
 	}
 	.goal-target-pill {
-		font-size: 0.72rem;
-		font-weight: 700;
-		color: #ef4444;
-		background: #fef2f2;
-		border: 1px solid #fecaca;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		font-size: 1rem;
+		font-weight: 800;
+		color: #059669;
+		background: #f0fdf4;
+		border: 1px solid #bbf7d0;
 		border-radius: 999px;
-		padding: 1px 8px;
+		padding: 3px 12px;
 		white-space: nowrap;
 	}
+	.goal-target-pill :global(svg) {
+		width: 16px;
+		height: 16px;
+	}
 	.goal-achieved .goal-bar-fill {
 		background: linear-gradient(90deg, #10b981, #34d399);
 	}
@@ -2233,6 +2319,21 @@ const res = await fetch('/api/members', {
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+	.todo-due.due-today {
+		color: #dc2626;
+		font-weight: 700;
+		letter-spacing: 0.03em;
+		animation: due-today-pulse 1.4s ease-in-out infinite;
+	}
+	@keyframes due-today-pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.55;
+		}
+	}
 	.todo-display {
 		cursor: default;
 		opacity: 0.85;
@@ -2257,6 +2358,20 @@ const res = await fetch('/api/members', {
 		font-size: 1rem;
 		flex-shrink: 0;
 	}
+	.checkbox :global(svg) {
+		width: 1.15em;
+		height: 1.15em;
+		display: inline-block;
+		vertical-align: -0.2em;
+	}
+	.checkbox.empty {
+		display: inline-block;
+		width: 1.15em;
+		height: 1.15em;
+		border: 2px solid currentColor;
+		border-radius: 4px;
+		vertical-align: -0.2em;
+	}
 	.chore-name {
 		flex: 1;
 		min-width: 0;
@@ -2291,6 +2406,12 @@ const res = await fetch('/api/members', {
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 	}
+	.wallet-lbl :global(svg) {
+		width: 1em;
+		height: 1em;
+		vertical-align: -0.15em;
+		margin-right: 0.3em;
+	}
 	.wallet-total {
 		display: flex;
 		gap: 0.4rem;
@@ -2344,6 +2465,12 @@ const res = await fetch('/api/members', {
 		font-weight: 600;
 		color: #6b7280;
 	}
+	.wr-pending :global(svg) {
+		width: 0.95em;
+		height: 0.95em;
+		vertical-align: -0.15em;
+		margin-right: 0.25em;
+	}
 	.wr-locked {
 		color: #d97706;
 	}
@@ -2367,10 +2494,6 @@ const res = await fetch('/api/members', {
 		filter: brightness(1.1);
 	}
 
-	.eow-desc {
-		margin: 0 0 0.6rem;
-	}
-
 	.eow-mode-on {
 		display: flex;
 		align-items: center;
@@ -2384,17 +2507,6 @@ const res = await fetch('/api/members', {
 		font-size: 0.85rem;
 	}
 
-	.preview-notice {
-		margin-bottom: 1rem;
-		padding: 0.85rem 1.1rem;
-		border-radius: 12px;
-		border: 1px dashed #f59e0b;
-		background: #fffbeb;
-		color: #92400e;
-		font-size: 0.95rem;
-		line-height: 1.4;
-	}
-
 	.payday-banner {
 		display: flex;
 		align-items: center;
@@ -2449,70 +2561,4 @@ const res = await fetch('/api/members', {
 		font-size: 0.8rem;
 		opacity: 0.85;
 	}
-	.eow-out {
-		margin-top: 0.75rem;
-		border-top: 1px dashed #e5e7eb;
-		padding-top: 0.6rem;
-	}
-	.eow-range,
-	.eow-reset {
-		margin: 0.2rem 0;
-		font-size: 0.85rem;
-	}
-	.eow-reset {
-		color: #6b7280;
-		font-size: 0.8rem;
-	}
-	.eow-summaries {
-		display: flex;
-		flex-direction: column;
-		gap: 0.3rem;
-		margin: 0.6rem 0;
-	}
-	.eow-row {
-		display: flex;
-		align-items: center;
-		gap: 0.6rem;
-		padding: 0.35rem 0.5rem;
-		border: 1px solid #eeeff2;
-		border-radius: 8px;
-		background: #fafbfc;
-		font-size: 0.85rem;
-	}
-	.eow-name {
-		flex: 1;
-		font-weight: 600;
-	}
-	.eow-pts {
-		color: #7c3aed;
-		font-weight: 700;
-	}
-	.eow-money {
-		color: #059669;
-		font-weight: 700;
-	}
-	.eow-chores {
-		color: #6b7280;
-	}
-	.eow-sec {
-		font-size: 0.85rem;
-		font-weight: 700;
-		margin: 0.6rem 0 0.3rem;
-	}
-	.eow-rewards {
-		display: flex;
-		flex-direction: column;
-		gap: 0.35rem;
-	}
-	.eow-reward {
-		font-size: 0.8rem;
-		padding: 0.3rem 0.55rem;
-		background: #eef2ff;
-		color: #4338ca;
-		border-radius: 6px;
-	}
-	.eow-none {
-		font-size: 0.8rem;
-		color: #9ca3af;
-	}
 </style>
diff --git a/frontend/src/routes/[fam]/[username]/chores/+page.svelte b/frontend/src/routes/[fam]/[username]/chores/+page.svelte
index ce3ffef..f65b108 100644
--- a/frontend/src/routes/[fam]/[username]/chores/+page.svelte
+++ b/frontend/src/routes/[fam]/[username]/chores/+page.svelte
@@ -4,7 +4,7 @@
 	import { famStore } from '$lib/stores/fam.svelte';
 	import { ViewHeader, CardGrid, Card } from '$lib/components';
 	import TemplateIcon from '$lib/components/TemplateIcon.svelte';
-	import { choresIcon, todoIcon } from '$lib/components/icons';
+	import { choresIcon, todoIcon, checkCircleIcon } from '$lib/components/icons';
 	import { formatHumanDate } from '$lib/format';
 	import { TEMPLATE_COLORS, ICON_NAMES, accentBg, outlineColor } from '$lib/templateIcons';
 	import type { ChoreTemplate, AssignedChore, Member, Season, Completion } from '$lib/types';
@@ -48,8 +48,26 @@
 
 	// Curated celebration emojis for todos
 	const EMOJI_CHOICES = [
-		'🎉', '⭐', '🏆', '💪', '🧹', '📚', '🦸', '✨', '🌟', '🥇',
-		'🎯', '💚', '🚀', '🦄', '🌈', '🍀', '🎨', '🎸', '⚽', '🍰'
+		'🎉',
+		'⭐',
+		'🏆',
+		'💪',
+		'🧹',
+		'📚',
+		'🦸',
+		'✨',
+		'🌟',
+		'🥇',
+		'🎯',
+		'💚',
+		'🚀',
+		'🦄',
+		'🌈',
+		'🍀',
+		'🎨',
+		'🎸',
+		'⚽',
+		'🍰'
 	];
 
 	let editFreq = $state('daily');
@@ -68,9 +86,11 @@
 
 	// Platform-owned templates only — families assign these, they don't create.
 	let templates = $derived(
-		((famStore.initialized ? (famStore.templates as ChoreTemplate[]) : (data.templates as ChoreTemplate[])) || []).filter(
-			(t: ChoreTemplate) => t.global
-		)
+		(
+			(famStore.initialized
+				? (famStore.templates as ChoreTemplate[])
+				: (data.templates as ChoreTemplate[])) || []
+		).filter((t: ChoreTemplate) => t.global)
 	);
 	let members = $state(
 		famStore.initialized ? (famStore.members as Member[]) : (data.members as Member[]) || []
@@ -85,7 +105,7 @@
 	// Only active seasons are selectable for assignment / filtering.
 	let activeSeasons = $derived((seasons || []).filter((s) => s.active !== false));
 	let completions = $state((data.completions as Completion[]) || []);
-
+	// $effect(() => console.log(seasons, activeSeasons));
 	let filteredAssigned = $derived(
 		seasonFilter === 'all' ? assigned : assigned.filter((a) => a.seasonIds?.includes(seasonFilter))
 	);
@@ -366,7 +386,10 @@
 					</h3>
 
 					<!-- TODOS accordion wrapper -->
-					<div class="accordion-wrapper accordion-todos" class:open={accordionState[m.id]?.todos ?? true}>
+					<div
+						class="accordion-wrapper accordion-todos"
+						class:open={accordionState[m.id]?.todos ?? true}
+					>
 						<button class="accordion-head" onclick={() => toggleAccordion(m.id, 'todos')}>
 							<span class="accordion-title">
 								<span class="accordion-icon">{@html todoIcon}</span>
@@ -376,7 +399,9 @@
 								>{@html (accordionState[m.id]?.todos ?? true) ? CHEVRON_UP : CHEVRON_DOWN}</span
 							>
 						</button>
-						<span class="accordion-count" style="background:{m.color}">{todosForMember(m.id).length}</span>
+						<span class="accordion-count" style="background:{m.color}"
+							>{todosForMember(m.id).length}</span
+						>
 						{#if accordionState[m.id]?.todos ?? true}
 							<div class="accordion-body">
 								{#each sortedTodosForMember(m.id) as a}
@@ -414,7 +439,8 @@
 											</div>
 										</div>
 										{#if completed}
-											<span class="todo-completed-badge">✅ TBC completed</span>
+											<span class="todo-completed-badge">{@html checkCircleIcon} TBC completed</span
+											>
 										{:else}
 											<button
 												class="del-btn"
@@ -440,7 +466,10 @@
 					</div>
 
 					<!-- CHORES accordion wrapper -->
-					<div class="accordion-wrapper accordion-chores" class:open={accordionState[m.id]?.chores ?? true}>
+					<div
+						class="accordion-wrapper accordion-chores"
+						class:open={accordionState[m.id]?.chores ?? true}
+					>
 						<button class="accordion-head" onclick={() => toggleAccordion(m.id, 'chores')}>
 							<span class="accordion-title">
 								<span class="accordion-icon">{@html choresIcon}</span>
@@ -450,7 +479,9 @@
 								>{@html (accordionState[m.id]?.chores ?? true) ? CHEVRON_UP : CHEVRON_DOWN}</span
 							>
 						</button>
-						<span class="accordion-count" style="background:{m.color}">{assignedForMember(m.id).length}</span>
+						<span class="accordion-count" style="background:{m.color}"
+							>{assignedForMember(m.id).length}</span
+						>
 						{#if accordionState[m.id]?.chores ?? true}
 							<div class="accordion-body">
 								{#each assignedForMember(m.id) as a}
@@ -460,14 +491,20 @@
 										onclick={() => openEdit(a)}
 										role="button"
 										tabindex="0"
-										style="border-left-color:{outlineColor(a.color)}; background:{accentBg(a.color)}"
+										style="border-left-color:{outlineColor(a.color)}; background:{accentBg(
+											a.color
+										)}"
 									>
 										<div class="card-body">
 											<TemplateIcon name={a.icon} size={16} color={outlineColor(a.color)} />
 											<strong>{a.customName || tName}</strong>
 											<span class="badge">{a.frequency}</span>
 											{#each a.seasonIds || [] as sid}
-												<span class="season-dot" title={seasonName(sid)} style="background:{seasonColor(sid)}"></span>
+												<span
+													class="season-dot"
+													title={seasonName(sid)}
+													style="background:{seasonColor(sid)}"
+												></span>
 											{/each}
 											{#if (a.seasonIds || []).length === 0}
 												<span class="badge season muted">All year</span>
@@ -509,14 +546,16 @@
 </CardGrid>
 
 <!-- Season pill selector (reused by assign + edit modals) -->
-{#snippet seasonPills(list: Season[], selected: string[], set: (v: string[]) => void)}
-	<div class="season-pills">
+{#snippet seasonPills(list: Season[] = [], selected: string[] = [], set: (v: string[]) => void)}
+	<div class="season-pills" role="radiogroup" aria-label="Seasons">
 		<button
 			type="button"
 			class="season-pill"
 			class:selected={selected.length === 0}
 			style="--pill:#9ca3af"
-			onclick={() => set([])}>All year</button
+			role="radio"
+			aria-checked={selected.length === 0}
+			onclick={() => set([])}>Any</button
 		>
 		{#each list as s}
 			<button
@@ -524,6 +563,8 @@
 				class="season-pill"
 				class:selected={selected[0] === s.id}
 				style="--pill:{s.color}"
+				role="radio"
+				aria-checked={selected[0] === s.id}
 				onclick={() => set([s.id])}>{s.name}</button
 			>
 		{/each}
@@ -532,16 +573,25 @@
 
 <!-- Assign from Template Modal -->
 {#if assignModal}
-	<div class="overlay" onclick={(e) => { if (e.target === e.currentTarget) assignModal = null; }} role="presentation">
+	<div
+		class="overlay"
+		onclick={(e) => {
+			if (e.target === e.currentTarget) assignModal = null;
+		}}
+		role="presentation"
+	>
 		<div class="modal" onclick={(e) => e.stopPropagation()} role="dialog">
 			<h3>Assign: {assignModal.t.name}</h3>
 			<p class="hint">
-				Copies this platform template into {members.find((m) => m.id === assignModal?.memberId)?.name}'s
-				chores. Amend, then Assign.
+				Copies this platform template into {members.find((m) => m.id === assignModal?.memberId)
+					?.name}'s chores. Amend, then Assign.
 			</p>
 			<label>Name <input bind:value={assignName} placeholder="Task name" /></label>
 			<label
-				>Description <input bind:value={assignDescription} placeholder="Optional description" /></label
+				>Description <input
+					bind:value={assignDescription}
+					placeholder="Optional description"
+				/></label
 			>
 			<div class="color-field">
 				<span class="field-label">Colour</span>
@@ -556,7 +606,8 @@
 								? '#e5e7eb'
 								: c.value}"
 							title={c.label}
-							onclick={() => (assignColor = c.value)}></button>
+							onclick={() => (assignColor = c.value)}
+						></button>
 					{/each}
 				</div>
 			</div>
@@ -589,7 +640,7 @@
 			</label>
 			<div class="season-field">
 				<span class="field-label">Seasons</span>
-					<seasonPills activeSeasons selected={assignSeasonIds} set={(v: string[]) => (assignSeasonIds = v)} />
+				{@render seasonPills(seasons, assignSeasonIds, (v: string[]) => (assignSeasonIds = v))}
 			</div>
 			<div class="modal-actions">
 				<button type="button" onclick={() => (assignModal = null)}>Cancel</button>
@@ -601,7 +652,13 @@
 
 <!-- Edit Assignment Modal -->
 {#if showEditModal && editingAssignment}
-	<div class="overlay" onclick={(e) => { if (e.target === e.currentTarget) closeEdit(); }} role="presentation">
+	<div
+		class="overlay"
+		onclick={(e) => {
+			if (e.target === e.currentTarget) closeEdit();
+		}}
+		role="presentation"
+	>
 		<div class="modal" onclick={(e) => e.stopPropagation()} role="dialog">
 			<h3>
 				{#if editingAssignment.isTodo}
@@ -619,7 +676,11 @@
 				</label>
 				<label
 					>Description
-					<input name="description" bind:value={editDescription} placeholder="Optional description" /></label
+					<input
+						name="description"
+						bind:value={editDescription}
+						placeholder="Optional description"
+					/></label
 				>
 
 				{#if editingAssignment.isTodo}
@@ -639,7 +700,14 @@
 					{:else if editType === 'money'}
 						<label>
 							Cash amount (£)
-							<input name="value" type="number" step="0.01" min="0.01" bind:value={editValue} required />
+							<input
+								name="value"
+								type="number"
+								step="0.01"
+								min="0.01"
+								bind:value={editValue}
+								required
+							/>
 						</label>
 					{:else}
 						<input type="hidden" name="emoji" value={editEmoji} />
@@ -648,7 +716,8 @@
 							<button
 								type="button"
 								class="link-btn"
-								onclick={() => (showTodoEmojiPicker = !showTodoEmojiPicker)}>
+								onclick={() => (showTodoEmojiPicker = !showTodoEmojiPicker)}
+							>
 								{showTodoEmojiPicker ? 'Hide' : 'Choose'}
 							</button>
 						</div>
@@ -691,20 +760,21 @@
 										? '#e5e7eb'
 										: c.value}"
 									title={c.label}
-									onclick={() => (editColor = c.value)}></button>
+									onclick={() => (editColor = c.value)}
+								></button>
 							{/each}
 						</div>
 						<input type="hidden" name="color" value={editColor} />
 					</div>
-					<label
-						><span class="icon-preview"
-							><TemplateIcon name={editIcon} size={22} color={outlineColor(editColor)} /></span
-						>
-						<select name="icon" bind:value={editIcon}>
-							<option value="">None</option>
-							{#each ICON_NAMES as n}<option value={n}>{n}</option>{/each}
-						</select>
-					</label>
+				<label class="icon-row"
+					><span class="icon-preview"
+						><TemplateIcon name={editIcon} size={22} color={outlineColor(editColor)} /></span
+					>
+					<select name="icon" bind:value={editIcon}>
+						<option value="">None</option>
+						{#each ICON_NAMES as n}<option value={n}>{n}</option>{/each}
+					</select>
+				</label>
 					<label>
 						Frequency
 						<select name="frequency" bind:value={editFreq}>
@@ -725,7 +795,7 @@
 					</label>
 					<div class="season-field">
 						<span class="field-label">Seasons</span>
-						<seasonPills activeSeasons selected={editSeasonIds} set={(v: string[]) => (editSeasonIds = v)} />
+						{@render seasonPills(seasons, editSeasonIds, (v: string[]) => (editSeasonIds = v))}
 					</div>
 				{/if}
 				<div class="modal-actions">
@@ -739,7 +809,13 @@
 
 <!-- Add Todo Modal -->
 {#if showTodoModal && todoMemberId}
-	<div class="overlay" onclick={(e) => { if (e.target === e.currentTarget) showTodoModal = false; }} role="presentation">
+	<div
+		class="overlay"
+		onclick={(e) => {
+			if (e.target === e.currentTarget) showTodoModal = false;
+		}}
+		role="presentation"
+	>
 		<div class="modal" onclick={(e) => e.stopPropagation()} role="dialog">
 			<h3>Add Todo for {members.find((m) => m.id === todoMemberId)?.name || 'Member'}</h3>
 			<form
@@ -785,13 +861,24 @@
 				{:else if todoType === 'money'}
 					<label>
 						Cash amount (£)
-						<input name="value" type="number" step="0.01" min="0.01" bind:value={todoValue} required />
+						<input
+							name="value"
+							type="number"
+							step="0.01"
+							min="0.01"
+							bind:value={todoValue}
+							required
+						/>
 					</label>
 				{:else}
 					<input type="hidden" name="emoji" value={todoEmoji} />
 					<div class="emoji-field">
 						<span class="emoji-preview">{todoEmoji}</span>
-						<button type="button" class="link-btn" onclick={() => (showTodoEmojiPicker = !showTodoEmojiPicker)}>
+						<button
+							type="button"
+							class="link-btn"
+							onclick={() => (showTodoEmojiPicker = !showTodoEmojiPicker)}
+						>
 							{showTodoEmojiPicker ? 'Hide' : 'Choose'}
 						</button>
 					</div>
@@ -1464,6 +1551,13 @@
 		border-radius: 4px;
 		flex-shrink: 0;
 		white-space: nowrap;
+		display: inline-flex;
+		align-items: center;
+		gap: 3px;
+	}
+	.todo-completed-badge :global(svg) {
+		width: 0.95em;
+		height: 0.95em;
 	}
 
 	/* ── Points badge ── */
diff --git a/frontend/src/routes/[fam]/join/+page.svelte b/frontend/src/routes/[fam]/join/+page.svelte
index 3fac793..8cd63f5 100644
--- a/frontend/src/routes/[fam]/join/+page.svelte
+++ b/frontend/src/routes/[fam]/join/+page.svelte
@@ -2,6 +2,7 @@
 	import { page } from '$app/state';
 	import { enhance } from '$app/forms';
 	import { Button } from '$lib/components';
+	import { homeIcon } from '$lib/components/icons';
 
 	const famSlug = page.params.fam;
 	let name = $state('');
@@ -14,7 +15,7 @@
 <main class="mx-auto flex min-h-screen max-w-md flex-col items-center justify-center px-6">
 	<section class="w-full rounded-2xl border border-slate-200 bg-white p-8 text-center shadow-sm">
 		<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-2xl">
-			🏠
+			<span class="home-badge">{@html homeIcon}</span>
 		</div>
 		<h1 class="text-xl font-bold text-slate-900">Join {famSlug}</h1>
 		<p class="mt-1 text-sm text-slate-500">
@@ -63,3 +64,10 @@
 		</p>
 	</section>
 </main>
+
+<style>
+	.home-badge :global(svg) {
+		width: 1.75rem;
+		height: 1.75rem;
+	}
+</style>
diff --git a/frontend/src/routes/[fam]/join/[username]/+page.svelte b/frontend/src/routes/[fam]/join/[username]/+page.svelte
index db9c25d..43d8261 100644
--- a/frontend/src/routes/[fam]/join/[username]/+page.svelte
+++ b/frontend/src/routes/[fam]/join/[username]/+page.svelte
@@ -2,6 +2,7 @@
 	import { page } from '$app/state';
 	import { enhance } from '$app/forms';
 	import { Button } from '$lib/components';
+	import { homeIcon } from '$lib/components/icons';
 
 	const famSlug = page.params.fam;
 	const username = page.params.username;
@@ -14,7 +15,7 @@
 <main class="mx-auto flex min-h-screen max-w-md flex-col items-center justify-center px-6">
 	<section class="w-full rounded-2xl border border-slate-200 bg-white p-8 text-center shadow-sm">
 		<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-indigo-100 text-2xl">
-			🏠
+			<span class="home-badge">{@html homeIcon}</span>
 		</div>
 		<h1 class="text-xl font-bold text-slate-900">Welcome to {famSlug}!</h1>
 		<p class="mt-1 text-sm text-slate-500">
@@ -54,4 +55,10 @@
 			Code is valid for 20 minutes. Ask your parent for a new one if it expires.
 		</p>
 	</section>
-</main>
\ No newline at end of file
+</main>
+<style>
+	.home-badge :global(svg) {
+		width: 1.75rem;
+		height: 1.75rem;
+	}
+</style>
diff --git a/frontend/src/routes/admin/+page.svelte b/frontend/src/routes/admin/+page.svelte
index 19e259f..f89189f 100644
--- a/frontend/src/routes/admin/+page.svelte
+++ b/frontend/src/routes/admin/+page.svelte
@@ -6,6 +6,7 @@
 	import TemplateIcon from '$lib/components/TemplateIcon.svelte';
 	import { ICON_NAMES, TEMPLATE_COLORS } from '$lib/templateIcons';
 	import Footer from '$lib/components/Footer.svelte';
+	import { homeIcon, chevronRightIcon } from '$lib/components/icons';
 
 	let { data, form } = $props();
 
@@ -85,7 +86,7 @@
 
 <div class="shell">
 	<header class="topbar">
-		<a class="brand" href="/"><span class="brand-icon">🏠</span> <strong>FamChore</strong></a>
+		<a class="brand" href="/"><span class="brand-icon">{@html homeIcon}</span> <strong>FamChore</strong></a>
 		<nav>
 			{#if data.authenticated}
 				<form method="POST" action="?/logout" use:enhance>
@@ -311,7 +312,7 @@
 									<span class="badge none">None</span>
 								{/if}
 							</td>
-							<td class="row-actions" data-label="Actions"><a href="/{fam.slug}" class="link">View →</a></td>
+							<td class="row-actions" data-label="Actions"><a href="/{fam.slug}" class="link">View {@html chevronRightIcon}</a></td>
 						</tr>
 					{/each}
 				</tbody>
diff --git a/frontend/src/routes/pricing/+page.svelte b/frontend/src/routes/pricing/+page.svelte
index ee48e74..3f51efa 100644
--- a/frontend/src/routes/pricing/+page.svelte
+++ b/frontend/src/routes/pricing/+page.svelte
@@ -6,6 +6,7 @@
 	import { loadStripe, type StripeEmbeddedCheckout } from '@stripe/stripe-js';
 	import { Button, PricingPlans } from '$lib/components';
 	import Footer from '$lib/components/Footer.svelte';
+	import { homeIcon, chevronLeftIcon, chevronRightIcon } from '$lib/components/icons';
 
 	let { data, form } = $props();
 
@@ -58,7 +59,7 @@
 
 <div class="shell">
 	<header class="topbar">
-		<a class="brand" href="/"><span class="brand-icon">🏠</span> <strong>FamChore</strong></a>
+		<a class="brand" href="/"><span class="brand-icon">{@html homeIcon}</span> <strong>FamChore</strong></a>
 		<nav>
 			<a href="/login" class="nav-link">Log in</a>
 			<a href="/signup" class="nav-cta">Get started</a>
@@ -77,13 +78,13 @@
 				<div class="checkout-card">
 					<div class="checkout-head">
 						<h2>Checkout — {checkoutTitle}</h2>
-						<Button variant="ghost" size="sm" onclick={resetCheckout}>← Back to plans</Button>
+						<Button variant="ghost" size="sm" onclick={resetCheckout}>{@html chevronLeftIcon} Back to plans</Button>
 					</div>
 					<div bind:this={checkoutEl} class="checkout-host"></div>
 					<p class="hint">
 						You can close and go to your dashboard any time — access unlocks once payment completes.
 					</p>
-					<a href={data.famSlug ? `/${data.famSlug}` : '/'} class="dash-link">Go to dashboard →</a>
+					<a href={data.famSlug ? `/${data.famSlug}` : '/'} class="dash-link">Go to dashboard {@html chevronRightIcon}</a>
 				</div>
 			</div>
 		{/if}
diff --git a/shared/pb/schema.ts b/shared/pb/schema.ts
index cc7e627..bc9a954 100644
--- a/shared/pb/schema.ts
+++ b/shared/pb/schema.ts
@@ -184,7 +184,7 @@ export const SCHEMA_PLAN: CollectionPlanEntry[] = [
   {
     name: "settings",
     build: (ids) =>
-      col("settings", [rel("famId", ids.fams, true), text("webhookUrl"), bool("simulateEow")], {
+      col("settings", [rel("famId", ids.fams, true), text("webhookUrl")], {
         createRule: RULE_PARENT_WRITE,
         updateRule: RULE_PARENT_SCOPED,
         deleteRule: RULE_PARENT_SCOPED,