diff --git a/apps/site/src/app/portal/Message.tsx b/apps/site/src/app/portal/Message.tsx
new file mode 100644
index 000000000..d65844c8e
--- /dev/null
+++ b/apps/site/src/app/portal/Message.tsx
@@ -0,0 +1,36 @@
+import { PortalStatus } from "./page";
+
+interface MessageProps {
+	status: PortalStatus;
+}
+
+function Message({ status }: MessageProps) {
+	const submittedMessage = (
+		<p>
+			Thank you for submitting your application! We are currently
+			reviewing applications on a rolling basis, and you will hear back
+			from us soon!
+		</p>
+	);
+
+	const messages: Record<PortalStatus, JSX.Element> = {
+		[PortalStatus.pending]: submittedMessage,
+		[PortalStatus.reviewed]: submittedMessage,
+		[PortalStatus.rejected]: (
+			<p>
+				Thank you for applying to IrvineHacks this year. We have read
+				through many applications so far, and unfortunately are unable
+				to offer you a spot at our event. We highly encourage you to
+				continue developing your skills and passion for technology. We
+				would love to see you apply again next year!
+			</p>
+		),
+		[PortalStatus.waitlisted]: <></>,
+		[PortalStatus.accepted]: <></>,
+		[PortalStatus.confirmed]: <></>,
+	};
+
+	return <div className="">{messages[status]}</div>;
+}
+
+export default Message;
diff --git a/apps/site/src/app/portal/Portal.module.scss b/apps/site/src/app/portal/Portal.module.scss
new file mode 100644
index 000000000..3f271463a
--- /dev/null
+++ b/apps/site/src/app/portal/Portal.module.scss
@@ -0,0 +1,3 @@
+.title {
+	text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.75);
+}
diff --git a/apps/site/src/app/portal/VerticalTimeline.tsx b/apps/site/src/app/portal/VerticalTimeline.tsx
new file mode 100644
index 000000000..f7eb4a578
--- /dev/null
+++ b/apps/site/src/app/portal/VerticalTimeline.tsx
@@ -0,0 +1,89 @@
+import Image from "next/image";
+
+import BorderCircle from "@/assets/icons/border-circle.svg";
+import CheckCircle from "@/assets/icons/check-circle-fill.svg";
+import XCircle from "@/assets/icons/x-circle-fill.svg";
+
+import { PortalStatus } from "./page";
+
+interface VerticalTimelineProps {
+	status: string;
+}
+
+function VerticalTimeline({ status }: VerticalTimelineProps) {
+	const submission_component = (
+		<li className="flex flex-row items-center">
+			<Image
+				src={CheckCircle}
+				alt="checked-circle"
+				width={25}
+				height={25}
+				className="m-6 mr-12"
+			/>
+			Application submitted
+		</li>
+	);
+
+	const verdict_component =
+		status === PortalStatus.accepted ||
+		status === PortalStatus.confirmed ? (
+			<li className="flex flex-row items-center border-t">
+				<Image
+					src={CheckCircle}
+					alt="checked-circle"
+					width={25}
+					height={25}
+					className="m-6 mr-12"
+				/>
+				Application accepted
+			</li>
+		) : status === PortalStatus.rejected ? (
+			<li className="flex flex-row items-center border-t">
+				<Image
+					src={XCircle}
+					alt="checked-circle"
+					width={25}
+					height={25}
+					className="m-6 mr-12"
+				/>
+				Application rejected
+			</li>
+		) : null;
+
+	const rsvp_component =
+		status === PortalStatus.accepted ? (
+			<li className="flex flex-row items-center border-t">
+				<Image
+					src={BorderCircle}
+					alt="border-circle"
+					width={25}
+					height={25}
+					className="m-6 mr-12"
+				/>
+				Confirm attendance
+			</li>
+		) : status === PortalStatus.confirmed ? (
+			<li className="flex flex-row items-center border-t">
+				<Image
+					src={CheckCircle}
+					alt="checked-circle"
+					width={25}
+					height={25}
+					className="m-6 mr-12"
+				/>
+				Attendance confirmed
+			</li>
+		) : null;
+
+	return (
+		<div className="p-3">
+			<ul className="border rounded-lg">
+				{submission_component}
+				{verdict_component}
+				{rsvp_component}
+			</ul>
+		</div>
+	);
+}
+
+export default VerticalTimeline;
diff --git a/apps/site/src/app/portal/page.tsx b/apps/site/src/app/portal/page.tsx
new file mode 100644
index 000000000..870514d61
--- /dev/null
+++ b/apps/site/src/app/portal/page.tsx
@@ -0,0 +1,45 @@
+import Head from "next/head";
+import axios from "axios";
+
+import styles from "./Portal.module.scss";
+
+import VerticalTimeline from "./VerticalTimeline";
+import Message from "./Message";
+
+export const enum PortalStatus {
+	pending = "PENDING_REVIEW",
+	reviewed = "REVIEWED",
+	accepted = "ACCEPTED",
+	rejected = "REJECTED",
+	waitlisted = "WAITLISTED",
+	confirmed = "CONFIRMED",
+}
+
+export default async function Portal() {
+	// const res = await axios.get(`/api/user/me`);
+	// const identity = res.data;
+
+	const status = PortalStatus.pending;
+
+	return (
+		<>
+			<section className=" w-full flex items-center flex-col">
+				<div className="m-24">
+					<Head>
+						<title>Portal | IrvineHacks 2024</title>
+					</Head>
+					<h1
+						className={`${styles.title} font-display sm:text-[3rem] text-[#fffce2] text-6xl text-center`}
+					>
+						Portal
+					</h1>
+				</div>
+				<div className="bg-white text-black max-w-4xl rounded-2xl p-6 flex flex-col mb-24 w-full">
+					<h2 className="text-4xl font-semibold">Status</h2>
+					<VerticalTimeline status={status} />
+					<Message status={status as PortalStatus} />
+				</div>
+			</section>
+		</>
+	);
+}
diff --git a/apps/site/src/assets/icons/border-circle.svg b/apps/site/src/assets/icons/border-circle.svg
new file mode 100644
index 000000000..2b690c0ee
--- /dev/null
+++ b/apps/site/src/assets/icons/border-circle.svg
@@ -0,0 +1,3 @@
+<svg width="64px" height="64px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title>circle</title> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="icon" fill="#8f8f8f" transform="translate(42.666667, 42.666667)"> 
+  <path d="M213.333333,3.55271368e-14 C331.15408,3.55271368e-14 426.666667,95.5125867 426.666667,213.333333 C426.666667,331.15408 331.15408,426.666667 213.333333,426.666667 C95.5125867,426.666667 3.55271368e-14,331.15408 3.55271368e-14,213.333333 C3.55271368e-14,95.5125867 95.5125867,3.55271368e-14 213.333333,3.55271368e-14 Z M213.333333,42.6666667 C119.076736,42.6666667 42.6666667,119.076736 42.6666667,213.333333 C42.6666667,307.589931 119.076736,384 213.333333,384 C307.589931,384 384,307.589931 384,213.333333 C384,119.076736 307.589931,42.6666667 213.333333,42.6666667 Z" id="Combined-Shape"> </path> </g> </g> </g>
+</svg>
\ No newline at end of file
diff --git a/apps/site/src/assets/icons/check-circle-fill.svg b/apps/site/src/assets/icons/check-circle-fill.svg
new file mode 100644
index 000000000..5bcb0e2eb
--- /dev/null
+++ b/apps/site/src/assets/icons/check-circle-fill.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="color: lightgreen" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
+  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+</svg>
\ No newline at end of file
diff --git a/apps/site/src/assets/icons/x-circle-fill.svg b/apps/site/src/assets/icons/x-circle-fill.svg
new file mode 100644
index 000000000..f5f6fa177
--- /dev/null
+++ b/apps/site/src/assets/icons/x-circle-fill.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" style="color: red" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
+  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+</svg>
\ No newline at end of file