diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue
index 1b9f60219..fe2447547 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue
@@ -1,56 +1,33 @@
 <template>
-<div>
-   <h3>Usagers concernés</h3>
-   <dl>
-      <dt>id</dt>
-         <dd>{{ accompanying_course.id }}</dd>
-      <dt>opening_date</dt>
-         <dd>{{ accompanying_course.opening_date }}</dd>
-      <dt>closing_date</dt>
-         <dd>{{ accompanying_course.closing_date }}</dd>
-      <dt>remark</dt>
-         <dd>{{ accompanying_course.remark }}</dd>
-      <dt>closing_motive</dt>
-         <dd>{{ accompanying_course.closing_motive }}</dd>
-   </dl>
-   <label>{{counter}} usagers concernés</label>
-   <table class="rounded">
-      <thead>
-         <tr>
-            <th class="chill-orange">firstname</th>
-            <th class="chill-orange">lastname</th>
-            <th class="chill-orange">startdate</th>
-            <th class="chill-orange">enddate</th>
-            <th class="chill-orange">actions</th>
-         </tr>
-      </thead>
-      <tbody>
-         <tr v-for="person in accompanying_course.persons">
-            <td>{{ person.firstname }}</td>
-            <td>{{ person.lastname }}</td>
-            <td>{{ person.startdate }}</td>
-            <td>{{ person.enddate }}</td>
-            <td>
-               <ul class="record_actions">
-                  <li><a class="sc-button bt-show"></a></li>
-                  <li><a class="sc-button bt-update"></a></li>
-                  <li><a class="sc-button bt-delete"></a></li>
-               </ul>
-            </td>
-         </tr>
-      </tbody>
-   </table>
-   <ul class="record_actions">
-      <li>
-         <button class="sc-button bt-create" @click="addPerson">Add Person</button>
-      </li>
-   </ul>
-</div>
+   <div class="vue-component">
+      <h3>Parcours</h3>
+      <dl>
+         <dt>id</dt>
+            <dd>{{ accompanying_course.id }}</dd>
+         <dt>opening_date</dt>
+            <dd>{{ accompanying_course.opening_date }}</dd>
+         <dt>closing_date</dt>
+            <dd>{{ accompanying_course.closing_date }}</dd>
+         <dt>remark</dt>
+            <dd>{{ accompanying_course.remark }}</dd>
+         <dt>closing_motive</dt>
+            <dd>{{ accompanying_course.closing_motive }}</dd>
+      </dl>
+   </div>
+   <persons-associated v-bind:persons_associated="accompanying_course.persons"/>
+   <requestor v-bind:accompanying_course="accompanying_course" />
 </template>
 
 <script>
+import PersonsAssociated from './components/PersonsAssociated.vue';
+import Requestor from './components/Requestor.vue';
+
 export default {
    name: 'AccompanyingCourse',
+   components: { 
+      PersonsAssociated, 
+      Requestor
+   },
    data() {
       return {
          accompanying_course: {}
@@ -62,14 +39,6 @@ export default {
       }
    },
    methods: {
-      addPerson() {
-         this.accompanying_course.persons.push({
-            "firstname": "Lisa",
-            "lastname": "Simpson",
-            "startdate": "1975-09-15",
-            "enddate": "2021-04-20"
-         })
-      },
       async getAccompanyingCourse() {
          let data_;
          return fetch(`/fr/api/parcours/${accompanyingCourseId}/show`)
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue b/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue
index 8d1c8b69c..e8e044ee4 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue
@@ -1 +1,63 @@
- 
+<template>
+   <div class="vue-component">
+      <h3>Usagers concernés</h3>
+      <label>{{ counter }} usagers</label>
+      <table class="rounded">
+        <thead>
+           <tr>
+              <th class="chill-orange">firstname</th>
+              <th class="chill-orange">lastname</th>
+              <th class="chill-orange">startdate</th>
+              <th class="chill-orange">enddate</th>
+              <th class="chill-orange">actions</th>
+           </tr>
+        </thead>
+        <tbody>
+           <tr v-for="person in persons_associated">
+              <td>{{ person.firstname }}</td>
+              <td>{{ person.lastname }}</td>
+              <td>{{ person.startdate }}</td>
+              <td>{{ person.enddate }}</td>
+              <td>
+                 <ul class="record_actions">
+                    <li><a class="sc-button bt-show"></a></li>
+                    <li><a class="sc-button bt-update"></a></li>
+                    <li><a class="sc-button bt-delete"></a></li>
+                 </ul>
+              </td>
+           </tr>
+        </tbody>
+      </table>
+      <ul class="record_actions">
+        <li>
+           <button class="sc-button bt-create" @click="addPerson">Add Person</button>
+        </li>
+      </ul>
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'PersonsAssociated',
+   props: {
+      'persons_associated': Array
+   },
+   computed: {
+      counter() {
+         console.log(typeof(this.persons_associated));
+         // Pourquoi je peux pas compter un tableau avec length ???!!!
+         return this.persons_associated; //.length     <= boum !
+      }
+   },
+   methods: {
+      addPerson() {
+         this.persons_associated.push({
+            "firstname": "Lisa",
+            "lastname": "Simpson",
+            "startdate": "1975-09-15",
+            "enddate": "2021-04-20"
+         })
+      }
+   }
+}
+</script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/components/Requestor.vue b/src/Bundle/ChillPersonBundle/Resources/public/js/components/Requestor.vue
new file mode 100644
index 000000000..30fe1298e
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/components/Requestor.vue
@@ -0,0 +1,20 @@
+<template>
+   <div class="vue-component">
+      <h3>Demandeur</h3>
+      {{ accompanying_course.id }}
+      {{ accompanying_course.remark }}
+   </div>
+</template>
+
+<script>
+export default {
+   name: 'Requestor',
+   props: {
+      'accompanying_course': Object
+   },
+   computed: {
+   },
+   methods: {
+   }
+}
+</script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/index.js b/src/Bundle/ChillPersonBundle/Resources/public/js/index.js
index 1fd76e2df..c10f555f3 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/index.js
@@ -1,9 +1,9 @@
-import AccompanyingCourseComponent from './AccompanyingCourse.vue';
+import AccompanyingCourse from './AccompanyingCourse.vue';
 import { createApp } from 'vue';
 
 const app = createApp({
-   name: 'AppGlobal',
-   template: '<div class="vue-component"><accompanying-course></accompanying-course></div>',
+   name: 'App',
+   template: `<accompanying-course></accompanying-course>`
 })
-.component('accompanying-course', AccompanyingCourseComponent)
+.component('accompanying-course', AccompanyingCourse)
 .mount('#app');