diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..2e1fa2d52
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+*.md
\ No newline at end of file
diff --git a/docs/components/AppFooter.vue b/docs/components/AppFooter.vue
index a658f1481..e4a9c06fc 100644
--- a/docs/components/AppFooter.vue
+++ b/docs/components/AppFooter.vue
@@ -1,5 +1,5 @@
 <template>
-  <footer class="py-6">
+  <footer class="py-6 bg-gray-50 dark:bg-gray-800 dark:bg-opacity-25">
     <div class="max-w-8xl px-4 mx-auto sm:px-6">
       <div class="flex flex-col sm:flex-row justify-between items-center">
         <a
@@ -9,8 +9,8 @@
           class="
             flex
             items-end
-            text-gray-900
-            dark:text-gray-300
+            text-gray-700
+            dark:text-gray-400
             dark:hover:text-gray-100
             hover:text-gray-600
             mb-3
diff --git a/docs/components/AsideBottom.vue b/docs/components/AsideBottom.vue
index 8689780fb..e7f603581 100644
--- a/docs/components/AsideBottom.vue
+++ b/docs/components/AsideBottom.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <h5 class="py-2 text-base font-semibold text-gray-900 transition duration-200 cursor-pointer dark:text-gray-100">
-      Resources
-    </h5>
+    <h5 class="py-2 text-base font-semibold text-gray-900 cursor-pointer dark:text-gray-100">Resources</h5>
     <ul>
       <li v-for="resource of resources" :key="resource.title">
         <a
