diff --git a/package.json b/package.json
index 4b92b8bf88..666c05e949 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "@graphql-tools/schema": "10.0.15",
     "@headlessui/react": "^1.7.17",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
     "@tailwindcss/typography": "^0.5.10",
     "autoprefixer": "^10.4.17",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c830a6cbd2..b0477dc0f0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,6 +22,9 @@ importers:
       '@radix-ui/react-radio-group':
         specifier: ^1.1.3
         version: 1.2.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@tailwindcss/container-queries':
+        specifier: ^0.1.1
+        version: 0.1.1(tailwindcss@3.4.17)
       '@tailwindcss/nesting':
         specifier: 0.0.0-insiders.565cd3e
         version: 0.0.0-insiders.565cd3e(postcss@8.4.49)
@@ -1703,6 +1706,11 @@ packages:
   '@swc/helpers@0.5.5':
     resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==}
 
+  '@tailwindcss/container-queries@0.1.1':
+    resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
+    peerDependencies:
+      tailwindcss: '>=3.2.0'
+
   '@tailwindcss/nesting@0.0.0-insiders.565cd3e':
     resolution: {integrity: sha512-WhHoFBx19TnH/c+xLwT/sxei6+4RpdfiyG3MYXfmLaMsADmVqBkF7B6lDalgZD9YdM459MF7DtxVbWkOrV7IaQ==}
     peerDependencies:
@@ -6456,6 +6464,10 @@ snapshots:
       '@swc/counter': 0.1.3
       tslib: 2.8.1
 
+  '@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.17)':
+    dependencies:
+      tailwindcss: 3.4.17
+
   '@tailwindcss/nesting@0.0.0-insiders.565cd3e(postcss@8.4.49)':
     dependencies:
       postcss: 8.4.49
