diff --git a/docs/content/2.usage/2.content.md b/docs/content/2.usage/2.content.md
index 17313df37..9f73d2c49 100644
--- a/docs/content/2.usage/2.content.md
+++ b/docs/content/2.usage/2.content.md
@@ -25,6 +25,8 @@ Every markdown file should define properties in the front-matter in order to wor
 | `fullscreen` | `Boolean` |  | Grows the page and hides the table of contents |
 | `menuTitle` | `String` |  | Overwrites the title of the page that will be displayed in the left menu (defaults to `title`) |
 | `badge` | `String` |  | Adds a badge next to the page title |
+| `position` | `Number` |  | Position of the page in the category, by default we use the filename prefix `POSITION.`, example: `1.first-page.md` |
+| `draft` | `Boolean` |  | Set the page as draft, will be displayed only in development, by default we use the filename suffix `.draft`, example: `3.my-draft-page.draft.md` |
 
 ### Example
 
@@ -32,7 +34,6 @@ Every markdown file should define properties in the front-matter in order to wor
 ---
 title: 'Introduction'
 description: 'Empower your NuxtJS application with this awesome module.'
-position: 1
 category: 'Getting started'
 version: 1.4
 fullscreen: false
diff --git a/theme/components/dev-templates/DocusUI.vue b/theme/components/dev-templates/DocusUI.vue
index 702f109cf..4fac240bb 100644
--- a/theme/components/dev-templates/DocusUI.vue
+++ b/theme/components/dev-templates/DocusUI.vue
@@ -1,7 +1,19 @@
 <template>
-  <div class="fixed shadow bg-gray-50 dark:bg-gray-800 bottom-6 left-6 w-36">
-    <h1 class="p-2 font-bold bg-gray-100 dark:bg-gray-700">Docus UI</h1>
+  <div v-show="open" class="fixed z-50 shadow group bg-gray-50 dark:bg-gray-800 bottom-6 left-6 w-36">
+    <h1 class="flex items-center p-2 font-bold bg-gray-100 dark:bg-gray-700">
+      <span class="flex-1">Docus UI</span>
+      <IconX class="w-4 h-4 transition-opacity opacity-0 cursor-pointer group-hover:opacity-80" @click.native="open = false" />
+    </h1>
     <ul class="p-2">
+      <li class="flex items-center pb-1 font-medium">
+        <button type="button" class="relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 rounded-full cursor-pointer group focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" aria-pressed="false" @click="$docus.ui.draft = !$docus.ui.draft">
+          <span class="sr-only">Show drafts</span>
+          <span aria-hidden="true" class="absolute w-full h-full rounded-md pointer-events-none"></span>
+          <span aria-hidden="true" :class="drafts ? 'bg-primary-500' : 'bg-gray-200'" class="absolute h-4 mx-auto transition-colors duration-200 ease-in-out rounded-full pointer-events-none w-9"></span>
+          <span aria-hidden="true" :class="drafts ? 'translate-x-5' : 'translate-x-0'" class="absolute left-0 inline-block w-5 h-5 transition-transform duration-200 ease-in-out transform translate-x-0 bg-white border border-gray-200 rounded-full shadow pointer-events-none ring-0"></span>
+        </button>
+        <span class="ml-2 cursor-pointer" @click="$docus.ui.draft = !$docus.ui.draft">Drafts</span>
+      </li>
       <li class="flex items-center font-medium">
         <button type="button" class="relative inline-flex items-center justify-center flex-shrink-0 w-10 h-5 rounded-full cursor-pointer group focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" aria-pressed="false" @click="$docus.ui.slots = !$docus.ui.slots">
           <span class="sr-only">Show slots</span>
@@ -17,9 +29,17 @@
 
 <script>
 export default {
+  data () {
+    return {
+      open: true
+    }
+  },
   computed: {
     slots () {
       return this.$docus.ui.slots
+    },
+    drafts () {
+      return this.$docus.ui.draft
     }
   }
 }
diff --git a/theme/components/templates/Aside.vue b/theme/components/templates/Aside.vue
index 38cfe6e87..7522da432 100644
--- a/theme/components/templates/Aside.vue
+++ b/theme/components/templates/Aside.vue
@@ -39,7 +39,11 @@
 
                   <client-only>
                     <span
