diff --git a/.gitignore b/.gitignore
index 9928ee0..ded0492 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,9 @@
 # build output
 dist/
 
-# News OGP images (generated at build / dev server start)
+# OGP images (generated at build / dev server start)
 public/og/news/*.png
+public/og/timetable/*.png
 
 # generated types
 .astro/
diff --git a/astro.config.mjs b/astro.config.mjs
index f133dec..a0955d7 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -11,4 +11,7 @@ export default defineConfig({
     defaultLocale: "ja",
     locales: ["en", "ja"],
   },
+  devToolbar: {
+    enabled: false,
+  },
 });
diff --git a/public/og/timetable/.gitkeep b/public/og/timetable/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/public/session_ogp_frame.jpg b/public/session_ogp_frame.jpg
new file mode 100644
index 0000000..cc421db
Binary files /dev/null and b/public/session_ogp_frame.jpg differ
diff --git a/src/assets/icons/room.svg b/src/assets/icons/room.svg
index e43c94e..1ea4387 100644
--- a/src/assets/icons/room.svg
+++ b/src/assets/icons/room.svg
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 21C3.71667 21 3.47917 20.9042 3.2875 20.7125C3.09583 20.5208 3 20.2833 3 20C3 19.7167 3.09583 19.4792 3.2875 19.2875C3.47917 19.0958 3.71667 19 4 19H5V5C5 4.45 5.19583 3.97917 5.5875 3.5875C5.97917 3.19583 6.45 3 7 3H17C17.55 3 18.0208 3.19583 18.4125 3.5875C18.8042 3.97917 19 4.45 19 5V19H20C20.2833 19 20.5208 19.0958 20.7125 19.2875C20.9042 19.4792 21 19.7167 21 20C21 20.2833 20.9042 20.5208 20.7125 20.7125C20.5208 20.9042 20.2833 21 20 21H4ZM17 19V5H12.5V3.9C13.2333 4.03333 13.8333 4.375 14.3 4.925C14.7667 5.475 15 6.11667 15 6.85V17.95C15 18.4333 14.8417 18.8625 14.525 19.2375C14.2083 19.6125 13.8083 19.8417 13.325 19.925V19H17ZM11 13C11.2833 13 11.5208 12.9042 11.7125 12.7125C11.9042 12.5208 12 12.2833 12 12C12 11.7167 11.9042 11.4792 11.7125 11.2875C11.5208 11.0958 11.2833 11 11 11C10.7167 11 10.4792 11.0958 10.2875 11.2875C10.0958 11.4792 10 11.7167 10 12C10 12.2833 10.0958 12.5208 10.2875 12.7125C10.4792 12.9042 10.7167 13 11 13Z" fill="#333333"/>
+<path d="M4 21C3.71667 21 3.47917 20.9042 3.2875 20.7125C3.09583 20.5208 3 20.2833 3 20C3 19.7167 3.09583 19.4792 3.2875 19.2875C3.47917 19.0958 3.71667 19 4 19H5V5C5 4.45 5.19583 3.97917 5.5875 3.5875C5.97917 3.19583 6.45 3 7 3H17C17.55 3 18.0208 3.19583 18.4125 3.5875C18.8042 3.97917 19 4.45 19 5V19H20C20.2833 19 20.5208 19.0958 20.7125 19.2875C20.9042 19.4792 21 19.7167 21 20C21 20.2833 20.9042 20.5208 20.7125 20.7125C20.5208 20.9042 20.2833 21 20 21H4ZM17 19V5H12.5V3.9C13.2333 4.03333 13.8333 4.375 14.3 4.925C14.7667 5.475 15 6.11667 15 6.85V17.95C15 18.4333 14.8417 18.8625 14.525 19.2375C14.2083 19.6125 13.8083 19.8417 13.325 19.925V19H17ZM11 13C11.2833 13 11.5208 12.9042 11.7125 12.7125C11.9042 12.5208 12 12.2833 12 12C12 11.7167 11.9042 11.4792 11.7125 11.2875C11.5208 11.0958 11.2833 11 11 11C10.7167 11 10.4792 11.0958 10.2875 11.2875C10.0958 11.4792 10 11.7167 10 12C10 12.2833 10.0958 12.5208 10.2875 12.7125C10.4792 12.9042 10.7167 13 11 13Z"/>
 </svg>
diff --git a/src/assets/icons/star.svg b/src/assets/icons/star.svg
new file mode 100644
index 0000000..6d191e9
--- /dev/null
+++ b/src/assets/icons/star.svg
@@ -0,0 +1,3 @@
+<svg viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.70769 9.13333L2.94103 10.8C2.8188 10.8778 2.69103 10.9111 2.55769 10.9C2.42436 10.8889 2.30769 10.8444 2.20769 10.7667C2.10769 10.6889 2.02991 10.5917 1.97436 10.475C1.9188 10.3583 1.90769 10.2278 1.94103 10.0833L2.67436 6.93333L0.224359 4.81667C0.113248 4.71667 0.0438034 4.60278 0.0160256 4.475C-0.0117521 4.34722 -0.0034188 4.22222 0.0410256 4.1C0.0854701 3.97778 0.152137 3.87778 0.241026 3.8C0.329915 3.72222 0.452137 3.67222 0.607692 3.65L3.84103 3.36667L5.09103 0.4C5.14658 0.266667 5.23269 0.166667 5.34936 0.1C5.46603 0.0333333 5.58547 0 5.70769 0C5.82992 0 5.94936 0.0333333 6.06603 0.1C6.18269 0.166667 6.2688 0.266667 6.32436 0.4L7.57436 3.36667L10.8077 3.65C10.9632 3.67222 11.0855 3.72222 11.1744 3.8C11.2632 3.87778 11.3299 3.97778 11.3744 4.1C11.4188 4.22222 11.4271 4.34722 11.3994 4.475C11.3716 4.60278 11.3021 4.71667 11.191 4.81667L8.74103 6.93333L9.47436 10.0833C9.50769 10.2278 9.49658 10.3583 9.44103 10.475C9.38547 10.5917 9.30769 10.6889 9.20769 10.7667C9.10769 10.8444 8.99103 10.8889 8.85769 10.9C8.72436 10.9111 8.59658 10.8778 8.47436 10.8L5.70769 9.13333Z" />
+</svg>
diff --git a/src/assets/icons/x.svg b/src/assets/icons/x.svg
index 91386be..495d859 100644
--- a/src/assets/icons/x.svg
+++ b/src/assets/icons/x.svg
@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M13.1173 10.6157L19.4459 2.9939H17.9463L12.4511 9.61177L8.06215 2.9939H3L9.63697 13.0013L3 20.9939H4.49977L10.3028 14.0052L14.9379 20.9939H20L13.1169 10.6157H13.1173ZM11.0632 13.0895L10.3907 12.093L5.04016 4.16361H7.34371L11.6617 10.5628L12.3341 11.5594L17.947 19.8774H15.6434L11.0632 13.0898V13.0895Z" fill="#333333"/>
 </svg>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 87e8e5b..667c556 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -152,8 +152,8 @@ const tokushouText =
   }
 
   .social-icon {
-    width: 24px;
-    height: 24px;
+    width: 30px;
+    height: 30px;
   }
 
   hr {
diff --git a/src/components/GlobalStyles.astro b/src/components/GlobalStyles.astro
index 9b1bc6f..4dfe6b5 100644
--- a/src/components/GlobalStyles.astro
+++ b/src/components/GlobalStyles.astro
@@ -17,6 +17,8 @@
     --primitive-light-cyan: #eefffd;
     --primitive-red: #fd7045;
     --primitive-color: #ffffff;
+    --primitive-green: #4fc35b;
+    --primitive-purple: #8585dc;
 
     --radius-section: 80px;
     --radius-section-sp: 80px;
@@ -28,10 +30,13 @@
     --surface-disabled: var(--primitive-light-gray);
     --surface-primary-dark: var(--primitive-red);
     --surface-secondary-dark: var(--primitive-navy);
-    --surface-room-a: var(--primitive-blue);
-    --surface-room-a-light: var(--primitive-light-blue);
-    --surface-room-b: var(--primitive-cyan);
-    --surface-room-b-light: var(--primitive-light-cyan);
+    --surface-session: var(--primitive-blue);
+    --surface-session-light: var(--primitive-light-blue);
+    --surface-workshop: var(--primitive-cyan);
+    --surface-workshop-light: var(--primitive-light-cyan);
+    --surface-beginner: var(--primitive-green);
+    --surface-intermediate: var(--primitive-blue);
+    --surface-advanced: var(--primitive-purple);
 
     --text-primary: var(--primitive-black);
     --text-secondary: var(--primitive-dark-gray);
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 2047cbc..40f2ac1 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -191,7 +191,13 @@ const pathname = Astro.url.pathname;
       <li class="navigation-menu-item">
         <TextLink href={getRelativeLocaleUrl(currentLocale)} text="Home" />
       </li>
-      <li>
+      <li class="navigation-menu-item">
+        <TextLink
+          href={getRelativeLocaleUrl(currentLocale, "timetable")}
+          text="Timetable"
+        />
+      </li>
+      <li class="navigation-menu-item">
         <TextLink
           href={getRelativeLocaleUrl(currentLocale, "staffs")}
           text="Staffs"
@@ -205,11 +211,6 @@ const pathname = Astro.url.pathname;
         />
       </li>
       <!-- <li>
-        <a href={getRelativeLocaleUrl(currentLocale, "timetable")}>
-          Timetable
-        </a>
-      </li>
-      <li>
         <a href={getRelativeLocaleUrl(currentLocale, "jobboard")}>
           Job Board
         </a>
diff --git a/src/components/news/NewsArticlePage.astro b/src/components/news/NewsArticlePage.astro
index 0b124f4..79e5e37 100644
--- a/src/components/news/NewsArticlePage.astro
+++ b/src/components/news/NewsArticlePage.astro
@@ -3,7 +3,7 @@ import { render, type CollectionEntry } from "astro:content";
 import { getRelativeLocaleUrl } from "astro:i18n";
 import { constants } from "../../constants";
 import SubPage from "../../layouts/SubPage.astro";
-import { getNewsOgImagePublicPath } from "../../utils/generateNewsOgImage";
+import { getNewsOgImagePublicPath } from "../../utils/generateOgImage";
 import BackLink from "../ui/BackLink.astro";
 import SectionTitle from "../ui/SectionTitle.astro";
 
diff --git a/src/components/timetable/DifficultyBadge.astro b/src/components/timetable/DifficultyBadge.astro
new file mode 100644
index 0000000..b182238
--- /dev/null
+++ b/src/components/timetable/DifficultyBadge.astro
@@ -0,0 +1,88 @@
+---
+import StarIcon from "../../assets/icons/star.svg";
+
+export type DifficultyBadgeVariant = "card" | "detail";
+
+type Props = {
+  difficulty: "beginner" | "intermediate" | "advanced";
+  variant?: DifficultyBadgeVariant;
+};
+
+const { difficulty, variant = "card" } = Astro.props as Props;
+
+const textClass =
+  variant === "detail" ? "text-body-large-strong" : "text-body-small-strong";
+
+const currentLocale = Astro.currentLocale || "ja";
+
+const displayText =
+  currentLocale === "ja"
+    ? {
+        beginner: "初心者向け",
+        intermediate: "中級者向け",
+        advanced: "上級者向け",
+      }
+    : {
+        beginner: "Beginner",
+        intermediate: "Intermediate",
+        advanced: "Advanced",
+      };
+---
+
+<div class="badge" data-difficulty={difficulty} data-variant={variant}>
+  <StarIcon class="star-icon" />
+  <span class={textClass}>{displayText[difficulty]}</span>
+</div>
+
+<style>
+  .badge {
+    display: flex;
+    gap: var(--space-xxs);
+    color: var(--text-on-fill);
+    border-radius: var(--radius-objects);
+    width: fit-content;
+    align-items: center;
+  }
+
+  .badge[data-difficulty="beginner"] {
+    background-color: var(--surface-beginner);
+  }
+
+  .badge[data-difficulty="intermediate"] {
+    background-color: var(--surface-intermediate);
+  }
+
+  .badge[data-difficulty="advanced"] {
+    background-color: var(--surface-advanced);
+  }
+
+  .badge span {
+    margin-top: -2px;
+  }
+
+  .star-icon {
+    fill: var(--text-on-fill);
+  }
+
+  .badge[data-variant="card"] {
+    padding: 0 var(--space-xs) 0 var(--space-xxs);
+  }
+
+  .badge[data-variant="detail"] {
+    padding: var(--space-xxxs) var(--space-s) var(--space-xxxs) var(--space-xs);
+  }
+
+  .badge[data-variant="card"] .star-icon {
+    width: 12px;
+    height: 12px;
+  }
+
+  .badge[data-variant="detail"] .star-icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  .badge[data-variant="detail"] span {
+    margin-top: 0;
+  }
+</style>
diff --git a/src/components/timetable/card.astro b/src/components/timetable/card.astro
new file mode 100644
index 0000000..eedb2ec
--- /dev/null
+++ b/src/components/timetable/card.astro
@@ -0,0 +1,31 @@
+---
+import type { Program } from "./program";
+import LongSessionCard from "./card/LongSession.astro";
+import OrganizerCard from "./card/Organizer.astro";
+import ShortTalkCard from "./card/ShortTalk.astro";
+import SponsorSessionCard from "./card/SponsorSession.astro";
+import WorkshopCard from "./card/Workshop.astro";
+import BlankCard from "./card/Blank.astro";
+
+type Props = {
+  program: Program;
+};
+
+const { program } = Astro.props as Props;
+---
+
+{
+  program.type === "organizer" ? (
+    <OrganizerCard program={program} />
+  ) : program.type === "longSession" ? (
+    <LongSessionCard program={program} />
+  ) : program.type === "shortTalk" ? (
+    <ShortTalkCard program={program} />
+  ) : program.type === "sponsorSession" ? (
+    <SponsorSessionCard program={program} />
+  ) : program.type === "workshop" ? (
+    <WorkshopCard program={program} />
+  ) : program.type === "blank" ? (
+    <BlankCard spHeight={program.spHeight} />
+  ) : null
+}
diff --git a/src/components/timetable/card/Blank.astro b/src/components/timetable/card/Blank.astro
new file mode 100644
index 0000000..86fec08
--- /dev/null
+++ b/src/components/timetable/card/Blank.astro
@@ -0,0 +1,34 @@
+---
+interface Props {
+  spHeight?: string;
+}
+
+const { spHeight } = Astro.props;
+
+const isCollapsedOnSp =
+  spHeight === undefined || spHeight === "0" || spHeight === "0px";
+---
+
+<div
+  class="card"
+  data-blank-collapsed-sp={isCollapsedOnSp ? "" : undefined}
+  style={!isCollapsedOnSp && spHeight
+    ? `--blank-sp-height: ${spHeight}`
+    : undefined}
+></div>
+
+<style>
+  .card {
+    height: 100%;
+  }
+
+  @media screen and (max-width: 768px) {
+    .card[data-blank-collapsed-sp] {
+      display: none;
+    }
+
+    .card:not([data-blank-collapsed-sp]) {
+      height: var(--blank-sp-height);
+    }
+  }
+</style>
diff --git a/src/components/timetable/card/LongSession.astro b/src/components/timetable/card/LongSession.astro
new file mode 100644
index 0000000..5770831
--- /dev/null
+++ b/src/components/timetable/card/LongSession.astro
@@ -0,0 +1,104 @@
+---
+import type { ProgramLongSession } from "../program";
+import DifficultyBadge from "../DifficultyBadge.astro";
+import { getRelativeLocaleUrl } from "astro:i18n";
+
+type Props = {
+  program: Extract<ProgramLongSession, { type: "longSession" }>;
+};
+
+const { program } = Astro.props as Props;
+const currentLocale = Astro.currentLocale || "ja";
+---
+
+<div class="card">
+  <div class="metadata-container text-body-medium-strong">
+    <div class="time-container">
+      <span>{program.timeString}</span>
+    </div>
+    <DifficultyBadge difficulty={program.difficulty} />
+  </div>
+  <a
+    class="title-container text-body-large-strong"
+    href={getRelativeLocaleUrl(currentLocale, `timetable/${program.id}`)}
+    class="text-body-large-strong"
+  >
+    <div class="text-wrapper">
+      <span>{program.title}</span>
+    </div>
+  </a>
+  <div class="footer-container">
+    <div class="speaker-container">
+      <img class="icon" src={program.speaker.avatar} />
+      <span class="text-body-small-strong">{program.speaker.name}</span>
+    </div>
+    <span class="text-body-small">Long Session(40min)</span>
+  </div>
+</div>
+
+<style>
+  .card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xxxs);
+    padding: var(--space-xs) var(--space-s);
+    border-radius: var(--radius-objects);
+    background-color: var(--surface-session-light);
+    min-height: 300px;
+    box-sizing: border-box;
+  }
+
+  .card .metadata-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .card .metadata-container .time-container {
+    flex: 1;
+  }
+
+  .card .title-container {
+    color: var(--text-primary);
+    transition: color 0.1s ease-in-out;
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    height: 56px;
+  }
+
+  .card .title-container:hover {
+    color: var(--text-accent);
+  }
+
+  .card .title-container .text-wrapper {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    height: fit-content;
+  }
+
+  .card .title-container span {
+    margin: auto 0;
+    height: fit-content;
+  }
+
+  .card .footer-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  .card .footer-container .speaker-container {
+    display: flex;
+    gap: var(--space-xxxs);
+  }
+
+  .card .footer-container .speaker-container .icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+</style>
diff --git a/src/components/timetable/card/Organizer.astro b/src/components/timetable/card/Organizer.astro
new file mode 100644
index 0000000..956a09b
--- /dev/null
+++ b/src/components/timetable/card/Organizer.astro
@@ -0,0 +1,46 @@
+---
+import type { ProgramOrganizer } from "../program";
+
+type Props = {
+  program: ProgramOrganizer;
+};
+
+const { program } = Astro.props as Props;
+const { height, spHeight } = program;
+
+const style = [
+  height ? `--organizer-height: ${height}` : null,
+  spHeight ? `--organizer-sp-height: ${spHeight}` : null,
+]
+  .filter(Boolean)
+  .join("; ");
+---
+
+<div class="card" style={style || undefined}>
+  <div class="time-container text-body-medium-strong">
+    <span>{program.timeString}</span>
+  </div>
+  <div class="title-container text-body-large-strong">
+    <span>{program.title}</span>
+  </div>
+</div>
+
+<style>
+  .card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xxxs);
+    padding: var(--space-xs) var(--space-s);
+    border: 2px solid var(--surface-disabled);
+    border-radius: var(--radius-objects);
+    height: var(--organizer-height, auto);
+    box-sizing: border-box;
+    height: 100%;
+  }
+
+  @media screen and (max-width: 768px) {
+    .card {
+      height: var(--organizer-sp-height, auto);
+    }
+  }
+</style>
diff --git a/src/components/timetable/card/ShortTalk.astro b/src/components/timetable/card/ShortTalk.astro
new file mode 100644
index 0000000..4c9ddb2
--- /dev/null
+++ b/src/components/timetable/card/ShortTalk.astro
@@ -0,0 +1,104 @@
+---
+import type { ProgramShortTalk } from "../program";
+import DifficultyBadge from "../DifficultyBadge.astro";
+import { getRelativeLocaleUrl } from "astro:i18n";
+
+type Props = {
+  program: Extract<ProgramShortTalk, { type: "shortTalk" }>;
+};
+
+const { program } = Astro.props as Props;
+const currentLocale = Astro.currentLocale || "ja";
+---
+
+<div class="card">
+  <div class="metadata-container text-body-medium-strong">
+    <div class="time-container">
+      <span>{program.timeString}</span>
+    </div>
+    <DifficultyBadge difficulty={program.difficulty} />
+  </div>
+  <a
+    class="title-container text-body-large-strong"
+    href={getRelativeLocaleUrl(currentLocale, `timetable/${program.id}`)}
+    class="text-body-large-strong"
+  >
+    <div class="text-wrapper">
+      <span>{program.title}</span>
+    </div>
+  </a>
+  <div class="footer-container">
+    <div class="speaker-container">
+      <img class="icon" src={program.speaker.avatar} />
+      <span class="text-body-small-strong">{program.speaker.name}</span>
+    </div>
+    <span class="text-body-small">Short Talk(20min)</span>
+  </div>
+</div>
+
+<style>
+  .card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xxxs);
+    padding: var(--space-xs) var(--space-s);
+    border-radius: var(--radius-objects);
+    background-color: var(--surface-session-light);
+    min-height: 150px;
+    box-sizing: border-box;
+  }
+
+  .card .metadata-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .card .metadata-container .time-container {
+    flex: 1;
+  }
+
+  .card .title-container {
+    color: var(--text-primary);
+    transition: color 0.1s ease-in-out;
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    height: 56px;
+  }
+
+  .card .title-container:hover {
+    color: var(--text-accent);
+  }
+
+  .card .title-container .text-wrapper {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    height: fit-content;
+  }
+
+  .card .title-container span {
+    margin: auto 0;
+    height: fit-content;
+  }
+
+  .card .footer-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  .card .footer-container .speaker-container {
+    display: flex;
+    gap: var(--space-xxxs);
+  }
+
+  .card .footer-container .speaker-container .icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+</style>
diff --git a/src/components/timetable/card/SponsorSession.astro b/src/components/timetable/card/SponsorSession.astro
new file mode 100644
index 0000000..90fccb4
--- /dev/null
+++ b/src/components/timetable/card/SponsorSession.astro
@@ -0,0 +1,148 @@
+---
+import type { ProgramSponsorSession } from "../program";
+import DifficultyBadge from "../DifficultyBadge.astro";
+import { getRelativeLocaleUrl } from "astro:i18n";
+
+type Props = {
+  program: Extract<ProgramSponsorSession, { type: "sponsorSession" }>;
+};
+
+const { program } = Astro.props as Props;
+const currentLocale = Astro.currentLocale || "ja";
+const isPlaceholder = program.isPlaceholder === true;
+const sessionTypeLabel =
+  currentLocale === "ja"
+    ? "ランチ・ドリンクセッション(15min)"
+    : "Lunch & Drink Session(15min)";
+const placeholderTitle =
+  currentLocale === "ja" ? "詳細未定" : "Coming Soon";
+---
+
+<div class="card" class:list={[{ "card--placeholder": isPlaceholder }]}>
+  <div class="metadata-container text-body-medium-strong">
+    <div class="time-container">
+      <span>{program.timeString}</span>
+    </div>
+    <div class="sponsored-session-badge">
+      <span class="text-body-small">Sponsored Session</span>
+    </div>
+    {!isPlaceholder && <DifficultyBadge difficulty={program.difficulty} />}
+  </div>
+  {
+    isPlaceholder ? (
+      <div class="title-container title-container--placeholder text-body-large-strong">
+        <span>{placeholderTitle}</span>
+      </div>
+    ) : (
+      <a
+        class="title-container text-body-large-strong"
+        href={getRelativeLocaleUrl(currentLocale, `timetable/${program.id}`)}
+      >
+        <span>{program.title}</span>
+      </a>
+    )
+  }
+  <div class="footer-container">
+    {
+      !isPlaceholder && (
+        <div class="speaker-container">
+          <img class="icon" src={program.speaker.avatar} />
+          <span class="text-body-small-strong">{program.speaker.name}</span>
+        </div>
+      )
+    }
+    <span class="text-body-small">{sessionTypeLabel}</span>
+  </div>
+</div>
+
+<style>
+  .card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xxxs);
+    padding: var(--space-xs) var(--space-s);
+    border-radius: var(--radius-objects);
+    background-color: var(--surface-session-light);
+    min-height: 150px;
+    box-sizing: border-box;
+  }
+
+  .card .metadata-container {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xxxs);
+  }
+
+  .card .metadata-container .time-container {
+    flex: 1;
+  }
+
+  .card .title-container {
+    color: var(--text-primary);
+    transition: color 0.1s ease-in-out;
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    height: 56px;
+  }
+
+  .card .title-container:hover {
+    color: var(--text-accent);
+  }
+
+  .card .title-container .text-wrapper {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    height: fit-content;
+  }
+
+  .card .title-container span {
+    margin: auto 0;
+    height: fit-content;
+  }
+
+  .card .title-container--placeholder {
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    height: 56px;
+  }
+
+  .card--placeholder .footer-container {
+    justify-content: flex-end;
+  }
+
+  .card .footer-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  .card .footer-container .speaker-container {
+    display: flex;
+    gap: var(--space-xxxs);
+  }
+
+  .card .footer-container .speaker-container .icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
+  .card .sponsored-session-badge {
+    background-color: var(--text-secondary);
+    padding: 0 var(--space-xs);
+    color: var(--text-on-fill);
+    border-radius: var(--radius-objects);
+    height: fit-content;
+    display: flex;
+  }
+
+  .card .sponsored-session-badge span {
+    margin-top: -2px;
+  }
+</style>
diff --git a/src/components/timetable/card/Workshop.astro b/src/components/timetable/card/Workshop.astro
new file mode 100644
index 0000000..bc110e6
--- /dev/null
+++ b/src/components/timetable/card/Workshop.astro
@@ -0,0 +1,112 @@
+---
+import type { ProgramWorkshop } from "../program";
+import DifficultyBadge from "../DifficultyBadge.astro";
+import { getRelativeLocaleUrl } from "astro:i18n";
+
+type Props = {
+  program: Extract<ProgramWorkshop, { type: "workshop" }>;
+};
+
+const { program } = Astro.props as Props;
+const currentLocale = Astro.currentLocale || "ja";
+
+const workshopHeights = {
+  "40min": "300px",
+  "90min": "600px",
+} as const satisfies Record<typeof program.duration, string>;
+---
+
+<div
+  class="card"
+  style={`--workshop-height: ${workshopHeights[program.duration]}`}
+>
+  <div class="metadata-container text-body-medium-strong">
+    <div class="time-container">
+      <span>{program.timeString}</span>
+    </div>
+    <DifficultyBadge difficulty={program.difficulty} />
+  </div>
+  <a
+    class="title-container text-body-large-strong"
+    href={getRelativeLocaleUrl(currentLocale, `timetable/${program.id}`)}
+    class="text-body-large-strong"
+  >
+    <div class="text-wrapper">
+      <span>{program.title}</span>
+    </div>
+  </a>
+  <div class="footer-container">
+    <div class="speaker-container">
+      <img class="icon" src={program.speaker.avatar} />
+      <span class="text-body-small-strong">{program.speaker.name}</span>
+    </div>
+    <span class="text-body-small">Workshop({program.duration})</span>
+  </div>
+</div>
+
+<style>
+  .card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xxxs);
+    padding: var(--space-xs) var(--space-s);
+    border-radius: var(--radius-objects);
+    background-color: var(--surface-workshop-light);
+    height: var(--workshop-height);
+    box-sizing: border-box;
+  }
+
+  .card .metadata-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .card .metadata-container .time-container {
+    flex: 1;
+  }
+
+  .card .title-container {
+    color: var(--text-primary);
+    transition: color 0.1s ease-in-out;
+    display: flex;
+    overflow: hidden;
+    align-items: center;
+    height: 56px;
+  }
+
+  .card .title-container:hover {
+    color: var(--text-accent);
+  }
+
+  .card .title-container .text-wrapper {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    height: fit-content;
+  }
+
+  .card .title-container span {
+    margin: auto 0;
+    height: fit-content;
+  }
+
+  .card .footer-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  .card .footer-container .speaker-container {
+    display: flex;
+    gap: var(--space-xxxs);
+  }
+
+  .card .footer-container .speaker-container .icon {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+</style>
diff --git a/src/components/timetable/detail/ProgramDetailPage.astro b/src/components/timetable/detail/ProgramDetailPage.astro
new file mode 100644
index 0000000..f94a0c7
--- /dev/null
+++ b/src/components/timetable/detail/ProgramDetailPage.astro
@@ -0,0 +1,268 @@
+---
+import { getRelativeLocaleUrl } from "astro:i18n";
+import { constants } from "../../../constants";
+import SubPage from "../../../layouts/SubPage.astro";
+import { getProgramOgImagePublicPath } from "../../../utils/generateOgImage";
+import BackLink from "../../ui/BackLink.astro";
+import SectionTitle from "../../ui/SectionTitle.astro";
+import DifficultyBadge from "../DifficultyBadge.astro";
+import type { ProgramSession } from "./programDetail";
+import RoomIcon from "../../../assets/icons/room.svg";
+import XLogo from "../../../assets/icons/x.svg";
+
+interface Props {
+  program: ProgramSession;
+}
+
+const { program } = Astro.props;
+const { type } = program;
+const currentLocale = Astro.currentLocale || "ja";
+
+const sectionTitle = currentLocale === "ja" ? "タイムテーブル" : "Timetable";
+const backLinkText =
+  currentLocale === "ja" ? "タイムテーブルに戻る" : "Back to Timetable";
+
+function getSessionTypeLabel(
+  sessionProgram: ProgramSession,
+  locale: string,
+): string {
+  switch (sessionProgram.type) {
+    case "longSession":
+      return "Long Session(40min)";
+    case "shortTalk":
+      return "Short Talk(20min)";
+    case "sponsorSession":
+      return locale === "ja"
+        ? "ランチ・ドリンクセッション(15min)"
+        : "Lunch & Drink Session(15min)";
+    case "workshop":
+      return `Workshop(${sessionProgram.duration})`;
+  }
+}
+
+function getRoomLabel(
+  room: ProgramSession["room"],
+  type: ProgramSession["type"],
+): string {
+  const isWorkshop = type === "workshop";
+  if (isWorkshop) {
+    return room === "roomA" ? "WorkshopA" : "WorkshopB";
+  }
+  return room === "roomA" ? "RoomA" : "RoomB";
+}
+
+const sessionTypeLabel = getSessionTypeLabel(program, currentLocale);
+const roomLabel = getRoomLabel(program.room, type);
+
+const timetableParams = new URLSearchParams({
+  tab: type === "workshop" ? "workshop" : "session",
+  room: program.room === "roomB" ? "b" : "a",
+});
+const timetableUrl = `${getRelativeLocaleUrl(currentLocale, "timetable")}?${timetableParams.toString()}`;
+const description =
+  program.description ??
+  `${program.title} - ${sectionTitle} | ${constants.pageTitle}`;
+---
+
+<SubPage
+  pageTitleJa="タイムテーブル"
+  pageTitleEn="Timetable"
+  documentTitle={`${program.title} - ${sectionTitle} | ${constants.pageTitle}`}
+  description={description}
+  ogImage={getProgramOgImagePublicPath(program.id)}
+  ogType="article"
+  twitterCard="summary_large_image"
+>
+  <div class="header">
+    <BackLink href={timetableUrl} text={backLinkText} />
+    <SectionTitle>
+      <span class="section-title">{program.title}</span>
+    </SectionTitle>
+    <div class="metadata text-body-large-strong">
+      <div class="badges">
+        <div class:list={["room-badge", `room-badge--${type}`]}>
+          <RoomIcon class="room-icon" />
+          <span>{roomLabel}</span>
+        </div>
+        {
+          type === "sponsorSession" && (
+            <div class="sponsored-session-badge">
+              <span>Sponsored Session</span>
+            </div>
+          )
+        }
+        <DifficultyBadge difficulty={program.difficulty} variant="detail" />
+      </div>
+      <div class="session-type-label">
+        <span class="text-body-large-strong">{sessionTypeLabel}</span>
+      </div>
+    </div>
+  </div>
+
+  <section id="content">
+    <div class="description">{program.description}</div>
+  </section>
+
+  <section id="speaker">
+    <div class="speaker-info">
+      <div class="speaker-info-name">
+        <img
+          class="speaker-avatar"
+          src={program.speaker.avatar}
+          alt={program.speaker.name}
+        />
+        <span class="text-body-medium-strong">{program.speaker.name}</span>
+      </div>
+      {
+        program.speaker.xUrl && (
+          <a
+            href={program.speaker.xUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="social-link"
+            aria-label={`X Link`}
+          >
+            <XLogo />
+          </a>
+        )
+      }
+    </div>
+    {
+      program.speaker.company && (
+        <div class="company-name text-body-small-strong">
+          <p>{program.speaker.company}</p>
+        </div>
+      )
+    }
+    {
+      program.speaker.description && (
+        <div class="text-body-medium">
+          <p>{program.speaker.description}</p>
+        </div>
+      )
+    }
+  </section></SubPage
+>
+
+<style>
+  .header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-s);
+    margin-bottom: var(--space-m);
+  }
+
+  .section-title {
+    display: inline-block;
+  }
+
+  .section-title::first-letter {
+    color: var(--text-accent);
+  }
+
+  .metadata {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: var(--text-on-fill);
+  }
+
+  .badges {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-xxs);
+  }
+
+  .room-badge {
+    display: flex;
+    align-items: center;
+    gap: var(--space-xxs);
+    padding: var(--space-xxxs) var(--space-s) var(--space-xxxs) var(--space-xs);
+    border-radius: var(--radius-objects);
+  }
+
+  .room-badge--longSession,
+  .room-badge--shortTalk,
+  .room-badge--sponsorSession {
+    background-color: var(--surface-session);
+  }
+
+  .room-badge .room-icon {
+    fill: var(--text-on-fill);
+    size: 24px;
+  }
+
+  .room-badge--workshop {
+    background-color: var(--surface-workshop);
+  }
+
+  .sponsored-session-badge {
+    background-color: var(--text-secondary);
+    padding: var(--space-xxxs) var(--space-xs);
+    border-radius: var(--radius-objects);
+    display: flex;
+  }
+
+  .sponsored-session-badge span {
+    margin-top: -2px;
+  }
+
+  .session-type-label {
+    color: var(--text-accent);
+  }
+
+  section#content {
+    margin-bottom: var(--space-m);
+  }
+
+  section#content .description {
+    white-space: pre-wrap;
+  }
+
+  section#speaker {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--surface-primary);
+    border: 2px solid var(--surface-disabled);
+    border-radius: var(--radius-objects);
+    gap: 8px;
+    padding: var(--space-m);
+  }
+
+  section#speaker p {
+    margin: 0;
+  }
+
+  section#speaker .speaker-info {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-xs);
+  }
+
+  section#speaker .speaker-info-name {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-xxs);
+  }
+
+  section#speaker .speaker-avatar {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    object-fit: cover;
+    display: block;
+  }
+
+  section#speaker .social-link {
+    display: flex;
+    width: 30px;
+    height: 30px;
+  }
+
+  section#speaker .company-name {
+    color: var(--text-secondary);
+  }
+</style>
diff --git a/src/components/timetable/detail/programDetail.ts b/src/components/timetable/detail/programDetail.ts
new file mode 100644
index 0000000..24221ee
--- /dev/null
+++ b/src/components/timetable/detail/programDetail.ts
@@ -0,0 +1,16 @@
+import { getProgramSessions, type ProgramSession } from "../program";
+
+export { getProgramSessions };
+export type { ProgramSession };
+
+type ProgramDetailStaticPath = {
+  params: { programID: string };
+  props: { program: ProgramSession };
+};
+
+export function getProgramDetailStaticPaths(): ProgramDetailStaticPath[] {
+  return getProgramSessions().map((program) => ({
+    params: { programID: program.id },
+    props: { program },
+  }));
+}
diff --git a/src/components/timetable/index.astro b/src/components/timetable/index.astro
new file mode 100644
index 0000000..a211d15
--- /dev/null
+++ b/src/components/timetable/index.astro
@@ -0,0 +1,432 @@
+---
+import { sessionSchedule, workshopSchedule } from "./schedule";
+import Card from "./card.astro";
+import { getProgram } from "./program";
+
+export type TimetableTab = "session" | "workshop";
+export type TimetableRoom = "roomA" | "roomB";
+
+interface Props {
+  initialTab?: TimetableTab;
+  initialRoom?: TimetableRoom;
+}
+
+const { initialTab = "session", initialRoom = "roomA" } = Astro.props;
+
+const currentLocale = Astro.currentLocale || "ja";
+const sessionTabLabel = currentLocale === "ja" ? "セッション" : "Session";
+const workshopTabLabel = currentLocale === "ja" ? "ワークショップ" : "Workshop";
+
+const schedules = [
+  {
+    id: "session",
+    data: sessionSchedule,
+    roomClass: "room--session",
+    roomALabel: "RoomA",
+    roomBLabel: "RoomB",
+  },
+  {
+    id: "workshop",
+    data: workshopSchedule,
+    roomClass: "room--workshop",
+    roomALabel: "WorkshopA",
+    roomBLabel: "WorkshopB",
+  },
+] as const;
+---
+
+<section id="timetable">
+  <div class="select-button-container">
+    <div
+      class:list={["select-button", { "is-active": initialTab === "session" }]}
+      id="session"
+      role="button"
+      tabindex="0"
+      aria-selected={initialTab === "session"}
+    >
+      <span class="button-text">{sessionTabLabel}</span>
+    </div>
+    <div
+      class:list={["select-button", { "is-active": initialTab === "workshop" }]}
+      id="workshop"
+      role="button"
+      tabindex="0"
+      aria-selected={initialTab === "workshop"}
+    >
+      <span class="button-text">{workshopTabLabel}</span>
+    </div>
+  </div>
+  {
+    schedules.map(({ id, data, roomClass, roomALabel, roomBLabel }) => (
+      <div
+        class:list={["content", { "is-visible": id === initialTab }]}
+        data-schedule-content={id}
+        data-mobile-room={initialRoom}
+      >
+        <div class="header row">
+          <div class="blank" />
+          <div
+            class:list={[
+              "header-content",
+              "room",
+              roomClass,
+              { "is-active": initialRoom === "roomA" },
+            ]}
+            data-room="roomA"
+            role="button"
+            tabindex="0"
+            aria-selected={initialRoom === "roomA"}
+          >
+            <span>{roomALabel}</span>
+          </div>
+          <div
+            class:list={[
+              "header-content",
+              "room",
+              roomClass,
+              { "is-active": initialRoom === "roomB" },
+            ]}
+            data-room="roomB"
+            role="button"
+            tabindex="0"
+            aria-selected={initialRoom === "roomB"}
+          >
+            <span>{roomBLabel}</span>
+          </div>
+        </div>
+        {data.map((column) => (
+          <div class="row">
+            <div class="start-time-container">
+              <span class="text-h4">{column.startTime}</span>
+            </div>
+            <div class="card-container" data-room="roomA">
+              <Card program={getProgram(column.roomAProgramID)} />
+            </div>
+            <div class="card-container" data-room="roomB">
+              <Card program={getProgram(column.roomBProgramID)} />
+            </div>
+          </div>
+        ))}
+      </div>
+    ))
+  }
+</section>
+
+<script>
+  type TimetableTab = "session" | "workshop";
+  type TimetableRoom = "roomA" | "roomB";
+
+  const TAB_QUERY_KEY = "tab";
+  const ROOM_QUERY_KEY = "room";
+
+  function getTabFromUrl(): TimetableTab {
+    const tab = new URLSearchParams(window.location.search).get(TAB_QUERY_KEY);
+    return tab === "workshop" ? "workshop" : "session";
+  }
+
+  function getRoomFromUrl(): TimetableRoom {
+    const room = new URLSearchParams(window.location.search).get(
+      ROOM_QUERY_KEY,
+    );
+    return room === "b" ? "roomB" : "roomA";
+  }
+
+  function setUrlParams(params: { tab?: TimetableTab; room?: TimetableRoom }) {
+    const url = new URL(window.location.href);
+
+    if (params.tab) {
+      url.searchParams.set(TAB_QUERY_KEY, params.tab);
+    }
+
+    if (params.room) {
+      url.searchParams.set(ROOM_QUERY_KEY, params.room === "roomB" ? "b" : "a");
+    }
+
+    history.replaceState(null, "", url);
+  }
+
+  function setMobileRoom(
+    content: Element,
+    room: TimetableRoom,
+    shouldUpdateUrl = true,
+  ) {
+    content.setAttribute("data-mobile-room", room);
+
+    content
+      .querySelectorAll(".header-content.room[data-room]")
+      .forEach((header) => {
+        const isActive = header.getAttribute("data-room") === room;
+        header.classList.toggle("is-active", isActive);
+        header.setAttribute("aria-selected", String(isActive));
+      });
+
+    if (shouldUpdateUrl) {
+      setUrlParams({ room });
+    }
+  }
+
+  function initTimetableToggle() {
+    const timetable = document.getElementById("timetable");
+    if (!timetable) return;
+
+    const sessionButton = timetable.querySelector("#session");
+    const workshopButton = timetable.querySelector("#workshop");
+    const sessionContent = timetable.querySelector(
+      '[data-schedule-content="session"]',
+    );
+    const workshopContent = timetable.querySelector(
+      '[data-schedule-content="workshop"]',
+    );
+    const scheduleContents = timetable.querySelectorAll(
+      "[data-schedule-content]",
+    );
+
+    function showSchedule(type: TimetableTab, shouldUpdateUrl = true) {
+      const isSession = type === "session";
+
+      sessionButton?.classList.toggle("is-active", isSession);
+      workshopButton?.classList.toggle("is-active", !isSession);
+      sessionButton?.setAttribute("aria-selected", String(isSession));
+      workshopButton?.setAttribute("aria-selected", String(!isSession));
+
+      sessionContent?.classList.toggle("is-visible", isSession);
+      workshopContent?.classList.toggle("is-visible", !isSession);
+
+      if (shouldUpdateUrl) {
+        setUrlParams({ tab: type });
+      }
+    }
+
+    function syncFromUrl(shouldUpdateUrl = false) {
+      showSchedule(getTabFromUrl(), shouldUpdateUrl);
+      scheduleContents.forEach((content) => {
+        setMobileRoom(content, getRoomFromUrl(), shouldUpdateUrl);
+      });
+    }
+
+    timetable.addEventListener("click", (event) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+
+      const header = target.closest(".header-content.room[data-room]");
+      if (!header) return;
+
+      const content = header.closest("[data-schedule-content]");
+      if (
+        !(content instanceof HTMLElement) ||
+        !content.classList.contains("is-visible")
+      ) {
+        return;
+      }
+
+      const room = header.getAttribute("data-room");
+      if (room === "roomA" || room === "roomB") {
+        setMobileRoom(content, room);
+      }
+    });
+
+    sessionButton?.addEventListener("click", () => showSchedule("session"));
+    workshopButton?.addEventListener("click", () => showSchedule("workshop"));
+    window.addEventListener("popstate", () => syncFromUrl(false));
+
+    syncFromUrl(false);
+  }
+
+  initTimetableToggle();
+</script>
+
+<style>
+  #timetable {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-s);
+    --site-header-height: 81px;
+  }
+
+  .select-button-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    gap: var(--space-xxs);
+  }
+
+  .select-button {
+    cursor: pointer;
+    color: var(--text-primary);
+    padding: calc(var(--space-s) - 3px) calc(var(--space-m) - 3px);
+    border-radius: var(--radius-button);
+    transition: all 0.2s ease-in-out;
+    background-color: transparent;
+  }
+
+  .select-button#session {
+    border: 3px solid var(--primitive-blue);
+  }
+
+  .select-button#session:hover,
+  .select-button#session.is-active {
+    color: var(--text-on-fill);
+    background-color: var(--primitive-blue);
+  }
+
+  .select-button#workshop {
+    border: 3px solid var(--surface-workshop);
+  }
+
+  .select-button#workshop:hover,
+  .select-button#workshop.is-active {
+    color: var(--text-on-fill);
+    background-color: var(--surface-workshop);
+  }
+
+  .select-button .button-text {
+    /* text-h4 */
+    font-size: 24px;
+    font-weight: bold;
+    line-height: 1.5;
+  }
+
+  .content {
+    display: none;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 133px;
+  }
+
+  .content.is-visible {
+    display: flex;
+  }
+
+  .content .row {
+    display: flex;
+    align-items: stretch;
+    gap: 8px;
+  }
+
+  .content .row > :nth-child(1) {
+    width: 97px;
+    flex-shrink: 0;
+  }
+
+  .content .row > :nth-child(2),
+  .content .row > :nth-child(3) {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .content .row .start-time-container {
+    align-self: stretch;
+  }
+
+  .content .header.row {
+    top: var(--site-header-height);
+    z-index: 100;
+    background-color: var(--surface-primary);
+  }
+
+  .content .row .start-time-container > span {
+    display: block;
+    position: sticky;
+    top: calc(var(--site-header-height));
+    z-index: 1;
+  }
+
+  .content .header .header-content.room {
+    width: 100%;
+    padding: var(--space-xs) var(--space-m);
+    color: var(--text-on-fill);
+    border-radius: var(--radius-objects);
+
+    /* text-h4 */
+    font-size: 24px;
+    font-weight: bold;
+    line-height: 1.5;
+  }
+
+  .content .header .header-content.room--session {
+    background-color: var(--surface-session);
+  }
+
+  .content .header .header-content.room--workshop {
+    background-color: var(--surface-workshop);
+  }
+
+  .content .header .header-content.room span {
+    display: block;
+    margin: 0 auto;
+    width: fit-content;
+  }
+
+  @media screen and (max-width: 768px) {
+    #timetable {
+      --site-header-height: 56px;
+    }
+
+    .select-button {
+      padding: calc(var(--space-xxs) - 2px) calc(var(--space-s) - 2px);
+      border-width: 2px;
+    }
+
+    .select-button .button-text {
+      /* 16px → 14px */
+      font-size: clamp(0.875rem, 0.786rem + 0.446vw, 1rem);
+      font-weight: bold;
+      line-height: 1.75;
+    }
+
+    .content .header.row .blank,
+    .content .row .start-time-container {
+      display: none;
+    }
+
+    .content .header.row {
+      position: sticky;
+      gap: 0;
+    }
+
+    .content .header.row > .header-content.room {
+      flex: 1;
+      min-width: 0;
+      cursor: pointer;
+      border-radius: 0;
+      background-color: var(--surface-primary);
+      box-sizing: border-box;
+      color: var(--text-accent);
+      border-bottom: 2px solid var(--primitive-blue);
+      padding: var(--space-xs) clamp(20px, 5.714px + 4.464vw, 40px);
+
+      /* large-strong */
+      font-size: 16px;
+      font-weight: bold;
+      line-height: 1.75;
+    }
+
+    .content .header .header-content.room:not(.is-active) {
+      color: var(--text-primary);
+      border-bottom: 1px solid var(--primitive-light-gray);
+    }
+
+    .content .card-container[data-room] {
+      display: none;
+    }
+
+    .content[data-mobile-room="roomA"] .card-container[data-room="roomA"],
+    .content[data-mobile-room="roomB"] .card-container[data-room="roomB"] {
+      display: block;
+    }
+
+    .content .row > .card-container {
+      flex: 1;
+      width: 100%;
+    }
+
+    .content[data-mobile-room="roomA"]
+      .row:has(.card-container[data-room="roomA"] [data-blank-collapsed-sp]),
+    .content[data-mobile-room="roomB"]
+      .row:has(.card-container[data-room="roomB"] [data-blank-collapsed-sp]) {
+      display: none;
+    }
+  }
+</style>
diff --git a/src/components/timetable/parseRawData.ts b/src/components/timetable/parseRawData.ts
new file mode 100644
index 0000000..a5f26ab
--- /dev/null
+++ b/src/components/timetable/parseRawData.ts
@@ -0,0 +1,223 @@
+import rawData from "./rawData.json";
+import type { Speaker } from "./speaker";
+import type {
+  Program,
+  ProgramLongSession,
+  ProgramShortTalk,
+  ProgramSponsorSession,
+  ProgramWorkshop,
+} from "./program";
+
+type RawSpeakerLink = {
+  title: string;
+  url: string;
+  linkType: string;
+};
+
+type RawSpeaker = {
+  id: string;
+  bio: string;
+  tagLine: string;
+  profilePicture: string | null;
+  links: RawSpeakerLink[];
+  fullName: string;
+};
+
+type RawSession = {
+  id: string;
+  title: string;
+  description: string;
+  startsAt: string | null;
+  endsAt: string | null;
+  speakers: string[];
+  categoryItems: number[];
+  roomId: number | null;
+  status: string;
+};
+
+type RawRoom = {
+  id: number;
+  name: string;
+};
+
+type RawData = {
+  sessions: RawSession[];
+  speakers: RawSpeaker[];
+  rooms: RawRoom[];
+};
+
+const PROPOSAL_TYPE = {
+  SHORT_SESSION: 476013,
+  LONG_SESSION: 476014,
+  SHORT_WORKSHOP: 476006,
+  LONG_WORKSHOP: 476007,
+} as const;
+
+const DIFFICULTY = {
+  BEGINNER: 479034,
+  INTERMEDIATE: 479035,
+  ADVANCED: 479036,
+} as const;
+
+type SessionType =
+  | "longSession"
+  | "shortTalk"
+  | "sponsorSession"
+  | "workshop";
+
+function normalizeDescription(description: string): string {
+  return description.replace(/\r\n/g, "\n");
+}
+
+function formatTimeString(
+  startsAt: string | null,
+  endsAt: string | null,
+): string {
+  if (!startsAt || !endsAt) {
+    return "";
+  }
+
+  const formatTime = (isoString: string): string => {
+    const date = new Date(isoString);
+    const hours = date.getHours().toString().padStart(2, "0");
+    const minutes = date.getMinutes().toString().padStart(2, "0");
+    return `${hours}:${minutes}`;
+  };
+
+  return `${formatTime(startsAt)} - ${formatTime(endsAt)}`;
+}
+
+function parseSpeaker(rawSpeaker: RawSpeaker): Speaker {
+  const xLink = rawSpeaker.links.find((link) => link.linkType === "Twitter");
+
+  return {
+    name: rawSpeaker.fullName,
+    ...(rawSpeaker.profilePicture
+      ? { avatar: rawSpeaker.profilePicture }
+      : {}),
+    ...(xLink ? { xUrl: xLink.url } : {}),
+    ...(rawSpeaker.tagLine ? { company: rawSpeaker.tagLine } : {}),
+    ...(rawSpeaker.bio ? { description: normalizeDescription(rawSpeaker.bio) } : {}),
+  };
+}
+
+function parseSessionType(
+  categoryItems: number[],
+): SessionType | null {
+  if (categoryItems.includes(PROPOSAL_TYPE.LONG_SESSION)) {
+    return "longSession";
+  }
+  if (categoryItems.includes(PROPOSAL_TYPE.SHORT_SESSION)) {
+    return "shortTalk";
+  }
+  if (
+    categoryItems.includes(PROPOSAL_TYPE.SHORT_WORKSHOP) ||
+    categoryItems.includes(PROPOSAL_TYPE.LONG_WORKSHOP)
+  ) {
+    return "workshop";
+  }
+  return null;
+}
+
+function parseDifficulty(
+  categoryItems: number[],
+): ProgramLongSession["difficulty"] {
+  if (categoryItems.includes(DIFFICULTY.ADVANCED)) {
+    return "advanced";
+  }
+  if (categoryItems.includes(DIFFICULTY.INTERMEDIATE)) {
+    return "intermediate";
+  }
+  return "beginner";
+}
+
+function parseWorkshopDuration(
+  categoryItems: number[],
+): ProgramWorkshop["duration"] {
+  if (categoryItems.includes(PROPOSAL_TYPE.LONG_WORKSHOP)) {
+    return "90min";
+  }
+  return "40min";
+}
+
+function parseRoom(
+  roomId: number | null,
+  rooms: RawRoom[],
+): ProgramLongSession["room"] {
+  if (roomId === null) {
+    return "roomA";
+  }
+
+  const roomIndex = rooms.findIndex((room) => room.id === roomId);
+  return roomIndex === 1 ? "roomB" : "roomA";
+}
+
+function parseSession(
+  session: RawSession,
+  speakerMap: Map<string, RawSpeaker>,
+  rooms: RawRoom[],
+): Program | null {
+  if (session.status !== "Accepted") {
+    return null;
+  }
+
+  const sessionType = parseSessionType(session.categoryItems);
+  if (!sessionType) {
+    return null;
+  }
+
+  const speakerId = session.speakers[0];
+  if (!speakerId) {
+    return null;
+  }
+
+  const rawSpeaker = speakerMap.get(speakerId);
+  if (!rawSpeaker) {
+    return null;
+  }
+
+  const common = {
+    id: session.id,
+    timeString: formatTimeString(session.startsAt, session.endsAt),
+    title: session.title,
+    difficulty: parseDifficulty(session.categoryItems),
+    speaker: parseSpeaker(rawSpeaker),
+    room: parseRoom(session.roomId, rooms),
+    description: normalizeDescription(session.description),
+  };
+
+  switch (sessionType) {
+    case "longSession":
+      return { type: "longSession", ...common } satisfies ProgramLongSession;
+    case "shortTalk":
+      return { type: "shortTalk", ...common } satisfies ProgramShortTalk;
+    case "sponsorSession":
+      return {
+        type: "sponsorSession",
+        ...common,
+      } satisfies ProgramSponsorSession;
+    case "workshop":
+      return {
+        type: "workshop",
+        duration: parseWorkshopDuration(session.categoryItems),
+        ...common,
+      } satisfies ProgramWorkshop;
+  }
+}
+
+export function parseProgramsFromRawData(): Record<string, Program> {
+  const data = rawData as RawData;
+  const speakerMap = new Map(
+    data.speakers.map((speaker) => [speaker.id, speaker]),
+  );
+  const programs: Record<string, Program> = {};
+
+  for (const session of data.sessions) {
+    const program = parseSession(session, speakerMap, data.rooms);
+    if (program && "id" in program) {
+      programs[program.id] = program;
+    }
+  }
+
+  return programs;
+}
diff --git a/src/components/timetable/program.ts b/src/components/timetable/program.ts
new file mode 100644
index 0000000..fbf3c4a
--- /dev/null
+++ b/src/components/timetable/program.ts
@@ -0,0 +1,162 @@
+import type { Speaker } from "./speaker";
+
+export type Program =
+  | ProgramOrganizer
+  | ProgramLongSession
+  | ProgramShortTalk
+  | ProgramSponsorSession
+  | ProgramWorkshop
+  | ProgramBlank;
+
+type ProgramBlank = {
+  type: "blank";
+  spHeight?: string;
+};
+
+export const blankProgram: ProgramBlank = {
+  type: "blank",
+};
+
+export type ProgramOrganizer = {
+  type: "organizer";
+  timeString: string;
+  title: string;
+  height?: string;
+  spHeight?: string;
+};
+
+export type ProgramLongSession = {
+  type: "longSession";
+} & ProgramSessionCommon;
+
+export type ProgramShortTalk = {
+  type: "shortTalk";
+} & ProgramSessionCommon;
+
+export type ProgramSponsorSession = {
+  type: "sponsorSession";
+  isPlaceholder?: boolean;
+} & ProgramSessionCommon;
+
+export type ProgramWorkshop = {
+  type: "workshop";
+  duration: "40min" | "90min";
+} & ProgramSessionCommon;
+
+export type ProgramSessionCommon = {
+  id: string;
+  timeString: string;
+  title: string;
+  difficulty: "beginner" | "intermediate" | "advanced";
+  speaker: Speaker;
+  room: "roomA" | "roomB";
+  description?: string;
+};
+
+import { parseProgramsFromRawData } from "./parseRawData";
+
+const organizerPrograms = {
+  opening: {
+    type: "organizer",
+    timeString: "10:15 - 10:20",
+    title: "オープニング",
+  },
+  closing: {
+    type: "organizer",
+    timeString: "17:45 - 18:00",
+    title: "クロージング",
+  },
+  lunch: {
+    type: "organizer",
+    timeString: "12:05 - 13:30",
+    title: "お昼休憩",
+    height: "150px",
+    spHeight: "150px",
+  },
+} as const satisfies Record<string, ProgramOrganizer>;
+
+const sponsorPlaceholderPrograms = {
+  sponsorSlot1: {
+    type: "sponsorSession",
+    isPlaceholder: true,
+    id: "sponsorSlot1",
+    timeString: "12:10 - 12:25",
+    title: "Coming Soon",
+    difficulty: "beginner",
+    speaker: { name: "" },
+    room: "roomA",
+  },
+  sponsorSlot2: {
+    type: "sponsorSession",
+    isPlaceholder: true,
+    id: "sponsorSlot2",
+    timeString: "12:30 - 12:45",
+    title: "Coming Soon",
+    difficulty: "beginner",
+    speaker: { name: "" },
+    room: "roomA",
+  },
+  sponsorSlot3: {
+    type: "sponsorSession",
+    isPlaceholder: true,
+    id: "sponsorSlot3",
+    timeString: "12:50 - 13:05",
+    title: "Coming Soon",
+    difficulty: "beginner",
+    speaker: { name: "" },
+    room: "roomA",
+  },
+  sponsorSlot4: {
+    type: "sponsorSession",
+    isPlaceholder: true,
+    id: "sponsorSlot4",
+    timeString: "13:10 - 13:25",
+    title: "Coming Soon",
+    difficulty: "beginner",
+    speaker: { name: "" },
+    room: "roomA",
+  },
+} as const satisfies Record<string, ProgramSponsorSession>;
+
+const sessionPrograms = parseProgramsFromRawData();
+
+export const programs: Record<string, Program> = {
+  ...organizerPrograms,
+  ...sponsorPlaceholderPrograms,
+  ...sessionPrograms,
+};
+
+export type ProgramId = string;
+
+export type ProgramSession = Extract<
+  Program,
+  { type: "longSession" | "shortTalk" | "sponsorSession" | "workshop" }
+>;
+
+export function getProgramSessions(): ProgramSession[] {
+  const sessions: ProgramSession[] = [];
+
+  for (const program of Object.values(programs)) {
+    if (
+      program.type !== "longSession" &&
+      program.type !== "shortTalk" &&
+      program.type !== "sponsorSession" &&
+      program.type !== "workshop"
+    ) {
+      continue;
+    }
+    if (program.type === "sponsorSession" && program.isPlaceholder) {
+      continue;
+    }
+    sessions.push(program);
+  }
+
+  return sessions;
+}
+
+export function getProgram(id: ProgramId | "blank"): Program {
+  if (id === "blank") {
+    return blankProgram;
+  }
+  return programs[id] ?? blankProgram;
+}
diff --git a/src/components/timetable/rawData.json b/src/components/timetable/rawData.json
new file mode 100644
index 0000000..cb5d9a6
--- /dev/null
+++ b/src/components/timetable/rawData.json
@@ -0,0 +1,7 @@
+{
+  "sessions": [],
+  "speakers": [],
+  "questions": [],
+  "categories": [],
+  "rooms": []
+}
diff --git a/src/components/timetable/schedule.ts b/src/components/timetable/schedule.ts
new file mode 100644
index 0000000..f3c34ae
--- /dev/null
+++ b/src/components/timetable/schedule.ts
@@ -0,0 +1,108 @@
+import type { ProgramId } from "./program";
+
+export type Schedule = {
+  startTime: string; // HH：MM のフォーマット
+  roomAProgramID: ProgramId | "blank";
+  roomBProgramID: ProgramId | "blank";
+};
+
+export const sessionSchedule: Schedule[] = [
+  {
+    startTime: "10：15",
+    roomAProgramID: "opening",
+    roomBProgramID: "blank",
+  },
+  {
+    startTime: "10：30",
+    roomAProgramID: "1264506",
+    roomBProgramID: "blank",
+  },
+  {
+    startTime: "11：25",
+    roomAProgramID: "1251920",
+    roomBProgramID: "1251905",
+  },
+  {
+    startTime: "12：10",
+    roomAProgramID: "sponsorSlot1",
+    roomBProgramID: "lunch",
+  },
+  {
+    startTime: "12：30",
+    roomAProgramID: "sponsorSlot2",
+    roomBProgramID: "blank",
+  },
+  {
+    startTime: "12：50",
+    roomAProgramID: "sponsorSlot3",
+    roomBProgramID: "blank",
+  },
+  {
+    startTime: "13：10",
+    roomAProgramID: "sponsorSlot4",
+    roomBProgramID: "blank",
+  },
+  {
+    startTime: "13：30",
+    roomAProgramID: "1236917",
+    roomBProgramID: "1237370",
+  },
+  {
+    startTime: "14：05",
+    roomAProgramID: "1255534",
+    roomBProgramID: "1257333",
+  },
+  {
+    startTime: "14：40",
+    roomAProgramID: "1263399",
+    roomBProgramID: "1263912",
+  },
+  {
+    startTime: "15：35",
+    roomAProgramID: "1263610",
+    roomBProgramID: "1264230",
+  },
+  {
+    startTime: "16：10",
+    roomAProgramID: "1264524",
+    roomBProgramID: "1264549",
+  },
+  {
+    startTime: "16：40",
+    roomAProgramID: "shortExample",
+    roomBProgramID: "shortExample",
+  },
+  {
+    startTime: "17：15",
+    roomAProgramID: "shortExample",
+    roomBProgramID: "shortExample",
+  },
+  {
+    startTime: "17：45",
+    roomAProgramID: "closing",
+    roomBProgramID: "blank",
+  },
+];
+
+export const workshopSchedule: Schedule[] = [
+  {
+    startTime: "11：25",
+    roomAProgramID: "1259723",
+    roomBProgramID: "1264338",
+  },
+  {
+    startTime: "12：10",
+    roomAProgramID: "lunch",
+    roomBProgramID: "lunch",
+  },
+  {
+    startTime: "13：30",
+    roomAProgramID: "1257229",
+    roomBProgramID: "1259713",
+  },
+  {
+    startTime: "15：30",
+    roomAProgramID: "1263141",
+    roomBProgramID: "1264403",
+  },
+];
diff --git a/src/components/timetable/speaker.ts b/src/components/timetable/speaker.ts
new file mode 100644
index 0000000..bcc5006
--- /dev/null
+++ b/src/components/timetable/speaker.ts
@@ -0,0 +1,7 @@
+export type Speaker = {
+  name: string;
+  avatar?: string;
+  xUrl?: string;
+  company?: string;
+  description?: string;
+};
diff --git a/src/integrations/newsOgImages.ts b/src/integrations/newsOgImages.ts
index 0e2caee..01c930b 100644
--- a/src/integrations/newsOgImages.ts
+++ b/src/integrations/newsOgImages.ts
@@ -2,7 +2,11 @@ import fs from "node:fs/promises";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import type { AstroIntegration } from "astro";
-import { generateNewsOgImage } from "../utils/generateNewsOgImage";
+import { getProgramSessions } from "../components/timetable/detail/programDetail";
+import {
+  generateNewsOgImage,
+  generateProgramOgImage,
+} from "../utils/generateOgImage";
 
 const projectRoot = path.resolve(
   fileURLToPath(new URL("../..", import.meta.url)),
@@ -65,6 +69,26 @@ async function loadNewsArticles(): Promise<NewsArticleMeta[]> {
   );
 }
 
