diff --git a/en/docs/index.html b/en/docs/index.html
index 566711b18..c5bbcef70 100644
--- a/en/docs/index.html
+++ b/en/docs/index.html
@@ -7,15 +7,15 @@
         <img src="../assets/hero/links.png" alt="" style="position: absolute; width: auto; height: 78.751%; left: 10.545%; top: 7.326%;">
         <a href="chapter_introduction/">
             <img src="../assets/hero/astronaut.png" alt="" style="height: 46.673%; left: 35.413%; top: 24.343%;">
-            <span style="left: 52.744%; top: 22.319%;">Encounter with Algorithms</span>
+            <span style="left: 52.744%; top: 22.319%;">Encounter with Algos</span>
         </a>
         <a href="chapter_computational_complexity/">
             <img src="../assets/hero/chapter_computational_complexity.png" alt="" style="height: 12.347%; left: 36.267%; top: 37.653%;">
-            <span style="left: 40.244%; top: 33.919%;">Complexity analysis</span>
+            <span style="left: 36.244%; top: 34.919%;">Complexity analysis</span>
         </a>
         <a href="chapter_array_and_linkedlist/">
             <img src="../assets/hero/chapter_array_and_linkedlist.png" alt="" style="height: 22.242%; left: 73.242%; top: 52.481%;">
-            <span style="left: 90.897%; top: 76.259%;">Array and linked list</span>
+            <span style="left: 85.897%; top: 76.259%;">Array and linked list</span>
         </a>
         <a href="chapter_stack_and_queue/">
             <img src="../assets/hero/chapter_stack_and_queue.png" alt="" style="height: 14.302%; left: 62.646%; top: 77.875%;">
@@ -23,7 +23,7 @@
         </a>
         <a href="chapter_hashing/">
             <img src="../assets/hero/chapter_hashing.png" alt="" style="height: 15.266%; left: 63.281%; top: 27.933%;">
-            <span style="left: 68.862%; top: 46.292%;">Hash table</span>
+            <span style="left: 68.862%; top: 45.792%;">Hash table</span>
         </a>
         <a href="chapter_tree/">
             <img src="../assets/hero/chapter_tree.png" alt="" style="height: 19.615%; left: 80.137%; top: 26.678%;">
@@ -43,7 +43,7 @@
         </a>
         <a href="chapter_sorting/">
             <img src="../assets/hero/chapter_sorting.png" alt="" style="height: 9.574%; left: 25.409%; top: 40.747%;">
-            <span style="left: 28.805%; top: 53.808%;">Sorting</span>
+            <span style="left: 28.805%; top: 53.308%;">Sorting</span>
         </a>
         <a href="chapter_divide_and_conquer/">
             <img src="../assets/hero/chapter_divide_and_conquer.png" alt="" style="height: 18.681%; left: 32.721%; top: 4.816%;">
@@ -51,11 +51,11 @@
         </a>
         <a href="chapter_backtracking/">
             <img src="../assets/hero/chapter_backtracking.png" alt="" style="height: 17.338%; left: 4.875%; top: 32.925%;">
-            <span style="left: 4.742%; top: 50.113%;">Backtracking</span>
+            <span style="left: 8.742%; top: 50.113%;">Backtracking</span>
         </a>
         <a href="chapter_dynamic_programming/">
             <img src="../assets/hero/chapter_dynamic_programming.png" alt="" style="height: 15.47%; left: 9.406%; top: 57.472%;">
-            <span style="left: 8.561%; top: 75.351%;">Dynamic programming</span>
+            <span style="left: 14.561%; top: 75.351%;">Dynamic programming</span>
         </a>
         <a href="chapter_greedy/">
             <img src="../assets/hero/chapter_greedy.png" alt="" style="height: 14.127%; left: 23.132%; top: 75.803%;">
@@ -65,7 +65,7 @@
 
     <!-- heading -->
     <div class="heading-div">
-        <img style="height: min(9vh, 12vw);" src="https://readme-typing-svg.demolab.com?font=Noto+Sans+SC&weight=400&duration=3500&pause=2000&color=21C8B8&center=true&vCenter=true&random=false&width=200&lines=Hello%2C+Algo+!" alt="" />
+        <img style="height: min(9vh, 12vw);" src="https://readme-typing-svg.demolab.com/?font=Noto+Sans+SC&weight=400&duration=3500&pause=2000&color=FFF&center=true&vCenter=true&random=false&width=200&lines=Hello%2C+Algo+!" alt="" />
         <div style="pointer-events: auto;">
             <p style="margin-top: max(-1vh, -2vw); margin-bottom: min(2vh, 3.5vw);">
                 Data structures and algorithms crash course with animated illustrations and off-the-shelf code
