diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index 38df8131..2ef9b09a 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -9,7 +9,7 @@ import BLOG from 'blog.config'
 const MenuButtonGroup = ({ allowCollapse = false, postCount }) => {
   const { locale } = useGlobal()
   const router = useRouter()
-  const archiveSlot = <div className='bg-gray-300 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
+  const archiveSlot = <div className='bg-gray-300 dark:bg-gray-500 rounded-md text-gray-50 px-1 text-xs'>{postCount}</div>
 
   const links = [
     { id: 0, icon: faHome, name: locale.NAV.INDEX, to: '/' || '/', show: true },
diff --git a/components/SearchDrawer.js b/components/SearchDrawer.js
index 680b0537..3d107e0f 100644
--- a/components/SearchDrawer.js
+++ b/components/SearchDrawer.js
@@ -1,7 +1,7 @@
 import { Router } from 'next/router'
 import { useImperativeHandle, useRef } from 'react'
 import SearchInput from './SearchInput'
-const SearchDrawer = ({ cRef }) => {
+const SearchDrawer = ({ cRef, slot }) => {
   const searchDrawer = useRef()
   const searchInputRef = useRef()
   useImperativeHandle(cRef, () => {
@@ -20,14 +20,15 @@ const SearchDrawer = ({ cRef }) => {
   })
   return (
     <div id='search-drawer-wrapper' ref={searchDrawer} className='hidden'>
-      <div className='flex absolute px-5 w-full left-0 top-14 z-50 justify-center'>
+      <div className='flex-col fixed px-5 w-full left-0 top-14 z-50 justify-center'>
           <div className='md:max-w-3xl w-full mx-auto animate__animated animate__faster animate__fadeIn'>
-          <SearchInput cRef={searchInputRef} />
+            <SearchInput cRef={searchInputRef} />
+            {slot}
           </div>
       </div>
 
       {/* 背景蒙版 */}
-      <div id='search-drawer-background' onClick={hidden} className='animate__animated animate__faster animate__fadeIn fixed glassmorphism top-0 left-0 z-40 w-full h-full' />
+      <div id='search-drawer-background' onClick={hidden} className='animate__animated animate__faster animate__fadeIn fixed bg-day dark:bg-night top-0 left-0 z-40 w-full h-full' />
     </div>
   )
 }
diff --git a/components/TagItemMini.js b/components/TagItemMini.js
index 2e79e403..9fec9e35 100644
--- a/components/TagItemMini.js
+++ b/components/TagItemMini.js
@@ -8,7 +8,7 @@ const TagItemMini = ({ tag, selected = false }) => {
       mr-2 py-0.5 px-1 text-xs whitespace-nowrap dark:hover:text-white
        ${selected
       ? 'text-white dark:text-gray-300 bg-black dark:bg-black dark:hover:bg-gray-900'
-      : `text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-900`}` }>
+      : `text-gray-600 hover:shadow-xl dark:border-gray-400 notion-${tag.color}_background dark:bg-gray-800`}` }>
     <div className='font-light dark:text-gray-400'>{selected && <FontAwesomeIcon icon={faTag} className='mr-1'/>} {tag.name + (tag.count ? `(${tag.count})` : '')} </div>
     </a>
   </Link>
diff --git a/components/TopNav.js b/components/TopNav.js
index b292f467..cd9abb38 100644
--- a/components/TopNav.js
+++ b/components/TopNav.js
@@ -1,13 +1,16 @@
 import BLOG from '@/blog.config'
 import { useGlobal } from '@/lib/global'
-import { faBars, faSearch, faTimes } from '@fortawesome/free-solid-svg-icons'
+import { faAngleDoubleRight, faBars, faSearch, faTag, faThList, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import throttle from 'lodash.throttle'
+import Link from 'next/link'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import CategoryGroup from './CategoryGroup'
 import Collapse from './Collapse'
 import Logo from './Logo'
 import MenuButtonGroup from './MenuButtonGroup'
 import SearchDrawer from './SearchDrawer'
+import TagGroups from './TagGroups'
 
 let windowTop = 0
 
@@ -50,8 +53,40 @@ const TopNav = ({ tags, currentTag, post, slot, categories, currentCategory, aut
     changeShow(!isOpen)
   }
 
+  const searchDrawerSlot = <>
+    { categories && (
+        <section className='mt-8'>
+          <div className='text-sm px-5 flex flex-nowrap justify-between font-light'>
+            <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faThList} className='mr-2' />{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} <FontAwesomeIcon icon={faAngleDoubleRight} />
+              </a>
+            </Link>
+          </div>
+          <CategoryGroup currentCategory={currentCategory} categories={categories} />
+        </section>
+    ) }
+
+    { tags && (
+        <section className='mt-4'>
+          <div className='text-sm py-2 px-5 flex flex-nowrap justify-between font-light dark:text-gray-200'>
+            <div className='text-gray-600 dark:text-gray-200'><FontAwesomeIcon icon={faTag} className='mr-2'/>{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} <FontAwesomeIcon icon={faAngleDoubleRight} />
+              </a>
+            </Link>
+          </div>
+          <div className='px-5 py-2'>
+            <TagGroups tags={tags} currentTag={currentTag} />
+          </div>
+        </section>
+    ) }
+    </>
+
   return (<div id='top-nav' className='z-40 block lg:hidden'>
-      <SearchDrawer cRef={searchDrawer}/>
+    <SearchDrawer cRef={searchDrawer} slot={searchDrawerSlot}/>
 
     {/* 导航栏 */}
     <div id='sticky-nav' className={`${BLOG.topNavType !== 'normal' ? 'fixed' : ''} animate__animated animate__fadeIn  lg:relative w-full top-0 z-20 transform duration-500`}>