diff --git a/buzz/api/checkin/__init__.py b/buzz/api/checkin/__init__.py
index 54be4d61..976327d1 100644
--- a/buzz/api/checkin/__init__.py
+++ b/buzz/api/checkin/__init__.py
@@ -1,7 +1,9 @@
 import frappe
 
-from buzz.api.checkin.schemas import CheckinResponse
-from buzz.api.checkin.services import CheckinService
+from buzz.api.checkin.schemas import CheckinEvent, CheckinResponse
+from buzz.api.checkin.services import CheckinService, checkin_events, ensure_can_check_in
+from buzz.api.events.schemas import EventGuestsResponse
+from buzz.api.events.services import GUESTS_PAGE_SIZE, event_guests
 
 
 @frappe.whitelist()
@@ -9,6 +11,29 @@ def validate_ticket_for_checkin(ticket_id: str) -> CheckinResponse:
 	return CheckinService(ticket_id).validate()
 
 
-@frappe.whitelist()
+@frappe.whitelist(methods=["POST"])
 def checkin_ticket(ticket_id: str) -> CheckinResponse:
 	return CheckinService(ticket_id).checkin()
+
+
+@frappe.whitelist(methods=["POST"])
+def undo_checkin(ticket_id: str) -> CheckinResponse:
+	return CheckinService(ticket_id).undo_checkin()
+
+
+@frappe.whitelist()
+def get_checkin_events() -> list[CheckinEvent]:
+	return checkin_events()
+
+
+@frappe.whitelist()
+def get_checkin_guests(
+	event: str,
+	search: str | None = None,
+	checked_in: str | None = None,
+	start: int = 0,
+	limit: int = GUESTS_PAGE_SIZE,
+) -> EventGuestsResponse:
+	"""The guest list, for someone who can check its guests in."""
+	ensure_can_check_in(event)
+	return event_guests(event, search, start=start, limit=limit, checked_in=checked_in)
diff --git a/buzz/api/checkin/exceptions.py b/buzz/api/checkin/exceptions.py
index ffa278bd..32c8aab7 100644
--- a/buzz/api/checkin/exceptions.py
+++ b/buzz/api/checkin/exceptions.py
@@ -21,3 +21,8 @@ class TicketRefunded(Conflict):
 class AlreadyCheckedIn(Conflict):
 	title = _lt("Already Checked In")
 	message = _lt("This ticket was already checked in today, at {checked_in_at}.")
+
+
+class NotCheckedIn(Conflict):
+	title = _lt("Not Checked In")
+	message = _lt("This ticket has not been checked in today.")
diff --git a/buzz/api/checkin/schemas.py b/buzz/api/checkin/schemas.py
index e875bc41..128f4049 100644
--- a/buzz/api/checkin/schemas.py
+++ b/buzz/api/checkin/schemas.py
@@ -40,3 +40,12 @@ class CheckinResponse(APIResponse):
 	message: str
 	ticket: TicketCheckinDetails
 	payment_details: PaymentDetails | None = None
+
+
+class CheckinEvent(APIResponse):
+	name: str
+	title: str
+	start_date: date | None
+	start_time: timedelta | None
+	end_date: date | None
+	end_time: timedelta | None
diff --git a/buzz/api/checkin/services.py b/buzz/api/checkin/services.py
index 1bce4694..c7db20e5 100644
--- a/buzz/api/checkin/services.py
+++ b/buzz/api/checkin/services.py
@@ -6,18 +6,20 @@
 
 from buzz.api.checkin.exceptions import (
 	AlreadyCheckedIn,
+	NotCheckedIn,
 	TicketCancelled,
 	TicketNotFound,
 	TicketRefunded,
 )
 from buzz.api.checkin.schemas import (
+	CheckinEvent,
 	CheckinResponse,
 	PaymentDetails,
 	TicketAddOn,
 	TicketCheckinDetails,
 )
 from buzz.api.exceptions import NotPermitted
-from buzz.permissions import has_team_access
+from buzz.permissions import CHECKIN_ROLES, can_check_in, is_unrestricted
 from buzz.ticketing.doctype.event_booking_refund.event_booking_refund import get_committed_tickets
 
 if TYPE_CHECKING:
@@ -28,19 +30,45 @@
 CANCELLED = 2
 
 
+def ensure_can_check_in(event: str) -> None:
+	team = frappe.db.get_value("Buzz Event", event, "team")
+	if not can_check_in(team, frappe.session.user):
+		NotPermitted.throw()
+
+
+def checkin_events() -> list[CheckinEvent]:
+	"""Events not yet over, on the teams the user works the front desk for."""
+	filters = {"is_published": 1, "end_date": [">=", today()]}
+	user = frappe.session.user
+	if not is_unrestricted(user):
+		teams = frappe.get_all(
+			"Buzz Team Membership",
+			filters={"user": user, "enabled": 1, "team_role": ["in", list(CHECKIN_ROLES)]},
+			pluck="team",
+		)
+		filters["team"] = ["in", teams or [""]]
+
+	rows = frappe.get_all(
+		"Buzz Event",
+		filters=filters,
+		fields=["name", "title", "start_date", "start_time", "end_date", "end_time"],
+		order_by="start_date asc",
+		ignore_permissions=True,
+	)
+	return [CheckinEvent(**{**row, "name": str(row.name)}) for row in rows]
+
+
 class CheckinService:
-	"""Front-desk check-in for a single ticket. Restricted to Frontdesk Manager."""
+	"""Front-desk check-in for a single ticket, by a team member at Frontdesk or above."""
 
 	def __init__(self, ticket_id: str):
-		frappe.only_for("Frontdesk Manager", True)
 		if not frappe.db.exists("Event Ticket", ticket_id):
 			TicketNotFound.throw()
 
 		self.ticket_id = ticket_id
 		self.date = today()
 		# Both endpoints route through here, so one team check covers them.
-		if not has_team_access(self.event.team, "read", frappe.session.user):
-			NotPermitted.throw()
+		ensure_can_check_in(self.ticket.event)
 
 	@property
 	def ticket(self) -> "EventTicket":
@@ -83,11 +111,32 @@ def ensure_checkin_allowed(self) -> None:
 		if self.ticket.booking and self.ticket_id in get_committed_tickets(self.ticket.booking):
 			TicketRefunded.throw()
 
-		existing = frappe.db.exists("Event Check In", {"ticket": self.ticket_id, "date": self.date})
+		existing = self.todays_checkin()
 		if existing:
 			creation = frappe.db.get_value("Event Check In", existing, "creation")
 			AlreadyCheckedIn.throw(checked_in_at=f"{format_date(creation)} at {format_time(creation)}")
 
+	def undo_checkin(self) -> CheckinResponse:
+		existing = self.todays_checkin()
+		if not existing:
+			NotCheckedIn.throw()
+
+		# Cancelled rather than deleted, so the record of the mistaken check-in stays.
+		checkin_doc = frappe.get_doc("Event Check In", existing)
+		checkin_doc.flags.ignore_permissions = True
+		checkin_doc.cancel()
+		return CheckinResponse(
+			message=_("Undid the check-in for {attendee_name}").format(
+				attendee_name=self.ticket.attendee_name
+			),
+			ticket=self.ticket_details(),
+		)
+
+	def todays_checkin(self) -> str | None:
+		return frappe.db.exists(
+			"Event Check In", {"ticket": self.ticket_id, "date": self.date, "docstatus": 1}
+		)
+
 	def record_checkin(self) -> "EventCheckIn":
 		checkin_doc = frappe.new_doc("Event Check In")
 		checkin_doc.ticket = self.ticket_id
diff --git a/buzz/api/checkin/test_checkin.py b/buzz/api/checkin/test_checkin.py
index dcefacde..13848004 100644
--- a/buzz/api/checkin/test_checkin.py
+++ b/buzz/api/checkin/test_checkin.py
@@ -1,13 +1,22 @@
 import frappe
 from frappe.tests import IntegrationTestCase
 
-from buzz.api.checkin import checkin_ticket, validate_ticket_for_checkin
+from buzz.api.checkin import (
+	checkin_ticket,
+	get_checkin_events,
+	get_checkin_guests,
+	validate_ticket_for_checkin,
+)
 from buzz.api.checkin.exceptions import AlreadyCheckedIn, TicketCancelled, TicketNotFound
+from buzz.api.exceptions import NotPermitted
 from buzz.tests.factories import (
 	BuzzEventFactory,
+	BuzzTeamFactory,
+	BuzzTeamMembershipFactory,
 	EventBookingFactory,
 	EventPaymentFactory,
 	EventTicketFactory,
+	UserFactory,
 )
 
 
@@ -86,3 +95,74 @@ def test_validation_rejects_an_already_checked_in_ticket(self):
 
 		with self.assertRaises(AlreadyCheckedIn):
 			validate_ticket_for_checkin(self.ticket)
+
+
+class TestCheckinAccess(IntegrationTestCase):
+	"""Front-desk work is for the event's own team, at Frontdesk or above."""
+
+	@classmethod
+	def setUpClass(cls):
+		super().setUpClass()
+		owner = UserFactory.create_once("checkin-owner@example.com").name
+		other_owner = UserFactory.create_once("checkin-other-owner@example.com").name
+		cls.team = BuzzTeamFactory.create_owned_by(owner).name
+		cls.other_team = BuzzTeamFactory.create_owned_by(other_owner).name
+		cls.event = str(BuzzEventFactory.create(team=cls.team).name)
+		cls.other_event = str(BuzzEventFactory.create(team=cls.other_team).name)
+
+		cls.frontdesk = cls.member("checkin-frontdesk@example.com", "Frontdesk")
+		cls.manager = cls.member("checkin-manager@example.com", "Manager")
+		cls.viewer = cls.member("checkin-viewer@example.com", "Viewer")
+		# Front desk on one team, only a Viewer on the other.
+		BuzzTeamMembershipFactory.create(team=cls.other_team, user=cls.frontdesk, team_role="Viewer")
+
+	@classmethod
+	def member(cls, email: str, team_role: str) -> str:
+		user = UserFactory.create_once(email).name
+		BuzzTeamMembershipFactory.create(team=cls.team, user=user, team_role=team_role)
+		return user
+
+	def setUp(self):
+		frappe.clear_messages()
+
+	def test_frontdesk_and_manager_can_check_in(self):
+		for user in (self.frontdesk, self.manager):
+			ticket = EventTicketFactory.create(event=self.event).name
+			with self.set_user(user):
+				self.assertTrue(checkin_ticket(ticket).ticket.is_checked_in)
+
+	def test_viewer_cannot_check_in(self):
+		ticket = EventTicketFactory.create(event=self.event).name
+		with self.set_user(self.viewer), self.assertRaises(NotPermitted):
+			validate_ticket_for_checkin(ticket)
+
+	def test_frontdesk_role_does_not_carry_to_another_team(self):
+		ticket = EventTicketFactory.create(event=self.other_event).name
+		with self.set_user(self.frontdesk), self.assertRaises(NotPermitted):
+			checkin_ticket(ticket)
+
+	def test_events_list_only_the_front_desk_teams(self):
+		with self.set_user(self.frontdesk):
+			events = {event.name for event in get_checkin_events()}
+
+		self.assertIn(self.event, events)
+		self.assertNotIn(self.other_event, events)
+
+	def test_viewer_cannot_open_the_guest_list(self):
+		with self.set_user(self.viewer), self.assertRaises(NotPermitted):
+			get_checkin_guests(self.event)
+
+	def test_guest_list_splits_on_todays_check_in(self):
+		event = str(BuzzEventFactory.create(team=self.team).name)
+		arrived, waiting = (EventTicketFactory.create("submitted", event=event).name for _ in range(2))
+		with self.set_user(self.frontdesk):
+			checkin_ticket(arrived)
+			everyone = get_checkin_guests(event).__json__()
+			checked_in = get_checkin_guests(event, checked_in="1").__json__()
+			not_checked_in = get_checkin_guests(event, checked_in="0").__json__()
+
+		self.assertEqual(everyone["checked_in"], 1)
+		self.assertEqual([guest["name"] for guest in checked_in["guests"]], [arrived])
+		self.assertIsNotNone(checked_in["guests"][0]["checked_in_at"])
+		self.assertEqual([guest["name"] for guest in not_checked_in["guests"]], [waiting])
+		self.assertEqual(not_checked_in["matched"], 1)
diff --git a/buzz/api/events/schemas.py b/buzz/api/events/schemas.py
index 17bf7880..c0429f94 100644
--- a/buzz/api/events/schemas.py
+++ b/buzz/api/events/schemas.py
@@ -103,6 +103,7 @@ class EventGuest(APIResponse):
 	# When the ticket was raised, which is when this guest registered.
 	registered_at: datetime | None = None
 	add_ons: list[GuestAddOn] = Field(default_factory=list)
