diff --git a/app/cfp/(submission)/_components/timeline copy.tsx b/app/cfp/(submission)/_components/timeline copy.tsx
new file mode 100644
index 00000000..d8388996
--- /dev/null
+++ b/app/cfp/(submission)/_components/timeline copy.tsx	
@@ -0,0 +1,209 @@
+import { ReactNode } from "react";
+
+export default function Timeline({ isPoster }: { isPoster?: boolean }) {
+  return (
+    <>
+      {/* Desktop Layout */}
+      <div className="mx-auto hidden w-full md:block">
+        <div className="relative">
+          <div className="absolute mb-8 h-8 w-full">
+            <svg
+              width="100%"
+              height={32}
+              viewBox="0 0 800 32"
+              preserveAspectRatio="none"
+            >
+              {/* Main horizontal line */}
+              {/* Arrow */}
+              <path
+                id="arrowHead"
+                d="M770 16 L790 16 M780 8 L790 16 L780 24"
+                className="stroke-current text-foreground"
+                strokeWidth="3.5"
+                fill="none"
+              />
+              <line
+                x1="2%"
+                y1="16"
+                x2="98%"
+                y2="16"
+                className="stroke-current text-foreground"
+                strokeWidth="3.5"
+              />
+            </svg>
+          </div>
+
+          {/* 時程 */}
+          <div className="flex justify-between">
+            <div className="z-10 w-min">
+              <svg className="h-10 w-10">
+                <circle
+                  key={1}
+                  cx={10}
+                  cy="16"
+                  r="8"
+                  className="fill-current text-primary"
+                />
+              </svg>
+              <span className="material-icons-big">flag</span>
+              <p>2024-11-23</p>
+              <h3 className="w-max text-h3">開始徵稿</h3>
+            </div>
+
+            <TimelineItem
+              icon={
+                <span className="material-icons-big text-foreground">
+                  featured_seasonal_and_gifts
+                </span>
+              }
+              date="01-21 23:59"
+              name="早鳥截止"
+            />
+
+            <TimelineItem
+              icon={
+                <span className="material-icons-big text-foreground">
+                  event_busy
+                </span>
+              }
+              date="01-21 23:59"
+              name="投稿截止"
+            />
+
+            <TimelineItem
+              icon={<span className="material-icons-big">email</span>}
+              date="一月下旬"
+              name="錄取通知"
+            />
+
+            {isPoster ? (
+              <div className="z-10 w-min">
+                <svg className="h-10 w-10">
+                  <circle
+                    key={1}
+                    cx={10}
+                    cy="16"
+                    r="8"
+                    className="fill-current text-primary"
+                  />
+                </svg>
+                <span className="material-icons-big">route</span>
+                <p>02-16</p>
+                <h3 className="w-max text-h3">錄取海報檔案上傳截止</h3>
+              </div>
+            ) : (
+              <>
+                <div className="z-10 w-min">
+                  <svg className="h-10 w-10">
+                    <circle
+                      key={1}
+                      cx={10}
+                      cy="16"
+                      r="8"
+                      className="fill-current text-primary"
+                    />
+                  </svg>
+                  <span className="material-icons-big">mic_none</span>
+                  <p className="w-max">二月</p>
+                  <h3 className="w-max text-h3">試講</h3>
+                </div>
+                <div className="z-10 w-min">
+                  <svg className="h-10 w-10">
+                    <circle
+                      key={1}
+                      cx={10}
+                      cy="16"
+                      r="8"
+                      className="fill-current text-primary"
+                    />
+                  </svg>
+                  <span className="material-icons-big">route</span>
+                  <p>03-07</p>
+                  <h3 className="w-max text-h3">彩排</h3>
+                </div>
+              </>
+            )}
+
+            <TimelineItem
+              icon={
+                <span className="material-icons-big text-foreground">
+                  groups
+                </span>
+              }
+              date="03-08"
+              name="年會"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Layout */}
+      <div className="mx-auto tracking-wider md:hidden">
+        <ul className="list-disc space-y-4 pl-5">
+          <li>
+            <span className="font-bold">開始徵稿</span>
+            ：2024 年 11 月 22 日（六）
+          </li>
+          <li>
+            <span className="font-bold">投稿截止</span>
+            ：2025 年 1 月 21 日（二） 23:59
+          </li>
+          <li>
+            <span className="font-bold">錄取通知</span>
+            ：2025 年一月下旬
+          </li>
+          {isPoster ? (
+            <>
+              <li>
+                <span className="font-bold">錄取海報檔案上傳截止</span>
+                ：2025 年 2 月 16 日（日）
+              </li>
+            </>
+          ) : (
+            <>
+              <li>
+                <span className="font-bold">試講</span>
+                ：2025 年二月
+              </li>
+              <li>
+                <span className="font-bold">彩排</span>
+                ：2025 年 3 月 7 日（五）
+              </li>
+            </>
+          )}
+          <li>
+            <span className="font-bold">年會</span>
+            ：2025 年 3 月 8 日（六）
+          </li>
+        </ul>
+      </div>
+    </>
+  );
+}
+
+function TimelineItem({
+  icon,
+  date,
+  name,
+}: {
+  icon: ReactNode;
+  date: string;
+  name: string;
+}) {
+  return (
+    <div className="z-10 w-min">
+      <svg className="h-10 w-10">
+        <circle
+          key={1}
+          cx={10}
+          cy="16"
+          r="8"
+          className="fill-current text-primary"
+        />
+      </svg>
+      {icon}
+      <p>{date}</p>
+      <h3 className="w-max text-h3">{name}</h3>
+    </div>
+  );
+}
diff --git a/app/cfp/(submission)/_components/timeline.tsx b/app/cfp/(submission)/_components/timeline.tsx
index 6b0c7a63..78b04014 100644
--- a/app/cfp/(submission)/_components/timeline.tsx
+++ b/app/cfp/(submission)/_components/timeline.tsx
@@ -33,115 +33,23 @@ export default function Timeline({ isPoster }: { isPoster?: boolean }) {
 
           {/* 時程 */}
           <div className="flex justify-between">
-            <div className="z-10 w-min">
-              <svg className="h-10 w-10">
-                <circle
-                  key={1}
-                  cx={10}
-                  cy="16"
-                  r="8"
-                  className="fill-current text-primary"
-                />
-              </svg>
-              <span className="material-icons-big">flag</span>
-              <p>2024-11-23</p>
-              <h3 className="w-max text-h3">開始徵稿</h3>
-            </div>
-
-            <div className="z-10 w-min">
-              <svg className="h-10 w-10">
-                <circle
-                  key={1}
-                  cx={10}
-                  cy="16"
-                  r="8"
-                  className="fill-current text-primary"
-                />
-              </svg>
-              <span className="material-icons-big text-foreground">
-                event_busy
-              </span>
-              <p>01-21 23:59</p>
-              <h3 className="w-max text-h3">投稿截止</h3>
-            </div>
-
-            <div className="z-10 w-min">
-              <svg className="h-10 w-10">
-                <circle
-                  key={1}
-                  cx={10}
-                  cy="16"
-                  r="8"
-                  className="fill-current text-primary"
-                />
-              </svg>
-              <span className="material-icons-big">email</span>
-              <p>一月下旬</p>
-              <h3 className="w-max text-h3">錄取通知</h3>
-            </div>
-
+            <TimelineItem icon="flag" date="2024-11-23" name="開始徵稿" />
+            <TimelineItem icon="redeem" date="01-21 23:59" name="早鳥截止" />
+            <TimelineItem
+              icon="event_busy"
+              date="01-21 23:59"
+              name="投稿及稿件修改截止"
+            />
+            <TimelineItem icon="email" date="一月下旬" name="錄取通知" />
             {isPoster ? (
-              <div className="z-10 w-min">
-                <svg className="h-10 w-10">
-                  <circle
-                    key={1}
-                    cx={10}
-                    cy="16"
-                    r="8"
-                    className="fill-current text-primary"
-                  />
-                </svg>
-                <span className="material-icons-big">route</span>
-                <p>02-16</p>
-                <h3 className="w-max text-h3">錄取海報檔案上傳截止</h3>
-              </div>
+              <TimelineItem icon="route" date="2-16" name="錄取海報上傳截止" />
             ) : (
               <>
-                <div className="z-10 w-min">
-                  <svg className="h-10 w-10">
-                    <circle
-                      key={1}
-                      cx={10}
-                      cy="16"
-                      r="8"
-                      className="fill-current text-primary"
-                    />
-                  </svg>
-                  <span className="material-icons-big">mic_none</span>
-                  <p className="w-max">二月</p>
-                  <h3 className="w-max text-h3">試講</h3>
-                </div>
-                <div className="z-10 w-min">
-                  <svg className="h-10 w-10">
-                    <circle
-                      key={1}
-                      cx={10}
-                      cy="16"
-                      r="8"
-                      className="fill-current text-primary"
-                    />
-                  </svg>
-                  <span className="material-icons-big">route</span>
-                  <p>03-07</p>
-                  <h3 className="w-max text-h3">彩排</h3>
-                </div>
+                <TimelineItem icon="mic_none" date="二月" name="試講" />
+                <TimelineItem icon="route" date="03-07" name="彩排" />
               </>
             )}
-
-            <div className="z-10 w-min">
-              <svg className="h-10 w-10">
-                <circle
-                  key={1}
-                  cx={10}
-                  cy="16"
-                  r="8"
-                  className="fill-current text-primary"
-                />
-              </svg>
-              <span className="material-icons-big text-foreground">groups</span>
-              <p>03-08</p>
-              <h3 className="w-max text-h3">年會</h3>
-            </div>
+            <TimelineItem icon="groups" date="03-08" name="年會" />
           </div>
         </div>
       </div>
@@ -154,7 +62,11 @@ export default function Timeline({ isPoster }: { isPoster?: boolean }) {
             ：2024 年 11 月 22 日（六）
           </li>
           <li>
-            <span className="font-bold">投稿截止</span>
+            <span className="font-bold">早鳥投稿截止</span>
+            ：2024 年 12 月 25 日（三）23:59
+          </li>
+          <li>
+            <span className="font-bold">投稿及稿件修改截止</span>
             ：2025 年 1 月 21 日（二） 23:59
           </li>
           <li>
@@ -189,3 +101,30 @@ export default function Timeline({ isPoster }: { isPoster?: boolean }) {
     </>
   );
 }
+
+function TimelineItem({
+  icon,
+  date,
+  name,
+}: {
+  icon: string;
+  date: string;
+  name: string;
+}) {
+  return (
+    <div className="z-10 flex w-min flex-col">
+      <svg className="h-10 w-10">
+        <circle
+          key={1}
+          cx="10"
+          cy="16"
+          r="8"
+          className="fill-current text-primary"
+        />
+      </svg>
+      <span className="material-icons !text-5xl">{icon}</span>
+      <p className="whitespace-nowrap text-nowrap">{date}</p>
+      <h3 className="w-max font-bold">{name}</h3>
+    </div>
+  );
+}
diff --git a/app/cfp/globals.css b/app/cfp/globals.css
index e7dee375..6d86c8f0 100644
--- a/app/cfp/globals.css
+++ b/app/cfp/globals.css
@@ -137,7 +137,7 @@ html {
   font-family: "Material Icons";
   font-weight: normal;
   font-style: normal;
-  font-size: 64px; /* Preferred icon size */
+  font-size: 64px; /* Preferred icon size
   display: inline-block;
   line-height: 1;
   text-transform: none;
@@ -184,10 +184,10 @@ html {
   @apply bg-primary text-background;
 }
 .optional {
-  @apply border-primary border-opacity-30 border-2 border-dashed
+  @apply border-2 border-dashed border-primary border-opacity-30;
 }
 .public {
-  @apply border-primary border-opacity-30 border-2
+  @apply border-2 border-primary border-opacity-30;
 }
 
 .exclamation-mark {
@@ -197,7 +197,7 @@ html {
 @keyframes exclamation-mark-shake {
   0% {
     transform: rotate(0deg);
-    color: #BDB3FF;
+    color: #bdb3ff;
   }
   10% {
     transform: rotate(10deg);
@@ -217,6 +217,6 @@ html {
   }
   100% {
     transform: rotate(0deg);
-    color: #BDB3FF;
+    color: #bdb3ff;
   }
-}
\ No newline at end of file
+}