diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 863013472065f79ce756c4744756c7d1361af769..105d1cd46320c7d91d2f3c36385bf7dbae9cc581 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -9,18 +9,19 @@ module.exports = {
     ['link', { rel: 'icon', href: `${base}logo.png` }]
   ],
   themeConfig: {
+    github: 'vuejs/vuepress',
     // sidebar config
     sidebar: [
       {
         title: 'Guide',
         children: [
-          ['/', 'Intro'],
+          '/',
           '/getting-started',
           '/markdown',
           '/assets',
           '/using-vue',
           '/default-theme',
-          '/theming',
+          '/custom-themes',
           '/deploy'
         ]
       },
diff --git a/docs/README.md b/docs/README.md
index 0e080f7072787507d6c5f7a719a6fc725e3af182..bb707a18adb98b8b6dd32fbec85fcaa7c48a7f8c 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,3 +1,8 @@
+---
+title: Intro
+next: /getting-started
+---
+
 # VuePress
 
 > Minimalistic docs generator with Vue component based layout system
diff --git a/docs/assets.md b/docs/assets.md
index 2b2b3fc054a7191098874466c00528bb3ccbc80a..f835e490b5ef78ec268655608093e515890c7786 100644
--- a/docs/assets.md
+++ b/docs/assets.md
@@ -1,3 +1,8 @@
+---
+prev: /markdown
+next: /using-vue
+---
+
 # Asset Handling
 
 ## Relative URLs
diff --git a/docs/theming.md b/docs/custom-themes.md
similarity index 98%
rename from docs/theming.md
rename to docs/custom-themes.md
index 960686a858941c4e23397f25338b4af5975db224..8e1542e24725b45687224ac6f95f9438431b5df7 100644
--- a/docs/theming.md
+++ b/docs/custom-themes.md
@@ -1,3 +1,8 @@
+---
+prev: /default-theme
+next: /deploy
+---
+
 # Custom Themes
 
 VuePress uses Vue single file components for custom themes. To use a custom layout, create a `.vuepress/theme` directory in your docs root, and then create a `Layout.vue` file:
diff --git a/docs/default-theme.md b/docs/default-theme.md
index f36984da393f3255d2f97fc759cba2c0b0c0db6f..840ee2844e43ec2ab3cbd5c4fa33704d3537efeb 100644
--- a/docs/default-theme.md
+++ b/docs/default-theme.md
@@ -1 +1,6 @@
+---
+prev: /using-vue
+next: /custom-themes
+---
+
 # Default Theme Configuration
diff --git a/docs/deploy.md b/docs/deploy.md
index 48e33a12775baa34c33a6b32549d0e38ec1979c2..d6ee31ac7a268960b35af9cec23c863eca978de9 100644
--- a/docs/deploy.md
+++ b/docs/deploy.md
@@ -1,3 +1,8 @@
+---
+prev: /custom-themes
+next: /config
+---
+
 # Deploying
 
 ## GitHub Pages
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 54d158586207d3bd6d7e2178ce1400e73a36774b..e0e05226d0948c57b177878c2a88dbcab3f7a4de 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -1,3 +1,8 @@
+---
+prev: /
+next: /markdown
+---
+
 # Getting Started
 
 ## Quickstart
diff --git a/docs/markdown.md b/docs/markdown.md
index 22e8073b0ffc00267a69c8a0d50b861ab8683cc1..7477de115739000d9985cfb14ed151e152936602 100644
--- a/docs/markdown.md
+++ b/docs/markdown.md
@@ -1,4 +1,6 @@
 ---
+prev: /getting-started
+next: /assets
 meta:
 - name: keywords
   content: static docs generator vue
diff --git a/docs/using-vue.md b/docs/using-vue.md
index a147f4854ce4fbd2ec63acb5dcd797bf3e949dda..8c0276175b6e3939f5206813827e166980a3a82b 100644
--- a/docs/using-vue.md
+++ b/docs/using-vue.md
@@ -1,3 +1,8 @@
+---
+prev: /assets
+next: /default-theme
+---
+
 # Using Vue in Markdown
 
 ## Templating
diff --git a/lib/app/app.js b/lib/app/app.js
index 566b3e4dab96e414a47aa9a4c36168789ab34daa..dc03a7a7bbabbca5214dd9a9f8b1a7a82a6d8606 100644
--- a/lib/app/app.js
+++ b/lib/app/app.js
@@ -30,6 +30,8 @@ export function createApp () {
     base: siteData.base,
     mode: 'history',
     fallback: false,
+    linkActiveClass: '',
+    linkExactActiveClass: '',
     routes
   })
 
diff --git a/lib/default-theme/Page.vue b/lib/default-theme/Page.vue
index 93c73e8b0c1857b11bb83d26e97cbbf06d7a039c..8f0571ae07df6090c0a61b112f245c889c5ab1c9 100644
--- a/lib/default-theme/Page.vue
+++ b/lib/default-theme/Page.vue
@@ -1,5 +1,47 @@
 <template>
   <div class="page">
     <Content/>
+    <div class="content page-nav" v-if="prev || next">
+      <p>
+        <span v-if="prev" class="prev">
+          ← <router-link v-if="prev" class="prev" :to="prev.path">
+            {{ prev.title || prev.path }}
+          </router-link>
+        </span>
+        <span v-if="next" class="next">
+          <router-link v-if="next" :to="next.path">
+            {{ next.title || next.path }}
+          </router-link> →
+        </span>
+      </p>
+    </div>
   </div>
 </template>
+
+<script>
+import { resolvePage } from './util'
+
+export default {
+  computed: {
+    prev () {
+      const prev = this.$page.frontmatter.prev
+      return prev && resolvePage(this.$site.pages, prev)
+    },
+    next () {
+      const next = this.$page.frontmatter.next
+      return next && resolvePage(this.$site.pages, next)
+    }
+  }
+}
+</script>
+
+<style lang="stylus">
+@import './styles/config.stylus'
+
+.page-nav.content
+  p
+    border-top 1px solid $borderColor
+    padding-top 1rem
+  .next
+    float right
+</style>
diff --git a/lib/default-theme/SideBar.vue b/lib/default-theme/SideBar.vue
index e02d6f27ed07abcc94fb8fe343264bf5f9b6d6cb..b6a13c0be0822f09411d1cd39c47afb2b7aaaffb 100644
--- a/lib/default-theme/SideBar.vue
+++ b/lib/default-theme/SideBar.vue
@@ -15,7 +15,8 @@
 
 <script>
 import SidebarGroup from './SidebarGroup.vue'
-import SidebarLink, { isActive, normalize, ensureExt } from './SidebarLink.vue'
+import SidebarLink, { isActive } from './SidebarLink.vue'
+import { resolvePage } from './util'
 
 export default {
   components: { SidebarGroup, SidebarLink },
@@ -34,7 +35,7 @@ export default {
   },
   computed: {
     sidebarItems () {
-      return resolveSidebar(
+      return resolveSidebarItems(
         this.$route,
         this.$site
       )
@@ -66,18 +67,18 @@ function resolveOpenGroupIndex (route, items) {
   return -1
 }
 
-function resolveSidebar (route, site) {
+function resolveSidebarItems (route, site) {
   const { pages, themeConfig } = site
   const sidebarConfig = themeConfig.sidebar
   if (!sidebarConfig) {
     return pages.map(p => Object.assign({ page: 'type' }, p))
   } else {
-    const matchingConfig = resolveMatchingSidebar(route, sidebarConfig)
+    const matchingConfig = resolveMatchingSidebarConfig(route, sidebarConfig)
     return matchingConfig.map(item => resolveItem(item, pages))
   }
 }
 
-function resolveMatchingSidebar (route, sidebarConfig) {
+function resolveMatchingSidebarConfig (route, sidebarConfig) {
   if (Array.isArray(sidebarConfig)) {
     return sidebarConfig
   }
@@ -117,20 +118,6 @@ function resolveItem (item, pages, isNested) {
     }
   }
 }
-
-function resolvePage (pages, rawPath) {
-  const path = normalize(rawPath)
-  for (let i = 0; i < pages.length; i++) {
-    if (normalize(pages[i].path) === path) {
-      return Object.assign({}, pages[i], {
-        type: 'page',
-        path: ensureExt(rawPath)
-      })
-    }
-  }
-  console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`)
-  return {}
-}
 </script>
 
 <style lang="stylus">
diff --git a/lib/default-theme/SidebarLink.vue b/lib/default-theme/SidebarLink.vue
index 9968b4089fe63dc151b638f17a9e1d12b21f16cf..70d5d2ae42578df8e5120f163608369738eb2088 100644
--- a/lib/default-theme/SidebarLink.vue
+++ b/lib/default-theme/SidebarLink.vue
@@ -1,13 +1,13 @@
 <script>
+import { normalize, ensureExt } from './util'
+
 export default {
   functional: true,
   props: ['item'],
   render (h, { parent: { $route }, props: { item }}) {
     return h('router-link', {
       props: {
-        to: item.path,
-        activeClass: '',
-        exactActiveClass: ''
+        to: item.path
       },
       class: {
         'sidebar-link': true,
@@ -19,10 +19,6 @@ export default {
   }
 }
 
-const hashRE = /#.*$/
-const extRE = /\.(md|html)$/
-const slashRE = /\/$/
-
 export function isActive (route, page) {
   const routePath = normalize(route.path)
   const pagePath = normalize(page.path)
@@ -32,27 +28,13 @@ export function isActive (route, page) {
     return routePath.indexOf(pagePath) === 0
   }
 }
-
-export function normalize (path) {
-  return path
-    .replace(hashRE, '')
-    .replace(extRE, '')
-}
-
-export function ensureExt (path) {
-  if (slashRE.test(path)) {
-    return path
-  }
-  const hashMatch = path.match(hashRE)
-  const hash = hashMatch ? hashMatch[0] : ''
-  return normalize(path) + '.html' + hash
-}
 </script>
 
 <style lang="stylus">
 @import './styles/config.stylus'
 
 a.sidebar-link
+  font-weight 400
   display inline-block
   color $textColor
   border-left 0.25rem solid transparent
diff --git a/lib/default-theme/styles/theme.stylus b/lib/default-theme/styles/theme.stylus
index 729311ece4dcaf01d5900ee676a251cb06c5e17e..4e56d8ea8ba07e562eba5b32cc03d4a978755010 100644
--- a/lib/default-theme/styles/theme.stylus
+++ b/lib/default-theme/styles/theme.stylus
@@ -1,6 +1,10 @@
 @import './config.stylus'
 @import './nprogress.stylus'
 
+html, body
+  padding 0
+  margin 0
+
 body
   font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
   -webkit-font-smoothing antialiased
@@ -24,10 +28,21 @@ body
   border-right 1px solid $borderColor
   overflow-y scroll
 
-.markdown
-  max-width 760px
-  margin 2rem auto
+.content
+  max-width $contentWidth
+  margin 2rem auto 3rem
   padding 0 2rem
+  a:hover
+    text-decoration underline
+
+a
+  font-weight 500
+  color $accentColor
+  text-decoration none
+
+p a code
+  font-weight 400
+  color $accentColor
 
 blockquote
   font-size 1.25rem
@@ -39,10 +54,6 @@ blockquote
 ul, ol
   padding-left 1.2em
 
-a, p a code
-  color $accentColor
-  text-decoration none
-
 strong
   font-weight 600
 
@@ -55,15 +66,15 @@ h1, h2, h3, h4, h5, h6
     opacity: 1
 
 h1
-  font-size 2.3rem
+  font-size 2.2rem
 
 h2
-  font-size 1.8rem
+  font-size 1.65rem
   padding-bottom .3rem
   border-bottom 1px solid $borderColor
 
 h3
-  font-size 1.4rem
+  font-size 1.35rem
 
 a.header-anchor
   font-size 0.85em
@@ -72,6 +83,8 @@ a.header-anchor
   padding-right 0.23em
   margin-top 0.125em
   opacity 0
+  &:hover
+    text-decoration none
 
 code
   font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
@@ -81,15 +94,13 @@ p, ul, ol
 
 p, h1, h2, h3, h4, h5, h6
   code
+    color lighten($textColor, 20%)
     padding 0.2rem 0.5rem
     margin 0
     font-size 0.85rem
     background-color rgba(27,31,35,0.05)
     border-radius 3px
 
-p code
-  color lighten($textColor, 20%)
-
 pre, pre[class*="language-"]
   background-color $codeBgColor
   color #fff
@@ -172,7 +183,7 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
     width $mobileSidebarWidth
   .page
     padding-left $mobileSidebarWidth
-  .markdown
+  .content
     margin 1.5rem 0
     padding 0 1.5rem
 
@@ -192,6 +203,6 @@ $mobileSidebarWidth = $sidebarWidth * 0.82
   pre, pre[class*="language-"]
     margin 0 -1.5rem
     border-radius 0
-  .markdown
+  .content
     margin 1rem 0
     padding 0 1rem
diff --git a/lib/default-theme/util.js b/lib/default-theme/util.js
new file mode 100644
index 0000000000000000000000000000000000000000..95f303dfe4faeba402580fa53f7a85809417314c
--- /dev/null
+++ b/lib/default-theme/util.js
@@ -0,0 +1,32 @@
+const hashRE = /#.*$/
+const extRE = /\.(md|html)$/
+const slashRE = /\/$/
+
+export function normalize (path) {
+  return path
+    .replace(hashRE, '')
+    .replace(extRE, '')
+}
+
+export function ensureExt (path) {
+  if (slashRE.test(path)) {
+    return path
+  }
+  const hashMatch = path.match(hashRE)
+  const hash = hashMatch ? hashMatch[0] : ''
+  return normalize(path) + '.html' + hash
+}
+
+export function resolvePage (pages, rawPath) {
+  const path = normalize(rawPath)
+  for (let i = 0; i < pages.length; i++) {
+    if (normalize(pages[i].path) === path) {
+      return Object.assign({}, pages[i], {
+        type: 'page',
+        path: ensureExt(rawPath)
+      })
+    }
+  }
+  console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`)
+  return {}
+}
diff --git a/lib/webpack/markdownLoader.js b/lib/webpack/markdownLoader.js
index 870ca4c0c8e234bbc7767e97b9bdcd6c869c5d15..335646724654fd9fd77f7a2b778110d2ae3115a6 100644
--- a/lib/webpack/markdownLoader.js
+++ b/lib/webpack/markdownLoader.js
@@ -32,7 +32,7 @@ module.exports = function (src) {
   const { html, hoistedTags } = markdown.renderWithHoisting(content)
   return (
     `<template>\n` +
-      `<div class="markdown">${html}</div>\n` +
+      `<div class="markdown content">${html}</div>\n` +
     `</template>\n` +
     hoistedTags.join('\n')
   )