diff --git a/app/index.html b/app/index.html
index 837d3cd..03d500d 100644
--- a/app/index.html
+++ b/app/index.html
@@ -27,8 +27,7 @@
       "
       data-aos="fade-in"
       data-aos-duration="1200"
-      data-aos-delay="100"
-      >
+    >
       <div class="content">
         <h2 class="fw-bold text-white | mb-2">台北當代藝術展</h2>
         <p class="h6 text-white | mb-3">01 JUN - 31 OCT</p>
@@ -48,7 +47,7 @@ <h2 class="fw-bold text-white | mb-2">台北當代藝術展</h2>
 </div>
 
 <!-- menu navbar  -->
-<nav class="border-bottom | border-md mb-6 mb-md-13 | ">
+<nav class="border-bottom | border-md mb-6 mb-md-13 |">
   <div class="container-lg | overflow-y-hidden menu-list | h-325r">
     <ul
       class="
@@ -136,14 +135,20 @@ <h2 class="fw-bold text-white | mb-2">台北當代藝術展</h2>
   <!-- 熱門特展 -->
   <section>
     <div class="container-md mb-7 mb-md-13">
-      <h3 class="h3 fw-bold mb-2 mb-md-7"  data-aos="fade-in" data-aos-duration="1200">熱門特展</h3>
+      <h3
+        class="h3 fw-bold mb-2 mb-md-7"
+        data-aos="fade-in"
+        data-aos-duration="1200"
+      >
+        熱門特展
+      </h3>
       <ul class="ps-0">
-        <li class="card border-0 bg-light | py-7 px-5 mb-5 | p-md-0 mb-md-6">   
-          <div class="row g-0 gx-7" 
-                data-aos="fade-left" 
-                data-aos-duration="1200" 
+        <li class="card border-0 bg-light | py-7 px-5 mb-5 | p-md-0 mb-md-6"
+        data-aos="fade-left"
+        data-aos-duration="1400">
+          <div
+            class="row g-0 gx-7"
           >
-          
             <!-- 不同圖片縮放效果 -->
 
             <!-- 整張等比例放大縮小 -->
@@ -164,13 +169,13 @@ <h3 class="h3 fw-bold mb-2 mb-md-7"  data-aos="fade-in" data-aos-duration="1200"
                 h-345 h-md-auto
               "
             >
-            <a href="info.html" class="p-0 d-block h-100 align-middle">
-              <img
-                src="https://images.unsplash.com/photo-1545987796-b199d6abb1b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
-                alt="展覽圖片"
-                class="card-img h-100 w-100"
-              />
-            </a>
+              <a href="info.html" class="p-0 d-block h-100 align-middle">
+                <img
+                  src="https://images.unsplash.com/photo-1545987796-b199d6abb1b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
+                  alt="展覽圖片"
+                  class="card-img h-100 w-100"
+                />
+              </a>
             </div>
 
             <div class="col-md-5 col-lg-6 h-md-350 py-md-12">
@@ -181,13 +186,14 @@ <h3 class="h3 fw-bold mb-2 mb-md-7"  data-aos="fade-in" data-aos-duration="1200"
                       d-flex
                       justify-content-between
                       align-items-center
-                      mb-2
-                      mb-md-1
+                      mb-2 mb-md-1
                     "
                   >
-                    <div class="d-flex align-items-center flex-wrap" 
-                    data-aos="fade-left" 
-                    data-aos-duration="1300"> 
+                    <div
+                      class="d-flex align-items-center flex-wrap"
+                      data-aos="fade-left"
+                      data-aos-duration="1300"
+                    >
                       <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
                       <a href="#" class="d-block link-black p-0 d-md-none">
                         <i class="fs-6 fab fa-facebook align-middle"></i>
@@ -195,16 +201,27 @@ <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
                     </div>
                     <p class="mb-0 d-md-none">01 JUN — 31 OCT</p>
                   </div>