+async function getNewsOgImageAssets() {
+  const framePath = path.join(projectRoot, "public/news_ogp_frame.jpg");
+  const fontPath = path.join(
+    projectRoot,
+    "node_modules/@fontsource/noto-sans-jp/files/noto-sans-jp-japanese-700-normal.woff",
+  );
+
+  return { framePath, fontPath };
+}
+
+async function getProgramOgImageAssets() {
+  const framePath = path.join(projectRoot, "public/session_ogp_frame.jpg");
+  const fontPath = path.join(
+    projectRoot,
+    "node_modules/@fontsource/noto-sans-jp/files/noto-sans-jp-japanese-700-normal.woff",
+  );
+
+  return { framePath, fontPath };
+}
+
 /*
  * すべてのニュース記事の OGP 画像を生成する。
  * 戻り値はなく、画像が生成されたら終了する。
@@ -72,11 +96,7 @@ async function loadNewsArticles(): Promise<NewsArticleMeta[]> {
 async function generateAllNewsOgImages(): Promise<void> {
   const articles = await loadNewsArticles();
   const outDir = path.join(projectRoot, "public/og/news");
-  const framePath = path.join(projectRoot, "public/news_ogp_frame.jpg");
-  const fontPath = path.join(
-    projectRoot,
-    "node_modules/@fontsource/noto-sans-jp/files/noto-sans-jp-japanese-700-normal.woff",
-  );
+  const { framePath, fontPath } = await getNewsOgImageAssets();
 
   await fs.mkdir(outDir, { recursive: true });
 
@@ -92,15 +112,42 @@ async function generateAllNewsOgImages(): Promise<void> {
   );
 }
 
+/*
+ * すべてのタイムテーブル program の OGP 画像を生成する。
+ * 戻り値はなく、画像が生成されたら終了する。
+ */
+async function generateAllProgramOgImages(): Promise<void> {
+  const programs = getProgramSessions();
+  const outDir = path.join(projectRoot, "public/og/timetable");
+  const { framePath, fontPath } = await getProgramOgImageAssets();
+
+  await fs.mkdir(outDir, { recursive: true });
+
+  await Promise.all(
+    programs.map((program) =>
+      generateProgramOgImage({
+        title: program.title,
+        framePath,
+        fontPath,
+        outputPath: path.join(outDir, `${program.id}.png`),
+      }),
+    ),
+  );
+}
+
+async function generateAllOgImages(): Promise<void> {
+  await Promise.all([generateAllNewsOgImages(), generateAllProgramOgImages()]);
+}
+
 export function newsOgImagesIntegration(): AstroIntegration {
   return {
     name: "gocon-news-og-images",
     hooks: {
       "astro:build:start": async () => {
-        await generateAllNewsOgImages();
+        await generateAllOgImages();
       },
       "astro:server:start": async () => {
-        await generateAllNewsOgImages();
+        await generateAllOgImages();
       },
     },
   };
diff --git a/src/pages/en/timetable.astro b/src/pages/en/timetable.astro
new file mode 100644
index 0000000..55e513f
--- /dev/null
+++ b/src/pages/en/timetable.astro
@@ -0,0 +1,13 @@
+---
+import SubPage from "../../layouts/SubPage.astro";
+import TimetableComponent from "../../components/timetable/index.astro";
+
+const tabParam = Astro.url.searchParams.get("tab");
+const roomParam = Astro.url.searchParams.get("room");
+const initialTab = tabParam === "workshop" ? "workshop" : "session";
+const initialRoom = roomParam === "b" ? "roomB" : "roomA";
+---
+
+<SubPage pageTitleJa="タイムテーブル" pageTitleEn="Timetable">
+  <TimetableComponent initialTab={initialTab} initialRoom={initialRoom} />
+</SubPage>
diff --git a/src/pages/en/timetable/[programID].astro b/src/pages/en/timetable/[programID].astro
new file mode 100644
index 0000000..f8a0c9e
--- /dev/null
+++ b/src/pages/en/timetable/[programID].astro
@@ -0,0 +1,12 @@
+---
+import ProgramDetailPage from "../../../components/timetable/detail/ProgramDetailPage.astro";
+import { getProgramDetailStaticPaths } from "../../../components/timetable/detail/programDetail";
+
+export async function getStaticPaths() {
+  return getProgramDetailStaticPaths();
+}
+
+const { program } = Astro.props;
+---
+
+<ProgramDetailPage program={program} />
diff --git a/src/pages/timetable.astro b/src/pages/timetable.astro
new file mode 100644
index 0000000..cab8ad4
--- /dev/null
+++ b/src/pages/timetable.astro
@@ -0,0 +1,13 @@
+---
+import SubPage from "../layouts/SubPage.astro";
+import TimetableComponent from "../components/timetable/index.astro";
+
+const tabParam = Astro.url.searchParams.get("tab");
+const roomParam = Astro.url.searchParams.get("room");
+const initialTab = tabParam === "workshop" ? "workshop" : "session";
+const initialRoom = roomParam === "b" ? "roomB" : "roomA";
+---
+
+<SubPage pageTitleJa="タイムテーブル" pageTitleEn="Timetable">
+  <TimetableComponent initialTab={initialTab} initialRoom={initialRoom} />
+</SubPage>
diff --git a/src/pages/timetable/[programID].astro b/src/pages/timetable/[programID].astro
new file mode 100644
index 0000000..28834a1
--- /dev/null
+++ b/src/pages/timetable/[programID].astro
@@ -0,0 +1,12 @@
+---
+import ProgramDetailPage from "../../components/timetable/detail/ProgramDetailPage.astro";
+import { getProgramDetailStaticPaths } from "../../components/timetable/detail/programDetail";
+
+export async function getStaticPaths() {
+  return getProgramDetailStaticPaths();
+}
+
+const { program } = Astro.props;
+---
+
+<ProgramDetailPage program={program} />
diff --git a/src/utils/generateNewsOgImage.ts b/src/utils/generateOgImage.ts
similarity index 58%
rename from src/utils/generateNewsOgImage.ts
rename to src/utils/generateOgImage.ts
index dc15a6b..ed17e9e 100644
--- a/src/utils/generateNewsOgImage.ts
+++ b/src/utils/generateOgImage.ts
@@ -6,8 +6,20 @@ import sharp from "sharp";
 export const NEWS_OGP_WIDTH = 2400;
 export const NEWS_OGP_HEIGHT = 1350;
 
-/** 白枠内のタイトル配置（フレーム画像に合わせた仮値） */
-const TITLE_AREA = {
+/** `public/session_ogp_frame.jpg` のピクセルサイズ */
+export const SESSION_OGP_WIDTH = 2400;
+export const SESSION_OGP_HEIGHT = 1350;
+
+type TitleArea = {
+  horizontalPadding: number;
+  top: number;
+  height: number;
+  paddingTop: number;
+  fontSize: number;
+};
+
+/** 白枠内のタイトル配置（news_ogp_frame.jpg に合わせた値） */
+const NEWS_TITLE_AREA: TitleArea = {
   /** 左右同じ余白にして、白枠の水平中央と揃える */
   horizontalPadding: 200,
   top: 360,
@@ -15,28 +27,42 @@ const TITLE_AREA = {
   /** 垂直方向を中央より少し下げる（上側に余白ができる） */
   paddingTop: 24,
   fontSize: 120,
-} as const;
+};
 
-const titleAreaWidth = NEWS_OGP_WIDTH - TITLE_AREA.horizontalPadding * 2;
+/** 白枠内のタイトル配置（session_ogp_frame.jpg に合わせた値） */
+const SESSION_TITLE_AREA: TitleArea = {
+  horizontalPadding: 200,
+  top: 360,
+  height: 680,
+  paddingTop: 24,
+  fontSize: 120,
+};
 
 export function getNewsOgImagePublicPath(articleId: string): string {
   return `og/news/${articleId}.png`;
 }
 
-type GenerateNewsOgImageOptions = {
+export function getProgramOgImagePublicPath(programId: string): string {
+  return `og/timetable/${programId}.png`;
+}
+
+type GenerateOgImageOptions = {
   title: string;
   framePath: string;
   fontPath: string;
   outputPath: string;
+  width: number;
+  height: number;
+  titleArea: TitleArea;
 };
 
 /**
  * フレーム画像の上に Satori でタイトルを描画し、PNG を出力する。
  */
-export async function generateNewsOgImage(
-  options: GenerateNewsOgImageOptions,
-): Promise<void> {
-  const { title, framePath, fontPath, outputPath } = options;
+async function generateOgImage(options: GenerateOgImageOptions): Promise<void> {
+  const { title, framePath, fontPath, outputPath, width, height, titleArea } =
+    options;
+  const titleAreaWidth = width - titleArea.horizontalPadding * 2;
 
   const frameBuffer = await fs.readFile(framePath);
   const frameBase64 = `data:image/jpeg;base64,${frameBuffer.toString("base64")}`;
@@ -47,8 +73,8 @@ export async function generateNewsOgImage(
       type: "div",
       props: {
         style: {
-          width: NEWS_OGP_WIDTH,
-          height: NEWS_OGP_HEIGHT,
+          width,
+          height,
           display: "flex",
           position: "relative",
         },
@@ -57,14 +83,14 @@ export async function generateNewsOgImage(
             type: "img",
             props: {
               src: frameBase64,
-              width: NEWS_OGP_WIDTH,
-              height: NEWS_OGP_HEIGHT,
+              width,
+              height,
               style: {
                 position: "absolute",
                 top: 0,
                 left: 0,
-                width: NEWS_OGP_WIDTH,
-                height: NEWS_OGP_HEIGHT,
+                width,
+                height,
               },
             },
           },
@@ -73,15 +99,15 @@ export async function generateNewsOgImage(
             props: {
               style: {
                 position: "absolute",
-                left: TITLE_AREA.horizontalPadding,
-                top: TITLE_AREA.top,
+                left: titleArea.horizontalPadding,
+                top: titleArea.top,
                 width: titleAreaWidth,
-                height: TITLE_AREA.height,
+                height: titleArea.height,
                 display: "flex",
                 flexDirection: "column",
                 alignItems: "center",
                 justifyContent: "center",
-                paddingTop: TITLE_AREA.paddingTop,
+                paddingTop: titleArea.paddingTop,
               },
               children: [
                 {
@@ -91,7 +117,7 @@ export async function generateNewsOgImage(
                       display: "flex",
                       justifyContent: "center",
                       width: "100%",
-                      fontSize: TITLE_AREA.fontSize,
+                      fontSize: titleArea.fontSize,
                       fontWeight: 700,
                       color: "#000000",
                       lineHeight: 1.35,
@@ -108,8 +134,8 @@ export async function generateNewsOgImage(
       },
     },
     {
-      width: NEWS_OGP_WIDTH,
-      height: NEWS_OGP_HEIGHT,
+      width,
+      height,
       fonts: [
         {
           name: "Noto Sans JP",
@@ -123,3 +149,30 @@ export async function generateNewsOgImage(
 
   await sharp(Buffer.from(svg)).png().toFile(outputPath);
 }
+
+type GenerateNewsOgImageOptions = Omit<
+  GenerateOgImageOptions,
+  "width" | "height" | "titleArea"
+>;
+
+export async function generateNewsOgImage(
+  options: GenerateNewsOgImageOptions,
+): Promise<void> {
+  await generateOgImage({
+    ...options,
+    width: NEWS_OGP_WIDTH,
+    height: NEWS_OGP_HEIGHT,
+    titleArea: NEWS_TITLE_AREA,
+  });
+}
+
+export async function generateProgramOgImage(
+  options: GenerateNewsOgImageOptions,
+): Promise<void> {
+  await generateOgImage({
+    ...options,
+    width: SESSION_OGP_WIDTH,
+    height: SESSION_OGP_HEIGHT,
+    titleArea: SESSION_TITLE_AREA,
+  });
+}