diff --git a/frontend/src/lib/components/icons.ts b/frontend/src/lib/components/icons.ts
index d576ab6..06b51c2 100644
--- a/frontend/src/lib/components/icons.ts
+++ b/frontend/src/lib/components/icons.ts
@@ -64,3 +64,7 @@ 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>';
+export const shieldIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 11.5 2 2 4-4"/></svg>';
+export const laptopIcon =
+	'<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 16V7a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v9"/><path d="M4 16H2.9a1 1 0 0 0-.95 1.33l.6 1.5a1 1 0 0 0 .95.67h17a1 1 0 0 0 .95-.67l.6-1.5A1 1 0 0 0 21.1 16H20"/></svg>';
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index b1e3e84..a057e25 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,7 +1,19 @@
 <script lang="ts">
 	import Footer from '$lib/components/Footer.svelte';
 	import FamDone from '$lib/components/FamDone.svelte';
-	import { homeIcon, checkCircleIcon, chevronRightIcon } from '$lib/components/icons';
+	import {
+		homeIcon,
+		choresIcon,
+		checkCircleIcon,
+		chevronRightIcon,
+		dashboardIcon,
+		chatIcon,
+		gemIcon,
+		lockIcon,
+		coinsIcon,
+		shieldIcon,
+		laptopIcon
+	} from '$lib/components/icons';
 	import { readShortcut, shortcutTarget, type Shortcut } from '$lib/shortcut';
 	import CheckboxGrid from '$lib/components/CheckboxGrid.svelte';
 
@@ -40,7 +52,7 @@
 		<div class="hero-content">
 			<span class="hero-kicker">The family chore app</span>
 			<h1 class="hero-title"><FamDone /></h1>
-			<p class="hero-sub">Every chore checked. Every allowance earned — on autopilot.</p>
+			<p class="hero-sub">Building <span class="text-green-400">healthy habbits</span> together!</p>
 			<div class="hero-actions">
 				<a class="hero-cta" href="/signup">Create my family</a>
 				<a class="hero-cta-ghost" href="/pricing">See pricing</a>
@@ -51,20 +63,25 @@
 		<div class="intro-inner">
 			<div class="intro-copy">
 				<span class="pill">For busy families</span>
-				<h1>Chores done. <span class="accent">Allowance earned.</span></h1>
+				<h1>Chores done. <span class="accent">Get rewarded.</span></h1>
 				<p class="lede">
-					<FamDone /> turns everyday household chores into points and pocket money. Assign the chores,
-					let your kids see their progress live, and <FamDone /> calculates the allowance automatically
-					— no spreadsheets, no nagging.
+					<FamDone /> lets you choose chores and rewards with your kids.
 				</p>
+				<p class="lede">
+					Because life is fun, <FamDone /> makes it easy for the tricky things become part of your daily
+					routine.
+				</p>
+				<!-- <p> - letting them become
+				empowered and take ownership of the things they forget about -  You might learn a thing or two too!</p> -->
 				<ul class="hero-ticks">
 					<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
+						<span class="tick">{@html checkCircleIcon}</span>Kids join with their own device or
+						family computer
 					</li>
 					<li>
-						<span class="tick">{@html checkCircleIcon}</span>Allowance lands on payday,
-						automatically
+						<span class="tick">{@html checkCircleIcon}</span>Get a free trial and see if it's right
+						for you
 					</li>
 				</ul>
 			</div>
@@ -73,11 +90,6 @@
 				<h2>Start your family</h2>
 				<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 class="flex gap-2 self-center align-center justify-center" href="/pricing"
-						>See pricing {@html chevronRightIcon}</a
-					>
-				</p>
 				<p class="card-alt">
 					Already have a family? <a href="/login">Log in</a>
 				</p>
@@ -86,116 +98,104 @@
 		<div class="explainer">
 			<div class="steps">
 				<article class="step">
-					<span class="step-num">1</span>
-					<h3>Create your family</h3>
+					<div class="step-head">
+						<span class="step-media">
+							<span class="step-icon">{@html homeIcon}</span>
+							<span class="step-num">1</span>
+						</span>
+						<h3>Create your family</h3>
+					</div>
 					<p>
 						Set up chores and how much each one is worth. Your kids join in seconds with an invite
 						code.
 					</p>
 				</article>
 				<article class="step">
