diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.js b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.js
deleted file mode 100644
index 70ae23168..000000000
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.js
+++ /dev/null
@@ -1,20 +0,0 @@
-
-import Vue from 'vue';
-
-const AccompanyingCourseComponent = {
-  data() {
-    return {
-        id: 7,
-        persons_associated: []
-    };
-  },
-};
-
-let app = Vue.CreateApp({
-  delimiters: ['${', '}']
-})
-  .component(AccompanyingCourseComponent)
-;
-
-
-app.mount('#app');
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue
index 0ce30798c..1b9f60219 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue
@@ -1,105 +1,88 @@
 <template>
-   <div id="kkk">
-        <h3>Usagers concernés</h3>
-        <dl>
-            <dt>id</dt>
-                <dd>{{ course.id }}</dd>
-            <dt>opening_date</dt>
-                <dd>{{ course.opening_date }}</dd>
-            <dt>closing_date</dt>
-                <dd>{{ course.closing_date }}</dd>
-            <dt>remarkzzzzz</dt>
-                <dd>{{ course.remark }}</dd>
-            <dt>closing_motive</dt>
-                <dd>{{ 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 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>
+   <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>
 </template>
 
 <script>
-   import { createApp } from 'vue';
-
-   const App = {
-      name: 'AppAccompanyingCourse',
-      //delimiters: ['${', '}'], works only for template "in browser", not for template in vue files
-      data() {
-        return { course: 
-          {
-            id: 50,
-            opening_date: null,
-            closing_date: null,
-            remark: 'bim',
-            closing_motive: 'bam',
-            counter: 0,
-            persons: [] 
-          }
-        };
+export default {
+   name: 'AccompanyingCourse',
+   data() {
+      return {
+         accompanying_course: {}
+      };
+   },
+   computed: {
+      accompanyingCourseId() {
+         return window.accompanyingCourseId;
+      }
+   },
+   methods: {
+      addPerson() {
+         this.accompanying_course.persons.push({
+            "firstname": "Lisa",
+            "lastname": "Simpson",
+            "startdate": "1975-09-15",
+            "enddate": "2021-04-20"
+         })
       },
-      computed: {
-        courseId() {
-          return window.courseId;
-        } 
-      },
-      async mounted() {
-          console.log('mounted');
-          console.log(this.data);
-          console.log(this.courseId);
-          await this.getCourse();
-          console.log(this.data);
-          console.log('mounted stop');
-      },
-      methods: {
-        async getCourse() {
-          console.log('get course start');
-          console.log(this);
-          courseId = this.courseId;
-          let data_;
-          return fetch(`/fr/api/parcours/${courseId}/show`)
+      async getAccompanyingCourse() {
+         let data_;
+         return fetch(`/fr/api/parcours/${accompanyingCourseId}/show`)
             .then(response => response.json())
             .then(data => {
-              console.log(data);
-              console.log(this);
-              this.$data.course = data;
-              console.log(this.data);
-              console.log('get course finish');
-          });
-        }
+               this.$data.accompanying_course = data;
+            });
       }
-   };
-
-export default App;
+   },
+   async mounted() {
+      await this.getAccompanyingCourse();
+   }
+};
 </script>
 
-<style></style>
+<style scoped></style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.js b/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.js
deleted file mode 100644
index ca0f4ab8a..000000000
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import Vue from 'vue'
-import VueResource from 'vue-resource'
-
-Vue.use(VueResource);
-
-export default {
-  template: '#vue-usagers',
-  delimiters: ['${', '}'],
-  data () {
-      return {
-          persons_associated: []
-      };
-  },
-  http: {
-      root: 'http://localhost:8001/fr/api'
-  },
-  methods: {
-      addPerson(){
-          this.persons_associated.persons.push({"firstname": "Lisa", "lastname": "Simpson", "startdate": "1975-09-15", "enddate": "2021-04-20" })
-      }
-  },
-  computed: {
-      counter() {
-          return this.persons_associated.persons.length;
-      }
-  },
-  created() {
-      this.$resource('parcours/861/show').get().then((response) => {
-          this.persons_associated = response.data
-      }, (response) => {
-          console.log('erreur', response);
-      });
-  }
-};
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue b/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue
index 8954fdf53..8d1c8b69c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue
@@ -1,34 +1 @@
- import Vue from 'vue'
- import VueResource from 'vue-resource'
-
- Vue.use(VueResource)
-
- export default {
-     template: '#vue-usagers',
-     delimiters: ['${', '}'],
-     data () {
-         return {
-             persons_associated: []
-         }
-     },
-     http: {
-         root: 'http://localhost:8001/fr/api'
-     },
-     methods: {
-         addPerson(){
-             this.persons_associated.persons.push({"firstname": "Lisa", "lastname": "Simpson", "startdate": "1975-09-15", "enddate": "2021-04-20" })
-         }
-     },
-     computed: {
-         counter() {
-             return this.persons_associated.persons.length
-         }
-     },
-     created() {
-         this.$resource('parcours/861/show').get().then((response) => {
-             this.persons_associated = response.data
-         }, (response) => {
-             console.log('erreur', response);
-         })
-     }
- }
+ 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/js/index.js b/src/Bundle/ChillPersonBundle/Resources/public/js/index.js
index 6ca083f32..1fd76e2df 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/js/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/js/index.js
@@ -2,8 +2,8 @@ import AccompanyingCourseComponent from './AccompanyingCourse.vue';
 import { createApp } from 'vue';
 
 const app = createApp({
-    name: 'AccCourseGlobal',
-    template: '<div class="abcde"><accompanying-course></accompanying-course></div>',
+   name: 'AppGlobal',
+   template: '<div class="vue-component"><accompanying-course></accompanying-course></div>',
 })
 .component('accompanying-course', AccompanyingCourseComponent)
 .mount('#app');
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig
index 4b6321998..87017bbc1 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/show.html.twig
@@ -6,16 +6,14 @@
 
 {% block content %}
 
-    <h1>{{ block('title') }}</h1>
+   <h1>{{ block('title') }}</h1>
+   
+   <div id="app"></div>    
 
-  <script type="text/javascript">
-    window.courseId = {{ accompanyingCourse.id|e('js') }};
-    console.log(window.courseId);
-  </script>
-  
-    
-    <div id="app"></div>    
-      
-    {{ encore_entry_script_tags('accompanying_course') }}
+   {{ encore_entry_script_tags('accompanying_course') }}
 
+   <script type="text/javascript">
+      window.accompanyingCourseId = {{ accompanyingCourse.id|e('js') }};
+   </script>
+   
 {% endblock %}