diff --git a/components/Tabs.js b/components/Tabs.js
index ea9bb75a..4236ba7e 100644
--- a/components/Tabs.js
+++ b/components/Tabs.js
@@ -33,7 +33,7 @@ const Tabs = ({ children }) => {
       {<div className='hidden lg:block mb-5 bg-white dark:bg-gray-800 duration-200'>
         <ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600'>
           {children.map((item, index) => {
-            return <li key={index} className={currentTab === index ? 'font-black border-b-2 border-red-400 text-red-400 animate__animated animate__jello ' : 'font-extralight cursor-pointer'} onClick={() => { tabClickHandle(index) }}>
+            return <li key={index} className={(currentTab === index ? 'font-black border-b-2 border-red-400 text-red-400 animate__animated animate__jello ' : 'font-extralight cursor-pointer') + ' text-sm font-sans '} onClick={() => { tabClickHandle(index) }}>
               {item?.key}
             </li>
           })}
diff --git a/components/Toc.js b/components/Toc.js
index 676dbbd2..22ca4bc0 100644
--- a/components/Toc.js
+++ b/components/Toc.js
@@ -52,8 +52,8 @@ const Toc = ({ toc }) => {
     setActiveSection(currentSectionId)
   }, throttleMs))
 
-  return <>
-    <div className='w-full'>
+  return <div className='px-3'>
+    <div className='w-full pb-1'>
       <Progress/>
     </div>
     <nav className='font-sans overflow-y-auto scroll-hidden'>
@@ -79,7 +79,7 @@ const Toc = ({ toc }) => {
         )
       })}
     </nav>
-  </>
+  </div>
 }
 
 export default Toc
diff --git a/components/TocDrawer.js b/components/TocDrawer.js
index 5d272728..80f9e6c8 100644
--- a/components/TocDrawer.js
+++ b/components/TocDrawer.js
@@ -22,17 +22,17 @@ const TocDrawer = ({ post, cRef }) => {
   }
   const { locale } = useGlobal()
   return <>
-    <div className='fixed top-0 right-0 z-40'>
+    <div className='fixed top-0 right-0 z-40 '>
       {/* 侧边菜单 */}
       <div
         className={(showDrawer ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
-        '  shadow-card animate__animated animate__faster max-h-96 ' +
-        ' w-60 duration-200 fixed right-4 top-16 rounded overflow-y-auto'}>
+        ' shadow-card animate__animated animate__faster max-h-96 ' +
+        ' w-60 duration-200 fixed right-4 top-16 rounded overflow-y-auto py-2 bg-white dark:bg-gray-600'}>
           {post && <>
-            <div className='text-xl font-bold text-center text-black dark:text-white bg-white dark:bg-gray-600 py-2 px-6'>
+            <div className='font-bold pb-2 text-center text-black dark:text-white '>
               {locale.COMMON.TABLE_OF_CONTENTS}
             </div>
-           <div className='p-6 dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800'>
+           <div className='dark:text-gray-400 text-gray-600 dark:bg-gray-800'>
              <Toc toc={post.toc}/>
            </div>
           </>