diff --git a/public/img/conf/Sponsors/Tyk.svg b/public/img/conf/Sponsors/Tyk.svg
index fa93f6756b..06fa8b1397 100644
--- a/public/img/conf/Sponsors/Tyk.svg
+++ b/public/img/conf/Sponsors/Tyk.svg
@@ -1,14 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg id="b" data-name="LOGO WHITE" xmlns="http://www.w3.org/2000/svg" width="687.96" height="356.72" viewBox="0 0 687.96 356.72">
-  <defs>
-    <style>
-      .c {
-        fill: #fff;
-      }
-    </style>
-  </defs>
-  <path class="c" d="m313.93,6.91c-4.48-4.67-10.33-6.91-17.05-6.91H101.08v23.68c0,6.39,2.24,11.93,6.89,16.42,4.65,4.67,10.5,7.09,17.22,7.09h62.51v237.99l22.9.17c6.72,0,12.57-2.42,17.05-6.91,4.65-4.67,7.06-10.37,7.06-16.59V47.36l86.28-.17v-21.96c-.17-6.22-2.41-13.48-7.06-18.32Z"/>
-  <path class="c" d="m438.26,87.11c-6.72,0-12.57,2.25-17.05,6.91-4.65,4.67-7.06,10.37-7.06,16.59v94.88c-8.27,23.33-33.41,34.57-60.44,34.57-22.39,0-33.24-10.54-33.24-31.97v-97.48c0-6.22-2.41-11.75-7.06-16.59-4.48-4.67-10.33-6.91-17.05-6.91h-22.9v125.47c0,48.22,24.45,72.76,75.08,72.76,24.97,0,52.18-8.81,65.27-25.92-1.03,15.21-2.76,23.16-11.19,34.57-9.47,12.79-28.07,17.63-47.53,17.63s-36.51-3.63-56.14-11.06c-3.27-.86-6.37-1.21-8.95-1.21-10.68,0-16.53,5.88-16.53,16.59v19.36l1.38.86c22.39,13.65,48.56,20.57,80.25,20.57,65.78,0,105.91-36.12,105.91-107.5V87.11h-22.75Z"/>
-  <path class="c" d="m653.87,198.24c-3.44-10.54-7.58-12.1-12.57-16.76,2.24-2.94,4.99-8.47,8.95-20.22l29.62-73.97h-26.87c-14.64,0-24.11,6.05-27.9,17.8l-20.15,47.18c-1.55,3.98-6.2,5.88-13.78,5.88h-43.91l.17-134.98c0-6.22-2.07-11.41-6.72-16.25C536.23,2.25,530.38.01,523.66.01h-23.25v285.16h23.08c6.72,0,12.57-2.42,17.22-7.09,4.48-4.49,6.89-10.02,6.89-16.42l-.34-55.82h52.01c7.41,0,9.3,3.46,10.16,6.05l24.11,56.52c3.62,11.23,12.92,16.76,27.72,16.76h26.69l-34.1-86.93h.02Z"/>
-  <path class="d" d="m124.85,136.71c-2.76-32.15-29.1-57.38-61.48-57.73H0v66.02c1.38,33.01,27.55,59.63,60.27,60.84h64.75v-68.96c0-.17-.17-.17-.17-.17Z"/>
+<svg  data-name="LOGO WHITE" xmlns="http://www.w3.org/2000/svg" width="687.96" height="356.72" viewBox="0 0 687.96 356.72" fill="#fff">
+  <path d="m313.93,6.91c-4.48-4.67-10.33-6.91-17.05-6.91H101.08v23.68c0,6.39,2.24,11.93,6.89,16.42,4.65,4.67,10.5,7.09,17.22,7.09h62.51v237.99l22.9.17c6.72,0,12.57-2.42,17.05-6.91,4.65-4.67,7.06-10.37,7.06-16.59V47.36l86.28-.17v-21.96c-.17-6.22-2.41-13.48-7.06-18.32Z"/>
+  <path d="m438.26,87.11c-6.72,0-12.57,2.25-17.05,6.91-4.65,4.67-7.06,10.37-7.06,16.59v94.88c-8.27,23.33-33.41,34.57-60.44,34.57-22.39,0-33.24-10.54-33.24-31.97v-97.48c0-6.22-2.41-11.75-7.06-16.59-4.48-4.67-10.33-6.91-17.05-6.91h-22.9v125.47c0,48.22,24.45,72.76,75.08,72.76,24.97,0,52.18-8.81,65.27-25.92-1.03,15.21-2.76,23.16-11.19,34.57-9.47,12.79-28.07,17.63-47.53,17.63s-36.51-3.63-56.14-11.06c-3.27-.86-6.37-1.21-8.95-1.21-10.68,0-16.53,5.88-16.53,16.59v19.36l1.38.86c22.39,13.65,48.56,20.57,80.25,20.57,65.78,0,105.91-36.12,105.91-107.5V87.11h-22.75Z"/>
+  <path d="m653.87,198.24c-3.44-10.54-7.58-12.1-12.57-16.76,2.24-2.94,4.99-8.47,8.95-20.22l29.62-73.97h-26.87c-14.64,0-24.11,6.05-27.9,17.8l-20.15,47.18c-1.55,3.98-6.2,5.88-13.78,5.88h-43.91l.17-134.98c0-6.22-2.07-11.41-6.72-16.25C536.23,2.25,530.38.01,523.66.01h-23.25v285.16h23.08c6.72,0,12.57-2.42,17.22-7.09,4.48-4.49,6.89-10.02,6.89-16.42l-.34-55.82h52.01c7.41,0,9.3,3.46,10.16,6.05l24.11,56.52c3.62,11.23,12.92,16.76,27.72,16.76h26.69l-34.1-86.93h.02Z"/>
+  <path fill-opacity="0.6" d="m124.85,136.71c-2.76-32.15-29.1-57.38-61.48-57.73H0v66.02c1.38,33.01,27.55,59.63,60.27,60.84h64.75v-68.96c0-.17-.17-.17-.17-.17Z"/>
 </svg>
