diff --git a/assets/css/atom.scss b/assets/css/atom.scss
index f875d77..b1af7e6 100644
--- a/assets/css/atom.scss
+++ b/assets/css/atom.scss
@@ -36,6 +36,10 @@
   align-items: flex-start;
 }
 
+.items-end {
+  align-items: flex-end;
+}
+
 .items-baseline {
   align-items: baseline;
 }
@@ -78,6 +82,11 @@ $texts: (xs, 0.75), (sm, 0.875), (base, 1), (lg, 1.125), (xl, 1.25),
   white-space: nowrap;
 }
 
+.list-disc {
+  list-style-type: disc;
+  padding-inline-start: 22px;
+}
+
 /* interactivity */
 .cursor-pointer {
   cursor: pointer;
diff --git a/assets/css/syntax.scss b/assets/css/syntax.scss
index e3cf5b2..05169a4 100644
--- a/assets/css/syntax.scss
+++ b/assets/css/syntax.scss
@@ -3,7 +3,7 @@
 }
 
 .chroma {
-  background-color: #292929;
+  background-color: #222222;
   margin: .5em 0;
 }
 
diff --git a/assets/js/main.js b/assets/js/main.js
index ab59668..c1e94f0 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,6 +1,8 @@
 import { setup_theme_switch } from "./theme"