diff --git a/src/app/colors.css b/src/app/colors.css
index a3ca69e689..39c02c2b22 100644
--- a/src/app/colors.css
+++ b/src/app/colors.css
@@ -1,4 +1,5 @@
-:root {
+:root,
+.light {
   --color-pri-lighter: 319 100% 90%;
   --color-pri-light: 319 100% 90%;
   --color-pri-base: 319 100% 44%;
@@ -24,7 +25,7 @@
   --color-neu-900: 75 15% 5%;
 }
 
-html.dark {
+.dark {
   --color-neu-900: 0 0% 100%;
   --color-neu-800: 75 57% 97%;
   --color-neu-700: 75 15% 95%;
diff --git a/src/app/conf/2025/components/get-your-ticket/blur-bean.webp b/src/app/conf/2025/components/get-your-ticket/blur-bean.webp
new file mode 100644
index 0000000000..cdfd6621dc
Binary files /dev/null and b/src/app/conf/2025/components/get-your-ticket/blur-bean.webp differ
diff --git a/src/app/conf/2025/components/get-your-ticket/index.tsx b/src/app/conf/2025/components/get-your-ticket/index.tsx
new file mode 100644
index 0000000000..1267b2ed6b
--- /dev/null
+++ b/src/app/conf/2025/components/get-your-ticket/index.tsx
@@ -0,0 +1,74 @@
+import { clsx } from "clsx"
+
+import { ImageLoaded } from "../image-loaded"
+
+import { TicketPeriods } from "./ticket-periods"
+
+import blurBean from "./blur-bean.webp"
+
+export function GetYourTicket({ className }: { className?: string }) {
+  return (
+    <section
+      className={clsx(
+        "dark relative overflow-hidden bg-pri-dark px-4 py-8 lg:py-16 xl:py-24",
+        className,
+      )}
+    >
+      <Stripes />
+      <div className="gql-conf-container gql-conf-section relative">
+        <header className="flex flex-wrap justify-between gap-6 md:items-end">
+          <h2 className="whitespace-pre text-white typography-h2">
+            Get your ticket
+          </h2>
+          <p className="text-neu-800 typography-body-lg">
+            The registration deadline is 23:59 CET on the respective date.
+          </p>
+        </header>
+
+        <div className="mt-6 grid gap-px backdrop-blur-[6px] md:mt-10 md:grid-cols-3">
+          <TicketPeriods />
+        </div>
+      </div>
+    </section>
+  )
+}
+
+const maskEven =
+  "repeating-linear-gradient(to right, transparent, transparent 12px, black 12px, black 24px)"
+const maskOdd =
+  "repeating-linear-gradient(to right, black, black 12px, transparent 12px, transparent 24px)"
+
+function Stripes() {
+  return (
+    <ImageLoaded
+      role="presentation"
+      image={blurBean}
+      className="pointer-events-none absolute inset-x-0 bottom-[-385px] top-[-203px] translate-y-12 opacity-0 transition duration-[400ms] ease-linear [mask-position:70%_60%] *:opacity-100 data-[loaded=true]:translate-y-0 data-[loaded=true]:opacity-100 max-3xl:[mask-size:220%] max-md:[mask-size:800%] md:*:opacity-30 lg:*:opacity-50 xl:*:opacity-60 3xl:[mask-position:70%_39%]"
+      style={{
+        maskImage: `url(${blurBean.src})`,
+        WebkitMaskImage: `url(${blurBean.src})`,
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+      }}
+    >
+      <div
+        className="absolute inset-0"
+        style={{
+          backgroundImage:
+            "linear-gradient(180deg, hsl(var(--color-pri-light)) 0%, hsl(var(--color-pri-lighter)) 100%)",
+          maskImage: maskEven,
+          WebkitMaskImage: maskEven,
+        }}
+      />
+      <div
+        className="absolute inset-0"
+        style={{
+          backgroundImage:
+            "linear-gradient(180deg,hsl(319deg 100% 90% / 0.2) 0%, hsl(var(--color-pri-base)) 100%)",
+          maskImage: maskOdd,
+          WebkitMaskImage: maskOdd,
+        }}
+      />
+    </ImageLoaded>
+  )
+}
diff --git a/src/app/conf/2025/components/get-your-ticket/ticket-period.tsx b/src/app/conf/2025/components/get-your-ticket/ticket-period.tsx
new file mode 100644
index 0000000000..1ccdda9a96
--- /dev/null
+++ b/src/app/conf/2025/components/get-your-ticket/ticket-period.tsx
@@ -0,0 +1,91 @@
+import { Button } from "@/app/conf/_design-system/button"
+import { clsx } from "clsx"
+import { GET_TICKETS_LINK } from "../../links"
+
+export interface TicketPeriodProps {
+  price: string
+  date: Date | [Date, Date]
+  isLoading?: boolean
+  soldOut?: boolean
+  comingSoon?: boolean
+  name: string
+}
+
+export function TicketPeriod({
+  price,
+  date,
+  isLoading,
+  soldOut,
+  comingSoon,
+  name,
+}: TicketPeriodProps) {
+  const disabled = soldOut || comingSoon || isLoading
+
+  return (
+    <article
+      data-disabled={disabled}
+      className={clsx(
+        "flex flex-col border border-pri-lighter bg-pri-light/[0.24] backdrop-blur-md transition @container/card max-md:[&+&]:border-t-0 md:[&+&]:border-l-0",
+        disabled
+          ? "opacity-50 max-md:[&:has(+article[data-disabled=false])]:border-b-0 md:[&:has(+article[data-disabled=false])]:border-r-0"
+          : "!border",
+      )}
+    >
+      <header className="border-b border-pri-lighter p-6">
+        <h3 className="text-white typography-h3">{name}</h3>
+      </header>
+      <div className="flex h-full flex-col justify-end gap-6 p-6">
+        <div className="flex items-end justify-between gap-2">
+          <span className="text-white typography-h3 @[356px]:typography-h2">
+            {price}
+          </span>
+          {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
+          <span className="ticket-period--date text-right text-white typography-body-md">
+            {Array.isArray(date) ? (
+              <>
+                <Time date={date[0]} />
+                {" - "}
+                <Time date={date[1]} />
+              </>
+            ) : (
+              <>
+                <span>Through </span>
+                <Time date={date} />
+              </>
+            )}
+          </span>
+        </div>
+        <Button
+          variant="primary"
+          disabled={disabled}
+          className="light w-full"
+          href={GET_TICKETS_LINK}
+        >
+          {isLoading
+            ? "Get a ticket"
+            : soldOut
+              ? "Sold out"
+              : comingSoon
+                ? "Coming soon"
+                : "Get a ticket"}
+        </Button>
+      </div>
+    </article>
+  )
+}
+
+function Time({ date }: { date: Date }) {
+  return (
+    <time
+      dateTime={date.toISOString()}
+      dangerouslySetInnerHTML={{
+        __html: date
+          .toLocaleDateString("en-GB", {
+            month: "long",
+            day: "numeric",
+          })
+          .replace(" ", "&nbsp"),
+      }}
+    />
+  )
+}
diff --git a/src/app/conf/2025/components/get-your-ticket/ticket-periods.tsx b/src/app/conf/2025/components/get-your-ticket/ticket-periods.tsx
new file mode 100644
index 0000000000..285c6008a5
--- /dev/null
+++ b/src/app/conf/2025/components/get-your-ticket/ticket-periods.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import { useState, useEffect } from "react"
+
+import { TicketPeriod } from "./ticket-period"
+
+// Ticket period end dates (using zero-indexed months)
+// Dates are specified in CET (UTC+1/UTC+2 for CEST) and converted to UTC
+// Example: July 13th 23:59 CEST (UTC+2) becomes July 13th 21:59 UTC
+const EARLY_BIRD_END_DATE = new Date(Date.UTC(2025, 6, 13, 21, 59)) // July 13th 23:59 CEST
+const STANDARD_END_DATE = new Date(Date.UTC(2025, 7, 31, 21, 59)) // August 31st 23:59 CEST
+const LATE_END_DATE = new Date(Date.UTC(2025, 8, 10, 21, 59)) // September 10th 23:59 CEST
+
+export function TicketPeriods() {
+  const now = useCurrentDate()
+
+  return (
+    <>
+      <TicketPeriod
+        name="Early Bird"
+        price="$599"
+        date={EARLY_BIRD_END_DATE}
+        comingSoon={false}
+        isLoading={!now}
+        soldOut={!!now && now > EARLY_BIRD_END_DATE}
+      />
+      <TicketPeriod
+        name="Standard"
+        price="$799"
+        date={[new Date(2025, 6, 14), STANDARD_END_DATE]}
+        isLoading={!now}
+        comingSoon={!!now && now < EARLY_BIRD_END_DATE}
+        soldOut={!!now && now > STANDARD_END_DATE}
+      />
+      <TicketPeriod
+        name="Late"
+        price="$899"
+        date={[new Date(2025, 8, 1), LATE_END_DATE]}
+        isLoading={!now}
+        comingSoon={!!now && now < STANDARD_END_DATE}
+        soldOut={!!now && now > LATE_END_DATE}
+      />
+    </>
+  )
+}
+
+function useCurrentDate() {
+  const [date, setDate] = useState<Date | null>(null)
+
+  useEffect(() => {
+    setDate(new Date())
+  }, [])
+
+  return date
+}
diff --git a/src/app/conf/2025/components/hero/index.tsx b/src/app/conf/2025/components/hero/index.tsx
index b7d3eee414..b2bb824827 100644
--- a/src/app/conf/2025/components/hero/index.tsx
+++ b/src/app/conf/2025/components/hero/index.tsx
@@ -1,13 +1,14 @@
-import { clsx } from "clsx"
 import Image from "next-image-export-optimizer"
+
+import { Button } from "../../../_design-system/button"
 import { CalendarIcon } from "../../pixelarticons/calendar-icon"
-import { PinIcon } from "../../pixelarticons/pin-icon"
 import { GET_TICKETS_LINK } from "../../links"
-import { Button } from "../../../_design-system/button"
+import { PinIcon } from "../../pixelarticons/pin-icon"
 import graphqlFoundationWordmarkSvg from "../../assets/graphql-foundation-wordmark.svg"
-import heroPhoto from "./hero-photo.jpeg"
+
+import { ImageLoaded } from "../image-loaded"
 import blurBean from "./blur-bean-cropped.webp"
-import { ImageLoaded } from "./image-loaded"
+import heroPhoto from "./hero-photo.jpeg"
 
 export function Hero() {
   return (
@@ -71,12 +72,12 @@ function DateAndLocation() {
   )
 }
 
-function Stripes() {
-  const maskEven =
-    "repeating-linear-gradient(to right, transparent, transparent 12px, black 12px, black 24px)"
-  const maskOdd =
-    "repeating-linear-gradient(to right, black, black 12px, transparent 12px, transparent 24px)"
+const maskEven =
+  "repeating-linear-gradient(to right, transparent, transparent 12px, black 12px, black 24px)"
+const maskOdd =
+  "repeating-linear-gradient(to right, black, black 12px, transparent 12px, transparent 24px)"
 
+function Stripes() {
   return (
     <ImageLoaded
       role="presentation"
diff --git a/src/app/conf/2025/components/hero/image-loaded.tsx b/src/app/conf/2025/components/image-loaded.tsx
similarity index 100%
rename from src/app/conf/2025/components/hero/image-loaded.tsx
rename to src/app/conf/2025/components/image-loaded.tsx
diff --git a/src/app/conf/2025/components/navbar.tsx b/src/app/conf/2025/components/navbar.tsx
index 10b99b2d9f..9dbf79ed41 100644
--- a/src/app/conf/2025/components/navbar.tsx
+++ b/src/app/conf/2025/components/navbar.tsx
@@ -126,8 +126,8 @@ function GraphQLLogo(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg viewBox="0 0 100 100" fill="currentColor" {...props}>
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         d="M50 6.90308L87.323 28.4515V71.5484L50 93.0968L12.677 71.5484V28.4515L50 6.90308ZM16.8647 30.8693V62.5251L44.2795 15.0414L16.8647 30.8693ZM50 13.5086L18.3975 68.2457H81.6025L50 13.5086ZM77.4148 72.4334H22.5852L50 88.2613L77.4148 72.4334ZM83.1353 62.5251L55.7205 15.0414L83.1353 30.8693V62.5251Z"
       />
       <circle cx="50" cy="9.3209" r="8.82" />
diff --git a/src/app/conf/2025/components/register-today/index.tsx b/src/app/conf/2025/components/register-today/index.tsx
index e31f22226d..0858a5dcd1 100644
--- a/src/app/conf/2025/components/register-today/index.tsx
+++ b/src/app/conf/2025/components/register-today/index.tsx
@@ -14,7 +14,7 @@ export function RegisterToday({ className }: RegisterTodayProps) {
   return (
     <section
       className={clsx(
-        "flex gap-10 px-4 py-8 max-lg:flex-col-reverse lg:px-12 xl:gap-x-24 xl:px-24",
+        "gql-conf-section flex gap-10 max-lg:flex-col-reverse",
         className,
       )}
     >
diff --git a/src/app/conf/2025/components/top-minds/index.tsx b/src/app/conf/2025/components/top-minds/index.tsx
index 37328c4dc1..c9f50d7eae 100644
--- a/src/app/conf/2025/components/top-minds/index.tsx
+++ b/src/app/conf/2025/components/top-minds/index.tsx
@@ -24,7 +24,7 @@ export default function TopMindsSection({
   return (
     <section
       className={clsx(
-        "flex justify-center px-4 py-8 text-neu-900 max-md:flex-col lg:px-12 xl:gap-x-24 xl:px-24",
+        "gql-conf-section flex justify-center max-md:flex-col",
         className,
       )}
       {...rest}
diff --git a/src/app/conf/2025/components/what-to-expect.tsx b/src/app/conf/2025/components/what-to-expect.tsx
index ca43874413..539701cb1e 100644
--- a/src/app/conf/2025/components/what-to-expect.tsx
+++ b/src/app/conf/2025/components/what-to-expect.tsx
@@ -9,10 +9,7 @@ export default function WhatToExpectSection({
 }: WhatToExpectSectionProps) {
   return (
     <section
-      className={clsx(
-        "flex gap-6 px-4 py-8 text-neu-900 max-md:flex-col lg:px-12 xl:gap-x-24 xl:px-24",
-        className,
-      )}
+      className={clsx("gql-conf-section flex gap-6 max-md:flex-col", className)}
       {...rest}
     >
       <h3 className="typography-h2 md:flex-1">What to expect</h3>
diff --git a/src/app/conf/2025/page.tsx b/src/app/conf/2025/page.tsx
index 16cfc47bd3..722edcc88b 100644
--- a/src/app/conf/2025/page.tsx
+++ b/src/app/conf/2025/page.tsx
@@ -11,20 +11,22 @@ import { RegisterToday } from "./components/register-today"
 import { Hero } from "./components/hero"
 import WhatToExpectSection from "./components/what-to-expect"
 import TopMindsSection from "./components/top-minds"
-
+import { GetYourTicket } from "./components/get-your-ticket"
 export const metadata: Metadata = {
   title: "GraphQLConf 2025 — Sept 08-10",
 }
 
 export default function Page() {
   return (
-    <main>
+    <main className="antialiased">
       <Hero />
-      <div className="gql-conf-container mx-auto">
+      <div className="gql-conf-container mx-auto text-neu-900">
         <RegisterToday className="md:mb-8 md:mt-24" />
         <WhatToExpectSection className="md:mb-8 md:mt-24" />
         <TopMindsSection className="md:mb-8 md:mt-24" hasSpeakersPage={false} />
       </div>
+      <GetYourTicket />
+
       <div className="container my-20 flex flex-col gap-20 md:my-32 md:gap-32 [.light_&_.text-white]:text-neu-900 [.light_&_[alt='Grafbase_logo']]:invert">
         <Sponsors />
         <Sponsor />
diff --git a/src/app/conf/_design-system/button.tsx b/src/app/conf/_design-system/button.tsx
index 81f39a82a0..6a8f8b4cd2 100644
--- a/src/app/conf/_design-system/button.tsx
+++ b/src/app/conf/_design-system/button.tsx
@@ -20,6 +20,7 @@ export declare namespace ButtonProps {
     href: string
     as?: never
     className?: string
+    disabled?: boolean
   }
 
   export interface ButtonProps
@@ -56,17 +57,22 @@ export type ButtonProps =
 
 export function Button(props: ButtonProps) {
   const className = clsx(
-    "relative flex items-center justify-center gap-2.5 font-normal text-base/none text-neu-0 bg-neu-900 hover:bg-neu-800 active:bg-neu-700 font-sans h-14 px-8 data-[size=md]:h-12 data-[variant=secondary]:bg-neu-100 data-[variant=secondary]:text-neu-900 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90 gql-focus-visible",
+    "relative flex items-center justify-center gap-2.5 font-normal text-base/none text-neu-0 bg-neu-900 hover:bg-neu-800 active:bg-neu-700 font-sans h-14 px-8 data-[size=md]:h-12 data-[variant=secondary]:bg-neu-100 data-[variant=secondary]:text-neu-900 data-[variant=secondary]:hover:bg-neu-200/75 data-[variant=secondary]:active:bg-neu-200/90 gql-focus-visible [aria-disabled]:bg-neu-800",
     props.className,
   )
 
   const styleAttrs = { "data-size": props.size, "data-variant": props.variant }
 
   if ("href" in props && typeof props.href === "string") {
-    const { className: _1, size: _2, children, ...rest } = props
+    const { className: _1, size: _2, disabled, children, ...rest } = props
 
     return (
-      <Anchor className={className} {...styleAttrs} {...rest}>
+      <Anchor
+        className={className}
+        aria-disabled={disabled}
+        {...styleAttrs}
+        {...rest}
+      >
         {children}
       </Anchor>
     )
diff --git a/src/globals.css b/src/globals.css
index 8e215c2f3d..1c472b8e32 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -511,3 +511,7 @@ div[id^="headlessui-menu-items"] {
 .gql-conf-container {
   @apply mx-auto w-full max-w-[120rem];
 }
+
+.gql-conf-section {
+  @apply px-4 py-8 lg:px-12 xl:gap-x-24 xl:px-24 3xl:px-[240px];
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 42f00126eb..ebad1e3238 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,7 +2,7 @@ import { fontFamily } from "tailwindcss/defaultTheme"
 import type { Config } from "tailwindcss"
 import typography from "@tailwindcss/typography"
 import plugin from "tailwindcss/plugin"
-
+import containerQueries from "@tailwindcss/container-queries"
 const config: Config = {
   content: ["./src/**/*.{js,ts,jsx,tsx,mdx}", "./theme.config.tsx"],
   theme: {
@@ -21,6 +21,9 @@ const config: Config = {
           ...fontFamily.mono,
         ],
       },
+      screens: {
+        "3xl": "1920px",
+      },
       colors: {
         primary: "#e10098",
         "conf-black": "#0e031c",
@@ -74,6 +77,7 @@ const config: Config = {
   },
   plugins: [
     typography,
+    containerQueries,
     plugin(({ addUtilities }) => {
       const headingStyles = {
         ".typography-d1, .typography-h1, .typography-h2, .typography-h3": {