diff --git a/public/img/conf/golden-gate-bridge.png b/public/img/conf/golden-gate-bridge.png
new file mode 100644
index 0000000000..52ee65aa7b
Binary files /dev/null and b/public/img/conf/golden-gate-bridge.png differ
diff --git a/src/app/conf/2023/_data.ts b/src/app/conf/2023/_data.ts
index f34b5757ca..55e10bdab8 100644
--- a/src/app/conf/2023/_data.ts
+++ b/src/app/conf/2023/_data.ts
@@ -21,7 +21,7 @@ async function fetchData<T>(url: string): Promise<T> {
   }
 }
 
-const token = process.env.SCHED_ACCESS_TOKEN
+const token = process.env.SCHED_ACCESS_TOKEN_2023
 
 async function getUsernames(): Promise<string[]> {
   const response = await fetchData<{ username: string }[]>(
diff --git a/src/app/conf/2023/schedule/page.tsx b/src/app/conf/2023/schedule/page.tsx
index fdf1525836..668848cd4f 100644
--- a/src/app/conf/2023/schedule/page.tsx
+++ b/src/app/conf/2023/schedule/page.tsx
@@ -1,6 +1,8 @@
 import { schedule } from "@/app/conf/2023/_data"
 import { ScheduleList } from "@/app/conf/_components/schedule/schedule-list"
 import { Metadata } from "next"
+import { eventsColors } from "../utils"
+import { filterCategories2023 } from "../../_components/schedule/filter-categories"
 
 export const metadata: Metadata = {
   title: "Schedule",
@@ -62,7 +64,12 @@ export default function SchedulePage() {
           >
             🔗 Bookmark sessions & plan your days on Sched
           </a>
-          <ScheduleList scheduleData={schedule} />
+          <ScheduleList
+            filterCategories={filterCategories2023}
+            eventsColors={eventsColors}
+            year="2023"
+            scheduleData={schedule}
+          />
         </div>
       </div>
     </>
diff --git a/src/app/conf/2023/sessions/[id]/page.tsx b/src/app/conf/2023/sessions/[id]/page.tsx
index a6f0eb43f4..8c6befa51b 100644
--- a/src/app/conf/2023/sessions/[id]/page.tsx
+++ b/src/app/conf/2023/sessions/[id]/page.tsx
@@ -87,7 +87,7 @@ export default function SessionPage({ params }: SessionProps) {
         <div className="py-10">
           <section className="text-[#333333] min-h-[80vh] flex-col mx-auto px-2 xs:px-0 lg:justify-between justify-center md:container">
             <div className="flex flex-col lg:px-0">
-              <BackLink kind="sessions" />
+              <BackLink year="2023" kind="sessions" />
               {recordingTitle.rating > 0.5 && (
                 <iframe
                   className="aspect-video max-w-[1000px] mx-auto size-full rounded-md"
diff --git a/src/app/conf/2023/sessions/page.tsx b/src/app/conf/2023/sessions/page.tsx
index 186af72c37..bf4c849fcd 100644
--- a/src/app/conf/2023/sessions/page.tsx
+++ b/src/app/conf/2023/sessions/page.tsx
@@ -1,6 +1,8 @@
 import { Metadata } from "next"
 import { SessionList } from "@/app/conf/_components/schedule/session-list"
 import { schedule, speakers } from "@/app/conf/2023/_data"
+import { eventsColors } from "../utils"
+import { filterCategories2023 } from "../../_components/schedule/filter-categories"
 
 export const metadata: Metadata = {
   title: "Sessions",
@@ -11,6 +13,9 @@ export default function SessionsPage() {
     <div className="bg-[#f4f6f8]">
       <div className="container conf-block">
         <SessionList
+          year="2023"
+          eventsColors={eventsColors}
+          filterCategories={filterCategories2023}
           // @ts-expect-error -- fixme
           scheduleData={schedule
             .filter(schedule => schedule.speakers)
diff --git a/src/app/conf/2023/speakers/[id]/page.tsx b/src/app/conf/2023/speakers/[id]/page.tsx
index 399d2d5ecb..5736e3f398 100644
--- a/src/app/conf/2023/speakers/[id]/page.tsx
+++ b/src/app/conf/2023/speakers/[id]/page.tsx
@@ -11,6 +11,8 @@ import { Avatar } from "@/app/conf/_components/speakers/avatar"
 import { speakers, schedule } from "@/app/conf/2023/_data"
 import { ChevronLeftIcon } from "@/icons"
 import NextLink from "next/link"
+import { eventsColors } from "../../utils"
+import { filterCategories2023 } from "@/app/conf/_components/schedule/filter-categories"
 
 type SpeakerProps = { params: { id: string } }
 
@@ -45,8 +47,8 @@ export default function SpeakerPage({ params }: SpeakerProps) {
     .filter(s => s.speakers && s.speakers.some(s => s.username === params.id))
     .map(s => ({
       ...s,
-      speakers: s.speakers!.map(s =>
-        speakers.find(speaker => speaker.username === s.username),
+      speakers: s.speakers!.map(
+        s => speakers.find(speaker => speaker.username === s.username)!,
       ),
     }))
 
@@ -104,8 +106,13 @@ export default function SpeakerPage({ params }: SpeakerProps) {
               />
             </div>
             <h1 className="conf-heading mb-10">Sessions</h1>
-            {/* @ts-expect-error */}
-            <SessionList showFilter={false} scheduleData={s} />
+            <SessionList
+              filterCategories={filterCategories2023}
+              eventsColors={eventsColors}
+              year="2023"
+              showFilter={false}
+              scheduleData={s}
+            />
           </div>
         </div>
       </section>
diff --git a/src/app/conf/2023/speakers/page.tsx b/src/app/conf/2023/speakers/page.tsx
index 913e9c9fa0..6640954511 100644
--- a/src/app/conf/2023/speakers/page.tsx
+++ b/src/app/conf/2023/speakers/page.tsx
@@ -22,7 +22,7 @@ export default function Page() {
       <div className="bg-white">
         <section className="container flex gap-8 flex-wrap lg:justify-between justify-center conf-block">
           {speakers.map(speaker => (
-            <Speaker key={speaker.username} {...speaker} />
+            <Speaker key={speaker.username} {...speaker} year="2023" />
           ))}
         </section>
       </div>
diff --git a/src/app/conf/2023/types.d.ts b/src/app/conf/2023/types.d.ts
index ea75d3190b..3ced63c4ad 100644
--- a/src/app/conf/2023/types.d.ts
+++ b/src/app/conf/2023/types.d.ts
@@ -23,4 +23,5 @@ export type SchedSpeaker = {
   role: string
   location?: string
   socialurls: { service: string; url: string }[]
+  year: "2024" | "2023"
 }
diff --git a/src/app/conf/2024/_data.ts b/src/app/conf/2024/_data.ts
new file mode 100644
index 0000000000..e172f3e519
--- /dev/null
+++ b/src/app/conf/2024/_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/2024/layout.tsx b/src/app/conf/2024/layout.tsx
index 3bb4116151..3b8047b0e7 100644
--- a/src/app/conf/2024/layout.tsx
+++ b/src/app/conf/2024/layout.tsx
@@ -42,13 +42,17 @@ export default function Layout({
           </NextLink>
         }
         links={[
-          { children: <span>FAQ</span>, href: "/conf/2024/faq" },
-          { children: <span>Register</span>, href: "/conf/2024#attend" },
-          { children: <span>Partner</span>, href: "/conf/2024/partner" },
           {
             children: <span>Schedule</span>,
-            href: "https://graphqlconf2024.sched.com/",
+            href: "/conf/2024/schedule",
+          },
+          {
+            children: <span>Speakers</span>,
+            href: "/conf/2024/speakers",
           },
+          { children: <span>FAQ</span>, href: "/conf/2024/faq" },
+          { children: <span>Register</span>, href: "/conf/2024#attend" },
+          { children: <span>Partner</span>, href: "/conf/2024/partner" },
         ]}
       />
       {children}
@@ -64,6 +68,14 @@ export default function Layout({
         }
         links={[
           [
+            {
+              children: "Schedule",
+              href: "/conf/2024/schedule",
+            },
+            {
+              children: "Speakers",
+              href: "/conf/2024/speakers",
+            },
             { children: "Register", href: "https://cvent.me/gk2dRw" },
             { children: "Sponsor", href: "/conf/2024/partner" },
             { children: "Partner", href: "/conf/2024/partner#program" },
@@ -72,10 +84,7 @@ export default function Layout({
               href: "/conf/2024/speakers",
               "aria-disabled": true,
             },
-            {
-              children: "Schedule",
-              href: "https://graphqlconf2024.sched.com/",
-            },
+
             { children: "GraphQLConf 2023", href: "/conf/2023" },
           ],
           [
diff --git a/src/app/conf/2024/schedule/[id]/page.tsx b/src/app/conf/2024/schedule/[id]/page.tsx
new file mode 100644
index 0000000000..c5efc2e1f9
--- /dev/null
+++ b/src/app/conf/2024/schedule/[id]/page.tsx
@@ -0,0 +1,187 @@
+import { notFound } from "next/navigation"
+import { Metadata } from "next"
+import clsx from "clsx"
+import { Avatar } from "../../../_components/speakers/avatar"
+import { BackLink } from "../../../_components/schedule/back-link"
+import {
+  SocialMediaIcon,
+  SocialMediaIconServiceType,
+} from "../../../_components/speakers/social-media"
+import { speakers, schedule } from "@/app/conf/2024/_data"
+import { metadata as layoutMetadata } from "@/app/conf/2023/layout"
+import { ScheduleSession } from "../../../2023/types"
+
+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/${event.id}.png`,
+    },
+  }
+}
+
+export function generateStaticParams() {
+  return schedule.filter(s => s.id).map(s => ({ id: s.id }))
+}
+
+const Tag = ({
+  text,
+  featured = false,
+}: {
+  text: string
+  featured?: boolean
+}) =>
+  !text ? null : (
+    <span
+      className={clsx(
+        "border border-solid border-[#333333] font-semibold text-sm px-3 py-1 h-max rounded-full whitespace-nowrap",
+        featured ? "bg-[#F8779D] border-[#F8779D] border-2 text-white" : "",
+      )}
+    >
+      {text}
+    </span>
+  )
+
+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 eventType = event.event_type.endsWith("s")
+    ? event.event_type.slice(0, -1)
+    : event.event_type
+
+  const eventTitle = getEventTitle(
+    event,
+    event.speakers!.map(s => s.name),
+  )
+
+  return (
+    <div className="bg-[#f4f6f8]">
+      <div className="container">
+        <div className="py-10">
+          <section className="text-[#333333] min-h-[80vh] flex-col mx-auto px-2 xs:px-0 lg:justify-between justify-center md:container">
+            <div className="flex flex-col lg:px-0">
+              <BackLink year="2024" kind="schedule" />
+
+              <div className="mt-10 flex flex-col self-center prose lg:prose-lg sm:space-y-4">
+                <div className="space-y-5">
+                  <div className="flex gap-3 flex-wrap">
+                    <Tag text={eventType} featured />
+                    <Tag text={event.audience} />
+                    <Tag text={event.event_subtype} />
+                  </div>
+                  <h1 className="mt-0 text-2xl lg:text-3xl font-medium mb-5">
+                    {eventTitle}
+                  </h1>
+                </div>
+                <div className="flex lg:flex-row flex-col sm:gap-5">
+                  {event.speakers!.map(speaker => (
+                    <div
+                      className="flex items-center gap-3"
+                      key={speaker.username}
+                    >
+                      <Avatar
+                        className="lg:size-[120px] size-[100px] rounded-full"
+                        avatar={speaker.avatar}
+                        name={speaker.name}
+                      />
+
+                      <div className="flex flex-col lg:gap-1 gap-1.5">
+                        <a
+                          href={`/conf/2024/speakers/${speaker.username}`}
+                          className="text-xl mt-0 font-bold text-[#333333] underline"
+                        >
+                          {speaker.name}
+                        </a>
+
+                        <span className="font-normal">
+                          <span className="font-semibold">
+                            {speaker.company}
+                          </span>
+                          {speaker.company && ", "}
+                          {speaker.position}
+                        </span>
+                        {speaker.socialurls?.length ? (
+                          <div className="mt-0 text-[#333333]">
+                            <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-black"
+                                >
+                                  <SocialMediaIcon
+                                    service={
+                                      social.service.toLowerCase() as SocialMediaIconServiceType
+                                    }
+                                  />
+                                </a>
+                              ))}
+                            </div>
+                          </div>
+                        ) : null}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+                <p>{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 font-light text-2xl">
+                          ↗
+                        </span>
+                      </a>
+                      <iframe src={path} className="aspect-video size-full" />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/conf/2024/schedule/page.tsx b/src/app/conf/2024/schedule/page.tsx
new file mode 100644
index 0000000000..c4443d440a
--- /dev/null
+++ b/src/app/conf/2024/schedule/page.tsx
@@ -0,0 +1,77 @@
+import { schedule } from "@/app/conf/2024/_data"
+import { ScheduleList } from "@/app/conf/_components/schedule/schedule-list"
+import { Metadata } from "next"
+import { eventsColors } from "../utils"
+import { filterCategories2024 } from "../../_components/schedule/filter-categories"
+
+export const metadata: Metadata = {
+  title: "Schedule",
+}
+
+export default function SchedulePage() {
+  return (
+    <div className='bg-[url("/img/conf/golden-gate-bridge.png")] bg-no-repeat bg-contain'>
+      <div className="container">
+        <div className="prose lg:prose-lg py-20 text-white max-w-full">
+          <h1 className="text-white">GraphQLConf 2024 Schedule</h1>
+          <section className="px-0 mx-0 my-8">
+            <div className="flex gap-8 mb-1.5">
+              <span className="flex items-center">
+                <svg
+                  className="mr-3 mb-0.5"
+                  width={20}
+                  height={20}
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 448 512"
+                  fill="currentColor"
+                >
+                  <path d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H64C28.7 64 0 92.7 0 128v16 48V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V192 144 128c0-35.3-28.7-64-64-64H344V24c0-13.3-10.7-24-24-24s-24 10.7-24 24V64H152V24zM48 192H400V448c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192z" />
+                </svg>
+                September 10-12, 2024
+              </span>
+              <span className="flex items-center">
+                <svg
+                  className="mr-3 mb-0.5"
+                  width="20px"
+                  height="20px"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 384 512"
+                  fill="currentColor"
+                >
+                  <path d="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z" />
+                </svg>
+                San Francisco Bay Area, CA
+              </span>
+            </div>
+            <h3 className="text-white">Important Notes</h3>
+            <ul>
+              <li>All session times are in Pacific Daylight Time (UTC -7).</li>
+              <li>
+                Timing of sessions and room locations are subject to change.
+              </li>
+            </ul>
+          </section>
+        </div>
+      </div>
+
+      <div className="bg-[#f4f6f8] conf-block">
+        <div className="container">
+          <a
+            href="https://graphqlconf2024.sched.com"
+            target="_blank"
+            rel="noreferrer"
+            className="underline-offset-2 underline"
+          >
+            🔗 Bookmark sessions & plan your days on Sched
+          </a>
+          <ScheduleList
+            filterCategories={filterCategories2024}
+            eventsColors={eventsColors}
+            year="2024"
+            scheduleData={schedule}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/conf/2024/speakers/[id]/page.tsx b/src/app/conf/2024/speakers/[id]/page.tsx
new file mode 100644
index 0000000000..522e9d72f4
--- /dev/null
+++ b/src/app/conf/2024/speakers/[id]/page.tsx
@@ -0,0 +1,120 @@
+import { Metadata } from "next"
+import { notFound } from "next/navigation"
+import { metadata as layoutMetadata } from "@/app/conf/2023/layout"
+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 { speakers, schedule } from "@/app/conf/2024/_data"
+import { ChevronLeftIcon } from "@/icons"
+import NextLink from "next/link"
+import { eventsColors } from "../../utils"
+import { filterCategories2024 } from "@/app/conf/_components/schedule/filter-categories"
+
+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/${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="bg-[#f4f6f8] py-14 text-conf-black">
+      <section className="flex flex-col container">
+        <div className="flex flex-col">
+          <NextLink
+            href="/conf/2024/speakers"
+            className="text-conf-black flex items-center text-lg hover:text-primary gap-2 transition-colors"
+          >
+            <ChevronLeftIcon className="size-5" /> Back to Speakers
+          </NextLink>
+
+          <div className="max-w-5xl self-center">
+            <div className="pt-14 pb-20 flex flex-col sm:flex-row gap-0 sm:gap-10 gap-y-5 justify-between max-lg:flex-col-reverse">
+              <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 items-center w-max"
+                        >
+                          <SocialMediaIcon
+                            service={
+                              social.service.toLowerCase() as SocialMediaIconServiceType
+                            }
+                          />
+                        </a>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <Avatar
+                className="self-center sm:self-start size-[280px] rounded-full"
+                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/2024/speakers/page.tsx b/src/app/conf/2024/speakers/page.tsx
new file mode 100644
index 0000000000..3faa7a0828
--- /dev/null
+++ b/src/app/conf/2024/speakers/page.tsx
@@ -0,0 +1,31 @@
+import { Metadata } from "next"
+import { speakers } from "@/app/conf/2024/_data"
+import { Speaker } from "@/app/conf/_components/speakers/speaker"
+
+export const metadata: Metadata = {
+  title: "Speakers",
+}
+
+export default function Page() {
+  return (
+    <div className='bg-[url("/img/conf/golden-gate-bridge.png")] bg-no-repeat bg-contain'>
+      <div className="w-full flex justify-center">
+        <div className="prose lg:prose-lg py-20 md:container px-2 xs:px-0">
+          <h1 className="text-white">GraphQLConf 2024 Speakers</h1>
+          <p className="text-white sm:w-2/3">
+            Meet the unique lineup of insightful speakers we've carefully
+            chosen, who are primed to share their groundbreaking ideas and
+            innovative practices in the realm of GraphQL at the conference.
+          </p>
+        </div>
+      </div>
+      <div className="bg-white">
+        <section className="container flex gap-8 flex-wrap lg:justify-between justify-center conf-block">
+          {speakers.map(speaker => (
+            <Speaker key={speaker.username} {...speaker} year="2024" />
+          ))}
+        </section>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/conf/2024/utils.ts b/src/app/conf/2024/utils.ts
new file mode 100644
index 0000000000..caa0e76a5f
--- /dev/null
+++ b/src/app/conf/2024/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/_components/schedule/back-link.tsx b/src/app/conf/_components/schedule/back-link.tsx
index a8db7695d5..3b173f0ea3 100644
--- a/src/app/conf/_components/schedule/back-link.tsx
+++ b/src/app/conf/_components/schedule/back-link.tsx
@@ -1,14 +1,22 @@
 import NextLink from "next/link"
 
-export function BackLink({ kind }: { kind: "speakers" | "sessions" }) {
+export function BackLink({
+  year,
+  kind,
+}: {
+  year: "2023" | "2024"
+  kind: "speakers" | "sessions" | "schedule"
+}) {
   return (
     <NextLink
-      href={`/conf/2023/${kind}`}
+      href={`/conf/${year}/${kind}`}
       className="w-max rounded-md underline-offset-2 cursor-pointer transition-all text-sm no-underline text-[#333333]"
     >
-      <span>
-        &lt; &nbsp;Back to {kind === "speakers" ? "Speakers" : "Sessions"}
-      </span>
+      <span>&lt; &nbsp;Back to {capitalize(kind)}</span>
     </NextLink>
   )
 }
+
+function capitalize(str: string) {
+  return str.substring(0, 1).toUpperCase() + str.substring(1).toLowerCase()
+}
diff --git a/src/app/conf/_components/schedule/filter-categories.ts b/src/app/conf/_components/schedule/filter-categories.ts
index 9e8e837bbc..2d055bb872 100644
--- a/src/app/conf/_components/schedule/filter-categories.ts
+++ b/src/app/conf/_components/schedule/filter-categories.ts
@@ -1,6 +1,43 @@
 import { CategoryName } from "./session-list"
 
-export const filterCategories: {
+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[]
 }[] = [
diff --git a/src/app/conf/_components/schedule/schedule-list.tsx b/src/app/conf/_components/schedule/schedule-list.tsx
index 44295c2e50..515ff219b4 100644
--- a/src/app/conf/_components/schedule/schedule-list.tsx
+++ b/src/app/conf/_components/schedule/schedule-list.tsx
@@ -2,7 +2,7 @@
 
 import { format, parseISO, compareAsc } from "date-fns"
 import { ReactElement, useEffect, useState } from "react"
-import { eventsColors, getEventTitle } from "@/app/conf/2023/utils"
+import { getEventTitle } from "@/app/conf/2023/utils"
 import { Filters } from "./filters"
 import { SchedSpeaker } from "../../2023/types"
 import {
@@ -11,7 +11,6 @@ import {
   ConcurrentSessions,
   ScheduleSessionsByDay,
 } from "./session-list"
-import { filterCategories } from "./filter-categories"
 
 function isString(x: any) {
   return Object.prototype.toString.call(x) === "[object String]"
@@ -37,13 +36,13 @@ function getSessionsByDay(
 
     let include = true
     if (audienceFilter.length > 0) {
-      include = include && audienceFilter.includes(session.audience)
+      include = include && audienceFilter.includes((session as any).company)
     }
     if (talkCategoryFilter.length > 0) {
-      include = include && talkCategoryFilter.includes(session.event_subtype)
+      include = include && talkCategoryFilter.includes(session.event_type)
     }
     if (eventTypeFilter.length > 0) {
-      include = include && eventTypeFilter.includes(session.event_type)
+      include = include && eventTypeFilter.includes(session.audience)
     }
 
     if (!include) {
@@ -76,6 +75,12 @@ interface Props {
   showFilter?: boolean
   scheduleData: ScheduleSession[]
   filterSchedule?: (sessions: ScheduleSession[]) => ScheduleSession[]
+  year: "2023" | "2024"
+  eventsColors: Record<string, string>
+  filterCategories: {
+    name: CategoryName
+    options: string[]
+  }[]
 }
 
 export function ScheduleList({
@@ -83,6 +88,9 @@ export function ScheduleList({
   showFilter = true,
   filterSchedule,
   scheduleData,
+  year,
+  eventsColors,
+  filterCategories,
 }: Props): ReactElement {
   const [filtersState, setFiltersState] = useState<
     Record<CategoryName, string[]>
@@ -199,7 +207,7 @@ export function ScheduleList({
                               <a
                                 id={`session-${session.id}`}
                                 data-tooltip-id="my-tooltip"
-                                href={`/conf/2023/schedule/${session.id}?name=${session.name}`}
+                                href={`/conf/${year}/schedule/${session.id}?name=${session.name}`}
                                 key={session.id}
                                 style={{
                                   borderLeft: `10px solid ${borderColor}`,
diff --git a/src/app/conf/_components/schedule/session-list.tsx b/src/app/conf/_components/schedule/session-list.tsx
index 59dec3fcdc..bf4b73d983 100644
--- a/src/app/conf/_components/schedule/session-list.tsx
+++ b/src/app/conf/_components/schedule/session-list.tsx
@@ -2,12 +2,10 @@
 
 import { compareAsc } from "date-fns"
 import { ComponentProps, ReactElement, useEffect, useState } from "react"
-import { eventsColors } from "@/app/conf/2023/utils"
 import { Filters } from "./filters"
 import { SchedSpeaker } from "../../2023/types"
 import { clsx } from "clsx"
 import NextLink from "next/link"
-import { filterCategories } from "./filter-categories"
 
 export interface ScheduleSession {
   id: string
@@ -91,12 +89,21 @@ interface Props {
   showFilter?: boolean
   scheduleData: ScheduleSession[]
   filterSchedule?: (sessions: ScheduleSession[]) => ScheduleSession[]
+  year: "2023" | "2024"
+  filterCategories: {
+    name: CategoryName
+    options: string[]
+  }[]
+  eventsColors: Record<string, string>
 }
 
 export function SessionList({
   showFilter = true,
   filterSchedule,
   scheduleData,
+  year,
+  filterCategories,
+  eventsColors,
 }: Props): ReactElement {
   const [filtersState, setFiltersState] = useState<
     Record<CategoryName, string[]>
@@ -160,14 +167,22 @@ export function SessionList({
                       className={clsx(
                         "shadow-2xl rounded-md overflow-hidden flex flex-col text-current hover:no-underline focus:no-underline",
                       )}
-                      href={`/conf/2023/sessions/${session.id}`}
+                      href={
+                        year === "2024"
+                          ? `/conf/${year}/schedule/${session.id}`
+                          : `/conf/${year}/sessions/${session.id}`
+                      }
                     >
                       <div className="bg-[#251F30] text-white flex justify-between py-5 px-7 relative">
                         <div className="text-sm flex flex-col gap-2 [*:hover>*>&]:opacity-0 transition-opacity duration-300 opacity-100">
-                          <div className="flex gap-3">
-                            <div className="font-mono w-4 text-center">▶</div>
-                            Recording
-                          </div>
+                          {year !== "2024" && (
+                            <div className="flex gap-3">
+                              <div className="font-mono w-4 text-center">
+                                ▶
+                              </div>
+                              Recording
+                            </div>
+                          )}
                           <div className="flex items-center gap-3">
                             <ClockIcon className="size-4" />
                             {(Number(new Date(session.event_end)) -
diff --git a/src/app/conf/_components/speakers/avatar.tsx b/src/app/conf/_components/speakers/avatar.tsx
index ab1718e78e..6a3a92173b 100644
--- a/src/app/conf/_components/speakers/avatar.tsx
+++ b/src/app/conf/_components/speakers/avatar.tsx
@@ -16,7 +16,7 @@ export const Avatar: FC<Props> = ({ avatar, name, className, href }) => {
   const Component = () =>
     avatar ? (
       <img
-        className={`cursor-pointer ${className}`}
+        className={`${className}`}
         src={avatar}
         alt={`${name} Profile Image`}
       />
diff --git a/src/app/conf/_components/speakers/speaker.tsx b/src/app/conf/_components/speakers/speaker.tsx
index 1d930e80ba..62903c2ea1 100644
--- a/src/app/conf/_components/speakers/speaker.tsx
+++ b/src/app/conf/_components/speakers/speaker.tsx
@@ -10,10 +10,11 @@ export function Speaker({
   avatar,
   username,
   socialurls,
+  year,
 }: SchedSpeaker) {
   return (
     <div className="flex flex-col items-center">
-      <NextLink href={`/conf/2023/speakers/${username}`} className="group">
+      <NextLink href={`/conf/${year}/speakers/${username}`} className="group">
         <Avatar
           className="group-hover:border-primary transition-colors border-2 border-transparent rounded-full size-[150px] lg:size-[230px]"
           avatar={avatar}
diff --git a/src/app/conf/_components/thanks.tsx b/src/app/conf/_components/thanks.tsx
index 7c7f4cccc0..609c1f8ade 100644
--- a/src/app/conf/_components/thanks.tsx
+++ b/src/app/conf/_components/thanks.tsx
@@ -3,6 +3,8 @@ import { SessionList } from "./schedule/session-list"
 import { Button } from "./button"
 import leeImage from "../2023/gallery/images/3.jpg"
 import { schedule, speakers } from "@/app/conf/2023/_data"
+import { eventsColors } from "../2023/utils"
+import { filterCategories2023 } from "./schedule/filter-categories"
 
 function shuffle<T extends any[]>(array: T): T {
   let currentIndex = array.length
@@ -53,6 +55,9 @@ export async function Thanks() {
           </div>
         </div>
         <SessionList
+          year="2023"
+          filterCategories={filterCategories2023}
+          eventsColors={eventsColors}
           showFilter={false}
           // @ts-expect-error -- fixme
           scheduleData={shuffle(filteredSessions)