diff --git a/app/globals.css b/app/globals.css
index a2dc41e..ca41933 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,26 +1,20 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #f5f0e8;
+  --foreground: #111111;
+  --blue: #4B9CD3;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+  --font-display: var(--font-display);
+  --font-mono: var(--font-mono);
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: Georgia, "Times New Roman", serif;
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 7bc64fe..fa7e2fa 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,14 +1,16 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Anton, IBM_Plex_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const anton = Anton({
+  weight: "400",
+  variable: "--font-display",
   subsets: ["latin"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const mono = IBM_Plex_Mono({
+  weight: ["400", "500"],
+  variable: "--font-mono",
   subsets: ["latin"],
 });
 
@@ -23,10 +25,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
-    >
+    <html lang="en" className={`${anton.variable} ${mono.variable} h-full`}>
       <body className="min-h-full flex flex-col">{children}</body>
     </html>
   );
diff --git a/app/page.tsx b/app/page.tsx
index 4d20282..023f394 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,8 +1,21 @@
+import About from "@/components/About";
+import Footer from "@/components/Footer";
+import Hero from "@/components/Hero";
+import HostInterest from "@/components/HostInterest";
+import MLHBadge from "@/components/MLHBadge";
+import Nav from "@/components/Nav";
+
 export default function Home() {
   return (
-    <main>
-      <h1>HackNC 2026</h1>
-      <p>In-Progress...</p>
-    </main>
+    <>
+      <MLHBadge />
+      <Nav />
+      <main>
+        <Hero />
+        <About />
+        <HostInterest />
+      </main>
+      <Footer />
+    </>
   );
 }
diff --git a/components/About.tsx b/components/About.tsx
new file mode 100644
index 0000000..9480fc2
--- /dev/null
+++ b/components/About.tsx
@@ -0,0 +1,87 @@
+const D = "var(--font-display)";
+const M = "var(--font-mono)";
+
+const stats = [
+  { value: "500+", label: "STUDENTS" },
+  { value: "3", label: "DAYS" },
+  { value: "50+", label: "PROJECTS" },
+];
+
+export default function About() {
+  return (
+    <section id="about" style={{ borderBottom: "4px solid #111" }}>
+      {/* Section header */}
+      <div
+        style={{
+          borderBottom: "2px solid #111",
+          padding: "12px 40px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "baseline",
+        }}
+      >
+        <span style={{ fontFamily: M, fontSize: "10px", letterSpacing: "0.15em", color: "#555" }}>
+          ABOUT THE EVENT
+        </span>
+        <span style={{ fontFamily: M, fontSize: "10px", letterSpacing: "0.15em", color: "#4B9CD3" }}>
+          § 01
+        </span>
+      </div>
+
+      {/* Stats bar */}
+      <div
+        style={{
+          borderBottom: "2px solid #111",
+          display: "grid",
+          gridTemplateColumns: "repeat(3, 1fr)",
+        }}
+      >
+        {stats.map(({ value, label }, i) => (
+          <div
+            key={label}
+            style={{
+              padding: "28px 40px",
+              borderRight: i < stats.length - 1 ? "2px solid #111" : "none",
+              display: "flex",
+              alignItems: "baseline",
+              gap: "12px",
+            }}
+          >
+            <span style={{ fontFamily: D, fontSize: "64px", lineHeight: 1, color: "#111" }}>
+              {value}
+            </span>
+            <span style={{ fontFamily: M, fontSize: "10px", letterSpacing: "0.15em", color: "#4B9CD3" }}>
+              {label}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* Two-column body */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          borderBottom: "2px solid #111",
+        }}
+      >
+        <div style={{ padding: "40px", borderRight: "2px solid #111" }}>
+          <p style={{ fontSize: "17px", lineHeight: 1.7, color: "#222", margin: 0 }}>
+            HackNC is a weekend for students of all skill levels to broaden their
+            talents. Your challenge is to make an awesome project in just 24 hours.
+            You will have access to hands-on tech workshops, sponsor networking, and
+            exciting talks about what&apos;s happening right now in CS and tech —
+            not to mention all of the free food, shirts, stickers, and swag!</p>
+        </div>
+        <div style={{ padding: "40px" }}>
+          <p style={{ fontSize: "17px", lineHeight: 1.7, color: "#222", margin: 0 }}>
+            You don&apos;t need to be a senior computer science student with four internships
+            to show up. HackNC is explicitly built for people who are still figuring
+            it out. The best projects usually come from people who had no idea what
+            they were doing on Friday night.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/Footer.tsx b/components/Footer.tsx
new file mode 100644
index 0000000..6277bb4
--- /dev/null
+++ b/components/Footer.tsx
@@ -0,0 +1,47 @@
+const D = "var(--font-display)";
+const M = "var(--font-mono)";
+
+export default function Footer() {
+  return (
+    <footer style={{ borderTop: "4px solid #111", background: "#111" }}>
+      <div
+        style={{
+          padding: "32px 40px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <div>
+          <span style={{ fontFamily: D, fontSize: "22px", color: "#f5f0e8", letterSpacing: "0.02em" }}>
+            HACKNC 2026
+          </span>
+          <p style={{ fontFamily: M, fontSize: "10px", letterSpacing: "0.12em", color: "#666", margin: "6px 0 0 0" }}>
+            UNIVERSITY OF NORTH CAROLINA AT CHAPEL HILL
+          </p>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: "32px" }}>
+          <span style={{ fontFamily: M, fontSize: "10px", letterSpacing: "0.12em", color: "#555" }}>
+            © {new Date().getFullYear()} HACKNC
+          </span>
+          <a
+            href="https://mlh.io/code-of-conduct"
+            target="_blank"
+            rel="noreferrer"
+            style={{
+              fontFamily: M,
+              fontSize: "10px",
+              letterSpacing: "0.12em",
+              color: "#4B9CD3",
+              textDecoration: "none",
+              borderBottom: "1px solid #4B9CD3",
+              paddingBottom: "2px",
+            }}
+          >
+            MLH CODE OF CONDUCT
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/components/Hero.tsx b/components/Hero.tsx
new file mode 100644
index 0000000..180b244
--- /dev/null
+++ b/components/Hero.tsx
@@ -0,0 +1,138 @@
+const D = "var(--font-display)";
+const M = "var(--font-mono)";
+
+const meta = [
+  { label: "DATE", value: "OCT 2026\nTBD" },
+  { label: "WHERE", value: "UNC CHAPEL HILL\nCHAPEL HILL, NC" },
+  { label: "DURATION", value: "24 HOURS" },
+  { label: "COST", value: "FREE" },
+];
+
+export default function Hero() {
+  return (
+    <section
+      style={{
+        display: "grid",
+        gridTemplateColumns: "1fr 260px",
+        minHeight: "calc(100vh - 89px)",
+        borderBottom: "4px solid #111",
+      }}
+    >
+      {/* Left: title + copy */}
+      <div
+        style={{
+          borderRight: "4px solid #111",
+          padding: "48px 40px 40px",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+        }}
+      >
+        <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center" }}>
+          <h1
+            style={{
+              fontFamily: D,
+              fontSize: "clamp(96px, 13vw, 152px)",
+              lineHeight: 0.88,
+              letterSpacing: "-0.01em",
+              color: "#111",
+              margin: 0,
+            }}
+          >
+            HACK
+            <br />
+            <span style={{ color: "#4B9CD3" }}>NC.</span>
+          </h1>
+          <div
+            style={{
+              borderTop: "4px solid #111",
+              marginTop: "32px",
+              paddingTop: "28px",
+            }}
+          >
+            <p
+              style={{
+                fontSize: "18px",
+                lineHeight: 1.65,
+                color: "#333",
+                maxWidth: "520px",
+                margin: 0,
+              }}
+            >
+              An annual hackathon at UNC Chapel Hill. We bring together
+              students from across the Southeast to build, hack, and deploy in
+              one weekend. All skill levels welcome, first-timers especially!
+            </p>
+          </div>
+        </div>
+
+        <div style={{ display: "flex", justifyContent: "flex-end", paddingTop: "32px" }}>
+          <a
+            href="#host-interest"
+            style={{
+              fontFamily: D,
+              fontSize: "22px",
+              color: "#111",
+              textDecoration: "none",
+              borderTop: "3px solid #111",
+              paddingTop: "8px",
+              letterSpacing: "0.03em",
+            }}
+          >
+            REGISTER INTEREST ↗
+          </a>
+        </div>
+      </div>
+
+      {/* Right: metadata column */}
+      <div
+        style={{
+          padding: "48px 28px 40px",
+          fontFamily: M,
+          display: "flex",
+          flexDirection: "column",
+          gap: "0",
+        }}
+      >
+        <p
+          style={{
+            fontSize: "clamp(36px, 4vw, 52px)",
+            fontFamily: D,
+            color: "#4B9CD3",
+            margin: "0 0 24px 0",
+            lineHeight: 1,
+          }}
+        >
+          2026
+        </p>
+        <div style={{ borderTop: "2px solid #111", marginBottom: "32px" }} />
+        {meta.map(({ label, value }) => (
+          <div key={label} style={{ marginBottom: "28px" }}>
+            <p
+              style={{
+                fontSize: "9px",
+                letterSpacing: "0.18em",
+                color: "#4B9CD3",
+                margin: "0 0 6px 0",
+                textTransform: "uppercase",
+              }}
+            >
+              {label}
+            </p>
+            <p
+              style={{
+                fontSize: "13px",
+                color: "#111",
+                margin: 0,
+                lineHeight: 1.5,
+                whiteSpace: "pre-line",
+              }}
+            >
+              {value}
+            </p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/components/HostInterest.tsx b/components/HostInterest.tsx
new file mode 100644
index 0000000..8295fee
--- /dev/null
+++ b/components/HostInterest.tsx
@@ -0,0 +1,103 @@
+const D = "var(--font-display)";
+const M = "var(--font-mono)";
+
+export default function HostInterest() {
+  return (
+    <section id="host-interest" style={{ borderBottom: "4px solid #111" }}>
+      {/* Section header */}
+      <div
+        style={{
+          borderBottom: "2px solid #111",
+          padding: "12px 40px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "baseline",
+        }}
+      >
+        <span style={{ fontFamily: M, fontSize: "10px", letterSpacing: "0.15em", color: "#555" }}>
+          INTEREST FORM
+        </span>
+        <span style={{ fontFamily: M, fontSize: "10px", letterSpacing: "0.15em", color: "#4B9CD3" }}>
+          § 02
+        </span>
+      </div>
+
+      {/* Asymmetric two-column */}
+      <div style={{ display: "grid", gridTemplateColumns: "5fr 4fr" }}>
+        {/* Left: big heading */}
+        <div
+          style={{
+            borderRight: "2px solid #111",
+            padding: "48px 40px",
+          }}
+        >
+          <h2
+            style={{
+              fontFamily: D,
+              fontSize: "clamp(56px, 7vw, 96px)",
+              lineHeight: 0.92,
+              color: "#111",
+              margin: 0,
+              letterSpacing: "-0.01em",
+            }}
+          >
+            COMING
+            <br />
+            TO
+            <br />
+            <span style={{ color: "#4B9CD3" }}>HACKNC?</span>
+          </h2>
+        </div>
+
+        {/* Right: copy + CTA */}
+        <div
+          style={{
+            padding: "48px 40px",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "space-between",
+          }}
+        >
+          <div>
+            <p
+              style={{
+                fontFamily: M,
+                fontSize: "10px",
+                letterSpacing: "0.15em",
+                color: "#4B9CD3",
+                marginBottom: "16px",
+              }}
+            >
+              LET US KNOW YOU&apos;RE INTERESTED
+            </p>
+            <p style={{ fontSize: "17px", lineHeight: 1.7, color: "#333", margin: "0 0 28px 0" }}>
+              Registration isn&apos;t open yet, but fill out our interest form and
+              we&apos;ll reach out as soon as applications go live. Takes less than
+              a minute.
+            </p>
+          </div>
+
+          <div style={{ paddingTop: "40px" }}>
+            <a
+              href="https://forms.gle/hj2APFBivY3rAYtz8"
+              target="_blank"
+              rel="noreferrer"
+              style={{
+                fontFamily: D,
+                fontSize: "22px",
+                color: "#f5f0e8",
+                background: "#111",
+                textDecoration: "none",
+                padding: "16px 28px",
+                display: "inline-block",
+                letterSpacing: "0.03em",
+              }}
+            >
+              FILL OUT THE FORM ↗
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/components/MLHBadge.tsx b/components/MLHBadge.tsx
new file mode 100644
index 0000000..28712bb
--- /dev/null
+++ b/components/MLHBadge.tsx
@@ -0,0 +1,26 @@
+export default function MLHBadge() {
+  return (
+    <a
+      id="mlh-trust-badge"
+      href="https://mlh.io/na?utm_source=na-hackathon&utm_medium=TrustBadge&utm_campaign=2026-season&utm_content=blue"
+      target="_blank"
+      rel="noreferrer"
+      style={{
+        position: "fixed",
+        top: 0,
+        right: "24px",
+        zIndex: 50,
+        width: "72px",
+        minWidth: "60px",
+        maxWidth: "90px",
+      }}
+    >
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src="https://s3.amazonaws.com/logged-assets/trust-badge/2026/mlh-trust-badge-2026-blue.svg"
+        alt="Major League Hacking 2026 Hackathon Season"
+        style={{ width: "100%" }}
+      />
+    </a>
+  );
+}
diff --git a/components/Nav.tsx b/components/Nav.tsx
new file mode 100644
index 0000000..5e3642c
--- /dev/null
+++ b/components/Nav.tsx
@@ -0,0 +1,46 @@
+const D = "var(--font-display)";
+const M = "var(--font-mono)";
+
+export default function Nav() {
+  return (
+    <header style={{ borderBottom: "4px solid #111", background: "#f5f0e8" }}>
+      <div
+        style={{
+          fontFamily: M,
+          fontSize: "10px",
+          letterSpacing: "0.12em",
+          borderBottom: "1px solid #111",
+          padding: "6px 32px",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          position: "relative",
+          color: "#555",
+        }}
+      >
+        <span>UNC CHAPEL HILL, NC</span>
+        <span>FALL 2026</span>
+        <span style={{ visibility: "hidden" }}>PLACEHOLDER</span>
+      </div>
+      <div
+        style={{
+          padding: "14px 32px",
+          display: "flex",
+          alignItems: "baseline",
+          justifyContent: "space-between",
+        }}
+      >
+        <span style={{ fontFamily: D, fontSize: "26px", letterSpacing: "0.02em", color: "#111" }}>
+          HACKNC
+        </span>
+        <nav style={{ fontFamily: M, fontSize: "11px", letterSpacing: "0.12em", display: "flex", gap: "32px" }}>
+          <a href="#about" style={{ color: "#111", textDecoration: "none" }}>ABOUT</a>
+          <a href="#host-interest" style={{ color: "#111", textDecoration: "none" }}>PARTNER</a>
+          <a style={{ color: "#4B9CD3", textDecoration: "none", visibility: "hidden"}}>
+            PLACEHOL
+          </a>
+        </nav>
+      </div>
+    </header>
+  );
+}
