diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js
index 9ad3e3a7..c67e3804 100644
--- a/components/ArticleDetail.js
+++ b/components/ArticleDetail.js
@@ -154,7 +154,7 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
           </article>
 
           {/* 评论互动 */}
-          <div className="mt-5 lg:px-40 hover:shadow-2xl duration-200 shadow-lg w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-700">
+          <div className="mt-5 lg:px-40 hover:shadow-2xl duration-200 shadow w-screen md:w-full overflow-x-auto dark:border-gray-700 bg-white dark:bg-gray-700">
             <Comment frontMatter={post} />
           </div>
       </div>
diff --git a/components/BlogPostCard.js b/components/BlogPostCard.js
index 049fe5ec..a7b0dd0f 100644
--- a/components/BlogPostCard.js
+++ b/components/BlogPostCard.js
@@ -8,7 +8,7 @@ import TagItemMini from './TagItemMini'
 
 const BlogPostCard = ({ post, tags }) => {
   return (
-    <div key={post.id} className='shadow flex xl:flex-row flex-col-reverse justify-between md:hover:shadow-xl duration-300
+    <div key={post.id} className='shadow animate__animated animate__fadeIn flex xl:flex-row flex-col-reverse justify-between md:hover:shadow-xl duration-300
        w-full bg-white dark:bg-gray-800 dark:hover:bg-gray-700 dark:border-gray-600'>
 
       <div className='p-8 flex flex-col justify-between w-full'>
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index aa22cf8a..9d521bc1 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 duration-300 text-base hover:bg-gray-500 hover:text-white hover:shadow-lg cursor-pointer duration-100 font-light flex flex-nowrap items-center ' +
-              (selected ? 'bg-gray-600 text-white ' : ' ')} >
+            <a className={'py-1 my-1 px-5 mx-2 duration-300 text-base hover:bg-gray-500 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
+              (selected ? 'bg-gray-700 text-white ' : ' ')} >
               <div className='my-auto justify-center flex '>
                 <FontAwesomeIcon icon={link.icon} />
               </div>
diff --git a/components/TopNav.js b/components/TopNav.js
index db9666f1..b79663fd 100644
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -16,7 +16,7 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory })
     <SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts} categories={categories} currentCategory={currentCategory}/>
 
     {/* 导航栏 */}
-    <div id='sticky-nav' className='flex fixed lg:relative w-full top-0 z-20 transform duration-500'>
+    <div id='sticky-nav' className='flex animate__animated animate__fadeIn fixed lg:relative w-full top-0 z-20 transform duration-500'>
       <div className='w-full flex justify-between items-center p-4 glassmorphism'>
         {/* 左侧LOGO 标题 */}
         <div className='flex flex-none flex-grow-0'>