+	checked_in_at: datetime | None = None
 
 
 class GuestTicketType(APIResponse):
@@ -119,10 +120,13 @@ class EventGuestsResponse(APIResponse):
 	start_time: timedelta | None = None
 	end_date: date | None = None
 	venue: str | None = None
+	route: str | None = None
 	# Everyone registered, then everyone the current search matches — the second is the
 	# first when nothing is being searched for.
 	total: int
 	matched: int
+	# Guests checked in today, which is what the front desk counts against.
+	checked_in: int = 0
 	guests: list[EventGuest]
 	has_next_page: bool = False
 	filter_fields: list[FilterField]
diff --git a/buzz/api/events/services.py b/buzz/api/events/services.py
index b2870a2f..151316eb 100644
--- a/buzz/api/events/services.py
+++ b/buzz/api/events/services.py
@@ -1,8 +1,10 @@
+from datetime import datetime
+
 import frappe
 from frappe import _
 from frappe.query_builder import Case
 from frappe.query_builder.functions import Count, Date
-from frappe.utils import add_days, getdate
+from frappe.utils import add_days, getdate, today
 
 from buzz.api.booking.guests import email_otp_available, phone_otp_available
 from buzz.api.booking.services import are_registrations_closed
@@ -280,7 +282,7 @@ def meeting_link_of(row) -> str | None:
 
 
 def guest_search_filters(search: str | None) -> list[list] | None:
-	"""Name or email, matched loosely — the two things a manager reads off the row."""
+	"""Name, email or ticket ID, matched loosely."""
 	term = (search or "").strip()
 	if not term:
 		return None
@@ -288,6 +290,7 @@ def guest_search_filters(search: str | None) -> list[list] | None:
 	return [
 		["attendee_name", "like", f"%{term}%"],
 		["attendee_email", "like", f"%{term}%"],
+		["name", "like", f"%{term}%"],
 	]
 
 
@@ -346,6 +349,7 @@ def event_guests(
 	order: str = "desc",
 	start: int = 0,
 	limit: int = GUESTS_PAGE_SIZE,
+	checked_in: str | None = None,
 ) -> EventGuestsResponse:
 	"""One page of the people holding a ticket to an event.
 
@@ -353,12 +357,17 @@ def event_guests(
 	access is the bar: this shows the team what it already sees through the doctype.
 
 	Ordered by when the ticket was registered, newest first by default, so a page is a
-	stable slice as the caller walks down the list.
+	stable slice as the caller walks down the list. `checked_in` is "1" or "0" to keep only
+	the guests who have, or have not, checked in today.
 	"""
 	ensure_event_team_access(event)
 
 	filter_fields, answer_parents = guest_filter_fields(event)
 	conditions = ListConditions("Event Ticket", filter_fields, answer_parents).frappe_filters(filters)
+	arrivals = checked_in_today(event)
+	if checked_in in ("0", "1"):
+		operator = "in" if checked_in == "1" else "not in"
+		conditions.append(["name", operator, list(arrivals) or [""]])
 	query_filters = [["event", "=", event], ["docstatus", "=", 1], *conditions]
 	or_filters = guest_search_filters(search)
 	limit = max(1, min(int(limit), 100))
