diff --git a/docs-en/index.md b/docs-en/index.md
index 7389e475b..591fe676a 100644
--- a/docs-en/index.md
+++ b/docs-en/index.md
@@ -125,7 +125,7 @@ I deeply agree with Professor Feynman's saying: "Knowledge isn't free. You have
 
 <h3 align="left"> Author </h3>
 
-Yudong Jin([Krahets](https://leetcode.cn/u/jyd/)), Senior Algorithm Engineer in a top tech company, Master's degree from Shanghai Jiao Tong University. The highest-read blogger across the entire LeetCode, his published ["Illustration of Algorithm Data Structures"](https://leetcode.cn/leetbook/detail/illustration-of-algorithm/) has been subscribed to by over 300k.
+Yudong Jin([krahets](https://leetcode.cn/u/jyd/)), Senior Algorithm Engineer in a top tech company, Master's degree from Shanghai Jiao Tong University. The highest-read blogger across the entire LeetCode, his published ["Illustration of Algorithm Data Structures"](https://leetcode.cn/leetbook/detail/illustration-of-algorithm/) has been subscribed to by over 300k.
 
 ---
 
diff --git a/docs/index.md b/docs/index.md
index 3db287c12..f008d3662 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -155,27 +155,47 @@ hide:
 <!-- Section: reading -->
 <section data-md-color-scheme="default" data-md-color-primary="white" class="home-div">
   <div class="section-content">
-    <div style="height: min(37vh, 33vw); width: min(75vh, 75vw); position: relative; margin: 0.5em auto;">
+    <div class="reading-media">
       <!-- devices -->
+      <!-- book height = 250 mm -->
       <!-- mac height = 248.1 mm -->
       <!-- ipad height = 280.6mm -->
-      <!-- iphone height = 160.7mm -->
-      <img class="device-on-hover" src="assets/hero/web_mac.png" style="height: 88.42%; left: 5%; bottom: 5%;">
-      <img class="device-on-hover" src="assets/hero/pdf_ipad.png" style="height: 100%; left: 60%; bottom: 0%;">
-      <img class="device-on-hover" src="assets/hero/web_iphone.png" style="height: 57.27%; left: 2%; bottom: 0%;">
-    </div>
-    <p style="margin: 2em auto;">提供网页版和 PDF 版，兼容 PC、平板和手机，随时随地阅读</p>
-    <div class="text-button-container">
-      <a href="https://github.com/krahets/hello-algo/releases">
-        <div class="text-button">
-          <span>下载 PDF</span>
-          <svg xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
-            <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>
+      <!-- iphone height = 160.7mm -->   
+      <div class="media-block">
+        <div style="height: 8.17%;"></div>
+        <img class="device-on-hover" style="height: 66.83%;" src="assets/hero/cover_render.png">
+        <div class="text-button" style="color: var(--md-accent-fg-color);">
+          <span>纸质书<br>（即将发布）</span>
         </div>
-      </a>
+      </div>
+      <div class="media-block">
+        <a href="/chapter_preface/">
+          <div style="height: 4.34%;"></div>
+          <img class="device-on-hover" style="height: 66.31%;" src="assets/hero/web_mac_iphone.png">
+          <div style="height: 4.34%;"></div>
+          <div class="text-button">
+            <span>在线阅读</span>
+            <svg xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+              <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>
+          </div>
+        </a>
+      </div>
+      <div class="media-block">
+        <a href="https://github.com/krahets/hello-algo/releases">
+          <img class="device-on-hover" style="height: 75%;" src="assets/hero/pdf_ipad.png">
+          <div class="text-button">
+            <span>下载 PDF</span>
+            <svg xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+              <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>
+          </div>
+        </a>
+      </div>
     </div>
   </div>
 </section>
diff --git a/overrides/stylesheets/extra.css b/overrides/stylesheets/extra.css
index 3ec2bab83..262c148d2 100644
--- a/overrides/stylesheets/extra.css
+++ b/overrides/stylesheets/extra.css
@@ -57,7 +57,7 @@
 
 /* Figure class */
 .animation-figure {
-  border-radius: 0.63rem;
+  border-radius: 0.3rem;
   display: block;
   margin: 0 auto;
   box-shadow: var(--md-shadow-z2);
@@ -247,27 +247,36 @@ body {
   margin-right: 0.5em;
 }
 
+/* device image */
+.device-on-hover {
+  width: auto;
+  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
+}
+
+a:hover .device-on-hover {
+  filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.15));
+  transform: scale(1.02);
+}
+
 /* text button */
-.text-button-container {
-  width: 100%;
+.reading-media {
   display: flex;
-  flex-direction: row;
   justify-content: center;
-  height: auto;
-  margin: 0 auto;
+  align-items: flex-end;
+  height: 32vw;
+}
+
+.media-block {
+  height: 100%;
+  margin: 0 0.2em;
 }
 
 .text-button {
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+  width: auto;
   color: var(--md-typeset-btn-color);
   text-decoration: none;
-}
-
-.text-button:hover {
-  text-decoration: underline;
+  text-align: center;
+  margin: 2.7em auto;
 }
 
 .text-button span {
@@ -281,7 +290,11 @@ body {
   height: 0.9em;
   background-size: cover;
   padding-top: 0.17em;
-  margin-left: 0.4em;
+  margin-left: 0.15em;
+}
+
+a:hover .text-button span {
+  text-decoration: underline;
 }
 
 /* hero image */
@@ -341,18 +354,6 @@ a:hover .hero-caption {
   width: auto;
 }
 
-/* device */
-.device-on-hover {
-  width: auto;
-  position: absolute;
-  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out;
-}
-
-.device-on-hover:hover {
-  filter: drop-shadow(0 0 0.2rem rgba(0, 0, 0, 0.15));
-  transform: scale(1.03);
-}
-
 /* brief intro */
 .intro-container {
   display: flex;
@@ -422,19 +423,16 @@ a:hover .hero-caption {
   margin: 0 auto;
 }
 
-/* Hide table of contents */
-@media screen and (max-width: 60em) {
-  .home-div {
-    font-size: 0.75rem;
-  }
-}
-
 /* Hide navigation */
 @media screen and (max-width: 76.25em) {
   .section-content {
     max-width: 95vw;
   }
 
+  .reading-media {
+    height: 33vw;
+  }
+
   .intro-container {
     flex-direction: column;
   }
@@ -467,3 +465,14 @@ a:hover .hero-caption {
     flex-basis: 25%;
   }
 }
+
+/* Hide table of contents */
+@media screen and (max-width: 60em) {
+  .home-div {
+    font-size: 0.75rem;
+  }
+
+  .text-button {
+    margin: 0.7em auto;
+  }
+}