From 1c56ee4334ec625e495a1fc652ef1d48ddcedcbe Mon Sep 17 00:00:00 2001
From: Dada878 <xx0932399@gmail.com>
Date: Sat, 7 Dec 2024 20:40:55 +0800
Subject: [PATCH 1/2] fix: apply postion sticky to sidebar

---
 .../_components/table-of-content.tsx          |   2 +-
 app/cfp/(submission)/normal/page.tsx          | 727 +++++++++---------
 app/cfp/(submission)/poster/page.tsx          | 494 ++++++------
 app/cfp/(submission)/undefined/page.tsx       | 666 ++++++++--------
 4 files changed, 958 insertions(+), 931 deletions(-)

diff --git a/app/cfp/(submission)/_components/table-of-content.tsx b/app/cfp/(submission)/_components/table-of-content.tsx
index 58d983a..b490a7e 100644
--- a/app/cfp/(submission)/_components/table-of-content.tsx
+++ b/app/cfp/(submission)/_components/table-of-content.tsx
@@ -39,7 +39,7 @@ export default function TableOfContent({
   return (
     <>
       {/* pc & tablet */}
-      <nav className="md: fixed right-5 top-[100px] hidden w-min max-w-[200px] md:block lg:w-[200px]">
+      <nav className="sticky right-5 top-[100px] hidden w-min max-w-[200px] self-start md:block lg:w-[200px]">
         <Link
           href={submitUrl}
           target="_blank"
diff --git a/app/cfp/(submission)/normal/page.tsx b/app/cfp/(submission)/normal/page.tsx
index f586cf7..02824c0 100644
--- a/app/cfp/(submission)/normal/page.tsx
+++ b/app/cfp/(submission)/normal/page.tsx
@@ -189,400 +189,409 @@ export default function Page() {
   ];
 
   return (
-    <div className="py-8 text-normal-mobile md:text-normal">
-      <h1 className="mb-4 text-h1-mobile font-extrabold md:text-h1">
-        一般議程投稿
-      </h1>
-      <TableOfContent
-        theme="light"
-        sections={sections}
-        submitUrl="https://forms.gle/rb5kuP1CCrzodKJs9"
-      />
-
-      <Countdown />
+    <div className="flex gap-8 py-8 text-normal-mobile md:text-normal">
+      <div>
+        <h1 className="mb-4 text-h1-mobile font-extrabold md:text-h1">
+          一般議程投稿
+        </h1>
 
-      <section
-        id="important-dates"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          重要時程
-        </h2>
-        <Timeline isPoster={false} />
-      </section>
+        <Countdown />
 
-      {SHOW_EARLY_BIRD && (
-        <section className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16">
-          <EarlyBird />
+        <section
+          id="important-dates"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            重要時程
+          </h2>
+          <Timeline isPoster={false} />
         </section>
-      )}
 
-      <section
-        id="session-types"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          議程種類
-        </h2>
-        <div className="mb-6 mt-4 grid grid-rows-2 gap-3 lg:grid-cols-2 lg:grid-rows-1">
-          <div className="md:background-light flex flex-col items-center gap-3 rounded-lg bg-background-light p-6 text-foreground">
-            <Presentation />
-            <h3 className="text-h3-mobile md:text-h3">Presentation</h3>
+        {SHOW_EARLY_BIRD && (
+          <section className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16">
+            <EarlyBird />
+          </section>
+        )}
+
+        <section
+          id="session-types"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            議程種類
+          </h2>
+          <div className="mb-6 mt-4 grid grid-rows-2 gap-3 lg:grid-cols-2 lg:grid-rows-1">
+            <div className="md:background-light flex flex-col items-center gap-3 rounded-lg bg-background-light p-6 text-foreground">
+              <Presentation />
+              <h3 className="text-h3-mobile md:text-h3">Presentation</h3>
+              <p>
+                Presentation{" "}
+                <span className="subTitle hightlight">共 40 分鐘</span>{" "}
+                ，包含完整 30 分鐘的議程與 10
+                分鐘的問答時間，讓您有充分的時間展示想法、描述經歷、和與會者交流。
+              </p>
+            </div>
+            <div className="md:background-light flex flex-col items-center gap-3 rounded-lg bg-background-light p-6 text-foreground">
+              <Espresso />
+              <h3 className="text-h3-mobile md:text-h3">Espresso</h3>
+              <p>
+                Espresso{" "}
+                <span className="subTitle hightlight">僅有 10 分鐘 </span>
+                ，挑戰最為濃縮與精華的議程，為與會者帶來短而精緻的知識洗禮。
+              </p>
+            </div>
+          </div>
+        </section>
+        <section
+          id="submission-topics"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            投稿主題範例
+          </h2>
+          <div className="leading-10">
             <p>
-              Presentation{" "}
-              <span className="subTitle hightlight">共 40 分鐘</span> ，包含完整
-              30 分鐘的議程與 10
-              分鐘的問答時間，讓您有充分的時間展示想法、描述經歷、和與會者交流。
+              SITCON
+              作為學生展現自己的舞台，我們特別期待以學生為主體的稿件，例如：從學生角度出發的經驗分享、技術分享，專題研究成果、獨立研究甘苦談，或探討學生相關議題等等。
+              不論是探討技術或輕鬆的分享，任何與資訊科技、電腦技術相關的講題，我們都非常歡迎！
             </p>
-          </div>
-          <div className="md:background-light flex flex-col items-center gap-3 rounded-lg bg-background-light p-6 text-foreground">
-            <Espresso />
-            <h3 className="text-h3-mobile md:text-h3">Espresso</h3>
             <p>
-              Espresso{" "}
-              <span className="subTitle hightlight">僅有 10 分鐘 </span>
-              ，挑戰最為濃縮與精華的議程，為與會者帶來短而精緻的知識洗禮。
+              除此之外，您也可以前往 SITCON 歷年網站（
+              {[
+                "2013",
+                "2014",
+                "2015",
+                "2016",
+                "2017",
+                "2018",
+                "2019",
+                "2020",
+                "2021",
+                "2022",
+                "2024",
+              ]
+                .toReversed()
+                .map((year, index) => (
+                  <span key={year}>
+                    <Link
+                      target="_blank"
+                      className="link"
+                      href={`https://sitcon.org/${year}`}
+                    >
+                      {year}
+                    </Link>
+                    {<span>{index == 10 ? "" : "、"}</span>}
+                  </span>
+                ))}
+              ）查看過去的議程。
+            </p>
+            <p className="mt-6 leading-10">
+              以下是我們選出以往的優良議程，提供給您參考：
             </p>
           </div>
-        </div>
-      </section>
-      <section
-        id="submission-topics"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          投稿主題範例
-        </h2>
-        <div className="leading-10">
-          <p>
-            SITCON
-            作為學生展現自己的舞台，我們特別期待以學生為主體的稿件，例如：從學生角度出發的經驗分享、技術分享，專題研究成果、獨立研究甘苦談，或探討學生相關議題等等。
-            不論是探討技術或輕鬆的分享，任何與資訊科技、電腦技術相關的講題，我們都非常歡迎！
-          </p>
-          <p>
-            除此之外，您也可以前往 SITCON 歷年網站（
-            {[
-              "2013",
-              "2014",
-              "2015",
-              "2016",
-              "2017",
-              "2018",
-              "2019",
-              "2020",
-              "2021",
-              "2022",
-              "2024",
-            ]
-              .toReversed()
-              .map((year, index) => (
-                <span key={year}>
-                  <Link
-                    target="_blank"
-                    className="link"
-                    href={`https://sitcon.org/${year}`}
-                  >
-                    {year}
-                  </Link>
-                  {<span>{index == 10 ? "" : "、"}</span>}
-                </span>
+          <div className="py-4">
+            <h3 className="my-4 text-h3-mobile font-bold text-primary md:text-h3">
+              PRESENTATION
+            </h3>
+            <div className="my-4 grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-4">
+              {presentations.map((item) => (
+                <PresentationBlock
+                  key={item.id}
+                  id={item.id}
+                  title={item.title}
+                />
               ))}
-            ）查看過去的議程。
-          </p>
-          <p className="mt-6 leading-10">
-            以下是我們選出以往的優良議程，提供給您參考：
+            </div>
+          </div>
+          <div className="py-4">
+            <h3 className="my-4 text-h3-mobile font-bold text-primary md:text-h3">
+              ESPRESSO
+            </h3>
+            <div className="my-4 grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-4">
+              {espressos.map((item) => (
+                <PresentationBlock
+                  key={item.id}
+                  id={item.id}
+                  title={item.title}
+                />
+              ))}
+            </div>
+          </div>
+        </section>
+        <section
+          id="submission-format"
+          className="-mt-[60px] pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            投稿格式
+          </h2>
+          <p className="leading-10">
+            Presentation 與 Espresso
+            的投稿格式相同，除標示為公開之資訊會對外公布外，其餘僅供審稿委員於審稿時閱讀。
           </p>
-        </div>
-        <div className="py-4">
           <h3 className="my-4 text-h3-mobile font-bold text-primary md:text-h3">
-            PRESENTATION
+            稿件資訊
           </h3>
-          <div className="my-4 grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-4">
-            {presentations.map((item) => (
-              <PresentationBlock
-                key={item.id}
-                id={item.id}
-                title={item.title}
-              />
-            ))}
+          <div className="flex flex-col gap-4">
+            <InformationField title="投稿類型" tags={["required", "public"]}>
+              請寫明所欲投稿為何種議程類型（Presentation、Espresso）。
+            </InformationField>
+            <InformationField title="題目" tags={["required", "public"]}>
+              請不要超出<span className="subTitle hightlight"> 20 </span>
+              字，題目無須與年會主題相關。
+            </InformationField>
+            <InformationField title="摘要" tags={["required", "public"]}>
+              <span className="hightlight subTitle"> 150~250 </span>
+              字，使用於宣傳與網站公告。
+            </InformationField>
+            <InformationField title="演講大綱" tags={["required"]}>
+              請說明議程的內容大綱與時間分配。若為多位講者共同分享，請說明各個講者如何分配演講內容。
+            </InformationField>
+            <InformationField title="目標受眾" tags={["required"]}>
+              請說明您期待該議程的目標受眾為怎麼樣的人。例如：「嚮往成為前端開發者的初學者」、「欲精進某技能的後端工程師」等。SITCON
+              2024 的會眾比例為：大學生 58%、高中/職生 22%、社會人士 8%、研究生
+              11%、國中生 1%
+            </InformationField>
+            <InformationField title="先備知識" tags={["required", "public"]}>
+              請說明該議程的與會者所需具備的{" "}
+              <span className="subTitle hightlight">先備知識</span>{" "}
+              例如：「能理解 Python 基礎語法」、「能熟練運用 Class 與 OOP」等。
+            </InformationField>
+            <InformationField title="主題標籤" tags={["required", "public"]}>
+              請填寫 1~4 個該議程相關的{" "}
+              <span className="hightlight subTitle">領域與知識標籤</span>{" "}
+              例如：ML、Data
+              Science、資安紅隊、blockchain、社團等；審稿委員將會參考此欄位了解件著重的面向，錄取後議程組也會參考此欄位，在與您溝通後挑選合適的標籤呈現於官網議程表上。
+            </InformationField>
+            <InformationField title="詳細說明" tags={["required"]}>
+              不限字數，請盡可能{" "}
+              <span className="hightlight subTitle">詳細說明</span>{" "}
+              個議程的相關細節，如議程詳細架構及想傳達的內容，如您為什麼想講這個議程及您預期此議程能為聽眾帶來什麼等，以利審稿委員更瞭解您的議程及想法。
+            </InformationField>
+            <InformationField title="附件" tags={["optional"]}>
+              可以附上程式碼、投影片草稿或任何您認為有助於我們瞭解您議程的附件，請再三確認是否有開啟共用權限。
+            </InformationField>
           </div>
-        </div>
-        <div className="py-4">
           <h3 className="my-4 text-h3-mobile font-bold text-primary md:text-h3">
-            ESPRESSO
+            個人資料
           </h3>
-          <div className="my-4 grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-4">
-            {espressos.map((item) => (
-              <PresentationBlock
-                key={item.id}
-                id={item.id}
-                title={item.title}
-              />
-            ))}
-          </div>
-        </div>
-      </section>
-      <section id="submission-format" className="-mt-[60px] pt-[80px] md:mb-16">
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          投稿格式
-        </h2>
-        <p className="leading-10">
-          Presentation 與 Espresso
-          的投稿格式相同，除標示為公開之資訊會對外公布外，其餘僅供審稿委員於審稿時閱讀。
-        </p>
-        <h3 className="my-4 text-h3-mobile font-bold text-primary md:text-h3">
-          稿件資訊
-        </h3>
-        <div className="flex flex-col gap-4">
-          <InformationField title="投稿類型" tags={["required", "public"]}>
-            請寫明所欲投稿為何種議程類型（Presentation、Espresso）。
-          </InformationField>
-          <InformationField title="題目" tags={["required", "public"]}>
-            請不要超出<span className="subTitle hightlight"> 20 </span>
-            字，題目無須與年會主題相關。
-          </InformationField>
-          <InformationField title="摘要" tags={["required", "public"]}>
-            <span className="hightlight subTitle"> 150~250 </span>
-            字，使用於宣傳與網站公告。
-          </InformationField>
-          <InformationField title="演講大綱" tags={["required"]}>
-            請說明議程的內容大綱與時間分配。若為多位講者共同分享，請說明各個講者如何分配演講內容。
-          </InformationField>
-          <InformationField title="目標受眾" tags={["required"]}>
-            請說明您期待該議程的目標受眾為怎麼樣的人。例如：「嚮往成為前端開發者的初學者」、「欲精進某技能的後端工程師」等。SITCON
-            2024 的會眾比例為：大學生 58%、高中/職生 22%、社會人士 8%、研究生
-            11%、國中生 1%
-          </InformationField>
-          <InformationField title="先備知識" tags={["required", "public"]}>
-            請說明該議程的與會者所需具備的{" "}
-            <span className="subTitle hightlight">先備知識</span> 例如：「能理解
-            Python 基礎語法」、「能熟練運用 Class 與 OOP」等。
-          </InformationField>
-          <InformationField title="主題標籤" tags={["required", "public"]}>
-            請填寫 1~4 個該議程相關的{" "}
-            <span className="hightlight subTitle">領域與知識標籤</span>{" "}
-            例如：ML、Data
-            Science、資安紅隊、blockchain、社團等；審稿委員將會參考此欄位了解件著重的面向，錄取後議程組也會參考此欄位，在與您溝通後挑選合適的標籤呈現於官網議程表上。
-          </InformationField>
-          <InformationField title="詳細說明" tags={["required"]}>
-            不限字數，請盡可能{" "}
-            <span className="hightlight subTitle">詳細說明</span>{" "}
-            個議程的相關細節，如議程詳細架構及想傳達的內容，如您為什麼想講這個議程及您預期此議程能為聽眾帶來什麼等，以利審稿委員更瞭解您的議程及想法。
-          </InformationField>
-          <InformationField title="附件" tags={["optional"]}>
-            可以附上程式碼、投影片草稿或任何您認為有助於我們瞭解您議程的附件，請再三確認是否有開啟共用權限。
-          </InformationField>
-        </div>
-        <h3 className="my-4 text-h3-mobile font-bold text-primary md:text-h3">
-          個人資料
-        </h3>
-        <p className="mb-2 mb-7 leading-10">
-          除了暱稱、自我介紹被用於宣傳，其餘資訊僅需提供一人作為代表（當稿件同時有多位講者時），供議程組於聯絡時使用。
-        </p>
-        <div className="flex flex-col gap-4">
-          <InformationField title="電子郵件" tags={["required"]}>
-            能讓大會聯絡的電子信箱。（注意：請您在大會的聯絡過程中，維持使用相同信箱）
-          </InformationField>
-          <InformationField title="名字" tags={["required", "public"]}>
-            您的姓名。
-          </InformationField>
-          <InformationField title="暱稱" tags={["required", "public"]}>
-            公開於講者及網站的稱呼。
-          </InformationField>
-          <InformationField title="自我介紹" tags={["required", "public"]}>
-            公開於講者海報及網站，將有助於會眾更加了解有關你的資訊。
-          </InformationField>
-
-          <InformationField title="手機號碼" tags={["required"]}>
-            用於大會聯絡、確認資訊用的電話號碼。
-          </InformationField>
-          <InformationField title="其他聯絡方式" tags={["required"]}>
-            其他任何我們能聯絡您的方式（如 Telegram
-            ID、住處電話等），以利我們在審稿時即時向您釐清投稿資訊。
-          </InformationField>
-        </div>
-      </section>
-      <section id="review-process" className="-mt-[60px] pt-[80px] md:mb-16">
-        <h2 className="my-4 text-h2-mobile font-extrabold text-primary md:text-h2">
-          審稿方式
-        </h2>
-        <p className="my-4 leading-10">
-          稿件均經議程組形式審查，交予該領域之審稿委員審稿。審稿委員由 SITCON
-          工作人員、業界人士及學界人士組成。
-        </p>
-        <p>審稿委員將針對以下項目進行篩選：</p>
-        <ul className="list-inside list-disc leading-10">
-          <li className="listItem">
-            <span className="subTitle hightlight">稿件內容：</span>
-            知識分享、經驗案例、想法觀點是否獨特等。
-          </li>
-          <li className="listItem">
-            <span className="subTitle hightlight">表達能力：</span>
-            提供的資料是否完整、有條理、文句暢通。完整的資料能讓審稿委員更清楚了解演講細節。
-          </li>
-          <li className="listItem">
-            <span className="subTitle hightlight">適合聽眾：</span>稿件是否適合
-            SITCON
-            大多數的與會者。經審稿委員評估比較熱門的議程，將安排在較大的演講廳。
-          </li>
-        </ul>
-      </section>
-
-      <CodeOfConduct />
+          <p className="mb-2 mb-7 leading-10">
+            除了暱稱、自我介紹被用於宣傳，其餘資訊僅需提供一人作為代表（當稿件同時有多位講者時），供議程組於聯絡時使用。
+          </p>
+          <div className="flex flex-col gap-4">
+            <InformationField title="電子郵件" tags={["required"]}>
+              能讓大會聯絡的電子信箱。（注意：請您在大會的聯絡過程中，維持使用相同信箱）
+            </InformationField>
+            <InformationField title="名字" tags={["required", "public"]}>
+              您的姓名。
+            </InformationField>
+            <InformationField title="暱稱" tags={["required", "public"]}>
+              公開於講者及網站的稱呼。
+            </InformationField>
+            <InformationField title="自我介紹" tags={["required", "public"]}>
+              公開於講者海報及網站，將有助於會眾更加了解有關你的資訊。
+            </InformationField>
 
-      <section
-        id="submission-guidelines"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          投稿注意事項
-        </h2>
-        <div>
+            <InformationField title="手機號碼" tags={["required"]}>
+              用於大會聯絡、確認資訊用的電話號碼。
+            </InformationField>
+            <InformationField title="其他聯絡方式" tags={["required"]}>
+              其他任何我們能聯絡您的方式（如 Telegram
+              ID、住處電話等），以利我們在審稿時即時向您釐清投稿資訊。
+            </InformationField>
+          </div>
+        </section>
+        <section id="review-process" className="-mt-[60px] pt-[80px] md:mb-16">
+          <h2 className="my-4 text-h2-mobile font-extrabold text-primary md:text-h2">
+            審稿方式
+          </h2>
+          <p className="my-4 leading-10">
+            稿件均經議程組形式審查，交予該領域之審稿委員審稿。審稿委員由 SITCON
+            工作人員、業界人士及學界人士組成。
+          </p>
+          <p>審稿委員將針對以下項目進行篩選：</p>
           <ul className="list-inside list-disc leading-10">
             <li className="listItem">
-              除非內容明顯偏離講題、違反 CoC
-              或不符事實，我們不會強制要求講者對演講內容進行修正。
-            </li>
-            <li>在截稿之前，投稿者可以隨時透過表單回函修改已送出的稿件。</li>
-            <li className="listItem">
-              審稿過程
-              <span className="hightlight subTitle">不考慮稿件內容的難度</span>
-              。我們以稿件是否能夠吸引人、高品質、適合聽眾為考量。
-            </li>
-            <li className="listItem">
-              若審稿委員認為您的稿件比較適合其他形式，且原形式名額已經額滿、無法再增額時，議程組會向您提出轉換形式之建議。若經您評估後同意該建議，議程組將會為您轉換稿件類型或時間長度。
+              <span className="subTitle hightlight">稿件內容：</span>
+              知識分享、經驗案例、想法觀點是否獨特等。
             </li>
             <li className="listItem">
-              SITCON 2025
-              將會有多軌議程及各式場外活動同時進行，與會者可以自行決定要參與哪一場議程或活動。
+              <span className="subTitle hightlight">表達能力：</span>
+              提供的資料是否完整、有條理、文句暢通。完整的資料能讓審稿委員更清楚了解演講細節。
             </li>
             <li className="listItem">
-              為鼓勵投稿，大會
-              <span className="hightlight subTitle">
-                提供投稿者一組報名邀請碼
-              </span>
-              （一稿一組，每人最多一組），使用邀請碼可優先報名參與本年會。若您的稿件被接受，年會將頒予感謝狀以表彰您的熱情付出與貢獻，並額外提供講者身分入場，屆時您可以將年會邀請碼贈與他人使用，邀請親朋好友共襄盛舉。
-            </li>
-            <li className="listItem">
-              若同一稿件有多個講者，無論講者人數，皆只提供一組可轉贈的入場票邀請碼、一份講者識別證與一份講者專屬迎賓禮，大會方保有最終發放之權力。未佩戴識別證的講者，僅能在自己的演講時，於該議程時段進入議程所在的會議廳。
+              <span className="subTitle hightlight">適合聽眾：</span>
+              稿件是否適合 SITCON
+              大多數的與會者。經審稿委員評估比較熱門的議程，將安排在較大的演講廳。
             </li>
           </ul>
+        </section>
+
+        <CodeOfConduct />
+
+        <section
+          id="submission-guidelines"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            投稿注意事項
+          </h2>
+          <div>
+            <ul className="list-inside list-disc leading-10">
+              <li className="listItem">
+                除非內容明顯偏離講題、違反 CoC
+                或不符事實，我們不會強制要求講者對演講內容進行修正。
+              </li>
+              <li>在截稿之前，投稿者可以隨時透過表單回函修改已送出的稿件。</li>
+              <li className="listItem">
+                審稿過程
+                <span className="hightlight subTitle">
+                  不考慮稿件內容的難度
+                </span>
+                。我們以稿件是否能夠吸引人、高品質、適合聽眾為考量。
+              </li>
+              <li className="listItem">
+                若審稿委員認為您的稿件比較適合其他形式，且原形式名額已經額滿、無法再增額時，議程組會向您提出轉換形式之建議。若經您評估後同意該建議，議程組將會為您轉換稿件類型或時間長度。
+              </li>
+              <li className="listItem">
+                SITCON 2025
+                將會有多軌議程及各式場外活動同時進行，與會者可以自行決定要參與哪一場議程或活動。
+              </li>
+              <li className="listItem">
+                為鼓勵投稿，大會
+                <span className="hightlight subTitle">
+                  提供投稿者一組報名邀請碼
+                </span>
+                （一稿一組，每人最多一組），使用邀請碼可優先報名參與本年會。若您的稿件被接受，年會將頒予感謝狀以表彰您的熱情付出與貢獻，並額外提供講者身分入場，屆時您可以將年會邀請碼贈與他人使用，邀請親朋好友共襄盛舉。
+              </li>
+              <li className="listItem">
+                若同一稿件有多個講者，無論講者人數，皆只提供一組可轉贈的入場票邀請碼、一份講者識別證與一份講者專屬迎賓禮，大會方保有最終發放之權力。未佩戴識別證的講者，僅能在自己的演講時，於該議程時段進入議程所在的會議廳。
+              </li>
+            </ul>
+            <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
+              若有任何問題或投稿建議，請來信 SITCON 議程組信箱{" "}
+              <Link
+                target="_blank"
+                href="mailto:session@sitcon.org"
+                className="cursor-pointer text-primary underline"
+              >
+                <span className="hightlight subTitle">session@sitcon.org</span>
+              </Link>{" "}
+              。
+            </p>
+          </div>
+        </section>
+
+        <section
+          id="license"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            授權
+          </h2>
+          <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
+            今年將採取實體與線上同步之模式進行，除開放式議程外，年會當天將對每一場議程進行直播串流。如果您同意以
+            <Link
+              target="_blank"
+              href={"https://creativecommons.org/licenses/by/4.0/deed.zh-hant"}
+              className="hightlight subTitle underline underline-offset-2"
+            >
+              {" "}
+              創用 CC「姓名標示」4.0{" "}
+            </Link>
+            授權釋出議程錄影，我們將會上傳至
+            <Link
+              target="_blank"
+              href={"https://sitcon.org/yt"}
+              className="hightlight subTitle underline underline-offset-2"
+            >
+              {" "}
+              YouTube{" "}
+            </Link>
+            及
+            <Link
+              target="_blank"
+              href={"https://odysee.com/@SITCON:f"}
+              className="hightlight subTitle underline underline-offset-2"
+            >
+              {" "}
+              LBRY{" "}
+            </Link>
+            的 SITCON 頻道。{" "}
+          </p>
           <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-            若有任何問題或投稿建議，請來信 SITCON 議程組信箱{" "}
+            您為議程準備的其餘相關素材（如投影片），將於年會前由 SITCON
+            議程組向您蒐集素材連結，並整理在年會官方網站的議程資訊上。議程錄影與素材您可以自行決定在何種平台、以何種方式釋出，但鼓勵您選擇允許知識共享的{" "}
             <Link
               target="_blank"
-              href="mailto:session@sitcon.org"
-              className="cursor-pointer text-primary underline"
+              href={"https://creativecommons.org/licenses/by/4.0/deed.zh-hant"}
+              className="hightlight subTitle underline underline-offset-2"
             >
-              <span className="hightlight subTitle">session@sitcon.org</span>
-            </Link>{" "}
-            。
+              創用 CC 系列授權。
+            </Link>
           </p>
-        </div>
-      </section>
-
-      <section
-        id="license"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          授權
-        </h2>
-        <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-          今年將採取實體與線上同步之模式進行，除開放式議程外，年會當天將對每一場議程進行直播串流。如果您同意以
-          <Link
-            target="_blank"
-            href={"https://creativecommons.org/licenses/by/4.0/deed.zh-hant"}
-            className="hightlight subTitle underline underline-offset-2"
-          >
-            {" "}
-            創用 CC「姓名標示」4.0{" "}
-          </Link>
-          授權釋出議程錄影，我們將會上傳至
-          <Link
-            target="_blank"
-            href={"https://sitcon.org/yt"}
-            className="hightlight subTitle underline underline-offset-2"
-          >
-            {" "}
-            YouTube{" "}
-          </Link>
-          及
-          <Link
-            target="_blank"
-            href={"https://odysee.com/@SITCON:f"}
-            className="hightlight subTitle underline underline-offset-2"
-          >
-            {" "}
-            LBRY{" "}
-          </Link>
-          的 SITCON 頻道。{" "}
-        </p>
-        <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-          您為議程準備的其餘相關素材（如投影片），將於年會前由 SITCON
-          議程組向您蒐集素材連結，並整理在年會官方網站的議程資訊上。議程錄影與素材您可以自行決定在何種平台、以何種方式釋出，但鼓勵您選擇允許知識共享的{" "}
-          <Link
-            target="_blank"
-            href={"https://creativecommons.org/licenses/by/4.0/deed.zh-hant"}
-            className="hightlight subTitle underline underline-offset-2"
-          >
-            創用 CC 系列授權。
-          </Link>
-        </p>
-        <div className="py-1" />
-      </section>
+          <div className="py-1" />
+        </section>
 
-      <section
-        id="practice-talk"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          試講
-        </h2>
-        <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-          試講提供講者提升演講品質的機會，比照年會時間安排供講者講完整場演講，
-          <span className="hightlight subTitle">
-            並有工作人員提供建議（如簡報、臺風等）
-          </span>
-          ，講者可以自由參加，並自行選擇最合適的場次。若您的稿件確認入選，議程組將再與您協調確切時間。為維護所有講者的權利，試講時間恕不接受更改，請您準時參與。
-        </p>
-        <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-          所有場次將依報名情況舉辦，預計舉辦北部、中部、南部、線上場等，時間約為二月，地點另行通知。
-        </p>
-        <div className="rounded-2xl border border-foreground p-4">
+        <section
+          id="practice-talk"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            試講
+          </h2>
+          <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
+            試講提供講者提升演講品質的機會，比照年會時間安排供講者講完整場演講，
+            <span className="hightlight subTitle">
+              並有工作人員提供建議（如簡報、臺風等）
+            </span>
+            ，講者可以自由參加，並自行選擇最合適的場次。若您的稿件確認入選，議程組將再與您協調確切時間。為維護所有講者的權利，試講時間恕不接受更改，請您準時參與。
+          </p>
           <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-            試講交通補助：為確保年會議程品質，我們鼓勵講者參與試講，並將依照客運價格標準，補助講者至最近試講場地的全額或部分車資。若您的稿件被予以錄取，細節將於錄取後通知。
+            所有場次將依報名情況舉辦，預計舉辦北部、中部、南部、線上場等，時間約為二月，地點另行通知。
           </p>
-        </div>
-      </section>
+          <div className="rounded-2xl border border-foreground p-4">
+            <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
+              試講交通補助：為確保年會議程品質，我們鼓勵講者參與試講，並將依照客運價格標準，補助講者至最近試講場地的全額或部分車資。若您的稿件被予以錄取，細節將於錄取後通知。
+            </p>
+          </div>
+        </section>
 
-      <section
-        id="rehearsal"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          彩排
-        </h2>
-        <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-          SITCON 2025
-          將在年會前一天提供議程被錄取之講者彩排的機會。彩排能讓講者熟悉現場設備環境、攝影機位置，並且測試
-          Live Demo
-          情境。若講者想於正式演講前先熟悉場地與現場情況，歡迎於彩排當天前來參與，一起使年會議程品質更臻完美。
-        </p>
-        <ul className="list-disc pl-6 leading-10">
-          <li className="">日期：2025 年 3 月 7 日（五）。</li>
-          <li className="">場地：議程廳與年會相同，細節將於稿件錄取後通知。</li>
-          <li className="">
-            時間：一人約 5~10 分鐘，可練習操作設備或演練部分簡報內容。若有 Live
-            Demo 或特殊需求，可提前與議程組討論。
-          </li>
-          <li className="">
-            提供設備：與年會當天場地的設備相同，例如麥克風、倒數計時器等。
-          </li>
-        </ul>
-      </section>
+        <section
+          id="rehearsal"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            彩排
+          </h2>
+          <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
+            SITCON 2025
+            將在年會前一天提供議程被錄取之講者彩排的機會。彩排能讓講者熟悉現場設備環境、攝影機位置，並且測試
+            Live Demo
+            情境。若講者想於正式演講前先熟悉場地與現場情況，歡迎於彩排當天前來參與，一起使年會議程品質更臻完美。
+          </p>
+          <ul className="list-disc pl-6 leading-10">
+            <li className="">日期：2025 年 3 月 7 日（五）。</li>
+            <li className="">
+              場地：議程廳與年會相同，細節將於稿件錄取後通知。
+            </li>
+            <li className="">
+              時間：一人約 5~10 分鐘，可練習操作設備或演練部分簡報內容。若有
+              Live Demo 或特殊需求，可提前與議程組討論。
+            </li>
+            <li className="">
+              提供設備：與年會當天場地的設備相同，例如麥克風、倒數計時器等。
+            </li>
+          </ul>
+        </section>
 
-      <FAQ QA={QA} />
+        <FAQ QA={QA} />
+      </div>
+      <TableOfContent
+        theme="light"
+        sections={sections}
+        submitUrl="https://forms.gle/rb5kuP1CCrzodKJs9"
+      />
     </div>
   );
 }
diff --git a/app/cfp/(submission)/poster/page.tsx b/app/cfp/(submission)/poster/page.tsx
index eaff695..5cda1ae 100644
--- a/app/cfp/(submission)/poster/page.tsx
+++ b/app/cfp/(submission)/poster/page.tsx
@@ -50,279 +50,287 @@ export default function Page() {
     },
   ];
   return (
-    <div className="py-8 text-normal-mobile md:text-normal">
-      <h1 className="mb-4 text-h1-mobile font-extrabold md:text-h1">
-        海報徵稿
-      </h1>
-      <TableOfContent
-        sections={sections}
-        theme="light"
-        submitUrl="https://forms.gle/NDZqhGJBLwvQTgEt8"
-      />
+    <div className="flex gap-8 py-8 text-normal-mobile md:text-normal">
+      <div>
+        <h1 className="mb-4 text-h1-mobile font-extrabold md:text-h1">
+          海報徵稿
+        </h1>
 
-      <Countdown />
-      <section
-        id="important-dates"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          重要時程
-        </h2>
-        <Timeline isPoster />
-      </section>
-
-      {SHOW_EARLY_BIRD && (
-        <section className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16">
-          <EarlyBird />
+        <Countdown />
+        <section
+          id="important-dates"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            重要時程
+          </h2>
+          <Timeline isPoster />
         </section>
-      )}
 
-      <section
-        id="session-types"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          投稿說明
-        </h2>
-        <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-          海報投稿希望以靜態海報呈現學生個人或團隊的專案或研究成果，作品以資訊相關領域為主，不限語言，不接受一稿多投，若為延伸作品需於投稿時載明。我們期望透過此方式使更多學生能有展現自我的機會，同時為會眾帶來不同形式的學習與交流。
-        </p>
-      </section>
+        {SHOW_EARLY_BIRD && (
+          <section className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16">
+            <EarlyBird />
+          </section>
+        )}
 
-      <section
-        id="submission-topics"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          投稿
-        </h2>
-        <div className="space-y-4">
-          <h3 className="text-h3-mobile font-bold text-primary md:text-h3">
-            稿件資訊
-          </h3>
-          <p>除標示為公開之資訊會對外公布外，其餘僅供審稿委員於審稿時閱讀。</p>
-          <div className="flex flex-col gap-4">
-            <InformationField title="題目" tags={["required", "public"]}>
-              長度請自行斟酌。
-            </InformationField>
-            <InformationField title="摘要" tags={["required", "public"]}>
-              建議約 <span className="hightlight subTitle"> 350 </span>{" "}
-              字，使用於宣傳與網站公告。
-            </InformationField>
-            <InformationField title="主題標籤" tags={["required", "public"]}>
-              請填寫 1~3 個與海報內文相關的{" "}
-              <span className="hightlight subTitle">領域與知識標籤</span>
-              ，例如：ML、Data Science、資安、NLP
-              等；錄取後會與提供稿件者溝通微調後公開於官網。
-            </InformationField>
-            <InformationField title="專案說明" tags={["required"]}>
-              請以 PDF 檔案上傳，以{" "}
-              <span className="hightlight subTitle"> 600~1500 </span>{" "}
-              字為限。內容涵蓋專案或研究的背景與目標，說明其所解決的問題或探索的課題，並描述所使用的方法或技術，包括專案實施或研究過程中，並展示專案或研究的主要成果，說明其應用價值或理論貢獻，探討未來發展方向或進一步探索的可能性。投稿者可根據專案或研究的特性自行安排內容，展現專案或研究的獨特性與價值。專案說明不需設計或排版，僅需充分說明貴專案內容即可。
-            </InformationField>
-            <InformationField title="其他說明" tags={[]}>
-              其他以上未提及之說明，若為延續性研究作品也請在此標明。
-            </InformationField>
-          </div>
-        </div>
-        <div className="space-y-4">
-          <h3 className="text-h3-mobile font-bold text-primary md:text-h3">
-            個人資料
-          </h3>
-          <div>
-            <p className="leading-10 tracking-wider">
-              除了暱稱 /
-              名字、自我介紹被用於宣傳，其餘資訊僅需提供一人作為代表（當稿件同時有多位講者時），供議程組於聯絡時使用。
+        <section
+          id="session-types"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            投稿說明
+          </h2>
+          <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
+            海報投稿希望以靜態海報呈現學生個人或團隊的專案或研究成果，作品以資訊相關領域為主，不限語言，不接受一稿多投，若為延伸作品需於投稿時載明。我們期望透過此方式使更多學生能有展現自我的機會，同時為會眾帶來不同形式的學習與交流。
+          </p>
+        </section>
+
+        <section
+          id="submission-topics"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            投稿
+          </h2>
+          <div className="space-y-4">
+            <h3 className="text-h3-mobile font-bold text-primary md:text-h3">
+              稿件資訊
+            </h3>
+            <p>
+              除標示為公開之資訊會對外公布外，其餘僅供審稿委員於審稿時閱讀。
             </p>
             <div className="flex flex-col gap-4">
-              <InformationField title="電子郵件" tags={["required"]}>
-                能讓大會聯絡的電子信箱。（注意：請您在大會的聯絡過程中，維持使用相同信箱）
+              <InformationField title="題目" tags={["required", "public"]}>
+                長度請自行斟酌。
               </InformationField>
-              <InformationField title="名字" tags={["required", "public"]}>
-                您的姓名。
+              <InformationField title="摘要" tags={["required", "public"]}>
+                建議約 <span className="hightlight subTitle"> 350 </span>{" "}
+                字，使用於宣傳與網站公告。
               </InformationField>
-              <InformationField title="暱稱" tags={["required", "public"]}>
-                公開於講者及網站的稱呼。
+              <InformationField title="主題標籤" tags={["required", "public"]}>
+                請填寫 1~3 個與海報內文相關的{" "}
+                <span className="hightlight subTitle">領域與知識標籤</span>
+                ，例如：ML、Data Science、資安、NLP
+                等；錄取後會與提供稿件者溝通微調後公開於官網。
               </InformationField>
-              <InformationField title="自我介紹" tags={["required", "public"]}>
-                公開於講者海報及網站，將有助於會眾更加了解有關你的資訊。至多三人。
+              <InformationField title="專案說明" tags={["required"]}>
+                請以 PDF 檔案上傳，以{" "}
+                <span className="hightlight subTitle"> 600~1500 </span>{" "}
+                字為限。內容涵蓋專案或研究的背景與目標，說明其所解決的問題或探索的課題，並描述所使用的方法或技術，包括專案實施或研究過程中，並展示專案或研究的主要成果，說明其應用價值或理論貢獻，探討未來發展方向或進一步探索的可能性。投稿者可根據專案或研究的特性自行安排內容，展現專案或研究的獨特性與價值。專案說明不需設計或排版，僅需充分說明貴專案內容即可。
               </InformationField>
-              <InformationField title="手機號碼" tags={["required"]}>
-                用於大會聯絡、確認資訊用的電話號碼。
-              </InformationField>
-              <InformationField title="其他聯絡方式" tags={["required"]}>
-                其他任何我們能聯絡您的方式（如 Telegram
-                ID、住處電話等），以利我們在審稿時即時向您釐清投稿資訊。
+              <InformationField title="其他說明" tags={[]}>
+                其他以上未提及之說明，若為延續性研究作品也請在此標明。
               </InformationField>
             </div>
           </div>
-        </div>
-        <div className="space-y-4">
-          <h3 className="text-h3-mobile font-bold text-primary md:text-h3">
-            海報格式參考
-          </h3>
+          <div className="space-y-4">
+            <h3 className="text-h3-mobile font-bold text-primary md:text-h3">
+              個人資料
+            </h3>
+            <div>
+              <p className="leading-10 tracking-wider">
+                除了暱稱 /
+                名字、自我介紹被用於宣傳，其餘資訊僅需提供一人作為代表（當稿件同時有多位講者時），供議程組於聯絡時使用。
+              </p>
+              <div className="flex flex-col gap-4">
+                <InformationField title="電子郵件" tags={["required"]}>
+                  能讓大會聯絡的電子信箱。（注意：請您在大會的聯絡過程中，維持使用相同信箱）
+                </InformationField>
+                <InformationField title="名字" tags={["required", "public"]}>
+                  您的姓名。
+                </InformationField>
+                <InformationField title="暱稱" tags={["required", "public"]}>
+                  公開於講者及網站的稱呼。
+                </InformationField>
+                <InformationField
+                  title="自我介紹"
+                  tags={["required", "public"]}
+                >
+                  公開於講者海報及網站，將有助於會眾更加了解有關你的資訊。至多三人。
+                </InformationField>
+                <InformationField title="手機號碼" tags={["required"]}>
+                  用於大會聯絡、確認資訊用的電話號碼。
+                </InformationField>
+                <InformationField title="其他聯絡方式" tags={["required"]}>
+                  其他任何我們能聯絡您的方式（如 Telegram
+                  ID、住處電話等），以利我們在審稿時即時向您釐清投稿資訊。
+                </InformationField>
+              </div>
+            </div>
+          </div>
+          <div className="space-y-4">
+            <h3 className="text-h3-mobile font-bold text-primary md:text-h3">
+              海報格式參考
+            </h3>
+            <ul className="list-inside list-disc leading-10">
+              <li className="listItem">
+                中文名稱：字體大小範圍為 70 號字〜90
+                號字，且建議至多兩行並置中對齊。
+              </li>
+              <li className="listItem">
+                英文名稱：字體大小範圍為 40 號字〜80
+                號字，且建議最多不超過兩行，置中對齊方式。
+              </li>
+              <li className="listItem">
+                作者中、英文姓名：字體大小範圍 30 號字〜40 號字，置中對齊方式。
+              </li>
+              <li className="listItem">
+                海報頁面的上下側及左右邊各留至少 5 公分。
+              </li>
+              <li className="listItem">
+                圖表需以良好解析度呈現，可以列在文中，或列在參考文獻之後。列在文中者，請盡量靠近文中第一次提及的地方。各圖、表請備說明內容，圖的說明應置於圖的下方，而表的說明則應置於表的上方。
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <section
+          id="poster-examples"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            海報格式範例
+          </h2>
+          <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
+            您可以從{" "}
+            <Link
+              href="https://sitcon.org/2024/poster/"
+              target="_blank"
+              className="cursor-pointer text-primary underline"
+            >
+              SITCON 2024
+            </Link>{" "}
+            網站瀏覽過往的海報範例，了解格式與內容的呈現方式。
+          </p>
+        </section>
+
+        <section
+          id="review-process"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            審稿方式
+          </h2>
+          <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
+            稿件均經議程組形式審查，交予該領域之審稿委員審稿。審稿委員由 SITCON
+            工作人員、業界人士及學界人士組成。
+            <br />
+            審稿委員將針對以下項目進行篩選：
+          </p>
           <ul className="list-inside list-disc leading-10">
             <li className="listItem">
-              中文名稱：字體大小範圍為 70 號字〜90
-              號字，且建議至多兩行並置中對齊。
+              <span className="subTitle hightlight">題材創新性：</span>
+              專案內容與方法具原創與可行性，產生貢獻或影響之潛力。
             </li>
             <li className="listItem">
-              英文名稱：字體大小範圍為 40 號字〜80
-              號字，且建議最多不超過兩行，置中對齊方式。
+              <span className="subTitle hightlight">作品完整度：</span>
+              提供的資料是否具備基本學術倫理、適切性、系統性。我們偏好完整的資料，讓審稿委員更清楚了解專案細節。
             </li>
             <li className="listItem">
-              作者中、英文姓名：字體大小範圍 30 號字〜40 號字，置中對齊方式。
-            </li>
-            <li className="listItem">
-              海報頁面的上下側及左右邊各留至少 5 公分。
-            </li>
-            <li className="listItem">
-              圖表需以良好解析度呈現，可以列在文中，或列在參考文獻之後。列在文中者，請盡量靠近文中第一次提及的地方。各圖、表請備說明內容，圖的說明應置於圖的下方，而表的說明則應置於表的上方。
+              <span className="subTitle hightlight">表達完整性：</span>
+              文句暢通，且文意清楚周全。
             </li>
           </ul>
-        </div>
-      </section>
-
-      <section
-        id="poster-examples"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          海報格式範例
-        </h2>
-        <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-          您可以從{" "}
-          <Link
-            href="https://sitcon.org/2024/poster/"
-            target="_blank"
-            className="cursor-pointer text-primary underline"
-          >
-            SITCON 2024
-          </Link>{" "}
-          網站瀏覽過往的海報範例，了解格式與內容的呈現方式。
-        </p>
-      </section>
+          <div className="py-1" />
+        </section>
 
-      <section
-        id="review-process"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          審稿方式
-        </h2>
-        <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-          稿件均經議程組形式審查，交予該領域之審稿委員審稿。審稿委員由 SITCON
-          工作人員、業界人士及學界人士組成。
-          <br />
-          審稿委員將針對以下項目進行篩選：
-        </p>
-        <ul className="list-inside list-disc leading-10">
-          <li className="listItem">
-            <span className="subTitle hightlight">題材創新性：</span>
-            專案內容與方法具原創與可行性，產生貢獻或影響之潛力。
-          </li>
-          <li className="listItem">
-            <span className="subTitle hightlight">作品完整度：</span>
-            提供的資料是否具備基本學術倫理、適切性、系統性。我們偏好完整的資料，讓審稿委員更清楚了解專案細節。
-          </li>
-          <li className="listItem">
-            <span className="subTitle hightlight">表達完整性：</span>
-            文句暢通，且文意清楚周全。
-          </li>
-        </ul>
-        <div className="py-1" />
-      </section>
+        <CodeOfConduct />
 
-      <CodeOfConduct />
+        <section
+          id="submission-guidelines"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            投稿注意事項
+          </h2>
+          <div>
+            <ul className="list-inside list-disc leading-10">
+              <li className="listItem">
+                除非內容明顯偏離講題、違反 CoC
+                或不符事實，我們不會強制要求講者對研究內容進行修正。
+              </li>
+              <li className="listItem">
+                投稿格式所有註明「公開」的資訊將於年會後公開於官方網站；個人資料中註明「公開」的資訊將放置於年會現場。
+              </li>
+              <li className="listItem">
+                在截稿之前，投稿者可以隨時透過寄送至您電子信箱內的表單回覆副本修改已送出的稿件。
+              </li>
+              <li className="listItem">
+                審稿過程
+                <span className="hightlight subTitle">
+                  不考慮稿件內容的難度
+                </span>
+                。我們以稿件是否能夠吸引人、高品質、適合會眾為考量。
+              </li>
+              <li className="listItem">
+                為鼓勵投稿，大會
+                <span className="hightlight subTitle">
+                  提供投稿者一組報名邀請碼
+                </span>
+                （一稿一組，每人最多一組），可優先報名參與本年會，大會方保有最終發放之權力。若您的稿件被接受，年會將頒予感謝狀以表彰您的熱情付出與貢獻，並額外提供海報展作者身分入場，屆時您可以將年會邀請碼贈與他人使用，邀請親朋好友共襄盛舉。
+              </li>
+              <li className="listItem">
+                若同一稿件有多個作者，請在「暱稱 /
+                名字」欄位標示所有作者的稱呼。稿件經接受者，無論作者人數，皆只提供一組可轉贈的入場票邀請碼、一份參展識別證與一份參展專屬迎賓禮，大會方保有最終發放之權力。
+              </li>
+            </ul>
+            <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
+              若有任何問題或投稿建議，請來信 SITCON 議程組信箱{" "}
+              <Link
+                href="mailto:session@sitcon.org"
+                className="cursor-pointer text-primary underline"
+              >
+                <span className="hightlight subTitle">session@sitcon.org</span>
+              </Link>{" "}
+              。
+            </p>
+          </div>
+        </section>
 
-      <section
-        id="submission-guidelines"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          投稿注意事項
-        </h2>
-        <div>
-          <ul className="list-inside list-disc leading-10">
-            <li className="listItem">
-              除非內容明顯偏離講題、違反 CoC
-              或不符事實，我們不會強制要求講者對研究內容進行修正。
-            </li>
-            <li className="listItem">
-              投稿格式所有註明「公開」的資訊將於年會後公開於官方網站；個人資料中註明「公開」的資訊將放置於年會現場。
-            </li>
-            <li className="listItem">
-              在截稿之前，投稿者可以隨時透過寄送至您電子信箱內的表單回覆副本修改已送出的稿件。
-            </li>
-            <li className="listItem">
-              審稿過程
-              <span className="hightlight subTitle">不考慮稿件內容的難度</span>
-              。我們以稿件是否能夠吸引人、高品質、適合會眾為考量。
-            </li>
-            <li className="listItem">
-              為鼓勵投稿，大會
-              <span className="hightlight subTitle">
-                提供投稿者一組報名邀請碼
-              </span>
-              （一稿一組，每人最多一組），可優先報名參與本年會，大會方保有最終發放之權力。若您的稿件被接受，年會將頒予感謝狀以表彰您的熱情付出與貢獻，並額外提供海報展作者身分入場，屆時您可以將年會邀請碼贈與他人使用，邀請親朋好友共襄盛舉。
-            </li>
-            <li className="listItem">
-              若同一稿件有多個作者，請在「暱稱 /
-              名字」欄位標示所有作者的稱呼。稿件經接受者，無論作者人數，皆只提供一組可轉贈的入場票邀請碼、一份參展識別證與一份參展專屬迎賓禮，大會方保有最終發放之權力。
-            </li>
-          </ul>
+        <section
+          id="license"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            授權
+          </h2>
           <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-            若有任何問題或投稿建議，請來信 SITCON 議程組信箱{" "}
+            投稿作者同意以{" "}
             <Link
-              href="mailto:session@sitcon.org"
-              className="cursor-pointer text-primary underline"
+              target="_blank"
+              href={"https://creativecommons.org/licenses/by/4.0/deed.zh-hant"}
+              className="hightlight subTitle underline underline-offset-2"
             >
-              <span className="hightlight subTitle">session@sitcon.org</span>
+              創用 CC「姓名標示」4.0
             </Link>{" "}
-            。
+            授權大會方進行紙本印刷、宣傳、展覽、數位化、重製等審稿、佈展、官方網站上線工作必要流程。投稿作者仍擁有投稿專案著作之著作權。且擔保本著作係著作人之原創性著作，未侵害任何第三人之智慧財產權。
           </p>
-        </div>
-      </section>
-
-      <section
-        id="license"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          授權
-        </h2>
-        <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-          投稿作者同意以{" "}
-          <Link
-            target="_blank"
-            href={"https://creativecommons.org/licenses/by/4.0/deed.zh-hant"}
-            className="hightlight subTitle underline underline-offset-2"
-          >
-            創用 CC「姓名標示」4.0
-          </Link>{" "}
-          授權大會方進行紙本印刷、宣傳、展覽、數位化、重製等審稿、佈展、官方網站上線工作必要流程。投稿作者仍擁有投稿專案著作之著作權。且擔保本著作係著作人之原創性著作，未侵害任何第三人之智慧財產權。
-        </p>
-        <div className="py-1" />
-      </section>
-
-      <section
-        id="poster-upload"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          海報上傳與佈展
-        </h2>
-        <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-          若您的稿件被予以錄取，您需要依據投稿時提供的資訊將專案/研究內容製作成一完整海報。海報之內容除題目與摘要之外，建議依序可包含前言、方法或技術、成果展示、結論及參考資料等，您可根據專案或研究的特性自行斟酌內容安排，以不超過海報尺寸為限。
-          <span className="subTitle hightlight">
-            請以直版寬 841 mm、高 1189 mm （A0 大小）規格製作為 PDF 檔案
-          </span>
-          ，並於 2025 年 2 月 16
-          日前上傳海報檔案。海報展作者需自行列印海報，並於年會當天攜帶海報至現場張貼。具體佈展地點與安排將於稿件錄取後通知。
-        </p>
-      </section>
+          <div className="py-1" />
+        </section>
 
-      <FAQ QA={QA} />
+        <section
+          id="poster-upload"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            海報上傳與佈展
+          </h2>
+          <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
+            若您的稿件被予以錄取，您需要依據投稿時提供的資訊將專案/研究內容製作成一完整海報。海報之內容除題目與摘要之外，建議依序可包含前言、方法或技術、成果展示、結論及參考資料等，您可根據專案或研究的特性自行斟酌內容安排，以不超過海報尺寸為限。
+            <span className="subTitle hightlight">
+              請以直版寬 841 mm、高 1189 mm （A0 大小）規格製作為 PDF 檔案
+            </span>
+            ，並於 2025 年 2 月 16
+            日前上傳海報檔案。海報展作者需自行列印海報，並於年會當天攜帶海報至現場張貼。具體佈展地點與安排將於稿件錄取後通知。
+          </p>
+        </section>
+        <FAQ QA={QA} />
+      </div>
+      <TableOfContent
+        sections={sections}
+        theme="light"
+        submitUrl="https://forms.gle/NDZqhGJBLwvQTgEt8"
+      />
     </div>
   );
 }
diff --git a/app/cfp/(submission)/undefined/page.tsx b/app/cfp/(submission)/undefined/page.tsx
index c500d72..60faa72 100644
--- a/app/cfp/(submission)/undefined/page.tsx
+++ b/app/cfp/(submission)/undefined/page.tsx
@@ -52,361 +52,371 @@ export default function Page() {
   ];
 
   return (
-    <div className="py-8 text-normal-mobile md:text-normal">
-      <h1 className="mb-4 text-h1-mobile font-extrabold md:text-h1">
-        開放式議程投稿
-      </h1>
-      <TableOfContent
-        sections={sections}
-        theme="light"
-        submitUrl="https://forms.gle/W9WXdqRjV8zbcMfE6"
-      />
-      <Countdown />
-      <section
-        id="important-dates"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          重要時程
-        </h2>
-        <Timeline isPoster={false} />
-      </section>
+    <div className="flex gap-8 py-8 text-normal-mobile md:text-normal">
+      <div>
+        <h1 className="mb-4 text-h1-mobile font-extrabold md:text-h1">
+          開放式議程投稿
+        </h1>
 
-      {SHOW_EARLY_BIRD && (
-        <section className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16">
-          <EarlyBird />
+        <Countdown />
+        <section
+          id="important-dates"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            重要時程
+          </h2>
+          <Timeline isPoster={false} />
         </section>
-      )}
 
-      <section
-        id="session-types"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          議程說明
-        </h2>
-        <p className="text-normal-mobile font-normal leading-loose tracking-wider md:text-normal">
-          開放式議程為<span className="hightlight"> 40 </span> 分鐘和
-          <span className="hightlight"> 90 </span>{" "}
-          分鐘兩種時長，該議程不限定進行方式，希望跳脫傳統議程框架，透過雙向互動、實作等，任何您想得到的非傳統形式進行此場議程。
-        </p>
-      </section>
-      <section
-        id="what-is-open-session"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          什麼是開放式議程？
-        </h2>
-        <p className="text-normal-mobile font-normal leading-loose tracking-wider md:text-normal">
-          為帶給與會者更多元的議程內容，我們為講者提供了開放式議程這個選項，跳脫講者對聽眾單向陳述式的演講，開放式議程更加強調主講者和與會者的雙向交流。SITCON
-          作為學生展現自己的舞台，我們期待以學生為主體的投稿，無論是實作工作坊、議題交流、社群分享或更多您想像得到能讓議程更加多元且具互動性的方式，我們都十分歡迎。
-        </p>
-        <div className="flex grid-rows-4 flex-col gap-5 tablet:grid tablet:grid-cols-2 tablet:grid-rows-2">
-          <SessionTypeBox title="實作工作坊形式">
-            實作是學習一項新技能最直接的方式，您可以設計一個實務導向的工作坊，在介紹新技術的同時穿插應用的範例，讓會眾在過程中獲得成就感並帶走實用的技能。無論是軟體開發、工具使用，還是技術應用實作工作方的題目可以像是：
-            從零開始開發一個簡單的聊天應用程式。 從數位音樂到 AI
-            視覺藝術的創意應用。
-          </SessionTypeBox>
-          <SessionTypeBox title="議題交流形式">
-            知識的交流不只受限於於演講，資訊發展快速，卻也延伸出許多可以深入討論的議題，我們期待透過講者的引言，拋磚引玉，激發聽眾的想法，透過多方觀點的交流，聽眾可以理解不同看法，進而發現新的思考方向。
-            例如： 人工智慧是否會有自我意識？ 隱私權與數據共享如何找到平衡點？
-          </SessionTypeBox>
-          <SessionTypeBox title="社群分享形式">
-            社群的力量在於凝聚志同道合的人，講者可以分享社群運營經驗，無論是分享如何推廣技術還是組織活動的秘訣，透過經驗分享，探討如何打造互助的社群環境，或介紹該社群所推廣的技術、理念與特色，讓更多人對此產生興趣。例如：
-            如何吸引新手加入開源社群？ 如何帶領社群成員認識資料科學？
-          </SessionTypeBox>
-          <SessionTypeBox title="更多形式由您來創造">
-            不只有上述的形式，我們非常歡迎其他形式的議程。
-            無論是主持一場圓桌會議，一起腦力激盪，甚至舉辦一場小競賽，任何你想得到的非傳統議程形式都可以在開放式議程中進行！
-          </SessionTypeBox>
-        </div>
-      </section>
+        {SHOW_EARLY_BIRD && (
+          <section className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16">
+            <EarlyBird />
+          </section>
+        )}
+
+        <section
+          id="session-types"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            議程說明
+          </h2>
+          <p className="text-normal-mobile font-normal leading-loose tracking-wider md:text-normal">
+            開放式議程為<span className="hightlight"> 40 </span> 分鐘和
+            <span className="hightlight"> 90 </span>{" "}
+            分鐘兩種時長，該議程不限定進行方式，希望跳脫傳統議程框架，透過雙向互動、實作等，任何您想得到的非傳統形式進行此場議程。
+          </p>
+        </section>
+        <section
+          id="what-is-open-session"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            什麼是開放式議程？
+          </h2>
+          <p className="text-normal-mobile font-normal leading-loose tracking-wider md:text-normal">
+            為帶給與會者更多元的議程內容，我們為講者提供了開放式議程這個選項，跳脫講者對聽眾單向陳述式的演講，開放式議程更加強調主講者和與會者的雙向交流。SITCON
+            作為學生展現自己的舞台，我們期待以學生為主體的投稿，無論是實作工作坊、議題交流、社群分享或更多您想像得到能讓議程更加多元且具互動性的方式，我們都十分歡迎。
+          </p>
+          <div className="flex grid-rows-4 flex-col gap-5 tablet:grid tablet:grid-cols-2 tablet:grid-rows-2">
+            <SessionTypeBox title="實作工作坊形式">
+              實作是學習一項新技能最直接的方式，您可以設計一個實務導向的工作坊，在介紹新技術的同時穿插應用的範例，讓會眾在過程中獲得成就感並帶走實用的技能。無論是軟體開發、工具使用，還是技術應用實作工作方的題目可以像是：
+              從零開始開發一個簡單的聊天應用程式。 從數位音樂到 AI
+              視覺藝術的創意應用。
+            </SessionTypeBox>
+            <SessionTypeBox title="議題交流形式">
+              知識的交流不只受限於於演講，資訊發展快速，卻也延伸出許多可以深入討論的議題，我們期待透過講者的引言，拋磚引玉，激發聽眾的想法，透過多方觀點的交流，聽眾可以理解不同看法，進而發現新的思考方向。
+              例如： 人工智慧是否會有自我意識？ 隱私權與數據共享如何找到平衡點？
+            </SessionTypeBox>
+            <SessionTypeBox title="社群分享形式">
+              社群的力量在於凝聚志同道合的人，講者可以分享社群運營經驗，無論是分享如何推廣技術還是組織活動的秘訣，透過經驗分享，探討如何打造互助的社群環境，或介紹該社群所推廣的技術、理念與特色，讓更多人對此產生興趣。例如：
+              如何吸引新手加入開源社群？ 如何帶領社群成員認識資料科學？
+            </SessionTypeBox>
+            <SessionTypeBox title="更多形式由您來創造">
+              不只有上述的形式，我們非常歡迎其他形式的議程。
+              無論是主持一場圓桌會議，一起腦力激盪，甚至舉辦一場小競賽，任何你想得到的非傳統議程形式都可以在開放式議程中進行！
+            </SessionTypeBox>
+          </div>
+        </section>
 
-      <section
-        id="submission-topics"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          投稿格式
-        </h2>
-        <div className="space-y-4">
-          <h3 className="text-h3-mobile font-bold text-primary md:text-h3">
-            稿件資訊
-          </h3>
-          <div className="flex flex-col gap-4">
-            <InformationField title="題目" tags={["required", "public"]}>
-              請不要超出<span className="hightlight subTitle"> 20 </span>字。
-            </InformationField>
-            <InformationField title="摘要" tags={["required", "public"]}>
-              建議<span className="hightlight subTitle"> 150~250 </span>
-              字，使用於宣傳與網站公告。
-            </InformationField>
-            <div className="max-[1024px]:hidden">
-              <InformationField title="為何選擇開放式議程" tags={["required"]}>
-                請簡述為什麼您認為開放式議程更適合此議程的內容或主題呈現。這部分可以包括您希望透過開放式議程達成的效果、氣氛或參與方式，以便審稿委員理解您的設計考量。
+        <section
+          id="submission-topics"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            投稿格式
+          </h2>
+          <div className="space-y-4">
+            <h3 className="text-h3-mobile font-bold text-primary md:text-h3">
+              稿件資訊
+            </h3>
+            <div className="flex flex-col gap-4">
+              <InformationField title="題目" tags={["required", "public"]}>
+                請不要超出<span className="hightlight subTitle"> 20 </span>字。
               </InformationField>
-            </div>
-            <div className="hidden max-[1024px]:block">
-              <InformationField
-                title="為何選擇\n開放式議程"
-                tags={["required"]}
-              >
-                請簡述為什麼您認為開放式議程更適合此議程的內容或主題呈現。這部分可以包括您希望透過開放式議程達成的效果、氣氛或參與方式，以便審稿委員理解您的設計考量。
+              <InformationField title="摘要" tags={["required", "public"]}>
+                建議<span className="hightlight subTitle"> 150~250 </span>
+                字，使用於宣傳與網站公告。
+              </InformationField>
+              <div className="max-[1024px]:hidden">
+                <InformationField
+                  title="為何選擇開放式議程"
+                  tags={["required"]}
+                >
+                  請簡述為什麼您認為開放式議程更適合此議程的內容或主題呈現。這部分可以包括您希望透過開放式議程達成的效果、氣氛或參與方式，以便審稿委員理解您的設計考量。
+                </InformationField>
+              </div>
+              <div className="hidden max-[1024px]:block">
+                <InformationField
+                  title="為何選擇\n開放式議程"
+                  tags={["required"]}
+                >
+                  請簡述為什麼您認為開放式議程更適合此議程的內容或主題呈現。這部分可以包括您希望透過開放式議程達成的效果、氣氛或參與方式，以便審稿委員理解您的設計考量。
+                </InformationField>
+              </div>
+              <InformationField title="進行模式" tags={["required", "public"]}>
+                不限字數，請詳細說明該議程預計如何和會眾互動，以及是否需要額外的工具，此項目將幫助會眾預期該如何參與此議程。
+              </InformationField>
+              <InformationField title="議程大綱" tags={["required"]}>
+                請說明該開放式議程的大綱及時間長度規劃。
+              </InformationField>
+              <InformationField title="目標受眾" tags={["required"]}>
+                請說明您期待該議程的目標受眾為怎麼樣的人。例如：「嚮往成為前端開發者的初學者」、「不知道該不該讀研究所的學生」等。
+              </InformationField>
+              <InformationField title="先備知識" tags={["required", "public"]}>
+                請說明該議程的與會者所需具備的{" "}
+                <span className="hightlight subTitle">先備知識</span>
+                。例如：「能理解 Python 基礎語法」、「略懂 108 課綱現況」等。
+              </InformationField>
+              <InformationField title="主題標籤" tags={["required", "public"]}>
+                請填寫 1~4 個該議程相關的{" "}
+                <span className="hightlight subTitle">領域與知識標籤</span>{" "}
+                ，例如：ML、Data
+                Science、資安紅隊、blockchain、社團等；錄取後會與講者溝通微調後公開於官網議程表。
+              </InformationField>
+              <InformationField title="詳細說明" tags={["required"]}>
+                不限字數，請說明這個議程您認為重要的相關細節，以利審稿委員更瞭解您的議程。
+              </InformationField>
+              <InformationField title="附件" tags={["optional"]}>
+                可以附上程式碼、投影片草稿或任何您認為有助於我們瞭解您議程的附件，請再三確認是否有開啟共用權限。
               </InformationField>
             </div>
-            <InformationField title="進行模式" tags={["required", "public"]}>
-              不限字數，請詳細說明該議程預計如何和會眾互動，以及是否需要額外的工具，此項目將幫助會眾預期該如何參與此議程。
-            </InformationField>
-            <InformationField title="議程大綱" tags={["required"]}>
-              請說明該開放式議程的大綱及時間長度規劃。
-            </InformationField>
-            <InformationField title="目標受眾" tags={["required"]}>
-              請說明您期待該議程的目標受眾為怎麼樣的人。例如：「嚮往成為前端開發者的初學者」、「不知道該不該讀研究所的學生」等。
-            </InformationField>
-            <InformationField title="先備知識" tags={["required", "public"]}>
-              請說明該議程的與會者所需具備的{" "}
-              <span className="hightlight subTitle">先備知識</span>
-              。例如：「能理解 Python 基礎語法」、「略懂 108 課綱現況」等。
-            </InformationField>
-            <InformationField title="主題標籤" tags={["required", "public"]}>
-              請填寫 1~4 個該議程相關的{" "}
-              <span className="hightlight subTitle">領域與知識標籤</span>{" "}
-              ，例如：ML、Data
-              Science、資安紅隊、blockchain、社團等；錄取後會與講者溝通微調後公開於官網議程表。
-            </InformationField>
-            <InformationField title="詳細說明" tags={["required"]}>
-              不限字數，請說明這個議程您認為重要的相關細節，以利審稿委員更瞭解您的議程。
-            </InformationField>
-            <InformationField title="附件" tags={["optional"]}>
-              可以附上程式碼、投影片草稿或任何您認為有助於我們瞭解您議程的附件，請再三確認是否有開啟共用權限。
-            </InformationField>
           </div>
-        </div>
-        <div className="space-y-4">
-          <h3 className="text-h3-mobile font-bold text-primary md:text-h3">
-            個人資料
-          </h3>
-          <p className="mb-2">
-            除了暱稱 /
-            名字、自我介紹被用於宣傳，其餘資訊僅需提供一人作為代表（當稿件同時有多位講者時），供議程組於聯絡時使用。
-          </p>
-          <div className="flex flex-col gap-4">
-            <InformationField title="電子郵件" tags={["required"]}>
-              能讓大會聯絡的電子信箱。（注意：請您在大會的聯絡過程中，維持使用相同信箱）
-            </InformationField>
-            <InformationField title="名字" tags={["required", "public"]}>
-              您的姓名。
-            </InformationField>
-            <InformationField title="暱稱" tags={["required", "public"]}>
-              公開於講者及網站的稱呼。
-            </InformationField>
-            <InformationField title="自我介紹" tags={["required", "public"]}>
-              公開於講者海報及網站，將有助於會眾更加了解有關你的資訊。
-            </InformationField>
-            <InformationField title="手機號碼" tags={["required"]}>
-              用於大會聯絡、確認資訊用的電話號碼。
-            </InformationField>
-            <InformationField title="其他聯絡方式" tags={["required"]}>
-              其他任何我們能聯絡您的方式（如 Telegram
-              ID、住處電話等），以利我們在審稿時即時向您釐清投稿資訊。
-            </InformationField>
+          <div className="space-y-4">
+            <h3 className="text-h3-mobile font-bold text-primary md:text-h3">
+              個人資料
+            </h3>
+            <p className="mb-2">
+              除了暱稱 /
+              名字、自我介紹被用於宣傳，其餘資訊僅需提供一人作為代表（當稿件同時有多位講者時），供議程組於聯絡時使用。
+            </p>
+            <div className="flex flex-col gap-4">
+              <InformationField title="電子郵件" tags={["required"]}>
+                能讓大會聯絡的電子信箱。（注意：請您在大會的聯絡過程中，維持使用相同信箱）
+              </InformationField>
+              <InformationField title="名字" tags={["required", "public"]}>
+                您的姓名。
+              </InformationField>
+              <InformationField title="暱稱" tags={["required", "public"]}>
+                公開於講者及網站的稱呼。
+              </InformationField>
+              <InformationField title="自我介紹" tags={["required", "public"]}>
+                公開於講者海報及網站，將有助於會眾更加了解有關你的資訊。
+              </InformationField>
+              <InformationField title="手機號碼" tags={["required"]}>
+                用於大會聯絡、確認資訊用的電話號碼。
+              </InformationField>
+              <InformationField title="其他聯絡方式" tags={["required"]}>
+                其他任何我們能聯絡您的方式（如 Telegram
+                ID、住處電話等），以利我們在審稿時即時向您釐清投稿資訊。
+              </InformationField>
+            </div>
           </div>
-        </div>
-      </section>
-
-      <section
-        id="review-process"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          審稿方式
-        </h2>
-        <p className="text-normal-mobile font-normal leading-loose tracking-wider md:text-normal">
-          稿件均經議程組形式審查，交予該領域之審稿委員審稿。審稿委員由 SITCON
-          工作人員、業界人士及學界人士組成。
-          <br />
-          審稿委員將針對以下項目進行篩選：
-        </p>
-        <ul className="list-inside list-disc leading-10">
-          <li className="listItem">
-            <span className="hightlight subTitle">稿件內容：</span>
-            講者是否熟悉這個題目、和會眾的交流效果、可執行性，以及是否符合開放式議程的宗旨，展現出創新和彈性的分享形式，能促進與會者的參與或啟發新的想法。
-          </li>
-          <li className="listItem">
-            <span className="hightlight subTitle">表達能力：</span>
-            提供的資料是否有條理、文句暢通，提供資料（尤其是稿件的詳細說明）之完整度。我們偏好完整的資料，讓審稿委員更清楚了解演講細節。
-          </li>
-          <li className="listItem">
-            <span className="hightlight subTitle">適合聽眾：</span>稿件是否適合
-            SITCON 大多數的與會者討論。
-          </li>
-          {/* <li className="listItem">
-            <span className="hightlight subTitle"> 議程適切性：</span>
-            稿件是否符合開放式議程的宗旨，展現出創新和彈性的分享形式，能促進與會者的參與感或啟發新的想法。
-          </li> */}
-        </ul>
-        <div className="py-1" />
-      </section>
+        </section>
 
-      <CodeOfConduct />
-      <section
-        id="submission-guidelines"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          投稿注意事項
-        </h2>
-        <div>
+        <section
+          id="review-process"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            審稿方式
+          </h2>
+          <p className="text-normal-mobile font-normal leading-loose tracking-wider md:text-normal">
+            稿件均經議程組形式審查，交予該領域之審稿委員審稿。審稿委員由 SITCON
+            工作人員、業界人士及學界人士組成。
+            <br />
+            審稿委員將針對以下項目進行篩選：
+          </p>
           <ul className="list-inside list-disc leading-10">
             <li className="listItem">
-              除非內容明顯偏離講題、違反 CoC
-              或不符事實，我們不會強制要求講者對演講內容進行修正。
-            </li>
-            <li>在截稿之前，投稿者可以隨時透過表單回函修改已送出的稿件。</li>
-            <li className="listItem">
-              審稿過程
-              <span className="hightlight subTitle">不考慮稿件內容的難度</span>
-              。我們以稿件是否能夠吸引人、高品質、適合聽眾為考量。
+              <span className="hightlight subTitle">稿件內容：</span>
+              講者是否熟悉這個題目、和會眾的交流效果、可執行性，以及是否符合開放式議程的宗旨，展現出創新和彈性的分享形式，能促進與會者的參與或啟發新的想法。
             </li>
             <li className="listItem">
-              若審稿委員認為您的稿件比較適合其他形式，且原形式名額已經額滿、無法再增額時，我們會向您充分說明與溝通，並經您的同意後，轉換稿件類型或時間長度。
+              <span className="hightlight subTitle">表達能力：</span>
+              提供的資料是否有條理、文句暢通，提供資料（尤其是稿件的詳細說明）之完整度。我們偏好完整的資料，讓審稿委員更清楚了解演講細節。
             </li>
             <li className="listItem">
-              SITCON 2025
-              將會有多軌議程及各式場外活動同時進行，與會者可以自行決定要參與哪一場議程或活動。
-            </li>
-            <li className="listItem">
-              為鼓勵投稿，大會
-              <span className="hightlight subTitle">
-                提供投稿者一組報名邀請碼
-              </span>
-              （一稿一組，每人最多一組），可優先報名參與本年會。若您的稿件被接受，年會將頒予感謝狀以表彰您的熱情付出與貢獻，並額外提供講者身分入場，屆時您可以將年會邀請碼贈與他人使用，邀請親朋好友共襄盛舉。
-            </li>
-            <li className="listItem">
-              若同一稿件有多個講者，請在「暱稱 /
-              名字」欄位標示所有講者的稱呼，並在「演講大綱」詳細說明各個講者如何分配演講內容。稿件經接受者，無論講者人數，皆只提供一組可轉贈的入場票邀請碼、一份講者識別證與一份講者專屬迎賓禮，大會方保有最終發放之權力。未佩戴識別證的講者，僅能在自己的演講時，於該議程時段進入議程所在的會議廳。
+              <span className="hightlight subTitle">適合聽眾：</span>
+              稿件是否適合 SITCON 大多數的與會者討論。
             </li>
+            {/* <li className="listItem">
+              <span className="hightlight subTitle"> 議程適切性：</span>
+              稿件是否符合開放式議程的宗旨，展現出創新和彈性的分享形式，能促進與會者的參與感或啟發新的想法。
+            </li> */}
           </ul>
+          <div className="py-1" />
+        </section>
+
+        <CodeOfConduct />
+        <section
+          id="submission-guidelines"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            投稿注意事項
+          </h2>
+          <div>
+            <ul className="list-inside list-disc leading-10">
+              <li className="listItem">
+                除非內容明顯偏離講題、違反 CoC
+                或不符事實，我們不會強制要求講者對演講內容進行修正。
+              </li>
+              <li>在截稿之前，投稿者可以隨時透過表單回函修改已送出的稿件。</li>
+              <li className="listItem">
+                審稿過程
+                <span className="hightlight subTitle">
+                  不考慮稿件內容的難度
+                </span>
+                。我們以稿件是否能夠吸引人、高品質、適合聽眾為考量。
+              </li>
+              <li className="listItem">
+                若審稿委員認為您的稿件比較適合其他形式，且原形式名額已經額滿、無法再增額時，我們會向您充分說明與溝通，並經您的同意後，轉換稿件類型或時間長度。
+              </li>
+              <li className="listItem">
+                SITCON 2025
+                將會有多軌議程及各式場外活動同時進行，與會者可以自行決定要參與哪一場議程或活動。
+              </li>
+              <li className="listItem">
+                為鼓勵投稿，大會
+                <span className="hightlight subTitle">
+                  提供投稿者一組報名邀請碼
+                </span>
+                （一稿一組，每人最多一組），可優先報名參與本年會。若您的稿件被接受，年會將頒予感謝狀以表彰您的熱情付出與貢獻，並額外提供講者身分入場，屆時您可以將年會邀請碼贈與他人使用，邀請親朋好友共襄盛舉。
+              </li>
+              <li className="listItem">
+                若同一稿件有多個講者，請在「暱稱 /
+                名字」欄位標示所有講者的稱呼，並在「演講大綱」詳細說明各個講者如何分配演講內容。稿件經接受者，無論講者人數，皆只提供一組可轉贈的入場票邀請碼、一份講者識別證與一份講者專屬迎賓禮，大會方保有最終發放之權力。未佩戴識別證的講者，僅能在自己的演講時，於該議程時段進入議程所在的會議廳。
+              </li>
+            </ul>
+            <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
+              若有任何問題或投稿建議，請來信 SITCON 議程組信箱{" "}
+              <Link
+                href="mailto:session@sitcon.org"
+                className="cursor-pointer text-primary underline"
+              >
+                <span className="hightlight subTitle">session@sitcon.org</span>
+              </Link>{" "}
+              。
+            </p>
+          </div>
+        </section>
+
+        <section
+          id="license"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            授權
+          </h2>
           <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-            若有任何問題或投稿建議，請來信 SITCON 議程組信箱{" "}
+            今年將採取實體與線上同步之模式進行，除開放式議程外，年會當天將對每一場議程進行直播串流。如果您同意以
+            <Link
+              target="_blank"
+              href={"https://creativecommons.org/licenses/by/4.0/deed.zh-hant"}
+              className="hightlight subTitle underline underline-offset-2"
+            >
+              {" "}
+              創用 CC「姓名標示」4.0{" "}
+            </Link>
+            授權釋出議程錄影，我們將會上傳至
+            <Link
+              target="_blank"
+              href={"https://sitcon.org/yt"}
+              className="hightlight subTitle underline underline-offset-2"
+            >
+              {" "}
+              YouTube{" "}
+            </Link>
+            及
             <Link
-              href="mailto:session@sitcon.org"
-              className="cursor-pointer text-primary underline"
+              target="_blank"
+              href={"https://odysee.com/@SITCON:f"}
+              className="hightlight subTitle underline underline-offset-2"
             >
-              <span className="hightlight subTitle">session@sitcon.org</span>
-            </Link>{" "}
-            。
+              {" "}
+              LBRY{" "}
+            </Link>
+            的 SITCON 頻道。{" "}
           </p>
-        </div>
-      </section>
-
-      <section
-        id="license"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          授權
-        </h2>
-        <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-          今年將採取實體與線上同步之模式進行，除開放式議程外，年會當天將對每一場議程進行直播串流。如果您同意以
-          <Link
-            target="_blank"
-            href={"https://creativecommons.org/licenses/by/4.0/deed.zh-hant"}
-            className="hightlight subTitle underline underline-offset-2"
-          >
-            {" "}
-            創用 CC「姓名標示」4.0{" "}
-          </Link>
-          授權釋出議程錄影，我們將會上傳至
-          <Link
-            target="_blank"
-            href={"https://sitcon.org/yt"}
-            className="hightlight subTitle underline underline-offset-2"
-          >
-            {" "}
-            YouTube{" "}
-          </Link>
-          及
-          <Link
-            target="_blank"
-            href={"https://odysee.com/@SITCON:f"}
-            className="hightlight subTitle underline underline-offset-2"
-          >
-            {" "}
-            LBRY{" "}
-          </Link>
-          的 SITCON 頻道。{" "}
-        </p>
-        <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-          您為議程準備的其餘相關素材（如投影片），將於年會前由 SITCON
-          議程組向您蒐集素材連結，並整理在年會官方網站的議程資訊上。您可以自行決定在何種平台、以何種方式釋出，我們不會干涉，但鼓勵您選擇允許知識共享的
-          <Link
-            target="_blank"
-            href={"https://creativecommons.org/licenses/by/4.0/deed.zh-hant"}
-            className="hightlight subTitle underline underline-offset-2"
-          >
-            {" "}
-            創用 CC 系列授權。{" "}
-          </Link>
-        </p>
-        <div className="py-1" />
-      </section>
+          <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
+            您為議程準備的其餘相關素材（如投影片），將於年會前由 SITCON
+            議程組向您蒐集素材連結，並整理在年會官方網站的議程資訊上。您可以自行決定在何種平台、以何種方式釋出，我們不會干涉，但鼓勵您選擇允許知識共享的
+            <Link
+              target="_blank"
+              href={"https://creativecommons.org/licenses/by/4.0/deed.zh-hant"}
+              className="hightlight subTitle underline underline-offset-2"
+            >
+              {" "}
+              創用 CC 系列授權。{" "}
+            </Link>
+          </p>
+          <div className="py-1" />
+        </section>
 
-      <section
-        id="practice-talk"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          試講
-        </h2>
-        <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-          試講提供講者提升演講品質的機會，比照年會時間安排供講者講完整場演講，
-          <span className="hightlight subTitle">
-            並有工作人員提供建議（如簡報、臺風等）
-          </span>
-          ，講者可以自由參加，並自行選擇最合適的場次。若您的稿件確認入選，議程組將再與您協調確切時間。為維護所有講者的權利，試講時間恕不接受更改，請您準時參與。
-        </p>
-        <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-          開放式議程的形式較為靈活，我們強烈建議講者參與試講，並在試講中提前演練時間控制、現場互動安排與內容引導。由於開放式議程重視雙向交流和互動環節，建議您設計能促進參與者投入互動的方式，以更流暢地進行議程，例如預先設定討論問題、安排練習或互動環節。試講過程中，工作人員將針對控時、控場等細節提供回饋，協助您調整內容，確保開放式議程在實際呈現時能順利進行並達到最佳效果。
-        </p>
-        <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-          所有場次將依報名情況舉辦，預計舉辦北部、中部、南部、線上場等，時間約為二月，地點另行通知。
-        </p>
-        <div className="rounded-2xl border border-foreground p-4">
+        <section
+          id="practice-talk"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            試講
+          </h2>
           <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-            試講交通補助：為確保年會議程品質，我們鼓勵講者參與試講，並將依照客運價格標準，補助講者至最近試講場地的全額或部分車資。若您的稿件被予以錄取，細節將於錄取後通知。
+            試講提供講者提升演講品質的機會，比照年會時間安排供講者講完整場演講，
+            <span className="hightlight subTitle">
+              並有工作人員提供建議（如簡報、臺風等）
+            </span>
+            ，講者可以自由參加，並自行選擇最合適的場次。若您的稿件確認入選，議程組將再與您協調確切時間。為維護所有講者的權利，試講時間恕不接受更改，請您準時參與。
           </p>
-        </div>
-      </section>
+          <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
+            開放式議程的形式較為靈活，我們強烈建議講者參與試講，並在試講中提前演練時間控制、現場互動安排與內容引導。由於開放式議程重視雙向交流和互動環節，建議您設計能促進參與者投入互動的方式，以更流暢地進行議程，例如預先設定討論問題、安排練習或互動環節。試講過程中，工作人員將針對控時、控場等細節提供回饋，協助您調整內容，確保開放式議程在實際呈現時能順利進行並達到最佳效果。
+          </p>
+          <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
+            所有場次將依報名情況舉辦，預計舉辦北部、中部、南部、線上場等，時間約為二月，地點另行通知。
+          </p>
+          <div className="rounded-2xl border border-foreground p-4">
+            <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
+              試講交通補助：為確保年會議程品質，我們鼓勵講者參與試講，並將依照客運價格標準，補助講者至最近試講場地的全額或部分車資。若您的稿件被予以錄取，細節將於錄取後通知。
+            </p>
+          </div>
+        </section>
 
-      <section
-        id="rehearsal"
-        className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
-      >
-        <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
-          彩排
-        </h2>
-        <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
-          SITCON 2025
-          將在年會前一天提供議程被錄取之講者彩排的機會。彩排能讓講者熟悉現場設備環境、攝影機位置，並且測試
-          Live Demo
-          情境。若講者想於正式演講前先熟悉場地與現場情況，歡迎於彩排當天前來參與，一起使年會議程品質更臻完美。
-        </p>
-        <ul className="list-disc pl-6 leading-10">
-          <li className="">日期：2025 年 3 月 7 日（五）。</li>
-          <li className="">場地：議程廳與年會相同，細節將於稿件錄取後通知。</li>
-          <li className="">
-            時間：一人約 5~10 分鐘，可練習操作設備或演練部分簡報內容。若有 Live
-            Demo 或特殊需求，可提前與議程組討論。
-          </li>
-          <li className="">
-            提供設備：與年會當天場地的設備相同，例如麥克風、倒數計時器等。
-          </li>
-        </ul>
-      </section>
+        <section
+          id="rehearsal"
+          className="my-4 -mt-[60px] space-y-4 pt-[80px] md:mb-16"
+        >
+          <h2 className="text-h2-mobile font-extrabold text-primary md:text-h2">
+            彩排
+          </h2>
+          <p className="text-normal-mobile font-normal leading-10 tracking-wider md:text-normal">
+            SITCON 2025
+            將在年會前一天提供議程被錄取之講者彩排的機會。彩排能讓講者熟悉現場設備環境、攝影機位置，並且測試
+            Live Demo
+            情境。若講者想於正式演講前先熟悉場地與現場情況，歡迎於彩排當天前來參與，一起使年會議程品質更臻完美。
+          </p>
+          <ul className="list-disc pl-6 leading-10">
+            <li className="">日期：2025 年 3 月 7 日（五）。</li>
+            <li className="">
+              場地：議程廳與年會相同，細節將於稿件錄取後通知。
+            </li>
+            <li className="">
+              時間：一人約 5~10 分鐘，可練習操作設備或演練部分簡報內容。若有
+              Live Demo 或特殊需求，可提前與議程組討論。
+            </li>
+            <li className="">
+              提供設備：與年會當天場地的設備相同，例如麥克風、倒數計時器等。
+            </li>
+          </ul>
+        </section>
 
-      <FAQ QA={QA} />
+        <FAQ QA={QA} />
+      </div>
+      <TableOfContent
+        sections={sections}
+        theme="light"
+        submitUrl="https://forms.gle/W9WXdqRjV8zbcMfE6"
+      />
     </div>
   );
 }

From 909617bbd5fe69ccf85eedde97aef883e2913036 Mon Sep 17 00:00:00 2001
From: Dada878 <xx0932399@gmail.com>
Date: Sat, 7 Dec 2024 20:55:29 +0800
Subject: [PATCH 2/2] fix: fix mobile TOC layout

---
 .../_components/table-of-content-mobile.tsx   | 100 ++++++++++++++++++
 .../_components/table-of-content.tsx          |  67 ------------
 app/cfp/(submission)/normal/page.tsx          |   6 ++
 app/cfp/(submission)/poster/page.tsx          |   7 +-
 app/cfp/(submission)/undefined/page.tsx       |   7 ++
 5 files changed, 119 insertions(+), 68 deletions(-)
 create mode 100644 app/cfp/(submission)/_components/table-of-content-mobile.tsx

diff --git a/app/cfp/(submission)/_components/table-of-content-mobile.tsx b/app/cfp/(submission)/_components/table-of-content-mobile.tsx
new file mode 100644
index 0000000..765a2fe
--- /dev/null
+++ b/app/cfp/(submission)/_components/table-of-content-mobile.tsx
@@ -0,0 +1,100 @@
+"use client";
+import Link from "next/link";
+import { useState, useEffect } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useNavbar } from "@/app/cfp/_components/navbar-context";
+
+export default function TableOfContentMobile({
+  theme = "light",
+  sections = [],
+  submitUrl,
+}: {
+  theme: "red" | "light";
+  sections: { id: string; title: string }[];
+  submitUrl: string;
+}) {
+  const [showDropdown, setShowDropdown] = useState(false);
+  const { isNavbarExpanded } = useNavbar();
+
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          break;
+        }
+      }
+    });
+
+    for (const section of sections) {
+      const targetElement = document.querySelector(`#${section.id}`);
+      if (!targetElement) continue;
+      observer.observe(targetElement);
+    }
+  }, [sections]);
+
+  return (
+    <>
+      <nav className="relative md:hidden">
+        <AnimatePresence>
+          {!isNavbarExpanded && (
+            <motion.a
+              key="submit"
+              href={submitUrl}
+              target="_blank"
+              initial={{ scale: 0.95, opacity: 0, filter: "blur(0.5em)" }}
+              animate={{ scale: 1, opacity: 1, filter: "blur(0)" }}
+              exit={{ scale: 0.95, opacity: 0, filter: "blur(0.5em)" }}
+              transition={{ duration: 0.25 }}
+              whileTap={{ scale: 0.95 }}
+              className={`fixed bottom-2 left-2 right-2 z-30 rounded-md bg-background-light p-3 text-center text-lg shadow-2xl shadow-black brightness-150`}
+            >
+              立刻投稿
+            </motion.a>
+          )}
+        </AnimatePresence>
+        <div
+          onClick={() => setShowDropdown((prev) => !prev)}
+          className={`${theme === "light" ? "bg-background-light" : "bg-foreground"} flex h-[40px] items-center justify-between rounded-xl px-4 transition active:scale-95`}
+        >
+          <h2
+            className={`font-bold ${theme === "light" ? "text-foreground" : "text-red"}`}
+          >
+            本頁目錄
+          </h2>
+          <span
+            className={`material-symbols-outlined ${theme === "light" ? "text-foreground" : "text-red"} `}
+          >
+            {showDropdown ? "keyboard_arrow_up" : "keyboard_arrow_down"}
+          </span>
+        </div>
+        {/* dropDown */}
+        {showDropdown && (
+          <div
+            className={`absolute top-[50px] z-10 w-full rounded-lg ${theme === "light" ? "bg-background-light" : "bg-background-light"} p-2 shadow-lg`}
+          >
+            {sections.map((section, index) => (
+              <motion.div
+                key={section.id}
+                initial={{ opacity: 0, y: -20, backgroundColor: "#D3C4B7" }}
+                animate={{ opacity: 1, y: 0, backgroundColor: "#000000" }}
+                transition={{
+                  duration: 0.1,
+                  delay: index * 0.03,
+                  ease: "easeInOut",
+                }} // 動畫時間
+              >
+                <Link
+                  href={`#${section.id}`}
+                  className={`flex w-full justify-center border-b border-foreground/30 p-0 py-4 transition duration-300 ${theme === "light" ? "bg-background-light text-foreground" : "bg-background-light text-red"}`}
+                  onClick={() => setShowDropdown(false)}
+                >
+                  <div className=" ">{section.title}</div>
+                </Link>
+              </motion.div>
+            ))}
+          </div>
+        )}
+      </nav>
+    </>
+  );
+}
diff --git a/app/cfp/(submission)/_components/table-of-content.tsx b/app/cfp/(submission)/_components/table-of-content.tsx
index b490a7e..2465896 100644
--- a/app/cfp/(submission)/_components/table-of-content.tsx
+++ b/app/cfp/(submission)/_components/table-of-content.tsx
@@ -1,11 +1,8 @@
 "use client";
 import Link from "next/link";
 import { useState, useEffect } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { useNavbar } from "@/app/cfp/_components/navbar-context";
 
 export default function TableOfContent({
-  theme = "light",
   sections = [],
   submitUrl,
 }: {
@@ -13,9 +10,7 @@ export default function TableOfContent({
   sections: { id: string; title: string }[];
   submitUrl: string;
 }) {
-  const [showDropdown, setShowDropdown] = useState(false);
   const [currentSection, setCurrentSection] = useState<null | string>(null);
-  const { isNavbarExpanded } = useNavbar();
 
   useEffect(() => {
     const observer = new IntersectionObserver((entries) => {
@@ -69,68 +64,6 @@ export default function TableOfContent({
           ))}
         </ul>
       </nav>
-      {/* mobile */}
-      <nav className="relative md:hidden">
-        <AnimatePresence>
-          {!isNavbarExpanded && (
-            <motion.a
-              key="submit"
-              href={submitUrl}
-              target="_blank"
-              initial={{ scale: 0.95, opacity: 0, filter: "blur(0.5em)" }}
-              animate={{ scale: 1, opacity: 1, filter: "blur(0)" }}
-              exit={{ scale: 0.95, opacity: 0, filter: "blur(0.5em)" }}
-              transition={{ duration: 0.25 }}
-              whileTap={{ scale: 0.95 }}
-              className={`fixed bottom-2 left-2 right-2 z-30 rounded-md bg-background-light p-3 text-center text-lg shadow-2xl shadow-black brightness-150`}
-            >
-              立刻投稿
-            </motion.a>
-          )}
-        </AnimatePresence>
-        <div
-          onClick={() => setShowDropdown((prev) => !prev)}
-          className={`${theme === "light" ? "bg-background-light" : "bg-foreground"} flex h-[40px] items-center justify-between rounded-xl px-4 transition active:scale-95`}
-        >
-          <h2
-            className={`font-bold ${theme === "light" ? "text-foreground" : "text-red"}`}
-          >
-            本頁目錄
-          </h2>
-          <span
-            className={`material-symbols-outlined ${theme === "light" ? "text-foreground" : "text-red"} `}
-          >
-            {showDropdown ? "keyboard_arrow_up" : "keyboard_arrow_down"}
-          </span>
-        </div>
-        {/* dropDown */}
-        {showDropdown && (
-          <div
-            className={`absolute top-[50px] z-10 w-full rounded-lg ${theme === "light" ? "bg-background-light" : "bg-background-light"} p-2 shadow-lg`}
-          >
-            {sections.map((section, index) => (
-              <motion.div
-                key={section.id}
-                initial={{ opacity: 0, y: -20, backgroundColor: "#D3C4B7" }}
-                animate={{ opacity: 1, y: 0, backgroundColor: "#000000" }}
-                transition={{
-                  duration: 0.1,
-                  delay: index * 0.03,
-                  ease: "easeInOut",
-                }} // 動畫時間
-              >
-                <Link
-                  href={`#${section.id}`}
-                  className={`flex w-full justify-center border-b border-foreground/30 p-0 py-4 transition duration-300 ${theme === "light" ? "bg-background-light text-foreground" : "bg-background-light text-red"}`}
-                  onClick={() => setShowDropdown(false)}
-                >
-                  <div className=" ">{section.title}</div>
-                </Link>
-              </motion.div>
-            ))}
-          </div>
-        )}
-      </nav>
     </>
   );
 }
diff --git a/app/cfp/(submission)/normal/page.tsx b/app/cfp/(submission)/normal/page.tsx
index 02824c0..b9dcd5f 100644
--- a/app/cfp/(submission)/normal/page.tsx
+++ b/app/cfp/(submission)/normal/page.tsx
@@ -10,6 +10,7 @@ import Image from "next/image";
 import { ReactNode } from "react";
 import EarlyBird from "../_components/early-bird";
 import { SHOW_EARLY_BIRD } from "@/lib/const";
+import TableOfContentMobile from "../_components/table-of-content-mobile";
 
 function PresentationBlock(presentation: { title: string; id: string }) {
   return (
@@ -196,6 +197,11 @@ export default function Page() {
         </h1>
 
         <Countdown />
+        <TableOfContentMobile
+          sections={sections}
+          theme="light"
+          submitUrl="https://forms.gle/rb5kuP1CCrzodKJs9"
+        />
 
         <section
           id="important-dates"
diff --git a/app/cfp/(submission)/poster/page.tsx b/app/cfp/(submission)/poster/page.tsx
index 5cda1ae..b2b1f93 100644
--- a/app/cfp/(submission)/poster/page.tsx
+++ b/app/cfp/(submission)/poster/page.tsx
@@ -7,6 +7,7 @@ import FAQ from "../../_components/faq";
 import { InformationField } from "../normal/page";
 import EarlyBird from "../_components/early-bird";
 import { SHOW_EARLY_BIRD } from "@/lib/const";
+import TableOfContentMobile from "../_components/table-of-content-mobile";
 
 export default function Page() {
   const sections = [
@@ -55,7 +56,11 @@ export default function Page() {
         <h1 className="mb-4 text-h1-mobile font-extrabold md:text-h1">
           海報徵稿
         </h1>
-
+        <TableOfContentMobile
+          sections={sections}
+          theme="light"
+          submitUrl="https://forms.gle/NDZqhGJBLwvQTgEt8"
+        />
         <Countdown />
         <section
           id="important-dates"
diff --git a/app/cfp/(submission)/undefined/page.tsx b/app/cfp/(submission)/undefined/page.tsx
index 60faa72..2203705 100644
--- a/app/cfp/(submission)/undefined/page.tsx
+++ b/app/cfp/(submission)/undefined/page.tsx
@@ -7,6 +7,7 @@ import Link from "next/link";
 import { InformationField } from "../normal/page";
 import EarlyBird from "../_components/early-bird";
 import { SHOW_EARLY_BIRD } from "@/lib/const";
+import TableOfContentMobile from "../_components/table-of-content-mobile";
 
 export default function Page() {
   const sections = [
@@ -58,6 +59,12 @@ export default function Page() {
           開放式議程投稿
         </h1>
 
+        <TableOfContentMobile
+          sections={sections}
+          theme="light"
+          submitUrl="https://forms.gle/rb5kuP1CCrzodKJs9"
+        />
+
         <Countdown />
         <section
           id="important-dates"