diff --git a/themes/Hexo/LayoutSlug.js b/themes/Hexo/LayoutSlug.js
index 87c69bee..ceb7322b 100644
--- a/themes/Hexo/LayoutSlug.js
+++ b/themes/Hexo/LayoutSlug.js
@@ -53,7 +53,7 @@ export const LayoutSlug = props => {
       showTag={false}
       floatSlot={floatSlot}
     >
-      <div className="w-full lg:shadow-xl lg:hover:shadow-2xl lg:border lg:border-gray-100 lg:rounded-xl lg:px-2 lg:py-4 lg:bg-white lg:dark:bg-gray-800 lg:duration-300">
+      <div className="w-full lg:shadow-md lg:hover:shadow-2xl lg:border lg:border-gray-100 lg:rounded-xl lg:px-2 lg:py-4 lg:bg-white lg:dark:bg-gray-800 lg:duration-300">
         <ArticleDetail {...props} />
       </div>
 
diff --git a/themes/Hexo/components/Card.js b/themes/Hexo/components/Card.js
index 61feccfd..8cb8123c 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="shadow-xl hover:shadow-2xl border border-gray-100 rounded-xl px-2 py-4 bg-white dark:bg-gray-800 duration-300">
+    <section className="shadow-md hover:shadow-2xl border border-gray-100 rounded-xl px-2 py-4 bg-white dark:bg-gray-800 duration-300">
         {children}
     </section>
   </div>
diff --git a/themes/Hexo/components/Catalog.js b/themes/Hexo/components/Catalog.js
index 540c0d75..59942526 100644
--- a/themes/Hexo/components/Catalog.js
+++ b/themes/Hexo/components/Catalog.js
@@ -53,7 +53,7 @@ const Catalog = ({ toc }) => {
 
   return <div className='px-3'>
     <div className='w-full'><i className='mr-1 fas fa-stream' /> 目录</div>
-    <div className='w-full py-1'>
+    <div className='w-full py-3'>
       <Progress/>
     </div>
     <nav className='font-sans overflow-y-auto scroll-hidden text-black'>
diff --git a/themes/Hexo/components/LatestPostsGroup.js b/themes/Hexo/components/LatestPostsGroup.js
index c7e4ebd9..2ba9e2bb 100644
--- a/themes/Hexo/components/LatestPostsGroup.js
+++ b/themes/Hexo/components/LatestPostsGroup.js
@@ -25,9 +25,9 @@ const LatestPostsGroup = ({ posts }) => {
         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={ 'my-1  flex font-light'}>
-              <div className={ (selected ? 'text-white  bg-blue-600 ' : 'text-gray-500 dark:text-gray-400 ') + ' text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-blue-600 px-2 duration-200 w-full ' +
-                'hover:text-white dark:hover:text-white cursor-pointer' }>
+            <a className={ 'my-1 mx-5 flex font-light'}>
+              <div className={ (selected ? 'text-white  bg-blue-400 ' : 'text-gray-500 dark:text-gray-400 ') + ' text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-blue-400 px-2 duration-200 w-full rounded ' +
+                'hover:text-white dark:hover:text-white cursor-pointer items-center'}>
                 <i className='mr-2 fas fa-file-alt'/>
                 <div className='truncate'>{post.title}</div>
               </div>
diff --git a/themes/Hexo/components/MenuButtonGroup.js b/themes/Hexo/components/MenuButtonGroup.js
index a761d498..ee93f4a7 100644
--- a/themes/Hexo/components/MenuButtonGroup.js
+++ b/themes/Hexo/components/MenuButtonGroup.js
@@ -25,8 +25,8 @@ const MenuButtonGroup = (props) => {
         if (link.show) {
           const selected = (router.pathname === link.to) || (router.asPath === link.to)
           return <Link key={`${link.id}-${link.to}`} title={link.to} href={link.to} >
-          <a className={'py-1.5 my-1 px-5 duration-300 text-base justify-between hover:bg-blue-600 hover:text-white hover:shadow-lg cursor-pointer flex flex-nowrap items-center ' +
-              (selected ? 'bg-blue-600 text-white' : ' ')} >
+          <a className={'py-1.5 my-1 px-5 duration-300 text-base justify-between hover:bg-blue-400 rounded-md hover:text-white hover:shadow-lg cursor-pointer flex flex-nowrap items-center ' +
+              (selected ? 'bg-blue-400 rounded-md text-white' : ' ')} >
               <div className='my-auto items-center justify-center flex '>
                 <i className={link.icon} />
                 <div className={'ml-4'}>{link.name}</div>
diff --git a/themes/Hexo/components/Progress.js b/themes/Hexo/components/Progress.js
index 8dcde403..9c893459 100644
--- a/themes/Hexo/components/Progress.js
+++ b/themes/Hexo/components/Progress.js
@@ -29,7 +29,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
   return (
     <div className="h-4 w-full shadow-2xl bg-gray-400 font-sans">
       <div
-        className="h-4 bg-blue-600 duration-200"
+        className="h-4 bg-blue-400 duration-200"
         style={{ width: `${percent}%` }}
       >
         {showPercent && (