diff --git a/components/BlogPostArchive.js b/components/BlogPostArchive.js
index e4ddf742..646c9c29 100644
--- a/components/BlogPostArchive.js
+++ b/components/BlogPostArchive.js
@@ -18,9 +18,9 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
       {/* 文章列表 */}
       <ul className='flex flex-wrap space-y-1'>
         {posts.map(post => (
-          <Link key={post.id} href={`${BLOG.path}/article/${post.slug}`}>
+          <Link key={post.id} href={`${BLOG.path}/article/${post.slug}`} passHref>
             <li className='w-full border-l pl-2 hover:underline cursor-pointer hover:scale-105 transform duration-500'>
-              <span className='text-gray-400'>{post.date.start_date}</span> &nbsp; <span className='dark:text-gray-200 text-blue-600'>{post.title}</span>
+              <span className='text-gray-400'>{post.date.start_date}</span> &nbsp; <span className='dark:text-blue-400 text-blue-600'>{post.title}</span>
             </li>
           </Link>
         ))}
diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js
index 43c238c6..7e8b5b2f 100644
--- a/components/BlogPostCard.js
+++ b/components/BlogPostCard.js
@@ -24,7 +24,9 @@ const BlogPostCard = ({ post, tags }) => {
             </span>
           </Link>
           <span className='mx-1 dark:text-gray-400'>|</span>
-          <span className='mt-2 mx-2 text-gray-400 dark:text-gray-300 text-sm leading-4'>{post.date.start_date}</span>
+          <Link href='/archive' passHref>
+            <span className='mt-2 mx-2 text-gray-400 hover:text-blue-400 hover:underline cursor-pointer dark:text-gray-300 text-sm leading-4'>{post.date.start_date}</span>
+          </Link>
         </div>
 
         <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
diff --git a/components/CategoryGroup.js b/components/CategoryGroup.js
index 56323fc8..2d864400 100644
--- a/components/CategoryGroup.js
+++ b/components/CategoryGroup.js
@@ -5,16 +5,19 @@ import React from 'react'
 
 const CategoryGroup = ({ currentCategory, categories }) => {
   return <div>
-      <div id='category-list' className='dark:border-gray-600 dark:bg-gray-900'>
-        {Object.keys(categories).map(category => {
-          const selected = currentCategory === category
-          return <Link key={category} href={`/category/${category}`} passHref>
-            <div className={(selected ? 'bg-gray-200 dark:bg-black dark:text-white text-black ' : 'dark:text-gray-400 text-gray-500 ') + ' hover:text-black dark:hover:text-white dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
-              <FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className={`${selected ? 'text-black dark:text-white' : 'text-gray-400'} mr-2 `}/>{category}({categories[category]})</div>
-          </Link>
-        })}
-      </div>
+    <div id='category-list' className='dark:border-gray-600 dark:bg-gray-900'>
+      {Object.keys(categories).map(category => {
+        const selected = currentCategory === category
+        return <Link key={category} href={`/category/${category}`} passHref>
+          <div className={(selected
+            ? 'bg-gray-200 dark:bg-black text-black dark:text-white'
+            : 'dark:text-gray-400 text-gray-500') +
+            ' duration-300 hover:text-black dark:hover:text-white hover:underline px-5 cursor-pointer py-2'}>
+            <FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className={`${selected ? 'text-black dark:text-white' : 'text-gray-400'} mr-2 `} />{category}({categories[category]})</div>
+        </Link>
+      })}
     </div>
+  </div>
 }
 
 export default CategoryGroup
diff --git a/components/CategoryList.js b/components/CategoryList.js
index 3e242698..00bee60f 100644
--- a/components/CategoryList.js
+++ b/components/CategoryList.js
@@ -17,7 +17,7 @@ const CategoryList = ({ currentCategory, categories }) => {
             className={`cursor-pointer border rounded-xl duration-200 mr-1 my-1 px-2 py-1 font-medium font-light text-sm whitespace-nowrap dark:text-gray-300 
                  ${selected
                 ? 'text-white bg-black dark:hover:bg-gray-900 dark:bg-black dark:border-gray-800'
-                : 'bg-gray-100 text-gray-600 hover:bg-gray-300 dark:bg-gray-600 dark:border-gray-600'
+                : 'bg-gray-100 text-gray-600 hover:bg-gray-300 dark:hover:bg-gray-700 dark:bg-gray-600 dark:border-gray-600'
               }`}
           >
             <a>
diff --git a/components/LatestPostsGroup.js b/components/LatestPostsGroup.js
index ef64f438..338f5893 100644
--- a/components/LatestPostsGroup.js
+++ b/components/LatestPostsGroup.js
@@ -9,7 +9,7 @@ import { useRouter } from 'next/router'
  * @param sliceCount 截取展示的数量 默认6
  * @constructor
  */
-const LatestPostsGroup = ({ posts, sliceCount = 6 }) => {
+const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
   // 深拷贝
   let postsSortByDate = Object.create(posts)
 
@@ -31,8 +31,7 @@ const LatestPostsGroup = ({ posts, sliceCount = 6 }) => {
         const selected = currentPath === `${BLOG.path}/article/${post.slug}`
         return (
           <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
-            <div
-              className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' leading-5 py-1.5 px-5 flex'}>
+            <div className={(selected ? 'bg-gray-200 dark:bg-black ' : '') + ' leading-5 py-1 px-5 flex'}>
               <div className='mr-2 text-gray-500 text-xs leading-5'>
                 {formatDateFmt(post.lastEditedTime, 'MM/dd')}
               </div>
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index a22ee1e8..857b2779 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -3,14 +3,15 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faHome, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+import { faArchive, faHome, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
 
 const MenuButtonGroup = ({ allowCollapse = false }) => {
   const { locale } = useGlobal()
   const router = useRouter()
   const links = [
     { id: 0, icon: faHome, name: locale.NAV.INDEX, to: '/' || '/', show: true },
-    { id: 1, icon: faInfoCircle, name: locale.NAV.ABOUT, to: '/article/about', show: true }
+    { id: 1, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', show: true },
+    { id: 2, icon: faInfoCircle, name: locale.NAV.ABOUT, to: '/article/about', show: true }
     // { id: 7, icon: 'faGithub', name: 'Github', to: 'https://github.com/tangly1024', show: true },
     // { id: 5, icon: 'faWeibo', name: '微博', to: 'https://weibo.com/tangly1024', show: true },
     // { id: 4, icon: 'faEnvelope', name: locale.NAV.MAIL, to: 'mailto:tlyong1992@hotmail.com', show: true }
@@ -26,8 +27,8 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
         if (link.show) {
           const selected = router.asPath === link.to
           return <Link key={link.id + link.icon} title={link.to} href={link.to} >
-            <a className={'py-2 px-5 hover:text-black dark:hover:text-white hover:bg-gray-100 cursor-pointer dark:hover:bg-gray-600 duration-100 flex flex-nowrap align-middle' +
-              (selected ? 'bg-gray-200 dark:bg-black dark:text-white text-black ' : '')} >
+            <a className={'py-2 px-5 hover:text-black dark:hover:text-white hover:bg-gray-100 cursor-pointer dark:hover:bg-gray-600 duration-100 flex flex-nowrap align-middle ' +
+              (selected ? 'font-bold bg-gray-200 dark:bg-black dark:text-white text-black ' : '')} >
               <div className='my-auto w-5 justify-center flex'>
                 <FontAwesomeIcon icon={link.icon} />
               </div>
diff --git a/components/SideBar.js b/components/SideBar.js
index 66f28ef1..c8201b00 100644
--- a/components/SideBar.js
+++ b/components/SideBar.js
@@ -43,14 +43,9 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
 
       {/* 最新文章 */}
       {posts && (
-        <section className='mt-12'>
+        <section className='mt-4'>
           <div className='text-sm py-2 px-5  flex flex-nowrap justify-between'>
             <div className='font-bold text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faArchive} className='mr-4' />{locale.COMMON.LATEST_POSTS}</div>
-            <Link href='/archive' passHref>
-              <div className='text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
-                {locale.COMMON.MORE} <FontAwesomeIcon icon={faAngleDoubleRight} />
-              </div>
-            </Link>
           </div>
           <LatestPostsGroup posts={posts} />
         </section>
@@ -58,7 +53,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
 
       {/* 分类  */}
       {categories && (
-        <section className='mt-12'>
+        <section className='mt-8'>
           <div className='text-sm py-2 px-5  flex flex-nowrap justify-between'>
             <div className='font-bold text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-4' />{locale.COMMON.CATEGORY}</div>
             <Link href='/category' passHref>
@@ -73,7 +68,7 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
 
       {/* 标签云  */}
       {tags && (
-        <section className='mt-12'>
+        <section className='mt-8'>
           <div className='text-sm py-2 px-5 flex flex-nowrap justify-between'>
             <div className='text-gray-600 font-bold dark:text-gray-200'><FontAwesomeIcon icon={faTags} className='mr-4' />{locale.COMMON.TAGS}</div>
             <Link href='/tag' passHref>
@@ -96,10 +91,11 @@ const SideBar = ({ tags, currentTag, post, posts, categories, currentCategory, c
           {locale.COMMON.TABLE_OF_CONTENTS}
         </div>
         <Toc toc={post.toc} />
+
       </section>
     )}
 
-    <section id='blank' className='bg-white dark:bg-gray-800 py-20' />
+    <section id='blank' className='bg-white dark:bg-gray-900 py-20' />
 
   </aside>
 }
diff --git a/components/TagGroups.js b/components/TagGroups.js
index 45ea3c33..2d955e19 100644
--- a/components/TagGroups.js
+++ b/components/TagGroups.js
@@ -10,7 +10,7 @@ import TagItemMini from '@/components/TagItemMini'
 const TagGroups = ({ tags, currentTag }) => {
   if (!tags) return <></>
   return (
-    <div id='tags-group' className='dark:border-gray-600 dark:bg-gray-800 w-66'>
+    <div id='tags-group' className='dark:border-gray-600 w-66'>
       {
         tags.map(tag => {
           const selected = tag.name === currentTag
diff --git a/components/Toc.js b/components/Toc.js
index 92280e14..f04b0769 100644
--- a/components/Toc.js
+++ b/components/Toc.js
@@ -50,7 +50,7 @@ const Toc = ({ toc }) => {
     setActiveSection(currentSectionId)
   }, throttleMs))
 
-  return <div className='dark:bg-gray-800 bg-white'>
+  return <div className='dark:bg-gray-900 bg-white'>
     <nav className='text-gray-500 dark:text-gray-400 overflow-y-auto scroll-hidden p-2'>
       {toc.map((tocItem) => {
         const id = uuidToId(tocItem.id)
diff --git a/pages/article/[slug].js b/pages/article/[slug].js
index c0960674..7a94f7b2 100644
--- a/pages/article/[slug].js
+++ b/pages/article/[slug].js
@@ -62,7 +62,31 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
 
         <div className='animate__fadeIn animate__animated subpixel-antialiased w-screen md:w-full lg:pt-32 lg:px-44 px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
           {/* 文章Title */}
-          <h1 className='font-bold text-4xl pt-5 text-black dark:text-white italic'> {post.title}</h1>
+          <h1 className='font-bold text-3xl pt-5 text-black dark:text-white italic'> {post.title}</h1>
+          <hr className='mt-4' />
+          <div className='flex-nowrap flex  mt-1 dark:text-white'>
+            <Link href={`/category/${post.category}`} passHref>
+              <div className='cursor-pointer text-md py-2 ml-1 mr-3 text-gray-500 dark:text-gray-300 hover:text-black dark:hover:text-white'>
+                <FontAwesomeIcon icon={faFolderOpen} className='mr-1' />{post.category}
+              </div>
+            </Link>
+            {post.type[0] !== 'Page' && (
+              <Link href='/archive' passHref>
+                <div className='pl-1 cursor-pointer hover:text-gray-700  dark:hover:text-gray-200 text-gray-400 dark:text-gray-400 leading-10'>
+                  {formatDate(
+                    post?.date?.start_date || post.createdTime,
+                    BLOG.lang
+                  )}
+                </div>
+              </Link>
+            )}
+
+            {/* 不蒜子 */}
+            <div id='busuanzi_container_page_pv' className='hidden'>
+              <FontAwesomeIcon icon={faEye} className='text-gray-500 dark:text-gray-400 mt-3 ml-2' />
+              &nbsp;<span id='busuanzi_value_page_pv' className='text-gray-500 dark:text-gray-400 leading-6'></span>
+            </div>
+          </div>
 
           {/* Notion文章主体 */}
           {blockMap && (
@@ -76,18 +100,18 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
             />
           )}
 
+          {/* 推荐文章 */}
+          <RecommendPosts currentPost={post} totalPosts={allPosts} />
+
           {/* 版权声明 */}
           <section className='text-sm overflow-auto dark:bg-gray-800 dark:text-gray-300 bg-gray-100 p-5 leading-8 border-l-4 border-red-500'>
             <ul>
-              <li>本文作者: {BLOG.author}</li>
-              <li>本文链接: <a href={url}>{url}</a></li>
+              <li>本文作者: <Link href='/article/about'><a className='hover:underline'>{BLOG.author}</a></Link></li>
+              <li>本文链接: <a className='hover:underline' href={url}>{url}</a></li>
               <li>版权声明: 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！</li>
             </ul>
           </section>
 
-          {/* 推荐文章 */}
-          <RecommendPosts currentPost={post} totalPosts={allPosts} />
-
           {/* 标签列表 */}
           <section className='md:flex md:justify-between'>
             {post.tagItems && (
@@ -103,28 +127,6 @@ const ArticleDetail = ({ post, blockMap, tags, prev, next, allPosts, categories
             </div>
           </section>
 
-          <div className='flex-nowrap flex  mt-1 dark:text-white'>
-            <Link href={`/category/${post.category}`} passHref>
-              <div className='cursor-pointer text-md py-2 ml-1 mr-3 text-gray-500 dark:text-gray-300 hover:text-black dark:hover:text-white'>
-                <FontAwesomeIcon icon={faFolderOpen} className='mr-1' />{post.category}
-              </div>
-            </Link>
-            {post.type[0] !== 'Page' && (
-              <div className='pl-1 text-gray-400 dark:text-gray-300 leading-10'>
-                {formatDate(
-                  post?.date?.start_date || post.createdTime,
-                  BLOG.lang
-                )}
-              </div>
-            )}
-
-            {/* 不蒜子 */}
-            <div id='busuanzi_container_page_pv' className='hidden'>
-              <FontAwesomeIcon icon={faEye} className='text-gray-500 dark:text-gray-400 mt-3 ml-2' />
-              &nbsp;<span id='busuanzi_value_page_pv' className='text-gray-500 dark:text-gray-400 leading-6'></span>
-            </div>
-          </div>
-
         </div>
 
         <div className='w-screen md:w-full px-5 py-2 dark:border-gray-700 bg-white dark:bg-gray-800'>
diff --git a/pages/category/index.js b/pages/category/index.js
index ab4603cb..34d25564 100644
--- a/pages/category/index.js
+++ b/pages/category/index.js
@@ -17,16 +17,17 @@ export default function Category ({ tags, allPosts, categories }) {
   }
   return <BaseLayout meta={meta} totalPosts={allPosts} tags={tags}>
     <div className='flex-grow bg-gray-200 dark:bg-black shadow-inner p-2 lg:px-14'>
-    <div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'>
-      <div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faThList} className='mr-4'/>{locale.COMMON.CATEGORY}:</div>
-      <div id='category-list' className='duration-200 flex flex-wrap'>
-        {Object.keys(categories).map(category => {
-          return <Link key={category} href={`/category/${category}`} passHref>
-            <div className={'hover:text-black dark:hover:text-white dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
-              <FontAwesomeIcon icon={faFolder} className='mr-4'/>{category}({categories[category]})</div>
-          </Link>
-        })}      </div>
-    </div>
+      <div className='bg-white dark:bg-gray-700 px-10 py-10 mt-20 lg:mt-16'>
+        <div className='dark:text-gray-200 mb-5'><FontAwesomeIcon icon={faThList} className='mr-4' />{locale.COMMON.CATEGORY}:</div>
+        <div id='category-list' className='duration-200 flex flex-wrap'>
+          {Object.keys(categories).map(category => {
+            return <Link key={category} href={`/category/${category}`} passHref>
+              <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'}>
+                <FontAwesomeIcon icon={faFolder} className='mr-4' />{category}({categories[category]})</div>
+            </Link>
+          })}
+        </div>
+      </div>
     </div>
   </BaseLayout>
 }