diff --git a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
index bb98596a0..20ce571ac 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/chill/chillmain.scss
@@ -265,6 +265,25 @@ table.table-bordered {
    }
 }
 
+/// display definition list
+//  with dt and dd on same line
+
+dl.definition-inline {
+   dd {
+      display: inline;
+      margin: 0;
+      &:after{
+         display: block;
+         content: '';
+      }
+   }
+   dt{
+      display: inline-block;
+      min-width: 200px;
+   }
+}
+
+
 /// when there is no data
 .custom_field_no_data,
 .chill-no-data-statement {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
index a97fb9da6..740d1e111 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
@@ -520,9 +520,13 @@ div#workEditor {
             }
          }
 
-         div.item-title {
+         .item-title {
             font-weight: bold;
          }
+         .item-details {
+            margin: 1em 2em;
+            font-size: 85%;
+         }
 
          ul.list-evaluations,
          ul.list-objectives,
@@ -555,6 +559,10 @@ div#workEditor {
       &#persons {
          margin-top: 1.5em;
       }
+
+      ul.record_actions {
+         margin-bottom: 0;
+      }
    }
 
    div#errors {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
index 455dc2adb..b9f470716 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
@@ -5,7 +5,41 @@
          {{ e.evaluation.title.fr }}
       </div>
       <div v-if="!editEvaluation">
-         voit l'évaluation
+         <dl class="item-details definition-inline">
+
+            <dt v-if="e.startDate">
+               {{ $t('startDate') }} :</dt>
+            <dd v-if="e.startDate">
+               {{ e.startDate.datetime }}</dd>
+
+            <dt v-if="e.endDate">
+               {{ $t('endDate') }} :</dt>
+            <dd v-if="e.endDate">
+               {{ e.endDate.datetime }}</dd>
+
+            <dt v-if="e.maxDate">
+               {{ $t('maxDate') }} :</dt>
+            <dd v-if="e.maxDate">
+               {{ e.maxDate.datetime }}</dd>
+
+            <dt v-if="e.warningInterval">
+               {{ $t('warningInterval') }} :</dt>
+            <dd v-if="e.warningInterval">
+               {{ e.warningInterval }}</dd>
+
+            <dt v-if="e.documents && e.documents.length > 0">
+               {{ $t('documents') }} :</dt>
+            <dd v-if="e.documents && e.documents.length > 0">
+               {{ e.documents.length }}</dd>
+
+         </dl>
+         <dl class="item-details">
+            <dt v-if="e.comment">
+               {{ $t('comment') }} :</dt>
+            <dd v-if="e.comment">
+               {{ e.comment }}</dd>
+
+         </dl>
          <ul class="record_actions">
             <li>
                <a class="btn btn-sm btn-update" @click="toggleEditEvaluation(e)">{{ $t('action.edit') }}</a>
@@ -13,7 +47,7 @@
          </ul>
       </div>
       <div v-if="editEvaluation">
-         <form-evaluation ref="FormEvaluation">
+         <form-evaluation ref="FormEvaluation" :key="e.id">
          </form-evaluation>
          <ul class="record_actions">
             <li>
@@ -33,6 +67,12 @@ const i18n = {
          no_evaluation_associated: "Aucune évaluation associée",
          add_an_evaluation: "Évaluations disponibles",
          evaluation_has_no_evaluation: "Aucune évaluation disponible",
+         startDate: "Date d'ouverture",
+         endDate: "Date de fin",
+         maxDate: "Date d'échéance",
+         warningInterval: "Rappel (jours)",
+         comment: "Note publique",
+         documents: "Documents",
       }
    }
 };
@@ -69,7 +109,3 @@ export default {
    }
 }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
index b08560de6..57f5eb1de 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
@@ -3,8 +3,9 @@
    <!--h2>
       {{ $t('evaluation_title') }}
    </h2-->
+
    <div class="m-md-3">
