diff --git a/src/lib/components/Disclosure.svelte b/src/lib/components/Disclosure.svelte
new file mode 100644
index 0000000..7c52465
--- /dev/null
+++ b/src/lib/components/Disclosure.svelte
@@ -0,0 +1,141 @@
+<script lang="ts">
+    import { onDestroy, tick, type Snippet } from 'svelte';
+
+    type DisclosurePhase = 'exited' | 'entering' | 'entered' | 'exiting';
+
+    interface TriggerProps {
+        expanded: boolean;
+        panelId: string;
+        buttonId: string;
+        toggle: () => void;
+    }
+
+    interface Props {
+        id: string;
+        trigger: Snippet<[TriggerProps]>;
+        children: Snippet;
+    }
+
+    let { id, trigger, children }: Props = $props();
+
+    const panelId = $derived(`${id}-panel`);
+    const buttonId = $derived(`${id}-trigger`);
+    const transitionDurationMs = 250;
+
+    let phase = $state<DisclosurePhase>('exited');
+    let panelElement = $state<globalThis.HTMLDivElement>();
+    let height = $state('0px');
+    let transitionTimer: ReturnType<typeof globalThis.setTimeout> | undefined;
+    let transitionFrame: number | undefined;
+    let resizeFrame: number | undefined;
+
+    const expanded = $derived(phase === 'entering' || phase === 'entered');
+    const wrapperStyle = $derived(
+        `${phase === 'exited' ? 'display: none; ' : ''}height: ${height};`,
+    );
+
+    async function open() {
+        clearPendingTransition();
+        phase = 'entering';
+        height = '0px';
+        await tick();
+        transitionFrame = globalThis.requestAnimationFrame(() => {
+            transitionFrame = undefined;
+            height = `${panelElement?.scrollHeight ?? 0}px`;
+            transitionTimer = globalThis.setTimeout(() => {
+                phase = 'entered';
+                height = 'auto';
+            }, transitionDurationMs);
+        });
+    }
+
+    function close() {
+        clearPendingTransition();
+        height = `${panelElement?.scrollHeight ?? 0}px`;
+        phase = 'exiting';
+        transitionFrame = globalThis.requestAnimationFrame(() => {
+            transitionFrame = undefined;
+            height = '0px';
+        });
+        transitionTimer = globalThis.setTimeout(() => {
+            phase = 'exited';
+            height = '0px';
+        }, transitionDurationMs);
+    }
+
+    function toggle() {
+        if (expanded) {
+            close();
+        } else {
+            void open();
+        }
+    }
+
+    function clearPendingTransition() {
+        if (transitionTimer) {
+            globalThis.clearTimeout(transitionTimer);
+            transitionTimer = undefined;
+        }
+
+        if (transitionFrame) {
+            globalThis.cancelAnimationFrame(transitionFrame);
+            transitionFrame = undefined;
+        }
+
+        if (resizeFrame) {
+            globalThis.cancelAnimationFrame(resizeFrame);
+            resizeFrame = undefined;
+        }
+    }
+
+    function updateEnteringHeight() {
+        if (phase !== 'entering') {
+            return;
+        }
+
+        if (resizeFrame) {
+            globalThis.cancelAnimationFrame(resizeFrame);
+        }
+
+        resizeFrame = globalThis.requestAnimationFrame(() => {
+            resizeFrame = undefined;
+            if (phase === 'entering') {
+                height = `${panelElement?.scrollHeight ?? 0}px`;
+            }
+        });
+    }
+
+    $effect(() => {
+        if (!panelElement || typeof globalThis.ResizeObserver === 'undefined') {
+            return;
+        }
+
+        const resizeObserver = new globalThis.ResizeObserver(() => {
+            updateEnteringHeight();
+        });
+
+        resizeObserver.observe(panelElement);
+
+        return () => {
+            resizeObserver.disconnect();
+        };
+    });
+
+    onDestroy(clearPendingTransition);
+</script>
+
+{@render trigger({ expanded, panelId, buttonId, toggle })}
+
+<div
+    class="transition-[height] duration-300 ease-[cubic-bezier(0,0,0,1)] overflow-hidden"
+    style={wrapperStyle}
+>
+    <div
+        bind:this={panelElement}
+        id={panelId}
+        role="region"
+        aria-labelledby={buttonId}
+    >
+        {@render children()}
+    </div>
+</div>
diff --git a/src/lib/components/ScheduleBlock.svelte b/src/lib/components/ScheduleBlock.svelte
new file mode 100644
index 0000000..d1d8d58
--- /dev/null
+++ b/src/lib/components/ScheduleBlock.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import SectionTitleBar from '#lib/components/SectionTitleBar.svelte';
+    import ScheduleGrid from '#lib/components/ScheduleGrid.svelte';
+    import {
+        flattenAndSortSessions,
+        getScheduleTracks,
+    } from '#lib/components/schedule.ts';
+    import { formatDate } from '#lib/date.ts';
+    import type { ParsedConference, Schedule } from '#lib/types.ts';
+
+    interface Props {
+        conference: ParsedConference;
+        schedule?: Schedule;
+    }
+
+    let { conference, schedule }: Props = $props();
+
+    const date = $derived(conference.properties?.date);
+    const tracks = $derived(getScheduleTracks(schedule?.items));
+    const sessions = $derived(flattenAndSortSessions(schedule?.items));
+    const grid = $derived(schedule?.grid ?? []);
+</script>
+
+<section id="schedule" class="mb-12 sm:mb-20">
+    <SectionTitleBar title="Schedule" />
+    <div class="large-content-container">
+        <div class="pt-12 sm:pt-20">
+            {#if date}
+                <h3 class="text-xl xl:text-4xl font-thin mb-8">
+                    {formatDate(date, 'EEEE, MMMM do, yyyy')}
+                </h3>
+            {/if}
+
+            <ScheduleGrid {grid} {tracks} {sessions} />
+        </div>
+    </div>
+</section>
diff --git a/src/lib/components/ScheduleGrid.svelte b/src/lib/components/ScheduleGrid.svelte
new file mode 100644
index 0000000..d46766f
--- /dev/null
+++ b/src/lib/components/ScheduleGrid.svelte
@@ -0,0 +1,301 @@
+<script lang="ts">
+    import { onDestroy, onMount } from 'svelte';
+    import {
+        faChevronLeft,
+        faChevronRight,
+    } from '@fortawesome/free-solid-svg-icons';
+    import FontAwesomeIcon from '#lib/components/FontAwesomeIcon.svelte';
+    import SessionCard from '#lib/components/SessionCard.svelte';
+    import {
+        TRACK_HEADER_ID,
+        buildVisibleGridState,
+        clampStartColumnIndex,
+        createGridAreaId,
+        getEndPath,
+        gridTemplateAreas,
+        nextStartColumnIndex,
+        previousStartColumnIndex,
+        visibleColumnCountForWidth,
+        type ScheduleGridRows,
+    } from '#lib/components/schedule.ts';
+    import type { ParsedSession, TrackWithSessions } from '#lib/types.ts';
+
+    interface Props {
+        grid: ScheduleGridRows;
+        sessions: ParsedSession[];
+        tracks: TrackWithSessions[];
+    }
+
+    interface PointerGesture {
+        pointerId: number;
+        startX: number;
+        startY: number;
+        direction?: 'next' | 'prev';
+        swiping: boolean;
+    }
+
+    let { grid, sessions, tracks }: Props = $props();
+
+    const swipeDelta = 10;
+    const getTotalColumns = () => Math.max(tracks.length, grid[0]?.length ?? 0);
+    const totalColumns = $derived(getTotalColumns());
+
+    let visibleColumns = $state(Math.min(getTotalColumns(), 3));
+    let startColumnIndex = $state(0);
+    let pointerGesture: PointerGesture | undefined;
+
+    const maxStartIndex = $derived(Math.max(totalColumns - visibleColumns, 0));
+    const isPrevEnabled = $derived(startColumnIndex !== 0);
+    const isNextEnabled = $derived(startColumnIndex < maxStartIndex);
+    const visibleState = $derived(
+        buildVisibleGridState({
+            rows: grid,
+            tracks,
+            startColumnIndex,
+            visibleColumns,
+        }),
+    );
+    const templateAreas = $derived(gridTemplateAreas(visibleState.visibleGrid));
+
+    function handleControl(direction: 'next' | 'prev') {
+        if (direction === 'next') {
+            startColumnIndex = nextStartColumnIndex(
+                startColumnIndex,
+                totalColumns,
+                visibleColumns,
+            );
+        } else {
+            startColumnIndex = previousStartColumnIndex(startColumnIndex);
+        }
+    }
+
+    function setVisibleColumnCount(nextVisibleColumns: number) {
+        visibleColumns = Math.min(nextVisibleColumns, totalColumns);
+        startColumnIndex = clampStartColumnIndex(
+            startColumnIndex,
+            totalColumns,
+            visibleColumns,
+        );
+    }
+
+    function handlePointerDown(event: globalThis.PointerEvent) {
+        if (!event.isPrimary) {
+            return;
+        }
+
+        cleanupGestureListeners();
+        pointerGesture = {
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startY: event.clientY,
+            swiping: false,
+        };
+        globalThis.window.addEventListener('pointermove', handlePointerMove, {
+            passive: false,
+        });
+        globalThis.window.addEventListener('pointerup', handlePointerUp);
+        globalThis.window.addEventListener(
+            'pointercancel',
+            handlePointerCancel,
+        );
+    }
+
+    function handlePointerMove(event: globalThis.PointerEvent) {
+        if (!pointerGesture || event.pointerId !== pointerGesture.pointerId) {
+            return;
+        }
+
+        const deltaX = event.clientX - pointerGesture.startX;
+        const deltaY = event.clientY - pointerGesture.startY;
+        const absX = Math.abs(deltaX);
+        const absY = Math.abs(deltaY);
+
+        if (absX < swipeDelta && absY < swipeDelta && !pointerGesture.swiping) {
+            return;
+        }
+
+        if (absX > absY) {
+            pointerGesture.swiping = true;
+            pointerGesture.direction = deltaX < 0 ? 'next' : 'prev';
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+        }
+    }
+
+    function handlePointerUp(event: globalThis.PointerEvent) {
+        if (!pointerGesture || event.pointerId !== pointerGesture.pointerId) {
+            return;
+        }
+
+        if (pointerGesture.swiping && pointerGesture.direction) {
+            handleControl(pointerGesture.direction);
+        }
+
+        pointerGesture = undefined;
+        cleanupGestureListeners();
+    }
+
+    function handlePointerCancel(event: globalThis.PointerEvent) {
+        if (!pointerGesture || event.pointerId !== pointerGesture.pointerId) {
+            return;
+        }
+
+        pointerGesture = undefined;
+        cleanupGestureListeners();
+    }
+
+    function cleanupGestureListeners() {
+        if (typeof globalThis.window === 'undefined') {
+            return;
+        }
+
+        globalThis.window.removeEventListener('pointermove', handlePointerMove);
+        globalThis.window.removeEventListener('pointerup', handlePointerUp);
+        globalThis.window.removeEventListener(
+            'pointercancel',
+            handlePointerCancel,
+        );
+    }
+
+    $effect(() => {
+        visibleColumns = Math.min(visibleColumns, totalColumns);
+        startColumnIndex = clampStartColumnIndex(
+            startColumnIndex,
+            totalColumns,
+            visibleColumns,
+        );
+    });
+
+    onMount(() => {
+        const mediaQueries = [
+            globalThis.window.matchMedia('(max-width: 1023px)'),
+            globalThis.window.matchMedia(
+                '(min-width: 1024px) and (max-width: 1279px)',
+            ),
+            globalThis.window.matchMedia('(min-width: 1280px)'),
+        ];
+        const updateVisibleColumns = () => {
+            setVisibleColumnCount(
+                visibleColumnCountForWidth(
+                    globalThis.window.innerWidth,
+                    totalColumns,
+                ),
+            );
+        };
+
+        updateVisibleColumns();
+        mediaQueries.forEach((mediaQueryList) =>
+            mediaQueryList.addEventListener('change', updateVisibleColumns),
+        );
+
+        return () => {
+            mediaQueries.forEach((mediaQueryList) =>
+                mediaQueryList.removeEventListener(
+                    'change',
+                    updateVisibleColumns,
+                ),
+            );
+        };
+    });
+
+    onDestroy(cleanupGestureListeners);
+</script>
+
+<div
+    role="group"
+    aria-label="Schedule tracks"
+    class="schedule-grid touch-pan-y"
+    style:--grid-template-columns={visibleColumns}
+    style:--grid-template-areas={templateAreas}
+    onpointerdown={handlePointerDown}
+>
+    <div
+        class="bg-primary sticky top-0"
+        style:grid-area={createGridAreaId(TRACK_HEADER_ID)}
+    >
+        <div class="flex text-white text-2xl">
+            <button
+                type="button"
+                aria-label="Previous track"
+                class={`p-2 transition-opacity duration-300 ${isPrevEnabled ? 'opacity-100' : 'opacity-0'}`}
+                onclick={() => handleControl('prev')}
+            >
+                <FontAwesomeIcon icon={faChevronLeft} />
+            </button>
+            <div class="flex w-full">
+                {#each visibleState.visibleTracks as track (track.id)}
+                    <div class="p-2 flex-1">
+                        <div class="text-center text-white">
+                            <h3 class="text-xl xl:text-4xl font-bold">
+                                {track.name}
+                            </h3>
+                        </div>
+                    </div>
+                {/each}
+            </div>
+            <button
+                type="button"
+                aria-label="Next track"
+                class={`p-2 transition-opacity duration-300 ${isNextEnabled ? 'opacity-100' : 'opacity-0'}`}
+                onclick={() => handleControl('next')}
+            >
+                <FontAwesomeIcon icon={faChevronRight} />
+            </button>
+        </div>
+    </div>
+
+    {#each sessions as session (session.id)}
+        {@const gridAreaId = createGridAreaId(
+            getEndPath(session.route.path ?? ''),
+        )}
+        <SessionCard
+            {session}
+            style={`grid-area: ${gridAreaId};`}
+            class={visibleState.visibleIds.has(gridAreaId) ? '' : 'hidden'}
+        />
+    {/each}
+</div>
+
+<style>
+    .schedule-grid {
+        --grid-template-areas: none;
+        --grid-template-columns: 0;
+
+        display: grid;
+        grid-template-areas: var(--grid-template-areas);
+        grid-template-columns: repeat(
+            var(--grid-template-columns),
+            minmax(100%, 1fr)
+        );
+        gap: 1rem;
+    }
+
+    @media (width >= 64rem) {
+        .schedule-grid {
+            grid-template-columns: repeat(
+                var(--grid-template-columns),
+                minmax(50%, 1fr)
+            );
+        }
+    }
+
+    @media (width >= 80rem) {
+        .schedule-grid {
+            grid-template-columns: repeat(
+                var(--grid-template-columns),
+                minmax(33.3333333%, 1fr)
+            );
+        }
+    }
+
+    @media (width >= 96rem) {
+        .schedule-grid {
+            gap: 2rem;
+            grid-template-columns: repeat(
+                var(--grid-template-columns),
+                minmax(calc(33.3333333% - 1rem), 1fr)
+            );
+        }
+    }
+</style>
diff --git a/src/lib/components/SessionCard.svelte b/src/lib/components/SessionCard.svelte
new file mode 100644
index 0000000..f937c50
--- /dev/null
+++ b/src/lib/components/SessionCard.svelte
@@ -0,0 +1,155 @@
+<script lang="ts">
+    import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
+    import CmsImage from '#lib/components/CmsImage.svelte';
+    import Disclosure from '#lib/components/Disclosure.svelte';
+    import FontAwesomeIcon from '#lib/components/FontAwesomeIcon.svelte';
+    import RichText from '#lib/components/RichText.svelte';
+    import { formatDate } from '#lib/date.ts';
+    import { imageUrl } from '#lib/imageUrl.ts';
+    import type { ParsedSession, Speaker } from '#lib/types.ts';
+
+    interface Props {
+        session: ParsedSession;
+        style?: string;
+        disableSpeakerLinks?: boolean;
+        class?: string;
+    }
+
+    let {
+        session,
+        style,
+        disableSpeakerLinks = false,
+        class: className = '',
+    }: Props = $props();
+
+    const start = $derived(session.properties?.start);
+    const description = $derived(session.properties?.description);
+    const speakerContent = $derived(
+        session.properties?.speakers?.find(isSpeakerContent),
+    );
+    const markup = $derived(description?.markup);
+    const profileImage = $derived(
+        speakerContent?.properties?.profileImage?.[0],
+    );
+    const profileImageUrl = $derived(
+        profileImage?.url
+            ? imageUrl(profileImage.url, { width: 100, height: 100 })
+            : undefined,
+    );
+    const jobTitle = $derived(speakerContent?.properties?.jobTitle);
+    const disclosureId = $derived(`session-card-${session.id}`);
+    const wrapperClass = $derived(
+        `bg-gray-100 p-4 2xl:p-8 ${className} session-card-accordion-wrapper`.trim(),
+    );
+
+    function isSpeakerContent(value: unknown): value is Speaker {
+        return (
+            typeof value === 'object' &&
+            value !== null &&
+            'contentType' in value &&
+            value.contentType === 'speaker'
+        );
+    }
+</script>
+
+<div {style} class={wrapperClass}>
+    {#if start}
+        <time class="text-lg xl:text-2xl font-thin">
+            {formatDate(start, 'h:mm a')}
+        </time>
+    {/if}
+
+    {#if markup}
+        <Disclosure id={disclosureId}>
+            {#snippet trigger({ expanded, panelId, buttonId, toggle })}
+                <div class="flex justify-between items-center">
+                    <div class="flex items-center w-full text-left">
+                        {#if profileImageUrl}
+                            <CmsImage
+                                src={profileImageUrl}
+                                width={100}
+                                height={100}
+                                alt={`${speakerContent?.name ?? ''} profile image`}
+                                class="w-[50px] h-[50px] md:w-[70px] md:h-[70px] lg:w-[75px] lg:h-[75px] 2xl:w-[80px] 2xl:h-[80px] rounded-full mr-3"
+                            />
+                        {/if}
+                        <div>
+                            <h3
+                                class="text-base sm:text-lg md:text-xl lg:text-2xl 2xl:text-3xl font-bold"
+                            >
+                                {session.name}
+                            </h3>
+                            {#if speakerContent}
+                                <p class="text-sm sm:text-base mt-2">
+                                    {#if disableSpeakerLinks}
+                                        {speakerContent.name}
+                                    {:else}
+                                        <a
+                                            href={speakerContent.route.path ??
+                                                '#'}
+                                            class="text-primary"
+                                        >
+                                            {speakerContent.name}</a
+                                        >
+                                    {/if}{jobTitle ? `: ${jobTitle}` : ''}
+                                </p>
+                            {/if}
+                        </div>
+                    </div>
+                    <button
+                        id={buttonId}
+                        type="button"
+                        class="text-primary font-medium text-lg ml-4 lg:ml-8 flex items-center"
+                        aria-expanded={expanded}
+                        aria-controls={panelId}
+                        onclick={toggle}
+                    >
+                        {expanded ? 'Less' : 'More'}
+                        <span class="text-black text-sm ml-1">
+                            <span
+                                class={`inline-block transition-[transform] duration-300 ease-[cubic-bezier(0,0,0,1)] ${expanded ? 'rotate-180' : ''}`}
+                            >
+                                <FontAwesomeIcon icon={faChevronDown} />
+                            </span>
+                        </span>
+                    </button>
+                </div>
+            {/snippet}
+
+            <RichText class="mt-4" {markup} />
+        </Disclosure>
+    {:else}
+        <div class="flex items-center w-full text-left">
+            {#if profileImageUrl}
+                <CmsImage
+                    src={profileImageUrl}
+                    width={100}
+                    height={100}
+                    alt={`${speakerContent?.name ?? ''} profile image`}
+                    class="w-[50px] h-[50px] md:w-[70px] md:h-[70px] lg:w-[75px] lg:h-[75px] 2xl:w-[80px] 2xl:h-[80px] rounded-full mr-3"
+                />
+            {/if}
+            <div>
+                <h4
+                    class="text-base sm:text-lg md:text-xl lg:text-2xl 2xl:text-3xl font-bold"
+                >
+                    {session.name}
+                </h4>
+                {#if speakerContent}
+                    <p class="text-sm sm:text-base mt-2">
+                        {#if disableSpeakerLinks}
+                            {speakerContent.name}
+                        {:else}
+                            <a
+                                href={speakerContent.route.path ?? '#'}
+                                class="text-primary"
+                            >
+                                {speakerContent.name}</a
+                            >
+                        {/if}{jobTitle ? `: ${jobTitle}` : ''}
+                    </p>
+                {/if}
+            </div>
+        </div>
+    {/if}
+</div>
diff --git a/src/lib/components/schedule.ts b/src/lib/components/schedule.ts
new file mode 100644
index 0000000..09b2a48
--- /dev/null
+++ b/src/lib/components/schedule.ts
@@ -0,0 +1,142 @@
+import type {
+    ParsedSession,
+    ScheduleItem,
+    TrackWithSessions,
+} from '#lib/types.ts';
+
+export type ScheduleGridCell = string | null | undefined;
+export type ScheduleGridRows = ScheduleGridCell[][];
+
+export const TRACK_HEADER_ID = 'track-header';
+
+export interface VisibleGridState {
+    grid: string[][];
+    visibleGrid: string[][];
+    visibleTracks: TrackWithSessions[];
+    visibleIds: Set<string>;
+}
+
+export function createGridAreaId(id: string): string {
+    return `area-${id.replaceAll('/', '')}`;
+}
+
+export function getEndPath(path: string): string {
+    const parts = path.split('/').filter(Boolean);
+    return parts[parts.length - 1] ?? path;
+}
+
+export function updateGridIds(grid: ScheduleGridRows): string[][] {
+    return grid.map((gridRow) =>
+        gridRow.map((gridColumn) =>
+            gridColumn ? createGridAreaId(gridColumn) : '...',
+        ),
+    );
+}
+
+export function clampStartColumnIndex(
+    startColumnIndex: number,
+    totalColumns: number,
+    visibleColumns: number,
+): number {
+    return Math.max(
+        0,
+        Math.min(startColumnIndex, Math.max(totalColumns - visibleColumns, 0)),
+    );
+}
+
+export function nextStartColumnIndex(
+    startColumnIndex: number,
+    totalColumns: number,
+    visibleColumns: number,
+): number {
+    return clampStartColumnIndex(
+        startColumnIndex + 1,
+        totalColumns,
+        visibleColumns,
+    );
+}
+
+export function previousStartColumnIndex(startColumnIndex: number): number {
+    return Math.max(startColumnIndex - 1, 0);
+}
+
+export function visibleColumnCountForWidth(
+    width: number,
+    totalColumns: number,
+): number {
+    if (totalColumns <= 0) {
+        return 0;
+    }
+
+    if (width <= 1023) {
+        return 1;
+    }
+
+    if (width <= 1279) {
+        return Math.min(totalColumns, 2);
+    }
+
+    return Math.min(totalColumns, 3);
+}
+
+export function flattenAndSortSessions(
+    items: ScheduleItem[] = [],
+): ParsedSession[] {
+    return items
+        .flatMap((item) =>
+            item.contentType === 'track' ? item.children : [item],
+        )
+        .sort(sessionStartSort);
+}
+
+export function getScheduleTracks(
+    items: ScheduleItem[] = [],
+): TrackWithSessions[] {
+    return items.filter(
+        (item): item is TrackWithSessions => item.contentType === 'track',
+    );
+}
+
+export function buildVisibleGridState({
+    rows,
+    tracks,
+    startColumnIndex,
+    visibleColumns,
+}: {
+    rows: ScheduleGridRows;
+    tracks: TrackWithSessions[];
+    startColumnIndex: number;
+    visibleColumns: number;
+}): VisibleGridState {
+    const grid = updateGridIds([tracks.map(() => TRACK_HEADER_ID), ...rows]);
+    const visibleGrid = grid.map((row) =>
+        row.slice(startColumnIndex, startColumnIndex + visibleColumns),
+    );
+
+    return {
+        grid,
+        visibleGrid,
+        visibleTracks: tracks.slice(
+            startColumnIndex,
+            startColumnIndex + visibleColumns,
+        ),
+        visibleIds: new Set(visibleGrid.flat()),
+    };
+}
+
+export function gridTemplateAreas(visibleGrid: string[][]): string {
+    const nonEmptyRows = visibleGrid.filter((row) => row.length > 0);
+
+    if (nonEmptyRows.length === 0) {
+        return 'none';
+    }
+
+    return nonEmptyRows.map((row) => `"${row.join(' ')}"`).join('\n');
+}
+
+function sessionStartSort(a: ParsedSession, b: ParsedSession): number {
+    return (
+        (a.properties?.start?.getTime() ?? 0) -
+        (b.properties?.start?.getTime() ?? 0)
+    );
+}
diff --git a/src/lib/server/getSchedule.ts b/src/lib/server/getSchedule.ts
index 55fe8ba..e921967 100644
--- a/src/lib/server/getSchedule.ts
+++ b/src/lib/server/getSchedule.ts
@@ -1,4 +1,8 @@
-import type { Schedule, ScheduleItem } from '#lib/types.ts';
+import type {
+    PublicScheduleGridCell,
+    Schedule,
+    ScheduleItem,
+} from '#lib/types.ts';
 import { treeByRoutePath } from '#lib/server/umbraco/treeByRoutePath.ts';
 import { parseSession } from '#lib/server/parseSession.ts';
 import { getFirstChildNodeOfType } from '#lib/server/umbraco/getChildNodesOfType.ts';
@@ -46,7 +50,7 @@ export async function getScheduleItems(
 
 export async function getScheduleGrid(
     conferenceId: string,
-): Promise<string[][]> {
+): Promise<PublicScheduleGridCell[][]> {
     const { data, error } = await getUmbracoClient().GET(
         '/api/v1/conference/{conferenceId}/schedule',
         { params: { path: { conferenceId } } },
diff --git a/src/lib/types.ts b/src/lib/types.ts
index e0483ad..e47cdb8 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -26,6 +26,8 @@ export type Sponsor = components['schemas']['SponsorElementModel'];
 
 export type Sessions = Extract<Content, { contentType: 'sessions' }>;
 
+export type Speaker = Extract<Content, { contentType: 'speaker' }>;
+
 export type Session = Extract<Content, { contentType: 'session' }>;
 
 export type ParsedSession = Overwrite<
@@ -47,9 +49,12 @@ export type TrackWithSessions = Track & { children: ParsedSession[] };
 
 export type ScheduleItem = ParsedSession | TrackWithSessions;
 
-export type Schedule = { items: ScheduleItem[]; grid: string[][] };
+export type PublicScheduleGridCell = string | null;
 
-export type Speaker = Extract<Content, { contentType: 'speaker' }>;
+export type Schedule = {
+    items: ScheduleItem[];
+    grid: PublicScheduleGridCell[][];
+};
 
 export type Page = Extract<Content, { contentType: 'home' | 'page' }>;
 
diff --git a/tests/unit/schedule-components.test.ts b/tests/unit/schedule-components.test.ts
new file mode 100644
index 0000000..c8094f4
--- /dev/null
+++ b/tests/unit/schedule-components.test.ts
@@ -0,0 +1,348 @@
+import { render } from 'svelte/server';
+import { describe, expect, it } from 'vitest';
+import ScheduleBlock from '../../src/lib/components/ScheduleBlock.svelte';
+import ScheduleGrid from '../../src/lib/components/ScheduleGrid.svelte';
+import SessionCard from '../../src/lib/components/SessionCard.svelte';
+import {
+    buildVisibleGridState,
+    clampStartColumnIndex,
+    createGridAreaId,
+    flattenAndSortSessions,
+    getEndPath,
+    gridTemplateAreas,
+    nextStartColumnIndex,
+    previousStartColumnIndex,
+    updateGridIds,
+    visibleColumnCountForWidth,
+} from '../../src/lib/components/schedule.ts';
+import type {
+    ParsedConference,
+    ParsedSession,
+    Schedule,
+    Speaker,
+    TrackWithSessions,
+} from '../../src/lib/types.ts';
+
+const bryanSpeaker = {
+    id: 'speaker-bryan',
+    contentType: 'speaker',
+    name: ' Bryan McCann',
+    route: {
+        path: '/2024/speakers/bryan-mccann/',
+        startItem: { id: 'root', path: '/' },
+    },
+    properties: {
+        jobTitle: 'Developer',
+        profileImage: [
+            {
+                id: 'bryan-image',
+                name: 'Bryan',
+                mediaType: 'Image',
+                url: '/media/bryan.jpg',
+                width: 100,
+                height: 100,
+                properties: null,
+            },
+        ],
+    },
+} as unknown as Speaker;
+
+const secondSpeaker = {
+    id: 'speaker-second',
+    contentType: 'speaker',
+    name: 'Second Speaker',
+    route: {
+        path: '/2024/speakers/second-speaker/',
+        startItem: { id: 'root', path: '/' },
+    },
+    properties: {},
+} as unknown as Speaker;
+
+const makeSession = ({
+    id,
+    name,
+    slug,
+    start,
+    speakers = [bryanSpeaker],
+    markup = '<p>Session details</p>',
+}: {
+    id: string;
+    name: string;
+    slug: string;
+    start: string;
+    speakers?: Speaker[];
+    markup?: string;
+}): ParsedSession =>
+    ({
+        id,
+        contentType: 'session',
+        name,
+        route: {
+            path: `/2024/sessions/${slug}/`,
+            startItem: { id: 'root', path: '/' },
+        },
+        properties: {
+            start: new Date(start),
+            end: new Date('2024-10-12T18:00:00.000Z'),
+            speakers,
+            description: markup ? { markup, blocks: [] } : null,
+        },
+    }) as unknown as ParsedSession;
+
+const trackOneSession = makeSession({
+    id: 'session-a',
+    name: 'How Fast Is My App?',
+    slug: 'how-fast-is-my-app-performance-testing-101',
+    start: '2024-10-12T13:30:00.000Z',
+    speakers: [bryanSpeaker, secondSpeaker],
+});
+const trackTwoSession = makeSession({
+    id: 'session-b',
+    name: 'Connect: Why You So Slow?',
+    slug: 'connect-why-you-so-slow',
+    start: '2024-10-12T14:40:00.000Z',
+});
+const workshop = makeSession({
+    id: 'session-workshop',
+    name: 'Yep, You Can Build Hardware',
+    slug: 'yep-you-can-build-hardware',
+    start: '2024-10-12T13:30:00.000Z',
+});
+const topLevelLunch = makeSession({
+    id: 'session-lunch',
+    name: 'Lunch',
+    slug: 'lunch',
+    start: '2024-10-12T17:00:00.000Z',
+    speakers: [],
+});
+
+const tracks = [
+    {
+        id: 'track-one',
+        contentType: 'track',
+        name: 'Track 1 (Coxhealth)',
+        route: {
+            path: '/2024/sessions/track-1/',
+            startItem: { id: 'root', path: '/' },
+        },
+        properties: {},
+        children: [trackTwoSession, trackOneSession],
+    },
+    {
+        id: 'track-two',
+        contentType: 'track',
+        name: 'Track 2 (IDEA loft)',
+        route: {
+            path: '/2024/sessions/track-2/',
+            startItem: { id: 'root', path: '/' },
+        },
+        properties: {},
+        children: [],
+    },
+    {
+        id: 'track-workshop',
+        contentType: 'track',
+        name: 'Workshop',
+        route: {
+            path: '/2024/sessions/workshop/',
+            startItem: { id: 'root', path: '/' },
+        },
+        properties: {},
+        children: [workshop],
+    },
+] as unknown as TrackWithSessions[];
+
+const grid = [
+    ['check-inbreakfast', 'check-inbreakfast', 'check-inbreakfast'],
+    [
+        'how-fast-is-my-app-performance-testing-101',
+        'i-hope-im-not-the-smartest-person-in-the-room',
+        'yep-you-can-build-hardware',
+    ],
+    [
+        'connect-why-you-so-slow',
+        'energize-your-teams-performance-think-like-an-improv-actor',
+        'yep-you-can-build-hardware',
+    ],
+    ['building-powerful-and-intelligent-applications', 'silent-figures', null],
+];
+
+const conference = {
+    id: 'conference-id',
+    contentType: 'conference',
+    name: '2024',
+    route: { path: '/2024/', startItem: { id: 'root', path: '/' } },
+    properties: {
+        date: new Date('2024-10-12T05:00:00.000Z'),
+    },
+} as unknown as ParsedConference;
+
+const schedule: Schedule = {
+    items: [tracks[0], tracks[1], tracks[2], topLevelLunch],
+    grid,
+};
+
+describe('schedule helpers', () => {
+    it('maps public grid IDs, empty cells, and route tails to CSS grid areas', () => {
+        expect(createGridAreaId('yep-you-can-build-hardware/')).toBe(
+            'area-yep-you-can-build-hardware',
+        );
+        expect(getEndPath('/2024/sessions/lunch/')).toBe('lunch');
+        expect(updateGridIds([[null, '', 'lunch']])).toEqual([
+            ['...', '...', 'area-lunch'],
+        ]);
+    });
+
+    it('slices visible tracks and preserves rectangular duplicate areas', () => {
+        const visible = buildVisibleGridState({
+            rows: grid,
+            tracks,
+            startColumnIndex: 1,
+            visibleColumns: 2,
+        });
+
+        expect(visible.visibleTracks.map((track) => track.name)).toEqual([
+            'Track 2 (IDEA loft)',
+            'Workshop',
+        ]);
+        expect(visible.visibleGrid[3]).toEqual([
+            'area-energize-your-teams-performance-think-like-an-improv-actor',
+            'area-yep-you-can-build-hardware',
+        ]);
+        expect(visible.visibleGrid[4]).toEqual(['area-silent-figures', '...']);
+        expect(gridTemplateAreas(visible.visibleGrid)).toContain(
+            'area-track-header area-track-header',
+        );
+    });
+
+    it('matches live breakpoints and clamps controls', () => {
+        expect(visibleColumnCountForWidth(1023, 3)).toBe(1);
+        expect(visibleColumnCountForWidth(1024, 3)).toBe(2);
+        expect(visibleColumnCountForWidth(1279, 3)).toBe(2);
+        expect(visibleColumnCountForWidth(1280, 3)).toBe(3);
+        expect(visibleColumnCountForWidth(1280, 2)).toBe(2);
+        expect(nextStartColumnIndex(1, 3, 2)).toBe(1);
+        expect(previousStartColumnIndex(0)).toBe(0);
+        expect(clampStartColumnIndex(2, 3, 2)).toBe(1);
+    });
+
+    it('flattens track children and top-level sessions by start time', () => {
+        expect(
+            flattenAndSortSessions(schedule.items).map((item) => item.id),
+        ).toEqual([
+            'session-a',
+            'session-workshop',
+            'session-b',
+            'session-lunch',
+        ]);
+    });
+});
+
+describe('schedule SSR components', () => {
+    it('renders the schedule section, date, tracks, and SSR three-column grid', () => {
+        const html = render(ScheduleBlock, {
+            props: { conference, schedule },
+        }).body;
+
+        expect(html).toContain('id="schedule"');
+        expect(html).toContain('>Schedule</h2>');
+        expect(html).toContain('Saturday, October 12th, 2024');
+        expect(html).toContain('Track 1 (Coxhealth)');
+        expect(html).toContain('Track 2 (IDEA loft)');
+        expect(html).toContain('Workshop');
+        expect(html).toContain('--grid-template-columns: 3');
+        expect(html).toContain('area-yep-you-can-build-hardware');
+        expect(html).not.toContain('area-null');
+    });
+
+    it('renders speaker cards with the first speaker, avatar crop, time, and no session link', () => {
+        const html = render(SessionCard, {
+            props: { session: trackOneSession },
+        }).body;
+
+        expect(html).toContain('8:30 AM');
+        expect(html).toContain('How Fast Is My App?');
+        expect(html).toContain('href="/2024/speakers/bryan-mccann/"');
+        expect(html).toContain(' Bryan McCann profile image');
+        expect(html).toContain('width%3D100%26height%3D100');
+        expect(html).toContain('w=128');
+        expect(html).toContain('q=75');
+        expect(html).toContain(
+            'w-[50px] h-[50px] md:w-[70px] md:h-[70px] lg:w-[75px] lg:h-[75px] 2xl:w-[80px] 2xl:h-[80px] rounded-full mr-3',
+        );
+        expect(html).toContain('More');
+        expect(html).toContain('aria-expanded="false"');
+        expect(html).not.toContain('Second Speaker');
+        expect(html).not.toContain(
+            'href="/2024/sessions/how-fast-is-my-app-performance-testing-101/"',
+        );
+    });
+
+    it('keeps collapsed disclosure content and the controlled region in SSR', () => {
+        const html = render(SessionCard, {
+            props: { session: trackOneSession },
+        }).body;
+        const controlledRegion = html.match(/aria-controls="([^"]+)"/);
+
+        expect(controlledRegion?.[1]).toBe('session-card-session-a-panel');
+        expect(html.match(/aria-expanded="false"/g)).toHaveLength(1);
+        expect(html).toContain('id="session-card-session-a-trigger"');
+        expect(html).toContain('id="session-card-session-a-panel"');
+        expect(html).toContain(
+            'aria-labelledby="session-card-session-a-trigger"',
+        );
+        expect(html).toContain('role="region"');
+        expect(html).toContain('<p>Session details</p>');
+        expect(html).toMatch(
+            /class="transition-\[height\][^"]*overflow-hidden" style="[^"]*display:\s*none[^"]*height:\s*0px/,
+        );
+    });
+
+    it('can disable speaker links and still render the speaker text', () => {
+        const html = render(SessionCard, {
+            props: { session: trackOneSession, disableSpeakerLinks: true },
+        }).body;
+
+        expect(html).toContain(' Bryan McCann');
+        expect(html).not.toContain('href="/2024/speakers/bryan-mccann/"');
+    });
+
+    it('renders no-speaker descriptions with a More button', () => {
+        const html = render(SessionCard, {
+            props: { session: topLevelLunch },
+        }).body;
+
+        expect(html).toContain('Lunch');
+        expect(html).toContain('12:00 PM');
+        expect(html).toContain('More');
+        expect(html).not.toContain('profile image');
+    });
+
+    it('uses a valid heading fallback when a description is missing', () => {
+        const sessionWithoutDescription = makeSession({
+            id: 'session-no-description',
+            name: 'No Description',
+            slug: 'no-description',
+            start: '2024-10-12T20:30:00.000Z',
+            markup: '',
+        });
+        const html = render(SessionCard, {
+            props: { session: sessionWithoutDescription },
+        }).body;
+
+        expect(html).toContain('<h4');
+        expect(html).toContain('No Description');
+        expect(html).not.toContain('More');
+        expect(html).not.toContain('<h4><div');
+    });
+
+    it('renders an empty schedule gracefully', () => {
+        const html = render(ScheduleGrid, {
+            props: { grid: [], tracks: [], sessions: [] },
+        }).body;
+
+        expect(html).toContain('schedule-grid');
+        expect(html).toContain('--grid-template-columns: 0');
+        expect(html).toContain('--grid-template-areas: none');
+    });
+});