@@ -113,7 +113,7 @@
             <img src="https://img.shields.io/badge/Dart-snow?logo=dart&logoColor=0175C2" alt="" />
             <img src="https://img.shields.io/badge/Zig-snow?logo=zig&logoColor=F7A41D" alt="" />
         </div>
-        <p style="margin-top: 2em;">500 animated illustrations, 14 programming languages, and 3000 community Q&As to help you quickly get started with data structures and algorithms</p>
+        <p style="margin-top: 2em;">500 animated illustrations, 14 programming languages, and 3000 community Q&As to help you dive into data structures and algorithms.</p>
     </div>
 </section>
 
@@ -144,7 +144,7 @@
                     <img class="device-on-hover" style="height: 66.31%;" src="../assets/hero/web_mac_iphone.png" alt="">
                     <div style="height: 4.34%;"></div>
                     <div class="text-button">
-                        <span>Read online</span>
+                        <span>Web</span>
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                             <path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z" />
                         </svg>
@@ -155,7 +155,7 @@
                 <a href="https://github.com/krahets/hello-algo/releases">
                     <img class="device-on-hover" style="height: 75%;" src="../assets/hero/pdf_ipad.png" alt="">
                     <div class="text-button">
-                        <span>Download PDF</span>
+                        <span>PDF</span>
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                             <path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z" />
                         </svg>
@@ -195,7 +195,7 @@
                         </svg>
                         <h3 style="margin-left: 0.5em;">Animated illustrations</h3>
                     </div>
-                    <p style="margin: 0;">It's crafted for ease of understanding, ensuring a smooth learning journey.</p>
+                    <p style="margin: 0;">It’s crafted for a smooth learning experience.</p>
                     <p class="intro-quote">"A picture is worth a thousand words."</p>
                 </div>
             </div>
@@ -212,7 +212,7 @@
                         </svg>
                         <h3 style="margin-left: 0.5em;">Off-the-shelf code</h3>
                     </div>
-                    <p style="margin: 0;">Featuring multiple programming languages, all runnable with a single click.</p>
+                    <p style="margin: 0;">One click to run code in multiple languages.</p>
                     <p class="intro-quote">"Talk is cheap. Show me the code."</p>
                 </div>
             </div>
@@ -227,7 +227,7 @@
                         </svg>
                         <h3 style="margin-left: 0.5em;">Learning together</h3>
                     </div>
-                    <p style="margin: 0;">Welcome discussions and questions with open arms.</p>
+                    <p style="margin: 0;">Don’t hesitate to ask or share your thoughts.</p>
                     <p class="intro-quote">"Learning by teaching."</p>
                 </div>
             </div>
diff --git a/overrides/stylesheets/extra.css b/overrides/stylesheets/extra.css
index 04201732a..7d6c9c1d8 100644
--- a/overrides/stylesheets/extra.css
+++ b/overrides/stylesheets/extra.css
@@ -305,7 +305,7 @@ body {
 
 a:hover .device-on-hover {
   filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.15));
-  transform: scale(1.02);
+  transform: scale(1.01);
 }
 
 /* text button */
@@ -424,7 +424,7 @@ a:hover .text-button span {
 .intro-image {
   flex-shrink: 0;
   flex-grow: 0;
-  width: 55%;
+  width: 50%;
   border-radius: 0.5em;
   box-shadow: var(--md-shadow-z2);
 }
@@ -498,12 +498,16 @@ a:hover .text-button span {
   }
 }
 
-/* Hide table of contents */
+/* mobile devices */
 @media screen and (max-width: 60em) {
   .home-div {
     font-size: 0.75rem;
   }
 
+  .heading-div {
+    transform: translateX(-50%) translateY(13%);
+  }
+
   .intro-container {
     flex-direction: column;
   }
diff --git a/zh-Hant/docs/index.html b/zh-Hant/docs/index.html
index e2c6eb0eb..4628e7070 100644
--- a/zh-Hant/docs/index.html
+++ b/zh-Hant/docs/index.html
@@ -131,7 +131,7 @@
                     <div style="height: 8.17%;"></div>
                     <img class="device-on-hover" style="height: 66.83%;" src="../assets/hero/cover_render.png" alt="Cover">
                     <div class="text-button">
-                        <span>紙質書（簡中）</span>
+                        <span>紙質書</span>
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                             <path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z" />
                         </svg>