diff --git a/src/components/MonthForm.vue b/src/components/MonthForm.vue
index 10262e4..ec97b42 100644
--- a/src/components/MonthForm.vue
+++ b/src/components/MonthForm.vue
@@ -1,31 +1,31 @@
 <template>
 <form>
-<ul>
-    <li>
-    <label for="ca-theo">CA théorique</label>
-    <input type="number" id="ca-theo">
-    </li>
-    <li>
-    <label for="ca-retro">CA rétrocession</label>
-    <input type="number" id="ca-retro">
-    </li>
-    <li>
-    <label for="ca-react">CA réactualisé</label>
-    <input type="number" id="ca-react">
-    </li>
-    <li>
-    <label for="nbr-seance">Nombre de séances effectuées</label>
-    <input type="number" id="nbr-seance">
-    </li>
-    <li>
-    <label for="retro">Montant de la rétrocession</label>
-    <input type="number" id="retro">
-    </li>
-    <li>
-    <label for="remumeration">Rémunération effectuée</label>
-    <input type="number" id="remumeration">
-    </li>
-</ul>
+    <ul>
+        <li>
+        <label for="ca-theo">CA théorique</label>
+        <input type="number" id="ca-theo">
+        </li>
+        <li>
+        <label for="ca-retro">CA rétrocession</label>
+        <input type="number" id="ca-retro">
+        </li>
+        <li>
+        <label for="ca-react">CA réactualisé</label>
+        <input type="number" id="ca-react">
+        </li>
+        <li>
+        <label for="nbr-seance">Nombre de séances effectuées</label>
+        <input type="number" id="nbr-seance">
+        </li>
+        <li>
+        <label for="retro">Montant de la rétrocession</label>
+        <input type="number" id="retro">
+        </li>
+        <li>
+        <label for="remumeration">Rémunération effectuée</label>
+        <input type="number" id="remumeration">
+        </li>
+    </ul>
 </form>
 </template>
 