-					<span class="step-num">2</span>
-					<h3>Kids do the work</h3>
+					<div class="step-head">
+						<span class="step-media">
+							<span class="step-icon">{@html choresIcon}</span>
+							<span class="step-num">2</span>
+						</span>
+						<h3>Kids do the work</h3>
+					</div>
 					<p>
 						They see today's chores as a simple card board and tick them off as they go — points are
 						added instantly.
 					</p>
 				</article>
 				<article class="step">
-					<span class="step-num">3</span>
-					<h3>Allowance pays out</h3>
-					<p>
-						Points add up, then turn into pocket money on payday. Rewards and monthly bonuses keep
-						it fun.
-					</p>
+					<div class="step-head">
+						<span class="step-media">
+							<span class="step-icon">{@html coinsIcon}</span>
+							<span class="step-num">3</span>
+						</span>
+						<h3>Payday!</h3>
+					</div>
+					<p>If a kid meets their criteria - they can claim their pocket money!</p>
 				</article>
 			</div>
 		</div>
 	</section>
 
-	<!-- EXPLAINER -->
-	<!-- <section class="explainer">
-		<div class="steps">
-			<article class="step">
-				<span class="step-num">1</span>
-				<h3>Create your family</h3>
-				<p>
-					Set up chores and how much each one is worth. Your kids join in seconds with an invite
-					code.
-				</p>
-			</article>
-			<article class="step">
-				<span class="step-num">2</span>
-				<h3>Kids do the work</h3>
-				<p>
-					They see today's chores as a simple card board and tick them off as they go — points are
-					added instantly.
-				</p>
-			</article>
-			<article class="step">
-				<span class="step-num">3</span>
-				<h3>Allowance pays out</h3>
-				<p>
-					Points add up, then turn into pocket money on payday. Rewards and monthly bonuses keep it
-					fun.
-				</p>
-			</article>
-		</div>
-	</section> -->
-
-	<!-- FEATURES -->
 	<section class="features">
 		<div class="features-inner">
-			<h2>Everything a family needs</h2>
+			<h2>The BIG Idea</h2>
 			<div class="feature-grid">
-				<article class="feature">
-					<h3>Chore board</h3>
+				<article class="feature" style="--ic-bg:#e0e7ff; --ic-fg:#4338ca">
+					<div class="feature-head">
+						<span class="feature-icon">{@html dashboardIcon}</span>
+						<h3>Chore board</h3>
+					</div>
+					<p>Simple and intuitive chore board for parents to assign tasks to their kids.</p>
+				</article>
+				<article class="feature" style="--ic-bg:#ccfbf1; --ic-fg:#0d9488">
+					<div class="feature-head">
+						<span class="feature-icon">{@html chatIcon}</span>
+						<h3>Chat</h3>
+					</div>
 					<p>
-						Reusable chore templates and a simple assignment grid. Build once, reuse every week.
+						Real-time chat for parents to communicate with their kids - so you can congratulate
+						them!
 					</p>
 				</article>
-				<article class="feature">
-					<h3>Live progress</h3>
+				<article class="feature" style="--ic-bg:#ede9fe; --ic-fg:#7c3aed">
+					<div class="feature-head">
+						<span class="feature-icon">{@html shieldIcon}</span>
+						<h3>Trust!</h3>
+					</div>
+					<p>The whole experience is about exercising trust together.</p>
+				</article>
+				<article class="feature" style="--ic-bg:#fef3c7; --ic-fg:#d97706">
+					<div class="feature-head">
+						<span class="feature-icon">{@html gemIcon}</span>
+						<h3>Rewards &amp; bonuses</h3>
+					</div>
 					<p>
-						Realtime sync across the whole family — see points and progress update the moment a
-						chore is done.
+						As a parent you can dish out behaviour rewards or pocket money boosters - in a place
+						which is yours to create together.
 					</p>
 				</article>
-				<article class="feature">
-					<h3>Automatic allowance</h3>
-					<p>
-						Points convert to money using your family's own rules. No mental maths, no arguments.
-					</p>
+				<article class="feature" style="--ic-bg:#e0f2fe; --ic-fg:#0284c7">
+					<div class="feature-head">
+						<span class="feature-icon">{@html laptopIcon}</span>
+						<h3>Phone free friendly</h3>
+					</div>
+					<p>You dont need a mobile or an app - just a browser.</p>
 				</article>
-				<article class="feature">
-					<h3>Rewards &amp; bonuses</h3>
+				<article class="feature" style="--ic-bg:#e2e8f0; --ic-fg:#475569">
+					<div class="feature-head">
+						<span class="feature-icon">{@html lockIcon}</span>
+						<h3>Private by design</h3>
+					</div>
 					<p>