-                      v-if="isDocumentNew(doc)"
+                      v-if="doc.draft"
+                      class="w-2 h-2 bg-yellow-500 rounded-full opacity-75"
+                    />
+                    <span
+                      v-else-if="isDocumentNew(doc)"
                       class="w-2 h-2 rounded-full opacity-75 animate-pulse bg-primary-500"
                     />
                   </client-only>
diff --git a/theme/components/templates/Search.vue b/theme/components/templates/Search.vue
index 835e3f029..42f35e935 100644
--- a/theme/components/templates/Search.vue
+++ b/theme/components/templates/Search.vue
@@ -1,21 +1,21 @@
 <template>
-  <div class="w-full relative flex flex-col justify-between">
+  <div class="relative flex flex-col justify-between w-full">
     <div
-      class="w-full relative"
+      class="relative w-full"
       @keydown.down="increment"
       @keydown.up="decrement"
       @keydown.enter="go"
     >
       <label for="search" class="sr-only">Search</label>
       <div class="relative">
-        <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-          <IconSearch class="h-5 w-5 text-gray-500" />
+        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+          <IconSearch class="w-5 h-5 text-gray-500" />
         </div>
         <input
           id="search"
           ref="search"
           v-model="q"
-          class="block w-full pl-10 pr-3 py-2 truncate leading-5 placeholder-gray-500 border border-transparent text-gray-700 dark:text-white dark-focus:text-white focus:border-gray-300 dark-focus:border-gray-700 rounded-md focus:outline-none focus:bg-white dark-focus:bg-gray-900 bg-gray-200 dark:bg-gray-800"
+          class="block w-full py-2 pl-10 pr-3 leading-5 text-gray-700 placeholder-gray-500 truncate bg-gray-200 border border-transparent rounded-md dark:text-white dark-focus:text-white focus:border-gray-300 dark-focus:border-gray-700 focus:outline-none focus:bg-white dark-focus:bg-gray-900 dark:bg-gray-800"
           :class="{ 'rounded-b-none': focus && (searching || results.length) }"
           :placeholder="$t('search.placeholder')"
           type="search"
@@ -27,7 +27,7 @@
     </div>
     <ul
       v-show="focus && (searching || results.length)"
-      class="z-10 absolute w-full flex-1 top-0 bg-white dark:bg-gray-900 rounded-md border border-gray-300 dark:border-gray-700 overflow-hidden"
+      class="absolute top-0 z-10 flex-1 w-full overflow-hidden bg-white border border-gray-300 rounded-md dark:bg-gray-900 dark:border-gray-700"
       :class="{ 'rounded-t-none': focus && (searching || results.length) }"
       style="margin-top: 37px;"
     >
@@ -40,7 +40,7 @@
       >
         <NuxtLink
           :to="$contentLocalePath(result.to)"
-          class="flex px-4 py-2 items-center leading-5 transition ease-in-out duration-150"
+          class="flex items-center px-4 py-2 leading-5 transition duration-150 ease-in-out"
           :class="{
             'text-primary-500 dark:text-primary-400 bg-gray-200 dark:bg-gray-800': focusIndex === index
           }"
@@ -76,7 +76,8 @@ export default {
         return
       }
       this.searching = true
-      this.results = await this.$content(this.$i18n.locale, { deep: true }).sortBy('position', 'asc').only(['title', 'slug', 'category', 'to']).limit(12).search(q).fetch()
+      const draft = this.$docus.ui?.draft ? undefined : false
+      this.results = await this.$content({ deep: true }).where({ language: this.$i18n.locale, draft }).sortBy('position', 'asc').only(['title', 'slug', 'category', 'to']).limit(12).search(q).fetch()
       this.searching = false
     }
   },
diff --git a/theme/components/templates/Toc.vue b/theme/components/templates/Toc.vue
index 9ec83b816..145bc119b 100644
--- a/theme/components/templates/Toc.vue
+++ b/theme/components/templates/Toc.vue
@@ -2,29 +2,27 @@
   <div v-if="toc.length" class="flex-none hidden w-64 pl-8 mr-8 xl:text-sm xl:block">
     <TocTop />
     <div class="flex flex-col justify-between overflow-y-auto sticky max-h-(screen-18) -mt-10 pt-10 pb-4 top-18">
