diff --git a/en_chapters/frontpage.html b/en_chapters/frontpage.html
index 98e4e02..eb357b7 100644
--- a/en_chapters/frontpage.html
+++ b/en_chapters/frontpage.html
@@ -216,6 +216,7 @@ a {
     <h2 class="mdl-color-text--primary">Machine Learning Systems: Design and Implementation</h2>
     <p>The first open-source book to comprehensively cover machine learning systems</p>
     <p><a class="github-button" href="https://github.com/openmlsys/openmlsys-zh" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star openmlsys/openmlsys-zh on GitHub">Star</a></p>
+    <!-- OPENMLSYS_LANGUAGE_SWITCH -->
   </div>
 </div>
 
diff --git a/static/frontpage.html b/static/frontpage.html
index 2db5ba9..53094ea 100644
--- a/static/frontpage.html
+++ b/static/frontpage.html
@@ -201,6 +201,7 @@ a {
     <h2 class="mdl-color-text--primary">《机器学习系统：设计和实现》</h2>
     <p>做世界上第一本全面讲述机器学习系统知识的开源书籍</p>
     <p><a class="github-button" href="https://github.com/openmlsys/openmlsys-zh" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star openmlsys/openmlsys-zh on GitHub">Star</a></p>
+    <!-- OPENMLSYS_LANGUAGE_SWITCH -->
   </div>
 </div>
 
@@ -477,4 +478,3 @@ for (i = 0; i < coll.length; i++) {
 </script>
 
 <script async defer src="https://buttons.github.io/buttons.js"></script>
-
diff --git a/tests/test_prepare_mdbook.py b/tests/test_prepare_mdbook.py
index cbdadcf..69973df 100644
--- a/tests/test_prepare_mdbook.py
+++ b/tests/test_prepare_mdbook.py
@@ -131,7 +131,7 @@ Reference :cite:`smith2024`.
                 encoding="utf-8",
             )
             (static_dir / "frontpage.html").write_text(
-                "<div class=\"hero\">frontpage</div>\n",
+                "<p class=\"star-slot\">STAR</p>\n<!-- OPENMLSYS_LANGUAGE_SWITCH -->\n<div class=\"hero\">frontpage</div>\n",
                 encoding="utf-8",
             )
 
@@ -143,9 +143,14 @@ Reference :cite:`smith2024`.
                 frontpage_switch_href="cn/",
             )
 
+            self.assertIn('class="openmlsys-frontpage-switch-row"', rewritten)
             self.assertIn('class="openmlsys-frontpage-switch"', rewritten)
             self.assertIn('href="cn/"', rewritten)
             self.assertIn(">中文</a>", rewritten)
+            self.assertLess(
+                rewritten.index('class="star-slot"'),
+                rewritten.index('class="openmlsys-frontpage-switch-row"'),
+            )
 
     def test_rewrite_markdown_prefers_book_local_frontpage_file(self) -> None:
         with tempfile.TemporaryDirectory() as tmpdir:
@@ -185,6 +190,8 @@ Reference :cite:`smith2024`.
             self.assertNotIn("Chinese fallback", rewritten)
             self.assertIn("background: transparent !important;", rewritten)
             self.assertIn("padding: 0 !important;", rewritten)
+            self.assertIn("border-radius: 6px;", rewritten)
+            self.assertIn("background: #f6f8fa;", rewritten)
 
     def test_regular_page_does_not_render_frontpage_switch(self) -> None:
         with tempfile.TemporaryDirectory() as tmpdir:
diff --git a/tests/test_prepare_mdbook_zh.py b/tests/test_prepare_mdbook_zh.py
index e6a7e4c..bad32d2 100644
--- a/tests/test_prepare_mdbook_zh.py
+++ b/tests/test_prepare_mdbook_zh.py
@@ -202,6 +202,8 @@ missing
 .other { color: blue; }
 </style>
 </head>
+<p class="star-slot">STAR</p>
+<!-- OPENMLSYS_LANGUAGE_SWITCH -->
 <div class="hero">
   <img src="_images/logo.png" />
   <img src="./_images/jinxuefeng.png" />
@@ -221,9 +223,14 @@ missing
             self.assertIn("static/image/logo.png", rewritten)
             self.assertIn("static/image/jinxuefeng.png", rewritten)
             self.assertIn("console.log('frontpage')", rewritten)
+            self.assertIn('class="openmlsys-frontpage-switch-row"', rewritten)
             self.assertIn('class="openmlsys-frontpage-switch"', rewritten)
             self.assertIn('href="../"', rewritten)
             self.assertIn(">English</a>", rewritten)
+            self.assertLess(
+                rewritten.index('class="star-slot"'),
+                rewritten.index('class="openmlsys-frontpage-switch-row"'),
+            )
 
 
 if __name__ == "__main__":
diff --git a/tools/prepare_mdbook.py b/tools/prepare_mdbook.py
index a90b4a7..894a4c3 100644
--- a/tools/prepare_mdbook.py
+++ b/tools/prepare_mdbook.py
@@ -21,36 +21,37 @@ TOC_PART_RE = re.compile(r"^#+\s+(.+?)\s*$")
 HEAD_TAG_RE = re.compile(r"</?head>", re.IGNORECASE)
 STYLE_BLOCK_RE = re.compile(r"<style>(.*?)</style>", re.IGNORECASE | re.DOTALL)
 DEFAULT_BIBLIOGRAPHY_TITLE = "References"
+FRONTPAGE_SWITCH_PLACEHOLDER = "<!-- OPENMLSYS_LANGUAGE_SWITCH -->"
 FRONTPAGE_LAYOUT_CSS = """
 <style>
 .openmlsys-frontpage {
   width: 100%;
   margin: 0 auto 3rem;
-  position: relative;
+}
+.openmlsys-frontpage-switch-row {
+  margin: 12px 0 0;
+  display: flex;
+  justify-content: center;
 }
 .openmlsys-frontpage-switch {
-  position: absolute;
-  top: 20px;
-  right: 20px;
-  z-index: 2;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 88px;
-  padding: 10px 16px;
-  border-radius: 999px;
-  border: 1px solid rgba(11, 107, 203, 0.25);
-  background: rgba(255, 255, 255, 0.92);
-  color: var(--links, #0b6bcb);
-  font-size: 14px;
+  min-width: 82px;
+  height: 28px;
+  padding: 0 14px;
+  border-radius: 6px;
+  border: 1px solid rgba(31, 35, 40, 0.15);
+  background: #f6f8fa;
+  color: #24292f;
+  font-size: 13px;
   font-weight: 600;
   text-decoration: none;
-  box-shadow: 0 12px 30px rgba(11, 107, 203, 0.12);
-  backdrop-filter: blur(10px);
+  box-shadow: 0 1px 0 rgba(31, 35, 40, 0.04);
 }
 .openmlsys-frontpage-switch:hover {
-  background: #fff;
-  border-color: rgba(11, 107, 203, 0.4);
+  background: #f3f4f6;
+  border-color: rgba(31, 35, 40, 0.2);
 }
 .openmlsys-frontpage .mdl-grid {
   display: flex;
@@ -106,10 +107,6 @@ FRONTPAGE_LAYOUT_CSS = """
   max-width: 960px;
 }
 @media (max-width: 1000px) {
-  .openmlsys-frontpage-switch {
-    top: 12px;
-    right: 12px;
-  }
   .openmlsys-frontpage .mdl-cell,
   .openmlsys-frontpage .mdl-cell--1-col,
   .openmlsys-frontpage .mdl-cell--3-col,
@@ -405,7 +402,11 @@ def _minify_style_block(match: re.Match[str]) -> str:
 
 
 def render_frontpage_switch(label: str, href: str) -> str:
-    return f'<a class="openmlsys-frontpage-switch" href="{href}">{label}</a>'
+    return (
+        '<p class="openmlsys-frontpage-switch-row">'
+        f'<a class="openmlsys-frontpage-switch" href="{href}">{label}</a>'
+        "</p>"
+    )
 
 
 def wrap_frontpage_html(
@@ -413,10 +414,15 @@ def wrap_frontpage_html(
     frontpage_switch_label: str | None = None,
     frontpage_switch_href: str | None = None,
 ) -> str:
-    parts = [FRONTPAGE_LAYOUT_CSS, '<div class="openmlsys-frontpage">']
+    rendered_html = html.strip()
     if frontpage_switch_label and frontpage_switch_href:
-        parts.append(render_frontpage_switch(frontpage_switch_label, frontpage_switch_href))
-    parts.extend([html.strip(), "</div>"])
+        switch_html = render_frontpage_switch(frontpage_switch_label, frontpage_switch_href)
+        if FRONTPAGE_SWITCH_PLACEHOLDER in rendered_html:
+            rendered_html = rendered_html.replace(FRONTPAGE_SWITCH_PLACEHOLDER, switch_html)
+        else:
+            rendered_html = "\n".join([switch_html, rendered_html])
+
+    parts = [FRONTPAGE_LAYOUT_CSS, '<div class="openmlsys-frontpage">', rendered_html, "</div>"]
     return "\n".join(parts)