diff --git a/styles/globals.css b/styles/globals.css
index ad85a3a3..fac5bcc0 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -201,8 +201,8 @@ nav {
 }
 
 .next #announcement-content *{
- font-size:12px !important;
- line-height:1.5 !important;
+ font-size:13px !important;
+ line-height:1.7 !important;
 }
 
 /* twikoo 评论区超链接样式 */
diff --git a/styles/notion.css b/styles/notion.css
index f530543a..c309b68b 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -36,7 +36,7 @@
   --notion-yellow_background: rgb(251, 243, 219);
   --notion-orange_background: rgb(250, 235, 221);
   --notion-brown_background: rgb(233, 229, 227);
-  --notion-gray_background: rgb(235, 236, 237);
+  --notion-gray_background: rgb(241 241 239);
   --notion-green_background: rgb(219, 237, 219);
   --notion-default_background: rgba(227, 226, 224);
 
@@ -48,7 +48,7 @@
   --notion-yellow_background_co: rgba(251, 243, 219, 0.3);
   --notion-orange_background_co: rgba(250, 235, 221, 0.3);
   --notion-brown_background_co: rgba(233, 229, 227, 0.3);
-  --notion-gray_background_co: rgba(235, 236, 237, 0.3);
+  --notion-gray_background_co: rgba(241, 241, 239, 0.3);
   --notion-green_background_co: rgba(219, 237, 219, 0.3);
   --notion-default_background_co: rgba(227, 226, 224, 0.3);
 
