diff --git a/package.json b/package.json
index e7b1d90c..c6eb0d28 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@popperjs/core": "^2.9.3",
     "animate.css": "^4.1.1",
     "animejs": "^3.2.1",
+    "aos": "^3.0.0-beta.6",
     "axios": ">=0.21.1",
     "copy-to-clipboard": "^3.3.1",
     "eslint-plugin-react-hooks": "^4.6.0",
diff --git a/themes/matery/LayoutBase.js b/themes/matery/LayoutBase.js
index d226497e..14352875 100644
--- a/themes/matery/LayoutBase.js
+++ b/themes/matery/LayoutBase.js
@@ -9,6 +9,8 @@ import Live2D from '@/components/Live2D'
 import LoadingCover from './components/LoadingCover'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
+import AOS from 'aos'
+import 'aos/dist/aos.css' // You can also use <link> for styles
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -41,6 +43,8 @@ const LayoutBase = props => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
 
+  AOS.init()
+
   return (
     <div id="outer-wrapper" className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full overflow-hidden">
 
diff --git a/themes/matery/components/BlogPostCard.js b/themes/matery/components/BlogPostCard.js
index afc84fb4..14e7ccbd 100644
--- a/themes/matery/components/BlogPostCard.js
+++ b/themes/matery/components/BlogPostCard.js
@@ -3,87 +3,85 @@ import Link from 'next/link'
 import React from 'react'
 import TagItemMini from './TagItemMini'
 import CONFIG_MATERY from '../config_matery'
-import NotionPage from '@/components/NotionPage'
 
 const BlogPostCard = ({ post, showSummary }) => {
   const showPreview = CONFIG_MATERY.POST_LIST_PREVIEW && post.blockMap
   return (
-        <div className="w-full drop-shadow-md hover:shadow border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray duration-500  hover:scale-105">
-            <div key={post.id} className="flex flex-col justify-between ">
+        <div
+            data-aos="fade-up"
+            data-aos-offset="10"
+            data-aos-delay="50"
+            data-aos-duration="600"
+            data-aos-easing="ease-in-out"
+            data-aos-mirror="true"
+            data-aos-once="false"
+            data-aos-anchor-placement="top-center"
+            className="w-full mb-4 drop-shadow-md hover:shadow border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray duration-500  hover:scale-105">
 
+            {/* 固定高度72 ，没有描述用图片填充 */}
+            <div key={post.id} className="flex flex-col justify-between h-96">
+
+                {/* 头部图片 填充卡片 */}
                 {CONFIG_MATERY.POST_LIST_COVER && !showPreview && post?.page_cover && !post.results && (
                     <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref>
-                        <div className="flex w-full relative duration-200 bg-black rounded-t-md  cursor-pointer transform overflow-hidden">
+                        <div className="flex flex-grow w-full relative duration-200 bg-black rounded-t-md  cursor-pointer transform overflow-hidden">
                             {/* eslint-disable-next-line @next/next/no-img-element */}
                             <img
                                 src={post?.page_cover}
                                 alt={post.title}
-                                className="opacity-50 max-h-52 lg:max-h-72 w-full hover:scale-125 rounded-t-md  transform object-cover duration-500"
+                                className="opacity-50 h-full w-full hover:scale-125 rounded-t-md  transform object-cover duration-500"
                             />
                             <span className='absolute bottom-0 left-0 text-white p-6 text-2xl' > {post.title}</span>
                         </div>
                     </Link>
                 )}
 
-                {/* 描述 */}
-                <div className="lg:p-8 p-4 flex flex-col w-full">
+                <div>
+                    {/* 描述 */}
+                    <div className="px-4 flex flex-col w-full">
 
-                    {(!showPreview || showSummary) && !post.results && post.summary && (
-                        <p style={{ overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: '4', WebkitBoxOrient: 'vertical' }}
-                            className="replace h-full max-h-32 my-4 text-gray-700  dark:text-gray-300 text-sm font-light leading-7">
-                            {post.summary}
-                        </p>
-                    )}
+                        {(!showPreview || showSummary) && !post.results && post.summary && (
+                            <p style={{ overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', WebkitLineClamp: '4', WebkitBoxOrient: 'vertical' }}
+                                className="replace my-2 text-gray-700  dark:text-gray-300 text-sm font-light leading-7">
+                                {post.summary}
+                            </p>
+                        )}
 
-                    {/* 搜索结果 */}
-                    {post.results && (
-                        <p className="mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
-                            {post.results.map(r => (
-                                <span key={r}>{r}</span>
-                            ))}
-                        </p>
-                    )}
-
-                    {showPreview && (
-                        <div className="overflow-ellipsis truncate">
-                            <NotionPage post={post} />
+                        <div className='text-gray-800 justify-between flex my-2'>
+                            <Link
+                                href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
+                                passHref
+                            >
+                                <a className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
+                                    <i className="far fa-clock mr-1" />
+                                    {post.date?.start_date || post.lastEditedTime}
+                                </a>
+                            </Link>
+                            <Link href={`/category/${post.category}`} passHref>
+                                <a className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
+                                    <i className="mr-1 far fa-folder" />
+                                    {post.category}
+                                </a>
+                            </Link>
                         </div>
-                    )}
-
-                    <div className='text-gray-800 justify-between flex'>
-                        <Link
-                            href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
-                            passHref
-                        >
-                            <a className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
-                                <i className="far fa-clock mr-1" />
-                                {post.date?.start_date || post.lastEditedTime}
-                            </a>
-                        </Link>
-                        <Link href={`/category/${post.category}`} passHref>
-                            <a className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
-                                <i className="mr-1 far fa-folder" />
-                                {post.category}
-                            </a>
-                        </Link>
                     </div>
-                </div>
 
-                {post?.tagItems && post?.tagItems.length > 0 && (<>
-                    <hr />
-                    <div className="text-gray-400 justify-between flex px-5 py-3">
-                        <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
-                            <div>
-                                {' '}
-                                {post.tagItems.map(tag => (
-                                    <TagItemMini key={tag.name} tag={tag} />
-                                ))}
+                    {post?.tagItems && post?.tagItems.length > 0 && (<>
+                        <hr />
+                        <div className="text-gray-400 justify-between flex px-5 py-3">
+                            <div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
+                                <div>
+                                    {' '}
+                                    {post.tagItems.map(tag => (
+                                        <TagItemMini key={tag.name} tag={tag} />
+                                    ))}
+                                </div>
                             </div>
                         </div>
-                    </div>
-                </>)}
-
+                    </>)}
+                </div>
             </div>
+
         </div>
   )
 }
diff --git a/themes/matery/components/BlogPostListPage.js b/themes/matery/components/BlogPostListPage.js
index 64b77f96..74ea9903 100644
--- a/themes/matery/components/BlogPostListPage.js
+++ b/themes/matery/components/BlogPostListPage.js
@@ -21,7 +21,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
       <div id="container" className='w-full'>
         <div className='pt-6'></div>
         {/* 文章列表 */}
-        <div className="space-y-6 px-4 pt-4 md:grid-cols-3 md:grid">
+        <div className="px-4 pt-4 xl:columns-3 md:columns-2 pb-12" >
           {posts.map(post => (
             <BlogPostCard key={post.id} post={post} />
           ))}
diff --git a/themes/matery/components/SideBar.js b/themes/matery/components/SideBar.js
index 1b4f106b..41bd4eb5 100644
--- a/themes/matery/components/SideBar.js
+++ b/themes/matery/components/SideBar.js
@@ -31,8 +31,8 @@ const SideBar = (props) => {
                 <div className='mx-5 pt-6'>
                     {/* eslint-disable-next-line @next/next/no-img-element */}
                     <img src={siteInfo?.icon} className='rounded-full' width={80} alt={BLOG.AUTHOR} />
-                    <div className='text-white text-xl my-1'>{siteInfo.title}</div>
-                    <div className='text-xs my-1 text-gray-300'>{siteInfo.description}</div>
+                    <div className='text-white text-xl my-1'>{siteInfo?.title}</div>
+                    <div className='text-xs my-1 text-gray-300'>{siteInfo?.description}</div>
                 </div>
             </div>
             <nav>