diff --git a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
index ed6d535e5..f5eb1dc09 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
@@ -182,3 +182,15 @@ div.results {
    color: grey;
    margin-right: 1em;
 }
+
+a.flag-toggle {
+   color: white;
+   padding: 0 10px;
+   cursor: pointer;
+   &:hover {
+      color: white;
+      //border: 1px solid rgba(255,255,255,0.2);
+      text-decoration: underline;
+      border-radius: 20px;
+   }
+}
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index 7a2427b5a..758b49313 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -2,8 +2,11 @@
    <accompanying-course></accompanying-course>
    <persons-associated></persons-associated>
    <requestor></requestor>
+   <social-issue></social-issue>
+   <referrer></referrer>
    <resources></resources>
    <comment></comment>
+   <confirm></confirm>
    <!--test></test-->
 </template>
 
@@ -13,8 +16,11 @@ import { mapState } from 'vuex'
 import AccompanyingCourse from './components/AccompanyingCourse.vue';
 import PersonsAssociated from './components/PersonsAssociated.vue';
 import Requestor from './components/Requestor.vue';
+import SocialIssue from './components/SocialIssue.vue';
+import Referrer from './components/Referrer.vue';
 import Resources from './components/Resources.vue';
 import Comment from './components/Comment.vue';
+import Confirm from './components/Confirm.vue';
 //import Test from './components/Test.vue';
 
 export default {
@@ -23,8 +29,11 @@ export default {
       AccompanyingCourse,
       PersonsAssociated, 
       Requestor,
+      SocialIssue,
+      Referrer,
       Resources,
       Comment,
+      Confirm,
       //Test
    },
    computed: mapState([
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AccompanyingCourse.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AccompanyingCourse.vue
index 80e75414b..b94d73338 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AccompanyingCourse.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/AccompanyingCourse.vue
@@ -1,45 +1,27 @@
 <template>
-   <div class="vue-component">
+   <div class="vue-component" style="display: none;">
       <h3>{{ $t('course.title') }}</h3>
       <dl>
-         <dt>{{ $t('course.id') }}</dt>
-         <dd>{{ accompanyingCourse.id }}</dd>
-         
-         <dt>{{ $t('course.status') }}</dt>
-         <dd>
-            <div v-if="accompanyingCourse.step !== 'DRAFT'"
-               class="badge badge-pill badge-primary">
-               {{ $t('course.step.active') }}</div>
-            <div v-else class="badge badge-pill badge-secondary">
-               {{ $t('course.step.draft') }}</div>
-         </dd>
-         
-         <dt>{{ $t('course.closing_date') }}</dt>
-         <dd v-if="accompanyingCourse.closingDate">{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
-            
-         <dt>{{ $t('course.closing_motive') }}</dt>
-         <dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
-      </dl>
-         
-      <teleport to="#header-accompanying_course-name .grid-4">
-         <toggle-flags
-            v-bind:emergency="accompanyingCourse.emergency"
-            v-bind:confidential="accompanyingCourse.confidential">
-         </toggle-flags>
-      </teleport>
-         
-      <teleport to="#header-accompanying_course-name .grid-3">
-         <p style="text-align: right;">
-            <span v-if="accompanyingCourse.openingDate">
-               <i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
-            </span><br>
-            <span v-if="accompanyingCourse.user">
-               {{ $t('course.by') }}<b>{{ accompanyingCourse.user.username }}</b>
-            </span>
-         </p>
-      </teleport>
-
+        <dt>{{ $t('course.id') }}</dt>
+        <dd>{{ accompanyingCourse.id }}</dd>
+     </dl>
    </div>
+      
+   <teleport to="#header-accompanying_course-name .grid-4">
+      <toggle-flags></toggle-flags>
+   </teleport>
+      
+   <teleport to="#header-accompanying_course-name .grid-3">
+      <p style="text-align: right;">
+         <span v-if="accompanyingCourse.openingDate">
+            <i>{{ $t('course.open_at') }}{{ $d(accompanyingCourse.openingDate.datetime, 'text') }}</i>
+         </span><br>
+         <span v-if="accompanyingCourse.user">
+            {{ $t('course.by') }}<b>{{ accompanyingCourse.user.username }}</b>
+         </span>
+      </p>
+   </teleport>
+
 </template>
 
 <script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
index b34b0d701..f1ccf7667 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
@@ -24,7 +24,11 @@
             ckeditor="ckeditor"
             v-model="content">
          </textarea>
-         <button type="submit" class="sc-button bt-save">{{ $t('action.save') }}</button>
+         <ul class="record_actions">
+            <li>
+               <button type="submit" class="sc-button bt-save">{{ $t('action.save') }}</button>
+            </li>
+         </ul>
       </form>
       
    </div>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue
new file mode 100644
index 000000000..83f2c4c90
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Confirm.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="vue-component">
+     <h3>
+        {{ $t('confirm.title') }}
+        <span v-if="accompanyingCourse.step !== 'DRAFT'"
+           class="badge badge-pill badge-primary">
+           {{ $t('course.step.active') }}
+        </span>
+        <span v-else class="badge badge-pill badge-secondary">
+           {{ $t('course.step.draft') }}
+        </span>
+     </h3>
+     
+     <p v-if="accompanyingCourse.step === 'DRAFT'">
+        {{ $t('confirm.text_draft') }}
+     </p>
+     
+     <dl v-if="accompanyingCourse.closingDate">
+        <dt>{{ $t('course.closing_date') }}</dt>
+        <dd>{{ $d(accompanyingCourse.closingDate.datetime, 'short') }}</dd>
+           
+        <dt>{{ $t('course.closing_motive') }}</dt>
+        <dd v-if="accompanyingCourse.closingMotive">{{ accompanyingCourse.closingMotive.name.fr }}</dd>
+     </dl>
+     
+     <ul class="record_actions">
+        <li>
+           <button class="sc-button bt-save"
+              @click="confirmCourse">
+              {{ $t('confirm.ok') }}
+           </button>
+        </li>
+     </ul>
+  </div>
+</template>
+
+<script>
+export default {
+   name: "Confirm",
+   computed: {
+      accompanyingCourse() {
+         return this.$store.state.accompanyingCourse
+      }
+   },
+   methods: {
+      confirmCourse() {
+         console.log('confirmCourse');
+      }
+   }
+}
+</script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
new file mode 100644
index 000000000..bb7dcf97c
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="vue-component">
+     <h3>{{ $t('referrer.title') }}</h3>
+  </div>
+</template>
+
+<script>
+export default {
+   name: "Referrer",
+}
+</script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
new file mode 100644
index 000000000..e66594b53
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="vue-component">
+     <h3>{{ $t('social_issue.title') }}</h3>
+  </div>
+</template>
+
+<script>
+export default {
+   name: "SocialIssue",
+}
+</script>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue
index 12c372f12..ac5960d19 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue
@@ -1,5 +1,12 @@
 <template>
    <p style="text-align: right;">      
+
+      <a @click="toggleIntensity" class="flag-toggle">
+         {{ $t('course.occasional') }}
+         <i class="fa" :class="{ 'fa-toggle-on': isRegular, 'fa-toggle-off': !isRegular }"></i>
+         {{ $t('course.regular') }}
+      </a>
+
       <button class="badge badge-pill" 
          :class="{ 'badge-primary': isEmergency, 'badge-secondary': !isEmergency }"
          @click="toggleEmergency">
@@ -15,10 +22,18 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 export default {
    name: "ToggleFlags",
-   props: ['emergency', 'confidential'],
    computed: {
+      ...mapState({
+         intensity: state => state.accompanyingCourse.intensity,
+         emergency: state => state.accompanyingCourse.emergency,
+         confidential: state => state.accompanyingCourse.confidential,
+      }),
+      isRegular() {
+         return (this.intensity === 'regular')? true : false;
+      },
       isEmergency() {
          return (this.emergency) ? true : false;
       },
@@ -27,6 +42,21 @@ export default {
       }
    },
    methods: {
+      toggleIntensity() {
+         let value;
+         switch (this.intensity) {
+            case "occasional":
+               value = "regular";
+               break;
+            case "regular":
+               value = "occasional";
+               break;
+            default:
+               //temporaire (modif backend)
+               value = "occasional";
+         }
+         this.$store.dispatch('toggleIntensity', value);
+      },
       toggleEmergency() {
          this.$store.dispatch('toggleEmergency', (!this.isEmergency));
       },
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 fd83eaf3f..4058e179a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
@@ -21,6 +21,8 @@ const appMessages = {
          by: "par ", 
          emergency: "urgent",
          confidential: "confidentiel",
+         regular: "régulier",
+         occasional: "ponctuel"
       },
       persons_associated: {
          title: "Usagers concernés",
@@ -48,6 +50,12 @@ const appMessages = {
          address: "Adresse",
          location: "Localité",
       },
+      social_issue: {
+         title: "Problématiques sociales",
+      },
+      referrer: {
+         title: "Référent",
+      },
       resources: {
          title: "Interlocuteurs privilégiés",
          counter: "Pas d'interlocuteur | 1 interlocuteur | {count} interlocuteurs",
@@ -58,7 +66,13 @@ const appMessages = {
       comment: {
          title: "Ajout d'une note",
          content: "Rédigez une première note..."
-      }
+      },
+      confirm: {
+         title: "Confirmation",
+         text_draft: "Le parcours est actuellement au statut de brouillon. En validant cette étape, vous lui donnez le statut actif.",
+         ok: "Activer le parcours"
+      },
+
    }
 };
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
index 950fba9f1..ebaf52de2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
@@ -62,6 +62,9 @@ let initPromise = getAccompanyingCourse(id)
                //console.log('### mutation: addResource', resource);
                state.accompanyingCourse.resources.push(resource);
             },
+            toggleIntensity(state, value) {
+               state.accompanyingCourse.intensity = value;
+            },
             toggleEmergency(state, value) {
                //console.log('### mutation: toggleEmergency');
                state.accompanyingCourse.emergency = value;
@@ -136,6 +139,14 @@ let initPromise = getAccompanyingCourse(id)
                   resolve();
                })).catch((error) => { commit('catchError', error) });
             },
+            toggleIntensity({ commit }, payload) {
+               console.log(payload);
+               patchAccompanyingCourse(id, { type: "accompanying_period", intensity: payload })
+               .then(course => new Promise((resolve, reject) => {
+                  commit('toggleIntensity', course.intensity);
+                  resolve();
+               })).catch((error) => { commit('catchError', error) });
+            },
             toggleEmergency({ commit }, payload) {
                patchAccompanyingCourse(id, { type: "accompanying_period", emergency: payload })
                .then(course => new Promise((resolve, reject) => {
diff --git a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig
index 6ddb46246..2091cf54a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig
+++ b/src/Bundle/ChillPersonBundle/Resources/views/AccompanyingCourse/banner.html.twig
@@ -22,8 +22,8 @@
 
             <div class="grid-3">
                 <p style="text-align: right;">
-                    <i>ouvert le 11 avril 2019</i><br>
-                    par <b>Soline Maillet | SIPAS</b>
+                    <i>ouvert le {{ accompanyingCourse.openingDate|format_date('short') }}</i><br>
+                    par <b>{{ accompanyingCourse.user.usernameCanonical }}</b>
                 </p>
             </div>