diff --git a/components/BlogPost.js b/components/BlogPost.js
index 0136fabc..f8cd86be 100644
--- a/components/BlogPost.js
+++ b/components/BlogPost.js
@@ -4,7 +4,7 @@ import TagItem from '@/components/TagItem'
 const BlogPost = ({ post }) => {
   return (
     <article key={post.id}
-             className='inline-block border dark:border-gray-600 my-2 md:mx-2 w-full md:max-w-md duration-200 transform hover:scale-105 rounded-3xl bg-white dark:bg-gray-700 dark:hover:bg-gray-600 overflow-hidden'>
+             className='inline-block border dark:border-gray-600 my-2 md:mx-2 w-full md:max-w-md duration-200 hover:shadow-2xl rounded-3xl bg-white dark:bg-gray-700 dark:hover:bg-gray-600 overflow-hidden'>
         {/*  封面图 */}
         {post.page_cover && post.page_cover.length > 1 && (
           <a href={`${BLOG.path}/article/${post.slug}`} className='md:flex-shrink-0 md:w-52 md:h-52 rounded-lg'>
diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js
index 3e330299..27bbd75e 100644
--- a/components/DarkModeButton.js
+++ b/components/DarkModeButton.js
@@ -9,9 +9,9 @@ const DarkModeButton = () => {
     localStorage.setItem('theme', newTheme)
   }
   return <div onClick={handleChangeDarkMode}
-        className=' justify-center align-middle font-bold text-xl rounded cursor-pointer text-gray-600 hover:scale-125 transform duration-200
-                dark:bg-gray-600 dark:text-gray-300 dark:hover:bg-gray-100 dark:hover:text-black'>
-     <span className={'fa px-1 ' + (theme === 'dark' ? ' fa-sun-o' : ' fa-moon-o')} />
+        className=' justify-center align-middle font-bold text-xl cursor-pointer hover:scale-125 transform duration-200
+                dark:text-gray-300 dark:hover:bg-gray-100 dark:hover:text-black'>
+     <i className={'fa px-1 ' + (theme === 'dark' ? ' fa-sun-o' : ' fa-moon-o')} />
    </div>
 }
 export default DarkModeButton
diff --git a/components/Footer.js b/components/Footer.js
index 735f5656..2e53a3db 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -8,7 +8,7 @@ const Footer = ({ fullWidth = true }) => {
   const from = +BLOG.since
   return (
     <footer
-      className='p-5 flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400'
+      className='p-6 flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400'
     >
       <div className='py-2'>
         <span className='text-xl border-b-2'>菜单</span>
diff --git a/components/RightAside.js b/components/RightAside.js
index 475630e2..584e2b3a 100644
--- a/components/RightAside.js
+++ b/components/RightAside.js
@@ -5,8 +5,8 @@ const RightAside = ({ toc }) => {
   // 无目录就直接返回空
   if (toc.length < 1) return <></>
 
-  return <aside className='bg-gray-800 px-5 hidden lg:block py-5 hover:shadow-2xl duration-200'>
-      <div className='sticky top-8 w-60 overflow-x-auto'>
+  return <aside className='bg-gray-100 dark:bg-gray-800 px-5 hidden lg:block py-5 hover:shadow-2xl duration-200'>
+      <div className='sticky top-8 w-52 overflow-x-auto'>
       <Toc toc={toc}/>
       </div>
     </aside>
diff --git a/components/ShareButton.js b/components/ShareButton.js
index 7042a38f..fae1dec9 100644
--- a/components/ShareButton.js
+++ b/components/ShareButton.js
@@ -31,7 +31,7 @@ const ShareButton = ({ post }) => {
         </div>
         <div
           ref={btnRef}
-          className='border dark:bg-black bg-white px-4 py-3 cursor-pointer text-md hover:bg-blue-500 transform duration-200 hover:text-white hover:shadow'>
+          className='border dark:border-gray-600 dark:bg-black bg-white px-4 py-3 cursor-pointer text-md hover:bg-blue-500 transform duration-200 hover:text-white hover:shadow'>
           <div className='dark:text-gray-200 fa fa-share-alt' title='share' />
         </div>
       </div>
diff --git a/components/SideBar.js b/components/SideBar.js
index b4e2bfe9..11232c85 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -41,22 +41,23 @@ const SideBar = ({ tags, currentTag }) => {
     className={(collapse ? '' : '') + ' z-10 duration-500 ease-in-out'}
   >
 
-    <div className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + ' dark:bg-gray-800 bg-white sidebar h-full w-60 md:w-80 duration-500 ease-in-out'}>
+    <div className={(collapse ? '-ml-80 ' : 'shadow-2xl xl:shadow-none') + '  hover:shadow-2xl dark:bg-gray-800 bg-white sidebar h-full w-72 duration-500 ease-in-out'}>
 
-      <section className='mx-5 pt-5 pb-2'>
+      <section className='mx-5 pt-6 pb-2'>
         <Link href='/'>
           <a
             className='text-3xl hover:shadow-2xl text-black dark:bg-gray-900 dark:text-gray-300 font-semibold hover:bg-gray-800 hover:text-white p-2 duration-200'>{BLOG.title}</a>
         </Link>
       </section>
 
-      <section className='text-gray-500 text-sm px-6 pt-3 pb-5 dark:text-gray-300'>
+      <section className='text-gray-500 text-sm px-7 pt-3 pb-5 dark:text-gray-300'>
         <i className='fa fa-map-marker mr-1' />
         Fuzhou, China
       </section>
 
       {/* 搜索框 */}
       <div className='flex justify-center items-center py-5 pr-5 pl-2 bg-gray-100 dark:bg-black'>
+        <div className='hover:block hidden fixed left-0 top-0 w-screen h-screen bg-black z-20 opacity-40'/>
         <input
           type='text'
           placeholder={
@@ -72,7 +73,7 @@ const SideBar = ({ tags, currentTag }) => {
 
       {/* <hr className='my-5' /> */}
 
-      <div className='p-5'>
+      <div className='p-6'>
         <span className='text-xl border-b-2 text-gray-500 dark:text-gray-400'>标签</span>
         <Tags tags={tags} currentTag={currentTag} />
       </div>
@@ -80,12 +81,15 @@ const SideBar = ({ tags, currentTag }) => {
       <Footer />
     </div>
 
-    <div className={(collapse ? 'left-0' : 'md:left-80 left-60') + ' space-x-2 fixed md:absolute flex top-0 px-4 py-1 duration-500 ease-in-out'}>
-      <div className='my-5 text-xl rounded cursor-pointer text-center hover:scale-125 transform duration-200 bg-gray-100 bg-opacity-50 md:bg-opacity-0
-      dark:bg-gray-600 dark:text-gray-300 dark:hover:bg-gray-100 dark:hover:text-black'>
-        <i className='fa fa-bars px-1' onClick={() => changeCollapse(!collapse)} />
+    <div className={(collapse ? 'left-0' : 'left-72') + ' space-x-2 fixed md:fixed flex top-0 px-4 py-1 duration-500 ease-in-out'}>
+
+      <div className='my-4 bg-gray-100 dark:bg-gray-800 bg-opacity-50 p-1 rounded'>
+        <div className=' justify-center align-middle font-bold text-xl cursor-pointer hover:scale-125 transform duration-200
+               dark:text-gray-300 dark:hover:bg-gray-100 dark:hover:text-black'>
+          <i className='fa fa-bars px-1' onClick={() => changeCollapse(!collapse)}/>
+        </div>
       </div>
-      <div className='my-4 bg-gray-100 bg-opacity-50 p-1 rounded md:bg-opacity-0'>
+      <div className='my-4 bg-gray-100 dark:bg-gray-800 bg-opacity-50 p-1 rounded'>
         <DarkModeButton />
       </div>
      </div>
diff --git a/components/Toc.js b/components/Toc.js
index 33cf6493..68291a94 100644
--- a/components/Toc.js
+++ b/components/Toc.js
@@ -49,10 +49,10 @@ const Toc = ({ toc }) => {
 
   return (
     <>
-      <div className='text-center font-bold text-white'>
+      <div className='text-center font-bold text-black dark:text-white'>
         文章目录
       </div>
-      <nav className='notion-table-of-contents text-gray-400 underline'>
+      <nav className='notion-table-of-contents text-gray-500 dark:text-gray-400 underline'>
         {toc.map((tocItem) => {
           const id = uuidToId(tocItem.id)
           return (
@@ -63,7 +63,7 @@ const Toc = ({ toc }) => {
                 'notion-table-of-contents-item',
                 `notion-table-of-contents-item-indent-level-${tocItem.indentLevel}`,
                 activeSection === id &&
-                ' font-bold text-white'
+                ' font-bold text-black dark:text-white'
               )}
             >
                       <span
diff --git a/components/TopJumper.js b/components/TopJumper.js
index 780ee998..b8562822 100644
--- a/components/TopJumper.js
+++ b/components/TopJumper.js
@@ -27,7 +27,7 @@ const TopJumper = () => {
     <div
       className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' animate__animated animate__faster'}>
       <div
-        className='border dark:bg-black bg-white cursor-pointer hover:bg-blue-500 transform duration-200 hover:text-white hover:shadow-2xl hover:scale-125'
+        className='border dark:border-gray-600 dark:bg-black bg-white cursor-pointer hover:bg-blue-500 transform duration-200 hover:text-white hover:shadow-2xl hover:scale-125'
         onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
         <a className='dark:text-gray-200 fa fa-arrow-up p-4' title={locale.POST.TOP}/>
       </div>
diff --git a/layouts/ArticleLayout.js b/layouts/ArticleLayout.js
index c4c4bf62..073b395f 100644
--- a/layouts/ArticleLayout.js
+++ b/layouts/ArticleLayout.js
@@ -67,7 +67,7 @@ const ArticleLayout = ({
 
             <article
               ref={targetRef}
-              className='overflow-x-auto px-10 py-10 max-w-3xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-700'>
+              className='overflow-x-auto px-10 py-10 max-w-4xl mx-auto bg-white dark:border-gray-700 dark:bg-gray-700'>
               {/* 文章标题 */}
               <h1 className='font-bold text-4xl text-black my-5 dark:text-white animate__animated animate__fadeIn'>
                 {frontMatter.title}