diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
index a8c06c5c6..6a990998e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/App.vue
@@ -219,7 +219,6 @@ import CKEditor from '@ckeditor/ckeditor5-vue';
 import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
 import AddResult from './components/AddResult.vue';
 import AddEvaluation from './components/AddEvaluation.vue';
-//import FormEvaluation from './components/FormEvaluation.vue';
 import Person from 'ChillPersonAssets/vuejs/_components/Person/Person.vue';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
 import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
@@ -262,7 +261,6 @@ export default {
       ckeditor: CKEditor.component,
       AddResult,
       AddEvaluation,
-      //FormEvaluation,
       AddPersons,
       Person,
       ShowAddress,
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 de677c820..d48169c27 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/AddEvaluation.vue
@@ -1,17 +1,23 @@
 <template>
    <div v-if="hasEvaluation">
-
       <div>
-         <div v-for="e in pickedEvaluations" class="evaluation-title" @click="removeEvaluation(e)">
-            <i class="fa fa-times"></i>
+         <div v-for="e in pickedEvaluations" class="item-title">
+            <i class="fa fa-fw fa-times" @click="removeEvaluation(e)"></i>
+            <i class="fa fa-fw fa-pencil" @click="editEvaluation(e)"></i>
             {{ e.evaluation.title.fr }}
+            <!--
+            <form-evaluation
+               :key="e.id">
+            </form-evaluation>
+            -->
          </div>
       </div>
-
    </div>
 </template>
 
 <script>
+import FormEvaluation from './FormEvaluation.vue';
+
 const i18n = {
    messages: {
       fr: {
@@ -24,6 +30,9 @@ const i18n = {
 
 export default {
    name: "AddEvaluation",
+   components: {
+      FormEvaluation
+   },
    props: [],
    i18n,
    data() {
@@ -42,6 +51,9 @@ export default {
       removeEvaluation(e) {
          this.$store.commit('removeEvaluation', e);
          return;
+      },
+      editEvaluation(e) {
+         console.log('edit');
       }
    }
 }
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 d77771dae..a240d66ef 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue
@@ -1,30 +1,86 @@
 <template>
-   affiche le formulaire
-   <!--
-   <div>
-      <h3>
-         {{ $t('evaluation_title') }}
-      </h3>
+<div>
+   <!--h2>
+      {{ $t('evaluation_title') }}
+   </h2-->
+   <div class="m-md-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-control" v-model="status">
+               <option disabled value="">{{ $t('evaluation_choose_a_status') }}</option>
+               <option v-for="s in listAllStatus" :value="s.id">
+                  {{ s.id }}
+               </option>
+            </select>
+         </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" 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" 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" 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" type="date" v-model="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"
+               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-control" v-model="templateDoc">
+                  <option disabled value="">{{ $t('evaluation_choose_a_template') }}</option>
+                  <option>A</option>
+               </select>
+               <button class="btn btn-update change-icon" type="button"><i class="fa fa-fw fa-cog"></i></button>
+            </div>
+         </div>
+      </div>
+      <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>
+         </div>
+      </div>
    </div>
-   <pre>
-{{ $t('evaluation_status') }}
-{{ $t('evaluation_choose_a_status') }}
-{{ $t('evaluation_startdate') }}
-{{ $t('evaluation_enddate') }}
-{{ $t('evaluation_maxdate') }}
-{{ $t('evaluation_warning_interval') }}
-{{ $t('evaluation_public_comment') }}
-{{ $t('evaluation_generate_a_document') }}
-{{ $t('evaluation_choose_a_template') }}
-{{ $t('evaluation_add_a_document') }}
-{{ $t('evaluation_add') }}
-</pre>
-   -->
+</div>
 </template>
 
 <script>
+import CKEditor from '@ckeditor/ckeditor5-vue';
+import ClassicEditor from 'ChillMainAssets/module/ckeditor5/index.js';
 
 const i18n = {
    messages: {
@@ -37,22 +93,93 @@ const i18n = {
          evaluation_maxdate: "Date d'échéance",
          evaluation_warning_interval: "Date de rappel",
          evaluation_public_comment: "Note publique",
+         evaluation_comment_placeholder: "Commencez à écrire ...",
          evaluation_generate_a_document: "Générer un document",
          evaluation_choose_a_template: "Choisir un gabarit",
          evaluation_add_a_document: "Ajouter un document",
-         evaluation_add: "Ajouter"
+         evaluation_add: "Ajouter une évaluation"
       }
    }
 };
 
 export default {
-   name: "NewEvaluation",
+   name: "FormEvaluation",
    props: [],
+   components: {
+      ckeditor: CKEditor.component,
+   },
    i18n,
    data() {
-      return {}
+      return {
+         editor: ClassicEditor,
+         evaluation: {
+            status: null,
+            startdate: null,
+            enddate: null,
+            maxdate: null,
+            warningInterval: null,
+            public_note: null,
+            templateDoc: null,
+            //addDocument: null
+         }
+      }
    },
-   computed: {},
-   methods: {}
+   computed: {
+      status: {
+         get() { return this.evaluation.status; },
+         set(v) { this.evaluation.status = 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; }
+      },
+      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; }
+      },
+      templateDoc: {
+         get() { return this.evaluation.templateDoc; },
+         set(v) { this.evaluation.templateDoc = v; }
+      },
+      /*
+      addDocument: {
+         get() { return this.evaluation.addDocument; },
+         set(v) { this.evaluation.addDocument = v; }
+      }
+      */
+   },
+   methods: {
+      listAllStatus() {
+         let url = `/api/`;
+         fetch(url)
+         .then(response => {
+            if (response.ok) {
+               return response.json();
+            }
+            throw { m: 'yeeah', s: response.status, b: response.body };
+         })
+         ;
+      },
+      submitNewEvaluation() {
+         console.log('submit evaluation');
+         console.log('dispatch action: post/patch/put evaluation');
+         console.log('commit mutation: update state.mutation');
+      }
+   },
+   mounted() {
+      this.listAllStatus();
+   }
 }
 </script>