-                  <p class="h6 mb-0 mb-2" data-aos="fade-left" 
-                  data-aos-duration="1300">$350</p>
-                  <p class="h6 mb-0" data-aos="fade-left" 
-                  data-aos-duration="1400">
+                  <p
+                    class="h6 mb-0 mb-2"
+                    data-aos="fade-left"
+                    data-aos-duration="1300"
+                  >
+                    $350
+                  </p>
+                  <p
+                    class="h6 mb-0"
+                    data-aos="fade-left"
+                    data-aos-duration="1400"
+                  >
                     一年一度的台味設計展由經濟部工業局主辦、台灣創意設計中心執行，每年，針對在地生活、文化及產業發展特色，運用設計思考詮釋新時代的意涵，並以展覽呈現在地設計。
                   </p>
                 </div>
 
-                <div class="d-flex flex-wrap" data-aos="fade-left" 
-                data-aos-duration="1400">
+                <div
+                  class="d-flex flex-wrap"
+                  data-aos="fade-left"
+                  data-aos-duration="1400"
+                >
                   <a href="info.html" class="btn btn-primary me-1 py-2 px-5"
                     >購買票券</a
                   >
@@ -215,15 +232,8 @@ <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
               </div>
             </div>
             <div
-              class="
-                h-md-350
-                d-none
-                d-md-block
-                offset-md-1
-                col-md-1
-                py-12
-              "
-              data-aos="fade-left" 
+              class="h-md-350 d-none d-md-block offset-md-1 col-md-1 py-12"
+              data-aos="fade-left"
               data-aos-duration="1400"
             >
               <div class="d-flex flex-column justify-content-between h-100">
@@ -241,19 +251,20 @@ <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
             </div>
           </div>
         </li>
-        <li class="card border-0 bg-light | py-7 px-5 mb-5 | p-md-0 mb-md-6">
-          <div class="row g-0 gx-7" 
-                data-aos="fade-left" 
-                data-aos-duration="1200" 
+        <li class="card border-0 bg-light | py-7 px-5 mb-5 | p-md-0 mb-md-6"
+        data-aos="fade-left"
+        data-aos-duration="1400">
+          <div
+            class="row g-0 gx-7"
           >
             <div class="col-md-5 col-lg-4 h-md-350">
               <!-- 整張等比例放大縮小 -->
               <a href="info.html" class="p-0 d-block h-100">
-              <img
-                class="card-img w-100 h-100 mb-2 | mb-md-0"
-                src="https://images.unsplash.com/photo-1510520001634-6af954f45759?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1506&q=80"
-                alt="exhibition img"
-              />
+                <img
+                  class="card-img w-100 h-100 mb-2 | mb-md-0"
+                  src="https://images.unsplash.com/photo-1510520001634-6af954f45759?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1506&q=80"
+                  alt="exhibition img"
+                />
               </a>
             </div>
             <div class="col-md-5 col-lg-6 h-md-350 py-md-12">
@@ -264,13 +275,14 @@ <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
                       d-flex
                       justify-content-between
                       align-items-center
-                      mb-2
-                      mb-md-1
+                      mb-2 mb-md-1
                     "
                   >
-                    <div class="d-flex align-items-center flex-wrap"
-                    data-aos="fade-left" 
-                    data-aos-duration="1300">
+                    <div
+                      class="d-flex align-items-center flex-wrap"
+                      data-aos="fade-left"
+                      data-aos-duration="1300"
+                    >
                       <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
                       <a href="#" class="d-block link-black p-0 d-md-none">
                         <i class="fs-6 fab fa-facebook align-middle"></i>
@@ -278,16 +290,27 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
                     </div>
                     <p class="mb-0 d-md-none">01 JUN — 31 OCT</p>
                   </div>