@@ -385,7 +394,10 @@ def event_guests(
 		ticket["registered_at"] = ticket.pop("creation")
 		ticket["ticket_type"] = type_titles.get(ticket.ticket_type) or ticket.ticket_type
 
-	guests = [EventGuest(**ticket, add_ons=by_ticket.get(ticket.name, [])) for ticket in tickets]
+	guests = [
+		EventGuest(**ticket, add_ons=by_ticket.get(ticket.name, []), checked_in_at=arrivals.get(ticket.name))
+		for ticket in tickets
+	]
 	doc = frappe.get_cached_doc("Buzz Event", event)
 	total = count_tickets({"event": event, "docstatus": 1})
 	matched = count_tickets(query_filters, or_filters) if or_filters or conditions else total
@@ -395,14 +407,35 @@ def event_guests(
 		start_time=doc.start_time,
 		end_date=doc.end_date,
 		venue=doc.get_venue_name(),
+		route=doc.route if doc.is_published else None,
 		total=total,
 		matched=matched,
+		checked_in=len(arrivals),
 		guests=guests,
 		has_next_page=start + len(guests) < matched,
 		filter_fields=filter_fields,
 	)
 
 
+def checked_in_today(event: str) -> dict[str, datetime]:
+	"""When each of the event's submitted tickets checked in today, keyed by ticket."""
+	# Query builder: the team check in the caller is the authorization.
+	checkin, ticket = frappe.qb.DocType("Event Check In"), frappe.qb.DocType("Event Ticket")
+	rows = (
+		frappe.qb.from_(checkin)
+		.join(ticket)
+		.on(ticket.name == checkin.ticket)
+		.select(checkin.ticket, checkin.creation)
+		.where(
+			(checkin.event == event)
+			& (checkin.date == today())
+			& (checkin.docstatus == 1)
+			& (ticket.docstatus == 1)
+		)
+	).run(as_dict=True)
+	return {row.ticket: row.creation for row in rows}
+
+
 def guest_filter_fields(event: str) -> tuple[list[FilterField], dict]:
 	"""Ticket type, then the event's ticket and booking questions.
 
diff --git a/buzz/permissions.py b/buzz/permissions.py
index 9110ce97..3e19ec7e 100644
--- a/buzz/permissions.py
+++ b/buzz/permissions.py
@@ -7,6 +7,7 @@
 
 WRITE_ROLES = frozenset({"Owner", "Admin", "Manager"})
 ADMIN_ROLES = frozenset({"Owner", "Admin"})
+CHECKIN_ROLES = frozenset({"Owner", "Admin", "Manager", "Frontdesk"})
 WRITE_PTYPES = frozenset({"write", "create", "submit", "cancel", "amend", "delete"})
 
 # Attendees, sponsors and speakers reach their own rows without any membership.
@@ -130,6 +131,11 @@ def has_team_access(team: str | None, ptype: str, user: str) -> bool:
 	return bool(team_role) and role_allows(team_role, ptype)
 
 
+def can_check_in(team: str | None, user: str) -> bool:
+	"""Front-desk work on a team's events. Unlike has_team_access, an unstamped event fails closed."""
+	return is_unrestricted(user) or team_role_of(user, team) in CHECKIN_ROLES
+
+
 def team_query_conditions(user: str | None = None, doctype: str | None = None, **kwargs) -> str | None:
 	user = user or frappe.session.user
 	if is_unrestricted(user):
diff --git a/dashboard/components.d.ts b/dashboard/components.d.ts
index f9917f1c..4f50ea17 100644
--- a/dashboard/components.d.ts
+++ b/dashboard/components.d.ts
@@ -33,6 +33,8 @@ declare module 'vue' {
     CancellationRequestDialog: typeof import('./src/components/CancellationRequestDialog.vue')['default']
     CancellationRequestNotice: typeof import('./src/components/CancellationRequestNotice.vue')['default']
     ChangeRoleDialog: typeof import('./src/components/dashboard/teams/ChangeRoleDialog.vue')['default']
+    CheckInGuestList: typeof import('./src/components/checkin/CheckInGuestList.vue')['default']
+    CheckInGuestRow: typeof import('./src/components/checkin/CheckInGuestRow.vue')['default']
     CheckInQrDialog: typeof import('./src/components/dashboard/tickets/CheckInQrDialog.vue')['default']
     ChosenLocation: typeof import('./src/components/dashboard/events/location/ChosenLocation.vue')['default']
     CommunicationActions: typeof import('./src/components/dashboard/communications/CommunicationActions.vue')['default']
@@ -82,6 +84,7 @@ declare module 'vue' {
     FilterChip: typeof import('./src/components/common/filters/FilterChip.vue')['default']
     FloatingCreateEventButton: typeof import('./src/components/dashboard/FloatingCreateEventButton.vue')['default']
     FormFieldSections: typeof import('./src/components/FormFieldSections.vue')['default']
+    GuestCheckInDialog: typeof import('./src/components/checkin/GuestCheckInDialog.vue')['default']
     GuestInfoDrawer: typeof import('./src/components/dashboard/events/GuestInfoDrawer.vue')['default']
     GuestListExport: typeof import('./src/components/dashboard/events/GuestListExport.vue')['default']
     GuestRegistrationDialog: typeof import('./src/components/dashboard/events/GuestRegistrationDialog.vue')['default']
@@ -136,6 +139,7 @@ declare module 'vue' {
     SaveActions: typeof import('./src/components/dashboard/teams/SaveActions.vue')['default']
     SectionHeader: typeof import('./src/components/common/SectionHeader.vue')['default']
     SelectionBar: typeof import('./src/components/common/SelectionBar.vue')['default']
+    SiteHeader: typeof import('./src/components/SiteHeader.vue')['default']
     SortableList: typeof import('./src/components/dashboard/sponsorships/SortableList.vue')['default']
     SponsorCard: typeof import('./src/components/dashboard/sponsorships/SponsorCard.vue')['default']
     SponsorDrawer: typeof import('./src/components/dashboard/sponsorships/SponsorDrawer.vue')['default']
@@ -161,7 +165,6 @@ declare module 'vue' {
     ThemeSwitcher: typeof import('./src/components/settings/ThemeSwitcher.vue')['default']
     TicketBookingDetails: typeof import('./src/components/dashboard/tickets/TicketBookingDetails.vue')['default']
     TicketCard: typeof import('./src/components/TicketCard.vue')['default']
-    TicketDetailsModal: typeof import('./src/components/TicketDetailsModal.vue')['default']
     TicketsSection: typeof import('./src/components/TicketsSection.vue')['default']
     TicketTransferDialog: typeof import('./src/components/TicketTransferDialog.vue')['default']
     TicketTypeDrawer: typeof import('./src/components/dashboard/ticket-types/TicketTypeDrawer.vue')['default']
diff --git a/dashboard/src/assets/LeagueGothic/LeagueGothic-Regular.woff2 b/dashboard/src/assets/LeagueGothic/LeagueGothic-Regular.woff2
new file mode 100644
index 00000000..64216964
Binary files /dev/null and b/dashboard/src/assets/LeagueGothic/LeagueGothic-Regular.woff2 differ
diff --git a/dashboard/src/assets/LeagueGothic/league-gothic.css b/dashboard/src/assets/LeagueGothic/league-gothic.css
new file mode 100644
index 00000000..b7ffcc3c
--- /dev/null
+++ b/dashboard/src/assets/LeagueGothic/league-gothic.css
@@ -0,0 +1,8 @@
+/* League Gothic (SIL Open Font License), Latin subset. Display headings only. */
+@font-face {
+	font-family: "League Gothic";
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: url("LeagueGothic-Regular.woff2") format("woff2");
+}
diff --git a/dashboard/src/components/EventSelector.vue b/dashboard/src/components/EventSelector.vue
index 89a11f7f..e1f1c080 100644
--- a/dashboard/src/components/EventSelector.vue
+++ b/dashboard/src/components/EventSelector.vue
@@ -48,18 +48,11 @@
 </template>
 
 <script setup lang="ts">
-import { Spinner, dayjsLocal, useList } from "frappe-ui"
+import { Spinner, dayjsLocal, useCall } from "frappe-ui"
 import { ListView } from "frappe-ui/experimental"
 
 import type { BuzzEvent } from "@/types"
 
-defineProps({
-	selectedEvent: {
-		type: Object,
-		default: null,
-	},
-})
-
 const emit = defineEmits(["select"])
 
 const columns = [
@@ -89,14 +82,9 @@ const formatTimestamp = (date?: string, time?: string) => {
 	return `${formattedDate} ${formattedTime}`
 }
 
-const eventsResource = useList<BuzzEvent & { name: string }>({
-	doctype: "Buzz Event",
-	fields: ["name", "title", "start_date", "start_time", "end_date", "end_time"],
-	orderBy: "start_date desc",
-	filters: {
-		is_published: 1,
-		end_date: [">=", dayjsLocal().format("YYYY-MM-DD")],
-	},
+// Only the events whose team the user works the front desk for.
+const eventsResource = useCall<BuzzEvent[]>({
+	url: "/api/v2/method/buzz.api.checkin.get_checkin_events",
 	transform(data) {
 		return data.map((event) => ({
 			...event,
diff --git a/dashboard/src/components/QRScanner.vue b/dashboard/src/components/QRScanner.vue
index 1b76af05..cc3d3414 100644
--- a/dashboard/src/components/QRScanner.vue
+++ b/dashboard/src/components/QRScanner.vue
@@ -1,133 +1,142 @@
 <template>
-	<div
-		class="bg-white dark:bg-gray-800 rounded-6 shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"
-	>
-		<div class="p-4 border-b border-gray-200 dark:border-gray-700">
-			<h3 class="font-medium text-gray-900 dark:text-white">
-				{{ __("Scan Ticket QR Code") }}
-			</h3>
-		</div>
-
-		<!-- Scanner Container -->
-		<div class="relative">
-			<div
-				id="qr-reader"
-				class="w-full text-ink-gray-7"
-				:class="{ 'opacity-50': isProcessingTicket }"
-			></div>
-
-			<!-- Processing Overlay -->
-			<div
-				v-if="isProcessingTicket"
-				class="absolute inset-0 bg-white dark:bg-gray-800 bg-opacity-75 flex items-center justify-center"
-			>
-				<Spinner class="w-8 h-8" />
+	<div class="grid grid-rows-[1fr] [clip-path:circle(75%_at_50%_50%)]">
+		<div class="min-h-0 overflow-hidden rounded-7 border border-outline-gray-2">
+			<div class="relative mx-auto aspect-square w-full max-w-md bg-surface-gray-2">
+				<div
+					id="qr-reader"
+					class="w-full text-ink-gray-7"
+					:class="{ 'opacity-50': isProcessingTicket }"
+				></div>
+
+				<Transition
+					leave-active-class="transition-opacity duration-200 ease-out motion-reduce:transition-none"
+					leave-to-class="opacity-0"
+				>
+					<div
+						v-if="status !== 'ready'"
+						class="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-surface-gray-2 p-6 text-center"
+						role="status"
+					>
+						<Icon :name="statusIcon" class="size-6 text-ink-gray-5" />
+						<LoadingText v-if="status !== 'blocked'" :text="statusMessage" />
+						<p v-else class="text-p-base text-ink-gray-6">{{ statusMessage }}</p>
+					</div>
+				</Transition>
+
+				<div
+					v-if="isProcessingTicket"
+					class="absolute inset-0 flex items-center justify-center bg-surface-elevation-1/75"
+				>
+					<Spinner class="size-8" />
+				</div>
 			</div>
-		</div>
 
-		<!-- Scanner Controls -->
-		<div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700">
-			<div class="flex gap-2">
-				<Button @click="startScanner" v-if="!scannerActive" variant="outline" class="flex-1">
-					<template #prefix>
-						<LucideQrCode class="w-4 h-4" />
-					</template>
-					Start Scanner
-				</Button>
-				<Button
-					@click="stopScanner"
-					v-else
-					variant="outline"
+			<div class="flex gap-2 border-t border-outline-gray-2 bg-surface-gray-1 p-4">
+				<TextInput
+					v-model="manualTicketId"
+					placeholder="Enter ticket ID manually"
 					class="flex-1"
-					icon-left="lucide-square"
+					:disabled="isProcessingTicket"
+				/>
+				<Button
+					:loading="isProcessingTicket"
+					:disabled="!manualTicketId.trim()"
+					@click="handleManualEntry"
 				>
-					{{ __("Stop Scanner") }}
+					{{ __("Check") }}
 				</Button>
 			</div>
-
-			<!-- Manual Entry -->
-			<div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-600">
-				<div class="flex gap-2">
-					<TextInput
-						v-model="manualTicketId"
-						placeholder="Enter ticket ID manually"
-						class="flex-1"
-						:disabled="isProcessingTicket"
-					/>
-					<Button
-						@click="handleManualEntry"
-						:loading="isProcessingTicket"
-						:disabled="!manualTicketId.trim()"
-					>
-						{{ __("Check") }}
-					</Button>
-				</div>
-			</div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { Button, Spinner, TextInput, toast } from "frappe-ui"
+import { Button, Icon, LoadingText, Spinner, TextInput, toast } from "frappe-ui"
 import { Html5Qrcode } from "html5-qrcode"
-import { onMounted, onUnmounted, ref } from "vue"
-import LucideQrCode from "~icons/lucide/qr-code"
+import { computed, onMounted, onUnmounted, ref, watch } from "vue"
 
 import { useTicketValidation } from "@/composables/useTicketValidation"
 import { extractTicketId } from "@/utils/ticketQr"
 
+// Paused while a scanned guest is open, so the same QR isn't read again behind the dialog.
+const props = defineProps<{ paused?: boolean }>()
+
 const { validateTicket, isProcessingTicket } = useTicketValidation()
 
-const qrScanner = ref<Html5Qrcode | null>(null)
-const scannerActive = ref(false)
+type CameraStatus = "requesting" | "starting" | "ready" | "blocked"
+
+const status = ref<CameraStatus>("starting")
 const manualTicketId = ref("")
 const lastScannedTicketId = ref<string | null>(null)
-const scanTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
-
-const startScanner = async () => {
-	if (scannerActive.value) return
-
-	try {
-		// Clear any existing scanner content first
-		const container = document.getElementById("qr-reader")
-		if (container) {
-			container.innerHTML = ""
-		}
-
-		qrScanner.value = new Html5Qrcode("qr-reader")
-
-		// Start scanning with the back camera (environment) as default
-		await qrScanner.value.start(
+let scanner: Html5Qrcode | null = null
+let scanTimeout: ReturnType<typeof setTimeout> | null = null
+let unmounted = false
+const permissionListener = new AbortController()
+
+const statusMessage = computed(
+	() =>
+		({
+			requesting: __("Allow camera access to scan tickets"),
+			starting: __("Starting camera"),
+			ready: "",
+			blocked: __(
+				"Camera unavailable. Allow camera access in your browser settings, or enter the ticket ID below.",
+			),
+		})[status.value],
+)
+
+const statusIcon = computed(() =>
+	status.value === "blocked" ? "lucide-camera-off" : "lucide-camera",
+)
+
+const watchCameraPermission = () =>
+	navigator.permissions
+		?.query({ name: "camera" as PermissionName })
+		.then((permission) => {
+			const sync = () => {
+				if (status.value === "ready" || status.value === "blocked") return
+				status.value = permission.state === "granted" ? "starting" : "requesting"
+			}
+			sync()
+			permission.addEventListener("change", sync, { signal: permissionListener.signal })
+		})
+		.catch(() => {})
+
+const startScanner = () => {
+	watchCameraPermission()
+	scanner = new Html5Qrcode("qr-reader")
+	scanner
+		.start(
 			{ facingMode: "environment" },
-			{
-				fps: 10,
-				qrbox: { width: 250, height: 250 },
-				aspectRatio: 1.0,
-			},
+			{ fps: 10, qrbox: { width: 250, height: 250 }, aspectRatio: 1.0 },
 			onScanSuccess,
 			undefined,
 		)
-		scannerActive.value = true
-	} catch (error) {
-		console.error("Failed to start scanner:", error)
-		toast.error(__("Failed to start camera. Please check permissions."))
-	}
+		.then(() => (unmounted ? stopScanner() : (status.value = "ready")))
+		.catch((error) => {
+			console.error("Failed to start scanner:", error)
+			status.value = "blocked"
+		})
 }
 
-const stopScanner = async () => {
-	if (!scannerActive.value || !qrScanner.value) return
-
-	try {
-		await qrScanner.value.stop()
-	} catch (error) {
-		console.error("Failed to stop scanner:", error)
-	}
-	qrScanner.value = null
-	scannerActive.value = false
+const stopScanner = () => {
+	if (!scanner?.isScanning) return
+	scanner
+		.stop()
+		.then(() => scanner?.clear())
+		.catch((error) => console.error("Failed to stop scanner:", error))
 }
 
+watch(
+	() => props.paused,
+	(paused) => {
+		if (status.value !== "ready" || !scanner) return
+		if (paused) scanner.pause(true)
+		else scanner.resume()
+	},
+)
+
 const onScanSuccess = (decodedText: string) => {
-	// Extract ticket ID from QR code
 	const ticketId = extractTicketId(decodedText)
 	if (!ticketId) {
 		toast.error(__("Invalid QR code format"))
@@ -135,19 +144,12 @@ const onScanSuccess = (decodedText: string) => {
 	}
 
 	// Prevent duplicate scans of the same ticket within 2 seconds
-	if (lastScannedTicketId.value === ticketId) {
-		return
-	}
+	if (lastScannedTicketId.value === ticketId) return
 
-	if (scanTimeout.value) {
-		clearTimeout(scanTimeout.value)
-	}
+	if (scanTimeout) clearTimeout(scanTimeout)
 	lastScannedTicketId.value = ticketId
 	validateTicket(ticketId)
-
-	scanTimeout.value = setTimeout(() => {
-		lastScannedTicketId.value = null
-	}, 2000)
+	scanTimeout = setTimeout(() => (lastScannedTicketId.value = null), 2000)
 }
 
 const handleManualEntry = () => {
@@ -158,39 +160,13 @@ const handleManualEntry = () => {
 	manualTicketId.value = ""
 }
 
-onMounted(() => {
-	// Automatically start the scanner when component mounts
-	startScanner()
-})
+onMounted(startScanner)
 
 onUnmounted(() => {
-	if (qrScanner.value) {
-		qrScanner.value
-			.stop()
-			.then(() => {
-				qrScanner.value?.clear()
-			})
-			.catch((error) => {
-				console.error("Failed to cleanup scanner:", error)
-			})
-			.finally(() => {
-				qrScanner.value = null
-				scannerActive.value = false
-			})
-	} else {
-		qrScanner.value = null
-		scannerActive.value = false
-	}
-
-	if (scanTimeout.value) {
-		clearTimeout(scanTimeout.value)
-		scanTimeout.value = null
-	}
-})
-
-defineExpose({
-	startScanner,
-	stopScanner,
+	unmounted = true
+	permissionListener.abort()
+	stopScanner()
+	if (scanTimeout) clearTimeout(scanTimeout)
 })
 </script>
 
diff --git a/dashboard/src/components/SiteHeader.vue b/dashboard/src/components/SiteHeader.vue
new file mode 100644
index 00000000..dbc27043
--- /dev/null
+++ b/dashboard/src/components/SiteHeader.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { Avatar, Button, Dropdown, resolvedColorScheme, useColorScheme } from "frappe-ui"
+import { computed } from "vue"
+import { useRouter } from "vue-router"
+
+import BuzzLogo from "@/components/common/BuzzLogo.vue"
+import { useLoginDialog } from "@/composables/useLoginDialog"
+import { session } from "@/data/session"
+import { userResource } from "@/data/user"
+
+const router = useRouter()
+const { open: openLoginDialog } = useLoginDialog()
+const { setColorScheme } = useColorScheme()
+
+const toggleTheme = () => setColorScheme(resolvedColorScheme() === "dark" ? "light" : "dark")
+
+const menu = computed(() => [
+	{
+		group: session.fullName || session.user || "",
+		options: [
+			{ label: __("Dashboard"), icon: "lucide-layout-dashboard", onClick: () => router.push("/") },
+			{
+				label: __("Log Out"),
+				icon: "lucide-log-out",
+				disabled: session.logout.loading,
+				onClick: () => session.logout.submit(),
+			},
+		],
+	},
+])
+</script>
+
+<template>
+	<header class="mx-auto flex max-w-4xl items-center justify-between gap-4 p-4">
+		<a href="/" aria-label="Home">
+			<img
+				v-if="userResource.data?.brand_image"
+				class="h-6 contrast-100 brightness-100 invert-[0.8] dark:invert-0"
+				:src="userResource.data.brand_image"
+				alt=""
+			/>
+			<BuzzLogo v-else class="h-7 w-9 text-ink-gray-9" />
+		</a>
+		<nav class="flex items-center gap-3">
+			<Button variant="ghost" size="md" :aria-label="__('Toggle dark mode')" @click="toggleTheme">
+				<span class="lucide-sun hidden size-4 dark:block" aria-hidden="true" />
+				<span class="lucide-moon size-4 dark:hidden" aria-hidden="true" />
+			</Button>
+			<Dropdown v-if="session.isLoggedIn" :options="menu" align="end">
+				<button
+					type="button"
+					class="rounded-full transition-transform duration-150 ease-out active:scale-[0.97] focus-visible:outline-none focus-visible:focus-ring motion-reduce:transition-none"
+					:aria-label="__('Account menu')"
+				>
+					<Avatar :image="session.userImage ?? undefined" :label="session.fullName" size="lg" />
+				</button>
+			</Dropdown>
+			<Button v-else variant="ghost" size="md" :label="__('Log In')" @click="openLoginDialog" />
+		</nav>
+	</header>
+</template>
diff --git a/dashboard/src/components/TicketDetailsModal.vue b/dashboard/src/components/TicketDetailsModal.vue
deleted file mode 100644
index 57886fe3..00000000
--- a/dashboard/src/components/TicketDetailsModal.vue
+++ /dev/null
@@ -1,188 +0,0 @@
-<!-- TODO: This component needs a refactor -->
-<template>
-	<Dialog v-model="showTicketModal">
-		<template #title>
-			<h3 class="text-lg-semibold text-gray-900 dark:text-white">
-				{{ validationResult ? __("Valid Ticket") : __("Invalid Ticket") }}
-			</h3>
-		</template>
-
-		<!-- Success State -->
-		<div v-if="validationResult?.ticket">
-			<div class="text-center mb-6">
-				<div
-					class="w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center mx-auto mb-4"
-				>
-					<LucideCheckCircle class="w-8 h-8 text-green-600 dark:text-green-400" />
-				</div>
-				<h4 class="text-lg-semibold text-gray-900 dark:text-white">
-					{{ __("Valid Ticket") }}
-				</h4>
-				<p class="text-gray-600 dark:text-gray-400">{{ __("Ready for check-in") }}</p>
-			</div>
-
-			<div class="space-y-4 mb-6">
-				<div class="grid grid-cols-2 gap-4">
-					<div>
-						<h3 class="text-sm-medium text-gray-700 dark:text-gray-300">
-							{{ __("Attendee") }}
-						</h3>
-						<p class="text-sm text-gray-900 dark:text-white">
-							{{ validationResult?.ticket?.attendee_name }}
-						</p>
-					</div>
-					<div>
-						<h3 class="text-sm-medium text-gray-700 dark:text-gray-300">
-							{{ __("Email") }}
-						</h3>
-						<p class="text-sm text-gray-900 dark:text-white">
-							{{ validationResult?.ticket?.attendee_email }}
-						</p>
-					</div>
-					<div>
-						<h3 class="text-sm-medium text-gray-700 dark:text-gray-300">
-							{{ __("Ticket Type") }}
-						</h3>
-						<p class="text-sm text-gray-900 dark:text-white">
-							{{ validationResult?.ticket?.ticket_type }}
-						</p>
-					</div>
-					<div>
-						<h3 class="text-sm-medium text-gray-700 dark:text-gray-300">
-							{{ __("Ticket ID") }}
-						</h3>
-						<a
-							:href="`/app/event-ticket/${validationResult?.ticket?.id}`"
-							target="_blank"
-							rel="noopener noreferrer"
-							class="inline-flex items-center gap-1 text-sm font-mono text-ink-blue-6 hover:underline"
-						>
-							{{ validationResult?.ticket?.id }}
-							<LucideExternalLink class="w-3.5 h-3.5" />
-						</a>
-					</div>
-				</div>
-
-				<!-- Add-ons -->
-				<div
-					v-if="validationResult?.ticket?.add_ons?.length"
-					class="border-t border-gray-200 dark:border-gray-600 pt-4"
-				>
-					<h3 class="text-sm-medium text-gray-700 dark:text-gray-300 mb-2">
-						{{ __("Add-ons") }}
-					</h3>
-					<div class="space-y-2">
-						<div
-							v-for="addon in validationResult?.ticket?.add_ons"
-							:key="addon.add_on"
-							class="flex justify-between text-sm"
-						>
-							<span class="text-gray-900 dark:text-white"
-								>{{ __(addon.add_on_title || addon.add_on) }} ({{
-									formatPriceOrFree(addon.price, addon.currency)
-								}})</span
-							>
-							<span class="text-gray-600 dark:text-gray-400">{{ addon.value }}</span>
-						</div>
-					</div>
-				</div>
-
-				<!-- Payment details -->
-				<div v-if="validationResult?.payment_details">
-					<h3 class="text-sm-medium text-gray-700 dark:text-gray-300">
-						{{ __("Payment Details") }}
-					</h3>
-
-					<div class="grid grid-cols-2 mt-3 text-sm text-gray-900 dark:text-white">
-						<div class="space-y-1">
-							<p class="text-sm-medium text-gray-700 dark:text-gray-300">
-								{{ __("ID") }}
-							</p>
-							<p>{{ validationResult?.payment_details?.name }}</p>
-						</div>
-						<div class="space-y-1">
-							<p class="text-sm-medium text-gray-700 dark:text-gray-300">
-								{{ __("Amount Paid") }}
-							</p>
-							<p>
-								{{
-									formatPriceOrFree(
-										validationResult?.payment_details?.amount,
-										validationResult?.payment_details?.currency,
-									)
-								}}
-							</p>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- Error State -->
-		<div v-else>
-			<div class="text-center mb-6">
-				<div
-					class="w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mx-auto mb-4"
-				>
-					<LucideXCircle class="w-8 h-8 text-red-600 dark:text-red-400" />
-				</div>
-				<h4 class="text-lg-semibold text-gray-900 dark:text-white">
-					{{ validationResult?.error || "Invalid Ticket" }}
-				</h4>
-				<p class="text-gray-600 dark:text-gray-400">
-					{{ validationResult?.message }}
-				</p>
-			</div>
-		</div>
-
-		<template #actions>
-			<div v-if="!validationResult?.ticket?.is_checked_in" class="flex gap-3 flex-col">
-				<Button @click="handleCheckIn" :loading="isCheckingIn" class="w-full">
-					<template #prefix>
-						<LucideUserCheck class="w-4 h-4" />
-					</template>
-					{{ __("Check In") }}
-				</Button>
-				<Button @click="handleModalClose" variant="outline" class="w-full">
-					{{ __("Cancel") }}
-				</Button>
-			</div>
-
-			<!-- TODO: I don't understand why this is here. -->
-			<div v-else>
-				<Button @click="handleModalClose" class="w-full" variant="outline">
-					{{ __("Close") }}
-				</Button>
-			</div>
-		</template>
-	</Dialog>
-</template>
-
-<script setup lang="ts">
-import { Button, Dialog } from "frappe-ui"
-import LucideCheckCircle from "~icons/lucide/check-circle"
-import LucideExternalLink from "~icons/lucide/external-link"
-import LucideUserCheck from "~icons/lucide/user-check"
-import LucideXCircle from "~icons/lucide/x-circle"
-
-import { useTicketValidation } from "@/composables/useTicketValidation"
-import { formatPriceOrFree } from "@/utils/currency"
-
-const props = defineProps({
-	selectedEvent: {
-		type: Object,
-		default: null,
-	},
-})
-
-const { showTicketModal, isCheckingIn, validationResult, checkInTicket, closeModal } =
-	useTicketValidation()
-
-const handleCheckIn = () => {
-	checkInTicket()
-}
-
-const handleModalClose = () => {
-	closeModal()
-}
-</script>
diff --git a/dashboard/src/components/checkin/CheckInGuestList.vue b/dashboard/src/components/checkin/CheckInGuestList.vue
new file mode 100644
index 00000000..90b12fd4
--- /dev/null
+++ b/dashboard/src/components/checkin/CheckInGuestList.vue
@@ -0,0 +1,362 @@
+<script setup lang="ts">
+import { useIntersectionObserver } from "@vueuse/core"
+import {
+	Button,
+	Icon,
+	LoadingText,
+	TabButtons,
+	TextInput,
+	dayjsLocal,
+	toast,
+	useCall,
+} from "frappe-ui"
+import { computed, ref, watch } from "vue"
+
+import CheckInGuestRow from "@/components/checkin/CheckInGuestRow.vue"
+import GuestCheckInDialog from "@/components/checkin/GuestCheckInDialog.vue"
+import EmptyState from "@/components/common/EmptyState.vue"
+import QRScanner from "@/components/QRScanner.vue"
+import { useEventGuests } from "@/composables/useEventGuests"
+import type { ListOrder } from "@/composables/useListQuery"
+import {
+	type ValidationResult,
+	playSuccessBeep,
+	useTicketValidation,
+} from "@/composables/useTicketValidation"
+import type { EventGuest } from "@/types"
+import { formatPriceOrFree } from "@/utils/currency"
+import { serverErrorMessage } from "@/utils/serverError"
+
+const props = defineProps<{ event: string }>()
+
+const search = ref("")
+// "1" and "0" narrow the list on the server; anything else is everyone.
+const tab = ref("all")
+
+const { guests, loadMore, page, loadingFirstPage, loadingMore, searchPending } = useEventGuests(
+	props.event,
+	search,
+	ref<ListOrder>("desc"),
+	ref([]),
+	{ url: "/api/v2/method/buzz.api.checkin.get_checkin_guests", checkedIn: tab },
+)
+
+// Check-ins made here since the last fetch. A fetch carries the server's own count, which
+// already includes them, so the tally starts over with every response.
+const localCheckIns = ref(0)
+// The search the shown rows belong to.
+const loadedSearch = ref("")
+watch(
+	() => page.data,
+	() => {
+		localCheckIns.value = 0
+		loadedSearch.value = search.value.trim()
+	},
+)
+
+const initialLoading = computed(() => !page.data && !page.error)
+const reloading = computed(
+	() => !initialLoading.value && (searchPending.value || loadingFirstPage.value),
+)
+
+const emptyState = computed(() => {
+	if (loadedSearch.value)
+		return {
+			title: `No guests match “${loadedSearch.value}”`,
+			description:
+				tab.value === "all"
+					? "Check the spelling, or search by email or ticket ID."
+					: "Check the spelling, or look under All.",
+			icon: "lucide-search-x",
+		}
+	const titles: Record<string, string> = {
+		"1": "Nobody has checked in yet",
+		"0": "Everyone is in",
+	}
+	return { title: titles[tab.value] ?? "No guests yet", icon: "lucide-users" }
+})
+
+const total = computed(() => page.data?.total ?? 0)
+const checkedInCount = computed(() => (page.data?.checked_in ?? 0) + localCheckIns.value)
+
+const tabs = computed(() => [
+	{ label: "All", value: "all", count: total.value },
+	{ label: "Checked in", value: "1", count: checkedInCount.value },
+	{ label: "Not checked in", value: "0", count: total.value - checkedInCount.value },
+])
+
+const countOf = (value: string | number) =>
+	new Intl.NumberFormat().format(tabs.value.find((option) => option.value === value)?.count ?? 0)
+
+const startsAt = computed(() => {
+	const data = page.data
+	if (!data?.start_date) return ""
+	const date = dayjsLocal(`${data.start_date}T${data.start_time || "00:00:00"}`)
+	return date.format(data.start_time ? "ddd D MMM, h:mm A" : "ddd D MMM")
+})
+
+const selectedGuest = ref<EventGuest | null>(null)
+const payment = ref<string | null>(null)
+const guestOpen = ref(false)
+
+const openGuest = (guest: EventGuest, paid: string | null = null) => {
+	checkInCall.reset()
+	undoCall.reset()
+	selectedGuest.value = guest
+	payment.value = paid
+	guestOpen.value = true
+}
+
+// Rows are patched in place rather than refetched, so the pages already scrolled through stay.
+const setCheckedIn = (ticket: string, at: string | null) => {
+	for (const guest of [guests.value.find((row) => row.name === ticket), selectedGuest.value])
+		if (guest?.name === ticket) guest.checked_in_at = at
+	localCheckIns.value += at ? 1 : -1
+}
+
+interface CheckInResponse {
+	message: string
+	ticket: { id: string; check_in_time: string }
+}
+
+// One check-in at a time: the row or dialog that started it shows the spinner.
+const busyTicket = ref<string | null>(null)
+
+const checkInCall = useCall<CheckInResponse, { ticket_id: string }>({
+	url: "/api/v2/method/buzz.api.checkin.checkin_ticket",
+	method: "POST",
+	immediate: false,
+	onSuccess: (data) => {
+		busyTicket.value = null
+		setCheckedIn(data.ticket.id, data.ticket.check_in_time)
+		playSuccessBeep()
+		toast.success(data.message)
+		// Long enough to see the button turn into "Checked in", then out of the way.
+		if (guestOpen.value) setTimeout(() => (guestOpen.value = false), 600)
+	},
+	onError: (error) => {
+		busyTicket.value = null
+		// An open dialog shows the error itself; a row has nowhere else to say it.
+		if (!guestOpen.value) toast.error(serverErrorMessage(error) || "Check-in failed")
+	},
+})
+
+const checkIn = (ticket: string) => {
+	if (busyTicket.value) return
+	busyTicket.value = ticket
+	checkInCall.submit({ ticket_id: ticket })
+}
+
+// Undo lives only in the guest dialog, so its errors show there too.
+const undoCall = useCall<CheckInResponse, { ticket_id: string }>({
+	url: "/api/v2/method/buzz.api.checkin.undo_checkin",
+	method: "POST",
+	immediate: false,
+	onSuccess: (data) => {
+		busyTicket.value = null
+		setCheckedIn(data.ticket.id, null)
+		toast.success(data.message)
+	},
+	onError: () => (busyTicket.value = null),
+})
+
+const undoCheckIn = (ticket: string) => {
+	if (busyTicket.value) return
+	busyTicket.value = ticket
+	undoCall.submit({ ticket_id: ticket })
+}
+
+const stickySentinel = ref<HTMLElement | null>(null)
+const isSticky = ref(false)
+useIntersectionObserver(stickySentinel, ([entry]) => (isSticky.value = !entry?.isIntersecting))
+
+const sentinel = ref<HTMLElement | null>(null)
+useIntersectionObserver(sentinel, ([entry]) => entry?.isIntersecting && loadMore(), {
+	rootMargin: "400px",
+})
+
+const scanning = ref(false)
+const { validationResult } = useTicketValidation()
+
+const guestFromScan = ({ ticket }: Required<Pick<ValidationResult, "ticket">>): EventGuest =>
+	guests.value.find((guest) => guest.name === ticket.id) ?? {
+		name: ticket.id,
+		attendee_name: ticket.attendee_name,
+		attendee_email: ticket.attendee_email,
+		ticket_type: ticket.ticket_type,
+		registered_at: null,
+		add_ons: ticket.add_ons.map((addOn) => ({
+			title: addOn.add_on_title || addOn.add_on,
+			value: addOn.value ?? null,
+		})),
+	}
+
+watch(validationResult, (result) => {
+	if (!result?.ticket) return
+	const paid = result.payment_details
+	openGuest(
+		guestFromScan({ ticket: result.ticket }),
+		paid ? formatPriceOrFree(paid.amount, paid.currency) : null,
+	)
+	validationResult.value = null
+})
+</script>
+
+<template>
+	<div class="space-y-5 pb-24">
+		<EmptyState
+			v-if="page.error"
+			title="Access denied"
+			:description="serverErrorMessage(page.error)"
+			icon="lucide-shield-x"
+		/>
+
+		<template v-else>
+			<nav class="-mx-2 -mb-2 flex items-center justify-between gap-2">
+				<Button
+					variant="ghost"
+					icon-left="lucide-arrow-left"
+					label="Event dashboard"
+					:route="{ name: 'event-guests', params: { eventId: event } }"
+				/>
+				<Button
+					v-if="page.data?.route"
+					variant="ghost"
+					icon-right="lucide-arrow-up-right"
+					label="Event page"
+					:link="`/events/${page.data.route}`"
+				/>
+			</nav>
+
+			<div ref="stickySentinel" aria-hidden="true" />
+			<!-- The event is what the desk has to be sure of, so it carries the display type. -->
+			<div
+				class="sticky top-0 z-10 -mx-4 -my-3 space-y-5 border-b bg-surface-base/90 px-4 py-3 backdrop-blur-md backdrop-saturate-150 transition-colors duration-150 ease-out"
+				:class="isSticky ? 'border-outline-gray-2' : 'border-transparent'"
+			>
+				<header class="flex flex-wrap items-end justify-between gap-4">
+					<div class="min-w-0 flex-1 basis-56 space-y-2">
+						<p class="text-sm font-medium uppercase tracking-wider text-ink-gray-5">Check-in</p>
+						<h1
+							v-if="page.data"
+							class="line-clamp-2 font-display text-[2.75rem] uppercase leading-[0.95] text-ink-gray-9 md:text-[3.5rem]"
+						>
+							{{ page.data.title }}
+						</h1>
+						<div v-else class="h-12 w-64 max-w-full animate-pulse rounded-4 bg-surface-gray-2" />
+						<p class="truncate text-base text-ink-gray-5">
+							{{ [startsAt, page.data?.venue].filter(Boolean).join(" · ") }}
+						</p>
+					</div>
+					<Button
+						size="lg"
+						:icon-left="scanning ? 'lucide-x' : 'lucide-scan-barcode'"
+						:label="scanning ? 'Close' : 'Scan'"
+						class="ml-auto shrink-0 transition-transform duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none"
+						@click="scanning = !scanning"
+					/>
+				</header>
+
+				<Transition name="shutter">
+					<QRScanner v-if="scanning" :paused="guestOpen" />
+				</Transition>
+
+				<TextInput
+					v-model="search"
+					type="search"
+					size="md"
+					placeholder="Search by name, email or ticket ID"
+					aria-label="Search guests"
+				>
+					<template #prefix>
+						<Icon name="lucide-search" class="size-4 text-ink-gray-5" />
+					</template>
+					<template #suffix>
+						<LoadingText v-if="reloading && search.trim()" text="Searching" class="!text-sm" />
+					</template>
+				</TextInput>
+			</div>
+
+			<div class="-mx-4 overflow-x-auto px-4">
+				<TabButtons v-model="tab" :options="tabs" class="w-max">
+					<template #suffix="{ button }">
+						<span class="tabular-nums text-ink-gray-5">{{ countOf(button.value) }}</span>
+					</template>
+				</TabButtons>
+			</div>
+
+			<p class="text-p-sm text-ink-gray-5">
+				Tap <span class="font-medium text-ink-gray-7">Check in</span> as a guest arrives, or tap
+				their name to see their ticket. <span class="font-medium text-ink-gray-7">Scan</span>
+				reads the QR code on a ticket.
+			</p>
+
+			<ul v-if="initialLoading" class="flex flex-col gap-2" aria-busy="true">
+				<li
+					v-for="row in 6"
+					:key="row"
+					class="h-[62px] animate-pulse rounded-[14px] bg-surface-gray-1"
+				/>
+			</ul>
+
+			<div
+				v-else
+				class="transition-opacity duration-150 ease-out motion-reduce:transition-none"
+				:class="{ 'opacity-50': reloading }"
+				:aria-busy="reloading"
+			>
+				<ul v-if="guests.length" class="flex flex-col gap-2">
+					<CheckInGuestRow
+						v-for="guest in guests"
+						:key="guest.name"
+						:guest="guest"
+						:busy="busyTicket === guest.name && !guestOpen"
+						@open="openGuest(guest)"
+						@check-in="checkIn(guest.name)"
+					/>
+					<li v-if="loadingMore" class="h-[62px] animate-pulse rounded-[14px] bg-surface-gray-1" />
+				</ul>
+
+				<EmptyState v-else v-bind="emptyState">
+					<Button v-if="loadedSearch" label="Clear search" @click="search = ''" />
+				</EmptyState>
+			</div>
+
+			<div ref="sentinel" aria-hidden="true" />
+		</template>
+
+		<GuestCheckInDialog
+			v-model:open="guestOpen"
+			:guest="selectedGuest"
+			:payment="payment"
+			:busy="busyTicket === selectedGuest?.name"
+			:error="serverErrorMessage(checkInCall.error || undoCall.error)"
+			@check-in="selectedGuest && checkIn(selectedGuest.name)"
+			@undo="selectedGuest && undoCheckIn(selectedGuest.name)"
+		/>
+	</div>
+</template>
+
+<style scoped>
+.shutter-enter-active {
+	transition:
+		grid-template-rows 350ms cubic-bezier(0.23, 1, 0.32, 1),
+		clip-path 500ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.shutter-leave-active {
+	transition:
+		grid-template-rows 250ms ease-in,
+		clip-path 200ms ease-in;
+}
+.shutter-enter-from,
+.shutter-leave-to {
+	grid-template-rows: 0fr;
+	clip-path: circle(0% at 50% 50%);
+}
+@media (prefers-reduced-motion: reduce) {
+	.shutter-enter-active,
+	.shutter-leave-active {
+		transition: none;
+	}
+}
+</style>
diff --git a/dashboard/src/components/checkin/CheckInGuestRow.vue b/dashboard/src/components/checkin/CheckInGuestRow.vue
new file mode 100644
index 00000000..dafda196
--- /dev/null
+++ b/dashboard/src/components/checkin/CheckInGuestRow.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { Button, dayjsLocal } from "frappe-ui"
+import { computed } from "vue"
+
+import type { EventGuest } from "@/types"
+
+const props = defineProps<{ guest: EventGuest; busy?: boolean }>()
+
+const emit = defineEmits<{ open: []; checkIn: [] }>()
+
+const name = computed(
+	() => props.guest.attendee_name || props.guest.attendee_email || "Unnamed guest",
+)
+
+const checkedInAt = computed(() =>
+	props.guest.checked_in_at ? dayjsLocal(props.guest.checked_in_at).format("h:mm A") : null,
+)
+
+const detail = computed(() =>
+	[props.guest.ticket_type, props.guest.attendee_email].filter(Boolean).join(" · "),
+)
+</script>
+
+<template>
+	<li
+		class="flex flex-wrap items-center gap-3 rounded-[14px] py-2.5 pl-3.5 pr-2.5 transition-colors duration-200 ease-out motion-reduce:transition-none"
+		:class="checkedInAt ? 'bg-surface-green-2' : 'bg-surface-gray-1'"
+	>
+		<button
+			type="button"
+			class="flex min-w-0 flex-1 basis-40 flex-col gap-0.5 rounded-4 py-0.5 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline-gray-3"
+			:aria-label="`Open ${name}`"
+			@click="emit('open')"
+		>
+			<span class="truncate text-base font-semibold text-ink-gray-9">{{ name }}</span>
+			<Transition
+				mode="out-in"
+				enter-from-class="opacity-0"
+				enter-active-class="transition-opacity duration-200 ease-out"
+			>
+				<span v-if="checkedInAt" key="checked-in" class="truncate text-sm text-ink-green-7">
+					Checked in at {{ checkedInAt }}
+				</span>
+				<span v-else key="detail" class="truncate text-sm text-ink-gray-5">{{ detail }}</span>
+			</Transition>
+		</button>
+
+		<!-- Only the arrival of the check mark animates; the button it replaces leaves at once. -->
+		<Transition
+			mode="out-in"
+			enter-from-class="opacity-0 scale-90 motion-reduce:scale-100"
+			enter-active-class="transition-[opacity,transform] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
+		>
+			<span
+				v-if="checkedInAt"
+				key="checked-in"
+				role="img"
+				class="ml-auto grid min-w-[6.5rem] place-items-center text-ink-green-7"
+				:aria-label="`${name} is checked in`"
+			>
+				<span class="lucide-check size-5" aria-hidden="true" />
+			</span>
+			<Button
+				v-else
+				key="check-in"
+				variant="solid"
+				theme="green"
+				size="md"
+				label="Check in"
+				class="ml-auto min-w-[6.5rem] transition-transform duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none dark:!text-white"
+				:aria-label="`Check in ${name}`"
+				:loading="busy"
+				@click="emit('checkIn')"
+			/>
+		</Transition>
+	</li>
+</template>
diff --git a/dashboard/src/components/checkin/GuestCheckInDialog.vue b/dashboard/src/components/checkin/GuestCheckInDialog.vue
new file mode 100644
index 00000000..cda9782c
--- /dev/null
+++ b/dashboard/src/components/checkin/GuestCheckInDialog.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { Avatar, Badge, BottomSheet, Button, Dialog, ErrorMessage, dayjsLocal } from "frappe-ui"
+import { computed } from "vue"
+
+import { useIsMobile } from "@/composables/useIsMobile"
+import type { EventGuest } from "@/types"
+
+const props = defineProps<{
+	guest: EventGuest | null
+	payment?: string | null
+	busy?: boolean
+	error?: string
+}>()
+
+const open = defineModel<boolean>("open", { required: true })
+
+const emit = defineEmits<{ checkIn: []; undo: [] }>()
+
+// A dialog at the desk, a sheet from the bottom edge on a phone held in one hand.
+const isMobile = useIsMobile()
+
+const name = computed(
+	() => props.guest?.attendee_name || props.guest?.attendee_email || "Unnamed guest",
+)
+
+const checkedInAt = computed(() =>
+	props.guest?.checked_in_at ? dayjsLocal(props.guest.checked_in_at).format("h:mm A") : null,
+)
+
+const registeredAt = computed(() =>
+	props.guest?.registered_at ? dayjsLocal(props.guest.registered_at).format("D MMM YYYY") : null,
+)
+
+const facts = computed(() =>
+	[props.payment, registeredAt.value && `Registered ${registeredAt.value}`].filter(Boolean),
+)
+
+const addOnLabel = (addOn: EventGuest["add_ons"][number]) =>
+	addOn.value ? `${addOn.title}: ${addOn.value}` : addOn.title
+</script>
+
+<template>
+	<component
+		:is="isMobile ? BottomSheet : Dialog"
+		v-model:open="open"
+		v-bind="isMobile ? {} : { bare: true, size: 'md' }"
+	>
+		<div v-if="guest" class="flex flex-col gap-4 p-5">
+			<div class="flex items-start gap-3">
+				<Avatar :label="name" size="2xl" />
+				<div class="min-w-0 flex-1">
+					<p class="break-words text-lg font-semibold text-ink-gray-9">{{ name }}</p>
+					<p v-if="guest.attendee_email" class="break-all text-base text-ink-gray-5">
+						{{ guest.attendee_email }}
+					</p>
+				</div>
+				<Button
+					v-if="!isMobile"
+					variant="ghost"
+					icon="lucide-x"
+					aria-label="Close"
+					@click="open = false"
+				/>
+			</div>
+
+			<!-- The tier is what the desk acts on, so it is set large enough to read at arm's length. -->
+			<div class="flex flex-col gap-1.5 rounded-7 bg-surface-gray-2 px-4 py-3.5">
+				<span
+					class="line-clamp-2 break-words font-display text-4xl uppercase leading-none text-ink-gray-9"
+					:title="guest.ticket_type || undefined"
+				>
+					{{ guest.ticket_type || "Ticket" }}
+				</span>
+				<span v-if="facts.length" class="text-sm text-ink-gray-5">
+					{{ facts.join(" · ") }}
+				</span>
+			</div>
+
+			<section v-if="guest.add_ons.length" class="space-y-1.5">
+				<h3 class="text-sm font-medium text-ink-gray-5">Add-ons</h3>
+				<div class="flex flex-wrap gap-1.5">
+					<Badge
+						v-for="addOn in guest.add_ons"
+						:key="addOnLabel(addOn)"
+						variant="subtle"
+						:label="addOnLabel(addOn)"
+						class="!h-auto max-w-full !whitespace-normal break-words py-0.5"
+					/>
+				</div>
+			</section>
+
+			<ErrorMessage :message="error" />
+
+			<template v-if="checkedInAt">
+				<div
+					class="flex h-14 items-center justify-center gap-2 rounded-[14px] bg-surface-green-2 text-lg font-medium text-ink-green-7"
+				>
+					<span class="lucide-check size-5" aria-hidden="true" />
+					Checked in at {{ checkedInAt }}
+				</div>
+				<!-- Undo is for a mis-tap, so it stays quiet under the state it reverses. -->
+				<Button
+					variant="ghost"
+					label="Undo check-in"
+					icon-left="lucide-undo-2"
+					class="self-center"
+					:loading="busy"
+					@click="emit('undo')"
+				/>
+			</template>
+			<Button
+				v-else
+				variant="solid"
+				theme="green"
+				class="!h-14 w-full rounded-[14px] !text-lg dark:!text-white transition-transform duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none"
+				label="Check in"
+				:loading="busy"
+				@click="emit('checkIn')"
+			/>
+		</div>
+	</component>
+</template>
diff --git a/dashboard/src/components/common/EmptyState.vue b/dashboard/src/components/common/EmptyState.vue
index 0a527cb7..bb2a2414 100644
--- a/dashboard/src/components/common/EmptyState.vue
+++ b/dashboard/src/components/common/EmptyState.vue
@@ -19,5 +19,6 @@ defineProps<{
 
 		<h2 class="text-lg-medium text-ink-gray-8">{{ title }}</h2>
 		<p v-if="description" class="text-base text-ink-gray-5">{{ description }}</p>
+		<div v-if="$slots.default" class="mt-2"><slot /></div>
 	</div>
 </template>
diff --git a/dashboard/src/components/dashboard/events/GuestListExport.vue b/dashboard/src/components/dashboard/events/GuestListExport.vue
index 11a4992c..e76fcc8e 100644
--- a/dashboard/src/components/dashboard/events/GuestListExport.vue
+++ b/dashboard/src/components/dashboard/events/GuestListExport.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Button, call, toast } from "frappe-ui"
 import { ref } from "vue"
+import { useRouter } from "vue-router"
 
 import { PRESSABLE } from "@/components/dashboard/events/QuickActionTile.vue"
 import type { EventGuest, EventGuests } from "@/types"
@@ -14,6 +15,12 @@ const props = defineProps<{
 }>()
 
 const exporting = ref(false)
+const router = useRouter()
+
+function openCheckIn() {
+	const { href } = router.resolve({ name: "check-in", params: { eventName: props.event } })
+	window.open(href, "_blank")
+}
 
 // The list is paged, so the export walks it: a hundred at a time until the server says
 // there is no next page.
@@ -54,15 +61,27 @@ async function exportGuests() {
 
 <template>
 	<h3 class="text-p-sm font-medium text-ink-gray-5">Quick actions</h3>
-	<Button
-		:class="`w-full !justify-start ${PRESSABLE}`"
-		variant="ghost"
-		label="Download CSV"
-		:loading="exporting"
-		@click="exportGuests"
-	>
-		<template #prefix>
-			<span class="lucide-download size-4" aria-hidden="true" />
-		</template>
-	</Button>
+	<section class="pt-1">
+		<Button
+			:class="`w-full !justify-start ${PRESSABLE}`"
+			variant="ghost"
+			label="Check in guests"
+			@click="openCheckIn"
+		>
+			<template #prefix>
+				<span class="lucide-scan-barcode size-4" aria-hidden="true" />
+			</template>
+		</Button>
+		<Button
+			:class="`w-full !justify-start ${PRESSABLE}`"
+			variant="ghost"
+			label="Download CSV"
+			:loading="exporting"
+			@click="exportGuests"
+		>
+			<template #prefix>
+				<span class="lucide-download size-4" aria-hidden="true" />
+			</template>
+		</Button>
+	</section>
 </template>
diff --git a/dashboard/src/composables/useEventGuests.ts b/dashboard/src/composables/useEventGuests.ts
index 2ad952d8..40cd04df 100644
--- a/dashboard/src/composables/useEventGuests.ts
+++ b/dashboard/src/composables/useEventGuests.ts
@@ -23,6 +23,12 @@ export function useEventGuests(
 	search: Ref<string>,
 	order: Ref<ListOrder>,
 	conditions: Ref<Condition[]>,
+	// The check-in page reads the same list through its own, stricter endpoint, narrowed to
+	// who has or has not arrived ("1" / "0", empty for everyone).
+	{
+		url = "/api/v2/method/buzz.api.events.get_event_guests",
+		checkedIn = ref(""),
+	}: { url?: string; checkedIn?: Ref<string> } = {},
 ) {
 	// Typing rewrites the URL, and every rewrite is a request — wait for the pause.
 	const debouncedSearch = refDebounced(search, 300)
@@ -30,7 +36,7 @@ export function useEventGuests(
 	const guests = ref<EventGuest[]>([])
 
 	const page = useCall<EventGuests, Record<string, string | number>>({
-		url: "/api/v2/method/buzz.api.events.get_event_guests",
+		url,
 		params: () => ({
 			event,
 			search: debouncedSearch.value.trim(),
@@ -38,6 +44,7 @@ export function useEventGuests(
 			order: order.value,
 			start: start.value,
 			limit: GUESTS_PAGE_SIZE,
+			checked_in: checkedIn.value,
 		}),
 		// Off by default, so without this a new page or search would never be fetched.
 		refetch: true,
@@ -55,14 +62,9 @@ export function useEventGuests(
 
 	// Sync, so the offset is back at zero before useCall's own watcher rebuilds the URL —
 	// a pre-flush reset lets the stale offset go out as a request that is aborted a tick later.
-	watch(
-		[debouncedSearch, order, conditions],
-		() => {
-			start.value = 0
-			guests.value = []
-		},
-		{ flush: "sync" },
-	)
+	watch([debouncedSearch, order, conditions, checkedIn], () => (start.value = 0), {
+		flush: "sync",
+	})
 
 	const loadMore = () => {
 		if (page.loading || !page.data?.has_next_page) return
@@ -76,5 +78,6 @@ export function useEventGuests(
 		// The first page is the only one that leaves the list empty while it loads.
 		loadingFirstPage: computed(() => page.loading && start.value === 0),
 		loadingMore: computed(() => page.loading && start.value > 0),
+		searchPending: computed(() => search.value.trim() !== debouncedSearch.value.trim()),
 	}
 }
diff --git a/dashboard/src/composables/useTicketValidation.ts b/dashboard/src/composables/useTicketValidation.ts
index 848fa0d5..167d2720 100644
--- a/dashboard/src/composables/useTicketValidation.ts
+++ b/dashboard/src/composables/useTicketValidation.ts
@@ -6,7 +6,7 @@ import beepSound from "@/assets/audio/beep.wav"
 import type { TicketAddOnValue } from "@/types/Ticketing/TicketAddOnValue"
 import { serverErrorMessage } from "@/utils/serverError"
 
-interface ValidationTicket {
+export interface ValidationTicket {
 	id: string
 	attendee_name: string
 	attendee_email: string
@@ -35,138 +35,61 @@ interface PaymentDetails {
 	currency?: string
 }
 
-interface ValidationResult {
+export interface ValidationResult {
 	message?: string
 	error?: string
 	ticket?: ValidationTicket
 	payment_details?: PaymentDetails
 }
 
-interface TicketValidationState {
-	isProcessingTicket: Ref<boolean>
-	isCheckingIn: Ref<boolean>
-	validationResult: Ref<ValidationResult | null>
-	showTicketModal: Ref<boolean>
-	validateTicket: (ticketId: string) => void
-	checkInTicket: () => void
-	clearResults: () => void
-	closeModal: () => void
-}
-
-let ticketValidationState: TicketValidationState | null = null
-
 const isProcessingTicket = ref(false)
-const isCheckingIn = ref(false)
 const validationResult = ref<ValidationResult | null>(null)
-const showTicketModal = ref(false)
 
 let lastToastMessage: string | null = null
 let lastToastTime = 0
 const TOAST_DEBOUNCE_MS = 500
 
-const playSuccessSound = (): void => {
-	const audio = new Audio(beepSound)
-	audio.play()
+const playSound = (sound: string): void => {
+	new Audio(sound).play()
 }
 
-const playErrorSound = (): void => {
-	const audio = new Audio(beepFailSound)
-	audio.play()
-}
+export const playSuccessBeep = (): void => playSound(beepSound)
 
-const showDebouncedToast = (message: string, type: "error" | "success" = "error"): void => {
+const showDebouncedToast = (message: string): void => {
 	const now = Date.now()
-	if (lastToastMessage === message && now - lastToastTime < TOAST_DEBOUNCE_MS) {
-		return
-	}
+	if (lastToastMessage === message && now - lastToastTime < TOAST_DEBOUNCE_MS) return
 	lastToastMessage = message
 	lastToastTime = now
-
-	if (type === "error") {
-		toast.error(message)
-	} else {
-		toast.success(message)
-	}
+	toast.error(message)
 }
 
-// Ticket validation resource
 const validateTicketResource = useCall<ValidationResult, { ticket_id: string }>({
 	url: "/api/v2/method/buzz.api.checkin.validate_ticket_for_checkin",
 	method: "POST",
 	immediate: false,
 	onSuccess: (data) => {
 		validationResult.value = data
-		showTicketModal.value = true
-		playSuccessSound()
 		isProcessingTicket.value = false
+		playSuccessBeep()
 	},
 	onError: (error) => {
 		validationResult.value = null
 		isProcessingTicket.value = false
 		showDebouncedToast(serverErrorMessage(error) || __("Error validating ticket"))
-		playErrorSound()
-	},
-})
-
-// Check-in resource
-const checkInResource = useCall<ValidationResult, { ticket_id: string }>({
-	url: "/api/v2/method/buzz.api.checkin.checkin_ticket",
-	method: "POST",
-	immediate: false,
-	onSuccess: (data) => {
-		validationResult.value = data
-		showTicketModal.value = false
-		isCheckingIn.value = false
-	},
-	onError: (error) => {
-		isCheckingIn.value = false
-		showDebouncedToast(serverErrorMessage(error) || __("Check-in failed"))
-		playErrorSound()
+		playSound(beepFailSound)
 	},
 })
 
-export function useTicketValidation(): TicketValidationState {
-	if (ticketValidationState) {
-		return ticketValidationState
-	}
-
-	// Methods
-	const validateTicket = (ticketId: string): void => {
-		isProcessingTicket.value = true
-		validateTicketResource.submit({ ticket_id: ticketId })
-	}
-
-	const checkInTicket = (): void => {
-		if (!validationResult.value?.ticket?.id) return
-
-		isCheckingIn.value = true
-		checkInResource.submit({ ticket_id: validationResult.value.ticket.id })
-	}
-
-	const clearResults = (): void => {
-		validationResult.value = null
-		isProcessingTicket.value = false
-		isCheckingIn.value = false
-		showTicketModal.value = false
-	}
-
-	const closeModal = (): void => {
-		showTicketModal.value = false
-	}
-
-	ticketValidationState = {
-		// State
-		isProcessingTicket,
-		isCheckingIn,
-		validationResult,
-		showTicketModal,
-
-		// Methods
-		validateTicket,
-		checkInTicket,
-		clearResults,
-		closeModal,
-	}
+const validateTicket = (ticketId: string): void => {
+	isProcessingTicket.value = true
+	validateTicketResource.submit({ ticket_id: ticketId })
+}
 
-	return ticketValidationState
+/** Scan state shared by the scanner and the page that opens the scanned guest. */
+export function useTicketValidation(): {
+	isProcessingTicket: Ref<boolean>
+	validationResult: Ref<ValidationResult | null>
+	validateTicket: (ticketId: string) => void
+} {
+	return { isProcessingTicket, validationResult, validateTicket }
 }
diff --git a/dashboard/src/index.css b/dashboard/src/index.css
index 7708373e..9ff72825 100644
--- a/dashboard/src/index.css
+++ b/dashboard/src/index.css
@@ -1,4 +1,5 @@
 @import "./assets/Inter/inter.css";
+@import "./assets/LeagueGothic/league-gothic.css";
 @import "frappe-ui/style.css";
 
 html {
diff --git a/dashboard/src/layouts/Layout.vue b/dashboard/src/layouts/Layout.vue
index c0e7a1be..0818a2d8 100644
--- a/dashboard/src/layouts/Layout.vue
+++ b/dashboard/src/layouts/Layout.vue
@@ -5,7 +5,10 @@
 		class="min-h-dvh bg-surface-base text-ink-gray-8"
 		:class="{ 'h-dvh overflow-hidden': fullBleed }"
 	>
-		<Navbar v-if="routerReady && !fullBleed" />
+		<template v-if="routerReady && !fullBleed">
+			<SiteHeader v-if="route.meta.siteHeader" />
+			<Navbar v-else />
+		</template>
 		<div :class="fullBleed ? 'h-full' : 'max-w-4xl py-8 px-4 md:py-12 mx-auto'">
 			<template v-if="!routerReady">
 				<ManagerShellPlaceholder v-if="fullBleed" />
@@ -22,6 +25,7 @@ import { useRoute, useRouter } from "vue-router"
 
 import LoginRequired from "@/components/LoginRequired.vue"
 import Navbar from "@/components/Navbar.vue"
+import SiteHeader from "@/components/SiteHeader.vue"
 import { session } from "@/data/session"
 import ManagerShellPlaceholder from "@/layouts/ManagerShellPlaceholder.vue"
 
diff --git a/dashboard/src/pages/CheckIn.vue b/dashboard/src/pages/CheckIn.vue
new file mode 100644
index 00000000..01780685
--- /dev/null
+++ b/dashboard/src/pages/CheckIn.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router"
+
+import CheckInGuestList from "@/components/checkin/CheckInGuestList.vue"
+import EventSelector from "@/components/EventSelector.vue"
+
+defineProps<{ eventName?: string }>()
+
+const router = useRouter()
+</script>
+
+<template>
+	<CheckInGuestList v-if="eventName" :key="eventName" :event="eventName" />
+	<EventSelector
+		v-else
+		@select="(event) => router.push({ name: 'check-in', params: { eventName: event.name } })"
+	/>
+</template>
diff --git a/dashboard/src/pages/CheckInScanner.vue b/dashboard/src/pages/CheckInScanner.vue
deleted file mode 100644
index 0ee338c2..00000000
--- a/dashboard/src/pages/CheckInScanner.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-	<div class="min-h-[75vh] border border-gray-200 dark:border-gray-700 shadow-sm mx-4 rounded-5">
-		<!-- Header -->
-		<div class="shadow-sm border-b">
-			<div class="max-w-md mx-auto px-4 py-4">
-				<h1 class="text-2xl-bold text-center text-gray-900 dark:text-white">
-					{{ __("Event Check-in Scanner") }}
-				</h1>
-			</div>
-		</div>
-
-		<!-- Access Denied Message -->
-		<div
-			v-if="!hasRequiredRole"
-			class="size-full flex justify-center items-center p-6 text-center min-h-[50vh]"
-		>
-			<div class="flex flex-col items-center space-y-4">
-				<div
-					class="w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center"
-				>
-					<LucideShieldX class="w-8 h-8 text-red-600 dark:text-red-400" />
-				</div>
-				<div>
-					<h4 class="text-lg-medium text-gray-900 dark:text-white mb-2">
-						{{ __("Access Denied") }}
-					</h4>
-					<p class="text-gray-600 dark:text-gray-400">
-						{{ __("You don't have the required permissions to access the ticket scanner.") }}
-					</p>
-				</div>
-			</div>
-		</div>
-
-		<!-- Main Content -->
-		<div v-else class="size-full px-4 py-6">
-			<!-- Event Selection -->
-			<EventSelector
-				v-if="!selectedEvent"
-				:selected-event="selectedEvent || undefined"
-				@select="selectEvent"
-			/>
-
-			<!-- Scanner Interface -->
-			<div v-else class="space-y-6">
-				<!-- Selected Event Info -->
-				<BackButton :label="selectedEvent?.title" @click="clearEventSelection" />
-
-				<!-- QR Scanner -->
-				<QRScanner ref="qrScannerRef" />
-
-				<!-- Last Scan Status -->
-				<div
-					v-if="validationResult"
-					class="bg-white dark:bg-gray-800 rounded-6 shadow-sm border border-gray-200 dark:border-gray-700 p-4"
-				>
-					<h3 class="font-medium text-gray-900 dark:text-white mb-2">
-						{{ __("Last Scan Result") }}
-					</h3>
-					<div
-						class="p-3 rounded-6 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800"
-					>
-						<p class="text-sm-medium text-green-800 dark:text-green-200">
-							{{ validationResult.message }}
-						</p>
-						<p
-							v-if="validationResult.ticket"
-							class="text-xs mt-1 text-green-600 dark:text-green-400"
-						>
-							{{ __("Ticket ID") }}: {{ validationResult.ticket.id }}
-						</p>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- Ticket Details Modal -->
-		<TicketDetailsModal :selected-event="selectedEvent || undefined" />
-	</div>
-</template>
-
-<script setup lang="ts">
-import { useList } from "frappe-ui"
-import { computed, onMounted, ref } from "vue"
-import { useRouter } from "vue-router"
-import LucideShieldX from "~icons/lucide/shield-x"
-
-import { useTicketValidation } from "@/composables/useTicketValidation"
-import { userResource } from "@/data/user"
-import type { UserInfo } from "@/types"
-
-import BackButton from "../components/common/BackButton.vue"
-import EventSelector from "../components/EventSelector.vue"
-import QRScanner from "../components/QRScanner.vue"
-import TicketDetailsModal from "../components/TicketDetailsModal.vue"
-
-const props = defineProps({
-	eventName: {
-		type: String,
-		default: "",
-	},
-})
-
-const router = useRouter()
-const userProfile = ref<Partial<UserInfo>>({})
-
-const hasRequiredRole = computed(() => {
-	if (!userProfile.value || !userProfile.value.roles) return false
-	return userProfile.value.roles.some((role) => role.role === "Frontdesk Manager")
-})
-
-const { validationResult, clearResults } = useTicketValidation()
-
-// State
-const selectedEvent = ref<Record<string, any> | null>(null)
-const qrScannerRef = ref<InstanceType<typeof QRScanner> | null>(null)
-
-// Event selection
-const selectEvent = (event: Record<string, any>) => {
-	selectedEvent.value = event
-	clearResults()
-	router.replace({ name: "check-in", params: { eventName: event.name } })
-}
-
-const clearEventSelection = () => {
-	selectedEvent.value = null
-	clearResults()
-	router.replace({ name: "check-in" })
-}
-
-onMounted(() => {
-	userProfile.value = { ...userResource.data }
-
-	if (props.eventName) {
-		useList<Record<string, any> & { name: string }>({
-			doctype: "Buzz Event",
-			filters: { name: props.eventName },
-			fields: ["name", "title", "start_date", "start_time", "end_date", "end_time"],
-			limit: 1,
-			onSuccess: (events) => (selectedEvent.value = events[0] ?? selectedEvent.value),
-		})
-	}
-})
-</script>
diff --git a/dashboard/src/router.ts b/dashboard/src/router.ts
index bcc9d046..b4d0c0d7 100644
--- a/dashboard/src/router.ts
+++ b/dashboard/src/router.ts
@@ -158,8 +158,8 @@ const routes: RouteRecordRaw[] = [
 		path: "/check-in/:eventName?",
 		name: "check-in",
 		props: true,
-		meta: { title: "Check In" },
-		component: () => import("@/pages/CheckInScanner.vue"),
+		meta: { title: "Check In", siteHeader: true },
+		component: () => import("@/pages/CheckIn.vue"),
 	},
 	{
 		path: "/register/:eventRoute",
diff --git a/dashboard/src/types.ts b/dashboard/src/types.ts
index 4015ae4d..d3bdff45 100644
--- a/dashboard/src/types.ts
+++ b/dashboard/src/types.ts
@@ -270,6 +270,8 @@ export interface EventGuest {
 	ticket_type: string | null
 	registered_at: string | null
 	add_ons: GuestAddOn[]
+	// Today's check-in, if the guest has arrived.
+	checked_in_at?: string | null
 }
 
 // buzz.api.events.get_event_registration_trend
@@ -296,8 +298,10 @@ export interface EventGuests {
 	start_time: string | null
 	end_date: string | null
 	venue: string | null
+	route: string | null
 	total: number
 	matched: number
+	checked_in: number
 	guests: EventGuest[]
 	has_next_page: boolean
 	filter_fields: FilterField[]
diff --git a/dashboard/tailwind.config.js b/dashboard/tailwind.config.js
index c25dd004..eb56922b 100644
--- a/dashboard/tailwind.config.js
+++ b/dashboard/tailwind.config.js
@@ -15,7 +15,11 @@ export default {
 		"./node_modules/frappe-ui/experimental/**/*.{vue,js,ts,jsx,tsx}",
 	],
 	theme: {
-		extend: {},
+		extend: {
+			fontFamily: {
+				display: ['"League Gothic"', '"Arial Narrow"', "sans-serif"],
+			},
+		},
 	},
 	plugins: [],
 }
diff --git a/e2e/pages/check-in.page.ts b/e2e/pages/check-in.page.ts
index edf5849a..ebca40bf 100644
--- a/e2e/pages/check-in.page.ts
+++ b/e2e/pages/check-in.page.ts
@@ -4,19 +4,19 @@ export class CheckInPage {
 	private page: Page
 	accessDeniedMessage: Locator
 	manualTicketInput: Locator
-	lastScanResult: Locator
 	ticketModal: Locator
+	private scanButton: Locator
 	private checkButton: Locator
 	private checkInButton: Locator
 
 	constructor(page: Page) {
 		this.page = page
-		this.accessDeniedMessage = page.getByText("Access Denied")
+		this.accessDeniedMessage = page.getByText("Access denied")
 		this.manualTicketInput = page.getByPlaceholder("Enter ticket ID manually")
+		this.scanButton = page.getByRole("button", { name: "Scan", exact: true })
 		this.checkButton = page.getByRole("button", { name: "Check", exact: true })
 		this.ticketModal = page.getByRole("dialog")
-		this.checkInButton = page.getByRole("button", { name: "Check In", exact: true })
-		this.lastScanResult = page.getByText("Last Scan Result")
+		this.checkInButton = page.getByRole("button", { name: "Check in", exact: true })
 	}
 
 	async goto(eventName?: string): Promise<void> {
@@ -29,20 +29,18 @@ export class CheckInPage {
 		await this.checkButton.click()
 	}
 
-	/**
-	 * Clicks Check In and waits for the request to land. The "Last Scan Result" panel is not a
-	 * usable signal — it is already on screen from the preceding validate call.
-	 */
+	/** Clicks Check in and waits for the request to land; the scanner then reopens on its own. */
 	async confirmCheckIn(): Promise<void> {
 		const recorded = this.page.waitForResponse(
 			(response) => response.url().includes("checkin_ticket") && response.status() === 200,
 		)
 		await this.checkInButton.click()
 		await recorded
-		await expect(this.ticketModal).toBeHidden()
+		await expect(this.manualTicketInput).toBeVisible()
 	}
 
 	async expectScannerVisible(): Promise<void> {
+		await this.scanButton.click({ timeout: 15000 })
 		await expect(this.manualTicketInput).toBeVisible({ timeout: 15000 })
 		await expect(this.accessDeniedMessage).toBeHidden()
 	}
diff --git a/e2e/tests/check-in.spec.ts b/e2e/tests/check-in.spec.ts
index 0d6a2679..154ce460 100644
--- a/e2e/tests/check-in.spec.ts
+++ b/e2e/tests/check-in.spec.ts
@@ -115,9 +115,9 @@ test.describe("Check-in scanner", () => {
 test.describe("Check-in access control", () => {
 	test.use({ storageState: NO_ROLE_STATE_PATH })
 
-	test("a user without the Frontdesk Manager role is refused", async ({ page }) => {
+	test("a user outside the event's team is refused", async ({ page }) => {
 		const checkInPage = new CheckInPage(page)
-		await checkInPage.goto()
+		await checkInPage.goto(eventName)
 
 		await checkInPage.expectAccessDenied()
 	})