diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
new file mode 100644
index 00000000..9233dcf1
--- /dev/null
+++ b/.devcontainer/Dockerfile
@@ -0,0 +1,2 @@
+ARG VARIANT="16-buster"
+FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 00000000..a069f0cc
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,10 @@
+{
+  "name": "Gatsby OI Wiki",
+  "build": {
+    "dockerfile": "Dockerfile",
+    "args": {
+      "VARIANT": "14"
+    }
+  },
+  "postStartCommand": "yarn install"
+}
diff --git a/.gitpod.yml b/.gitpod.yml
index 5cb483fb..fecc2780 100644
--- a/.gitpod.yml
+++ b/.gitpod.yml
@@ -1,3 +1,3 @@
 tasks:
-  - init: npm install
-    command: npm run develop
+  - init: yarn install
+    command: yarn dev
diff --git a/README.md b/README.md
index 85bfb1da..71b8c267 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # gatsby-oiwiki
 
-![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)
+[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/OI-wiki/gatsby-oi-wiki)
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FOI-wiki%2Fgatsby-oi-wiki.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FOI-wiki%2Fgatsby-oi-wiki?ref=badge_shield)
 
 正在开发中的基于 gatsby 的渲染框架。欢迎您点击下方链接入群并参与项目。
diff --git a/gatsby-theme-oi-wiki/.eslintrc.js b/gatsby-theme-oi-wiki/.eslintrc.js
index 3f1d19f7..28b84eb6 100644
--- a/gatsby-theme-oi-wiki/.eslintrc.js
+++ b/gatsby-theme-oi-wiki/.eslintrc.js
@@ -64,7 +64,7 @@ module.exports = {
         '@typescript-eslint/ban-ts-comment': 'warn',
         'no-unused-vars': 'off',
         '@typescript-eslint/no-unused-vars': [
-          'warn',
+          'warn', { 'argsIgnorePattern': '^_' },
         ],
         '@typescript-eslint/explicit-module-boundary-types': 'off',
         '@typescript-eslint/no-explicit-any': 'off',
@@ -73,7 +73,9 @@ module.exports = {
     {
       files: [
         '.eslintrc.js',
-        'gatsby-*.js',
+        'gatsby-node.js',
+        'gatsby-config.js',
+        'esmRequire.js',
         'plugins/**/*.js',
       ],
       env: {
diff --git a/gatsby-theme-oi-wiki/esmRequire.js b/gatsby-theme-oi-wiki/esmRequire.js
new file mode 100644
index 00000000..7dd9f2e6
--- /dev/null
+++ b/gatsby-theme-oi-wiki/esmRequire.js
@@ -0,0 +1,34 @@
+/**
+ * @file export compiled ES modules as a workaround before Gatsby properly handles it
+ */
+
+const esm = require('esm')
+const fs = require('fs')
+const Module = require('module')
+
+
+// Node: bypass [ERR_REQUIRE_ESM]
+const orig = Module._extensions['.js']
+Module._extensions['.js'] = function (module, filename) {
+  try {
+    return orig(module, filename)
+  } catch (e) {
+    if (e.code === 'ERR_REQUIRE_ESM') {
+      const content = fs.readFileSync(filename, 'utf8')
+      module._compile(content, filename)
+    }
+  }
+}
+
+const _esmRequire = esm(module, {
+  cjs: true,
+  mode: 'all',
+})
+
+// don't pollute Module
+Module._extensions['.js'] = orig
+
+
+module.exports = function esmRequire(id) {
+  return _esmRequire(id)
+}
diff --git a/gatsby-theme-oi-wiki/gatsby-browser.js b/gatsby-theme-oi-wiki/gatsby-browser.js
index 67d5868e..549e3626 100644
--- a/gatsby-theme-oi-wiki/gatsby-browser.js
+++ b/gatsby-theme-oi-wiki/gatsby-browser.js
@@ -1,6 +1,7 @@
-require('./static/extra.css')
+import('./static/extra.css')
+import WrapRootElement from './src/gatsby/WrapRootElement'
 
-exports.onRouteUpdate = () => {
+const onRouteUpdate = () => {
   if (process.env.GATSBY_IS_DEV) {
     requestIdleCallback(() => MathJax.typeset())
   }
@@ -10,3 +11,5 @@ exports.onRouteUpdate = () => {
     console.error(e)
   }
 }
+
+export { onRouteUpdate, WrapRootElement as wrapRootElement }
diff --git a/gatsby-theme-oi-wiki/gatsby-config.esm.js b/gatsby-theme-oi-wiki/gatsby-config.esm.js
deleted file mode 100644
index e3a7b624..00000000
--- a/gatsby-theme-oi-wiki/gatsby-config.esm.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * @file export compiled ES modules as a workaround before Gatsby properly handles it
- */
-
-const esm = require('esm')
-const fs = require('fs')
-
-// Node: bypass [ERR_REQUIRE_ESM] limitations
-const Module = require('module')
-const orig = Module._extensions['.js']
-Module._extensions['.js'] = function (module, filename) {
-  const contents = fs.readFileSync(filename, 'utf8')
-  module._compile(contents, filename)
-}
-
-// ESM: compile
-const esmRequire = esm(module, {
-  cjs: true,
-  mode: 'all',
-})
-
-const imports = {
-  remarkDetails: esmRequire('remark-details').default,
-}
-
-Module._extensions['.js'] = orig
-module.exports = imports
diff --git a/gatsby-theme-oi-wiki/gatsby-config.js b/gatsby-theme-oi-wiki/gatsby-config.js
index 7addc5c9..a7645867 100644
--- a/gatsby-theme-oi-wiki/gatsby-config.js
+++ b/gatsby-theme-oi-wiki/gatsby-config.js
@@ -1,4 +1,5 @@
 const path = require('path')
+const esmRequire = require('./esmRequire')
 
 const IS_EXEC_BUILD = process.env.gatsby_executing_command === 'build'
 const IS_PROD = process.env.PRODUCTION === 'true' ||
@@ -26,8 +27,6 @@ const mathRehype = IS_EXEC_BUILD
   ? [require('rehype-mathjax/chtml'), { fontURL }]
   : [require('rehype-mathjax/browser')]
 
-const { remarkDetails } = require('./gatsby-config.esm')
-
 module.exports = {
   plugins: [
     {
@@ -87,7 +86,7 @@ module.exports = {
         ],
         remarkPlugins: [
           require('remark-math'),
-          remarkDetails,
+          esmRequire('remark-details').default,
           [require('@mgtd/remark-shiki').remarkShiki, {
             semantic: false,
             theme: 'css-variables',
diff --git a/gatsby-theme-oi-wiki/gatsby-node.js b/gatsby-theme-oi-wiki/gatsby-node.js
index 4609ece9..655feea5 100644
--- a/gatsby-theme-oi-wiki/gatsby-node.js
+++ b/gatsby-theme-oi-wiki/gatsby-node.js
@@ -1,7 +1,8 @@
-const _ = require('lodash')
+const kebabCase = require('lodash/kebabCase')
 const git = require('simple-git')
 const { createFilePath } = require('gatsby-source-filesystem')
 const { SitemapManager } = require('sitemap-manager')
+const path = require('path')
 
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
@@ -16,10 +17,6 @@ exports.onCreateWebpackConfig = ({ actions }) => {
   })
 }
 
-const gitQuery = async function (prop) {
-  const res = await git().log(['-15', prop]).catch(err => console.log(err))
-  return res
-}
 exports.onCreateNode = ({ node, actions, getNode }) => {
   const { createNodeField } = actions
   // you only want to operate on `Mdx` nodes. If you had content from a
@@ -43,12 +40,10 @@ exports.onCreateNode = ({ node, actions, getNode }) => {
   }
 }
 
-exports.createPages = async ({ actions, graphql, reporter }) => {
-  const { createPage } = actions
+const gitQuery = async (prop) => await git().log(['-15', prop])
 
-  const docTemplate = require.resolve('./src/templates/doc.js')
-  const tagTemplate = require.resolve('./src/templates/tags.js')
-  const logTemplate = require.resolve('./src/templates/changelog.js')
+exports.createPages = async (args) => {
+  const { graphql, actions, reporter } = args
 
   const result = await graphql(`
     {
@@ -78,36 +73,41 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     }
   `)
 
-  // handle errors
+  // return when the result is wrong
   if (result.errors) {
     reporter.panicOnBuild('Error while running GraphQL query.')
     return
   }
 
-  const posts = result.data.postsRemark.edges
-  // console.log(posts)
-  // Create post detail pages
+  const { createPage } = actions
+  const data = result.data
+
+  // Extract doc data from query
+  const posts = data.postsRemark.edges
+  const docTemplate = require.resolve('./src/templates/Doc.tsx')
+  const logTemplate = require.resolve('./src/templates/Changelog.tsx')
 
   for (const index in posts) {
     const { node } = posts[index]
-
-    const previous = index === posts.length - 1 ? null : posts[index + 1]
+    const prev = index === posts.length - 1 ? null : posts[index + 1]
     const next = index === 0 ? null : posts[index - 1]
-    // /workspace/gatsby-oi-wiki/docs/empty.md -> docs/empty.md
     const { fileAbsolutePath: path } = node
-    const relativePath = path.slice(path.indexOf('/docs') + 1)
+    const relativePath = path?.slice(path.indexOf('/docs') + 1) || ''
+
+    const log = await gitQuery(relativePath).catch(err => console.error(err))
 
-    const log = await gitQuery(relativePath)
+    // Make doc page
     createPage({
       path: node.fields.slug,
       component: docTemplate,
       context: {
         id: node.id,
         lastModified: log.latest?.date || new Date().toString(),
-        previous,
+        prev,
         next,
       },
     })
+    // Make changelog page
     createPage({
       path: node.fields.slug + 'changelog/',
       component: logTemplate,
@@ -119,81 +119,174 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
     })
   }
 
+
   // Extract tag data from query
   const tags = result.data.tagsGroup.group
+  const tagsTemplate = require.resolve('./src/templates/Tag.tsx')
 
   // Make tag pages
   tags.forEach((tag) => {
     createPage({
-      path: `/tags/${_.kebabCase(tag.fieldValue)}/`,
-      component: tagTemplate,
+      path: `/tags/${kebabCase(tag.fieldValue)}/`,
+      component: tagsTemplate,
       context: {
         tag: tag.fieldValue,
       },
     })
   })
-
-  if (result.errors) {
-    reporter.panic(result.errors)
-  }
 }
 
-exports.onPostBuild = async ({ graphql, reporter }) => {
-  let queryResult = await graphql(`{
-    site {
-      siteMetadata {
-        siteUrl
-      }
-    }
-    postsQuery:allMarkdownRemark {
-      edges {
-        node {
-          id
-          fields{
-            slug
-          }
-          fileAbsolutePath
-        }
-      }
-    }
-    tagsQuery:allMarkdownRemark(limit: 2000) {
-      group(field: frontmatter___tags) {
-        fieldValue
-      }
-    }
-  }`)
-  if (queryResult.errors) {
-    reporter.panicOnBuild('Error while running GraphQL query to create sitemaps.', queryResult.errors)
-  }
-  queryResult = queryResult.data
-  const siteUrl = queryResult.site.siteMetadata.siteUrl
+// exports.createPages = async ({ actions, graphql, reporter }) => {
+//   const { createPage } = actions
+//
+//   const docTemplate = require.resolve('./src/templates/doc.js')
+//   const tagTemplate = require.resolve('./src/templates/tags.js')
+//   const logTemplate = require.resolve('./src/templates/changelog.js')
+//
+//   const result = await graphql(`
+//     {
+//       postsRemark: allMarkdownRemark(
+//         sort: { order: DESC, fields: [frontmatter___title] }
+//         limit: 2000
+//       ) {
+//         edges {
+//           node {
+//             fields {
+//               slug
+//             }
+//             id
+//             frontmatter {
+//               tags
+//               title
+//             }
+//             fileAbsolutePath
+//           }
+//         }
+//       }
+//       tagsGroup: allMarkdownRemark(limit: 2000) {
+//         group(field: frontmatter___tags) {
+//           fieldValue
+//         }
+//       }
+//     }
+//   `)
+//
+//   // handle errors
+//   if (result.errors) {
+//     reporter.panicOnBuild('Error while running GraphQL query.')
+//     return
+//   }
+//
+//   const posts = result.data.postsRemark.edges
+//   // console.log(posts)
+//   // Create post detail pages
+//
+//   for (const index in posts) {
+//     const { node } = posts[index]
+//
+//     const previous = index === posts.length - 1 ? null : posts[index + 1]
+//     const next = index === 0 ? null : posts[index - 1]
+//     // /workspace/gatsby-oi-wiki/docs/empty.md -> docs/empty.md
+//     const { fileAbsolutePath: path } = node
+//     const relativePath = path.slice(path.indexOf('/docs') + 1)
+//
+//     const log = await gitQuery(relativePath)
+//     createPage({
+//       path: node.fields.slug,
+//       component: docTemplate,
+//       context: {
+//         id: node.id,
+//         lastModified: log.latest?.date || new Date().toString(),
+//         previous,
+//         next,
+//       },
+//     })
+//     createPage({
+//       path: node.fields.slug + 'changelog/',
+//       component: logTemplate,
+//       context: {
+//         title: node.frontmatter.title,
+//         changelog: log,
+//         relativePath,
+//       },
+//     })
+//   }
+//
+//   // Extract tag data from query
+//   const tags = result.data.tagsGroup.group
+//
+//   // Make tag pages
+//   tags.forEach((tag) => {
+//     createPage({
+//       path: `/tags/${_.kebabCase(tag.fieldValue)}/`,
+//       component: tagTemplate,
+//       context: {
+//         tag: tag.fieldValue,
+//       },
+//     })
+//   })
+//
+//   if (result.errors) {
+//     reporter.panic(result.errors)
+//   }
+// }
 
-  const MySitemap = new SitemapManager({ siteURL: siteUrl })
-  for (const index in queryResult.postsQuery.edges) {
-    const { node } = queryResult.postsQuery.edges[index]
-    const { fileAbsolutePath: path } = node
-    const relativePath = path.slice(path.indexOf('/docs') + 1)
-    const lastmod = (await gitQuery(relativePath)).latest?.date || new Date().toString()
-
-    MySitemap.addUrl('articles', [{
-      loc: new URL(node.fields.slug, siteUrl).toString(),
-      lastmod,
-    }])
-    MySitemap.addUrl('logs', [{
-      loc: new URL(node.fields.slug + 'changelog/', siteUrl).toString(),
-      lastmod,
-    }])
-  }
-  queryResult.tagsQuery.group.forEach(({ fieldValue }) => {
-    MySitemap.addUrl('tags', [{
-      loc: new URL(`/tags/${_.kebabCase(fieldValue)}/`, siteUrl).toString(),
-    }])
-  })
-  MySitemap.addUrl('pages', [
-    { loc: new URL('/pages/', siteUrl).toString() },
-    { loc: new URL('/settings/', siteUrl).toString() },
-  ])
-  await MySitemap.finish().catch((e) => {
-    reporter.error(e)
-  })
-}
+// exports.onPostBuild = async ({ graphql, reporter }) => {
+//   let queryResult = await graphql(`{
+//     site {
+//       siteMetadata {
+//         siteUrl
+//       }
+//     }
+//     postsQuery:allMarkdownRemark {
+//       edges {
+//         node {
+//           id
+//           fields{
+//             slug
+//           }
+//           fileAbsolutePath
+//         }
+//       }
+//     }
+//     tagsQuery:allMarkdownRemark(limit: 2000) {
+//       group(field: frontmatter___tags) {
+//         fieldValue
+//       }
+//     }
+//   }`)
+//   if (queryResult.errors) {
+//     reporter.panicOnBuild('Error while running GraphQL query to create sitemaps.', queryResult.errors)
+//   }
+//   queryResult = queryResult.data
+//   const siteUrl = queryResult.site.siteMetadata.siteUrl
+//
+//   const MySitemap = new SitemapManager({ siteURL: siteUrl })
+//   for (const index in queryResult.postsQuery.edges) {
+//     const { node } = queryResult.postsQuery.edges[index]
+//     const { fileAbsolutePath: path } = node
+//     const relativePath = path.slice(path.indexOf('/docs') + 1)
+//     const lastmod = (await gitQuery(relativePath)).latest?.date || new Date().toString()
+//
+//     MySitemap.addUrl('articles', [{
+//       loc: new URL(node.fields.slug, siteUrl).toString(),
+//       lastmod,
+//     }])
+//     MySitemap.addUrl('logs', [{
+//       loc: new URL(node.fields.slug + 'changelog/', siteUrl).toString(),
+//       lastmod,
+//     }])
+//   }
+//   queryResult.tagsQuery.group.forEach(({ fieldValue }) => {
+//     MySitemap.addUrl('tags', [{
+//       loc: new URL(`/tags/${_.kebabCase(fieldValue)}/`, siteUrl).toString(),
+//     }])
+//   })
+//   MySitemap.addUrl('pages', [
+//     { loc: new URL('/pages/', siteUrl).toString() },
+//     { loc: new URL('/settings/', siteUrl).toString() },
+//   ])
+//   await MySitemap.finish().catch((e) => {
+//     reporter.error(e)
+//   })
+// }
diff --git a/gatsby-theme-oi-wiki/gatsby-ssr.js b/gatsby-theme-oi-wiki/gatsby-ssr.js
index d4606900..ecf5fff9 100644
--- a/gatsby-theme-oi-wiki/gatsby-ssr.js
+++ b/gatsby-theme-oi-wiki/gatsby-ssr.js
@@ -1,46 +1,8 @@
-const React = require('react')
-const script = require('./static/script')
+import WrapRootElement from './src/gatsby/WrapRootElement'
+import onRenderBody from './src/gatsby/onRenderBody'
+import onPreRenderHTML from './src/gatsby/onPreRenderHTML'
+import { enableStaticRendering } from 'mobx-react-lite'
 
-const darkModeSwitch = `(${script.default.toString()})()`
+enableStaticRendering(true)
 
-const HtmlAttributes = {
-  lang: 'zh-cmn-Hans',
-}
-
-const HeadComponents = [
-  <meta key="charset" charSet="utf-8"/>,
-  <meta key="ua" httpEquiv="x-ua-compatible" content="ie=edge"/>,
-  <meta key="viewport" name="viewport"
-        content="width=device-width, initial-scale=1, shrink-to-fit=no"
-  />,
-  <script key="analytics" dangerouslySetInnerHTML={{
-    __html: `window.ga_tid = "UA-124485594-1";
-    window.ga_api = "https://margatroid.xyz/vue.min.js";`,
-  }}/>,
-  <script key="cfga" src="https://cdn.jsdelivr.net/npm/cfga@1.0.3" async></script>,
-  <script key="theme" dangerouslySetInnerHTML={{
-    __html: darkModeSwitch,
-  }}/>,
-]
-
-exports.onPreRenderHTML = ({
-                             getPostBodyComponents,
-                             replacePostBodyComponents,
-                           }) => {
-  const comps = getPostBodyComponents()
-  process.env.GATSBY_IS_DEV && comps.push(
-    <script
-      src="https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-mml-chtml.js"
-      id="MathJax-script"
-    />,
-  )
-  replacePostBodyComponents(comps)
-}
-
-exports.onRenderBody = ({
-                          setHeadComponents,
-                          setHtmlAttributes,
-                        }) => {
-  setHtmlAttributes(HtmlAttributes)
-  setHeadComponents(HeadComponents)
-}
+export { onPreRenderHTML, onRenderBody, WrapRootElement as wrapRootElement }
diff --git a/gatsby-theme-oi-wiki/package.json b/gatsby-theme-oi-wiki/package.json
index 480df390..848241e3 100644
--- a/gatsby-theme-oi-wiki/package.json
+++ b/gatsby-theme-oi-wiki/package.json
@@ -16,12 +16,13 @@
     "@emotion/react": "^11.4.1",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.3.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.58",
     "@mgtd/remark-shiki": "^2.2.0",
     "@mgtd/vssue-api-github-v3": "^2.4.8",
     "@mgtd/vssue-api-github-v4": "^2.4.5",
+    "@mui/icons-material": "^5.0.1",
+    "@mui/lab": "^5.0.0-alpha.49",
     "@mui/material": "^5.0.0",
+    "@use-gesture/react": "^10.0.0-beta.26",
     "ace-builds": "^1.4.12",
     "autosuggest-highlight": "^3.1.1",
     "axios": "^0.21.1",
@@ -45,9 +46,13 @@
     "gatsby-transformer-remark-rehype": "^4.0.0",
     "gatsby-transformer-sharp": "^3.9",
     "hast-util-to-text": "^3.0.0",
+    "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "mark.js": "^8.11.1",
     "mdast-util-toc": "^6.0.0",
+    "mobx": "^6.3.3",
+    "mobx-persist-store": "^1.0.3",
+    "mobx-react-lite": "^3.2.1",
     "path-browserify": "^1.0.1",
     "preact": "^10.5.14",
     "preact-render-to-string": "^5.1.19",
@@ -84,7 +89,7 @@
     "esm": "^3.2.25",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.24",
     "schema-dts": "^0.9.0",
-    "ts-graphql-plugin": "^2.1.3",
+    "ts-graphql-plugin": "^2.1.4",
     "typescript": "^4.3.5"
   },
   "optionalDependencies": {
diff --git a/gatsby-theme-oi-wiki/src/components/Code.tsx b/gatsby-theme-oi-wiki/src/components/Code.tsx
index 02fab6dc..e69d2959 100644
--- a/gatsby-theme-oi-wiki/src/components/Code.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Code.tsx
@@ -6,7 +6,7 @@ import { navigate } from 'gatsby'
 import has from 'lodash/has'
 import React, { useCallback, useRef, useState } from 'react'
 import type { LangType } from '../lib/play/codeLang'
-import type { PlaygroundLocationState } from '../pages/play'
+import type { PlaygroundLocationState } from '../old-pages/play'
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -78,7 +78,7 @@ const Code: React.FC<{
             }
           }}
         >
-          <AssignmentOutlined />
+          <AssignmentOutlined/>
         </IconButton>
       </Tooltip>
       <Tooltip title="运行" arrow>
@@ -95,7 +95,7 @@ const Code: React.FC<{
           }}
           aria-label="run"
         >
-          <CodeOutlined />
+          <CodeOutlined/>
         </IconButton>
       </Tooltip>
       {children}
diff --git a/gatsby-theme-oi-wiki/src/components/CodeEditor/index.tsx b/gatsby-theme-oi-wiki/src/components/CodeEditor/index.tsx
deleted file mode 100644
index 0eba0c29..00000000
--- a/gatsby-theme-oi-wiki/src/components/CodeEditor/index.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { makeStyles, Paper, Typography } from '@material-ui/core'
-import React from 'react'
-
-import type { IAceEditorProps } from 'react-ace'
-import type { LangType } from '../../lib/play/codeLang'
-
-export interface CodeEditorProps extends Omit<IAceEditorProps, 'mode'> {
-  title: string
-  lang?: LangType
-}
-
-const useStyles = makeStyles({
-  paper: {
-    height: 'calc(100% - 32px)',
-  },
-  editor: {
-    height: '100%',
-  },
-})
-
-// fix ssr issue related to react-ace
-const Editor = React.lazy(() => import('./Editor'))
-
-const CodeEditor: React.FC<CodeEditorProps> = ({
-  title,
-  lang,
-  ...aceProps
-}) => {
-  const classes = useStyles()
-
-  return (
-    <>
-      <Typography variant="h6">{title}</Typography>
-      <Paper className={classes.paper}>
-        {typeof window !== 'undefined' && (
-          <React.Suspense fallback={<div>Loading editor...</div>}>
-            <Editor className={classes.editor} lang={lang} {...aceProps} />
-          </React.Suspense>
-        )}
-      </Paper>
-    </>
-  )
-}
-
-export default CodeEditor
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx b/gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx
index 61771de6..8d758fc0 100644
--- a/gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Comment/Card/ReactionButton.tsx
@@ -1,39 +1,68 @@
-import {
-  Avatar,
-  Button,
-  CircularProgress,
-} from '@material-ui/core'
-
 import React, { useState } from 'react'
-import AvatarGroup from '@material-ui/lab/AvatarGroup'
 import clsx from 'clsx'
 import { User } from '@mgtd/vssue-api-github-v4/lib/types'
-import { useStyles } from './styles'
+import SvgIcon from '@mui/material/SvgIcon'
+import Button from '@mui/material/Button'
+import { AvatarGroup, CircularProgress } from '@mui/material'
+import Avatar from '@mui/material/Avatar'
+import styled from '@mui/material/styles/styled'
+import { css } from '@emotion/react'
+import red from '@mui/material/colors/red'
+
+const StyledBtn = styled(Button)`
+  min-width: 0;
+
+  &.null-reaction {
+    padding: 5px 10px;
+
+    .MuiButton-startIcon {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
 
-import { SvgIconComponent } from '@material-ui/icons'
+  &.clicked {
+    .MuiButton-startIcon {
+      .red {
+        color: ${red[500]}
+      }
+
+      .yellow {
+        color: #ffcf56;
+      }
+    }
+  }
+`
+
+const StyledAvatar = styled(Avatar)(({ theme }) => css`
+  width: ${theme.spacing(3)};
+  height: ${theme.spacing(3)};
+  font-size: ${theme.spacing(1.5)};
+`)
 
 const reactionButtonDefaultProps = {
   initialCount: 0,
   isClicked: false,
 }
 
-type ReactionButtonProps = {
-  icon: SvgIconComponent
-  clickedClass: string
-  disabled: boolean
-  currentUser: User
-  addReaction: () => Promise<void>,
-  removeReaction: () => Promise<void>,
-  users: User[],
-} & Partial<typeof reactionButtonDefaultProps>
+export interface ReactionButtonProps extends Partial<typeof reactionButtonDefaultProps> {
+  icon: typeof SvgIcon;
+  iconClickedClassName: string;
+  disabled: boolean;
+  currentUser: User;
+  addReaction: () => Promise<void>;
+  removeReaction: () => Promise<void>;
+  users: User[];
+}
 
 const ReactionButton: React.FC<ReactionButtonProps> = (props) => {
-  const classes = useStyles()
   const propsMerged = { ...reactionButtonDefaultProps, ...props }
+
   const [isClicked, setIsClicked] = useState(propsMerged.isClicked)
   const [count, setCount] = useState(propsMerged.initialCount)
   const [users, setUsers] = useState(propsMerged.users)
   const [loading, setLoading] = useState(false)
+
   const clickFunc = async (): Promise<void> => {
     if (isClicked) {
       setCount(count - 1)
@@ -52,24 +81,29 @@ const ReactionButton: React.FC<ReactionButtonProps> = (props) => {
     }
     setIsClicked(!isClicked)
   }
+
   const SvgTag = props.icon
+
   return (
-    <Button
-      color="default"
+    <StyledBtn
       size="small"
       disabled={propsMerged.disabled || loading}
-      startIcon={<SvgTag className={clsx(isClicked && props.clickedClass)} />}
-      className={clsx(count === 0 && classes.nullReaction, classes.reactionButton)}
+      startIcon={<SvgTag className={props.iconClickedClassName}/>}
+      className={clsx({ 'null-reaction': count === 0, 'clicked': isClicked })}
       onClick={clickFunc}
-      classes={count === 0 ? { startIcon: classes.nullReactionStartIcon, label: classes.labelMargin } : undefined}
     >
-      {loading ? <CircularProgress size={24} style={{ marginLeft: '4px', marginRight: '4px' }} /> : (count !== 0 && count)}
-      {!loading && <AvatarGroup max={3} style={{ marginLeft: '4px' }} classes={{ avatar: classes.avatarSmall }}>
-        {users.map(({ avatar, username }) => (
-          <Avatar alt={username} src={avatar} key={username} />
-        ))}
-      </AvatarGroup>}
-    </Button>
+      {loading
+        ? <CircularProgress size={24} sx={{ mx: '4px' }}/>
+        : <>
+          {count !== 0 && count}
+          <AvatarGroup max={3} sx={{ ml: '4px' }}>
+            {users.map(({ avatar, username }) => (
+              <StyledAvatar alt={username} src={avatar} key={username}/>
+            ))}
+          </AvatarGroup>
+        </>
+      }
+    </StyledBtn>
   )
 }
 
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx b/gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx
index 5ca22d2c..26f59e29 100644
--- a/gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Comment/Card/index.tsx
@@ -1,30 +1,36 @@
-import {
-  Avatar,
-  Card,
-  CardActions,
-  CardContent,
-  CardHeader,
-  CircularProgress,
-  IconButton,
-} from '@material-ui/core'
-
-import {
-  Favorite as FavoriteIcon,
-  ThumbUp as ThumbUpIcon,
-  ThumbDown as ThumbDownIcon,
-  Reply as ReplyIcon,
-  Delete as DeleteIcon,
-} from '@material-ui/icons'
-
 import React, { useState } from 'react'
 import { User } from '@mgtd/vssue-api-github-v4/lib/types'
 import Time from '../../Time'
 import { Reactions } from '../types'
-import { useInputContentContext } from '../inputContext'
-import { useStyles } from './styles'
-import ReactionButton from './ReactionButton'
+import { useInputContentContext } from '../inputContentContext'
+import ReactionButton, { ReactionButtonProps } from './ReactionButton'
+import Card from '@mui/material/Card'
+import Avatar from '@mui/material/Avatar'
+import CardHeader from '@mui/material/CardHeader'
+import IconButton from '@mui/material/IconButton'
+import CircularProgress from '@mui/material/CircularProgress'
+import { ArrayItemType } from '../../../types/common'
+import Delete from '@mui/icons-material/Delete'
+import Favorite from '@mui/icons-material/Favorite'
+import Reply from '@mui/icons-material/Reply'
+import ThumbDown from '@mui/icons-material/ThumbDown'
+import ThumbUp from '@mui/icons-material/ThumbUp'
+import CardActions from '@mui/material/CardActions'
+import CardContent from '@mui/material/CardContent'
+import styled from '@mui/material/styles/styled'
+import { css } from '@emotion/react'
+
+type ReactionUnion = ArrayItemType<Reactions>['type']
 
-interface Props {
+type BtnInfoObj = {
+  [key in ReactionUnion]: Pick<ReactionButtonProps, 'icon' | 'iconClickedClassName'>
+}
+
+type ReactionObj = {
+  [key in ReactionUnion]: ArrayItemType<Reactions>
+}
+
+export interface CommentCardProps {
   disabled: boolean,
   currentUser: User,
   commentID: string | number,
@@ -35,87 +41,105 @@ interface Props {
   time: number | string | Date,
   reactions: Reactions,
   deleteComment: (commentID: string | number, setLoading: (loading: boolean) => void) => Promise<void>,
-  addReaction: (commentID: string | number, reaction: 'heart' | 'unlike' | 'like') => Promise<void>,
-  removeReaction: (commentID: string | number, reaction: 'heart' | 'unlike' | 'like') => Promise<void>
+  addReaction: (commentID: string | number, reaction: ReactionUnion) => Promise<void>,
+  removeReaction: (commentID: string | number, reaction: ReactionUnion) => Promise<void>
 }
 
-const CommentCard: React.FC<Props> = (props) => {
+const StyledCard = styled(Card)(({ theme }) => css`
+  margin-block: ${theme.spacing(1)};
+`)
+
+const StyledCardHeader = styled(CardHeader)(({ theme }) => css`
+  padding: ${theme.spacing(2)} ${theme.spacing(2)} 0;
+`)
+
+const StyledCardContent = styled(CardContent)(({ theme }) => css`
+  padding: 0 ${theme.spacing(2)};
+`)
+
+const btnInfoObj: BtnInfoObj = {
+  like: {
+    icon: ThumbUp,
+    iconClickedClassName: 'yellow',
+  },
+  unlike: {
+    icon: ThumbDown,
+    iconClickedClassName: 'yellow',
+  },
+  heart: {
+    icon: Favorite,
+    iconClickedClassName: 'red',
+  },
+}
+
+const CommentCard: React.FC<CommentCardProps> = (props) => {
   const { name, time, disabled, currentUser, reactions, commentID } = props
-  const classes = useStyles()
-  const like = reactions.find(item => item.type === 'like')
-  const unlike = reactions.find(item => item.type === 'unlike')
-  const heart = reactions.find(item => item.type === 'heart')
+  const reactionObj: ReactionObj = {
+    like: reactions.find(item => item.type === 'like') as ArrayItemType<Reactions>,
+    unlike: reactions.find(item => item.type === 'unlike') as ArrayItemType<Reactions>,
+    heart: reactions.find(item => item.type === 'heart') as ArrayItemType<Reactions>,
+  }
+
   const [deleteLoading, setDeleteLoading] = useState(false)
   const { setInputContent } = useInputContentContext()
+
   return (
-    <Card variant="outlined" className={classes.commentMargin}>
-      <CardHeader
-        avatar={<Avatar alt={name} src={props.avatarLink} />}
+    <StyledCard variant="outlined">
+      <StyledCardHeader
+        subheader={<Time time={time}/>}
+        avatar={<Avatar alt={name} src={props.avatarLink}/>}
         title={<>
-          {props.name} {currentUser.username === props.name &&
-            <IconButton
-              disabled={disabled}
-              size="small"
-              aria-label="delete"
-              className={classes.floatRight}
-              onClick={
-                () => { props.deleteComment(commentID, setDeleteLoading) }
-              }>
-              {deleteLoading
-                ? <CircularProgress size={20} />
-                : <DeleteIcon fontSize="small" />}
-            </IconButton>}
+          {props.name}
+          {currentUser.username === props.name &&
+          <IconButton
+            disabled={disabled}
+            size="small"
+            aria-label="delete"
+            sx={{ float: 'right' }}
+            onClick={() => {
+              props.deleteComment(commentID, setDeleteLoading)
+            }}>
+            {deleteLoading
+              ? <CircularProgress size={20}/>
+              : <Delete fontSize="small"/>}
+          </IconButton>
+          }
           <IconButton
             size="small"
             aria-label="reply"
-            className={classes.floatRight}
+            sx={{ float: 'right' }}
             onClick={() => {
               setInputContent(`> ${props.contentRaw}`)
             }}>
-            <ReplyIcon fontSize="small" />
+            <Reply fontSize="small"/>
           </IconButton>
         </>}
-        classes={{ root: classes.headerRoot }}
-        subheader={<Time time={time} />} />
-      <CardContent classes={{ root: classes.contentRoot }}>
-        <div dangerouslySetInnerHTML={{ __html: props.contentHTML }} />
-      </CardContent>
+      />
+      <StyledCardContent>
+        <div dangerouslySetInnerHTML={{ __html: props.contentHTML }}/>
+      </StyledCardContent>
       <CardActions>
-        <ReactionButton
-          icon={ThumbUpIcon}
-          clickedClass={classes.yellow}
-          disabled={disabled}
-          currentUser={currentUser}
-          initialCount={like.count}
-          isClicked={like.viewerHasReacted}
-          addReaction={async () => { await props.addReaction(commentID, 'like') }}
-          removeReaction={async () => { await props.removeReaction(commentID, 'like') }}
-          users={like.users}
-        />
-        <ReactionButton
-          icon={ThumbDownIcon}
-          clickedClass={classes.yellow}
-          disabled={disabled}
-          currentUser={currentUser}
-          initialCount={unlike.count}
-          isClicked={unlike.viewerHasReacted}
-          addReaction={async () => { await props.addReaction(commentID, 'unlike') }}
-          removeReaction={async () => { await props.removeReaction(commentID, 'unlike') }}
-          users={unlike.users}
-        />
-        <ReactionButton
-          icon={FavoriteIcon}
-          clickedClass={classes.red}
-          disabled={disabled}
-          currentUser={currentUser}
-          initialCount={heart.count}
-          isClicked={heart.viewerHasReacted}
-          addReaction={async () => { await props.addReaction(commentID, 'heart') }}
-          removeReaction={async () => { await props.removeReaction(commentID, 'heart') }}
-          users={heart.users}
-        />
+        {
+          Object.entries(reactionObj).map(([key, data]) => (
+            <ReactionButton
+              key={key}
+              disabled={disabled}
+              currentUser={currentUser}
+              initialCount={data.count}
+              isClicked={data.viewerHasReacted}
+              addReaction={async () => {
+                await props.addReaction(commentID, data.type)
+              }}
+              removeReaction={async () => {
+                await props.removeReaction(commentID, data.type)
+              }}
+              users={data.users}
+              {...btnInfoObj[data.type]}
+            />
+          ))
+        }
       </CardActions>
-    </Card>)
+    </StyledCard>)
 }
 
 export default CommentCard
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Card/styles.ts b/gatsby-theme-oi-wiki/src/components/Comment/Card/styles.ts
deleted file mode 100644
index 2683b10d..00000000
--- a/gatsby-theme-oi-wiki/src/components/Comment/Card/styles.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { makeStyles } from '@material-ui/core'
-import Red from '@material-ui/core/colors/red'
-
-export const useStyles = makeStyles(theme => ({
-  contentRoot: {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    paddingBottom: '0px',
-    paddingTop: '0px',
-  },
-  headerRoot: {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    paddingBottom: '0px',
-    paddingTop: theme.spacing(2),
-  },
-  commentMargin: {
-    marginTop: theme.spacing(1),
-    marginBottom: theme.spacing(1),
-  },
-  red: {
-    color: Red[500],
-  },
-  yellow: {
-    color: '#ffcf56',
-  },
-  nullReactionStartIcon: {
-    marginLeft: '0px',
-    marginRight: '0px',
-  },
-  nullReaction: {
-    padding: '5px 10px',
-  },
-  reactionButton: {
-    minWidth: '0px',
-  },
-  labelMargin: {
-    marginLeft: '1.5px',
-  },
-  avatarSmall: {
-    width: theme.spacing(3),
-    height: theme.spacing(3),
-    fontSize: theme.spacing(1.5),
-  },
-  floatRight: {
-    float: 'right',
-  },
-}))
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx b/gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx
deleted file mode 100644
index 0d26fe2c..00000000
--- a/gatsby-theme-oi-wiki/src/components/Comment/Comment.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import { Button, CircularProgress, Divider, makeStyles, Tooltip, Typography } from '@material-ui/core'
-import React, { useEffect, useState } from 'react'
-import GithubV3 from '@mgtd/vssue-api-github-v3'
-import GithubV4 from '@mgtd/vssue-api-github-v4'
-import createPersistedState from 'use-persisted-state'
-import CommentCard from './Card'
-import CommentInput from './CommentInput'
-import { Comments, Issue, User } from './types'
-import { InputContentProvider } from './inputContext'
-import { getComments } from './api'
-
-const useToken = createPersistedState('github-access-token')
-
-interface Props {
-  clientID: string,
-  clientSecret: string,
-  repo: string,
-  owner: string,
-  admin: Array<string>,
-  id: string,
-}
-
-const useStyles = makeStyles((theme) => ({
-  link: {
-    color: theme.palette.text.primary,
-  },
-}))
-
-const CommentComponent: React.FC<Props> = (props) => {
-  const classes = useStyles()
-  const defaultUser = { username: '未登录用户', avatar: undefined, homepage: undefined }
-  const [token, setToken] = useToken(null)
-  const revokeToken = (): void => {
-    setToken(null)
-    setUser(defaultUser)
-  }
-  const [user, setUser] = useState<User>(defaultUser)
-  const [comments, setComments] = useState<Comments>({ count: 0, page: 0, perPage: 0, data: [] })
-  const [noIssue, setNoIssue] = useState(false)
-  const filteredComments = comments.data.filter(({ isMinimized }) => !isMinimized)
-  const [issue, setIssue] = useState<Issue>()
-  const [createIssueLoading, setCreateIssueLoading] = useState(false)
-  const authorized = user.username !== '未登录用户' && token && !noIssue
-  const isAdmin = props.admin.indexOf(user.username) >= 0
-  const ghAPIV3 = new GithubV3({
-    baseURL: 'https://github.com',
-    owner: props.owner,
-    repo: props.repo,
-    labels: ['gitalk'],
-    clientId: props.clientID,
-    clientSecret: props.clientSecret,
-    state: '123',
-    proxy: url => `https://cors-anywhere.mgt.workers.dev/?${url}`,
-  })
-  const ghAPIV4 = new GithubV4({
-    baseURL: 'https://github.com',
-    owner: props.owner,
-    repo: props.repo,
-    labels: ['gitalk'],
-    clientId: props.clientID,
-    clientSecret: props.clientSecret,
-    state: '123',
-    proxy: url => `https://cors-anywhere.mgt.workers.dev/?${url}`,
-  })
-  useEffect(() => {
-    const asyncFunc = async (): Promise<void> => {
-      let tk = token
-      if (!tk) {
-        tk = await ghAPIV3.handleAuth()
-        if (tk !== null) {
-          setToken(tk)
-        }
-      }
-      const tmp = await getComments(ghAPIV3, ghAPIV4, props.id, revokeToken, tk)
-      if (tmp === 'noIssue') {
-        setNoIssue(true)
-      } else if (tmp !== 'invalidToken') {
-        const [i, c] = tmp
-        setComments(c)
-        setIssue(i)
-      }
-      const u: User = await ghAPIV3.getUser({ accessToken: tk })
-      setUser(u)
-    }
-
-    asyncFunc().catch(reject => {
-      console.log(reject)
-    })
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.clientID, props.clientSecret, props.id])
-  const updateComments = async (): Promise<void> => {
-    const tmp = await getComments(ghAPIV3, ghAPIV4, props.id, revokeToken, token)
-    if (tmp !== 'invalidToken' && tmp !== 'noIssue') {
-      const [, c] = tmp
-      setComments(c)
-    }
-  }
-  const NoIssueComponent = (): React.ReactElement => {
-    return isAdmin
-      ? <Typography variant="body1" style={{ padding: '24px', textAlign: 'center' }}>
-        <Button variant="outlined" color="primary" disabled={createIssueLoading}
-                onClick={async () => {
-                  setCreateIssueLoading(true)
-                  await ghAPIV4.postIssue({ accessToken: token, title: props.id, content: location.href })
-                  // sleep 1s, 直接查询会返回无结果，迷惑
-                  await new Promise(resolve => setTimeout(resolve, 1000))
-                  const tmp = await getComments(ghAPIV3, ghAPIV4, props.id, revokeToken, token)
-                  setCreateIssueLoading(false)
-                  if (tmp !== 'invalidToken' && tmp !== 'noIssue') {
-                    const [i, c] = tmp
-                    setNoIssue(false)
-                    setComments(c)
-                    setIssue(i)
-                  }
-                }}>
-          为本页面创建 Issue
-          {createIssueLoading && <CircularProgress size={20} style={{ marginLeft: '4px' }}/>}
-        </Button>
-      </Typography>
-      : <Typography variant="body1" style={{ padding: '24px', textAlign: 'center' }}>
-        没有找到与本页面相关联的 issue
-      </Typography>
-  }
-  return (
-    <InputContentProvider>
-      <Typography variant="h6">
-        <Tooltip title="在 GitHub 上查看">
-          <a href={issue?.link} className={classes.link}>{`${filteredComments.length} 条评论`}</a>
-        </Tooltip>
-        <Tooltip title={authorized ? '登出' : '登录'}>
-          <div
-            style={{ float: 'right', cursor: 'pointer' }}
-            onClick={() => {
-              if (!token) {
-                ghAPIV3.redirectAuth()
-              } else {
-                setToken(null)
-                setUser(defaultUser)
-              }
-            }}
-          >
-            {user.username}
-          </div>
-        </Tooltip>
-      </Typography>
-      <Divider/>
-      <CommentInput
-        name={user.username}
-        avatarLink={user.avatar}
-        authorized={authorized}
-        showLogin={token === null}
-        handleLogin={() => {
-          ghAPIV3.redirectAuth()
-        }}
-        sendComment={async (v, setLoading) => {
-          setLoading(true)
-          try {
-            await ghAPIV3.postComment({ accessToken: token, issueId: issue.id, content: v })
-          } catch (e) {
-            setLoading(false)
-            return
-          }
-          updateComments()
-          setLoading(false)
-        }}
-      />
-      {noIssue
-        ? <NoIssueComponent/>
-        : filteredComments.map(({ content, author, createdAt, reactions, id, contentRaw }) => (
-          <CommentCard
-            avatarLink={author.avatar}
-            disabled={!authorized}
-            name={author.username}
-            contentHTML={content}
-            contentRaw={contentRaw}
-            time={createdAt}
-            key={id}
-            reactions={reactions}
-            currentUser={user}
-            commentID={id}
-            deleteComment={async (commentId, setDeleteLoading) => {
-              setDeleteLoading(true)
-              await ghAPIV4.deleteComment({ accessToken: token, commentId, issueId: issue.id })
-              updateComments()
-              setDeleteLoading(false)
-            }}
-            addReaction={async (commentId, reaction) => {
-              await ghAPIV4.postCommentReaction({ accessToken: token, commentId, reaction, issueId: issue.id })
-            }}
-            removeReaction={async (commentId, reaction) => {
-              await ghAPIV4.deleteCommentReaction({ accessToken: token, commentId, reaction, issueId: issue.id })
-            }}
-          />
-        ))
-      }
-    </InputContentProvider>
-  )
-}
-
-export default CommentComponent
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/CommentBlock.tsx b/gatsby-theme-oi-wiki/src/components/Comment/CommentBlock.tsx
new file mode 100644
index 00000000..69a46f13
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Comment/CommentBlock.tsx
@@ -0,0 +1,234 @@
+import React, { useEffect, useState } from 'react'
+import CommentCard from './Card'
+import CommentInput from './CommentInput'
+import { InputContentProvider } from './inputContentContext'
+import styled from '@mui/material/styles/styled'
+import SmartLink from '../SmartLink'
+import { css } from '@emotion/react'
+import Box from '@mui/material/Box'
+import { observer } from 'mobx-react-lite'
+import { commentStore } from './store'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
+import CircularProgress from '@mui/material/CircularProgress'
+import Tooltip from '@mui/material/Tooltip'
+import Divider from '@mui/material/Divider'
+import { useLocation } from '@reach/router'
+import { computed } from 'mobx'
+
+
+const StyledLink = styled(SmartLink)(({ theme }) => css`
+  color: ${theme.palette.text.primary};
+`)
+
+const StyledTyp = styled(Typography)`
+  padding: 24px;
+  text-align: center;
+`
+
+const GithubLink: React.FC = observer(() => {
+  return (
+    <Tooltip title="在 GitHub 上查看">
+      <StyledLink href={commentStore.issue?.link}>{`${commentStore.filteredCommentsData.length} 条评论`}</StyledLink>
+    </Tooltip>
+  )
+})
+
+const LoginBlock: React.FC = observer(() => {
+  return (
+    <Tooltip title={commentStore.authorized ? '登出' : '登录'}>
+      <Box
+        sx={{ float: 'right', cursor: 'pointer' }}
+        onClick={() => {
+          if (commentStore.token) {
+            commentStore.setToken(null)
+            commentStore.resetUser()
+          } else {
+            commentStore.ghApiV3.redirectAuth()
+          }
+        }}
+      >
+        {commentStore.user.username}
+      </Box>
+    </Tooltip>
+  )
+})
+
+interface NoIssueBlockProps {
+  id: string;
+  admin: Array<string>;
+}
+
+const NoIssueBlock: React.FC<NoIssueBlockProps> = (props) => {
+  const { admin, id } = props
+  const isAdmin = computed(() => admin.includes(commentStore.user.username)).get()
+  const [createIssueLoading, setCreateIssueLoading] = useState(false)
+  const { href } = useLocation()
+
+  return isAdmin
+    ? <StyledTyp variant="body1">
+      <Button
+        variant="outlined"
+        color="primary"
+        disabled={createIssueLoading}
+        onClick={async () => {
+          setCreateIssueLoading(true)
+          await commentStore.ghApiV4.postIssue({ accessToken: commentStore.token, title: id, content: href })
+          // sleep 1s, 直接查询会返回无结果，迷惑
+          await new Promise(resolve => setTimeout(resolve, 1000))
+          const tmp = await commentStore.getComments(id)
+          setCreateIssueLoading(false)
+          if (tmp !== 'invalidToken' && tmp !== 'noIssue') {
+            const [i, c] = tmp
+            commentStore.setComments(c)
+            commentStore.setIssue(i)
+          }
+        }}>
+        为本页面创建 Issue
+        {createIssueLoading && <CircularProgress size={20} sx={{ ml: 4 }}/>}
+      </Button>
+    </StyledTyp>
+    : <StyledTyp variant="body1">
+      没有找到与本页面相关联的 issue
+    </StyledTyp>
+}
+
+interface CommentListProps {
+  id: string;
+}
+
+const CommentList: React.FC<CommentListProps> = observer((props) => {
+  const { id: issueTitle } = props
+
+  const issueId = computed(() => commentStore.issue?.id || '').get()
+  return (
+    <>
+      {commentStore.filteredCommentsData.map(({ content, author, createdAt, reactions, id, contentRaw }) => (
+        <CommentCard
+          avatarLink={author.avatar || ''}
+          disabled={!commentStore.authorized}
+          name={author.username}
+          contentHTML={content}
+          contentRaw={contentRaw}
+          time={createdAt}
+          key={id}
+          reactions={reactions || []}
+          currentUser={commentStore.user}
+          commentID={id}
+          deleteComment={async (commentId, setDeleteLoading) => {
+            setDeleteLoading(true)
+            await commentStore.ghApiV4.deleteComment({ accessToken: commentStore.token, commentId, issueId })
+            await commentStore.updateComments(issueTitle)
+            setDeleteLoading(false)
+          }}
+          addReaction={async (commentId, reaction) => {
+            await commentStore.ghApiV4.postCommentReaction({
+              accessToken: commentStore.token,
+              commentId,
+              reaction,
+              issueId,
+            })
+          }}
+          removeReaction={async (commentId, reaction) => {
+            await commentStore.ghApiV4.deleteCommentReaction({
+              accessToken: commentStore.token,
+              commentId,
+              reaction,
+              issueId,
+            })
+          }}
+        />
+      ))}
+    </>
+  )
+})
+
+export interface CommentBlockProps {
+  clientID: string,
+  clientSecret: string,
+  repo: string,
+  owner: string,
+  admin: Array<string>,
+  id: string,
+}
+
+const CommentBlock: React.FC<CommentBlockProps> = observer((props) => {
+  const { owner, repo, clientID, clientSecret, admin, id } = props
+
+  useEffect(() => {
+    commentStore.createApiInfo({
+      owner,
+      repo,
+      clientSecret,
+      clientId: clientID,
+    })
+  }, [clientID, clientSecret, owner, repo])
+
+
+  useEffect(() => {
+    const asyncFunc = async (): Promise<void> => {
+      if (!commentStore.token) {
+        await commentStore.ghApiV3.handleAuth().then((v) => {
+          if (v !== null) {
+            commentStore.setToken(v)
+          }
+        })
+      }
+
+      const res = await commentStore.getComments(id)
+      if (res !== 'invalidToken' && res !== 'noIssue') {
+        const [issue, comments] = res
+        commentStore.setComments(comments)
+        commentStore.setIssue(issue)
+      }
+
+      commentStore.setUser(
+        await commentStore.ghApiV3.getUser({ accessToken: commentStore.token }),
+      )
+    }
+
+    asyncFunc().catch(reject => {
+      console.log(reject)
+    })
+
+  }, [id])
+
+  return (
+    <InputContentProvider>
+      <Typography variant="h6">
+        <GithubLink/>
+        <LoginBlock/>
+      </Typography>
+      <Divider/>
+      <CommentInput
+        name={commentStore.user.username}
+        avatarLink={commentStore.user.avatar || ''}
+        authorized={commentStore.authorized}
+        showLogin={commentStore.token === null}
+        handleLogin={() => {
+          commentStore.ghApiV3.redirectAuth()
+        }}
+        sendComment={async (v, setLoading) => {
+          setLoading(true)
+          await commentStore.ghApiV3.postComment({
+            accessToken: commentStore.token,
+            issueId: commentStore.issue?.id || '',
+            content: v,
+          })
+            .then(() => {
+              commentStore.updateComments(id)
+            })
+            .finally(() => {
+              setLoading(false)
+            })
+        }}
+      />
+      {commentStore.noIssue
+        ? <NoIssueBlock admin={admin} id={id}/>
+        : <CommentList id={id}/>
+      }
+    </InputContentProvider>
+  )
+})
+
+export default CommentBlock
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/CommentInput.tsx b/gatsby-theme-oi-wiki/src/components/Comment/CommentInput.tsx
index 674c8dd0..6501bda0 100644
--- a/gatsby-theme-oi-wiki/src/components/Comment/CommentInput.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Comment/CommentInput.tsx
@@ -1,8 +1,15 @@
 import React, { useState } from 'react'
-import { makeStyles, Avatar, TextField, Grid, Button, Hidden, LinearProgress } from '@material-ui/core'
-import { useInputContentContext } from './inputContext'
+import { useInputContentContext } from './inputContentContext'
+import LinearProgress from '@mui/material/LinearProgress'
+import Grid from '@mui/material/Grid'
+import styled from '@mui/material/styles/styled'
+import { css } from '@emotion/react'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import Avatar from '@mui/material/Avatar'
+import { TextField } from '@mui/material'
 
-interface Props {
+interface CommentInputProps {
   avatarLink: string,
   name: string
   sendComment: (res: string, setLoading: (loading: boolean) => void) => Promise<void>,
@@ -11,64 +18,51 @@ interface Props {
   authorized: boolean,
 }
 
-const useStyles = makeStyles(theme => ({
-  contentRoot: {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    paddingBottom: '0px',
-  },
-  headerRoot: {
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-    paddingBottom: '0px',
-    paddingTop: theme.spacing(2),
-  },
-  commentMargin: {
-    marginTop: theme.spacing(1),
-  },
-  button: {
-    marginBottom: theme.spacing(1),
-    marginTop: theme.spacing(1),
-  },
-  buttonDiv: {
-    textAlign: 'right',
-    marginBottom: theme.spacing(1),
-  },
-}))
+const StyledGrid = styled(Grid)(({ theme }) => css`
+  margin-top: ${theme.spacing(1)};
+`) as typeof Grid
 
-const CommentInput: React.FC<Props> = (props) => {
-  const classes = useStyles()
+const BtnWrapper = styled(Box)(({ theme }) => css`
+  text-align: right;
+  margin-bottom: ${theme.spacing(1)};
+`)
+
+const StyledBtn = styled(Button)(({ theme }) => css`
+  margin-block: ${theme.spacing(1)};
+`)
+
+const CommentInput: React.FC<CommentInputProps> = (props) => {
+  const { name, avatarLink, authorized } = props
   const { inputContent, setInputContent } = useInputContentContext()
-  const [loading, setLoading] = useState<boolean>(false)
+  const [loading, setLoading] = useState(false)
+
   return (
     <>
-      {loading && <LinearProgress />}
-      <Grid container className={classes.commentMargin} justify="space-around" spacing={2}>
-        <Hidden smDown>
-          <Grid item>
-            <Avatar alt={props.name} src={props.avatarLink}/>
-          </Grid>
-        </Hidden>
-        <Grid item xs>
+      {loading && <LinearProgress/>}
+      <StyledGrid container={true} spacing={2} justifyContent="center">
+        <Grid item={true} sx={{ display: { sm: 'none', md: 'block' } }}>
+          <Avatar alt={name} src={avatarLink}/>
+        </Grid>
+        <Grid item={true} xs={true}>
           <TextField
             placeholder="我们鼓励在讨论区讨论有意义的内容及关于文章的勘误，无意义的讨论将会被管理员删除"
-            multiline
-            fullWidth
-            disabled={!props.authorized || loading}
+            multiline={true}
+            fullWidth={true}
+            disabled={!authorized || loading}
             rows={5}
             value={inputContent}
-            onChange={(e) => { setInputContent(e.target.value) }}
+            onChange={(e) => {
+              setInputContent(e.target.value)
+            }}
             variant="outlined"
           />
         </Grid>
-      </Grid>
-      <div className={classes.buttonDiv}>
-        <Button
+      </StyledGrid>
+      <BtnWrapper>
+        <StyledBtn
           variant="contained"
           color="primary"
-          className={classes.button}
           size="small"
-          // disabled={loading && props.showLogin ? false : !props.authorized}
           onClick={() => {
             if (props.showLogin) {
               props.handleLogin()
@@ -78,8 +72,8 @@ const CommentInput: React.FC<Props> = (props) => {
             }
           }}>
           {props.showLogin ? '登录' : '评论'}
-        </Button>
-      </div>
+        </StyledBtn>
+      </BtnWrapper>
     </>
   )
 }
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/api.ts b/gatsby-theme-oi-wiki/src/components/Comment/api.ts
deleted file mode 100644
index 017528df..00000000
--- a/gatsby-theme-oi-wiki/src/components/Comment/api.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import GithubV3 from '@mgtd/vssue-api-github-v3'
-import GithubV4 from '@mgtd/vssue-api-github-v4'
-import { Comments, Issue } from './types'
-
-export async function getComments (ghAPIV3: GithubV3, ghAPIV4: GithubV4, id: string, revokeToken: () => void, token?: string): Promise<[Issue, Comments] | 'noIssue' | 'invalidToken'> {
-  let issue: Issue
-  try {
-    issue = await ghAPIV3.getIssue({ accessToken: token, issueTitle: id })
-  } catch (e) {
-    revokeToken()
-    return 'invalidToken'
-  }
-  if (issue === null) {
-    return 'noIssue'
-  }
-  let comments: Comments
-  if (!token) {
-    comments = await ghAPIV3.getComments({ accessToken: token, issueId: issue.id, query: { page: 1, perPage: 100 } })
-  } else {
-    comments = await ghAPIV4.getComments({ accessToken: token, issueId: issue.id, query: { page: 1, perPage: 100, sort: 'asce' } })
-  }
-  return [issue, comments]
-}
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/index.tsx b/gatsby-theme-oi-wiki/src/components/Comment/index.tsx
index 478ccaa4..bb311ad2 100644
--- a/gatsby-theme-oi-wiki/src/components/Comment/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Comment/index.tsx
@@ -1,7 +1,13 @@
-import { Accordion, AccordionDetails, AccordionSummary, Container, makeStyles, Typography } from '@material-ui/core'
-import { ExpandMore as ExpandMoreIcon, Forum as ForumIcon } from '@material-ui/icons'
 import React from 'react'
-import CommentComponent from './Comment'
+import CommentBlock from './CommentBlock'
+import Forum from '@mui/icons-material/Forum'
+import styled from '@mui/material/styles/styled'
+import Accordion from '@mui/material/Accordion'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import Typography from '@mui/material/Typography'
+import AccordionDetails from '@mui/material/AccordionDetails'
+import Container from '@mui/material/Container'
 
 export interface CommentSystemProps {
   title: string
@@ -10,7 +16,7 @@ export interface CommentSystemProps {
 export type CommentComponentProps = CommentSystemProps
 
 const CommentSystem: React.FC<CommentSystemProps> = ({ title }) => (
-  <CommentComponent
+  <CommentBlock
     id={`${title} - OI Wiki`}
     owner="OI-wiki"
     repo="gitment"
@@ -31,21 +37,18 @@ const CommentSystem: React.FC<CommentSystemProps> = ({ title }) => (
   />
 )
 
-const useStyles = makeStyles({
-  metaIcon: {
-    verticalAlign: 'sub',
-  },
-})
+const StyledForumIcon = styled(Forum)`
+  vertical-align: sub;
+  font-size: small;
+`
+
+const Comment: React.FC<CommentComponentProps> = (props) => {
+  const { title } = props
 
-const Comment: React.FC<CommentComponentProps> = ({ title }) => {
-  const classes = useStyles()
   return (
-    <Accordion variant="outlined" defaultExpanded>
-      <AccordionSummary
-        expandIcon={<ExpandMoreIcon/>}
-        aria-controls="comment"
-      >
-        <Typography><ForumIcon fontSize="small" className={classes.metaIcon}/>{' 评论'}</Typography>
+    <Accordion variant="outlined" defaultExpanded={true}>
+      <AccordionSummary expandIcon={<ExpandMore/>} aria-controls="comment">
+        <Typography><StyledForumIcon/>{' 评论'}</Typography>
       </AccordionSummary>
       <AccordionDetails>
         <Container>
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/inputContext.ts b/gatsby-theme-oi-wiki/src/components/Comment/inputContentContext.ts
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/Comment/inputContext.ts
rename to gatsby-theme-oi-wiki/src/components/Comment/inputContentContext.ts
diff --git a/gatsby-theme-oi-wiki/src/components/Comment/store.ts b/gatsby-theme-oi-wiki/src/components/Comment/store.ts
new file mode 100644
index 00000000..affe10b9
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Comment/store.ts
@@ -0,0 +1,175 @@
+import { Comments, User } from '@mgtd/vssue-api-github-v4/lib/types'
+import { Issue } from './types'
+import { Nullable } from '../../types/common'
+import persistStore from '../../utils/persistStore'
+import GithubV3 from '@mgtd/vssue-api-github-v3'
+import GithubV4 from '@mgtd/vssue-api-github-v4'
+import { observable } from 'mobx'
+
+interface ApiInfo {
+  baseURL: string;
+  owner: string;
+  repo: string;
+  labels: Array<string>;
+  clientId: string;
+  clientSecret: string;
+  state: string;
+  proxy: string | ((url: string) => string);
+}
+
+export type Result = [Issue, Comments] | 'noIssue' | 'invalidToken'
+
+export interface CommentStore {
+  comments: Nullable<Comments>;
+  user: User;
+  issue: Nullable<Issue>;
+  token: Nullable<string>;
+  apiInfo: Nullable<ApiInfo>;
+  noIssue: boolean;
+
+
+  setComments(val: Nullable<Comments>): void;
+
+  setUser(val: User): void;
+
+  setIssue(val: Nullable<Issue>): void;
+
+  setToken(val: Nullable<string>): void;
+
+  setApiInfo(val: Nullable<ApiInfo>): void;
+
+  setNoIssue(val: boolean): void;
+
+  createApiInfo(val: Pick<ApiInfo, 'owner' | 'repo' | 'clientId' | 'clientSecret'>): void;
+
+  revokeToken(): void;
+
+  resetUser(): void;
+
+  getComments(id: string): Promise<Result>;
+
+  updateComments(id: string): Promise<void>;
+
+
+  get filteredCommentsData(): Comments['data'];
+
+  get authorized(): boolean;
+
+  get ghApiV3(): GithubV3;
+
+  get ghApiV4(): GithubV4;
+}
+
+const COMMENT_STORE_ID = 'github-access-token'
+
+const DEFAULT_USER: User = {
+  username: '未登录用户',
+  avatar: '',
+  homepage: '',
+}
+
+const commentStore = persistStore<CommentStore>({
+  comments: null,
+  user: DEFAULT_USER,
+  issue: null,
+  token: null,
+  apiInfo: null,
+  noIssue: false,
+
+  setComments(val) {
+    this.comments = val
+  },
+  setUser(val) {
+    this.user = val
+  },
+  setIssue(val) {
+    this.issue = val
+  },
+  setToken(val) {
+    this.token = val
+  },
+  setApiInfo(val) {
+    this.apiInfo = val
+  },
+  setNoIssue(val: boolean) {
+    this.noIssue = val
+  },
+  createApiInfo(val) {
+    this.setApiInfo({
+      baseURL: 'https://github.com',
+      labels: ['gitalk'],
+      state: '123',
+      proxy: url => `https://cors-anywhere.mgt.workers.dev/?${url}`,
+      ...val,
+    })
+  },
+  revokeToken() {
+    this.setToken(null)
+    this.resetUser()
+  },
+  resetUser() {
+    this.setUser(DEFAULT_USER)
+  },
+  getComments(id) {
+    return this.ghApiV3.getIssue({ accessToken: this.token, issueTitle: id })
+      .catch(() => {
+        this.revokeToken()
+        throw 'invalidToken'
+      })
+      .then((issue) => {
+        if (issue === null) {
+          this.setNoIssue(true)
+          throw 'noIssue'
+        } else {
+          return issue
+        }
+      })
+      .then(async (issue) => {
+        this.setNoIssue(false)
+
+        const comments = this.token
+          ? await this.ghApiV4.getComments({
+            accessToken: this.token,
+            issueId: issue.id,
+            query: { page: 1, perPage: 100, sort: 'asce' },
+          })
+          : await this.ghApiV3.getComments({
+            accessToken: this.token,
+            issueId: issue.id,
+            query: { page: 1, perPage: 100 },
+          })
+
+        return [issue, comments]
+      })
+  },
+  async updateComments(id) {
+    const res = await commentStore.getComments(id)
+    if (res !== 'invalidToken' && res !== 'noIssue') {
+      commentStore.setComments(res[1])
+    }
+  },
+
+
+  get filteredCommentsData() {
+    return this.comments?.data.filter((v: { isMinimized: boolean }) => !v.isMinimized) || []
+  },
+  get authorized() {
+    return !!this.user && !!this.token && !this.noIssue
+  },
+  get ghApiV3() {
+    return new GithubV3(this.apiInfo)
+  },
+  get ghApiV4() {
+    return new GithubV4(this.apiInfo)
+  },
+
+}, {
+  name: COMMENT_STORE_ID,
+  properties: ['token'],
+}, {
+  decorators: {
+    apiInfo: observable.ref,
+  },
+})
+
+export { commentStore, COMMENT_STORE_ID, DEFAULT_USER }
diff --git a/gatsby-theme-oi-wiki/src/components/EditWarn.tsx b/gatsby-theme-oi-wiki/src/components/EditWarn.tsx
index d43f8287..c6e2e663 100644
--- a/gatsby-theme-oi-wiki/src/components/EditWarn.tsx
+++ b/gatsby-theme-oi-wiki/src/components/EditWarn.tsx
@@ -1,59 +1,52 @@
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle } from '@material-ui/core'
-
 import React from 'react'
-import { SmartLink } from './Link'
+import SmartLink from './SmartLink'
+import Dialog from '@mui/material/Dialog'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogContent from '@mui/material/DialogContent'
+import DialogActions from '@mui/material/DialogActions'
+import Button from '@mui/material/Button'
+import Typography from '@mui/material/Typography'
+import { observer } from 'mobx-react-lite'
+import { editWarnStore } from '../stores/editWarnStore'
+import { computed } from 'mobx'
 
 const EditWarning = (): JSX.Element => {
   return (
     <>
-      <p>首先，感谢您能够为 OI Wiki 做出自己的贡献。</p>
-      <p>
+      <Typography variant="body2">首先，感谢您能够为 OI Wiki 做出自己的贡献。</Typography>
+      <Typography variant="body2">
         不过在开始之前，我们需要您了解并熟知
-        <SmartLink to="/intro/htc/" target="_blank" rel="noopener noreferrer nofollow">如何参与</SmartLink>
+        <SmartLink href="/intro/htc/" target="_blank" rel="noopener noreferrer nofollow">如何参与</SmartLink>
         里的内容，以避免在编辑时产生不必要的麻烦。
-      </p>
-      <p>在阅读完之后，请点击下方的按钮，然后开始编辑。</p>
+      </Typography>
+      <Typography variant="body2">在阅读完之后，请点击下方的按钮，然后开始编辑。</Typography>
     </>
   )
 }
 
-export interface EditWarnProps {
-  relativePath: string;
-  dialogOpen: boolean;
-  setDialogOpen: (props: boolean) => any;
-  location: Location;
-}
+const EDIT_URL = 'https://github.com/OI-wiki/OI-wiki/edit/master/docs/'
+const EditWarn: React.FC = observer(() => {
+  const targetUrl = computed(() => EDIT_URL + editWarnStore.relativePath).get()
 
-const EditWarn: React.FC<EditWarnProps> = (props) => {
-  const { relativePath, dialogOpen, setDialogOpen } = props
-  const editURL = 'https://github.com/OI-wiki/OI-wiki/edit/master/docs/'
   const onClose = (): void => {
-    setDialogOpen(false)
+    editWarnStore.setOpen(false)
   }
 
   return (
     <Dialog
-      open={dialogOpen}
+      open={editWarnStore.open}
       onClose={onClose}
     >
       <DialogTitle>编辑前须知</DialogTitle>
       <DialogContent><EditWarning/></DialogContent>
       <DialogActions>
-        <Button onClick={onClose}>
-          取消
-        </Button>
-        <Button
-          component="a"
-          href={editURL + relativePath}
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-          onClick={onClose}
-        >
+        <Button onClick={onClose}>取消</Button>
+        <Button component={SmartLink} href={targetUrl} onClick={onClose}>
           开始编辑
         </Button>
       </DialogActions>
     </Dialog>
   )
-}
+})
 
 export default EditWarn
diff --git a/gatsby-theme-oi-wiki/src/components/Footer.tsx b/gatsby-theme-oi-wiki/src/components/Footer.tsx
index 20be2673..f7a101c9 100644
--- a/gatsby-theme-oi-wiki/src/components/Footer.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Footer.tsx
@@ -1,19 +1,30 @@
-import { Typography } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
+import { css } from '@emotion/react'
+import Typography from '@mui/material/Typography'
 import { graphql, useStaticQuery } from 'gatsby'
 import React, { useEffect } from 'react'
-import { SmartLink } from './Link'
+import styled from '@mui/material/styles/styled'
+import Box from '@mui/material/Box'
+import SmartLink from './SmartLink'
 
-const useStyles = makeStyles((theme) => ({
-  link: {
-    color: theme.palette.footer.text,
-  },
-}))
+const BG_COLOR = `rgb(238, 238, 238)`
+const COLOR = `rgb(97, 97, 97)`
+
+const linkStyle = css`
+  color: ${COLOR};
+`
+
+const Container = styled(Box)(({ theme }) => css`
+  background-color: ${BG_COLOR};
+  color: ${COLOR};
+  padding: ${theme.spacing(3)};
+  ${theme.breakpoints.up('lg')}: {
+    margin-left: 250px;
+  }
+`)
 
 let eggShowed = false
 
 const Footer: React.FC = () => {
-  const classes = useStyles()
   const data = useStaticQuery<GatsbyTypes.lastestCommitQuery>(graphql`
     query lastestCommit {
       allGitCommit(limit: 1) {
@@ -39,28 +50,30 @@ const Footer: React.FC = () => {
   }, [hash, hashFrag])
 
   return (
-    <>
+    <Container>
       <Typography gutterBottom>
         Copyright © 2016 - {dateStr?.substr(0, 4)} OI Wiki Team
       </Typography>
       <Typography gutterBottom>
         最近更新：
-        <SmartLink className={classes.link} href="https://github.com/OI-wiki/OI-wiki/commits">
+        <SmartLink className={linkStyle.name} href="https://github.com/OI-wiki/OI-wiki/commits">
           {hashFrag}
         </SmartLink>
         , {dateStr?.substr(0, 10)}
       </Typography>
       <Typography>
         联系方式：
-        <SmartLink className={classes.link} href="https://t.me/OIwiki">
+        <SmartLink className={linkStyle.name} href="https://t.me/OIwiki">
           Telegram 群组
         </SmartLink>{' / '}
-        <SmartLink className={classes.link} href="https://jq.qq.com/?_wv=1027&k=5EfkM6K">
+        <SmartLink className={linkStyle.name} href="https://jq.qq.com/?_wv=1027&k=5EfkM6K">
           QQ 群组
         </SmartLink>
       </Typography>
-    </>
+    </Container>
   )
 }
 
-export default Footer
+const FooterMemo = React.memo(Footer, () => true)
+
+export default FooterMemo
diff --git a/gatsby-theme-oi-wiki/src/components/Header/NavBtnStack.tsx b/gatsby-theme-oi-wiki/src/components/Header/NavBtnStack.tsx
new file mode 100644
index 00000000..1018ee6b
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Header/NavBtnStack.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+import Stack from '@mui/material/Stack'
+import SvgIcon from '@mui/material/SvgIcon'
+import Tooltip from '@mui/material/Tooltip'
+import IconButton from '@mui/material/IconButton'
+import { Link } from 'gatsby'
+import { Code, GitHub, LibraryBooks, LocalOffer, Settings } from '@mui/icons-material'
+
+
+interface NavBtnProps {
+  title: string;
+  Icon: typeof SvgIcon;
+  to: string;
+}
+
+function isRelativeLink(link: string): boolean {
+  return link.startsWith('.') || link.startsWith('/')
+}
+
+const NavBtn: React.FC<NavBtnProps> = (props) => {
+  const { title, Icon, to } = props
+
+  return (
+    <Tooltip title={title}>
+      <IconButton
+        color="inherit"
+        {...isRelativeLink(to) ? {
+          component: Link,
+          to,
+        } : {
+          component: 'a',
+          href: to,
+          target: '_blank',
+          rel: 'noopener noreferrer',
+        }}
+      >
+        <Icon/>
+      </IconButton>
+    </Tooltip>
+  )
+}
+
+const OI_WIKI_GH_LINK = 'https://github.com/OI-wiki/OI-wiki'
+
+const NavBtnStack: React.FC = () => {
+  return (
+    <Stack direction="row" alignItems="center">
+      <NavBtn title="设置页" Icon={Settings} to="/settings"/>
+      <NavBtn title="标签页" Icon={LocalOffer} to="/tags"/>
+      <NavBtn title="目录页" Icon={LibraryBooks} to="/pages"/>
+      <NavBtn title="运行工具" Icon={Code} to="/play"/>
+      <NavBtn title="GitHub 存储库" Icon={GitHub} to={OI_WIKI_GH_LINK}/>
+    </Stack>
+  )
+}
+
+const NavBtnStackMemo = React.memo(NavBtnStack, () => true)
+
+export default NavBtnStackMemo
diff --git a/gatsby-theme-oi-wiki/src/components/Header/index.tsx b/gatsby-theme-oi-wiki/src/components/Header/index.tsx
new file mode 100644
index 00000000..f86141ab
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Header/index.tsx
@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react'
+import Slide from '@mui/material/Slide'
+import styled from '@emotion/styled'
+import { AppBar, Button, IconButton, Tooltip } from '@mui/material'
+import { HEADER_HEIGHT, headerStore } from '../../stores/headerStore'
+import useSiteMetadata from '../../hooks/useSiteMetadata'
+import Grid from '@mui/material/Grid'
+import { Link } from 'gatsby'
+import { observer } from 'mobx-react-lite'
+import { useScroll } from '@use-gesture/react'
+import { Helmet } from 'react-helmet'
+import { Nullable } from '../../types/common'
+import School from '@mui/icons-material/School'
+import NavBtnStack from './NavBtnStack'
+import { useLocation } from '@reach/router'
+import Search from '../Search'
+
+export interface HeaderProps {
+  title?: Nullable<string>
+}
+
+
+const StyledAppBar = styled(AppBar)`
+  flex-flow: row;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  padding: 0 20px;
+  height: ${HEADER_HEIGHT}px;
+`
+
+const DIS = headerStore.height + 20
+const Header: React.FC<HeaderProps> = observer((props) => {
+  const { title } = props
+  const { title: siteTitle, description } = useSiteMetadata()
+  const [elevation, setElevation] = useState(0)
+  const location = useLocation()
+
+  useEffect(() => {
+    if (window?.scrollY <= DIS) headerStore.setAppear(true)
+  }, [location])
+
+  useScroll(({ xy: [, y], delta: [, dy] }) => {
+    headerStore.setOnTop(y <= DIS)
+    setElevation(y > 0 ? 2 : 0)
+    if (dy < -10 || y <= DIS) headerStore.setAppear(true)
+    if (dy > 5) headerStore.setAppear(false)
+  }, {
+    target: typeof window === 'undefined' ? null : window,
+    enabled: !headerStore.appearLock,
+    eventOptions: {
+      passive: true,
+    },
+  })
+
+  return (
+    <>
+      <Helmet title={`${title ? title + ' - ' : ''}${siteTitle}`}>
+        <meta name="description" content={description}/>
+      </Helmet>
+
+      <Slide appear={false} direction="down" in={headerStore.appear}>
+        <StyledAppBar elevation={elevation}>
+          <Tooltip title="Link to homepage">
+            <IconButton component={Link} color="inherit" to="/">
+              <School/>
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Link to homepage">
+            <Button
+              component={Link}
+              to="/"
+              sx={{
+                fontSize: theme => theme.typography.h6.fontSize,
+                color: 'inherit',
+              }}>
+              {siteTitle}
+            </Button>
+          </Tooltip>
+
+          <Grid flexGrow={1}/>
+
+          <Search/>
+
+          <NavBtnStack/>
+        </StyledAppBar>
+      </Slide>
+    </>
+  )
+})
+
+export default Header
diff --git a/gatsby-theme-oi-wiki/src/components/Indicator.tsx b/gatsby-theme-oi-wiki/src/components/Indicator.tsx
deleted file mode 100644
index f835e38a..00000000
--- a/gatsby-theme-oi-wiki/src/components/Indicator.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { makeStyles, Typography } from '@material-ui/core'
-import clsx from 'clsx'
-import React from 'react'
-
-const useStyles = makeStyles((theme) => ({
-  indicator: {
-    padding: `${theme.spacing(0.5)}px ${theme.spacing(1)}px`,
-    color: theme.palette.common.white,
-    borderRadius: theme.shape.borderRadius,
-    display: 'inline-block',
-  },
-  info: {
-    background: theme.palette.info.main,
-  },
-  success: {
-    background: theme.palette.success.main,
-  },
-  warning: {
-    background: theme.palette.warning.main,
-  },
-  error: {
-    background: theme.palette.error.main,
-  },
-}))
-
-export interface IndicatorProps {
-  type: 'info' | 'success' | 'error' | 'warning' | undefined
-  msg: string
-}
-
-const Indicator: React.FC<IndicatorProps> = ({ type, msg }: IndicatorProps) => {
-  const classes = useStyles()
-  return (
-    <Typography
-      className={clsx(classes.indicator, {
-        [classes.info]: type === 'info',
-        [classes.success]: type === 'success',
-        [classes.error]: type === 'error',
-        [classes.warning]: type === 'warning',
-      })}
-    >
-      {msg}
-    </Typography>
-  )
-}
-
-export default Indicator
diff --git a/gatsby-theme-oi-wiki/src/components/Layout.tsx b/gatsby-theme-oi-wiki/src/components/Layout.tsx
new file mode 100644
index 00000000..2067e2e5
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Layout.tsx
@@ -0,0 +1,43 @@
+import Grid from '@mui/material/Grid'
+import Header, { HeaderProps } from './Header'
+import NavSidebar from './NavSidebar'
+import Main from './Main'
+import TocSidebar, { TocSidebarProps } from './TocSidebar'
+import React from 'react'
+import styled from '@mui/material/styles/styled'
+import { NavSidebarProps } from './NavSidebar/types'
+import { observer } from 'mobx-react-lite'
+
+const MainContentDiv = styled(Grid)`
+  flex-grow: 1;
+  flex-flow: row;
+`
+
+export interface LayoutProps extends HeaderProps, Partial<NavSidebarProps>, Partial<TocSidebarProps> {
+  withNav?: boolean;
+  withToc?: boolean;
+}
+
+
+const Layout: React.FC<LayoutProps> = observer((props) => {
+  const { title, withNav = true, withToc = true, pathname = '', toc = [], children } = props
+
+  return (
+    <Grid container={true} direction="column" minHeight="100vh">
+      <Header title={title}/>
+
+      <MainContentDiv className="maincontentdiv" container={true} item={true}>
+        {withNav && <NavSidebar pathname={pathname}/>}
+
+        <Main item={true} withNav={withNav} withToc={withToc}>
+          {children}
+        </Main>
+
+        {withToc && <TocSidebar toc={toc}/>}
+      </MainContentDiv>
+
+    </Grid>
+  )
+})
+
+export default Layout
diff --git a/gatsby-theme-oi-wiki/src/components/Link/index.tsx b/gatsby-theme-oi-wiki/src/components/Link/index.tsx
deleted file mode 100644
index 745216b5..00000000
--- a/gatsby-theme-oi-wiki/src/components/Link/index.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import { makeStyles } from '@material-ui/core/styles'
-import { Link as GatsbyLink } from 'gatsby'
-import isAbsoluteURL from 'is-absolute-url'
-import React from 'react'
-import LinkTooltip from './LinkTooltip'
-import path from 'path'
-import clsx from 'clsx'
-import { GatsbyLinkProps } from 'gatsby-link'
-import smoothScrollTo from '../../lib/smoothScroll'
-import { useSetting } from '../../lib/useSetting'
-import { useMediaQuery, useTheme } from '@material-ui/core'
-import { OnClickHandler } from '../../types/common'
-
-const MD_EXPR = /\.(md|markdown|mdtext|mdx)/g
-const NO_SLASH_EXPR = /[^/]$/
-
-/**
- * 修复相对路径的页面链接
- *
- * Example 1:
- * - link: `../a/b/c`, path: `/x/y/`, isIndex: `false`
- * - return: `/x/y/../../a/b/c` (`/a/b/c/`)
- *
- * Example 2:
- * - link: `../a/b/c`, path: `/x/y/`, isIndex: `true`
- * - return: `/x/y/../a/b/c` (`/x/a/b/c/`)
- *
- * 实际上不需要当前页面的 path
- */
-const linkFix = (link: string, isIndex: boolean): string => {
-  if (/^\//.test(link)) return link // absolute path
-
-  let newLink = link.replace(MD_EXPR, '/').replace('index', '')
-  if (!isIndex) newLink = '../' + newLink
-  if (NO_SLASH_EXPR.test(newLink) && !/#/.test(newLink)) {
-    newLink += '/' // append '/' for links, but excluding urls includes `#`.
-  }
-  return newLink
-}
-
-const getAPILink = (link: string, pathname: string, isIndex: boolean): string => {
-  let newLink = link.replace(MD_EXPR, '/').replace(/#(.*?)$/, '')
-  if (/^[^/]/.test(newLink)) {
-    if (!isIndex) newLink = '../' + newLink
-    if (NO_SLASH_EXPR.test(pathname)) pathname += '/'
-    newLink = path.resolve(pathname, newLink)
-  }
-  return `https://api.mgt.moe/preview?path=${newLink}`
-}
-
-const isRef = (link: string): boolean => /^#/.test(link)
-
-const useStyles = makeStyles((theme) => ({
-  link: {
-    color: theme.palette.secondary.main,
-    textDecoration: 'none',
-    '&:hover': {
-      textDecoration: 'none',
-      color: theme.palette.secondary.light,
-    },
-    transition: `color ${250}ms ease-in-out`,
-  },
-}))
-
-export interface SmartLinkProps<T = any> extends Omit<GatsbyLinkProps<T>, 'to'> {
-  /** 指向的链接 */
-  to?: string;
-  /** to 的别名，两者同时存在时优先使用 href */
-  href?: string;
-  /** 类名 */
-  className?: string;
-  /** 是否对站内链接启用 Tooltip 预览，如果为 true 则必须给出 pathname */
-  tooltip?: boolean;
-  /** 当前页面的 path，用于获取 Tooltip API URL */
-  pathname?: string;
-  /** 用于 markdown 内链的修复, 设置为 true 可以避免相关影响 */
-  isIndex?: boolean;
-}
-
-/**
- * 智能链接
- *
- * - 如果是目录则使用原生 a 标签
- * - 如果是 URL 就设为外链
- * - 如果是 markdown 引用（纯哈希）则使用引用
- * - 如果是 path 则根据 tooltip 属性决定是否启用 Tooltip
- */
-const SmartLink: React.FC<SmartLinkProps> = (props) => {
-  const theme = useTheme()
-  const classes = useStyles()
-  
-  // in case Link is constructed wrongly
-  const href = typeof props?.to === 'string' ? props?.to : ''
-  const { tooltip = false, isIndex = true, className, pathname, children, ...others } = props
-  const classList = clsx(className, classes.link)
-  const [settings] = useSetting()
-  const isMdDown = useMediaQuery(theme.breakpoints.down('md'))
-
-
-  if (className && className.search('anchor') > -1) {
-    return <a {...others} href={href}>{children}</a>
-  } else if (isAbsoluteURL(href)) {
-    return (
-      <a {...others} href={href} className={classList} target="_blank" rel="noopener noreferrer nofollow">
-        {children}
-      </a>
-    )
-  } else if (isRef(href)) {
-    const tabHeight = isMdDown ? 64 : 112
-    const scrollPadding = 24
-
-    const onClick: OnClickHandler = (e) => {
-      e.preventDefault()
-
-      const target = document.getElementById(href.substring(1, href.length))
-      const yDis = (target?.getBoundingClientRect().top as number) + window?.pageYOffset - tabHeight - scrollPadding
-
-      if (settings.animation.smoothScroll) {
-        smoothScrollTo(yDis)
-      } else {
-        window?.scrollTo(0, yDis)
-      }
-    }
-
-    return (
-      <GatsbyLink {...others as any} to={href} className={classList} onClick={onClick}>
-        {children}
-      </GatsbyLink>
-    )
-  } else if (tooltip) {
-    if (!pathname) throw new Error('tooltip 为 true 时必须给出 pathname')
-    return (
-      <LinkTooltip url={getAPILink(href, pathname, isIndex)} to={linkFix(href, isIndex)}>
-        <GatsbyLink {...others as any} to={linkFix(href, isIndex)} className={classList}>
-          {children}
-        </GatsbyLink>
-      </LinkTooltip>
-    )
-  } else {
-    return (
-      <GatsbyLink {...others as any} to={linkFix(href, isIndex)} className={classList}>
-        {children}
-      </GatsbyLink>
-    )
-  }
-}
-
-export { SmartLink }
diff --git a/gatsby-theme-oi-wiki/src/lib/MDRenderer.tsx b/gatsby-theme-oi-wiki/src/components/MDRenderer.tsx
similarity index 83%
rename from gatsby-theme-oi-wiki/src/lib/MDRenderer.tsx
rename to gatsby-theme-oi-wiki/src/components/MDRenderer.tsx
index 4ad73fa9..c8b5f5d5 100644
--- a/gatsby-theme-oi-wiki/src/lib/MDRenderer.tsx
+++ b/gatsby-theme-oi-wiki/src/components/MDRenderer.tsx
@@ -9,10 +9,10 @@ export interface MDRendererProps {
 }
 
 const MDRenderer: React.FC<MDRendererProps> = (props) => {
-  const processor = unified().use(rehypeReact, {
+  const processor = React.useMemo(() => unified().use(rehypeReact, {
     createElement: React.createElement,
     components: props.components,
-  })
+  }), [props.components])
 
   return processor.stringify(props.htmlAst) as never as JSX.Element
 }
diff --git a/gatsby-theme-oi-wiki/src/components/Main.tsx b/gatsby-theme-oi-wiki/src/components/Main.tsx
new file mode 100644
index 00000000..040b1b53
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Main.tsx
@@ -0,0 +1,54 @@
+import styled from '@mui/material/styles/styled'
+import Box from '@mui/material/Box'
+import React from 'react'
+import Grid, { GridProps } from '@mui/material/Grid'
+import Footer from './Footer'
+import { observer } from 'mobx-react-lite'
+import { navSidebarStore, tocSidebarStore } from '../stores/sidebarStore'
+import { LayoutProps } from './Layout'
+
+const Container = styled(Grid)`
+  flex-grow: 1;
+  flex-flow: column;
+  position: relative;
+  margin: 0;
+  transition: margin 225ms ease-in-out;
+`
+
+const Content = styled(Box)`
+  flex-flow: row;
+  flex-grow: 1;
+  margin: auto;
+  width: 100%;
+  padding: 0 50px 120px;
+  transition: padding 225ms ease-in-out;
+
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+
+  &[data-expanded] {
+    padding-inline: 120px;
+  }
+`
+
+interface MainProps extends GridProps, Pick<LayoutProps, 'withNav' | 'withToc'> {
+}
+
+const Main: React.FC<MainProps> = observer((props) => {
+  const { children, withNav = true, withToc = true, ...others } = props
+
+  const ml = (!withNav || navSidebarStore.collapsed ? 0 : navSidebarStore.width) + 'px'
+  const mr = (!withToc || tocSidebarStore.collapsed ? 0 : tocSidebarStore.width) + 'px'
+  const expanded = !withNav || !withToc || navSidebarStore.collapsed || tocSidebarStore.collapsed ? true : undefined
+
+  return (
+    <Container container={true} sx={{ ml, mr }} {...others}>
+      <Content as='article' data-expanded={expanded}>{children}</Content>
+      <Footer/>
+    </Container>
+  )
+})
+
+export default Main
+
diff --git a/gatsby-theme-oi-wiki/src/components/Meta.tsx b/gatsby-theme-oi-wiki/src/components/Meta.tsx
index e03e76a7..869f7306 100644
--- a/gatsby-theme-oi-wiki/src/components/Meta.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Meta.tsx
@@ -1,99 +1,121 @@
-import { makeStyles, Paper, Typography } from '@material-ui/core'
-import CopyrightIcon from '@material-ui/icons/Copyright'
-import EditIcon from '@material-ui/icons/Edit'
-import { Group as GroupIcon, History as HistoryIcon } from '@material-ui/icons'
-import React, { useState } from 'react'
-import { SmartLink, SmartLinkProps } from './Link'
-import Tags from './Tags'
-import EditWarn from './EditWarn'
+import React, { useEffect, useMemo } from 'react'
+import Tags, { TagsProps } from './Tags'
 import { uniq } from '../utils/common'
 import Time from '../components/Time'
+import SmartLink, { SmartLinkProps } from './SmartLink'
+import styled from '@mui/material/styles/styled'
+import { css } from '@emotion/react'
+import Typography from '@mui/material/Typography'
+import { Copyright, Group, History } from '@mui/icons-material'
+import Paper from '@mui/material/Paper'
+import { observer } from 'mobx-react-lite'
+import Edit from '@mui/icons-material/Edit'
+import { editWarnStore } from '../stores/editWarnStore'
+import Box from '@mui/material/Box'
 
-const useStyles = makeStyles((theme: any) => ({
-  metaIcon: {
-    verticalAlign: 'sub',
-  },
-  paper: {
-    padding: theme.spacing(2),
-  },
-  meta: {
-    margin: '20px 0 10px',
-    paddingLeft: '.5rem',
-    textDecoration: 'none',
-  },
-  subText: {
-    // make typescript and eslint happy
-    lineHeight: 1.8,
-  },
-  authorLink: {
-    color: (theme.palette as unknown as { subTitle: string }).subTitle,
-    paddingLeft: theme.spacing(1),
-    display: 'inline-block',
-  },
-}))
-
-export interface MetaProps {
-  tags: string[];
+interface AuthorsBlockProps {
+  authors: string;
+}
+
+interface EditBlockProps {
   relativePath: string;
+}
+
+export interface MetaProps extends Partial<AuthorsBlockProps & TagsProps>, EditBlockProps {
   modifiedTime: string;
-  location: Location;
-  authors?: string;
   title: string;
 }
 
-const Meta: React.FC<MetaProps> = (props) => {
-  const { tags, relativePath, modifiedTime, location, ...rest } = props
-  const classes = useStyles()
-  const [dialogOpen, setDialogOpen] = useState(false)
 
-  const Author: React.FC<{ name: string }> = ({ name }) =>
-    <SmartLink href={`https://github.com/${name}`} className={classes.authorLink}>
-      {`@${name}`}
-    </SmartLink>
+const StyledSmartLink = styled(SmartLink)(({ theme }) => css`
+  color: ${theme.palette.grey.A700};
+  margin-left: ${theme.spacing(1)};
+`)
+
+const iconStyle = css`
+  vertical-align: sub;
+  font-size: 1.25rem;
+`
+
+const StyledGroupIcon = styled(Group)(iconStyle)
+const StyledHistoryIcon = styled(History)(iconStyle)
+const StyledEditIcon = styled(Edit)(iconStyle)
+const StyledCopyrightIcon = styled(Copyright)(iconStyle)
+
+const StyledPaper = styled(Paper)(({ theme }) => css`
+  padding: ${theme.spacing(2)};
+`)
+
+const StyledBox = styled(Box)`
+  margin: 20px 0 10px;
+  padding-left: .5rem;
+  text-decoration: none;
+`
+
+const Author: React.FC<{ name: string }> = ({ name }) =>
+  <StyledSmartLink href={`https://github.com/${name}`}>
+    {`@${name}`}
+  </StyledSmartLink>
+
+const AuthorsBlock: React.FC<AuthorsBlockProps> = (props) => {
+  const { authors } = props
+  const authorArr = useMemo(() => uniq(authors.split(',').map(v => v.trim())), [authors])
+
+  return (
+    <Typography gutterBottom={true}>
+      <span>
+        <StyledGroupIcon/>{' 贡献者：'}
+      </span>
+      {authorArr.map((v) => <Author key={v} name={v}/>)}
+    </Typography>
+  )
+}
+
+const EditBlock: React.FC<EditBlockProps> = observer((props) => {
+  useEffect(() => {
+    editWarnStore.setRelativePath(props.relativePath)
+  }, [props.relativePath])
 
   const click: SmartLinkProps['onClick'] = (e) => {
     e.preventDefault()
-    setDialogOpen(true)
+    editWarnStore.setOpen(true)
   }
 
-  return <>
-    <EditWarn relativePath={relativePath} dialogOpen={dialogOpen} setDialogOpen={setDialogOpen} location={location}/>
-    <Paper className={classes.paper} variant="outlined">
-      <Tags tags={tags}/>
-      <div className={classes.meta}>
-        {props.authors &&
-        <Typography gutterBottom>
-            <span>
-              <GroupIcon fontSize="small" className={classes.metaIcon}/>
-              {' 贡献者：'}
-            </span>
-          {uniq(props.authors.split(',').map(v => v.trim()))
-            .map(name => <Author key={name} name={name}/>)
-          }
-        </Typography>
-        }
-        <Typography gutterBottom>
+  return (
+    <Typography gutterBottom={true}>
+      <span>
+        <StyledEditIcon/>
+        {' 发现错误？想一起完善？ '}
+        <SmartLink onClick={click} href=".">在 GitHub 上编辑此页！</SmartLink>
+      </span>
+    </Typography>
+  )
+})
+
+const Meta: React.FC<MetaProps> = (props) => {
+  const { tags, relativePath, modifiedTime, authors, ...rest } = props
+
+  return (
+    <StyledPaper variant="outlined">
+      {tags && <Tags tags={tags}/>}
+
+      <StyledBox>
+        {authors && <AuthorsBlock authors={authors}/>}
+
+        <Typography gutterBottom={true}>
           <span>
-            <HistoryIcon fontSize="small" className={classes.metaIcon}/>
+            <StyledHistoryIcon fontSize="small"/>
             {' 本页面最近更新：'}
           </span>
-          <Time time={modifiedTime} updateInterval={5 * 60 * 60 * 1000} defaultShowRelative={false}/>，
-          <SmartLink to='./changelog/' {...rest} state={{ ...rest }}>更新历史</SmartLink>
+          <Time time={modifiedTime} showRelative={false}/>，
+          <SmartLink href='./changelog/' {...rest} state={{ ...rest }}>更新历史</SmartLink>
         </Typography>
 
-        <Typography gutterBottom>
-          <span>
-            <EditIcon fontSize="small" className={classes.metaIcon}/>
-            {' 发现错误？想一起完善？ '}
-            <SmartLink onClick={click} to=".">
-              在 GitHub 上编辑此页！
-            </SmartLink>
-          </span>
-        </Typography>
+        <EditBlock relativePath={relativePath}/>
 
         <Typography>
           <span>
-            <CopyrightIcon fontSize="small" className={classes.metaIcon}/>
+            <StyledCopyrightIcon/>
             {' 本页面的全部内容在 '}
             <strong>
               <SmartLink href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh">CC BY-SA 4.0</SmartLink>
@@ -103,9 +125,9 @@ const Meta: React.FC<MetaProps> = (props) => {
             {' 协议之条款下提供，附加条款亦可能应用'}
           </span>
         </Typography>
-      </div>
-    </Paper>
-  </>
+      </StyledBox>
+    </StyledPaper>
+  )
 }
 
 export default Meta
diff --git a/gatsby-theme-oi-wiki/src/components/NavSidebar/index.tsx b/gatsby-theme-oi-wiki/src/components/NavSidebar/index.tsx
new file mode 100644
index 00000000..ba32a0ab
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/NavSidebar/index.tsx
@@ -0,0 +1,106 @@
+import { css } from '@emotion/react'
+import styled from '@mui/material/styles/styled'
+import List from '@mui/material/List'
+import React from 'react'
+import Box from '@mui/material/Box'
+import { headerStore } from '../../stores/headerStore'
+import { navSidebarStore } from '../../stores/sidebarStore'
+import { observer } from 'mobx-react-lite'
+import IconButton from '@mui/material/IconButton'
+import FormatIndentDecreaseSharp from '@mui/icons-material/FormatIndentDecreaseSharp'
+import FormatIndentIncreaseSharp from '@mui/icons-material/FormatIndentIncreaseSharp'
+import pathList from '../../sidebar.yaml'
+import scrollbarStyle from '../../theme/scrollbarStyle'
+import { NavSidebarProps } from './types'
+import { getTypedPathList } from './utils'
+import listItemBuilder from './listItemBuilder'
+
+const StyledList = styled(List)`
+  width: 100%;
+  height: 100%;
+`
+
+const WrapperBox = styled(Box)(({ theme }) => css`
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  width: auto;
+  transition: transform 225ms ease-in-out;
+  border-inline: 1px solid ${theme.palette.divider};
+  flex-shrink: 0;
+  z-index: 1;
+`)
+
+const ContainerBox = styled(Box)`
+  ${scrollbarStyle};
+  --scrollbar-size: 0.33rem;
+
+  position: relative;
+  height: inherit;
+  width: ${navSidebarStore.width}px;
+  transition: transform 225ms ease-in-out;
+`
+
+
+const ICON_SIZE = 40
+const BTN_SIZE = ICON_SIZE + 20
+
+const StyledIconBtn = styled(IconButton)`
+  position: absolute;
+  top: 0;
+  width: ${BTN_SIZE}px;
+  height: ${BTN_SIZE}px;
+
+  opacity: 0.2;
+  transition: opacity 225ms;
+
+  &:hover {
+    opacity: 1;
+  }
+`
+
+const NavCollapseBtn = observer(() => {
+  return (
+    <StyledIconBtn
+      aria-label="collapse nav sidebar"
+      onClick={navSidebarStore.toggleCollapsed}
+      sx={{ right: -BTN_SIZE }}>
+      {navSidebarStore.collapsed
+        ? <FormatIndentDecreaseSharp/>
+        : <FormatIndentIncreaseSharp/>
+      }
+    </StyledIconBtn>
+  )
+})
+
+const NavSidebar: React.FC<NavSidebarProps> = observer((props) => {
+  const { pathname } = props
+  const scaleX = navSidebarStore.collapsed ? 0 : 1
+  const translateX = navSidebarStore.collapsed ? -navSidebarStore.width : 0
+  const navList = React.useMemo(
+    () => getTypedPathList(pathList)
+      .map((item) => listItemBuilder(item, 16, pathname))
+      .map(([x]) => x),
+    [pathname],
+  )
+
+  return (
+    <WrapperBox
+      sx={{
+        transform: `translate3d(${translateX}px, ${headerStore.currentHeight}px, 0)`,
+        height: `calc(100vh - ${headerStore.currentHeight}px)`,
+        borderLeft: 'unset',
+      }}
+    >
+      <ContainerBox sx={{ transform: `scale3d(${scaleX}, 1, 1)` }}>
+        <StyledList>
+          {navList}
+        </StyledList>
+      </ContainerBox>
+      <NavCollapseBtn/>
+    </WrapperBox>
+  )
+})
+
+export default NavSidebar
+export { BTN_SIZE, ContainerBox, ICON_SIZE, StyledIconBtn, WrapperBox }
diff --git a/gatsby-theme-oi-wiki/src/components/NavSidebar/listItemBuilder.tsx b/gatsby-theme-oi-wiki/src/components/NavSidebar/listItemBuilder.tsx
new file mode 100644
index 00000000..537c745d
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/NavSidebar/listItemBuilder.tsx
@@ -0,0 +1,102 @@
+import { css } from '@emotion/react'
+import styled from '@mui/material/styles/styled'
+import ListItem from '@mui/material/ListItem'
+import React, { useState } from 'react'
+import ListItemText from '@mui/material/ListItemText'
+import Typography from '@mui/material/Typography'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import Collapse from '@mui/material/Collapse'
+import List from '@mui/material/List'
+import { Link } from 'gatsby'
+import trimTrailingSlash from '../../lib/trailingSlash'
+import { LeafItemProps, NodeType, NonLeafItemProps, PathListNode } from './types'
+
+const listItemStyle = css`
+  line-height: 1.2;
+  padding-top: 5px;
+  padding-bottom: 5px;
+`
+
+const NonLeafListItem = styled(ListItem)(listItemStyle)
+
+const LeafListItem = styled(ListItem)(({ theme }) => css`
+  ${listItemStyle};
+  color: ${theme.palette.text.primary};
+
+  &:hover {
+    text-decoration: none;
+  }
+`)
+
+const NonLeafItem: React.FC<NonLeafItemProps> = (props) => {
+    const { name, padding, childItems, isOpen } = props
+    const [open, setOpen] = useState(isOpen)
+
+    return (
+        <div>
+            <NonLeafListItem
+                onClick={() => setOpen(!open)}
+                style={{ paddingLeft: `${padding}px` }}
+            >
+                <ListItemText
+                    primary={
+                        <Typography variant="body2" component="span">
+                            {name}
+                        </Typography>
+                    }
+                />
+                {open ? <ExpandLess fontSize="small"/> : <ExpandMore fontSize="small"/>}
+            </NonLeafListItem>
+            <Collapse in={open} timeout="auto" unmountOnExit={true}>
+                <List disablePadding>{childItems}</List>
+            </Collapse>
+        </div>
+    )
+}
+
+const LeafItem: React.FC<LeafItemProps> = (props) => {
+    const { name, path, padding, selected } = props
+
+    return (
+        <Link key={name} to={path}>
+            <LeafListItem selected={selected} sx={{ paddingLeft: `${padding}px` }}>
+                <ListItemText
+                    primary={
+                        <Typography variant="body2" component="span">
+                            {name}
+                        </Typography>
+                    }
+                />
+            </LeafListItem>
+        </Link>
+    )
+}
+
+function listItemBuilder(node: PathListNode, padding: number, pathname: string): [React.ReactElement, boolean] {
+    if (node.type === NodeType.Leaf) {
+        const selected = trimTrailingSlash(node.path) === trimTrailingSlash(pathname)
+
+        return [
+            <LeafItem key={node.path} padding={padding} selected={selected} {...node}/>,
+            selected,
+        ]
+    } else {
+        const children = node.children
+        let isOpen = false
+        const items: NonLeafItemProps['childItems'] = []
+
+        children.forEach((v) => {
+            const [item, selected] = listItemBuilder(v, padding + 16, pathname)
+            if (selected) isOpen = selected
+            items.push(item)
+        })
+
+        return [
+            <NonLeafItem key={node.name} isOpen={isOpen} childItems={items} padding={padding} {...node} />,
+            isOpen,
+        ]
+    }
+}
+
+export default listItemBuilder
diff --git a/gatsby-theme-oi-wiki/src/components/NavSidebar/types.ts b/gatsby-theme-oi-wiki/src/components/NavSidebar/types.ts
new file mode 100644
index 00000000..0738105a
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/NavSidebar/types.ts
@@ -0,0 +1,38 @@
+import React from 'react'
+
+export enum NodeType {
+  Leaf, NonLeaf
+}
+
+export interface PathListLeafNode {
+  name: string;
+  type: NodeType.Leaf;
+  path: string;
+}
+
+export interface PathListNonLeafNode {
+  name: string;
+  type: NodeType.NonLeaf;
+  children: Array<PathListNode>;
+}
+
+export type PathListNode = PathListLeafNode | PathListNonLeafNode
+
+export type TypedPathList = Array<PathListNode>
+
+export interface LeafItemProps extends PathListLeafNode {
+  padding: number;
+  selected: boolean;
+}
+
+export interface NonLeafItemProps extends Omit<PathListNonLeafNode, 'children'> {
+  padding: number;
+  childItems: React.ReactElement[];
+  isOpen: boolean;
+}
+
+export type PathListType = Array<Record<string, string> | Array<NavSidebarProps>>
+
+export interface NavSidebarProps {
+  pathname: string
+}
diff --git a/gatsby-theme-oi-wiki/src/components/NavSidebar/utils.ts b/gatsby-theme-oi-wiki/src/components/NavSidebar/utils.ts
new file mode 100644
index 00000000..7fb5a610
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/NavSidebar/utils.ts
@@ -0,0 +1,27 @@
+import { StrIndexObj } from '../../types/common'
+import trimTrailingSlash from '../../lib/trailingSlash'
+import { flattenObject } from '../NavAndDrawer/utils'
+import { NodeType, PathListType, TypedPathList } from './types'
+
+const getTabIDFromLocation = (location: string, pathList: StrIndexObj<StrIndexObj>): number => {
+  const locationTrimmed = trimTrailingSlash(location)
+  for (const v of Object.entries(pathList)) {
+    if (Object.values(flattenObject(v[1])).map(v => trimTrailingSlash(v as string)).indexOf(locationTrimmed) > -1) return +v[0]
+  }
+  return -1
+}
+
+function getTypedPathList(pathList: PathListType): TypedPathList {
+  const resArray: TypedPathList = []
+  for (const i of pathList) {
+    const [[name, a]] = Object.entries(i)
+    if (typeof a === 'string') {
+      resArray.push({ name, path: a, type: NodeType.Leaf })
+    } else {
+      resArray.push({ name, children: getTypedPathList(a), type: NodeType.NonLeaf })
+    }
+  }
+  return resArray
+}
+
+export { getTabIDFromLocation, getTypedPathList }
diff --git a/gatsby-theme-oi-wiki/src/components/Output.tsx b/gatsby-theme-oi-wiki/src/components/Output.tsx
deleted file mode 100644
index 03a8c8e4..00000000
--- a/gatsby-theme-oi-wiki/src/components/Output.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import {
-  Box,
-  Divider,
-  Grid,
-  makeStyles,
-  Paper,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from '@material-ui/core'
-import AccessTime from '@material-ui/icons/AccessTime'
-import Storage from '@material-ui/icons/Storage'
-import React from 'react'
-import type { TransformedResponseData } from '../lib/play/useRunner'
-import Indicator, { IndicatorProps } from './Indicator'
-import useDarkMode from '../lib/useDarkMode'
-import clsx from 'clsx'
-
-const useStyles = makeStyles((theme) => ({
-  root: {
-    minHeight: 240,
-    maxHeight: 400,
-    overflow: 'auto',
-    padding: `0 ${theme.spacing(2)}px`,
-    '& > pre': {
-      margin: 0,
-      paddingBottom: theme.spacing(2),
-      fontSize: 14,
-    },
-  },
-  statusLine: {
-    '& > *': {
-      margin: `${theme.spacing(1)}px 0`,
-    },
-  },
-  basicInfo: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginLeft: 'auto',
-  },
-  basicInfoSm: {
-    alignItems: 'flex-end',
-    flexDirection: 'column',
-  },
-  measurement: ({ darkMode }: { darkMode: boolean }) => ({
-    display: 'inline-flex',
-    alignItems: 'center',
-    color: theme.palette.grey[darkMode ? 400 : 600],
-    '& > svg': {
-      marginLeft: 16,
-      marginRight: 4,
-    },
-  }),
-  compilationTitle: {
-    color: theme.palette.warning.dark,
-    fontWeight: 'bold',
-  },
-  errorTitle: {
-    color: theme.palette.error.dark,
-    fontWeight: 'bold',
-  },
-  outTitle: {
-    color: theme.palette.info.dark,
-    fontWeight: 'bold',
-  },
-}))
-
-const statusSeverityMap: Record<
-  TransformedResponseData['status'] | 'No Status Info',
-  IndicatorProps['type']
-> = Object.freeze({
-  'Compile Error': 'warning',
-  'Run Finished': 'success',
-  'Time Limit Exceeded': 'error',
-  'Memory Limit Exceeded': 'error',
-  'Runtime Error': 'error',
-  'Execute Failure': 'error',
-  'No Status Info': 'info',
-})
-
-const Output = React.forwardRef<
-  unknown,
-  { output: TransformedResponseData | null }
->(({ output }, ref) => {
-  const classes = useStyles({ darkMode: useDarkMode() })
-  const theme = useTheme()
-  const matches = useMediaQuery(theme.breakpoints.down('xs'))
-
-  const {
-    time = '?',
-    memory = '?',
-    status = 'No Status Info',
-    ceInfo,
-    stdout,
-    stderr,
-  } = output || {}
-
-  return (
-    <Paper ref={ref} className={classes.root}>
-      <Grid container className={classes.statusLine}>
-        <Grid item>
-          <Typography variant="h6">提交详情</Typography>
-        </Grid>
-        <Box
-          className={clsx(classes.basicInfo, {
-            [classes.basicInfoSm]: matches,
-          })}
-        >
-          <Indicator type={statusSeverityMap[status]} msg={status} />
-          <Box style={matches ? { marginTop: 8, marginBottom: -28 } : {}}>
-            <Box className={classes.measurement}>
-              <AccessTime fontSize="small" />
-              <Typography display="inline">{time}ms</Typography>
-            </Box>
-            <Box className={classes.measurement}>
-              <Storage fontSize="small" />
-              <Typography display="inline">{memory}KB</Typography>
-            </Box>
-          </Box>
-        </Box>
-      </Grid>
-      {ceInfo && (
-        <>
-          <Typography className={classes.compilationTitle}>编译信息</Typography>
-          <Divider />
-          <pre>{ceInfo}</pre>
-        </>
-      )}
-      {stderr && (
-        <>
-          <Typography className={classes.errorTitle}>错误信息</Typography>
-          <Divider />
-          <pre>{stderr}</pre>
-        </>
-      )}
-      <Typography className={classes.outTitle}>输出</Typography>
-      <Divider />
-      <pre>{stdout === '' ? '似乎没有输出哦...' : stdout}</pre>
-    </Paper>
-  )
-})
-
-export default Output
diff --git a/gatsby-theme-oi-wiki/src/components/CodeEditor/Editor.tsx b/gatsby-theme-oi-wiki/src/components/Play/CodeEditor/Editor.tsx
similarity index 51%
rename from gatsby-theme-oi-wiki/src/components/CodeEditor/Editor.tsx
rename to gatsby-theme-oi-wiki/src/components/Play/CodeEditor/Editor.tsx
index eb9910f6..ef277a2f 100644
--- a/gatsby-theme-oi-wiki/src/components/CodeEditor/Editor.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Play/CodeEditor/Editor.tsx
@@ -1,7 +1,6 @@
 import React from 'react'
-import Ace from 'react-ace'
-import useDarkMode from '../../lib/useDarkMode'
-import { langModeMap } from '../../lib/play/codeLang'
+import Ace, { IAceEditorProps } from 'react-ace'
+import useThemeMode from '../../../hooks/useThemeMode'
 
 // add language to support here
 import 'ace-builds/src-noconflict/mode-c_cpp'
@@ -10,22 +9,24 @@ import 'ace-builds/src-noconflict/mode-python'
 // light/dark theme
 import 'ace-builds/src-noconflict/theme-chrome'
 import 'ace-builds/src-noconflict/theme-tomorrow_night'
+import { langModeMap, LangType } from '../codeLang'
 
-import { CodeEditorProps } from '.'
+export interface EditorProps extends Omit<IAceEditorProps, 'mode'> {
+  lang?: LangType
+}
 
-const Editor: React.FC<Omit<CodeEditorProps, 'title'>> = ({
-  lang,
-  ...aceProps
-}) => {
-  const isDarkMode = useDarkMode()
+const Editor: React.FC<EditorProps> = (props) => {
+  const { lang, ...aceProps } = props
+  const themeMode = useThemeMode()
 
   return (
     <Ace
-      theme={isDarkMode ? 'tomorrow_night' : 'chrome'}
+      theme={themeMode === 'dark' ? 'tomorrow_night' : 'chrome'}
+      mode={lang ? langModeMap[lang] : 'text'}
       width=""
       height=""
       fontSize={13}
-      mode={lang ? langModeMap[lang] : 'text'}
+
       {...aceProps}
     />
   )
diff --git a/gatsby-theme-oi-wiki/src/components/Play/CodeEditor/index.tsx b/gatsby-theme-oi-wiki/src/components/Play/CodeEditor/index.tsx
new file mode 100644
index 00000000..f2837934
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Play/CodeEditor/index.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import styled from '@emotion/styled'
+import Paper from '@mui/material/Paper'
+import Typography from '@mui/material/Typography'
+import { NoSsr } from '@mui/material'
+import { EditorProps } from './Editor'
+
+export interface CodeEditorProps extends EditorProps {
+  title: string
+}
+
+const StyledPaper = styled(Paper)`
+  height: 60vh;
+`
+
+const editorStyle = {
+  height: '100%',
+}
+
+const Editor = React.lazy(() => import('./Editor'))
+
+const CodeEditor: React.FC<CodeEditorProps> = (props) => {
+  const { title, lang, ...aceProps } = props
+
+  return (
+    <>
+      <Typography variant="h6">{title}</Typography>
+      <StyledPaper>
+        <NoSsr>
+          <React.Suspense fallback={<div>Loading editor...</div>}>
+            <Editor style={editorStyle} lang={lang} {...aceProps} />
+          </React.Suspense>
+        </NoSsr>
+      </StyledPaper>
+    </>
+  )
+}
+
+export default CodeEditor
diff --git a/gatsby-theme-oi-wiki/src/components/CodeLangMenu.tsx b/gatsby-theme-oi-wiki/src/components/Play/CodeLangMenu.tsx
similarity index 65%
rename from gatsby-theme-oi-wiki/src/components/CodeLangMenu.tsx
rename to gatsby-theme-oi-wiki/src/components/Play/CodeLangMenu.tsx
index 323ec797..825c41a3 100644
--- a/gatsby-theme-oi-wiki/src/components/CodeLangMenu.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Play/CodeLangMenu.tsx
@@ -1,21 +1,19 @@
-import type { ButtonProps } from '@material-ui/core'
-import { Button, Menu, MenuItem } from '@material-ui/core'
-import ArrowDropDownOutlined from '@material-ui/icons/ArrowDropDownOutlined'
 import React, { useCallback, useState } from 'react'
-import type { LangType } from '../lib/play/codeLang'
-import { langList } from '../lib/play/codeLang'
+import Menu from '@mui/material/Menu'
+import { Nullable } from '../../types/common'
+import ArrowDropDownOutlined from '@mui/icons-material/ArrowDropDownOutlined'
+import Button, { ButtonProps } from '@mui/material/Button'
+import MenuItem from '@mui/material/MenuItem'
+import { langList, LangType } from './codeLang'
 
 interface CodeLangMenuProps extends ButtonProps {
   lang: LangType
   setLang: React.Dispatch<React.SetStateAction<LangType>>
 }
 
-const CodeLangMenu: React.FC<CodeLangMenuProps> = ({
-  lang,
-  setLang,
-  ...buttonProps
-}) => {
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+const CodeLangMenu: React.FC<CodeLangMenuProps> = (props) => {
+  const { lang, setLang, ...buttonProps } = props
+  const [anchorEl, setAnchorEl] = useState<Nullable<HTMLElement>>(null)
 
   const handleButtonClick = useCallback((e: React.MouseEvent<HTMLElement>) => {
     setAnchorEl(e.currentTarget)
@@ -33,7 +31,7 @@ const CodeLangMenu: React.FC<CodeLangMenuProps> = ({
     <>
       <Button
         onClick={handleButtonClick}
-        endIcon={<ArrowDropDownOutlined />}
+        endIcon={<ArrowDropDownOutlined/>}
         {...buttonProps}
       >
         {lang}
diff --git a/gatsby-theme-oi-wiki/src/components/Play/Indicator.tsx b/gatsby-theme-oi-wiki/src/components/Play/Indicator.tsx
new file mode 100644
index 00000000..9c8fb04b
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Play/Indicator.tsx
@@ -0,0 +1,47 @@
+import React from 'react'
+import styled from '@mui/material/styles/styled'
+import { css } from '@emotion/react'
+import Typography from '@mui/material/Typography'
+
+const StyledTyp = styled(Typography)(({ theme }) => css`
+  padding: ${theme.spacing(0.5)} ${theme.spacing(1)};
+  color: ${theme.palette.common.white};
+  border-radius: ${theme.shape.borderRadius}px;
+  display: inline-block;
+
+  &.info {
+    background-color: ${theme.palette.info.main};
+  }
+
+  &.success {
+    background-color: ${theme.palette.success.main};
+  }
+
+  &.warning {
+    background-color: ${theme.palette.warning.main};
+  }
+
+  &.error {
+    background-color: ${theme.palette.error.main};
+  }
+`)
+
+export interface IndicatorProps {
+  type: 'info' | 'success' | 'error' | 'warning' | undefined
+  msg: string
+}
+
+const Indicator = React.forwardRef<HTMLSpanElement, IndicatorProps>(
+  function Indicator(props, ref) {
+    const { type, msg } = props
+    return (
+      <>
+        {msg && <StyledTyp className={type} ref={ref}>
+          {msg}
+        </StyledTyp>}
+      </>
+    )
+  },
+)
+
+export default Indicator
diff --git a/gatsby-theme-oi-wiki/src/components/Play/Output.tsx b/gatsby-theme-oi-wiki/src/components/Play/Output.tsx
new file mode 100644
index 00000000..54201d87
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Play/Output.tsx
@@ -0,0 +1,152 @@
+import React from 'react'
+import type { TransformedResponseData } from './useRunner'
+import Indicator, { IndicatorProps } from './Indicator'
+import { Nullable } from '../../types/common'
+import styled from '@mui/material/styles/styled'
+import Paper from '@mui/material/Paper'
+import Grid from '@mui/material/Grid'
+import { theme } from '../../theme'
+import { css } from '@emotion/react'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import AccessTime from '@mui/icons-material/AccessTime'
+import Storage from '@mui/icons-material/Storage'
+import Divider from '@mui/material/Divider'
+
+const StyledPaper = styled(Paper)(({ theme }) => css`
+  min-height: 240px;
+  max-height: 400px;
+  overflow: auto;
+  padding: 0 ${theme.spacing(2)};
+`)
+
+const StyledPre = styled('pre')(({ theme }) => css`
+  margin: 0;
+  padding-bottom: ${theme.spacing(2)};
+  font-size: 0.85rem;
+`)
+
+const StatusLineGrid = styled(Grid)`
+  justify-content: space-between;
+
+  & > * {
+    margin: ${theme.spacing(1)}px 0;
+  }
+`
+
+const BasicInfoGrid = styled(Grid)(({ theme }) => css`
+  flex-flow: row;
+  align-items: center;
+  margin-left: auto;
+
+  ${theme.breakpoints.down('xs')} {
+    align-items: flex-end;
+    flex-flow: column;
+  }
+`)
+
+const MeasurementContainerBox = styled(Box)(({ theme }) => css`
+  ${theme.breakpoints.down('xs')} {
+    margin-top: 0;
+    margin-bottom: -28px;
+  }
+`)
+
+const MeasurementBox = styled(Box)(({ theme }) => css`
+  display: inline-flex;
+  align-items: center;
+  color: ${theme.palette.grey[600]};
+
+  @media (prefers-color-scheme: dark) {
+    color: ${theme.palette.grey[400]};
+  }
+
+  & > svg {
+    margin-left: 16px;
+    margin-right: 4px;
+  }
+`)
+
+const CompilationTitle = styled(Typography)(({ theme }) => css`
+  color: ${theme.palette.warning.dark};
+  font-weight: bold;
+`)
+
+const ErrorTitle = styled(Typography)(({ theme }) => css`
+  color: ${theme.palette.error.dark};
+  font-weight: bold;
+`)
+
+const OutTitle = styled(Typography)(({ theme }) => css`
+  color: ${theme.palette.info.dark};
+  font-weight: bold;
+`)
+
+const statusSeverityMap: Record<TransformedResponseData['status'] | 'No Status Info',
+  IndicatorProps['type']> = Object.freeze({
+  'Compile Error': 'warning',
+  'Run Finished': 'success',
+  'Time Limit Exceeded': 'error',
+  'Memory Limit Exceeded': 'error',
+  'Runtime Error': 'error',
+  'Execute Failure': 'error',
+  'No Status Info': 'info',
+})
+
+interface OutputProps {
+  output: Nullable<TransformedResponseData>
+}
+
+const Output = React.forwardRef<HTMLDivElement, OutputProps>(({ output }, ref) => {
+  const {
+    time = '?',
+    memory = '?',
+    status = 'No Status Info',
+    ceInfo,
+    stdout,
+    stderr,
+  } = output || {}
+
+  return (
+    <StyledPaper ref={ref}>
+      <StatusLineGrid container={true}>
+        <Grid item={true}>
+          <Typography variant="h6">提交详情</Typography>
+        </Grid>
+        <BasicInfoGrid container={true} item={true} width="auto">
+          <Indicator type={statusSeverityMap[status]} msg={status}/>
+          <MeasurementContainerBox>
+            <MeasurementBox>
+              <AccessTime fontSize="small"/>
+              <Typography display="inline">{time}ms</Typography>
+            </MeasurementBox>
+            <MeasurementBox>
+              <Storage fontSize="small"/>
+              <Typography display="inline">{memory}KB</Typography>
+            </MeasurementBox>
+          </MeasurementContainerBox>
+        </BasicInfoGrid>
+      </StatusLineGrid>
+
+      {ceInfo && (
+        <>
+          <CompilationTitle>编译信息</CompilationTitle>
+          <Divider/>
+          <StyledPre>{ceInfo}</StyledPre>
+        </>
+      )}
+      {stderr && (
+        <>
+          <ErrorTitle>错误信息</ErrorTitle>
+          <Divider/>
+          <StyledPre>{stderr}</StyledPre>
+        </>
+      )}
+      <OutTitle>输出</OutTitle>
+      <Divider/>
+      <StyledPre>{stdout === '' ? '似乎没有输出哦...' : stdout}</StyledPre>
+    </StyledPaper>
+  )
+})
+
+export default Output
diff --git a/gatsby-theme-oi-wiki/src/lib/play/codeLang.ts b/gatsby-theme-oi-wiki/src/components/Play/codeLang.ts
similarity index 100%
rename from gatsby-theme-oi-wiki/src/lib/play/codeLang.ts
rename to gatsby-theme-oi-wiki/src/components/Play/codeLang.ts
diff --git a/gatsby-theme-oi-wiki/src/lib/play/useRunner.ts b/gatsby-theme-oi-wiki/src/components/Play/useRunner.ts
similarity index 77%
rename from gatsby-theme-oi-wiki/src/lib/play/useRunner.ts
rename to gatsby-theme-oi-wiki/src/components/Play/useRunner.ts
index 9e38f7fe..984121dd 100644
--- a/gatsby-theme-oi-wiki/src/lib/play/useRunner.ts
+++ b/gatsby-theme-oi-wiki/src/components/Play/useRunner.ts
@@ -1,9 +1,8 @@
-/* eslint-disable camelcase */
 import type { AxiosResponse } from 'axios'
 import axios from 'axios'
 import has from 'lodash/has'
 import { useState } from 'react'
-import type { LangType } from './codeLang'
+import { LangType } from './codeLang'
 
 export interface RunnerApiRequestData {
   code: string
@@ -38,8 +37,8 @@ export type TransformedResponseData = {
   [K in keyof RunnerApiResponseData as K extends 'message'
     ? never
     : K extends keyof typeof responseKeyTransformMap
-    ? (typeof responseKeyTransformMap)[K]
-    : K]-?: RunnerApiResponseData[K]
+      ? (typeof responseKeyTransformMap)[K]
+      : K]-?: RunnerApiResponseData[K]
 }
 
 function transformResponseData(
@@ -58,13 +57,17 @@ function transformResponseData(
     }, {} as TransformedResponseData)
 }
 
-function responseDataGuard (data: any): data is RunnerApiResponseData {
+function responseDataGuard(data: any): data is RunnerApiResponseData {
   return typeof data.message === 'string'
 }
 
+function errResponseGuard(err: unknown): err is { response: AxiosResponse } {
+  return has(err, 'response')
+}
+
 export const runnerApi = 'https://api2.duck-ac.cn/259ea31bf8ab6b59/duck-api/run'
 
-export function useRunner (
+export function useRunner(
   req: RunnerApiRequestData,
   onResponse?: (res: TransformedResponseData) => void,
   onError?: (msg: string) => void,
@@ -84,25 +87,19 @@ export function useRunner (
         data: req,
       })
       .then(({ data }) => {
-        if (!responseDataGuard(data)) {
-          throw Error(`Incompatible response data format: ${data}`)
-        }
-        if (data.message === 'OK') {
-          if (onResponse) onResponse(transformResponseData(data))
+        if (responseDataGuard(data)) {
+          if (data.message === 'OK') {
+            onResponse?.(transformResponseData(data))
+          } else {
+            throw new Error(data.message)
+          }
         } else {
-          throw new Error(data.message)
+          throw Error(`Incompatible response data format: ${data}`)
         }
       })
       .catch((err) => {
-        // TODO: mark err as unknown for better type safety
-        // https://github.com/microsoft/TypeScript/pull/41013
         let msg = String(err)
 
-        function errResponseGuard(
-          err: unknown,
-        ): err is { response: AxiosResponse } {
-          return has(err, 'response')
-        }
         if (errResponseGuard(err)) {
           msg = `Server responded ${err.response.data} with code ${err.response.status}`
         } else if (has(err, 'request')) {
@@ -112,8 +109,9 @@ export function useRunner (
         }
 
         if (onError) onError(msg)
-        else if (process.env.NODE_ENV === 'development')
+        else if (process.env.NODE_ENV === 'development') {
           console.error(`Unhandled exception in code runner: ${err}`)
+        }
       })
       .finally(() => {
         setWaiting(false)
diff --git a/gatsby-theme-oi-wiki/src/components/Search/ResultList.tsx b/gatsby-theme-oi-wiki/src/components/Search/ResultList.tsx
deleted file mode 100644
index 418d76a3..00000000
--- a/gatsby-theme-oi-wiki/src/components/Search/ResultList.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { List, ListItem, ListItemIcon, ListItemText, Typography } from '@material-ui/core'
-import { Link } from 'gatsby'
-import React from 'react'
-import { FindInPage as FindInPageIcon } from '@material-ui/icons'
-import { useStyles } from './styles'
-
-export interface ResultItem {
-  url: string;
-  title: string;
-  highlight: string
-}
-
-export interface SearchResultListProps {
-  result: ResultItem[];
-  isFirstRun: React.MutableRefObject<boolean>;
-  searchKey: string;
-  classes: ReturnType<typeof useStyles>;
-}
-
-const SearchResultList: React.FC<SearchResultListProps> = props => {
-  const { result, isFirstRun, searchKey, classes } = props
-  const resultCount = result.length
-  return resultCount === 0
-    ? (isFirstRun.current
-      ? <></>
-      : <Typography variant="body1" className={classes.searchMessage}>没有找到符合条件的结果</Typography>)
-    : (<>
-      <Typography variant="body1" className={classes.searchMessage}>
-        共找到 {resultCount} 条搜索结果：
-      </Typography>
-      <List>
-        {result.map((item) =>
-          <ListItem
-            button
-            divider
-            component={Link}
-            to={item.url}
-            state={{ searchKey: searchKey }}
-            key={item.url}
-          >
-            <ListItemIcon>
-              <FindInPageIcon/>
-            </ListItemIcon>
-            <ListItemText
-              disableTypography={true}
-              primary={
-                <Typography
-                  variant="h6"
-                  className={classes.searchResultPrimary}
-                  dangerouslySetInnerHTML={{
-                    __html: item.title.replace(
-                      searchKey,
-                      `<em>${searchKey}</em>`,
-                    ),
-                  }}
-                />
-              }
-              secondary={
-                <div
-                  className={classes.searchResultSecondary}
-                  dangerouslySetInnerHTML={{
-                    __html: item.highlight || '',
-                  }}
-                />
-              }
-            />
-          </ListItem>)}
-      </List>
-    </>)
-}
-
-export default SearchResultList
diff --git a/gatsby-theme-oi-wiki/src/components/Search/SearchInput.tsx b/gatsby-theme-oi-wiki/src/components/Search/SearchInput.tsx
new file mode 100644
index 00000000..3f50b56b
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Search/SearchInput.tsx
@@ -0,0 +1,73 @@
+import { InputBaseProps } from '@mui/material/InputBase'
+import React from 'react'
+import { InputBase } from '@mui/material'
+import { searchStore } from './store'
+import { observer } from 'mobx-react-lite'
+import styled from '@mui/material/styles/styled'
+import { theme } from '../../theme'
+import clsx from 'clsx'
+
+interface SearchInputProps extends InputBaseProps {
+  isSmallScreen?: boolean
+}
+
+const StyledInputBase = styled(InputBase)`
+  color: inherit;
+  display: block;
+  margin-left: calc(1em + ${theme.spacing(4)});
+  margin-top: 2px;
+  margin-bottom: 2px;
+
+  &.small-screen {
+    margin-top: 9px;
+    margin-bottom: 6px;
+  }
+
+  &.wide-input {
+    ${theme.breakpoints.up('md')} {
+      transition: ${theme.transitions.create('width')};
+      width: 30vw;
+    }
+  }
+
+  .MuiInputBase-input {
+    ${theme.breakpoints.up('md')} {
+      transition: ${theme.transitions.create('width')};
+      width: 15vw;
+
+      &:focus {
+        width: 30vw;
+      }
+    }
+
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-decoration,
+    &::-webkit-search-results-button,
+    &::-webkit-search-results-decoration {
+      display: none;
+    }
+  }
+`
+
+const SearchInput: React.FC<SearchInputProps> = observer((props) => {
+  const { isSmallScreen = false, ...others } = props
+
+  return (
+    <StyledInputBase
+      className={clsx({
+        'wide-input': !!searchStore.searchKey,
+        'small-screen': isSmallScreen,
+      })}
+      type="search"
+      placeholder="键入以开始搜索"
+      onFocus={searchStore.enableSearch}
+      onChange={(event => {
+        searchStore.setSearchKey(event.target.value)
+      })}
+      defaultValue={searchStore.searchKey}
+      {...others}
+    />
+  )
+})
+
+export default SearchInput
diff --git a/gatsby-theme-oi-wiki/src/components/Search/SearchResult.tsx b/gatsby-theme-oi-wiki/src/components/Search/SearchResult.tsx
new file mode 100644
index 00000000..b5e2b298
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Search/SearchResult.tsx
@@ -0,0 +1,167 @@
+import { Link } from 'gatsby'
+import React, { useEffect, useMemo, useState } from 'react'
+import styled from '@mui/material/styles/styled'
+import Paper from '@mui/material/Paper'
+import { css } from '@emotion/react'
+import scrollbarStyle from '../../theme/scrollbarStyle'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import FindInPage from '@mui/icons-material/FindInPage'
+import ListItemText from '@mui/material/ListItemText'
+import { searchStore } from './store'
+import { observer } from 'mobx-react-lite'
+import { reaction } from 'mobx'
+import { fetchResult } from './api'
+
+export interface ResultItem {
+  url: string;
+  title: string;
+  highlight: string
+}
+
+export interface SearchResultListProps {
+  result: ResultItem[];
+}
+
+const StyledPaper = styled(Paper)(({ theme }) => css`
+  ${scrollbarStyle};
+
+  min-width: calc(30vw + 1em + ${theme.spacing(4)});
+  max-width: 50vw;
+  max-height: 80vh;
+  margin-top: 12px;
+
+  position: absolute;
+  top: 100%;
+  right: 0 !important;
+
+  overflow-y: auto;
+  overflow-x: hidden;
+  z-index: ${theme.zIndex.drawer + 2};
+`)
+
+const StyledTyp = styled(Typography)`
+  padding: 8px 8px 8px 20px;
+  background: #f5f5f5;
+` as typeof Typography
+
+const SearchResultPrimaryTyp = styled(Typography)(({ theme }) => css`
+  margin: 0;
+
+  & em {
+    font-style: normal;
+    color: ${theme.palette.secondary.main};
+    background-color: rgba(143, 187, 237, 1);
+  }
+`)
+
+const SearchResultSecondaryBox = styled(Box)(({ theme }) => css`
+  & em {
+    font-style: normal;
+    padding: 0 0 2px;
+    // 使用 box shadow 模拟下划线
+    box-shadow: inset 0 -2px 0 0 ${theme.palette.secondary.main};
+  }
+`)
+
+const SearchMessage: React.FC = (props) => {
+  const { children } = props
+
+  return (
+    <StyledTyp variant="body1">
+      {children}
+    </StyledTyp>
+  )
+}
+
+const SearchResultList: React.FC<SearchResultListProps> = observer((props) => {
+  const { result } = props
+  return (
+    <List>
+      {result.map((item) =>
+        <ListItem
+          key={item.url}
+          button={true}
+          divider={true}
+          component={Link}
+          to={item.url}
+          state={{ searchKey: searchStore.searchKey }}
+        >
+          <ListItemIcon>
+            <FindInPage/>
+          </ListItemIcon>
+          <ListItemText
+            disableTypography={true}
+            primary={
+              <SearchResultPrimaryTyp
+                variant="h6"
+                dangerouslySetInnerHTML={{
+                  __html: item.title.replace(
+                    searchStore.searchKey,
+                    `<em>${searchStore.searchKey}</em>`,
+                  ),
+                }}
+              />
+            }
+            secondary={
+              <SearchResultSecondaryBox
+                dangerouslySetInnerHTML={{
+                  __html: item.highlight || '',
+                }}
+              />
+            }
+          />
+        </ListItem>)
+      }
+    </List>
+  )
+})
+
+
+const SearchResult: React.FC = observer(() => {
+  const [result, setResult] = useState<ResultItem[]>([])
+  const resultCount = useMemo(() => result.length, [result])
+
+  useEffect(() => {
+    const fetchReactionDispose = reaction(() => searchStore.searchKey,
+      (curVal, prevVal) => {
+        if (curVal === '') {
+          setResult([])
+        } else if (curVal !== prevVal) {
+          // the order is tricky here
+          // set result after set isFirstRun
+          // so when there's no result on first run
+          // the user is prompted with the notice
+          fetchResult(curVal).then((value => {
+            searchStore.setIsFirstRun(false)
+            setResult(value)
+          }))
+        }
+      }, {
+        delay: 500,
+      })
+
+    return () => {
+      fetchReactionDispose()
+    }
+  }, [])
+
+  return (
+    <StyledPaper>
+      {(!searchStore.open || searchStore.isFirstRun)
+        ? <></>
+        : resultCount === 0
+          ? <SearchMessage>没有找到符合条件的结果</SearchMessage>
+          : <>
+            <SearchMessage>共找到 {resultCount} 条搜索结果：</SearchMessage>
+            <SearchResultList result={result}/>
+          </>
+      }
+    </StyledPaper>
+  )
+})
+
+export default SearchResult
diff --git a/gatsby-theme-oi-wiki/src/components/Search/api.ts b/gatsby-theme-oi-wiki/src/components/Search/api.ts
new file mode 100644
index 00000000..b14ce99f
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Search/api.ts
@@ -0,0 +1,12 @@
+import { ResultItem } from './SearchResult'
+
+/**
+ * 从 API 获取搜索数据
+ * @param str 要搜索的内容
+ */
+const fetchResult = (str: string): Promise<ResultItem[]> =>
+  fetch(`https://search.oi-wiki.org:8443/?s=${encodeURIComponent(str)}`)
+    .then((response) => response.json())
+
+
+export { fetchResult }
diff --git a/gatsby-theme-oi-wiki/src/components/Search/index.tsx b/gatsby-theme-oi-wiki/src/components/Search/index.tsx
index 7e7b0dc1..5c2268c4 100644
--- a/gatsby-theme-oi-wiki/src/components/Search/index.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Search/index.tsx
@@ -1,141 +1,113 @@
-import { Backdrop, Dialog, IconButton, InputBase, Paper } from '@material-ui/core'
-import { ArrowBack as ArrowBackIcon, Search as SearchIcon } from '@material-ui/icons'
+import React from 'react'
 
-import clsx from 'clsx'
-import React, { useEffect, useRef, useState } from 'react'
-import useDarkMode from '../../lib/useDarkMode'
+import SearchResult from './SearchResult'
+import { useWindowDimensions } from './hooks'
+import Backdrop from '@mui/material/Backdrop'
+import styled from '@mui/material/styles/styled'
+import Box from '@mui/material/Box'
+import { css } from '@emotion/react'
+import Dialog from '@mui/material/Dialog'
+import IconButton from '@mui/material/IconButton'
+import SearchIcon from '@mui/icons-material/Search'
+import ArrowBack from '@mui/icons-material/ArrowBack'
+import Paper from '@mui/material/Paper'
+import SearchInput from './SearchInput'
+import { observer } from 'mobx-react-lite'
+import { searchStore } from './store'
 
-import { useStyles } from './styles'
-import SearchResultList from './ResultList'
-import { useDebounce, useWindowDimensions } from './hooks'
 
-/**
- * 从 API 获取搜索数据
- * @param str 要搜索的内容
- */
-const fetchResult = (str: string): Promise<any> =>
-  fetch(`https://search.oi-wiki.org:8443/?s=${encodeURIComponent(str)}`)
-    .then((response) => response.json())
+const SearchContainer = styled(Box)(({ theme }) => css`
+  position: relative;
+  border-radius: ${theme.shape.borderRadius};
+  max-width: calc(30vw + 1em + ${theme.spacing(4)});
+  margin-left: 0;
+  width: 100%;
+  z-index: ${theme.zIndex.drawer + 2};
 
-const Search: React.FC = () => {
-  const [searchKey, setSearchKey] = useState('')
-  const [result, setResult] = useState([])
-  const [open, setOpen] = useState(false)
-  const debouncedKey = useDebounce(searchKey, 500)
-  const classes = useStyles()
+  ${theme.breakpoints.up('md')} {
+    margin-left: ${theme.spacing(3)};
+    width: auto;
+  }
+`)
 
-  const isFirstRun = useRef(true)
+const StyledBackdrop = styled(Backdrop)(({ theme }) => css`
+  z-index: ${theme.zIndex.drawer + 1};
+`)
 
-  const enableDark = useDarkMode()
-  const { width } = useWindowDimensions()
+const SearchIconWrapper = styled(Box)(({ theme }) => css`
+  padding: ${theme.spacing(0, 2)};
+  height: 100%;
+  position: absolute;
+  pointer-events: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`)
+
+const SearchIconBlock: React.FC = () => {
+  return (
+    <SearchIconWrapper>
+      <SearchIcon fontSize="small"/>
+    </SearchIconWrapper>
+  )
+}
+
+const SmallScreenSearchIconBtn = styled(IconButton)(({ theme }) => css`
+  height: 100%;
+  padding: ${theme.spacing(1.5)};
+  color: inherit;
 
-  useEffect(() => {
-    if (debouncedKey !== '') {
-      fetchResult(debouncedKey).then((val) => {
-        // the order is tricky here
-        // set result after set isFirstRun
-        // so when there's no result on first run
-        // the user is prompted with the notice
-        isFirstRun.current = false
-        setResult(val)
-      })
-    } else {
-      setResult([])
-    }
-  }, [debouncedKey])
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`)
+
+const SmallScreenReturnBtn = styled(IconButton)(({ theme }) => css`
+  padding: ${theme.spacing(1.5)};
+  position: absolute;
+  display: flex;
+`)
+
+const SmallScreenDialogHeaderPaper = styled(Paper)`
+  align-items: center;
+  border-radius: 0;
+`
+
+const Search: React.FC = observer(() => {
+  const { width } = useWindowDimensions()
 
   // 600px is sm
   if (width > 600) {
     return <>
-      <div
-        className={clsx(
-          classes.search,
-          (enableDark || !open) ? classes.searchColorBlack : classes.searchColorWhite,
-        )}
-      >
-        <div className={classes.searchIcon}>
-          <SearchIcon fontSize="small"/>
-        </div>
-        <InputBase
-          type="search"
-          placeholder="键入以开始搜索"
-          onChange={(ev) => {
-            setSearchKey(ev.target.value)
-          }}
-          onFocus={() => {
-            setOpen(true)
-          }}
-          classes={{
-            root: clsx(classes.inputRoot, searchKey && classes.wideInput),
-            input: classes.inputInput,
-          }}
-          defaultValue={searchKey}
-        />
-        {open && (
-          <Paper className={classes.resultPaper}>
-            <SearchResultList
-              searchKey={searchKey}
-              result={result}
-              isFirstRun={isFirstRun}
-              classes={classes}
-            />
-          </Paper>
-        )}
-      </div>
-      <Backdrop
-        className={classes.backdrop}
-        open={open}
-        onClick={() => {
-          setOpen(false)
-        }}
-      />
+      <SearchContainer>
+        <SearchIconBlock/>
+        <SearchInput/>
+        <SearchResult/>
+      </SearchContainer>
+      <StyledBackdrop open={searchStore.open} onClick={searchStore.disableSearch}/>
     </>
   } else {
     return <>
-      <IconButton onClick={() => {
-        setOpen(true)
-      }} className={classes.smallScreenSearchIcon}>
+      <SmallScreenSearchIconBtn onClick={searchStore.enableSearch}>
         <SearchIcon/>
-      </IconButton>
+      </SmallScreenSearchIconBtn>
       <Dialog
-        open={open}
-        onClose={() => {
-          setOpen(false)
-        }}
+        open={searchStore.open}
+        onClose={searchStore.disableSearch}
         fullWidth={true}
-        fullScreen
+        fullScreen={true}
       >
-        <Paper component="div" className={classes.dialogHeader}>
-          <IconButton className={classes.smallScreenReturnIcon} onClick={() => {
-            setOpen(false)
-          }}>
-            <ArrowBackIcon/>
-          </IconButton>
-          <InputBase
-            type="search"
-            placeholder="键入以开始搜索"
-            onChange={(ev) => {
-              setSearchKey(ev.target.value)
-            }}
-            classes={{
-              root: classes.smallScreenInputRoot,
-              input: classes.inputInput,
-            }}
-            autoFocus
-            defaultValue={searchKey}
-          />
-        </Paper>
-        {open && (
-          <SearchResultList
-            searchKey={searchKey}
-            result={result}
-            isFirstRun={isFirstRun}
-            classes={classes}
-          />
-        )}
+        <SmallScreenDialogHeaderPaper>
+          <SmallScreenReturnBtn onClick={searchStore.disableSearch}>
+            <ArrowBack/>
+          </SmallScreenReturnBtn>
+          <SearchInput isSmallScreen={true} autoFocus={true}/>
+        </SmallScreenDialogHeaderPaper>
+        <SearchResult/>
       </Dialog>
     </>
   }
-}
+})
 
 export default Search
diff --git a/gatsby-theme-oi-wiki/src/components/Search/store.ts b/gatsby-theme-oi-wiki/src/components/Search/store.ts
new file mode 100644
index 00000000..26c61ac6
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Search/store.ts
@@ -0,0 +1,47 @@
+import { observable } from 'mobx'
+
+interface SearchStore {
+  searchKey: string;
+  open: boolean;
+  isFirstRun: boolean;
+
+  setSearchKey(val: string): void;
+
+  setOpen(val: boolean): void;
+
+  disableSearch(): void;
+
+  enableSearch(): void;
+
+  setIsFirstRun(val: boolean): void;
+}
+
+const searchStore = observable<SearchStore>({
+  searchKey: '',
+  open: false,
+  isFirstRun: true,
+
+  setSearchKey(val) {
+    this.searchKey = val
+  },
+
+  setOpen(val) {
+    this.open = val
+  },
+
+  disableSearch() {
+    this.open = false
+  },
+
+  enableSearch() {
+    this.open = true
+  },
+
+  setIsFirstRun(val) {
+    this.isFirstRun = val
+  },
+}, undefined, {
+  autoBind: true,
+})
+
+export { searchStore }
diff --git a/gatsby-theme-oi-wiki/src/components/Search/styles.ts b/gatsby-theme-oi-wiki/src/components/Search/styles.ts
deleted file mode 100644
index b5b16faa..00000000
--- a/gatsby-theme-oi-wiki/src/components/Search/styles.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-import { alpha, makeStyles } from '@material-ui/core/styles'
-import { scrollbarStyle } from '../../styles/scrollbar'
-
-export const useStyles = makeStyles((theme) => ({
-  container: {
-    display: 'flex',
-    flexWrap: 'wrap',
-  },
-  searchResultPrimary: {
-    '& em': {
-      fontStyle: 'normal',
-      color: theme.palette.secondary.main,
-      background: 'rgba(143,187,237,.1)',
-    },
-  },
-  searchResultSecondary: {
-    '& em': {
-      fontStyle: 'normal',
-      padding: '0 0 2px',
-      boxShadow: `inset 0 -2px 0 0 ${theme.palette.secondary.main}`,
-      // 使用 box shadow 模拟下划线
-    },
-  },
-  inputRoot: {
-    color: 'inherit',
-    display: 'block',
-    // margin: theme.spacing(1, 1, 1, 0),
-    marginLeft: `calc(1em + ${theme.spacing(4)}px)`,
-    marginTop: '2px',
-    marginBottom: '2px',
-  },
-  smallScreenInputRoot: {
-    color: 'inherit',
-    display: 'block',
-    // margin: theme.spacing(1, 1, 1, 0),
-    marginLeft: `calc(1em + ${theme.spacing(4)}px)`,
-    marginTop: '9px',
-    marginBottom: '6px',
-  },
-  inputInput: {
-    // vertical padding + font size from searchIcon
-    // width: '100%',
-    [theme.breakpoints.up('md')]: {
-      transition: theme.transitions.create('width'),
-      width: '15vw',
-      '&:focus': {
-        width: '30vw',
-      },
-    },
-    [`&::-webkit-search-decoration,
-       &::-webkit-search-cancel-button,
-       &::-webkit-search-results-button,
-       &::-webkit-search-results-decoration`]: {
-      display: 'none',
-    },
-  },
-  wideInput: {
-    [theme.breakpoints.up('md')]: {
-      transition: theme.transitions.create('width'),
-      width: '30vw',
-    },
-  },
-  resultPaper: scrollbarStyle(theme, {
-    marginTop: '12px',
-    minWidth: `calc(30vw + 1em + ${theme.spacing(4)}px)`,
-    maxWidth: '50vw',
-    position: 'absolute',
-    right: '0 !important',
-    top: '100%',
-    maxHeight: '80vh',
-    overflowY: 'auto',
-    overflowX: 'hidden',
-    zIndex: theme.zIndex.drawer + 2,
-  }),
-  backdrop: {
-    zIndex: theme.zIndex.drawer + 1,
-  },
-  search: {
-    position: 'relative',
-    borderRadius: theme.shape.borderRadius,
-    maxWidth: `calc(30vw + 1em + ${theme.spacing(4)}px)`,
-    marginRight: theme.spacing(2),
-    marginLeft: 0,
-    width: '100%',
-    zIndex: theme.zIndex.drawer + 2,
-    [theme.breakpoints.up('md')]: {
-      marginLeft: theme.spacing(3),
-      width: 'auto',
-    },
-  },
-  searchColorBlack: {
-    backgroundColor: alpha(theme.palette.common.black, 0.15),
-    '&:hover': {
-      backgroundColor: alpha(theme.palette.common.black, 0.25),
-    },
-  },
-  searchColorWhite: {
-    backgroundColor: alpha(theme.palette.common.white, 0.8),
-    '&:hover': {
-      backgroundColor: theme.palette.common.white,
-    },
-  },
-  searchIcon: {
-    padding: theme.spacing(0, 2),
-    height: '100%',
-    position: 'absolute',
-    pointerEvents: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  searchMessage: {
-    padding: '8px 8px 8px 20px',
-    backgroundColor: theme.palette.search.messageBackground,
-  },
-  smallScreenSearchIcon: {
-    padding: theme.spacing(1.5),
-    height: '100%',
-    // position: 'absolute',
-    // pointerEvents: 'none',
-    color: 'inherit',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  smallScreenReturnIcon: {
-    padding: theme.spacing(1.5),
-    // padding: 0,
-    // height: '100%',
-    position: 'absolute',
-    display: 'flex',
-    // alignItems: 'center',
-    // justifyContent: 'center',
-
-  },
-  dialogHeader: {
-    display: 'block',
-    alignItems: 'center',
-    '-webkit-border-radius': '0',
-    '-moz-border-radius': '0',
-    'border-radius': '0',
-  },
-}))
diff --git a/gatsby-theme-oi-wiki/src/components/Link/LinkTooltip.tsx b/gatsby-theme-oi-wiki/src/components/SmartLink/LinkTooltip.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/Link/LinkTooltip.tsx
rename to gatsby-theme-oi-wiki/src/components/SmartLink/LinkTooltip.tsx
diff --git a/gatsby-theme-oi-wiki/src/components/Link/ToolCard.tsx b/gatsby-theme-oi-wiki/src/components/SmartLink/ToolCard.tsx
similarity index 69%
rename from gatsby-theme-oi-wiki/src/components/Link/ToolCard.tsx
rename to gatsby-theme-oi-wiki/src/components/SmartLink/ToolCard.tsx
index 905937a8..2a2cb2e4 100644
--- a/gatsby-theme-oi-wiki/src/components/Link/ToolCard.tsx
+++ b/gatsby-theme-oi-wiki/src/components/SmartLink/ToolCard.tsx
@@ -1,55 +1,63 @@
 import React, { createRef, useCallback, useEffect, useRef, useState } from 'react'
-import { Card, CardContent, CircularProgress, Fade, makeStyles } from '@material-ui/core'
 import { Link as GatsbyLink } from 'gatsby'
-
 import { FetchStatus, PreviewData } from './LinkTooltip'
 import { useDelay } from './hooks'
 import { getElementSize, getElementViewPosition, Position, Size } from './utils'
 import { Nullable } from '../../types/common'
-import { Alert } from '@material-ui/lab'
-
-const lines = 4
-const lineHeight = 1.5
-const cardDis = '2rem'
-const useStyles = makeStyles((theme) => ({
-  container: {
-    position: 'relative',
-    display: 'inline-block',
-  },
-  fade: {
-    lineHeight: `${lineHeight}em`,
-    height: `${lineHeight * lines}em`,
-    overflow: 'hidden',
-    position: 'relative',
-    '&:after': {
-      content: '""',
-      textAlign: 'right',
-      position: 'absolute',
-      bottom: 0,
-      right: 0,
-      width: '30%',
-      height: '1.5em',
-      background: theme.palette.fadeTextBackground,
-    },
-  },
-  toolCard: {
-    position: 'absolute',
-    zIndex: 9999,
-    width: '320px',
-    left: 0,
-    top: cardDis,
-    maxWidth: 'calc(100vw - 40px)',
-  },
-  aboveMedian: {
-    top: 'initial',
-    bottom: cardDis,
-  },
-  fetching: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-}))
+import styled from '@mui/material/styles/styled'
+import Card from '@mui/material/Card'
+import { css } from '@emotion/react'
+import CardContent from '@mui/material/CardContent'
+import Fade from '@mui/material/Fade'
+import CircularProgress from '@mui/material/CircularProgress'
+import Alert from '@mui/material/Alert'
+
+const LINES = 4
+const LINE_HEIGHT = 1.5
+const CARD_DIS = '2rem'
+
+const Container = styled('span')`
+  position: relative;
+  display: inline-block;
+`
+
+const StyledCard = styled(Card)(({ theme }) => css`
+  width: 320px;
+  position: absolute;
+  left: 0;
+  top: ${CARD_DIS};
+  max-width: calc(100vw - 40px);
+  z-index: ${theme.zIndex.tooltip};
+`)
+
+const FetchingContent = styled(CardContent)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`
+
+const FetchedContentDiv = styled('div')`
+  line-height: ${LINE_HEIGHT}em;
+  height: ${LINE_HEIGHT * LINES}em;
+  overflow: hidden;
+  position: relative;
+
+  &:after {
+    content: "";
+    text-align: right;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 30%;
+    height: ${LINE_HEIGHT}em;
+    background-color: white;
+  }
+`
+
+const aboveMedianStyle = css`
+  top: initial;
+  bottom: ${CARD_DIS};
+`
 
 interface PositionAndSize {
   pos: Position,
@@ -68,11 +76,10 @@ export interface ToolCardProps {
 }
 
 const ToolCard: React.FC<ToolCardProps> = (props) => {
-  const classes = useStyles()
   const { children, content, status, closeDelay = 0, openDelay = 0, onHover, to } = props
   const [open, setOpen] = useState(false)
   const rootRef = createRef<HTMLDivElement>()
-  const popperRef = useRef<HTMLElement>()
+  const popperRef = useRef<HTMLDivElement>(null)
   const [onOpen, onClose] = useDelay(() => {
     setOpen(true)
     props.onOpen?.()
@@ -115,9 +122,9 @@ const ToolCard: React.FC<ToolCardProps> = (props) => {
 
     element.style.setProperty('right', typeof right === 'undefined' ? 'auto' : `${right}px`)
     element.style.setProperty('left', typeof left === 'undefined' ? 'auto' : `${left}px`)
-    element.classList.toggle(classes.aboveMedian, pos.y > viewport.height / 2)
+    element.classList.toggle(aboveMedianStyle.name, pos.y > viewport.height / 2)
 
-  }, [classes.aboveMedian, rootRef])
+  }, [rootRef])
 
   useEffect(() => {
     if (open && popperRef.current) {
@@ -130,8 +137,7 @@ const ToolCard: React.FC<ToolCardProps> = (props) => {
   }, [open, content, popperRef, adjustElementPosition, rootRef])
 
   return (
-    <span
-      className={classes.container}
+    <Container
       onMouseEnter={() => {
         onOpen()
         onHover?.()
@@ -143,32 +149,31 @@ const ToolCard: React.FC<ToolCardProps> = (props) => {
       <div className='math math-display'/>
       <GatsbyLink to={to}>
         <Fade in={open}>
-          <Card
-            className={classes.toolCard}
+          <StyledCard
             elevation={3}
             ref={popperRef}
           >
             {(() => {
               if (status === 'not_fetched' || status === 'fetching') {
-                return <CardContent className={classes.fetching}>
+                return <FetchingContent>
                   <CircularProgress/>
-                </CardContent>
+                </FetchingContent>
               } else if (status === 'fetched') {
                 return <CardContent>
-                  <div className={classes.fade}>
+                  <FetchedContentDiv>
                     <strong>{content?.title + ' '}</strong>
                     {content?.text}
-                  </div>
+                  </FetchedContentDiv>
                 </CardContent>
               } else {
                 return <Alert severity="error">无法获取页面预览</Alert>
               }
             })()}
-          </Card>
+          </StyledCard>
         </Fade>
       </GatsbyLink>
       {children}
-    </span>
+    </Container>
   )
 }
 
diff --git a/gatsby-theme-oi-wiki/src/components/Link/hooks.tsx b/gatsby-theme-oi-wiki/src/components/SmartLink/hooks.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/components/Link/hooks.tsx
rename to gatsby-theme-oi-wiki/src/components/SmartLink/hooks.tsx
diff --git a/gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx b/gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx
new file mode 100644
index 00000000..640265b0
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/SmartLink/index.tsx
@@ -0,0 +1,143 @@
+import { Link as GatsbyLink } from 'gatsby'
+import isAbsoluteURL from 'is-absolute-url'
+import React from 'react'
+import LinkTooltip from './LinkTooltip'
+import path from 'path'
+import smoothScrollTo from '../../lib/smoothScroll'
+import { OnClickHandler } from '../../types/common'
+import { css, SerializedStyles } from '@emotion/react'
+import styled from '@mui/material/styles/styled'
+import Link, { LinkProps } from '@mui/material/Link'
+import { getElementViewPosition } from './utils'
+import { observer } from 'mobx-react-lite'
+import { headerStore } from '../../stores/headerStore'
+import { Theme } from '@mui/material/styles/createTheme'
+
+const MD_EXPR = /\.(md|markdown|mdtext|mdx)/g
+
+/**
+ * 修复相对路径的页面链接
+ *
+ * Example 1:
+ * - link: `../a/b/c`, path: `/x/y/`, isIndex: `false`
+ * - return: `/x/y/../../a/b/c` (`/a/b/c/`)
+ *
+ * Example 2:
+ * - link: `../a/b/c`, path: `/x/y/`, isIndex: `true`
+ * - return: `/x/y/../a/b/c` (`/x/a/b/c/`)
+ *
+ * 实际上不需要当前页面的 path
+ */
+const linkFix = (link: string, isIndex: boolean): string => {
+  if (link.startsWith('/')) return link // absolute path
+
+  let newLink = link.replace(MD_EXPR, '/').replace('index', '')
+  if (!isIndex) newLink = '../' + newLink
+  // append '/' for links, but excluding urls includes `#`.
+  if (newLink.endsWith('/') && !newLink.includes('#')) {
+    newLink += '/'
+  }
+  return newLink
+}
+
+const getAPILink = (link: string, pathname: string, isIndex: boolean): string => {
+  let newLink = link.replace(MD_EXPR, '/').replace(/#(.*?)$/, '')
+  if (!newLink.startsWith('/')) {
+    if (!isIndex) newLink = '../' + newLink
+    if (pathname.endsWith('/')) pathname += '/'
+    newLink = path.resolve(pathname, newLink)
+  }
+  return `https://api.mgt.moe/preview?path=${newLink}`
+}
+
+const isRef = (link: string): boolean => link.startsWith('#')
+
+const linkStyle = ({ theme }: { theme?: Theme }): SerializedStyles => css`
+  color: ${theme?.palette.secondary.main};
+  text-decoration: none;
+  transition: color 225ms ease-in-out;
+
+  &:hover {
+    color: ${theme?.palette.secondary.main};
+  }
+`
+
+const StyledLink = styled(Link)(linkStyle)
+
+const StyledGLink = styled(GatsbyLink)(linkStyle)
+
+export interface SmartLinkProps extends LinkProps {
+  /** 类名 */
+  className?: string;
+  /** 是否对站内链接启用 Tooltip 预览，如果为 true 则必须给出 pathname */
+  tooltip?: boolean;
+  /** 当前页面的 path，用于获取 Tooltip API URL */
+  pathname?: string;
+  /** 用于 markdown 内链的修复, 设置为 true 可以避免相关影响 */
+  isIndex?: boolean;
+  /** state data only exist on GatsbyLink */
+  state?: Record<string, any>
+}
+
+const SCROLL_PADDING = 24
+
+const RefLink: React.FC<SmartLinkProps> = observer((props) => {
+  const { href = '', children, ...others } = props
+
+  const onClick: OnClickHandler = (e) => {
+    e.preventDefault()
+
+    const target = document.getElementById(href.substring(1, href.length))
+    const yDis = getElementViewPosition(target).y + window?.pageYOffset - headerStore.currentHeight - SCROLL_PADDING
+
+    smoothScrollTo(yDis)
+  }
+
+  return (
+    <StyledGLink to={href} onClick={onClick} {...others as any}>
+      {children}
+    </StyledGLink>
+  )
+})
+
+/**
+ * 智能链接
+ *
+ * - 如果是目录则使用原生 a 标签
+ * - 如果是 URL 就设为外链
+ * - 如果是 markdown 引用（纯哈希）则使用引用
+ * - 如果是 path 则根据 tooltip 属性决定是否启用 Tooltip
+ */
+const SmartLink: React.FC<SmartLinkProps> = (props) => {
+  const { tooltip = false, href = '', isIndex = true, pathname, children, ...others } = props
+
+  if (others?.className?.includes('anchor')) {
+    delete others.className
+    return <Link {...others} href={href}>{children}</Link>
+  } else if (isAbsoluteURL(href)) {
+    return (
+      <StyledLink href={href} target="_blank" rel="noopener noreferrer nofollow" {...others as any}>
+        {children}
+      </StyledLink>
+    )
+  } else if (isRef(href)) {
+    return <RefLink href={href} {...others}>{children}</RefLink>
+  } else if (tooltip) {
+    if (!pathname) throw new Error('tooltip 为 true 时必须给出 pathname')
+    return (
+      <LinkTooltip url={getAPILink(href, pathname, isIndex)} to={linkFix(href, isIndex)}>
+        <StyledGLink to={linkFix(href, isIndex)} {...others as any}>
+          {children}
+        </StyledGLink>
+      </LinkTooltip>
+    )
+  } else {
+    return (
+      <GatsbyLink to={linkFix(href, isIndex)} {...others as any}>
+        {children}
+      </GatsbyLink>
+    )
+  }
+}
+
+export default SmartLink
diff --git a/gatsby-theme-oi-wiki/src/components/Link/utils.ts b/gatsby-theme-oi-wiki/src/components/SmartLink/utils.ts
similarity index 63%
rename from gatsby-theme-oi-wiki/src/components/Link/utils.ts
rename to gatsby-theme-oi-wiki/src/components/SmartLink/utils.ts
index c66a1c4d..b72678e1 100644
--- a/gatsby-theme-oi-wiki/src/components/Link/utils.ts
+++ b/gatsby-theme-oi-wiki/src/components/SmartLink/utils.ts
@@ -1,14 +1,12 @@
+import { Nullable } from '../../types/common'
+
 export type Position = Pick<DOMRect, 'x' | 'y'>
 
 /**
  * 获取元素的绝对位置坐标（相对于浏览器视区左上角）
  */
-export const getElementViewPosition = (el: HTMLElement): Position => {
-  const rect = el.getBoundingClientRect()
-  return {
-    x: rect.x || rect.top,
-    y: rect.y || rect.bottom,
-  }
+export const getElementViewPosition = (el: Nullable<HTMLElement>): Position => {
+  return el?.getBoundingClientRect() ?? { x: 0, y: 0 }
 }
 
 export type Size = Pick<DOMRect, 'width' | 'height'>
diff --git a/gatsby-theme-oi-wiki/src/components/StyledLayout.tsx b/gatsby-theme-oi-wiki/src/components/StyledLayout.tsx
index 521bacc7..3a9101bf 100644
--- a/gatsby-theme-oi-wiki/src/components/StyledLayout.tsx
+++ b/gatsby-theme-oi-wiki/src/components/StyledLayout.tsx
@@ -13,7 +13,7 @@ import {
   DarkCssBaseline,
   LightCssBaseline,
   SecondaryColorCssBaseline,
-} from '../theme'
+} from '../theme/old-index'
 import { scrollbarStyle } from '../styles/scrollbar'
 import Comment from './Comment'
 import Toc, { TocObj } from './Toc'
diff --git a/gatsby-theme-oi-wiki/src/components/Tags.tsx b/gatsby-theme-oi-wiki/src/components/Tags.tsx
index 713c3536..f414f9f0 100644
--- a/gatsby-theme-oi-wiki/src/components/Tags.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Tags.tsx
@@ -1,36 +1,32 @@
-import Chip from '@material-ui/core/Chip'
-import { makeStyles } from '@material-ui/core/styles'
 import kebabCase from 'lodash/kebabCase'
 import React from 'react'
+import styled from '@mui/material/styles/styled'
+import Chip from '@mui/material/Chip'
+import { css } from '@emotion/react'
+import SmartLink from './SmartLink'
+import Box from '@mui/material/Box'
 
-const useStyles = makeStyles((theme) => ({
-  chip: {
-    margin: theme.spacing(0.5),
-  },
-}))
+const StyledChip = styled(Chip)(({ theme }) => css`
+  margin: ${theme.spacing(0.5)};
+`) as typeof Chip
 
-interface Props{
-  tags: Array<string>
+export interface TagsProps {
+  tags: string[]
 }
 
-const Tags: React.FC<Props> = (props: Props) => {
-  const arr = props.tags
-  const classes = useStyles()
+const Tags: React.FC<TagsProps> = (props: TagsProps) => {
   return (
-    <div>
-      {arr &&
-        arr.map((tag) => (
-          <Chip
-            label={` #${tag} `}
-            href={'/tags/' + kebabCase(tag)}
-            key={`tag-${tag}`}
-            component="a"
-            variant="outlined"
-            clickable
-            className={classes.chip}
-          />
-        ))}
-    </div>
+    <Box>
+      {props.tags.map((tag) => (
+        <StyledChip
+          key={`tag-${tag}`}
+          component={SmartLink}
+          href={'/tags/' + kebabCase(tag)}
+          label={` #${tag} `}
+          variant="outlined"
+          clickable={true}/>
+      ))}
+    </Box>
   )
 }
 
diff --git a/gatsby-theme-oi-wiki/src/components/Time.tsx b/gatsby-theme-oi-wiki/src/components/Time.tsx
deleted file mode 100644
index b6155771..00000000
--- a/gatsby-theme-oi-wiki/src/components/Time.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import timeDifference from '../lib/relativeTime'
-
-const defaultProps = {
-  defaultShowRelative: true,
-  updateInterval: 30 * 1000,
-}
-
-export interface TimeProps extends Partial<typeof defaultProps> {
-  time: number | Date | string
-}
-
-const Time: React.FC<TimeProps> = (props) => {
-  const { time, defaultShowRelative, updateInterval } = { ...defaultProps, ...props }
-  const [relativeMode, setRelativeMode] = useState(defaultShowRelative)
-  const [now, setNow] = useState(Date.now())
-  const timestamp = +new Date(time)
-
-  const toggle = (): void => {
-    setRelativeMode(!relativeMode)
-  }
-
-  useEffect(() => {
-    const t = setInterval(() => {
-      setNow(Date.now())
-    }, updateInterval)
-
-    return () => {
-      clearInterval(t)
-    }
-  }, [updateInterval])
-
-  return <span
-    style={{ cursor: 'pointer' }}
-    onClick={toggle}>
-    {relativeMode ? timeDifference(now, timestamp) : new Date(timestamp).toLocaleString()}
-  </span>
-}
-
-export default Time
diff --git a/gatsby-theme-oi-wiki/src/components/Time/index.tsx b/gatsby-theme-oi-wiki/src/components/Time/index.tsx
new file mode 100644
index 00000000..45b8d1ee
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/Time/index.tsx
@@ -0,0 +1,37 @@
+import React, { useMemo, useState } from 'react'
+import { timeDifference } from './utils'
+import Typography from '@mui/material/Typography'
+import { Tooltip } from '@mui/material'
+
+export interface TimeProps {
+  time: number | Date | string;
+  showRelative?: boolean,
+}
+
+
+const Time: React.FC<TimeProps> = (props) => {
+  const { time, showRelative = true } = props
+  const [relativeMode, setRelativeMode] = useState(showRelative)
+
+  const timeStr = useMemo(() => {
+    const timestamp = new Date(time)
+    return relativeMode
+      ? timeDifference(Date.now(), +timestamp)
+      : timestamp.toLocaleString()
+  }, [relativeMode, time])
+
+
+  const toggle = (): void => {
+    setRelativeMode(!relativeMode)
+  }
+
+  return (
+    <Tooltip title="click to switch between relative and absolute time" arrow={true}>
+      <Typography component="span" sx={{ cursor: 'pointer' }} onClick={toggle}>
+        {timeStr}
+      </Typography>
+    </Tooltip>
+  )
+}
+
+export default Time
diff --git a/gatsby-theme-oi-wiki/src/lib/relativeTime.ts b/gatsby-theme-oi-wiki/src/components/Time/utils.ts
similarity index 91%
rename from gatsby-theme-oi-wiki/src/lib/relativeTime.ts
rename to gatsby-theme-oi-wiki/src/components/Time/utils.ts
index 3ab1c134..59c37fbe 100644
--- a/gatsby-theme-oi-wiki/src/lib/relativeTime.ts
+++ b/gatsby-theme-oi-wiki/src/components/Time/utils.ts
@@ -6,7 +6,7 @@
  * @param {number} previous in milliseconds
  * @return {string}  string
  */
-export default function timeDifference (current: number, previous: number): string {
+function timeDifference(current: number, previous: number): string {
   const msPerMinute = 60 * 1000
   const msPerHour = msPerMinute * 60
   const msPerDay = msPerHour * 24
@@ -31,3 +31,5 @@ export default function timeDifference (current: number, previous: number): stri
   }
   return `约 ${Math.round(elapsed / msPerYear)} 年前`
 }
+
+export { timeDifference }
diff --git a/gatsby-theme-oi-wiki/src/components/Title.tsx b/gatsby-theme-oi-wiki/src/components/Title.tsx
index 1a390804..98058e81 100644
--- a/gatsby-theme-oi-wiki/src/components/Title.tsx
+++ b/gatsby-theme-oi-wiki/src/components/Title.tsx
@@ -1,68 +1,64 @@
-import React, { useState } from 'react'
-import { createStyles, Grid, Hidden, IconButton, makeStyles, Tooltip, Typography } from '@material-ui/core'
-import EditIcon from '@material-ui/icons/Edit'
-import EditWarn from './EditWarn'
+import React, { useEffect } from 'react'
+import Grid from '@mui/material/Grid'
+import Typography from '@mui/material/Typography'
+import Tooltip from '@mui/material/Tooltip'
+import Edit from '@mui/icons-material/Edit'
+import IconButton from '@mui/material/IconButton'
+import styled from '@mui/material/styles/styled'
+import { css } from '@emotion/react'
+import { observer } from 'mobx-react-lite'
+import { editWarnStore } from '../stores/editWarnStore'
 
-export interface TitleProps {
-  title: string,
-  noEdit: boolean,
-  noMeta?: boolean,
-  relativePath: string,
-  location: Location,
+interface EditBtnProps {
+  relativePath: string;
 }
 
-const useStyles = makeStyles((theme) => createStyles({
-  boldText: {
-    fontWeight: 'bold',
-    display: 'inline-block',
-    verticalAlign: 'middle',
-  },
-  iconButton: {
-    float: 'right',
-    padding: 0,
-    margin: 12,
-  },
-  subText: {
-    color: theme.palette.subTitle,
-    lineHeight: 1.8,
-  },
-}))
+export interface TitleProps extends EditBtnProps {
+  noEdit: boolean;
+}
+
+const StyledGrid = styled(Grid)`
+  align-items: center;
+  position: relative;
+`
+
+const StyledTyp = styled(Typography)(({ theme }) => css`
+  font-weight: ${theme.typography.fontWeightBold};
+`)
+
+const StyledIconBtn = styled(IconButton)`
+  margin: 0.8rem;
+  position: absolute;
+  right: 0;
+`
+
+
+const EditBtn: React.FC<EditBtnProps> = observer((props) => {
+  useEffect(() => {
+    editWarnStore.setRelativePath(props.relativePath)
+  }, [props.relativePath])
+
+  const editAction = (): void => {
+    editWarnStore.setOpen(true)
+  }
+
+  return (
+    <Tooltip title="编辑页面" arrow={true}>
+      <StyledIconBtn onClick={editAction}>
+        <Edit/>
+      </StyledIconBtn>
+    </Tooltip>
+  )
+})
 
 const Title: React.FC<TitleProps> = (props) => {
-  const classes = useStyles()
-  const [dialogOpen, setDialogOpen] = useState(false)
-  const { relativePath, location, title, noEdit } = props
+  const { relativePath, noEdit, children } = props
 
   return (
-    <>
-      <EditWarn
-        relativePath={relativePath}
-        dialogOpen={dialogOpen}
-        setDialogOpen={setDialogOpen}
-        location={location}
-      />
-      <Grid container spacing={2}>
-        <Grid item xs>
-          <Typography variant="h4" className={classes.boldText} component="h1">
-            {title}
-          </Typography>
-        </Grid>
-        <Grid item xs={1}>
-          {!noEdit &&
-          <Hidden xsDown implementation="css">
-            <Tooltip title="编辑页面" placement="left" arrow>
-              <IconButton
-                onClick={() => setDialogOpen(true)}
-                className={classes.iconButton}
-              >
-                <EditIcon fontSize="small"/>
-              </IconButton>
-            </Tooltip>
-          </Hidden>
-          }
-        </Grid>
-      </Grid>
-    </>
+    <StyledGrid container={true}>
+      <StyledTyp variant="h1" flexGrow={1}>{children}</StyledTyp>
+      {!noEdit && <EditBtn relativePath={relativePath}/>}
+    </StyledGrid>
   )
 }
 
diff --git a/gatsby-theme-oi-wiki/src/components/TocSidebar/TocContainer.tsx b/gatsby-theme-oi-wiki/src/components/TocSidebar/TocContainer.tsx
new file mode 100644
index 00000000..43320f23
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/TocSidebar/TocContainer.tsx
@@ -0,0 +1,152 @@
+import { Nullable } from '../../types/common'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import useThrottledOnScroll from '../../lib/useThrottledOnScroll'
+import Typography from '@mui/material/Typography'
+import TocList, { TocListProps, TocNode } from './TocList'
+import { bindHTMLElement, getNextItem, getPrevItem, nodeSetActive, tocConverter, TocItem } from './util'
+import styled from '@mui/material/styles/styled'
+import Grid from '@mui/material/Grid'
+import { css } from '@emotion/react'
+
+export interface TocContainerProps {
+  toc: TocItem[];
+}
+
+
+const Container = styled(Grid)(({ theme }) => css`
+  flex-shrink: 0;
+  padding: ${theme.spacing(2, 2, 2, 0)};
+  display: block;
+
+  ${theme.breakpoints.down('md')} {
+    display: none;
+  }
+`)
+
+const Title = styled(Typography)(({ theme }) => css`
+  margin-top: ${theme.spacing(2)};
+  padding-left: ${theme.spacing(1.5)};
+`)
+
+const TocContainer: React.FC<TocContainerProps> = (props) => {
+  const { toc } = props
+
+  const newItems = useRef(tocConverter(toc))
+  const clickedRef = useRef(false)
+  const unsetClickedRef = useRef<ReturnType<typeof setTimeout>>()
+  const [activeState, setActiveState] = useState<Nullable<TocNode>>(null)
+  const lstScrollTopRef = useRef(0)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const handleClick: TocListProps['onClick'] = (item) => (event) => {
+    event.preventDefault()
+
+    const hash = item.url
+    const yDis = (item.element?.getBoundingClientRect().top || 0) + window?.pageYOffset
+
+    // smoothScrollTo(yDis)
+    window?.scrollTo(0, yDis)
+
+    window?.history.pushState(null, '', hash)
+    clickedRef.current = true
+
+    // clear last unfinished timeout
+    if (unsetClickedRef.current) clearTimeout(unsetClickedRef.current)
+    unsetClickedRef.current = setTimeout(() => {
+      clickedRef.current = false
+    }, 100)
+
+    if (activeState?.url !== hash) {
+      updateActive(item)
+    }
+  }
+
+  const updateActive = useCallback((state: Nullable<TocNode>): void => {
+    if (activeState?.url === state?.url) return
+
+    nodeSetActive(activeState, false)
+    nodeSetActive(state, true)
+    setActiveState(state)
+  }, [activeState])
+
+
+  const activeTocOnScroll = useCallback((): void => {
+    if (clickedRef.current) return
+
+    const TO_TOP_DIS = 20
+    const pageScrollTop = window?.pageYOffset || document.documentElement.scrollTop
+    let node: Nullable<TocNode> = activeState || newItems.current[0]
+
+    // down dir
+    if (pageScrollTop > lstScrollTopRef.current) {
+      let minDisNode = node
+      while (node) {
+        if (
+          node.element &&
+          node.element.getBoundingClientRect().top > TO_TOP_DIS + 20
+        ) {
+          break
+        } else {
+          if (node !== minDisNode) minDisNode = node
+          node = node.children.length > 0
+            ? node.children[0]
+            : getNextItem(newItems.current, node)
+        }
+      }
+      node = minDisNode
+    } else {
+      while (node) {
+        // node may have no ele which caused by error id
+        if (
+          !node.element ||
+          node.element.getBoundingClientRect().top <= TO_TOP_DIS
+        ) {
+          break
+        } else {
+          node = getPrevItem(newItems.current, node)
+        }
+      }
+    }
+
+    if (activeState !== node) {
+      updateActive(node)
+
+      // scroll the toc
+      // if (node?.selfElement) node.selfElement.scrollIntoView()
+      // else containerRef.current?.scrollTo({ top: 0 })
+
+      //  change hash
+      window.history.replaceState(null, '', node?.url)
+    }
+
+    lstScrollTopRef.current = pageScrollTop
+  }, [activeState, updateActive])
+
+  useEffect(() => {
+    bindHTMLElement(newItems.current)
+  }, [toc])
+
+  useThrottledOnScroll(activeTocOnScroll, 100)
+
+  useEffect(
+    () => {
+      return () => {
+        clearTimeout(unsetClickedRef.current as never as number)
+      }
+    },
+    [],
+  )
+
+  return (
+    newItems.current.length > 0
+      ? <Container ref={containerRef} aria-label="pageTOC">
+        <Title gutterBottom={true}>目录</Title>
+        <TocList data={newItems.current} onClick={handleClick}/>
+      </Container>
+      : <></>
+  )
+}
+
+const TocContainerMemo = React.memo(TocContainer)
+
+export default TocContainerMemo
diff --git a/gatsby-theme-oi-wiki/src/components/TocSidebar/TocList.tsx b/gatsby-theme-oi-wiki/src/components/TocSidebar/TocList.tsx
new file mode 100644
index 00000000..b60eb35e
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/TocSidebar/TocList.tsx
@@ -0,0 +1,95 @@
+import { Nullable, OnClickHandler } from '../../types/common'
+import React from 'react'
+import styled from '@mui/material/styles/styled'
+import Link from '@mui/material/Link'
+
+export interface TocNode {
+  url: string;
+  title: string;
+  level: number;
+  status: 'active' | 'expanded' | 'collapse'
+  children: TocNode[];
+  parent: Nullable<TocNode>;
+  element: Nullable<HTMLElement>;
+  selfElement: Nullable<HTMLElement>
+  index: number;
+}
+
+interface Props {
+  onClick?: (item: TocNode) => OnClickHandler<HTMLSpanElement>;
+  data: TocNode;
+}
+
+export interface TocListProps {
+  onClick?: (item: TocNode) => OnClickHandler<HTMLSpanElement>;
+  data: TocNode[]
+}
+
+interface StyledULProps extends React.HTMLAttributes<HTMLUListElement> {
+  status?: TocNode['status']
+}
+
+const StyledUL = styled('ul')<StyledULProps>`
+  padding-left: 0;
+  list-style: none;
+  overflow-y: hidden;
+  transition: all 400ms ease-in-out;
+  max-height: ${({ status }) => status === 'collapse' ? 0 : 600}px;
+`
+
+const StyledLI = styled('li')`
+  padding: 8px 0 0;
+`
+
+const StyledLink = styled(Link)`
+  display: block;
+  text-underline: none;
+  border-left: 4px solid transparent;
+`
+
+const TocItem: React.FC<Props> = (props) => {
+  const { data, onClick, ...restProps } = props
+  return (
+    <StyledLink
+      href={data.url}
+      onClick={(e) => {
+        onClick && onClick(data)(e)
+      }}
+      color={data.status !== 'collapse' ? 'secondary' : 'textSecondary'}
+      sx={{
+        paddingLeft: `${data.level + 1}em`,
+        borderLeftColor: (theme) => (data.status === 'active'
+          ? theme.palette.secondary.main
+          : 'transparent'),
+      }}
+      {...restProps}
+    >
+      <span dangerouslySetInnerHTML={{ __html: data.title }}/>
+    </StyledLink>)
+}
+
+const TocBlock: React.FC<Props> = (props) => {
+  const { data, onClick, ...restProps } = props
+  return (
+    <StyledLI id={`toc-${data.url}`}>
+      <TocItem data={data} onClick={onClick} {...restProps} />
+      {data.children.length > 0 &&
+      <StyledUL status={data.status}>
+        {data.children.map(i => <TocBlock key={i.url} data={i} onClick={onClick}   {...restProps}/>)}
+      </StyledUL>
+      }
+    </StyledLI>
+  )
+}
+
+const TocList: React.FC<TocListProps> = (props) => {
+  const { data, onClick, ...restProps } = props
+  return (
+    <StyledUL>
+      {data.map(i => <TocBlock data={i} onClick={onClick} {...restProps} key={i.url}/>)}
+    </StyledUL>
+  )
+}
+
+
+export default TocList
diff --git a/gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx b/gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx
new file mode 100644
index 00000000..be88b237
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/TocSidebar/index.tsx
@@ -0,0 +1,44 @@
+import FormatIndentDecreaseSharp from '@mui/icons-material/FormatIndentDecreaseSharp'
+import FormatIndentIncreaseSharp from '@mui/icons-material/FormatIndentIncreaseSharp'
+import React from 'react'
+import { tocSidebarStore } from '../../stores/sidebarStore'
+import { BTN_SIZE, ContainerBox, StyledIconBtn, WrapperBox } from '../NavSidebar'
+import { observer } from 'mobx-react-lite'
+import { headerStore } from '../../stores/headerStore'
+import TocContainer, { TocContainerProps } from './TocContainer'
+
+export type TocSidebarProps = TocContainerProps
+
+const TocCollapseBtn = observer(() => {
+  return (
+    <StyledIconBtn
+      aria-label="collapse toc sidebar"
+      onClick={tocSidebarStore.toggleCollapsed}
+      sx={{ left: -BTN_SIZE }}>
+      {tocSidebarStore.collapsed
+        ? <FormatIndentDecreaseSharp/>
+        : <FormatIndentIncreaseSharp/>}
+    </StyledIconBtn>
+  )
+})
+
+const TocSidebar: React.FC<TocSidebarProps> = observer((props) => {
+  const scaleX = tocSidebarStore.collapsed ? 0 : 1
+  const translateX = tocSidebarStore.collapsed ? tocSidebarStore.width : 0
+
+  return (
+    <WrapperBox sx={{
+      transform: `translate3d(${translateX}px, ${headerStore.currentHeight}px, 0)`,
+      height: `calc(100vh - ${headerStore.currentHeight}px)`,
+      borderRight: 'unset',
+      right: 0,
+    }}>
+      <ContainerBox sx={{ transform: `scale3d(${scaleX}, 1, 1)` }}>
+        <TocContainer toc={props.toc}/>
+      </ContainerBox>
+      <TocCollapseBtn/>
+    </WrapperBox>
+  )
+})
+
+export default TocSidebar
diff --git a/gatsby-theme-oi-wiki/src/components/TocSidebar/util.ts b/gatsby-theme-oi-wiki/src/components/TocSidebar/util.ts
new file mode 100644
index 00000000..516300fe
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/TocSidebar/util.ts
@@ -0,0 +1,88 @@
+import { TocNode } from './TocList'
+import { DeepRequiredNonNull, Nullable } from '../../types/common'
+import Slug from 'github-slugger'
+
+export type TocItem = DeepRequiredNonNull<Pick<GatsbyTypes.MarkdownHeading, 'id' | 'value' | 'depth'>>
+
+
+const getIDFromHash = (url: string): string => url.substring(1, url.length)
+
+const tocConverter = (items: TocItem[]): TocNode[] => {
+  const minLevel = items.reduce((v, i) => Math.min(v, i.depth), 5)
+  const curNode: Nullable<TocNode>[] = Array.from({ length: 6 }, () => null)
+  const data: TocNode[] = []
+  const REF_EXPR = /ref\d+$/
+  let index: number
+
+  const slugs = new Slug()
+  slugs.reset()
+
+  items.forEach((item) => {
+    const level = item.depth - minLevel
+    const title = item.value.replace(/<[^>]*>?/gm, '')
+    index = level > 0 ? (curNode[level - 1]?.children.length || 0) : data.length
+    const newNode: TocNode = {
+      url: `#${slugs.slug(title)}`.replace(REF_EXPR, ''),
+      title: title.replace(REF_EXPR, ''),
+      level,
+      index,
+      children: [],
+      status: 'collapse',
+      element: null,
+      parent: null,
+      selfElement: null,
+    }
+    curNode[level] = newNode
+
+    if (level === 0) {
+      data.push(newNode)
+    } else {
+      if (curNode[level - 1]) curNode[level - 1]?.children.push(newNode)
+      newNode.parent = curNode[level - 1]
+    }
+  })
+  return data
+}
+
+const bindHTMLElement = (toc: TocNode[]): void => {
+  toc.forEach((i, idx, arr) => {
+    if (i.element === null) arr[idx].element = document.getElementById(getIDFromHash(i.url))
+    if (i.selfElement === null) arr[idx].selfElement = document.getElementById(`toc-${i.url}`)
+    if (i.children) bindHTMLElement(i.children)
+  })
+}
+
+const nodeSetActive = (node: Nullable<TocNode>, val: boolean): void => {
+  for (let u = node; u !== null; u = u.parent) u.status = val ? 'expanded' : 'collapse'
+  if (val && node) node.status = 'active'
+}
+
+const getLstChild = (node: Nullable<TocNode>): Nullable<TocNode> => (
+  (node && node.children.length > 0)
+    ? getLstChild(node.children[node.children.length - 1])
+    : node
+)
+
+const getPrevItem = (rootList: TocNode[], node: TocNode): Nullable<TocNode> => {
+  const parent = node.parent
+  const prevIdx = node.index - 1
+  return prevIdx >= 0
+    ? getLstChild((parent === null ? rootList : parent.children)[prevIdx])
+    : parent
+}
+
+const getNextItem = (rootList: TocNode[], node: TocNode): Nullable<TocNode> => {
+  const parent = node.parent
+  const nextIdx = node.index + 1
+  if (parent === null) {
+    return rootList.length > nextIdx
+      ? rootList[nextIdx]
+      : null
+  } else {
+    return parent.children.length > nextIdx
+      ? parent.children[nextIdx]
+      : getNextItem(rootList, parent)
+  }
+}
+
+export { getIDFromHash, tocConverter, bindHTMLElement, nodeSetActive, getLstChild, getPrevItem, getNextItem }
diff --git a/gatsby-theme-oi-wiki/src/components/customed/Blockquote.tsx b/gatsby-theme-oi-wiki/src/components/customed/Blockquote.tsx
new file mode 100644
index 00000000..51eb3319
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/customed/Blockquote.tsx
@@ -0,0 +1,11 @@
+import styled from '@mui/material/styles/styled'
+import { css } from '@emotion/react'
+
+const Blockquote = styled('blockquote')(({ theme }) => css`
+  margin: 1rem 0;
+  padding: 0 1.5rem;
+  color: ${theme.palette.text.primary};
+  border-left: .25rem solid ${theme.palette.grey['300']};
+`)
+
+export default Blockquote
diff --git a/gatsby-theme-oi-wiki/src/components/customed/Code.tsx b/gatsby-theme-oi-wiki/src/components/customed/Code.tsx
new file mode 100644
index 00000000..690e5643
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/customed/Code.tsx
@@ -0,0 +1,25 @@
+import styled from '@mui/material/styles/styled'
+import { grey } from '@mui/material/colors'
+import React from 'react'
+
+const StyledCode = styled('code')`
+  color: ${grey[800]};
+  background-color: ${grey[100]};
+  word-break: break-word;
+  font-family: var(--code-block-font);
+  font-size: .9rem;
+
+  border-radius: .2rem;
+  padding: 0.2rem 0.4rem 0;
+  margin: 0 0.2rem;
+  box-decoration-break: clone;
+`
+
+const Code: React.FC<React.HTMLAttributes<HTMLElement>> = (props) => {
+  const { children, className, ...others } = props
+  return typeof className === 'undefined'
+    ? <StyledCode {...others}>{children}</StyledCode>
+    : <code className={className} {...others}>{children}</code>
+}
+
+export default Code
diff --git a/gatsby-theme-oi-wiki/src/components/customed/Codeblock.tsx b/gatsby-theme-oi-wiki/src/components/customed/Codeblock.tsx
new file mode 100644
index 00000000..d75386e7
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/customed/Codeblock.tsx
@@ -0,0 +1,115 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react'
+import Box from '@mui/material/Box'
+import styled from '@mui/material/styles/styled'
+import { css } from '@emotion/react'
+import IconButton, { IconButtonProps } from '@mui/material/IconButton'
+import Tooltip from '@mui/material/Tooltip'
+import SvgIcon from '@mui/material/SvgIcon'
+import Stack from '@mui/material/Stack'
+import AssignmentOutlined from '@mui/icons-material/AssignmentOutlined'
+import CodeOutlined from '@mui/icons-material/CodeOutlined'
+import { navigate } from 'gatsby'
+import has from 'lodash/has'
+import { LangType } from '../../utils/codeLang'
+
+interface ToolBtnProps extends IconButtonProps {
+  title: string;
+  Icon: typeof SvgIcon;
+}
+
+interface CodeBlockProps extends React.HTMLAttributes<HTMLElement> {
+  'data-language': string;
+}
+
+
+const StyledBox = styled(Box)(({ theme }) => css`
+  position: relative;
+  background-color: var(--shiki-color-background);
+  padding: 26px 16px 8px;
+  margin: 8px 0;
+  border-radius: .4rem;
+  box-shadow: ${theme.shadows[2]};
+  font-family: var(--code-block-font);
+`)
+
+const ToolBtnStack = styled(Stack)`
+  position: absolute;
+  right: 8px;
+  top: 0;
+  flex-flow: row;
+`
+
+const StyledIconBtn = styled(IconButton)`
+  color: inherit;
+  opacity: 0.6;
+
+  &:hover {
+    opacity: 1;
+  }
+`
+
+const ToolBtn: React.FC<ToolBtnProps> = (props) => {
+  const { title, Icon, ...others } = props
+
+  return (
+    <Tooltip title={title}>
+      <StyledIconBtn {...others}>
+        <Icon/>
+      </StyledIconBtn>
+    </Tooltip>
+  )
+}
+
+// map to lang defined in codeLang.ts
+const LANG_MAP: Readonly<Record<string, LangType>> = Object.freeze({
+  cpp: 'C++',
+  python: 'Python3',
+})
+
+const CodeBlock: React.FC<CodeBlockProps> = (props) => {
+  const { children, 'data-language': dataLng, ...others } = props
+  const ref = useRef<HTMLElement>(null)
+  const [copied, setCopied] = useState(false)
+  const tooltip = useMemo(() => copied ? 'copied' : 'copy', [copied])
+  const runEnabled = has(LANG_MAP, dataLng)
+
+  const getCode = useCallback(
+    () => ref.current?.querySelector('pre')?.innerText, [],
+  )
+
+  const copyAction = useCallback(async () => {
+    await Promise.resolve(getCode() || Promise.reject('cannot find any code'))
+      .then((v) => navigator.clipboard.writeText(v))
+      .then(() => {
+        setCopied(true)
+        setTimeout(() => {
+          setCopied(false)
+        }, 1500)
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+  }, [getCode])
+
+  const runAction = (): void => {
+    navigate('/play', {
+      state: {
+        code: getCode(),
+        lang: LANG_MAP[dataLng],
+      },
+    })
+  }
+
+  return (
+    <StyledBox ref={ref} {...others}>
+      <ToolBtnStack>
+        <ToolBtn title={tooltip} Icon={AssignmentOutlined} onClick={copyAction}/>
+        {runEnabled && <ToolBtn title="run" Icon={CodeOutlined} onClick={runAction}/>}
+      </ToolBtnStack>
+
+      {children}
+    </StyledBox>
+  )
+}
+
+export default CodeBlock
diff --git a/gatsby-theme-oi-wiki/src/components/customed/Details.tsx b/gatsby-theme-oi-wiki/src/components/customed/Details.tsx
new file mode 100644
index 00000000..6b1bdddb
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/customed/Details.tsx
@@ -0,0 +1,44 @@
+import styled from '@mui/material/styles/styled'
+import Accordion from '@mui/material/Accordion'
+import AccordionDetails from '@mui/material/AccordionDetails'
+import { css } from '@emotion/react'
+import Box from '@mui/material/Box'
+import React from 'react'
+
+const StyledAccordion = styled(Accordion)(({ theme }) => css`
+  margin: 1.2em 0;
+  border-left: .3rem solid ${theme.palette.primary.light};
+  box-shadow: ${theme.shadows[1]};
+
+  &.Mui-expanded {
+    margin: 1.2em 0;
+  }
+`)
+
+const StyledAccordionDetails = styled(AccordionDetails)`
+  padding: 0;
+`
+
+const Block = styled(Box)(({ theme }) => css`
+  margin-inline: ${theme.spacing(2)};
+`)
+
+const Details: React.FC<React.HTMLAttributes<HTMLDetailsElement>> = (props) => {
+  const { className, children } = props
+  const contentArr = Array.isArray(children) ? children : [children]
+
+  return (
+    <StyledAccordion
+      variant="outlined"
+      className={className}
+      defaultExpanded={!!className?.match('open')}
+    >
+      {contentArr[0]}
+      <StyledAccordionDetails>
+        <Block>{contentArr.slice(1)}</Block>
+      </StyledAccordionDetails>
+    </StyledAccordion>
+  )
+}
+
+export default Details
diff --git a/gatsby-theme-oi-wiki/src/components/customed/Img.tsx b/gatsby-theme-oi-wiki/src/components/customed/Img.tsx
new file mode 100644
index 00000000..92c52f06
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/customed/Img.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import styled from '@mui/material/styles/styled'
+
+const StyledImg = styled('img')`
+  max-width: 100%;
+  margin: 0 auto;
+  filter: var(--image-filter);
+`
+
+const Img: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = (props) => {
+  return <StyledImg {...props}/>
+}
+
+export default Img
diff --git a/gatsby-theme-oi-wiki/src/components/customed/Link.tsx b/gatsby-theme-oi-wiki/src/components/customed/Link.tsx
new file mode 100644
index 00000000..d3c1bf54
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/customed/Link.tsx
@@ -0,0 +1,14 @@
+import SmartLink, { SmartLinkProps } from '../SmartLink'
+import React from 'react'
+
+interface DefaultProps extends SmartLinkProps {
+  isIndex: boolean;
+  pathname: string;
+}
+
+const Link: (defaultProps: DefaultProps) => React.FC<SmartLinkProps> = (defaultProps) => {
+  return function Link(props) {
+    return <SmartLink tooltip={true} {...defaultProps} {...props}/>
+  }
+}
+export default Link
diff --git a/gatsby-theme-oi-wiki/src/components/customed/List.tsx b/gatsby-theme-oi-wiki/src/components/customed/List.tsx
new file mode 100644
index 00000000..b11d8516
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/customed/List.tsx
@@ -0,0 +1,18 @@
+import { css } from '@emotion/react'
+import styled from '@mui/material/styles/styled'
+
+const listStyle = css`
+  padding-inline-start: 0;
+  margin-inline-start: 1rem;
+`
+
+const UList = styled('ul')(listStyle)
+
+const OList = styled('ol')(listStyle)
+
+const List = {
+  ul: UList,
+  ol: OList,
+}
+
+export default List
diff --git a/gatsby-theme-oi-wiki/src/components/customed/Pre.tsx b/gatsby-theme-oi-wiki/src/components/customed/Pre.tsx
new file mode 100644
index 00000000..e81f9713
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/customed/Pre.tsx
@@ -0,0 +1,48 @@
+import styled from '@mui/material/styles/styled'
+import scrollbarStyle from '../../theme/scrollbarStyle'
+
+const Pre = styled('pre')`
+  ${scrollbarStyle};
+
+  counter-reset: shiki-line-number;
+
+  overflow: auto;
+  font-size: 13px;
+  text-shadow: none;
+  direction: ltr;
+  text-align: left;
+  white-space: pre-wrap;
+  word-spacing: normal;
+  word-break: normal;
+  tab-size: 2;
+  hyphens: none;
+
+  &::selection {
+    text-shadow: none;
+    background: #b3d4fc;
+  }
+
+
+  @media print {
+    text-shadow: none;
+  }
+
+  & > code {
+    span.shiki-line {
+      :before {
+        content: counter(shiki-line-number);
+        display: inline-block;
+        counter-increment: shiki-line-number;
+        color: #888;
+        margin-right: 1em;
+        margin-left: -8px;
+        text-align: right;
+        min-width: 2em;
+        pointer-events: none;
+        user-select: none;
+      }
+    }
+  }
+`
+
+export default Pre
diff --git a/gatsby-theme-oi-wiki/src/components/customed/Summary.tsx b/gatsby-theme-oi-wiki/src/components/customed/Summary.tsx
new file mode 100644
index 00000000..3715037c
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/customed/Summary.tsx
@@ -0,0 +1,64 @@
+import React from 'react'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import AccordionSummary from '@mui/material/AccordionSummary'
+import Edit from '@mui/icons-material/Edit'
+import styled from '@mui/material/styles/styled'
+import { blue } from '@mui/material/colors'
+import { css } from '@emotion/react'
+
+const summaryStyle = css`
+  min-height: 36px;
+  height: auto;
+`
+
+const StyledAccordionSummary = styled(AccordionSummary)`
+  ${summaryStyle};
+
+  &.Mui-expanded {
+    ${summaryStyle};
+  }
+
+  .MuiAccordionSummary-content {
+    margin-block: 8px;
+
+    &.Mui-expanded {
+      margin-block: 8px;
+    }
+
+    p {
+      margin-block: 8px;
+    }
+  }
+
+  .MuiAccordionSummary-expandIconWrapper {
+    padding: 2px;
+
+    &.Mui-expanded {
+      padding: 2px;
+    }
+  }
+`
+
+const StyledEditIcon = styled(Edit)`
+  margin: 0 10px 2px -5px;
+  align-self: center;
+  color: ${blue[500]};
+`
+
+const Summary: React.FC<React.HTMLAttributes<HTMLElement>> = (props) => {
+  const { children, ...others } = props
+
+  return (
+    <StyledAccordionSummary
+      expandIcon={<ExpandMore/>}
+      aria-controls="expand"
+      {...others}
+    >
+      <StyledEditIcon/>
+      {children}
+    </StyledAccordionSummary>
+  )
+
+}
+
+export default Summary
diff --git a/gatsby-theme-oi-wiki/src/components/customed/Table.tsx b/gatsby-theme-oi-wiki/src/components/customed/Table.tsx
new file mode 100644
index 00000000..b1717af3
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/customed/Table.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import { css } from '@emotion/react'
+import MTable, { TableProps } from '@mui/material/Table'
+import TableContainer from '@mui/material/TableContainer'
+import Paper from '@mui/material/Paper'
+import styled from '@mui/material/styles/styled'
+import TableCell from '@mui/material/TableCell'
+import TableBody from '@mui/material/TableBody'
+import TableHead from '@mui/material/TableHead'
+import TableRow from '@mui/material/TableRow'
+
+const StyledTable: React.FC<TableProps> = (props) => {
+  const { sx, ...others } = props
+
+  return (
+    <TableContainer component={Paper} sx={{
+      display: 'inline-block',
+      maxWidth: '100%',
+      width: 'auto',
+    }}>
+      <MTable sx={{
+        maxWidth: '100%',
+        width: 'auto',
+        lineHeight: '1.4rem',
+        ...sx,
+      }} {...others}/>
+    </TableContainer>
+  )
+}
+
+const StyledTd = styled(TableCell)`
+  padding: 14px 20px;
+`
+
+const StyledTh = styled(StyledTd)(({ theme }) => css`
+  font-weight: ${theme.typography.fontWeightBold};
+  background-color: ${theme.palette.grey.A700};
+  color: white;
+  min-width: 0;
+  vertical-align: center;
+  padding: 12px 20px;
+`)
+
+const StyledTr = styled(TableRow)(({ theme }) => css`
+  transition: background-color ${theme.transitions.duration.shortest}ms;
+
+  &:hover {
+    background-color: ${theme.palette.grey.A100};
+  }
+`)
+
+const Table = {
+  table: StyledTable,
+  thead: TableHead,
+  tbody: TableBody,
+  tr: StyledTr,
+  th: StyledTh,
+  td: StyledTd,
+}
+
+export default Table
diff --git a/gatsby-theme-oi-wiki/src/components/customed/index.ts b/gatsby-theme-oi-wiki/src/components/customed/index.ts
new file mode 100644
index 00000000..cda7a2ac
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/components/customed/index.ts
@@ -0,0 +1,37 @@
+import Img from './Img'
+import Pre from './Pre'
+import Code from './Code'
+import Blockquote from './Blockquote'
+import Table from './Table'
+import List from './List'
+import CodeBlock from './Codeblock'
+import { ComponentLike } from 'rehype-react'
+import { FC } from 'react'
+import Link from './Link'
+import Details from './Details'
+import Summary from './Summary'
+
+interface GetComponentsArg {
+  pathname: string;
+  isIndex: boolean;
+}
+
+type Components = Record<string, ComponentLike<ReturnType<FC>>>
+
+const getComponents = (arg: GetComponentsArg): Components => ({
+  img: Img,
+  pre: Pre,
+  code: Code,
+  codeblock: CodeBlock,
+  blockquote: Blockquote,
+  a: Link({
+    pathname: arg.pathname,
+    isIndex: arg.isIndex,
+  }),
+  details: Details,
+  summary: Summary,
+  ...Table,
+  ...List,
+}) as unknown as Components
+
+export default getComponents
diff --git a/gatsby-theme-oi-wiki/src/gatsby/WrapRootElement.tsx b/gatsby-theme-oi-wiki/src/gatsby/WrapRootElement.tsx
new file mode 100644
index 00000000..d7ee06b9
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/gatsby/WrapRootElement.tsx
@@ -0,0 +1,48 @@
+import React, { useEffect } from 'react'
+import CssBaseline from '@mui/material/CssBaseline'
+import ThemeProvider from '@mui/material/styles/ThemeProvider'
+import { WrapRootElementBrowserArgs } from 'gatsby'
+import { theme } from '../theme'
+import { cssVarsStore, VARS_STORE_ID } from '../stores/cssVarsStore'
+import { observer } from 'mobx-react-lite'
+import { autorun } from 'mobx'
+import { GlobalStyles } from '@mui/material'
+import globalStyle from '../theme/globalStyle'
+import EditWarn from '../components/EditWarn'
+
+const StoreHandler: React.FC = observer(() => {
+
+  autorun(() => {
+    if (cssVarsStore.styleEl === null && typeof window !== 'undefined') {
+      cssVarsStore.setStyleEl(document.getElementById(VARS_STORE_ID))
+    }
+
+    if (cssVarsStore.styleEl !== null) {
+      cssVarsStore.styleEl.innerHTML = cssVarsStore.computedCss.styles
+    }
+  })
+
+  useEffect(() => {
+    return () => {
+      cssVarsStore.stopStore()
+    }
+  }, [])
+
+  return <></>
+})
+
+const WrapRootElement = ({ element }: WrapRootElementBrowserArgs): JSX.Element => {
+  return (
+    <React.StrictMode>
+      <StoreHandler/>
+      <ThemeProvider theme={theme}>
+        <CssBaseline/>
+        <GlobalStyles styles={globalStyle(theme)}/>
+        <EditWarn/>
+        {element}
+      </ThemeProvider>
+    </React.StrictMode>
+  )
+}
+
+export default WrapRootElement
diff --git a/gatsby-theme-oi-wiki/src/gatsby/onPreRenderHTML.tsx b/gatsby-theme-oi-wiki/src/gatsby/onPreRenderHTML.tsx
new file mode 100644
index 00000000..7d84c1b5
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/gatsby/onPreRenderHTML.tsx
@@ -0,0 +1,23 @@
+import { PreRenderHTMLArgs } from 'gatsby'
+import React from 'react'
+
+const onPreRenderHTML = (args: PreRenderHTMLArgs): void => {
+  if (process.env.GATSBY_IS_DEV) {
+    const {
+      getPostBodyComponents,
+      replacePostBodyComponents,
+    } = args
+    const comps = getPostBodyComponents()
+
+    comps.push(
+      <script
+        src="https://cdn.jsdelivr.net/npm/mathjax@3.0.5/es5/tex-mml-chtml.js"
+        id="MathJax-script"
+      />,
+    )
+
+    replacePostBodyComponents(comps)
+  }
+}
+
+export default onPreRenderHTML
diff --git a/gatsby-theme-oi-wiki/src/gatsby/onRenderBody.tsx b/gatsby-theme-oi-wiki/src/gatsby/onRenderBody.tsx
new file mode 100644
index 00000000..a3aa0490
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/gatsby/onRenderBody.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+import { VARS_STORE_ID } from '../stores/cssVarsStore'
+import { theme } from '../theme'
+import createCssVarPalette, { computeCss } from '../utils/createCssVarPalette'
+import { RenderBodyArgs } from 'gatsby'
+import cssVars from '../static/cssVars'
+import themeMode from '../static/themeMode'
+
+const { lightMap, darkMap } = createCssVarPalette(theme.palette)
+
+const defaultCssVars = computeCss(lightMap, darkMap).styles.replace(/\s/g, '')
+
+const headComponents: React.ReactNode[] = [
+  <meta key="color-scheme" name="color-scheme" content="light dark"/>,
+  <script key="theme-switch" dangerouslySetInnerHTML={{
+    __html: `(${themeMode})()`,
+  }}/>,
+  <style key={VARS_STORE_ID} id={VARS_STORE_ID} dangerouslySetInnerHTML={{
+    __html: defaultCssVars,
+  }}/>,
+  <script key={VARS_STORE_ID + '-restore'} dangerouslySetInnerHTML={{
+    __html: `(${cssVars})()`,
+  }}/>,
+  <script key="analytics" dangerouslySetInnerHTML={{
+    __html: `window.ga_tid = "UA-124485594-1"; window.ga_api = "https://margatroid.xyz/vue.min.js";`,
+  }}/>,
+  <script key="cfga" src="https://cdn.jsdelivr.net/npm/cfga@1.0.3" async/>,
+]
+
+const htmlAttributes = {
+  lang: 'zh-cmn-Hans',
+}
+
+const onRenderBody = (props: RenderBodyArgs): void => {
+  const { setHeadComponents, setHtmlAttributes } = props
+
+  setHeadComponents(headComponents)
+  setHtmlAttributes(htmlAttributes)
+}
+
+export default onRenderBody
diff --git a/gatsby-theme-oi-wiki/src/hooks/useSiteMetadata.ts b/gatsby-theme-oi-wiki/src/hooks/useSiteMetadata.ts
new file mode 100644
index 00000000..dbc374a7
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/hooks/useSiteMetadata.ts
@@ -0,0 +1,20 @@
+import { graphql, useStaticQuery } from 'gatsby'
+import { DeepRequiredNonNull } from '../types/common'
+
+const useSiteMetadata = () => {
+  const data = useStaticQuery<GatsbyTypes.SiteInfoQuery>(graphql`
+    query SiteInfo {
+      site {
+        siteMetadata {
+          title,
+          description,
+          siteUrl
+        }
+      }
+    }
+  `) as DeepRequiredNonNull<GatsbyTypes.SiteInfoQuery>
+
+  return data.site.siteMetadata
+}
+
+export default useSiteMetadata
diff --git a/gatsby-theme-oi-wiki/src/hooks/useThemeMode.ts b/gatsby-theme-oi-wiki/src/hooks/useThemeMode.ts
new file mode 100644
index 00000000..f3f834c2
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/hooks/useThemeMode.ts
@@ -0,0 +1,7 @@
+import { ThemeMode } from '../types/ThemeMode'
+
+const useThemeMode = (): ThemeMode => {
+  return document.documentElement.dataset.theme as ThemeMode
+}
+
+export default useThemeMode
diff --git a/gatsby-theme-oi-wiki/src/old-pages/404.tsx b/gatsby-theme-oi-wiki/src/old-pages/404.tsx
new file mode 100644
index 00000000..d46d5c6e
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/old-pages/404.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import StyledLayout from '../components/StyledLayout'
+
+const page: React.FC<{ location: Location }> = ({ location }) => (
+  <StyledLayout location={location} noEdit={true} title="404" noComment={false}>
+    <div>
+      <div>
+        <h1>404 is Found!</h1>
+        <p>如果你是无意间来到这里的，请在下方告诉我们你是从哪里点进来的哦。</p>
+        <br/>
+        <br/>
+      </div>
+    </div>
+  </StyledLayout>
+)
+
+export default page
diff --git a/gatsby-theme-oi-wiki/src/old-pages/pages.tsx b/gatsby-theme-oi-wiki/src/old-pages/pages.tsx
new file mode 100644
index 00000000..0ff982a3
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/old-pages/pages.tsx
@@ -0,0 +1,181 @@
+import { Card, CardActions, CardContent, Grid, TextField, Typography, useMediaQuery } from '@material-ui/core'
+import { useTheme } from '@material-ui/core/styles'
+import Autocomplete from '@material-ui/lab/Autocomplete'
+import match from 'autosuggest-highlight/match'
+import parse from 'autosuggest-highlight/parse'
+import times from 'lodash/times'
+import { graphql, useStaticQuery } from 'gatsby'
+import React, { useState } from 'react'
+
+import { SmartLink } from '../components/Link'
+import Tags from '../components/Tags'
+import StyledLayout from '../components/StyledLayout'
+import { DeepRequiredNonNull, DeepWriteable } from '../types/common'
+
+interface PageItemInfo {
+  id: string;
+  frontmatter: Pick<GatsbyTypes.MarkdownRemarkFrontmatter, 'title' | 'tags'>;
+  fields: Pick<GatsbyTypes.MarkdownRemarkFields, 'slug'>;
+}
+
+interface PageItemProps extends DeepWriteable<DeepRequiredNonNull<PageItemInfo>> {
+  linkComponent: React.ElementType
+}
+
+const PageItem: React.FC<PageItemProps> = (props) => {
+  const {
+    id,
+    frontmatter: { title, tags },
+    fields: { slug: link },
+  } = props
+
+  return (
+    <Grid item key={id}>
+      <Card variant="outlined">
+        <CardContent>
+          <Typography variant="h6" component={props.linkComponent} to={link}>
+            {title}
+          </Typography>
+        </CardContent>
+        <CardActions>
+          <Tags tags={tags}/>
+        </CardActions>
+      </Card>
+    </Grid>
+  )
+}
+
+function matchTags(pageTags: string[], selectedTags: string[]): boolean {
+  if (selectedTags.length === 0) return true
+  else if (!pageTags) return false
+  else return selectedTags.every((v) => pageTags.includes(v))
+}
+
+interface ColumnProps {
+  items: Omit<PageItemProps, 'linkComponent'>[];
+  linkComponent: PageItemProps['linkComponent'];
+}
+
+const Column: React.FC<ColumnProps> = ({ items, linkComponent }) => (
+  <Grid container item xs direction="column" spacing={2}>
+    {items.map(x => <PageItem key={x.id} {...x} linkComponent={linkComponent}/>)}
+  </Grid>
+)
+
+interface GridItemsProps {
+  filteredItems: ColumnProps['items'];
+  linkComponent: PageItemProps['linkComponent'];
+}
+
+const GridItems: React.FC<GridItemsProps> = (props) => {
+  const theme = useTheme()
+  const { filteredItems } = props
+  const upStatus = theme.breakpoints.up
+  const upList = [
+    useMediaQuery(upStatus('xl')),
+    useMediaQuery(upStatus('lg')),
+    useMediaQuery(upStatus('md')),
+    useMediaQuery(upStatus('sm')),
+    true,
+  ]
+  const columnCount = 5 - upList.indexOf(true)
+
+  return (
+    <>
+      {times(columnCount).map(i =>
+        <Column
+          key={i}
+          items={filteredItems.filter((_, idx) => idx % columnCount === i)}
+          linkComponent={props.linkComponent}
+        />,
+      )}
+    </>
+  )
+}
+
+export interface BlogIndexProps {
+  location: Location;
+}
+
+const BlogIndex: React.FC<BlogIndexProps> = (props) => {
+  const { allMarkdownRemark: { edges, group } } = useStaticQuery<GatsbyTypes.BlogIndexQuery>(graphql`
+    query BlogIndex {
+      allMarkdownRemark {
+        edges {
+          node {
+            id
+            frontmatter {
+              title
+              tags
+            }
+            fields {
+              slug
+            }
+          }
+        }
+        group(field: frontmatter___tags) {
+          fieldValue
+          totalCount
+        }
+      }
+    }`) as DeepWriteable<DeepRequiredNonNull<GatsbyTypes.BlogIndexQuery>>
+
+  const { location } = props
+  const articles = edges.map(x => x.node)
+  const tags = group.map(({ fieldValue }) => fieldValue)
+  const [selectedTags, setSelectedTags] = useState<string[]>([])
+  const filteredItems = articles.filter((v) => !!v.frontmatter.title && matchTags(v.frontmatter.tags, selectedTags))
+
+  return (
+    <StyledLayout
+      location={location}
+      noMeta={true}
+      noEdit={true}
+      noToc={true}
+      overflow={true}
+      title="目录页"
+    >
+      <Grid container spacing={2} justifyContent="center">
+        <Grid item xs={12}>
+          <Autocomplete
+            value={selectedTags}
+            onChange={(_, v) => {
+              setSelectedTags(v)
+            }}
+            multiple={true}
+            disableCloseOnSelect={true}
+            filterSelectedOptions={true}
+            options={tags}
+            getOptionLabel={(option) => option}
+            renderOption={(option, { inputValue }) => {
+              const matches = match(option, inputValue)
+              const parts = parse(option, matches)
+              return parts.map((part, index) => (
+                <span
+                  key={index}
+                  style={{ fontWeight: part.highlight ? 700 : 400 }}
+                >
+                  {part.text}
+                </span>
+              ))
+            }}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                variant="outlined"
+                placeholder="键入以按标签搜索..."
+              />
+            )}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <Grid container spacing={2} justifyContent="center">
+            <GridItems filteredItems={filteredItems} linkComponent={SmartLink}/>
+          </Grid>
+        </Grid>
+      </Grid>
+    </StyledLayout>
+  )
+}
+
+export default BlogIndex
diff --git a/gatsby-theme-oi-wiki/src/old-pages/play.tsx b/gatsby-theme-oi-wiki/src/old-pages/play.tsx
new file mode 100644
index 00000000..8a2f6c4c
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/old-pages/play.tsx
@@ -0,0 +1,228 @@
+import {
+  Button,
+  ButtonGroup,
+  CircularProgress,
+  Collapse,
+  Fade,
+  FormControlLabel,
+  Grid,
+  Link,
+  makeStyles,
+  Switch,
+} from '@material-ui/core'
+import PlayArrow from '@material-ui/icons/PlayArrow'
+import type { PageProps } from 'gatsby'
+import { graphql, useStaticQuery } from 'gatsby'
+import React, { useCallback, useRef, useState } from 'react'
+import CodeEditor from '../components/CodeEditor'
+import type { IndicatorProps } from '../components/Indicator'
+import Indicator from '../components/Indicator'
+import CodeLangMenu from '../components/CodeLangMenu'
+import Output from '../components/Output'
+import Layout from '../components/StyledLayout'
+import type { LangType } from '../lib/play/codeLang'
+import type { TransformedResponseData } from '../lib/play/useRunner'
+import { useRunner } from '../lib/play/useRunner'
+
+const useStyles = makeStyles((theme) => ({
+  langMenu: {
+    width: 96,
+    textTransform: 'none',
+  },
+  editor: {
+    minHeight: 400,
+  },
+  editorContainer: {
+    marginBottom: theme.spacing(2),
+  },
+  progress: {
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    marginLeft: -12,
+    marginTop: -12,
+  },
+  footer: {
+    textAlign: 'center',
+    marginTop: theme.spacing(4),
+  },
+  footerLink: {
+    color: '#FD9F40',
+    '& > img': {
+      display: 'inline',
+      verticalAlign: 'middle',
+      marginTop: -4,
+    },
+    '&:hover': {
+      color: '#FC6012',
+    },
+  },
+}))
+
+export type PlaygroundLocationState = Partial<{
+  lang: LangType
+  code: string
+  input: string
+}>
+
+const Playground: React.FC<
+  PageProps<unknown, unknown, PlaygroundLocationState>
+> = ({ location }) => {
+  // state maybe undefined/null in gatsby build
+  const locState = location.state ?? {}
+
+  const classes = useStyles()
+
+  const [lang, setLang] = useState<LangType>(locState.lang ?? 'C++')
+  const [o2, setO2] = useState(false)
+
+  const [code, setCode] = useState(locState.code ?? '')
+  const [input, setInput] = useState(locState.input ?? '')
+  const [output, setOutput] = useState<TransformedResponseData | null>(null)
+
+  const [runInfo, setRunInfo] = useState<IndicatorProps | null>(null)
+
+  const outputRef = useRef<HTMLElement>(null)
+
+  const judgeDuckImgUrl: string = useStaticQuery(graphql`
+    {
+      allFile(filter: { name: { eq: "judgeduck" } }) {
+        edges {
+          node {
+            publicURL
+          }
+        }
+      }
+    }
+  `).allFile.edges[0].node.publicURL
+
+  const runCodeCb = useCallback((data: TransformedResponseData) => {
+    setOutput(data)
+    setRunInfo(
+      data.status === 'Run Finished'
+        ? { type: 'success', msg: 'Success' }
+        : { type: 'warning', msg: 'Checkout output for error details' },
+    )
+
+    outputRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [])
+  const errorCb = useCallback((msg: string) => {
+    setRunInfo({ type: 'error', msg })
+  }, [])
+  const { sendRunnerReq, waiting } = useRunner(
+    { stdin: input, code, language: lang, flags: o2 ? '-O2' : '' },
+    runCodeCb,
+    errorCb,
+  )
+
+  const handleRunClick = useCallback(() => {
+    setRunInfo(null)
+    sendRunnerReq()
+  }, [sendRunnerReq])
+
+  return (
+    <Layout
+      location={location}
+      title="Playground"
+      noComment
+      noEdit
+      noToc
+      noMeta
+    >
+      <Grid container spacing={3} alignItems="center">
+        <Grid item>
+          <ButtonGroup>
+            <CodeLangMenu
+              lang={lang}
+              setLang={setLang}
+              variant="contained"
+              className={classes.langMenu}
+              aria-label="select language for code running"
+            />
+            <Button
+              variant="contained"
+              color="secondary"
+              endIcon={<PlayArrow />}
+              onClick={handleRunClick}
+              disabled={waiting}
+            >
+              运行
+              {waiting && (
+                <CircularProgress
+                  className={classes.progress}
+                  color="secondary"
+                  size={24}
+                />
+              )}
+            </Button>
+          </ButtonGroup>
+        </Grid>
+        <Grid item>
+          <Fade in={!!runInfo}>
+            <Indicator type={undefined} msg="" {...runInfo} />
+          </Fade>
+        </Grid>
+        <Grid item style={{ marginLeft: 'auto' }}>
+          <FormControlLabel
+            checked={o2}
+            control={
+              <Switch
+                size="small"
+                checked={o2}
+                onChange={(e) => {
+                  setO2(e.target.checked)
+                }}
+              />
+            }
+            label="开启O2优化"
+          />
+        </Grid>
+      </Grid>
+      <Grid
+        container
+        spacing={3}
+        className={classes.editorContainer}
+        alignItems="stretch"
+      >
+        <Grid xs={12} md={8} className={classes.editor} item>
+          <CodeEditor
+            lang={lang}
+            title="代码"
+            value={code}
+            onChange={(val) => {
+              setCode(val)
+            }}
+          />
+        </Grid>
+        <Grid xs={12} md={4} item container direction="column">
+          <Grid className={classes.editor} item>
+            <CodeEditor
+              title="输入"
+              value={input}
+              onChange={(val) => {
+                setInput(val)
+              }}
+            />
+          </Grid>
+        </Grid>
+      </Grid>
+      <Collapse in={['success', 'warning'].includes(runInfo?.type ?? '')}>
+        <Output ref={outputRef} output={output} />
+      </Collapse>
+      <div className={classes.footer}>
+        <Link
+          className={classes.footerLink}
+          href="https://duck.ac/"
+          underline="none"
+          target="_blank"
+          variant="h6"
+        >
+          {'Powered by '}
+          <img src={judgeDuckImgUrl} alt="JudgeDuck" height="30" />
+        </Link>
+      </div>
+    </Layout>
+  )
+}
+
+export default Playground
diff --git a/gatsby-theme-oi-wiki/src/pages/settings.tsx b/gatsby-theme-oi-wiki/src/old-pages/settings.tsx
similarity index 100%
rename from gatsby-theme-oi-wiki/src/pages/settings.tsx
rename to gatsby-theme-oi-wiki/src/old-pages/settings.tsx
diff --git a/gatsby-theme-oi-wiki/src/old-pages/tags.tsx b/gatsby-theme-oi-wiki/src/old-pages/tags.tsx
new file mode 100644
index 00000000..c72eb405
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/old-pages/tags.tsx
@@ -0,0 +1,62 @@
+import Chip from '@material-ui/core/Chip'
+import { makeStyles } from '@material-ui/core/styles'
+import { graphql, useStaticQuery } from 'gatsby'
+import kebabCase from 'lodash/kebabCase'
+import React from 'react'
+import StyledLayout from '../components/StyledLayout'
+import { DeepRequiredNonNull, DeepWriteable } from '../types/common'
+
+const useStyles = makeStyles((theme) => ({
+  chip: {
+    margin: theme.spacing(0.5),
+  },
+}))
+
+export interface TagsPageProps {
+  location: Location
+}
+
+const TagsPage: React.FC<TagsPageProps> = (props) => {
+  const {
+    allMarkdownRemark: { group },
+  } = useStaticQuery<GatsbyTypes.TagsQuery>(graphql`
+    query Tags {
+      site {
+        siteMetadata {
+          title
+        }
+      }
+      allMarkdownRemark(limit: 2000) {
+        group(field: frontmatter___tags) {
+          fieldValue
+          totalCount
+        }
+      }
+    }
+  `) as DeepWriteable<DeepRequiredNonNull<GatsbyTypes.TagsQuery>>
+
+  const classes = useStyles()
+  const { location } = props
+
+  group.sort((a, b) => b.totalCount - a.totalCount)
+
+  return (
+    <StyledLayout location={location} noMeta={true} title="标签页">
+      <div>
+        {group.map((tag) => (
+          <Chip
+            label={`${tag.fieldValue}(${tag.totalCount})`}
+            variant="outlined"
+            component="a"
+            clickable={true}
+            key={tag.fieldValue}
+            href={'/tags/' + kebabCase(tag.fieldValue)}
+            className={classes.chip}
+          />
+        ))}
+      </div>
+    </StyledLayout>
+  )
+}
+
+export default TagsPage
diff --git a/gatsby-theme-oi-wiki/src/templates/changelog.js b/gatsby-theme-oi-wiki/src/old-templates/changelog.js
similarity index 100%
rename from gatsby-theme-oi-wiki/src/templates/changelog.js
rename to gatsby-theme-oi-wiki/src/old-templates/changelog.js
diff --git a/gatsby-theme-oi-wiki/src/templates/doc.js b/gatsby-theme-oi-wiki/src/old-templates/doc.js
similarity index 100%
rename from gatsby-theme-oi-wiki/src/templates/doc.js
rename to gatsby-theme-oi-wiki/src/old-templates/doc.js
diff --git a/gatsby-theme-oi-wiki/src/templates/extra.css b/gatsby-theme-oi-wiki/src/old-templates/extra.css
similarity index 100%
rename from gatsby-theme-oi-wiki/src/templates/extra.css
rename to gatsby-theme-oi-wiki/src/old-templates/extra.css
diff --git a/gatsby-theme-oi-wiki/src/templates/tags.js b/gatsby-theme-oi-wiki/src/old-templates/tags.js
similarity index 100%
rename from gatsby-theme-oi-wiki/src/templates/tags.js
rename to gatsby-theme-oi-wiki/src/old-templates/tags.js
diff --git a/gatsby-theme-oi-wiki/src/pages/404.tsx b/gatsby-theme-oi-wiki/src/pages/404.tsx
index d46d5c6e..625e294a 100644
--- a/gatsby-theme-oi-wiki/src/pages/404.tsx
+++ b/gatsby-theme-oi-wiki/src/pages/404.tsx
@@ -1,17 +1,16 @@
 import React from 'react'
-import StyledLayout from '../components/StyledLayout'
+import Layout from '../components/Layout'
+import Title from '../components/Title'
+import Typography from '@mui/material/Typography'
 
-const page: React.FC<{ location: Location }> = ({ location }) => (
-  <StyledLayout location={location} noEdit={true} title="404" noComment={false}>
-    <div>
-      <div>
-        <h1>404 is Found!</h1>
-        <p>如果你是无意间来到这里的，请在下方告诉我们你是从哪里点进来的哦。</p>
-        <br/>
-        <br/>
-      </div>
-    </div>
-  </StyledLayout>
-)
 
-export default page
+const NotFoundPage: React.FC = () => {
+  return (
+    <Layout withNav={false} withToc={false} title="404">
+      <Title noEdit={true} relativePath="">404 is Found!</Title>
+      <Typography>如果你是无意间来到这里的，请在下方告诉我们你是从哪里点进来的哦。</Typography>
+    </Layout>
+  )
+}
+
+export default NotFoundPage
diff --git a/gatsby-theme-oi-wiki/src/pages/pages.tsx b/gatsby-theme-oi-wiki/src/pages/pages.tsx
index 0ff982a3..1fb4d0c6 100644
--- a/gatsby-theme-oi-wiki/src/pages/pages.tsx
+++ b/gatsby-theme-oi-wiki/src/pages/pages.tsx
@@ -1,44 +1,53 @@
-import { Card, CardActions, CardContent, Grid, TextField, Typography, useMediaQuery } from '@material-ui/core'
-import { useTheme } from '@material-ui/core/styles'
-import Autocomplete from '@material-ui/lab/Autocomplete'
-import match from 'autosuggest-highlight/match'
-import parse from 'autosuggest-highlight/parse'
 import times from 'lodash/times'
 import { graphql, useStaticQuery } from 'gatsby'
-import React, { useState } from 'react'
-
-import { SmartLink } from '../components/Link'
-import Tags from '../components/Tags'
-import StyledLayout from '../components/StyledLayout'
+import React, { useMemo, useState } from 'react'
 import { DeepRequiredNonNull, DeepWriteable } from '../types/common'
+import Card from '@mui/material/Card'
+import CardActions from '@mui/material/CardActions'
+import CardContent from '@mui/material/CardContent'
+import Tags from '../components/Tags'
+import Grid from '@mui/material/Grid'
+import Typography from '@mui/material/Typography'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import Autocomplete from '@mui/material/Autocomplete'
+import TextField from '@mui/material/TextField'
+import useTheme from '@mui/material/styles/useTheme'
+import Layout from '../components/Layout'
+import SmartLink from '../components/SmartLink'
+import match from 'autosuggest-highlight/match'
+import parse from 'autosuggest-highlight/parse'
+import Title from '../components/Title'
+
 
 interface PageItemInfo {
   id: string;
-  frontmatter: Pick<GatsbyTypes.MarkdownRemarkFrontmatter, 'title' | 'tags'>;
-  fields: Pick<GatsbyTypes.MarkdownRemarkFields, 'slug'>;
+  frontmatter: Partial<Pick<GatsbyTypes.MarkdownRemarkFrontmatter, 'title' | 'tags'>>;
+  fields: Partial<Pick<GatsbyTypes.MarkdownRemarkFields, 'slug'>>;
 }
 
 interface PageItemProps extends DeepWriteable<DeepRequiredNonNull<PageItemInfo>> {
   linkComponent: React.ElementType
 }
 
+
 const PageItem: React.FC<PageItemProps> = (props) => {
   const {
-    id,
     frontmatter: { title, tags },
     fields: { slug: link },
+    linkComponent,
   } = props
 
   return (
-    <Grid item key={id}>
+    <Grid item={true}>
       <Card variant="outlined">
         <CardContent>
-          <Typography variant="h6" component={props.linkComponent} to={link}>
+          <Typography variant="h6" component={linkComponent} to={link}>
             {title}
           </Typography>
         </CardContent>
+
         <CardActions>
-          <Tags tags={tags}/>
+          {!!tags && <Tags tags={tags}/>}
         </CardActions>
       </Card>
     </Grid>
@@ -57,8 +66,8 @@ interface ColumnProps {
 }
 
 const Column: React.FC<ColumnProps> = ({ items, linkComponent }) => (
-  <Grid container item xs direction="column" spacing={2}>
-    {items.map(x => <PageItem key={x.id} {...x} linkComponent={linkComponent}/>)}
+  <Grid container={true} item={true} xs={true} direction="column" spacing={2}>
+    {items.map(props => <PageItem key={props.id} {...props} linkComponent={linkComponent}/>)}
   </Grid>
 )
 
@@ -68,17 +77,17 @@ interface GridItemsProps {
 }
 
 const GridItems: React.FC<GridItemsProps> = (props) => {
-  const theme = useTheme()
   const { filteredItems } = props
-  const upStatus = theme.breakpoints.up
-  const upList = [
-    useMediaQuery(upStatus('xl')),
-    useMediaQuery(upStatus('lg')),
-    useMediaQuery(upStatus('md')),
-    useMediaQuery(upStatus('sm')),
-    true,
-  ]
-  const columnCount = 5 - upList.indexOf(true)
+
+  const theme = useTheme()
+  const columnCount = useMemo(() => {
+    const matchIndex = theme.breakpoints.keys.reverse().findIndex((key, i, arr) => {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const matches = useMediaQuery(theme.breakpoints.up(key), { noSsr: true })
+      return matches || i === arr.length - 1
+    })
+    return 5 - matchIndex
+  }, [theme.breakpoints])
 
   return (
     <>
@@ -93,13 +102,9 @@ const GridItems: React.FC<GridItemsProps> = (props) => {
   )
 }
 
-export interface BlogIndexProps {
-  location: Location;
-}
-
-const BlogIndex: React.FC<BlogIndexProps> = (props) => {
-  const { allMarkdownRemark: { edges, group } } = useStaticQuery<GatsbyTypes.BlogIndexQuery>(graphql`
-    query BlogIndex {
+const PagesPage: React.FC = () => {
+  const { allMarkdownRemark: { edges, group } } = useStaticQuery<GatsbyTypes.PageListQuery>(graphql`
+    query PageList {
       allMarkdownRemark {
         edges {
           node {
@@ -118,25 +123,19 @@ const BlogIndex: React.FC<BlogIndexProps> = (props) => {
           totalCount
         }
       }
-    }`) as DeepWriteable<DeepRequiredNonNull<GatsbyTypes.BlogIndexQuery>>
+    }`) as DeepWriteable<DeepRequiredNonNull<GatsbyTypes.PageListQuery>>
 
-  const { location } = props
   const articles = edges.map(x => x.node)
   const tags = group.map(({ fieldValue }) => fieldValue)
   const [selectedTags, setSelectedTags] = useState<string[]>([])
   const filteredItems = articles.filter((v) => !!v.frontmatter.title && matchTags(v.frontmatter.tags, selectedTags))
+  const title = '目录页'
 
   return (
-    <StyledLayout
-      location={location}
-      noMeta={true}
-      noEdit={true}
-      noToc={true}
-      overflow={true}
-      title="目录页"
-    >
-      <Grid container spacing={2} justifyContent="center">
-        <Grid item xs={12}>
+    <Layout withToc={false} withNav={false} title={title}>
+      <Title noEdit={true} relativePath="">{title}</Title>
+      <Grid container={true} spacing={2} justifyContent="center">
+        <Grid item={true} xs={12}>
           <Autocomplete
             value={selectedTags}
             onChange={(_, v) => {
@@ -147,7 +146,7 @@ const BlogIndex: React.FC<BlogIndexProps> = (props) => {
             filterSelectedOptions={true}
             options={tags}
             getOptionLabel={(option) => option}
-            renderOption={(option, { inputValue }) => {
+            renderOption={(_, option, { inputValue }) => {
               const matches = match(option, inputValue)
               const parts = parse(option, matches)
               return parts.map((part, index) => (
@@ -167,6 +166,7 @@ const BlogIndex: React.FC<BlogIndexProps> = (props) => {
               />
             )}
           />
+
         </Grid>
         <Grid item xs={12}>
           <Grid container spacing={2} justifyContent="center">
@@ -174,8 +174,8 @@ const BlogIndex: React.FC<BlogIndexProps> = (props) => {
           </Grid>
         </Grid>
       </Grid>
-    </StyledLayout>
+    </Layout>
   )
 }
 
-export default BlogIndex
+export default PagesPage
diff --git a/gatsby-theme-oi-wiki/src/pages/play.tsx b/gatsby-theme-oi-wiki/src/pages/play.tsx
index 8a2f6c4c..5fb6d225 100644
--- a/gatsby-theme-oi-wiki/src/pages/play.tsx
+++ b/gatsby-theme-oi-wiki/src/pages/play.tsx
@@ -1,63 +1,27 @@
-import {
-  Button,
-  ButtonGroup,
-  CircularProgress,
-  Collapse,
-  Fade,
-  FormControlLabel,
-  Grid,
-  Link,
-  makeStyles,
-  Switch,
-} from '@material-ui/core'
-import PlayArrow from '@material-ui/icons/PlayArrow'
-import type { PageProps } from 'gatsby'
-import { graphql, useStaticQuery } from 'gatsby'
+import { graphql, PageProps, useStaticQuery } from 'gatsby'
 import React, { useCallback, useRef, useState } from 'react'
-import CodeEditor from '../components/CodeEditor'
-import type { IndicatorProps } from '../components/Indicator'
-import Indicator from '../components/Indicator'
-import CodeLangMenu from '../components/CodeLangMenu'
-import Output from '../components/Output'
-import Layout from '../components/StyledLayout'
-import type { LangType } from '../lib/play/codeLang'
-import type { TransformedResponseData } from '../lib/play/useRunner'
-import { useRunner } from '../lib/play/useRunner'
-
-const useStyles = makeStyles((theme) => ({
-  langMenu: {
-    width: 96,
-    textTransform: 'none',
-  },
-  editor: {
-    minHeight: 400,
-  },
-  editorContainer: {
-    marginBottom: theme.spacing(2),
-  },
-  progress: {
-    position: 'absolute',
-    left: '50%',
-    top: '50%',
-    marginLeft: -12,
-    marginTop: -12,
-  },
-  footer: {
-    textAlign: 'center',
-    marginTop: theme.spacing(4),
-  },
-  footerLink: {
-    color: '#FD9F40',
-    '& > img': {
-      display: 'inline',
-      verticalAlign: 'middle',
-      marginTop: -4,
-    },
-    '&:hover': {
-      color: '#FC6012',
-    },
-  },
-}))
+import CodeEditor from '../components/Play/CodeEditor'
+import Indicator, { IndicatorProps } from '../components/Play/Indicator'
+import CodeLangMenu from '../components/Play/CodeLangMenu'
+import Output from '../components/Play/Output'
+import { TransformedResponseData, useRunner } from '../components/Play/useRunner'
+import Layout from '../components/Layout'
+import Grid from '@mui/material/Grid'
+import ButtonGroup from '@mui/material/ButtonGroup'
+import Collapse from '@mui/material/Collapse'
+import Fade from '@mui/material/Fade'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Switch from '@mui/material/Switch'
+import styled from '@mui/material/styles/styled'
+import { css } from '@emotion/react'
+import CircularProgress from '@mui/material/CircularProgress'
+import Box from '@mui/material/Box'
+import Link from '@mui/material/Link'
+import { Nullable } from '../types/common'
+import Button from '@mui/material/Button'
+import PlayArrow from '@mui/icons-material/PlayArrow'
+import Title from '../components/Title'
+import { LangType } from '../components/Play/codeLang'
 
 export type PlaygroundLocationState = Partial<{
   lang: LangType
@@ -65,25 +29,52 @@ export type PlaygroundLocationState = Partial<{
   input: string
 }>
 
-const Playground: React.FC<
-  PageProps<unknown, unknown, PlaygroundLocationState>
-> = ({ location }) => {
-  // state maybe undefined/null in gatsby build
-  const locState = location.state ?? {}
+const LangMenu = styled(CodeLangMenu)`
+  width: 96px;
+  text-transform: none;
+`
 
-  const classes = useStyles()
+const EditorContainerGrid = styled(Grid)(({ theme }) => css`
+  margin-bottom: ${theme.spacing(2)};
+  //align-items: stretch;
+`)
 
-  const [lang, setLang] = useState<LangType>(locState.lang ?? 'C++')
-  const [o2, setO2] = useState(false)
+const EditorGrid = styled(Grid)`
+  min-height: 400px;
+`
 
-  const [code, setCode] = useState(locState.code ?? '')
-  const [input, setInput] = useState(locState.input ?? '')
-  const [output, setOutput] = useState<TransformedResponseData | null>(null)
+const Progress = styled(CircularProgress)`
+  position: absolute;
+  left: 50%;
+  right: 50%;
+  margin: auto -12px;
+`
 
-  const [runInfo, setRunInfo] = useState<IndicatorProps | null>(null)
+const FooterContainer = styled(Box)(({ theme }) => css`
+  text-align: center;
+  margin-top: ${theme.spacing(4)};
+`)
+
+const FooterLink = styled(Link)`
+  color: #fd9f40;
 
-  const outputRef = useRef<HTMLElement>(null)
+  &:hover {
+    color: #fc6012;
+  }
+
+  & > img {
+    display: inline;
+    vertical-align: middle;
+    margin-top: -4px;
+    opacity: 0.8;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+`
 
+const Footer: React.FC = () => {
   const judgeDuckImgUrl: string = useStaticQuery(graphql`
     {
       allFile(filter: { name: { eq: "judgeduck" } }) {
@@ -96,6 +87,35 @@ const Playground: React.FC<
     }
   `).allFile.edges[0].node.publicURL
 
+  return (
+    <FooterContainer>
+      <FooterLink
+        href="https://duck.ac/"
+        underline="none"
+        target="_blank"
+        variant="h6"
+      >
+        {'Powered by '}
+        <img src={judgeDuckImgUrl} alt="JudgeDuck" height={30}/>
+      </FooterLink>
+    </FooterContainer>
+  )
+}
+
+
+const Playground: React.FC<PageProps<unknown, unknown, PlaygroundLocationState>> = ({ location }) => {
+  // state maybe undefined/null in gatsby build
+  const locState = location.state ?? {}
+
+  const [lang, setLang] = useState<LangType>(locState.lang ?? 'C++')
+  const [o2, setO2] = useState(false)
+  const [code, setCode] = useState(locState.code ?? '')
+  const [input, setInput] = useState(locState.input ?? '')
+  const [output, setOutput] = useState<TransformedResponseData | null>(null)
+  const [runInfo, setRunInfo] = useState<IndicatorProps | null>(null)
+
+  const outputRef = useRef<Nullable<HTMLDivElement>>(null)
+
   const runCodeCb = useCallback((data: TransformedResponseData) => {
     setOutput(data)
     setRunInfo(
@@ -109,6 +129,7 @@ const Playground: React.FC<
   const errorCb = useCallback((msg: string) => {
     setRunInfo({ type: 'error', msg })
   }, [])
+
   const { sendRunnerReq, waiting } = useRunner(
     { stdin: input, code, language: lang, flags: o2 ? '-O2' : '' },
     runCodeCb,
@@ -120,49 +141,39 @@ const Playground: React.FC<
     sendRunnerReq()
   }, [sendRunnerReq])
 
+  const title = 'Playground'
+
   return (
-    <Layout
-      location={location}
-      title="Playground"
-      noComment
-      noEdit
-      noToc
-      noMeta
-    >
-      <Grid container spacing={3} alignItems="center">
-        <Grid item>
+    <Layout withNav={false} withToc={false} title={title}>
+      <Title noEdit={true} relativePath="">{title}</Title>
+
+      <Grid container={true} alignItems="center" columnSpacing={3}>
+        <Grid item={true}>
           <ButtonGroup>
-            <CodeLangMenu
+            <LangMenu
               lang={lang}
               setLang={setLang}
               variant="contained"
-              className={classes.langMenu}
               aria-label="select language for code running"
             />
             <Button
               variant="contained"
               color="secondary"
-              endIcon={<PlayArrow />}
+              endIcon={<PlayArrow/>}
               onClick={handleRunClick}
               disabled={waiting}
             >
               运行
-              {waiting && (
-                <CircularProgress
-                  className={classes.progress}
-                  color="secondary"
-                  size={24}
-                />
-              )}
+              {waiting && <Progress color="secondary" size={24}/>}
             </Button>
           </ButtonGroup>
         </Grid>
-        <Grid item>
-          <Fade in={!!runInfo}>
-            <Indicator type={undefined} msg="" {...runInfo} />
-          </Fade>
+        <Grid item={true}>
+          {runInfo && <Fade in={!!runInfo}>
+            <Indicator {...runInfo} />
+          </Fade>}
         </Grid>
-        <Grid item style={{ marginLeft: 'auto' }}>
+        <Grid item={true} ml="auto">
           <FormControlLabel
             checked={o2}
             control={
@@ -178,13 +189,9 @@ const Playground: React.FC<
           />
         </Grid>
       </Grid>
-      <Grid
-        container
-        spacing={3}
-        className={classes.editorContainer}
-        alignItems="stretch"
-      >
-        <Grid xs={12} md={8} className={classes.editor} item>
+
+      <EditorContainerGrid container={true} columnSpacing={3}>
+        <EditorGrid item={true} xs={12} md={8}>
           <CodeEditor
             lang={lang}
             title="代码"
@@ -193,34 +200,24 @@ const Playground: React.FC<
               setCode(val)
             }}
           />
-        </Grid>
-        <Grid xs={12} md={4} item container direction="column">
-          <Grid className={classes.editor} item>
-            <CodeEditor
-              title="输入"
-              value={input}
-              onChange={(val) => {
-                setInput(val)
-              }}
-            />
-          </Grid>
-        </Grid>
-      </Grid>
+        </EditorGrid>
+        <EditorGrid item={true} xs={12} md={4}>
+          <CodeEditor
+            title="输入"
+            value={input}
+            onChange={(val) => {
+              setInput(val)
+            }}
+          />
+        </EditorGrid>
+      </EditorContainerGrid>
+
       <Collapse in={['success', 'warning'].includes(runInfo?.type ?? '')}>
-        <Output ref={outputRef} output={output} />
+        <Output ref={outputRef} output={output}/>
       </Collapse>
-      <div className={classes.footer}>
-        <Link
-          className={classes.footerLink}
-          href="https://duck.ac/"
-          underline="none"
-          target="_blank"
-          variant="h6"
-        >
-          {'Powered by '}
-          <img src={judgeDuckImgUrl} alt="JudgeDuck" height="30" />
-        </Link>
-      </div>
+
+      <Footer/>
+
     </Layout>
   )
 }
diff --git a/gatsby-theme-oi-wiki/src/pages/tags.tsx b/gatsby-theme-oi-wiki/src/pages/tags.tsx
index c72eb405..2e57db0d 100644
--- a/gatsby-theme-oi-wiki/src/pages/tags.tsx
+++ b/gatsby-theme-oi-wiki/src/pages/tags.tsx
@@ -1,31 +1,20 @@
-import Chip from '@material-ui/core/Chip'
-import { makeStyles } from '@material-ui/core/styles'
+import styled from '@mui/material/styles/styled'
 import { graphql, useStaticQuery } from 'gatsby'
 import kebabCase from 'lodash/kebabCase'
 import React from 'react'
-import StyledLayout from '../components/StyledLayout'
 import { DeepRequiredNonNull, DeepWriteable } from '../types/common'
+import { css } from '@emotion/react'
+import Layout from '../components/Layout'
+import Chip from '@mui/material/Chip'
+import Title from '../components/Title'
 
-const useStyles = makeStyles((theme) => ({
-  chip: {
-    margin: theme.spacing(0.5),
-  },
-}))
+const StyledChip = styled(Chip)(({ theme }) => css`
+  margin: ${theme.spacing(0.5)};
+`) as typeof Chip
 
-export interface TagsPageProps {
-  location: Location
-}
-
-const TagsPage: React.FC<TagsPageProps> = (props) => {
-  const {
-    allMarkdownRemark: { group },
-  } = useStaticQuery<GatsbyTypes.TagsQuery>(graphql`
-    query Tags {
-      site {
-        siteMetadata {
-          title
-        }
-      }
+const TagsPage: React.FC = () => {
+  const { allMarkdownRemark: { group } } = useStaticQuery<GatsbyTypes.TagListQuery>(graphql`
+    query TagList {
       allMarkdownRemark(limit: 2000) {
         group(field: frontmatter___tags) {
           fieldValue
@@ -33,29 +22,26 @@ const TagsPage: React.FC<TagsPageProps> = (props) => {
         }
       }
     }
-  `) as DeepWriteable<DeepRequiredNonNull<GatsbyTypes.TagsQuery>>
+  `) as DeepWriteable<DeepRequiredNonNull<GatsbyTypes.TagListQuery>>
 
-  const classes = useStyles()
-  const { location } = props
-
-  group.sort((a, b) => b.totalCount - a.totalCount)
+  const title = '标签页'
 
   return (
-    <StyledLayout location={location} noMeta={true} title="标签页">
-      <div>
-        {group.map((tag) => (
-          <Chip
-            label={`${tag.fieldValue}(${tag.totalCount})`}
-            variant="outlined"
+    <Layout title={title} withNav={false} withToc={false}>
+      <Title noEdit={true} relativePath="">{title}</Title>
+      {group
+        .sort((a, b) => b.totalCount - a.totalCount)
+        .map(({ fieldValue, totalCount }) => (
+          <StyledChip
+            key={fieldValue}
+            label={`${fieldValue}(${totalCount})`}
             component="a"
+            href={'/tags/' + kebabCase(fieldValue)}
             clickable={true}
-            key={tag.fieldValue}
-            href={'/tags/' + kebabCase(tag.fieldValue)}
-            className={classes.chip}
+            variant="outlined"
           />
         ))}
-      </div>
-    </StyledLayout>
+    </Layout>
   )
 }
 
diff --git a/gatsby-theme-oi-wiki/src/static/cssVars.ts b/gatsby-theme-oi-wiki/src/static/cssVars.ts
new file mode 100644
index 00000000..33d1312a
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/static/cssVars.ts
@@ -0,0 +1,40 @@
+import { VarsStore } from '../stores/cssVarsStore'
+
+const cssVars = (): void => {
+  const DB = 'persist-info'
+  const STORE = 'keyvaluepairs'
+  const KEY = 'css-vars'
+
+  const mapToStr = (map: Map<string, string>): string =>
+    Array.from(map).map(([k, v]) => `${k}: ${v};`).join(' ')
+
+  const dbOpenReq = window.indexedDB.open(DB)
+  const styleEl = document.getElementById(KEY)
+  dbOpenReq.onsuccess = () => {
+    const db = dbOpenReq.result
+    const trans = db.transaction([STORE], 'readonly')
+    const query = trans.objectStore(STORE).get(KEY)
+
+    query.onsuccess = () => {
+      const res = query.result as VarsStore
+
+      const style = `
+        :root {
+          color-scheme: light;
+          ${mapToStr(res.light)}
+        }
+
+        :root[data-theme="dark"] {
+          color-scheme: dark;
+          ${mapToStr(res.dark)}
+        }
+      `
+
+      if (styleEl) {
+        styleEl.innerHTML = style
+      }
+    }
+  }
+}
+
+export default cssVars
diff --git a/gatsby-theme-oi-wiki/src/static/themeMode.ts b/gatsby-theme-oi-wiki/src/static/themeMode.ts
new file mode 100644
index 00000000..5ef39d38
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/static/themeMode.ts
@@ -0,0 +1,51 @@
+const themeMode = (): void => {
+  const STORE_KEY = 'theme'
+  const THEME_MODE = {
+    light: 'light',
+    dark: 'dark',
+  }
+
+  const setTheme = (theme: string): void => {
+    document.documentElement.dataset[STORE_KEY] = theme
+    window.__theme = theme
+    window.__onThemeChange(theme)
+  }
+
+  /**
+   * can be overwritten in FC
+   */
+  window.__onThemeChange = () => {
+    // do sth
+  }
+
+  /**
+   * can be triggered by FC
+   * @param theme
+   */
+  window.__setPreferredTheme = (theme) => {
+    setTheme(theme)
+    try {
+      localStorage.setItem(STORE_KEY, JSON.stringify(window.__theme))
+    } catch (e) {
+      // just ignore
+    }
+  }
+
+  const matchTheme = (query: MediaQueryList | MediaQueryListEvent): string => {
+    return query.matches ? THEME_MODE.dark : THEME_MODE.light
+  }
+
+  const darkQuery = window.matchMedia(`(prefers-color-scheme: ${THEME_MODE.dark})`)
+
+  darkQuery.addEventListener('change', (event) => {
+    window.__setPreferredTheme(matchTheme(event))
+  })
+
+  try {
+    setTheme(JSON.parse(localStorage.getItem(STORE_KEY) || '') || matchTheme(darkQuery))
+  } catch (e) {
+    // just ignore
+  }
+}
+
+export default themeMode
diff --git a/gatsby-theme-oi-wiki/src/stores/cssVarsStore.ts b/gatsby-theme-oi-wiki/src/stores/cssVarsStore.ts
new file mode 100644
index 00000000..d1821d62
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/stores/cssVarsStore.ts
@@ -0,0 +1,75 @@
+import createCSSVars, { computeCss, VarMap } from '../utils/createCssVarPalette'
+import { theme } from '../theme'
+import persistStore from '../utils/persistStore'
+import { SerializedStyles } from '@emotion/react'
+import { Nullable } from '../types/common'
+import { computed, observable } from 'mobx'
+import { ThemeMode } from '../types/ThemeMode'
+
+export interface VarsStore {
+  light: VarMap;
+  dark: VarMap;
+  styleEl: Nullable<HTMLElement>;
+
+  computedCss: SerializedStyles;
+
+  setLight(light: VarMap): void;
+
+  setDark(dark: VarMap): void;
+
+  setStyleEl(el: Nullable<HTMLElement>): void;
+
+  setWithKey(label: ThemeMode, key: string, val: string): void;
+
+  getWithKey(label: ThemeMode, key: string): string;
+}
+
+const VARS_STORE_ID = 'css-vars'
+const { lightMap, darkMap } = createCSSVars(theme.palette)
+
+const cssVarsStore = persistStore<VarsStore>(
+  {
+    light: lightMap,
+    dark: darkMap,
+    styleEl: null,
+
+    get computedCss() {
+      return computeCss(lightMap, darkMap)
+    },
+
+    setLight(light) {
+      this.light = light
+    },
+    setDark(dark) {
+      this.dark = dark
+    },
+    setStyleEl(el) {
+      this.styleEl = el
+    },
+    setWithKey(label, key, val) {
+      this[label].set(key, val)
+    },
+    getWithKey(label, key) {
+      const val = this[label].get(key)
+      return typeof val === 'undefined'
+        ? ''
+        : val.includes(',')
+          ? `rgba(${val})`
+          : val
+    },
+  },
+  {
+    name: VARS_STORE_ID,
+    properties: ['light', 'dark'],
+  },
+  {
+    decorators: {
+      light: observable.deep,
+      dark: observable.deep,
+      computedCss: computed,
+    },
+  },
+)
+
+
+export { cssVarsStore, VARS_STORE_ID }
diff --git a/gatsby-theme-oi-wiki/src/stores/editWarnStore.ts b/gatsby-theme-oi-wiki/src/stores/editWarnStore.ts
new file mode 100644
index 00000000..24e46160
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/stores/editWarnStore.ts
@@ -0,0 +1,26 @@
+import { observable } from 'mobx'
+
+interface EditWarnStore {
+  open: boolean;
+  relativePath: string;
+
+  setOpen(val: boolean): void;
+
+  setRelativePath(val: string): void;
+}
+
+const editWarnStore = observable<EditWarnStore>({
+  open: false,
+  relativePath: '',
+
+  setOpen(val: boolean) {
+    this.open = val
+  },
+  setRelativePath(val: string) {
+    this.relativePath = val
+  },
+}, undefined, {
+  autoBind: true,
+})
+
+export { editWarnStore }
diff --git a/gatsby-theme-oi-wiki/src/stores/headerStore.ts b/gatsby-theme-oi-wiki/src/stores/headerStore.ts
new file mode 100644
index 00000000..95078b5e
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/stores/headerStore.ts
@@ -0,0 +1,51 @@
+import { computed, observable } from 'mobx'
+
+export interface HeaderStore {
+  appear: boolean;
+  appearLock: boolean;
+  onTop: boolean;
+
+  height: number;
+  currentHeight: number;
+
+  setAppear(val: boolean): void;
+
+  setAppearLock(val: boolean): void;
+
+  setOnTop(val: boolean): void;
+}
+
+
+const HEADER_HEIGHT = 60
+
+const headerStore = observable<HeaderStore>({
+  appear: true,
+  appearLock: false,
+  onTop: true,
+
+  get height() {
+    return HEADER_HEIGHT
+  },
+  get currentHeight() {
+    return this.appear ? this.height : 0
+  },
+
+  setAppear(val) {
+    if (!this.appearLock) {
+      this.appear = val
+    }
+  },
+  setAppearLock(val: boolean) {
+    this.appearLock = val
+  },
+  setOnTop(val) {
+    this.onTop = val
+  },
+}, {
+  height: computed,
+  currentHeight: computed,
+}, {
+  autoBind: true,
+})
+
+export { headerStore, HEADER_HEIGHT }
diff --git a/gatsby-theme-oi-wiki/src/stores/sidebarStore.ts b/gatsby-theme-oi-wiki/src/stores/sidebarStore.ts
new file mode 100644
index 00000000..aae17495
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/stores/sidebarStore.ts
@@ -0,0 +1,33 @@
+import { CreateObservableOptions, observable } from 'mobx'
+
+interface SidebarStore {
+  collapsed: boolean;
+  width: number;
+
+  setCollapsed(val: boolean): void
+
+  toggleCollapsed(): void
+}
+
+const sidebarStoreModel: SidebarStore = {
+  collapsed: false,
+  width: 260,
+
+  setCollapsed(val) {
+    this.collapsed = val
+  },
+
+  toggleCollapsed() {
+    this.collapsed = !this.collapsed
+  },
+}
+
+const sidebarStoreOption: CreateObservableOptions = {
+  autoBind: true,
+}
+
+const tocSidebarStore = observable(sidebarStoreModel, undefined, sidebarStoreOption)
+
+const navSidebarStore = observable(sidebarStoreModel, undefined, sidebarStoreOption)
+
+export { tocSidebarStore, navSidebarStore }
diff --git a/gatsby-theme-oi-wiki/src/templates/Changelog.tsx b/gatsby-theme-oi-wiki/src/templates/Changelog.tsx
new file mode 100644
index 00000000..2f60eee2
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/templates/Changelog.tsx
@@ -0,0 +1,194 @@
+import React from 'react'
+import { Link as GatsbyLink } from 'gatsby'
+import { LogResult } from 'simple-git'
+import Layout from '../components/Layout'
+import TimelineItem from '@mui/lab/TimelineItem'
+import styled from '@mui/material/styles/styled'
+import TimelineConnector from '@mui/lab/TimelineConnector'
+import TimelineDot from '@mui/lab/TimelineDot'
+import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent'
+import TimelineSeparator from '@mui/lab/TimelineSeparator'
+import { css } from '@emotion/react'
+import Typography from '@mui/material/Typography'
+import TimelineContent from '@mui/lab/TimelineContent'
+import Paper from '@mui/material/Paper'
+import Time from '../components/Time'
+import SmartLink from '../components/SmartLink'
+import Grid from '@mui/material/Grid'
+import { lightBlue } from '@mui/material/colors'
+import Timeline from '@mui/lab/Timeline'
+import Box from '@mui/material/Box'
+import Button from '@mui/material/Button'
+import ArrowBackIos from '@mui/icons-material/ArrowBackIos'
+import Divider from '@mui/material/Divider'
+import Title from '../components/Title'
+
+
+interface TimelineBlockProps {
+  left: React.ReactNode;
+  right: React.ReactNode;
+}
+
+interface TimelineBlockListProps {
+  changelog: LogResult;
+  relativePath: string;
+}
+
+type HistoryBlockProps = Pick<TimelineBlockListProps, 'relativePath'>
+
+interface ChangelogProps {
+  pageContext: TimelineBlockListProps & {
+    title: string;
+  }
+}
+
+
+const StyledTimelineItem = styled(TimelineItem)`
+  &:before {
+    content: unset;
+  }
+`
+
+const StyledTimelineOppositeContent = styled(TimelineOppositeContent)(({ theme }) => css`
+  width: 200px;
+  padding-top: 4px;
+  flex: unset;
+
+  ${theme.breakpoints.down('sm')} {
+    order: 1;
+    text-align: left;
+    vertical-align: top;
+  }
+`)
+
+const StyledTimelineContent = styled(TimelineContent)(({ theme }) => css`
+  ${theme.breakpoints.down('sm')} {
+    order: 2;
+    margin-top: 20px;
+    margin-left: -200px;
+  }
+`)
+
+const StyledPaper = styled(Paper)(({ theme }) => css`
+  padding: 6px 16px;
+  margin-top: ${theme.spacing(1)};
+`)
+
+const TimelineBlock: React.FC<TimelineBlockProps> = (props) => {
+  return (
+    <StyledTimelineItem>
+      <StyledTimelineOppositeContent>
+        {props.left}
+      </StyledTimelineOppositeContent>
+      <TimelineSeparator>
+        <TimelineDot variant="outlined"/>
+        <TimelineConnector/>
+      </TimelineSeparator>
+      <StyledTimelineContent>
+        <StyledPaper variant="outlined">
+          {props.right}
+        </StyledPaper>
+      </StyledTimelineContent>
+    </StyledTimelineItem>
+  )
+}
+
+const AuthorTyp = styled(Typography)`
+  margin: 0;
+  line-height: 1.6em;
+`
+
+const HashLink = styled(SmartLink)`
+  margin: 0 0 0 auto;
+  color: inherit;
+
+  &:hover {
+    text-decoration: none;
+    color: ${lightBlue[500]};
+  }
+`
+
+const TimelineBlockList: React.FC<TimelineBlockListProps> = (props) => {
+  const { changelog, relativePath } = props
+
+  return <>
+    {changelog.all.map((item, index) => {
+      const { hash, date, message, author_name: author } = item
+      return (
+        <TimelineBlock
+          key={index + '#'}
+          left={
+            <Typography variant="body2" color="textSecondary">
+              <Time time={date}/>
+            </Typography>
+          }
+          right={
+            <>
+              <Grid container={true} alignItems="center">
+                <SmartLink href={`https://github.com/${author}`}>
+                  <AuthorTyp variant="h5">
+                    {author}
+                  </AuthorTyp>
+                </SmartLink>
+                <HashLink href={`https://github.com/OI-wiki/OI-wiki/commit/${hash}/${relativePath}`}>
+                  <Typography>{hash.substr(0, 7)}</Typography>
+                </HashLink>
+              </Grid>
+              <Typography>{message}</Typography>
+            </>
+          }/>
+      )
+    })}
+  </>
+}
+
+const HistoryBlock: React.FC<HistoryBlockProps> = (props) => {
+  return (
+    <TimelineBlock
+      left="..."
+      right={
+        <>
+          <Typography>...</Typography>
+          {'在 '}
+          <SmartLink href={`https://github.com/OI-wiki/OI-wiki/commits/master/${props.relativePath}`}>GitHub</SmartLink>
+          {' 上查看完整历史'}
+        </>
+      }/>
+  )
+}
+
+const BackBlock: React.FC = () => {
+  return (
+    <Box sx={{ mt: '30px' }}>
+      <Divider/>
+      <Button
+        sx={{ mt: '8px', color: 'inherit' }}
+        size="large"
+        component={GatsbyLink}
+        to="../"
+        startIcon={<ArrowBackIos/>}>
+        返回
+      </Button>
+    </Box>
+  )
+}
+
+const ChangeLog: React.FC<ChangelogProps> = (props) => {
+  const { title, changelog, relativePath } = props.pageContext
+  const pageTitle = `更新历史${title ? ` - ${title}` : ''}`
+
+  return (
+    <Layout withNav={false} withToc={false} title={pageTitle}>
+      <Title noEdit={true} relativePath={relativePath}>{pageTitle}</Title>
+
+      <Timeline>
+        <TimelineBlockList changelog={changelog} relativePath={relativePath}/>
+        <HistoryBlock relativePath={relativePath}/>
+      </Timeline>
+
+      <BackBlock/>
+    </Layout>
+  )
+}
+
+export default ChangeLog
diff --git a/gatsby-theme-oi-wiki/src/templates/Doc.tsx b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
new file mode 100644
index 00000000..45f116c5
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/templates/Doc.tsx
@@ -0,0 +1,103 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+import { DeepRequiredNonNull, DeepWriteable } from '../types/common'
+import getComponents from '../components/customed'
+import MDRenderer from '../components/MDRenderer'
+import { HistoryLocation } from '../types/location'
+import Title from '../components/Title'
+import Meta from '../components/Meta'
+import Layout from '../components/Layout'
+import Comment from '../components/Comment'
+
+export const query = graphql`
+  query DocInfo($id: String!) {
+    mdx: markdownRemark(id: { eq: $id }) {
+      id
+      wordCount {
+        words
+      }
+      fields {
+        slug
+        isIndex
+      }
+      excerpt
+      htmlAst
+      headings {
+        value
+      }
+      frontmatter {
+        author
+        tags
+        title
+        noMeta
+        noComment
+        description
+      }
+      headings {
+        depth
+        id
+        value
+      }
+      parent {
+        ... on File {
+          relativePath
+          modifiedTime(formatString: "YYYY/MM/DD")
+          birthTime(formatString: "")
+          changeTime(formatString: "")
+        }
+      }
+    }
+  }
+`
+
+
+interface DocProps {
+  data: DeepWriteable<DeepRequiredNonNull<GatsbyTypes.DocInfoQuery>>,
+  location: HistoryLocation
+}
+
+
+const Doc: React.FC<DocProps> = (props) => {
+  const { data, location } = props
+  const { mdx } = data
+
+  const title = mdx.fields.slug === '/' ? '' : mdx.frontmatter.title
+  const description = mdx.frontmatter.description || mdx.excerpt
+  const authors = mdx.frontmatter.author
+  const tags = mdx.frontmatter.tags
+  const noMeta = mdx.frontmatter.noMeta || false
+  const noComment = mdx.frontmatter.noComment || false
+  const noEdit = false
+  const headings = mdx.headings || null
+  const relativePath = mdx.parent.relativePath || ''
+  const modifiedTime = mdx.parent.modifiedTime || ''
+  const wordCount = mdx.wordCount.words || 0
+  const datePublished = mdx.parent.birthTime || ''
+  const dateModified = mdx.parent.changeTime || ''
+  const isIndex = mdx.fields.isIndex
+  const isWIP = wordCount === 0 || (tags?.findIndex((x: string) => x === 'WIP') >= 0)
+
+  const components = getComponents({
+    pathname: location.pathname,
+    isIndex,
+  })
+
+  return (
+    <Layout title={title} pathname={location.pathname} toc={headings}>
+      <Title noEdit={noEdit} relativePath={relativePath}>{title}</Title>
+
+      <MDRenderer htmlAst={mdx.htmlAst} components={components}/>
+
+      {!noMeta && <Meta
+        modifiedTime={modifiedTime}
+        title={title}
+        tags={tags}
+        authors={authors}
+        relativePath={relativePath}/>}
+
+      {!noComment && <Comment title={title}/>}
+    </Layout>
+  )
+}
+
+export default Doc
diff --git a/gatsby-theme-oi-wiki/src/templates/Tag.tsx b/gatsby-theme-oi-wiki/src/templates/Tag.tsx
new file mode 100644
index 00000000..ac6e54b9
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/templates/Tag.tsx
@@ -0,0 +1,89 @@
+import { graphql } from 'gatsby'
+import { DeepRequiredNonNull, DeepWriteable } from '../types/common'
+import { HistoryLocation } from '../types/location'
+import React from 'react'
+import Layout from '../components/Layout'
+import Title from '../components/Title'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import { Button, ListItemIcon, ListItemText } from '@mui/material'
+import { ArrowBackIos, Book } from '@mui/icons-material'
+
+export const query = graphql`
+  query TagInfo($tag: String) {
+    allMarkdownRemark(
+      limit: 2000
+      sort: { fields: [frontmatter___title], order: DESC }
+      filter: { frontmatter: { tags: { in: [$tag] } } }
+    ) {
+      totalCount
+      edges {
+        node {
+          fields {
+            slug
+          }
+          frontmatter {
+            title
+          }
+        }
+      }
+    }
+  }
+`
+
+
+interface TagProps {
+  data: DeepWriteable<DeepRequiredNonNull<GatsbyTypes.TagInfoQuery>>;
+  location: HistoryLocation;
+  pageContext: {
+    tag: string;
+  }
+}
+
+interface TagListProps {
+  edges: TagProps['data']['allMarkdownRemark']['edges']
+}
+
+
+const TagList: React.FC<TagListProps> = (props) => {
+  const { edges } = props
+  return (
+    <List>
+      {edges.map((edge) => {
+        const { node: { fields: { slug }, frontmatter: { title } } } = edge
+        return (
+          <ListItem button={true} divider={true} component="a" href={slug} key={slug}>
+            <ListItemIcon>
+              <Book/>
+            </ListItemIcon>
+            <ListItemText primary={title}/>
+          </ListItem>
+        )
+      })}
+    </List>
+  )
+}
+
+const Tag: React.FC<TagProps> = (props) => {
+  const { data: { allMarkdownRemark: { edges, totalCount } }, pageContext: { tag } } = props
+
+  return (
+    <Layout title={`标签页 - ${tag}`} withToc={false} withNav={false}>
+      <Title noEdit={true} relativePath="">
+        共 {totalCount} 篇文章被打上了 <code>{tag}</code> 标签：
+      </Title>
+
+      <TagList edges={edges}/>
+
+      <Button
+        variant="outlined"
+        startIcon={<ArrowBackIos/>}
+        href="/tags"
+      >
+        所有标签
+      </Button>
+    </Layout>
+  )
+}
+
+export default Tag
diff --git a/gatsby-theme-oi-wiki/src/theme/code-hightlight/darkPlus.ts b/gatsby-theme-oi-wiki/src/theme/code-hightlight/darkPlus.ts
new file mode 100644
index 00000000..5c0c34eb
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/theme/code-hightlight/darkPlus.ts
@@ -0,0 +1,17 @@
+import { css } from '@emotion/react'
+
+const darkPlus = css`
+  --shiki-color-text: #D4D4D4;
+  --shiki-color-backround: #1E1E1E;
+  --shiki-token-consant: #b5cea8;
+  --shiki-token-strig: #ce9178;
+  --shiki-token-commnt: #6A9955;
+  --shiki-token-keywrd: #569cd6;
+  --shiki-token-paraeter: #9CDCFE;
+  --shiki-token-funcion: #DCDCAA;
+  --shiki-token-strig-expression: #d16969;
+  --shiki-token-puncuation: #D4D4D4;
+  --shiki-token-link: #D4D4D4;
+`
+
+export default darkPlus
diff --git a/gatsby-theme-oi-wiki/src/theme/code-hightlight/lightPlus.ts b/gatsby-theme-oi-wiki/src/theme/code-hightlight/lightPlus.ts
new file mode 100644
index 00000000..82c3f3a9
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/theme/code-hightlight/lightPlus.ts
@@ -0,0 +1,17 @@
+import { css } from '@emotion/react'
+
+const lightPlus = css`
+  --shiki-color-text: #000000;
+  --shiki-color-background: #FFFFFF;
+  --shiki-token-constant: #098658;
+  --shiki-token-string: #a31515;
+  --shiki-token-comment: #008000;
+  --shiki-token-keyword: #0000ff;
+  --shiki-token-parameter: #001080;
+  --shiki-token-function: #795E26;
+  --shiki-token-string-expression: #800000;
+  --shiki-token-punctuation: #000000;
+  --shiki-token-link: #000000;
+`
+
+export default lightPlus
diff --git a/gatsby-theme-oi-wiki/src/theme/globalStyle.ts b/gatsby-theme-oi-wiki/src/theme/globalStyle.ts
new file mode 100644
index 00000000..ea28fa80
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/theme/globalStyle.ts
@@ -0,0 +1,19 @@
+import { css, SerializedStyles } from '@emotion/react'
+import { Theme } from '@mui/material/styles/createTheme'
+import pseudoCodeStyle from './pseudoCodeStyle'
+
+// the css here will be injected by the <GlobalStyles>
+// position: src/gatsby-func/WrapRootElement.tsx
+const globalStyle = (theme: Theme): SerializedStyles => css`
+  :root {
+    --code-block-font: "Fira Mono", "Menlo", "Monaco", "Consolas", "Andale Mono", "Ubuntu Mono", "Courier New", "Hack", "Fira Code", "Jetbrains Mono", monospace;
+
+    &[data-monofont=fallback] {
+      --code-block-font: monospace;
+    }
+  }
+
+  ${pseudoCodeStyle(theme)};
+`
+
+export default globalStyle
diff --git a/gatsby-theme-oi-wiki/src/theme/hightlight-themes/darkplus.ts b/gatsby-theme-oi-wiki/src/theme/hightlight-themes/darkplus.ts
deleted file mode 100644
index fe71216f..00000000
--- a/gatsby-theme-oi-wiki/src/theme/hightlight-themes/darkplus.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export default {
-  '--shiki-color-text': '#D4D4D4',
-  '--shiki-color-background': '#1E1E1E',
-  '--shiki-token-constant': '#b5cea8',
-  '--shiki-token-string': '#ce9178',
-  '--shiki-token-comment': '#6A9955',
-  '--shiki-token-keyword': '#569cd6',
-  '--shiki-token-parameter': '#9CDCFE',
-  '--shiki-token-function': '#DCDCAA',
-  '--shiki-token-string-expression': '#d16969',
-  '--shiki-token-punctuation': '#D4D4D4',
-  '--shiki-token-link': '#D4D4D4',
-}
diff --git a/gatsby-theme-oi-wiki/src/theme/hightlight-themes/lightplus.ts b/gatsby-theme-oi-wiki/src/theme/hightlight-themes/lightplus.ts
deleted file mode 100644
index fce0c539..00000000
--- a/gatsby-theme-oi-wiki/src/theme/hightlight-themes/lightplus.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export default {
-  '--shiki-color-text': '#000000',
-  '--shiki-color-background': '#FFFFFF',
-  '--shiki-token-constant': '#098658',
-  '--shiki-token-string': '#a31515',
-  '--shiki-token-comment': '#008000',
-  '--shiki-token-keyword': '#0000ff',
-  '--shiki-token-parameter': '#001080',
-  '--shiki-token-function': '#795E26',
-  '--shiki-token-string-expression': '#800000',
-  '--shiki-token-punctuation': '#000000',
-  '--shiki-token-link': '#000000',
-}
diff --git a/gatsby-theme-oi-wiki/src/theme/index.ts b/gatsby-theme-oi-wiki/src/theme/index.ts
index 9f30a9d3..e43dc6e5 100644
--- a/gatsby-theme-oi-wiki/src/theme/index.ts
+++ b/gatsby-theme-oi-wiki/src/theme/index.ts
@@ -1,239 +1,51 @@
-import createPalette, { Palette, PaletteColor } from '@material-ui/core/styles/createPalette'
-import blue from '@material-ui/core/colors/blue'
-import grey from '@material-ui/core/colors/grey'
-import red from '@material-ui/core/colors/red'
-import { createTheme, hexToRgb, ThemeOptions, withStyles } from '@material-ui/core/styles'
-
-import globalStyles from './global'
-
-import paletteColors from '../styles/colors'
-import { Nullable, StrIndexObj } from '../types/common'
-import { noopNull } from '../utils/common'
-
-import DarkPlus from './hightlight-themes/darkplus'
-import LightPlus from './hightlight-themes/lightplus'
-
-type DStrIndexObj = StrIndexObj<StrIndexObj>
-type HexToRGBAParamType = (color?: string, alpha?: number) => string | null
-type ApplyDefaultsType = (theme: Palette, ...keys: (keyof Palette)[]) => StrIndexObj<Nullable<string>>
-type ApplyAdaptiveType = (...keys: (keyof Palette)[]) => DStrIndexObj
-type WithStylesReturnType = ReturnType<typeof withStyles>
-type GetThemeCSSElType = (style: WithStylesReturnType) => ReturnType<WithStylesReturnType>
-
-const RGBA_EXPR = /^rgba\((.*)\)$/
-const RGB_EXPR = /^rgb\((.*)\)$/
-const HEX_EXPR = /^#([A-Fa-f0-9]{3}){1,2}$/
-const hexToRGBAParam: HexToRGBAParamType = (color, alpha = 1) => {
-  if (color) {
-    let res
-    if (color === 'auto') return color
-    else if ((res = color.match(RGBA_EXPR)) !== null) {
-      return res[1]
-    } else if ((res = color.match(RGB_EXPR)) !== null) {
-      return `${res[1]}, ${alpha}`
-    } else if (HEX_EXPR.test(color)) {
-      return `${hexToRgb(color).trim().match(RGB_EXPR)?.[1]}, ${alpha}`
-    } else throw new Error('Bad Hex ' + color)
-  } else return null
-}
-
-const applyDefaults: ApplyDefaultsType = (theme, ...keys) => {
-  const exp = /^(#|rgba)/
-  const keyObj: ReturnType<ApplyDefaultsType> = {}
-  keys.forEach(k => {
-    const colorKind = theme[k as keyof Palette]
-    Object.keys(colorKind).forEach(el => {
-      const hex = (colorKind as PaletteColor)[el as keyof PaletteColor]
-      if (exp.test(hex)) {
-        keyObj[`--${k}-${el}`] = hexToRGBAParam(hex.toString())
-      }
-    })
-  })
-
-  return keyObj
-}
-
-const applyAdaptive: ApplyAdaptiveType = (...keys) => {
-  const exp = /^(#|rgba)/
-  const rst: ReturnType<ApplyAdaptiveType> = {}
-  keys.forEach(k => {
-    const obj: StrIndexObj = {}
-    const colorKind = lightColor[k]
-    Object.keys(colorKind).forEach(el => {
-      const color = (colorKind as PaletteColor)[el as keyof PaletteColor]
-      obj[el] = exp.test(color) ? `rgba(var(--${k}-${el}))` : color
-    })
-    rst[k] = obj
-  })
-
-  return rst
-}
-
-const getThemeCssEl: GetThemeCSSElType = (style) => style(noopNull)
-
-export const CustomCssBaseline = globalStyles(noopNull as any)
-
-const lightColor = createPalette({ type: 'light' })
-const darkColor = createPalette({ type: 'dark' })
-const paletteKeys: (keyof Palette)[] = ['primary', 'secondary', 'text', 'background', 'action', 'error', 'warning', 'info', 'success']
-
-const lightCss = {
-  '@global': {
-    'html[data-theme=light]': {
-      '--primary-color': hexToRGBAParam(lightColor.primary.main),
-      '--footer-bg': hexToRGBAParam(grey[200]),
-      '--footer-text': hexToRGBAParam(grey[700]),
-      '--details-border': hexToRGBAParam(blue[500]),
-      '--details-main': hexToRGBAParam(blue[50]),
-      '--blockquote': '0, 0, 0, .12',
-      '--inline-color': '#37474f',
-      '--inline-bg-hsla': 'hsla(0,0%,85%,.5)',
-      '--search-bg': hexToRGBAParam(grey[100]),
-      // '--search-highlight': hexToRGBAParam('#174d8c'),
-      '--tab-hover': hexToRGBAParam('#000'),
-      '--divider': hexToRGBAParam(lightColor.divider),
-      '--subtitle-text': '0, 0, 0, .7',
-      '--alert-info-bg': hexToRGBAParam(blue[50]),
-      '--alert-error-bg': hexToRGBAParam(red[50]),
-      '--clicked-reaction-button': hexToRGBAParam('#faebd7'),
-      '--fade-background': 'linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%)',
-      '--link-default': hexToRGBAParam('#576ad4'),
-      '--link-hover': hexToRGBAParam('#03a9f4'),
-      '--inline-code-color': hexToRGBAParam('#37474f'),
-      '--inline-code-background': '236, 236, 236, .5',
-      '--color-scheme': 'light',
-      ...LightPlus,
-      ...applyDefaults(lightColor, ...paletteKeys),
-    },
-  },
-}
-
-const darkCss = {
-  '@global': {
-    'html[data-theme=dark]': {
-      '--primary-color': hexToRGBAParam(darkColor.primary.main),
-      '--paper-color': hexToRGBAParam(darkColor.background.paper),
-      '--bg-color': hexToRGBAParam(darkColor.background.default),
-      '--footer-bg': hexToRGBAParam(grey[900]),
-      '--footer-text': hexToRGBAParam(grey[300]),
-      '--details-border': hexToRGBAParam(blue[500]),
-      '--details-main': hexToRGBAParam(grey[700]),
-      '--blockquote': '255, 255, 255, .12',
-      '--search-bg': hexToRGBAParam(grey[700]),
-      // '--search-highlight': hexToRGBAParam('#acccf1'),
-      '--tab-hover': hexToRGBAParam('#fff'),
-      '--divider': hexToRGBAParam(darkColor.divider),
-      '--subtitle-text': '255, 255, 255. .7',
-      '--alert-info-bg': hexToRGBAParam(grey[900]),
-      '--alert-error-bg': hexToRGBAParam(grey[900]),
-      '--clicked-reaction-button': hexToRGBAParam('#202020'),
-      '--fade-background': 'linear-gradient(to right, rgba(0, 0, 0, 0), rgba(66, 66, 66, 1) 50%)',
-      '--link-default': hexToRGBAParam('#20baff'),
-      '--link-hover': hexToRGBAParam('#52ebff'),
-      '--inline-code-color': hexToRGBAParam('#c4c4c4'),
-      '--inline-code-background': hexToRGBAParam('#424242'),
-      '--color-scheme': 'dark',
-      ...DarkPlus,
-      ...applyDefaults(darkColor, ...paletteKeys),
-    },
-  },
+import createTheme from '@mui/material/styles/createTheme'
+import { grey } from '@mui/material/colors'
+import { CSSProperties } from '@mui/material/styles/createTypography'
+
+const commonTypStyle: CSSProperties = {
+  fontWeight: 'bold',
+  marginBlockEnd: '1rem',
+  marginBlockStart: '1.5rem',
 }
 
-const LightCssBaseline = getThemeCssEl(withStyles(() => lightCss))
-const DarkCssBaseline = getThemeCssEl(withStyles(() => darkCss))
-const AutoCssBaseline = getThemeCssEl(withStyles(() => ({
-  '@global': {
-    'html[data-theme=auto]': lightCss['@global']['html[data-theme=light]'],
-    '@media (prefers-color-scheme: dark)': {
-      'html[data-theme=auto]': darkCss['@global']['html[data-theme=dark]'],
-    },
-  },
-})))
-
-const SecondaryColorCssBaseline = getThemeCssEl(withStyles(() =>
-  paletteColors.reduce((obj, c) => {
-    if (c.id !== '0') {
-      obj['@global'][`html[data-secondary-color='${c.id}']`] = {
-        '--secondary-light': hexToRGBAParam(c.light),
-        '--secondary-dark': hexToRGBAParam(c.dark),
-        '--secondary-main': hexToRGBAParam(c.main),
-        '--secondary-contrast-text': hexToRGBAParam(c.contrastText),
-      }
-    }
-    return obj
-  }, { '@global': {} as StrIndexObj<any> })))
-
-const adaptiveTheme = createTheme({
-  palette: {
-    primary: {
-      main: 'rgba(var(--primary-color))',
-    },
-    ...applyAdaptive(...paletteKeys),
-    secondary: {
-      light: 'rgba(var(--secondary-light))',
-      dark: 'rgba(var(--secondary-dark))',
-      main: 'rgba(var(--secondary-main))',
-      contrastText: 'rgba(var(--secondary-contrast-text))',
-    },
-    footer: {
-      background: 'rgba(var(--footer-bg))',
-      text: 'rgba(var(--footer-text))',
-    },
-    details: {
-      border: 'rgba(var(--details-border))',
-      main: 'rgba(var(--details-main))',
-    },
-    blockquote: 'rgba(var(--blockquote))',
-    search: {
-      messageBackground: 'rgba(var(--search-bg))',
-      // highlight: 'rgba(var(--search-highlight))',
-    },
-    tab: {
-      colorOnHover: 'rgba(var(--tab-hover))',
-    },
-    divider: 'rgba(var(--divider))',
-    // getContrastText (color) {
-    //   if (color.startsWith('rgba(v')) return 'rgba(var(--text-primary))'
-    //   else return lightColor.getContrastText(color)
-    // },
-    subTitle: 'rgba(var(--subtitle-text))',
-    reactionButtonBackground: 'rgba(var(--clicked-reaction-button))',
-    fadeTextBackground: 'var(--fade-background)',
-    // link: {
-    //   default: 'rgba(var(--link-default))',
-    //   hover: 'rgba(var(--link-hover))',
-    // },
-  },
-  // Material-UI hard-coded and/or used color manipulator in several components
-  // override them here as a workaround
-  overrides: {
-    MuiChip: {
-      root: {
-        color: 'rgba(var(--text-primary))',
-      },
-      outlined: {
-        border: '1px solid rgba(var(--divider))',
-      },
-    },
-    MuiAlert: {
-      standardInfo: {
-        color: 'rgba(var(--text-primary))',
-        backgroundColor: 'rgba(var(--alert-info-bg))',
-      },
-      standardError: {
-        color: 'rgba(var(--text-primary))',
-        backgroundColor: 'rgba(var(--alert-error-bg))',
-      },
-    },
-    MuiIconButton: {
-      root: {
-        transition: `background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color ${250}ms ease-in-out`,
-      },
-    },
-  },
+const theme = createTheme({
+  unstable_strictMode: true,
   typography: {
     fontFamily: '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif',
+    h1: {
+      fontSize: '2.5rem',
+      paddingBottom: '.3rem',
+      borderBlockEnd: `1px solid ${grey['300']}`,
+      ...commonTypStyle,
+    },
+    h2: {
+      fontSize: '2rem',
+      paddingBottom: '.3rem',
+      borderBlockEnd: `1px solid ${grey['300']}`,
+      ...commonTypStyle,
+    },
+    h3: {
+      fontSize: '1.75rem',
+      ...commonTypStyle,
+    },
+    h4: {
+      fontSize: '1.5rem',
+      ...commonTypStyle,
+    },
+    h5: {
+      fontSize: '1.25rem',
+      ...commonTypStyle,
+    },
+    h6: {
+      fontSize: '1rem',
+      ...commonTypStyle,
+    },
+    body2: {
+      fontSize: '0.875rem',
+      lineHeight: '1.5rem',
+      marginBlockEnd: '0.5rem',
+    },
   },
-} as ThemeOptions)
+})
 
-export { adaptiveTheme, LightCssBaseline, DarkCssBaseline, AutoCssBaseline, SecondaryColorCssBaseline }
+export { theme }
diff --git a/gatsby-theme-oi-wiki/src/theme/old-index.ts b/gatsby-theme-oi-wiki/src/theme/old-index.ts
new file mode 100644
index 00000000..9f30a9d3
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/theme/old-index.ts
@@ -0,0 +1,239 @@
+import createPalette, { Palette, PaletteColor } from '@material-ui/core/styles/createPalette'
+import blue from '@material-ui/core/colors/blue'
+import grey from '@material-ui/core/colors/grey'
+import red from '@material-ui/core/colors/red'
+import { createTheme, hexToRgb, ThemeOptions, withStyles } from '@material-ui/core/styles'
+
+import globalStyles from './global'
+
+import paletteColors from '../styles/colors'
+import { Nullable, StrIndexObj } from '../types/common'
+import { noopNull } from '../utils/common'
+
+import DarkPlus from './hightlight-themes/darkplus'
+import LightPlus from './hightlight-themes/lightplus'
+
+type DStrIndexObj = StrIndexObj<StrIndexObj>
+type HexToRGBAParamType = (color?: string, alpha?: number) => string | null
+type ApplyDefaultsType = (theme: Palette, ...keys: (keyof Palette)[]) => StrIndexObj<Nullable<string>>
+type ApplyAdaptiveType = (...keys: (keyof Palette)[]) => DStrIndexObj
+type WithStylesReturnType = ReturnType<typeof withStyles>
+type GetThemeCSSElType = (style: WithStylesReturnType) => ReturnType<WithStylesReturnType>
+
+const RGBA_EXPR = /^rgba\((.*)\)$/
+const RGB_EXPR = /^rgb\((.*)\)$/
+const HEX_EXPR = /^#([A-Fa-f0-9]{3}){1,2}$/
+const hexToRGBAParam: HexToRGBAParamType = (color, alpha = 1) => {
+  if (color) {
+    let res
+    if (color === 'auto') return color
+    else if ((res = color.match(RGBA_EXPR)) !== null) {
+      return res[1]
+    } else if ((res = color.match(RGB_EXPR)) !== null) {
+      return `${res[1]}, ${alpha}`
+    } else if (HEX_EXPR.test(color)) {
+      return `${hexToRgb(color).trim().match(RGB_EXPR)?.[1]}, ${alpha}`
+    } else throw new Error('Bad Hex ' + color)
+  } else return null
+}
+
+const applyDefaults: ApplyDefaultsType = (theme, ...keys) => {
+  const exp = /^(#|rgba)/
+  const keyObj: ReturnType<ApplyDefaultsType> = {}
+  keys.forEach(k => {
+    const colorKind = theme[k as keyof Palette]
+    Object.keys(colorKind).forEach(el => {
+      const hex = (colorKind as PaletteColor)[el as keyof PaletteColor]
+      if (exp.test(hex)) {
+        keyObj[`--${k}-${el}`] = hexToRGBAParam(hex.toString())
+      }
+    })
+  })
+
+  return keyObj
+}
+
+const applyAdaptive: ApplyAdaptiveType = (...keys) => {
+  const exp = /^(#|rgba)/
+  const rst: ReturnType<ApplyAdaptiveType> = {}
+  keys.forEach(k => {
+    const obj: StrIndexObj = {}
+    const colorKind = lightColor[k]
+    Object.keys(colorKind).forEach(el => {
+      const color = (colorKind as PaletteColor)[el as keyof PaletteColor]
+      obj[el] = exp.test(color) ? `rgba(var(--${k}-${el}))` : color
+    })
+    rst[k] = obj
+  })
+
+  return rst
+}
+
+const getThemeCssEl: GetThemeCSSElType = (style) => style(noopNull)
+
+export const CustomCssBaseline = globalStyles(noopNull as any)
+
+const lightColor = createPalette({ type: 'light' })
+const darkColor = createPalette({ type: 'dark' })
+const paletteKeys: (keyof Palette)[] = ['primary', 'secondary', 'text', 'background', 'action', 'error', 'warning', 'info', 'success']
+
+const lightCss = {
+  '@global': {
+    'html[data-theme=light]': {
+      '--primary-color': hexToRGBAParam(lightColor.primary.main),
+      '--footer-bg': hexToRGBAParam(grey[200]),
+      '--footer-text': hexToRGBAParam(grey[700]),
+      '--details-border': hexToRGBAParam(blue[500]),
+      '--details-main': hexToRGBAParam(blue[50]),
+      '--blockquote': '0, 0, 0, .12',
+      '--inline-color': '#37474f',
+      '--inline-bg-hsla': 'hsla(0,0%,85%,.5)',
+      '--search-bg': hexToRGBAParam(grey[100]),
+      // '--search-highlight': hexToRGBAParam('#174d8c'),
+      '--tab-hover': hexToRGBAParam('#000'),
+      '--divider': hexToRGBAParam(lightColor.divider),
+      '--subtitle-text': '0, 0, 0, .7',
+      '--alert-info-bg': hexToRGBAParam(blue[50]),
+      '--alert-error-bg': hexToRGBAParam(red[50]),
+      '--clicked-reaction-button': hexToRGBAParam('#faebd7'),
+      '--fade-background': 'linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%)',
+      '--link-default': hexToRGBAParam('#576ad4'),
+      '--link-hover': hexToRGBAParam('#03a9f4'),
+      '--inline-code-color': hexToRGBAParam('#37474f'),
+      '--inline-code-background': '236, 236, 236, .5',
+      '--color-scheme': 'light',
+      ...LightPlus,
+      ...applyDefaults(lightColor, ...paletteKeys),
+    },
+  },
+}
+
+const darkCss = {
+  '@global': {
+    'html[data-theme=dark]': {
+      '--primary-color': hexToRGBAParam(darkColor.primary.main),
+      '--paper-color': hexToRGBAParam(darkColor.background.paper),
+      '--bg-color': hexToRGBAParam(darkColor.background.default),
+      '--footer-bg': hexToRGBAParam(grey[900]),
+      '--footer-text': hexToRGBAParam(grey[300]),
+      '--details-border': hexToRGBAParam(blue[500]),
+      '--details-main': hexToRGBAParam(grey[700]),
+      '--blockquote': '255, 255, 255, .12',
+      '--search-bg': hexToRGBAParam(grey[700]),
+      // '--search-highlight': hexToRGBAParam('#acccf1'),
+      '--tab-hover': hexToRGBAParam('#fff'),
+      '--divider': hexToRGBAParam(darkColor.divider),
+      '--subtitle-text': '255, 255, 255. .7',
+      '--alert-info-bg': hexToRGBAParam(grey[900]),
+      '--alert-error-bg': hexToRGBAParam(grey[900]),
+      '--clicked-reaction-button': hexToRGBAParam('#202020'),
+      '--fade-background': 'linear-gradient(to right, rgba(0, 0, 0, 0), rgba(66, 66, 66, 1) 50%)',
+      '--link-default': hexToRGBAParam('#20baff'),
+      '--link-hover': hexToRGBAParam('#52ebff'),
+      '--inline-code-color': hexToRGBAParam('#c4c4c4'),
+      '--inline-code-background': hexToRGBAParam('#424242'),
+      '--color-scheme': 'dark',
+      ...DarkPlus,
+      ...applyDefaults(darkColor, ...paletteKeys),
+    },
+  },
+}
+
+const LightCssBaseline = getThemeCssEl(withStyles(() => lightCss))
+const DarkCssBaseline = getThemeCssEl(withStyles(() => darkCss))
+const AutoCssBaseline = getThemeCssEl(withStyles(() => ({
+  '@global': {
+    'html[data-theme=auto]': lightCss['@global']['html[data-theme=light]'],
+    '@media (prefers-color-scheme: dark)': {
+      'html[data-theme=auto]': darkCss['@global']['html[data-theme=dark]'],
+    },
+  },
+})))
+
+const SecondaryColorCssBaseline = getThemeCssEl(withStyles(() =>
+  paletteColors.reduce((obj, c) => {
+    if (c.id !== '0') {
+      obj['@global'][`html[data-secondary-color='${c.id}']`] = {
+        '--secondary-light': hexToRGBAParam(c.light),
+        '--secondary-dark': hexToRGBAParam(c.dark),
+        '--secondary-main': hexToRGBAParam(c.main),
+        '--secondary-contrast-text': hexToRGBAParam(c.contrastText),
+      }
+    }
+    return obj
+  }, { '@global': {} as StrIndexObj<any> })))
+
+const adaptiveTheme = createTheme({
+  palette: {
+    primary: {
+      main: 'rgba(var(--primary-color))',
+    },
+    ...applyAdaptive(...paletteKeys),
+    secondary: {
+      light: 'rgba(var(--secondary-light))',
+      dark: 'rgba(var(--secondary-dark))',
+      main: 'rgba(var(--secondary-main))',
+      contrastText: 'rgba(var(--secondary-contrast-text))',
+    },
+    footer: {
+      background: 'rgba(var(--footer-bg))',
+      text: 'rgba(var(--footer-text))',
+    },
+    details: {
+      border: 'rgba(var(--details-border))',
+      main: 'rgba(var(--details-main))',
+    },
+    blockquote: 'rgba(var(--blockquote))',
+    search: {
+      messageBackground: 'rgba(var(--search-bg))',
+      // highlight: 'rgba(var(--search-highlight))',
+    },
+    tab: {
+      colorOnHover: 'rgba(var(--tab-hover))',
+    },
+    divider: 'rgba(var(--divider))',
+    // getContrastText (color) {
+    //   if (color.startsWith('rgba(v')) return 'rgba(var(--text-primary))'
+    //   else return lightColor.getContrastText(color)
+    // },
+    subTitle: 'rgba(var(--subtitle-text))',
+    reactionButtonBackground: 'rgba(var(--clicked-reaction-button))',
+    fadeTextBackground: 'var(--fade-background)',
+    // link: {
+    //   default: 'rgba(var(--link-default))',
+    //   hover: 'rgba(var(--link-hover))',
+    // },
+  },
+  // Material-UI hard-coded and/or used color manipulator in several components
+  // override them here as a workaround
+  overrides: {
+    MuiChip: {
+      root: {
+        color: 'rgba(var(--text-primary))',
+      },
+      outlined: {
+        border: '1px solid rgba(var(--divider))',
+      },
+    },
+    MuiAlert: {
+      standardInfo: {
+        color: 'rgba(var(--text-primary))',
+        backgroundColor: 'rgba(var(--alert-info-bg))',
+      },
+      standardError: {
+        color: 'rgba(var(--text-primary))',
+        backgroundColor: 'rgba(var(--alert-error-bg))',
+      },
+    },
+    MuiIconButton: {
+      root: {
+        transition: `background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color ${250}ms ease-in-out`,
+      },
+    },
+  },
+  typography: {
+    fontFamily: '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif',
+  },
+} as ThemeOptions)
+
+export { adaptiveTheme, LightCssBaseline, DarkCssBaseline, AutoCssBaseline, SecondaryColorCssBaseline }
diff --git a/gatsby-theme-oi-wiki/src/theme/pseudoCodeStyle.ts b/gatsby-theme-oi-wiki/src/theme/pseudoCodeStyle.ts
new file mode 100644
index 00000000..09df56c1
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/theme/pseudoCodeStyle.ts
@@ -0,0 +1,82 @@
+import { css, SerializedStyles } from '@emotion/react'
+import { Theme } from '@mui/material/styles/createTheme'
+
+const pseudoCodeStyle = (theme: Theme): SerializedStyles => css`
+  .ps-root {
+    font-family: MJXTEX, "Times New Roman", Times, serif;
+    font-size: 1em;
+    font-weight: 100;
+    -webkit-font-smoothing: antialiased !important;
+
+    .ps-algorithm {
+      margin: 0.8em 0;
+      border-top: 3px solid ${theme.palette.text.secondary};
+      border-bottom: 2px solid rgba(var(--text-secondary));
+
+      &.with-caption > .ps-line > span:first-of-type {
+        border-bottom: 2px solid ${theme.palette.text.secondary};
+        padding-top: .5em;
+      }
+    }
+
+    .ps-algorithmic.with-linenum .ps-line.ps-code {
+      text-indent: -1.6em;
+
+      & > span {
+        text-indent: 0;
+      }
+    }
+
+    .katex {
+      text-indent: 0;
+      font-size: 1em;
+    }
+
+    .MathJax, .MathJax_CHTML {
+      text-indent: 0;
+      font-size: 1em !important;
+    }
+
+    .ps-line {
+      margin: 0;
+      padding: 0;
+      line-height: 1.2;
+    }
+
+    .ps-keyword {
+      font-family: MJXTEX-B, "Times New Roman", Times, serif;
+      font-weight: 700;
+      font-variant: normal;
+      font-style: normal;
+      text-transform: none;
+    }
+
+    .ps-comment {
+      font-family: MJXTEX, "Times New Roman", Times, serif;
+      font-weight: 400;
+      font-variant: normal;
+      font-style: normal;
+      text-transform: none;
+    }
+
+    .ps-linenum {
+      font-size: 0.8em;
+      line-height: 1em;
+      width: 1.6em;
+      text-align: right;
+      display: inline-block;
+      position: relative;
+      padding-right: 0.3em;
+    }
+
+    .ps-funcname {
+      font-family: MJXTEX, "Times New Roman", Times, serif;
+      font-weight: 400;
+      font-variant: small-caps;
+      font-style: normal;
+      text-transform: none;
+    }
+  }
+`
+
+export default pseudoCodeStyle
diff --git a/gatsby-theme-oi-wiki/src/theme/scrollbarStyle.ts b/gatsby-theme-oi-wiki/src/theme/scrollbarStyle.ts
new file mode 100644
index 00000000..29ba9721
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/theme/scrollbarStyle.ts
@@ -0,0 +1,25 @@
+import { css } from '@emotion/react'
+import { grey } from '@mui/material/colors'
+
+const scrollbarStyle = css`
+  --scrollbar-size: 0.4rem;
+
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    // width relative to self font-size
+    width: var(--scrollbar-size);
+    height: var(--scrollbar-size);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: ${grey[400]};
+    border-radius: 4px;
+
+    &:hover {
+      background-color: ${grey[600]};
+    }
+  }
+`
+
+export default scrollbarStyle
diff --git a/gatsby-theme-oi-wiki/src/types/ThemeMode.ts b/gatsby-theme-oi-wiki/src/types/ThemeMode.ts
new file mode 100644
index 00000000..0c5d4cf2
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/types/ThemeMode.ts
@@ -0,0 +1 @@
+export type ThemeMode = 'light' | 'dark'
diff --git a/gatsby-theme-oi-wiki/src/types/common.ts b/gatsby-theme-oi-wiki/src/types/common.ts
index 494ed2b1..97d36c76 100644
--- a/gatsby-theme-oi-wiki/src/types/common.ts
+++ b/gatsby-theme-oi-wiki/src/types/common.ts
@@ -12,3 +12,4 @@ export type DeepRequiredNonNull<T> = {
 export type DeepWriteable<T> = {
   -readonly [P in keyof T]: DeepWriteable<T[P]>
 };
+export type ArrayItemType<T extends any[]> = T extends (infer U)[] ? U : never;
diff --git a/gatsby-theme-oi-wiki/src/types/location.d.ts b/gatsby-theme-oi-wiki/src/types/location.d.ts
new file mode 100644
index 00000000..6868c1a3
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/types/location.d.ts
@@ -0,0 +1,11 @@
+export interface HLocation<S = unknown> {
+  pathname: string;
+  search: string;
+  state: S;
+  hash: string;
+  key?: string | undefined;
+}
+
+export type WindowLocation<S = unknown> = Window['location'] & HLocation<S>;
+
+export type HistoryLocation = WindowLocation & { state?: any };
diff --git a/gatsby-theme-oi-wiki/src/types/window.d.ts b/gatsby-theme-oi-wiki/src/types/window.d.ts
new file mode 100644
index 00000000..829db147
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/types/window.d.ts
@@ -0,0 +1,8 @@
+declare global {
+    interface Window {
+        __theme: string;
+        __setPreferredTheme: (theme: string) => void;
+        __onThemeChange: (theme: string) => void;
+    }
+}
+export {}
diff --git a/gatsby-theme-oi-wiki/src/utils/createCssVarPalette.ts b/gatsby-theme-oi-wiki/src/utils/createCssVarPalette.ts
new file mode 100644
index 00000000..d7b5f67f
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/utils/createCssVarPalette.ts
@@ -0,0 +1,153 @@
+import { decomposeColor, hslToRgb } from '@mui/system/colorManipulator'
+import { Palette, PaletteColor, TypeAction, TypeText } from '@mui/material/styles/createPalette'
+import { css, SerializedStyles } from '@emotion/react'
+import lightPlus from '../theme/code-hightlight/lightPlus'
+import darkPlus from '../theme/code-hightlight/darkPlus'
+
+const paletteColorKeys: (keyof Palette)[] = [
+  'primary',
+  'secondary',
+  'error',
+  'info',
+  'success',
+  'warning',
+]
+
+const textKeys: (keyof TypeText)[] = ['primary', 'secondary', 'disabled']
+
+const actionKeys: (keyof TypeAction)[] = [
+  'active',
+  'hover',
+  'hoverOpacity',
+  'selected',
+  'selectedOpacity',
+  'disabled',
+  'disabledOpacity',
+  'disabledBackground',
+  'focus',
+  'focusOpacity',
+  'activatedOpacity',
+]
+
+const varName = (...names: string[]): string => {
+  const str = names.join('-')
+  return str.startsWith('--') ? str : `--${str}`
+}
+
+const varColor = (str: string): string => {
+  return `rgba(var(${str}))`
+}
+
+const rgbaColor = (colorStr: string, fallbackAlpha = 1): string => {
+  const color = decomposeColor(colorStr)
+
+  if (isNaN(color.values[0])) {
+    color.values.shift()
+  }
+
+  switch (color.type) {
+    case 'hsla':
+    case 'hsl':
+      return `${decomposeColor(hslToRgb(colorStr)).values.join()},${fallbackAlpha}`
+    default:
+    case 'rgb':
+      return `${color.values.join()},${fallbackAlpha}`
+    case 'rgba':
+      return color.values.join()
+  }
+}
+
+export type VarMap = Map<string, string>
+
+export interface CssVarPalette {
+  lightMap: VarMap;
+  darkMap: VarMap;
+  palette: Palette;
+}
+
+const createCssVarPalette = (palette: Palette): CssVarPalette => {
+  const lightMap: VarMap = new Map()
+  const darkMap: VarMap = new Map()
+
+  // primary, secondary, error...
+  paletteColorKeys.forEach((k) => {
+    const v = palette[k] as PaletteColor
+
+    const name = varName(k)
+    darkMap.set(name, rgbaColor(v.dark))
+    lightMap.set(name, rgbaColor(v.main))
+    v.main = v.light = v.dark = varColor(name)
+
+    const textName = varName(name, 'contrastText')
+    lightMap.set(textName, rgbaColor(v.contrastText))
+    v.contrastText = varColor(textName)
+  })
+
+  // background
+  {
+    const bg = palette.background
+    const name = varName('background')
+    lightMap.set(name, rgbaColor(bg.default))
+    bg.default = varColor(name)
+
+    const paperName = varName(name, 'paper')
+    lightMap.set(paperName, rgbaColor(bg.paper))
+    darkMap.set(paperName, rgbaColor(bg.paper))
+    bg.paper = varColor(name)
+  }
+
+  // text
+  {
+    const name = varName('text')
+    const text = palette.text
+    textKeys.forEach((k) => {
+      const keyName = varName(name, k)
+      lightMap.set(keyName, rgbaColor(text[k]))
+      text[k] = varColor(keyName)
+    })
+  }
+
+  // action
+  {
+    const name = varName('action')
+    const action = palette.action
+    actionKeys.forEach((k) => {
+      const v = action[k]
+      const keyName = varName(name, k)
+      if (typeof v === 'number') {
+        lightMap.set(keyName, v.toString())
+      } else {
+        lightMap.set(keyName, rgbaColor(v))
+      }
+      // number | string
+      action[k] = varColor(keyName) as never
+    })
+  }
+
+  return {
+    lightMap,
+    darkMap,
+    palette,
+  }
+}
+
+const mapToStr = (map: VarMap): string => Array.from(map).map(([k, v]) => `${k}: ${v};`).join('\n')
+
+const computeCss = (light: VarMap, dark: VarMap): SerializedStyles => {
+  return css`
+    :root {
+      color-scheme: light;
+      ${lightPlus};
+      ${mapToStr(light)};
+    }
+
+    :root[data-theme="dark"] {
+      color-scheme: dark;
+      ${darkPlus};
+      ${mapToStr(dark)};
+    }
+  `
+}
+
+export default createCssVarPalette
+export { mapToStr, computeCss, varColor }
diff --git a/gatsby-theme-oi-wiki/src/utils/persistStore.ts b/gatsby-theme-oi-wiki/src/utils/persistStore.ts
new file mode 100644
index 00000000..287b94e6
--- /dev/null
+++ b/gatsby-theme-oi-wiki/src/utils/persistStore.ts
@@ -0,0 +1,76 @@
+import { makePersistable, stopPersisting } from 'mobx-persist-store'
+import { PersistenceStorageOptions } from 'mobx-persist-store/lib/esm2017/types'
+import { AnnotationsMap, CreateObservableOptions, IReactionOptions, observable } from 'mobx'
+import * as localforage from 'localforage'
+
+type WithPersistFunc<T> = T & {
+  stopStore(): void
+}
+
+type PersistStore =
+  <T extends Record<string, any>>
+  (value: T,
+   storageOptions: PersistenceStorageOptions<keyof T>,
+   otherOptions?: {
+     decorators?: AnnotationsMap<T, never>,
+     observableOptions?: CreateObservableOptions,
+     localforageOptions?: LocalForageOptions,
+     reactionOptions?: IReactionOptions<T>
+   }
+  ) => WithPersistFunc<T>;
+
+
+const forageInstanceMap = new Map<string, LocalForage>()
+
+const persistStore: PersistStore = (value, storageOptions, otherOptions) => {
+  const target = Object.assign(value, {
+    stopStore() {
+      stopPersisting(this)
+    },
+  })
+
+  // do nothing if not in browser
+  if (typeof window === 'undefined') return target
+  console.log(target)
+
+  const { decorators, observableOptions, localforageOptions, reactionOptions } = otherOptions || {}
+
+  const forageOptions = {
+    name: 'persist-info',
+    ...localforageOptions,
+  }
+
+  const persistStorage = forageInstanceMap.get(forageOptions.name)
+    ?? forageInstanceMap
+      .set(forageOptions.name, localforage.createInstance(forageOptions))
+      .get(forageOptions.name)
+
+  const store = observable<WithPersistFunc<typeof value>>(
+    target,
+    decorators,
+    {
+      autoBind: true,
+      ...observableOptions,
+    })
+
+  makePersistable(
+    store,
+    {
+      storage: persistStorage,
+      // one day
+      expireIn: 24 * 60 * 60 * 1000,
+      removeOnExpiration: true,
+      stringify: false,
+      debugMode: process.env.NODE_ENV === 'development',
+      ...storageOptions,
+    },
+    {
+      delay: 200,
+      ...reactionOptions,
+    },
+  )
+
+  return store
+}
+
+export default persistStore
diff --git a/gatsby-theme-oi-wiki/static/extra.css b/gatsby-theme-oi-wiki/static/extra.css
index e0040b3f..4cd0744b 100644
--- a/gatsby-theme-oi-wiki/static/extra.css
+++ b/gatsby-theme-oi-wiki/static/extra.css
@@ -78,74 +78,70 @@
 
 /* pseudocode.js end */
 /* code block start */
-pre.shiki {
-  counter-reset: shiki-line-number;
-}
-
-code span.shiki-line:before {
-  counter-increment: shiki-line-number;
-  content: counter(shiki-line-number);
-  color: #888;
-  margin-right: 1em;
-  margin-left: -8px;
-  text-align: right;
-  min-width: 2em;
-  display: inline-block;
-  pointer-events: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-pre.shiki {
-  overflow: auto;
-  font-size: 13px;
-  text-shadow: none;
-  direction: ltr;
-  text-align: left;
-  white-space: pre;
-  word-spacing: normal;
-  word-break: normal;
-  -moz-tab-size: 2;
-  -o-tab-size: 2;
-  tab-size: 2;
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
-  hyphens: none;
-}
-
-
-pre.shiki::selection,
-code.shiki::selection {
-  text-shadow: none;
-  background: #b3d4fc;
-}
-
-pre::-webkit-scrollbar {
-  width: .4rem;
-  height: .4rem;
-}
-
-pre::-webkit-scrollbar-thumb {
-  border-radius: 2px;
-  background-color: rgba(255, 255, 255, .25);
-}
-
-@media print {
-  code.shiki,
-  pre.shiki {
-    text-shadow: none;
-  }
-}
+/*pre.shiki {*/
+/*  counter-reset: shiki-line-number;*/
+/*}*/
+
+/*code span.shiki-line:before {*/
+/*  counter-increment: shiki-line-number;*/
+/*  content: counter(shiki-line-number);*/
+/*  color: #888;*/
+/*  margin-right: 1em;*/
+/*  margin-left: -8px;*/
+/*  text-align: right;*/
+/*  min-width: 2em;*/
+/*  display: inline-block;*/
+/*  pointer-events: none;*/
+/*  -webkit-user-select: none;*/
+/*  -moz-user-select: none;*/
+/*  -ms-user-select: none;*/
+/*  user-select: none;*/
+/*}*/
+
+/*pre.shiki {*/
+/*  overflow: auto;*/
+/*  font-size: 13px;*/
+/*  text-shadow: none;*/
+/*  direction: ltr;*/
+/*  text-align: left;*/
+/*  white-space: pre;*/
+/*  word-spacing: normal;*/
+/*  word-break: normal;*/
+/*  -moz-tab-size: 2;*/
+/*  -o-tab-size: 2;*/
+/*  tab-size: 2;*/
+/*  -webkit-hyphens: none;*/
+/*  -moz-hyphens: none;*/
+/*  -ms-hyphens: none;*/
+/*  hyphens: none;*/
+/*}*/
+
+
+/*pre.shiki::selection,*/
+/*code.shiki::selection {*/
+/*  text-shadow: none;*/
+/*  background: #b3d4fc;*/
+/*}*/
+
+/*pre::-webkit-scrollbar {*/
+/*  width: .4rem;*/
+/*  height: .4rem;*/
+/*}*/
+
+/*pre::-webkit-scrollbar-thumb {*/
+/*  border-radius: 2px;*/
+/*  background-color: rgba(255, 255, 255, .25);*/
+/*}*/
+
+/*@media print {*/
+/*  code.shiki,*/
+/*  pre.shiki {*/
+/*    text-shadow: none;*/
+/*  }*/
+/*}*/
 
 /* code block end */
 
-main img {
-  display: block;
-  margin: 0 auto;
-}
 
 .footnotes p {
   display: inline;
diff --git a/gatsby-theme-oi-wiki/static/script.js b/gatsby-theme-oi-wiki/static/script.js
deleted file mode 100644
index 8bcfae82..00000000
--- a/gatsby-theme-oi-wiki/static/script.js
+++ /dev/null
@@ -1,24 +0,0 @@
-export default function () {
-  'use strict'
-  window.onthemechange = function (new_settings) {
-    const fallback = localStorage.settings && JSON.parse(localStorage.settings)
-    const settings = new_settings || fallback
-    const darkOpt = settings && settings.darkMode && settings.darkMode.type ? settings.darkMode.type : 'user-preference'
-    const secondaryColorId = settings && settings.theme && settings.theme.secondary ? settings.theme.secondary : '3'
-    const monoFont = settings && settings.theme && settings.theme.fallbackMonoFont
-    const monoFontClass = monoFont ? 'fallback' : 'mono'
-    let themeClass = 'auto'
-    if (darkOpt === undefined || darkOpt === 'user-preference') {
-      themeClass = 'auto'
-    } else {
-      themeClass = darkOpt === 'always-on' ? 'dark' : 'light'
-    }
-    const docEl = document.querySelector('html')
-
-    docEl.dataset.theme = themeClass
-    docEl.dataset.secondaryColor = secondaryColorId
-    docEl.dataset.monofont = monoFontClass
-  }
-
-  window.onthemechange()
-}
diff --git a/gatsby-theme-oi-wiki/tsconfig.json b/gatsby-theme-oi-wiki/tsconfig.json
index 2b104ddb..69154f9f 100644
--- a/gatsby-theme-oi-wiki/tsconfig.json
+++ b/gatsby-theme-oi-wiki/tsconfig.json
@@ -26,6 +26,8 @@
     "experimentalDecorators": true,
     // 启用装饰器
     "emitDecoratorMetadata": false,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
     "skipLibCheck": true,
     "strictNullChecks": true
   },
@@ -35,7 +37,8 @@
     "./.cache"
   ],
   "include": [
-    "src"
+    "src",
+    "../node_modules/localforage/typings/localforage.d.ts"
   ],
   "plugins": [
     {
diff --git a/yarn.lock b/yarn.lock
index 402c1a00..b952635b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1211,7 +1211,7 @@
     core-js-pure "^3.16.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.6", "@babel/runtime@^7.14.8", "@babel/runtime@^7.15.3", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.0", "@babel/runtime@^7.14.6", "@babel/runtime@^7.14.8", "@babel/runtime@^7.15.3", "@babel/runtime@^7.15.4", "@babel/runtime@^7.3.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.15.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a"
   integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw==
@@ -1330,6 +1330,39 @@
   dependencies:
     chalk "^4.0.0"
 
+"@date-io/core@^2.11.0":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@date-io/core/-/core-2.11.0.tgz#28580cda1c8228ab2c7ed6aee673ef0495f913e6"
+  integrity sha512-DvPBnNoeuLaoSJZaxgpu54qzRhRKjSYVyQjhznTFrllKuDpm0sDFjHo6lvNLCM/cfMx2gb2PM2zY2kc9C8nmuw==
+
+"@date-io/date-fns@^2.10.6":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-2.11.0.tgz#142fbf954eda7ad66514af7a2802d78c4ea40053"
+  integrity sha512-mPQ71plBeFrArvBSHtjWMHXA89IUbZ6kuo2dsjlRC/1uNOybo91spIb+wTu03NxKTl8ut07s0jJ9svF71afpRg==
+  dependencies:
+    "@date-io/core" "^2.11.0"
+
+"@date-io/dayjs@^2.10.6":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@date-io/dayjs/-/dayjs-2.11.0.tgz#41f4b4b9629612e6012accffd848875d1aeffb74"
+  integrity sha512-w67vRK56NZJIKhJM/CrNbfnIcuMvR3ApfxzNZiCZ5w29sxgBDeKuX4M+P7A9r5HXOMGcsOcpgaoTDINNGkdpGQ==
+  dependencies:
+    "@date-io/core" "^2.11.0"
+
+"@date-io/luxon@^2.10.6":
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/@date-io/luxon/-/luxon-2.11.1.tgz#31a72f7b5e163c74e8a3b29d8f16c4c30de6ed43"
+  integrity sha512-JUXo01kdPQxLORxqdENrgdUhooKgDUggsNRSdi2BcUhASIY2KGwwWXu8ikVHHGkw+DUF4FOEKGfkQd0RHSvX6g==
+  dependencies:
+    "@date-io/core" "^2.11.0"
+
+"@date-io/moment@^2.10.6":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@date-io/moment/-/moment-2.11.0.tgz#850f8dd090d401845b39276d034dbabe20224ef5"
+  integrity sha512-QSL+83qezQ9Ty0dtFgAkk6eC0GMl/lgYfDajeVUDB3zVA2A038hzczRLBg29ifnBGhQMPABxuOafgWwhDjlarg==
+  dependencies:
+    "@date-io/core" "^2.11.0"
+
 "@emotion/babel-plugin@^11.3.0":
   version "11.3.0"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz#3a16850ba04d8d9651f07f3fb674b3436a4fb9d7"
@@ -2158,33 +2191,6 @@
   dependencies:
     unist-util-visit "^1.4.1"
 
-"@material-ui/icons@^4.9.1":
-  version "4.11.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
-  integrity sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-
-"@material-ui/lab@^4.0.0-alpha.58":
-  version "4.0.0-alpha.60"
-  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz#5ad203aed5a8569b0f1753945a21a05efa2234d2"
-  integrity sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.11.2"
-    clsx "^1.0.4"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
-
-"@material-ui/utils@^4.11.2":
-  version "4.11.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a"
-  integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
-
 "@mdx-js/util@^2.0.0-next.8":
   version "2.0.0-next.8"
   resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-2.0.0-next.8.tgz#66ecc27b78e07a3ea2eb1a8fc5a99dfa0ba96690"
@@ -2231,6 +2237,44 @@
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
+"@mui/core@5.0.0-alpha.49":
+  version "5.0.0-alpha.49"
+  resolved "https://registry.yarnpkg.com/@mui/core/-/core-5.0.0-alpha.49.tgz#e74d6ec7f83f85b55d48aa05ea6b7cefff88ce1b"
+  integrity sha512-bZ7UgH84AuKf/IT0U+knHEelDxLV0lNVFg7rKkkDfXEwUpTtAZEtZPFJjNngapSB/4MuFjaFsttex+0DGC5Z1Q==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@emotion/is-prop-valid" "^1.1.0"
+    "@mui/utils" "^5.0.1"
+    clsx "^1.1.1"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
+"@mui/icons-material@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.0.1.tgz#fb7ffeba0b3604aab4a9b91644d2fc1aabb3b4f1"
+  integrity sha512-AZehR/Uvi9VodsNPk9ae1lENKrf1evqx9suiP6VIqu7NxjZOlw/m/yA2gRAMmLEmIGr7EChfi/wcXuq6BpM9vw==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+
+"@mui/lab@^5.0.0-alpha.49":
+  version "5.0.0-alpha.49"
+  resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.49.tgz#fd26e4f76c1b28b7884c9e89bd710e7b34a99af2"
+  integrity sha512-AKTh3gAsP5GaveAoBAjEvyuuyFMYzyfUAwo7wvz9A/EiTnkc+2QXsSO7W4ykTIjNoIGBrTd9bTV/YQNK6FpPMw==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@date-io/date-fns" "^2.10.6"
+    "@date-io/dayjs" "^2.10.6"
+    "@date-io/luxon" "^2.10.6"
+    "@date-io/moment" "^2.10.6"
+    "@mui/core" "5.0.0-alpha.49"
+    "@mui/system" "^5.0.2"
+    "@mui/utils" "^5.0.1"
+    clsx "^1.1.1"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+    react-transition-group "^4.4.2"
+    rifm "^0.12.0"
+
 "@mui/material@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.0.0.tgz#e5397b7778615933cabee7918230b9e7019ff1b9"
@@ -2259,6 +2303,15 @@
     "@mui/utils" "^5.0.0"
     prop-types "^15.7.2"
 
+"@mui/private-theming@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.0.1.tgz#50a0ea6ad5a8d1d78072859c4bdaaa6b6584d986"
+  integrity sha512-R8Cf2+32cG1OXFAqTighA5Mx9R5BQ57cN1ZVaNgfgdbI87Yig2fVMdFSPrw3txcjKlnwsvFJF8AdwQMqq1tJ3Q==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@mui/utils" "^5.0.1"
+    prop-types "^15.7.2"
+
 "@mui/styled-engine@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.0.0.tgz#caa1e9c0dd434c3b0c5db32be0e17d8237a4b17d"
@@ -2268,6 +2321,15 @@
     "@emotion/cache" "^11.4.0"
     prop-types "^15.7.2"
 
+"@mui/styled-engine@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.0.1.tgz#401e3e0ff846ad1b1e7e097c8050b36d7b68343e"
+  integrity sha512-j40nCbaKr1HAZYqpX61XvZYsadYskjo3u6+pRFFaewSViAkkD1rjjbubpnh15nqVfYmijtHMZJ9/l1x1hamvfQ==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@emotion/cache" "^11.4.0"
+    prop-types "^15.7.2"
+
 "@mui/system@^5.0.0":
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.0.0.tgz#ed520742e417aa2b1ad34a7bbaa6ab04758305ef"
@@ -2282,6 +2344,20 @@
     csstype "^3.0.8"
     prop-types "^15.7.2"
 
+"@mui/system@^5.0.2":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.0.2.tgz#9999ab61801810ea01c44588fd0dcc1f64dfcedc"
+  integrity sha512-K6wMbiSEYSMeYUw7zmZ2/50JFthqtuTz4OADyKc4ic2RP8ubAf/duH/nkJ4gtsKcewU4RIub0HQHl5F77WVp4Q==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@mui/private-theming" "^5.0.1"
+    "@mui/styled-engine" "^5.0.1"
+    "@mui/types" "^7.0.0"
+    "@mui/utils" "^5.0.1"
+    clsx "^1.1.1"
+    csstype "^3.0.9"
+    prop-types "^15.7.2"
+
 "@mui/types@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.0.0.tgz#a7398502bc9c508875aafcbe28aea599b2c3d203"
@@ -2298,6 +2374,17 @@
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
+"@mui/utils@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.0.1.tgz#d4f0f41b82db6ac273920a1b5b6a4de7879271f5"
+  integrity sha512-GWO104N+o9KG5fKiTEYnAg7kONKEg3vLN+VROAU0f3it6lFGLCVPcQYex/1gJ4QAy96u6Ez8/Hmmhi1+3cX0tQ==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/prop-types" "^15.7.4"
+    "@types/react-is" "^16.7.1 || ^17.0.0"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -2886,6 +2973,18 @@
     "@typescript-eslint/types" "4.31.0"
     eslint-visitor-keys "^2.0.0"
 
+"@use-gesture/core@^10.0.0-beta.26":
+  version "10.0.0-beta.26"
+  resolved "https://registry.yarnpkg.com/@use-gesture/core/-/core-10.0.0-beta.26.tgz#275a69ed65c6463cb59872a6f0b24b66212e8bf5"
+  integrity sha512-Y+fwWlYHzGlc/c4aE3fUkQy7cE4+Tbd1CWQqAlO4czN2nGpgZksW7V98FMgCHrmMGXi+VdNSTS8WBHmw8kq3Zg==
+
+"@use-gesture/react@^10.0.0-beta.26":
+  version "10.0.0-beta.26"
+  resolved "https://registry.yarnpkg.com/@use-gesture/react/-/react-10.0.0-beta.26.tgz#9b5c3a9111d6cda62de125612fb830efcc1df571"
+  integrity sha512-TENwg1CgB+okRTBWvcMtEaKYgQvktU0ezG4sQdo/mqZXNvTzuk9g/qK4v++8UzIhj/srqRp49NPBbY0qzsgg1w==
+  dependencies:
+    "@use-gesture/core" "^10.0.0-beta.26"
+
 "@use-it/event-listener@^0.1.2":
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/@use-it/event-listener/-/event-listener-0.1.6.tgz#5776274fec72f3f25af9ead1898e7f45bc435812"
@@ -4378,7 +4477,7 @@ clone-response@1.0.2, clone-response@^1.0.2:
   dependencies:
     mimic-response "^1.0.0"
 
-clsx@^1.0.4, clsx@^1.1.1:
+clsx@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
@@ -5011,7 +5110,7 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
   integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
 
-csstype@^3.0.8:
+csstype@^3.0.8, csstype@^3.0.9:
   version "3.0.9"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.9.tgz#6410af31b26bd0520933d02cbc64fce9ce3fbf0b"
   integrity sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==
@@ -8404,6 +8503,11 @@ imagemin@^7.0.1:
     p-pipe "^3.0.0"
     replace-ext "^1.0.0"
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
+
 immer@8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.1.tgz#9c73db683e2b3975c424fb0572af5889877ae656"
@@ -9434,6 +9538,13 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  integrity sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=
+  dependencies:
+    immediate "~3.0.5"
+
 lilconfig@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.3.tgz#68f3005e921dafbd2a2afb48379986aa6d2579fd"
@@ -9535,6 +9646,13 @@ loader-utils@^1.4.0:
     emojis-list "^3.0.0"
     json5 "^1.0.1"
 
+localforage@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
+  integrity sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==
+  dependencies:
+    lie "3.1.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -10661,6 +10779,21 @@ mkdirp@^0.5.1, mkdirp@^0.5.4, mkdirp@~0.5.1:
   dependencies:
     minimist "^1.2.5"
 
+mobx-persist-store@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/mobx-persist-store/-/mobx-persist-store-1.0.3.tgz#7965576b0c3c9a05d123d3853401b5b465f77176"
+  integrity sha512-R6GWCtA77O2mbwKRn0iJqecNHhEMDnUv7P60SCFntz+qRtfutsTWcP56Xz9Q29nefgo1E4JnBaoqcWejMdkvNQ==
+
+mobx-react-lite@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/mobx-react-lite/-/mobx-react-lite-3.2.1.tgz#c549a3722f1eae51a78b12f839311614d5689c58"
+  integrity sha512-hwURgfmP2apX3HQrB55V9DN47kuN3C6KlQvI5UIfJRibXma72C/JudcNt2r9dWjAdFMrcZoz1ivvtXMCkJ2aQA==
+
+mobx@^6.3.3:
+  version "6.3.3"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.3.3.tgz#a3006c56243b1c7ea4ee671a66f963b9f43cf1af"
+  integrity sha512-JoNU50rO6d1wHwKPJqKq4rmUMbYnI9CsJmBo+Cu4exBYenFvIN77LWrZENpzW6reZPADtXMmB1DicbDSfy8Clw==
+
 moment@^2.27.0:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
@@ -12441,7 +12574,7 @@ react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.2:
+react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
@@ -13082,6 +13215,11 @@ rgba-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
   integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
+rifm@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.12.0.tgz#8d3a9dc0de9c190e0de9bdc8861a91a221dc1341"
+  integrity sha512-PqOl+Mo2lyqrKiD34FPlnQ+ksD3F+a62TQlphiZshgriyHdfjn6jGyqUZhd+s3nsMYXwXYDdjrrv8wX7QsOG3g==
+
 rimraf@^2.6.2:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
@@ -14469,10 +14607,10 @@ trough@^2.0.0:
   resolved "https://registry.yarnpkg.com/true-case-path/-/true-case-path-2.2.1.tgz#c5bf04a5bbec3fd118be4084461b3a27c4d796bf"
   integrity sha512-0z3j8R7MCjy10kc/g+qg7Ln3alJTodw9aDuVWZa3uiWqfuBMKeAeP2ocWcxoyM3D73yz3Jt/Pu4qPr4wHSdB/Q==
 
-ts-graphql-plugin@^2.1.3:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/ts-graphql-plugin/-/ts-graphql-plugin-2.1.3.tgz#a0c72ed5dafa1f1fd65d42759d5e4cdd71ae9662"
-  integrity sha512-yum0h2fWbcmac8X0YVtBITfpLkpLRx+KEQPly02VN3HUGElhtUmoJWuStm5ae2oyjZjOmjcq88VEG8D9R5OePA==
+ts-graphql-plugin@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/ts-graphql-plugin/-/ts-graphql-plugin-2.1.4.tgz#7e06abe2c2ecc24732ba60909ee0c7480e4fa4c3"
+  integrity sha512-KPT0vMO3CUiJg0Uy9UVm8xLq22E/Q6O5fWXuZjrWBXOmzpaLoCQRcS4GvIXkz1l/Fzph2CXo0KPQ3V+lqsoDqQ==
   dependencies:
     graphql-language-service-interface "^2.4.1"
     graphql-language-service-types "^1.6.1"