diff --git a/blog.config.js b/blog.config.js
index dd0180af..82f93cb8 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -20,7 +20,12 @@ const BLOG = {
   showAbout: true, // WIP 是否显示关于
   showArchive: true, // WIP 是否显示归档
   autoCollapsedNavBar: false, // the automatically collapsed navigation bar
-  socialLink: 'https://weibo.com/u/2245301913',
+  socialLink: {
+    weibo: 'https://weibo.com/u/2245301913',
+    twitter: '',
+    github: 'https://github.com/tangly1024',
+    telegram: ''
+  },
   seo: {
     keywords: ['Notion', '写作', '博客'],
     googleSiteVerification: '' // Remove the value or replace it with your own google site verification code
diff --git a/components/Analytics.js b/components/Analytics.js
index 9edcf75e..fbd23538 100644
--- a/components/Analytics.js
+++ b/components/Analytics.js
@@ -1,6 +1,4 @@
 import { useGlobal } from '@/lib/global'
-import { faChartBar } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 /**
  * 统计网站信息
@@ -11,7 +9,7 @@ export default function Analytics ({ postCount }) {
   const { locale } = useGlobal()
 
   return <>
-    <div className='px-5 text-sm font-light pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faChartBar} className='mr-2' />{locale.COMMON.ANALYTICS}</div>
+    {/* <div className='px-5 text-sm font-light pb-1 text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faChartBar} className='mr-2' />{locale.COMMON.ANALYTICS}</div> */}
     <div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>
         <span className='px-1 '>
           <strong className='font-medium'>{postCount}</strong>{locale.COMMON.POSTS}</span>
diff --git a/components/Header.js b/components/Header.js
index 3f4b4fe6..7b9bdacb 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -96,7 +96,7 @@ export default function Header () {
   return (
     <header
       id="header"
-      className="duration-500 md:bg-fixed w-full bg-cover bg-center lg:-mt-14 h-screen bg-black"
+      className="duration-500 md:bg-fixed w-full bg-cover bg-center h-screen bg-black"
       style={{
         backgroundImage:
           `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0,0,0,0.2), rgba(0, 0, 0, 0.8) ),url("${BLOG.bannerImage}")`
diff --git a/components/InfoCard.js b/components/InfoCard.js
index da214ec8..d7a148af 100644
--- a/components/InfoCard.js
+++ b/components/InfoCard.js
@@ -2,11 +2,12 @@ import BLOG from '@/blog.config'
 import Image from 'next/image'
 import Router from 'next/router'
 import React from 'react'
+import SocialButton from './SocialButton'
 
 const InfoCard = ({ postCount }) => {
   return <>
-    <div className='flex flex-col items-center justify-center cursor-pointer' onClick={ () => { Router.push('/') }}>
-        <div className='hover:rotate-45 hover:scale-125 transform duration-200'>
+    <div className='flex flex-col items-center justify-center '>
+        <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer' onClick={ () => { Router.push('/about') }}>
           <Image
           alt={BLOG.title}
           width={120}
@@ -17,6 +18,8 @@ const InfoCard = ({ postCount }) => {
         />
         </div>
         <div className='text-3xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.title}</div>
+        <div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.description}</div>
+        <SocialButton/>
     </div>
   </>
 }
diff --git a/components/Live2D.js b/components/Live2D.js
index f41d04f7..d17f7dd8 100644
--- a/components/Live2D.js
+++ b/components/Live2D.js
@@ -9,7 +9,7 @@ export default function Live2D () {
       hasLoad = true
     }
   })
-  return <div className='fixed left-0 bottom-0 hidden md:block lg:ml-24 2xl:ml-36'>
+  return <div className='fixed right-0 bottom-0 hidden md:block lg:mr-24 2xl:mr-48 z-20'>
     <canvas id="live2d"className='animate__slideInLeft animate__animated' width="280" height="250"></canvas>
   </div>
 }
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index 9d521bc1..19b276fb 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArchive, faHome, faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+import { faArchive, faHome, faTag, faThList } from '@fortawesome/free-solid-svg-icons'
 import BLOG from 'blog.config'
 
 const MenuButtonGroup = ({ allowCollapse = false }) => {
@@ -12,7 +12,9 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
   const links = [
     { id: 0, icon: faHome, name: locale.NAV.INDEX, to: '/' || '/', show: true },
     { id: 1, icon: faArchive, name: locale.NAV.ARCHIVE, to: '/archive', show: BLOG.showArchive },
-    { id: 2, icon: faInfoCircle, name: locale.NAV.ABOUT, to: '/about', show: BLOG.showAbout }
+    { id: 2, icon: faThList, name: locale.COMMON.CATEGORY, to: '/category', show: BLOG.showArchive },
+    { id: 3, icon: faTag, name: locale.COMMON.TAGS, to: '/tag', show: BLOG.showArchive }
+    // { id: 2, icon: faInfoCircle, name: locale.NAV.ABOUT, to: '/about', show: BLOG.showAbout }
     // { id: 7, icon: 'faGithub', name: 'Github', to: 'https://github.com/tangly1024', show: true },
     // { id: 5, icon: 'faWeibo', name: '微博', to: 'https://weibo.com/tangly1024', show: true },
     // { id: 4, icon: 'faEnvelope', name: locale.NAV.MAIL, to: 'mailto:tlyong1992@hotmail.com', show: true }
diff --git a/components/Progress.js b/components/Progress.js
index 4191ca6f..daa60a9a 100644
--- a/components/Progress.js
+++ b/components/Progress.js
@@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react'
  * @returns {JSX.Element}
  * @constructor
  */
-const Progress = ({ targetRef }) => {
+const Progress = ({ targetRef, showPercent = true }) => {
   const [percent, changePercent] = useState(0)
   const scrollListener = () => {
     if (targetRef?.current) {
@@ -24,9 +24,10 @@ const Progress = ({ targetRef }) => {
   }, [percent])
 
   return (<div className='h-4 w-full shadow-2xl bg-gray-400'>
-
-    <div className='h-4 bg-gray-600 duration-200' style={{ width: `${percent}%` }}><div className='text-right text-white text-xs'>{percent}%</div></div>
-      </div>)
+      <div className='h-4 bg-gray-600 duration-200' style={{ width: `${percent}%` }}>
+        {showPercent && <div className='text-right text-white text-xs'>{percent}%</div>}
+      </div>
+  </div>)
 }
 
 export default Progress
diff --git a/components/SearchDrawer.js b/components/SearchDrawer.js
new file mode 100644
index 00000000..a63d73d8
--- /dev/null
+++ b/components/SearchDrawer.js
@@ -0,0 +1,35 @@
+import { Router } from 'next/router'
+import { useImperativeHandle, useRef } from 'react'
+import SearchInput from './SearchInput'
+const SearchDrawer = ({ cRef }) => {
+  const searchDrawer = useRef()
+  const searchInputRef = useRef()
+  useImperativeHandle(cRef, () => {
+    return {
+      show: () => {
+        searchDrawer?.current?.classList?.remove('hidden')
+        searchInputRef?.current?.focus()
+      }
+    }
+  })
+  const hidden = () => {
+    searchDrawer?.current?.classList?.add('hidden')
+  }
+  Router.events.on('routeChangeComplete', (...args) => {
+    hidden()
+  })
+  return (
+    <div id='search-drawer-wrapper' ref={searchDrawer} className='hidden'>
+      <div className='flex absolute px-5 w-full h-full left-0 top-14 z-50 justify-center'>
+          <div className='md:max-w-3xl w-full mx-auto'>
+          <SearchInput cRef={searchInputRef} />
+          </div>
+      </div>
+
+      {/* 背景蒙版 */}
+      <div id='search-drawer-background' onClick={hidden} className='animate__animated animate__faster animate__fadeIn fixed glassmorphism top-0 left-0 z-30 w-full h-full' />
+    </div>
+  )
+}
+
+export default SearchDrawer
diff --git a/components/SideAreaLeft.js b/components/SideAreaLeft.js
index aeeb0bfe..c5bb9765 100644
--- a/components/SideAreaLeft.js
+++ b/components/SideAreaLeft.js
@@ -5,6 +5,7 @@ import Toc from '@/components/Toc'
 import { useGlobal } from '@/lib/global'
 import React from 'react'
 import Analytics from './Analytics'
+import Tabs from '@/components/Tabs'
 
 /**
  * 侧边平铺
@@ -24,35 +25,31 @@ const SideAreaLeft = ({ title, tags, currentTag, post, posts, categories, curren
   const postCount = posts?.length || 0
   return <>
 
-    <section className={(!post ? 'sticky top-8 ' : ' ') + ' w-60'}>
-      <section className='shadow hidden lg:block mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200 py-6'>
-        <InfoCard postCount={postCount} />
-      </section>
+    <section className='sticky top-16 w-60'>
 
       {/* 菜单 */}
-      <section className='shadow hidden lg:block mb-5 py-4  bg-white dark:bg-gray-800  hover:shadow-xl duration-200'>
+      <section className='shadow hidden lg:block mb-5 py-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
         <MenuButtonGroup allowCollapse={true} />
         <div className='px-5 pt-2'>
            <SearchInput currentTag={currentTag} currentSearch={currentSearch} />
         </div>
       </section>
 
-      {/* 统计 */}
-      <section className='shadow hidden lg:block mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200 py-4'>
-        <Analytics postCount={postCount}/>
-      </section>
+      <Tabs>
+          {showToc && (
+            <div key={locale.COMMON.TABLE_OF_CONTENTS} className='dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800 duration-200'>
+              <Toc toc={post.toc} targetRef={targetRef} />
+            </div>
+          )}
+
+          <div key={locale.NAV.ABOUT} className='mb-5 bg-white dark:bg-gray-800 duration-200 py-6'>
+            <InfoCard postCount={postCount} />
+            <Analytics postCount={postCount}/>
+          </div>
+      </Tabs>
 
     </section>
 
-    {showToc && (
-      <section className='shadow sticky top-8 pb-20  bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
-        <div className='border-b text-center text-2xl bg-white text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
-          {locale.COMMON.TABLE_OF_CONTENTS}
-        </div>
-        <Toc toc={post.toc} targetRef={targetRef} />
-      </section>
-    )}
-
  </>
 }
 export default SideAreaLeft
diff --git a/components/SideAreaRight.js b/components/SideAreaRight.js
index 4eb35421..66a12ae6 100644
--- a/components/SideAreaRight.js
+++ b/components/SideAreaRight.js
@@ -1,11 +1,8 @@
 import LatestPostsGroup from '@/components/LatestPostsGroup'
-import TagGroups from '@/components/TagGroups'
 import { useGlobal } from '@/lib/global'
-import { faAngleDoubleRight, faArchive, faTags, faThList } from '@fortawesome/free-solid-svg-icons'
+import { faArchive } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import Link from 'next/link'
 import React from 'react'
-import CategoryGroup from '@/components/CategoryGroup'
 
 /**
  * 侧边平铺
@@ -64,7 +61,7 @@ const SideAreaRight = ({
 
       {/* <Analytics postCount={postCount}/> */}
 
-      <div className="sticky top-8">
+      <div className="sticky top-16">
           {/* {showToc && (
           <section className='pb-10 mb-5  bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
             <div className='border-b text-center text-2xl bg-white text-black dark:border-gray-700 dark:bg-gray-700 dark:text-white py-6 px-6'>
@@ -75,7 +72,7 @@ const SideAreaRight = ({
           )} */}
 
         {/* 分类  */}
-        {categories && (
+        {/* {categories && (
           <section className='shadow py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
             <div className='text-sm px-5 mb-2 flex flex-nowrap justify-between font-light'>
               <div className='pb-1 text-gray-600 dark:text-gray-300'><FontAwesomeIcon icon={faThList} className='mr-2' />{locale.COMMON.CATEGORY}</div>
@@ -87,7 +84,7 @@ const SideAreaRight = ({
             </div>
             <CategoryGroup currentCategory={currentCategory} categories={categories} />
           </section>
-        )}
+        )} */}
 
         {/* 最新文章 */}
         {posts && (
@@ -108,7 +105,7 @@ const SideAreaRight = ({
         </section> */}
 
         {/* 标签云  */}
-         {tags && (
+         {/* {tags && (
           <section className="shadow py-4 mb-5 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
             <div className="text-sm pb-1 px-5 flex flex-nowrap justify-between font-light dark:text-gray-200">
               <div className="text-gray-600 dark:text-gray-200">
@@ -126,7 +123,7 @@ const SideAreaRight = ({
               <TagGroups tags={tags} currentTag={currentTag} />
             </div>
           </section>
-         )}
+         )} */}
 
       </div>
     </>
diff --git a/components/SocialButton.js b/components/SocialButton.js
index 81b5fb56..1b94a44c 100644
--- a/components/SocialButton.js
+++ b/components/SocialButton.js
@@ -1,4 +1,6 @@
+import BLOG from '@/blog.config'
 import { faGithub, faTelegram, faTwitter, faWeibo } from '@fortawesome/free-brands-svg-icons'
+import { faEnvelope, faRss } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React from 'react'
 
@@ -8,19 +10,25 @@ import React from 'react'
  * @constructor
  */
 const SocialButton = () => {
-  return <div className='w-52'>
+  return <div className='w-52 justify-center flex'>
     <div className='space-x-3 text-xl text-gray-600 dark:text-gray-400 px-6'>
-      <a target='_blank' rel='noreferrer' title={'github'} href={'https://github.com/tangly1024'} >
+      {BLOG.socialLink.github && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.socialLink.github} >
         <FontAwesomeIcon icon={faGithub} className='transform hover:scale-125 duration-150'/>
-      </a>
-      <a target='_blank' rel='noreferrer' title={'twitter'} href={'https://twitter.com/troy1024_1'} >
+      </a>}
+      {BLOG.socialLink.twitter && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.socialLink.twitter} >
         <FontAwesomeIcon icon={faTwitter} className='transform hover:scale-125 duration-150'/>
-      </a>
-      <a target='_blank' rel='noreferrer' href={'https://t.me/tangly_1024'} title={'telegram'} >
+      </a>}
+      {BLOG.socialLink.telegram && <a target='_blank' rel='noreferrer' href={BLOG.socialLink.telegram} title={'telegram'} >
         <FontAwesomeIcon icon={faTelegram} className='transform hover:scale-125 duration-150'/>
-      </a>
-      <a target='_blank' rel='noreferrer' title={'weibo'} href={'https://weibo.com/tangly1024'} >
+      </a>}
+      {BLOG.socialLink.weibo && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.socialLink.weibo} >
         <FontAwesomeIcon icon={faWeibo} className='transform hover:scale-125 duration-150'/>
+      </a>}
+      {BLOG.email && <a target='_blank' rel='noreferrer' title={'weibo'} href={`mailto:${BLOG.email}`} >
+        <FontAwesomeIcon icon={faEnvelope} className='transform hover:scale-125 duration-150'/>
+      </a>}
+      <a target='_blank' rel='noreferrer' title={'weibo'} href={'/feed'} >
+        <FontAwesomeIcon icon={faRss} className='transform hover:scale-125 duration-150'/>
       </a>
     </div>
   </div>
diff --git a/components/Tabs.js b/components/Tabs.js
new file mode 100644
index 00000000..684a1a7b
--- /dev/null
+++ b/components/Tabs.js
@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+
+/**
+ * Tabs切换标签
+ * @param {*} param0
+ * @returns
+ */
+const Tabs = ({ children }) => {
+  if (!children) {
+    return <></>
+  }
+
+  let count = children.length
+  children.forEach(e => {
+    if (!e) {
+      count--
+    }
+  })
+
+  if (count === 1) {
+    return <section>
+      {children}
+    </section>
+  }
+
+  const [currentTab, setCurrentTab] = useState(0)
+  function tabClickHandle (i) {
+    setCurrentTab(i)
+  }
+
+  return (
+    <section >
+      {<div className='shadow hidden lg:block mb-5 py-4 px-5 bg-white dark:bg-gray-800  hover:shadow-xl duration-200'>
+        <ul className='flex justify-center space-x-5 pb-4 cursor-pointer dark:text-gray-400 text-gray-600'>
+          {children.map((item, index) => {
+            return <li key={index} className={currentTab === index ? 'font-black border-b' : 'font-extralight'} onClick={() => { tabClickHandle(index) }}>
+              {item?.key}
+            </li>
+          })}
+        </ul>
+        {children.map((item, index) => {
+          return <section key={index} className={`tabContent ${currentTab === index ? 'block' : 'hidden'}`}>
+              {item}
+            </section>
+        })}
+      </div>}
+
+    </section>)
+}
+
+export default Tabs
diff --git a/components/Toc.js b/components/Toc.js
index 54c89ae7..8bc6877e 100644
--- a/components/Toc.js
+++ b/components/Toc.js
@@ -55,7 +55,7 @@ const Toc = ({ toc, targetRef }) => {
     <div className='w-full'>
       <Progress targetRef={targetRef}/>
     </div>
-    <nav className=' dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800 overflow-y-auto scroll-hidden p-6'>
+    <nav className=' overflow-y-auto scroll-hidden'>
       {toc.map((tocItem) => {
         const id = uuidToId(tocItem.id)
         return (
diff --git a/components/TocDrawer.js b/components/TocDrawer.js
index 8d13ef42..5eadbc5e 100644
--- a/components/TocDrawer.js
+++ b/components/TocDrawer.js
@@ -32,7 +32,9 @@ const TocDrawer = ({ post, cRef, targetRef }) => {
             <div className='text-xl font-bold text-center text-black dark:text-white bg-white dark:bg-gray-600 py-2 px-6'>
               {locale.COMMON.TABLE_OF_CONTENTS}
             </div>
-            <Toc toc={post.toc} targetRef={targetRef}/>
+           <div className='p-6 dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800'>
+             <Toc toc={post.toc} targetRef={targetRef}/>
+           </div>
           </>
           }
       </div>
diff --git a/components/TopNav.js b/components/TopNav.js
index b87370a8..5d557007 100644
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -1,11 +1,11 @@
 import BLOG from '@/blog.config'
 import SideBarDrawer from '@/components/SideBarDrawer'
 import { useGlobal } from '@/lib/global'
+import { faBars, faSearch } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import { useCallback, useEffect, useRef } from 'react'
-import Image from 'next/image'
-import { faBars } from '@fortawesome/free-solid-svg-icons'
+import SearchDrawer from './SearchDrawer'
 import throttle from 'lodash.throttle'
 
 let windowTop = 0
@@ -18,6 +18,7 @@ let windowTop = 0
 const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, autoHide = true }) => {
   const drawer = useRef()
   const { locale } = useGlobal()
+  const searchDrawer = useRef()
 
   const scrollTrigger = useCallback(throttle(() => {
     const scrollS = window.scrollY
@@ -30,7 +31,7 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, au
       nav && nav.classList.replace('-top-16', 'top-0')
       windowTop = scrollS
     }
-  }, 200))
+  }, 200), [])
 
   // 监听滚动
   useEffect(() => {
@@ -42,10 +43,10 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, au
       autoHide && window.removeEventListener('scroll', scrollTrigger)
     }
   }, [])
-
-  return (<div id='top-nav'>
+  return (<div id='top-nav' className='sticky top-0 z-40 block lg:hidden'>
     {/* 侧面抽屉 */}
     <SideBarDrawer post={post} currentTag={currentTag} cRef={drawer} tags={tags} posts={posts} categories={categories} currentCategory={currentCategory}/>
+    <SearchDrawer cRef={searchDrawer}/>
 
     {/* 导航栏 */}
     <div id='sticky-nav' className='flex animate__animated animate__fadeIn fixed lg:relative w-full top-0 z-20 transform duration-500'>
@@ -53,16 +54,10 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, au
         {/* 左侧LOGO 标题 */}
         <div className='flex flex-none flex-grow-0'>
           <div onClick={() => { drawer.current.handleSwitchSideDrawerVisible() }}
-               className='w-8 cursor-pointer dark:text-gray-300 block lg:hidden'>
+               className='w-8 cursor-pointer dark:text-gray-300'>
             <FontAwesomeIcon icon={faBars} size={'lg'}/>
           </div>
-          <div className='relative w-10 hidden lg:block' ><Image
-            alt={BLOG.title}
-            layout='fill'
-            loading='lazy'
-            src='/favicon.svg'
-            className='border-black'
-          /></div>
+
           <Link href='/' passHref>
             <a>
              <h1 className='cursor-pointer ml-2 w-full hover:scale-105 duration-200 transform font-serif dark:text-gray-200 whitespace-nowrap overflow-x-hidden'>{ BLOG.title }</h1>
@@ -72,15 +67,9 @@ const TopNav = ({ tags, currentTag, post, posts, categories, currentCategory, au
 
         {/* 右侧功能 */}
         <div className='mr-1 flex flex-nowrap flex-grow justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
-        <Link href='/'>
-            <a>{locale.NAV.INDEX}</a>
-          </Link>
-          <Link href='/archive'>
-            <a>{locale.NAV.ARCHIVE}</a>
-          </Link>
-          <Link href='/about'>
-            <a>{locale.NAV.ABOUT}</a>
-          </Link>
+          <div className="cursor-pointer block lg:hidden" onClick={() => { searchDrawer?.current?.show() }}>
+            <FontAwesomeIcon icon={faSearch} className="mr-2" />{locale.NAV.SEARCH}
+          </div>
         </div>
       </div>
     </div>
diff --git a/pages/about.js b/pages/about.js
index d3f5b5d4..28301e6b 100644
--- a/pages/about.js
+++ b/pages/about.js
@@ -24,6 +24,7 @@ const About = ({ post, blockMap, tags, prev, next, allPosts, categories }) => {
     return <Custom404 />
   }
   const { locale } = useGlobal()
+  post.title = locale.NAV.ABOUT
   const meta = {
     title: `${locale.NAV.ABOUT} | ${BLOG.title} `,
     description: post.summary,
diff --git a/pages/search.js b/pages/search.js
index b2e4a0a7..f554da44 100644
--- a/pages/search.js
+++ b/pages/search.js
@@ -46,14 +46,12 @@ const Search = ({ allPosts, tags, categories }) => {
   }
   return (
     <BaseLayout meta={meta} tags={tags} totalPosts={allPosts} currentSearch={searchKey} categories={categories}>
-      <div className=''>
         <StickyBar>
-          <div className='p-4 dark:text-gray-200'><FontAwesomeIcon icon={faSearch} className='mr-1'/> 搜索词： {searchKey}</div>
+          <div className='p-4 dark:text-gray-200'><FontAwesomeIcon icon={faSearch} className='mr-1'/> {locale.NAV.SEARCH}： {searchKey}</div>
         </StickyBar>
         <div className='md:mt-5'>
          <BlogPostListScroll posts={filteredPosts} tags={tags} currentSearch={searchKey} />
         </div>
-      </div>
     </BaseLayout>
   )
 }
diff --git a/styles/globals.css b/styles/globals.css
index 7d4722a6..2b5e0411 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -151,12 +151,12 @@ nav {
 
 .glassmorphism{
   background: hsla(0, 0%, 100%, .75);
-  -webkit-backdrop-filter: blur(5px);    
-  backdrop-filter: blur(5px);   
+  -webkit-backdrop-filter: blur(10px);    
+  backdrop-filter: blur(10px);   
 }
 
 .dark .glassmorphism{
   background: rgba(31, 41, 55, .75);
-  -webkit-backdrop-filter: blur(3px);
-  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
 }
\ No newline at end of file