diff --git a/themes/matery/LayoutSlug.js b/themes/matery/LayoutSlug.js
index 862a4225..0e0f1cb3 100644
--- a/themes/matery/LayoutSlug.js
+++ b/themes/matery/LayoutSlug.js
@@ -45,7 +45,8 @@ export const LayoutSlug = props => {
       showTag={false}
       floatSlot={floatSlot}
     >
-      <div className="-mt-32 rounded-md mx-3 lg:shadow-sm lg:hover:shadow lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
+     <div>
+     <div className="-mt-32 rounded-md mx-3 lg:shadow-sm lg:hover:shadow lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
         {lock && <ArticleLock validPassword={validPassword} />}
 
         {!lock && <div id="container" className="overflow-x-auto flex-grow md:w-full ">
@@ -81,9 +82,10 @@ export const LayoutSlug = props => {
       </div>
 
       <div className='px-3'>
-      {post.type === 'Post' && <ArticleAdjacent {...props} /> }
+         {post.type === 'Post' && <ArticleAdjacent {...props} /> }
       </div>
 
+     </div>
       <div className='block lg:hidden'>
         <TocDrawer post={post} cRef={drawerRight} targetRef={targetRef} />
       </div>
diff --git a/themes/matery/components/ArticleAdjacent.js b/themes/matery/components/ArticleAdjacent.js
index 34dfc921..9430ed2b 100644
--- a/themes/matery/components/ArticleAdjacent.js
+++ b/themes/matery/components/ArticleAdjacent.js
@@ -10,14 +10,10 @@ export default function ArticleAdjacent ({ prev, next }) {
   if (!prev || !next || !CONFIG_MATERY.ARTICLE_ADJACENT) {
     return <></>
   }
-  return <section className='flex-col space-y-3 text-gray-800 items-center text-xs md:text-sm  justify-between m-1 '>
+  return <section className='flex-col  py-3 space-y-3 text-gray-800 items-center text-xs md:text-sm md:flex md:flex-row md:space-y-0 md:space-x-4 justify-between m-1 '>
 
-    <div>
         <BlogPostCard post={prev}/>
-    </div>
-    <div>
         <BlogPostCard post={next}/>
-    </div>
 
   </section>
 }
diff --git a/themes/matery/components/BlogPostCard.js b/themes/matery/components/BlogPostCard.js
index a9fa5066..afc84fb4 100644
--- a/themes/matery/components/BlogPostCard.js
+++ b/themes/matery/components/BlogPostCard.js
@@ -13,16 +13,14 @@ const BlogPostCard = ({ post, showSummary }) => {
 
                 {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 lg:rounded-r-md lg:rounded-t-none cursor-pointer transform overflow-hidden">
+                        <div className="flex 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 lg:rounded-r-md lg:rounded-t-none transform object-cover duration-500"
+                                className="opacity-50 max-h-52 lg:max-h-72 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>
-
-                            {/* <Image className='hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
                         </div>
                     </Link>
                 )}
diff --git a/themes/matery/components/BlogPostListPage.js b/themes/matery/components/BlogPostListPage.js
index 56b91642..64b77f96 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">
+        <div className="space-y-6 px-4 pt-4 md:grid-cols-3 md:grid">
           {posts.map(post => (
             <BlogPostCard key={post.id} post={post} />
           ))}
diff --git a/themes/matery/components/TopNav.js b/themes/matery/components/TopNav.js
index 6684c3c6..f12f833d 100644
--- a/themes/matery/components/TopNav.js
+++ b/themes/matery/components/TopNav.js
@@ -90,70 +90,70 @@ const TopNav = props => {
   }
 
   const searchDrawerSlot = <>
-    { categories && (
-        <section className='mt-8'>
-          <div className='text-sm flex flex-nowrap justify-between font-light px-2'>
-            <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-th-list' />{locale.COMMON.CATEGORY}</div>
-            <Link href={'/category'} passHref>
-              <a className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
-                {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
-              </a>
-            </Link>
-          </div>
-          <CategoryGroup currentCategory={currentCategory} categories={categories} />
-        </section>
-    ) }
+        {categories && (
+            <section className='mt-8'>
+                <div className='text-sm flex flex-nowrap justify-between font-light px-2'>
+                    <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-th-list' />{locale.COMMON.CATEGORY}</div>
+                    <Link href={'/category'} passHref>
+                        <a className='mb-3 text-gray-400 hover:text-black dark:text-gray-400 dark:hover:text-white hover:underline cursor-pointer'>
+                            {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
+                        </a>
+                    </Link>
+                </div>
+                <CategoryGroup currentCategory={currentCategory} categories={categories} />
+            </section>
+        )}
 
-    { tags && (
-        <section className='mt-4'>
-          <div className='text-sm py-2 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200'>
-            <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-tag'/>{locale.COMMON.TAGS}</div>
-            <Link href={'/tag'} passHref>
-              <a className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
-                {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
-              </a>
-            </Link>
-          </div>
-          <div className='p-2'>
-            <TagGroups tags={tags} currentTag={currentTag} />
-          </div>
-        </section>
-    ) }
+        {tags && (
+            <section className='mt-4'>
+                <div className='text-sm py-2 px-2 flex flex-nowrap justify-between font-light dark:text-gray-200'>
+                    <div className='text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-tag' />{locale.COMMON.TAGS}</div>
+                    <Link href={'/tag'} passHref>
+                        <a className='text-gray-400 hover:text-black  dark:hover:text-white hover:underline cursor-pointer'>
+                            {locale.COMMON.MORE} <i className='fas fa-angle-double-right' />
+                        </a>
+                    </Link>
+                </div>
+                <div className='p-2'>
+                    <TagGroups tags={tags} currentTag={currentTag} />
+                </div>
+            </section>
+        )}
     </>
 
   return (<div id='top-nav'>
-    <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot}/>
+        <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot} />
+
+        {/* 导航栏 */}
+        <div id='sticky-nav' className={'flex justify-center top-0 shadow-black shadow-sm fixed bg-none animate__animated animate__fadeIn dark:bg-hexo-black-gray text-gray-200 w-full z-30 transform duration-200'}>
+            <div className='w-full max-w-6xl flex justify-between items-center px-4 py-2'>
+                {/* 左侧功能 */}
+                <div className='justify-start items-center block lg:hidden '>
+                    <div onClick={toggleMenuOpen} className='w-8 justify-center items-center h-8 cursor-pointer flex lg:hidden'>
+                        {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
+                    </div>
+                </div>
+
+                <div className='flex'>
+                    <Logo {...props} />
+                </div>
+
+                {/* 右侧功能 */}
+                <div className='mr-1 justify-end items-center '>
+                    <div className='hidden lg:flex'> <MenuButtonGroupTop {...props} /></div>
+                    <div className='block lg:hidden'><Link href={'/search'}>
+                        <a><i className='fas fa-search' /></a>
+                    </Link></div>
+                </div>
+            </div>
 
-    {/* 导航栏 */}
-    <div id='sticky-nav' className={'flex justify-center top-0 shadow-black shadow-sm fixed bg-none animate__animated animate__fadeIn dark:bg-hexo-black-gray text-gray-200 w-full z-30 transform duration-200'}>
-      <div className='w-full max-w-6xl flex justify-between items-center px-4 py-2'>
-        {/* 左侧功能 */}
-         <div className='justify-start items-center block lg:hidden '>
-          <div onClick={toggleMenuOpen} className='w-8 justify-center items-center h-8 cursor-pointer flex lg:hidden'>
-          { isOpen ? <i className='fas fa-times'/> : <i className='fas fa-bars'/> }
-          </div>
         </div>
 
-        <div className='flex'>
-         <Logo {...props}/>
-        </div>
+        <SideBarDrawer isOpen={isOpen} onClose={toggleMenuClose}>
+            <SideBar {...props} />
+        </SideBarDrawer>
 
-        {/* 右侧功能 */}
-        <div className='mr-1 justify-end items-center '>
-          <div className='hidden lg:flex'> <MenuButtonGroupTop {...props}/></div>
-          <Link href={'/search'}>
-            <a><i className='fas fa-search'/></a>
-          </Link>
-        </div>
-      </div>
-
-    </div>
-
-    <SideBarDrawer isOpen={isOpen} onClose={toggleMenuClose}>
-        <SideBar {...props}/>
-    </SideBarDrawer>
-
-  </div>)
+    </div>)
 }
 
 export default TopNav