diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index b91f895..a768baa 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -31,34 +31,98 @@ module.exports = {
     sidebar: [
       {
         title: 'Pour les joueurs',
+        expanded: true,
         children: [
-          '/creation-du-personnage/',
-          '/au-dela-du-niveau-1/',
+          {
+            title: "Création du personnage",
+            path: '/creation-du-personnage/'
+          },
+          {
+            title: 'Au-delà du niveau 1',
+            path: '/au-dela-du-niveau-1/'
+          },
           {
             title: 'Races',
             path: '/races/',
             children: [
-              '/races/demi-elfe/',
-              '/races/demi-orc/',
-              '/races/elfe/',
-              '/races/gnome/',
-              '/races/halfelin/',
-              '/races/humain/',
-              '/races/nain/',
-              '/races/aasimar/',
-              '/races/demi-ogre/',
-              '/races/felys/',
-              '/races/homme-serpent/',
-              '/races/sangdragon/',
-              '/races/tieffelin/'
+              {
+                title: 'Demi-elfe',
+                path: '/races/demi-elfe/'
+              },
+              {
+                title: 'Demi-orc',
+                path: '/races/demi-orc/'
+              },
+              {
+                title: 'Elfe',
+                path: '/races/elfe/'
+              },
+              {
+                title: 'Gnome',
+                path: '/races/gnome/'
+              },
+              {
+                title: 'Halfelin',
+                path: '/races/halfelin/'
+              },
+              {
+                title: 'Humain',
+                path: '/races/humain/'
+              },
+              {
+                title: 'Nain',
+                path: '/races/nain/'
+              },
+              {
+                title: 'Aasimar',
+                path: '/races/aasimar/'
+              },
+              {
+                title: 'Demi-ogre',
+                path: '/races/demi-ogre/'
+              },
+              {
+                title: 'Félys',
+                path: '/races/felys/'
+              },
+              {
+                title: 'Homme serpent',
+                path: '/races/homme-serpent/'
+              },
+              {
+                title: 'Sangdragon',
+                path: '/races/sangdragon/'
+              },
+              {
+                title: 'Tieffelin',
+                path: '/races/tieffelin/'
+              }
             ]
           },
-          '/options-de-personnalisation/',
-          '/utiliser-les-caracteristiques/',
-          '/partir-a-laventure/',
-          '/combattre/',
-          '/gerer-la-sante-du-personnage/',
-          '/lancer-des-sorts/',
+          {
+            title: 'Options de personnalisation',
+            path: '/options-de-personnalisation/'
+          },
+          {
+            title: 'Utiliser les caractéristiques',
+            path: '/utiliser-les-caracteristiques/'
+          },
+          {
+            title: "Partir à l'aventure",
+            path: '/partir-a-laventure/'
+          },
+          {
+            title: "Combattre",
+            path: '/combattre/'
+          },
+          {
+            title: "Gérer la santé du personnage",
+            path: '/gerer-la-sante-du-personnage/'
+          },
+          {
+            title: "Lancer des sorts",
+            path: '/lancer-des-sorts/'
+          },
           {
             title: 'Grimoire',
             path: '/grimoire/'
@@ -68,14 +132,38 @@ module.exports = {
       {
         title: 'Pour les meneurs',
         children: [
-          '/les-tresors/',
-          '/objets-magiques/',
-          '/objets-magiques-intelligents/',
-          '/pieges/',
-          '/maladies/',
-          '/folie/',
-          '/objets-opposition/',
-          '/poisons/'
+          {
+            title: "Les trésorrs",
+            path: '/les-tresors/'
+          },
+          {
+            title: "Objects magiques",
+            path: '/objets-magiques/'
+          },
+          {
+            title: "Objets magiques intelligents",
+            path: '/objets-magiques-intelligents/'
+          },
+          {
+            title: "Les pièges",
+            path: '/pieges/'
+          },
+          {
+            title: "Les maladies",
+            path: '/maladies/'
+          },
+          {
+            title: "La folie",
+            path: '/folie/'
+          },
+          {
+            title: "Les objets",
+            path: '/objets-opposition/'
+          },
+          {
+            title: "Les poisons",
+            path: '/poisons/'
+          }
         ]
       }
     ]
diff --git a/docs/.vuepress/theme/components/NavDrawer.vue b/docs/.vuepress/theme/components/NavDrawer.vue
new file mode 100644
index 0000000..a33634f
--- /dev/null
+++ b/docs/.vuepress/theme/components/NavDrawer.vue
@@ -0,0 +1,133 @@
+<template>
+  <v-navigation-drawer class="main-drawer" v-model="drawer" :clipped="$vuetify.breakpoint.lgAndUp" width="300" app>
+    <!-- <v-treeview
+        item-key="path"
+        item-text="title"
+        :items="items"
+        dense
+        open-all
+        hoverable
+        open-on-click
+        activatable
+        @update:active="updateActive"
+      >
+      </v-treeview> -->
+    <v-list dense nav>
+      <template v-for="item in items">
+        <v-list-group v-if="item.children" :key="item.title" v-model="item.expanded">
+          <template v-slot:activator>
+            <v-list-item-content>
+              <v-list-item-title>
+                {{ item.title }}
+              </v-list-item-title>
+            </v-list-item-content>
+          </template>
+
+          <template v-for="child in item.children">
+            <v-list-group v-if="child.children" :key="child.title" sub-group v-model="child.expanded">
+              <template v-slot:activator>
+                <v-list-item-content>
+                  <v-list-item-title>
+                    {{ child.title }}
+                  </v-list-item-title>
+                </v-list-item-content>
+              </template>
+              <v-list-item v-for="subchild in child.children" link :to="{path: subchild.path}">
+                <v-list-item-content>
+                  <v-list-item-title>
+                    {{ subchild.title }}
+                  </v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list-group>
+            <v-list-item v-else :key="child.title" link :to="{path: child.path}">
+              <v-list-item-content>
+                <v-list-item-title>
+                  {{ child.title }}
+                </v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+          </template>
+        </v-list-group>
+        <v-list-item v-else :key="item.title" link :to="{path: item.path}">
+          <v-list-item-content>
+            <v-list-item-title>
+              {{ item.title }}
+            </v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </template>
+    </v-list>
+  </v-navigation-drawer>
+</template>
+
+<script>
+export default {
+  name: 'NavDrawer',
+
+  data () {
+    return {
+      items: []
+    }
+  },
+
+  computed: {
+    drawer: {
+      get () {
+        return this.$store.state.drawer
+      },
+      set (newValue) {
+        this.$store.commit('setDrawer', newValue)
+      }
+    }
+  },
+
+  mounted () {
+    this.items = this.$site.themeConfig.sidebar
+  },
+
+  methods: {
+    updateActive (active) {
+      console.log(active)
+      if (active[0] == undefined) return
+      const path = active[0].replace('.html', '')
+      this.$router.push(path)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+// Case of list
+.v-application--is-ltr {
+  .main-drawer {
+
+    .v-list-group--sub-group {
+      .v-list-item__icon:first-child {
+        margin-right: 0px;
+      }
+    }
+
+    .v-list--dense {
+      .v-list-group--sub-group {
+        .v-list-group__header {
+          padding-left: 0px;
+        }
+      }
+    }
+    
+    .v-list--nav {
+      .v-list-item {
+        padding-left: 24px;
+      }
+    }
+  }
+}
+
+
+
+// Case of treeview
+.v-treeview-node__level {
+  width: 12px;
+}
+</style>
diff --git a/docs/.vuepress/theme/components/Page.vue b/docs/.vuepress/theme/components/Page.vue
new file mode 100644
index 0000000..f0c4a20
--- /dev/null
+++ b/docs/.vuepress/theme/components/Page.vue
@@ -0,0 +1,18 @@
+<template>
+  <main class="page content">
+
+    <Content />
+
+  </main>
+</template>
+
+<script>
+
+export default {
+  name: 'Page',
+  components: { }
+}
+</script>
+
+<style>
+</style>
diff --git a/docs/.vuepress/theme/components/search/SRDSearchBox.vue b/docs/.vuepress/theme/components/search/SRDSearchBox.vue
index fa03db4..54dd739 100644
--- a/docs/.vuepress/theme/components/search/SRDSearchBox.vue
+++ b/docs/.vuepress/theme/components/search/SRDSearchBox.vue
@@ -134,7 +134,7 @@ export default {
     },
 
     isSearchable (page) {
-      let searchPaths = null
+      let searchPaths = this.$site.themeConfig.searchPaths || null
 
       // all paths searchables
       if (searchPaths === null) { return true }
diff --git a/docs/.vuepress/theme/layouts/GlobalLayout.vue b/docs/.vuepress/theme/layouts/GlobalLayout.vue
index 26207c6..15249de 100644
--- a/docs/.vuepress/theme/layouts/GlobalLayout.vue
+++ b/docs/.vuepress/theme/layouts/GlobalLayout.vue
@@ -1,57 +1,16 @@
 <template>
   <v-app>
-    <v-navigation-drawer v-model="drawer" :clipped="$vuetify.breakpoint.lgAndUp" app>
-      <v-list dense>
-        <template v-for="item in items">
-          <v-row v-if="item.heading" :key="item.heading" align="center">
-            <v-col cols="6">
-              <v-subheader v-if="item.heading">
-                {{ item.heading }}
-              </v-subheader>
-            </v-col>
-            <v-col cols="6" class="text-center">
-              <a href="#!" class="body-2 black--text">EDIT</a>
-            </v-col>
-          </v-row>
-          <v-list-group v-else-if="item.children" :key="item.text" v-model="item.model" :prepend-icon="item.model ? item.icon : item['icon-alt']" append-icon="">
-            <template v-slot:activator>
-              <v-list-item-content>
-                <v-list-item-title>
-                  {{ item.text }}
-                </v-list-item-title>
-              </v-list-item-content>
-            </template>
-            <v-list-item v-for="(child, i) in item.children" :key="i" link>
-              <v-list-item-action v-if="child.icon">
-                <v-icon>{{ child.icon }}</v-icon>
-              </v-list-item-action>
-              <v-list-item-content>
-                <v-list-item-title>
-                  {{ child.text }}
-                </v-list-item-title>
-              </v-list-item-content>
-            </v-list-item>
-          </v-list-group>
-          <v-list-item v-else :key="item.text" link>
-            <v-list-item-action>
-              <v-icon>{{ item.icon }}</v-icon>
-            </v-list-item-action>
-            <v-list-item-content>
-              <v-list-item-title>
-                {{ item.text }}
-              </v-list-item-title>
-            </v-list-item-content>
-          </v-list-item>
-        </template>
-      </v-list>
-    </v-navigation-drawer>
+
+    <NavDrawer />
 
     <Navbar />
 
     <v-content>
       <v-container class="fill-height" fluid>
-        <v-row align="center" justify="center">
-          <DefaultGlobalLayout/>
+        <v-row align="start" justify="center">
+          <v-col cols="12">
+            <DefaultGlobalLayout/>
+          </v-col>
         </v-row>
       </v-container>
     </v-content>
@@ -61,13 +20,15 @@
 <script>
 import GlobalLayout from '@app/components/GlobalLayout.vue'
 import Navbar from '@theme/components/Navbar.vue'
+import NavDrawer from '@theme/components/NavDrawer.vue'
 
 export default {
   name: 'GlobalLayout',
 
   components: {
     DefaultGlobalLayout: GlobalLayout,
-    Navbar
+    Navbar,
+    NavDrawer
   },
 
   data () {
@@ -108,14 +69,6 @@ export default {
   },
 
   computed: {
-    drawer: {
-      get () {
-        return this.$store.state.drawer
-      },
-      set (newValue) {
-        this.$store.commit('setDrawer', newValue)
-      }
-    }
   },
 
   mounted () {
diff --git a/docs/.vuepress/theme/layouts/Layout.vue b/docs/.vuepress/theme/layouts/Layout.vue
index b194a46..b5fe0f4 100644
--- a/docs/.vuepress/theme/layouts/Layout.vue
+++ b/docs/.vuepress/theme/layouts/Layout.vue
@@ -1,24 +1,17 @@
 <template>
   <div>
-    <Home v-if="$page.frontmatter.home" />
-
-    <Page v-else>
-      <template #top>
-        <slot name="page-top" />
-      </template>
-      <template #bottom>
-        <slot name="page-bottom" />
-      </template>
-    </Page>
+    <Page></Page>
   </div>
 </template>
 
 <script>
+import Page from '@theme/components/Page.vue'
 
 export default {
   name: 'Layout',
 
   components: {
+    Page
   },
 
   computed: {