diff --git a/themes/next/components/Announcement.js b/themes/next/components/Announcement.js
index 6e7cfc45..4d9afc4a 100644
--- a/themes/next/components/Announcement.js
+++ b/themes/next/components/Announcement.js
@@ -14,7 +14,11 @@ const Announcement = ({ post, className }) => {
                 <i className="mr-2 fas fa-bullhorn" />{locale.COMMON.ANNOUNCEMENT}
             </div>
         </div>
-        {post && (<div id="announcement-content">
+        {post && (<div id="announcement-content" data-aos="fade-down"
+                    data-aos-duration="500"
+                    data-aos-delay="200"
+                    data-aos-once="true"
+                    data-aos-anchor-placement="top-bottom">
             <NotionPage post={post} className='text-center ' />
         </div>)}
     </>
diff --git a/themes/next/components/BlogPostCard.js b/themes/next/components/BlogPostCard.js
index 97fe08ad..2fb0c279 100644
--- a/themes/next/components/BlogPostCard.js
+++ b/themes/next/components/BlogPostCard.js
@@ -23,6 +23,10 @@ const BlogPostCard = ({ post, showSummary }) => {
           <Link
             href={`${BLOG.SUB_PATH}/${post.slug}`}
             passHref
+            data-aos="fade-down"
+            data-aos-duration="500"
+            data-aos-once="true"
+            data-aos-anchor-placement="top-bottom"
             className={`cursor-pointer hover:underline text-3xl ${showPreview ? 'text-center' : ''
               } leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
 
@@ -30,10 +34,13 @@ const BlogPostCard = ({ post, showSummary }) => {
 
           </Link>
 
-          <div
-            className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'
-              } flex-wrap dark:text-gray-500 text-gray-400 `}
-          >
+          <div data-aos="fade-down"
+                data-aos-duration="500"
+                data-aos-delay="100"
+                data-aos-once="true"
+                data-aos-anchor-placement="top-bottom"
+                className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-400 `}>
+
             <div>
               {post.category && (
                 <>
@@ -57,6 +64,7 @@ const BlogPostCard = ({ post, showSummary }) => {
                 </Link>
             </div>
             <TwikooCommentCount post={post} className='hover:text-blue-500 dark:hover:text-blue-400 hover:underline text-sm'/>
+
             <div className="hover:text-blue-500 dark:hover:text-blue-400  md:flex-nowrap flex-wrap md:justify-start inline-block">
                 {post.tagItems?.map(tag => (
                   <TagItemMini key={tag.name} tag={tag} />
@@ -65,7 +73,12 @@ const BlogPostCard = ({ post, showSummary }) => {
           </div>
 
           {(!showPreview || showSummary) && !post.results && (
-            <p className="mt-4 mb-24 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
+            <p data-aos="fade-down"
+                data-aos-duration="500"
+                data-aos-delay="100"
+                data-aos-once="true"
+                data-aos-anchor-placement="top-bottom"
+                className="mt-4 mb-12 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
               {post.summary}
             </p>
           )}
@@ -80,7 +93,11 @@ const BlogPostCard = ({ post, showSummary }) => {
           )}
 
           {showPreview && post?.blockMap && (
-            <div className="overflow-ellipsis truncate">
+            <div data-aos="fade-down"
+            data-aos-duration="500"
+            data-aos-delay="100"
+            data-aos-once="true"
+            data-aos-anchor-placement="top-bottom"className="overflow-ellipsis truncate">
               <NotionPage post={post} />
             </div>
           )}
diff --git a/themes/next/components/Card.js b/themes/next/components/Card.js
index d33586b6..a1c507b6 100644
--- a/themes/next/components/Card.js
+++ b/themes/next/components/Card.js
@@ -1,10 +1,6 @@
-const Card = ({ children, headerSlot, className }) => {
-  return <div
-    data-aos="fade-down"
-    data-aos-duration="300"
-    data-aos-once="true"
-    data-aos-anchor-placement="top-bottom"
-    className={className}>
+const Card = (props) => {
+  const { children, headerSlot } = props
+  return <div {...props}>
     <>{headerSlot}</>
     <section className="shadow px-2 py-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200">
         {children}
diff --git a/themes/next/components/Logo.js b/themes/next/components/Logo.js
index d78e523c..dd8caed2 100644
--- a/themes/next/components/Logo.js
+++ b/themes/next/components/Logo.js
@@ -4,12 +4,21 @@ import React from 'react'
 const Logo = props => {
   const { siteInfo, className } = props
   return (
-    <Link href='/' passHref legacyBehavior>
-      <div className={'flex flex-col justify-center items-center cursor-pointer bg-black dark:bg-gray-800 space-y-3 font-bold ' + className}>
-        <div className='font-serif text-xl text-white'> {siteInfo?.title}</div>
-        <div className='text-sm text-gray-300 font-light text-center'> {siteInfo?.description}</div>
-      </div>
-    </Link>
-  );
+        <Link href='/' passHref legacyBehavior>
+            <div className={'flex flex-col justify-center items-center cursor-pointer bg-black dark:bg-gray-800 space-y-3 font-bold ' + className}>
+                <div data-aos="fade-down"
+                    data-aos-duration="500"
+                    data-aos-once="true"
+                    data-aos-anchor-placement="top-bottom"
+                    className='font-serif text-xl text-white'> {siteInfo?.title}</div>
+                <div data-aos="fade-down"
+                    data-aos-duration="500"
+                    data-aos-delay="300"
+                    data-aos-once="true"
+                    data-aos-anchor-placement="top-bottom"
+                    className='text-sm text-gray-300 font-light text-center'> {siteInfo?.description}</div>
+            </div>
+        </Link>
+  )
 }
 export default Logo
diff --git a/themes/next/components/MenuList.js b/themes/next/components/MenuList.js
index 2607fd26..29611728 100644
--- a/themes/next/components/MenuList.js
+++ b/themes/next/components/MenuList.js
@@ -34,7 +34,12 @@ export const MenuList = (props) => {
   return (
         <>
             {/* 大屏模式菜单 */}
-            <nav id='nav' className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 font-sans'>
+            <nav id='nav' data-aos="fade-down"
+                data-aos-duration="500"
+                data-aos-delay="400"
+                data-aos-once="true"
+                data-aos-anchor-placement="top-bottom"
+                className='hidden md:block leading-8 text-gray-500 dark:text-gray-400 font-sans'>
                 {links.map(link => link && link.show && <MenuItemDrop key={link?.to} link={link} />)}
             </nav>
 
diff --git a/themes/next/components/SearchInput.js b/themes/next/components/SearchInput.js
index 0f1e667a..21106e74 100644
--- a/themes/next/components/SearchInput.js
+++ b/themes/next/components/SearchInput.js
@@ -41,11 +41,11 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
     searchInputRef.current.value = ''
     setShowClean(false)
   }
-  function lockSearchInput () {
+  function lockSearchInput() {
     lock = true
   }
 
-  function unLockSearchInput () {
+  function unLockSearchInput() {
     lock = false
   }
   const [showClean, setShowClean] = useState(false)
@@ -61,31 +61,36 @@ const SearchInput = ({ currentTag, currentSearch, cRef }) => {
     }
   }
 
-  return <div className='flex w-full bg-gray-100'>
-  <input
-    ref={searchInputRef}
-    type='text'
-    placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
-    className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
-    onKeyUp={handleKeyUp}
-    onCompositionStart={lockSearchInput}
-    onCompositionUpdate={lockSearchInput}
-    onCompositionEnd={unLockSearchInput}
-    onChange={e => updateSearchKey(e.target.value)}
-    defaultValue={currentSearch || ''}
-  />
+  return <div data-aos="fade-down"
+        data-aos-duration="500"
+        data-aos-delay="200"
+        data-aos-once="true"
+        data-aos-anchor-placement="top-bottom"
+        className='flex w-full bg-gray-100'>
+        <input
+            ref={searchInputRef}
+            type='text'
+            placeholder={currentTag ? `${locale.SEARCH.TAGS} #${currentTag}` : `${locale.SEARCH.ARTICLES}`}
+            className={'outline-none w-full text-sm pl-4 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white'}
+            onKeyUp={handleKeyUp}
+            onCompositionStart={lockSearchInput}
+            onCompositionUpdate={lockSearchInput}
+            onCompositionEnd={unLockSearchInput}
+            onChange={e => updateSearchKey(e.target.value)}
+            defaultValue={currentSearch || ''}
+        />
 
-  <div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'
-    onClick={handleSearch}>
-      <i className={`hover:text-black transform duration-200  text-gray-500 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'}`} />
-  </div>
+        <div className='-ml-8 cursor-pointer float-right items-center justify-center py-2'
+            onClick={handleSearch}>
+            <i className={`hover:text-black transform duration-200  text-gray-500 cursor-pointer fas ${onLoading ? 'fa-spinner animate-spin' : 'fa-search'}`} />
+        </div>
 
-  {(showClean &&
-    <div className='-ml-12 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'>
-      <i className='hover:text-black transform duration-200 text-gray-400 cursor-pointer fas fa-times' onClick={cleanSearch} />
+        {(showClean &&
+            <div className='-ml-12 cursor-pointer dark:bg-gray-600 dark:hover:bg-gray-800 float-right items-center justify-center py-2'>
+                <i className='hover:text-black transform duration-200 text-gray-400 cursor-pointer fas fa-times' onClick={cleanSearch} />
+            </div>
+        )}
     </div>
-    )}
-</div>
 }
 
 export default SearchInput
diff --git a/themes/next/components/SideAreaLeft.js b/themes/next/components/SideAreaLeft.js
index 901f29cc..83f79dc3 100644
--- a/themes/next/components/SideAreaLeft.js
+++ b/themes/next/components/SideAreaLeft.js
@@ -26,14 +26,10 @@ const SideAreaLeft = props => {
   return <aside id='left' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'ml-4' : 'mr-4') + ' hidden lg:block flex-col w-60 z-20 relative'}>
 
         <section
-            data-aos="fade-down"
-            data-aos-duration="300"
-            data-aos-once="false"
-            data-aos-anchor-placement="top-bottom"
             className='w-60'>
             {/* 菜单 */}
             <section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200'>
-                <Logo {...props} className='h-32' />
+                <Logo className='h-32' {...props} />
                 <div className='pt-2 px-2 font-sans'>
                     <MenuList allowCollapse={true} {...props} />
                 </div>
diff --git a/themes/next/components/SideAreaRight.js b/themes/next/components/SideAreaRight.js
index 6376a4f7..d3f7c5f2 100644
--- a/themes/next/components/SideAreaRight.js
+++ b/themes/next/components/SideAreaRight.js
@@ -43,6 +43,7 @@ const SideAreaRight = (props) => {
         </Card>}
 
         <div className="sticky top-0 space-y-4 w-full">
+
             {announcementVisible && <Card>
                 <Announcement post={notice} />
             </Card>}