diff --git a/src/app/conf/2025/components/call-for-proposals.tsx b/src/app/conf/2025/components/call-for-proposals.tsx
index 8d4471642d..3073122cd0 100644
--- a/src/app/conf/2025/components/call-for-proposals.tsx
+++ b/src/app/conf/2025/components/call-for-proposals.tsx
@@ -328,8 +328,8 @@ export function CallForProposals() {
       // todo: the part with `dark:` here is temporary until we have a dark mode version of this section
       className="gql-conf-section gql-conf-container dark:text-neu-0"
     >
-      <div className="flex *:basis-1/2 max-md:flex-col">
-        <div className="border-sec-dark bg-sec-light p-4 md:border-r md:p-8 lg:p-16">
+      <div className="flex *:basis-1/2 max-lg:flex-col">
+        <div className="border-sec-dark bg-sec-light p-4 lg:border-r lg:p-8 xl:p-16">
           <h1 className="typography-h2">Call for Proposals</h1>
           <p className="mt-6 md:mt-10">
             Putting on an amazing conference depends on great content, which is
@@ -378,7 +378,7 @@ export function CallForProposals() {
         <article className="flex h-auto flex-col bg-[#C6F267]">
           <div
             role="tablist"
-            className="flex divide-sec-dark border-b border-sec-dark *:flex-1 max-md:sr-only md:divide-x"
+            className="flex divide-sec-dark border-b border-sec-dark *:flex-1 max-lg:sr-only lg:divide-x"
           >
             {tabsInOrder.map((tab, i) => (
               <TabButton
@@ -389,21 +389,21 @@ export function CallForProposals() {
               />
             ))}
           </div>
-          <div className="flex flex-1 justify-center overflow-hidden max-md:flex-col md:items-center">
+          <div className="flex flex-1 justify-center overflow-hidden max-lg:flex-col lg:items-center">
             {tabsInOrder.map(tab => (
               <Fragment key={tab}>
                 <TabButton
                   tab={tab}
                   activeTab={activeTab}
                   setActiveTab={setActiveTab}
-                  className="md:hidden"
+                  className="lg:hidden"
                   aria-hidden
                 />
                 <div
                   role="tabpanel"
                   key={tab}
                   id={`tabpanel-${tab}`}
-                  className="flex-1"
+                  className="relative h-full flex-1"
                   style={{
                     display: activeTab === tab ? "block" : "none",
                   }}
@@ -441,18 +441,20 @@ function TabButton({
       tabIndex={tabIndex}
       aria-selected={activeTab === tab}
       className={clsx(
-        "gql-focus-visible flex items-center justify-between px-3 py-4 typography-body-lg hover:bg-sec-light focus:outline-none max-md:border-b max-md:border-sec-dark max-md:first:border-t md:[--collapsible:1] md:aria-selected:bg-sec-light",
+        "gql-focus-visible flex items-center justify-between px-3 py-4 typography-body-lg hover:bg-sec-light focus:outline-none max-lg:border-b max-lg:border-sec-dark max-lg:first:border-t lg:[--collapsible:1] lg:aria-selected:bg-sec-light",
         className,
       )}
-      onFocus={event => {
-        console.log("focus")
+      onFocus={() => {
+        setActiveTab(tab)
+      }}
+      onPointerDown={() => {
         setActiveTab(tab)
       }}
       onKeyDown={arrowsMoveSideways}
       {...props}
     >
       {tab.charAt(0).toUpperCase() + tab.slice(1)}
-      <ArrowDownIcon className="ml-2 size-6 text-sec-darker opacity-0 [[aria-selected=true]>&]:opacity-100" />
+      <ArrowDownIcon className="ml-2 size-6 text-transparent max-lg:[[aria-selected=false]>&]:rotate-180 max-lg:[[aria-selected=false]>&]:text-sec-dark [[aria-selected=true]>&]:text-sec-darker" />
     </button>
   )
 }
@@ -473,8 +475,8 @@ function arrowsMoveSideways(event: React.KeyboardEvent<HTMLButtonElement>) {
 
 function DefinitionListBox({ children }: { children: React.ReactNode }) {
   return (
-    <div className="relative isolate md:p-8 lg:p-16">
-      <dl className="divide-y divide-sec-dark border-neu-300 md:divide-neu-300 md:border md:shadow-[0px_0px_20px_0px_rgba(133,185,19,0.20)]">
+    <div className="inset-0 isolate h-full lg:absolute lg:flex lg:items-center lg:justify-center lg:p-4 xl:p-8 2xl:p-16">
+      <dl className="divide-y divide-sec-dark border-neu-300 lg:divide-neu-300 lg:border lg:shadow-[0px_0px_20px_0px_rgba(133,185,19,0.20)]">
         {children}
       </dl>
       <Stripes />
@@ -492,7 +494,7 @@ function Stripes() {
   return (
     <div
       role="presentation"
-      className="pointer-events-none absolute inset-0 bottom-[-20px] -z-10 translate-x-0.5 translate-y-12 ease-linear max-md:hidden"
+      className="pointer-events-none absolute inset-0 bottom-[-20px] -z-10 translate-x-0.5 translate-y-12 ease-linear max-lg:hidden"
       style={{
         maskImage: mask,
         WebkitMaskImage: mask,
diff --git a/src/app/conf/2025/components/hero/index.tsx b/src/app/conf/2025/components/hero/index.tsx
index 2c8f990701..8ab6f068d9 100644
--- a/src/app/conf/2025/components/hero/index.tsx
+++ b/src/app/conf/2025/components/hero/index.tsx
@@ -12,7 +12,7 @@ import heroPhoto from "./hero-photo.jpeg"
 
 export function Hero() {
   return (
-    <article className="gql-conf-navbar-strip before:dark:bg-blk/40 relative isolate flex flex-col justify-center bg-pri-base text-neu-0 before:bg-white/30 dark:bg-pri-darker dark:text-neu-900">
+    <article className="gql-conf-navbar-strip relative isolate flex flex-col justify-center bg-pri-base text-neu-0 before:bg-white/30 dark:bg-pri-darker dark:text-neu-900 before:dark:bg-blk/40">
       <article className="relative">
         <Stripes />
         <div className="gql-conf-container mx-auto flex max-w-full flex-col gap-12 overflow-hidden p-4 pt-6 sm:p-8 sm:pt-12 md:gap-12 md:bg-left md:p-12 lg:px-24 lg:pb-16 lg:pt-24">
@@ -42,7 +42,7 @@ export function Hero() {
           </div>
         </div>
       </article>
-      <div className="bg-blk">
+      <div className="z-[2] bg-blk">
         <Image
           src={heroPhoto}
           width={1920}
diff --git a/src/app/conf/2025/components/navbar.tsx b/src/app/conf/2025/components/navbar.tsx
index 673ab017cc..914b7edcb8 100644
--- a/src/app/conf/2025/components/navbar.tsx
+++ b/src/app/conf/2025/components/navbar.tsx
@@ -5,10 +5,11 @@ import NextLink from "next/link"
 import { clsx } from "clsx"
 import { usePathname } from "next/navigation"
 
-import { HamburgerIcon, CrossIcon } from "@/icons"
-
 import { Badge } from "../../_components/badge"
 
+import MenuIcon from "../pixelarticons/menu.svg?svgr"
+import CloseIcon from "../pixelarticons/close.svg?svgr"
+
 export interface NavbarProps {
   links: { href: string; children: React.ReactNode; "aria-disabled"?: true }[]
   year: number
@@ -36,21 +37,29 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
       />
       <div
         // placeholder: the colors here on `before` must match the ones on Hero `before` strip
-        className="absolute h-[calc(var(--navbar-h)+1px)] w-full bg-pri-base before:absolute before:top-0 before:h-[calc(var(--navbar-h)+1px)] before:w-full before:bg-white/30 dark:bg-pri-darker dark:before:bg-blk/40"
+        className="absolute h-[calc(var(--navbar-h)+1px)] w-full bg-pri-base before:absolute before:top-0 before:h-[calc(var(--navbar-h)+1px)] before:w-full before:bg-white/30 dark:bg-pri-darker dark:before:bg-black/40"
       />
       <header
         className={clsx(
-          "top-0 z-10 w-full border-b border-black/60 font-mono text-neu-900 antialiased dark:border-white/80",
-          mobileDrawerOpen ? "fixed" : "sticky",
+          "gql-all-anchors-focusable top-0 z-10 w-full border-b border-black/60 font-mono text-neu-900 antialiased dark:border-white/80",
+          mobileDrawerOpen
+            ? "fixed border-neu-900 dark:border-white"
+            : "sticky",
         )}
       >
         <BackdropBlur />
         <div className="flex h-[var(--navbar-h)] items-center justify-between gap-5 px-4 lg:px-10">
           <div className="flex items-center gap-2 text-xl/none uppercase">
-            <NextLink href="/">
+            <NextLink href="/" className="-m-1 p-1 hover:bg-neu-900/10">
               <GraphQLLogo className="h-6" />
             </NextLink>
-            <span>/ GraphQLConf {year}</span>
+            <span>/</span>
+            <NextLink
+              href={`/conf/${year}`}
+              className="-m-2 p-2 underline-offset-4 hover:underline"
+            >
+              GraphQLConf {year}
+            </NextLink>
           </div>
 
           <div className="mr-auto flex h-full flex-col justify-center whitespace-pre border-x border-black/60 px-4 typography-menu dark:border-white/80 max-xl:hidden">
@@ -67,7 +76,7 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
           {mobileDrawerOpen && (
             <div
               onClick={handleDrawerClick}
-              className="fixed inset-0 top-[var(--navbar-h)] z-10 bg-neu-0/40 backdrop-blur-[6.4px]"
+              className="fixed inset-0 top-[calc(var(--navbar-h)+1px)] z-10 bg-neu-0/40 backdrop-blur-[6.4px]"
             />
           )}
 
@@ -107,10 +116,10 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
           </nav>
 
           <button
-            className="z-40 ml-auto size-6 text-white lg:hidden"
+            className="gql-focus-visible z-40 ml-auto size-7 hover:bg-neu-900/10 lg:hidden"
             onClick={handleDrawerClick}
           >
-            {mobileDrawerOpen ? <CrossIcon /> : <HamburgerIcon />}
+            {mobileDrawerOpen ? <CloseIcon /> : <MenuIcon />}
           </button>
         </div>
       </header>
diff --git a/src/app/conf/2025/components/top-minds/index.tsx b/src/app/conf/2025/components/top-minds/index.tsx
index c9f50d7eae..58f280f267 100644
--- a/src/app/conf/2025/components/top-minds/index.tsx
+++ b/src/app/conf/2025/components/top-minds/index.tsx
@@ -24,12 +24,12 @@ export default function TopMindsSection({
   return (
     <section
       className={clsx(
-        "gql-conf-section flex justify-center max-md:flex-col",
+        "gql-conf-section flex justify-center max-md:flex-col [@media(767px<width<807px)]:px-6 [@media(807px<=width<858px)]:px-12",
         className,
       )}
       {...rest}
     >
-      <div className="flex flex-wrap max-sm:flex-col [@media(width<=743px)]:justify-center [@media(width>=970px)]:*:border-b-0">
+      <div className="flex grid-cols-2 flex-wrap [@media(444px<width<743px)]:grid [@media(width<=444px)]:flex-col [@media(width<=743px)]:justify-center [@media(width>=970px)]:*:border-b-0">
         {/* todo: remaining socials */}
         <h3 className="mr-auto flex w-full grow text-pretty pb-6 pr-6 typography-h2 [@media(width>857px)]:basis-0">
           Meet the top industry minds
@@ -46,6 +46,7 @@ export default function TopMindsSection({
           title="Netflix — CTO"
           src={elizabethStone}
           linkedin="elizabeth-stone-608a754"
+          className="[@media(width<=742px)]:border-l"
         />
         <div className="flex grow border-sec-dark [@media(width<970px)]:contents [@media(width>=970px)]:border-t [@media(width>=970px)]:*:border-t-0">
           <SpeakerCard
@@ -61,7 +62,7 @@ export default function TopMindsSection({
             title="Atlassian — CTO"
             src={rajeevRajan}
             linkedin="rajeev-rajan"
-            className="[@media(744px<=width<=970px)]:border-l"
+            className="[@media(639px<=width<=970px)]:border-l"
           />
           <SpeakerCard
             name="Tanmai Gopal"
@@ -71,7 +72,7 @@ export default function TopMindsSection({
             linkedin="tanmaig"
             className="[@media(width<744px)]:border-l"
           />
-          <div className="mt-6 flex shrink-0 basis-[content] items-end justify-stretch max-lg:w-full max-sm:*:w-full sm:justify-end sm:pl-6 [@media(640px<=width<=855px)]:basis-[236px] [@media(width>855px)]:grow">
+          <div className="mt-6 flex shrink-0 basis-[content] items-end justify-stretch max-lg:w-full [@media(640px<=width<=855px)]:basis-[236px] [@media(width<=444px)]:*:w-full [@media(width>742px)]:justify-end [@media(width>742px)]:pl-6 [@media(width>855px)]:grow">
             {hasSpeakersPage ? (
               <Button variant="secondary" href="/conf/2025/speakers/">
                 View all speakers
@@ -106,24 +107,24 @@ function SpeakerCard({
   return (
     <article
       className={clsx(
-        ":border-r shrink-0 border-y border-r border-sec-dark first-of-type:border-l max-sm:border-l",
+        "flex shrink-0 flex-col border-y border-r border-sec-dark first-of-type:border-l max-sm:border-l",
         className,
       )}
     >
       <Image
         src={src}
         alt=""
-        width={236}
-        height={236}
-        className="aspect-square size-[312px] w-full object-cover transition-transform sm:size-[236px]"
+        width={312}
+        height={312}
+        className="aspect-square size-[312px] w-full object-cover transition-transform sm:h-[236px]"
       />
-      <div className="flex items-stretch border-t border-sec-dark">
+      <div className="flex flex-1 items-stretch border-t border-sec-dark">
         <div className="flex grow flex-col justify-center gap-1 p-3 sm:h-[80px]">
           <h4 className="typography-body-md">{name}</h4>
           <p className="text-neu-700 typography-body-xs">{title}</p>
         </div>
         {(linkedin || twitter) && (
-          <div className="flex items-center border-l border-sec-dark max-sm:divide-x sm:flex-col sm:divide-y sm:border-l">
+          <div className="flex border-l border-sec-dark max-sm:divide-x sm:flex-col sm:items-center sm:divide-y sm:border-l">
             {linkedin && (
               <a
                 href={`https://www.linkedin.com/in/${linkedin}`}
diff --git a/src/app/conf/2025/faq.tsx b/src/app/conf/2025/faq.tsx
index 90e55d3c9b..1617a1929c 100644
--- a/src/app/conf/2025/faq.tsx
+++ b/src/app/conf/2025/faq.tsx
@@ -200,12 +200,14 @@ export function FAQ({ className }: { className?: string }) {
     <section
       id="faq"
       className={clsx(
-        "gql-conf-section flex gap-10 max-md:flex-col xl:gap-24 2xl:gap-36",
+        "gql-conf-section flex gap-10 max-lg:flex-col xl:gap-24 2xl:gap-36",
         className,
       )}
     >
       <div>
-        <h2 className="typography-h2">Frequently Asked Questions</h2>
+        <h2 className="typography-h2 lg:max-xl:max-w-lg">
+          Frequently Asked Questions
+        </h2>
         <p className="mt-6 typography-body-md">
           You can find much more information on our{" "}
           <a href="/conf/2025/resources" className="typography-link">
@@ -215,7 +217,7 @@ export function FAQ({ className }: { className?: string }) {
         </p>
       </div>
 
-      <div className="grow space-y-4 md:space-y-6">
+      <div className="grow space-y-4 lg:space-y-6">
         {FAQS.map((faq, index) => (
           <details
             open={index === 0}
@@ -226,7 +228,7 @@ export function FAQ({ className }: { className?: string }) {
               <span className="select-none typography-body-lg">
                 {faq.question}
               </span>
-              <ArrowDown className="size-10 text-sec-darker group-open/q:rotate-180" />
+              <ArrowDown className="size-10 shrink-0 text-sec-darker group-open/q:rotate-180" />
             </summary>
             <div className="p-3 typography-body-md">{faq.answer}</div>
           </details>
diff --git a/src/app/conf/2025/page.tsx b/src/app/conf/2025/page.tsx
index 3104035d36..bf23c8318c 100644
--- a/src/app/conf/2025/page.tsx
+++ b/src/app/conf/2025/page.tsx
@@ -1,10 +1,7 @@
 import { Metadata } from "next"
-import { HostedByGraphQLFoundation } from "@/icons"
-import { GridButton } from "../_components/grid-button"
 import { Sponsor } from "./sponsorship"
 import { Venue } from "./venue"
 import { FAQ } from "./faq"
-import { Register } from "./register"
 import { CallForProposals } from "./components/call-for-proposals"
 import { RegisterToday } from "./components/register-today"
 import { Hero } from "./components/hero"
@@ -22,7 +19,7 @@ export default function Page() {
   return (
     <main className="gql-all-anchors-focusable antialiased">
       <Hero />
-      <div className="gql-conf-container gql-conf-navbar-strip before:dark:bg-blk/30 text-neu-900 before:bg-white/40">
+      <div className="gql-conf-container gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
         <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} />
@@ -30,15 +27,12 @@ export default function Page() {
       <div className="gql-conf-navbar-strip before:bg-white/40 before:dark:bg-pri-dark/[0.45]">
         <GetYourTicket />
       </div>
-      <div className="gql-conf-container gql-conf-navbar-strip before:dark:bg-blk/30 text-neu-900 before:bg-white/50">
+      <div className="gql-conf-container gql-conf-navbar-strip text-neu-900 before:bg-white/50 before:dark:bg-blk/30">
         <RegisterSection />
         <Sponsors heading="Thanks to our 2024 sponsors!" />
         <CallForProposals />
-        <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">
-          <Sponsor />
-          <Register />
-          <Venue />
-        </div>
+        <Sponsor />
+        <Venue />
         <FAQ />
       </div>
     </main>
diff --git a/src/app/conf/2025/pixelarticons/close.svg b/src/app/conf/2025/pixelarticons/close.svg
new file mode 100644
index 0000000000..d48de61287
--- /dev/null
+++ b/src/app/conf/2025/pixelarticons/close.svg
@@ -0,0 +1,3 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M5 5h2v2H5V5zm4 4H7V7h2v2zm2 2H9V9h2v2zm2 0h-2v2H9v2H7v2H5v2h2v-2h2v-2h2v-2h2v2h2v2h2v2h2v-2h-2v-2h-2v-2h-2v-2zm2-2v2h-2V9h2zm2-2v2h-2V7h2zm0 0V5h2v2h-2z" />
+</svg>
diff --git a/src/app/conf/2025/pixelarticons/menu.svg b/src/app/conf/2025/pixelarticons/menu.svg
new file mode 100644
index 0000000000..c87a5135c7
--- /dev/null
+++ b/src/app/conf/2025/pixelarticons/menu.svg
@@ -0,0 +1,3 @@
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm16 5H4v2h16v-2z" />
+</svg>
diff --git a/src/app/conf/2025/register.tsx b/src/app/conf/2025/register.tsx
deleted file mode 100644
index c15c105ae7..0000000000
--- a/src/app/conf/2025/register.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { InfoGrid } from "../_components/info-grid"
-
-export function Register() {
-  return (
-    <section>
-      <InfoGrid
-        id="register"
-        title="Register"
-        subtitle="Join a diverse community of GraphQL developers, architects, and enthusiasts while experiencing premium content and networking opportunities in a vendor-neutral environment. We never sell attendee lists or contact information, nor do we authorize others to do so. If you receive an email claiming to sell an attendee list for a Linux Foundation event, please forward it to events@linuxfoundation.org."
-        listItems={[
-          {
-            title: "Speakers",
-            description: `You should have received a registration link in your acceptance email. If you did not, please contact <a href="mailto:cfp@linuxfoundation.org">cfp@linuxfoundation.org</a> for more details.`,
-          },
-          {
-            title: "Sponsors",
-            description: `A registration link was shared in an email to your company's sponsorship contact. Please reach out to your company’s sponsorship contact if you need to register as a Sponsor. For further questions, please email <a href="mailto:graphql_events@linuxfoundation.org">graphql_events@linuxfoundation.org</a>.`,
-          },
-          {
-            title: "Media",
-            description: `If you are a member of the media interested in attending this event and have not received a complimentary access code to attend, contact us at <a href="mailto:graphql_events@linuxfoundation.org">graphql_events@linuxfoundation.org</a>.`,
-          },
-        ]}
-      />
-
-      <div className="mt-10">
-        <h2 className="mb-4 text-5xl font-bold text-white">Rates</h2>
-        <p>The registraion deadlines is 23:59 on the respective date.</p>
-        <div className="mt-8 grid gap-6 md:grid-cols-3 md:gap-2">
-          {[
-            { title: "Early Bird", dates: "Through 13 July", price: "$599" },
-            { title: "Standard", dates: "14 July - 31 August", price: "$799" },
-            {
-              title: "Late",
-              dates: "1 September - 10 September",
-              price: "$899",
-            },
-          ].map((item, index) => (
-            <div
-              key={item.title}
-              className="w-full flex-shrink-0 snap-start items-center justify-center border border-primary p-6 text-center text-white shadow-lg lg:w-full lg:max-w-sm"
-            >
-              <h3 className="mb-2 text-2xl font-bold">{item.title}</h3>
-              <time>{item.dates}</time>
-              <p className="mt-2 text-3xl font-bold">{item.price}</p>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div className="mt-8 flex justify-center">
-        <a
-          href="https://cvent.me/PBNYEe?utm_source=graphql_conf_2025&utm_medium=website&utm_campaign=register_section"
-          target="_blank"
-          rel="noreferrer"
-          className="bg-primary/85 px-20 py-4 text-center text-3xl font-semibold transition-colors hover:bg-primary/100 md:px-28"
-        >
-          Get Tickets
-        </a>
-      </div>
-    </section>
-  )
-}
diff --git a/src/app/conf/2025/sponsorship.tsx b/src/app/conf/2025/sponsorship.tsx
index 720e40e735..b5651bf918 100644
--- a/src/app/conf/2025/sponsorship.tsx
+++ b/src/app/conf/2025/sponsorship.tsx
@@ -1,10 +1,11 @@
 import { InfoGrid } from "../_components/info-grid"
+import { Button } from "../_design-system/button"
 
 export function Sponsor() {
   return (
-    <section id="sponsors">
+    <section id="sponsors" className="gql-conf-section">
       <InfoGrid
-        title="Why Sponsor?"
+        title="Become a Sponsor"
         subtitle="Connect with the global GraphQL community and showcase your brand to industry leaders and decision-makers."
         listItems={[
           {
@@ -39,15 +40,14 @@ export function Sponsor() {
         ]}
       />
 
-      <div className="mt-8 flex justify-center">
-        <a
+      <div className="mt-4 flex justify-center xl:mt-8">
+        <Button
           href="https://events.linuxfoundation.org/sponsor-GraphQLConf-25?utm_source=graphql_conf_2025&utm_medium=website&utm_campaign=sponsor_section"
           target="_blank"
           rel="noreferrer"
-          className="bg-primary/85 px-20 py-4 text-center text-3xl font-semibold transition-colors hover:bg-primary/100 md:px-28"
         >
           Download Prospectus
-        </a>
+        </Button>
       </div>
     </section>
   )
diff --git a/src/app/conf/2025/venue.tsx b/src/app/conf/2025/venue.tsx
index 07478f21f9..99cd595692 100644
--- a/src/app/conf/2025/venue.tsx
+++ b/src/app/conf/2025/venue.tsx
@@ -10,17 +10,17 @@ const HOTELS = [
   {
     name: "Mövenpick Hotel Amsterdam City Centre",
     link: "https://movenpick.accor.com/en/europe/netherlands/amsterdam/hotel-amsterdam.html?utm_source=google&utm_medium=local&utm_campaign=hotel-MHR-Amsterdam-city-center&y_source=1_MTUzNjI2OTgtNzE1LWxvY2F0aW9uLndlYnNpdGU%3D",
-    description: `Piet Heinkade 11\n1019 BR Amsterdam, Netherlands\nPhone: <a class="hover:text-primary underline" href="tel:+31 20 519 1200">+31 20 519 1200</a>`,
+    description: `Piet Heinkade 11\n1019 BR Amsterdam, Netherlands\nPhone: <a class="typography-link" href="tel:+31 20 519 1200">+31 20 519 1200</a>`,
   },
   {
     name: "Inntel Hotels Amsterdam Landmark",
     link: "https://www.inntelhotelsamsterdamlandmark.nl/",
-    description: `VOC-kade 600\n1018 LG Amsterdam, Netherlands\n Phone: <a class="hover:text-primary underline" href="tel:+31 20 227 2550">+31 20 227 2550</a>`,
+    description: `VOC-kade 600\n1018 LG Amsterdam, Netherlands\nPhone: <a class="typography-link" href="tel:+31 20 227 2550">+31 20 227 2550</a>`,
   },
   {
     name: "DoubleTree by Hilton Amsterdam Central Station",
     link: "https://www.hilton.com/en/hotels/amscsdi-doubletree-amsterdam-centraal-station/?SEO_id=GMB-EMEA-DI-AMSCSDI",
-    description: `Oosterdoksstraat 4 \n1011 DK Amsterdam, Netherlands\nPhone: <a class="hover:text-primary underline" href="tel:+31 20 530 0800">+31 20 530 0800</a>`,
+    description: `Oosterdoksstraat 4 \n1011 DK Amsterdam, Netherlands\nPhone: <a class="typography-link" href="tel:+31 20 530 0800">+31 20 530 0800</a>`,
   },
 ]
 
@@ -29,53 +29,50 @@ const HOW_TO_GET_TO_VENUE = [
     title: "Public Transportation",
     description:
       'Take tram 26 from Amsterdam Central Station to the "Kattenburgerstraat" stop. The venue is in front of the tram stop.',
-    icon: <BusFront size={20} />,
+    icon: <BusFront size={16} />,
   },
   {
     title: "Airport Information",
     description:
       "Amsterdam Airport Schiphol is about 20 km from the venue. Take a direct train to Amsterdam Central Station, then follow the public transportation instructions.",
-    icon: <TicketsPlane size={20} />,
+    icon: <TicketsPlane size={16} />,
   },
   {
     title: "Parking at venue",
-    description: `Limited parking is available at the venue. We recommend using public transportation when possible. Learn more about parking at <a class="hover:text-primary underline" href="https://dezwijger.nl/about-us-en/contact" target="_blank">Pakhuis de Zwijger</a>. If you require an accessible parking spot, park at Vriesseveem 4 or Withoedenveem 16 where you can park if you have a Disability Parking Card.`,
-    icon: <SquareParking size={20} />,
+    description: `Limited parking is available at the venue. We recommend using public transportation when possible. Learn more about parking at <a class="typography-link" href="https://dezwijger.nl/about-us-en/contact" target="_blank">Pakhuis de Zwijger</a>. If you require an accessible parking spot, park at Vriesseveem 4 or Withoedenveem 16 where you can park if you have a Disability Parking Card.`,
+    icon: <SquareParking size={16} />,
   },
 ]
 
 export function Venue() {
   return (
-    <section>
-      <h1 className="mb-4 text-5xl font-bold">Venue</h1>
+    <section className="gql-conf-section">
       <div className="grid grid-cols-1 gap-10 md:grid-cols-2">
-        <div className="flex flex-col gap-2">
-          <h2 className="text-3xl">Conference</h2>
+        <div className="typography-body-md">
+          <h2 className="mb-4 typography-h2">Venue</h2>
           <address className="not-italic">
-            <strong>
-              <Link
-                className="underline hover:text-primary"
-                target="_blank"
-                href="https://dezwijger.nl/"
-              >
-                Pakhuis De Zwijger
-              </Link>
-            </strong>
+            <Link
+              className="typography-link"
+              target="_blank"
+              href="https://dezwijger.nl/"
+            >
+              Pakhuis De Zwijger
+            </Link>
             <br /> Piet Heinkade 179, 1019 HC <br />
             Amsterdam, Netherlands
           </address>
-          <div className="flex flex-col gap-2">
-            <h3 className="mt-4 text-xl font-semibold">
+          <div className="mt-6 flex flex-col gap-4">
+            <h3 className="mb-4 typography-body-lg">
               How to get to the venue?
             </h3>
             {HOW_TO_GET_TO_VENUE.map(({ title, description, icon }) => (
               <div key={title}>
                 <div className="flex flex-row items-center gap-4">
-                  {icon}
-                  <h5 className="text-lg">{title}</h5>
+                  <div className="bg-neu-100 p-1">{icon}</div>
+                  <h5 className="text-neu-800 typography-body-md">{title}</h5>
                 </div>
                 <p
-                  className="ml-9 max-w-96"
+                  className="ml-9 max-w-lg text-pretty pl-1 typography-body-sm"
                   dangerouslySetInnerHTML={{
                     __html: description,
                   }}
@@ -86,15 +83,15 @@ export function Venue() {
         </div>
 
         <div>
-          <h2 className="text-3xl">Hotel Information</h2>
-          <p className="mt-2">
+          <h2 className="mb-4 typography-h2">Hotel Information</h2>
+          <p className="typography-body-md">
             The Linux Foundation has not contracted rooms at these properties
             and cannot guarantee rates or availability.
           </p>
           <div className="mt-10 flex flex-col gap-4">
             {HOTELS.map(hotel => (
               <address className="not-italic" key={hotel.name}>
-                <strong>
+                <strong className="font-normal typography-body-md">
                   <a
                     className="flex items-center gap-1 hover:underline"
                     target="_blank"
@@ -106,7 +103,7 @@ export function Venue() {
                   </a>
                 </strong>
                 <span
-                  className="whitespace-pre-wrap"
+                  className="whitespace-pre-wrap typography-body-sm"
                   dangerouslySetInnerHTML={{ __html: hotel.description }}
                 />
               </address>
diff --git a/src/app/conf/_components/info-grid.tsx b/src/app/conf/_components/info-grid.tsx
index 2483cffc4a..4537eff327 100644
--- a/src/app/conf/_components/info-grid.tsx
+++ b/src/app/conf/_components/info-grid.tsx
@@ -14,24 +14,19 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
   id,
 }) => (
   <section id={id}>
-    <h1 className="mb-4 text-5xl font-bold text-white">{title}</h1>
-    <p className="mb-8 text-lg font-normal text-white">{subtitle}</p>
-
-    {/* Horizontal Scrollable Grid */}
+    <h1 className="mb-4 typography-h2">{title}</h1>
+    <p className="typography-body-lg xl:mb-4">{subtitle}</p>
     <div
       style={{
         scrollSnapType: "x mandatory",
       }}
-      className="scroll-snap-x flex snap-mandatory gap-6 overflow-x-auto lg:grid lg:grid-cols-3 lg:overflow-visible"
+      className="-mx-4 flex gap-6 overflow-x-auto p-4 lg:grid lg:grid-cols-3 lg:overflow-visible"
     >
       {listItems.map(({ title, description }, index) => (
-        <div
-          key={index}
-          className="lg-w[80%] w-[70%] flex-shrink-0 snap-start border border-primary p-6 text-white shadow-lg lg:w-full lg:max-w-sm"
-        >
-          <h2 className="mb-2 text-2xl font-bold">{title}</h2>
+        <div key={index} className="min-w-64 border border-neu-400 p-3">
+          <h2 className="mb-2 typography-body-lg">{title}</h2>
           <p
-            className="text-base [&>a]:underline [&>a]:hover:text-primary"
+            className="typography-body-md [&_a]:typography-link"
             dangerouslySetInnerHTML={{ __html: description }}
           ></p>
         </div>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2e2ad5a2fb..15d63115b0 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -23,7 +23,12 @@ export default function RootLayout({
   children: ReactNode
 }): ReactElement {
   return (
-    <html lang="en" className="scroll-smooth">
+    <html
+      lang="en"
+      className="scroll-smooth"
+      // ThemeProvider adds a `light`/`dark` class
+      suppressHydrationWarning
+    >
       <head>
         <style>{`html { scroll-padding-top: 5rem }`}</style>
       </head>