diff --git a/blog.config.js b/blog.config.js
index 6e73df2a..330f1638 100644
--- a/blog.config.js
+++ b/blog.config.js
@@ -15,7 +15,7 @@ const BLOG = {
   notionPageId: process.env.NOTION_PAGE_ID || 'bee1fccfa3bd47a1a7be83cc71372d83', // Important page_id！！！
   notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
   appearance: 'auto', // ['light', 'dark', 'auto'],
-  font: 'font-sans tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
+  font: 'font-serif tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
   lightBackground: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
   darkBackground: '#111827', // use hex value, don't forget '#'
   path: '', // leave this empty unless you want to deploy in a folder
@@ -69,6 +69,7 @@ const BLOG = {
     utterancesConfig: {
       repo: 'tangly1024/NotionNext'
     },
+    gitter: '', // gitter聊天室
     DaoVoiceId: '', // DaoVoice http://dashboard.daovoice.io/get-started
     TidioId: '' // https://www.tidio.com/
   },
diff --git a/components/ArticleDetail.js b/components/ArticleDetail.js
index e8e75094..66245caa 100644
--- a/components/ArticleDetail.js
+++ b/components/ArticleDetail.js
@@ -113,7 +113,6 @@ export default function ArticleDetail ({ post, blockMap, recommendPosts, prev, n
             <section id='notion-article' className='px-1'>
               {blockMap && (
                 <NotionRenderer
-                  className={`${BLOG.font}`}
                   recordMap={blockMap}
                   mapPageUrl={mapPageUrl}
                   components={{
diff --git a/components/MenuButtonGroup.js b/components/MenuButtonGroup.js
index 50e93f32..7180d7dd 100644
--- a/components/MenuButtonGroup.js
+++ b/components/MenuButtonGroup.js
@@ -21,7 +21,7 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
         if (link.show) {
           const selected = (router.pathname === link.to) || (router.asPath === link.to)
           return <Link key={`${link.id}-${link.to}`} title={link.to} href={link.to} >
-            <a className={'py-1 my-1 px-5 mx-2 duration-300 text-base hover:bg-gray-500 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
+            <a className={'py-1 my-1 px-5 mx-2 duration-300 text-base hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center ' +
               (selected ? 'bg-gray-200 text-black' : ' ')} >
               <div className='my-auto justify-center flex '>
                 <FontAwesomeIcon icon={link.icon} />
diff --git a/components/PaginationNumber.js b/components/PaginationNumber.js
index d7f36f59..ea5114db 100644
--- a/components/PaginationNumber.js
+++ b/components/PaginationNumber.js
@@ -48,12 +48,11 @@ const PaginationNumber = ({ page, showNext, totalPage }) => {
 }
 
 function getPageElement (page, currentPage) {
-  console.log(page, currentPage)
   return <Link href={`/page/${page}`} key={page} passHref>
-      <div className={(page + '' === currentPage ? 'font-bold bg-gray-500 dark:bg-gray-400 text-white ' : 'border-t-2 duration-500 border-white hover:border-gray-400 ') +
+      <a className={(page + '' === currentPage + '' ? 'font-bold bg-gray-500 dark:bg-gray-400 text-white ' : 'border-t-2 duration-500 border-white hover:border-gray-400 ') +
       ' border-white dark:border-gray-700 dark:hover:border-gray-400 cursor-pointer w-6 text-center font-light hover:font-bold'}>
       {page}
-      </div>
+      </a>
     </Link>
 }
 function generatePages (page, currentPage, totalPage) {
diff --git a/components/Tabs.js b/components/Tabs.js
index 0ce4a646..2655d48b 100644
--- a/components/Tabs.js
+++ b/components/Tabs.js
@@ -18,7 +18,7 @@ const Tabs = ({ children }) => {
   })
 
   if (count === 1) {
-    return <section className='shadow'>
+    return <section className='shadow hover:shadow-xl duration-200'>
       {children}
     </section>
   }
diff --git a/components/ThirdPartyScript.js b/components/ThirdPartyScript.js
index f3a79c12..c06c3722 100644
--- a/components/ThirdPartyScript.js
+++ b/components/ThirdPartyScript.js
@@ -37,6 +37,18 @@ const ThirdPartyScript = () => {
       />
     </>)}
 
+    {/* */}
+    {BLOG.gitter && (<>
+      <script async dangerouslySetInnerHTML={{
+        __html: `
+                ((window.gitter = {}).chat = {}).options = {
+                  room: 'tangly1024/community'
+                };
+                `
+      }}/>
+    <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
+    </>)}
+
     {/* 代码统计 */}
     {BLOG.isProd && (<>
 
diff --git a/components/Toc.js b/components/Toc.js
index 8bc6877e..dc543f98 100644
--- a/components/Toc.js
+++ b/components/Toc.js
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import Progress from './Progress'
@@ -12,8 +12,9 @@ import Progress from './Progress'
  */
 const Toc = ({ toc, targetRef }) => {
   // 无目录就直接返回空
-  if (!toc || toc.length < 1) return <></>
-
+  if (!toc || toc.length < 1) {
+    return <></>
+  }
   // 监听滚动事件
   React.useEffect(() => {
     window.addEventListener('scroll', actionSectionScrollSpy)
@@ -26,7 +27,7 @@ const Toc = ({ toc, targetRef }) => {
   // 同步选中目录事件
   const [activeSection, setActiveSection] = React.useState(null)
   const throttleMs = 100
-  const actionSectionScrollSpy = useCallback(throttle(() => {
+  const actionSectionScrollSpy = React.useCallback(throttle(() => {
     const sections = document.getElementsByClassName('notion-h')
     let prevBBox = null
     let currentSectionId = activeSection
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index cbb1451b..3a195739 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -53,7 +53,7 @@ const BaseLayout = ({
 
       <>{headerSlot}</>
 
-      <div className='h-0.5 w-full bg-gray-700 dark:bg-gray-600'></div>
+      <div className='h-0.5 w-full bg-gray-700 dark:bg-gray-600 hidden lg:block'></div>
 
       <main id='wrapper' className='flex justify-center flex-1 mx-auto pb-12'>
           <SideAreaLeft targetRef={targetRef} post={post} posts={totalPosts} tags={tags} currentSearch={currentSearch} currentTag={currentTag} categories={categories} currentCategory={currentCategory}/>
diff --git a/pages/_document.js b/pages/_document.js
index b72bec52..e947e64c 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -18,7 +18,7 @@ class MyDocument extends Document {
           <ThirdPartyScript />
         </Head>
 
-        <body className='bg-day dark:bg-night duration-200'>
+        <body className={`${BLOG.font} bg-day dark:bg-night duration-200`}>
           <Main />
           <NextScript />
         </body>
diff --git a/pages/archive/index.js b/pages/archive/index.js
index 1d4c1550..2e0c3c96 100644
--- a/pages/archive/index.js
+++ b/pages/archive/index.js
@@ -70,7 +70,7 @@ const Index = ({ allPosts, tags, categories }) => {
 
   return (
     <BaseLayout meta={meta} tags={tags} categories={categories}>
-        <div className='mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-gray-800 rounded-xl shadow-md min-h-full'>
+        <div className='mb-10 pb-20 bg-white md:p-12 p-3 dark:bg-gray-800 shadow-md min-h-full'>
           {Object.keys(archivePosts).map(archiveTitle => (
              <BlogPostArchive key={archiveTitle} posts={archivePosts[archiveTitle]} archiveTitle={archiveTitle}/>
           ))}
diff --git a/public/fonts/IBMPlexSansVar-Italic.woff2 b/public/fonts/IBMPlexSansVar-Italic.woff2
new file mode 100644
index 00000000..29b46d19
Binary files /dev/null and b/public/fonts/IBMPlexSansVar-Italic.woff2 differ
diff --git a/public/fonts/IBMPlexSansVar-Roman.woff2 b/public/fonts/IBMPlexSansVar-Roman.woff2
new file mode 100644
index 00000000..c58615dd
Binary files /dev/null and b/public/fonts/IBMPlexSansVar-Roman.woff2 differ
diff --git a/public/fonts/SourceSerif-Italic.var.woff2 b/public/fonts/SourceSerif-Italic.var.woff2
new file mode 100644
index 00000000..24d617d0
Binary files /dev/null and b/public/fonts/SourceSerif-Italic.var.woff2 differ
diff --git a/public/fonts/SourceSerif.var.woff2 b/public/fonts/SourceSerif.var.woff2
new file mode 100644
index 00000000..370649cf
Binary files /dev/null and b/public/fonts/SourceSerif.var.woff2 differ
diff --git a/styles/notion.css b/styles/notion.css
index 951de56e..eace4c58 100644
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -72,6 +72,7 @@
   line-height: 1.5;
   color: var(--fg-color);
   caret-color: var(--fg-color);
+  font-family: inherit;
 }
 
 .notion > * {
diff --git a/tailwind.config.js b/tailwind.config.js
index 1d4cd847..565b54cc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,9 +1,28 @@
 const BLOG = require('./blog.config')
-
+const { fontFamily } = require('tailwindcss/defaultTheme')
+const CJK = require('./lib/cjk')
+const fontSansCJK = !CJK()
+  ? []
+  : [`"Noto Sans CJK ${CJK()}"`, `"Noto Sans ${CJK()}"`]
+const fontSerifCJK = !CJK()
+  ? []
+  : [`"Noto Serif CJK ${CJK()}"`, `"Noto Serif ${CJK()}"`]
 module.exports = {
   purge: ['./pages/**/*.js', './components/**/*.js', './layouts/**/*.js'],
   darkMode: BLOG.appearance === 'class' ? 'media' : 'class', // or 'media' or 'class'
   theme: {
+    fontFamily: {
+      sans: ['"IBM Plex Sans"', ...fontFamily.sans, ...fontSansCJK],
+      serif: ['"Source Serif"', ...fontFamily.serif, ...fontSerifCJK],
+      noEmoji: [
+        '"IBM Plex Sans"',
+        'ui-sans-serif',
+        'system-ui',
+        '-apple-system',
+        'BlinkMacSystemFont',
+        'sans-serif'
+      ]
+    },
     extend: {
       colors: {
         day: {