diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 72af488..d7ec31b 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -179,6 +179,12 @@ module.exports = {
        frontmatter: {
           layout: 'CreateMagicItemLayout'
        }
+    },
+    {
+       path: '/calculateur-de-caracteristiques/',
+       frontmatter: {
+          layout: 'AbilityCalculatorLayout'
+       }
     }
   ],
   themeConfig: {
diff --git a/docs/.vuepress/data/abilityScores.js b/docs/.vuepress/data/abilityScores.js
new file mode 100644
index 0000000..590dfb1
--- /dev/null
+++ b/docs/.vuepress/data/abilityScores.js
@@ -0,0 +1,22 @@
+export const ABILITYSCORECOSTS = {
+  6: { cost: -2 },
+  7: { cost: -1 },
+  8: { cost: 0 },
+  9: { cost: 1 },
+  10: { cost: 2 },
+  11: { cost: 3 },
+  12: { cost: 4 },
+  13: { cost: 5 },
+  14: { cost: 7 },
+  15: { cost: 9 },
+  16: { cost: 12 },
+}
+
+export const ABILITYSCORES = [
+  { text: 'Force', value: 'for' },
+  { text: 'Dextérité', value: 'dex' },
+  { text: 'Constitution', value: 'con' },
+  { text: 'Intelligence', value: 'int' },
+  { text: 'Sagesse', value: 'sag' },
+  { text: 'Charisme', value: 'cha' },
+]
diff --git a/docs/.vuepress/data/races.js b/docs/.vuepress/data/races.js
new file mode 100644
index 0000000..b7b6b13
--- /dev/null
+++ b/docs/.vuepress/data/races.js
@@ -0,0 +1,10 @@
+export const races = [
+  {
+    key: 'demi-elfe',
+    label: 'Demi-elfe',
+    abilityBonuses: [
+      { ability: 'cha', value: 2 }
+    ],
+    freeAbilityBonuses: { qty: 2, value: 1 }
+  }
+]
diff --git a/docs/.vuepress/theme/components/AbilityCalculator.vue b/docs/.vuepress/theme/components/AbilityCalculator.vue
new file mode 100644
index 0000000..b6fc15e
--- /dev/null
+++ b/docs/.vuepress/theme/components/AbilityCalculator.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="ability-scores-calculator">
+    <v-row>
+      <v-col class="text-center">
+        <v-select :items="races" label="Choisissez une race" item-text="label" v-model="race" return-object outlined @change="selectRace"></v-select>
+      </v-col>
+      <v-col v-if="race && race.freeAbilityBonuses">
+        <v-select :items="abilityScoresChoices" multiple label="Bonus aux caractéristiques" v-model="abilityBonuses" outlined @input="selectAbilityBonus"></v-select>
+      </v-col>
+    </v-row>
+    <v-row v-for="ability in abilityScores" class="mb-0">
+      <v-col class="text-center">{{ ability.label }}</v-col>
+      <v-col class="text-center"><v-text-field label="Base" outlined dense type="number" min="6" max="16" v-model="ability.value"></v-text-field></v-col>
+      <v-col class="text-center">+</v-col>
+      <v-col class="text-center">{{ ability.racialBonus }}</v-col>
+      <v-col class="text-center">=</v-col>
+      <v-col class="text-center"><v-text-field label="Total" outlined dense readonly :value="getTotal(ability.key)"></v-text-field></v-col>
+      <v-col class="text-center"><v-text-field label="Modificateur" outlined dense readonly :value="displayBonus(getModifier(getTotal(ability.key)))"></v-text-field></v-col>
+      <v-col class="text-center"><v-text-field label="Coût" outlined dense readonly :value="abilityScoreCosts[ability.value].cost"></v-text-field></v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import { getModifier, displayBonus, displayAbilityScore } from '@theme/util/monsterHelpers'
+import { ABILITYSCORECOSTS, ABILITYSCORES } from '../../data/abilityScores'
+import { races } from '../../data/races'
+
+export default {
+  data () {
+    return {
+      abilityScoreCosts: ABILITYSCORECOSTS,
+      abilityScoresChoices: ABILITYSCORES,
+      races: races,
+      race: null,
+      abilityScores: [
+        { key: 'for', label: 'Force', value: 8, racialBonus: 0},
+        { key: 'dex', label: 'Dextérité', value: 8, racialBonus: 0},
+        { key: 'con', label: 'Constitution', value: 8, racialBonus: 0},
+        { key: 'int', label: 'Intelligence', value: 8, racialBonus: 0},
+        { key: 'sag', label: 'Sagesse', value: 8, racialBonus: 0},
+        { key: 'cha', label: 'Charisme', value: 8, racialBonus: 0}
+      ],
+      abilityBonuses: []
+    }
+  },
+
+  methods: {
+    getTotal (ability) {
+      let total = null
+      for (let score of this.abilityScores) {
+        if (score.key == ability) {
+          total = parseInt(score.value) + parseInt(score.racialBonus)
+        }
+      }
+      return total
+    },
+
+    getModifier (value) {
+      return getModifier(value)
+    },
+
+    displayBonus (score) {
+      return displayBonus(score)
+    },
+
+    selectRace () {
+      for (let ability of this.abilityScores) {
+        ability.racialBonus = 0
+        if (this.race.abilityBonuses) {
+          for (var bonus of this.race.abilityBonuses) {
+            if (bonus.ability == ability.key) {
+              ability.racialBonus = bonus.value
+            }
+          }
+        }
+      }
+    },
+
+    selectAbilityBonus (e) {
+      if(e.length > this.race.freeAbilityBonuses.qty) {
+        e.pop()
+      }
+      console.log(this.abilityBonuses)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+</style>
diff --git a/docs/.vuepress/theme/layouts/AbilityCalculatorLayout.vue b/docs/.vuepress/theme/layouts/AbilityCalculatorLayout.vue
new file mode 100644
index 0000000..9c7828c
--- /dev/null
+++ b/docs/.vuepress/theme/layouts/AbilityCalculatorLayout.vue
@@ -0,0 +1,14 @@
+<template>
+  <AbilityCalculator />
+</template>
+
+<script>
+import AbilityCalculator from '@theme/components/AbilityCalculator'
+
+export default {
+  components: { AbilityCalculator }
+}
+</script>
+
+<style lang="scss">
+</style>