diff --git a/themes/gitbook/components/BottomMenuBar.js b/themes/gitbook/components/BottomMenuBar.js
index 478a52eb..c872941b 100644
--- a/themes/gitbook/components/BottomMenuBar.js
+++ b/themes/gitbook/components/BottomMenuBar.js
@@ -1,5 +1,5 @@
-import MobileButtonCatalog from './MobileButtonCatalog'
-import MobileButtonPageNav from './MobileButtonPageNav'
+import { useGlobal } from '@/lib/global'
+import { useGitBookGlobal } from '..'
 
 /**
  * 移动端底部导航
@@ -8,20 +8,43 @@ import MobileButtonPageNav from './MobileButtonPageNav'
  */
 export default function BottomMenuBar({ post, className }) {
   const showTocButton = post?.toc?.length > 1
+  const { locale } = useGlobal()
+  const { pageNavVisible, changePageNavVisible, tocVisible, changeTocVisible } =
+    useGitBookGlobal()
+  const togglePageNavVisible = () => {
+    changePageNavVisible(!pageNavVisible)
+  }
+
+  const toggleToc = () => {
+    changeTocVisible(!tocVisible)
+  }
 
   return (
-    <>
-      {/* 移动端底部导航按钮 */}
-      <div className='pb-2 dark:bg-hexo-black-gray bottom-button-group md:hidden w-screen h-14 px-4 fixed flex items-center justify-between right-left bottom-0 z-30 bg-white border-t dark:border-gray-800'>
-        <div className='w-full'>
-          <MobileButtonPageNav />
-        </div>
+    <div className='md:hidden fixed bottom-0 left-0 z-50 w-full h-16 bg-white border-t border-gray-200 dark:bg-gray-700 dark:border-gray-600'>
+      <div
+        className={`grid h-full max-w-lg  mx-auto font-medium ${showTocButton && 'grid-cols-2'}`}>
+        <button
+          type='button'
+          onClick={togglePageNavVisible}
+          className='inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600'>
+          <i className='fa-book fas w-5 h-5 mb-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-500' />
+          <span class='text-sm text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-500'>
+            {locale.COMMON.ARTICLE_LIST}
+          </span>
+        </button>
+
         {showTocButton && (
-          <div className='w-full'>
-            <MobileButtonCatalog />
-          </div>
+          <button
+            type='button'
+            onClick={toggleToc}
+            className='inline-flex flex-col items-center justify-center px-5 border-gray-200 border-x hover:bg-gray-50 dark:hover:bg-gray-800 group dark:border-gray-600'>
+            <i className='fa-list-ol fas w-5 h-5 mb-2 text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-500' />
+            <span class='text-sm text-gray-500 dark:text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-500'>
+              {locale.COMMON.TABLE_OF_CONTENTS}
+            </span>
+          </button>
         )}
       </div>
-    </>
+    </div>
   )
 }
diff --git a/themes/gitbook/components/MobileButtonCatalog.js b/themes/gitbook/components/MobileButtonCatalog.js
deleted file mode 100644
index e9e8b4e0..00000000
--- a/themes/gitbook/components/MobileButtonCatalog.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useGlobal } from '@/lib/global'
-import { useGitBookGlobal } from '@/themes/gitbook'
-
-/**
- * 移动端目录按钮
- */
-export default function MobileButtonCatalog() {
-  const { tocVisible, changeTocVisible } = useGitBookGlobal()
-  const { locale } = useGlobal()
-
-  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={
-          'space-x-4 cursor-pointer hover:scale-150 transform duration-200'
-        }>
-        <i className='fa-list-ol fas' />
-        <span>{locale.COMMON.TABLE_OF_CONTENTS}</span>
-      </a>
-    </div>
-  )
-}
diff --git a/themes/gitbook/components/MobileButtonPageNav.js b/themes/gitbook/components/MobileButtonPageNav.js
deleted file mode 100644
index 78f038f1..00000000
--- a/themes/gitbook/components/MobileButtonPageNav.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useGlobal } from '@/lib/global'
-import { useGitBookGlobal } from '@/themes/gitbook'
-
-/**
- * 移动端文章导航按钮
- */
-export default function MobileButtonPageNav() {
-  const { pageNavVisible, changePageNavVisible } = useGitBookGlobal()
-  const { locale } = useGlobal()
-  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='nav-button'
-        className={
-          'space-x-4 cursor-pointer hover:scale-150 transform duration-200'
-        }>
-        <i className='fa-book fas' />
-        <span>{locale.COMMON.ARTICLE_LIST}</span>
-      </a>
-    </div>
-  )
-}