diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 1e8be2a..c0293a4 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -264,6 +264,13 @@
   .content ul li {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
+}
+  .content .not-prose ul, .content ol {
+  margin: 0px;
+  list-style-type: none;
+}
+  .content .not-prose ul li, .content ol li {
+  margin: 0px;
 }
   .content kbd {
   overflow-wrap: break-word;
@@ -1413,7 +1420,7 @@ nav .search-wrapper {
 }
 
 .hamburger-menu svg.open > g:nth-of-type(1) path {
-        transform: translate3d(0, 6px, 0);
+        transform: translate3d(0, 4px, 0);
       }
 
 .hamburger-menu svg.open > g:nth-of-type(2) {
@@ -1422,7 +1429,7 @@ nav .search-wrapper {
 }
 
 .hamburger-menu svg.open > g:nth-of-type(2) path {
-        transform: translate3d(0, -6px, 0);
+        transform: translate3d(0, -4px, 0);
       }
 
 /* ! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com */
@@ -1909,40 +1916,6 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
-.container {
-  width: 100%;
-}
-
-@media (min-width: 640px) {
-  .container {
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px) {
-  .container {
-    max-width: 768px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .container {
-    max-width: 1024px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .container {
-    max-width: 1280px;
-  }
-}
-
-@media (min-width: 1536px) {
-  .container {
-    max-width: 1536px;
-  }
-}
-
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1976,6 +1949,11 @@ video {
   right: 0px;
 }
 
+.inset-y-0 {
+  top: 0px;
+  bottom: 0px;
+}
+
 .bottom-0 {
   bottom: 0px;
 }
@@ -2095,10 +2073,18 @@ video {
   margin-bottom: 2rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
 .ml-4 {
   margin-left: 1rem;
 }
 
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -2155,6 +2141,10 @@ video {
   display: flex;
 }
 
+.inline-flex {
+  display: inline-flex;
+}
+
 .table {
   display: table;
 }
@@ -2163,10 +2153,6 @@ video {
   display: grid;
 }
 
-.contents {
-  display: contents;
-}
-
 .hidden {
   display: none;
 }
@@ -2195,6 +2181,10 @@ video {
   height: 100%;
 }
 
+.max-h-64 {
+  max-height: 16rem;
+}
+
 .max-h-\[calc\(100vh-4rem-env\(safe-area-inset-bottom\)\)\] {
   max-height: calc(100vh - 4rem - env(safe-area-inset-bottom));
 }
@@ -2279,10 +2269,6 @@ video {
   flex-grow: 1;
 }
 
-.transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .cursor-default {
   cursor: default;
 }
@@ -2337,6 +2323,14 @@ video {
   justify-content: center;
 }
 
+.justify-between {
+  justify-content: space-between;
+}
+
+.justify-items-start {
+  justify-items: start;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
@@ -2473,11 +2467,6 @@ video {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
-.bg-neutral-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
-}
-
 .bg-orange-50 {
   --tw-bg-opacity: 1;
   background-color: rgb(255 247 237 / var(--tw-bg-opacity));
@@ -2603,6 +2592,10 @@ video {
   padding-bottom: 1px;
 }
 
+.pl-5 {
+  padding-left: 1.25rem;
+}
+
 .pl-6 {
   padding-left: 1.5rem;
 }
@@ -2667,10 +2660,6 @@ video {
   font-size: 1rem;
 }
 
-.text-lg {
-  font-size: 1.125rem;
-}
-
 .text-sm {
   font-size: .875rem;
 }
@@ -2753,6 +2742,11 @@ video {
   color: rgb(55 65 81 / var(--tw-text-opacity));
 }
 
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -2829,6 +2823,12 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
@@ -2846,6 +2846,16 @@ video {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-black\/5 {
+  --tw-ring-color: rgb(0 0 0 / 0.05);
+}
+
 .transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2945,16 +2955,6 @@ body {
   bottom: 0.25rem;
 }
 
-.before\:mr-1::before {
-  content: var(--tw-content);
-  margin-right: 0.25rem;
-}
-
-.before\:inline-block::before {
-  content: var(--tw-content);
-  display: inline-block;
-}
-
 .before\:w-px::before {
   content: var(--tw-content);
   width: 1px;
@@ -2971,25 +2971,13 @@ body {
   opacity: 0.25;
 }
 
-.before\:transition-transform::before {
-  content: var(--tw-content);
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.before\:content-\[\"\"\]::before {
-  --tw-content: "";
-  content: var(--tw-content);
-}
-
 .before\:content-\[\'\#\'\]::before {
   --tw-content: '#';
   content: var(--tw-content);
 }
 
-.before\:content-\[\'\'\]::before {
-  --tw-content: '';
+.before\:content-\[\\\"\\\"\]::before {
+  --tw-content: \"\";
   content: var(--tw-content);
 }
 
@@ -2997,10 +2985,6 @@ body {
   margin-top: 0px;
 }
 
-.last-of-type\:mb-0:last-of-type {
-  margin-bottom: 0px;
-}
-
 .hover\:border-gray-200:hover {
   --tw-border-opacity: 1;
   border-color: rgb(229 231 235 / var(--tw-border-opacity));
@@ -3016,6 +3000,11 @@ body {
   background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 
+.hover\:bg-primary-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--primary-hue) 100% 97% / var(--tw-bg-opacity));
+}
+
 .hover\:bg-slate-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(248 250 252 / var(--tw-bg-opacity));
@@ -3041,6 +3030,10 @@ body {
   color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity));
 }
 
+.hover\:opacity-60:hover {
+  opacity: 0.6;
+}
+
 .hover\:opacity-75:hover {
   opacity: 0.75;
 }
@@ -3096,6 +3089,14 @@ body {
   display: block;
 }
 
+.data-\[state\=closed\]\:hidden[data-state=closed] {
+  display: none;
+}
+
+.data-\[state\=open\]\:hidden[data-state=open] {
+  display: none;
+}
+
 .data-\[state\=selected\]\:border-primary-500[data-state=selected] {
   --tw-border-opacity: 1;
   border-color: hsl(var(--primary-hue) 100% 50% / var(--tw-border-opacity));
@@ -3122,6 +3123,10 @@ body {
   right: 0.375rem;
 }
 
+:is([dir="ltr"] .ltr\:right-3) {
+  right: 0.75rem;
+}
+
 :is([dir="ltr"] .ltr\:-mr-4) {
   margin-right: -1rem;
 }
@@ -3143,6 +3148,14 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+:is([dir="ltr"] .ltr\:pl-12) {
+  padding-left: 3rem;
+}
+
+:is([dir="ltr"] .ltr\:pl-16) {
+  padding-left: 4rem;
+}
+
 :is([dir="ltr"] .ltr\:pl-3) {
   padding-left: 0.75rem;
 }
@@ -3151,6 +3164,10 @@ body {
   padding-left: 1rem;
 }
 
+:is([dir="ltr"] .ltr\:pl-8) {
+  padding-left: 2rem;
+}
+
 :is([dir="ltr"] .ltr\:pr-0) {
   padding-right: 0px;
 }
@@ -3163,6 +3180,10 @@ body {
   padding-right: 1rem;
 }
 
+:is([dir="ltr"] .ltr\:pr-9) {
+  padding-right: 2.25rem;
+}
+
 :is([dir="ltr"] .ltr\:text-right) {
   text-align: right;
 }
@@ -3180,6 +3201,10 @@ body {
   left: 0.375rem;
 }
 
+:is([dir="rtl"] .rtl\:left-3) {
+  left: 0.75rem;
+}
+
 :is([dir="rtl"] .rtl\:-ml-4) {
   margin-left: -1rem;
 }
@@ -3204,6 +3229,18 @@ body {
   padding-left: 1rem;
 }
 
+:is([dir="rtl"] .rtl\:pl-9) {
+  padding-left: 2.25rem;
+}
+
+:is([dir="rtl"] .rtl\:pr-12) {
+  padding-right: 3rem;
+}
+
+:is([dir="rtl"] .rtl\:pr-16) {
+  padding-right: 4rem;
+}
+
 :is([dir="rtl"] .rtl\:pr-3) {
   padding-right: 0.75rem;
 }
@@ -3212,6 +3249,10 @@ body {
   padding-right: 1rem;
 }
 
+:is([dir="rtl"] .rtl\:pr-8) {
+  padding-right: 2rem;
+}
+
 :is([dir="rtl"] .rtl\:text-left) {
   text-align: left;
 }
@@ -3221,12 +3262,6 @@ body {
   right: 0px;
 }
 
-:is([dir="rtl"] .rtl\:before\:rotate-180)::before {
-  content: var(--tw-content);
-  --tw-rotate: 180deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 @media (prefers-contrast: more) {
   .contrast-more\:border {
     border-width: 1px;
@@ -3443,6 +3478,10 @@ body {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+:is(html[class~="dark"] .dark\:ring-white\/20) {
+  --tw-ring-color: rgb(255 255 255 / 0.2);
+}
+
 :is(html[class~="dark"] .dark\:placeholder\:text-gray-400)::placeholder {
   --tw-text-opacity: 1;
   color: rgb(156 163 175 / var(--tw-text-opacity));
@@ -3454,12 +3493,6 @@ body {
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
 
-:is(html[class~="dark"] .dark\:before\:invert)::before {
-  content: var(--tw-content);
-  --tw-invert: invert(100%);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 :is(html[class~="dark"] .dark\:hover\:border-neutral-700:hover) {
   --tw-border-opacity: 1;
   border-color: rgb(64 64 64 / var(--tw-border-opacity));
@@ -3470,11 +3503,6 @@ body {
   border-color: rgb(38 38 38 / var(--tw-border-opacity));
 }
 
-:is(html[class~="dark"] .dark\:hover\:bg-neutral-800:hover) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
-}
-
 :is(html[class~="dark"] .dark\:hover\:bg-neutral-900:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(23 23 23 / var(--tw-bg-opacity));
@@ -3484,6 +3512,10 @@ body {
   background-color: hsl(var(--primary-hue) 100% 94% / 0.05);
 }
 
+:is(html[class~="dark"] .hover\:dark\:bg-primary-500\/10):hover {
+  background-color: hsl(var(--primary-hue) 100% 50% / 0.1);
+}
+
 :is(html[class~="dark"] .dark\:hover\:text-gray-100:hover) {
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity));
@@ -3514,6 +3546,11 @@ body {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+:is(html[class~="dark"] .hover\:dark\:text-primary-600):hover {
+  --tw-text-opacity: 1;
+  color: hsl(var(--primary-hue) 100% 45% / var(--tw-text-opacity));
+}
+
 :is(html[class~="dark"] .dark\:hover\:shadow-none:hover) {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
@@ -3664,21 +3701,8 @@ body {
   }
 }
 
-@media (min-width: 1024px) {
-  .lg\:mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
 @media (min-width: 1280px) {
   .xl\:block {
     display: block;
   }
 }
-
-[data-expanded]>.\[\[data-expanded\]\>\&\]\:before\:rotate-90::before {
-  content: var(--tw-content);
-  --tw-rotate: 90deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
diff --git a/exampleSite/content/docs/_index.md b/exampleSite/content/docs/_index.md
index 8afbc5e..c794768 100644
--- a/exampleSite/content/docs/_index.md
+++ b/exampleSite/content/docs/_index.md
@@ -3,7 +3,21 @@ linkTitle: "Documentation"
 title: Introduction
 ---
 
-**Hextra** is a modern, responsive, and powerful [Hugo](https://gohugo.io/) theme built with [Tailwind CSS](https://tailwindcss.com/).
-It is inspired by Next.js theme [Nextra](https://github.com/shuding/nextra).
+Welcome to the Hextra documentation!
 
-Hextra is designed for building websites for documentation, blogs, and landing pages. It is elegant and easy to use out of the box, but also highly customizable to fit your needs.
+
+## What is Hextra?
+
+**Hextra** is a modern, responsive and powerful [Hugo](https://gohugo.io/) theme built with [Tailwind CSS](https://tailwindcss.com/), inspired by Next.js theme [Nextra](https://github.com/shuding/nextra).
+It is designed for building websites for documentation, blogs, books and landing pages.
+It is elegant and easy to use out of the box, but also highly customizable to fit your needs.
+
+### Features
+
+- **Fast** - Built with Hugo and Tailwind CSS, Hextra is extremely fast.
+
+## Why Hextra?
+
+Hextra is based on [Hugo](https://gohugo.io/), a static site generator written in Go, which means you can build your website once and host it anywhere.
+
+Unlike Next.js, Hugo is **extremely fast**, which enables us to focus on iterating the content and previewing the changes in real time.
diff --git a/exampleSite/content/docs/introduction.ja.md b/exampleSite/content/docs/getting-started.ja.md
similarity index 100%
rename from exampleSite/content/docs/introduction.ja.md
rename to exampleSite/content/docs/getting-started.ja.md
diff --git a/exampleSite/content/docs/getting-started.md b/exampleSite/content/docs/getting-started.md
new file mode 100644
index 0000000..59b8f0d
--- /dev/null
+++ b/exampleSite/content/docs/getting-started.md
@@ -0,0 +1,48 @@
+---
+title: Getting Started
+weight: 1
+---
+
+## Start as New Project
+
+Before we start, make sure we have [Hugo](https://gohugo.io/) installed. We also need to have Git and Go installed if we want to use Hugo modules.
+Please refer to Hugo's [official installation guide](https://gohugo.io/installation/) for more details.
+
+{{% steps %}}
+
+### Initialize a new Hugo site
+
+```bash
+$ hugo new site my-site --format=yaml
+```
+
+### Configure Hextra theme
+
+[Hugo modules](https://gohugo.io/hugo-modules/) are the recommended way to manage Hugo themes.
+
+```shell
+# initialize hugo module
+$ cd my-site
+$ hugo mod init github.com/username/my-site
+
+# add Hextra theme
+$ hugo mod get github.com/imfing/hextra
+```
+
+Edit `config.yaml` to enable Hextra theme:
+
+```yaml
+module:
+  imports:
+    - path: github.com/imfing/hextra
+```
+
+### Run Hugo server
+
+```shell
+$ hugo server -D
+```
+
+Voila! You can see your new site at `http://localhost:1313/`.
+
+{{% /steps %}}
diff --git a/exampleSite/content/docs/guide/advanced/_index.md b/exampleSite/content/docs/guide/advanced/_index.md
deleted file mode 100644
index 92e7c70..0000000
--- a/exampleSite/content/docs/guide/advanced/_index.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: Advanced
----
-
-Advanced topics.
diff --git a/exampleSite/content/docs/introduction.md b/exampleSite/content/docs/introduction.md
deleted file mode 100644
index 4867e36..0000000
--- a/exampleSite/content/docs/introduction.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: Introduction
-weight: 1
----
-
-Hextra is a modern, responsive Hugo theme built with [Tailwind CSS](https://tailwindcss.com/).
diff --git a/i18n/en.yaml b/i18n/en.yaml
index 322124e..2c6df5e 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -1,3 +1,6 @@
 article:
   on_this_page: "On this page"
   edit_this_page: "Edit this page on GitHub →"
+
+footer:
+  copyright: "© 2023 Hextra Project."
diff --git a/taskfile.yaml b/taskfile.yaml
index 3d915fa..20fde94 100644
--- a/taskfile.yaml
+++ b/taskfile.yaml
@@ -3,7 +3,7 @@ version: "3"
 tasks:
   dev:
     cmds:
-      - hugo server --debug --enableGitInfo --source=exampleSite --themesDir=../.. --environment=theme --disableFastRender --buildDrafts --port 1313
+      - hugo server --logLevel debug --enableGitInfo --source=exampleSite --themesDir=../.. --environment=theme --disableFastRender --buildDrafts --port 1313
 
   build:
     deps: [css]
@@ -17,3 +17,11 @@ tasks:
   clean:
     cmds:
       - rm -rf public resources
+
+  vendor:
+    cmds:
+      - wget https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js -O assets/vendor/katex/katex.min.js
+      - wget https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js -O assets/vendor/katex/auto-render.min.js
+      - wget https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css -O assets/vendor/katex/katex.min.css
+      - wget https://cdn.jsdelivr.net/npm/mermaid@10.3.1/dist/mermaid.min.js -O assets/vendor/mermaid/mermaid.min.js
+      - wget https://cdn.jsdelivr.net/npm/flexsearch@0.7.31/dist/flexsearch.bundle.min.js -O assets/vendor/flexsearch/flexsearch.bundle.min.js