diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx
new file mode 100644
index 000000000..c178a0f1c
--- /dev/null
+++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/ConfirmStage.tsx
@@ -0,0 +1,98 @@
+'use client';
+
+import Link from 'next/link';
+import Image from 'next/image';
+import mapIcon from '@public/hackers/table-number-checkin/map.svg';
+import checkmarkIcon from '@public/hackers/table-number-checkin/check.svg';
+
+interface ConfirmStageProps {
+ tableNumber: string | null;
+ onConfirm: () => void;
+ onReset: () => void;
+}
+
+export default function ConfirmStage({
+ tableNumber,
+ onConfirm,
+ onReset,
+}: ConfirmStageProps) {
+ return (
+
+ {/* RIGHT column — first in DOM so it appears at top on mobile, right on desktop */}
+
+ {/* Table Number Card */}
+
+
+ TABLE
+
+
+ {tableNumber ?? '---'}
+
+
+
+
+ {/* LEFT column — second in DOM, reordered to first on desktop */}
+
+
+
+ Your Table Number
+
+
+
+ Check that you and your team members received the same table number.
+ It is extremely important to be
+ present at your table when
+ the judges arrive.
+
+
+ {/* LEFT column — second in DOM, reordered to first on desktop */}
+
+
+
+ {error
+ ? 'Oops! We did not find your Devpost number.'
+ : 'Find your Devpost number.'}
+
+
+ {error ? (
+
+ Please double check you have entered the same number listed on
+ Devpost.
+
+ ) : (
+
+ This can be found by going to{' '}
+
+ hackdavis-2026.devpost.com/tables
+ {' '}
+ and finding your project submission name. Enter the number exactly
+ as it is presented.
+
+ )}
+
+
+ {/* Buttons — bottom of left column on desktop, bottom of card on mobile */}
+
+
+
+
+
+
+
+ );
+}
diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/InitStage.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/InitStage.tsx
new file mode 100644
index 000000000..8a2300da8
--- /dev/null
+++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/InitStage.tsx
@@ -0,0 +1,56 @@
+'use client';
+
+import Image from 'next/image';
+import mascotsCelebrate from '@public/hackers/table-number-checkin/end-of-hackathon.svg';
+import rightArrow from '@public/hackers/table-number-checkin/arrow-right.svg';
+
+interface InitStageProps {
+ onNext: () => void;
+}
+
+export default function InitStage({ onNext }: InitStageProps) {
+ return (
+
+ {/* Image - top half on mobile, right side on desktop */}
+
+
+
+
+ {/* Content - bottom on mobile, left side on desktop */}
+
+
+
+ The Hackathon has ended!
+
+
+ Thank you for all your hard work. Next, please follow the directions
+ to find your assigned table number.
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/app/(pages)/(hackers)/_components/TableNumberCheckin/LoadingStage.tsx b/app/(pages)/(hackers)/_components/TableNumberCheckin/LoadingStage.tsx
new file mode 100644
index 000000000..61be236db
--- /dev/null
+++ b/app/(pages)/(hackers)/_components/TableNumberCheckin/LoadingStage.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import Image from 'next/image';
+import loadingBus from '@public/hackers/table-number-checkin/bus_loading.gif';
+import rightArrow from '@public/hackers/table-number-checkin/arrow-right.svg';
+
+interface LoadingStageProps {
+ teamNumber: string;
+}
+
+export default function LoadingStage({ teamNumber }: LoadingStageProps) {
+ return (
+
+ {/* RIGHT column — first in DOM so image appears at top on mobile, right on desktop */}
+
+ {/* Image */}
+
+
+
+
+ {/* Devpost Number — below image */}
+
+
+ DEVPOST NUMBER
+
+
+
+
+
+
+ {/* LEFT column — second in DOM, reordered to first on desktop */}
+
+
+
+ Searching high and low...
+
+
+
+ Did you know that this year is HackDavis's 10 year anniversary?
+
- Thank you for all your hard work during the past 24 hours, HackDavis
- recognizes your passion and talent. Please enter in the team number
- you received from Devpost.
-
- Please wait patiently while we match you to a judging table. Btw did
- you know next year will be HackDavis's 10 year anniversary?
-
-
-
- );
-
- const confirmStage = (
-
-
-
{tableNumber}
-
-
YOUR TABLE NUMBER
-
-
- Map Link{' '}
-
-
-
- Check that you and your team members received the same table
- number. It is extremely important to be{' '}
- present at your table when the judges arrive.
-