diff --git a/backend/handlers/payments/till.go b/backend/handlers/payments/till.go
index 31181eb..b6beeaa 100644
--- a/backend/handlers/payments/till.go
+++ b/backend/handlers/payments/till.go
@@ -17,19 +17,19 @@ import (
 )
 
 type TillSaleRequest struct {
-	ItemType        string   `json:"item_type"`
-	Action          string   `json:"action"`
-	Amount          float64  `json:"amount"`
-	GiftCardID      *string  `json:"gift_card_id,omitempty"`
-	PaymentMethod   string   `json:"payment_method"`
-	UserSavedCardID *string  `json:"user_saved_card_id,omitempty"`
-	UserID          *string  `json:"user_id,omitempty"`
-	IdempotencyKey  string   `json:"idempotency_key,omitempty"`
-	CardNumber      string   `json:"card_number,omitempty"`
-	CardExpMonth    int      `json:"card_exp_month,omitempty"`
-	CardExpYear     int      `json:"card_exp_year,omitempty"`
-	CardCVC         string   `json:"card_cvc,omitempty"`
-	RedeemToUserID  *string  `json:"redeem_to_user_id,omitempty"`
+	ItemType        string  `json:"item_type"`
+	Action          string  `json:"action"`
+	Amount          float64 `json:"amount"`
+	GiftCardID      *string `json:"gift_card_id,omitempty"`
+	PaymentMethod   string  `json:"payment_method"`
+	UserSavedCardID *string `json:"user_saved_card_id,omitempty"`
+	UserID          *string `json:"user_id,omitempty"`
+	IdempotencyKey  string  `json:"idempotency_key,omitempty"`
+	CardNumber      string  `json:"card_number,omitempty"`
+	CardExpMonth    int     `json:"card_exp_month,omitempty"`
+	CardExpYear     int     `json:"card_exp_year,omitempty"`
+	CardCVC         string  `json:"card_cvc,omitempty"`
+	RedeemToUserID  *string `json:"redeem_to_user_id,omitempty"`
 }
 
 type TillSaleResponse struct {
@@ -379,12 +379,10 @@ func GetTillCheckoutStatus(w http.ResponseWriter, r *http.Request) {
 		_, err = db.DB.Exec(r.Context(), `
 			UPDATE till_sales
 			SET status = 'completed',
-			    card_last4 = $1,
-			    card_brand = $2,
-			    square_payment_id = $3,
+			    square_payment_id = $1,
 			    updated_at = NOW()
-			WHERE id = $4
-		`, paymentResult.CardLast4, paymentResult.CardBrand, paymentResult.SquarePayID, tillSaleID)
+			WHERE id = $2
+		`, paymentResult.SquarePayID, tillSaleID)
 		if err != nil {
 			log.Printf("Failed to update till sale: %v", err)
 			http.Error(w, "Internal server error", http.StatusInternalServerError)
diff --git a/frontend/src/lib/components/admin/BookingCreateModal.svelte b/frontend/src/lib/components/admin/BookingCreateModal.svelte
index f5443f1..d4d88ce 100644
--- a/frontend/src/lib/components/admin/BookingCreateModal.svelte
+++ b/frontend/src/lib/components/admin/BookingCreateModal.svelte
@@ -3,6 +3,7 @@
 	import { toast } from 'svelte-sonner';
 	import { SvelteDate } from 'svelte/reactivity';
 	import { CalendarDate, getLocalTimeZone, type DateValue } from '@internationalized/date';
+	import { isValidUKPhone, toE164UK } from '$lib/utils/phone';
 
 	// UI Components
 	import * as Modal from '$lib/components/ui/dialog';
@@ -57,6 +58,7 @@
 	let selectedUserId = $state<string | null>(null);
 	let guestName = $state('');
 	let guestPhone = $state('');
+	let guestPhoneError = $state('');
 	let loadingUsers = $state(false);
 
 	// Step 2: Services
@@ -659,7 +661,11 @@
 			let finalUserId = selectedUserId;
 
 			if (userType === 'guest') {
-				const phone = guestPhone.trim() || '+447700900000';
+				if (!isValidUKPhone(guestPhone)) {
+					toast.error('Please enter a valid UK phone number for the guest');
+					return;
+				}
+				const phone = toE164UK(guestPhone)!;
 				const createRes = await fetch('/api/users/guest', {
 					method: 'POST',
 					headers: {
@@ -939,8 +945,13 @@
 										class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"
 										placeholder="07700 900000"
 										value={guestPhone}
-										oninput={(e) => (guestPhone = e.currentTarget.value)}
+										oninput={(e) => { guestPhone = e.currentTarget.value; }}
+										onblur={() => { if (guestPhone && !isValidUKPhone(guestPhone)) guestPhoneError = 'Invalid UK phone number'; else guestPhoneError = ''; }}
+										class={guestPhoneError ? 'border-red-500' : ''}
 									/>
+									{#if guestPhoneError}
+										<p class="mt-1 text-xs text-red-600">{guestPhoneError}</p>
+									{/if}
 								</div>
 								<p class="rounded-lg bg-yellow-50 p-3 text-sm text-yellow-800">
 									Booking as a guest creates a temporary record. Encourage them to sign up for
diff --git a/frontend/src/lib/components/admin/WalkInCreateModal.svelte b/frontend/src/lib/components/admin/WalkInCreateModal.svelte
index 2f2266a..c50bbc2 100644
--- a/frontend/src/lib/components/admin/WalkInCreateModal.svelte
+++ b/frontend/src/lib/components/admin/WalkInCreateModal.svelte
@@ -3,6 +3,7 @@
 	import { toast } from 'svelte-sonner';
 	import { SvelteDate } from 'svelte/reactivity';
 	import { getLocalTimeZone } from '@internationalized/date';
+	import { isValidUKPhone, toE164UK } from '$lib/utils/phone';
 
 	// UI Components
 	import * as Modal from '$lib/components/ui/dialog';
@@ -51,6 +52,7 @@
 	let selectedUserId = $state<string | null>(null);
 	let guestName = $state('');
 	let guestPhone = $state('');
+	let guestPhoneError = $state('');
 	let loadingUsers = $state(false);
 
 	// Step 2: Services
@@ -279,7 +281,11 @@
 			let finalUserId = selectedUserId;
 
 			if (userType === 'guest') {
-				const phone = guestPhone.trim() || '+447700900000';
+				if (!isValidUKPhone(guestPhone)) {
+					toast.error('Please enter a valid UK phone number for the guest');
+					return;
+				}
+				const phone = toE164UK(guestPhone)!;
 				const createRes = await fetch('/api/users/guest', {
 					method: 'POST',
 					headers: {
@@ -545,9 +551,9 @@
 							<div class="max-h-[300px] overflow-y-auto rounded-md border border-gray-200">
 								{#if loadingUsers}
 									<div class="space-y-2 p-2">
-									{#each Array(3) as _, i (i)}
-										<Skeleton class="h-10 w-full" />
-									{/each}
+										{#each Array(3) as _, i (i)}
+											<Skeleton class="h-10 w-full" />
+										{/each}
 									</div>
 								{:else if users.length === 0}
 									<div class="flex items-center justify-center p-8 text-sm text-gray-500">
@@ -622,8 +628,13 @@
 										class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"
 										placeholder="07700 900000 (optional — helps us reach you if running late)"
 										value={guestPhone}
-										oninput={(e) => (guestPhone = e.currentTarget.value)}
+										oninput={(e) => { guestPhone = e.currentTarget.value; }}
+										onblur={() => { guestPhoneError = guestPhone && !isValidUKPhone(guestPhone) ? 'Invalid UK phone number' : ''; }}
+										class={guestPhoneError ? 'border-red-500' : ''}
 									/>
+									{#if guestPhoneError}
+										<p class="mt-1 text-xs text-red-600">{guestPhoneError}</p>
+									{/if}
 								</div>
 								<p class="rounded-lg bg-yellow-50 p-3 text-sm text-yellow-800">
 									Booking as a guest creates a temporary record. Encourage them to sign up for
diff --git a/frontend/src/lib/components/payments/TillPaymentModal.svelte b/frontend/src/lib/components/payments/TillPaymentModal.svelte
index b847d4e..5a8f0e5 100644
--- a/frontend/src/lib/components/payments/TillPaymentModal.svelte
+++ b/frontend/src/lib/components/payments/TillPaymentModal.svelte
@@ -6,6 +6,7 @@
 	import { Input } from '$lib/components/ui/input';
 	import { authStore } from '$lib/stores/auth.svelte';
 	import { formatCardCode } from '$lib/utils/format';
+	import { isValidUKPhone, formatPhoneDisplay, toE164UK } from '$lib/utils/phone';
 
 	interface Props {
 		amount: number;
@@ -28,7 +29,18 @@
 		giftcard_code?: string;
 	};
 
-	type PaymentStep = 'customer-selection' | 'delivery-selection' | 'payment-selection' | 'cash-entering' | 'cash-confirming' | 'card-machine' | 'card-polling' | 'card-details-entering' | 'saved-card-selecting' | 'success' | 'error';
+	type PaymentStep =
+		| 'customer-selection'
+		| 'delivery-selection'
+		| 'payment-selection'
+		| 'cash-entering'
+		| 'cash-confirming'
+		| 'card-machine'
+		| 'card-polling'
+		| 'card-details-entering'
+		| 'saved-card-selecting'
+		| 'success'
+		| 'error';
 
 	let step = $state<PaymentStep>('customer-selection');
 	let error = $state<string | null>(null);
@@ -58,7 +70,12 @@
 
 	// Customer Selection - Current Customer
 	let loadingCurrentCustomer = $state(false);
-	let currentCustomerInfo = $state<{ id: string; name: string; email?: string; phone?: string } | null>(null);
+	let currentCustomerInfo = $state<{
+		id: string;
+		name: string;
+		email?: string;
+		phone?: string;
+	} | null>(null);
 
 	// Customer Selection - tab
 	let customerTab = $state<'current' | 'member' | 'guest'>('current');
@@ -79,7 +96,15 @@
 	let guestNameError = $state('');
 
 	// Saved Cards (member users)
-	let savedCardList = $state<Array<{ id: string; card_brand: string; card_last4: string; card_expiry?: string; cardholder_name?: string }>>([]);
+	let savedCardList = $state<
+		Array<{
+			id: string;
+			card_brand: string;
+			card_last4: string;
+			card_expiry?: string;
+			cardholder_name?: string;
+		}>
+	>([]);
 	let loadingSavedCards = $state(false);
 	let selectedSavedCardId = $state<string | null>(null);
 	let sendingSavedCard = $state(false);
@@ -128,7 +153,9 @@
 		const beforeLen = ephemeralCardNumber.length;
 		ephemeralCardNumber = formatCardNumber(input.value);
 		const afterLen = ephemeralCardNumber.length;
-		requestAnimationFrame(() => input.setSelectionRange(start + (afterLen - beforeLen), start + (afterLen - beforeLen)));
+		requestAnimationFrame(() =>
+			input.setSelectionRange(start + (afterLen - beforeLen), start + (afterLen - beforeLen))
+		);
 	}
 
 	function handleEphemeralExpiryInput(e: Event) {
@@ -137,7 +164,9 @@
 		const beforeLen = ephemeralCardExpiry.length;
 		ephemeralCardExpiry = formatExpiryDate(input.value);
 		const afterLen = ephemeralCardExpiry.length;
-		requestAnimationFrame(() => input.setSelectionRange(start + (afterLen - beforeLen), start + (afterLen - beforeLen)));
+		requestAnimationFrame(() =>
+			input.setSelectionRange(start + (afterLen - beforeLen), start + (afterLen - beforeLen))
+		);
 	}
 
 	function handleEphemeralCvcInput(e: Event) {
@@ -146,16 +175,19 @@
 	}
 
 	let isEphemeralCardValid = $derived(
-		isValidLuhn(ephemeralCardNumber) && /^\d{2}\/\d{2}$/.test(ephemeralCardExpiry) && ephemeralCardCVC.length >= 3
+		isValidLuhn(ephemeralCardNumber) &&
+			/^\d{2}\/\d{2}$/.test(ephemeralCardExpiry) &&
+			ephemeralCardCVC.length >= 3
 	);
 
 	let ephemeralCardError = $derived(
 		ephemeralCardNumber.length > 0 && !isValidLuhn(ephemeralCardNumber)
 			? 'Invalid card number'
-			: /^\d{2}\/\d{2}$/.test(ephemeralCardExpiry) && (() => {
-					const parts = parseEpiry(ephemeralCardExpiry);
-					return parts && (parts.month < 1 || parts.month > 12);
-			  })()
+			: /^\d{2}\/\d{2}$/.test(ephemeralCardExpiry) &&
+				  (() => {
+						const parts = parseEpiry(ephemeralCardExpiry);
+						return parts && (parts.month < 1 || parts.month > 12);
+				  })()
 				? 'Invalid expiry month'
 				: ephemeralCardCVC.length > 0 && ephemeralCardCVC.length < 3
 					? 'CVC must be at least 3 digits'
@@ -178,62 +210,18 @@
 			guestPhoneError = 'Phone number is required';
 			return false;
 		}
-		const cleanPhone = phone.replace(/[\s\-()]/g, '');
-		const phoneRegex = /^(\+44[1-9]\d{9,10}|0[1-9]\d{9,10})$/;
-		const isValid = phoneRegex.test(cleanPhone);
-		guestPhoneError = isValid ? '' : 'Invalid UK phone number';
-		return isValid;
+		const valid = isValidUKPhone(phone);
+		guestPhoneError = valid ? '' : 'Invalid UK phone number';
+		return valid;
 	}
 
 	function formatGuestPhoneInput(value: string): string {
-		const cleaned = value.replace(/[^\d+]/g, '');
-		if (cleaned.startsWith('+44')) {
-			const digits = cleaned.slice(3);
-			if (digits.length <= 4) return `+44 ${digits}`;
-			if (digits.length <= 10) return `+44 ${digits.slice(0, 4)} ${digits.slice(4)}`;
-			return `+44 ${digits.slice(0, 4)} ${digits.slice(4, 10)}`;
-		}
-		if (cleaned.startsWith('0')) {
-			if (cleaned.length <= 5) return cleaned;
-			return `${cleaned.slice(0, 5)} ${cleaned.slice(5, 11)}`;
-		}
-		return cleaned;
+		return formatPhoneDisplay(value);
 	}
 
 	function handleGuestPhoneInput(e: Event) {
-		const input = e.target as HTMLInputElement;
-		const cursorPos = input.selectionStart || 0;
-
-		// Count digits/+ before cursor in the RAW input value (which includes
-		// the just-typed character). This is more accurate than using the old
-		// guestPhone value because it captures the exact editing position.
-		const rawValue = input.value;
-		let digitsBeforeCursor = 0;
-		for (let i = 0; i < cursorPos && i < rawValue.length; i++) {
-			if (/\d/.test(rawValue[i]) || rawValue[i] === '+') {
-				digitsBeforeCursor++;
-			}
-		}
-
-		guestPhone = formatGuestPhoneInput(rawValue);
-
-		// Place cursor after the same number of meaningful characters
-		// in the newly formatted value
-		let meaningfulCount = 0;
-		let newCursorPos = guestPhone.length;
-		for (let i = 0; i < guestPhone.length; i++) {
-			if (meaningfulCount >= digitsBeforeCursor) {
-				newCursorPos = i;
-				break;
-			}
-			if (/\d/.test(guestPhone[i]) || guestPhone[i] === '+') {
-				meaningfulCount++;
-			}
-		}
-
-		requestAnimationFrame(() => {
-			input.setSelectionRange(newCursorPos, newCursorPos);
-		});
+		const target = e.target as HTMLInputElement;
+		guestPhone = formatGuestPhoneInput(target.value);
 		if (guestPhoneError) validateGuestPhone(guestPhone);
 	}
 
@@ -376,7 +364,12 @@
 					'Content-Type': 'application/json',
 					Authorization: `Bearer ${authStore.currentToken}`
 				},
-				body: JSON.stringify({ firstName, lastName, phone, email })
+				body: JSON.stringify({
+					firstName,
+					lastName,
+					phone: toE164UK(guestPhone) ?? guestPhone,
+					email
+				})
 			});
 			if (res.ok) {
 				const data = await res.json();
@@ -491,7 +484,7 @@
 		let attempts = 0;
 		const poll = async () => {
 			while (attempts < maxAttempts) {
-				await new Promise(r => setTimeout(r, 2000));
+				await new Promise((r) => setTimeout(r, 2000));
 				attempts++;
 				try {
 					const res = await fetch(`/api/admin/till/sale/checkout/${ckId}/status`, {
@@ -648,535 +641,656 @@
 	}
 </script>
 
-<Dialog.Root open={true} onOpenChange={(open) => { if (!open) onClose(); }}>
-<Dialog.Content class="max-h-[85vh] max-w-md overflow-y-auto">
-	{#if step === 'success' && result}
-		<Dialog.Header>
-			<Dialog.Title>Payment Successful</Dialog.Title>
-			<Dialog.Description>
-				{action === 'create' ? 'Gift card created' : 'Gift card topped up'} and payment recorded.
-			</Dialog.Description>
-		</Dialog.Header>
-		<div class="space-y-4 py-4">
-			<div class="flex flex-col items-center justify-center py-4">
-				<div class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
-					<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600" viewBox="0 0 20 20" fill="currentColor">
-						<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
-					</svg>
-				</div>
-				<h3 class="text-xl font-semibold text-gray-900">Payment Complete</h3>
-				<p class="mt-1 text-sm text-gray-500">
-					{formatCurrency(result.total_amount)} via {result.payment_method}
-				</p>
-				{#if result.payment_method === 'cash' && cashTendered > 0}
-					<div class="mt-3 w-full rounded-md border border-green-200 bg-green-50 p-3">
-						<div class="flex justify-between text-sm">
-							<span class="font-medium text-green-800">Cash Received</span>
-							<span class="font-semibold text-green-800">{formatCurrency(cashTendered)}</span>
-						</div>
-						<div class="mt-1 flex justify-between text-sm">
-							<span class="font-medium text-green-800">Change Due</span>
-							<span class="font-semibold text-green-800">{formatCurrency(cashTendered - result.total_amount)}</span>
-						</div>
+<Dialog.Root
+	open={true}
+	onOpenChange={(open) => {
+		if (!open) onClose();
+	}}
+>
+	<Dialog.Content class="max-h-[85vh] max-w-md overflow-y-auto">
+		{#if step === 'success' && result}
+			<Dialog.Header>
+				<Dialog.Title>Payment Successful</Dialog.Title>
+				<Dialog.Description>
+					{action === 'create' ? 'Gift card created' : 'Gift card topped up'} and payment recorded.
+				</Dialog.Description>
+			</Dialog.Header>
+			<div class="space-y-4 py-4">
+				<div class="flex flex-col items-center justify-center py-4">
+					<div class="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-8 w-8 text-green-600"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+								clip-rule="evenodd"
+							/>
+						</svg>
 					</div>
-				{/if}
-				{#if action === 'create' && delivery === 'code'}
-					<div class="mt-3 w-full rounded-md border border-fuchsia-100 bg-fuchsia-50 p-3 text-center">
-						<p class="text-xs font-medium text-fuchsia-700">Gift Card Code</p>
-						<p class="mt-1 font-mono text-lg font-bold tracking-wider text-fuchsia-900">
-							{formatCardCode(result.giftcard_code || result.item_id || '')}
-						</p>
-						<p class="mt-1 text-xs text-fuchsia-500">Show this code to the customer</p>
-					</div>
-				{/if}
-				{#if action === 'create' && delivery === 'account'}
-					<div class="mt-3 w-full rounded-md border border-blue-100 bg-blue-50 p-3 text-center">
-						<p class="text-sm font-medium text-blue-800">
-							✓ Gift card added to {selectedCustomer?.name || 'account'}
-						</p>
-						<p class="mt-1 text-xs text-blue-600">Balance is available immediately</p>
-					</div>
-					<!-- TODO: Send email notification to customer -->
-				{/if}
-			</div>
-			<Button onclick={handleDone} class="w-full">Done</Button>
-		</div>
-	{:else if step === 'error'}
-		<Dialog.Header>
-			<Dialog.Title>Payment Failed</Dialog.Title>
-		</Dialog.Header>
-		<div class="space-y-4 py-4">
-			<div class="rounded-md border border-red-200 bg-red-50 p-3">
-				<p class="text-sm text-red-800">{error || 'An error occurred'}</p>
-			</div>
-			<div class="flex gap-3">
-				<Button variant="ghost" onclick={onClose} class="flex-1">Cancel</Button>
-				<Button onclick={resetView} class="flex-1">Try Again</Button>
-			</div>
-		</div>
-	{:else if step === 'customer-selection'}
-		<Dialog.Header>
-			<Dialog.Title>Select Customer</Dialog.Title>
-			<Dialog.Description>
-				Choose a customer for this {formatCurrency(amount)} {action === 'create' ? 'gift card' : 'topup'}.
-			</Dialog.Description>
-		</Dialog.Header>
-
-		<div class="space-y-4 py-2">
-			<div class="flex justify-between rounded-md border bg-white p-4">
-				<span class="text-base font-semibold text-gray-700">Total</span>
-				<span class="text-xl font-bold text-gray-900">{formatCurrency(amount)}</span>
-			</div>
-
-			<!-- Tabs -->
-			<div class="flex gap-6 border-b border-gray-200">
-				<button
-					class="pb-2 text-sm font-medium transition-colors {customerTab === 'current'
-						? 'border-b-2 border-primary text-primary'
-						: 'text-gray-500 hover:text-gray-700'}"
-					onclick={() => { customerTab = 'current'; }}
-				>
-					Current Customer
-				</button>
-				<button
-					class="pb-2 text-sm font-medium transition-colors {customerTab === 'member'
-						? 'border-b-2 border-primary text-primary'
-						: 'text-gray-500 hover:text-gray-700'}"
-					onclick={() => { customerTab = 'member'; }}
-				>
-					Member
-				</button>
-				<button
-					class="pb-2 text-sm font-medium transition-colors {customerTab === 'guest'
-						? 'border-b-2 border-primary text-primary'
-						: 'text-gray-500 hover:text-gray-700'}"
-					onclick={() => { customerTab = 'guest'; }}
-				>
-					Guest / Non-Member
-				</button>
-			</div>
-
-			<!-- Tab: Current Customer -->
-			{#if customerTab === 'current'}
-				<div class="space-y-3">
-					{#if currentCustomerInfo}
-						<div class="rounded-lg border p-4 space-y-3">
-							<div class="flex items-center gap-3">
-								<div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-primary font-semibold text-sm">
-									{currentCustomerInfo.name.charAt(0).toUpperCase()}
-								</div>
-								<div>
-									<div class="text-sm font-medium">{currentCustomerInfo.name}</div>
-									{#if currentCustomerInfo.email}
-										<div class="text-xs text-gray-500">{currentCustomerInfo.email}</div>
-									{/if}
-								</div>
+					<h3 class="text-xl font-semibold text-gray-900">Payment Complete</h3>
+					<p class="mt-1 text-sm text-gray-500">
+						{formatCurrency(result.total_amount)} via {result.payment_method}
+					</p>
+					{#if result.payment_method === 'cash' && cashTendered > 0}
+						<div class="mt-3 w-full rounded-md border border-green-200 bg-green-50 p-3">
+							<div class="flex justify-between text-sm">
+								<span class="font-medium text-green-800">Cash Received</span>
+								<span class="font-semibold text-green-800">{formatCurrency(cashTendered)}</span>
+							</div>
+							<div class="mt-1 flex justify-between text-sm">
+								<span class="font-medium text-green-800">Change Due</span>
+								<span class="font-semibold text-green-800"
+									>{formatCurrency(cashTendered - result.total_amount)}</span
+								>
 							</div>
-							<Button onclick={selectCurrentCustomer} class="w-full">
-								Select This Customer
-							</Button>
-						</div>
-					{:else if loadingCurrentCustomer}
-						<div class="flex justify-center py-8">
-							<span class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-primary"></span>
-						</div>
-					{:else}
-						<div class="rounded-lg border border-dashed p-6 text-center">
-							<p class="text-sm text-gray-500">No current appointment found.</p>
 						</div>
 					{/if}
+					{#if action === 'create' && delivery === 'code'}
+						<div
+							class="mt-3 w-full rounded-md border border-fuchsia-100 bg-fuchsia-50 p-3 text-center"
+						>
+							<p class="text-xs font-medium text-fuchsia-700">Gift Card Code</p>
+							<p class="mt-1 font-mono text-lg font-bold tracking-wider text-fuchsia-900">
+								{formatCardCode(result.giftcard_code || result.item_id || '')}
+							</p>
+							<p class="mt-1 text-xs text-fuchsia-500">Show this code to the customer</p>
+						</div>
+					{/if}
+					{#if action === 'create' && delivery === 'account'}
+						<div class="mt-3 w-full rounded-md border border-blue-100 bg-blue-50 p-3 text-center">
+							<p class="text-sm font-medium text-blue-800">
+								✓ Gift card added to {selectedCustomer?.name || 'account'}
+							</p>
+							<p class="mt-1 text-xs text-blue-600">Balance is available immediately</p>
+						</div>
+						<!-- TODO: Send email notification to customer -->
+					{/if}
+				</div>
+				<Button onclick={handleDone} class="w-full">Done</Button>
+			</div>
+		{:else if step === 'error'}
+			<Dialog.Header>
+				<Dialog.Title>Payment Failed</Dialog.Title>
+			</Dialog.Header>
+			<div class="space-y-4 py-4">
+				<div class="rounded-md border border-red-200 bg-red-50 p-3">
+					<p class="text-sm text-red-800">{error || 'An error occurred'}</p>
+				</div>
+				<div class="flex gap-3">
+					<Button variant="ghost" onclick={onClose} class="flex-1">Cancel</Button>
+					<Button onclick={resetView} class="flex-1">Try Again</Button>
+				</div>
+			</div>
+		{:else if step === 'customer-selection'}
+			<Dialog.Header>
+				<Dialog.Title>Select Customer</Dialog.Title>
+				<Dialog.Description>
+					Choose a customer for this {formatCurrency(amount)}
+					{action === 'create' ? 'gift card' : 'topup'}.
+				</Dialog.Description>
+			</Dialog.Header>
+
+			<div class="space-y-4 py-2">
+				<div class="flex justify-between rounded-md border bg-white p-4">
+					<span class="text-base font-semibold text-gray-700">Total</span>
+					<span class="text-xl font-bold text-gray-900">{formatCurrency(amount)}</span>
 				</div>
 
-			<!-- Tab: Member Search -->
-			{:else if customerTab === 'member'}
-				<div class="space-y-3">
-					<div class="flex items-center space-x-2">
-						<div class="relative flex-1">
-							<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-								<svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-								</svg>
-							</div>
-							<input
-								type="text"
-								class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pl-9 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"
-								placeholder="Search by name, email or phone..."
-								bind:value={userQuery}
-								onkeydown={(e) => { if (e.key === 'Enter') { e.preventDefault(); searchCustomers(1); } }}
-							/>
-						</div>
-						<Button onclick={() => { currentPage = 1; searchCustomers(1); }} disabled={!userQuery.trim() || loadingUsers}>
-							{loadingUsers ? '...' : 'Search'}
-						</Button>
-					</div>
+				<!-- Tabs -->
+				<div class="flex gap-6 border-b border-gray-200">
+					<button
+						class="pb-2 text-sm font-medium transition-colors {customerTab === 'current'
+							? 'border-b-2 border-primary text-primary'
+							: 'text-gray-500 hover:text-gray-700'}"
+						onclick={() => {
+							customerTab = 'current';
+						}}
+					>
+						Current Customer
+					</button>
+					<button
+						class="pb-2 text-sm font-medium transition-colors {customerTab === 'member'
+							? 'border-b-2 border-primary text-primary'
+							: 'text-gray-500 hover:text-gray-700'}"
+						onclick={() => {
+							customerTab = 'member';
+						}}
+					>
+						Member
+					</button>
+					<button
+						class="pb-2 text-sm font-medium transition-colors {customerTab === 'guest'
+							? 'border-b-2 border-primary text-primary'
+							: 'text-gray-500 hover:text-gray-700'}"
+						onclick={() => {
+							customerTab = 'guest';
+						}}
+					>
+						Guest / Non-Member
+					</button>
+				</div>
 
-					<div class="max-h-[260px] overflow-y-auto rounded-md border border-gray-200">
-						{#if loadingUsers}
-							<div class="space-y-2 p-2">
-								{#each Array(3) as _, i (i)}
-									<div class="h-10 w-full animate-pulse rounded bg-gray-100"></div>
-								{/each}
+				<!-- Tab: Current Customer -->
+				{#if customerTab === 'current'}
+					<div class="space-y-3">
+						{#if currentCustomerInfo}
+							<div class="space-y-3 rounded-lg border p-4">
+								<div class="flex items-center gap-3">
+									<div
+										class="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary"
+									>
+										{currentCustomerInfo.name.charAt(0).toUpperCase()}
+									</div>
+									<div>
+										<div class="text-sm font-medium">{currentCustomerInfo.name}</div>
+										{#if currentCustomerInfo.email}
+											<div class="text-xs text-gray-500">{currentCustomerInfo.email}</div>
+										{/if}
+									</div>
+								</div>
+								<Button onclick={selectCurrentCustomer} class="w-full">Select This Customer</Button>
 							</div>
-						{:else if users.length === 0}
-							<div class="flex items-center justify-center p-6 text-sm text-gray-500">
-								{userQuery
-									? 'No customers found. Try a different search.'
-									: 'Search for a customer above to get started.'}
+						{:else if loadingCurrentCustomer}
+							<div class="flex justify-center py-8">
+								<span
+									class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-primary"
+								></span>
 							</div>
 						{:else}
-							<ul class="divide-y divide-gray-200">
-								{#each users as userItem (userItem.id)}
-									<li>
-										<button
-											type="button"
-											class="flex w-full cursor-pointer items-center justify-between px-4 py-3 text-left transition-colors hover:bg-fuchsia-50"
-											onclick={() => selectCustomer(userItem)}
-										>
-											<div>
-												<div class="text-base font-medium">{userItem.fullName}</div>
-												<div class="text-xs text-gray-500">
-													{userItem.email}{#if userItem.email && userItem.phone} &middot; {/if}{userItem.phone}
-												</div>
-											</div>
-										</button>
-									</li>
-								{/each}
-							</ul>
+							<div class="rounded-lg border border-dashed p-6 text-center">
+								<p class="text-sm text-gray-500">No current appointment found.</p>
+							</div>
 						{/if}
 					</div>
 
-					{#if searchTotal > 5}
-						<div class="flex items-center justify-between text-xs text-gray-500">
-							<button
-								class="font-medium text-primary disabled:text-gray-300"
-								disabled={currentPage <= 1}
-								onclick={() => goToPage(currentPage - 1)}
+					<!-- Tab: Member Search -->
+				{:else if customerTab === 'member'}
+					<div class="space-y-3">
+						<div class="flex items-center space-x-2">
+							<div class="relative flex-1">
+								<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+									<svg
+										class="h-4 w-4 text-gray-400"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+										/>
+									</svg>
+								</div>
+								<input
+									type="text"
+									class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pl-9 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none"
+									placeholder="Search by name, email or phone..."
+									bind:value={userQuery}
+									onkeydown={(e) => {
+										if (e.key === 'Enter') {
+											e.preventDefault();
+											searchCustomers(1);
+										}
+									}}
+								/>
+							</div>
+							<Button
+								onclick={() => {
+									currentPage = 1;
+									searchCustomers(1);
+								}}
+								disabled={!userQuery.trim() || loadingUsers}
 							>
-								&larr; Previous
-							</button>
-							<span>Page {currentPage} of {totalPages}</span>
-							<button
-								class="font-medium text-primary disabled:text-gray-300"
-								disabled={currentPage >= totalPages}
-								onclick={() => goToPage(currentPage + 1)}
-							>
-								Next &rarr;
-							</button>
+								{loadingUsers ? '...' : 'Search'}
+							</Button>
 						</div>
+
+						<div class="max-h-[260px] overflow-y-auto rounded-md border border-gray-200">
+							{#if loadingUsers}
+								<div class="space-y-2 p-2">
+									{#each Array(3) as _, i (i)}
+										<div class="h-10 w-full animate-pulse rounded bg-gray-100"></div>
+									{/each}
+								</div>
+							{:else if users.length === 0}
+								<div class="flex items-center justify-center p-6 text-sm text-gray-500">
+									{userQuery
+										? 'No customers found. Try a different search.'
+										: 'Search for a customer above to get started.'}
+								</div>
+							{:else}
+								<ul class="divide-y divide-gray-200">
+									{#each users as userItem (userItem.id)}
+										<li>
+											<button
+												type="button"
+												class="flex w-full cursor-pointer items-center justify-between px-4 py-3 text-left transition-colors hover:bg-fuchsia-50"
+												onclick={() => selectCustomer(userItem)}
+											>
+												<div>
+													<div class="text-base font-medium">{userItem.fullName}</div>
+													<div class="text-xs text-gray-500">
+														{userItem.email}{#if userItem.email && userItem.phone}
+															&middot;
+														{/if}{userItem.phone}
+													</div>
+												</div>
+											</button>
+										</li>
+									{/each}
+								</ul>
+							{/if}
+						</div>
+
+						{#if searchTotal > 5}
+							<div class="flex items-center justify-between text-xs text-gray-500">
+								<button
+									class="font-medium text-primary disabled:text-gray-300"
+									disabled={currentPage <= 1}
+									onclick={() => goToPage(currentPage - 1)}
+								>
+									&larr; Previous
+								</button>
+								<span>Page {currentPage} of {totalPages}</span>
+								<button
+									class="font-medium text-primary disabled:text-gray-300"
+									disabled={currentPage >= totalPages}
+									onclick={() => goToPage(currentPage + 1)}
+								>
+									Next &rarr;
+								</button>
+							</div>
+						{/if}
+					</div>
+
+					<!-- Tab: Guest / Walk-in -->
+				{:else}
+					<div class="space-y-4">
+						<p class="text-sm text-gray-600">
+							A walk-in customer purchasing a gift card. No details required.
+						</p>
+						<Button onclick={createGuestCustomer} disabled={creatingGuest} class="w-full">
+							{creatingGuest ? 'Creating...' : 'Continue as Guest'}
+						</Button>
+					</div>
+				{/if}
+
+				<div class="flex gap-3 pt-2">
+					<Button variant="ghost" onclick={onClose} class="flex-1">Back</Button>
+				</div>
+			</div>
+		{:else if step === 'payment-selection'}
+			<Dialog.Header>
+				<Dialog.Title>Take Payment</Dialog.Title>
+				<Dialog.Description>
+					Charge {formatCurrency(amount)} for {action === 'create' ? 'gift card' : 'topup'}
+					{#if selectedCustomer}
+						&mdash; {selectedCustomer.name}
+					{/if}.
+				</Dialog.Description>
+			</Dialog.Header>
+
+			<div class="space-y-4 py-4">
+				<div class="flex justify-between rounded-md border border-gray-200 bg-white p-4">
+					<span class="text-base font-semibold text-gray-700">Total</span>
+					<span class="text-xl font-bold text-gray-900">{formatCurrency(amount)}</span>
+				</div>
+
+				<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+					<button
+						type="button"
+						class="rounded-lg border border-input py-6 text-center text-sm font-semibold transition-colors hover:bg-fuchsia-50"
+						onclick={handleCardMachinePayment}
+					>
+						<svg
+							class="mx-auto mb-2 h-8 w-8"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
+							<line x1="1" y1="10" x2="23" y2="10" />
+						</svg>
+						Card Machine
+					</button>
+					<button
+						type="button"
+						class="rounded-lg border border-input py-6 text-center text-sm font-semibold transition-colors hover:bg-fuchsia-50"
+						onclick={() => (step = 'cash-entering')}
+					>
+						<svg
+							class="mx-auto mb-2 h-8 w-8"
+							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>
+						Cash
+					</button>
+					{#if !isGuest && savedCardList.length > 0}
+						<button
+							type="button"
+							class="rounded-lg border border-input py-6 text-center text-sm font-semibold transition-colors hover:bg-fuchsia-50"
+							onclick={() => {
+								fetchSavedCards();
+								step = 'saved-card-selecting';
+							}}
+						>
+							<svg
+								class="mx-auto mb-2 h-8 w-8"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+							>
+								<rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
+								<line x1="1" y1="10" x2="23" y2="10" />
+							</svg>
+							Saved Card
+						</button>
+					{/if}
+					{#if isGuest}
+						<button
+							type="button"
+							class="rounded-lg border border-input py-6 text-center text-sm font-semibold transition-colors hover:bg-fuchsia-50"
+							onclick={() => (step = 'card-details-entering')}
+						>
+							<svg
+								class="mx-auto mb-2 h-8 w-8"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+							>
+								<rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
+								<line x1="1" y1="10" x2="23" y2="10" />
+								<path d="M1 14h22" />
+								<circle cx="7" cy="18" r="1.5" />
+							</svg>
+							Card Details
+						</button>
 					{/if}
 				</div>
 
-			<!-- Tab: Guest / Walk-in -->
-			{:else}
-				<div class="space-y-4">
-					<p class="text-sm text-gray-600">
-						A walk-in customer purchasing a gift card. No details required.
-					</p>
+				<div class="flex gap-3 pt-2">
 					<Button
-						onclick={createGuestCustomer}
-						disabled={creatingGuest}
-						class="w-full"
+						variant="ghost"
+						onclick={() => {
+							step = 'customer-selection';
+							selectedCustomer = null;
+						}}
+						class="flex-1">Back</Button
 					>
-						{creatingGuest ? 'Creating...' : 'Continue as Guest'}
-					</Button>
 				</div>
-			{/if}
-
-			<div class="flex gap-3 pt-2">
-				<Button variant="ghost" onclick={onClose} class="flex-1">Back</Button>
 			</div>
-		</div>
+		{:else if step === 'delivery-selection'}
+			<Dialog.Header>
+				<Dialog.Title>Delivery Method</Dialog.Title>
+				<Dialog.Description>
+					How should {selectedCustomer?.name || 'the customer'} receive their gift card?
+				</Dialog.Description>
+			</Dialog.Header>
 
-	{:else if step === 'payment-selection'}
-		<Dialog.Header>
-			<Dialog.Title>Take Payment</Dialog.Title>
-			<Dialog.Description>
-				Charge {formatCurrency(amount)} for {action === 'create' ? 'gift card' : 'topup'}
-				{#if selectedCustomer}
-					&mdash; {selectedCustomer.name}
-				{/if}.
-			</Dialog.Description>
-		</Dialog.Header>
+			<div class="space-y-4 py-4">
+				<div class="flex justify-between rounded-md border border-gray-200 bg-white p-4">
+					<span class="text-base font-semibold text-gray-700">Total</span>
+					<span class="text-xl font-bold text-gray-900">{formatCurrency(amount)}</span>
+				</div>
 
-		<div class="space-y-4 py-4">
-			<div class="flex justify-between rounded-md border border-gray-200 bg-white p-4">
-				<span class="text-base font-semibold text-gray-700">Total</span>
-				<span class="text-xl font-bold text-gray-900">{formatCurrency(amount)}</span>
-			</div>
-
-			<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
-				<button
-					type="button"
-					class="rounded-lg border py-6 text-center text-sm font-semibold transition-colors hover:bg-fuchsia-50 border-input"
-					onclick={handleCardMachinePayment}
-				>
-					<svg class="mx-auto mb-2 h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-						<rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
-						<line x1="1" y1="10" x2="23" y2="10" />
-					</svg>
-					Card Machine
-				</button>
-				<button
-					type="button"
-					class="rounded-lg border py-6 text-center text-sm font-semibold transition-colors hover:bg-fuchsia-50 border-input"
-					onclick={() => step = 'cash-entering'}
-				>
-					<svg class="mx-auto mb-2 h-8 w-8" 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>
-					Cash
-				</button>
-				{#if !isGuest && savedCardList.length > 0}
+				<div class="grid grid-cols-1 gap-3">
 					<button
 						type="button"
-						class="rounded-lg border py-6 text-center text-sm font-semibold transition-colors hover:bg-fuchsia-50 border-input"
-						onclick={() => { fetchSavedCards(); step = 'saved-card-selecting'; }}
+						class="rounded-lg border border-input px-4 py-6 text-left transition-colors hover:bg-blue-50"
+						onclick={selectDeliveryAccount}
 					>
-						<svg class="mx-auto mb-2 h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-							<rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
-							<line x1="1" y1="10" x2="23" y2="10" />
-						</svg>
-						Saved Card
+						<p class="text-sm font-semibold">Add to Account</p>
+						<p class="mt-1 text-xs text-gray-500">
+							Balance is credited immediately &mdash; no code needed
+						</p>
 					</button>
-				{/if}
-				{#if isGuest}
 					<button
 						type="button"
-						class="rounded-lg border py-6 text-center text-sm font-semibold transition-colors hover:bg-fuchsia-50 border-input"
-						onclick={() => step = 'card-details-entering'}
+						class="rounded-lg border border-input px-4 py-6 text-left transition-colors hover:bg-fuchsia-50"
+						onclick={selectDeliveryCode}
 					>
-						<svg class="mx-auto mb-2 h-8 w-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-							<rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
-							<line x1="1" y1="10" x2="23" y2="10" />
-							<path d="M1 14h22" />
-							<circle cx="7" cy="18" r="1.5" />
-						</svg>
-						Card Details
+						<p class="text-sm font-semibold">Generate Gift Code</p>
+						<p class="mt-1 text-xs text-gray-500">
+							A 12-character code is generated &mdash; share with the customer
+						</p>
 					</button>
-				{/if}
-			</div>
-
-			<div class="flex gap-3 pt-2">
-				<Button variant="ghost" onclick={() => { step = 'customer-selection'; selectedCustomer = null; }} class="flex-1">Back</Button>
-			</div>
-		</div>
-
-	{:else if step === 'delivery-selection'}
-		<Dialog.Header>
-			<Dialog.Title>Delivery Method</Dialog.Title>
-			<Dialog.Description>
-				How should {selectedCustomer?.name || 'the customer'} receive their gift card?
-			</Dialog.Description>
-		</Dialog.Header>
-
-		<div class="space-y-4 py-4">
-			<div class="flex justify-between rounded-md border border-gray-200 bg-white p-4">
-				<span class="text-base font-semibold text-gray-700">Total</span>
-				<span class="text-xl font-bold text-gray-900">{formatCurrency(amount)}</span>
-			</div>
-
-			<div class="grid grid-cols-1 gap-3">
-				<button
-					type="button"
-					class="rounded-lg border py-6 px-4 text-left transition-colors hover:bg-blue-50 border-input"
-					onclick={selectDeliveryAccount}
-				>
-					<p class="text-sm font-semibold">Add to Account</p>
-					<p class="mt-1 text-xs text-gray-500">Balance is credited immediately &mdash; no code needed</p>
-				</button>
-				<button
-					type="button"
-					class="rounded-lg border py-6 px-4 text-left transition-colors hover:bg-fuchsia-50 border-input"
-					onclick={selectDeliveryCode}
-				>
-					<p class="text-sm font-semibold">Generate Gift Code</p>
-					<p class="mt-1 text-xs text-gray-500">A 12-character code is generated &mdash; share with the customer</p>
-				</button>
-			</div>
-
-			<div class="flex gap-3 pt-2">
-				<Button variant="ghost" onclick={() => { step = 'customer-selection'; selectedCustomer = null; }} class="flex-1">Back</Button>
-			</div>
-		</div>
-
-	{:else if step === 'saved-card-selecting'}
-		<Dialog.Header>
-			<Dialog.Title>Saved Cards</Dialog.Title>
-			<Dialog.Description>
-				Select a saved card for {selectedCustomer?.name || 'this customer'}
-			</Dialog.Description>
-		</Dialog.Header>
-
-		<div class="space-y-4 py-4">
-			{#if loadingSavedCards}
-				<div class="flex justify-center py-8">
-					<span class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-primary"></span>
 				</div>
-			{:else if savedCardList.length === 0}
-				<div class="rounded-lg border border-dashed p-6 text-center">
-					<p class="text-sm text-gray-500">No saved cards found for this customer.</p>
+
+				<div class="flex gap-3 pt-2">
+					<Button
+						variant="ghost"
+						onclick={() => {
+							step = 'customer-selection';
+							selectedCustomer = null;
+						}}
+						class="flex-1">Back</Button
+					>
 				</div>
-			{:else}
-				<div class="space-y-2">
-					{#each savedCardList as card (card.id)}
-						<button
-							type="button"
-							class="flex w-full items-center justify-between rounded-lg border p-4 text-left transition-colors hover:bg-gray-50 {selectedSavedCardId === card.id ? 'border-primary bg-primary/5' : 'border-input'}"
-							onclick={() => selectedSavedCardId = card.id}
-						>
-							<div>
-								<span class="text-sm font-medium">{card.card_brand} **** {card.card_last4}</span>
-								{#if card.card_expiry}
-									<span class="ml-2 text-xs text-gray-500">exp {card.card_expiry}</span>
-								{/if}
-							</div>
-							<div class="h-4 w-4 rounded-full border-2 {selectedSavedCardId === card.id ? 'border-primary bg-primary' : 'border-gray-300'}"></div>
-						</button>
-					{/each}
-				</div>
-			{/if}
-
-			<div class="flex gap-3">
-				<Button variant="ghost" onclick={() => { step = 'payment-selection'; selectedSavedCardId = null; }} class="flex-1">Back</Button>
-				<Button onclick={handleSavedCardPayment} class="flex-1" disabled={!selectedSavedCardId || sendingSavedCard}>
-					{sendingSavedCard ? 'Processing...' : `Pay ${formatCurrency(amount)}`}
-				</Button>
 			</div>
-		</div>
+		{:else if step === 'saved-card-selecting'}
+			<Dialog.Header>
+				<Dialog.Title>Saved Cards</Dialog.Title>
+				<Dialog.Description>
+					Select a saved card for {selectedCustomer?.name || 'this customer'}
+				</Dialog.Description>
+			</Dialog.Header>
 
-	{:else}
-		<Dialog.Header>
-			<Dialog.Title>Take Payment</Dialog.Title>
-			<Dialog.Description>
-				Charge {formatCurrency(amount)} for {action === 'create' ? 'gift card' : 'topup'}
-				{#if selectedCustomer}
-					&mdash; {selectedCustomer.name}
-				{/if}.
-			</Dialog.Description>
-		</Dialog.Header>
-
-		<div class="space-y-4 py-4">
-			<div class="flex justify-between rounded-md border border-gray-200 bg-white p-4">
-				<span class="text-base font-semibold text-gray-700">Total</span>
-				<span class="text-xl font-bold text-gray-900">{formatCurrency(amount)}</span>
-			</div>
-
-			{#if step === 'cash-entering'}
-				<div>
-					<label for="cash-amount" class="text-sm font-medium text-gray-700">Cash Received</label>
-					<div class="relative mt-1">
-						<span class="absolute top-1/2 left-3 -translate-y-1/2 text-gray-500">&pound;</span>
-						<Input
-							id="cash-amount"
-							type="text"
-							inputmode="decimal"
-							value={cashAmount}
-							oninput={(e) => cashAmount = (e.target as HTMLInputElement).value}
-							class="pl-7 text-lg font-semibold"
-						/>
+			<div class="space-y-4 py-4">
+				{#if loadingSavedCards}
+					<div class="flex justify-center py-8">
+						<span
+							class="inline-block h-6 w-6 animate-spin rounded-full border-2 border-gray-300 border-t-primary"
+						></span>
 					</div>
-				</div>
-
-				{#if cashEntryComplete}
-					<div class="rounded-md border border-green-200 bg-green-50 p-4">
-						<div class="flex justify-between">
-							<span class="text-sm font-medium text-green-800">Change Due</span>
-							<span class="text-lg font-bold text-green-800">{formatCurrency(changeDue)}</span>
-						</div>
+				{:else if savedCardList.length === 0}
+					<div class="rounded-lg border border-dashed p-6 text-center">
+						<p class="text-sm text-gray-500">No saved cards found for this customer.</p>
+					</div>
+				{:else}
+					<div class="space-y-2">
+						{#each savedCardList as card (card.id)}
+							<button
+								type="button"
+								class="flex w-full items-center justify-between rounded-lg border p-4 text-left transition-colors hover:bg-gray-50 {selectedSavedCardId ===
+								card.id
+									? 'border-primary bg-primary/5'
+									: 'border-input'}"
+								onclick={() => (selectedSavedCardId = card.id)}
+							>
+								<div>
+									<span class="text-sm font-medium">{card.card_brand} **** {card.card_last4}</span>
+									{#if card.card_expiry}
+										<span class="ml-2 text-xs text-gray-500">exp {card.card_expiry}</span>
+									{/if}
+								</div>
+								<div
+									class="h-4 w-4 rounded-full border-2 {selectedSavedCardId === card.id
+										? 'border-primary bg-primary'
+										: 'border-gray-300'}"
+								></div>
+							</button>
+						{/each}
 					</div>
 				{/if}
 
 				<div class="flex gap-3">
-					<Button variant="ghost" onclick={() => step = 'payment-selection'} class="flex-1">Back</Button>
-					<Button onclick={handleCashPayment} class="flex-1" disabled={!cashEntryComplete}>
-						Confirm Cash
+					<Button
+						variant="ghost"
+						onclick={() => {
+							step = 'payment-selection';
+							selectedSavedCardId = null;
+						}}
+						class="flex-1">Back</Button
+					>
+					<Button
+						onclick={handleSavedCardPayment}
+						class="flex-1"
+						disabled={!selectedSavedCardId || sendingSavedCard}
+					>
+						{sendingSavedCard ? 'Processing...' : `Pay ${formatCurrency(amount)}`}
 					</Button>
 				</div>
+			</div>
+		{:else}
+			<Dialog.Header>
+				<Dialog.Title>Take Payment</Dialog.Title>
+				<Dialog.Description>
+					Charge {formatCurrency(amount)} for {action === 'create' ? 'gift card' : 'topup'}
+					{#if selectedCustomer}
+						&mdash; {selectedCustomer.name}
+					{/if}.
+				</Dialog.Description>
+			</Dialog.Header>
 
-			{:else if step === 'cash-confirming'}
-				<div class="flex flex-col items-center justify-center py-8">
-					<div class="mb-4 h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-green-600"></div>
-					<p class="text-lg font-medium text-gray-700">Processing cash payment...</p>
+			<div class="space-y-4 py-4">
+				<div class="flex justify-between rounded-md border border-gray-200 bg-white p-4">
+					<span class="text-base font-semibold text-gray-700">Total</span>
+					<span class="text-xl font-bold text-gray-900">{formatCurrency(amount)}</span>
 				</div>
 
-			{:else if step === 'card-machine'}
-				<div class="flex flex-col items-center justify-center py-8">
-					<div class="mb-4 h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-green-600"></div>
-					<p class="text-lg font-medium text-gray-700">Initiating card machine...</p>
-				</div>
-
-			{:else if step === 'card-polling'}
-				<div class="flex flex-col items-center justify-center py-8">
-					<div class="mb-4 h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-green-600"></div>
-					<p class="text-lg font-medium text-gray-700">Waiting for customer to tap card...</p>
-					<p class="mt-2 text-sm text-gray-500">This may take a few moments</p>
-				</div>
-				<div class="flex gap-3 pt-2">
-					<Button variant="ghost" onclick={resetView} class="flex-1">Cancel</Button>
-				</div>
-
-			{:else if step === 'card-details-entering'}
-				<div class="space-y-4">
-					<div class="rounded-lg border border-gray-100 bg-gray-50 p-4">
-						<h4 class="mb-3 text-sm font-medium text-gray-700">Enter Card Details</h4>
-						<p class="mb-3 text-xs text-gray-500">Card will be charged once — not saved.</p>
-						<div class="space-y-3">
-							<div>
-								<label for="till-card-number" class="text-sm font-medium text-gray-700">Card Number</label>
-								<Input
-									id="till-card-number"
-									type="text"
-									inputmode="numeric"
-									value={ephemeralCardNumber}
-									oninput={handleEphemeralCardNumberInput}
-									placeholder="1234 5678 9012 3456"
-									maxlength={19}
-									class="mt-1"
-								/>
-							</div>
-							<div class="grid grid-cols-2 gap-3">
-								<div>
-									<label for="till-card-expiry" class="text-sm font-medium text-gray-700">Expiry (MM/YY)</label>
-									<Input
-										id="till-card-expiry"
-										type="text"
-										inputmode="numeric"
-										value={ephemeralCardExpiry}
-										oninput={handleEphemeralExpiryInput}
-										placeholder="MM/YY"
-										maxlength={5}
-										class="mt-1"
-									/>
-								</div>
-								<div>
-									<label for="till-card-cvc" class="text-sm font-medium text-gray-700">CVC</label>
-									<Input
-										id="till-card-cvc"
-										type="text"
-										inputmode="numeric"
-										value={ephemeralCardCVC}
-										oninput={handleEphemeralCvcInput}
-										placeholder="123"
-										maxlength={4}
-										class="mt-1"
-									/>
-								</div>
-							</div>
-							{#if ephemeralCardError}
-								<div class="text-xs font-semibold text-red-500">{ephemeralCardError}</div>
-							{/if}
+				{#if step === 'cash-entering'}
+					<div>
+						<label for="cash-amount" class="text-sm font-medium text-gray-700">Cash Received</label>
+						<div class="relative mt-1">
+							<span class="absolute top-1/2 left-3 -translate-y-1/2 text-gray-500">&pound;</span>
+							<Input
+								id="cash-amount"
+								type="text"
+								inputmode="decimal"
+								value={cashAmount}
+								oninput={(e) => (cashAmount = (e.target as HTMLInputElement).value)}
+								class="pl-7 text-lg font-semibold"
+							/>
 						</div>
 					</div>
+
+					{#if cashEntryComplete}
+						<div class="rounded-md border border-green-200 bg-green-50 p-4">
+							<div class="flex justify-between">
+								<span class="text-sm font-medium text-green-800">Change Due</span>
+								<span class="text-lg font-bold text-green-800">{formatCurrency(changeDue)}</span>
+							</div>
+						</div>
+					{/if}
+
 					<div class="flex gap-3">
-						<Button variant="ghost" onclick={() => step = 'payment-selection'} class="flex-1">Back</Button>
-						<Button onclick={handleEphemeralCardPayment} class="flex-1" disabled={!isEphemeralCardValid || sendingEphemeralCard}>
-							{sendingEphemeralCard ? 'Processing...' : `Pay ${formatCurrency(amount)}`}
+						<Button variant="ghost" onclick={() => (step = 'payment-selection')} class="flex-1"
+							>Back</Button
+						>
+						<Button onclick={handleCashPayment} class="flex-1" disabled={!cashEntryComplete}>
+							Confirm Cash
 						</Button>
 					</div>
-				</div>
-			{/if}
-		</div>
-	{/if}
-</Dialog.Content>
+				{:else if step === 'cash-confirming'}
+					<div class="flex flex-col items-center justify-center py-8">
+						<div
+							class="mb-4 h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-green-600"
+						></div>
+						<p class="text-lg font-medium text-gray-700">Processing cash payment...</p>
+					</div>
+				{:else if step === 'card-machine'}
+					<div class="flex flex-col items-center justify-center py-8">
+						<div
+							class="mb-4 h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-green-600"
+						></div>
+						<p class="text-lg font-medium text-gray-700">Initiating card machine...</p>
+					</div>
+				{:else if step === 'card-polling'}
+					<div class="flex flex-col items-center justify-center py-8">
+						<div
+							class="mb-4 h-12 w-12 animate-spin rounded-full border-4 border-gray-200 border-t-green-600"
+						></div>
+						<p class="text-lg font-medium text-gray-700">Waiting for customer to tap card...</p>
+						<p class="mt-2 text-sm text-gray-500">This may take a few moments</p>
+					</div>
+					<div class="flex gap-3 pt-2">
+						<Button variant="ghost" onclick={resetView} class="flex-1">Cancel</Button>
+					</div>
+				{:else if step === 'card-details-entering'}
+					<div class="space-y-4">
+						<div class="rounded-lg border border-gray-100 bg-gray-50 p-4">
+							<h4 class="mb-3 text-sm font-medium text-gray-700">Enter Card Details</h4>
+							<p class="mb-3 text-xs text-gray-500">Card will be charged once — not saved.</p>
+							<div class="space-y-3">
+								<div>
+									<label for="till-card-number" class="text-sm font-medium text-gray-700"
+										>Card Number</label
+									>
+									<Input
+										id="till-card-number"
+										type="text"
+										inputmode="numeric"
+										value={ephemeralCardNumber}
+										oninput={handleEphemeralCardNumberInput}
+										placeholder="1234 5678 9012 3456"
+										maxlength={19}
+										class="mt-1"
+									/>
+								</div>
+								<div class="grid grid-cols-2 gap-3">
+									<div>
+										<label for="till-card-expiry" class="text-sm font-medium text-gray-700"
+											>Expiry (MM/YY)</label
+										>
+										<Input
+											id="till-card-expiry"
+											type="text"
+											inputmode="numeric"
+											value={ephemeralCardExpiry}
+											oninput={handleEphemeralExpiryInput}
+											placeholder="MM/YY"
+											maxlength={5}
+											class="mt-1"
+										/>
+									</div>
+									<div>
+										<label for="till-card-cvc" class="text-sm font-medium text-gray-700">CVC</label>
+										<Input
+											id="till-card-cvc"
+											type="text"
+											inputmode="numeric"
+											value={ephemeralCardCVC}
+											oninput={handleEphemeralCvcInput}
+											placeholder="123"
+											maxlength={4}
+											class="mt-1"
+										/>
+									</div>
+								</div>
+								{#if ephemeralCardError}
+									<div class="text-xs font-semibold text-red-500">{ephemeralCardError}</div>
+								{/if}
+							</div>
+						</div>
+						<div class="flex gap-3">
+							<Button variant="ghost" onclick={() => (step = 'payment-selection')} class="flex-1"
+								>Back</Button
+							>
+							<Button
+								onclick={handleEphemeralCardPayment}
+								class="flex-1"
+								disabled={!isEphemeralCardValid || sendingEphemeralCard}
+							>
+								{sendingEphemeralCard ? 'Processing...' : `Pay ${formatCurrency(amount)}`}
+							</Button>
+						</div>
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</Dialog.Content>
 </Dialog.Root>
diff --git a/frontend/src/routes/account/+page.svelte b/frontend/src/routes/account/+page.svelte
index 9db31e3..8a933a3 100644
--- a/frontend/src/routes/account/+page.svelte
+++ b/frontend/src/routes/account/+page.svelte
@@ -5,6 +5,8 @@
 	import { browser } from '$app/environment';
 	import { toast } from 'svelte-sonner';
 	import UserBookingModal from '$lib/components/account/UserBookingModal.svelte';
+	import { isValidUKPhone, formatPhoneDisplay, toE164UK } from '$lib/utils/phone';
+	import { savedCardsStore } from '$lib/stores/savedCards.svelte';
 
 	// zxcvbn-ts imports
 	import { zxcvbn, zxcvbnOptions } from '@zxcvbn-ts/core';
@@ -327,7 +329,11 @@
 			if (buySelectedCard) {
 				cardId = buySelectedCard;
 			} else if (buyNewCardNumber) {
-				if (!isValidLuhn(buyNewCardNumber) || !/^\d{2}\/\d{2}$/.test(buyNewCardExpiry) || buyNewCardCVC.length < 3) {
+				if (
+					!isValidLuhn(buyNewCardNumber) ||
+					!/^\d{2}\/\d{2}$/.test(buyNewCardExpiry) ||
+					buyNewCardCVC.length < 3
+				) {
 					toast.error('Please enter valid credit card details');
 					buyingGiftCard = false;
 					return;
@@ -421,15 +427,19 @@
 
 	function handleGiftCardInput(e: Event) {
 		const input = e.target as HTMLInputElement;
-		const formatted = formatAndPreserveCursor(input, (val) => {
-			let raw = val.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
-			if (raw.length > 12) raw = raw.slice(0, 12);
-			let clean = '';
-			if (raw.length > 0) clean += raw.slice(0, 4);
-			if (raw.length > 4) clean += '-' + raw.slice(4, 8);
-			if (raw.length > 8) clean += '-' + raw.slice(8, 12);
-			return clean;
-		}, /[a-zA-Z0-9]/);
+		const formatted = formatAndPreserveCursor(
+			input,
+			(val) => {
+				let raw = val.replace(/[^a-zA-Z0-9]/g, '').toLowerCase();
+				if (raw.length > 12) raw = raw.slice(0, 12);
+				let clean = '';
+				if (raw.length > 0) clean += raw.slice(0, 4);
+				if (raw.length > 4) clean += '-' + raw.slice(4, 8);
+				if (raw.length > 8) clean += '-' + raw.slice(8, 12);
+				return clean;
+			},
+			/[a-zA-Z0-9]/
+		);
 		giftCardCode = formatted;
 	}
 
@@ -447,7 +457,13 @@
 		const raw = id.toLowerCase().replace(/[^a-z0-9]/g, '');
 		if (raw.length <= 4) return raw.toUpperCase();
 		if (raw.length <= 8) return raw.slice(0, 4).toUpperCase() + '-' + raw.slice(4, 8).toUpperCase();
-		return raw.slice(0, 4).toUpperCase() + '-' + raw.slice(4, 8).toUpperCase() + '-' + raw.slice(8, 12).toUpperCase();
+		return (
+			raw.slice(0, 4).toUpperCase() +
+			'-' +
+			raw.slice(4, 8).toUpperCase() +
+			'-' +
+			raw.slice(8, 12).toUpperCase()
+		);
 	}
 
 	function isValidLuhn(cardNumber: string): boolean {
@@ -494,7 +510,9 @@
 
 	function handleCvcInput(e: Event) {
 		const input = e.target as HTMLInputElement;
-		const formatted = formatAndPreserveCursor(input, (val) => val.replace(/\D/g, '').substring(0, 4));
+		const formatted = formatAndPreserveCursor(input, (val) =>
+			val.replace(/\D/g, '').substring(0, 4)
+		);
 		newCardCVC = formatted;
 	}
 
@@ -513,7 +531,9 @@
 
 	function handleBuyCvcInput(e: Event) {
 		const input = e.target as HTMLInputElement;
-		const formatted = formatAndPreserveCursor(input, (val) => val.replace(/\D/g, '').substring(0, 4));
+		const formatted = formatAndPreserveCursor(input, (val) =>
+			val.replace(/\D/g, '').substring(0, 4)
+		);
 		buyNewCardCVC = formatted;
 	}
 
@@ -536,7 +556,11 @@
 	}
 
 	async function addCard() {
-		if (!isValidLuhn(newCardNumber) || !/^\d{2}\/\d{2}$/.test(newCardExpiry) || newCardCVC.length < 3) {
+		if (
+			!isValidLuhn(newCardNumber) ||
+			!/^\d{2}\/\d{2}$/.test(newCardExpiry) ||
+			newCardCVC.length < 3
+		) {
 			toast.error('Please fill in all card details correctly');
 			return;
 		}
@@ -722,40 +746,11 @@
 
 	// Phone validation (UK format)
 	function validatePhone(phone: string): boolean {
-		if (!phone) {
-			phoneError = '';
-			return true;
-		}
-		const cleanPhone = phone.replace(/[\s\-()]/g, '');
-		// UK phone regex: +44 followed by 10-11 digits, or 0 followed by 10-11 digits
-		const phoneRegex = /^(\+44[1-9]\d{9,10}|0[1-9]\d{9,10})$/;
-		const isValid = phoneRegex.test(cleanPhone);
-		phoneError = isValid ? '' : 'Invalid UK phone number';
-		return isValid;
+		return isValidUKPhone(phone);
 	}
 
-	// Format phone number as user types
 	function formatPhoneInput(value: string): string {
-		// Remove all non-digits except +
-		const digits = value.replace(/[^\d+]/g, '');
-		// Format UK numbers
-		if (digits.startsWith('+44')) {
-			return digits; // Keep +44 as is
-		}
-		if (digits.startsWith('44')) {
-			return '+' + digits;
-		}
-		if (digits.startsWith('0')) {
-			// Format 07xx xxx xxxx
-			if (digits.length <= 5) {
-				return digits;
-			}
-			if (digits.length <= 10) {
-				return digits.slice(0, 5) + ' ' + digits.slice(5);
-			}
-			return digits.slice(0, 5) + ' ' + digits.slice(5, 10) + ' ' + digits.slice(10, 12);
-		}
-		return digits;
+		return formatPhoneDisplay(phone);
 	}
 
 	function startEditPhone() {
@@ -771,8 +766,8 @@
 	}
 
 	async function savePhone() {
-		const formattedPhone = phoneInput.replace(/[\s\-()]/g, '');
-		if (!validatePhone(formattedPhone)) {
+		const formattedPhone = toE164UK(phoneInput);
+		if (!formattedPhone) {
 			return;
 		}
 
@@ -789,7 +784,7 @@
 				body: JSON.stringify({
 					firstName: userData?.firstName,
 					lastName: userData?.lastName,
-					phone: formattedPhone
+					phone: formattedPhone // already E.164 from toE164UK
 				})
 			});
 
@@ -1121,13 +1116,20 @@
 
 <svelte:head>
 	<script>
-		(function() {
+		(function () {
 			try {
 				var token = localStorage.getItem('authToken');
-				if (!token) { window.location.replace('/login'); return; }
+				if (!token) {
+					window.location.replace('/login');
+					return;
+				}
 				var payload = JSON.parse(atob(token.split('.')[1]));
-				if (payload.exp * 1000 <= Date.now()) { window.location.replace('/login'); }
-			} catch(e) { window.location.replace('/login'); }
+				if (payload.exp * 1000 <= Date.now()) {
+					window.location.replace('/login');
+				}
+			} catch (e) {
+				window.location.replace('/login');
+			}
 		})();
 	</script>
 	<style>
@@ -1807,7 +1809,7 @@
 											</div>
 										</div>
 										{#if addCardError}
-											<div class="text-xs font-semibold text-red-500 mt-1">{addCardError}</div>
+											<div class="mt-1 text-xs font-semibold text-red-500">{addCardError}</div>
 										{/if}
 									</div>
 								</div>
@@ -1823,7 +1825,11 @@
 									>
 										Cancel
 									</Button>
-									<Button onclick={addCard} loading={addingCard} disabled={addingCard || !isAddCardValid}>
+									<Button
+										onclick={addCard}
+										loading={addingCard}
+										disabled={addingCard || !isAddCardValid}
+									>
 										Add Card
 									</Button>
 								</div>
@@ -1856,7 +1862,10 @@
 											size="sm"
 											variant="ghost"
 											class="text-red-600 hover:bg-red-50 hover:text-red-700"
-											onclick={() => { cardToDelete = card; showDeleteCardDialog = true; }}
+											onclick={() => {
+												cardToDelete = card;
+												showDeleteCardDialog = true;
+											}}
 										>
 											Remove
 										</Button>
@@ -1876,17 +1885,32 @@
 					<Card.Root>
 						<Card.Header>
 							<Card.Title class="flex items-center gap-2">
-								<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-									<path stroke-linecap="round" stroke-linejoin="round" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+									stroke-width="2"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"
+									/>
 								</svg>
 								Redeem Gift Card
 							</Card.Title>
-							<Card.Description>Redeem a gift card directly to your account balance.</Card.Description>
+							<Card.Description
+								>Redeem a gift card directly to your account balance.</Card.Description
+							>
 						</Card.Header>
 						<Card.Content class="space-y-4">
-							<div class="rounded-lg bg-accent p-4 flex justify-between items-center">
+							<div class="flex items-center justify-between rounded-lg bg-accent p-4">
 								<div>
-									<div class="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Your Balance</div>
+									<div class="text-xs font-semibold tracking-wider text-muted-foreground uppercase">
+										Your Balance
+									</div>
 									<div class="mt-1 text-2xl font-bold text-card-foreground">
 										{loadingBalance ? '...' : formatCurrency(giftCardBalance)}
 									</div>
@@ -1894,7 +1918,9 @@
 							</div>
 
 							<div class="space-y-2">
-								<label for="redeem-code" class="text-sm font-medium text-gray-700">Enter Gift Card Code</label>
+								<label for="redeem-code" class="text-sm font-medium text-gray-700"
+									>Enter Gift Card Code</label
+								>
 								<div class="flex gap-2">
 									<Input
 										id="redeem-code"
@@ -1907,7 +1933,8 @@
 									/>
 									<Button
 										onclick={redeemGiftCard}
-										disabled={redeemingGiftCard || giftCardCode.replace(/[^a-zA-Z0-9]/g, '').length !== 12}
+										disabled={redeemingGiftCard ||
+											giftCardCode.replace(/[^a-zA-Z0-9]/g, '').length !== 12}
 									>
 										{redeemingGiftCard ? 'Redeeming...' : 'Redeem'}
 									</Button>
@@ -1920,53 +1947,80 @@
 					<Card.Root>
 						<Card.Header>
 							<Card.Title class="flex items-center gap-2">
-								<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="h-5 w-5"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke="currentColor"
+									stroke-width="2"
+								>
 									<rect x="2" y="5" width="20" height="14" rx="2" ry="2" />
 									<line x1="2" y1="10" x2="22" y2="10" />
 								</svg>
 								Buy a Gift Card
 							</Card.Title>
-							<Card.Description>Purchase a gift card online for yourself or a friend.</Card.Description>
+							<Card.Description
+								>Purchase a gift card online for yourself or a friend.</Card.Description
+							>
 						</Card.Header>
 						<Card.Content class="space-y-4">
 							{#if purchaseResultCode}
-								<div class="rounded-lg border border-green-100 bg-green-50 p-4 space-y-3">
-									<div class="text-sm font-medium text-green-800 flex items-center gap-2">
-										<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" viewBox="0 0 20 20" fill="currentColor">
-											<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+								<div class="space-y-3 rounded-lg border border-green-100 bg-green-50 p-4">
+									<div class="flex items-center gap-2 text-sm font-medium text-green-800">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											class="h-5 w-5 text-green-600"
+											viewBox="0 0 20 20"
+											fill="currentColor"
+										>
+											<path
+												fill-rule="evenodd"
+												d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+												clip-rule="evenodd"
+											/>
 										</svg>
 										Purchase Successful!
 									</div>
 									{#if buyRecipientType === 'self'}
 										<p class="text-xs text-green-700">
-											Your purchase of <strong>{formatCurrency(buyAmount)}</strong> has been automatically added to your account balance!
+											Your purchase of <strong>{formatCurrency(buyAmount)}</strong> has been automatically
+											added to your account balance!
 										</p>
 									{:else}
-										<p class="text-xs text-green-700">
-											Here is your gift card code:
-										</p>
-										<div class="text-center py-2 bg-white rounded border border-green-200 font-mono font-bold text-lg tracking-wider text-green-800">
+										<p class="text-xs text-green-700">Here is your gift card code:</p>
+										<div
+											class="rounded border border-green-200 bg-white py-2 text-center font-mono text-lg font-bold tracking-wider text-green-800"
+										>
 											{formatCardCode(purchaseResultCode)}
 										</div>
 										<p class="text-[10px] text-green-600 italic">
 											Please save this code! It has been emailed to the recipient.
 										</p>
 									{/if}
-									<Button size="sm" variant="outline" onclick={() => purchaseResultCode = null} class="w-full">
+									<Button
+										size="sm"
+										variant="outline"
+										onclick={() => (purchaseResultCode = null)}
+										class="w-full"
+									>
 										Buy Another Card
 									</Button>
 								</div>
 							{:else}
 								<div class="space-y-2">
-									<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider block">Select Value</span>
+									<span class="block text-xs font-semibold tracking-wider text-gray-500 uppercase"
+										>Select Value</span
+									>
 									<div class="grid grid-cols-3 gap-2">
 										{#each [10, 20, 50] as amount}
 											<button
 												type="button"
-												class="rounded-lg border py-2.5 text-center text-sm font-semibold transition-colors {buyAmount === amount
+												class="rounded-lg border py-2.5 text-center text-sm font-semibold transition-colors {buyAmount ===
+												amount
 													? 'border-input bg-accent text-card-foreground'
 													: 'border-gray-200 hover:bg-gray-50'}"
-												onclick={() => buyAmount = amount as 10 | 20 | 50}
+												onclick={() => (buyAmount = amount as 10 | 20 | 50)}
 											>
 												{formatCurrency(amount)}
 											</button>
@@ -1975,23 +2029,27 @@
 								</div>
 
 								<div class="space-y-2">
-									<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider block">Recipient</span>
+									<span class="block text-xs font-semibold tracking-wider text-gray-500 uppercase"
+										>Recipient</span
+									>
 									<div class="grid grid-cols-2 gap-2">
 										<button
 											type="button"
-											class="rounded-lg border py-2 text-center text-xs font-medium transition-colors {buyRecipientType === 'self'
+											class="rounded-lg border py-2 text-center text-xs font-medium transition-colors {buyRecipientType ===
+											'self'
 												? 'border-input bg-accent text-card-foreground'
 												: 'border-gray-200 hover:bg-gray-50'}"
-											onclick={() => buyRecipientType = 'self'}
+											onclick={() => (buyRecipientType = 'self')}
 										>
 											For Myself (Auto-Redeem)
 										</button>
 										<button
 											type="button"
-											class="rounded-lg border py-2 text-center text-xs font-medium transition-colors {buyRecipientType === 'friend'
+											class="rounded-lg border py-2 text-center text-xs font-medium transition-colors {buyRecipientType ===
+											'friend'
 												? 'border-input bg-accent text-card-foreground'
 												: 'border-gray-200 hover:bg-gray-50'}"
-											onclick={() => buyRecipientType = 'friend'}
+											onclick={() => (buyRecipientType = 'friend')}
 										>
 											For a Friend (Gift Code)
 										</button>
@@ -2000,7 +2058,9 @@
 
 								{#if buyRecipientType === 'friend'}
 									<div class="space-y-2">
-										<label for="recipient-email" class="text-sm font-medium text-gray-700">Friend's Email (Optional)</label>
+										<label for="recipient-email" class="text-sm font-medium text-gray-700"
+											>Friend's Email (Optional)</label
+										>
 										<Input
 											id="recipient-email"
 											type="email"
@@ -2011,25 +2071,34 @@
 									</div>
 								{/if}
 
-								<div class="space-y-3 pt-2 border-t">
-									<span class="text-xs font-semibold text-gray-500 uppercase tracking-wider block">Payment Method</span>
+								<div class="space-y-3 border-t pt-2">
+									<span class="block text-xs font-semibold tracking-wider text-gray-500 uppercase"
+										>Payment Method</span
+									>
 									{#if savedCards.length > 0}
 										<div class="space-y-2">
 											{#each savedCards as card (card.id)}
 												<button
 													type="button"
-													class="flex w-full items-center justify-between rounded-lg border p-3 text-left {buySelectedCard === card.id
+													class="flex w-full items-center justify-between rounded-lg border p-3 text-left {buySelectedCard ===
+													card.id
 														? 'border-input bg-accent'
 														: 'border-gray-200 hover:bg-gray-50'}"
-													onclick={() => { buySelectedCard = card.id; }}
+													onclick={() => {
+														buySelectedCard = card.id;
+													}}
 												>
 													<div class="flex items-center gap-3">
-														<div class="flex h-8 min-w-12 items-center justify-center rounded bg-gray-100 px-2 text-xs font-medium uppercase text-gray-700">
+														<div
+															class="flex h-8 min-w-12 items-center justify-center rounded bg-gray-100 px-2 text-xs font-medium text-gray-700 uppercase"
+														>
 															{card.brand}
 														</div>
 														<div class="text-sm">
 															<span class="font-mono">**** {card.last_4}</span>
-															<span class="ml-2 text-gray-400 text-xs">Exp {String(card.exp_month).padStart(2, '0')}/{card.exp_year}</span>
+															<span class="ml-2 text-xs text-gray-400"
+																>Exp {String(card.exp_month).padStart(2, '0')}/{card.exp_year}</span
+															>
 														</div>
 													</div>
 													{#if buySelectedCard === card.id}
@@ -2039,14 +2108,23 @@
 											{/each}
 											<button
 												type="button"
-												class="flex w-full items-center justify-between rounded-lg border p-3 text-left {buySelectedCard === ''
+												class="flex w-full items-center justify-between rounded-lg border p-3 text-left {buySelectedCard ===
+												''
 													? 'border-input bg-accent'
 													: 'border-gray-200 hover:bg-gray-50'}"
-												onclick={() => { buySelectedCard = ''; }}
+												onclick={() => {
+													buySelectedCard = '';
+												}}
 											>
 												<div class="flex items-center gap-3">
-													<div class="flex h-8 min-w-12 items-center justify-center rounded border-dashed border border-gray-300 text-xs font-medium text-gray-400">NEW</div>
-													<span class="text-sm font-medium text-gray-700 animate-pulse">Use a new card</span>
+													<div
+														class="flex h-8 min-w-12 items-center justify-center rounded border border-dashed border-gray-300 text-xs font-medium text-gray-400"
+													>
+														NEW
+													</div>
+													<span class="animate-pulse text-sm font-medium text-gray-700"
+														>Use a new card</span
+													>
 												</div>
 												{#if buySelectedCard === ''}
 													<span class="text-xs font-semibold text-primary">Selected</span>
@@ -2056,27 +2134,64 @@
 									{/if}
 
 									{#if buySelectedCard === ''}
-										<div class="space-y-3 bg-gray-50 p-3 rounded-lg border">
+										<div class="space-y-3 rounded-lg border bg-gray-50 p-3">
 											<div>
-												<label for="buy-card-num" class="text-xs font-medium text-gray-600">Card Number</label>
-												<Input id="buy-card-num" type="text" inputmode="numeric" placeholder="1234 5678 9012 3456" value={buyNewCardNumber} oninput={handleBuyCardNumberInput} maxlength={19} class="h-8 text-xs mt-1 bg-white" />
+												<label for="buy-card-num" class="text-xs font-medium text-gray-600"
+													>Card Number</label
+												>
+												<Input
+													id="buy-card-num"
+													type="text"
+													inputmode="numeric"
+													placeholder="1234 5678 9012 3456"
+													value={buyNewCardNumber}
+													oninput={handleBuyCardNumberInput}
+													maxlength={19}
+													class="mt-1 h-8 bg-white text-xs"
+												/>
 											</div>
 											<div class="grid grid-cols-2 gap-3">
 												<div>
-													<label for="buy-card-exp" class="text-xs font-medium text-gray-600">Expiry (MM/YY)</label>
-													<Input id="buy-card-exp" type="text" inputmode="numeric" placeholder="MM/YY" value={buyNewCardExpiry} oninput={handleBuyExpiryInput} maxlength={5} class="h-8 text-xs mt-1 bg-white" />
+													<label for="buy-card-exp" class="text-xs font-medium text-gray-600"
+														>Expiry (MM/YY)</label
+													>
+													<Input
+														id="buy-card-exp"
+														type="text"
+														inputmode="numeric"
+														placeholder="MM/YY"
+														value={buyNewCardExpiry}
+														oninput={handleBuyExpiryInput}
+														maxlength={5}
+														class="mt-1 h-8 bg-white text-xs"
+													/>
 												</div>
 												<div>
-													<label for="buy-card-cvc" class="text-xs font-medium text-gray-600">CVC</label>
-													<Input id="buy-card-cvc" type="text" inputmode="numeric" placeholder="123" value={buyNewCardCVC} oninput={handleBuyCvcInput} maxlength={4} class="h-8 text-xs mt-1 bg-white" />
+													<label for="buy-card-cvc" class="text-xs font-medium text-gray-600"
+														>CVC</label
+													>
+													<Input
+														id="buy-card-cvc"
+														type="text"
+														inputmode="numeric"
+														placeholder="123"
+														value={buyNewCardCVC}
+														oninput={handleBuyCvcInput}
+														maxlength={4}
+														class="mt-1 h-8 bg-white text-xs"
+													/>
 												</div>
 											</div>
 											{#if buyCardError}
-												<div class="text-[10px] font-semibold text-red-500 mt-1">{buyCardError}</div>
+												<div class="mt-1 text-[10px] font-semibold text-red-500">
+													{buyCardError}
+												</div>
 											{/if}
 											<div class="flex items-center gap-2 pt-1">
 												<Checkbox id="buy-save-card" bind:checked={buySaveCard} />
-												<label for="buy-save-card" class="text-[10px] text-gray-500">Save card for future purchases</label>
+												<label for="buy-save-card" class="text-[10px] text-gray-500"
+													>Save card for future purchases</label
+												>
 											</div>
 										</div>
 									{/if}
@@ -2085,7 +2200,7 @@
 								<Button
 									onclick={buyGiftCard}
 									disabled={buyingGiftCard || !isBuyCardValid}
-									class="w-full mt-2"
+									class="mt-2 w-full"
 								>
 									{buyingGiftCard ? 'Processing Payment...' : `Pay ${formatCurrency(buyAmount)}`}
 								</Button>
@@ -2132,10 +2247,17 @@
 								View and export all personal data we hold about you
 							</p>
 							<Button onclick={() => goto('/gdpr')} variant="outline">
-								<svg xmlns="http://www.w3.org/2000/svg" class="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-									<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-									<polyline points="7 10 12 15 17 10"/>
-									<line x1="12" y1="15" x2="12" y2="3"/>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									class="mr-2 h-4 w-4"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+								>
+									<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+									<polyline points="7 10 12 15 17 10" />
+									<line x1="12" y1="15" x2="12" y2="3" />
 								</svg>
 								Export My Data
 							</Button>
@@ -2294,51 +2416,51 @@
 				</button>
 
 				{#if authStore.currentUser?.role !== 'admin'}
-				<button
-					class="flex-1 rounded-md px-2 py-2 text-xs font-medium transition-colors {activeTab ===
-					'history'
-						? 'bg-white text-gray-900 shadow-sm'
-						: 'text-gray-600 hover:text-gray-900'}"
-					onclick={(_) => (activeTab = 'history')}
-				>
-					<svg
-						class="mx-auto mb-1 h-4 w-4"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
+					<button
+						class="flex-1 rounded-md px-2 py-2 text-xs font-medium transition-colors {activeTab ===
+						'history'
+							? 'bg-white text-gray-900 shadow-sm'
+							: 'text-gray-600 hover:text-gray-900'}"
+						onclick={(_) => (activeTab = 'history')}
 					>
-						<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
-						<line x1="16" y1="2" x2="16" y2="6" />
-						<line x1="8" y1="2" x2="8" y2="6" />
-						<line x1="3" y1="10" x2="21" y2="10" />
-					</svg>
-					History
-				</button>
+						<svg
+							class="mx-auto mb-1 h-4 w-4"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
+							<line x1="16" y1="2" x2="16" y2="6" />
+							<line x1="8" y1="2" x2="8" y2="6" />
+							<line x1="3" y1="10" x2="21" y2="10" />
+						</svg>
+						History
+					</button>
 				{/if}
 
 				{#if authStore.currentUser?.role !== 'admin'}
-				<button
-					class="flex-1 rounded-md px-2 py-2 text-xs font-medium transition-colors {activeTab ===
-					'referral'
-						? 'bg-white text-gray-900 shadow-sm'
-						: 'text-gray-600 hover:text-gray-900'}"
-					onclick={(_) => (activeTab = 'referral')}
-				>
-					<svg
-						class="mx-auto mb-1 h-4 w-4"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
+					<button
+						class="flex-1 rounded-md px-2 py-2 text-xs font-medium transition-colors {activeTab ===
+						'referral'
+							? 'bg-white text-gray-900 shadow-sm'
+							: 'text-gray-600 hover:text-gray-900'}"
+						onclick={(_) => (activeTab = 'referral')}
 					>
-						<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-						<circle cx="9" cy="7" r="4" />
-						<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
-						<path d="M16 3.13a4 4 0 0 1 0 7.75" />
-					</svg>
-					Referral
-				</button>
+						<svg
+							class="mx-auto mb-1 h-4 w-4"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+						>
+							<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+							<circle cx="9" cy="7" r="4" />
+							<path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+							<path d="M16 3.13a4 4 0 0 1 0 7.75" />
+						</svg>
+						Referral
+					</button>
 				{/if}
 
 				{#if canSaveCards}
@@ -2528,7 +2650,9 @@
 	<!-- Delete Saved Card Confirmation -->
 	<AlertDialog.Root
 		bind:open={showDeleteCardDialog}
-		onOpenChange={(open) => { if (!open) cardToDelete = null; }}
+		onOpenChange={(open) => {
+			if (!open) cardToDelete = null;
+		}}
 	>
 		<AlertDialog.Content>
 			<AlertDialog.Header>
@@ -2541,10 +2665,11 @@
 				</AlertDialog.Description>
 			</AlertDialog.Header>
 			<AlertDialog.Footer>
-				<AlertDialog.Cancel onclick={() => cardToDelete = null}>
-					Cancel
-				</AlertDialog.Cancel>
-				<AlertDialog.Action onclick={() => cardToDelete && deleteCard(cardToDelete)} class="bg-red-600 hover:bg-red-700">
+				<AlertDialog.Cancel onclick={() => (cardToDelete = null)}>Cancel</AlertDialog.Cancel>
+				<AlertDialog.Action
+					onclick={() => cardToDelete && deleteCard(cardToDelete)}
+					class="bg-red-600 hover:bg-red-700"
+				>
 					Remove
 				</AlertDialog.Action>
 			</AlertDialog.Footer>
diff --git a/frontend/src/routes/login/+page.svelte b/frontend/src/routes/login/+page.svelte
index fb09439..f40bc0c 100644
--- a/frontend/src/routes/login/+page.svelte
+++ b/frontend/src/routes/login/+page.svelte
@@ -6,6 +6,7 @@
 	import { Separator } from '$lib/components/ui/separator/index.js';
 	import { Checkbox } from '$lib/components/ui/checkbox/index.js';
 	import RequiredLabel from '$lib/components/layout/RequiredLabel.svelte';
+	import { isValidUKPhone, formatPhoneDisplay, toE164UK } from '$lib/utils/phone';
 	import { SvelteDate } from 'svelte/reactivity';
 
 	// zxcvbn-ts imports
@@ -96,60 +97,18 @@
 		}
 	}
 
-	// Phone validation (UK format)
 	function validatePhone(phone: string): boolean {
-		if (!phone) {
-			validationErrors.phone = '';
-			return true;
-		}
-
-		// Remove spaces, hyphens, parentheses for validation
-		const cleanPhone = phone.replace(/[\s\-()]/g, '');
-
-		// UK phone regex: +44 followed by 10-11 digits, or 0 followed by 10-11 digits
-		const phoneRegex = /^(\+44[1-9]\d{9,10}|0[1-9]\d{9,10})$/;
-		const isValid = phoneRegex.test(cleanPhone);
-		validationErrors.phone = isValid ? '' : 'Invalid UK phone number';
-		return isValid;
+		return isValidUKPhone(phone);
 	}
 
-	// Format phone number as user types
 	function formatPhoneInput(value: string): string {
-		// Remove all non-digit and non-plus characters
-		let cleaned = value.replace(/[^\d+]/g, '');
-
-		// If it starts with +44, format as +44 XXXX XXXXXX
-		if (cleaned.startsWith('+44')) {
-			const digits = cleaned.slice(3);
-			if (digits.length <= 4) return `+44 ${digits}`;
-			if (digits.length <= 10) return `+44 ${digits.slice(0, 4)} ${digits.slice(4)}`;
-			return `+44 ${digits.slice(0, 4)} ${digits.slice(4, 10)}`;
-		}
-
-		// If it starts with 0, format as 0XXXX XXXXXX
-		if (cleaned.startsWith('0')) {
-			if (cleaned.length <= 5) return cleaned;
-			return `${cleaned.slice(0, 5)} ${cleaned.slice(5, 11)}`;
-		}
-
-		return cleaned;
+		return formatPhoneDisplay(value);
 	}
 
-	// Handle phone input
 	function handlePhoneInput(e: Event) {
 		const target = e.target as HTMLInputElement;
-		const cursorPos = target.selectionStart || 0;
-		const oldLength = formData.phone.length;
-
-		formData.phone = formatPhoneInput(target.value);
-
-		// Adjust cursor position after formatting
-		const newLength = formData.phone.length;
-		const diff = newLength - oldLength;
-
-		requestAnimationFrame(() => {
-			target.setSelectionRange(cursorPos + diff, cursorPos + diff);
-		});
+		const rawValue = target.value;
+		formData.phone = formatPhoneInput(rawValue);
 	}
 
 	// Age validation (must be 16+)
@@ -212,7 +171,7 @@
 			lastName: formData.lastName.trim(),
 			email: formData.email.trim().toLowerCase(),
 			password: formData.password,
-			phone: formData.phone.replace(/[\s\-()]/g, ''), // Remove formatting
+			phone: toE164UK(formData.phone) ?? formData.phone,
 			dateOfBirth: formData.dateOfBirth.trim(),
 			// Strip dashes to send raw 12 characters
 			referralCode: formData.referralCode.replace(/-/g, '').trim() || undefined,
@@ -326,7 +285,7 @@
 
 <svelte:head>
 	<script>
-		(function() {
+		(function () {
 			try {
 				var token = localStorage.getItem('authToken');
 				if (token) {
@@ -336,7 +295,7 @@
 						window.location.replace(path);
 					}
 				}
-			} catch(e) {}
+			} catch (e) {}
 		})();
 	</script>
 </svelte:head>