diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js
index 6f2746ef..57a6cfb8 100644
--- a/components/ArticleDetail.js
+++ b/components/ArticleDetail.js
@@ -54,7 +54,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
                           </div>
                 )}
                 {/* 文章Title */}
-                <h2 className="font-bold text-2xl text-black dark:text-white font-serif pt-10">
+                <h2 className="font-bold text-3xl text-black dark:text-white font-serif pt-10">
                   {' '}
                   {post.title}
                 </h2>
@@ -88,9 +88,9 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
                   </div>
                 </section>
 
-                <section className="px-1 py-2 my-1 text-sm font-light  text-gray-600  dark:text-gray-400">
+                <h2 className="px-1 py-2 my-1 text-md font-light  text-gray-600  dark:text-gray-400">
                   {post.summary}
-                </section>
+                </h2>
 
                 <section className='flex justify-end py-2 pl-1 dark:text-white items-center font-light italic text-sm'>
                     <WordCount/>
@@ -99,7 +99,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
             </header>
 
             {/* Notion文章主体 */}
-            <section id='notion-article' className='overflow-x-auto'>
+            <section id='notion-article' className='overflow-x-auto px-1'>
               {blockMap && (
                 <NotionRenderer
                   className={`${BLOG.font}`}
@@ -164,11 +164,6 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
         <TocDrawerButton onClick={() => { drawerRight.current.handleSwitchVisible() }} />
         <TocDrawer post={post} cRef={drawerRight} targetRef={targetRef} />
       </div>
-
-      {/* 移动端顶部进度条 */}
-      {/* <div className='fixed left-0 top-0 w-full z-40 block md:hidden'>
-        <Progress targetRef={targetRef} />
-      </div> */}
     </>)
 }
 
diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js
index 0a87e6c9..7685b5de 100644
--- a/components/BlogPostCard.js
+++ b/components/BlogPostCard.js
@@ -13,12 +13,12 @@ const BlogPostCard = ({ post, tags }) => {
 
       <div className='p-8 flex flex-col justify-between w-full'>
         <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-          <a className='cursor-pointer text-lg md:text-xl leading-tight text-black dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400'>
+          <a className='cursor-pointer text-xl xl:text-2xl leading-tight text-black dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400'>
             {post.title}
           </a>
         </Link>
 
-        <p className='my-4 text-gray-800 dark:text-gray-300 text-sm font-light'>{post.summary}</p>
+        <p className='my-4 text-gray-800 dark:text-gray-300 text-md font-light'>{post.summary}</p>
 
         <div className='flex items-center justify-between flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 '>
           <div>
@@ -41,7 +41,7 @@ const BlogPostCard = ({ post, tags }) => {
 
       {post?.page_cover && (
         <Link href={`${BLOG.path}/article/${post.slug}`} passHref>
-        <div className='h-60 w-full xl:max-w-sm relative rounded-t-xl xl:rounded-t-none xl:rounded-r-xl xl:h-full duration-200 cursor-pointer transform overflow-hidden'>
+        <div className='h-60 w-full xl:max-w-xs relative rounded-t-xl xl:rounded-t-none xl:rounded-r-xl xl:h-full duration-200 cursor-pointer transform overflow-hidden'>
           <Image className='hover:scale-105 transform duration-500 rounded-t-xl xl:rounded-t-none xl:rounded-r-xl' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
         </div>
       </Link>
diff --git a/components/CategoryGroup.js b/components/CategoryGroup.js
index 7c2759bb..96a4fea8 100644
--- a/components/CategoryGroup.js
+++ b/components/CategoryGroup.js
@@ -10,9 +10,9 @@ const CategoryGroup = ({ currentCategory, categories }) => {
         const selected = currentCategory === category
         return <Link key={category} href={`/category/${category}`} passHref>
           <a className={(selected
-            ? 'hover:text-white bg-blue-500 text-white '
-            : 'dark:text-gray-400 text-gray-500 hover:text-blue-500 ') +
-            '  rounded-xl text-md w-full items-center duration-300 dark:hover:text-blue-400 hover:underline px-3 mx-2 cursor-pointer py-2 font-light'}>
+            ? 'hover:text-white dark:hover:text-white bg-blue-600 text-white '
+            : 'dark:text-gray-400 text-gray-500 hover:text-blue-500 dark:hover:text-blue-400') +
+            '  rounded-xl text-md w-full items-center duration-300  hover:underline px-3 mx-2 cursor-pointer py-2 font-light'}>
             <FontAwesomeIcon icon={selected ? faFolderOpen : faFolder} className={`${selected ? 'text-white' : 'text-gray-400'} mr-2`} />{category}({categories[category]})
             </a>
         </Link>
diff --git a/components/LatestPostsGroup.js b/components/LatestPostsGroup.js
index 5ead6bd2..27b132c8 100644
--- a/components/LatestPostsGroup.js
+++ b/components/LatestPostsGroup.js
@@ -32,7 +32,7 @@ const LatestPostsGroup = ({ posts, sliceCount = 5 }) => {
         const selected = currentPath === `${BLOG.path}/article/${post.slug}`
         return (
           <Link key={post.id} title={post.title} href={`${BLOG.path}/article/${post.slug}`} passHref>
-            <a className={(selected ? 'text-white  bg-blue-500 dark:bg-black ' : 'text-gray-500 dark:text-gray-300 ') + ' my-1 px-5 flex font-light justify-between'}>
+            <a className={(selected ? 'text-white  bg-blue-600 ' : 'text-gray-500 dark:text-gray-300 ') + ' my-1 px-5 flex font-light justify-between'}>
               <div className={ 'text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap overflow-hidden ' +
                 'hover:text-blue-500 dark:hover:text-blue-400 cursor-pointer hover:underline ' }>
                 <FontAwesomeIcon icon={faFileAlt} className='mr-2'/>
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index d6736511..321dee88 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -28,8 +28,8 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
         if (link.show) {
           const selected = (router.pathname === link.to) || (router.asPath === link.to)
           return <Link key={link.id + link.icon} title={link.to} href={link.to} >
-            <a className={'py-1 my-1 px-5 mx-2 rounded-xl hover:bg-blue-400 hover:text-white hover:shadow-lg cursor-pointer duration-100 font-light flex flex-nowrap items-center ' +
-              (selected ? 'bg-blue-500 text-white ' : ' ')} >
+            <a className={'py-1 my-1 px-5 mx-2 rounded-xl hover:bg-blue-500 hover:text-white hover:shadow-lg cursor-pointer duration-100 font-light flex flex-nowrap items-center ' +
+              (selected ? 'bg-blue-600 text-white ' : ' ')} >
               <div className='my-auto justify-center flex '>
                 <FontAwesomeIcon icon={link.icon} />
               </div>
diff --git a/components/Progress.js b/components/Progress.js
index 7a35457f..18e8246a 100644
--- a/components/Progress.js
+++ b/components/Progress.js
@@ -23,9 +23,9 @@ const Progress = ({ targetRef }) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [percent])
 
-  return (<div className='h-4 w-full shadow-2xl bg-purple-400'>
+  return (<div className='h-4 w-full shadow-2xl bg-blue-400'>
         <div className='text-center w-full absolute text-white text-xs'>{percent}%</div>
-        <div className='h-4 bg-purple-700 duration-200 rounded-r' style={{ width: `${percent}%` }}/>
+        <div className='h-4 bg-blue-600 duration-200 rounded-r' style={{ width: `${percent}%` }}/>
       </div>)
 }
 
diff --git a/components/Toc.js b/components/Toc.js
index 5818a16d..35e15f56 100644
--- a/components/Toc.js
+++ b/components/Toc.js
@@ -55,7 +55,7 @@ const Toc = ({ toc, targetRef }) => {
     <div className='w-full'>
       <Progress targetRef={targetRef}/>
     </div>
-    <nav className=' dark:text-gray-100 bg-white dark:bg-gray-800 overflow-y-auto scroll-hidden p-6'>
+    <nav className=' dark:text-gray-300 bg-white dark:bg-gray-800 overflow-y-auto scroll-hidden p-6'>
       {toc.map((tocItem) => {
         const id = uuidToId(tocItem.id)
         return (
@@ -64,7 +64,7 @@ const Toc = ({ toc, targetRef }) => {
             href={`#${id}`}
             className={`notion-table-of-contents-item duration-300 transform font-mono
             notion-table-of-contents-item-indent-level-${tocItem.indentLevel} 
-            ${activeSection === id && ' font-bold text-purple-500 dark:text-purple-400'}`}
+            ${activeSection === id && ' font-bold text-blue-600 dark:text-blue-400'}`}
           >
                       <span
                         style={{
diff --git a/styles/notion.css b/styles/notion.css
index 5af283b3..6ce2d36c 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -68,7 +68,7 @@
 }
 
 .notion {
-  font-size: 16px;
+  font-size: 17px;
   line-height: 1.5;
   color: var(--fg-color);
   caret-color: var(--fg-color);