-                  <p class="h6 mb-0 mb-2" data-aos="fade-left" 
-                  data-aos-duration="1300">$350</p>
-                  <p class="h6 mb-0" data-aos="fade-left" 
-                  data-aos-duration="1400">
+                  <p
+                    class="h6 mb-0 mb-2"
+                    data-aos="fade-left"
+                    data-aos-duration="1300"
+                  >
+                    $350
+                  </p>
+                  <p
+                    class="h6 mb-0"
+                    data-aos="fade-left"
+                    data-aos-duration="1400"
+                  >
                     這是一個專屬於設計系畢業生的展覽，沒有華麗的名號、沒有浮誇的獎賞。讓我們用作品與理念，去碰撞真實世界裡的各種問題，創造更多美好的人事物。讓這個地球、這個世界變成每一個人心目中的理想鄉。
                   </p>
                 </div>
 
-                <div class="d-flex flex-wrap" data-aos="fade-left" 
-                data-aos-duration="1400">
+                <div
+                  class="d-flex flex-wrap"
+                  data-aos="fade-left"
+                  data-aos-duration="1400"
+                >
                   <a href="info.html" class="btn btn-primary me-1 py-2 px-5"
                     >購買票券</a
                   >
@@ -298,15 +321,8 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
               </div>
             </div>
             <div
-              class="
-                h-md-350
-                d-none
-                d-md-block
-                offset-md-1
-                col-md-1
-                py-12
-              "
-              data-aos="fade-left" 
+              class="h-md-350 d-none d-md-block offset-md-1 col-md-1 py-12"
+              data-aos="fade-left"
               data-aos-duration="1400"
             >
               <div class="d-flex flex-column justify-content-between h-100">
@@ -324,17 +340,18 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
             </div>
           </div>
         </li>
-        <li class="card border-0 bg-light | py-7 px-5 | p-md-0 mb-md-6">
-          <div class="row g-0 gx-7"
-                data-aos="fade-left" 
-                data-aos-duration="1200" >
+        <li class="card border-0 bg-light | py-7 px-5 | p-md-0 mb-md-6" data-aos="fade-left"
+        data-aos-duration="1400">
+          <div
+            class="row g-0 gx-7"
+          >
             <div class="col-md-5 col-lg-4 h-md-350">
               <a href="info.html" class="p-0 d-block h-100">
-              <img
-                class="card-img w-100 h-100 img-fluid mb-2 | mb-md-0"
-                src="https://images.unsplash.com/photo-1545178803-4056771d60a3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
-                alt="exhibition img"
-              />
+                <img
+                  class="card-img w-100 h-100 img-fluid mb-2 | mb-md-0"
+                  src="https://images.unsplash.com/photo-1545178803-4056771d60a3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
+                  alt="exhibition img"
+                />
               </a>
             </div>
             <div class="col-md-5 col-lg-6 h-md-350 py-md-12">
@@ -345,31 +362,42 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
                       d-flex
                       justify-content-between
                       align-items-center
-                      mb-2
-                      mb-md-1
+                      mb-2 mb-md-1
                     "
                   >
-                    <div class="d-flex align-items-center flex-wrap">
-                      <h2 class="h6 fw-bold mb-0 me-2"
-                      data-aos="fade-left" 
-                      data-aos-duration="1300">高雄設計節</h2>
+                    <div
+                      class="d-flex align-items-center flex-wrap"
+                      data-aos="fade-left"
+                      data-aos-duration="1300"
+                    >
+                      <h2 class="h6 fw-bold mb-0 me-2">高雄設計節</h2>
                       <a href="#" class="d-block link-black p-0 d-md-none">
                         <i class="fs-6 fab fa-facebook align-middle"></i>
                       </a>
                     </div>
                     <p class="mb-0 d-md-none">01 JUN — 31 OCT</p>
                   </div>
