diff --git a/docs/.vuepress/store/index.js b/docs/.vuepress/store/index.js
index 40cd900..e319d08 100644
--- a/docs/.vuepress/store/index.js
+++ b/docs/.vuepress/store/index.js
@@ -7,6 +7,8 @@ import monsterFilters from './modules/monsterFilters'
 
 Vue.use(Vuex)
 
+import Cookies from 'js-cookie'
+
 export default new Vuex.Store({
   modules: {
     spellFilters,
@@ -76,6 +78,8 @@ export default new Vuex.Store({
     },
     setIsThemeDark: (state, payload) => {
       state.isThemeDark = payload
+      console.log(payload)
+      Cookies.set('heros-et-dragons-is-dark', state.isThemeDark)
     },
     setIsOpenAboutDialog: (state, payload) => {
       state.isOpenAboutDialog = payload
diff --git a/docs/.vuepress/theme/components/NavDrawer.vue b/docs/.vuepress/theme/components/NavDrawer.vue
index 1bdfe4c..2cd73d2 100644
--- a/docs/.vuepress/theme/components/NavDrawer.vue
+++ b/docs/.vuepress/theme/components/NavDrawer.vue
@@ -99,7 +99,7 @@
           <v-divider/>
           <div class="pa-2 d-flex">
             <v-spacer/>
-            <v-btn @click.stop="$vuetify.theme.dark = !$vuetify.theme.dark" icon>
+            <v-btn @click.stop="setIsThemeDark" icon>
               <v-icon v-html="$vuetify.theme.dark ? 'mdi-brightness-4' : 'mdi-brightness-7'"></v-icon>
             </v-btn>
           </div>
@@ -191,6 +191,10 @@ export default {
     },
     toggleAboutDialog () {
       this.$store.commit('setIsOpenAboutDialog', !this.$store.state.isOpenAboutDialog)
+    },
+    setIsThemeDark () {
+      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
+      this.$store.commit('setIsThemeDark', this.$vuetify.theme.dark)
     }
   }
 }
diff --git a/docs/.vuepress/theme/components/Navbar.vue b/docs/.vuepress/theme/components/Navbar.vue
index c1039a5..bf4b3fb 100644
--- a/docs/.vuepress/theme/components/Navbar.vue
+++ b/docs/.vuepress/theme/components/Navbar.vue
@@ -6,7 +6,7 @@
     </v-toolbar-title>
     <SRDSearchBox v-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
     <v-spacer />
-    <v-btn class="hidden-sm-and-down" @click.stop="$vuetify.theme.dark = !$vuetify.theme.dark" icon>
+    <v-btn class="hidden-sm-and-down" @click.stop="setIsThemeDark" icon>
       <v-icon v-html="$vuetify.theme.dark ? 'mdi-brightness-4' : 'mdi-brightness-7'"></v-icon>
     </v-btn>
     <v-btn class="hidden-sm-and-down" @click.stop="toggleAboutDialog" icon>
@@ -70,6 +70,10 @@ export default {
     },
     toggleAboutDialog () {
       this.$store.commit('setIsOpenAboutDialog', !this.$store.state.isOpenAboutDialog)
+    },
+    setIsThemeDark () {
+      this.$vuetify.theme.dark = !this.$vuetify.theme.dark
+      this.$store.commit('setIsThemeDark', this.$vuetify.theme.dark)
     }
   },
 
diff --git a/docs/.vuepress/theme/layouts/GlobalLayout.vue b/docs/.vuepress/theme/layouts/GlobalLayout.vue
index 01a031c..543f476 100644
--- a/docs/.vuepress/theme/layouts/GlobalLayout.vue
+++ b/docs/.vuepress/theme/layouts/GlobalLayout.vue
@@ -16,6 +16,27 @@
       </v-container>
     </v-content>
 
+    <v-dialog v-model="shallNotPass" persistent max-width="600">
+      <v-card>
+        <v-card-title class="headline">Meneur de jeu</v-card-title>
+        <v-card-text>
+          <p>Tu te trouves seul dans l'obscurité du repaire du dragon noir. Tu serres ton bâton de magicien entre tes mains et t'apprêtes à réagir à la moindre menace.</p>
+          <p>Que fais-tu ?</p>
+          <v-text-field label="Je veux..." v-model="iWantTo"></v-text-field>
+        </v-card-text>
+        <v-card-actions>
+          <v-btn color="primary" text @click="setShallPass">Valider</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+
+    <v-bottom-sheet v-model="cookieConsentDialog" persistent>
+      <v-sheet class="text-center" tile>
+        <div class="py-3">Ce site utilise des cookies pour son bon fonctionnement et pour l'analyse de la fréquentation. Sans ces cookies, vous ne pourriez pas écrire vos sorts dans votre grimoire ou recruter tous ces monstres pour garnir votre repaire maléfique.</div>
+        <v-btn class="my-6" color="primary" @click="setCookieConsent">Compris</v-btn>
+      </v-sheet>
+    </v-bottom-sheet>
+
   </v-app>
 </template>
 
@@ -26,6 +47,7 @@ import NavDrawer from '@theme/components/NavDrawer.vue'
 import RightDrawer from '@theme/components/RightDrawer.vue'
 import Vue from 'vue'
 import RuleTooltip from '@theme/global-components/RT'
+import Cookies from 'js-cookie'
 
 export default {
   name: 'GlobalLayout',
@@ -39,6 +61,9 @@ export default {
 
   data () {
     return {
+      shallNotPass: true,
+      iWantTo: null,
+      cookieConsentDialog: true,
     }
   },
 
@@ -60,6 +85,22 @@ export default {
 
   mounted () {
     this.$store.commit('setDrawer', this.$vuetify.breakpoint.lgAndUp)
+    const AUTHORIZED = Cookies.get('shallpass')
+    if (AUTHORIZED) {
+      this.shallNotPass = false
+    }
+
+    // Cookie consent
+    const COOKIECONSENT = Cookies.get('heros-et-dragons-cookies')
+    if (COOKIECONSENT == 'compris') {
+      this.cookieConsentDialog = false
+    }
+
+    // Cookie consent
+    const THEMEISDARK = Cookies.get('heros-et-dragons-is-dark')
+    if (THEMEISDARK === 'true') {
+      this.$vuetify.theme.dark = true
+    }
     // this.$vuetify.theme.dark = this.$store.state.isThemeDark
 
     // let conditionLinks = document.links
@@ -79,6 +120,16 @@ export default {
   },
 
   methods: {
+    setShallPass () {
+      if (this.iWantTo == 'Je veux lancer un projectile magique !') {
+        Cookies.set('shallpass', true)
+        this.shallNotPass = false
+      }
+    },
+    setCookieConsent () {
+      Cookies.set('heros-et-dragons-cookies', 'compris')
+      this.cookieConsentDialog = false
+    }
   }
 }
 </script>
diff --git a/package.json b/package.json
index bb0247a..a41b316 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@vuepress/plugin-blog": "^1.9.2",
     "@vuepress/plugin-pwa": "^1.4.1",
     "flexsearch": "nextapps-de/flexsearch",
+    "js-cookie": "^2.2.1",
     "markdown-it-div": "^1.1.0",
     "markdown-it-multimd-table": "^4.0.1",
     "material-design-icons-iconfont": "^5.0.1",
diff --git a/yarn.lock b/yarn.lock
index 4560107..ce07988 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4694,6 +4694,11 @@ js-base64@^2.1.8:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.2.tgz#313b6274dda718f714d00b3330bbae6e38e90209"
   integrity sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ==
 
+js-cookie@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
+  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"