diff --git a/packages/duoyun-ui/docs/zh/02-elements/README.md b/packages/duoyun-ui/docs/zh/02-elements/README.md
index 682adee5..bab55df5 100644
--- a/packages/duoyun-ui/docs/zh/02-elements/README.md
+++ b/packages/duoyun-ui/docs/zh/02-elements/README.md
@@ -2,7 +2,7 @@
 
 <style>
   a, gem-link {
-    text-wrap: nowrap;
+    white-space: nowrap;
   }
 </style>
 
diff --git a/packages/duoyun-ui/package.json b/packages/duoyun-ui/package.json
index af249097..2371999a 100644
--- a/packages/duoyun-ui/package.json
+++ b/packages/duoyun-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "duoyun-ui",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "description": "A lightweight desktop UI component library, implemented using Gem",
   "keywords": [
     "frontend",
@@ -48,7 +48,7 @@
     "elkjs": "^0.7.1"
   },
   "peerDependencies": {
-    "@mantou/gem": "^1.7.2"
+    "@mantou/gem": "^1.7.6"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4-fix.0",
diff --git a/packages/gem-book/src/element/elements/404.ts b/packages/gem-book/src/element/elements/404.ts
index 9a971d45..edfe6d23 100644
--- a/packages/gem-book/src/element/elements/404.ts
+++ b/packages/gem-book/src/element/elements/404.ts
@@ -7,6 +7,7 @@ import { selfI18n } from '../helper/i18n';
 import { icons } from './icons';
 
 import '@mantou/gem/elements/reflect';
+import '@mantou/gem/elements/title';
 
 @customElement('gem-book-404')
 @connectStore(selfI18n.store)
@@ -53,7 +54,7 @@ export class Meta extends GemElement {
           margin-right: 10px;
         }
       </style>
-      <h1>404 - Not found</h1>
+      <h1><gem-title inert>Not Found</gem-title></h1>
       ${noGithub
         ? ''
         : html`
diff --git a/packages/gem-book/src/element/elements/icons.ts b/packages/gem-book/src/element/elements/icons.ts
index de7a415a..d0ece9f9 100644
--- a/packages/gem-book/src/element/elements/icons.ts
+++ b/packages/gem-book/src/element/elements/icons.ts
@@ -1,6 +1,23 @@
 import { raw } from '@mantou/gem';
 
 export const icons = {
+  github: raw`
+    <svg width="16" height="16" viewBox="0 0 16 16">
+      <path fill="currentColor" d="M8 0a8.1 8.1 0 0 0-8 8.2c0 3.63 2.3 6.7 5.47 7.79l.14.01c.3 0 .4-.22.4-.4v-1.4c-.3.06-.57.1-.81.1-1.54 0-1.89-1.2-1.89-1.2-.36-.95-.89-1.2-.89-1.2-.7-.5 0-.5.05-.5.8.06 1.23.84 1.23.84.4.7.94.9 1.41.9.38 0 .72-.12.92-.21.07-.53.28-.9.5-1.1-1.77-.2-3.64-.91-3.64-4.05 0-.9.31-1.63.82-2.2-.08-.21-.35-1.05.08-2.18l.18-.01c.3 0 .94.1 2.02.86a7.5 7.5 0 0 1 4.01 0c1.08-.75 1.73-.86 2.02-.86l.18.01c.44 1.13.16 1.97.08 2.18.5.57.82 1.3.82 2.2 0 3.15-1.87 3.84-3.65 4.04.28.25.54.75.54 1.52l-.01 2.25c0 .2.1.41.4.41l.15-.01A8.19 8.19 0 0 0 16 8.2 8.1 8.1 0 0 0 8 0Z"/>
+    </svg>
+  `,
+  menu: raw`
+    <svg part="icon" aria-hidden="true" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+      <path d="M0 0h24v24H0z" fill="none" stroke="none"></path>
+      <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
+    </svg>
+  `,
+  close: raw`
+    <svg part="icon" aria-hidden="true" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+      <path d="M0 0h24v24H0z" fill="none" stroke="none"></path>
+      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
+    </svg>
+  `,
   i18n: raw`
     <svg aria-hidden="true" width="24" height="24" viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none"></path>
diff --git a/packages/gem-book/src/element/elements/main.ts b/packages/gem-book/src/element/elements/main.ts
index 9b369bf9..b17b6e2b 100644
--- a/packages/gem-book/src/element/elements/main.ts
+++ b/packages/gem-book/src/element/elements/main.ts
@@ -296,10 +296,11 @@ export class Main extends GemElement {
         gem-book-pre {
           z-index: 2;
           margin: 2rem 0px;
+          border-radius: ${theme.normalRound};
         }
         @media ${mediaQuery.PHONE} {
           .header-anchor {
-            display: none;
+            opacity: 1;
           }
           h1 {
             font-size: 2.5rem;
diff --git a/packages/gem-book/src/element/elements/nav-logo.ts b/packages/gem-book/src/element/elements/nav-logo.ts
index 57925d24..3d0292b9 100644
--- a/packages/gem-book/src/element/elements/nav-logo.ts
+++ b/packages/gem-book/src/element/elements/nav-logo.ts
@@ -1,4 +1,5 @@
 import { GemElement, html, adoptedStyle, customElement, createCSSSheet, css, connectStore } from '@mantou/gem';
+import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
 import { bookStore } from '../store';
 import { theme } from '../helper/theme';
@@ -14,7 +15,9 @@ const style = createCSSSheet(css`
     flex-shrink: 0;
   }
   gem-link {
-    display: contents;
+    display: flex;
+    align-items: center;
+    height: 100%;
     text-decoration: none;
     color: inherit;
   }
@@ -24,8 +27,12 @@ const style = createCSSSheet(css`
     object-fit: contain;
     transform: translateX(-10%);
   }
+  @media ${mediaQuery.PHONE} {
+    span {
+      display: none;
+    }
+  }
 `);
-
 /**
  * @customElement gem-book-nav-logo
  */
@@ -38,7 +45,8 @@ export class GemBookNavLogoElement extends GemElement {
     const { icon = '', title = '' } = config || {};
     return html`
       <gem-link path="/">
-        ${icon ? html`<img alt=${title} src=${icon} aria-hidden="true" />` : null} ${title}
+        ${icon ? html`<img alt=${title} src=${icon} aria-hidden="true" />` : null}
+        <span>${title}</span>
       </gem-link>
     `;
   };
diff --git a/packages/gem-book/src/element/elements/nav.ts b/packages/gem-book/src/element/elements/nav.ts
index dee9c51a..23d722f9 100644
--- a/packages/gem-book/src/element/elements/nav.ts
+++ b/packages/gem-book/src/element/elements/nav.ts
@@ -7,6 +7,7 @@ import {
   globalemitter,
   connectStore,
   boolattribute,
+  classMap,
 } from '@mantou/gem';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
@@ -16,6 +17,7 @@ import { capitalize, isSameOrigin } from '../lib/utils';
 import { bookStore } from '../store';
 
 import { icons } from './icons';
+import { sidebarStore, toggleSidebar } from './sidebar';
 
 import '@mantou/gem/elements/link';
 import '@mantou/gem/elements/use';
@@ -28,6 +30,7 @@ import './nav-logo';
  */
 @customElement('gem-book-nav')
 @connectStore(bookStore)
+@connectStore(sidebarStore)
 export class Nav extends GemElement {
   @boolattribute logo: boolean;
 
@@ -38,10 +41,8 @@ export class Nav extends GemElement {
   renderI18nSelect = () => {
     const { langList = [], lang } = bookStore;
     if (lang) {
-      const name = langList.find(({ code }) => code === lang)?.name;
       return html`
-        <div class="item">
-          ${mediaQuery.isPhone ? '' : name || lang}
+        <div class="icon item">
           <gem-use @click=${() => this.i18nRef.element?.click()} .element=${icons.i18n}></gem-use>
           <select
             aria-label="language select"
@@ -55,12 +56,12 @@ export class Nav extends GemElement {
     }
   };
 
-  renderExternalItem = ({ navTitle, title, link }: NavItem) => {
+  renderExternalItem = ({ navTitle, title, link }: NavItem, icon?: string | Element | DocumentFragment) => {
     if (link) {
       return html`
-        <gem-link class="external item" href=${link}>
-          ${capitalize(navTitle || title)}
-          <gem-use .element=${icons.link}></gem-use>
+        <gem-link class=${classMap({ item: true, icon: !!icon })} href=${link} title=${title}>
+          <span>${capitalize(navTitle || title)}</span>
+          <gem-use .element=${icon || icons.link}></gem-use>
         </gem-link>
       `;
     }
@@ -79,7 +80,7 @@ export class Nav extends GemElement {
   render() {
     const { config, nav = [] } = bookStore;
     const { github = '' } = config || {};
-    const githubLink = config ? this.renderExternalItem({ title: 'github', link: github }) : null;
+    const githubLink = config ? this.renderExternalItem({ title: 'github', link: github }, icons.github) : null;
     const internals = nav?.filter((e) => isSameOrigin(e.link)) || [];
     const externals = nav?.filter((e) => !isSameOrigin(e.link)) || [];
 
@@ -91,8 +92,8 @@ export class Nav extends GemElement {
           height: ${theme.headerHeight};
           border-bottom: 1px solid ${theme.borderColor};
         }
-        gem-book-nav-logo + .item {
-          margin-left: 3rem;
+        gem-book-nav-logo {
+          margin-right: 3rem;
         }
         .item {
           display: flex;
@@ -101,8 +102,8 @@ export class Nav extends GemElement {
           cursor: pointer;
           overflow: hidden;
         }
-        .item gem-use {
-          margin-left: 0.3rem;
+        :where(.item + .item) {
+          margin-left: 1rem;
         }
         .item select {
           -webkit-appearance: none;
@@ -112,27 +113,22 @@ export class Nav extends GemElement {
           inset: 0;
           opacity: 0;
         }
-        .internals {
+        .left {
           flex-grow: 1;
           display: flex;
         }
-        .internals .item {
+        .left .item {
           padding: 0 1rem;
         }
-        :where(.item + .item:not(.slot)),
-        .slot::slotted(*) {
-          margin-left: 1rem;
-          display: block;
-        }
         gem-link,
         gem-active-link {
           text-decoration: none;
           color: inherit;
         }
-        gem-active-link:active {
+        gem-active-link:not(.icon):active {
           background: rgba(${theme.primaryColorRGB}, 0.1);
         }
-        gem-active-link:hover,
+        gem-active-link:not(.icon):hover,
         gem-active-link:where(:state(active), [data-active]) {
           color: ${theme.primaryColor};
         }
@@ -145,26 +141,44 @@ export class Nav extends GemElement {
           background: currentColor;
           width: 100%;
         }
-        gem-use {
+        .item:not(.icon) gem-use {
           width: 1em;
+          margin-left: 0.3rem;
+        }
+        .icon span {
+          display: none;
+        }
+        .icon gem-use {
+          opacity: 0.6;
+          width: 1.5em;
+        }
+        .icon:hover gem-use {
+          opacity: 0.8;
+        }
+        .menu {
+          display: none;
+          opacity: 0.8;
+          width: 1.5em;
+          padding-inline: 1rem;
+          margin-inline-start: -1rem;
         }
         @media ${mediaQuery.PHONE} {
-          gem-book-nav-logo + .item {
-            margin-left: 0;
-          }
-          .internals .item {
-            padding: 0 0.3rem;
+          .menu {
+            display: block;
           }
-          .external {
+          .left * {
             display: none;
           }
         }
       </style>
-      <div class="internals">
-        ${this.logo ? html`<gem-book-nav-logo></gem-book-nav-logo>` : ''} ${internals.map(this.renderInternalItem)}
+      <gem-use class="menu" @click=${toggleSidebar} .element=${sidebarStore.open ? icons.close : icons.menu}></gem-use>
+      ${this.logo ? html`<gem-book-nav-logo></gem-book-nav-logo>` : ''}
+      <div class="left">
+        ${internals.map((item) => this.renderInternalItem(item))}
+        ${externals.map((item) => this.renderExternalItem(item))}
       </div>
-      ${externals.map(this.renderExternalItem)} ${githubLink} ${this.renderI18nSelect()}
-      <slot class="slot item"></slot>
+      <slot class="item"></slot>
+      ${this.renderI18nSelect()} ${githubLink}
     `;
   }
 
diff --git a/packages/gem-book/src/element/elements/pre.ts b/packages/gem-book/src/element/elements/pre.ts
index 77bbb1fd..daf875b5 100644
--- a/packages/gem-book/src/element/elements/pre.ts
+++ b/packages/gem-book/src/element/elements/pre.ts
@@ -362,7 +362,6 @@ export class Pre extends GemElement {
           display: block;
           font-size: 0.875em;
           background: rgba(${theme.textColorRGB}, 0.05);
-          border-radius: ${theme.normalRound};
           --comment-color: var(--code-comment-color, #6e6e6e);
           --section-color: var(--code-section-color, #c9252d);
           --title-color: var(--code-title-color, #4646c6);
diff --git a/packages/gem-book/src/element/elements/sidebar.ts b/packages/gem-book/src/element/elements/sidebar.ts
index e4c3a74b..fd6f637b 100644
--- a/packages/gem-book/src/element/elements/sidebar.ts
+++ b/packages/gem-book/src/element/elements/sidebar.ts
@@ -1,8 +1,21 @@
-import { html, GemElement, customElement, TemplateResult, connectStore, classMap } from '@mantou/gem';
+import {
+  html,
+  GemElement,
+  customElement,
+  TemplateResult,
+  connectStore,
+  classMap,
+  state,
+  createStore,
+  connect,
+  updateStore,
+  history,
+  disconnect,
+} from '@mantou/gem';
 import { mediaQuery } from '@mantou/gem/helper/mediaquery';
 
 import { NavItem } from '../../common/config';
-import { capitalize } from '../lib/utils';
+import { capitalize, isSameOrigin } from '../lib/utils';
 import { theme } from '../helper/theme';
 import { bookStore } from '../store';
 
@@ -13,9 +26,17 @@ import '@mantou/gem/elements/use';
 import './side-link';
 import './nav-logo';
 
+export const sidebarStore = createStore({ open: false });
+
+const closeSidebar = () => updateStore(sidebarStore, { open: false });
+export const toggleSidebar = () => updateStore(sidebarStore, { open: !sidebarStore.open });
+
 @customElement('gem-book-sidebar')
 @connectStore(bookStore)
+@connectStore(sidebarStore)
 export class SideBar extends GemElement {
+  @state open: boolean;
+
   #toggleLinks = (e: MouseEvent) => {
     const ele = e.target as HTMLDivElement;
     ele.classList.toggle('close');
@@ -72,6 +93,8 @@ export class SideBar extends GemElement {
   };
 
   render() {
+    this.open = sidebarStore.open;
+    const topNavList = bookStore.nav?.filter((e) => isSameOrigin(e.link));
     return html`
       <style>
         :host {
@@ -100,19 +123,22 @@ export class SideBar extends GemElement {
           scrollbar-width: thin;
           overscroll-behavior: contain;
         }
-        @media ${mediaQuery.PHONE} {
-          :host {
-            position: static;
-            height: auto;
-            margin: 0;
-            padding: 0;
-            overflow: visible;
-            border-inline-end: none;
-            border-block-end: 1px solid ${theme.borderColor};
-          }
-          gem-book-nav-logo {
-            display: none;
-          }
+        .top-nav {
+          display: flex;
+          gap: 1em;
+          margin-block-end: 2rem;
+        }
+        .top-nav gem-active-link {
+          display: inline-block;
+          color: inherit;
+          text-decoration: none;
+          line-height: 2;
+          padding: 0 1em;
+          border-radius: 10em;
+          background: rgba(${theme.primaryColorRGB}, 0.1);
+        }
+        .top-nav gem-active-link:where(:state(active), [data-active]) {
+          color: ${theme.primaryColor};
         }
         .link {
           display: block;
@@ -120,16 +146,10 @@ export class SideBar extends GemElement {
           text-decoration: none;
           line-height: 1.5;
           padding: 0.15em 0;
-          color: inherit;
         }
         .file:where(:state(active), [data-active]) {
           font-weight: bolder;
         }
-        @media not ${`(${mediaQuery.DESKTOP})`} {
-          .link:where(:state(match), [data-match]) + .hash {
-            display: block;
-          }
-        }
         .heading:not(:where(:state(active), [data-active])):not(:hover),
         .file:not(:where(:state(active), [data-active])):hover {
           opacity: 0.6;
@@ -189,9 +209,46 @@ export class SideBar extends GemElement {
         .item + .item {
           margin-top: 0.5rem;
         }
+        @media not ${`(${mediaQuery.DESKTOP})`} {
+          .link:where(:state(match), [data-match]) + .hash {
+            display: block;
+          }
+        }
+        @media ${mediaQuery.PHONE} {
+          :host {
+            position: fixed;
+            background: ${theme.backgroundColor};
+            width: 100%;
+            height: calc(100vh - ${theme.headerHeight});
+            top: ${theme.headerHeight};
+            z-index: 3;
+          }
+          :host(:not(:where([data-open], :state(open)))) {
+            display: none;
+          }
+          .nav {
+            border-inline-end: none;
+          }
+          gem-book-nav-logo {
+            display: none;
+          }
+        }
       </style>
       <gem-book-nav-logo></gem-book-nav-logo>
       <div class="nav">
+        ${mediaQuery.isPhone && topNavList?.length
+          ? html`
+              <div class="top-nav">
+                ${topNavList.map(
+                  ({ link, navTitle, title }) => html`
+                    <gem-active-link href=${link} pattern="${link}*">
+                      ${capitalize(navTitle || title)}
+                    </gem-active-link>
+                  `,
+                )}
+              </div>
+            `
+          : ''}
         <slot></slot>
         ${bookStore.currentSidebar?.map((item) => this.#renderItem(item, true))}
       </div>
@@ -208,4 +265,9 @@ export class SideBar extends GemElement {
     };
     removeCloseClass(activeEle);
   }
+
+  mounted() {
+    connect(history.store, closeSidebar);
+    return () => disconnect(history.store, closeSidebar);
+  }
 }
diff --git a/packages/gem-book/src/element/elements/toc.ts b/packages/gem-book/src/element/elements/toc.ts
index 6b787627..5d250933 100644
--- a/packages/gem-book/src/element/elements/toc.ts
+++ b/packages/gem-book/src/element/elements/toc.ts
@@ -20,6 +20,7 @@ export const tocStore = createStore<{ elements: HTMLHeadingElement[] }>({
 
 const style = createCSSSheet(css`
   :host {
+    font-size: 0.875rem;
     padding: 2rem 1.5rem;
     box-sizing: border-box;
     height: min-content;
@@ -109,6 +110,7 @@ export class GemBookTocElement extends GemElement<State> {
   };
 
   render = () => {
+    if (!tocStore.elements.length) return html``;
     return html`
       <h2>CONTENTS</h2>
       <ul>
diff --git a/packages/gem-book/src/element/index.ts b/packages/gem-book/src/element/index.ts
index 827cf330..6d32c69a 100644
--- a/packages/gem-book/src/element/index.ts
+++ b/packages/gem-book/src/element/index.ts
@@ -171,6 +171,7 @@ export class GemBookElement extends GemElement {
             grid-area: auto / content / auto / toc;
           }
         }
+        /* 404, homepage */
         @media ${renderFullWidth ? 'all' : 'not all'} {
           gem-book-nav {
             grid-area: 1 / aside / 2 / toc;
@@ -180,7 +181,6 @@ export class GemBookElement extends GemElement {
           main {
             grid-area: auto / aside / auto / toc;
           }
-          gem-book-sidebar,
           gem-book-edit-link,
           gem-book-rel-link {
             display: none;
@@ -188,6 +188,9 @@ export class GemBookElement extends GemElement {
           gem-book-footer {
             text-align: center;
           }
+          gem-book-toc {
+            display: none;
+          }
         }
         @media ${mediaQuery.PHONE} {
           :host {
@@ -197,11 +200,6 @@ export class GemBookElement extends GemElement {
           main {
             padding-inline: 1rem;
           }
-          gem-book-nav ~ gem-book-sidebar {
-            margin-top: 0;
-            height: auto;
-            max-height: none;
-          }
           slot[name='${this.mainBefore}'] {
             margin-top: 1rem;
           }
@@ -230,14 +228,18 @@ export class GemBookElement extends GemElement {
 
       ${hasNavbar
         ? html`
-            <gem-book-nav role="navigation" part=${this.nav} .logo=${!!renderFullWidth}>
+            <gem-book-nav role="navigation" part=${this.nav} .logo=${mediaQuery.isPhone || !!renderFullWidth}>
               <slot name=${this.navInside}></slot>
             </gem-book-nav>
           `
         : null}
-      <gem-book-sidebar role="navigation" part=${this.sidebar}>
-        <slot name=${this.sidebarBefore}></slot>
-      </gem-book-sidebar>
+      ${mediaQuery.isPhone || !renderFullWidth
+        ? html`
+            <gem-book-sidebar role="navigation" part=${this.sidebar}>
+              <slot name=${this.sidebarBefore}></slot>
+            </gem-book-sidebar>
+          `
+        : null}
       ${renderHomePage ? html`<gem-book-homepage exportparts="hero: ${this.homepageHero}"></gem-book-homepage>` : ''}
       <main>
         ${renderHomePage ? '' : html`<slot name=${this.mainBefore}></slot>`}
diff --git a/packages/gem-book/src/plugins/code-group.ts b/packages/gem-book/src/plugins/code-group.ts
index 8e5f9712..b038b096 100644
--- a/packages/gem-book/src/plugins/code-group.ts
+++ b/packages/gem-book/src/plugins/code-group.ts
@@ -69,8 +69,9 @@ customElements.whenDefined('gem-book').then(() => {
     }
     ::slotted(*) {
       display: none;
-      margin: 0 !important;
       background: rgba(${theme.textColorRGB}, 0.03);
+      margin: 0 !important;
+      border-radius: 0 !important;
     }
   `);
 
diff --git a/packages/gem-book/src/plugins/docsearch.ts b/packages/gem-book/src/plugins/docsearch.ts
index 1666b8d7..5e197504 100644
--- a/packages/gem-book/src/plugins/docsearch.ts
+++ b/packages/gem-book/src/plugins/docsearch.ts
@@ -7,7 +7,7 @@ const styleLink = 'https://esm.sh/@docsearch/css@3.0.0-alpha.50/dist/style.css';
 
 customElements.whenDefined('gem-book').then(async () => {
   const { GemBookPluginElement } = customElements.get('gem-book') as typeof GemBookElement;
-  const { Gem, theme } = GemBookPluginElement;
+  const { Gem, theme, mediaQuery } = GemBookPluginElement;
   const { css, html, customElement, attribute, refobject } = Gem;
 
   @customElement('gbp-docsearch')
@@ -37,6 +37,12 @@ customElements.whenDefined('gem-book').then(async () => {
           .DocSearch-Button {
             margin: 0;
           }
+          @media ${mediaQuery.PHONE} {
+            .DocSearch-Button {
+              background: none;
+              opacity: 0.6;
+            }
+          }
         </style>
         <div ref=${this.searchRef.ref}></div>
       `;
diff --git a/packages/gem-book/src/plugins/raw.ts b/packages/gem-book/src/plugins/raw.ts
index 8d246666..b5ad94f2 100644
--- a/packages/gem-book/src/plugins/raw.ts
+++ b/packages/gem-book/src/plugins/raw.ts
@@ -38,6 +38,7 @@ customElements.whenDefined('gem-book').then(() => {
     }
     gem-book-pre {
       margin: 2rem 0px;
+      border-radius: ${theme.normalRound};
       animation: display 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
     }
   `);
diff --git a/packages/gem-book/src/plugins/sandpack.ts b/packages/gem-book/src/plugins/sandpack.ts
index 76c87b9f..68c27894 100644
--- a/packages/gem-book/src/plugins/sandpack.ts
+++ b/packages/gem-book/src/plugins/sandpack.ts
@@ -92,9 +92,11 @@ customElements.whenDefined('gem-book').then(() => {
     }
     ::slotted(*) {
       display: none;
+      max-height: 60vh;
       grid-area: code;
-      margin: 0 !important;
       background: rgba(${theme.textColorRGB}, 0.03);
+      margin: 0 !important;
+      border-radius: 0 !important;
     }
     .preview {
       display: flex;
@@ -127,7 +129,7 @@ customElements.whenDefined('gem-book').then(() => {
       .sandbox {
         background: transparent;
       }
-      .fork.btn {
+      .actions {
         display: none;
       }
     }
@@ -369,7 +371,7 @@ customElements.whenDefined('gem-book').then(() => {
           </ul>
           <div class="actions">
             <gem-use class="btn" @click=${this.#onReset}>Reset</gem-use>
-            <gem-use class="btn fork" .element=${forking ? '' : icons.link} @click=${this.#onFork}>
+            <gem-use class="btn" .element=${forking ? '' : icons.link} @click=${this.#onFork}>
               Fork ${forking ? '...' : ''}
             </gem-use>
           </div>
diff --git a/packages/gem-examples/package.json b/packages/gem-examples/package.json
index 365a479b..670a97f3 100644
--- a/packages/gem-examples/package.json
+++ b/packages/gem-examples/package.json
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@mantou/gem": "^1.7.6",
-    "duoyun-ui": "^1.1.6"
+    "duoyun-ui": "^1.1.7"
   },
   "devDependencies": {
     "@gemjs/config": "^1.6.11",
diff --git a/packages/gem/docs/en/001-guide/002-advance/005-i18n.md b/packages/gem/docs/en/001-guide/002-advance/005-i18n.md
index 440f3f36..8cdf1717 100644
--- a/packages/gem/docs/en/001-guide/002-advance/005-i18n.md
+++ b/packages/gem/docs/en/001-guide/002-advance/005-i18n.md
@@ -118,7 +118,7 @@ const i18n = new I18n({
 ```
 
 > [!TIP]
-> When `urlParamsType` is `path`, then the links in the page and the [`history`](../../003-api/004-history) routing switch need to be modified,
+> When `urlParamsType` is `path`, then the links in the page and the [`history`](../../003-api/004-history.md) routing switch need to be modified,
 > this operation can be defined globally by setting `history.basePath`:
 >
 > ```ts
diff --git a/packages/gem/docs/en/README.md b/packages/gem/docs/en/README.md
index 7144cdbf..2a103639 100644
--- a/packages/gem/docs/en/README.md
+++ b/packages/gem/docs/en/README.md
@@ -31,6 +31,13 @@ features:
 
 ## TodoApp
 
+<style>
+:host {
+  width: clamp(100%, 90vw, 1024px);
+  margin-left: calc((clamp(100%, 90vw, 1024px) - 100%) / -2);
+}
+</style>
+
 <gbp-sandpack dependencies="@mantou/gem, duoyun-ui">
 
 ```ts
diff --git a/packages/gem/docs/zh/001-guide/002-advance/005-i18n.md b/packages/gem/docs/zh/001-guide/002-advance/005-i18n.md
index 0ca2584f..8cf62106 100644
--- a/packages/gem/docs/zh/001-guide/002-advance/005-i18n.md
+++ b/packages/gem/docs/zh/001-guide/002-advance/005-i18n.md
@@ -118,7 +118,7 @@ const i18n = new I18n({
 ```
 
 > [!TIP]
-> 当 `urlParamsType` 为 `path`，那么页面中的链接、[`history`](../../003-api/004-history) 路由切换都需要修改，
+> 当 `urlParamsType` 为 `path`，那么页面中的链接、[`history`](../../003-api/004-history.md) 路由切换都需要修改，
 > 可以通过设置 `history.basePath` 来全局定义此操作：
 >
 > ```ts
diff --git a/packages/gem/docs/zh/README.md b/packages/gem/docs/zh/README.md
index c18dc0bb..0d087402 100644
--- a/packages/gem/docs/zh/README.md
+++ b/packages/gem/docs/zh/README.md
@@ -31,6 +31,13 @@ features:
 
 ## 待办事项 App
 
+<style>
+:host {
+  width: clamp(100%, 90vw, 1024px);
+  margin-left: calc((clamp(100%, 90vw, 1024px) - 100%) / -2);
+}
+</style>
+
 <gbp-sandpack dependencies="@mantou/gem, duoyun-ui">
 
 ```ts
diff --git a/packages/gem/src/elements/base/title.ts b/packages/gem/src/elements/base/title.ts
index 527ac3df..4cb71219 100644
--- a/packages/gem/src/elements/base/title.ts
+++ b/packages/gem/src/elements/base/title.ts
@@ -14,13 +14,13 @@
  */
 
 import { GemElement, html } from '../../lib/element';
-import { attribute, connectStore } from '../../lib/decorators';
-import { updateStore, connect } from '../../lib/store';
+import { attribute, boolattribute } from '../../lib/decorators';
+import { updateStore, connect, disconnect } from '../../lib/store';
 import { titleStore } from '../../lib/history';
 
 const defaultTitle = document.title;
 
-function updateTitle(str?: string | null, prefix = '', suffix = '') {
+function setDocumentTitle(str?: string | null, prefix = '', suffix = '') {
   const title = titleStore.title || str;
   if (title && title !== defaultTitle) {
     GemTitleElement.title = title;
@@ -31,18 +31,20 @@ function updateTitle(str?: string | null, prefix = '', suffix = '') {
   }
 }
 
+connect(titleStore, setDocumentTitle);
+
 export const PREFIX = `${defaultTitle} | `;
 export const SUFFIX = ` - ${defaultTitle}`;
 
 /**
- * 允许声明式设置 `document.title`
+ * 映射到 `document.title`
  * @attr prefix
  * @attr suffix
  */
-@connectStore(titleStore)
 export class GemTitleElement extends GemElement {
   @attribute prefix: string;
   @attribute suffix: string;
+  @boolattribute inert: boolean;
 
   // 没有后缀的当前标题
   static title = document.title;
@@ -64,15 +66,19 @@ export class GemTitleElement extends GemElement {
     });
   }
 
+  mounted = () => {
+    this.effect(
+      () => {
+        if (!this.inert) connect(titleStore, this.update);
+        return () => disconnect(titleStore, this.update);
+      },
+      () => [this.inert],
+    );
+  };
+
   render() {
     // 多个 <gem-title> 时，最终 document.title 按执行顺序决定
-    updateTitle(this.textContent, this.prefix, this.suffix);
-
-    if (this.hidden) {
-      return html``;
-    }
+    setDocumentTitle(this.textContent?.trim(), this.prefix, this.suffix);
     return html`${GemTitleElement.title}`;
   }
 }
-
-connect(titleStore, updateTitle);
diff --git a/packages/gem/src/lib/history.ts b/packages/gem/src/lib/history.ts
index 95ea12bb..78afe6f5 100644
--- a/packages/gem/src/lib/history.ts
+++ b/packages/gem/src/lib/history.ts
@@ -85,6 +85,7 @@ function updateHistory(p: UpdateHistoryParams, native: typeof nativeHistory.push
     $hasOpenHandle: !!open,
     $hasShouldCloseHandle: !!shouldClose,
     $key: getKey(),
+    $title: title,
     ...data,
   };
   paramsMap.set(state.$key, params);
@@ -100,6 +101,7 @@ function updateHistoryByNative(data: any, title: string, originUrl: string, nati
   validData(data);
   const state = {
     $key: getKey(),
+    $title: title,
     ...(data || {}),
   };
   const { pathname, search, hash } = new URL(originUrl, location.origin + location.pathname);
@@ -251,7 +253,7 @@ if (!window._GEMHISTORY) {
         path: pathname,
         query: new QueryString(search),
         hash,
-        title: document.title, // 浏览器缓存的 title
+        title: newState.$title, // document.title 是导航前的
         data: newState,
       });
     }