-                  <p class="h6 mb-0 mb-2"
-                  data-aos="fade-left" 
-                  data-aos-duration="1300">$350</p>
-                  <p class="h6 mb-0" data-aos="fade-left" 
-                  data-aos-duration="1400">
+                  <p
+                    class="h6 mb-0 mb-2"
+                    data-aos="fade-left"
+                    data-aos-duration="1300"
+                  >
+                    $350
+                  </p>
+                  <p
+                    class="h6 mb-0"
+                    data-aos="fade-left"
+                    data-aos-duration="1400"
+                  >
                     設計大高雄究竟是怎麼一回事？在這「設計」詞彙有點氾濫的年代，或許我們也搞不清楚究竟誰被誰設計了，設計生活？還是被生活設計？而當高雄這座城市建設硬體已相當程度完備時，文化軟實力又該如何輸出？
                   </p>
                 </div>
 
-                <div class="d-flex flex-wrap"  data-aos="fade-left" 
-                data-aos-duration="1400">
+                <div
+                  class="d-flex flex-wrap"
+                  data-aos="fade-left"
+                  data-aos-duration="1400"
+                >
                   <a href="info.html" class="btn btn-primary me-1 py-2 px-5"
                     >購買票券</a
                   >
@@ -380,15 +408,8 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
               </div>
             </div>
             <div
-              class="
-                h-md-350
-                d-none
-                d-md-block
-                offset-md-1
-                col-md-1
-                py-12
-              "
-              data-aos="fade-left" 
+              class="h-md-350 d-none d-md-block offset-md-1 col-md-1 py-12"
+              data-aos="fade-left"
               data-aos-duration="1400"
             >
               <div class="d-flex flex-column justify-content-between h-100">
@@ -412,15 +433,23 @@ <h2 class="h6 fw-bold mb-0 me-2">No.22 線上設計展</h2>
 
   <!-- 直播回顧 -->
   <section>
