diff --git a/web/src/lib/components/DayChip.svelte b/web/src/lib/components/DayChip.svelte
new file mode 100644
index 0000000..0fe0c18
--- /dev/null
+++ b/web/src/lib/components/DayChip.svelte
@@ -0,0 +1,183 @@
+<script lang="ts">
+	import { formatDurationShort } from '$lib/utils';
+
+	interface Props {
+		dayKey: string;
+		weekdayLabel: string; // e.g. 'Mon'
+		workedMs: number;
+		expectedMs: number;
+		kind: 'work' | 'holiday' | 'vacation' | 'sick' | null; // null = open/untracked
+		closed: boolean;
+		isToday: boolean;
+		selected: boolean;
+		isWorkday: boolean;
+		onclick?: () => void;
+	}
+
+	let {
+		dayKey,
+		weekdayLabel,
+		workedMs,
+		expectedMs,
+		kind,
+		closed,
+		isToday,
+		selected,
+		isWorkday,
+		onclick
+	}: Props = $props();
+
+	const dateNum = $derived(dayKey.slice(8)); // DD
+
+	// Progress bar fill: clamp to [0,1]. Non-workdays have expectedMs=0 → no bar.
+	const progress = $derived(expectedMs > 0 ? Math.min(workedMs / expectedMs, 1) : 0);
+
+	// Kind icons (emoji-free: text labels used for kind badges)
+	const KIND_ICON: Record<string, string> = {
+		holiday: 'H',
+		vacation: 'V',
+		sick: 'S'
+	};
+</script>
+
+<button
+	class="day-chip"
+	class:today={isToday}
+	class:selected
+	class:weekend={!isWorkday}
+	class:closed
+	role="tab"
+	aria-selected={selected}
+	tabindex={selected ? 0 : -1}
+	{onclick}
+>
+	<span class="wd-label">{weekdayLabel}</span>
+	<span class="date-num">{dateNum}</span>
+
+	{#if expectedMs > 0}
+		<div class="progress-track" title="{formatDurationShort(workedMs)} / {formatDurationShort(expectedMs)}">
+			<div class="progress-fill" class:over={workedMs > expectedMs} style="width: {progress * 100}%"></div>
+		</div>
+	{:else}
+		<div class="progress-track weekend-track"></div>
+	{/if}
+
+	<div class="badges">
+		{#if kind && kind !== 'work'}
+			<span class="kind-badge" data-kind={kind}>{KIND_ICON[kind]}</span>
+		{/if}
+		{#if closed}
+			<span class="closed-badge" title="Closed">✓</span>
+		{/if}
+	</div>
+</button>
+
+<style>
+	.day-chip {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.2rem;
+		padding: 0.4rem 0.3rem;
+		border: 1px solid #dee2e6;
+		border-radius: 8px;
+		background: #fff;
+		cursor: pointer;
+		min-width: 2.8rem;
+		flex: 1;
+		transition: border-color 0.15s, box-shadow 0.15s;
+		scroll-snap-align: start;
+		font-family: inherit;
+	}
+
+	.day-chip:hover {
+		border-color: #adb5bd;
+	}
+
+	.day-chip.today {
+		border-color: #2c7be5;
+	}
+
+	.day-chip.selected {
+		border-color: #2c7be5;
+		box-shadow: 0 0 0 2px #cce5ff;
+		background: #f0f7ff;
+	}
+
+	.day-chip.weekend {
+		background: #f8f9fa;
+		color: #adb5bd;
+	}
+
+	.day-chip.closed {
+		background: #f0f9f0;
+	}
+
+	.wd-label {
+		font-size: 0.65rem;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.03em;
+		color: inherit;
+	}
+
+	.date-num {
+		font-size: 1rem;
+		font-weight: 600;
+		line-height: 1;
+	}
+
+	.today .date-num {
+		color: #2c7be5;
+	}
+
+	.progress-track {
+		width: 100%;
+		height: 4px;
+		background: #e9ecef;
+		border-radius: 2px;
+		overflow: hidden;
+		margin: 0.15rem 0;
+	}
+
+	.weekend-track {
+		background: transparent;
+	}
+
+	.progress-fill {
+		height: 100%;
+		background: #27ae60;
+		border-radius: 2px;
+		transition: width 0.2s;
+	}
+
+	.progress-fill.over {
+		background: #f39c12;
+	}
+
+	.badges {
+		display: flex;
+		gap: 0.15rem;
+		flex-wrap: wrap;
+		justify-content: center;
+		min-height: 1rem;
+	}
+
+	.kind-badge {
+		font-size: 0.6rem;
+		font-weight: 700;
+		padding: 0.05rem 0.25rem;
+		border-radius: 3px;
+		line-height: 1.4;
+	}
+
+	.kind-badge[data-kind="holiday"] { background: #fff3cd; color: #856404; }
+	.kind-badge[data-kind="vacation"] { background: #cce5ff; color: #004085; }
+	.kind-badge[data-kind="sick"] { background: #f8d7da; color: #721c24; }
+
+	.closed-badge {
+		font-size: 0.65rem;
+		color: #27ae60;
+		font-weight: 700;
+	}
+</style>
diff --git a/web/src/routes/week/+page.svelte b/web/src/routes/week/+page.svelte
index 5e7f5bb..fe01c12 100644
--- a/web/src/routes/week/+page.svelte
+++ b/web/src/routes/week/+page.svelte
@@ -4,11 +4,12 @@
 	import {
 		currentWeekKey, weekDayKeys, formatDurationShort, formatDelta, todayKey, isWorkday
 	} from '$lib/utils';
+	import DayChip from '$lib/components/DayChip.svelte';
 
 	let weekKey = $state(currentWeekKey());
 	let dayKeys = $derived(weekDayKeys(weekKey));
 	let closedDaysMap = $state<Record<string, ClosedDay>>({});
-	let daysWithEntries = $state<Set<string>>(new Set());
+	let weekEntries = $state<Entry[]>([]);
 	let closedWeek = $state<ClosedWeek | null>(null);
 	let currentSettings = $state<Settings | null>(null);
 	let error = $state('');
@@ -27,10 +28,7 @@
 			closedDaysMap = Object.fromEntries((ds ?? []).map((d) => [d.day_key, d]));
 			closedWeek = (ws ?? []).find((w) => w.week_key === weekKey) ?? null;
 			currentSettings = s;
-			// Track which day_keys have at least one entry (for close-week guard).
-			const set = new Set<string>();
-			for (const e of (es ?? [])) set.add(e.day_key);
-			daysWithEntries = set;
+			weekEntries = es ?? [];
 		} catch (e) {
 			error = e instanceof ApiError ? e.message : String(e);
 		}
@@ -60,13 +58,36 @@
 
 	const DAY_NAMES = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 
+	// Per-day worked ms: use closed_days value if closed, else sum open entries.
+	function dayWorkedMs(dk: string): number {
+		const cd = closedDaysMap[dk];
+		if (cd) return cd.worked_ms;
+		return weekEntries
+			.filter((e) => e.day_key === dk && e.end_time != null)
+			.reduce((sum, e) => sum + (e.end_time! - e.start_time), 0);
+	}
+
+	// Daily expected ms for a workday; 0 for weekends.
+	function dailyExpectedMs(dk: string): number {
+		if (!currentSettings) return 0;
+		const mask = currentSettings.workdays_mask;
+		if (!isWorkday(dk, mask)) return 0;
+		const workdayCount = [1, 2, 4, 8, 16, 32, 64].filter((b) => mask & b).length;
+		return (currentSettings.hours_per_week * 3_600_000) / workdayCount;
+	}
+
 	const totalWorkedMs = $derived(
-		dayKeys.reduce((sum, dk) => sum + (closedDaysMap[dk]?.worked_ms ?? 0), 0)
+		dayKeys.reduce((sum, dk) => sum + dayWorkedMs(dk), 0)
 	);
 	const expectedMs = $derived(
 		currentSettings ? currentSettings.hours_per_week * 3_600_000 : 0
 	);
 
+	// Track which day_keys have at least one entry (for close-week guard).
+	const daysWithEntries = $derived(
+		new Set(weekEntries.map((e) => e.day_key))
+	);
+
 	// Week can be closed if it's not already closed, the week has started,
 	// and every past workday that has entries is also closed.
 	const canCloseWeek = $derived(
@@ -102,25 +123,20 @@
 
 	{#if error}<p class="error">{error}</p>{/if}
 
-	<div class="days-grid">
+	<!-- Day strip -->
+	<div class="day-strip" role="tablist" aria-label="Days of the week">
 		{#each dayKeys as dk, i (dk)}
-			{@const cd = closedDaysMap[dk]}
-			{@const isToday = dk === todayKey()}
-			{@const workday = currentSettings ? isWorkday(dk, currentSettings.workdays_mask) : i < 5}
-			<div class="day" class:today={isToday} class:weekend={!workday} class:closed={!!cd}>
-				<div class="day-header">
-					<span class="day-name">{DAY_NAMES[i]}</span>
-					<span class="day-date">{dk.slice(5)}</span>
-				</div>
-				{#if cd}
-					<div class="day-status" data-kind={cd.kind}>{cd.kind}</div>
-					<div class="day-worked">{formatDurationShort(cd.worked_ms)}</div>
-				{:else if workday}
-					<div class="day-status open">open</div>
-				{:else}
-					<div class="day-status weekend-label">—</div>
-				{/if}
-			</div>
+			<DayChip
+				dayKey={dk}
+				weekdayLabel={DAY_NAMES[i]}
+				workedMs={dayWorkedMs(dk)}
+				expectedMs={dailyExpectedMs(dk)}
+				kind={closedDaysMap[dk]?.kind ?? null}
+				closed={!!closedDaysMap[dk]}
+				isToday={dk === todayKey()}
+				selected={false}
+				isWorkday={currentSettings ? isWorkday(dk, currentSettings.workdays_mask) : i < 5}
+			/>
 		{/each}
 	</div>
 
@@ -151,25 +167,20 @@
 
 <style>
 	.week-view h1 { margin: 0; font-size: 1.2rem; }
-	.header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
+	.header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
 	.header button { background: none; border: 1px solid #dee2e6; border-radius: 6px; padding: 0.25rem 0.6rem; font-size: 1.1rem; }
-	.error { color: #c0392b; background: #fde8e4; padding: 0.5rem; border-radius: 6px; }
-	.days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; margin-bottom: 1.5rem; }
-	.day { border: 1px solid #dee2e6; border-radius: 8px; padding: 0.5rem; background: #fff; text-align: center; }
-	.day.today { border-color: #2c7be5; box-shadow: 0 0 0 2px #cce5ff; }
-	.day.weekend { background: #f8f9fa; color: #adb5bd; }
-	.day.closed { background: #f0f9f0; }
-	.day-header { display: flex; flex-direction: column; font-size: 0.75rem; }
-	.day-name { font-weight: 600; }
-	.day-date { color: #6c757d; }
-	.day-status { font-size: 0.7rem; margin-top: 0.3rem; padding: 0.1rem 0.3rem; border-radius: 4px; }
-	.day-status[data-kind="work"] { background: #d4edda; color: #155724; }
-	.day-status[data-kind="holiday"] { background: #fff3cd; color: #856404; }
-	.day-status[data-kind="vacation"] { background: #cce5ff; color: #004085; }
-	.day-status[data-kind="sick"] { background: #f8d7da; color: #721c24; }
-	.day-status.open { background: #f8f9fa; color: #6c757d; }
-	.day-status.weekend-label { color: #adb5bd; }
-	.day-worked { font-size: 0.8rem; font-variant-numeric: tabular-nums; margin-top: 0.25rem; font-weight: 600; }
+	.error { color: #c0392b; background: #fde8e4; padding: 0.5rem; border-radius: 6px; margin-bottom: 1rem; }
+
+	.day-strip {
+		display: flex;
+		gap: 0.4rem;
+		margin-bottom: 1.25rem;
+		overflow-x: auto;
+		scroll-snap-type: x mandatory;
+		-webkit-overflow-scrolling: touch;
+		padding-bottom: 0.25rem; /* room for scrollbar */
+	}
+
 	.summary { background: #fff; border: 1px solid #dee2e6; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
 	.row { display: flex; justify-content: space-between; padding: 0.25rem 0; }
 	.delta strong { color: #c0392b; }