@@ -34,6 +34,7 @@ import { mapGetters } from 'vuex'
 export default {
   name: 'MonthForm',
   props: {
+      editMonth: {}
   },
   computed: {
     ...mapGetters({
diff --git a/src/components/MonthPresentation.vue b/src/components/MonthPresentation.vue
index 22075bf..bb02fd2 100644
--- a/src/components/MonthPresentation.vue
+++ b/src/components/MonthPresentation.vue
@@ -1,72 +1,128 @@
 <template>
 <div class="month-presentation">
   <div class="date">
-    {{ month.date }}
+    {{ TheDate }}
   </div>
-  <div class="infos">
+  <div id="display">
     <ul>
-        <li> <span class="label"> CA théorique </span> <span class="value">{{ month.ca_theo ?? "∅"}}€</span></li>
-        <li> <span class="label"> CA à la rétrocession </span> <span class="value">{{ month.ca_retro ?? "∅"}}€</span></li>
-        <li> <span class="label"> CA réactualisé </span> <span class="value">{{ month.ca_react ?? "∅"}}€</span></li>
-        <li> <span class="label"> Nombre de séances effectuée</span> <span class="value">{{ month.nbr_seances ?? "∅"}}</span></li>
-        <li> <span class="label"> Montant de la rétrocession </span> <span class="value">{{ month.retro ?? "∅"}}€</span></li>
-        <li> <span class="label"> Rémunération effectuée </span> <span class="value">{{ month.remumeration ?? "∅"}}€</span></li>
+        <li> 
+            <label for="ca-theo">CA théorique</label>
+            <span class="value" v-show="!editing">{{ TheMonth.ca_theo ?? "∅"}}€</span>
+            <input type="number" v-model="monthCopy.ca_theo"  id="ca-theo" class="value" v-show="editing">
+        </li>
+        <li> 
+            <label for="ca-retro">CA rétrocession</label>
+            <span class="value" v-show="!editing">{{ TheMonth.ca_retro ?? "∅"}}€</span>
+            <input type="number" v-model="monthCopy.ca_retro" id="ca-retro" class="value" v-show="editing">
+        </li>
+        <li> 
+            <label for="ca-react">CA réactualisé</label>
+            <span class="value" v-show="!editing">{{ TheMonth.ca_react ?? "∅"}}€</span>
+            <input type="number" v-model="monthCopy.ca_react" id="ca-react" class="value" v-show="editing">
+        </li>
+        <li> 
+            <label for="nbr-seances">Nombre de séances effectuées</label>
+            <span class="value" v-show="!editing">{{ TheMonth.nbr_seances ?? "∅"}}</span>
+            <input type="number" v-model="monthCopy.nbr_seances" id="nbr-seances" class="value" v-show="editing">
+        </li>
+        <li> 
+            <label for="retro">Montant de la rétrocession</label>
+            <span class="value" v-show="!editing">{{ TheMonth.retro ?? "∅"}}€</span>
+            <input type="number" v-model="monthCopy.retro" id="retro" class="value" v-show="editing">
+        </li>
+        <li> 
+            <label for="remumeration">Rémunération effectuée</label>
+            <span class="value" v-show="!editing">{{ TheMonth.remumeration ?? "∅"}}€</span>
+            <input type="number" v-model="monthCopy.remumeration" id="remumeration" class="value" v-show="editing">
+        </li>
     </ul>
   </div>
   <div class="actions">
-    <button class="edit"> Éditer </button>
+    <button class="edit" @click="toggleEdit" v-show="!editing"> Éditer </button>
+    <button class="validate" @click="save" v-show="editing"> Valider </button>
+    <button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
   </div>
 </div>
 </template>
 
 <script>
+import { mapActions } from 'vuex'
 export default {
   name: 'MonthPresentation',
   props: {
-      month: {
+      TheDate: String,
+      TheMonth: {
           type: Object,
       }
   },
+  data () {
+      return {
+          editing: false,
+          monthCopy: Object,
+      }
+  },
+  mounted: function () {
+        this.monthCopy =  {...this.TheMonth}
+      },
   computed: {
   },
+  methods: {
+    ...mapActions('travail', {
+        'updateMonth': 'updateMonth',
+    }),
+      toggleEdit: function () {
+          this.editing = !this.editing
+          },
+      save: function () {
+          this.updateMonth({date: this.TheDate, month: this.monthCopy})
+          this.toggleEdit()
+          },
+      cancel: function () {
+          this.monthCopy =  {...this.TheMonth}
+          this.toggleEdit()
+          },
+  }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.month-presentation {
-    display: inline-flex;
-    flex-direction: row;
-    background-color: mintcream;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    border-radius: 10px;
+    .month-presentation {
+        display: inline-flex;
+        flex-direction: row;
+        background-color: mintcream;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        border-radius: 10px;
+        }
+    .month-presentation > * {
+        margin: 20px;
     }
-.month-presentation > * {
-    margin: 20px;
-}
 
-.date {
-    font-size: 1.5em;
-    font-weight: bold;
-}
+    .date {
+        font-size: 1.5em;
+        font-weight: bold;
+    }
 
-ul {
-    list-style-type: none;
-    padding: 0;
-    display: flex;
-    flex-flow: row wrap;
-}
-li {
-    margin: 3px;
-    width: 30%;
-    display: flex;
-    flex-direction: column-reverse;
-}
-.value {
-    font-size: 1.5em;
-    font-weight: bold;
-}
+    ul {
+        list-style-type: none;
+        padding: 0;
+        display: flex;
+        flex-flow: row wrap;
+    }
+    li {
+        margin: 3px;
+        width: 30%;
+        display: flex;
+        flex-direction: column-reverse;
+    }
+    .value {
+        font-size: 1.5em;
+        font-weight: bold;
+    }
 
+    .novisible {
+        display: None;
+    }
 </style>
diff --git a/src/components/MonthsUl.vue b/src/components/MonthsUl.vue
index 0c2b5d5..f1962e3 100644
--- a/src/components/MonthsUl.vue
+++ b/src/components/MonthsUl.vue
@@ -1,7 +1,7 @@
 <template>
 <ul>
-    <li v-for="month in months" :key="month.date">
-         <month-presentation :month=month></month-presentation>
+    <li v-for="date in dates" :key="date">
+         <month-presentation :TheDate=date :TheMonth=getMonth(date)></month-presentation>
     </li>
 </ul>
 
@@ -19,7 +19,8 @@ export default {
   },
   computed: {
     ...mapGetters({
-        months: "travail/Months",
+        dates: "travail/MonthsDate",
+        getMonth: "travail/getMonth",
     })
   },
 }
diff --git a/src/store/travail/index.js b/src/store/travail/index.js
index b36b468..6fce0ab 100644
--- a/src/store/travail/index.js
+++ b/src/store/travail/index.js
@@ -3,81 +3,86 @@ const travail = {
     state () {
         return {
             empty: {
-                date: "", 
                 ca_theo: null, // ca théorique basé sur les séances effectuées
-                nbr_seances: 0, // Nombre de séances effectuées sur le mois
+                nbr_seances: null, // Nombre de séances effectuées sur le mois
                 ca_retro: null, // ca au moment de la rétrocession
                 ca_react: null, // ca réactualisé
                 retro: 0, // montant de la rétrocession
                 remumeration: 0, // rémunération décidée
             },
-            months: [
-                {
-                    date: "2021/01", 
+            months: { 
+                "2021/01": {
                     ca_theo: null, // ca théorique basé sur les séances effectuées
-                    nbr_seances: 0, // Nombre de séances effectuées sur le mois
+                    nbr_seances: null, // Nombre de séances effectuées sur le mois
                     ca_retro: 6747, // ca au moment de la rétrocession
                     ca_react: null, // ca réactualisé
                     retro: 893, // montant de la rétrocession
                     remumeration: 2000, // rémunération décidée
                 },
-                {
-                    date: "2021/02", 
+                "2021/02": {
                     ca_theo: null, // ca théorique basé sur les séances effectuées
-                    nbr_seances: 0, // Nombre de séances effectuées sur le mois
+                    nbr_seances: null, // Nombre de séances effectuées sur le mois
                     ca_retro: 5183, // ca au moment de la rétrocession
                     ca_react: null, // ca réactualisé
                     retro: 665, // montant de la rétrocession
                     remumeration: 1500, // rémunération décidée
                 },
-                {
-                    date: "2021/03", 
+                "2021/03": {
                     ca_theo: null, // ca théorique basé sur les séances effectuées
-                    nbr_seances: 0, // Nombre de séances effectuées sur le mois
+                    nbr_seances: null, // Nombre de séances effectuées sur le mois
                     ca_retro: 7088, // ca au moment de la rétrocession
                     ca_react: null, // ca réactualisé
                     retro: 855, // montant de la rétrocession
                     remumeration: 2000, // rémunération décidée
                 },
-                {
-                    date: "2021/04", 
+                "2021/04": {
                     ca_theo: null, // ca théorique basé sur les séances effectuées
-                    nbr_seances: 0, // Nombre de séances effectuées sur le mois
+                    nbr_seances: null, // Nombre de séances effectuées sur le mois
                     ca_retro: 4194, // ca au moment de la rétrocession
                     ca_react: 5630, // ca réactualisé
                     retro: 627, // montant de la rétrocession
                     remumeration: 2000, // rémunération décidée
                 },
-                {
-                    date: "2021/05", 
+                "2021/05": {
                     ca_theo: null, // ca théorique basé sur les séances effectuées
-                    nbr_seances: 0, // Nombre de séances effectuées sur le mois
+                    nbr_seances: null, // Nombre de séances effectuées sur le mois
                     ca_retro: 5564, // ca au moment de la rétrocession
                     ca_react: 6335, // ca réactualisé
                     retro: 699, // montant de la rétrocession
                     remumeration: 2800, // rémunération décidée
                 },
-                {
-                    date: "2021/06", 
+                "2021/06": {
                     ca_theo: null, // ca théorique basé sur les séances effectuées
-                    nbr_seances: 0, // Nombre de séances effectuées sur le mois
+                    nbr_seances: null, // Nombre de séances effectuées sur le mois
                     ca_retro: 5442, // ca au moment de la rétrocession
                     ca_react: 6335, // ca réactualisé
                     retro: 638, // montant de la rétrocession
                     remumeration: 2800, // rémunération décidée
                 },
-            ],
+            },
         }
     },
     getters: {
-        cCount (state) {return state.months.length},
+        Count (state) {return state.months.length},
         TheEmptyMonth (state) {return state.empty},
-        Months (state) {
-            return state.months.sort((a, b) => new Date(b.date) - new Date(a.date))
+        MonthsDate (state) {
+            return Object.keys(state.months).sort()
+            //return state.months.sort((a, b) => new Date(b.date) - new Date(a.date))
+        },
+        getMonth: (state) => (date) => {
+            return state.months[date]
         },
     },
     mutations: {
-    }
+        updateMonth (state, {date, month}) {
+            state.months[date] = month
+        }
+    },
+    actions: {
+        updateMonth (context, {date, month}) {
+            context.commit('updateMonth', {date, month})
+        },
+    },
 }
 
 export default travail