-    <div class="container-md mb-7 mb-md-13">
-      <h3 class="fw-bold mb-2 mb-md-7"  data-aos="fade-in" data-aos-duration="1200">直播回顧</h3>
+    <div class="container-md mb-7 mb-md-13" 
+    data-aos="fade-in"
+    data-aos-duration="1200">
+      <h3
+        class="fw-bold mb-2 mb-md-7"
+        data-aos="fade-in"
+        data-aos-duration="1200"
+      >
+        直播回顧
+      </h3>
       <div
         class="bg-img | card border-0"
         style="
           background-image: url(https://github.com/hexschool/webLayoutTraining1st/blob/master/exhibition-week6/people2.png?raw=truehttps://images.unsplash.com/photo-1511368466880-3ea5d800152c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1500&q=80);
         "
       >
-        <div class="row g-0">
+        <div class="row g-0" data-aos="zoom-in" data-aos-duration="1300">
           <!-- 顏色本身有透明度，不需要另外做調整 -->
           <div class="col-lg-5 | bg-primary-dark text-white | py-12 px-7">
             <p class="h5 mb-10">
diff --git a/app/layout.ejs b/app/layout.ejs
index 19408d0..acd5183 100644
--- a/app/layout.ejs
+++ b/app/layout.ejs
@@ -211,9 +211,11 @@
     <!-- 猜你也喜歡 -->
     <section>
       <div class="container-md mb-7 mb-md-13 <%- display %>">
-        <h2 class="h3 fw-bold mb-2 mb-md-7"  data-aos="fade-in" data-aos-duration="1200"  data-aos-delay="100">猜你也喜歡...</h2>
+        <h2 class="h3 fw-bold mb-2 mb-md-7"  data-aos="fade-in" data-aos-duration="1300">猜你也喜歡...</h2>
         <!-- Swiper for PC-->
-        <div class="swiper-container swiper | swiper-js | offset-md-1">
+        <div class="swiper-container swiper | swiper-js | offset-md-1" 
+        data-aos="fade-in"
+        data-aos-duration="1400">
           <ul
             class="
               swiper-wrapper
@@ -289,9 +291,9 @@
             justify-content-end
           "
         >
-          <h4 class="h3 text-white | mb-0">想收到最新消息嗎？</h4>
-          <h4 class="h3 text-white | mb-2">快訂閱我們！</h4>
-          <div class="input-group | mt-1">
+          <h4 class="h3 text-white | mb-0" data-aos="fade-left" data-aos-duration="1200" >想收到最新消息嗎？</h4>
+          <h4 class="h3 text-white | mb-2" data-aos="fade-left" data-aos-duration="1300" >快訂閱我們！</h4>
+          <div class="input-group | mt-1" data-aos="fade-left" data-aos-duration="1400" >
             <input
               type="text"
               name="subscribe email"
diff --git a/app/order-info.html b/app/order-info.html
index 547242c..1cecef3 100644
--- a/app/order-info.html
+++ b/app/order-info.html
@@ -18,22 +18,22 @@
           <div class="row">
             <div class="col-lg-8">
               <div class="row timeline-section">
-                <div class="col-2 col-md-3">
+                <div class="col-3">
                   <div class="timeline-pointer">
                     <p class="fw-light pt-2 mb-0">確認訂單</p>
                   </div>
                 </div>
-                <div class="col-4 col-md-3">
+                <div class="col-3">
                   <div class="timeline-pointer">
                     <p class="text-center fw-medium pt-2 mb-0">填寫訂購資訊</p>
                   </div>
                 </div>
-                <div class="col-4 col-md-3">
+                <div class="col-3">
                   <div class="timeline-pointer timeline-pointer-undone">
                     <p class="text-center fw-light pt-2 mb-0">填寫付款資訊</p>
                   </div>
                 </div>
-                <div class="col-2 col-md-3">
+                <div class="col-3">
                   <div class="timeline-pointer timeline-pointer-undone">
                     <p class="fw-light pt-2 mb-0">完成訂購</p>
                   </div>
diff --git a/app/order.html b/app/order.html
index 498c95a..e81ea64 100644
--- a/app/order.html
+++ b/app/order.html
@@ -20,22 +20,22 @@
           <div class="row">
             <div class="col-lg-8">
               <div class="row timeline-section">
-                <div class="col-2 col-md-3">
+                <div class="col-3">
                   <div class="timeline-pointer">
                     <p class="fw-medium pt-2 mb-0">確認訂單</p>
                   </div>
                 </div>
-                <div class="col-4 col-md-3">
+                <div class="col-3">
                   <div class="timeline-pointer timeline-pointer-undone">
                     <p class="text-center fw-light pt-2 mb-0">填寫訂購資訊</p>
                   </div>
                 </div>
-                <div class="col-4 col-md-3">
+                <div class="col-3">
                   <div class="timeline-pointer timeline-pointer-undone">
                     <p class="text-center fw-light pt-2 mb-0">填寫付款資訊</p>
                   </div>
                 </div>
-                <div class="col-2 col-md-3">
+                <div class="col-3">
                   <div class="timeline-pointer timeline-pointer-undone">
                     <p class="fw-light pt-2 mb-0">完成訂購</p>
                   </div>
diff --git a/app/payment-info.html b/app/payment-info.html
index 4204607..f4515c4 100644
--- a/app/payment-info.html
+++ b/app/payment-info.html
@@ -23,12 +23,12 @@
                     <p class="fw-light pt-2 mb-0">確認訂單</p>
                   </div>
                 </div>
-                <div class="col-4 col-md-3">
+                <div class="col-3">
                   <div class="timeline-pointer">
                     <p class="fw-light pt-2 mb-0">填寫訂購資訊</p>
                   </div>
                 </div>
-                <div class="col-4 col-md-3">
+                <div class="col-3">
                   <div class="timeline-pointer">
                     <p class="fw-medium pt-2 mb-0">填寫付款資訊</p>
                   </div>