diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index 4e84f36f..fe9b1de7 100644
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -19,7 +19,7 @@ export function ThemeSwitch() {
                 <div className="p-2 flex items-center">
                     <i className='fas fa-arrows cursor-move px-2' />
                     {/* <div className='uppercase font-sans whitespace-nowrap cursor-pointer ' onClick={switchTheme}> {theme}</div> */}
-                    <select onChange={onSelectChange} name="cars" className='text-white bg-black uppercase'>
+                    <select onChange={onSelectChange} name="cars" className='text-white bg-black uppercase cursor-pointer'>
                         {ALL_THEME.map(t => {
                           const selected = t === theme
                           return <option key={t} value={t} selected={selected}>{t}</option>
diff --git a/themes/matery/LayoutSlug.js b/themes/matery/LayoutSlug.js
index 1eb6e978..db78b172 100644
--- a/themes/matery/LayoutSlug.js
+++ b/themes/matery/LayoutSlug.js
@@ -51,7 +51,13 @@ export const LayoutSlug = props => {
 
                         {!lock && <div id="container" className="overflow-x-auto md:w-full px-3 ">
                             {post?.type === 'Post' && <>
-                                <div className='px-10'>
+                                <div
+                                    data-aos="fade-down"
+                                    data-aos-duration="500"
+                                    data-aos-easing="ease-in-out"
+                                    data-aos-once="false"
+                                    data-aos-anchor-placement="top-center"
+                                    className='px-10'>
                                     <ArticleInfo post={post} />
                                 </div>
                                 <hr />
@@ -60,7 +66,14 @@ export const LayoutSlug = props => {
                             <div className='lg:px-10 '>
                                 <article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased" >
                                     {/* Notion文章主体 */}
-                                    <section id='notion-article' className='justify-center mx-auto max-w-2xl lg:max-w-full'>
+                                    <section id='notion-article'
+                                        data-aos-delay="200"
+                                        data-aos="fade-down"
+                                        data-aos-duration="500"
+                                        data-aos-easing="ease-in-out"
+                                        data-aos-once="false"
+                                        data-aos-anchor-placement="top-center"
+                                        className='justify-center mx-auto max-w-2xl lg:max-w-full'>
                                         {post && <NotionPage post={post} />}
                                     </section>
 
@@ -92,7 +105,13 @@ export const LayoutSlug = props => {
                     {post.type === 'Post' && <ArticleAdjacent {...props} />}
 
                     {post?.toc?.length > 0 && <div id='toc-wrapper' style={{ zIndex: '-1' }} className='absolute top-0 w-full h-full xl:block hidden' >
-                        <div className='relative h-full'>
+                        <div data-aos-delay="200"
+                            data-aos="fade-down"
+                            data-aos-duration="500"
+                            data-aos-easing="ease-in-out"
+                            data-aos-once="false"
+                            data-aos-anchor-placement="top-center"
+                            className='relative h-full'>
                             <div className='float-right -mr-72 h-full mt-40'>
                                 <div className='sticky top-24'>
                                     <Catalog toc={post.toc} />
diff --git a/themes/matery/components/HeaderArticle.js b/themes/matery/components/HeaderArticle.js
index f7c7379d..4b0b2a20 100644
--- a/themes/matery/components/HeaderArticle.js
+++ b/themes/matery/components/HeaderArticle.js
@@ -2,7 +2,13 @@ export default function HeaderArticle({ post, siteInfo }) {
   const headerImage = post?.page_cover ? post?.page_cover : siteInfo?.pageCover
   const title = post?.title
   return (
-        <div id='header' className="flex h-96 justify-center align-middle items-center w-full relative duration-200 bg-black">
+        <div
+            data-aos="fade-down"
+            data-aos-duration="500"
+            data-aos-easing="ease-in-out"
+            data-aos-once="false"
+            data-aos-anchor-placement="top-center"
+            id='header' className="flex h-96 justify-center align-middle items-center w-full relative duration-200 bg-black">
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
                 src={headerImage}