-import "./style";
-import "./selectable";
+import { fix_checkbox_list_style } from "./style"
+import { setup_selectable } from './selectable'
 
 
-setup_theme_switch('theme-switch')
\ No newline at end of file
+setup_theme_switch('theme-switch')
+setup_selectable()
+fix_checkbox_list_style('.md ul')
\ No newline at end of file
diff --git a/assets/js/selectable.js b/assets/js/selectable.js
index dc2def5..a801f89 100644
--- a/assets/js/selectable.js
+++ b/assets/js/selectable.js
@@ -1,4 +1,6 @@
-const selectable = '{{ .Site.Params.selectable }}'
-if (selectable === 'false') {
-  document.documentElement.style = 'user-select:none'
+export function setup_selectable () {
+  const selectable = '{{ .Site.Params.selectable }}'
+  if (selectable === 'false') {
+    document.documentElement.style = 'user-select:none'
+  }
 }
\ No newline at end of file
diff --git a/assets/js/style.js b/assets/js/style.js
index c185aec..4f63afe 100644
--- a/assets/js/style.js
+++ b/assets/js/style.js
@@ -1,11 +1,8 @@
-// fix style of checked/unchecked list items
-document.querySelectorAll('.md ul').forEach(v => {
-  if (/<li><input .+>.+<\/li>/.test(v.innerHTML)) {
-    console.log(v);
-    v.classList.add('ul-checkbox');
-  }
-});
-
-
-// // use custom font family
-// document.querySelector('body').style.setProperty('--global-font-family', '{{ .Site.Params.globalFontFamily }}');
\ No newline at end of file
+/** @param {string} selectors */
+export function fix_checkbox_list_style(selectors) {
+  document.querySelectorAll(selectors).forEach(v => {
+    if (/<li><input .+>.+<\/li>/.test(v.innerHTML)) {
+      v.classList.add('ul-checkbox');
+    }
+  });
+}
\ No newline at end of file
diff --git a/assets/js/theme.js b/assets/js/theme.js
index 662c7df..163c55c 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -53,16 +53,14 @@ function switch_minima_theme(current, next) {
 
 /** @param {string} theme  */
 function switch_utterances_theme(theme) {
-    if (!utterances) {
-        utterances = document.querySelector('iframe.utterances-frame')
-    }
+    utterances =utterances || document.querySelector('iframe.utterances-frame')
+    if (!utterances) return
     utterances.contentWindow.postMessage({ type: 'set-theme', theme }, 'https://utteranc.es')
 }
 
 /** @param {string} theme */
 function switch_giscus_theme(theme) {
-    if (!giscus) {
-        giscus = document.querySelector('iframe.giscus-frame')
-    }
+    giscus = giscus || document.querySelector('iframe.giscus-frame')
+    if (!giscus) return
     giscus.contentWindow.postMessage({giscus: {setConfig: {theme}}}, 'https://giscus.app')
 }
diff --git a/exampleSite/content/markdown-syntax.md b/exampleSite/content/markdown-syntax.md
index 3d6992f..c16ab5d 100644
--- a/exampleSite/content/markdown-syntax.md
+++ b/exampleSite/content/markdown-syntax.md
@@ -3,8 +3,9 @@ author: "Hugo Authors"
 title: "Markdown Syntax Guide"
 date: "2021-07-18T10:52:59+08:00"
 description: "Sample article showcasing basic Markdown syntax."
-categories: ["markdown"]
-tags: ["markdown"]
+categories:
+tags:
+  - markdown
 ---
 
 This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.
@@ -100,7 +101,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
 type Registry interface {
     Register(*Service, ...RegisterOption) error
     Deregister(*Service, ...DeregisterOption) error
-    GetService(string, ...GetOption) ([]*Service, error)
+    List(string, ...ListOption) ([]*Service, error)
 }
 ```
 
diff --git a/exampleSite/content/markdown-syntax.zh-cn.md b/exampleSite/content/markdown-syntax.zh-cn.md
index 175e92a..8ca9d37 100644
--- a/exampleSite/content/markdown-syntax.zh-cn.md
+++ b/exampleSite/content/markdown-syntax.zh-cn.md
@@ -3,8 +3,9 @@ author: "Mivinci"
 title: "Markdown 语法指北"
 date: "2021-07-18T10:52:59+08:00"
 description: "一篇 Markdown 示例文章，翻译自官方示例。"
-categories: ["markdown"]
-tags: ["markdown"]
+categories:
+tags:
+  - markdown
 ---
 
 本文提供了一个可以在 Hugo 内容文件中使用的基本 Markdown 语法示例，还展示了基本 HTML 元素是否在 Hugo 主题中使用 CSS 进行修饰。
@@ -100,7 +101,7 @@ blockquote 元素表示从另一个来源引用的内容，可选地带有必须
 type Registry interface {
     Register(*Service, ...RegisterOption) error
     Deregister(*Service, ...DeregisterOption) error
-    GetService(string, ...GetOption) ([]*Service, error)
+    List(string, ...ListOption) ([]*Service, error)
 }
 ```
 
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 1720af9..1bcdfcc 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -21,7 +21,7 @@
     </div>
     {{ end }}
   </div>
-  <main>
+  <main class="mb-8">
     <p>{{ .Description | markdownify | safeHTML }}</p>
     <article class="md">
       {{ .Content }}
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
index 75ff2bf..86f0080 100644
--- a/layouts/_default/terms.html
+++ b/layouts/_default/terms.html
@@ -1,16 +1,15 @@
 {{ define "main" }}
 <main class="container mx-auto">
-  <h2 class="text-3xl font-bold">{{ .Title }}</h2>
-  <nav class="flex flex-col">
-    {{ $data := .Data }}
-    {{ range $key, $value := .Data.Terms.ByCount }}
-    <div class="mb-5 flex justify-between">
-      <a class="self-start" href="{{ $data.Plural | relLangURL }}/{{ $value.Name }}">
-        {{ $value.Name }}
-      </a>
-      <span class="">{{ $value.Count }}</span>
-    </div>
-    {{ end }}
+  <h2 class="text-3xl font-bold mb-3">{{ .Title }}</h2>
+  <ul class="list-disc">
+  {{ $data := .Data }}
+  {{ range $key, $value := $data.Terms.ByCount }}
+    <li>
+      <a class="text-lg" href="{{ $data.Plural | relLangURL }}/{{ $value.Name }}">{{ $value.Name }}</a>
+      <span class="text-sm font-semibold ml-1">{{ $value.Count }}</span>
+    </li>
+  {{ end }}
+  </ul>
   </nav>
 </main>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/item.html b/layouts/partials/item.html
index 238daed..7d63575 100644
--- a/layouts/partials/item.html
+++ b/layouts/partials/item.html
@@ -1,12 +1,12 @@
 <div>
-  <div class="flex justify-between">
+  <div class="flex justify-between items-start">
     {{ if .Page.Params.link }}
     <a class="text-lg font-bold" href="{{ .Page.Params.link }}">{{ .Title }}</a>
     {{ else }}
     <a class="text-lg font-bold" href="{{ .RelPermalink }}">{{ .Title }}</a>
     {{ end }}
     {{ if .Site.Params.displayDate }}
-    <div class="text-sm font-bold">{{ .Date | time.Format (T "timeformat") }}</div>
+    <div class="text-sm font-bold whitespace-nowrap">{{ .Date | time.Format (T "timeformat") }}</div>
     {{ end }}
   </div>
   {{ if .Site.Params.displayDescription }}
diff --git a/layouts/partials/math.html b/layouts/partials/katex.html
similarity index 100%
rename from layouts/partials/math.html
rename to layouts/partials/katex.html
diff --git a/layouts/partials/mermaid.html b/layouts/partials/mermaid.html
index fec2c08..46667a0 100644
--- a/layouts/partials/mermaid.html
+++ b/layouts/partials/mermaid.html
@@ -3,5 +3,5 @@
   crossorigin="anonymous">
 </script>
 <script>
-  mermaid.init({theme: 'dark'}, 'code.language-mermaid')
+  mermaid.init(undefined, 'code.language-mermaid')
 </script>
\ No newline at end of file
diff --git a/layouts/partials/plugin.html b/layouts/partials/plugin.html
index 846b11a..3528b2c 100644
--- a/layouts/partials/plugin.html
+++ b/layouts/partials/plugin.html
@@ -1,5 +1,9 @@
+<script>
+  window.minima_theme = localStorage.getItem('theme')
+</script>
+
 {{ if or .Params.math .Site.Params.math }}
-{{ partial "math.html" . }}
+{{ partial "katex.html" . }}
 {{ end }}
 
 {{ if or .Params.mermaid .Site.Params.mermaid }}
diff --git a/layouts/shortcodes/mermaid.html b/layouts/shortcodes/mermaid.html
deleted file mode 100644
index 13638ee..0000000
--- a/layouts/shortcodes/mermaid.html
+++ /dev/null
@@ -1 +0,0 @@
-<p class="mermaid">{{ safeHTML .Inner }}</p>
\ No newline at end of file