diff --git a/themes/hexo/LayoutBase.js b/themes/hexo/LayoutBase.js
index 27c8e1a9..1f9f458b 100644
--- a/themes/hexo/LayoutBase.js
+++ b/themes/hexo/LayoutBase.js
@@ -33,7 +33,7 @@ const FacebookPage = dynamic(
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, headerSlot, floatSlot, meta, siteInfo } = props
+  const { children, headerSlot, floatSlot, meta, siteInfo, showTag } = props
   const [showFloatButton, switchShow] = useState(false)
   // const [percent, changePercent] = useState(0) // 页面阅读百分比
   const rightAreaSlot = (
diff --git a/themes/hexo/components/Announcement.js b/themes/hexo/components/Announcement.js
index 02270982..695c26a4 100644
--- a/themes/hexo/components/Announcement.js
+++ b/themes/hexo/components/Announcement.js
@@ -7,10 +7,10 @@ const Announcement = ({ post, className }) => {
   const { locale } = useGlobal()
   if (post?.blockMap) {
     return <div className={className}>
-        <section id='announcement-wrapper' className="dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray">
+        <section id='announcement-wrapper' className="dark:text-gray-300 border dark:border-black rounded-xl lg:p-6 p-4 bg-white dark:bg-hexo-black-gray">
             <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div>
             {post && (<div id="announcement-content">
-            <NotionPage post={post} className='' />
+            <NotionPage post={post} className='text-center' />
         </div>)}
         </section>
     </div>
diff --git a/themes/hexo/components/ArticleRecommend.js b/themes/hexo/components/ArticleRecommend.js
index d2354cd3..446dfb9c 100644
--- a/themes/hexo/components/ArticleRecommend.js
+++ b/themes/hexo/components/ArticleRecommend.js
@@ -2,6 +2,7 @@ import Link from 'next/link'
 import CONFIG_HEXO from '../config_hexo'
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
+import TagItemMini from './TagItemMini'
 
 /**
  * 关联推荐文章
@@ -20,7 +21,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
   }
 
   return (
-    <div className="p-2">
+    <div className="pt-8">
       <div className=" mb-2 px-1 flex flex-nowrap justify-between">
         <div className='dark:text-gray-300'>
           <i className="mr-2 fas fa-thumbs-up" />
@@ -46,12 +47,16 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
                 style={{ backgroundImage: headerImage }}
               >
                 <div className="flex items-center justify-center bg-black bg-opacity-60 hover:bg-opacity-10 w-full h-full duration-300 ">
-                  <div className=" text-sm  text-white text-center shadow-text">
-                    <div>
-                      <i className="fas fa-calendar-alt mr-1" />
-                      {post.date?.start_date}
+                  <div className=" text-md text-white text-center shadow-text">
+                    <div className="px-4 font-normal hover:underline">{post.title}</div>
+                    <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
+                        <div>
+                            {' '}
+                            {post.tagItems.map(tag => (
+                                <div className='font-light'>{selected && <i className='mr-1 fa-tag'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
+                            ))}
+                        </div>
                     </div>
-                    <div className="hover:underline">{post.title}</div>
                   </div>
                 </div>
               </div>
diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js
index 56a69368..4725350b 100644
--- a/themes/hexo/components/BlogPostCard.js
+++ b/themes/hexo/components/BlogPostCard.js
@@ -36,7 +36,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                 {showPageCover && (
                     <div className="md:w-5/12 overflow-hidden">
                         <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
-                            <div className='h-56 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.page_cover}')` }} />
+                            <div className='h-56 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${post?.page_cover}&w=800')` }} />
                         </Link>
                     </div>
                 )}
diff --git a/themes/hexo/components/BlogPostCardInfo.js b/themes/hexo/components/BlogPostCardInfo.js
index 88ceaeed..b44dfef3 100644
--- a/themes/hexo/components/BlogPostCardInfo.js
+++ b/themes/hexo/components/BlogPostCardInfo.js
@@ -17,24 +17,24 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
             href={`${BLOG.SUB_PATH}/${post.slug}`}
             passHref
             className={`replace cursor-pointer hover:underline text-2xl ${showPreview ? 'text-center' : ''
-                } leading-tight text-gray-600 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>
+                } leading-tight font-normal text-gray-600 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>
 
             {post.title}
 
         </Link>
 
-        {/* 日期 */}
+        {/* 分类 */}
         <div
             className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'
                 } flex-wrap dark:text-gray-500 text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-400`}
         >
             <Link
-                href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
+                href={`/category/${post.category}`}
                 passHref
-                className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
+                className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
 
-                <i className="far fa-calendar-alt mr-1" />
-                {post.date?.start_date || post.lastEditedTime}
+                <i className="mr-1 far fa-folder" />
+                {post.category}
 
             </Link>
         </div>
@@ -64,17 +64,19 @@ export const BlogPostCardInfo = ({ post, showPreview, showPageCover, showSummary
        </div>
 
        <div>
-         {/* 分类标签 */}
+         {/* 日期标签 */}
          <div className="text-gray-400 justify-between flex">
+            {/* 日期 */}
             <Link
-                href={`/category/${post.category}`}
+                href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
                 passHref
-                className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
+                className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
 
-                <i className="mr-1 far fa-folder" />
-                {post.category}
+                <i className="far fa-calendar-alt mr-1" />
+                {post.date?.start_date || post.lastEditedTime}
 
             </Link>
+
             <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
                 <div>
                     {' '}
diff --git a/themes/hexo/components/Card.js b/themes/hexo/components/Card.js
index c166ffc1..c2db0e49 100644
--- a/themes/hexo/components/Card.js
+++ b/themes/hexo/components/Card.js
@@ -1,7 +1,7 @@
 const Card = ({ children, headerSlot, className }) => {
   return <div className={className}>
     <>{headerSlot}</>
-    <section className="card shadow-md hover:shadow-md dark:text-gray-300 border dark:border-black rounded-xl px-2 py-4 bg-white dark:bg-hexo-black-gray lg:duration-100">
+    <section className="card shadow-md hover:shadow-md dark:text-gray-300 border dark:border-black rounded-xl lg:p-6 p-4 bg-white dark:bg-hexo-black-gray lg:duration-100">
         {children}
     </section>
   </div>
diff --git a/themes/hexo/components/Catalog.js b/themes/hexo/components/Catalog.js
index 1e7d5b40..980be47b 100644
--- a/themes/hexo/components/Catalog.js
+++ b/themes/hexo/components/Catalog.js
@@ -61,7 +61,7 @@ const Catalog = ({ toc }) => {
     return <></>
   }
 
-  return <div className='px-3'>
+  return <div className='px-3 py-1'>
     <div className='w-full'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
     <div className='w-full py-3'>
       <Progress />
@@ -79,7 +79,7 @@ const Catalog = ({ toc }) => {
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}
             >
               <span style={{ display: 'inline-block', marginLeft: tocItem.indentLevel * 16 }}
-                className={`${activeSection === id && ' font-bold text-indigo-400 underline'}`}
+                className={`${activeSection === id && ' font-bold text-indigo-600'}`}
               >
                 {tocItem.text}
               </span>
diff --git a/themes/hexo/components/HeaderArticle.js b/themes/hexo/components/HeaderArticle.js
index 8c0f2a0e..c4b33a6d 100644
--- a/themes/hexo/components/HeaderArticle.js
+++ b/themes/hexo/components/HeaderArticle.js
@@ -3,6 +3,7 @@ import TagItemMini from './TagItemMini'
 import { useGlobal } from '@/lib/global'
 import formatDate from '@/lib/formatDate'
 import BLOG from '@/blog.config'
+import NotionIcon from '@/components/NotionIcon'
 
 export default function HeaderArticle({ post, siteInfo }) {
   const { locale } = useGlobal()
@@ -30,24 +31,25 @@ export default function HeaderArticle({ post, siteInfo }) {
             data-aos-anchor-placement="top-bottom"
             className="bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">
 
-        <div className='mt-24'>
-          {/* 文章Title */}
-          <div className="font-bold text-4xl shadow-text-md flex justify-center text-center text-white dark:text-white ">
-            {post.title}
-          </div>
-
-          <section className="flex-wrap shadow-text-md flex text-sm justify-center mt-2 text-white dark:text-gray-400 font-light leading-8">
-            <div className='dark:text-gray-200'>
+        <div className='mt-10'>
+            <div className='mb-3 flex justify-center'>
               {post.category && <>
                 <Link href={`/category/${post.category}`} passHref legacyBehavior>
-                  <div className="cursor-pointer mr-2 dark:hover:text-white hover:underline">
-                    <i className="mr-1 fas fa-folder-open" />
+                  <div className="cursor-pointer px-2 py-1 mb-2 border rounded-sm dark:border-white text-sm font-medium  text-5xl shadow-text-md text-white">
                     {post.category}
                   </div>
                 </Link>
               </>}
             </div>
-            <div className='flex justify-center dark:text-gray-200'>
+        
+          {/* 文章Title */}
+          <div className="leading-snug font-bold xs:text-4xl sm:text-4xl md:text-5xl md:leading-snug text-4xl shadow-text-md flex justify-center text-center text-white">
+            <NotionIcon icon={post.pageIcon} className='text-4xl mx-1' />{post.title}
+          </div>
+
+          <section className="flex-wrap shadow-text-md flex text-sm justify-center mt-4 text-white dark:text-gray-400 font-light leading-8">
+
+            <div className='flex justify-center dark:text-gray-200 text-opacity-70'>
               {post?.type !== 'Page' && (
                 <>
                   <Link
@@ -71,7 +73,7 @@ export default function HeaderArticle({ post, siteInfo }) {
             </div>}
           </section>
           
-            <div className='my-3'>
+            <div className='mt-4 mb-1'>
                 {post.tagItems && (
                     <div className="flex justify-center flex-nowrap overflow-x-auto">
                         {post.tagItems.map(tag => (
diff --git a/themes/hexo/components/LatestPostsGroup.js b/themes/hexo/components/LatestPostsGroup.js
index e5d02a71..0ba78886 100644
--- a/themes/hexo/components/LatestPostsGroup.js
+++ b/themes/hexo/components/LatestPostsGroup.js
@@ -37,9 +37,9 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
                     title={post.title}
                     href={`${BLOG.SUB_PATH}/${post.slug}`}
                     passHref
-                    className={'my-2 flex'}>
+                    className={'my-3 flex'}>
 
-                    <div className="w-20 h-16 overflow-hidden relative">
+                    <div className="w-20 h-14 overflow-hidden relative">
                           {/* <Image
                             src={headerImage}
                             fill
@@ -49,7 +49,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
                             quality={10}
                             alt={post.title} /> */}
                             {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img src={headerImage} className='object-cover w-full h-full'/>
+                            <img src={`${headerImage}&w=120`} className='object-cover w-full h-full'/>
                     </div>
                     <div
                         className={
diff --git a/themes/hexo/components/Progress.js b/themes/hexo/components/Progress.js
index c54f422b..dbdadd16 100644
--- a/themes/hexo/components/Progress.js
+++ b/themes/hexo/components/Progress.js
@@ -28,9 +28,9 @@ const Progress = ({ targetRef, showPercent = true }) => {
   }, [])
 
   return (
-    <div className="h-4 w-full shadow-2xl bg-gray-400 ">
+    <div className="h-4 w-full shadow-2xl bg-gray-700 rounded-sm">
       <div
-        className="h-4 bg-indigo-400 duration-200"
+        className="h-4 bg-indigo-600 duration-200 rounded-sm"
         style={{ width: `${percent}%` }}
       >
         {showPercent && (
diff --git a/themes/hexo/components/SideBarDrawer.js b/themes/hexo/components/SideBarDrawer.js
index 629889b9..07c122fd 100644
--- a/themes/hexo/components/SideBarDrawer.js
+++ b/themes/hexo/components/SideBarDrawer.js
@@ -39,7 +39,7 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
 
   return <div id='sidebar-wrapper' className={' block md:hidden top-0 ' + className }>
 
-    <div id="sidebar-drawer" className={`${isOpen ? 'mr-0 w-72 visible' : '-mr-72 max-w-side invisible'} bg-gray-50 right-0 top-0 dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full overflow-y-scroll scroll-hidden z-30`}>
+    <div id="sidebar-drawer" className={`${isOpen ? 'mr-0 w-72 visible' : '-mr-72 max-w-side invisible'} bg-gray-50 right-0 top-0 dark:bg-hexo-black-gray shadow-black shadow-lg flex flex-col duration-300 fixed h-full overflow-y-scroll scroll-hidden z-30`}>
       {children}
     </div>
 
diff --git a/themes/hexo/components/TocDrawer.js b/themes/hexo/components/TocDrawer.js
index 7df6d309..13fad1a9 100644
--- a/themes/hexo/components/TocDrawer.js
+++ b/themes/hexo/components/TocDrawer.js
@@ -25,7 +25,7 @@ const TocDrawer = ({ post, cRef }) => {
       <div
         className={(showDrawer ? 'animate__slideInRight ' : ' -mr-72 animate__slideOutRight') +
         ' shadow-card animate__animated animate__faster' +
-        ' w-60 duration-200 fixed right-12 bottom-12 rounded py-2 bg-white dark:bg-gray-600'}>
+        ' w-60 duration-200 fixed right-12 bottom-12 rounded py-2 bg-white dark:bg-gray-900'}>
           {post && <>
            <div className='dark:text-gray-400 text-gray-600'>
              <Catalog toc={post.toc}/>