-      <div class="row mb-3">
+      <!--div class="row mb-3">
          <label class="col-sm-4 col-form-label">{{ $t('evaluation_status') }}</label>
          <div class="col-sm-8">
             <select class="form-select form-select-sm" v-model="status">
@@ -14,53 +15,57 @@
                </option>
             </select>
          </div>
-      </div>
+      </div-->
+
       <div class="row mb-3">
          <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
             {{ $t('evaluation_startdate') }}
          </label>
          <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-            <input class="form-control form-control-sm" type="date" v-model="startdate"/>
+            <input class="form-control form-control-sm" type="date" v-model="startDate"/>
          </div>
 
          <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
             {{ $t('evaluation_enddate') }}
          </label>
          <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-            <input class="form-control form-control-sm" type="date" v-model="enddate"/>
+            <input class="form-control form-control-sm" type="date" v-model="endDate"/>
          </div>
       </div>
+
       <div class="row mb-3">
          <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
             {{ $t('evaluation_maxdate') }}
          </label>
          <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-            <input class="form-control form-control-sm" type="date" v-model="maxdate"/>
+            <input class="form-control form-control-sm" type="date" v-model="maxDate"/>
          </div>
 
          <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
             {{ $t('evaluation_warning_interval') }}
          </label>
          <div class="col-8 col-sm-4 col-md-8 col-lg-4">
-            <input class="form-control form-control-sm" type="date" v-model="warningInterval"/>
+            <input class="form-control form-control-sm" type="number" v-model.number="warningInterval"/>
          </div>
       </div>
+
       <div class="row mb-3">
          <label class="col-sm-4 col-form-label">{{ $t('evaluation_public_comment') }}</label>
          <div class="col-sm-8">
             <ckeditor
                :editor="editor"
                :placeholder="$t('evaluation_comment_placeholder')"
-               v-model="public_note"
+               v-model="comment"
                tag-name="textarea"
             ></ckeditor>
          </div>
       </div>
+
       <div class="row mb-3">
          <label class="col-sm-4 col-form-label">{{ $t('evaluation_generate_a_document') }}</label>
          <div class="col-sm-8">
             <div class="input-group">
-               <select class="form-select form-select-sm" v-model="templateDoc">
+               <select class="form-select form-select-sm" v-model="template">
                   <option disabled value="">{{ $t('evaluation_choose_a_template') }}</option>
                   <option>A</option>
                </select>
@@ -68,12 +73,13 @@
             </div>
          </div>
       </div>
-      <div class="row mb-3">
+
+      <!--div class="row mb-3">
          <label class="col-sm-4 col-form-label">{{ $t('evaluation_add_a_document') }}</label>
          <div class="col-sm-8">
-            <button class="btn btn-create btn-sm" @click="addDocument"></button>
+            <button class="btn btn-create btn-sm" @click="documents"></button>
          </div>
-      </div>
+      </div-->
    </div>
 </div>
 </template>
@@ -91,7 +97,7 @@ const i18n = {
          evaluation_startdate: "Date d'ouverture",
          evaluation_enddate: "Date de fin",
          evaluation_maxdate: "Date d'échéance",
-         evaluation_warning_interval: "Date de rappel",
+         evaluation_warning_interval: "Rappel (jours)",
          evaluation_public_comment: "Note publique",
          evaluation_comment_placeholder: "Commencez à écrire ...",
          evaluation_generate_a_document: "Générer un document",
@@ -114,13 +120,13 @@ export default {
          editor: ClassicEditor,
          evaluation: {
             status: null,
-            startdate: null,
-            enddate: null,
-            maxdate: null,
+            startDate: null,
+            endDate: null,
+            maxDate: null,
             warningInterval: null,
-            public_note: null,
-            templateDoc: null,
-            //addDocument: null
+            comment: null,
+            template: null,
+            //documents: null
          }
       }
    },
@@ -129,39 +135,40 @@ export default {
          get() { return this.evaluation.status; },
          set(v) { this.evaluation.status = v; }
       },