diff --git a/docs/pages/1.get-started/1.installation.md b/docs/content/1.get-started/1.installation.md
similarity index 100%
rename from docs/pages/1.get-started/1.installation.md
rename to docs/content/1.get-started/1.installation.md
diff --git a/docs/pages/1.get-started/2.configuration.md b/docs/content/1.get-started/2.configuration.md
similarity index 100%
rename from docs/pages/1.get-started/2.configuration.md
rename to docs/content/1.get-started/2.configuration.md
diff --git a/docs/pages/2.usage/1.content.md b/docs/content/2.usage/1.content.md
similarity index 100%
rename from docs/pages/2.usage/1.content.md
rename to docs/content/2.usage/1.content.md
diff --git a/docs/pages/2.usage/2.components.md b/docs/content/2.usage/2.components.md
similarity index 97%
rename from docs/pages/2.usage/2.components.md
rename to docs/content/2.usage/2.components.md
index c0c4fa60b..82a6687d5 100644
--- a/docs/pages/2.usage/2.components.md
+++ b/docs/content/2.usage/2.components.md
@@ -170,11 +170,11 @@ Cross-reference other files within your documentation (such as example code you
 
 ::code-group
   ::code-block{label="Preview" active preview}
-    ::inject-content{query="2.usage/_example"}
+    :inject-content{query="2.usage/_example"}
   ::
 
   ```md [Code]
-  ::inject-content{query="2.usage/_example"}
+  :inject-content{query="2.usage/_example"}
   ```
 ::
 
diff --git a/docs/pages/2.usage/3.assets.md b/docs/content/2.usage/3.assets.md
similarity index 100%
rename from docs/pages/2.usage/3.assets.md
rename to docs/content/2.usage/3.assets.md
diff --git a/docs/pages/2.usage/4.template.md b/docs/content/2.usage/4.template.md
similarity index 100%
rename from docs/pages/2.usage/4.template.md
rename to docs/content/2.usage/4.template.md
diff --git a/docs/pages/2.usage/_5.admin.md b/docs/content/2.usage/_5.admin.md
similarity index 100%
rename from docs/pages/2.usage/_5.admin.md
rename to docs/content/2.usage/_5.admin.md
diff --git a/docs/pages/2.usage/_example.md b/docs/content/2.usage/_example.md
similarity index 100%
rename from docs/pages/2.usage/_example.md
rename to docs/content/2.usage/_example.md
diff --git a/docs/pages/3.more/1.example.md b/docs/content/3.more/1.example.md
similarity index 100%
rename from docs/pages/3.more/1.example.md
rename to docs/content/3.more/1.example.md
diff --git a/docs/pages/3.more/2.showcases.md b/docs/content/3.more/2.showcases.md
similarity index 100%
rename from docs/pages/3.more/2.showcases.md
rename to docs/content/3.more/2.showcases.md
diff --git a/docs/pages/3.more/3.deployment.md b/docs/content/3.more/3.deployment.md
similarity index 100%
rename from docs/pages/3.more/3.deployment.md
rename to docs/content/3.more/3.deployment.md
diff --git a/docs/pages/3.more/4.migration.md b/docs/content/3.more/4.migration.md
similarity index 100%
rename from docs/pages/3.more/4.migration.md
rename to docs/content/3.more/4.migration.md
diff --git a/docs/pages/3.more/5.extend.md b/docs/content/3.more/5.extend.md
similarity index 100%
rename from docs/pages/3.more/5.extend.md
rename to docs/content/3.more/5.extend.md
diff --git a/docs/pages/blog/0.index.md b/docs/content/blog/0.index.md
similarity index 100%
rename from docs/pages/blog/0.index.md
rename to docs/content/blog/0.index.md
diff --git a/docs/pages/blog/build-dev-to-clone-with-nuxt-new-fetch.md b/docs/content/blog/build-dev-to-clone-with-nuxt-new-fetch.md
similarity index 100%
rename from docs/pages/blog/build-dev-to-clone-with-nuxt-new-fetch.md
rename to docs/content/blog/build-dev-to-clone-with-nuxt-new-fetch.md
diff --git a/docs/pages/blog/creating-a-nuxt-module.md b/docs/content/blog/creating-a-nuxt-module.md
similarity index 100%
rename from docs/pages/blog/creating-a-nuxt-module.md
rename to docs/content/blog/creating-a-nuxt-module.md
diff --git a/docs/pages/blog/creating-blog-with-nuxt-content.md b/docs/content/blog/creating-blog-with-nuxt-content.md
similarity index 100%
rename from docs/pages/blog/creating-blog-with-nuxt-content.md
rename to docs/content/blog/creating-blog-with-nuxt-content.md
diff --git a/docs/content/index.md b/docs/content/index.md
new file mode 100644
index 000000000..cbfbd1e2d
--- /dev/null
+++ b/docs/content/index.md
@@ -0,0 +1,78 @@
+---
+template: landing
+title: Documentation Generator based on Nuxt and Windi.
+description: >-
+  Write pages in markdown, use Vue components, add style with Windi CSS and enjoy the power of Nuxt with a blazing fast developer experience.
+navigation: false
+---
+
+::block-hero
+cta:
+  - Get started
+  - /get-started/installation
+secondary:
+  - Open on GitHub →
+  - https://github.com/nuxtlabs/docus
+snippet: npx degit nuxtlabs/docus-starter#main docs
+---title
+Documentation Generator based on Nuxt and Windi.
+---description
+Write pages in markdown, use Vue components, add style with Windi CSS and enjoy the power of Nuxt with a blazing fast developer experience.
+::
+
+::card-grid{title="What's included?"}
+  ::card
+  icon: IconNuxt
+  description: Harness the full power of Nuxt and the Nuxt ecosystem.
+  iconClass: 'text-hex-00DC82' 
+  title: Nuxt Architecture.
+  ::
+
+  ::card
+  icon: IconVue
+  title: Vue Components.
+  description: Use built-in components (or your own!) inside your content.
+  ::
+
+  ::card
+  icon: IconMarkdown
+  title: Write Markdown.
+  description: Enjoy the ease and simplicity of Markdown as you write your documentation.
+  ::
+
+  ::card
+  icon: IconWindi
+  title: Windi CSS.
+  description: Windi CSS is built in for great developer experience and rapid customization.
+  ::
+
+  ::card
+  icon: IconSSG
+  title: Static Generation.
+  description: Generate your documentation as a static website and host it anywhere.
+  ::
+
+  ::card
+  icon: IconLighthouse
+  title: Lighthouse Optimised.
+  description: Start with a blazing fast site with a perfect Lighthouse score.
+  ::
+
+  ::card
+  icon: IconZap
+  title: Smart Generation.
+  description: Automatically skip a full build if you've only changed Markdown files.
+  ::
+
+  ::card
+  icon: IconPuzzle
+  title: Extensible.
+  description: Customize the whole design, or add components using slots - you can make Docus your own.
+  ::
+
+  ::card
+  icon: IconGitHub
+  title: Open Source.
+  description: Docus is released under the MIT license and made with love by the NuxtLabs team.
+  ::
+::
diff --git a/docs/pages/releases.md b/docs/content/releases.md
similarity index 100%
rename from docs/pages/releases.md
rename to docs/content/releases.md
diff --git a/docs/pages/templates/pre-launch.md b/docs/content/templates/pre-launch.md
similarity index 100%
rename from docs/pages/templates/pre-launch.md
rename to docs/content/templates/pre-launch.md
diff --git a/docs/content/templates/pricing.md b/docs/content/templates/pricing.md
new file mode 100644
index 000000000..623cf2638
--- /dev/null
+++ b/docs/content/templates/pricing.md
@@ -0,0 +1,60 @@
+---
+template: marketing
+footer: false
+---
+
+::pricing-block
+
+plans:
+  monthly:
+    base: true
+    title: Month
+    label: Monthly
+  annual:
+    title: Year
+    label: Yearly
+    preSelected: true
+    divider: 12
+
+tiers:
+  free:
+    price: 
+      monthly: 0
+      annual: 0
+    title: Free
+    description: Our Free plan description
+    features:
+      - Feature One
+      - Feature Two
+  starter:
+    preSelected: true
+    price: 
+      monthly: 10
+      annual: 100
+    title: Starter
+    description: Our Starter plan pretty long multiline description
+    features:
+      - All Free Tier features
+      - Feature Three
+      - Feature Four
+  pro:
+    price: 
+      monthly: 100
+      annual: 1000
+    title: Pro
+    description: Our Pro plan description
+    features:
+      - All Starter Tier features
+      - Feature Five
+      - Feature Six
+
+meta: 
+  currency: $
+  featuresTitle: 'Included features:'
+  buttonText: Choose plan
+  preSelectedBadge: Popular
+  checkoutText: 'Total:'
+  checkoutButtonText: Checkout
+
+::
+ 
\ No newline at end of file
diff --git a/docs/pages/index.md b/docs/pages/index.md
deleted file mode 100644
index 587ac5aa9..000000000
--- a/docs/pages/index.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-template: landing
-title: Documentation Generator based on Nuxt and Windi.
-description: >-
-  Write pages in markdown, use Vue components, add style with Windi CSS and enjoy the power of Nuxt with a blazing fast developer experience.
-navigation: false
----
-
-::block-hero
-snippet: npx degit nuxtlabs/docus-starter#main docs
-cta:
-  - Get started
-  - /get-started/installation
-secondary:
-  - Open on GitHub
-  - https://github.com/nuxtlabs/docus
-
----title
-Documentation Generator based on Nuxt and Windi.
-
----description
-Write pages in markdown, use Vue components, add style with Windi CSS and enjoy the power of Nuxt with a blazing fast developer experience.
-::
-
-
-::card-grid{title="What's included?"}
-
-  ::card
-  icon: IconNuxt
-  iconClass: text-hex-00DC82
-  title: Nuxt Architecture
-  ---
-  Harness the full power of Nuxt and the Nuxt ecosystem.
-  ::
-
-  ::card
-  icon: IconVue
-  title: Vue Components
-  ---
-  Use built-in components (or your own!) inside your content.
-  ::
-
-  ::card
-  icon: IconMarkdown
-  title: Write Markdown
-  ---
-  Enjoy the ease and simplicity of Markdown as you write your documentation.
-  ::
-
-  ::card
-  icon: IconWindi
-  title: Windi CSS
-  ---
-    Windi CSS is built in for great developer experience and rapid customization.
-  ::
-
-  ::card
-  icon: IconSSG
-  title: Static Generation
-  ---
-  Generate your documentation as a static website and host it anywhere.
-  ::
-
-  ::card
-  icon: IconLighthouse
-  title: Lighthouse Optimised
-  ---
-  Start with a blazing fast site with a perfect Lighthouse score.
-  ::
-
-  ::card
-  icon: IconZap
-  title: Smart Generation
-  ---
-  Automatically skip a full build if you've only changed Markdown files.
-  ::
-
-  ::card
-  icon: IconPuzzle
-  title: Extensible
-  ---
-  Customize the whole design, or add components using slots - you can make Docus your own.
-  ::
-
-  ::card
-  icon: IconGitHub
-  title: Open Source
-  ---
-    Docus is released under the MIT license and made with love by the NuxtLabs team.
-  ::
-::
diff --git a/src/core/module.ts b/src/core/module.ts
index c14785e87..a784590ab 100644
--- a/src/core/module.ts
+++ b/src/core/module.ts
@@ -28,7 +28,7 @@ function isUrl(string) {
 
 export default <Module>async function docusModule() {
   // Wait for nuxt options to be normalized
-  const { nuxt, addServerMiddleware, addPlugin, addModule } = this
+  const { nuxt, addServerMiddleware, addPlugin, addModule, $docus } = this
   const { options } = nuxt
   const isSSG = options.dev === false && (options.target === 'static' || options._generate || options.mode === 'spa')
 
@@ -48,10 +48,6 @@ export default <Module>async function docusModule() {
   // Inject Docus theme as ~docus
   options.alias['~docus'] = resolve(__dirname, 'runtime')
 
-  // Inject content dir in private runtime config
-  const contentDir = options.dir.pages || 'pages'
-  options.publicRuntimeConfig.contentDir = contentDir
-
   // extend parser options
   const parserOptions: Partial<ParserOptions> = { markdown: {} }
   await nuxt.callHook('docus:parserOptions', parserOptions)
@@ -93,7 +89,7 @@ export default <Module>async function docusModule() {
   const { storage, lazyIndex } = initStorage({
     drivers: [
       {
-        base: resolve(options.srcDir, options.dir.pages),
+        base: resolve(options.srcDir, $docus.settings.contentDir),
         mountPoint: 'pages'
       },
       {
@@ -188,8 +184,12 @@ export default <Module>async function docusModule() {
       options.watch.push(pagesDirPath)
     }
   })
+
   nuxt.callHook('docus:storage:ready')
 
+  // Watch Docus while DOCUS_DEV is set
+  if (process.env.DOCUS_DEV) options.watch.push(resolve(__dirname, '../'))
+
   nuxt.hook('close', () => {
     destroyHooks()
     destroyDB()
diff --git a/src/core/runtime/composables/style.ts b/src/core/runtime/composables/style.ts
index f69a92105..ff8decf8c 100644
--- a/src/core/runtime/composables/style.ts
+++ b/src/core/runtime/composables/style.ts
@@ -42,7 +42,7 @@ function useCssVariableStore(scopes = ['dark']) {
 
   const generateScope = (scope: string) => {
     const vars = Object.entries(getScope(scope)).map(generateVar).join(';')
-    return scope === 'default' ? `:root {${vars}}` : `html.${scope} {${vars}}`
+    return scope === 'default' ? `html:root {${vars}}` : `html.${scope} {${vars}}`
   }
 
   const generate = () => scopes.map(generateScope).join(' ')
diff --git a/src/core/storage.ts b/src/core/storage.ts
index 44325db5c..ec8936013 100644
--- a/src/core/storage.ts
+++ b/src/core/storage.ts
@@ -19,11 +19,6 @@ export const docusDriver = defineDriver((options: DriverOptions) => {
     // unify key format
     key = key.replace(/\//g, ':')
 
-    // ignore vue files
-    if (key.endsWith('.vue')) {
-      return null
-    }
-
     const document = await parser.parse(key, content)
 
     if (document.extension === '.md') {
diff --git a/src/defaultTheme/components/atoms/Alert.vue b/src/defaultTheme/components/atoms/Alert.vue
index 3251521ec..c96842e31 100644
--- a/src/defaultTheme/components/atoms/Alert.vue
+++ b/src/defaultTheme/components/atoms/Alert.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="p-4 mt-4 mb-4 rounded-md alert" :class="[type]">
+  <div class="p-4 mt-4 mb-4 rounded-lg alert text-sm leading-relaxed" :class="[type]">
     <div class="flex items-start">
       <div class="flex-grow alert-content">
         <Markdown unwrap="p" />
@@ -85,8 +85,11 @@ export default defineComponent({
   }
 
   >>> {
+    strong {
+      @apply font-semibold text-current;
+    }
     a {
-      @apply no-underline border-none font-semibold;
+      @apply underline border-none font-semibold text-current;
       code {
         @apply border border-transparent border-dashed;
       }
@@ -97,4 +100,12 @@ export default defineComponent({
 .alert >>> p {
   @apply m-0 !important;
 }
+
+.dark .alert {
+  >>> {
+    a {
+      @apply text-current;
+    }
+  }
+}
 </style>
diff --git a/src/defaultTheme/components/atoms/ButtonLink.vue b/src/defaultTheme/components/atoms/ButtonLink.vue
index 9644fa483..c5285ddd9 100644
--- a/src/defaultTheme/components/atoms/ButtonLink.vue
+++ b/src/defaultTheme/components/atoms/ButtonLink.vue
@@ -48,12 +48,12 @@ export default defineComponent({
 
 <style lang="postcss" scoped>
 a.button-link {
-  @apply inline-flex items-center flex-none px-3 py-2 text-sm leading-4 text-white transition-colors duration-200 border border-transparent bg-primary-500 hover:bg-primary-600 rounded focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 focus:ring-primary-600 focus:outline-none;
+  @apply inline-flex items-center flex-none rounded-md px-3 py-1.5 text-sm leading-4 text-white transition-colors duration-200 border border-transparent bg-primary-500 hover:bg-primary-600  focus:ring-2 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-900 focus:ring-primary-600 focus:outline-none;
   &.medium {
-    @apply px-4 py-2.5 text-base leading-4 rounded;
+    @apply px-4 py-2 text-base leading-4;
   }
   &.large {
-    @apply px-6 py-3 text-lg leading-6 rounded;
+    @apply px-6 py-2.5 text-lg leading-6;
   }
 }
 </style>
diff --git a/src/defaultTheme/components/atoms/Card.vue b/src/defaultTheme/components/atoms/Card.vue
index a134f23bf..72f46ccef 100644
--- a/src/defaultTheme/components/atoms/Card.vue
+++ b/src/defaultTheme/components/atoms/Card.vue
@@ -1,14 +1,18 @@
 <template>
   <div class="flex">
-    <div
-      class="relative w-full px-6 py-8 bg-white border border-gray-200 rounded dark:border-gray-700 dark:bg-gray-900"
-    >
+    <div class="relative w-full p-6 bg-gray-100 rounded-lg dark:bg-gray-800 dark:bg-opacity-50">
       <InjectComponent :component="icon" class="w-16 h-16 mb-3" :class="iconClass || ''">
         <NuxtImg v-if="isImage(icon)" :src="icon" class="inline-block w-16 h-16 mb-3" />
         <span v-else class="inline-block w-16 h-16 mb-3 text-6xl">{{ icon }}</span>
       </InjectComponent>
-      <h3 class="mb-2 text-xl">{{ title }}</h3>
-      <slot />
+      <div class="text-lg">
+        <h3 class="mb-2 font-semibold tracking-tight inline mr-1">{{ title }}</h3>
+        <div class="inline font-medium text-gray-400 dark:text-gray-500">
+          <slot name="description">
+            <p v-if="description" class="inline font-medium tracking-tight">{{ description }}</p>
+          </slot>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -22,6 +26,10 @@ export default defineComponent({
       type: String,
       required: true
     },
+    description: {
+      type: String,
+      default: ''
+    },
     icon: {
       type: String,
       default: ''
@@ -40,13 +48,3 @@ export default defineComponent({
   }
 })
 </script>
-
-<style scoped lang="postcss">
-h2,
-h3 {
-  @apply mb-2 text-xl;
-}
-p {
-  @apply font-normal;
-}
-</style>
diff --git a/src/defaultTheme/components/atoms/CodeBlock.vue b/src/defaultTheme/components/atoms/CodeBlock.vue
index 27f8d1b58..5fb7042de 100644
--- a/src/defaultTheme/components/atoms/CodeBlock.vue
+++ b/src/defaultTheme/components/atoms/CodeBlock.vue
@@ -3,7 +3,7 @@
     class="code-block"
     :class="{
       active: active,
-      'p-4 border-2 border-t-0 border-gray-200 dark:border-gray-700 rounded-b-md': preview
+      'p-4 border-2 border-t-0 border-gray-100 dark:border-gray-800 rounded-b-lg': preview
     }"
   >
     <slot />
diff --git a/src/defaultTheme/components/atoms/CodeGroup.vue b/src/defaultTheme/components/atoms/CodeGroup.vue
index 54b08ed52..7ee4ebffb 100644
--- a/src/defaultTheme/components/atoms/CodeGroup.vue
+++ b/src/defaultTheme/components/atoms/CodeGroup.vue
@@ -1,29 +1,19 @@
 <template>
   <div class="code-group" :class="[activeTabIndex == 0 && 'first-tab']">
-    <div
-      class="
-        relative
-        px-2
-        text-sm text-white
-        bg-gray-100
-        border-b-2 border-gray-200
-        rounded-t-md
-        h-12
-        dark:bg-gray-800
-        dark:border-gray-700
-      "
-    >
+    <div class="relative px-2 text-white bg-gray-100 rounded-t-lg dark:bg-gray-800">
       <button
         v-for="({ label }, i) in tabs"
         ref="tabs"
         :key="`${counter}${label}`"
-        class="px-4 py-3 font-mono font-bold h-12"
+        class="relative z-10 px-3 py-1.5 xs:py-3 my-1.5 xs:my-0 text-sm font-mono font-semibold tracking-tight"
         :class="[activeTabIndex === i ? 'active text-gray-800 dark:text-white' : 'text-gray-600 dark:text-gray-300']"
         @click="updateTabs(i)"
       >
         {{ label }}
       </button>
-      <span ref="highlight-underline" class="absolute highlight-underline bg-primary-500 dark:bg-primary-400" />
+      <span ref="highlight-underline" class="absolute z-0 highlight-underline h-full xs:py-1.5">
+        <span class="flex w-full h-full bg-gray-200 dark:bg-gray-700 rounded-md"></span>
+      </span>
     </div>
     <slot />
   </div>
@@ -93,7 +83,9 @@ export default defineComponent({
       }
       const highlightUnderline = this.$refs['highlight-underline']
       highlightUnderline.style.left = `${activeTab.offsetLeft}px`
+      highlightUnderline.style.top = `${activeTab.offsetTop}px`
       highlightUnderline.style.width = `${activeTab.clientWidth}px`
+      highlightUnderline.style.height = `${activeTab.clientHeight}px`
     },
     calculateTabs() {
       const components = this.$slots.default
@@ -147,9 +139,9 @@ button {
 }
 
 .highlight-underline {
-  bottom: -2px;
-  height: 2px;
-  transition: left 150ms, width 150ms;
+  /* bottom: -2px; */
+  /* height: 2px; */
+  transition: left 150ms, top 150ms, width 150ms, height 150ms;
 }
 
 .code-group ::v-deep {
diff --git a/src/defaultTheme/components/atoms/CopyButton.vue b/src/defaultTheme/components/atoms/CopyButton.vue
index 172ef4441..b843d820d 100644
--- a/src/defaultTheme/components/atoms/CopyButton.vue
+++ b/src/defaultTheme/components/atoms/CopyButton.vue
@@ -1,7 +1,32 @@
 <template>
-  <button ref="copy" class="copy" :class="state">
-    <span v-if="state === 'copied'">Copied</span>
-    <span v-else>Copy</span>
+  <button
+    ref="copy"
+    class="
+      copy
+      focus:outline-none
+      absolute
+      right-0
+      bottom-0
+      px-2
+      py-2
+      m-1
+      text-gray-600
+      bg-gray-100
+      text-xs
+      leading-none
+      rounded-lg
+      font-mono font-semibold
+      dark:text-gray-400
+      dark:bg-gray-800
+      hover:bg-gray-200
+      hover:dark:bg-gray-700
+    "
+    :class="{
+      'bg-gray-200 dark:bg-gray-700 opacity-100': state === 'copied'
+    }"
+  >
+    <IconCheck v-if="state === 'copied'" class="w-4 h-4" />
+    <IconCopy v-else class="w-4 h-4" />
   </button>
 </template>
 
diff --git a/src/defaultTheme/components/atoms/HeaderLogo.vue b/src/defaultTheme/components/atoms/HeaderLogo.vue
index 324441ac7..c9c5c948a 100644
--- a/src/defaultTheme/components/atoms/HeaderLogo.vue
+++ b/src/defaultTheme/components/atoms/HeaderLogo.vue
@@ -9,8 +9,8 @@
     <template v-if="theme.header.title && theme.header.logo">
       <div class="flex items-center">
         <span class="mr-4">
-          <img v-if="$colorMode.value === 'light'" :src="logo.light" class="w-auto h-8" :alt="settings.title" />
-          <img v-if="$colorMode.value === 'dark'" :src="logo.dark" class="w-auto h-8" :alt="settings.title" />
+          <img :src="logo.light" class="w-auto h-8 dark:hidden" :alt="settings.title" />
+          <img :src="logo.dark" class="w-auto h-8 light:hidden" :alt="settings.title" />
         </span>
         <span class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
           {{ settings.title }}
diff --git a/src/defaultTheme/components/atoms/InfoLabel.vue b/src/defaultTheme/components/atoms/InfoLabel.vue
new file mode 100644
index 000000000..d2c1c3462
--- /dev/null
+++ b/src/defaultTheme/components/atoms/InfoLabel.vue
@@ -0,0 +1,32 @@
+<template>
+  <span
+    class="
+      text-xs text-primary-500
+      px-2.5
+      py-1.5
+      leading-none
+      rounded
+      font-semibold
+      uppercase
+      tracking-wide
+      bg-primary-100
+      dark:bg-primary-900
+      dark:text-primary-400
+    "
+  >
+    {{ label }}
+  </span>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    label: {
+      type: String,
+      default: ''
+    }
+  }
+})
+</script>
diff --git a/src/defaultTheme/components/atoms/ProseBlockquote.vue b/src/defaultTheme/components/atoms/ProseBlockquote.vue
index 42a1ff56a..76e34a7b2 100644
--- a/src/defaultTheme/components/atoms/ProseBlockquote.vue
+++ b/src/defaultTheme/components/atoms/ProseBlockquote.vue
@@ -7,11 +7,10 @@
 <style lang="postcss" scoped>
 blockquote {
   /* TODO */
-  @apply text-lg;
+  @apply text-base;
   font-weight: 500;
-  font-style: italic;
   color: theme('colors.gray.700');
-  border-left-width: 0.25rem;
+  border-left-width: 0.2rem;
   border-left-color: theme('colors.gray.200');
   quotes: '201C' '201D' '2018' '2019';
   margin-top: 1.5em;
diff --git a/src/defaultTheme/components/atoms/ProseCode.vue b/src/defaultTheme/components/atoms/ProseCode.vue
index d42c48ca8..e26d1d19c 100644
--- a/src/defaultTheme/components/atoms/ProseCode.vue
+++ b/src/defaultTheme/components/atoms/ProseCode.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="docus-highlight">
+  <div class="docus-highlight group">
     <slot />
-    <CopyButton />
+    <CopyButton class="copy-button opacity-0 transition-all duration-300" />
   </div>
 </template>
 
 <style lang="postcss" scoped>
 pre {
   /* line-height: 1.7142857; */
-  border-radius: theme('borderRadius.md');
+  border-radius: theme('borderRadius.lg');
   padding: theme('padding.4');
   margin-top: 0px;
   margin-bottom: 0px;
@@ -30,51 +30,28 @@ pre code {
 }
 
 .dark {
-  code {
-    background-color: theme('colors.gray.800');
-    border-radius: theme('borderRadius.md');
-  }
   pre code {
     background-color: transparent;
     color: theme('colors.gray.100');
   }
 }
 
-.code-group .docus-highlight {
-  & > .filename {
-    @apply rounded-tr-none;
-  }
-}
-
 .docus-highlight {
   @apply relative my-4;
 
   /* Style filename span added by @nuxt/content */
   & > .filename {
-    @apply absolute top-0 right-0 z-0 py-1.5 px-2 bg-gray-200 dark:bg-gray-700 rounded-tr-md rounded-bl font-mono font-semibold text-xs leading-none tracking-tight text-gray-600 dark:text-gray-200;
+    @apply group-hover:opacity-0 transition-opacity duration-300 absolute top-0 right-0 z-0 m-1 py-1.5 px-2 bg-gray-100 dark:bg-gray-800 rounded-md font-mono font-medium text-xs leading-none tracking-tight text-gray-600 dark:text-gray-400;
   }
+}
 
-  /* Style copy button added in `pages/_.vue` */
-  & > .copy {
-    @apply outline-none absolute right-0 bottom-0 px-3 py-1.5 text-gray-700 bg-gray-200 text-xs leading-none rounded-tl rounded-br-md font-mono dark:text-white dark:bg-gray-700 dark:border-gray-600;
-
-    &:hover {
-      @apply bg-gray-300 border-gray-300 dark:bg-gray-600 dark:border-gray-500;
-    }
-
-    &:focus {
-      @apply bg-gray-300 border-gray-300 dark:bg-gray-600 dark:border-gray-500;
-    }
-
-    &.copied {
-      @apply bg-gray-300 border-gray-300 dark:bg-gray-600 dark:border-gray-500;
-    }
+/* TODO: group-hover doesn't work */
+.group:hover {
+  .filename {
+    @apply opacity-0;
   }
-
-  &:hover {
-    & > .copy {
-      @apply block;
-    }
+  .copy-button {
+    @apply opacity-100;
   }
 }
 </style>
diff --git a/src/defaultTheme/components/atoms/ProseH1.vue b/src/defaultTheme/components/atoms/ProseH1.vue
index 18ef9bb1f..47480217a 100644
--- a/src/defaultTheme/components/atoms/ProseH1.vue
+++ b/src/defaultTheme/components/atoms/ProseH1.vue
@@ -9,10 +9,10 @@ h1 {
   /* scroll-margin-block: var(--docs-scroll-margin-block); */
   color: theme('colors.gray.900');
   letter-spacing: theme('letterSpacing.tight');
-  margin-top: 1.5em;
+  margin-top: 1em;
   margin-bottom: 0.5em;
   line-height: theme('lineHeight.snug');
-  font-weight: theme('fontWeight.bold');
+  font-weight: theme('fontWeight.semibold');
 }
 
 h1 + * {
diff --git a/src/defaultTheme/components/atoms/ProseH2.vue b/src/defaultTheme/components/atoms/ProseH2.vue
index 9cfbc5439..69f52cfad 100644
--- a/src/defaultTheme/components/atoms/ProseH2.vue
+++ b/src/defaultTheme/components/atoms/ProseH2.vue
@@ -9,10 +9,10 @@ h2 {
   /* scroll-margin-block: var(--docs-scroll-margin-block); */
   color: theme('colors.gray.900');
   letter-spacing: theme('letterSpacing.tight');
-  margin-top: 1.5em;
+  margin-top: 1.25em;
   margin-bottom: 0.5em;
   line-height: theme('lineHeight.snug');
-  font-weight: theme('fontWeight.bold');
+  font-weight: theme('fontWeight.semibold');
 }
 
 h2 + * {
diff --git a/src/defaultTheme/components/atoms/ProseH3.vue b/src/defaultTheme/components/atoms/ProseH3.vue
index 6c016c3cd..048cbc394 100644
--- a/src/defaultTheme/components/atoms/ProseH3.vue
+++ b/src/defaultTheme/components/atoms/ProseH3.vue
@@ -9,7 +9,7 @@ h3 {
   /* scroll-margin-block: var(--docs-scroll-margin-block); */
   color: theme('colors.gray.900');
   letter-spacing: theme('letterSpacing.tight');
-  margin-top: 1.5em;
+  margin-top: 1.25em;
   margin-bottom: 0.5em;
   line-height: theme('lineHeight.snug');
   font-weight: theme('fontWeight.semibold');
diff --git a/src/defaultTheme/components/atoms/ProseTable.vue b/src/defaultTheme/components/atoms/ProseTable.vue
index 095797478..6e260bb0b 100644
--- a/src/defaultTheme/components/atoms/ProseTable.vue
+++ b/src/defaultTheme/components/atoms/ProseTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="max-w-full my-4 overflow-x-auto">
+  <div class="max-w-full my-6 overflow-x-auto">
     <table>
       <slot />
     </table>
@@ -14,7 +14,5 @@ table {
   width: 100%;
   table-layout: auto;
   text-align: left;
-  margin-top: 2em;
-  margin-bottom: 2em;
 }
 </style>
diff --git a/src/defaultTheme/components/atoms/ProseTd.vue b/src/defaultTheme/components/atoms/ProseTd.vue
index 676977aee..602de4ebe 100644
--- a/src/defaultTheme/components/atoms/ProseTd.vue
+++ b/src/defaultTheme/components/atoms/ProseTd.vue
@@ -5,6 +5,7 @@
 </template>
 
 <style lang="postcss" scoped>
+/* TODO */
 tbody td {
   vertical-align: top;
   padding-top: 0.5714286em;
diff --git a/src/defaultTheme/components/atoms/ProseTh.vue b/src/defaultTheme/components/atoms/ProseTh.vue
index 3dd7436fa..38c2b93ed 100644
--- a/src/defaultTheme/components/atoms/ProseTh.vue
+++ b/src/defaultTheme/components/atoms/ProseTh.vue
@@ -5,6 +5,7 @@
 </template>
 
 <style lang="postcss" scoped>
+/* TODO */
 thead th {
   font-weight: theme('fontWeight.semibold');
   vertical-align: bottom;
diff --git a/src/defaultTheme/components/atoms/ProseThead.vue b/src/defaultTheme/components/atoms/ProseThead.vue
index 2e635aa9f..1865c17d6 100644
--- a/src/defaultTheme/components/atoms/ProseThead.vue
+++ b/src/defaultTheme/components/atoms/ProseThead.vue
@@ -5,6 +5,7 @@
 </template>
 
 <style lang="postcss" scoped>
+/* TODO */
 thead {
   font-weight: 600;
   border-bottom-width: 1px;
@@ -14,6 +15,6 @@ thead {
 
 .dark thead {
   color: theme('colors.gray.100');
-  border-bottom-color: theme('colors.gray.600');
+  border-bottom-color: theme('colors.gray.700');
 }
 </style>
diff --git a/src/defaultTheme/components/atoms/ProseTr.vue b/src/defaultTheme/components/atoms/ProseTr.vue
index 196ff7c6e..56061e921 100644
--- a/src/defaultTheme/components/atoms/ProseTr.vue
+++ b/src/defaultTheme/components/atoms/ProseTr.vue
@@ -6,11 +6,11 @@
 
 <style lang="postcss" scoped>
 tbody tr {
-  border-bottom-color: theme('colors.gray.200');
+  border-bottom-color: theme('colors.gray.100');
   border-bottom-width: 1px;
 }
 
 .dark tbody tr {
-  border-bottom-color: theme('colors.gray.700');
+  border-bottom-color: theme('colors.gray.800');
 }
 </style>
diff --git a/src/defaultTheme/components/atoms/icons/IconCheck.vue b/src/defaultTheme/components/atoms/icons/IconCheck.vue
new file mode 100644
index 000000000..5268b5cfa
--- /dev/null
+++ b/src/defaultTheme/components/atoms/icons/IconCheck.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+  </svg>
+</template>
diff --git a/src/defaultTheme/components/atoms/icons/IconCopy.vue b/src/defaultTheme/components/atoms/icons/IconCopy.vue
new file mode 100644
index 000000000..faf6efea9
--- /dev/null
+++ b/src/defaultTheme/components/atoms/icons/IconCopy.vue
@@ -0,0 +1,17 @@
+<template>
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M19.0781 6H8.67187C7.19624 6 6 7.19624 6 8.67187V19.0781C6 20.5538 7.19624 21.75 8.67187 21.75H19.0781C20.5538 21.75 21.75 20.5538 21.75 19.0781V8.67187C21.75 7.19624 20.5538 6 19.0781 6Z"
+      stroke="currentColor"
+      stroke-width="1.49375"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M17.9766 6L18 4.875C17.998 4.17942 17.7208 3.51289 17.229 3.02103C16.7371 2.52918 16.0706 2.25198 15.375 2.25H5.25C4.45507 2.25235 3.69338 2.56917 3.13128 3.13128C2.56917 3.69338 2.25235 4.45507 2.25 5.25V15.375C2.25198 16.0706 2.52918 16.7371 3.02103 17.229C3.51289 17.7208 4.17942 17.998 4.875 18H6"
+      stroke="currentColor"
+      stroke-width="1.49375"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>
diff --git a/src/defaultTheme/components/molecules/AsideNavigationItem.vue b/src/defaultTheme/components/molecules/AsideNavigationItem.vue
index 683303cef..bcbd20ec3 100644
--- a/src/defaultTheme/components/molecules/AsideNavigationItem.vue
+++ b/src/defaultTheme/components/molecules/AsideNavigationItem.vue
@@ -2,54 +2,47 @@
   <li :class="{ active: isActive }">
     <h5
       v-if="title"
-      class="py-2 text-base font-semibold text-gray-900 transition duration-200 cursor-pointer dark:text-gray-100"
+      class="py-2 text-base font-semibold text-gray-900 cursor-pointer dark:text-gray-100"
       :class="[isActive ? '' : 'hover:text-gray-600 dark:hover:text-gray-400']"
       @click="collapse"
     >
       {{ title }}
     </h5>
-    <ul v-if="!isCollapse || isActive" class="mb-2">
+    <ul v-if="!isCollapse || isActive" class="mb-2 ml-2">
       <li v-for="doc of docs" :key="doc.to">
         <NuxtLink
           :to="$contentLocalePath(doc.to)"
-          class="
-            relative
-            inline-flex
-            items-center
-            justify-between
-            pl-3
-            py-1
-            transition
-            duration-200
-            border-l border-gray-100
-            dark:border-gray-800
-            hover:text-primary
-          "
+          class="block w-full"
           :class="[
             $docus.isLinkActive(doc.to)
-              ? 'text-primary dark:text-primary-400 hover:text-primary border-primary-500 dark:border-primary-500'
-              : 'text-gray-700 dark:text-gray-400'
+              ? 'text-primary-500 dark:text-primary-400'
+              : 'text-gray-500 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400'
           ]"
         >
-          <InjectComponent
-            v-if="doc.icon"
-            :component="doc.icon"
-            class="inline-flex mr-2 w-5 h-5 justify-center items-center text-1.2rem"
+          <span
+            class="relative inline-flex items-center justify-between px-2 py-1 rounded-md"
+            :class="[$docus.isLinkActive(doc.to) ? 'bg-primary-50 dark:bg-primary-900' : '']"
           >
-            {{ doc.icon }}
-          </InjectComponent>
+            <InjectComponent
+              v-if="doc.icon"
+              :component="doc.icon"
+              class="inline-flex mr-2 w-5 h-5 justify-center items-center text-1.2rem"
+            >
+              {{ doc.icon }}
+            </InjectComponent>
 
-          <span>
-            {{ doc.navigation.title }}
-          </span>
+            <span>
+              {{ doc.navigation.title }}
+            </span>
 
-          <ClientOnly>
-            <span v-if="doc.draft" class="w-2 h-2 ml-2 bg-yellow-500 rounded-full opacity-75" />
-            <span
-              v-else-if="isDocumentNew(doc)"
-              class="w-2 h-2 ml-2 rounded-full opacity-75 animate-pulse bg-primary-500"
-            />
-          </ClientOnly>
+            <ClientOnly>
+              <span v-if="doc.draft" class="w-2 h-2 ml-2 bg-yellow-500 rounded-full opacity-75" />
+              <span
+                v-else-if="isDocumentNew(doc)"
+                class="w-2 h-2 ml-2 rounded-full opacity-75 animate-pulse bg-primary-500"
+              />
+            </ClientOnly>
+          </span>
         </NuxtLink>
       </li>
     </ul>
diff --git a/src/defaultTheme/components/atoms/CardGrid.vue b/src/defaultTheme/components/molecules/CardGrid.vue
similarity index 85%
rename from src/defaultTheme/components/atoms/CardGrid.vue
rename to src/defaultTheme/components/molecules/CardGrid.vue
index 5108cf5fd..baacf9f86 100644
--- a/src/defaultTheme/components/atoms/CardGrid.vue
+++ b/src/defaultTheme/components/molecules/CardGrid.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="py-12 lg:py-24 bg-gray-50 dark:bg-gray-800">
+  <section class="py-12 lg:py-24 bg-gray-50 dark:bg-gray-800 dark:bg-opacity-25">
     <div class="d-container-content">
       <h2 class="mb-8 text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl dark:text-gray-100">
         {{ title }}
@@ -12,7 +12,7 @@
           text-left text-gray-900
           dark:text-gray-100
           sm:grid-cols-2
-          xl:grid-cols-3
+          lg:grid-cols-3
           2xl:gap-8
         "
       >
diff --git a/src/defaultTheme/components/organisms/AppAside.vue b/src/defaultTheme/components/organisms/AppAside.vue
index 68b195e6d..775b7f7f1 100644
--- a/src/defaultTheme/components/organisms/AppAside.vue
+++ b/src/defaultTheme/components/organisms/AppAside.vue
@@ -28,7 +28,7 @@
 
       <!-- mobile aside -->
       <Transition name="slide-from-left-to-left">
-        <AsideNavigation v-if="$menu.visible.value" />
+        <AsideNavigation v-show="$menu.visible.value" />
       </Transition>
     </div>
   </aside>
@@ -46,11 +46,11 @@
 
 .slide-from-left-to-left-enter-active,
 .slide-from-left-to-left-leave-active {
-  transition: transform 200ms, opacity 200ms linear;
+  transition: transform 200ms ease-out, opacity 200ms linear;
 }
 .slide-from-left-to-left-enter,
 .slide-from-left-to-left-leave-to {
   opacity: 0;
-  transform: translateX(-100%);
+  transform: translate3d(-50px, 0, 0);
 }
 </style>
diff --git a/src/defaultTheme/components/organisms/AppPage.vue b/src/defaultTheme/components/organisms/AppPage.vue
index 3d42d7758..a1bcf5f18 100644
--- a/src/defaultTheme/components/organisms/AppPage.vue
+++ b/src/defaultTheme/components/organisms/AppPage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col w-full pt-0 xl:flex-row xl:pt-10">
     <article
-      class="flex-auto order-last min-w-0 px-4 mt-4 xl:order-first sm:px-6 xl:mt-0"
+      class="flex-auto order-last min-w-0 px-4 sm:px-6 mt-4 xl:order-first sm:px-6 xl:mt-0"
       :class="prose ? 'prose dark:prose-dark' : ''"
     >
       <slot />
diff --git a/src/defaultTheme/components/organisms/BlockHero.vue b/src/defaultTheme/components/organisms/BlockHero.vue
index 4b221396a..8e5e860aa 100644
--- a/src/defaultTheme/components/organisms/BlockHero.vue
+++ b/src/defaultTheme/components/organisms/BlockHero.vue
@@ -6,6 +6,7 @@
           class="
             mb-4
             text-4xl
+            xs:text-5xl
             font-semibold
             sm:leading-none
             tracking-tighter
@@ -22,10 +23,12 @@
         <p
           class="
             mb-8
-            text-base text-center text-gray-700
+            text-lg text-center text-gray-700
+            font-medium
+            tracking-tight
             lg:text-left
             sm:text-xl
-            xl:text-2xl
+            xl:text-xl
             leading-base
             sm:mb-12
             dark:text-gray-300
@@ -47,11 +50,11 @@
                 py-px
                 mt-px
                 font-medium
-                text-gray-800
-                border-b-2 border-transparent
-                dark:text-gray-100
-                hover:border-gray-800
-                dark:hover:border-gray-100
+                text-primary-500
+                border-b-1 border-transparent
+                dark:text-primary-400
+                hover:border-primary-500
+                dark:hover:border-primary-400
               "
             >
               {{ secondary[0] }}
@@ -59,8 +62,8 @@
           </InjectComponent>
         </div>
       </div>
-      <div v-if="snippet" class="w-full m-auto lg:w-1/3 sm:w-580px">
-        <div class="md:pl-2">
+      <div v-if="snippet" class="w-full mx-auto lg:w-1/3 sm:w-580px">
+        <div class="md:pl-2 md:mx">
           <Terminal :snippet="snippet" />
         </div>
       </div>
diff --git a/src/defaultTheme/components/organisms/PageBottom.vue b/src/defaultTheme/components/organisms/PageBottom.vue
index bc9d0af15..b778f9607 100644
--- a/src/defaultTheme/components/organisms/PageBottom.vue
+++ b/src/defaultTheme/components/organisms/PageBottom.vue
@@ -1,18 +1,13 @@
 <template>
-  <div v-if="link" class="flex flex-col justify-between mt-8 mb-4 sm:flex-row">
-    <a
-      :href="link"
-      target="_blank"
-      rel="noopener"
-      class="flex items-center mb-2 text-sm sm:mb-0 font-base hover:underline dark:text-gray-400"
-    >
+  <div v-if="link" class="flex flex-col justify-between text-gray-500 dark:text-gray-500 mt-8 mb-4 sm:flex-row">
+    <a :href="link" target="_blank" rel="noopener" class="flex items-center mb-2 text-sm sm:mb-0 hover:underline">
       <IconEdit class="w-3 h-3 mr-1" />
       <span>
         {{ $t('article.github') }}
       </span>
     </a>
 
-    <span class="flex items-center text-sm text-gray-500 font-base dark:text-gray-400">
+    <span class="flex items-center text-sm">
       {{ $t('article.updatedAt') }} {{ $d(Date.parse(page.updatedAt), 'long') }}
     </span>
   </div>
@@ -29,19 +24,18 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { $docus, $config } = useContext()
+    const { $docus } = useContext()
 
-    const settings = computed(() => $docus.settings)
+    const { value: settings } = computed(() => $docus.settings)
 
     const link = computed(() => {
       if (!settings.value.github) return
 
       return [
-        $docus.repoUrl,
+        $docus.repoUrl.value,
         'edit',
         settings.value.github.branch,
-        settings.value.github.dir,
-        $config.contentDir,
+        settings.value.github.dir || '',
         `${props.page.path}${props.page.extension}`.replace(/^\//g, '')
       ]
         .filter(Boolean)
diff --git a/src/defaultTheme/components/organisms/PageContent.vue b/src/defaultTheme/components/organisms/PageContent.vue
index 0e2799a5e..cd9a99601 100644
--- a/src/defaultTheme/components/organisms/PageContent.vue
+++ b/src/defaultTheme/components/organisms/PageContent.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <section class="mb-6" :class="{ 'border-b border-gray-100 dark:border-gray-800 pb-6': page.description }">
+    <section
+      class="mb-4 mt-4 xl:mt-0"
+      :class="{ 'border-b border-gray-100 dark:border-gray-800 dark:border-opacity-50 pb-4': page.description }"
+    >
       <div class="flex items-center justify-between">
         <InjectComponent
           v-if="page.icon"
@@ -9,7 +12,9 @@
         >
           <span class="text-3rem">{{ page.icon }}</span>
         </InjectComponent>
-        <h1 class="flex-1 text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100">{{ page.title }}</h1>
+        <h1 class="flex-1 text-4xl font-semibold tracking-tight text-gray-900 dark:text-gray-100">
+          {{ page.title }}
+        </h1>
         <span
           v-if="page.draft"
           class="
@@ -32,7 +37,9 @@
         >
         <Badge v-if="page.badge" class="font-medium">{{ page.badge }}</Badge>
       </div>
-      <p v-if="page.description" class="mt-4 text-lg text-gray-600 dark:text-gray-300">{{ page.description }}</p>
+      <p v-if="page.description" class="mt-4 text-lg font-medium text-gray-500 dark:text-gray-400">
+        {{ page.description }}
+      </p>
     </section>
     <NuxtContent :document="page" class="docus-content" />
     <PageBottom :page="page" />
diff --git a/src/defaultTheme/components/organisms/PagePrevNext.vue b/src/defaultTheme/components/organisms/PagePrevNext.vue
index ea218177c..07930e468 100644
--- a/src/defaultTheme/components/organisms/PagePrevNext.vue
+++ b/src/defaultTheme/components/organisms/PagePrevNext.vue
@@ -1,35 +1,33 @@
 <template>
-  <div v-if="prev || next" class="flex mb-4 flex-col justify-between font-medium leading-7 xs:space-x-2 xs:flex-row">
-    <div class="flex justify-start w-full xs:w-1/2">
+  <div v-if="prev || next" class="flex mb-8 flex-col justify-between font-medium leading-7 xs:space-x-2 xs:flex-row">
+    <div class="flex justify-start items-center w-full xs:w-1/2">
       <NuxtLink
         v-if="prev"
         :to="$contentLocalePath(prev.to)"
         class="
           inline-flex
           items-center
-          justify-end
+          justify-start
           w-full
           px-4
-          py-4
+          py-3
           truncate
           border border-gray-100
-          rounded
+          rounded-xl
           group
-          min-w-1/2
           xs:w-auto
-          xs:justify-end
           dark:text-gray-400
-          dark:border-gray-800
+          dark:border-gray-800 dark:border-opacity-50
           dark:hover:text-primary-400
           hover:text-primary
-          hover:border-primary-400
+          hover:border-primary-200
           dark:hover:border-gray-700
         "
       >
         <span class="relative flex flex-col items-end truncate">
-          <span v-if="prev.category" class="mb-1 text-xs leading-tight text-gray-400 group-hover:text-primary-400">{{
-            prev.category
-          }}</span>
+          <span v-if="prev.category" class="mb-1 text-xs leading-tight text-gray-400 group-hover:text-primary-400">
+            {{ prev.category }}
+          </span>
           <span class="flex items-center w-full leading-tight">
             <IconArrowLeft class="flex-shrink-0 w-4 h-4 mr-2 text-primary" />
             <span class="truncate text-primary">{{ prev.title }}</span>
@@ -45,30 +43,29 @@
         class="
           inline-flex
           items-center
-          justify-start
+          justify-end
           w-full
           px-4
-          py-4
+          py-3
           mb-2
           truncate
           border border-gray-100
-          rounded
+          rounded-xl
           group
           xs:mb-0
           xs:w-auto
-          min-w-1/2
-          xs:justify-start
           dark:text-gray-400
           dark:border-gray-800
           hover:text-primary
-          hover:border-primary
+          hover:border-primary-200
           dark:hover:border-gray-700
+          dark:border-opacity-50
         "
       >
         <span class="relative flex flex-col items-start truncate">
-          <span v-if="next.category" class="mb-1 text-xs leading-tight text-gray-400 group-hover:text-primary-400">{{
-            next.category
-          }}</span>
+          <span v-if="next.category" class="mb-1 text-xs leading-tight text-gray-400 group-hover:text-primary-400">
+            {{ next.category }}
+          </span>
           <span class="flex items-center w-full leading-tight">
             <span class="truncate text-primary">{{ next.title }}</span>
             <IconArrowRight class="flex-shrink-0 w-4 h-4 ml-2 text-primary" />
diff --git a/src/defaultTheme/components/organisms/PageToc.vue b/src/defaultTheme/components/organisms/PageToc.vue
index 63e925438..58d98b2b1 100644
--- a/src/defaultTheme/components/organisms/PageToc.vue
+++ b/src/defaultTheme/components/organisms/PageToc.vue
@@ -3,6 +3,7 @@
     v-if="toc.length"
     class="
       sticky
+      z-10
       left-0
       flex-none
       w-full
@@ -10,7 +11,7 @@
       mr-8
       text-sm
       bg-white
-      border-b border-gray-100
+      border-b border-gray-200 border-opacity-50
       xl:relative
       xl:border-0
       dark:border-gray-800
@@ -20,14 +21,15 @@
       xl:bg-transparent
       lg:left-60
       xl:left-0
+      pl-4
       sm:pl-6
-      xl:pl-8
       xl:w-64
       top-header
       xl:block
       xl:top-0
     "
   >
+    <!-- mobile ToC title + button -->
     <button
       class="
         relative
@@ -47,7 +49,7 @@
     >
       <span class="mr-2">{{ title || $t('toc.title') }}</span>
       <IconChevronRight
-        class="w-4 h-4 text-gray-400 transition-transform duration-100 transform"
+        class="w-4 h-4 text-gray-500 transition-transform duration-100 transform"
         :class="[showMobileToc ? 'rotate-90' : 'rotate-0']"
       />
     </button>
@@ -59,18 +61,18 @@
       <PageTocTop />
 
       <h5 class="items-center hidden mb-2 xl:flex">
-        <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ title || $t('toc.title') }}</span>
+        <span class="text-base font-semibold text-gray-900 dark:text-gray-100">{{ title || $t('toc.title') }}</span>
       </h5>
 
-      <ul class="font-medium">
+      <ul class="font-medium ml-4">
         <li v-for="link of toc" :key="link.id" @click="showMobileToc = false">
           <a
             :href="`#${link.id}`"
             class="block py-1 transition-colors duration-100 transform"
             :class="{
-              'text-gray-600 dark:text-gray-300 hover:text-primary-400 dark:hover:text-primary-400':
+              'text-gray-900 dark:text-gray-300 hover:text-primary-400 dark:hover:text-primary-400':
                 activeHeadings.includes(link.id) || isActiveParent(link),
-              'text-gray-400 dark:text-gray-500 hover:text-primary-500 dark:hover:text-primary-400':
+              'text-gray-500 dark:text-gray-500 hover:text-primary-500 dark:hover:text-primary-400':
                 !activeHeadings.includes(link.id) && !isActiveParent(link)
             }"
             @click.prevent="scrollToHeading(link.id, '--docs-scroll-margin-block')"
@@ -83,9 +85,9 @@
               <a
                 :href="`#${childLink.id}`"
                 :class="{
-                  'text-gray-600 dark:text-gray-300 hover:text-primary-400 dark:hover:text-primary-400':
+                  'text-gray-900 dark:text-gray-300 hover:text-primary-400 dark:hover:text-primary-400':
                     activeHeadings.includes(childLink.id),
-                  'text-gray-400 dark:text-gray-500 hover:text-primary-500 dark:hover:text-primary-400':
+                  'text-gray-500 dark:text-gray-500 hover:text-primary-500 dark:hover:text-primary-400':
                     !activeHeadings.includes(childLink.id)
                 }"
                 class="block py-1 pl-3 transition-colors duration-100 transform"
@@ -123,11 +125,13 @@ export default defineComponent({
     const { activeHeadings, visibleHeadings, updateHeadings } = useScrollspy()
 
     onMounted(() =>
-      updateHeadings([
-        ...document.querySelectorAll('.docus-content h1'),
-        ...document.querySelectorAll('.docus-content h2'),
-        ...document.querySelectorAll('.docus-content h3')
-      ])
+      setTimeout(() => {
+        updateHeadings([
+          ...document.querySelectorAll('.docus-content h1'),
+          ...document.querySelectorAll('.docus-content h2'),
+          ...document.querySelectorAll('.docus-content h3')
+        ])
+      }, 200)
     )
 
     const isActiveParent = link => {
diff --git a/src/defaultTheme/components/organisms/PreLaunchHero.vue b/src/defaultTheme/components/organisms/PreLaunchHero.vue
index 7794ad1a9..e13d470d8 100644
--- a/src/defaultTheme/components/organisms/PreLaunchHero.vue
+++ b/src/defaultTheme/components/organisms/PreLaunchHero.vue
@@ -2,18 +2,35 @@
   <section class="flex flex-col md:flex-row d-container-content py-12 md:py-24">
     <div class="w-full md:w-1/2 flex flex-col justify-center mb-8 md:mb-0">
       <div class="flex flex-col items-center md:items-start mb-2">
-        <span
-          class="mx-2 text-xs mb-4 text-primary-500 px-2.5 py-1.5 leading-none rounded font-semibold uppercase tracking-wide bg-primary-100 dark:bg-primary-900 dark:text-primary-400"
-        >
-          🚀 Coming Soon
-        </span>
+        <InfoLabel label="🚀 Coming Soon" class="mx-2 mb-4" />
         <h2
-          class="mb-2 text-5xl font-semibold sm:leading-none tracking-tighter text-center text-gray-900 md:text-left dark:text-gray-100 sm:text-6xl lg:text-7xl sm:mb-4"
+          class="
+            mb-2
+            text-5xl
+            font-semibold
+            sm:leading-none
+            tracking-tighter
+            text-center text-gray-900
+            md:text-left
+            dark:text-gray-100
+            sm:text-6xl
+            lg:text-7xl
+            sm:mb-4
+          "
         >
           {{ title }}
         </h2>
         <p
-          class="mb-2 text-base text-center text-gray-700 md:text-left sm:text-xl xl:text-2xl leading-base sm:mb-4 dark:text-gray-300"
+          class="
+            mb-2
+            text-base text-center text-gray-700
+            md:text-left
+            sm:text-xl
+            xl:text-2xl
+            leading-base
+            sm:mb-4
+            dark:text-gray-300
+          "
         >
           {{ description }}
         </p>
@@ -25,15 +42,53 @@
             {{ cta.description }}
           </p>
           <div
-            class="flex flex-col md:flex-row border border-gray-300 placeholder-gray-900 dark:border-gray-700 rounded-md p-1 w-full mb-2"
+            class="
+              flex flex-col
+              md:flex-row
+              border border-gray-300
+              placeholder-gray-900
+              dark:border-gray-700
+              rounded-md
+              p-1
+              w-full
+              mb-2
+            "
           >
             <input
               type="text"
-              :placeholder="cta.placeholder"
-              class="flex-1 py-3 px-3 focus:outline-none bg-transparent dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-600"
+              :placeholder="ctaPlaceholder"
+              class="
+                flex-1
+                py-3
+                px-3
+                focus:outline-none
+                bg-transparent
+                dark:text-gray-100
+                placeholder-gray-400
+                dark:placeholder-gray-600
+              "
             />
             <button
-              class="inline-block font-semibold text-center items-center flex-none px-6 py-3 text-lg leading-6 rounded-md text-white transition-colors duration-200 border border-transparent border-l-0 bg-primary-500 hover:bg-primary-600 focus:outline-none"
+              class="
+                inline-block
+                font-semibold
+                text-center
+                items-center
+                flex-none
+                px-6
+                py-3
+                text-lg
+                leading-6
+                rounded-md
+                text-white
+                transition-colors
+                duration-200
+                border border-transparent border-l-0
+                bg-primary-500
+                hover:bg-primary-600
+                focus:outline-none
+                select-none
+              "
             >
               {{ cta.label }}
             </button>
diff --git a/src/defaultTheme/components/organisms/PricingBlock.vue b/src/defaultTheme/components/organisms/PricingBlock.vue
new file mode 100644
index 000000000..9e371194f
--- /dev/null
+++ b/src/defaultTheme/components/organisms/PricingBlock.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="px-2 my-12 md:my-24">
+    <div class="flex items-center justify-center my-2 md:my-8">
+      <div class="bg-gray-100 dark:bg-gray-800 p-1 rounded-lg">
+        <button
+          v-for="(plan, planName) in plans"
+          :key="planName"
+          class="
+            inline-block
+            font-medium
+            text-center
+            items-center
+            flex-none
+            px-2
+            py-1
+            text-sm
+            rounded-md
+            border border-transparent border-l-0
+            focus:outline-none
+            select-none
+          "
+          :class="[
+            selectedPlan === planName
+              ? 'bg-white dark:bg-gray-600 shadow-sm text-gray-700 dark:text-gray-300'
+              : 'text-gray-500 dark:text-gray-400'
+          ]"
+          @click="selectedPlan = planName"
+        >
+          {{ plan.label }}
+        </button>
+      </div>
+    </div>
+
+    <PricingGrid
+      :tiers="tiers"
+      :plans="plans"
+      :meta="meta"
+      :selected-plan="selectedPlan"
+      :selected-tier="selectedTier"
+      @selectTier="selectedTier = $event"
+    />
+
+    <div class="flex flex-col items-center">
+      <div class="flex flex-col items-center mb-4">
+        <div class="text-gray-500 mb-1">{{ meta.checkoutText }}</div>
+        <div class="flex items-baseline">
+          <div class="flex font-bold text-4xl tracking-tighter mr-1">
+            <span class="">{{ meta.currency }}</span>
+            <span class="">{{ tiers[selectedTier].price[selectedPlan] }}</span>
+          </div>
+          <div class="text-gray-600 dark:text-gray-500">/ {{ plans[selectedPlan].title }}</div>
+        </div>
+      </div>
+      <button
+        class="
+          inline-block
+          font-semibold
+          text-center
+          items-center
+          flex-none
+          px-6
+          py-3
+          text-lg
+          leading-6
+          rounded-md
+          border border-transparent border-l-0
+          focus:outline-none
+          select-none
+          bg-primary-500
+          hover:bg-primary-600
+          text-white
+        "
+      >
+        {{ meta.checkoutButtonText }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    plans: {
+      type: Object,
+      default: () => {}
+    },
+    tiers: {
+      type: Object,
+      default: () => {}
+    },
+    meta: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  setup(props) {
+    let selectedPlan = null
+    let selectedTier = null
+
+    Object.keys(props.plans).forEach(plan => {
+      if (props.plans[plan] && props.plans[plan].preSelected) selectedPlan = plan
+    })
+    Object.keys(props.tiers).forEach(tier => {
+      if (props.tiers[tier] && props.tiers[tier].preSelected) selectedTier = tier
+    })
+
+    return { selectedPlan, selectedTier }
+  }
+})
+</script>
diff --git a/src/defaultTheme/components/organisms/PricingGrid.vue b/src/defaultTheme/components/organisms/PricingGrid.vue
new file mode 100644
index 000000000..b0c7a8b67
--- /dev/null
+++ b/src/defaultTheme/components/organisms/PricingGrid.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="flex flex-col md:flex-row justify-center items-center md:items-stretch flex-wrap my-2 md:my-8">
+    <div v-for="(tier, tierName) in tiers" :key="tierName" class="w-full md:w-1/3 p-2 max-w-md">
+      <div
+        class="border rounded-lg flex flex-col p-4 h-full relative"
+        :class="[
+          selectedTier === tierName
+            ? 'bg-primary-500 border-primary-500 text-white'
+            : 'border-gray-200 dark:border-gray-700'
+        ]"
+      >
+        <InfoLabel
+          v-if="tier.preSelected"
+          :label="meta.preSelectedBadge"
+          class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+        />
+
+        <div class="flex justify-center text-2xl font-semibold my-2 text-center">
+          {{ tier.title }}
+        </div>
+        <div
+          class="flex justify-center text-center mb-8"
+          :class="[selectedTier === tierName ? 'text-primary-200' : 'text-gray-500']"
+        >
+          {{ tier.description }}
+        </div>
+
+        <div class="flex justify-center mb-8">
+          <div class="font-medium mr-1" :class="[selectedTier === tierName ? 'text-primary-300' : 'text-gray-400']">
+            {{ meta.currency }}
+          </div>
+          <div class="font-bold text-5xl leading-none tracking-tighter mr-1">
+            {{ plans[selectedPlan] && plans[selectedPlan].divider ? getBasePricing(tier) : tier.price[selectedPlan] }}
+          </div>
+          <div
+            class="self-end lowercase font-medium"
+            :class="[selectedTier === tierName ? 'text-primary-300' : 'text-gray-400']"
+          >
+            / {{ plans[basePlan].title }}
+          </div>
+        </div>
+
+        <div class="mb-8">
+          <div class="font-medium mb-2">{{ meta.featuresTitle }}</div>
+          <ul>
+            <li
+              v-for="feature in tier.features"
+              :key="feature"
+              class="flex items-center py-0.5"
+              :class="[selectedTier === tierName ? 'text-primary-200' : 'text-gray-500 dark:text-gray-400']"
+            >
+              <IconCheck class="w-4 h-4 mr-2" />
+              <span>{{ feature }}</span>
+            </li>
+          </ul>
+        </div>
+        <div class="flex items-end flex-1">
+          <button
+            class="
+              inline-block
+              w-full
+              font-semibold
+              text-center
+              items-center
+              flex-none
+              px-6
+              py-3
+              text-lg
+              leading-6
+              rounded-md
+              border border-transparent border-l-0
+              focus:outline-none
+              select-none
+            "
+            :class="[
+              selectedTier === tierName
+                ? 'bg-primary-50 hover:bg-primary-100 text-primary-500'
+                : 'bg-primary-500 hover:bg-primary-600 text-white'
+            ]"
+            @click="$emit('selectTier', tierName)"
+          >
+            {{ meta.buttonText }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    tiers: {
+      type: Object,
+      default: () => {}
+    },
+    meta: {
+      type: Object,
+      default: () => {}
+    },
+    plans: {
+      type: Object,
+      default: () => {}
+    },
+    selectedTier: {
+      type: String,
+      default: ''
+    },
+    selectedPlan: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props) {
+    let basePlan = null
+
+    function getBasePricing(tier) {
+      const price = tier.price[props.selectedPlan] / props.plans[props.selectedPlan].divider
+      return price > 0 ? price.toFixed(2) : 0
+    }
+
+    Object.keys(props.plans).forEach(plan => {
+      if (props.plans[plan] && props.plans[plan].base) basePlan = plan
+    })
+
+    return { getBasePricing, basePlan }
+  }
+})
+</script>
diff --git a/src/defaultTheme/components/templates/Blog.vue b/src/defaultTheme/components/templates/Blog.vue
index bdba1bb44..66d6b481b 100644
--- a/src/defaultTheme/components/templates/Blog.vue
+++ b/src/defaultTheme/components/templates/Blog.vue
@@ -1,83 +1,63 @@
 <template>
   <AppContainer fluid>
     <div>
-      <div class="max-w-2xl mx-auto py-24">
+      <div class="max-w-2xl mx-auto py-16 sm:py-24 sm:px-4">
         <div>
-          <h1 class="px-4 sm:px-0 font-bold text-4xl sm:w-2/3 ml-auto mb-12">Blog</h1>
+          <h1
+            class="
+              px-4
+              sm:px-0
+              ml-auto
+              mb-12
+              text-4xl
+              sm:text-6xl
+              font-semibold
+              tracking-tight
+              text-gray-900
+              dark:text-gray-100
+            "
+          >
+            Blog
+          </h1>
         </div>
 
         <article v-for="post in posts" :key="post.slug" class="mb-16 flex flex-col items-end">
-          <div class="flex flex-col sm:flex-row mb-4 w-full">
-            <div class="flex sm:flex-col items-center sm:items-end justify-between sm:w-1/3 px-4 sm:pr-4 mb-4 sm:mb-0">
-              <div class="sm:flex-1">
-                <div
-                  class="sticky top-header text-right text-sm text-gray-400 dark:text-gray-500 font-medium py-2 -my-2"
-                >
-                  {{ formatDateByLocale($i18n.locale, post.date) }}
-                </div>
-              </div>
+          <div class="flex flex-col mb-4 w-full">
+            <!-- date & author -->
+            <div class="px-4 sm:px-0 flex items-center sm:items-end justify-between mb-4">
+              <time :datetime="post.date" class="font-medium mr-2 text-sm text-gray-400 dark:text-gray-500">
+                {{ formatDateByLocale($i18n.locale, post.date) }}
+              </time>
 
-              <!-- only show author on mobile layout -->
-              <div class="flex sm:hidden">
-                <span
+              <div class="flex">
+                <a
                   v-for="(author, index) in post.authors"
                   :key="index"
-                  class="flex items-center justify-end -ml-2 rounded-full border border-gray-300 dark:border-gray-500"
+                  :href="author.link"
+                  target="_blank"
+                  rel="noopener noindex nofollow"
+                  class="flex items-center justify-end -ml-2 rounded-full border border-gray-300 dark:border-gray-700"
                 >
                   <NuxtImg
-                    class="inline-block h-6 w-6 rounded-full"
-                    height="24"
-                    width="24"
+                    class="inline-block h-8 w-8 rounded-full"
+                    height="32"
+                    width="32"
                     :src="author.avatarUrl"
                     alt
                   />
-                </span>
+                </a>
               </div>
             </div>
 
-            <NuxtLink
-              class="sm:w-2/3 hover:opacity-75 transition-opacity duration-100"
-              :to="$contentLocalePath(post.to)"
-            >
+            <NuxtLink class="w-full hover:opacity-75 transition-opacity duration-100" :to="$contentLocalePath(post.to)">
               <div class="aspect-w-16 aspect-h-9 bg-gray-100 dark:bg-gray-800">
                 <NuxtImg :src="post.imgUrl" width="864" height="378" alt="" />
               </div>
             </NuxtLink>
           </div>
 
-          <div class="flex flex-col sm:flex-row w-full">
-            <div
-              class="
-                hidden
-                sm:flex sm:flex-col
-                items-center
-                sm:items-end
-                justify-between
-                sm:w-1/3
-                px-4
-                sm:pr-4
-                mb-4
-                sm:mb-0
-              "
-            >
-              <!-- only show sticky author on desktop layout -->
-              <div class="sticky top-header flex items-center py-2 -my-1.5">
-                <span
-                  v-for="(author, index) in post.authors"
-                  :key="index"
-                  class="flex items-center justify-end -ml-2 rounded-full border border-gray-300 dark:border-gray-600"
-                >
-                  <NuxtImg
-                    class="inline-block h-6 w-6 rounded-full"
-                    height="24"
-                    width="24"
-                    :src="author.avatarUrl"
-                    alt
-                  />
-                </span>
-              </div>
-            </div>
-            <div class="sm:w-2/3 px-4 sm:px-0">
+          <div class="flex flex-col w-full">
+            <div class="px-4 sm:px-0">
               <NuxtLink
                 class="hover:text-gray-500 hover:dark:text-gray-400 transition-color duration-100"
                 :to="$contentLocalePath(post.to)"
diff --git a/src/defaultTheme/components/templates/BlogPost.vue b/src/defaultTheme/components/templates/BlogPost.vue
index 810768e39..67f3b797c 100644
--- a/src/defaultTheme/components/templates/BlogPost.vue
+++ b/src/defaultTheme/components/templates/BlogPost.vue
@@ -1,62 +1,82 @@
 <template>
   <AppContainer fluid>
     <div>
-      <div class="max-w-2xl mx-auto py-24 relative">
-        <NuxtLink
-          :to="$contentLocalePath('/blog')"
-          class="
-            absolute
-            top-0
-            left-0
-            px-4
-            mt-12
-            leading-none
-            text-gray-400
-            dark:text-gray-600
-            hover:text-gray-500
-            hover:dark:text-gray-400
-            font-medium
-            transition-color
-            duration-100
-          "
-        >
-          <span class="">← Back</span>
-        </NuxtLink>
-        <div class="mb-6 px-4">
-          <h1 class="text-4xl font-bold mb-6">{{ page.title }}</h1>
-          <p class="mb-4 text-gray-500 dark:text-gray-400 font-medium">
-            {{ page.description }}
-          </p>
+      <div class="py-16 sm:py-24 relative">
+        <div class="relative max-w-2xl mx-auto">
+          <NuxtLink :to="$contentLocalePath('/blog')" class="absolute top-0 left-0 px-4 -mt-12 sm:-mt-16">
+            <span
+              class="
+                text-sm
+                sm:text-base
+                leading-none
+                text-gray-900
+                dark:text-gray-100
+                hover:text-gray-500
+                hover:dark:text-gray-400
+                font-medium
+              "
+              >← Back</span
+            >
+          </NuxtLink>
+          <div class="mb-6 px-4">
+            <h1 class="flex-1 text-3xl sm:text-4xl font-semibold tracking-tight text-gray-900 dark:text-gray-100">
+              {{ page.title }}
+            </h1>
+            <p class="my-4 text-base font-medium text-gray-500 dark:text-gray-400">
+              {{ page.description }}
+            </p>
 
-          <div class="flex sm:flex-row items-center">
-            <div v-if="page.date" class="font-medium mr-2 text-sm text-gray-400 dark:text-gray-500">
-              {{ formatDateByLocale($i18n.locale, page.date) }}
-            </div>
-            <div v-else class="font-medium mr-2 text-sm text-yellow-600 dark:text-yellow-500">
-              ⚠️ Please add
-              <ProseCodeInline>date: {{ today }}</ProseCodeInline>
-              in the page front-matter`
-            </div>
-            <div v-if="page.authors && page.authors.length" class="text-sm text-gray-400 dark:text-gray-700">|</div>
-            <div class="flex ml-4">
-              <span
-                v-for="(author, index) in page.authors"
-                :key="index"
-                class="flex items-center justify-end -ml-2 rounded-full border border-gray-300 dark:border-gray-500"
+            <div class="flex sm:flex-row items-center">
+              <time
+                v-if="page.date"
+                :datetime="page.date"
+                class="font-medium mr-2 text-sm text-gray-400 dark:text-gray-500"
               >
-                <NuxtImg class="inline-block h-6 w-6 rounded-full" height="24" width="24" :src="author.avatarUrl" alt />
-              </span>
+                {{ formatDateByLocale($i18n.locale, page.date) }}
+              </time>
+
+              <div v-else class="font-medium mr-2 text-sm text-yellow-600 dark:text-yellow-500">
+                ⚠️ Please add
+                <ProseCodeInline>date: {{ today }}</ProseCodeInline>
+                in the page front-matter`
+              </div>
+              <div v-if="page.authors && page.authors.length" class="text-sm text-gray-400 dark:text-gray-700">|</div>
+              <div class="flex ml-4 sm:ml-2">
+                <a
+                  v-for="(author, index) in page.authors"
+                  :key="index"
+                  :href="author.link"
+                  target="_blank"
+                  rel="noopener noindex nofollow"
+                  class="flex items-center justify-end -ml-2 sm:ml-0 sm:mr-2"
+                >
+                  <NuxtImg
+                    class="rounded-full border border-gray-300 dark:border-gray-700 inline-block h-8 w-8 sm:mr-1"
+                    height="32"
+                    width="32"
+                    :src="author.avatarUrl"
+                    :alt="author.name"
+                    :title="author.name"
+                  />
+                  <span class="hidden sm:inline-block font-medium text-sm text-gray-800 dark:text-gray-300">
+                    {{ author.name }}
+                  </span>
+                </a>
+              </div>
             </div>
           </div>
         </div>
 
-        <div class="md:-mx-18 lg:-mx-24 aspect-w-16 aspect-h-9 bg-gray-100 dark:bg-gray-800 mb-8">
-          <NuxtImg :src="imgUrl" width="864" height="378" alt="" class="object-cover" />
+        <div class="max-w-4xl mx-auto">
+          <div class="aspect-w-16 aspect-h-9 bg-gray-100 dark:bg-gray-800 mb-8">
+            <NuxtImg :src="imgUrl" width="864" height="378" alt="" class="object-cover" />
+          </div>
         </div>
 
-        <BlogpostToc :toc="page.toc.links" :title="page.toc.title" class="mb-8" />
-
-        <NuxtContent :document="page" class="px-4 docus-content" />
+        <div class="max-w-2xl mx-auto">
+          <BlogpostToc :toc="page.toc.links" :title="page.toc.title" class="mb-8" />
+          <NuxtContent :document="page" class="px-4 docus-content" />
+        </div>
       </div>
     </div>
   </AppContainer>
diff --git a/src/defaultTheme/components/templates/Docs.vue b/src/defaultTheme/components/templates/Docs.vue
index 1be9ec904..c644e45fb 100644
--- a/src/defaultTheme/components/templates/Docs.vue
+++ b/src/defaultTheme/components/templates/Docs.vue
@@ -3,7 +3,7 @@
     <AppPage>
       <PageContent :page="page" />
 
-      <hr class="mt-10 mb-4 border-gray-100 dark:border-gray-800" />
+      <hr class="mt-10 mb-8 border-gray-100 dark:border-gray-800 dark:border-opacity-50" />
 
       <PagePrevNext :prev="prev" :next="next" />
 
diff --git a/src/defaultTheme/components/templates/Marketing.vue b/src/defaultTheme/components/templates/Marketing.vue
new file mode 100644
index 000000000..c89a5620f
--- /dev/null
+++ b/src/defaultTheme/components/templates/Marketing.vue
@@ -0,0 +1,18 @@
+<template>
+  <AppContainer fluid :footer="page.footer">
+    <NuxtContent :document="page" />
+  </AppContainer>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    page: {
+      type: Object,
+      required: true
+    }
+  }
+})
+</script>
diff --git a/src/defaultTheme/components/templates/Releases.vue b/src/defaultTheme/components/templates/Releases.vue
index a98565f4c..19e875c48 100644
--- a/src/defaultTheme/components/templates/Releases.vue
+++ b/src/defaultTheme/components/templates/Releases.vue
@@ -1,22 +1,22 @@
 <template>
   <AppContainer aside>
     <AppPage>
-      <div class="mb-10">
-        <h1
-          class="flex items-center justify-between text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-100"
-        >
+      <div class="">
+        <h1 class="flex-1 text-4xl font-semibold tracking-tight text-gray-900 dark:text-gray-100">
           <span class="flex-1">Releases</span>
         </h1>
       </div>
       <div class="prose max-w-none dark:prose-dark">
         <div v-for="release of releases" :key="release.name">
-          <h2 :id="release.name" class="flex items-center justify-between">
-            <a :href="`#${release.name}`">
-              {{ release.name }}
-            </a>
-            <span class="text-base font-normal text-gray-500">{{ formatDate($i18n.local, release) }}</span>
-          </h2>
-          <NuxtContent :document="release" />
+          <div class="flex items-baseline justify-between">
+            <ProseH2 :id="release.name">
+              <a :href="`#${release.name}`">
+                {{ release.name }}
+              </a>
+            </ProseH2>
+            <span class="text-sm font-normal text-gray-500">{{ formatDate($i18n.local, release) }}</span>
+          </div>
+          <NuxtContent :document="release" class="docus-content" />
         </div>
       </div>
       <hr class="mt-10 mb-4 border-gray-200 dark:border-gray-800" />
@@ -28,7 +28,8 @@
 </template>
 
 <script>
-import { defineComponent, ref, useContext, useFetch } from '@nuxtjs/composition-api'
+import { defineComponent, ref, useContext, useFetch, onMounted } from '@nuxtjs/composition-api'
+import { scrollToHeading } from '../../utils'
 
 export default defineComponent({
   props: {
@@ -53,6 +54,33 @@ export default defineComponent({
       }))
     })
 
+    onMounted(() => {
+      if (window.location.hash) {
+        const hash = window.location.hash.replace('#', '')
+
+        // do not remove setTimeout (wrong scroll pos)
+        setTimeout(() => {
+          scrollToHeading(hash, '--docs-scroll-margin-block')
+        }, 300)
+      }
+
+      // do not remove setTimeout (no headers)
+      setTimeout(() => {
+        const headings = [
+          ...document.querySelectorAll('.prose h1'),
+          ...document.querySelectorAll('.prose h2'),
+          ...document.querySelectorAll('.prose h3')
+        ]
+        headings.forEach(heading => {
+          heading.addEventListener('click', e => {
+            e.preventDefault()
+            const hash = e.target.href.split('#').pop()
+            scrollToHeading(hash, '--docs-scroll-margin-block')
+          })
+        })
+      }, 500)
+    })
+
     const formatDate = (locale, release) => {
       const currentLocale = locale || 'en'
 
diff --git a/src/defaultTheme/css/main.css b/src/defaultTheme/css/main.css
index 6a163cd88..08cbc40c5 100644
--- a/src/defaultTheme/css/main.css
+++ b/src/defaultTheme/css/main.css
@@ -18,5 +18,5 @@
 }
 
 body {
-  @apply antialiased tracking-semitight text-gray-700 bg-white dark:text-gray-50 dark:bg-gray-900;
+  @apply antialiased tracking-semitight text-gray-900 bg-white dark:text-gray-50 dark:bg-gray-900;
 }
diff --git a/src/defaultTheme/module.ts b/src/defaultTheme/module.ts
index 1cffdba60..57aa6f5ff 100644
--- a/src/defaultTheme/module.ts
+++ b/src/defaultTheme/module.ts
@@ -116,7 +116,9 @@ export default <Module>function themeSetupModule() {
       subDirs.forEach((path: string) => dirs.push({ path, global: true }))
     } else {
       // Watch existence of root `components` directory
-      nuxt.options.watch.push(componentsDirPath)
+      options.watch.push(componentsDirPath)
     }
   })
+
+  options.watch.push(r('./settings.ts'))
 }
diff --git a/src/defaultTheme/settings.ts b/src/defaultTheme/settings.ts
index bcd27fca3..11553d241 100644
--- a/src/defaultTheme/settings.ts
+++ b/src/defaultTheme/settings.ts
@@ -45,14 +45,14 @@ const defaultThemeSettings = {
     'light-img': 'dark:hidden',
     'dark-img': 'light:hidden',
     // Container
-    'max-w-container': 'max-w-8xl',
+    'max-w-container': 'max-w-7xl',
     'px-container': 'px-4 sm:px-6',
     'd-container': 'max-w-container mx-auto',
     'd-container-content': 'd-container px-container',
     // Header
     'blur-header': 'blur-12',
     'bg-header': 'bg-white bg-opacity-80 dark:bg-gray-900 dark:bg-opacity-80',
-    'border-header': 'border-b border-gray-100 dark:border-gray-800',
+    'border-header': 'border-b border-gray-200 dark:border-gray-800 border-opacity-50',
     'd-header': 'sticky w-full top-0 z-50 bg-header border-header blur-header h-header'
   }
 }
diff --git a/src/defaultTheme/utils/dom.ts b/src/defaultTheme/utils/dom.ts
index 174ac9f18..121218ae4 100644
--- a/src/defaultTheme/utils/dom.ts
+++ b/src/defaultTheme/utils/dom.ts
@@ -15,7 +15,8 @@ export function scrollToHeading(id: string, scrollMarginCssVar: string) {
 
   // do not remove setTimeout (does not work in Safari)
   setTimeout(() => {
-    const offset = (document.querySelector(`#${id}`) as any).offsetTop - convertPropToPixels(scrollMarginCssVar)
+    const escapedId = id.replace(/\./g, '\\.')
+    const offset = (document.querySelector(`#${escapedId}`) as any).offsetTop - convertPropToPixels(scrollMarginCssVar)
     window.scrollTo(0, offset)
   })
 }
diff --git a/src/defaultTheme/windi.config.ts b/src/defaultTheme/windi.config.ts
index 4aa661b32..3864216d5 100644
--- a/src/defaultTheme/windi.config.ts
+++ b/src/defaultTheme/windi.config.ts
@@ -32,6 +32,9 @@ export default defineConfig({
       }
     },
     extend: {
+      fontSize: {
+        lg: ['1.125rem', '1.5rem'] // NOT WORKING
+      },
       fontFamily: {
         sans: 'Inter, ' + defaultTheme.fontFamily.sans
       },
diff --git a/src/github/github.ts b/src/github/github.ts
index af274aed5..8e91927f9 100644
--- a/src/github/github.ts
+++ b/src/github/github.ts
@@ -1,6 +1,7 @@
 import { $fetch, FetchOptions } from 'ohmyfetch/node'
 import { GithubRelease, GithubReleaseOptions } from '../types/github'
 import { useMarkdownParser } from '../core/parser'
+import { normalizeReleaseName } from './utils'
 
 interface GithubRawRelease {
   draft: boolean
@@ -75,7 +76,7 @@ export async function fetchGitHubReleases({ apiUrl, repo, token }: GithubRelease
     .filter((r: any) => !r.draft)
     .map(release => {
       return {
-        name: (release.name || release.tag_name).replace('Release ', ''),
+        name: normalizeReleaseName(release.name || release.tag_name),
         date: release.published_at,
         body: release.body
       }
diff --git a/src/github/utils.ts b/src/github/utils.ts
new file mode 100644
index 000000000..d8159e3cd
--- /dev/null
+++ b/src/github/utils.ts
@@ -0,0 +1,10 @@
+export function normalizeReleaseName(name: string) {
+  // remove "Release " prefix from release name
+  name = name.replace('Release ', '')
+
+  // make sure release name starts with an alphabetical character
+  if (!name.match(/^[a-zA-Z]/)) {
+    name = `v${name}`
+  }
+  return name
+}
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index b3de37006..afe08a716 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -38,15 +38,14 @@ const config = {
 }
 
 export default <Module>function docusI18n() {
-  const { requireModule, addPlugin, nuxt } = this
+  const { requireModule, addPlugin, nuxt, $docus } = this
   const { options } = nuxt
 
   // Update i18n langDir to relative from `~` (https://github.com/nuxt-community/i18n-module/blob/4bfa890ff15b43bc8c2d06ef9225451da711dde6/src/templates/utils.js#L31)
   config.langDir = join(relative(options.srcDir, r('languages')), '/')
 
   if (!options.i18n?.locales?.length) {
-    const contentDir = resolve(options.srcDir, options.dir.pages)
-
+    const contentDir = resolve(options.srcDir, $docus.settings.contentDir)
     const languageCodes = languages.map(({ code }) => code)
     const activeLanguages = fs.readdirSync(contentDir).filter(name => languageCodes.includes(name))
     activeLanguages.unshift(config.defaultLocale)
diff --git a/src/settings/defaults.ts b/src/settings/defaults.ts
index da6628888..6a34e29b5 100644
--- a/src/settings/defaults.ts
+++ b/src/settings/defaults.ts
@@ -2,10 +2,9 @@ import { DocusSettings } from '../types'
 
 export const docusDefaults: DocusSettings = {
   title: 'Docus',
+  contentDir: 'content',
+  url: '',
   description: '',
   template: 'docs',
-  logo: '',
-  url: '',
-  layout: '',
   credits: true
 }
diff --git a/src/settings/index.ts b/src/settings/index.ts
index b73a9d052..5b7774f58 100644
--- a/src/settings/index.ts
+++ b/src/settings/index.ts
@@ -29,6 +29,7 @@ export default <Module>function settingsModule() {
     console.warn('`themeDir` is not specified in current theme, fallback to default theme')
     options.themeDir = resolve(__dirname, '..', 'defaultTheme')
   }
+
   let themeDefaultsPath = resolve(options.themeDir, 'settings')
   if (existsSync(themeDefaultsPath + '.js')) themeDefaultsPath += '.js'
   else if (existsSync(themeDefaultsPath + '.ts')) themeDefaultsPath += '.ts'
diff --git a/src/types/core.ts b/src/types/core.ts
index 59483ba2f..2ff29540d 100644
--- a/src/types/core.ts
+++ b/src/types/core.ts
@@ -96,11 +96,10 @@ export interface DocusDocument {
 
 export interface DocusSettings<T = DefaultThemeSettings> {
   title: string
+  contentDir: string
   description: string
   credits: boolean
-  logo: string
   url: string
-  layout: string
   template: string
   theme?: T
   [key: string]: any