diff --git a/themes/magzine/components/Announcement.js b/themes/magzine/components/Announcement.js
index 62ab01d0..2a72cea0 100644
--- a/themes/magzine/components/Announcement.js
+++ b/themes/magzine/components/Announcement.js
@@ -13,11 +13,11 @@ const Announcement = ({ post, className }) => {
       <div className={className}>
         <section
           id='announcement-wrapper'
-          className='dark:text-gray-300 rounded-xl px-2'>
+          className='rounded-xl px-2'>
           {/* <div><i className='mr-2 fas fa-bullhorn' />{locale.COMMON.ANNOUNCEMENT}</div> */}
           {post && (
             <div id='announcement-content'>
-              <NotionPage post={post} className='' />
+              <NotionPage post={post}/>
             </div>
           )}
         </section>
diff --git a/themes/magzine/components/BannerFullWidth.js b/themes/magzine/components/BannerFullWidth.js
index fadebaa6..a0cf6dd9 100644
--- a/themes/magzine/components/BannerFullWidth.js
+++ b/themes/magzine/components/BannerFullWidth.js
@@ -15,11 +15,11 @@ export default function BannerFullWidth() {
     return null
   }
   return (
-    <div className='w-full flex lg:flex-row flex-col justify-between h-96 bg-black'>
+    <div className='w-full flex lg:flex-row flex-col justify-between lg:h-96 bg-black'>
       <LazyImage
         alt={siteInfo?.title}
         src={siteInfo?.pageCover}
-        className={`banner-cover w-full h-96 object-cover object-center `}
+        className={`banner-cover w-full lg:h-96 object-cover object-center `}
       />
 
       <div className='w-full flex items-center justify-center'>
diff --git a/themes/magzine/components/CategoryGroup.js b/themes/magzine/components/CategoryGroup.js
index 063eb58c..b0592db0 100644
--- a/themes/magzine/components/CategoryGroup.js
+++ b/themes/magzine/components/CategoryGroup.js
@@ -13,7 +13,7 @@ const CategoryGroup = ({ currentCategory, categoryOptions }) => {
   }
   return (
     <div id='category-list' className='pt-4'>
-      <div className='text-lg font-bold mb-2'>{locale.COMMON.CATEGORY}</div>
+      <div className='text-xl font-bold mb-2'>{locale.COMMON.CATEGORY}</div>
       <div className=''>
         {categoryOptions?.map(category => {
           const selected = currentCategory === category.name
diff --git a/themes/magzine/components/Footer.js b/themes/magzine/components/Footer.js
index 4d20657d..37d935bf 100644
--- a/themes/magzine/components/Footer.js
+++ b/themes/magzine/components/Footer.js
@@ -46,7 +46,7 @@ const Footer = ({ title }) => {
             {MAGZINE_FOOTER_LINKS?.map((group, index) => {
               return (
                 <div key={index}>
-                  <div className='font-bold text-lg text-white lg:pb-8 pb-4'>
+                  <div className='font-bold text-xl text-white lg:pb-8 pb-4'>
                     {group.name}
                   </div>
                   <div className='flex flex-col gap-y-2'>
diff --git a/themes/magzine/components/Header.js b/themes/magzine/components/Header.js
index a7c4afde..d93317d1 100644
--- a/themes/magzine/components/Header.js
+++ b/themes/magzine/components/Header.js
@@ -8,6 +8,7 @@ import CONFIG from '../config'
 import LogoBar from './LogoBar'
 import { MenuBarMobile } from './MenuBarMobile'
 import { MenuItemDrop } from './MenuItemDrop'
+import { useMagzineGlobal } from '..'
 
 /**
  * 顶部导航栏 + 菜单
@@ -21,6 +22,7 @@ export default function Header(props) {
   const lastScrollY = useRef(0) // 用于存储上一次的滚动位置
   const { locale } = useGlobal()
   const router = useRouter()
+  const {searchModal} = useMagzineGlobal()
 
   const defaultLinks = [
     {
@@ -119,14 +121,14 @@ export default function Header(props) {
       {/* 导航栏菜单内容 */}
       <div
         id='top-navbar'
-        className='px-2 lg:px-0 flex w-full mx-auto max-w-screen-2xl h-20 transition-all duration-200 items-center justify-between'>
+        className='px-4 lg:px-0 flex w-full mx-auto max-w-screen-2xl h-20 transition-all duration-200 items-center justify-between'>
         {/* 搜索栏 */}
         {showSearchInput && (
           <input
             autoFocus
             id='simple-search'
             onKeyUp={onKeyUp}
-            className='outline-none flex flex-row text-base relative w-full border-b py-2'
+            className='outline-none dark:bg-hexo-black-gray dark:text flex flex-row text-base relative w-full border-b py-2'
             aria-label='Submit search'
             type='search'
             name='s'
@@ -153,7 +155,7 @@ export default function Header(props) {
         )}
 
         {/* 右侧移动端折叠按钮 */}
-        <div className='flex items-center gap-x-2'>
+        <div className='flex items-center gap-x-6'>
           {/* 搜索按钮 */}
           <div className='flex text-center items-center cursor-pointer'>
             <i
diff --git a/themes/magzine/components/PostBannerGroupByCategory.js b/themes/magzine/components/PostBannerGroupByCategory.js
index ee16008c..dda4f2c7 100644
--- a/themes/magzine/components/PostBannerGroupByCategory.js
+++ b/themes/magzine/components/PostBannerGroupByCategory.js
@@ -7,7 +7,7 @@ import PostListHorizontal from './PostListHorizontal'
  * @constructor
  */
 const PostBannerGroupByCategory = props => {
-  const { posts, categoryOptions, allNavPages, latestPosts } = props
+  const { posts, categoryOptions, allNavPages } = props
   if (!posts || posts.length === 0) {
     return null
   }
@@ -52,7 +52,7 @@ function groupArticles(categoryOptions, allPosts) {
     const item = allPosts[i]
     const categoryName = item?.category ? item?.category : '' // 将 category 转换为字符串
 
-    let existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
+    const existingGroup = groups.find(group => group.category === categoryName) // 搜索同名的最后一个分组
 
     if (existingGroup && existingGroup.category === categoryName) {
       // 如果分组已存在，并且该分组中的文章数量小于4，添加文章
diff --git a/themes/magzine/components/PostItemCard.js b/themes/magzine/components/PostItemCard.js
index 6b4f811a..f25874d3 100644
--- a/themes/magzine/components/PostItemCard.js
+++ b/themes/magzine/components/PostItemCard.js
@@ -39,7 +39,7 @@ const PostItemCard = ({ post }) => {
           href={post?.href}
           passHref
           className={
-            'cursor-pointer  hover:underline leading-tight text-gray-700 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-400'
+            'text-lg cursor-pointer hover:underline leading-tight text-gray-700 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-400'
           }>
           <h2>
             {siteConfig('POST_TITLE_ICON') && (
diff --git a/themes/magzine/components/PostListHorizontal.js b/themes/magzine/components/PostListHorizontal.js
index a857af61..5318cf3e 100644
--- a/themes/magzine/components/PostListHorizontal.js
+++ b/themes/magzine/components/PostListHorizontal.js
@@ -15,7 +15,7 @@ const PostListHorizontal = ({ title, href, posts, hasBg }) => {
   }
 
   return (
-    <div className={`w-full py-10 px-2 lg:px-0 ${hasBg ? 'bg-[#F6F6F1]' : ''}`}>
+    <div className={`w-full py-10 px-2 lg:px-0 ${hasBg ? 'bg-[#F6F6F1] dark:bg-black' : ''}`}>
       <div className='max-w-screen-2xl w-full mx-auto'>
         {/* 标题 */}
         <div className='flex justify-between items-center py-6'>
diff --git a/themes/magzine/components/PostListRecommend.js b/themes/magzine/components/PostListRecommend.js
index 84025732..04a4f811 100644
--- a/themes/magzine/components/PostListRecommend.js
+++ b/themes/magzine/components/PostListRecommend.js
@@ -18,7 +18,7 @@ const PostListRecommend = ({ latestPosts, allNavPages }) => {
   const title = siteConfig('MAGZINE_RECOMMEND_POST_TITLE')
 
   return (
-    <div className={`w-full py-10 px-2 bg-[#F6F6F1]`}>
+    <div className={`w-full py-10 px-2 bg-[#F6F6F1] dark:bg-black`}>
       <div className='max-w-screen-2xl w-full mx-auto'>
         {/* 标题 */}
         <div className='flex justify-between items-center py-6'>
diff --git a/themes/magzine/components/PostListSimpleHorizontal.js b/themes/magzine/components/PostListSimpleHorizontal.js
index af1ece3a..8568bfe4 100644
--- a/themes/magzine/components/PostListSimpleHorizontal.js
+++ b/themes/magzine/components/PostListSimpleHorizontal.js
@@ -13,7 +13,7 @@ const PostSimpleListHorizontal = ({ title, href, posts }) => {
   }
 
   return (
-    <div className='w-full py-10 bg-[#F6F6F1]'>
+    <div className='w-full py-10 bg-[#F6F6F1] dark:bg-black'>
       <div className='max-w-screen-2xl w-full mx-auto px-2'>
         {/* 标题 */}
         <div className='flex justify-between items-center py-6'>
diff --git a/themes/magzine/index.js b/themes/magzine/index.js
index 431f8ca8..139617c9 100644
--- a/themes/magzine/index.js
+++ b/themes/magzine/index.js
@@ -8,7 +8,7 @@ import { useGlobal } from '@/lib/global'
 import { isBrowser } from '@/lib/utils'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { createContext, useContext, useEffect, useState } from 'react'
+import { createContext, useContext, useEffect, useRef, useState } from 'react'
 import Announcement from './components/Announcement'
 import ArticleInfo from './components/ArticleInfo'
 import { ArticleLock } from './components/ArticleLock'
@@ -44,15 +44,12 @@ export const useMagzineGlobal = () => useContext(ThemeGlobalMagzine)
  * @constructor
  */
 const LayoutBase = props => {
-  const { children, notice, showInfoCard = true, post } = props
-  const { locale } = useGlobal()
-  const router = useRouter()
+  const { children, notice } = props
   const [tocVisible, changeTocVisible] = useState(false)
-  const { onLoading, fullWidth } = useGlobal()
-  const [slotRight, setSlotRight] = useState(null)
+  const searchModal = useRef(null)
 
   return (
-    <ThemeGlobalMagzine.Provider value={{ tocVisible, changeTocVisible }}>
+    <ThemeGlobalMagzine.Provider value={{ searchModal, tocVisible, changeTocVisible }}>
       {/* CSS样式 */}
       <Style />
 
@@ -71,7 +68,7 @@ const LayoutBase = props => {
             {/* 底部 */}
             <Announcement
               post={notice}
-              className={'text-center text-black bg-[#7BE986] py-16'}
+              className={'text-center text-black bg-[#7BE986] dark:bg-hexo-black-gray py-16'}
             />
             <Footer title={siteConfig('TITLE')} />
           </div>
@@ -89,7 +86,7 @@ const LayoutBase = props => {
  * @returns
  */
 const LayoutIndex = props => {
-  const { posts, categoryOptions, allNavPages, latestPosts } = props
+  const { posts } = props
   // 最新文章 从第4个元素开始截取出4个
   const newPosts = posts.slice(3, 7)
 
@@ -142,7 +139,7 @@ const LayoutPostList = props => {
  * @returns
  */
 const LayoutSlug = props => {
-  const { post, recommendPosts, prev, next, lock, validPassword } = props
+  const { post, recommendPosts, lock, validPassword } = props
   const { locale } = useGlobal()
   const router = useRouter()
 
@@ -212,8 +209,8 @@ const LayoutSlug = props => {
 
               <div className='lg:col-span-1 flex flex-col justify-between px-2 lg:px-0 space-y-2 lg:space-y-0'>
                 {/* meta信息 */}
-                <section className='text-lg gap-y-6 '>
-                  <div className='text-gray-500 py-1 dark:text-gray-600'>
+                <section className='text-lg gap-y-6 text-center lg:text-left'>
+                  <div className='text-gray-500 py-1 dark:text-gray-600 '>
                     {/* <div className='whitespace-nowrap'>
                       <i className='far fa-calendar mr-2' />
                       {post?.publishDay}
@@ -253,14 +250,17 @@ const LayoutSlug = props => {
           </div>
         )}
       </div>
-      {/* 广告醒图 */}
-      <BannerFullWidth />
-      {/* 最新文章区块 */}
-      <PostSimpleListHorizontal
-        title={locale.COMMON.RELATE_POSTS}
-        href='/archive'
-        posts={recommendPosts}
-      />
+      
+      <div>
+        {/* 广告醒图 */}
+        <BannerFullWidth />
+        {/* 最新文章区块 */}
+        <PostSimpleListHorizontal
+            title={locale.COMMON.RELATE_POSTS}
+            href='/archive'
+            posts={recommendPosts}
+        />
+      </div>
     </>
   )
 }