-      startdate: {
-         get() { return this.evaluation.startdate; },
-         set(v) { this.evaluation.startdate = v; }
+      startDate: {
+         get() { return this.evaluation.startDate; },
+         set(v) { this.evaluation.startDate = v; }
       },
-      enddate: {
-         get() { return this.evaluation.enddate; },
-         set(v) { this.evaluation.enddate = v; }
+      endDate: {
+         get() { return this.evaluation.endDate; },
+         set(v) { this.evaluation.endDate = v; }
       },
-      maxdate: {
-         get() { return this.evaluation.maxdate; },
-         set(v) { this.evaluation.maxdate = v; }
+      maxDate: {
+         get() { return this.evaluation.maxDate; },
+         set(v) { this.evaluation.maxDate = v; }
       },
       warningInterval: {
          get() { return this.evaluation.warningInterval; },
          set(v) { this.evaluation.warningInterval = v; }
       },
-      public_note: {
-         get() { return this.evaluation.public_note; },
-         set(v) { this.evaluation.public_note = v; }
+      comment: {
+         get() { return this.evaluation.comment; },
+         set(v) { this.evaluation.comment = v; }
       },
-      templateDoc: {
-         get() { return this.evaluation.templateDoc; },
-         set(v) { this.evaluation.templateDoc = v; }
+      template: {
+         get() { return this.evaluation.template; },
+         set(v) { this.evaluation.template = v; }
       },
       /*
-      addDocument: {
-         get() { return this.evaluation.addDocument; },
-         set(v) { this.evaluation.addDocument = v; }
+      documents: {
+         get() { return this.evaluation.documents; },
+         set(v) { this.evaluation.documents = v; }
       }
       */
    },
    methods: {
       listAllStatus() {
+         console.log('load all status');
          let url = `/api/`;
          fetch(url)
          .then(response => {
@@ -179,7 +186,7 @@ export default {
       }
    },
    mounted() {
-      this.listAllStatus();
+      //this.listAllStatus();
    }
 }
 </script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js
index b85319408..d3267045f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js
@@ -90,6 +90,9 @@ const store = createStore({
           }
 
           return o;
+        }),
+        accompanyingPeriodWorkEvaluations: state.evaluationsPicked.map(e => {
+
         })
       };
     }
@@ -118,6 +121,7 @@ const store = createStore({
     setEvaluationsForAction(state, results) {
       //console.log('set evaluations for action', results);
       state.evaluationsForAction = results;
+      console.log('e4a', state.evaluationsForAction);
     },
     addResultPicked(state, result) {
       state.resultsPicked.push(result);
@@ -163,13 +167,19 @@ const store = createStore({
       let e = {
         type: "accompanying_period_work_evaluation",
         evaluation: evaluation,
-        note: '',
-        results: []
+        //startDate,
+        //endDate,
+        //maxDate,
+        //warningInterval
+        //comment,
+        //documents,
       }
       state.evaluationsPicked.push(e);
+      console.log('ep', state.evaluationsPicked);
     },
     removeEvaluation(state, evaluation) {
       state.evaluationsPicked = state.evaluationsPicked.filter(e => e.id !== evaluation.id);
+      console.log('ep', state.evaluationsPicked);
     },
     setPersonsPickedIds(state, ids) {
       //console.log('persons ids', ids);
@@ -287,7 +297,6 @@ const store = createStore({
           throw { m: 'Error while retriving evaluations for social action', s: response.status, b: response.body };
         })
         .then(data => {
-          //console.log('data retrived', data);
           commit('setEvaluationsForAction', data.results);
         });
     },
@@ -335,6 +344,8 @@ const store = createStore({
       dispatch('getReachablesResultsForAction');
       dispatch('getReachablesGoalsForAction');
       dispatch('getReachablesEvaluationsForAction');
+
+      console.log('ep', this.state.evaluationsPicked);
     },
   }
 });