diff --git a/components/ThemeSwitch.js b/components/ThemeSwitch.js
index d9d8b9b6..756284b2 100644
--- a/components/ThemeSwitch.js
+++ b/components/ThemeSwitch.js
@@ -15,7 +15,7 @@ export function ThemeSwitch() {
 
   return (<>
         <Draggable>
-            <div id="draggableBox" className="fixed left-1 bottom-20 text-white bg-black z-50 rounded-lg shadow-card">
+            <div id="draggableBox" style={{ left: '10px', top: '90vh' }} className="fixed text-white bg-black z-50 rounded-lg shadow-card">
                 <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> */}
diff --git a/themes/example/components/Nav.js b/themes/example/components/Nav.js
index 5bfb8b2d..edb99ac0 100644
--- a/themes/example/components/Nav.js
+++ b/themes/example/components/Nav.js
@@ -23,7 +23,7 @@ export const Nav = (props) => {
   return (
       <nav className="w-full bg-white md:pt-0 px-6 relative z-20 border-t border-b border-gray-light dark:border-hexo-black-gray dark:bg-black">
             <div className="container mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start">
-                <div className="w-full md:w-2/3 text-center md:text-left py-4 flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
+                <div className="w-full text-center md:text-left py-4 flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
                     {links.map(link => {
                       return link && <Link
                           href={link.to}
@@ -32,7 +32,7 @@ export const Nav = (props) => {
 
                           {link.name}
 
-                      </Link>;
+                      </Link>
                     })}
                 </div>
                 <div className="w-full md:w-1/3 text-center md:text-right">
@@ -40,5 +40,5 @@ export const Nav = (props) => {
                 </div>
             </div>
         </nav>
-  );
+  )
 }
diff --git a/themes/hexo/components/BlogPostCard.js b/themes/hexo/components/BlogPostCard.js
index dd6cabde..df120154 100644
--- a/themes/hexo/components/BlogPostCard.js
+++ b/themes/hexo/components/BlogPostCard.js
@@ -103,7 +103,7 @@ const BlogPostCard = ({ post, showSummary }) => {
         )}
       </div>
     </div>
-  );
+  )
 }
 
 export default BlogPostCard
diff --git a/themes/hexo/components/TopNav.js b/themes/hexo/components/TopNav.js
index 6555a27f..3aa310ee 100644
--- a/themes/hexo/components/TopNav.js
+++ b/themes/hexo/components/TopNav.js
@@ -37,13 +37,13 @@ const TopNav = props => {
       nav && nav.classList.replace('bg-white', 'bg-none')
       nav && nav.classList.replace('text-black', 'text-white')
       nav && nav.classList.replace('border', 'border-transparent')
-      nav && nav.classList.replace('shadow-md', 'shadow-none')
+      nav && nav.classList.replace('drop-shadow-md', 'shadow-none')
       nav && nav.classList.replace('dark:bg-hexo-black-gray', 'transparent')
     } else {
       nav && nav.classList.replace('bg-none', 'bg-white')
       nav && nav.classList.replace('text-white', 'text-black')
       nav && nav.classList.replace('border-transparent', 'border')
-      nav && nav.classList.replace('shadow-none', 'shadow-md')
+      nav && nav.classList.replace('shadow-none', 'drop-shadow-md')
       nav && nav.classList.replace('transparent', 'dark:bg-hexo-black-gray')
     }
 
@@ -127,7 +127,7 @@ const TopNav = props => {
     <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot}/>
 
     {/* 导航栏 */}
-    <div id='sticky-nav' className={'top-0 drop-shadow-md fixed bg-none animate__animated animate__fadeIn dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform duration-200 border-transparent dark:border-transparent'}>
+    <div id='sticky-nav' className={'top-0 shadow-none fixed bg-none dark:bg-hexo-black-gray dark:text-gray-200 text-black w-full z-20 transform transition-all duration-200 border-transparent dark:border-transparent'}>
       <div className='w-full flex justify-between items-center px-4 py-2'>
         <div className='flex'>
          <Logo {...props}/>
diff --git a/themes/matery/LayoutArchive.js b/themes/matery/LayoutArchive.js
index dab9d1ce..49accca0 100644
--- a/themes/matery/LayoutArchive.js
+++ b/themes/matery/LayoutArchive.js
@@ -1,6 +1,7 @@
 import { useEffect } from 'react'
 import BlogPostArchive from './components/BlogPostArchive'
 import Card from './components/Card'
+import HeaderArticle from './components/HeaderArticle'
 import LayoutBase from './LayoutBase'
 
 export const LayoutArchive = (props) => {
@@ -17,8 +18,8 @@ export const LayoutArchive = (props) => {
       }, 300)
     }
   }, [])
