diff --git a/docs/config/app-configs.md b/docs/config/app-configs.md
index 54657e3f..8090b5fd 100644
--- a/docs/config/app-configs.md
+++ b/docs/config/app-configs.md
@@ -1,3 +1,7 @@
+---
+title: App Configs | Config
+---
+
# App Configs
App configs are where you can define the global settings of the site. App configs define fundamental settings that are not only limited to the theme configs such as configuration for "base directory", or the "title" of the site.
diff --git a/docs/config/frontmatter-configs.md b/docs/config/frontmatter-configs.md
index 25dd222c..93ebb6bf 100644
--- a/docs/config/frontmatter-configs.md
+++ b/docs/config/frontmatter-configs.md
@@ -1,3 +1,7 @@
+---
+title: Frontmatter Configs | Config
+---
+
# Frontmatter Configs
Frontmatter enables page based configuration. On every markdown, you’re free to add Any settings to override any global app or theme configs. Also, there are configs which you can only define in Frontmatter.
diff --git a/docs/config/introduction.md b/docs/config/introduction.md
index 8128105f..37738c86 100644
--- a/docs/config/introduction.md
+++ b/docs/config/introduction.md
@@ -1,3 +1,7 @@
+---
+title: Introduction | Config
+---
+
# Introduction
Place your configuration file at `.vitepress/config.js`. This is where all VitePress-specific files will be placed.
diff --git a/docs/config/theme-configs.md b/docs/config/theme-configs.md
index eb40afdf..6c40d755 100644
--- a/docs/config/theme-configs.md
+++ b/docs/config/theme-configs.md
@@ -1,3 +1,7 @@
+---
+title: Theme Configs | Config
+---
+
# Theme Configs
Theme configs let you customize your theme. You can define theme configs by adding `themeConfig` key to the config file.
diff --git a/docs/guide/api.md b/docs/guide/api.md
index 28eeb0c0..8fd06813 100644
--- a/docs/guide/api.md
+++ b/docs/guide/api.md
@@ -1,3 +1,8 @@
+---
+title: API Reference | Writing
+next: Theme Introduction | Theme
+---
+
# API Reference
VitePress offers several built in API to let you access app data. VitePress also comes with few built-in component that can be used globally.
diff --git a/docs/guide/asset-handling.md b/docs/guide/asset-handling.md
index dd6105a4..3828ffa7 100644
--- a/docs/guide/asset-handling.md
+++ b/docs/guide/asset-handling.md
@@ -1,3 +1,7 @@
+---
+title: Asset Handling | Writing
+---
+
# Asset Handling
All Markdown files are compiled into Vue components and processed by [Vite](https://github.com/vitejs/vite). You can, **and should**, reference any assets using relative URLs:
diff --git a/docs/guide/configuration.md b/docs/guide/configuration.md
index 077d31b6..2c1cf6e1 100644
--- a/docs/guide/configuration.md
+++ b/docs/guide/configuration.md
@@ -1,3 +1,7 @@
+---
+title: Configuration | Inroduction
+---
+
# Configuration
Without any configuration, the page is pretty minimal, and the user has no way to navigate around the site. To customize your site, let's first create a `.vitepress` directory inside your docs directory. This is where all VitePress-specific files will be placed. Your project structure is probably like this:
diff --git a/docs/guide/deploying.md b/docs/guide/deploying.md
index f67faf81..45c7b292 100644
--- a/docs/guide/deploying.md
+++ b/docs/guide/deploying.md
@@ -1,3 +1,8 @@
+---
+title: Deploying | Inroduction
+next: Markdown Extensions | Writing
+---
+
# Deploying
The following guides are based on some shared assumptions:
diff --git a/docs/guide/frontmatter.md b/docs/guide/frontmatter.md
index c3dbcd29..8472bc0a 100644
--- a/docs/guide/frontmatter.md
+++ b/docs/guide/frontmatter.md
@@ -1,3 +1,7 @@
+---
+title: Frontmatter | Writing
+---
+
# Frontmatter
Any Markdown file that contains a YAML frontmatter block will be processed by [gray-matter](https://github.com/jonschlinkert/gray-matter). The frontmatter must be at the top of the Markdown file, and must take the form of valid YAML set between triple-dashed lines. Example:
diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md
index 6bf5b20c..9132beba 100644
--- a/docs/guide/getting-started.md
+++ b/docs/guide/getting-started.md
@@ -1,3 +1,7 @@
+---
+title: Getting Started | Inroduction
+---
+
# Getting Started
This section will help you build a basic VitePress documentation site from ground up. If you already have an existing project and would like to keep documentation inside the project, start from Step 2.
diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md
index 39716fef..eb020b44 100644
--- a/docs/guide/markdown.md
+++ b/docs/guide/markdown.md
@@ -1,3 +1,8 @@
+---
+title: Markdown Extensions | Writing
+prev: Deploying | Inroduction
+---
+
# Markdown Extensions
VitePress comes with built in Markdown Extensions.
diff --git a/docs/guide/migration-from-vitepress-0.md b/docs/guide/migration-from-vitepress-0.md
index f7041dc8..8d12b16e 100644
--- a/docs/guide/migration-from-vitepress-0.md
+++ b/docs/guide/migration-from-vitepress-0.md
@@ -1,3 +1,7 @@
+---
+title: Migration from VitePress 0.x | Migrations
+---
+
# Migration from VitePress 0.x
If you're coming from VitePress 0.x version, there're several breaking changes due to new features and enhancement. Please follow this guide to see how to migrate your app over to the latest VitePress.
diff --git a/docs/guide/migration-from-vuepress.md b/docs/guide/migration-from-vuepress.md
index c18c754f..7c523813 100644
--- a/docs/guide/migration-from-vuepress.md
+++ b/docs/guide/migration-from-vuepress.md
@@ -1,3 +1,7 @@
+---
+title: Migration from VuePress | Migrations
+prev: Carbon Ads | Theme
+---
# Migration from VuePress
## Markdown
diff --git a/docs/guide/theme-carbon-ads.md b/docs/guide/theme-carbon-ads.md
index 1c0c170e..2f773f0b 100644
--- a/docs/guide/theme-carbon-ads.md
+++ b/docs/guide/theme-carbon-ads.md
@@ -1,3 +1,8 @@
+---
+title: Carbon Ads | Theme
+next: Migration from VuePress | Migrations
+---
+
# Carbon Ads
VitePress has built in native support for [Carbon Ads](https://www.carbonads.net/). By defining the Carbon Ads credentials in config, VitePress will display ads on the page.
diff --git a/docs/guide/theme-edit-link.md b/docs/guide/theme-edit-link.md
index 64e74b31..9cd99ab3 100644
--- a/docs/guide/theme-edit-link.md
+++ b/docs/guide/theme-edit-link.md
@@ -1,3 +1,7 @@
+---
+title: Edit Link | Theme
+---
+
# Edit Link
Edit Link lets you display a link to edit the page on Git management services such as GitHub, or GitLab. To enable it, add `themeConfig.editLink` options to your config.
diff --git a/docs/guide/theme-footer.md b/docs/guide/theme-footer.md
index a3e0efde..509333a8 100644
--- a/docs/guide/theme-footer.md
+++ b/docs/guide/theme-footer.md
@@ -1,3 +1,7 @@
+---
+title: Footer | Theme
+---
+
# Footer
When the [page layout](./theme-layout) is set to either `home` or `page`, VitePress will display global footer at the bottom of the page. Set `themeConfig.footer` to configure footer content.
diff --git a/docs/guide/theme-home-page.md b/docs/guide/theme-home-page.md
index 80a88008..bd277db0 100644
--- a/docs/guide/theme-home-page.md
+++ b/docs/guide/theme-home-page.md
@@ -1,3 +1,7 @@
+---
+title: Home Page | Theme
+---
+
# Home Page
VitePress default theme provides a homepage layout, which you can also see used on [the homepage of this site](../). You may use it on any of your pages by specifying `layout: home` in the [frontmatter](./frontmatter).
diff --git a/docs/guide/theme-introduction.md b/docs/guide/theme-introduction.md
index 09d56d66..977d731b 100644
--- a/docs/guide/theme-introduction.md
+++ b/docs/guide/theme-introduction.md
@@ -1,3 +1,8 @@
+---
+title: Theme Introduction | Theme
+prev: API Reference | Writing
+---
+
# Theme Introduction
VitePress comes with its default theme providing many features out of the box. Learn more about each feature on its dedicated page listed below.
diff --git a/docs/guide/theme-last-updated.md b/docs/guide/theme-last-updated.md
index db41c99d..9463d7d6 100644
--- a/docs/guide/theme-last-updated.md
+++ b/docs/guide/theme-last-updated.md
@@ -1,3 +1,7 @@
+---
+title: Last Updated | Theme
+---
+
# Last Updated
Documentation coming soon...
diff --git a/docs/guide/theme-layout.md b/docs/guide/theme-layout.md
index 33033102..7be40db5 100644
--- a/docs/guide/theme-layout.md
+++ b/docs/guide/theme-layout.md
@@ -1,4 +1,5 @@
---
+title: Layout | Theme
layout: doc
---
diff --git a/docs/guide/theme-nav.md b/docs/guide/theme-nav.md
index 92413974..33f292da 100644
--- a/docs/guide/theme-nav.md
+++ b/docs/guide/theme-nav.md
@@ -1,3 +1,7 @@
+---
+title: Nav | Theme
+---
+
# Nav
The Nav is the navigation bar displayed on top of the page. It contains the site title, global menu links, etc.
diff --git a/docs/guide/theme-prev-next-link.md b/docs/guide/theme-prev-next-link.md
index e52f9057..3a9421e1 100644
--- a/docs/guide/theme-prev-next-link.md
+++ b/docs/guide/theme-prev-next-link.md
@@ -1,3 +1,7 @@
+---
+title: Prev Next Link | Theme
+---
+
# Prev Next Link
You can customize the text of previous and next links. This is helpful if you want to show different text on previous/next links than what you have on your sidebar.
diff --git a/docs/guide/theme-search.md b/docs/guide/theme-search.md
index f33d3b35..35e387fc 100644
--- a/docs/guide/theme-search.md
+++ b/docs/guide/theme-search.md
@@ -1,3 +1,7 @@
+---
+title: Search | Theme
+---
+
# Search
Documentation coming soon...
diff --git a/docs/guide/theme-sidebar.md b/docs/guide/theme-sidebar.md
index 74cbb47b..4bd0daf6 100644
--- a/docs/guide/theme-sidebar.md
+++ b/docs/guide/theme-sidebar.md
@@ -1,3 +1,7 @@
+---
+title: Sidebar | Theme
+---
+
# Sidebar
The sidebar is the main navigation block for your documentation. You can configure the sidebar menu in `themeConfig.sidebar`.
diff --git a/docs/guide/theme-team-page.md b/docs/guide/theme-team-page.md
index f19b52d5..fe563736 100644
--- a/docs/guide/theme-team-page.md
+++ b/docs/guide/theme-team-page.md
@@ -1,3 +1,7 @@
+---
+title: Team Page | Theme
+---
+
-
# Team Page
If you would like to introduce your team, you may use Team components to construct the Team Page. There're 2 ways of using these components. One is to embbed it in doc page, and another is to create a full Team Page.
diff --git a/docs/guide/using-vue.md b/docs/guide/using-vue.md
index 998d3aa8..970fcfbf 100644
--- a/docs/guide/using-vue.md
+++ b/docs/guide/using-vue.md
@@ -1,3 +1,7 @@
+---
+title: Using Vue in Markdown | Writing
+---
+
# Using Vue in Markdown
In VitePress, each markdown file is compiled into HTML and then processed as a Vue Single-File Component. This means you can use any Vue features inside the markdown, including dynamic templating, using Vue components, or arbitrary in-page Vue component logic by adding a `