diff --git a/themes/matery/LayoutBase.js b/themes/matery/LayoutBase.js
index 3931ec60..d226497e 100644
--- a/themes/matery/LayoutBase.js
+++ b/themes/matery/LayoutBase.js
@@ -42,7 +42,7 @@ const LayoutBase = props => {
   }, [show])
 
   return (
-    <div className="bg-hexo-background-gray dark:bg-black w-full overflow-hidden">
+    <div id="outer-wrapper" className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full overflow-hidden">
 
       <CommonHead meta={meta} siteInfo={siteInfo}/>
 
@@ -50,15 +50,9 @@ const LayoutBase = props => {
 
       {headerSlot}
 
-      <main id="wrapper" className="w-full py-8 md:px-8 lg:px-24 min-h-screen">
-        <div
-          id="container-inner"
-          className="pt-14 w-full mx-auto lg:flex lg:space-x-4 justify-center"
-        >
-          <div className="w-full max-w-4xl overflow-x-hidden">
+      <main id="wrapper" className="flex-1 w-full py-8 md:px-8 lg:px-24">
+        <div id="container-inner" className="w-full mx-auto lg:flex lg:space-x-4 justify-center">
             {onLoading ? <LoadingCover /> : children}
-          </div>
-          {/* <SideRight {...props} slot={rightAreaSlot} /> */}
         </div>
       </main>
 
diff --git a/themes/matery/LayoutSlug.js b/themes/matery/LayoutSlug.js
index 327497ac..862a4225 100644
--- a/themes/matery/LayoutSlug.js
+++ b/themes/matery/LayoutSlug.js
@@ -9,7 +9,6 @@ import Comment from '@/components/Comment'
 import NotionPage from '@/components/NotionPage'
 import ArticleAdjacent from './components/ArticleAdjacent'
 import ArticleCopyright from './components/ArticleCopyright'
-import ArticleRecommend from './components/ArticleRecommend'
 import { isBrowser } from '@/lib/utils'
 
 export const LayoutSlug = props => {
@@ -46,10 +45,10 @@ export const LayoutSlug = props => {
       showTag={false}
       floatSlot={floatSlot}
     >
-      <div className="w-full 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 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 mx-auto md:w-full md:px-5 ">
+        {!lock && <div id="container" className="overflow-x-auto flex-grow md:w-full ">
 
           <article itemScope itemType="https://schema.org/Movie" className="subpixel-antialiased" >
             {/* Notion文章主体 */}
@@ -69,20 +68,22 @@ export const LayoutSlug = props => {
             </section>
 
             {post.type === 'Post' && <ArticleCopyright {...props} /> }
-            {post.type === 'Post' && <ArticleRecommend {...props} /> }
-            {post.type === 'Post' && <ArticleAdjacent {...props} /> }
 
           </article>
 
           <hr className='border-dashed' />
 
           {/* 评论互动 */}
-          <div className="duration-200 overflow-x-auto bg-white dark:bg-hexo-black-gray px-3">
+          <div className="duration-200 overflow-x-auto dark:bg-hexo-black-gray px-3">
             <Comment frontMatter={post} />
           </div>
         </div>}
       </div>
 
+      <div className='px-3'>
+      {post.type === 'Post' && <ArticleAdjacent {...props} /> }
+      </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 80732494..34dfc921 100644
--- a/themes/matery/components/ArticleAdjacent.js
+++ b/themes/matery/components/ArticleAdjacent.js
@@ -1,5 +1,5 @@
-import Link from 'next/link'
 import CONFIG_MATERY from '../config_matery'
+import BlogPostCard from './BlogPostCard'
 
 /**
  * 上一篇，下一篇文章
@@ -10,16 +10,14 @@ export default function ArticleAdjacent ({ prev, next }) {
   if (!prev || !next || !CONFIG_MATERY.ARTICLE_ADJACENT) {
     return <></>
   }
-  return <section className='text-gray-800 items-center text-xs md:text-sm flex justify-between m-1 '>
-    <Link href={`/${prev.slug}`} passHref>
-      <a className='py-1  cursor-pointer hover:underline justify-start items-center dark:text-white flex w-full h-full duration-200'>
-        <i className='mr-1 fas fa-angle-left' />{prev.title}
-      </a>
-    </Link>
-    <Link href={`/${next.slug}`} passHref>
-      <a className='py-1 cursor-pointer hover:underline justify-end items-center dark:text-white flex w-full h-full duration-200'>{next.title}
-        <i className='ml-1 my-1 fas fa-angle-right' />
-      </a>
-    </Link>
+  return <section className='flex-col space-y-3 text-gray-800 items-center text-xs md:text-sm  justify-between m-1 '>
+
+    <div>
+        <BlogPostCard post={prev}/>
+    </div>
+    <div>
+        <BlogPostCard post={next}/>
+    </div>
+
   </section>
 }
diff --git a/themes/matery/components/ArticleRecommend.js b/themes/matery/components/ArticleRecommend.js
index eb4c4314..428b7afa 100644
--- a/themes/matery/components/ArticleRecommend.js
+++ b/themes/matery/components/ArticleRecommend.js
@@ -9,6 +9,8 @@ import { useGlobal } from '@/lib/global'
  * @returns
  */
 export default function ArticleRecommend({ recommendPosts, siteInfo }) {
+  const { locale } = useGlobal()
+
   if (
     !CONFIG_MATERY.ARTICLE_RECOMMEND ||
     !recommendPosts ||
@@ -16,7 +18,7 @@ export default function ArticleRecommend({ recommendPosts, siteInfo }) {
   ) {
     return <></>
   }
-  const { locale } = useGlobal()
+
   return (
     <div className="p-2">
       <div className=" mb-2 px-1 flex flex-nowrap justify-between">
diff --git a/themes/matery/components/BlogPostListPage.js b/themes/matery/components/BlogPostListPage.js
index b7997236..56b91642 100644
--- a/themes/matery/components/BlogPostListPage.js
+++ b/themes/matery/components/BlogPostListPage.js
@@ -1,5 +1,4 @@
 import BlogPostCard from './BlogPostCard'
-import PaginationNumber from './PaginationNumber'
 import BLOG from '@/blog.config'
 import BlogPostListEmpty from './BlogPostListEmpty'
 import PaginationSimple from './PaginationSimple'
@@ -20,6 +19,7 @@ const BlogPostListPage = ({ page = 1, posts = [], postCount }) => {
   } else {
     return (
       <div id="container" className='w-full'>
+        <div className='pt-6'></div>
         {/* 文章列表 */}
         <div className="space-y-6 px-4 pt-4">
           {posts.map(post => (
diff --git a/themes/matery/components/HeaderArticle.js b/themes/matery/components/HeaderArticle.js
index 8ebfe2bd..984dc314 100644
--- a/themes/matery/components/HeaderArticle.js
+++ b/themes/matery/components/HeaderArticle.js
@@ -1,69 +1,20 @@
-import Link from 'next/link'
-import { useGlobal } from '@/lib/global'
-import formatDate from '@/lib/formatDate'
-import BLOG from '@/blog.config'
-
 export default function HeaderArticle({ post, siteInfo }) {
-  const { locale } = useGlobal()
-
   if (!post) {
     return <></>
   }
   const headerImage = post?.page_cover ? `url("${post.page_cover}")` : `url("${siteInfo?.pageCover}")`
-
-  const date = formatDate(
-    post?.date?.start_date || post?.createdTime,
-    locale.LOCALE
-  )
-
   return (
     <div
       id="header"
-      className="w-full h-96 relative md:flex-shrink-0 overflow-hidden bg-cover bg-center bg-no-repeat animate__animated animate__fadeIn"
+      className="w-full h-80 md:flex-shrink-0 bg-cover bg-center bg-no-repeat"
       style={{ backgroundImage: headerImage }}
     >
-      <header className="animate__slideInDown animate__animated bg-black bg-opacity-70 absolute top-0 w-full h-96 py-10 flex justify-center items-center ">
-        <div className='mt-24'>
-          {/* 文章Title */}
-          <div className="font-bold text-xl shadow-text flex justify-center text-center text-white dark:text-white ">
-            {post.title}
-          </div>
-
-          <section className="flex-wrap shadow-text flex text-sm justify-center mt-2 text-white dark:text-gray-400 font-light leading-8">
-            <div className='dark:text-gray-200'>
-              {post.category && <>
-                <Link href={`/category/${post.category}`} passHref>
-                  <div className="cursor-pointer mr-2 dark:hover:text-white hover:underline">
-                    <i className="mr-1 fas fa-folder-open" />
-                    {post.category}
-                  </div>
-                </Link>
-              </>}
+         <div className="flex flex-col h-80 justify-center ">
+             {/* 文章Title */}
+             <div className="font-bold text-xl shadow-text flex justify-center text-center text-white dark:text-white ">
+                {post.title}
             </div>
-            <div className='flex justify-center'>
-              {post?.type !== 'Page' && (
-                <>
-                  <Link
-                    href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
-                    passHref
-                  >
-                    <a className="pl-1 mr-2 cursor-pointer hover:underline">
-                      {locale.COMMON.POST_TIME}: {date}
-                    </a>
-                  </Link>
-                </>
-              )}
-              <div className="pl-1 mr-2">
-                {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
-              </div>
-            </div>
-            {BLOG.ANALYTICS_BUSUANZI_ENABLE && <div className="busuanzi_container_page_pv font-light mr-2">
-              <span className="mr-2 busuanzi_value_page_pv" />
-              {locale.COMMON.VIEWS}
-            </div>}
-          </section>
-        </div>
-      </header>
+         </div>
     </div>
   )
 }
diff --git a/themes/matery/components/PaginationSimple.js b/themes/matery/components/PaginationSimple.js
index 21e6697e..38196ab2 100644
--- a/themes/matery/components/PaginationSimple.js
+++ b/themes/matery/components/PaginationSimple.js
@@ -29,8 +29,8 @@ const PaginationSimple = ({ page, totalPage }) => {
         <button
           rel="prev"
           className={`${
-            currentPage === 1 ? ' bg-gray-300  text-gray-500 pointer-events-none ' : 'block bg-indigo-700'
-          } duration-200 px-4 py-2 hover:border-black rounded-full`} >
+            currentPage === 1 ? ' bg-gray-300  text-gray-500 pointer-events-none ' : 'block text-white bg-indigo-700'
+          } duration-200 px-3.5 py-2 hover:border-black rounded-full`} >
           <i className='fas fa-angle-left text-2xl'/>
         </button>
       </Link>