-      <div class="mb-8">
-        <h5 class="mb-3 text-sm font-semibold tracking-wide text-gray-900 uppercase dark:text-gray-100 lg:text-xs">{{ $t('toc.title') }}</h5>
+      <h5 class="mb-3 text-sm font-semibold tracking-wide text-gray-900 uppercase dark:text-gray-100 lg:text-xs">{{ $t('toc.title') }}</h5>
 
-        <ul class="overflow-x-hidden font-medium">
-          <li
-            v-for="link of toc"
-            :key="link.id"
-            class="hover:text-gray-900 dark:hover:text-gray-100"
-            :class="{ 'text-primary-500 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-400': exactActiveLink === link.id || activeLink === link.id }"
-          >
-            <a
-              :href="`#${link.id}`"
-              class="block py-2 transition-colors duration-100 transform scrollactive-item"
-              :class="{
-                'ml-2': link.depth === 3,
-                'ml-3': link.depth === 4,
-                'ml-4': link.depth === 5,
-                'ml-5': link.depth === 6
-              }"
-            >{{ link.text }}</a>
-          </li>
-        </ul>
-      </div>
+      <ul class="overflow-x-hidden font-medium">
+        <li
+          v-for="link of toc"
+          :key="link.id"
+          class="hover:text-gray-900 dark:hover:text-gray-100"
+          :class="{ 'text-primary-500 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-400': exactActiveLink === link.id || activeLink === link.id }"
+        >
+          <a
+            :href="`#${link.id}`"
+            class="block py-2 transition-colors duration-100 transform scrollactive-item"
+            :class="{
+              'ml-2': link.depth === 3,
+              'ml-3': link.depth === 4,
+              'ml-4': link.depth === 5,
+              'ml-5': link.depth === 6
+            }"
+          >{{ link.text }}</a>
+        </li>
+      </ul>
       <TocBottom />
     </div>
   </div>
diff --git a/theme/module.js b/theme/module.js
index 33d9c0df6..09b71f854 100644
--- a/theme/module.js
+++ b/theme/module.js
@@ -3,7 +3,7 @@ import defu from 'defu'
 import gracefulFs from 'graceful-fs'
 
 import tailwindConfig from './tailwind.config'
-import { generatePosition, generateSlug } from './utils/document'
+import { generatePosition, generateSlug, isDraft } from './utils/document'
 
 const fs = gracefulFs.promises
 const r = (...args) => resolve(__dirname, ...args)
