diff --git a/src/components/Layouts/Header/Hamburger.astro b/src/components/Layouts/Header/Hamburger.astro
index 6307383..3128776 100644
--- a/src/components/Layouts/Header/Hamburger.astro
+++ b/src/components/Layouts/Header/Hamburger.astro
@@ -8,7 +8,7 @@ import CloseIcon from "../../icons/close.svg"
   .hamburger {
     height: 48px;
   }
-  @media screen and (width > 700px) {
+  @media screen and (width > 720px) {
     .hamburger {
       display: none;
     }
diff --git a/src/components/Layouts/Header/Nav.astro b/src/components/Layouts/Header/Nav.astro
index 00a5944..e9834c6 100644
--- a/src/components/Layouts/Header/Nav.astro
+++ b/src/components/Layouts/Header/Nav.astro
@@ -6,7 +6,7 @@ import NavItems from './NavItems.astro'
   nav {
     height: 24px;
   }
-  @media screen and (width <= 700px) {
+  @media screen and (width <= 720px) {
     nav {
       display: none;
     }
diff --git a/src/components/Layouts/Header/NavItems.astro b/src/components/Layouts/Header/NavItems.astro
index 92cca2d..d535d9a 100644
--- a/src/components/Layouts/Header/NavItems.astro
+++ b/src/components/Layouts/Header/NavItems.astro
@@ -23,7 +23,7 @@ const { mobile } = Astro.props;
     list-style-type: none;
     font-size: 16px;
   }
-  @media screen and (width <= 700px) {
+  @media screen and (width <= 720px) {
     nav ul {
       gap: 12px;
     }
@@ -40,12 +40,12 @@ const { mobile } = Astro.props;
 </style>
 
 <ul class="navitems">
-  <li>
-    <a href={`${import.meta.env.BASE_URL}/talks`}>Talks</a>
-  </li>
   <!-- <li>
-    <a href={`${import.meta.env.BASE_URL}/schedule/`}>Schedule</a>
+    <a href={`${import.meta.env.BASE_URL}/talks`}>Talks</a>
   </li> -->
+  <li>
+    <a href={`${import.meta.env.BASE_URL}/schedule/`}>Schedule</a>
+  </li>
   <li>
     <a href={`${import.meta.env.BASE_URL}/news/`}>News</a>
   </li>
diff --git a/src/components/Layouts/Panel.astro b/src/components/Layouts/Panel.astro
index 8cc8df9..1b761f4 100644
--- a/src/components/Layouts/Panel.astro
+++ b/src/components/Layouts/Panel.astro
@@ -20,7 +20,7 @@ const { title } = Astro.props;
 
   .inner {
     width: 100%;
-    max-width: 960px;
+    max-width: 1128px;
     margin: 0 auto;
   }
 </style>
diff --git a/src/components/schedule/ScrollSync.tsx b/src/components/schedule/ScrollSync.tsx
new file mode 100644
index 0000000..43d6be0
--- /dev/null
+++ b/src/components/schedule/ScrollSync.tsx
@@ -0,0 +1,32 @@
+import type { ComponentChildren, FunctionComponent } from 'preact';
+import { useEffect } from 'preact/hooks';
+
+type Props = {
+  'client:only': boolean;
+  stick: ComponentChildren;
+  body: ComponentChildren;
+}
+
+const ScrollSync:FunctionComponent<Props> = (props) => {
+  useEffect(()=>{
+    const stick = document.getElementById("stick");
+    const body = document.getElementById("body");
+
+    stick?.addEventListener("scroll", () => {
+      if(body){body.scrollLeft = stick.scrollLeft}
+    });
+
+    body?.addEventListener("scroll", () => {
+      if(stick){stick.scrollLeft = body.scrollLeft}
+    });
+  }, [])
+
+  return (
+    <>
+      {props.stick}
+      {props.body}
+    </>
+  )
+}
+
+export default ScrollSync;
diff --git a/src/components/schedule/TabToggle.css b/src/components/schedule/TabToggle.css
new file mode 100644
index 0000000..7f2b741
--- /dev/null
+++ b/src/components/schedule/TabToggle.css
@@ -0,0 +1,36 @@
+.tabs {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+
+  button {
+    text-align: center;
+
+    font-family: "Futura", "Jost", sans-serif;
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 27px;
+
+    border-radius: 4px;
+    border: none;
+    padding: 16px 32px;
+  }
+
+  .default {
+    background-color: #aeaeb2;
+    color: #fff;
+  }
+
+  .selected {
+    background-color: #000;
+    color: #fff;
+  }
+}
+@media screen and (width <= 720px) {
+  .tabs {
+    button {
+      font-size: 15px;
+    }
+  }
+}
diff --git a/src/components/schedule/TabToggle.tsx b/src/components/schedule/TabToggle.tsx
new file mode 100644
index 0000000..817af9e
--- /dev/null
+++ b/src/components/schedule/TabToggle.tsx
@@ -0,0 +1,51 @@
+import type { ComponentChildren, FunctionComponent } from 'preact';
+import {useStore} from '@nanostores/preact';
+import { selectedTabStore, type Tab } from './tabStore';
+import './TabToggle.css';
+
+// for astro syntax
+type Props = {
+  'client:only': boolean;
+  main: ComponentChildren;
+  zenyasai: ComponentChildren;
+}
+
+const Schedule:FunctionComponent<Props> = (props) => {
+  const $tab = useStore(selectedTabStore);
+
+  const isSelected = (tabName: Tab) => {
+    return $tab === tabName;
+  }
+
+  const handleClick = (tabName: Tab) => {
+    selectedTabStore.set(tabName);
+  }
+
+  return (
+    <>
+      <div class="tabs">
+        <button
+          type="button"
+          onClick={() => handleClick('fri')}
+          className={isSelected('fri') ? 'selected' : 'default'}
+        >
+          前夜祭 2025.1.17
+        </button>
+        <button
+          type="button"
+          onClick={() => handleClick('sat')}
+          className={isSelected('sat') ? 'selected' : 'default'}
+        >
+          2025.1.18
+        </button>
+      </div>
+      {$tab === 'sat' ? (
+        <>{props.main}</>
+      ) : (
+        <>{props.zenyasai}</>
+      )}
+    </>
+  )
+}
+
+export default Schedule;
diff --git a/src/components/schedule/Talk.astro b/src/components/schedule/Talk.astro
new file mode 100644
index 0000000..1740650
--- /dev/null
+++ b/src/components/schedule/Talk.astro
@@ -0,0 +1,186 @@
+---
+type Speaker = {
+  name: string;
+  ImageSrc: string;
+  XId?: string;
+  GitHubId?: string;
+}
+
+type Session = {
+  keynote?: boolean;
+  id: number;
+  title: string;
+}
+
+export type TalkType = {
+  speaker: Speaker;
+  session: Session;
+}
+
+interface Props {
+  id: number;
+  talks: TalkType[];
+}
+
+const {id, talks} = Astro.props;
+
+import GitHubMarkImage from "../../imgs/github-mark.png";
+import XLogoBlackImage from '../../imgs/x-logo-black.png';
+---
+<style>
+  .talk {
+    display: flex;
+    flex-direction: row;
+    gap: 32px;
+
+    .speaker-icon {
+      img {
+        border-radius: 12px;
+        height: auto;
+        width: 160px;
+      }
+    }
+    @media screen and (width <= 720px) {
+      .speaker-icon {
+        img {
+          width: 80px;
+        }
+      }
+    }
+
+    .description {
+      width: 100%;
+
+      .keynote {
+        span {
+          background: #FCECE8;
+          padding: 2px 8px;
+          border-radius: 2px;
+
+          font-family: "Futura", "Jost", sans-serif;
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 18px;
+        }
+
+        margin-bottom: 10px;
+      }
+
+      .session-title {
+        font-size: 20px;
+        line-height: 30px;
+        font-weight: 600;
+
+        margin-bottom: 16px;
+      }
+
+      .speaker-name {
+        font-family: "Futura", "Jost", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+
+        margin-bottom: 16px;
+      }
+
+      .speaker-socials {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 16px 24px;
+
+        a {
+          font-size: 16px;
+          font-weight: 500;
+          line-height: 21px;
+          text-decoration: none;
+          vertical-align: top;
+        }
+        @media screen and (width <= 480px) {
+          a {
+            font-size: 16px;
+          }
+        }
+
+        .social-x,
+        .social-github {
+          display: flex;
+          align-items: center;
+        }
+
+        .social-x {
+          img {
+            width: 24px;
+            height: 24px;
+            margin: 0 8px 0 0;
+          }
+          @media screen and (width <= 480px) {
+            img {
+              width: 16px;
+              height: 16px;
+            }
+          }
+        }
+
+        .social-github {
+          img {
+            width: 30px;
+            height: 30px;
+            margin: 0 8px 0 0;
+          }
+          @media screen and (width <= 480px) {
+            img {
+              width: 18px;
+              height: 18px;
+            }
+          }
+        }
+      }
+    }
+  }
+  @media screen and (width <= 720px) {
+    .talk {
+      flex-direction: column;
+      align-items: center;
+      /* todo: try to fit align up side */
+    }
+  }
+</style>
+
+{talks.filter((entry)=>entry.session.id === id).map((talk)=>{
+  const session =talk.session
+  const speaker =talk.speaker
+  return (
+    <div class="talk">
+      <div class="speaker-icon">
+        <img src={speaker.ImageSrc} alt="Speaker" />
+      </div>
+      <div class="description">
+        {session.keynote && <div class="keynote">
+          <span>Keynote</span>
+        </div>}
+        <h3 class="session-title">
+          {/* <a href={`tokyo12/talks/${session.id}`}></a> */}
+          {session.title}
+        </h3>
+        <h4 class="speaker-name">{speaker.name}</h4>
+        <div class="speaker-socials">
+          {speaker.GitHubId && (
+            <div class="social-github">
+              <img src={GitHubMarkImage.src} alt="github logo"/>
+              <a href={`https://github.com/${speaker.GitHubId}`}>
+                @{speaker.GitHubId}
+              </a>
+            </div>
+          )}
+          {speaker.XId && (
+            <div class="social-x">
+              <img src={XLogoBlackImage.src} alt="x logo"/>
+              <a href={`https://x.com/${speaker.XId}`}>
+                @{speaker.XId}
+              </a>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+})}
diff --git a/src/components/schedule/TimeTable.astro b/src/components/schedule/TimeTable.astro
new file mode 100644
index 0000000..4966438
--- /dev/null
+++ b/src/components/schedule/TimeTable.astro
@@ -0,0 +1,362 @@
+---
+import { getCollection } from "astro:content";
+// astro
+import Talk from "./Talk.astro";
+// tsx
+import ScrollSync from "./ScrollSync";
+// img
+import SymbolImage from "../../imgs/symbol_red.png";
+import EagletmtImage from "../../imgs/eagletmt.jpg";
+import JhawthornImage from "../../imgs/jhawthorn.jpg";
+// talks
+const talkEntries = await getCollection("talks");
+
+talkEntries.filter((entry)=>entry.data.session.id === 21)[0].data.speaker.ImageSrc = SymbolImage.src;
+talkEntries.filter((entry)=>entry.data.session.id === 22)[0].data.speaker.ImageSrc = EagletmtImage.src;
+talkEntries.filter((entry)=>entry.data.session.id === 23)[0].data.speaker.ImageSrc = JhawthornImage.src;
+
+const talks = talkEntries.filter((entry) => entry.data.session.id > 10).map((entry)=>{
+  return {
+    session: entry.data.session,
+    speaker: entry.data.speaker,
+  };
+});
+---
+<style>
+  .schedule {
+    padding: 24px 0;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    .timetable{
+      .stick {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        width: 100%;
+        overflow-x: auto;
+
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+        ::-webkit-scrollbar{
+          display: none;
+        }
+
+        table {
+          border-spacing: 0;
+
+          border-top-left-radius: 24px;
+          border-top-right-radius: 24px;
+
+          thead tr:first-child th:first-child {
+            border-top-left-radius: 24px;
+          }
+          thead tr:first-child th:last-child {
+            border-top-right-radius: 24px;
+            border-right: 1px solid #AEAEB2;
+          }
+
+          th {
+            border-top: 1px solid #AEAEB2;
+            border-left: 1px solid #AEAEB2;
+          }
+        }
+      }
+
+      .body {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+
+        table {
+          border-bottom-left-radius: 24px;
+          border-bottom-right-radius: 24px;
+          border-bottom: 1px solid #AEAEB2;
+          border-right: 1px solid #AEAEB2;
+          border-left: 1px solid #AEAEB2;
+          tbody tr:last-child td:first-child {
+            border-bottom-left-radius: 24px;
+            border-right: 1px solid #AEAEB2;
+          }
+          tbody tr:last-child td:last-child {
+            border-bottom-right-radius: 24px;
+          }
+        }
+      }
+
+      table {
+        border-spacing: 0;
+
+        .tt-no-left-line {
+          border-left: none !important;
+        }
+
+        tbody tr td:first-child {
+          border-right: 1px solid #AEAEB2;
+          background-color: #F5F5F5;
+        }
+
+        tbody tr td:nth-child(3) {
+          border-left: 1px solid #AEAEB2;
+        }
+
+        td {
+          border-top: 1px solid #AEAEB2;
+          padding: 24px;
+        }
+
+        .tt-4, .tt-3 {
+          font-family: "Futura", "Jost", sans-serif;
+          font-size: 20px;
+          font-weight: 500;
+          line-height: 27px;
+          text-align: center;
+
+          padding: 24px;
+        }
+
+        .corner {
+          background-color: #fff;
+          color: #fff;
+
+          padding: 24px;
+        }
+      }
+
+      .tt-4 {
+        color: #fff;
+        background: #DD451D;
+      }
+
+      .tt-3 {
+        color: #fff;
+        background: #000;
+      }
+
+      .tt-time, .tt-timerange {
+        font-family: "Futura", "Jost", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 21.25px;
+        text-align: center;
+
+        white-space: nowrap;
+      }
+
+      .tt-event {
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 32px;
+        text-align: left;
+      }
+
+      .tt-4, .tt-3 {
+        white-space: nowrap;
+      }
+
+      table {
+        width: 100%;
+        min-width: 1100px;
+
+        .tt-time, .tt-timerange, .corner {
+          width: 100px;
+        }
+
+        .tt-4, .tt-3, .tt-event, .tt-talk {
+          width: 500px;
+        }
+      }
+      @media screen and (width <= 720px) {
+        table {
+          min-width: 800px;
+
+          .tt-time, .tt-timerange, .corner {
+            width: 100px;
+          }
+
+          .tt-4, .tt-3, .tt-event, .tt-talk {
+            width: 350px;
+          }
+        }
+      }
+      @media screen and (width <= 520px) {
+        table {
+          min-width: 500px;
+
+          .tt-time, .tt-timerange, .corner {
+            width: 50px;
+          }
+
+          .tt-4, .tt-3, .tt-event, .tt-talk {
+            width: 200px;
+          }
+        }
+      }
+      @media screen and (width <= 320px) {
+        table {
+          min-width: 350px;
+
+          .tt-time, .tt-timerange, .corner {
+            width: 50px;
+          }
+
+          .tt-4, .tt-3, .tt-event, .tt-talk {
+            width: 150px;
+          }
+        }
+      }
+    }
+  }
+</style>
+
+<div class="schedule">
+  <div class="timetable">
+    <ScrollSync client:only stick body>
+      <div class="stick" id="stick" slot="stick">
+        <table>
+          <thead>
+            <tr>
+              <th class="corner tt-time">00:00</th>
+              <th class="tt-4">4F Hall</th>
+              <th class="tt-3">3F Gallery</th>
+            </tr>
+          </thead>
+        </table>
+      </div>
+      <div class="body" id="body" slot="body">
+        <table>
+          <tbody>
+            <tr>
+              <td class="tt-time">10:30</td>
+              <td class="tt-event">Door Open</td>
+              <td class="tt-no-left-line"/>
+            </tr>
+            <tr>
+              <td class="tt-time">
+                <p>11:00</p>
+              </td>
+              <td class="tt-event">Opening</td>
+              <td class="tt-event" />
+            </tr>
+            <tr>
+              <td class="tt-time">
+                <p>11:10</p>
+              </td>
+              <td class="tt-talk">
+                <Talk talks={talks} id={23}/>
+              </td>
+              <td class="tt-event" />
+            </tr>
+            <tr>
+              <td class="tt-timerange">
+                <p>11:50</p>
+                <p>-</p>
+                <p>13:10</p>
+              </td>
+              <td class="tt-event">Lunch</td>
+              <td class="tt-no-left-line" />
+            </tr>
+            <tr>
+              <td class="tt-time">
+                <p>13:10</p>
+              </td>
+              <td class="tt-talk">
+                <Talk talks={talks} id={11}/>
+              </td>
+              <td class="tt-talk">
+                <Talk talks={talks} id={12}/>
+              </td>
+            </tr>
+            <tr>
+              <td class="tt-time">
+                <p>13:35</p>
+              </td>
+              <td class="tt-talk">
+                <Talk talks={talks} id={15}/>
+              </td>
+              <td class="tt-talk">
+                <Talk talks={talks} id={17}/>
+              </td>
+            </tr>
+            <tr>
+              <td class="tt-time">
+                <p>14:00</p>
+              </td>
+              <td class="tt-talk">
+                <Talk talks={talks} id={19}/>
+              </td>
+              <td class="tt-talk">
+                <Talk talks={talks} id={16}/>
+              </td>
+            </tr>
+            <tr>
+              <td class="tt-timerange">
+                <p>14:30</p>
+                <p>-</p>
+                <p>15:00</p>
+              </td>
+              <td class="tt-event">Long Break</td>
+              <td class="tt-no-left-line" />
+            </tr>
+            <tr>
+              <td class="tt-time">
+                <p>15:00</p>
+              </td>
+              <td class="tt-talk">
+                <Talk talks={talks} id={14}/>
+              </td>
+              <td class="tt-talk">
+                <Talk talks={talks} id={13}/>
+              </td>
+            </tr>
+            <tr>
+              <td class="tt-time">
+                <p>15:25</p>
+              </td>
+              <td class="tt-talk">
+                <Talk talks={talks} id={18}/>
+              </td>
+              <td class="tt-talk">
+                <Talk talks={talks} id={20}/>
+              </td>
+            </tr>
+            <tr>
+              <td class="tt-time">
+                <p>15:50</p>
+              </td>
+              <td class="tt-talk">
+                <Talk talks={talks} id={21}/>
+              </td>
+              <td class="tt-talk" />
+            </tr>
+            <tr>
+              <td class="tt-timerange">
+                <p>16:30</p>
+                <p>-</p>
+                <p>16:50</p>
+              </td>
+              <td class="tt-event">Long Break</td>
+              <td class="tt-no-left-line" />
+            </tr>
+            <tr>
+              <td class="tt-time">
+                <p>16:50</p>
+              </td>
+              <td class="tt-talk">
+                <Talk talks={talks} id={22}/>
+              </td>
+              <td class="tt-event" />
+            </tr>
+            <tr>
+              <td class="tt-time">
+                <p>17:50</p>
+              </td>
+              <td class="tt-event">Closing</td>
+              <td class="tt-event" />
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </ScrollSync>
+  </div>
+</div>
diff --git a/src/components/schedule/Zenyasai.astro b/src/components/schedule/Zenyasai.astro
new file mode 100644
index 0000000..e1c28e2
--- /dev/null
+++ b/src/components/schedule/Zenyasai.astro
@@ -0,0 +1,312 @@
+---
+import { getCollection } from "astro:content";
+// astro
+import Talk from "./Talk.astro";
+import MiniPanel from "../Layouts/MiniPanel.astro";
+// imgs
+import OkuramasafumiImage from "../staff/pics/okuramasafumi.jpg";
+import ArrowUpRightFromSquare from '../icons/arrow-up-right-from-square.svg';
+// talks
+const talkEntries = await getCollection("talks");
+
+talkEntries.filter((entry)=>entry.data.session.id === 1)[0].data.speaker.ImageSrc = OkuramasafumiImage.src;
+const talks = talkEntries.filter((entry) => entry.data.session.id <= 10 || entry.data.session.id === 24).map((entry)=>{
+  return {
+    session: entry.data.session,
+    speaker: entry.data.speaker,
+  };
+});
+---
+<style>
+  .schedule {
+    padding: 24px 0;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    .ann {
+      .ann-title {
+        h3{
+          font-size: 20px;
+          font-weight: 600;
+          line-height: 30px;
+          text-align: left;
+        }
+
+        padding-bottom: 16px;
+        border-bottom: 1px solid #aeaeb2;
+
+        margin-bottom: 16px;
+      }
+
+      .ann-body {
+        p {
+          font-size: 14px;
+          font-weight: 300;
+          line-height: 32px;
+          text-align: left;
+          text-decoration: none;
+        }
+
+        .ann-detail{
+          display: flex;
+          justify-content: center;
+          margin-top: 16px;
+
+          .ann-button {
+            a {
+              font-size: 16px;
+              font-weight: 600;
+              line-height: 24px;
+              text-align: left;
+              text-decoration: none;
+            }
+
+            border: 2px solid #AEAEB2;
+            padding: 16px 24px;
+            border-radius: 4px;
+            background: #FFFFFF;
+
+            display: flex;
+            gap: 8px;
+          }
+        }
+      }
+    }
+
+    .timetable{
+      overflow-x: auto;
+      -webkit-overflow-scrolling: touch;
+
+      table thead:first-child tr:first-child th:first-child {
+        border-top-left-radius: 24px;
+        border-right: 1px solid #AEAEB2;
+      }
+      table thead:first-child tr:first-child th:last-child {
+        border-top-right-radius: 24px;
+        border-left: 1px solid #AEAEB2;
+      }
+
+      table tbody:first-child tr:first-child td:first-child {
+        border-top-left-radius: 24px;
+        border-top: none !important;
+        border-right: 1px solid #AEAEB2;
+      }
+      table tbody:first-child tr:first-child td:last-child {
+        border-top-right-radius: 24px;
+        border-top: none !important;
+      }
+
+      table {
+        width: 100%;
+        border-spacing: 0;
+        border-radius: 24px;
+        border: 1px solid #AEAEB2;
+
+        .tt-no-left-line {
+          border-left: none !important;
+        }
+
+        tbody tr:last-child td:first-child {
+          border-bottom-left-radius: 24px;
+        }
+        tbody tr:last-child td:last-child {
+          border-bottom-right-radius: 24px;
+        }
+
+        tbody tr td:first-child {
+          border-right: 1px solid #AEAEB2;
+          background-color: #F5F5F5;
+        }
+
+        tbody tr td:nth-child(3) {
+          border-left: 1px solid #AEAEB2;
+        }
+
+        td {
+          border-top: 1px solid #AEAEB2;
+          padding: 24px;
+        }
+
+        th {
+          font-family: "Futura", "Jost", sans-serif;
+          font-size: 20px;
+          font-weight: 500;
+          line-height: 27px;
+          text-align: center;
+
+          padding: 24px 16px;
+        }
+      }
+
+      .tt-4 {
+        color: #fff;
+        background: #DD451D;
+      }
+
+      .tt-3 {
+        color: #fff;
+        background: #000;
+      }
+
+      .tt-time, .tt-timerange {
+        font-family: "Futura", "Jost", sans-serif;
+        font-size: 16px;
+        font-weight: 500;
+        line-height: 21.25px;
+        text-align: center;
+
+        white-space: nowrap;
+        width: 1%;
+      }
+
+      .tt-event {
+        font-size: 20px;
+        font-weight: 600;
+        line-height: 32px;
+        text-align: left;
+      }
+
+      .tt-4, .tt-3, .tt-event, .tt-talk {
+        width: 50%;
+      }
+    }
+  }
+</style>
+
+<div class="schedule">
+  <div class="ann">
+    <MiniPanel>
+      <div>
+        <div class="ann-title">
+          <h3>東京Ruby会議12 前夜祭</h3>
+        </div>
+        <div class="ann-body">
+          <p>
+            前夜祭には当日チケットを購入した方のみご参加いただけます。詳細は connpass をご確認ください。
+          </p>
+          <div class="ann-detail">
+            <div class="ann-button">
+              <a
+                href="https://connpass.com/event/339170/"
+                target="_blank"
+                rel="noreferrer"
+              >イベントページ(connpass)</a>
+              <img src={ArrowUpRightFromSquare.src} alt="link icon"/>
+            </div>
+          </div>
+        </div>
+      </div>
+    </MiniPanel>
+  </div>
+  <div class="timetable">
+    <table>
+      <tbody>
+        <tr>
+          <td class="tt-time">16:00</td>
+          <td class="tt-event">
+            <Talk talks={talks} id={24}/>
+          </td>
+        </tr>
+        <tr>
+          <td class="tt-time">17:35</td>
+          <td class="tt-event">第2部受付開始 & 第1部成果展示</td>
+        </tr>
+        <tr>
+          <td class="tt-time">
+            <p>18:00</p>
+          </td>
+          <td class="tt-event">オープニング</td>
+        </tr>
+        <tr>
+          <td class="tt-time">
+            <p>18:10</p>
+          </td>
+          <td class="tt-talk">
+            <Talk talks={talks} id={8}/>
+          </td>
+        </tr>
+        <tr>
+          <td class="tt-time">
+            <p>18:15</p>
+          </td>
+          <td class="tt-talk">
+            <Talk talks={talks} id={1}/>
+          </td>
+        </tr>
+        <tr>
+          <td class="tt-time">
+            <p>18:35</p>
+          </td>
+          <td class="tt-talk">
+            <Talk talks={talks} id={10}/>
+          </td>
+        </tr>
+        <tr>
+          <td class="tt-time">
+            <p>18:45</p>
+          </td>
+          <td class="tt-talk">
+            <Talk talks={talks} id={6}/>
+          </td>
+        </tr>
+        <tr>
+          <td class="tt-time">
+            <p>18:50</p>
+          </td>
+          <td class="tt-talk">
+            <Talk talks={talks} id={2}/>
+          </td>
+        </tr>
+        <tr>
+          <td class="tt-timerange">
+            <p>19:10</p>
+            <p>-</p>
+            <p>19:25</p>
+          </td>
+          <td class="tt-event">休憩</td>
+        </tr>
+        <tr>
+          <td class="tt-time">
+            <p>19:25</p>
+          </td>
+          <td class="tt-talk">
+            <Talk talks={talks} id={3}/>
+          </td>
+        </tr>
+        <tr>
+          <td class="tt-time">
+            <p>19:45</p>
+          </td>
+          <td class="tt-talk">
+            <Talk talks={talks} id={4}/>
+          </td>
+        </tr>
+        <tr>
+          <td class="tt-time">
+            <p>19:50</p>
+          </td>
+          <td class="tt-talk">
+            <Talk talks={talks} id={5}/>
+          </td>
+        </tr>
+        <tr>
+          <td class="tt-time">
+            <p>20:00</p>
+          </td>
+          <td class="tt-talk">
+            <Talk talks={talks} id={9}/>
+          </td>
+        </tr>
+        <tr>
+          <td class="tt-time">
+            <p>20:20</p>
+          </td>
+          <td class="tt-talk">
+            <Talk talks={talks} id={7}/>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
diff --git a/src/components/schedule/main.astro b/src/components/schedule/main.astro
new file mode 100644
index 0000000..e7585be
--- /dev/null
+++ b/src/components/schedule/main.astro
@@ -0,0 +1,15 @@
+---
+// Astro
+import Panel from "../Layouts/Panel.astro";
+import TimeTable from "./TimeTable.astro";
+import Zenyasai from "./Zenyasai.astro";
+// tsx
+import TabToggle from "./TabToggle";
+---
+
+<Panel title="Schedule">
+  <TabToggle client:only main zenyasai >
+    <TimeTable slot="main" />
+    <Zenyasai slot="zenyasai"/>
+  </TabToggle>
+</Panel>
diff --git a/src/components/schedule/tabStore.ts b/src/components/schedule/tabStore.ts
new file mode 100644
index 0000000..8a9b6d2
--- /dev/null
+++ b/src/components/schedule/tabStore.ts
@@ -0,0 +1,16 @@
+import { atom } from "nanostores";
+
+export type Tab = "fri" | "sat";
+
+const urlParams = new URLSearchParams(window.location.search);
+
+function getDefaultValue(): Tab {
+  const value = urlParams.get("tab");
+  if (value !== null && (value === "fri" || value === "sat")) {
+    return value;
+  }
+
+  return "sat";
+}
+
+export const selectedTabStore = atom<Tab>(getDefaultValue());
diff --git a/src/components/talks/TabToggle.tsx b/src/components/talks/TabToggle.tsx
index 26abbb0..1eebc45 100644
--- a/src/components/talks/TabToggle.tsx
+++ b/src/components/talks/TabToggle.tsx
@@ -21,14 +21,14 @@ export default function Tabs() {
           onClick={() => handleClick('fri')}
           className={isSelected('fri') ? 'selected' : 'default'}
         >
-          前夜祭 2025/1/17
+          前夜祭 2025.1.17
         </button>
         <button
           type="button"
           onClick={() => handleClick('sat')}
           className={isSelected('sat') ? 'selected' : 'default'}
         >
-          2025/1/18
+          2025.1.18
         </button>
       </div>
     </>
diff --git a/src/content/talks/22-eagletmt.mdx b/src/content/talks/22-eagletmt.mdx
new file mode 100644
index 0000000..acf5ccc
--- /dev/null
+++ b/src/content/talks/22-eagletmt.mdx
@@ -0,0 +1,13 @@
+---
+speaker:
+  name: Kohei Suzuki
+  GitHubId: eagletmt
+  XId: eagletmt
+  ImageSrc: ""
+session:
+  id: 22
+  title: Ruby と Rust と私 (仮)
+  keynote: true
+---
+
+クックパッドの SRE。開発者の生産性向上に興味がある。Ruby と Rust が好き。
diff --git a/src/content/talks/23-jhawthorn.mdx b/src/content/talks/23-jhawthorn.mdx
new file mode 100644
index 0000000..86ed3c4
--- /dev/null
+++ b/src/content/talks/23-jhawthorn.mdx
@@ -0,0 +1,15 @@
+---
+speaker:
+  name: John Hawthorn
+  GitHubId: jhawthorn
+  XId: jhawthorn
+  ImageSrc: ""
+session:
+  id: 23
+  title: Keynote
+  keynote: true
+---
+
+John is a Ruby Committer and a Rails Core member, and a Staff Engineer at
+GitHub focusing on performance and scalability. He's based in Victoria,
+Canada.
diff --git a/src/content/talks/24-chobishiba.mdx b/src/content/talks/24-chobishiba.mdx
new file mode 100644
index 0000000..a0116a4
--- /dev/null
+++ b/src/content/talks/24-chobishiba.mdx
@@ -0,0 +1,10 @@
+---
+speaker:
+  name: chobishiba
+  GitHubId: ksbmyk
+  XId: chobishiba
+  ImageSrc: https://avatars.githubusercontent.com/u/1327211
+session:
+  id: 24
+  title: クリエイティブコーディングワークショップ
+---
diff --git a/src/content/talks/9-mikicamel.mdx b/src/content/talks/9-makicamel.mdx
similarity index 100%
rename from src/content/talks/9-mikicamel.mdx
rename to src/content/talks/9-makicamel.mdx
diff --git a/src/pages/schedule.astro b/src/pages/schedule.astro
index a02e0e1..3080f8d 100644
--- a/src/pages/schedule.astro
+++ b/src/pages/schedule.astro
@@ -1,12 +1,12 @@
 ---
 import Layout from "../components/Layouts/Layout.astro";
 
-import Preparing from "../components/Preparing.astro";
+import ScheduleComponent from "../components/schedule/main.astro";
 
 const title = "スケジュール | 東京Ruby会議12";
 const twitter_card = "summary_large_image";
 ---
 
 <Layout title={title} twitter_card={twitter_card}>
-  <Preparing />
+  <ScheduleComponent />
 </Layout>