-						Kids can spend points on rewards, and you can run a monthly bonus for the top earner.
-					</p>
-				</article>
-				<article class="feature">
-					<h3>Kid-friendly</h3>
-					<p>
-						A simple, colourful interface kids love — big buttons, clear feedback, their own space.
-					</p>
-				</article>
-				<article class="feature">
-					<h3>Private by design</h3>
-					<p>
-						Everything is scoped to your family. Kids join with an invite code and stay in your
-						family.
+						We don't read your data, your messages, or sell anything - your family and rules is your
+						property.
 					</p>
 				</article>
 			</div>
 			<div class="cta">
-				<p>Ready to make chores painless?</p>
+				<p>Ready to get the kids involved?</p>
 				<a class="cta-btn" href="/signup">Create your family</a>
-				<p class="card-alt">
-					<a
-						class="hover:underline self-center items-center justify-center flex gap-2"
-						href="/pricing">or see pricing {@html chevronRightIcon}</a
-					>
-				</p>
 			</div>
 		</div>
 	</section>
@@ -555,22 +555,72 @@
 		border: 1px solid #e5e7eb;
 		border-radius: 14px;
 		padding: 1.5rem;
+		transition:
+			transform 0.15s,
+			box-shadow 0.15s,
+			border-color 0.15s;
 	}
-	.step-num {
+	.step:hover {
+		transform: translateY(-3px);
+		border-color: #c7d2fe;
+		box-shadow: 0 12px 24px rgba(67, 56, 202, 0.1);
+	}
+	.step-head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.75rem;
+		margin-bottom: 0.6rem;
+	}
+	.step-media {
+		position: relative;
+		display: inline-block;
+		flex-shrink: 0;
+	}
+	.step-icon {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		width: 2rem;
-		height: 2rem;
-		border-radius: 50%;
-		background: #4338ca;
+		width: 3rem;
+		height: 3rem;
+		border-radius: 12px;
+		background: linear-gradient(135deg, #4338ca, #6d28d9);
 		color: #fff;
-		font-weight: 700;
-		margin-bottom: 0.75rem;
+		box-shadow: 0 6px 14px rgba(67, 56, 202, 0.25);
+	}
+	.step-icon :global(svg) {
+		width: 1.5em;
+		height: 1.5em;
+	}
+	.step-num {
+		position: absolute;
+		top: -0.4rem;
+		right: -0.4rem;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 1.3rem;
+		height: 1.3rem;
+		border-radius: 50%;
+		background: #fbbf24;
+		color: #1e1b4b;
+		font-weight: 800;
+		font-size: 0.72rem;
+		border: 2px solid #fff;
 	}
 	.step h3 {
-		margin: 0 0 0.5rem;
+		margin: 0;
 		font-size: 1.05rem;
+		text-align: right;
+	}
+	.step h3::after {
+		content: '';
+		display: block;
+		width: 100%;
+		height: 3px;
+		border-radius: 2px;
+		background: #4338ca;
+		margin-top: 0.45rem;
 	}
 	.step p {
 		margin: 0;
@@ -596,11 +646,52 @@
 		border: 1px solid #e5e7eb;
 		border-radius: 12px;
 		padding: 1.25rem;
+		transition:
+			transform 0.15s,
+			box-shadow 0.15s,
+			border-color 0.15s;
+	}
+	.feature:hover {
+		transform: translateY(-3px);
+		border-color: #d1d5db;
+		box-shadow: 0 14px 28px rgba(67, 56, 202, 0.12);
+	}
+	.feature-head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.75rem;
+		margin-bottom: 0.6rem;
+	}
+	.feature-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		width: 2.6rem;
+		height: 2.6rem;
+		border-radius: 10px;
+		background: var(--ic-bg);
+		color: var(--ic-fg);
+	}
+	.feature-icon :global(svg) {
+		width: 1.35em;
+		height: 1.35em;
 	}
 	.feature h3 {
-		margin: 0 0 0.4rem;
+		margin: 0;
 		font-size: 1rem;
 		color: #111827;
+		text-align: right;
+	}
+	.feature h3::after {
+		content: '';
+		display: block;
+		width: 100%;
+		height: 3px;
+		border-radius: 2px;
+		background: var(--ic-fg);
+		margin-top: 0.45rem;
 	}
 	.feature p {
 		margin: 0;