@@ -96,6 +96,7 @@ export default function docusModule () {
     document.to = generateSlug(_to)
     document.language = _language
     document.category = _category
+    document.draft = document.draft || isDraft(slug)
   })
   // Extend `/` route
   hook('build:extendRoutes', (routes) => {
diff --git a/theme/pages/_.vue b/theme/pages/_.vue
index 28f1f0858..b17d0a8e7 100644
--- a/theme/pages/_.vue
+++ b/theme/pages/_.vue
@@ -3,12 +3,12 @@
     <article class="flex-auto min-w-0 px-4 sm:px-6 xl:px-8">
       <div class="mb-10" :class="{ 'border-b border-gray-200 dark:border-gray-800 pb-10': document.description }">
         <h1 class="flex items-center justify-between text-3xl font-extrabold tracking-tight text-gray-900 dark:text-gray-100">
-          {{ document.title }}
+          <span class="flex-1">{{ document.title }}</span>
+          <span v-if="document.draft" class="inline-block px-3 py-1 mr-2 text-base font-medium leading-5 tracking-tight text-yellow-500 bg-yellow-100 rounded-full items-flex dark:bg-yellow-800 dark:text-yellow-400">Draft</span>
           <Badge v-if="document.badge" class="font-medium">{{ document.badge }}</Badge>
         </h1>
         <p v-if="document.description" class="mt-2 text-lg text-gray-500 dark:text-gray-300">{{ document.description }}</p>
       </div>
-
       <div class="max-w-none">
         <NuxtContent :document="document" />
       </div>
@@ -38,16 +38,17 @@ export default {
       redirect(app.localePath('/'))
     }
   },
-  async asyncData ({ $content, store, app, params, error }) {
+  async asyncData ({ $content, $docus, app, params, error }) {
     const language = app.i18n.locale
     const to = `/${params.pathMatch || ''}`
-    const [document] = await $content({ deep: true }).where({ language, to }).fetch()
+    const draft = $docus.ui?.draft ? undefined : false
+    const [document] = await $content({ deep: true }).where({ language, to, draft }).fetch()
     if (!document) {
       return error({ statusCode: 404, message: 'Page not found' })
     }
 
     const [prev, next] = await $content({ deep: true })
-      .where({ language })
+      .where({ language, draft })
       .only(['title', 'slug', 'to'])
       .sortBy('position', 'asc')
       .surround(document.slug, { before: 1, after: 1 })
diff --git a/theme/plugins/docus.js b/theme/plugins/docus.js
index 2d3ae7527..fff63c8d0 100644
--- a/theme/plugins/docus.js
+++ b/theme/plugins/docus.js
@@ -116,7 +116,17 @@ export default async function ({ app, ssrContext, $content, $config, nuxtState =
         if (process.dev === false && this.categories[app.i18n.locale]) {
           return
         }
-        const docs = await $content({ deep: true }).where({ language: app.i18n.locale }).only(['title', 'menuTitle', 'category', 'slug', 'version', 'to']).sortBy('position', 'asc').fetch()
+        const draft = this.ui?.draft ? undefined : false
+        const fields = ['title', 'menuTitle', 'category', 'slug', 'version', 'to']
+        if (process.dev) {
+          fields.push('draft')
+        }
+        const docs = await $content({ deep: true })
+          .where({ language: app.i18n.locale, draft })
+          .only(fields)
+          .sortBy('position', 'asc')
+          .fetch()
+
         if (this.lastRelease) {
           docs.push({ slug: 'releases', title: 'Releases', category: 'Community', to: '/releases' })
         }
diff --git a/theme/plugins/docus.ui.js b/theme/plugins/docus.ui.js
index 1e20ad7a2..65ca601ce 100644
--- a/theme/plugins/docus.ui.js
+++ b/theme/plugins/docus.ui.js
@@ -6,16 +6,20 @@ import DocusUI from '../components/dev-templates/DocusUI'
 
 const COOKIE_NAME = 'docus.ui'
 
-export default function ({ $docus, ssrContext }) {
+export default async function ({ $docus, ssrContext }) {
   const useUniversalCookies = createCookies(ssrContext?.req)
   const cookies = useUniversalCookies()
   const ui = cookies.get(COOKIE_NAME) || {}
 
   // UI data (universal storage)
   $docus.ui = reactive(defu(ui, {
-    slots: false
+    slots: false,
+    draft: false
   }))
-  watch($docus.ui, () => cookies.set(COOKIE_NAME, $docus.ui))
+  if (process.client) {
+    watch($docus.ui, () => cookies.set(COOKIE_NAME, $docus.ui))
+    watch(() => $docus.ui.draft, () => $docus.fetchCategories())
+  }
 
   // Mount DocusUI widget on client-side
   if (process.client) {
@@ -26,4 +30,9 @@ export default function ({ $docus, ssrContext }) {
       $docus
     }).$mount(el)
   }
+
+  // Re-fetch categories
+  if (process.server) {
+    await $docus.fetchCategories()
+  }
 }
diff --git a/theme/utils/document.js b/theme/utils/document.js
index 8f65a4235..63df3bf02 100644
--- a/theme/utils/document.js
+++ b/theme/utils/document.js
@@ -12,10 +12,14 @@ export function generatePosition (path, doc) {
 export function generateSlug (path) {
   return path
     .split('/')
-    .map(part => part.replace(/(\d+\.)?(.*)(\.draft)?/, '$2').replace(/^index/, ''))
+    .map(part => part.replace(/(\d+\.)?(.*)/, '$2').replace(/^index/, '').replace(/\.draft/, ''))
     .join('/')
 }
 
+export function isDraft (path) {
+  return !!path.match(/(\.draft)$/, '$2')
+}
+
 function paddLeft (value, length) {
   return ('0'.repeat(length) + value).substr(String(value).length)
 }