diff --git a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
index 4f9ecf46d..ca7dde4a4 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
@@ -39,6 +39,8 @@ div.subheader {
   height: 130px;
 }
 
+//// VUEJS ////
+
 div.vue-component {
   padding: 1.5em;
   margin: 2em 0;
@@ -55,3 +57,60 @@ div.vue-component {
   }
   dd { margin-left: 1em; }
 }
+
+//// MODAL ////
+.modal-mask {
+   position: fixed;
+   z-index: 9998;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   background-color: rgba(0, 0, 0, 0.5);
+   display: table;
+   transition: opacity 0.3s ease;
+}
+.modal-wrapper {
+   display: table-cell;
+   vertical-align: middle;
+}
+.modal-container {
+   width: 500px;
+   margin: 0px auto;
+   background-color: #fff;
+   border-radius: 0px;
+   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
+   transition: all 0.3s ease;
+   font-family: Helvetica, Arial, sans-serif;
+}
+.modal-header h2 {
+   margin-top: 0;
+   color: #42b983;
+}
+.modal-body {
+   margin: 0;
+}
+.modal-default-button {
+   display: block;
+   margin-top: 1rem;
+}
+
+/*
+* The following styles are auto-applied to elements with
+* transition="modal" when their visibility is toggled
+* by Vue.js.
+*
+* You can easily play with the modal transition by editing
+* these styles.
+*/
+.modal-enter {
+   opacity: 0;
+}
+.modal-leave-active {
+   opacity: 0;
+}
+.modal-enter .modal-container,
+.modal-leave-active .modal-container {
+   -webkit-transform: scale(1.1);
+   transform: scale(1.1);
+}
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
index ba82b3b9d..416c6ed42 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
@@ -1,14 +1,58 @@
 <template>
-   <div class="vue-component">
-      <h3>{{ $t('title.requestor') }}</h3>
-      {{ accompanying_course.id }}
-      {{ accompanying_course.remark }}
-   </div>
+<div class="vue-component">
+   <h3>{{ $t('title.requestor') }}</h3>
+   {{ accompanying_course.id }}
+   {{ accompanying_course.remark }}<br><br>
+
+   
+   <!--button id="show-modal" class="sc-button bt-create"
+      @click="showModal = true">{{ $t('action.showModal') }}
+   </button-->
+   
+   <button id="show-modal" class="sc-button bt-create" 
+      data-toggle="modal" data-target="#myModal"
+      @click="showModal = true">
+      {{ $t('action.showModal') }}
+   </button>
+
+   <!--modal v-if="showModal" @close="showModal = false">
+   </modal-->
+   
+   <modal-bootstrap v-if="showModal" @close="showModal = false">
+      <template v-slot:header>
+         <h5 class="modal-title">Le titre de ma modale</h5>
+      </template>
+      <template v-slot:body>
+         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus luctus facilisis suscipit. Cras pulvinar, purus sagittis pulvinar porta, enim ex posuere lacus, in pulvinar lectus magna in odio. Nullam iaculis congue lorem ac suscipit. Proin ut rutrum augue. Ut vehicula risus nec hendrerit ullamcorper. Ut volutpat eu mi eget viverra. Morbi dictum placerat suscipit. </p>
+         <p>Quisque non erat tincidunt, lacinia justo ut, pulvinar nisl. Nunc id enim ut sem pretium interdum consectetur eu quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam posuere erat eget augue finibus luctus. Maecenas auctor, tortor non luctus ultrices, neque neque porttitor ex, nec lacinia lorem ligula et elit. Sed tempor nulla vitae lorem sollicitudin dictum. Vestibulum nec arcu eget elit pulvinar pretium. Phasellus facilisis metus sed diam luctus, feugiat scelerisque velit dignissim.</p>
+      </template>
+      <template v-slot:footer>
+         <li>
+            <button class="sc-button green" 
+               @click="$emit('close')">{{ $t('action.ok')}}
+            </button>
+         </li>
+      </template>
+   </modal-bootstrap>
+   
+</div>
 </template>
 
 <script>
+import Modal from 'ChillPersonAssets/vuejs/_components/Modal'
+import ModalBootstrap from 'ChillPersonAssets/vuejs/_components/ModalBootstrap'
+
 export default {
    name: 'Requestor',
+   components: {
+      //Modal,
+      ModalBootstrap
+   },
+   data() {
+      return {
+         showModal: false
+      }
+   },
    computed: {
       accompanying_course() {
          return this.$store.state.accompanying_course
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
index 040b0cf98..440bd9ff8 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
@@ -31,6 +31,10 @@ const messages = {
          remove: "Enlever",
          delete: "Supprimer",
          save: "Enregistrer",
+         showModal: "Ouvrir une modale",
+         ok: "OK",
+         cancel: "Annuler",
+         close: "Fermer"
       }
    }
 };
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue
new file mode 100644
index 000000000..75107b1b1
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/Modal.vue
@@ -0,0 +1,33 @@
+<template>
+<transition name="modal">
+   <div class="modal-mask">
+      <div class="modal-wrapper">
+         <div class="modal-container">
+            <div class="modal-header">
+               <slot name="header"></slot>
+            </div>
+            <div class="modal-body">
+               <slot name="body"></slot>
+            </div>
+            <div class="modal-footer">
+               <ul class="record_actions">
+                  <slot name="footer"></slot>
+                  <li>
+                     <button class="sc-button grey" @click="$emit('close')">
+                        {{ $t('action.close') }}
+                     </button>
+                  </li>
+               </ul>
+            </div>
+         </div>
+      </div>
+   </div>
+</transition>
+</template> 
+
+<script>
+export default {
+   name: 'Modal',
+   props: ['showModal']
+}
+</script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/ModalBootstrap.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/ModalBootstrap.vue
new file mode 100644
index 000000000..bb2e04491
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/_components/ModalBootstrap.vue
@@ -0,0 +1,36 @@
+<template>
+<transition name="modal-bootstrap">
+<div id="myModal" class="modal"><!--  tabindex="-1" role="dialog" -->
+   <div class="modal-dialog" role="document">
+      <div class="modal-content">
+         <div class="modal-header">
+            <slot name="header">
+               <h5 class="modal-title">Modal title</h5>
+            </slot>
+            <!--button type="button" class="close" data-dismiss="modal" aria-label="Close">
+               <span aria-hidden="true">&times;</span>
+            </button-->
+         </div>
+         <div class="modal-body">
+            <slot name="body"></slot>
+         </div>
+         <div class="modal-footer">
+            <!--button type="button" class="sc-button grey" data-dismiss="modal">Close</button>
+            <button type="button" class="sc-button green">Save changes</button-->
+            <button class="sc-button grey" @click="$emit('close')">
+               {{ $t('action.close') }}
+            </button>
+         </div>
+      </div>
+   </div>
+</div>
+</transition>
+</template> 
+
+<script>
+export default {
+   name: 'ModalBootstrap',
+   props: ['showModal'],
+   emits: ['close']
+}
+</script>