diff --git a/lib/lang/en-US.js b/lib/lang/en-US.js
index 6b40a44c..d2b5e232 100644
--- a/lib/lang/en-US.js
+++ b/lib/lang/en-US.js
@@ -66,7 +66,8 @@ export default {
     MINUTE: 'min',
     WORD_COUNT: 'Words',
     READ_TIME: 'Read Time',
-    NEXT_POST: '下一篇'
+    NEXT_POST: 'Next',
+    PREV_POST: 'Prev'
   },
   PAGINATION: {
     PREV: 'Prev',
diff --git a/lib/lang/zh-CN.js b/lib/lang/zh-CN.js
index c49ed544..0d206d5a 100644
--- a/lib/lang/zh-CN.js
+++ b/lib/lang/zh-CN.js
@@ -66,7 +66,8 @@ export default {
     MINUTE: '分钟',
     WORD_COUNT: '字数',
     READ_TIME: '阅读时长',
-    NEXT_POST: '下一篇'
+    NEXT_POST: '下一篇',
+    PREV_POST: '上一篇'
   },
   PAGINATION: {
     PREV: '上页',
diff --git a/lib/lang/zh-HK.js b/lib/lang/zh-HK.js
index 6e9df618..e4de0f4e 100644
--- a/lib/lang/zh-HK.js
+++ b/lib/lang/zh-HK.js
@@ -37,7 +37,9 @@ export default {
     ARTICLE_LOCK_TIPS: '文章已上鎖，請輸入訪問密碼',
     SUBMIT: '提交',
     POST_TIME: '发布于',
-    LAST_EDITED_TIME: '最后更新'
+    LAST_EDITED_TIME: '最后更新',
+    NEXT_POST: '下一篇',
+    PREV_POST: '上一篇'
   },
   PAGINATION: {
     PREV: '上一頁',
diff --git a/lib/lang/zh-TW.js b/lib/lang/zh-TW.js
index 1fe2dbb1..02c3ed2f 100644
--- a/lib/lang/zh-TW.js
+++ b/lib/lang/zh-TW.js
@@ -37,7 +37,9 @@ export default {
     ARTICLE_LOCK_TIPS: '文章已上鎖，請輸入訪問密碼',
     SUBMIT: '提交',
     POST_TIME: '发布于',
-    LAST_EDITED_TIME: '最后更新'
+    LAST_EDITED_TIME: '最后更新',
+    NEXT_POST: '下一篇',
+    PREV_POST: '上一篇'
   },
   PAGINATION: {
     PREV: '上一頁',
diff --git a/themes/gitbook/components/ArticleAround.js b/themes/gitbook/components/ArticleAround.js
index 58069682..56db04ea 100644
--- a/themes/gitbook/components/ArticleAround.js
+++ b/themes/gitbook/components/ArticleAround.js
@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 
 /**
@@ -9,21 +10,29 @@ export default function ArticleAround({ prev, next }) {
   if (!prev || !next) {
     return <></>
   }
+  const { locale } = useGlobal()
   return (
-    <section className='text-gray-800 dark:text-gray-400 h-12 flex items-center justify-between space-x-5 my-4'>
+    <section className='text-gray-800 dark:text-gray-400 flex items-center justify-between gap-x-3 my-4'>
       <Link
         href={prev.href}
         passHref
-        className='text-sm cursor-pointer justify-start items-center flex hover:underline duration-300'>
-        <i className='mr-1 fas fa-angle-double-left' />
-        {prev.title}
+        className='rounded border w-full h-20 px-3 cursor-pointer justify-between items-center flex hover:text-green-500 duration-300'>
+        <i className='mr-1 fas fa-angle-left' />
+        <div>
+          <div>{locale.COMMON.PREV_POST}</div>
+          <div>{prev.title}</div>
+        </div>
       </Link>
+
       <Link
         href={next.href}
         passHref
-        className='text-sm cursor-pointer justify-end items-center flex hover:underline duration-300'>
-        {next.title}
-        <i className='ml-1 my-1 fas fa-angle-double-right' />
+        className='rounded border w-full h-20 px-3 cursor-pointer justify-between items-center flex hover:text-green-500 duration-300'>
+        <div>
+          <div>{locale.COMMON.NEXT_POST}</div>
+          <div> {next.title}</div>
+        </div>
+        <i className='ml-1 my-1 fas fa-angle-right' />
       </Link>
     </section>
   )
diff --git a/themes/gitbook/components/BlogPostCard.js b/themes/gitbook/components/BlogPostCard.js
index 72755672..a311f47c 100644
--- a/themes/gitbook/components/BlogPostCard.js
+++ b/themes/gitbook/components/BlogPostCard.js
@@ -3,7 +3,6 @@ import NotionIcon from '@/components/NotionIcon'
 import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import CONFIG from '../config'
 
 const BlogPostCard = ({ post, className }) => {
   const router = useRouter()
@@ -14,8 +13,8 @@ const BlogPostCard = ({ post, className }) => {
     <Link href={post?.href} passHref>
       <div
         key={post.id}
-        className={`${className} relative py-1.5 cursor-pointer px-1.5 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600
-                    ${currentSelected && 'bg-green-50 text-green-500 dark:bg-yellow-100 dark:text-yellow-600'}`}>
+        className={`${className} relative py-1.5 cursor-pointer px-1.5 rounded-md hover:bg-gray-50
+                    ${currentSelected ? 'text-green-500 dark:bg-yellow-100 dark:text-yellow-600 font-semibold' : ' dark:hover:bg-yellow-100 dark:hover:text-yellow-600'}`}>
         <div className='w-full select-none'>
           {siteConfig('POST_TITLE_ICON') && (
             <NotionIcon icon={post?.pageIcon} />
@@ -23,10 +22,9 @@ const BlogPostCard = ({ post, className }) => {
           {post.title}
         </div>
         {/* 最新文章加个红点 */}
-        {post?.isLatest &&
-          siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) && (
-            <Badge />
-          )}
+        {post?.isLatest && siteConfig('GITBOOK_LATEST_POST_RED_BADGE') && (
+          <Badge />
+        )}
       </div>
     </Link>
   )
diff --git a/themes/gitbook/components/Catalog.js b/themes/gitbook/components/Catalog.js
index e4a20bdf..9173fa7d 100644
--- a/themes/gitbook/components/Catalog.js
+++ b/themes/gitbook/components/Catalog.js
@@ -1,4 +1,3 @@
-import { useGlobal } from '@/lib/global'
 import { isBrowser } from '@/lib/utils'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
@@ -14,7 +13,6 @@ const Catalog = ({ post }) => {
   const toc = post?.toc
   // 同步选中目录事件
   const [activeSection, setActiveSection] = useState(null)
-  const {locale}= useGlobal()
 
   // 监听滚动事件
   useEffect(() => {
@@ -69,25 +67,28 @@ const Catalog = ({ post }) => {
 
   return (
     <>
-      <div className='w-full hidden md:block'><i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}</div>
+      {/* <div className='w-full hidden md:block'>
+        <i className='mr-1 fas fa-stream' />{locale.COMMON.TABLE_OF_CONTENTS}
+        </div> */}
+
       <div
         id='toc-wrapper'
         className='toc-wrapper overflow-y-auto my-2 max-h-80 overscroll-none scroll-hidden'>
-        <nav className='h-full  text-black'>
+        <nav className='h-full text-black'>
           {toc?.map(tocItem => {
             const id = uuidToId(tocItem.id)
             return (
               <a
                 key={id}
                 href={`#${id}`}
-                className={`notion-table-of-contents-item duration-300 transform font-light dark:text-gray-300
+                className={`border-l pl-4 notion-table-of-contents-item duration-300 transform font-light dark:text-gray-300
               notion-table-of-contents-item-indent-level-${tocItem.indentLevel} `}>
                 <span
                   style={{
                     display: 'inline-block',
                     marginLeft: tocItem.indentLevel * 16
                   }}
-                  className={`truncate ${activeSection === id ? 'font-bold text-gray-500 underline' : ''}`}>
+                  className={`truncate ${activeSection === id ? 'border-green-500 font-bold text-gray-500 underline' : ''}`}>
                   {tocItem.text}
                 </span>
               </a>
diff --git a/themes/gitbook/components/Header.js b/themes/gitbook/components/Header.js
index 8d538740..059a2a18 100644
--- a/themes/gitbook/components/Header.js
+++ b/themes/gitbook/components/Header.js
@@ -7,6 +7,7 @@ import CONFIG from '../config'
 import LogoBar from './LogoBar'
 import { MenuBarMobile } from './MenuBarMobile'
 import { MenuItemDrop } from './MenuItemDrop'
+import SearchInput from './SearchInput'
 
 /**
  * 页头：顶部导航栏 + 菜单
@@ -60,6 +61,43 @@ export default function Header(props) {
 
   return (
     <div id='top-nav' className={'fixed top-0 w-full z-20 ' + className}>
+      {/* PC端菜单 */}
+      <div className='flex justify-center border-b items-center w-full h-14 glassmorphism bg-white dark:bg-hexo-black-gray px-7'>
+        <div className='max-w-screen-4xl w-full flex gap-x-3 justify-between items-center'>
+          {/* 左侧*/}
+          <div className='flex'>
+            <LogoBar {...props} />
+
+            {/* 桌面端顶部菜单 */}
+            <div className='hidden md:flex'>
+              {links &&
+                links?.map((link, index) => (
+                  <MenuItemDrop key={index} link={link} />
+                ))}
+            </div>
+          </div>
+
+          {/* 右侧 */}
+          <div className='flex items-center gap-3'>
+            <SearchInput className='hidden md:flex md:w-52 lg:w-72' />
+            <DarkModeButton className='text-sm items-center h-full hidden md:flex' />
+            {/* 折叠按钮、仅移动端显示 */}
+            <div className='mr-1 flex md:hidden justify-end items-center space-x-4  dark:text-gray-200'>
+              <DarkModeButton className='flex text-md items-center h-full' />
+              <div
+                onClick={toggleMenuOpen}
+                className='cursor-pointer text-lg hover:scale-110 duration-150'>
+                {isOpen ? (
+                  <i className='fas fa-times' />
+                ) : (
+                  <i className='fa-solid fa-bars' />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
       {/* 移动端折叠菜单 */}
       <Collapse
         type='vertical'
@@ -75,35 +113,6 @@ export default function Header(props) {
           />
         </div>
       </Collapse>
-
-      {/* 导航栏菜单 */}
-      <div className='flex w-full h-14 shadow glassmorphism bg-white dark:bg-hexo-black-gray px-7 items-between'>
-        {/* 左侧图标Logo */}
-        <LogoBar {...props} />
-
-        {/* 折叠按钮、仅移动端显示 */}
-        <div className='mr-1 flex md:hidden justify-end items-center space-x-4  dark:text-gray-200'>
-          <DarkModeButton className='flex text-md items-center h-full' />
-          <div
-            onClick={toggleMenuOpen}
-            className='cursor-pointer text-lg hover:scale-110 duration-150'>
-            {isOpen ? (
-              <i className='fas fa-times' />
-            ) : (
-              <i className='fa-solid fa-bars' />
-            )}
-          </div>
-        </div>
-
-        {/* 桌面端顶部菜单 */}
-        <div className='hidden md:flex'>
-          {links &&
-            links?.map((link, index) => (
-              <MenuItemDrop key={index} link={link} />
-            ))}
-          <DarkModeButton className='text-sm flex items-center h-full' />
-        </div>
-      </div>
     </div>
   )
 }
diff --git a/themes/gitbook/components/NavPostItem.js b/themes/gitbook/components/NavPostItem.js
index 46664a56..5e345014 100644
--- a/themes/gitbook/components/NavPostItem.js
+++ b/themes/gitbook/components/NavPostItem.js
@@ -2,7 +2,6 @@ import Badge from '@/components/Badge'
 import Collapse from '@/components/Collapse'
 import { siteConfig } from '@/lib/config'
 import { useEffect, useState } from 'react'
-import CONFIG from '../config'
 import BlogPostCard from './BlogPostCard'
 
 /**
@@ -14,7 +13,7 @@ import BlogPostCard from './BlogPostCard'
  */
 const NavPostItem = props => {
   const { group, expanded, toggleItem } = props // 接收传递的展开状态和切换函数
-  const hoverExpand = siteConfig('GITBOOK_FOLDER_HOVER_EXPAND', false, CONFIG)
+  const hoverExpand = siteConfig('GITBOOK_FOLDER_HOVER_EXPAND')
   const [isTouchDevice, setIsTouchDevice] = useState(false)
 
   // 检测是否为触摸设备
@@ -55,13 +54,15 @@ const NavPostItem = props => {
           onClick={toggleOpenSubMenu}
           className='cursor-pointer relative flex justify-between text-sm p-2 hover:bg-gray-50 rounded-md dark:hover:bg-yellow-100 dark:hover:text-yellow-600'
           key={group?.category}>
-          <span>{group?.category}</span>
+          <span className={`${expanded && 'font-semibold'}`}>
+            {group?.category}
+          </span>
           <div className='inline-flex items-center select-none pointer-events-none '>
             <i
               className={`px-2 fas fa-chevron-left transition-all opacity-50 duration-700 ${expanded ? '-rotate-90' : ''}`}></i>
           </div>
           {groupHasLatest &&
-            siteConfig('GITBOOK_LATEST_POST_RED_BADGE', false, CONFIG) &&
+            siteConfig('GITBOOK_LATEST_POST_RED_BADGE') &&
             !expanded && <Badge />}
         </div>
         <Collapse isOpen={expanded} onHeightChange={props.onHeightChange}>
diff --git a/themes/gitbook/components/NavPostList.js b/themes/gitbook/components/NavPostList.js
index 7bc67c44..aa86fed9 100644
--- a/themes/gitbook/components/NavPostList.js
+++ b/themes/gitbook/components/NavPostList.js
@@ -3,6 +3,7 @@ import { useGlobal } from '@/lib/global'
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import CONFIG from '../config'
+import BlogPostCard from './BlogPostCard'
 import NavPostItem from './NavPostItem'
 
 /**
@@ -13,7 +14,7 @@ import NavPostItem from './NavPostItem'
  * @constructor
  */
 const NavPostList = props => {
-  const { filteredNavPages } = props
+  const { filteredNavPages, post } = props
   const { locale, currentSearch } = useGlobal()
   const router = useRouter()
 
@@ -80,11 +81,22 @@ const NavPostList = props => {
       </div>
     )
   }
+  // 如果href
+  const href = siteConfig('GITBOOK_INDEX_PAGE') + ''
+
+  const homePost = {
+    id: '-1',
+    title: siteConfig('DESCRIPTION'),
+    href: href.indexOf('/') !== 0 ? '/' + href : href
+  }
 
   return (
     <div
       id='posts-wrapper'
-      className='w-full flex-grow space-y-0.5 tracking-wider'>
+      className='w-full flex-grow space-y-0.5 pr-4 tracking-wider'>
+      {/* 当前文章 */}
+      <BlogPostCard className='text-sm py-2' post={homePost} />
+
       {/* 文章列表 */}
       {categoryFolders?.map((group, index) => (
         <NavPostItem
diff --git a/themes/gitbook/components/SearchInput.js b/themes/gitbook/components/SearchInput.js
index fc1cd793..fa30ea66 100644
--- a/themes/gitbook/components/SearchInput.js
+++ b/themes/gitbook/components/SearchInput.js
@@ -103,13 +103,14 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
   }
 
   return (
-    <div className={'flex w-full'}>
+    <div className={`${className}`}>
       <input
         ref={searchInputRef}
         type='text'
-        className={`${className} outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white`}
+        className={`rounded-md outline-none w-full text-sm pl-2 transition focus:shadow-lg font-light leading-10 text-black bg-gray-100 dark:bg-gray-800 dark:text-white`}
         onFocus={handleFocus}
         onKeyUp={handleKeyUp}
+        placeholder='Search'
         onCompositionStart={lockSearchInput}
         onCompositionUpdate={lockSearchInput}
         onCompositionEnd={unLockSearchInput}
diff --git a/themes/gitbook/index.js b/themes/gitbook/index.js
index ceef6df4..a0de573a 100644
--- a/themes/gitbook/index.js
+++ b/themes/gitbook/index.js
@@ -31,7 +31,6 @@ import JumpToTopButton from './components/JumpToTopButton'
 import NavPostList from './components/NavPostList'
 import PageNavDrawer from './components/PageNavDrawer'
 import RevolverMaps from './components/RevolverMaps'
-import SearchInput from './components/SearchInput'
 import TagItemMini from './components/TagItemMini'
 import CONFIG from './config'
 import { Style } from './style'
@@ -145,25 +144,22 @@ const LayoutBase = props => {
           id='wrapper'
           className={
             (siteConfig('LAYOUT_SIDEBAR_REVERSE') ? 'flex-row-reverse' : '') +
-            'relative flex justify-between w-full h-full mx-auto'
+            'relative flex justify-between w-full gap-x-6 h-full mx-auto max-w-screen-4xl'
           }>
           {/* 左侧推拉抽屉 */}
           {fullWidth ? null : (
             <div
               className={
-                'hidden md:block border-r dark:border-transparent relative z-10 dark:bg-hexo-black-gray'
+                'hidden md:block relative z-10 dark:bg-hexo-black-gray'
               }>
-              <div className='w-72 pt-14 pb-4 px-6 sticky top-0 h-screen flex justify-between flex-col'>
+              <div className='w-80 pt-14 pb-4 sticky top-0 h-screen flex justify-between flex-col'>
                 {/* 导航 */}
-                <div className='overflow-y-scroll scroll-hidden'>
+                <div className='overflow-y-scroll scroll-hidden pt-10'>
                   {/* 嵌入 */}
                   {slotLeft}
-                  {/* 搜索框 */}
-                  <SearchInput className='my-3 rounded-md' />
 
-                  {/* 文章列表 */}
                   {/* 所有文章列表 */}
-                  <NavPostList filteredNavPages={filteredNavPages} />
+                  <NavPostList filteredNavPages={filteredNavPages} {...props} />
                 </div>
                 {/* 页脚 */}
                 <Footer {...props} />
@@ -171,27 +167,17 @@ const LayoutBase = props => {
             </div>
           )}
 
+          {/* 中间内容区域 */}
           <div
             id='center-wrapper'
             className='flex flex-col justify-between w-full relative z-10 pt-14 min-h-screen dark:bg-black'>
             <div
               id='container-inner'
-              className={`w-full px-7 ${fullWidth ? 'px-10' : 'max-w-3xl'} justify-center mx-auto`}>
+              className={`w-full ${fullWidth ? 'px-10' : 'max-w-3xl px-3 lg:px-0'} justify-center mx-auto`}>
               {slotTop}
               <WWAds className='w-full' orientation='horizontal' />
 
-              {/* <Transition
-                show={!onLoading}
-                appear={true}
-                enter='transition ease-in-out duration-700 transform order-first'
-                enterFrom='opacity-0 translate-y-16'
-                enterTo='opacity-100'
-                leave='transition ease-in-out duration-300 transform'
-                leaveFrom='opacity-100 translate-y-0'
-                leaveTo='opacity-0 -translate-y-16'
-                unmount={false}> */}
               {children}
-              {/* </Transition> */}
 
               {/* Google广告 */}
               <AdSlot type='in-article' />
@@ -207,14 +193,13 @@ const LayoutBase = props => {
             </div>
           </div>
 
-          {/*  右侧侧推拉抽屉 */}
+          {/*  右侧 */}
           {fullWidth ? null : (
             <div
-              style={{ width: '20rem' }}
               className={
-                'hidden xl:block dark:border-transparent flex-shrink-0 relative z-10 '
+                'w-72 hidden xl:block dark:border-transparent flex-shrink-0 relative z-10 '
               }>
-              <div className='py-14 px-6 sticky top-0'>
+              <div className='py-14 sticky top-0'>
                 <ArticleInfo post={props?.post ? props?.post : props.notice} />
 
                 <div className='py-4'>
@@ -264,20 +249,20 @@ const LayoutBase = props => {
 const LayoutIndex = props => {
   const router = useRouter()
   useEffect(() => {
-    router.push(siteConfig('GITBOOK_INDEX_PAGE', null, CONFIG)).then(() => {
-      // console.log('跳转到指定首页', siteConfig('INDEX_PAGE', null, CONFIG))
+    router.push(siteConfig('GITBOOK_INDEX_PAGE')).then(() => {
+      // console.log('跳转到指定首页', siteConfig('INDEX_PAGE'))
       setTimeout(() => {
         if (isBrowser) {
           const article = document.getElementById('notion-article')
           if (!article) {
             console.log(
               '请检查您的Notion数据库中是否包含此slug页面： ',
-              siteConfig('GITBOOK_INDEX_PAGE', null, CONFIG)
+              siteConfig('GITBOOK_INDEX_PAGE')
             )
             const containerInner = document.querySelector(
               '#theme-gitbook #container-inner'
             )
-            const newHTML = `<h1 class="text-3xl pt-12  dark:text-gray-300">配置有误</h1><blockquote class="notion-quote notion-block-ce76391f3f2842d386468ff1eb705b92"><div>请在您的notion中添加一个slug为${siteConfig('GITBOOK_INDEX_PAGE', null, CONFIG)}的文章</div></blockquote>`
+            const newHTML = `<h1 class="text-3xl pt-12  dark:text-gray-300">配置有误</h1><blockquote class="notion-quote notion-block-ce76391f3f2842d386468ff1eb705b92"><div>请在您的notion中添加一个slug为${siteConfig('GITBOOK_INDEX_PAGE')}的文章</div></blockquote>`
             containerInner?.insertAdjacentHTML('afterbegin', newHTML)
           }
         }
@@ -350,10 +335,11 @@ const LayoutSlug = props => {
               <ShareBar post={post} />
               {/* 文章分类和标签信息 */}
               <div className='flex justify-between'>
-                {siteConfig('POST_DETAIL_CATEGORY', null, CONFIG) &&
-                  post?.category && <CategoryItem category={post.category} />}
+                {siteConfig('POST_DETAIL_CATEGORY') && post?.category && (
+                  <CategoryItem category={post.category} />
+                )}
                 <div>
-                  {siteConfig('POST_DETAIL_TAG', null, CONFIG) &&
+                  {siteConfig('POST_DETAIL_TAG') &&
                     post?.tagItems?.map(tag => (
                       <TagItemMini key={tag.name} tag={tag} />
                     ))}
diff --git a/themes/simple/components/NavBar.js b/themes/simple/components/NavBar.js
index c455df2a..8250e0a9 100644
--- a/themes/simple/components/NavBar.js
+++ b/themes/simple/components/NavBar.js
@@ -25,7 +25,7 @@ export default function NavBar(props) {
 
   const onKeyUp = e => {
     if (e.keyCode === 13) {
-      const search = document.getElementById('simple-search').value
+      const search = document.getElementById('simple-search').innerText
       if (search) {
         router.push({ pathname: '/search/' + search })
       }
@@ -33,30 +33,29 @@ export default function NavBar(props) {
   }
 
   return (
-    <nav className="w-full bg-white md:pt-0  relative z-20 shadow border-t border-gray-100 dark:border-hexo-black-gray dark:bg-black">
+    <nav className='w-full bg-white md:pt-0  relative z-20 shadow border-t border-gray-100 dark:border-hexo-black-gray dark:bg-black'>
       <div
-        id="nav-bar-inner"
-        className="h-12 mx-auto max-w-9/10 justify-between items-center text-sm md:text-md md:justify-start"
-      >
+        id='nav-bar-inner'
+        className='h-12 mx-auto max-w-9/10 justify-between items-center text-sm md:text-md md:justify-start'>
         {/* 左侧菜单 */}
-        <div className="h-full w-full float-left text-center md:text-left flex flex-wrap items-stretch md:justify-start md:items-start space-x-4">
+        <div className='h-full w-full float-left text-center md:text-left flex flex-wrap items-stretch md:justify-start md:items-start space-x-4'>
           {showSearchInput && (
             <input
               autoFocus
-              id="simple-search"
+              id='simple-search'
               onKeyUp={onKeyUp}
-              className="float-left w-full outline-none h-full px-4"
-              aria-label="Submit search"
-              type="search"
-              name="s"
-              autoComplete="off"
-              placeholder="Type then hit enter to search..."
+              className='float-left w-full outline-none h-full px-4'
+              aria-label='Submit search'
+              type='search'
+              name='s'
+              autoComplete='off'
+              placeholder='Type then hit enter to search...'
             />
           )}
           {!showSearchInput && <MenuList {...props} />}
         </div>
 
-        <div className="absolute right-12 h-full text-center px-2 flex items-center text-blue-400  cursor-pointer">
+        <div className='absolute right-12 h-full text-center px-2 flex items-center text-blue-400  cursor-pointer'>
           {/* <!-- extra links --> */}
           <i
             className={
@@ -64,8 +63,7 @@ export default function NavBar(props) {
                 ? 'fa-regular fa-circle-xmark'
                 : 'fa-solid fa-magnifying-glass' + ' align-middle'
             }
-            onClick={toggleShowSearchInput}
-          ></i>
+            onClick={toggleShowSearchInput}></i>
         </div>
       </div>
     </nav>