diff --git a/README_EN.md b/README_EN.md
index dbb75684a73..dd4063e5944 100644
--- a/README_EN.md
+++ b/README_EN.md
@@ -35,15 +35,15 @@ Live Demo：[https://preview.tangly1024.com/](https://preview.tangly1024.com/) 
 
 It only takes a few minutes to set up your personal site:
 
-- [Quick Deployment Tutorial - Multiple Options Available](https://tangly1024.com/article/notion-next) 
+- [Quick Deployment Tutorial - Multiple Options Available](https://docs.tangly1024.com/article/vercel-deploy-notion-next) 
 
-- [Customization Guide - How to Configure Feature Plugins](https://tangly1024.com/article/notion-next-guide) 
+- [Customization Guide - How to Configure Feature Plugins](https://docs.tangly1024.com/article/how-to-config-notion-next) 
 
-- [Development Guide - How to Conduct Local Development](https://tangly1024.com/article/how-to-develop-with-notion-next)
+- [Development Guide - How to Conduct Local Development](https://docs.tangly1024.com/article/how-to-develop-with-notion-next)
  
-- [Update Guide - How to Get the Latest Upgrade Patch](https://tangly1024.com/article/how-to-update-notionnext)
+- [Update Guide - How to Get the Latest Upgrade Patch](https://docs.tangly1024.com/article/how-to-update-notionnext)
 
-- [Version History - Check Feature Highlights for Each Version](https://tangly1024.com/article/notion-next-changelogs)
+- [Version History - Check Feature Highlights for Each Version](https://docs.tangly1024.com/article/latest)
 
 ## Acknowledgements
 
diff --git a/components/Fireworks.js b/components/Fireworks.js
index cb6a2d98473..e61585f1682 100644
--- a/components/Fireworks.js
+++ b/components/Fireworks.js
@@ -35,7 +35,11 @@ const Fireworks = () => {
     loadFireworks()
 
     return () => {
-      // 在组件卸载时清理资源（如果需要）
+      // 在组件卸载时清理资源
+      const fireworksElements = document.getElementsByClassName('fireworks')
+      while (fireworksElements.length > 0) {
+        fireworksElements[0].parentNode.removeChild(fireworksElements[0])
+      }
     }
   }, [])
 
diff --git a/components/MouseFollow.js b/components/MouseFollow.js
index 2215a0cef9a..cc10d29c672 100644
--- a/components/MouseFollow.js
+++ b/components/MouseFollow.js
@@ -15,8 +15,26 @@ const MOUSE_FOLLOW = () => {
     loadExternalResource('/js/mouse-follow.js', 'js').then(url => {
       window.createMouseCanvas && window.createMouseCanvas()({ type, color })
     })
+
+    return () => {
+      // 在组件卸载时清理资源
+      const mouseFollowElement = document.getElementById('vixcityCanvas')
+      mouseFollowElement?.parentNode?.removeChild(mouseFollowElement)
+    }
   }, [])
 
-  return <></>
+  return (
+    <>
+      <style global jsx>
+        {`
+          @media (max-width: 600px) {
+            #vixcityCanvas {
+              display: none;
+            }
+          }
+        `}
+      </style>
+    </>
+  )
 }
 export default MOUSE_FOLLOW
diff --git a/themes/fukasawa/components/AsideLeft.js b/themes/fukasawa/components/AsideLeft.js
index f534d1b68c8..b0ea23131ba 100644
--- a/themes/fukasawa/components/AsideLeft.js
+++ b/themes/fukasawa/components/AsideLeft.js
@@ -1,22 +1,22 @@
-import Logo from './Logo'
-import GroupCategory from './GroupCategory'
-import { MenuList } from './MenuList'
-import GroupTag from './GroupTag'
-import SearchInput from './SearchInput'
-import SiteInfo from './SiteInfo'
-import Catalog from './Catalog'
-import Announcement from './Announcement'
-import { useRouter } from 'next/router'
 import DarkModeButton from '@/components/DarkModeButton'
-import SocialButton from './SocialButton'
-import CONFIG from '@/themes/fukasawa/config'
 import { AdSlot } from '@/components/GoogleAdsense'
 import { siteConfig } from '@/lib/config'
-import MailChimpForm from './MailChimpForm'
 import { useGlobal } from '@/lib/global'
-import { useEffect, useMemo, useState } from 'react'
 import { isBrowser } from '@/lib/utils'
+import CONFIG from '@/themes/fukasawa/config'
 import { debounce } from 'lodash'
+import { useRouter } from 'next/router'
+import { useEffect, useMemo, useState } from 'react'
+import Announcement from './Announcement'
+import Catalog from './Catalog'
+import GroupCategory from './GroupCategory'
+import GroupTag from './GroupTag'
+import Logo from './Logo'
+import MailChimpForm from './MailChimpForm'
+import { MenuList } from './MenuList'
+import SearchInput from './SearchInput'
+import SiteInfo from './SiteInfo'
+import SocialButton from './SocialButton'
 
 /**
  * 侧边栏
@@ -24,16 +24,41 @@ import { debounce } from 'lodash'
  * @returns
  */
 function AsideLeft(props) {
-  const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, notice } = props
+  const {
+    tagOptions,
+    currentTag,
+    categoryOptions,
+    currentCategory,
+    post,
+    slot,
+    notice
+  } = props
   const router = useRouter()
   const { fullWidth } = useGlobal()
 
-  const FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT = fullWidth || siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT', null, CONFIG)
+  const FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT =
+    fullWidth ||
+    siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT', null, CONFIG)
+
+  const FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL = siteConfig(
+    'FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL',
+    false,
+    CONFIG
+  )
+
+  const FUKASAWA_SIDEBAR_COLLAPSE_BUTTON = siteConfig(
+    'FUKASAWA_SIDEBAR_COLLAPSE_BUTTON',
+    null,
+    CONFIG
+  )
 
   // 侧边栏折叠从 本地存储中获取 open 状态的初始值
   const [isCollapsed, setIsCollapse] = useState(() => {
     if (typeof window !== 'undefined') {
-      return localStorage.getItem('fukasawa-sidebar-collapse') === 'true' || FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT
+      return (
+        localStorage.getItem('fukasawa-sidebar-collapse') === 'true' ||
+        FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT
+      )
     }
     return FUKASAWA_SIDEBAR_COLLAPSE_SATUS_DEFAULT
   })
@@ -69,7 +94,7 @@ function AsideLeft(props) {
 
   // 自动折叠侧边栏 onResize 窗口宽度小于1366 || 滚动条滚动至页面的300px时 ; 将open设置为false
   useEffect(() => {
-    if (!siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL', false, CONFIG)) {
+    if (!FUKASAWA_SIDEBAR_COLLAPSE_ON_SCROLL) {
       return
     }
     const handleResize = debounce(() => {
@@ -92,73 +117,89 @@ function AsideLeft(props) {
       }
     }
   }, [])
- 
- 
-  return <div className={`sideLeft relative ${isCollapsed ? 'w-0' : 'w-80'} duration-300 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
-        {/* 折叠按钮 */}
-    {siteConfig('FUKASAWA_SIDEBAR_COLLAPSE_BUTTON', null, CONFIG) && <div className={`${position} hidden lg:block fixed top-0 cursor-pointer hover:scale-110 duration-300 px-3 py-2   dark:text-white`} onClick={toggleOpen}>
-            {isCollapsed ? <i className="fa-solid fa-indent text-xl"></i> : <i className='fas fa-bars text-xl'></i>}
-        </div>}
-
-        <div className={`h-full ${isCollapsed ? 'hidden' : 'p-8'}`}>
-
-            <Logo {...props} />
-
-            <section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
-                {siteConfig('DESCRIPTION')}
-            </section>
-
-            <section className='flex flex-col text-gray-600'>
-                <div className='w-12 my-4' />
-                <MenuList {...props} />
-            </section>
-
-            <section className='flex flex-col text-gray-600'>
-                <div className='w-12 my-4' />
-                <SearchInput {...props} />
-            </section>
-
-            <section className='flex flex-col dark:text-gray-300'>
-                <div className='w-12 my-4' />
-                <Announcement post={notice} />
-            </section>
-
-            <section>
-                <MailChimpForm />
-            </section>
-
-            <section>
-                <AdSlot type='in-article' />
-            </section>
-
-            {router.asPath !== '/tag' && <section className='flex flex-col'>
-                <div className='w-12 my-4' />
-                <GroupTag tags={tagOptions} currentTag={currentTag} />
-            </section>}
-
-            {router.asPath !== '/category' && <section className='flex flex-col'>
-                <div className='w-12 my-4' />
-                <GroupCategory categories={categoryOptions} currentCategory={currentCategory} />
-            </section>}
-
-            <section className='flex flex-col'>
-                <div className='w-12 my-4' />
-                <SocialButton />
-                <SiteInfo />
-            </section>
-
-            <section className='flex justify-center dark:text-gray-200 pt-4'>
-                <DarkModeButton />
-            </section>
-
-            <section className='sticky top-0 pt-12  flex flex-col max-h-screen '>
-                <Catalog toc={post?.toc} />
-                <div className='flex justify-center'>
-                    <div>{slot}</div>
-                </div>
-            </section>
+
+  return (
+    <div
+      className={`sideLeft relative ${isCollapsed ? 'w-0' : 'w-80'} duration-300 transition-all bg-white dark:bg-hexo-black-gray min-h-screen hidden lg:block z-20`}>
+      {/* 悬浮的折叠按钮 */}
+      {FUKASAWA_SIDEBAR_COLLAPSE_BUTTON && (
+        <div
+          className={`${position} hidden lg:block fixed top-0 cursor-pointer hover:scale-110 duration-300 px-3 py-2 dark:text-white`}
+          onClick={toggleOpen}>
+          {isCollapsed ? (
+            <i className='fa-solid fa-indent text-xl'></i>
+          ) : (
+            <i className='fas fa-bars text-xl'></i>
+          )}
         </div>
+      )}
+
+      <div className={`h-full ${isCollapsed ? 'hidden' : 'p-8'}`}>
+        <Logo {...props} />
+
+        <section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
+          {siteConfig('DESCRIPTION')}
+        </section>
+
+        <section className='flex flex-col text-gray-600'>
+          <div className='w-12 my-4' />
+          <MenuList {...props} />
+        </section>
+
+        <section className='flex flex-col text-gray-600'>
+          <div className='w-12 my-4' />
+          <SearchInput {...props} />
+        </section>
+
+        <section className='flex flex-col dark:text-gray-300'>
+          <div className='w-12 my-4' />
+          <Announcement post={notice} />
+        </section>
+
+        <section>
+          <MailChimpForm />
+        </section>
+
+        <section>
+          <AdSlot type='in-article' />
+        </section>
+
+        {router.asPath !== '/tag' && (
+          <section className='flex flex-col'>
+            <div className='w-12 my-4' />
+            <GroupTag tags={tagOptions} currentTag={currentTag} />
+          </section>
+        )}
+
+        {router.asPath !== '/category' && (
+          <section className='flex flex-col'>
+            <div className='w-12 my-4' />
+            <GroupCategory
+              categories={categoryOptions}
+              currentCategory={currentCategory}
+            />
+          </section>
+        )}
+
+        <section className='flex flex-col'>
+          <div className='w-12 my-4' />
+          <SocialButton />
+          <SiteInfo />
+        </section>
+
+        <section className='flex justify-center dark:text-gray-200 pt-4'>
+          <DarkModeButton />
+        </section>
+
+        <section className='sticky top-0 pt-12  flex flex-col max-h-screen '>
+          <Catalog toc={post?.toc} />
+          <div className='flex justify-center'>
+            <div>{slot}</div>
+          </div>
+        </section>
+      </div>
     </div>
+  )
 }
 
 export default AsideLeft
diff --git a/themes/fukasawa/components/Header.js b/themes/fukasawa/components/Header.js
new file mode 100644
index 00000000000..669b384bce7
--- /dev/null
+++ b/themes/fukasawa/components/Header.js
@@ -0,0 +1,64 @@
+import Collapse from '@/components/Collapse'
+import { useRef, useState } from 'react'
+import Logo from './Logo'
+import { MenuList } from './MenuList'
+import SearchInput from './SearchInput'
+
+/**
+ * 顶部导航
+ * @param {*} param0
+ * @returns
+ */
+const Header = props => {
+  const [isOpen, changeShow] = useState(false)
+  const collapseRef = useRef(null)
+
+  const toggleMenuOpen = () => {
+    changeShow(!isOpen)
+  }
+
+  return (
+    <div id='top-nav' className='z-40 block lg:hidden'>
+      {/* 导航栏 */}
+      <div
+        id='sticky-nav'
+        className={
+          'relative w-full top-0 z-20 transform duration-500 bg-white dark:bg-black'
+        }>
+        <Collapse type='vertical' isOpen={isOpen} collapseRef={collapseRef}>
+          <div className='py-1 px-5'>
+            <MenuList
+              {...props}
+              onHeightChange={param =>
+                collapseRef.current?.updateCollapseHeight(param)
+              }
+            />
+            <SearchInput {...props} />
+          </div>
+        </Collapse>
+        <div className='w-full flex justify-between items-center p-4 '>
+          {/* 左侧LOGO 标题 */}
+          <div className='flex flex-none flex-grow-0'>
+            <Logo {...props} />
+          </div>
+          <div className='flex'></div>
+
+          {/* 右侧功能 */}
+          <div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
+            <div
+              onClick={toggleMenuOpen}
+              className='cursor-pointer text-lg p-2'>
+              {isOpen ? (
+                <i className='fas fa-times' />
+              ) : (
+                <i className='fas fa-bars' />
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Header
diff --git a/themes/fukasawa/components/TopNav.js b/themes/fukasawa/components/TopNav.js
deleted file mode 100644
index 21ca59a90db..00000000000
--- a/themes/fukasawa/components/TopNav.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useState, useRef } from 'react'
-import Collapse from '@/components/Collapse'
-import { MenuList } from './MenuList'
-import Logo from './Logo'
-import SearchInput from './SearchInput'
-
-/**
- * 顶部导航
- * @param {*} param0
- * @returns
- */
-const TopNav = props => {
-  const [isOpen, changeShow] = useState(false)
-  const collapseRef = useRef(null)
-
-  const toggleMenuOpen = () => {
-    changeShow(!isOpen)
-  }
-
-  return (<div id='top-nav' className='z-40 block lg:hidden'>
-
-    {/* 导航栏 */}
-    <div id='sticky-nav' className={'relative w-full top-0 z-20 transform duration-500 bg-white dark:bg-black'}>
-      <Collapse type='vertical' isOpen={isOpen} collapseRef={collapseRef}>
-        <div className='py-1 px-5'>
-          <MenuList {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
-          <SearchInput {...props} />
-        </div>
-      </Collapse>
-      <div className='w-full flex justify-between items-center p-4 '>
-        {/* 左侧LOGO 标题 */}
-        <div className='flex flex-none flex-grow-0'>
-          <Logo {...props} />
-        </div>
-        <div className='flex'>
-        </div>
-
-        {/* 右侧功能 */}
-        <div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
-          <div onClick={toggleMenuOpen} className='cursor-pointer text-lg p-2'>
-            {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
-          </div>
-        </div>
-      </div>
-    </div>
-
-  </div>)
-}
-
-export default TopNav
diff --git a/themes/fukasawa/index.js b/themes/fukasawa/index.js
index a8f975022f2..2442259a6a9 100644
--- a/themes/fukasawa/index.js
+++ b/themes/fukasawa/index.js
@@ -1,27 +1,27 @@
 'use client'
 
-import CONFIG from './config'
-import TopNav from './components/TopNav'
-import AsideLeft from './components/AsideLeft'
-import { isBrowser } from '@/lib/utils'
+import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
+import { AdSlot } from '@/components/GoogleAdsense'
+import replaceSearchResult from '@/components/Mark'
+import WWAds from '@/components/WWAds'
+import { siteConfig } from '@/lib/config'
 import { useGlobal } from '@/lib/global'
+import { isBrowser } from '@/lib/utils'
+import { Transition } from '@headlessui/react'
+import dynamic from 'next/dynamic'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { createContext, useContext, useEffect, useRef } from 'react'
+import ArticleDetail from './components/ArticleDetail'
+import ArticleLock from './components/ArticleLock'
+import AsideLeft from './components/AsideLeft'
 import BlogListPage from './components/BlogListPage'
 import BlogListScroll from './components/BlogListScroll'
 import BlogArchiveItem from './components/BlogPostArchive'
-import ArticleDetail from './components/ArticleDetail'
-import ArticleLock from './components/ArticleLock'
+import Header from './components/Header'
 import TagItemMini from './components/TagItemMini'
-import { useRouter } from 'next/router'
-import { createContext, useContext, useEffect, useRef } from 'react'
-import Link from 'next/link'
-import { Transition } from '@headlessui/react'
-import dynamic from 'next/dynamic'
-import { AdSlot } from '@/components/GoogleAdsense'
+import CONFIG from './config'
 import { Style } from './style'
-import replaceSearchResult from '@/components/Mark'
-import { siteConfig } from '@/lib/config'
-import WWAds from '@/components/WWAds'
-import AlgoliaSearchModal from '@/components/AlgoliaSearchModal'
 
 const Live2D = dynamic(() => import('@/components/Live2D'))
 
@@ -43,51 +43,58 @@ export const useFukasawaGlobal = () => useContext(ThemeGlobalFukasawa)
  * @returns {JSX.Element}
  * @constructor
  */
-const LayoutBase = (props) => {
+const LayoutBase = props => {
   const { children, headerSlot } = props
   const leftAreaSlot = <Live2D />
   const { onLoading, fullWidth } = useGlobal()
   const searchModal = useRef(null)
   return (
     <ThemeGlobalFukasawa.Provider value={{ searchModal }}>
-      <div id='theme-fukasawa' className={`${siteConfig('FONT_STYLE')} dark:bg-black scroll-smooth`}>
-        <AlgoliaSearchModal cRef={searchModal} {...props} />
+      <div
+        id='theme-fukasawa'
+        className={`${siteConfig('FONT_STYLE')} dark:bg-black scroll-smooth`}>
         <Style />
+        {/* 页头导航，此主题只在移动端生效 */}
+        <Header {...props} />
 
-        <TopNav {...props} />
-
-        <div className={(JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE')) ? 'flex-row-reverse' : '') + ' flex'}>
+        <div
+          className={
+            (JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
+              ? 'flex-row-reverse'
+              : '') + ' flex'
+          }>
           {/* 侧边抽屉 */}
           <AsideLeft {...props} slot={leftAreaSlot} />
 
-          <main id='wrapper' className='relative flex w-full py-8 justify-center bg-day dark:bg-night'>
-            <div id='container-inner' className={`${fullWidth ? '' : '2xl:max-w-6xl md:max-w-4xl'} w-full relative z-10`}>
+          <main
+            id='wrapper'
+            className='relative flex w-full py-8 justify-center bg-day dark:bg-night'>
+            <div
+              id='container-inner'
+              className={`${fullWidth ? '' : '2xl:max-w-6xl md:max-w-4xl'} w-full relative z-10`}>
               <Transition
                 show={!onLoading}
                 appear={true}
-                className="w-full"
-                enter="transition ease-in-out duration-700 transform order-first"
-                enterFrom="opacity-0 translate-y-16"
-                enterTo="opacity-100"
-                leave="transition ease-in-out duration-300 transform"
-                leaveFrom="opacity-100 translate-y-0"
-                leaveTo="opacity-0 -translate-y-16"
-                unmount={false}
-              >
+                className='w-full'
+                enter='transition ease-in-out duration-700 transform order-first'
+                enterFrom='opacity-0 translate-y-16'
+                enterTo='opacity-100'
+                leave='transition ease-in-out duration-300 transform'
+                leaveFrom='opacity-100 translate-y-0'
+                leaveTo='opacity-0 -translate-y-16'
+                unmount={false}>
                 <div> {headerSlot} </div>
                 <div> {children} </div>
-
               </Transition>
 
               <div className='mt-2'>
                 <AdSlot type='native' />
               </div>
-
             </div>
           </main>
-
         </div>
 
+        <AlgoliaSearchModal cRef={searchModal} {...props} />
       </div>
     </ThemeGlobalFukasawa.Provider>
   )
@@ -96,49 +103,64 @@ const LayoutBase = (props) => {
 /**
  * 首页
  * @param {*} props notion数据
-            * @returns 首页就是一个博客列表
-            */
-const LayoutIndex = (props) => {
+ * @returns 首页就是一个博客列表
+ */
+const LayoutIndex = props => {
   return <LayoutPostList {...props} />
 }
 
 /**
  * 博客列表
  * @param {*} props
-            */
-const LayoutPostList = (props) => {
-  return <>
-    <div className='w-full p-2'><WWAds className='w-full' orientation='horizontal' /></div>
-    {siteConfig('POST_LIST_STYLE') === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
-  </>
+ */
+const LayoutPostList = props => {
+  return (
+    <>
+      <div className='w-full p-2'>
+        <WWAds className='w-full' orientation='horizontal' />
+      </div>
+      {siteConfig('POST_LIST_STYLE') === 'page' ? (
+        <BlogListPage {...props} />
+      ) : (
+        <BlogListScroll {...props} />
+      )}
+    </>
+  )
 }
 
 /**
  * 文章详情
  * @param {*} props
-            * @returns
-            */
-const LayoutSlug = (props) => {
+ * @returns
+ */
+const LayoutSlug = props => {
   const { post, lock, validPassword } = props
   const router = useRouter()
   useEffect(() => {
     // 404
     if (!post) {
-      setTimeout(() => {
-        if (isBrowser) {
-          const article = document.getElementById('notion-article')
-          if (!article) {
-            router.push('/404').then(() => {
-              console.warn('找不到页面', router.asPath)
-            })
+      setTimeout(
+        () => {
+          if (isBrowser) {
+            const article = document.getElementById('notion-article')
+            if (!article) {
+              router.push('/404').then(() => {
+                console.warn('找不到页面', router.asPath)
+              })
+            }
           }
-        }
-      }, siteConfig('POST_WAITING_TIME_FOR_404') * 1000)
+        },
+        siteConfig('POST_WAITING_TIME_FOR_404') * 1000
+      )
     }
   }, [post])
   return (
     <>
-      {lock ? <ArticleLock validPassword={validPassword} /> : <ArticleDetail {...props} />}
+      {lock ? (
+        <ArticleLock validPassword={validPassword} />
+      ) : (
+        <ArticleDetail {...props} />
+      )}
     </>
   )
 }
@@ -167,26 +189,28 @@ const LayoutSearch = props => {
 /**
  * 归档页面
  */
-const LayoutArchive = (props) => {
+const LayoutArchive = props => {
   const { archivePosts } = props
-  return <>
-    <div className="mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-gray-800 shadow-md min-h-full">
-      {Object.keys(archivePosts).map(archiveTitle => (
-        <BlogArchiveItem
-          key={archiveTitle}
-          posts={archivePosts[archiveTitle]}
-          archiveTitle={archiveTitle}
-        />
-      ))}
-    </div>
-  </>
+  return (
+    <>
+      <div className='mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-gray-800 shadow-md min-h-full'>
+        {Object.keys(archivePosts).map(archiveTitle => (
+          <BlogArchiveItem
+            key={archiveTitle}
+            posts={archivePosts[archiveTitle]}
+            archiveTitle={archiveTitle}
+          />
+        ))}
+      </div>
+    </>
+  )
 }
 
 /**
  * 404
  * @param {*} props
-            * @returns
-            */
+ * @returns
+ */
 const Layout404 = props => {
   return <>404</>
 }
@@ -194,16 +218,17 @@ const Layout404 = props => {
 /**
  * 分类列表
  * @param {*} props
-            * @returns
-            */
-const LayoutCategoryIndex = (props) => {
+ * @returns
+ */
+const LayoutCategoryIndex = props => {
   const { locale } = useGlobal()
   const { categoryOptions } = props
   return (
     <>
       <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
         <div className='dark:text-gray-200 mb-5'>
-          <i className='mr-4 fas fa-th' />{locale.COMMON.CATEGORY}:
+          <i className='mr-4 fas fa-th' />
+          {locale.COMMON.CATEGORY}:
         </div>
         <div id='category-list' className='duration-200 flex flex-wrap'>
           {categoryOptions?.map(category => {
@@ -214,8 +239,11 @@ const LayoutCategoryIndex = (props) => {
                 passHref
                 legacyBehavior>
                 <div
-                  className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
-                  <i className='mr-4 fas fa-folder' />{category.name}({category.count})
+                  className={
+                    'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'
+                  }>
+                  <i className='mr-4 fas fa-folder' />
+                  {category.name}({category.count})
                 </div>
               </Link>
             )
@@ -229,36 +257,41 @@ const LayoutCategoryIndex = (props) => {
 /**
  * 标签列表
  * @param {*} props
-            * @returns
-            */
-const LayoutTagIndex = (props) => {
+ * @returns
+ */
+const LayoutTagIndex = props => {
   const { locale } = useGlobal()
   const { tagOptions } = props
-  return <>
-    <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
-      <div className='dark:text-gray-200 mb-5'><i className='mr-4 fas fa-tag' />{locale.COMMON.TAGS}:</div>
-      <div id="tags-list" className="duration-200 flex flex-wrap ml-8">
-        {tagOptions.map(tag => {
-          return (
-            <div key={tag.name} className="p-2">
-              <TagItemMini key={tag.name} tag={tag} />
-            </div>
-          )
-        })}
+  return (
+    <>
+      <div className='bg-white dark:bg-gray-700 px-10 py-10 shadow'>
+        <div className='dark:text-gray-200 mb-5'>
+          <i className='mr-4 fas fa-tag' />
+          {locale.COMMON.TAGS}:
+        </div>
+        <div id='tags-list' className='duration-200 flex flex-wrap ml-8'>
+          {tagOptions.map(tag => {
+            return (
+              <div key={tag.name} className='p-2'>
+                <TagItemMini key={tag.name} tag={tag} />
+              </div>
+            )
+          })}
+        </div>
       </div>
-    </div>
-  </>
+    </>
+  )
 }
 
 export {
-  CONFIG as THEME_CONFIG,
+  Layout404,
+  LayoutArchive,
   LayoutBase,
+  LayoutCategoryIndex,
   LayoutIndex,
+  LayoutPostList,
   LayoutSearch,
-  LayoutArchive,
   LayoutSlug,
-  Layout404,
-  LayoutPostList,
-  LayoutCategoryIndex,
-  LayoutTagIndex
+  LayoutTagIndex,
+  CONFIG as THEME_CONFIG
 }
diff --git a/themes/gitbook/components/CatalogDrawerWrapper.js b/themes/gitbook/components/CatalogDrawerWrapper.js
new file mode 100644
index 00000000000..3b6ee8daa0d
--- /dev/null
+++ b/themes/gitbook/components/CatalogDrawerWrapper.js
@@ -0,0 +1,60 @@
+import { useGlobal } from '@/lib/global'
+import { useGitBookGlobal } from '@/themes/gitbook'
+import Catalog from './Catalog'
+
+/**
+ * 悬浮抽屉目录
+ * @param toc
+ * @param post
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const CatalogDrawerWrapper = ({ post, cRef }) => {
+  const { tocVisible, changeTocVisible } = useGitBookGlobal()
+  const { locale } = useGlobal()
+  const switchVisible = () => {
+    changeTocVisible(!tocVisible)
+  }
+  return (
+    <>
+      <div
+        id='gitbook-toc-float'
+        className='fixed top-0 right-0 z-40 md:hidden'>
+        {/* 侧边菜单 */}
+        <div
+          className={
+            (tocVisible
+              ? 'animate__slideInRight '
+              : ' -mr-72 animate__slideOutRight') +
+            ' overflow-y-hidden shadow-card w-60 duration-200 fixed right-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray'
+          }>
+          {post && (
+            <>
+              <div className='px-4 pb-2 flex justify-between items-center border-b font-bold'>
+                <span>{locale.COMMON.TABLE_OF_CONTENTS}</span>
+                <i
+                  className='fas fa-times p-1 cursor-pointer'
+                  onClick={() => {
+                    changeTocVisible(false)
+                  }}></i>
+              </div>
+              <div className='dark:text-gray-400 text-gray-600 px-3'>
+                <Catalog post={post} />
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+      {/* 背景蒙版 */}
+      <div
+        id='right-drawer-background'
+        className={
+          (tocVisible ? 'block' : 'hidden') +
+          ' fixed top-0 left-0 z-30 w-full h-full'
+        }
+        onClick={switchVisible}
+      />
+    </>
+  )
+}
+export default CatalogDrawerWrapper
diff --git a/themes/gitbook/components/FloatTocButton.js b/themes/gitbook/components/FloatTocButton.js
deleted file mode 100644
index 4215f44743b..00000000000
--- a/themes/gitbook/components/FloatTocButton.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useGitBookGlobal } from '@/themes/gitbook'
-
-/**
- * 移动端悬浮目录按钮
- */
-export default function FloatTocButton () {
-  const { tocVisible, changeTocVisible } = useGitBookGlobal()
-
-  const toggleToc = () => {
-    changeTocVisible(!tocVisible)
-  }
-
-  return (
-    <div
-      onClick={toggleToc}
-      className={ 'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
-      }
-    >
-      <a
-        id="toc-button"
-        className={'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'}
-      />
-    </div>
-  )
-}
diff --git a/themes/gitbook/components/Footer.js b/themes/gitbook/components/Footer.js
index 78a91cd59aa..d0e2a1504d3 100644
--- a/themes/gitbook/components/Footer.js
+++ b/themes/gitbook/components/Footer.js
@@ -4,30 +4,56 @@ const Footer = ({ siteInfo }) => {
   const d = new Date()
   const currentYear = d.getFullYear()
   const since = siteConfig('SINCE')
-  const copyrightDate = parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
+  const copyrightDate =
+    parseInt(since) < currentYear ? since + '-' + currentYear : currentYear
 
   return (
-        <footer
-            className='z-20 py-2 bg:white dark:bg-hexo-black-gray justify-center text-center w-full text-sm relative'
-        >
-            <hr className='pb-2' />
-
-            <div className='flex justify-center'>
-                <div><i className='mx-1 animate-pulse fas fa-heart' /> <a href={siteConfig('LINK')} className='underline font-bold text-gray-500 dark:text-gray-300 '>{siteConfig('AUTHOR')}</a>.<br /></div>
-                © {`${copyrightDate}`}
-            </div>
-
-            <div className='text-xs font-serif'>Powered By <a href='https://github.com/tangly1024/NotionNext' className='underline text-gray-500 dark:text-gray-300'>NotionNext {siteConfig('VERSION')}</a></div>
-
-            {siteConfig('BEI_AN') && <><i className='fas fa-shield-alt' /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{siteConfig('BEI_AN')}</a><br /></>}
-
-            <span className='hidden busuanzi_container_site_pv'>
-                <i className='fas fa-eye' /><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
-            <span className='pl-2 hidden busuanzi_container_site_uv'>
-                <i className='fas fa-users' /> <span className='px-1 busuanzi_value_site_uv'> </span> </span>
-            <h1 className='pt-1'>{siteConfig('TITLE')}</h1>
-
-        </footer>
+    <footer className='z-20 bg:white dark:bg-hexo-black-gray justify-center text-center w-full text-sm relative'>
+      <hr className='pb-2' />
+
+      <div className='flex justify-center'>
+        <div>
+          <i className='mx-1 animate-pulse fas fa-heart' />{' '}
+          <a
+            href={siteConfig('LINK')}
+            className='underline font-bold text-gray-500 dark:text-gray-300 '>
+            {siteConfig('AUTHOR')}
+          </a>
+          .<br />
+        </div>
+        © {`${copyrightDate}`}
+      </div>
+
+      <div className='text-xs font-serif'>
+        Powered By{' '}
+        <a
+          href='https://github.com/tangly1024/NotionNext'
+          className='underline text-gray-500 dark:text-gray-300'>
+          NotionNext {siteConfig('VERSION')}
+        </a>
+      </div>
+
+      {siteConfig('BEI_AN') && (
+        <>
+          <i className='fas fa-shield-alt' />{' '}
+          <a href='https://beian.miit.gov.cn/' className='mr-2'>
+            {siteConfig('BEI_AN')}
+          </a>
+          <br />
+        </>
+      )}
+
+      <span className='hidden busuanzi_container_site_pv'>
+        <i className='fas fa-eye' />
+        <span className='px-1 busuanzi_value_site_pv'> </span>{' '}
+      </span>
+      <span className='pl-2 hidden busuanzi_container_site_uv'>
+        <i className='fas fa-users' />{' '}
+        <span className='px-1 busuanzi_value_site_uv'> </span>{' '}
+      </span>
+      {/* SEO title */}
+      <h1 className='pt-1 hidden'>{siteConfig('TITLE')}</h1>
+    </footer>
   )
 }
 
diff --git a/themes/gitbook/components/Header.js b/themes/gitbook/components/Header.js
index 8dfb3735820..8d5387403ee 100644
--- a/themes/gitbook/components/Header.js
+++ b/themes/gitbook/components/Header.js
@@ -90,7 +90,7 @@ export default function Header(props) {
             {isOpen ? (
               <i className='fas fa-times' />
             ) : (
-              <i className='fa-solid fa-ellipsis-vertical' />
+              <i className='fa-solid fa-bars' />
             )}
           </div>
         </div>
diff --git a/themes/gitbook/components/JumpToTopButton.js b/themes/gitbook/components/JumpToTopButton.js
index 0afdbb6c8ba..21b53733e9a 100644
--- a/themes/gitbook/components/JumpToTopButton.js
+++ b/themes/gitbook/components/JumpToTopButton.js
@@ -1,4 +1,3 @@
-
 /**
  * 跳转到网页顶部
  * 当屏幕下滑500像素后会出现该控件
@@ -9,15 +8,20 @@
  */
 const JumpToTopButton = ({ showPercent = false, percent, className }) => {
   return (
-          <div
-              id="jump-to-top"
-              data-aos="fade-up"
-              data-aos-duration="300"
-              data-aos-once="false"
-              data-aos-anchor-placement="top-center"
-              className='fixed xl:right-80 right-2 mr-10 bottom-24 z-20'>
-              <i className='fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-hexo-black-gray' onClick={() => { window.scrollTo({ top: 0, behavior: 'smooth' }) }} />
-          </div>
+    <div
+      id='jump-to-top'
+      data-aos='fade-up'
+      data-aos-duration='300'
+      data-aos-once='false'
+      data-aos-anchor-placement='top-center'
+      className='fixed xl:right-80 right-2 bottom-24 z-20'>
+      <i
+        className='shadow fas fa-chevron-up cursor-pointer p-2 rounded-full border bg-white dark:bg-hexo-black-gray'
+        onClick={() => {
+          window.scrollTo({ top: 0, behavior: 'smooth' })
+        }}
+      />
+    </div>
   )
 }
 
diff --git a/themes/gitbook/components/LogoBar.js b/themes/gitbook/components/LogoBar.js
index c2d1c453e86..dfe3caddcae 100644
--- a/themes/gitbook/components/LogoBar.js
+++ b/themes/gitbook/components/LogoBar.js
@@ -1,6 +1,5 @@
 import LazyImage from '@/components/LazyImage'
 import { siteConfig } from '@/lib/config'
-import { useGitBookGlobal } from '@/themes/gitbook'
 import Link from 'next/link'
 import CONFIG from '../config'
 
@@ -11,19 +10,8 @@ import CONFIG from '../config'
  */
 export default function LogoBar(props) {
   const { siteInfo } = props
-  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
-
-  const togglePageNavVisible = () => {
-    changePageNavVisible(!pageNavVisible)
-  }
   return (
     <div id='top-wrapper' className='w-full flex items-center'>
-      <div
-        onClick={togglePageNavVisible}
-        className='cursor-pointer md:hidden text-xl pr-3 hover:scale-110 duration-150'>
-        <i
-          className={`fa-solid ${pageNavVisible ? 'fa-align-justify' : 'fa-indent'}`}></i>
-      </div>
       <Link
         href={`/${siteConfig('GITBOOK_INDEX_PAGE', '', CONFIG)}`}
         className='flex text-md md:text-xl dark:text-gray-200'>
diff --git a/themes/gitbook/components/MobileButtonCatalog.js b/themes/gitbook/components/MobileButtonCatalog.js
new file mode 100644
index 00000000000..2c61289493c
--- /dev/null
+++ b/themes/gitbook/components/MobileButtonCatalog.js
@@ -0,0 +1,27 @@
+import { useGitBookGlobal } from '@/themes/gitbook'
+
+/**
+ * 移动端目录按钮
+ */
+export default function MobileButtonCatalog() {
+  const { tocVisible, changeTocVisible } = useGitBookGlobal()
+
+  const toggleToc = () => {
+    changeTocVisible(!tocVisible)
+  }
+
+  return (
+    <div
+      onClick={toggleToc}
+      className={
+        'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
+      }>
+      <a
+        id='toc-button'
+        className={
+          'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'
+        }
+      />
+    </div>
+  )
+}
diff --git a/themes/gitbook/components/MobileButtonPageNav.js b/themes/gitbook/components/MobileButtonPageNav.js
new file mode 100644
index 00000000000..65a3c39ad2a
--- /dev/null
+++ b/themes/gitbook/components/MobileButtonPageNav.js
@@ -0,0 +1,27 @@
+import { useGitBookGlobal } from '@/themes/gitbook'
+
+/**
+ * 移动端文章导航按钮
+ */
+export default function MobileButtonPageNav() {
+  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
+
+  const togglePageNavVisible = () => {
+    changePageNavVisible(!pageNavVisible)
+  }
+
+  return (
+    <div
+      onClick={togglePageNavVisible}
+      className={
+        'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
+      }>
+      <a
+        id='toc-button'
+        className={
+          'fa-book cursor-pointer fas hover:scale-150 transform duration-200'
+        }
+      />
+    </div>
+  )
+}
diff --git a/themes/gitbook/components/PageNavDrawer.js b/themes/gitbook/components/PageNavDrawer.js
index b5657d18ff6..eb927762789 100644
--- a/themes/gitbook/components/PageNavDrawer.js
+++ b/themes/gitbook/components/PageNavDrawer.js
@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import { useGitBookGlobal } from '@/themes/gitbook'
 import NavPostList from './NavPostList'
 
@@ -11,6 +12,7 @@ import NavPostList from './NavPostList'
 const PageNavDrawer = props => {
   const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
   const { filteredNavPages } = props
+  const { locale } = useGlobal()
 
   const switchVisible = () => {
     changePageNavVisible(!pageNavVisible)
@@ -24,7 +26,15 @@ const PageNavDrawer = props => {
         {/* 侧边菜单 */}
         <div
           className={`${pageNavVisible ? 'animate__slideInLeft ' : '-ml-80 animate__slideOutLeft'} 
-                      overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 top-16 rounded py-2 bg-white dark:bg-hexo-black-gray`}>
+                      overflow-y-hidden shadow-card w-72 duration-200 fixed left-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray`}>
+          <div className='px-4 pb-2 flex justify-between items-center border-b font-bold'>
+            <span>{locale.COMMON.ARTICLE}</span>
+            <i
+              className='fas fa-times p-1 cursor-pointer'
+              onClick={() => {
+                changePageNavVisible(false)
+              }}></i>
+          </div>
           {/* 所有文章列表 */}
           <div className='dark:text-gray-400 text-gray-600 h-96 overflow-y-scroll p-3'>
             <NavPostList filteredNavPages={filteredNavPages} />
diff --git a/themes/gitbook/components/TocDrawer.js b/themes/gitbook/components/TocDrawer.js
deleted file mode 100644
index 7b07044ad09..00000000000
--- a/themes/gitbook/components/TocDrawer.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { useGitBookGlobal } from '@/themes/gitbook'
-import Catalog from './Catalog'
-
-/**
- * 悬浮抽屉目录
- * @param toc
- * @param post
- * @returns {JSX.Element}
- * @constructor
- */
-const TocDrawer = ({ post, cRef }) => {
-  const { tocVisible, changeTocVisible } = useGitBookGlobal()
-  const switchVisible = () => {
-    changeTocVisible(!tocVisible)
-  }
-  return <>
-    <div id='gitbook-toc-float' className='fixed top-0 right-0 z-40 md:hidden'>
-      {/* 侧边菜单 */}
-      <div
-        className={(tocVisible ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
-        ' overflow-y-hidden shadow-card w-60 duration-200 fixed right-1 bottom-16 rounded py-2 bg-white dark:bg-hexo-black-gray'}>
-          {post && <>
-           <div className='dark:text-gray-400 text-gray-600 h-96 p-3'>
-             <Catalog post={post}/>
-           </div>
-          </>}
-      </div>
-    </div>
-    {/* 背景蒙版 */}
-    <div id='right-drawer-background' className={(tocVisible ? 'block' : 'hidden') + ' fixed top-0 left-0 z-30 w-full h-full'}
-         onClick={switchVisible} />
-  </>
-}
-export default TocDrawer
diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js
index 34c4f05d021..89240a633a9 100644
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -20,18 +20,19 @@ import ArticleInfo from './components/ArticleInfo'
 import { ArticleLock } from './components/ArticleLock'
 import BlogArchiveItem from './components/BlogArchiveItem'
 import Catalog from './components/Catalog'
+import CatalogDrawerWrapper from './components/CatalogDrawerWrapper'
 import CategoryItem from './components/CategoryItem'
-import FloatTocButton from './components/FloatTocButton'
 import Footer from './components/Footer'
 import Header from './components/Header'
 import InfoCard from './components/InfoCard'
 import JumpToTopButton from './components/JumpToTopButton'
+import MobileButtonCatalog from './components/MobileButtonCatalog'
+import MobileButtonPageNav from './components/MobileButtonPageNav'
 import NavPostList from './components/NavPostList'
 import PageNavDrawer from './components/PageNavDrawer'
 import RevolverMaps from './components/RevolverMaps'
 import SearchInput from './components/SearchInput'
 import TagItemMini from './components/TagItemMini'
-import TocDrawer from './components/TocDrawer'
 import CONFIG from './config'
 import { Style } from './style'
 
@@ -139,9 +140,8 @@ const LayoutBase = props => {
         <main
           id='wrapper'
           className={
-            (JSON.parse(siteConfig('LAYOUT_SIDEBAR_REVERSE'))
-              ? 'flex-row-reverse'
-              : '') + 'relative flex justify-between w-full h-full mx-auto'
+            (siteConfig('LAYOUT_SIDEBAR_REVERSE') ? 'flex-row-reverse' : '') +
+            'relative flex justify-between w-full h-full mx-auto'
           }>
           {/* 左侧推拉抽屉 */}
           {fullWidth ? null : (
@@ -149,16 +149,19 @@ const LayoutBase = props => {
               className={
                 'hidden md:block border-r dark:border-transparent relative z-10 dark:bg-hexo-black-gray'
               }>
-              <div className='w-72 py-14 px-6 sticky top-0 overflow-y-scroll h-screen scroll-hidden'>
-                {slotLeft}
-                <SearchInput className='my-3 rounded-md' />
-                <div className='mb-20'>
+              <div className='w-72 pt-14 pb-4 px-6 sticky top-0 h-screen flex justify-between flex-col'>
+                {/* 导航 */}
+                <div className='overflow-y-scroll scroll-hidden'>
+                  {/* 嵌入 */}
+                  {slotLeft}
+                  {/* 搜索框 */}
+                  <SearchInput className='my-3 rounded-md' />
+
+                  {/* 文章列表 */}
                   {/* 所有文章列表 */}
                   <NavPostList filteredNavPages={filteredNavPages} />
                 </div>
-              </div>
-
-              <div className='w-72 fixed left-0 bottom-0 z-20 bg-white'>
+                {/* 页脚 */}
                 <Footer {...props} />
               </div>
             </div>
@@ -211,6 +214,7 @@ const LayoutBase = props => {
                 <ArticleInfo post={props?.post ? props?.post : props.notice} />
 
                 <div className='py-4'>
+                  {/* 桌面端目录 */}
                   <Catalog {...props} />
                   {slotRight}
                   {router.route === '/' && (
@@ -235,12 +239,17 @@ const LayoutBase = props => {
           )}
         </main>
 
-        {/* 移动端悬浮目录按钮 */}
-        {showTocButton && !tocVisible && (
-          <div className='md:hidden fixed right-0 bottom-52 z-30 bg-white border-l border-t border-b dark:border-gray-800 rounded'>
-            <FloatTocButton {...props} />
+        {/* 移动端底部按钮 */}
+        <div className='bottom-button-group md:hidden w-screen h-12 px-4 fixed flex items-center justify-between right-0 bottom-0 z-30 bg-white border-l border-t dark:border-gray-800'>
+          <div className='w-full'>
+            <MobileButtonPageNav />
           </div>
-        )}
+          {showTocButton && (
+            <div className='w-full'>
+              <MobileButtonCatalog />
+            </div>
+          )}
+        </div>
 
         {/* 移动端导航抽屉 */}
         <PageNavDrawer {...props} filteredNavPages={filteredNavPages} />
@@ -366,7 +375,8 @@ const LayoutSlug = props => {
             </section>
           )}
 
-          <TocDrawer {...props} />
+          {/* 文章目录 */}
+          <CatalogDrawerWrapper {...props} />
         </div>
       )}
     </>
diff --git a/themes/gitbook/style.js b/themes/gitbook/style.js
index 5e8eaa5a2a3..904da2a7560 100644
--- a/themes/gitbook/style.js
+++ b/themes/gitbook/style.js
@@ -5,14 +5,18 @@
  * @returns
  */
 const Style = () => {
-  return <style jsx global>{`
-    
-    // 底色
-    .dark body{
+  return (
+    <style jsx global>{`
+      // 底色
+      .dark body {
         background-color: black;
-    }
+      }
 
-  `}</style>
+      .bottom-button-group {
+        box-shadow: 0px -3px 10px 0px rgba(0, 0, 0, 0.1);
+      }
+    `}</style>
+  )
 }
 
 export { Style }
diff --git a/themes/nav/components/FloatButtonCatalog.js b/themes/nav/components/FloatButtonCatalog.js
new file mode 100644
index 00000000000..753451da002
--- /dev/null
+++ b/themes/nav/components/FloatButtonCatalog.js
@@ -0,0 +1,27 @@
+import { useNavGlobal } from '@/themes/nav'
+
+/**
+ * 移动端悬浮目录按钮
+ */
+export default function FloatButtonCatalog() {
+  const { tocVisible, changeTocVisible } = useNavGlobal()
+
+  const toggleToc = () => {
+    changeTocVisible(!tocVisible)
+  }
+
+  return (
+    <div
+      onClick={toggleToc}
+      className={
+        'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
+      }>
+      <a
+        id='toc-button'
+        className={
+          'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'
+        }
+      />
+    </div>
+  )
+}
diff --git a/themes/nav/components/FloatTocButton.js b/themes/nav/components/FloatTocButton.js
deleted file mode 100755
index d4ff317d186..00000000000
--- a/themes/nav/components/FloatTocButton.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useNavGlobal } from '@/themes/nav'
-
-/**
- * 移动端悬浮目录按钮
- */
-export default function FloatTocButton () {
-  const { tocVisible, changeTocVisible } = useNavGlobal()
-
-  const toggleToc = () => {
-    changeTocVisible(!tocVisible)
-  }
-
-  return (
-    <div
-      onClick={toggleToc}
-      className={ 'text-black flex justify-center items-center dark:text-gray-200 dark:bg-hexo-black-gray py-2 px-2'
-      }
-    >
-      <a
-        id="toc-button"
-        className={'fa-list-ol cursor-pointer fas hover:scale-150 transform duration-200'}
-      />
-    </div>
-  )
-}
diff --git a/themes/nav/index.js b/themes/nav/index.js
index 54cea4b8acb..4a9bd72415e 100755
--- a/themes/nav/index.js
+++ b/themes/nav/index.js
@@ -25,7 +25,7 @@ import BlogArchiveItem from './components/BlogArchiveItem'
 import BlogPostCard from './components/BlogPostCard'
 import BlogPostListAll from './components/BlogPostListAll'
 import CategoryItem from './components/CategoryItem'
-import FloatTocButton from './components/FloatTocButton'
+import FloatButtonCatalog from './components/FloatButtonCatalog'
 import Footer from './components/Footer'
 import JumpToTopButton from './components/JumpToTopButton'
 import LogoBar from './components/LogoBar'
@@ -187,7 +187,7 @@ const LayoutBase = props => {
         {/* 移动端悬浮目录按钮 */}
         {showTocButton && !tocVisible && (
           <div className='md:hidden fixed right-0 bottom-52 z-30 bg-white border-l border-t border-b dark:border-neutral-800 rounded'>
-            <FloatTocButton {...props} />
+            <FloatButtonCatalog {...props} />
           </div>
         )}