diff --git a/src/app/conf/2023/page.tsx b/src/app/conf/2023/page.tsx
index 5f58405460..c4e160cc40 100644
--- a/src/app/conf/2023/page.tsx
+++ b/src/app/conf/2023/page.tsx
@@ -24,7 +24,7 @@ export default function ConfPage() {
 
 function Hero() {
   return (
-    <div className="bg-black/20 bg-[url('/img/conf/graphql-conf-bg.png')] bg-cover text-white bg-blend-multiply max-md:text-base">
+    <div className="bg-blk/20 bg-[url('/img/conf/graphql-conf-bg.png')] bg-cover text-white bg-blend-multiply max-md:text-base">
       <div className="container py-16 md:py-20">
         <div className="flex items-center gap-6">
           <GraphQLConf className="h-14" />
diff --git a/src/app/conf/2025/_data.ts b/src/app/conf/2025/_data.ts
new file mode 100644
index 0000000000..e172f3e519
--- /dev/null
+++ b/src/app/conf/2025/_data.ts
@@ -0,0 +1,84 @@
+import "server-only"
+import { stripHtml } from "string-strip-html"
+import { SchedSpeaker, ScheduleSession } from "@/app/conf/2023/types"
+import pLimit from "p-limit"
+
+async function fetchData<T>(url: string): Promise<T> {
+  try {
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "User-Agent": "GraphQL Conf / GraphQL Foundation",
+      },
+    })
+    const data = await response.json()
+    return data
+  } catch (error) {
+    throw new Error(
+      `Error fetching data from ${url}: ${(error as Error).message || (error as Error).toString()}`,
+    )
+  }
+}
+
+const token = process.env.SCHED_ACCESS_TOKEN_2024
+
+async function getUsernames(): Promise<string[]> {
+  const response = await fetchData<{ username: string }[]>(
+    `https://graphqlconf2024.sched.com/api/user/list?api_key=${token}&format=json&fields=username`,
+  )
+  return response.map(user => user.username)
+}
+
+const limit = pLimit(40) // rate limit is 30req/min
+
+async function getSpeakers(): Promise<SchedSpeaker[]> {
+  const usernames = await getUsernames()
+
+  const users = await Promise.all(
+    usernames.map(username =>
+      limit(() => {
+        return fetchData<SchedSpeaker>(
+          `https://graphqlconf2024.sched.com/api/user/get?api_key=${token}&by=username&term=${username}&format=json&fields=username,company,position,name,about,location,url,avatar,role,socialurls`,
+        )
+      }),
+    ),
+  )
+
+  const result = users
+    .filter(speaker => speaker.role.includes("speaker"))
+    .map(user => {
+      return {
+        ...user,
+        about: stripHtml(user.about).result,
+      }
+    })
+
+  return result
+}
+
+async function getSchedule(): Promise<ScheduleSession[]> {
+  const sessions = await fetchData<ScheduleSession[]>(
+    `https://graphqlconf2024.sched.com/api/session/export?api_key=${token}&format=json`,
+  )
+
+  const result = sessions.map(session => {
+    const { description } = session
+    if (description?.includes("<")) {
+      // console.log(`Found HTML element in about field for session "${session.name}"`)
+    }
+
+    return {
+      ...session,
+      description: description && stripHtml(description).result,
+    }
+  })
+
+  return result
+}
+
+// @ts-expect-error -- fixme
+export const speakers = await getSpeakers()
+
+// @ts-expect-error -- fixme
+export const schedule = await getSchedule()
diff --git a/src/app/conf/2025/_videos.ts b/src/app/conf/2025/_videos.ts
new file mode 100644
index 0000000000..e8b9f74c8b
--- /dev/null
+++ b/src/app/conf/2025/_videos.ts
@@ -0,0 +1,10 @@
+export const videos: {
+  id: string
+  title: string
+}[] = [
+  // temporary
+  {
+    id: "fA81OFu9BVY",
+    title: `Top 10 GraphQL Security Checks for Every Developer - Ankita Gupta, Ankush Jain - Akto.io`,
+  },
+]
diff --git a/src/app/conf/2025/components/hero/hero-image.tsx b/src/app/conf/2025/components/hero/hero-image.tsx
new file mode 100644
index 0000000000..d1c58d7415
--- /dev/null
+++ b/src/app/conf/2025/components/hero/hero-image.tsx
@@ -0,0 +1,17 @@
+import Image from "next-image-export-optimizer"
+
+import heroPhoto from "./hero-photo.jpeg"
+
+export function HeroImage() {
+  return (
+    <div className="z-[2] bg-blk">
+      <Image
+        src={heroPhoto}
+        width={1920}
+        height={560}
+        alt="five speakers at GraphQLConf 2024"
+        className="mx-auto h-[560px] w-[1920px] max-w-full object-cover"
+      />
+    </div>
+  )
+}
diff --git a/src/app/conf/2025/components/hero/index.tsx b/src/app/conf/2025/components/hero/index.tsx
index 5cac0ba2a3..027bbb6bbb 100644
--- a/src/app/conf/2025/components/hero/index.tsx
+++ b/src/app/conf/2025/components/hero/index.tsx
@@ -1,61 +1,57 @@
-import Image from "next-image-export-optimizer"
-
-import { Button } from "../../../_design-system/button"
 import { CalendarIcon } from "../../pixelarticons/calendar-icon"
-import { GET_TICKETS_LINK } from "../../links"
 import { PinIcon } from "../../pixelarticons/pin-icon"
-import graphqlFoundationWordmarkSvg from "../../assets/graphql-foundation-wordmark.svg"
+import GraphQLFoundationWordmark from "../../assets/graphql-foundation-wordmark.svg?svgr"
 
 import { ImageLoaded } from "../image-loaded"
 import blurBean from "./blur-bean-cropped.webp"
-import heroPhoto from "./hero-photo.jpeg"
 