-  return <LayoutBase {...props} >
-    <Card className='w-full'>
+  return <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
+    <Card className='w-full -mt-32'>
     <div className="mb-10 pb-20 bg-white md:p-12 p-3 min-h-full dark:bg-hexo-black-gray">
         {Object.keys(archivePosts).map(archiveTitle => (
           <BlogPostArchive
diff --git a/themes/matery/LayoutCategory.js b/themes/matery/LayoutCategory.js
index 7b57c3c0..ab8a2b39 100644
--- a/themes/matery/LayoutCategory.js
+++ b/themes/matery/LayoutCategory.js
@@ -10,7 +10,7 @@ export const LayoutCategory = props => {
   return (
       <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
 
-            <div className='inner-wrapper'>
+            <div id='inner-wrapper' className='w-full'>
 
                 <div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
 
@@ -24,7 +24,7 @@ export const LayoutCategory = props => {
                                       {e.name}({e.count})
                                   </div>
                               </Link>
-                          );
+                          )
                         })}
                     </div>
                 </div>
@@ -34,5 +34,5 @@ export const LayoutCategory = props => {
             </div>
 
         </LayoutBase>
-  );
+  )
 }
diff --git a/themes/matery/LayoutCategoryIndex.js b/themes/matery/LayoutCategoryIndex.js
index ab98d3a4..fffc6ea5 100644
--- a/themes/matery/LayoutCategoryIndex.js
+++ b/themes/matery/LayoutCategoryIndex.js
@@ -8,7 +8,7 @@ export const LayoutCategoryIndex = props => {
   return (
       <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
 
-          <div className='inner-wrapper'>
+          <div id='inner-wrapper' className='w-full'>
 
               <div className="drop-shadow-xl -mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
 
diff --git a/themes/matery/LayoutSearch.js b/themes/matery/LayoutSearch.js
index db528a29..a64f1f2d 100644
--- a/themes/matery/LayoutSearch.js
+++ b/themes/matery/LayoutSearch.js
@@ -40,7 +40,7 @@ export const LayoutSearch = props => {
   return (
       <LayoutBase {...props} currentSearch={currentSearch}>
           {!currentSearch && <>
-              <div className="my-6 px-2 mt-12">
+              <div className="my-6 px-2 mt-12 w-full">
                   <SearchInput cRef={cRef} {...props} />
                   {/* 分类 */}
                   <Card className="w-full mt-4">
diff --git a/themes/matery/LayoutTagIndex.js b/themes/matery/LayoutTagIndex.js
index 1a5c2cc0..7c196f7e 100644
--- a/themes/matery/LayoutTagIndex.js
+++ b/themes/matery/LayoutTagIndex.js
@@ -8,7 +8,7 @@ export const LayoutTagIndex = props => {
   const { locale } = useGlobal()
   return (
         <LayoutBase {...props} headerSlot={<HeaderArticle {...props} />} >
-            <div className='inner-wrapper drop-shadow-xl'>
+            <div id='inner-wrapper' className='w-full drop-shadow-xl'>
 
                 <div className="-mt-32 rounded-md mx-3 px-5 lg:border lg:rounded-xl lg:px-2 lg:py-4 bg-white dark:bg-hexo-black-gray  dark:border-black">
 
diff --git a/themes/matery/components/BlogPostCard.js b/themes/matery/components/BlogPostCard.js
index 0f901a71..447b40d6 100644
--- a/themes/matery/components/BlogPostCard.js
+++ b/themes/matery/components/BlogPostCard.js
@@ -8,8 +8,8 @@ const BlogPostCard = ({ post, showSummary }) => {
   const showPreview = CONFIG_MATERY.POST_LIST_PREVIEW && post.blockMap
   return (
       <div
-          data-aos="fade-up"
-          data-aos-duration="600"
+          data-aos="zoom-in"
+          data-aos-duration="300"
           data-aos-easing="ease-in-out"
           data-aos-once="false"
           data-aos-anchor-placement="top-bottom"
@@ -83,7 +83,7 @@ const BlogPostCard = ({ post, showSummary }) => {
           </div>
 
       </div>
-  );
+  )
 }
 
 export default BlogPostCard
diff --git a/themes/matery/components/TopNav.js b/themes/matery/components/TopNav.js
index c381591e..44d524cb 100644
--- a/themes/matery/components/TopNav.js
+++ b/themes/matery/components/TopNav.js
@@ -34,12 +34,12 @@ const TopNav = props => {
     if (navTransparent) {
       nav && nav.classList.replace('bg-indigo-700', 'bg-none')
       nav && nav.classList.replace('text-black', 'text-white')
-      nav && nav.classList.replace('shadow-sm', 'shadow-none')
+      nav && nav.classList.replace('drop-shadow-xl', 'shadow-none')
       nav && nav.classList.replace('dark:bg-hexo-black-gray', 'transparent')
     } else {
       nav && nav.classList.replace('bg-none', 'bg-indigo-700')
       nav && nav.classList.replace('text-white', 'text-black')
-      nav && nav.classList.replace('shadow-none', 'shadow-sm')
+      nav && nav.classList.replace('shadow-none', 'drop-shadow-xl')
       nav && nav.classList.replace('transparent', 'dark:bg-hexo-black-gray')
     }
 
@@ -126,9 +126,8 @@ const TopNav = props => {
   return (
       <div id='top-nav'>
             <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 id='sticky-nav' className={'flex justify-center top-0 shadow-black shadow-none fixed bg-none dark:bg-hexo-black-gray text-gray-200 w-full z-30 transform transition-all 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 '>