-export function Hero() {
+export function Hero({
+  pageName,
+  year,
+  children,
+  bottom,
+}: {
+  pageName?: string
+  year: string
+  children: React.ReactNode
+  bottom?: React.ReactNode
+}) {
   return (
     <article className="gql-conf-navbar-strip relative isolate flex flex-col justify-center bg-pri-base text-neu-0 selection:bg-blk/40 before:bg-white/30 dark:bg-pri-darker dark:text-neu-900 dark:selection:bg-white/40 before:dark:bg-blk/40">
       <article className="relative">
-        <Stripes />
+        <HeroStripes />
         <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">
           <div className="flex gap-10 max-md:flex-col md:justify-between">
-            <h1 className="flex flex-wrap gap-2 typography-d1">
-              <span>GraphQLConf</span>
-              <span className="text-sec-base">2025</span>
-            </h1>
+            {pageName ? (
+              <div>
+                <span className="text-sec-base typography-h3">
+                  GraphQLConf {year}
+                </span>
+                <h1 className="typography-d1">{pageName}</h1>
+              </div>
+            ) : (
+              <h1 className="flex flex-wrap gap-2 typography-d1">
+                <span>GraphQLConf</span>
+                <span className="text-sec-base">{year}</span>
+              </h1>
+            )}
             <div className="flex h-min items-center gap-4">
               <span className="whitespace-pre typography-body-sm">
                 hosted by
               </span>
-              <img
-                src={graphqlFoundationWordmarkSvg.src}
-                alt="GraphQL Foundation"
-                width={128}
-                height={34.877}
-              />
+              <GraphQLFoundationWordmark width={128} height={34.877} />
             </div>
           </div>
 
-          <div className="flex flex-col gap-8">
-            <DateAndLocation />
-            <Button className="md:w-fit" href={GET_TICKETS_LINK}>
-              Get your tickets
-            </Button>
-          </div>
+          <div className="flex flex-col gap-8">{children}</div>
         </div>
       </article>
-      <div className="z-[2] bg-blk">
-        <Image
-          src={heroPhoto}
-          width={1920}
-          height={560}
-          alt="five speakers at GraphQLConf 2024"
-          className="mx-auto h-[560px] w-[1920px] max-w-full object-cover"
-        />
-      </div>
+      {bottom}
     </article>
   )
 }
 
-function DateAndLocation() {
+export function HeroDateAndLocation() {
   return (
     <div className="flex flex-col gap-4 typography-body-md md:flex-row md:gap-6">
       <div className="flex items-center gap-2">
@@ -77,7 +73,7 @@ const maskEven =
 const maskOdd =
   "repeating-linear-gradient(to right, black, black 12px, transparent 12px, transparent 24px)"
 
-function Stripes() {
+export function HeroStripes() {
   return (
     <ImageLoaded
       role="presentation"
diff --git a/src/app/conf/2025/components/image-loaded.tsx b/src/app/conf/2025/components/image-loaded.tsx
index e1486b7618..6e26ef4c7a 100644
--- a/src/app/conf/2025/components/image-loaded.tsx
+++ b/src/app/conf/2025/components/image-loaded.tsx
@@ -3,19 +3,34 @@
 import type { StaticImageData } from "next/image"
 import { useEffect, useState } from "react"
 
+const _cache = new Map<string, HTMLImageElement>()
+
 export interface ImageLoadedProps extends React.HTMLAttributes<HTMLDivElement> {
   image: string | StaticImageData
 }
 
 export function ImageLoaded({ image, ...rest }: ImageLoadedProps) {
   const [loaded, setLoaded] = useState(false)
+  const src = typeof image === "string" ? image : image.src
+
+  const alreadyLoaded = _cache.get(src)?.complete
 
   useEffect(() => {
-    const img = new Image()
-    const src = typeof image === "string" ? image : image.src
-    img.src = src
-    img.onload = () => setLoaded(true)
-  }, [image])
+    let img: HTMLImageElement
+    if (_cache.has(src)) {
+      img = _cache.get(src)!
+      if (img.complete) {
+        setLoaded(true)
+      } else {
+        img.addEventListener("load", () => setLoaded(true))
+      }
+    } else {
+      img = new Image()
+      img.src = src
+      img.addEventListener("load", () => setLoaded(true))
+      _cache.set(src, img)
+    }
+  }, [src])
 
-  return <div data-loaded={loaded} {...rest} />
+  return <div data-loaded={alreadyLoaded || loaded} {...rest} />
 }
diff --git a/src/app/conf/2025/components/navbar.tsx b/src/app/conf/2025/components/navbar.tsx
index 2edbacc0a0..61fb6b46d7 100644
--- a/src/app/conf/2025/components/navbar.tsx
+++ b/src/app/conf/2025/components/navbar.tsx
@@ -22,6 +22,7 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
   const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false)
 
   const handleDrawerClick = useCallback(() => {
+    // todo: block scrolling on body
     setMobileDrawerOpen(prev => !prev)
   }, [])
 
diff --git a/src/app/conf/2025/components/speaker-card.tsx b/src/app/conf/2025/components/speaker-card.tsx
new file mode 100644
index 0000000000..55f71f70a4
--- /dev/null
+++ b/src/app/conf/2025/components/speaker-card.tsx
@@ -0,0 +1,126 @@
+import clsx from "clsx"
+import Image from "next-image-export-optimizer"
+import type { StaticImageData } from "next/image"
+
+import TwitterXIcon from "@/icons/twitter.svg?svgr"
+import LinkedInIcon from "@/icons/linkedin.svg?svgr"
+import { eventsColors } from "../utils"
+
+import { Anchor } from "../../_design-system/anchor"
+import { Tag } from "../../_design-system/tag"
+import { SchedSpeaker } from "../../2023/types"
+import {
+  SocialMediaIcon,
+  SocialMediaIconServiceType,
+} from "../../_components/speakers/social-media"
+
+export interface SpeakerCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  imageUrl?: string | StaticImageData
+  tags?: string[]
+  isReturning?: boolean
+  stripes?: string
+  speaker: SchedSpeaker
+  year: string
+}
+
+function Stripes({ mask }: { mask?: string }) {
+  return (
+    <div
+      role="presentation"
+      className="pointer-events-none absolute inset-0 inset-y-[-20px]"
+      style={{
+        maskImage: mask,
+        WebkitMaskImage: mask,
+      }}
+    >
+      <div className="absolute inset-0 bg-gradient-to-b from-sec-dark/50 to-sec-light/50" />
+    </div>
+  )
+}
+
+export function SpeakerCard({
+  imageUrl,
+  tags = [],
+  className,
+  speaker,
+  year,
+  ...props
+}: SpeakerCardProps) {
+  return (
+    <article
+      className={clsx(
+        "relative flex flex-col overflow-hidden border border-neu-300",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex gap-6 p-6">
+        {imageUrl && (
+          <div className="relative aspect-square size-[236px] shrink-0 overflow-hidden">
+            <div className="absolute inset-0 z-[1] bg-sec-light opacity-90 mix-blend-multiply" />
+            <Image
+              src={imageUrl}
+              alt=""
+              width={312}
+              height={312}
+              className="size-full object-cover saturate-[0.1] transition-transform"
+            />
+            <Stripes
+              // TODO!
+              mask={""}
+            />
+          </div>
+        )}
+        <div className="flex flex-1 flex-col gap-2">
+          <div className="flex flex-col gap-1">
+            <h3 className="typography-body-lg">{speaker.name}</h3>
+            <p className="text-neu-700 typography-body-sm">
+              {[speaker.position, speaker.company].filter(Boolean).join(", ")}
+            </p>
+          </div>
+          {speaker.about && (
+            <p className="text-neu-700 typography-body-sm">{speaker.about}</p>
+          )}
+          {/* TODO: We'll have to collect it when fetching all sessions. */}
+          {tags.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {tags.map(tag => (
+                <Tag color={eventsColors[tag] || "hsl(var(--color-sec-base))"}>
+                  {tag}
+                </Tag>
+              ))}
+            </div>
+          )}
+          <div className="flex gap-4">
+            {speaker.socialurls?.length ? (
+              <div className="mt-0 text-[#765e5e]">
+                <div className="flex space-x-2">
+                  {speaker.socialurls.map(social => (
+                    <a
+                      key={social.url}
+                      href={social.url}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="flex items-center text-blk"
+                    >
+                      <SocialMediaIcon
+                        service={
+                          social.service.toLowerCase() as SocialMediaIconServiceType
+                        }
+                      />
+                    </a>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+      <Anchor
+        href={`/conf/${year}/speakers/${speaker.username}`}
+        className="absolute inset-0"
+        title={`See ${speaker.name.split(" ")[0]}'s sessions`}
+      />
+    </article>
+  )
+}
diff --git a/src/app/conf/2025/layout.tsx b/src/app/conf/2025/layout.tsx
index bdd77b4c68..4bb4bfeb77 100644
--- a/src/app/conf/2025/layout.tsx
+++ b/src/app/conf/2025/layout.tsx
@@ -40,9 +40,9 @@ export default function Layout({
       <Navbar
         year={2025}
         links={[
-          { children: "Sponsor", href: "/conf/2025/#sponsors" },
-          { children: "Submit to Speak", href: "/conf/2025/#speakers" },
-          { children: "Register", href: "/conf/2025/#register" },
+          { children: "Schedule", href: "/conf/2025/schedule" },
+          { children: "Speakers", href: "/conf/2025/speakers" },
+          { children: "Sponsors", href: "/conf/2025/#sponsors" },
           { children: "Recap", href: "/conf/2024" },
           { children: "Resources", href: "/conf/2025/resources" },
           { children: "FAQ", href: "/conf/2025/#faq" },
diff --git a/src/app/conf/2025/page.tsx b/src/app/conf/2025/page.tsx
index 8e2371b46e..ffbe76fcd1 100644
--- a/src/app/conf/2025/page.tsx
+++ b/src/app/conf/2025/page.tsx
@@ -4,7 +4,7 @@ import { Venue } from "./venue"
 import { FAQ } from "./faq"
 import { CallForProposals } from "./components/call-for-proposals"
 import { RegisterToday } from "./components/register-today"
-import { Hero } from "./components/hero"
+import { Hero, HeroDateAndLocation } from "./components/hero"
 import WhatToExpectSection from "./components/what-to-expect"
 import TopMindsSection from "./components/top-minds"
 import { GetYourTicket } from "./components/get-your-ticket"
@@ -16,6 +16,7 @@ import { CtaCardSection } from "./components/cta-card-section"
 import { Button } from "../_design-system/button"
 import { GET_TICKETS_LINK } from "./links"
 import { GalleryStrip } from "./components/gallery-strip"
+import { HeroImage } from "./components/hero/hero-image"
 
 export const metadata: Metadata = {
   title: "GraphQLConf 2025 — Sept 08-10",
@@ -30,7 +31,12 @@ const HERO_MARQUEE_ITEMS = [
 export default function Page() {
   return (
     <main className="gql-all-anchors-focusable">
-      <Hero />
+      <Hero year="2025" bottom={<HeroImage />}>
+        <HeroDateAndLocation />
+        <Button className="md:w-fit" href={GET_TICKETS_LINK}>
+          Get your tickets
+        </Button>
+      </Hero>
       <div className="gql-conf-container gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
         <MarqueeRows
           variant="primary"
diff --git a/src/app/conf/2025/pixelarticons/caret-down.svg b/src/app/conf/2025/pixelarticons/caret-down.svg
new file mode 100644
index 0000000000..84e4fc4392
--- /dev/null
+++ b/src/app/conf/2025/pixelarticons/caret-down.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.66669 8H5.66669V10H7.66669V12H9.66669V14H11.6667V16H13.6667V14H15.6667V12H17.6667V10H19.6667V8H17.6667V10H15.6667V12H13.6667V14H11.6667V12H9.66669V10H7.66669V8Z" fill="#A0A88A"/>
+</svg>
diff --git a/src/app/conf/2025/schedule/[id]/page.tsx b/src/app/conf/2025/schedule/[id]/page.tsx
new file mode 100644
index 0000000000..c130a76141
--- /dev/null
+++ b/src/app/conf/2025/schedule/[id]/page.tsx
@@ -0,0 +1,206 @@
+import { notFound } from "next/navigation"
+import { Metadata } from "next"
+import clsx from "clsx"
+import { format, parseISO } from "date-fns"
+
+import { metadata as layoutMetadata } from "@/app/conf/2023/layout"
+import { Avatar } from "../../../_components/speakers/avatar"
+import {
+  SocialMediaIcon,
+  SocialMediaIconServiceType,
+} from "../../../_components/speakers/social-media"
+import { speakers, schedule } from "../../_data"
+import { ScheduleSession } from "../../../2023/types"
+
+import { SessionVideo } from "./session-video"
+import { NavbarPlaceholder } from "../../components/navbar"
+import { BackLink } from "../_components/back-link"
+import { Tag } from "@/app/conf/_design-system/tag"
+import { eventsColors } from "../../utils"
+import { PinIcon } from "../../pixelarticons/pin-icon"
+import { CalendarIcon } from "../../pixelarticons/calendar-icon"
+import { SpeakerCard } from "../../components/speaker-card"
+import { Anchor } from "@/app/conf/_design-system/anchor"
+
+function getEventTitle(event: ScheduleSession, speakers: string[]): string {
+  let { name } = event
+
+  if (!speakers) {
+    return name
+  }
+
+  speakers?.forEach(speaker => {
+    const speakerInTitle = name.indexOf(`- ${speaker.replace("ı", "i")}`)
+    if (speakerInTitle > -1) {
+      name = name.slice(0, speakerInTitle)
+    }
+  })
+
+  return name
+}
+
+type SessionProps = { params: { id: string } }
+
+export function generateMetadata({ params }: SessionProps): Metadata {
+  const event = schedule.find(s => s.id === params.id)!
+
+  const keywords = [
+    event.event_type,
+    event.audience,
+    event.event_subtype,
+    ...(event.speakers || []).map(s => s.name),
+  ].filter(Boolean)
+
+  return {
+    title: event.name,
+    description: event.description,
+    keywords: [...layoutMetadata.keywords, ...keywords],
+    openGraph: {
+      images: `/img/__og-image/2024/${event.id}.png`,
+    },
+  }
+}
+
+export function generateStaticParams() {
+  return schedule.filter(s => s.id).map(s => ({ id: s.id }))
+}
+
+export default function SessionPage({ params }: SessionProps) {
+  const event = schedule.find(s => s.id === params.id)
+  if (!event) {
+    notFound()
+  }
+
+  // @ts-expect-error -- fixme
+  event.speakers = (event.speakers || []).map(speaker =>
+    speakers.find(s => s.username === speaker.username),
+  )
+
+  const eventTitle = getEventTitle(
+    event,
+    event.speakers!.map(s => s.name),
+  )
+
+  return (
+    <main className="gql-all-anchors-focusable">
+      <NavbarPlaceholder className="top-0 bg-neu-0 before:bg-white/40 dark:bg-neu-0 dark:before:bg-blk/30" />
+      <div className="gql-conf-container gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
+        <div className="mx-auto max-w-[1088px] py-10">
+          <section className="mx-auto min-h-[80vh] flex-col justify-center px-2 sm:px-0 lg:justify-between">
+            <SessionHeader event={event} eventTitle={eventTitle} year="2025" />
+            <SessionVideo event={event} eventTitle={eventTitle} />
+            <SessionSpeakers event={event} />
+            <p className="typography-body-lg py-8 lg:py-10">
+              {event.description}
+            </p>
+
+            <div className="py-8">
+              {event.files?.map(({ path }) => (
+                <div key={path}>
+                  <a href={path} target="_blank" rel="noreferrer">
+                    View Full PDF{" "}
+                    <span className="font-sans text-2xl font-light">↗</span>
+                  </a>
+                  <iframe src={path} className="aspect-video size-full" />
+                </div>
+              ))}
+            </div>
+          </section>
+        </div>
+      </div>
+    </main>
+  )
+}
+
+function SessionTags({ session }: { session: ScheduleSession }) {
+  const eventType = session.event_type.endsWith("s")
+    ? session.event_type.slice(0, -1)
+    : session.event_type
+
+  return (
+    <div className="flex flex-wrap gap-3">
+      {eventType && (
+        <Tag color={eventsColors[session.event_type]}>{eventType}</Tag>
+      )}
+      {session.audience && (
+        <Tag
+          color={eventsColors[session.audience] || "hsl(var(--color-neu-700))"}
+        >
+          {session.audience}
+        </Tag>
+      )}
+      {session.event_subtype && (
+        <Tag
+          color={
+            eventsColors[session.event_subtype] || "hsl(var(--color-sec-base))"
+          }
+        >
+          {session.event_subtype}
+        </Tag>
+      )}
+    </div>
+  )
+}
+
+function SessionHeader({
+  event,
+  eventTitle,
+  year,
+}: {
+  event: ScheduleSession
+  eventTitle: string | null
+  year: number | `${number}`
+}) {
+  const speakers = event.speakers || []
+
+  return (
+    <header>
+      <BackLink year="2025" kind="schedule" />
+      <p
+        className={clsx(
+          "mt-8 text-neu-700",
+          speakers.length >= 4 ? "typography-body-lg" : "typography-h3",
+        )}
+      >
+        {speakers.map((s, i) => (
+          <>
+            <Anchor
+              key={s.username}
+              href={`/conf/${year}/speakers/${s.username}`}
+              className="decoration-neu-500 hover:underline dark:decoration-neu-100"
+            >
+              {s.name}
+            </Anchor>
+            {i !== speakers.length - 1 && <span>, </span>}
+          </>
+        ))}
+      </p>
+      <h1 className="typography-h2 mb-6 mt-3">{eventTitle}</h1>
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <div className="typography-body-md flex flex-col gap-4 md:flex-row md:gap-6">
+          <div className="flex items-center gap-2">
+            <CalendarIcon className="size-5 text-sec-darker dark:text-sec-light/90 sm:size-6" />
+            <time dateTime="2025-09-08">September 08</time>
+            <span>-</span>
+            <time dateTime="2025-09-10">10, 2025</time>
+          </div>
+          <div className="flex items-center gap-2">
+            <PinIcon className="size-5 text-sec-darker dark:text-sec-light/90 sm:size-6" />
+            <span>{event.venue}</span>
+          </div>
+        </div>
+        <SessionTags session={event} />
+      </div>
+    </header>
+  )
+}
+
+function SessionSpeakers({ event }: { event: ScheduleSession }) {
+  return (
+    <div className="mt-8 flex flex-col flex-wrap gap-5 lg:flex-row">
+      {event.speakers!.map(speaker => (
+        <SpeakerCard key={speaker.username} speaker={speaker} year="2025" />
+      ))}
+    </div>
+  )
+}
diff --git a/src/app/conf/2025/schedule/[id]/session-video.tsx b/src/app/conf/2025/schedule/[id]/session-video.tsx
new file mode 100644
index 0000000000..0575f43432
--- /dev/null
+++ b/src/app/conf/2025/schedule/[id]/session-video.tsx
@@ -0,0 +1,37 @@
+import { findBestMatch } from "string-similarity"
+import { videos } from "../../_videos"
+import { ScheduleSession } from "@/app/conf/2023/types"
+
+export interface SessionVideoProps {
+  eventTitle: string
+  event: ScheduleSession
+}
+
+export function SessionVideo({ eventTitle, event }: SessionVideoProps) {
+  const result = findBestMatch(
+    `${eventTitle} ${event.speakers!.map(e => e.name).join(" ")}`,
+    videos.map(e => e.title),
+  )
+
+  if (result.ratings[result.bestMatchIndex].rating < 0.17) {
+    return null
+  }
+
+  const recordingTitle = result.bestMatch
+
+  const videoId = videos.find(e => e.title === recordingTitle.target)?.id
+
+  if (!videoId) {
+    throw new Error(`Video "${recordingTitle.target}" not found`)
+  }
+
+  return (
+    <iframe
+      className="mx-auto mt-6 aspect-video w-full"
+      src={`https://youtube.com/embed/${videoId}`}
+      title={recordingTitle.target}
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      allowFullScreen
+    />
+  )
+}
diff --git a/src/app/conf/2025/schedule/_components/back-link.tsx b/src/app/conf/2025/schedule/_components/back-link.tsx
new file mode 100644
index 0000000000..5313e30a0a
--- /dev/null
+++ b/src/app/conf/2025/schedule/_components/back-link.tsx
@@ -0,0 +1,26 @@
+import NextLink from "next/link"
+import ArrowDownIcon from "../../pixelarticons/arrow-down.svg?svgr"
+
+export function BackLink({
+  year,
+  kind,
+}: {
+  year: "2025"
+  kind: "speakers" | "sessions" | "schedule"
+}) {
+  return (
+    <NextLink
+      href={`/conf/${year}/${kind}`}
+      className="group -m-2 inline-flex cursor-pointer items-center gap-2 p-2 text-sec-darker transition-all typography-menu [text-box:trim-both_cap_alphabetic] hover:underline hover:underline-offset-4 dark:text-neu-700"
+    >
+      <div className="group-hover:animate-arrow-left group-focus:animate-arrow-left [--arrow-left-x:-1px]">
+        <ArrowDownIcon className="inline-block size-4 translate-y-[-.5px] rotate-90" />
+      </div>
+      Back to {capitalize(kind)}
+    </NextLink>
+  )
+}
+
+function capitalize(str: string) {
+  return str.substring(0, 1).toUpperCase() + str.substring(1).toLowerCase()
+}
diff --git a/src/app/conf/2025/schedule/_components/filter-categories.ts b/src/app/conf/2025/schedule/_components/filter-categories.ts
new file mode 100644
index 0000000000..2d055bb872
--- /dev/null
+++ b/src/app/conf/2025/schedule/_components/filter-categories.ts
@@ -0,0 +1,75 @@
+import { CategoryName } from "./session-list"
+
+export const filterCategories2024: {
+  name: CategoryName
+  options: string[]
+}[] = [
+  {
+    name: "Audience",
+    options: ["Beginner", "Intermediate", "Advanced"],
+  },
+  {
+    name: "Talk category",
+    options: [
+      "Keynote Sessions",
+      "API Platform",
+      "Federation and Composite Schemas",
+      "GraphQL Clients",
+      "Backend",
+      "Defies Categorization",
+      "Developer Experience",
+      "GraphQL in Production",
+      "GraphQL Security",
+      "GraphQL Spec",
+      "Scaling",
+    ],
+  },
+  {
+    name: "Event type",
+    options: [
+      "Workshops",
+      "Breaks & Special Events",
+      "Keynote Sessions",
+      "Sponsor Showcase",
+      "Session Presentations",
+      "Lightning Talks",
+    ],
+  },
+]
+
+export const filterCategories2023: {
+  name: CategoryName
+  options: string[]
+}[] = [
+  {
+    name: "Audience",
+    options: ["Beginner", "Intermediate", "Advanced"],
+  },
+  {
+    name: "Talk category",
+    options: [
+      "Beyond Javascript",
+      "Spec Fusion",
+      "Platform and Backend",
+      "GraphQL and Data",
+      "GraphQL Security",
+      "GraphQL in Production",
+      "GraphQL Clients",
+      "GraphQL Core",
+      "Scaling",
+      "Emerging Community Trends",
+    ],
+  },
+  {
+    name: "Event type",
+    options: [
+      "Workshops",
+      "Unconference",
+      "Keynote Sessions",
+      "Sponsor Showcase",
+      "Session Presentations",
+      "Lightning Talks",
+      "Events & Experiences",
+    ],
+  },
+]
diff --git a/src/app/conf/2025/schedule/_components/filters.tsx b/src/app/conf/2025/schedule/_components/filters.tsx
new file mode 100644
index 0000000000..50732f380f
--- /dev/null
+++ b/src/app/conf/2025/schedule/_components/filters.tsx
@@ -0,0 +1,230 @@
+import clsx from "clsx"
+import { useState } from "react"
+import { Combobox } from "@headlessui/react"
+
+import { Tag } from "@/app/conf/_design-system/tag"
+import { Button } from "@/app/conf/_design-system/button"
+
+import CloseIcon from "@/app/conf/2025/pixelarticons/close.svg?svgr"
+import CaretDownIcon from "@/app/conf/2025/pixelarticons/caret-down.svg?svgr"
+import { eventsColors } from "../../utils"
+type FiltersProps = {
+  categories: { name: string; options: string[] }[]
+  filterState: Record<string, string[]>
+  onFilterChange: (category: string, newSelectedOptions: string[]) => void
+}
+
+export function Filters({
+  categories,
+  filterState,
+  onFilterChange,
+}: FiltersProps) {
+  return (
+    <div className="flex flex-wrap justify-stretch gap-x-2 gap-y-4 pb-10">
+      {categories.map(category => (
+        <FiltersCombobox
+          key={category.name}
+          label={category.name}
+          options={category.options}
+          value={filterState[category.name] || []}
+          onChange={newSelectedOptions => {
+            onFilterChange(category.name, newSelectedOptions)
+          }}
+          placeholder={`Any ${category.name.toLowerCase()}`}
+          className="flex-1"
+        />
+      ))}
+    </div>
+  )
+}
+
+export function ResetFiltersButton({
+  onReset,
+  className,
+  filters,
+}: {
+  filters: Record<string, string[]>
+  onReset: () => void
+  className?: string
+}) {
+  const hasFilters = Object.values(filters).flat().length > 0
+
+  return (
+    <Button
+      variant="tertiary"
+      title="Reset filters"
+      onClick={onReset}
+      disabled={!hasFilters}
+      className={clsx(
+        "h-fit items-center gap-x-2 bg-neu-100 !p-2 text-neu-700 transition-opacity hover:bg-neu-200/80 hover:text-neu-900 disabled:opacity-0",
+        className,
+      )}
+    >
+      Clear filters
+      <CloseIcon className="inline-block size-4" />
+    </Button>
+  )
+}
+
+interface FiltersComboboxProps {
+  label: string
+  options: string[]
+  value: string[]
+  onChange: (newSelectedOptions: string[]) => void
+  placeholder: string
+  className?: string
+}
+function FiltersCombobox({
+  label,
+  options,
+  value,
+  onChange,
+  placeholder,
+  className,
+}: FiltersComboboxProps) {
+  const [query, setQuery] = useState("")
+
+  const filteredOptions =
+    query === ""
+      ? options
+      : options.filter(option =>
+          option.toLowerCase().includes(query.toLowerCase()),
+        )
+
+  return (
+    <Combobox multiple nullable value={value} onChange={onChange}>
+      <div className={clsx("flex flex-col", className)}>
+        {label && (
+          <Combobox.Label className="mb-1 block font-mono font-medium uppercase text-neu-900 typography-menu">
+            {label}
+          </Combobox.Label>
+        )}
+        <label className="relative w-full border border-neu-500 bg-neu-0 p-2 focus-within:outline-none focus-within:ring focus-within:ring-neu-300 dark:focus-within:ring-neu-200">
+          <Combobox.Input
+            value={query}
+            onChange={e => setQuery(e.target.value)}
+            className={clsx(
+              "bg-transparent leading-none text-neu-800 !outline-offset-0 typography-body-sm [text-box:trim-both_cap_alphabetic] placeholder:text-neu-600 focus:outline-none max-lg:typography-body-md",
+            )}
+            placeholder={placeholder}
+            autoComplete="true"
+          />
+          <Combobox.Button
+            className={clsx(
+              "absolute inset-y-0 right-0 flex items-center px-2 focus:outline-none",
+            )}
+          >
+            <CaretDownIcon
+              className="ui-open:rotate-180 size-5 text-neu-400 transition-transform duration-150 group-hover:text-neu-500"
+              aria-hidden="true"
+            />
+          </Combobox.Button>
+          {value.length > 0 && (
+            <div className="inset-y-0 left-0 z-[1] mt-1 flex items-center overflow-x-auto pr-8">
+              <div className="flex flex-wrap items-center gap-1">
+                {value.map(item => (
+                  <Tag
+                    key={item}
+                    color={eventsColors[item] || "hsl(var(--color-neu-400))"}
+                  >
+                    {item}
+                  </Tag>
+                ))}
+              </div>
+            </div>
+          )}
+        </label>
+
+        <div className="relative">
+          <Combobox.Options
+            className={clsx(
+              "absolute z-10 -mt-px max-h-60 w-full overflow-auto border border-neu-500 bg-neu-0 p-1 text-base",
+            )}
+          >
+            {filteredOptions.map(option => (
+              <Combobox.Option key={option} value={option}>
+                {({ active, selected }) => (
+                  <FilterComboboxOption
+                    active={active}
+                    selected={selected}
+                    option={option}
+                  />
+                )}
+              </Combobox.Option>
+            ))}
+          </Combobox.Options>
+        </div>
+      </div>
+    </Combobox>
+  )
+}
+
+interface CheckboxIconProps extends React.SVGProps<SVGSVGElement> {
+  checked: boolean
+}
+function CheckboxIcon({ checked, ...rest }: CheckboxIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      {...rest}
+    >
+      {!checked ? (
+        <>
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M2.5 2.5H4.16667H15.8333H17.5V17.5H15.8333H4.16667H2.5V2.5ZM15.8333 15.8333V4.16667H4.16667V15.8333H15.8333Z"
+          />
+        </>
+      ) : (
+        <g className="[&>path]:fill-neu-0">
+          <rect x="2" y="3" width="15" height="15" />
+          <path d="M6 10.3333H7.66667V12H6V10.3333Z" />
+          <path d="M7.66667 12H9.33333V13.6667H7.66667V12Z" />
+          <path d="M9.33333 10.3333H11V12H9.33333V10.3333Z" />
+          <path d="M11 8.66667H12.6667V10.3333H11V8.66667Z" />
+          <path d="M12.6667 7H14.3333V8.66667H12.6667V7Z" />
+        </g>
+      )}
+    </svg>
+  )
+}
+
+function FilterComboboxOption({
+  active,
+  selected,
+  option,
+}: {
+  active: boolean
+  selected: boolean
+  option: string
+}) {
+  return (
+    <div
+      className={clsx(
+        "relative flex cursor-default select-none items-center p-1 font-sans typography-body-sm",
+        active && "bg-neu-100 dark:bg-neu-50",
+      )}
+    >
+      <CheckboxIcon
+        className={clsx("size-5 shrink-0", active && "text-neu-700")}
+        checked={selected}
+      />
+      <div className="min-w-0 flex-1 overflow-hidden pl-1 [container-type:inline-size]">
+        <span
+          // eslint-disable-next-line tailwindcss/no-contradicting-classname
+          className={clsx(
+            "relative block w-fit min-w-full whitespace-nowrap pt-px transition-all [--delta-x:calc(-100%+100cqi)]",
+            active && "animate-show-overflow",
+          )}
+        >
+          {option}
+        </span>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/conf/2025/schedule/_components/schedule-list.tsx b/src/app/conf/2025/schedule/_components/schedule-list.tsx
new file mode 100644
index 0000000000..7ee1eff890
--- /dev/null
+++ b/src/app/conf/2025/schedule/_components/schedule-list.tsx
@@ -0,0 +1,226 @@
+"use client"
+
+import { format, parseISO, compareAsc } from "date-fns"
+import { ReactElement, useEffect, useState } from "react"
+
+import { Filters, ResetFiltersButton } from "./filters"
+import {
+  type ScheduleSession,
+  CategoryName,
+  ConcurrentSessions,
+  ScheduleSessionsByDay,
+} from "./session-list"
+import { ScheduleSessionCard } from "./schedule-session-card"
+
+function getSessionsByDay(
+  scheduleData: ScheduleSession[],
+  initialFilter:
+    | ((sessions: ScheduleSession[]) => ScheduleSession[])
+    | undefined,
+  filters: Record<CategoryName, string[]>,
+) {
+  const data = initialFilter ? initialFilter(scheduleData) : scheduleData
+  const filteredSortedSchedule = (data || []).sort((a, b) =>
+    compareAsc(new Date(a.event_start), new Date(b.event_start)),
+  )
+
+  const concurrentSessions: ConcurrentSessions = {}
+  filteredSortedSchedule.forEach(session => {
+    const audienceFilter = filters.Audience
+    const talkCategoryFilter = filters["Talk category"]
+    const eventTypeFilter = filters["Event type"]
+
+    let include = true
+    if (audienceFilter.length > 0) {
+      include = include && audienceFilter.includes((session as any).company)
+    }
+    if (talkCategoryFilter.length > 0) {
+      include = include && talkCategoryFilter.includes(session.event_type)
+    }
+    if (eventTypeFilter.length > 0) {
+      include = include && eventTypeFilter.includes(session.audience)
+    }
+
+    if (!include) {
+      return
+    }
+
+    if (!concurrentSessions[session.event_start]) {
+      concurrentSessions[session.event_start] = []
+    }
+    concurrentSessions[session.event_start].push(session)
+  })
+
+  const sessionsByDay: ScheduleSessionsByDay = {}
+  Object.entries(concurrentSessions).forEach(([date, sessions]) => {
+    const day = date.split(" ")[0]
+    if (!sessionsByDay[day]) {
+      sessionsByDay[day] = {}
+    }
+    sessionsByDay[day] = {
+      ...sessionsByDay[day],
+      [date]: sessions.sort((a, b) =>
+        (a?.venue ?? "").localeCompare(b?.venue ?? ""),
+      ),
+    }
+  })
+
+  return sessionsByDay
+}
+
+interface Props {
+  showEventType?: boolean
+  showFilter?: boolean
+  scheduleData: ScheduleSession[]
+  filterSchedule?: (sessions: ScheduleSession[]) => ScheduleSession[]
+  year: "2025" | "2024"
+  eventsColors: Record<string, string>
+  filterCategories: {
+    name: CategoryName
+    options: string[]
+  }[]
+}
+
+export function ScheduleList({
+  showEventType,
+  showFilter = true,
+  filterSchedule,
+  scheduleData,
+  year,
+  eventsColors,
+  filterCategories,
+}: Props): ReactElement {
+  const [filtersState, setFiltersState] = useState<
+    Record<CategoryName, string[]>
+  >({
+    Audience: [],
+    "Talk category": [],
+    "Event type": [],
+  })
+  const [sessionsState, setSessionState] = useState<ScheduleSessionsByDay>(
+    () => {
+      return getSessionsByDay(scheduleData, filterSchedule, filtersState)
+    },
+  )
+
+  useEffect(() => {
+    setSessionState(
+      getSessionsByDay(scheduleData, filterSchedule, filtersState),
+    )
+  }, [filtersState, scheduleData])
+
+  return (
+    <>
+      <div className="flex justify-between gap-1 max-lg:flex-col">
+        <BookmarkOnSched />
+        <ResetFiltersButton
+          filters={filtersState}
+          onReset={() =>
+            setFiltersState({
+              Audience: [],
+              "Talk category": [],
+              "Event type": [],
+            })
+          }
+        />
+      </div>
+      {showFilter && (
+        <Filters
+          categories={filterCategories}
+          filterState={filtersState}
+          onFilterChange={(category, newSelectedOptions) => {
+            setFiltersState(prev => ({
+              ...prev,
+              [category]: newSelectedOptions,
+            }))
+          }}
+        />
+      )}
+      {Object.entries(sessionsState).length === 0 ? (
+        <div className="typography-body-sm">
+          <h3 className="mb-5">No sessions found</h3>
+        </div>
+      ) : (
+        <>
+          <div className="mb-4 flex space-x-4">
+            {/* Skip registeration prior day for graphql conf 2024 */}
+            {Object.keys(sessionsState)
+              .slice(year === "2024" ? 1 : 0)
+              .map((date, index) => (
+                <a
+                  href={`#day-${(year === "2024" ? 1 : 0) + index + 1}`}
+                  key={date}
+                  className={"typography-link"}
+                >
+                  Day {index + 1}
+                </a>
+              ))}
+          </div>
+          {Object.entries(sessionsState).map(
+            ([date, concurrentSessionsGroup], index) => (
+              <div
+                key={date}
+                className="bg-neu-200 pt-px typography-body-sm dark:bg-neu-50"
+              >
+                <h3
+                  className="bg-neu-50 py-4 dark:bg-neu-0 lg:mb-px"
+                  id={`day-${index + 1}`}
+                >
+                  {format(parseISO(date), "EEEE, MMMM d")}
+                </h3>
+                {Object.entries(concurrentSessionsGroup).map(
+                  ([sessionDate, sessions]) => (
+                    <div key={`concurrent sessions on ${sessionDate}`}>
+                      <div className="mb-px mr-px flex flex-col max-lg:ml-px lg:flex-row">
+                        <div className="relative border-neu-50 bg-neu-50 dark:bg-neu-0 max-lg:-mx-px max-lg:mt-px max-lg:border-x lg:mr-px">
+                          <span className="mt-3 inline-block w-20 whitespace-nowrap pb-0.5 pl-4 typography-body-sm lg:mr-6 lg:w-28 lg:pb-4 lg:pl-0">
+                            {format(parseISO(sessionDate), "hh:mmaaaa 'PDT'")}
+                          </span>
+                        </div>
+                        <div className="relative flex w-full flex-col items-end lg:flex-row lg:items-start lg:gap-px">
+                          {sessions.map(session => (
+                            <ScheduleSessionCard
+                              key={session.id}
+                              session={session}
+                              showEventType={showEventType}
+                              year={year}
+                              eventsColors={eventsColors}
+                            />
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  ),
+                )}
+              </div>
+            ),
+          )}
+        </>
+      )}
+    </>
+  )
+}
+
+function BookmarkOnSched() {
+  return (
+    <a
+      href="https://graphqlconf2024.sched.com"
+      target="_blank"
+      rel="noreferrer"
+      className="mb-8 block w-fit decoration-neu-400 typography-link"
+    >
+      Bookmark sessions & plan your days on Sched
+      <svg
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        className="m-1 mb-2 inline-block size-4"
+      >
+        <path
+          d="M21 11V3h-8v2h4v2h-2v2h-2v2h-2v2H9v2h2v-2h2v-2h2V9h2V7h2v4h2zM11 5H3v16h16v-8h-2v6H5V7h6V5z"
+          fill="currentColor"
+        />
+      </svg>
+    </a>
+  )
+}
diff --git a/src/app/conf/2025/schedule/_components/schedule-session-card.tsx b/src/app/conf/2025/schedule/_components/schedule-session-card.tsx
new file mode 100644
index 0000000000..7a4684015e
--- /dev/null
+++ b/src/app/conf/2025/schedule/_components/schedule-session-card.tsx
@@ -0,0 +1,78 @@
+import { getEventTitle } from "@/app/conf/2023/utils"
+import { SchedSpeaker } from "@/app/conf/2023/types"
+
+import { PinIcon } from "../../pixelarticons/pin-icon"
+import { Tag } from "@/app/conf/_design-system/tag"
+
+import { type ScheduleSession } from "./session-list"
+
+function isString(x: any) {
+  return Object.prototype.toString.call(x) === "[object String]"
+}
+
+export function ScheduleSessionCard({
+  session,
+  showEventType,
+  year,
+  eventsColors,
+}: {
+  session: ScheduleSession
+  showEventType: boolean | undefined
+  year: "2025" | "2024"
+  eventsColors: Record<string, string>
+}) {
+  const eventType = session.event_type.endsWith("s")
+    ? session.event_type.slice(0, -1)
+    : session.event_type
+
+  const speakers = session.speakers
+  const formattedSpeakers = isString(speakers || [])
+    ? (speakers as string)?.split(",")
+    : (speakers as SchedSpeaker[])?.map(e => e.name)
+
+  const eventTitle = getEventTitle(
+    // @ts-expect-error fixme
+    session,
+    formattedSpeakers,
+  )
+
+  const eventColor = eventsColors[session.event_type]
+
+  return session.event_type === "Breaks" ? (
+    <div className="flex size-full items-center bg-neu-0 px-4 py-2 font-normal">
+      {showEventType ? eventType + " / " : ""}
+      {eventTitle}
+    </div>
+  ) : (
+    <a
+      id={`session-${session.id}`}
+      data-tooltip-id="my-tooltip"
+      href={`/conf/${year}/schedule/${session.id}?name=${session.name}`}
+      className="group relative size-full bg-neu-0 p-4 font-normal no-underline ring-neu-400 hover:bg-neu-0/90 hover:ring-1 focus-visible:z-[1] dark:ring-neu-100 dark:hover:bg-neu-0/80 max-lg:mt-px"
+    >
+      <span className="flex h-full flex-col justify-start">
+        {eventColor && (
+          <Tag className="mb-3" color={eventColor}>
+            {eventType}
+          </Tag>
+        )}
+        <span className="flex h-full flex-col justify-between gap-y-2">
+          {showEventType ? eventType + " / " : ""}
+          <span className="typography-body-md">{eventTitle}</span>
+          <span className="flex flex-col">
+            {(speakers?.length || 0) > 0 && (
+              <span className="typography-body-sm">
+                {/* todo: link to speakers (anchor background on z-index above the main link layer) */}
+                {formattedSpeakers.join(", ")}
+              </span>
+            )}
+            <span className="mt-2 flex items-center gap-0.5 typography-body-xs">
+              <PinIcon className="size-4 text-pri-base" />
+              {session.venue}
+            </span>
+          </span>
+        </span>
+      </span>
+    </a>
+  )
+}
diff --git a/src/app/conf/2025/schedule/_components/session-list.tsx b/src/app/conf/2025/schedule/_components/session-list.tsx
new file mode 100644
index 0000000000..971cb9ade0
--- /dev/null
+++ b/src/app/conf/2025/schedule/_components/session-list.tsx
@@ -0,0 +1,274 @@
+"use client"
+
+import { compareAsc } from "date-fns"
+import { clsx } from "clsx"
+import NextLink from "next/link"
+import { ComponentProps, ReactElement, useEffect, useState } from "react"
+
+import { SchedSpeaker } from "@/app/conf/2023/types"
+
+import { Filters } from "./filters"
+
+export interface ScheduleSession {
+  id: string
+  audience: string
+  description: string
+  event_end: string
+  event_start: string
+  event_subtype: string
+  event_type: string
+  name: string
+  venue?: string
+  speakers?: SchedSpeaker[] | string
+  files?: { name: string; path: string }[]
+}
+
+export interface ConcurrentSessions {
+  [date: string]: ScheduleSession[]
+}
+
+export interface ScheduleSessionsByDay {
+  [date: string]: ConcurrentSessions
+}
+
+export type CategoryName = "Audience" | "Talk category" | "Event type"
+
+function getSessionsByDay(
+  scheduleData: ScheduleSession[],
+  initialFilter:
+    | ((sessions: ScheduleSession[]) => ScheduleSession[])
+    | undefined,
+  filters: Record<CategoryName, string[]>,
+) {
+  const data = initialFilter ? initialFilter(scheduleData) : scheduleData
+  const filteredSortedSchedule = (data || []).sort((a, b) =>
+    compareAsc(new Date(a.event_start), new Date(b.event_start)),
+  )
+
+  const concurrentSessions: ConcurrentSessions = {}
+  filteredSortedSchedule.forEach(session => {
+    const audienceFilter = filters.Audience
+    const talkCategoryFilter = filters["Talk category"]
+    const eventTypeFilter = filters["Event type"]
+
+    let include = true
+    if (audienceFilter.length > 0) {
+      include = include && audienceFilter.includes(session.audience)
+    }
+    if (talkCategoryFilter.length > 0) {
+      include = include && talkCategoryFilter.includes(session.event_subtype)
+    }
+    if (eventTypeFilter.length > 0) {
+      include = include && eventTypeFilter.includes(session.event_type)
+    }
+
+    if (!include) {
+      return
+    }
+
+    if (!concurrentSessions[session.event_start]) {
+      concurrentSessions[session.event_start] = []
+    }
+    concurrentSessions[session.event_start].push(session)
+  })
+
+  const sessionsByDay: ScheduleSessionsByDay = {}
+  Object.entries(concurrentSessions).forEach(([date, sessions]) => {
+    const day = date.split(" ")[0]
+    if (!sessionsByDay[day]) {
+      sessionsByDay[day] = {}
+    }
+    sessionsByDay[day] = {
+      ...sessionsByDay[day],
+      [date]: sessions.sort((a, b) =>
+        (a?.venue ?? "").localeCompare(b?.venue ?? ""),
+      ),
+    }
+  })
+
+  return sessionsByDay
+}
+
+interface Props {
+  showFilter?: boolean
+  scheduleData: ScheduleSession[]
+  filterSchedule?: (sessions: ScheduleSession[]) => ScheduleSession[]
+  year: "2023" | "2024"
+  filterCategories: {
+    name: CategoryName
+    options: string[]
+  }[]
+  eventsColors: Record<string, string>
+  minimalVersion?: boolean
+}
+
+export function SessionList({
+  showFilter = true,
+  filterSchedule,
+  scheduleData,
+  year,
+  filterCategories,
+  eventsColors,
+  minimalVersion,
+}: Props): ReactElement {
+  const [filtersState, setFiltersState] = useState<
+    Record<CategoryName, string[]>
+  >({
+    Audience: [],
+    "Talk category": [],
+    "Event type": [],
+  })
+  const [sessionsState, setSessionState] = useState<ScheduleSessionsByDay>(() =>
+    getSessionsByDay(scheduleData, filterSchedule, filtersState),
+  )
+
+  useEffect(() => {
+    setSessionState(
+      getSessionsByDay(scheduleData, filterSchedule, filtersState),
+    )
+  }, [filtersState, scheduleData])
+
+  return (
+    <div>
+      {showFilter && (
+        <Filters
+          categories={filterCategories}
+          filterState={filtersState}
+          onFilterChange={(category, newSelectedOptions) => {
+            setFiltersState(prev => ({
+              ...prev,
+              [category]: newSelectedOptions,
+            }))
+          }}
+        />
+      )}
+      {Object.entries(sessionsState).length === 0 ? (
+        <div className="text-sm text-gray-800">
+          <h3 className="mb-5">No sessions found</h3>
+        </div>
+      ) : (
+        <div className="not-prose grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {Object.entries(sessionsState).flatMap(
+            ([, concurrentSessionsGroup]) =>
+              Object.entries(concurrentSessionsGroup).flatMap(([, sessions]) =>
+                sessions.flatMap(session => {
+                  const speakers = session.speakers as SchedSpeaker[]
+
+                  const borderColor = eventsColors[session.event_type]
+
+                  return (
+                    <NextLink
+                      key={session.id}
+                      className={`${clsx(
+                        "flex flex-col overflow-hidden rounded-md text-current shadow-2xl hover:no-underline focus:no-underline",
+                      )} ${minimalVersion ? "bg-[#251f30]" : ""}`}
+                      href={
+                        minimalVersion
+                          ? `/conf/${year}/schedule/${session.id}`
+                          : `/conf/${year}/sessions/${session.id}`
+                      }
+                    >
+                      <div
+                        className={`${minimalVersion ? "hidden" : ""} relative flex justify-between bg-[#251F30] px-7 py-5 text-white`}
+                      >
+                        <div className="flex flex-col gap-2 text-sm opacity-100 transition-opacity duration-300 [*:hover>*>&]:opacity-0">
+                          {year !== "2024" && (
+                            <div className="flex gap-3">
+                              <div className="w-4 text-center font-mono">
+                                ▶
+                              </div>
+                              Recording
+                            </div>
+                          )}
+                          <div className="flex items-center gap-3">
+                            <ClockIcon className="size-4" />
+                            {(Number(new Date(session.event_end)) -
+                              Number(new Date(session.event_start))) /
+                              1000 /
+                              60}
+                            m
+                          </div>
+                        </div>
+                        <span className="font-sans text-lg leading-none">
+                          ↗
+                        </span>
+                        <div
+                          className={clsx(
+                            "absolute right-1/2 translate-x-1/2",
+                            "font-mono text-2xl leading-none",
+                            "size-12 opacity-0 transition-opacity duration-300",
+                            "rounded-full bg-white/30 pl-[18px] pt-2.5 [*:hover>*>&]:opacity-100",
+                          )}
+                        >
+                          ▶
+                        </div>
+                      </div>
+                      <div className="flex flex-col p-7">
+                        <span
+                          className="mb-3 flex items-center justify-center self-start rounded-3xl border px-3 py-1 text-sm text-white group-hover:no-underline"
+                          style={{
+                            backgroundColor: borderColor,
+                          }}
+                        >
+                          {session.event_type}
+                        </span>
+                        <b>{session.name}</b>
+                        <div className="flex flex-wrap gap-5">
+                          {speakers.map(s => (
+                            <div
+                              className="mt-5 flex items-center gap-5"
+                              key={s.username}
+                            >
+                              <img
+                                src={s.avatar}
+                                alt={`${s.name} avatar`}
+                                width="70"
+                                height="70"
+                                className="!m-0 shrink-0 rounded-full object-cover"
+                              />
+                              <div className="flex flex-col text-sm">
+                                <b>{s.name}</b>
+                                <span>{s.company}</span>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </NextLink>
+                  )
+                }),
+              ),
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+function ClockIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg
+      width="23"
+      height="23"
+      viewBox="0 0 23 23"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <circle
+        cx="11.489"
+        cy="11.6252"
+        r="8.53681"
+        stroke="white"
+        strokeWidth="1.65229"
+      />
+      <path
+        d="M11.5205 7.59863V12.0107L14.2194 14.1285"
+        stroke="white"
+        strokeWidth="1.65229"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
diff --git a/src/app/conf/2025/schedule/page.tsx b/src/app/conf/2025/schedule/page.tsx
new file mode 100644
index 0000000000..a446e36d35
--- /dev/null
+++ b/src/app/conf/2025/schedule/page.tsx
@@ -0,0 +1,38 @@
+import { Metadata } from "next"
+
+import { schedule } from "../_data"
+import { ScheduleList } from "./_components/schedule-list"
+import { filterCategories2024 } from "./_components/filter-categories"
+import { eventsColors } from "../utils"
+import { Button } from "../../_design-system/button"
+import { GET_TICKETS_LINK } from "../links"
+import { Hero } from "../components/hero"
+
+const year = "2025"
+
+export const metadata: Metadata = {
+  title: "Schedule",
+}
+
+export default function SchedulePage() {
+  return (
+    <main className="gql-all-anchors-focusable bg-neu-50 dark:bg-neu-0">
+      <Hero pageName="Schedule" year={year}>
+        <div className="mt-[18px] flex gap-4">
+          <Button href={GET_TICKETS_LINK}>Get your tickets</Button>
+          <Button variant="tertiary" href={`/conf/${year}/speakers`}>
+            See the speakers
+          </Button>
+        </div>
+      </Hero>
+      <div className="gql-conf-container gql-conf-section">
+        <ScheduleList
+          filterCategories={filterCategories2024}
+          eventsColors={eventsColors}
+          year={year}
+          scheduleData={schedule}
+        />
+      </div>
+    </main>
+  )
+}
diff --git a/src/app/conf/2025/speakers/[id]/page.tsx b/src/app/conf/2025/speakers/[id]/page.tsx
new file mode 100644
index 0000000000..cd623f356e
--- /dev/null
+++ b/src/app/conf/2025/speakers/[id]/page.tsx
@@ -0,0 +1,118 @@
+import { Metadata } from "next"
+import NextLink from "next/link"
+import React from "react"
+
+import { SessionList } from "@/app/conf/_components/schedule/session-list"
+import {
+  SocialMediaIcon,
+  SocialMediaIconServiceType,
+} from "@/app/conf/_components/speakers/social-media"
+import { Avatar } from "@/app/conf/_components/speakers/avatar"
+import { ChevronLeftIcon } from "@/icons"
+
+import { speakers, schedule } from "../../_data"
+import { metadata as layoutMetadata } from "../../layout"
+
+import { filterCategories2024 } from "@/app/conf/_components/schedule/filter-categories"
+import { eventsColors } from "../../utils"
+import { BackLink } from "../../schedule/_components/back-link"
+
+type SpeakerProps = { params: { id: string } }
+
+export function generateMetadata({ params }: SpeakerProps): Metadata {
+  const decodedId = decodeURIComponent(params.id)
+  const speaker = speakers.find(s => s.username === decodedId)!
+
+  const keywords = [speaker.name, speaker.company, speaker.position].filter(
+    Boolean,
+  ) as string[]
+
+  return {
+    title: speaker.name,
+    description: speaker.about,
+    keywords: [...layoutMetadata.keywords, ...keywords],
+    openGraph: {
+      images: `/img/__og-image/2024/${speaker.username}.png`,
+    },
+  }
+}
+
+export function generateStaticParams() {
+  return speakers.map(s => ({ id: s.username }))
+}
+
+export default function SpeakerPage({ params }: SpeakerProps) {
+  const decodedId = decodeURIComponent(params.id)
+  const speaker = speakers.find(s => s.username === decodedId)!
+
+  const s = schedule
+    .filter(s => s.speakers && s.speakers.some(s => s.username === decodedId))
+    .map(s => ({
+      ...s,
+      speakers: s.speakers!.map(
+        s => speakers.find(speaker => speaker.username === s.username)!,
+      ),
+    }))
+
+  return (
+    <div className="py-14">
+      <section className="container flex flex-col">
+        <div className="flex flex-col">
+          <BackLink year="2025" kind="speakers" />
+
+          <div className="max-w-5xl self-center">
+            <div className="flex flex-col justify-between gap-0 gap-y-5 pb-20 pt-14 max-lg:flex-col-reverse sm:flex-row sm:gap-10">
+              <div className="flex flex-col items-start gap-y-5">
+                <h1 className="conf-heading">{speaker.name}</h1>
+
+                <span className="text-2xl">
+                  <span className="underline">{speaker.company}</span>
+                  {speaker.company && ", "}
+                  {speaker.position}
+                </span>
+
+                <p className="text-lg">{speaker.about}</p>
+
+                {!!speaker.socialurls?.length && (
+                  <div className="mt-0">
+                    <div className="flex gap-5 lg:gap-2.5">
+                      {speaker.socialurls.map(social => (
+                        <a
+                          key={social.url}
+                          href={social.url}
+                          target="_blank"
+                          rel="noreferrer"
+                          className="flex w-max items-center"
+                        >
+                          <SocialMediaIcon
+                            service={
+                              social.service.toLowerCase() as SocialMediaIconServiceType
+                            }
+                          />
+                        </a>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <Avatar
+                className="size-[280px] self-center rounded-full sm:self-start"
+                avatar={speaker.avatar}
+                name={speaker.name}
+              />
+            </div>
+            <h1 className="conf-heading mb-10">Sessions</h1>
+            <SessionList
+              showFilter={false}
+              filterCategories={filterCategories2024}
+              eventsColors={eventsColors}
+              year="2024"
+              scheduleData={s}
+            />
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}
diff --git a/src/app/conf/2025/speakers/page.tsx b/src/app/conf/2025/speakers/page.tsx
new file mode 100644
index 0000000000..45cf70722f
--- /dev/null
+++ b/src/app/conf/2025/speakers/page.tsx
@@ -0,0 +1,35 @@
+import { Metadata } from "next"
+import { speakers } from "../_data"
+import { Speaker } from "@/app/conf/_components/speakers/speaker"
+import { Hero } from "../components/hero"
+import { Button } from "../../_design-system/button"
+import { GET_TICKETS_LINK } from "../links"
+
+export const metadata: Metadata = {
+  title: "Speakers",
+}
+
+export default function Page() {
+  const year = "2025"
+
+  return (
+    <main className="gql-all-anchors-focusable bg-neu-50 dark:bg-neu-0">
+      <Hero pageName="Speakers" year={year}>
+        <div className="mt-[18px] flex gap-4">
+          <Button href={GET_TICKETS_LINK}>Get your tickets</Button>
+          <Button variant="tertiary" href={`/conf/${year}/schedule`}>
+            See the schedule
+          </Button>
+        </div>
+      </Hero>
+
+      <div className="bg-white">
+        <section className="conf-block container flex flex-wrap justify-center gap-8 lg:justify-between">
+          {speakers.map(speaker => (
+            <Speaker key={speaker.username} {...speaker} year="2024" />
+          ))}
+        </section>
+      </div>
+    </main>
+  )
+}
diff --git a/src/app/conf/2025/utils.ts b/src/app/conf/2025/utils.ts
new file mode 100644
index 0000000000..caa0e76a5f
--- /dev/null
+++ b/src/app/conf/2025/utils.ts
@@ -0,0 +1,19 @@
+export const eventsColors: Record<string, string> = {
+  Breaks: "#7DAA5E",
+  "Keynote Sessions": "#7e66cc",
+  "Lightning Talks": "#1a5b77",
+  "Session Presentations": "#5c2e75",
+  Workshops: "#4b5fc0",
+  Unconference: "#7e66cc",
+  "API Platform": "#4e6e82",
+  Backend: "#36C1A0",
+  "Breaks & Special Events": "#7DAA5E",
+  "Defies Categorization": "#894545",
+  "Developer Experience": "#6fc9af",
+  "Federation and Composite Schemas": "#cbc749",
+  "GraphQL Clients": "#ca78fc",
+  "GraphQL in Production": "#e4981f",
+  "GraphQL Security": "#CC6BB0",
+  "GraphQL Spec": "#6B73CC",
+  Scaling: "#8D8D8D",
+}
diff --git a/src/app/conf/_design-system/button.tsx b/src/app/conf/_design-system/button.tsx
index 78957123e3..7d86d2d490 100644
--- a/src/app/conf/_design-system/button.tsx
+++ b/src/app/conf/_design-system/button.tsx
@@ -2,7 +2,7 @@ import { clsx } from "clsx"
 import { Anchor } from "./anchor"
 
 type Size = "md" | "lg"
-type Variant = "primary" | "secondary"
+type Variant = "primary" | "secondary" | "tertiary"
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export declare namespace ButtonProps {
@@ -57,7 +57,7 @@ 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 [aria-disabled]:bg-neu-800 aria-disabled:pointer-events-none",
+    "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 data-[variant=tertiary]:bg-neu-100 data-[variant=tertiary]:text-neu-900 data-[variant=tertiary]:hover:bg-neu-200 data-[variant=tertiary]:active:bg-neu-300 gql-focus-visible [aria-disabled]:bg-neu-800 aria-disabled:pointer-events-none dark:data-[variant=tertiary]:bg-neu-900/10 dark:data-[variant=tertiary]:text-neu-900 dark:data-[variant=tertiary]:hover:bg-neu-900/[.125] dark:data-[variant=tertiary]:active:bg-neu-800/20 dark:data-[variant=tertiary]:ring-1 dark:data-[variant=tertiary]:ring-inset dark:data-[variant=tertiary]:ring-neu-900/20",
     props.className,
   )
 
diff --git a/src/app/conf/_design-system/tag.tsx b/src/app/conf/_design-system/tag.tsx
new file mode 100644
index 0000000000..efc22e651e
--- /dev/null
+++ b/src/app/conf/_design-system/tag.tsx
@@ -0,0 +1,25 @@
+import clsx from "clsx"
+
+export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+  color: string
+}
+export function Tag({ color, children, style, className, ...rest }: TagProps) {
+  return (
+    <span
+      className={clsx(
+        "relative flex items-center justify-center self-start whitespace-nowrap border px-2 py-1 font-mono text-xs/none uppercase dark:opacity-[96.5%]",
+        className,
+      )}
+      style={{ borderColor: color, ...style }}
+      {...rest}
+    >
+      <span
+        className="absolute inset-0 opacity-20"
+        style={{
+          backgroundColor: color,
+        }}
+      />
+      <span className="relative">{children}</span>
+    </span>
+  )
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 639673a139..5dbf07df44 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -73,11 +73,31 @@ const config: Config = {
       animation: {
         scroll:
           "scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite",
+        "arrow-left":
+          "arrow-left var(--animation-duration, .75s) var(--animation-direction, forwards) ease infinite",
+        "show-overflow":
+          "show-overflow var(--animation-duration, 12s) var(--animation-delay, 1s) var(--animation-direction, forwards) ease infinite",
       },
       keyframes: {
         scroll: {
           to: {
-            transform: "translate(calc(-50% - .5rem))",
+            transform: "translate(calc(-50% - .25rem))",
+          },
+        },
+        "arrow-left": {
+          "0%, 100%": {
+            transform: "translateX(0)",
+          },
+          "50%": {
+            transform: "translateX(var(--arrow-left-x,-1.5px))",
+          },
+        },
+        "show-overflow": {
+          "0%, 100%": {
+            transform: "translateX(0)",
+          },
+          "25%, 75%": {
+            transform: "translateX(var(--delta-x))",
           },
         },
       },
@@ -86,9 +106,9 @@ const config: Config = {
   plugins: [
     typography,
     containerQueries,
-    plugin(({ addUtilities }) => {
+    plugin(({ addBase }) => {
       // heading styles
-      addUtilities({
+      addBase({
         ".typography-d1, .typography-h1, .typography-h2, .typography-h3": {
           lineHeight: "1.2",
         },
@@ -119,7 +139,7 @@ const config: Config = {
       })
 
       // paragraph styles
-      addUtilities({
+      addBase({
         ".typography-body-lg, .typography-body-md, .typography-body-sm, .typography-body-xs":
           {
             lineHeight: "1.5",
@@ -151,7 +171,7 @@ const config: Config = {
       })
 
       // other text styles
-      addUtilities({
+      addBase({
         ".typography-button, .typography-tagline": {
           fontSize: "16px",
           lineHeight: "1",
@@ -167,7 +187,7 @@ const config: Config = {
         },
       })
 
-      addUtilities({
+      addBase({
         ".typography-link": {
           color: "theme('colors.neu-800')",
           textDecoration: "underline",