diff --git a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
index 6cf4d23f2..6aa0e1c8d 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
+++ b/src/Bundle/ChillMainBundle/Resources/public/scss/chillmain.scss
@@ -13,9 +13,9 @@
 div#header-accompanying_course-name {
   background: none repeat scroll 0 0 #718596;
   color: #FFF;
-  padding-top: 1em;
-  padding-bottom: 1em;
-
+  h1 {
+    margin: 0.4em 0;       
+  }
   span {
     a {
       color: white;
@@ -54,3 +54,10 @@ div.subheader {
    color: grey;
    margin-right: 1em;
 }
+
+table {
+   ul.record_actions {
+      margin: 0;
+      padding: 0.5em;
+   }
+}
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
index dee070804..319378d7e 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.js
@@ -37,12 +37,16 @@ const messages = {
          ok: "OK",
          cancel: "Annuler",
          close: "Fermer",
-         next: "Suivant",
-         previous: "Précédent",
          back: "Retour",
          check_all: "cocher tout",
          reset: "réinitialiser"
       },
+      nav: {
+         next: "Suivant",
+         previous: "Précédent",
+         top: "Haut",
+         bottom: "Bas",
+      }
    }
 };
 
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
index 7f9b66326..8dd66d0f2 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
@@ -1,5 +1,6 @@
 <template>
    <banner></banner>
+   <sticky-nav></sticky-nav>
    
    <h1 v-if="accompanyingCourse.step === 'DRAFT'">{{ $t('course.title.draft') }}</h1>
    <h1 v-else>{{ $t('course.title.active') }}</h1>
@@ -17,6 +18,7 @@
 <script>
 import { mapState } from 'vuex'
 import Banner from './components/Banner.vue';
+import StickyNav from './components/StickyNav.vue';
 import PersonsAssociated from './components/PersonsAssociated.vue';
 import Requestor from './components/Requestor.vue';
 import SocialIssue from './components/SocialIssue.vue';
@@ -29,6 +31,7 @@ export default {
    name: 'App',
    components: { 
       Banner,
+      StickyNav,
       PersonsAssociated, 
       Requestor,
       SocialIssue,
@@ -44,51 +47,60 @@ export default {
 </script>
 
 <style lang="scss">
-   h1 {
-      margin: 1.5em 0;
-   }
-   div.vue-component {
-      h2 {
-         margin-left: 0.7em;
-         position: relative;
-         &:before {
-            position: absolute;
-            content: "\f192";
-            font-family: "ForkAwesome";
-            color: #718596ab;
-            left: -28px;
-            top: 4px;
+   div#accompanying-course {
+      h1 {
+         margin: 1.5em 0;
+      }
+      div.vue-component {
+         h2 {
+            margin-left: 0.7em;
+            position: relative;
+            &:before {
+               position: absolute;
+               /*
+               content: "\f192";  //circle-dot
+               content: "\f1dd";  //paragraph
+               content: "\f292";  //hashtag
+               content: "\f069";  //asterisk
+               */
+               content: "\f142";  //ellipsis-v
+               font-family: "ForkAwesome";
+               color: #718596ab;
+               left: -22px;
+               top: 4px;
+            }
+            a[name^="section"] {
+               position: absolute;
+               top: -3.5em;  // ref. stickNav
+            }
          }
-         a[name^="section"] {
+         padding: 0.8em 0em;
+         margin: 2em 0;
+         border: 1px dotted #718596ab; 
+         border-radius: 5px;
+         border-left: 1px dotted #718596ab;
+         border-right: 1px dotted #718596ab;
+         /* debug components
+         position: relative; 
+         &:before { 
+            content: "vuejs component";
             position: absolute;
-            top: -2em;
+            left: 1.5em;
+            top: -0.9em;
+            background-color: white;
+            color: grey;
+            padding: 0 0.3em;
+         }
+         */
+         dd { 
+            margin-left: 1em; 
+         }
+         & > div {
+            margin: 1em 3em 0;
+         }
+         table {
          }
       }
-      padding: 0.8em 0em;
-      margin: 2em 0;
-      border: 1px dotted #718596ab; 
-      border-radius: 5px;
-      border-left: 1px dotted #718596ab;
-      border-right: 1px dotted #718596ab;
-      /*
-      position: relative; 
-      &:before { 
-         content: "vuejs component";
-         position: absolute;
-         left: 1.5em;
-         top: -0.9em;
-         background-color: white;
-         color: grey;
-         padding: 0 0.3em;
-      }
-      */
-      dd { 
-         margin-left: 1em; 
-      }
-      & > div {
-         margin: 1em 3em 0;
-      }
-      table {
-      }
-   }
+      
+}
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
index 8b7a4ad6b..70b2ba56e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/api.js
@@ -146,6 +146,25 @@ const postResource = (id, payload, method) => {
       });
 };
 
+/*
+* Endpoint to Add/remove SocialIssue
+*/
+const postSocialIssue = (id, body, method) => {
+   //console.log('api body and method', body, method); 
+   const url = `/api/1.0/person/accompanying-course/${id}/socialissue.json`;
+   return fetch(url, {
+         method: method,
+         headers: {
+           'Content-Type': 'application/json;charset=utf-8'
+         },
+         body: JSON.stringify(body)
+      })
+      .then(response => {
+         if (response.ok) { return response.json(); }
+         throw Error('Error with request resource response'); 
+      });
+};
+
 export { 
    getAccompanyingCourse,
    patchAccompanyingCourse,
@@ -154,4 +173,5 @@ export {
    postParticipation,
    postRequestor,
    postResource,
+   postSocialIssue
 };
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
index 1a85e4bb7..7a91e39c3 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner.vue
@@ -43,20 +43,26 @@
    </teleport>
    
    <teleport to="#header-accompanying_course-details #banner-social-issues">
-      <div class="grid-4">{{ $t('social_issue.title') }}</div>
-      <div class="grid-4">_</div>
-      <div class="grid-4">_</div>
+      <div class="grid-12">
+         <social-issue
+            v-for="issue in accompanyingCourse.socialIssues"
+            v-bind:key="issue.id"
+            v-bind:issue="issue">
+         </social-issue>
+      </div>
    </teleport>
 
 </template>
 
 <script>
-import ToggleFlags from './ToggleFlags';
+import ToggleFlags from './Banner/ToggleFlags';
+import SocialIssue from './Banner/SocialIssue.vue';
 
 export default {
    name: 'Banner',
    components: {
-      ToggleFlags
+      ToggleFlags,
+      SocialIssue
    },
    computed: {
       accompanyingCourse() {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue
new file mode 100644
index 000000000..7ed78355d
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/SocialIssue.vue
@@ -0,0 +1,20 @@
+<template>
+  <span class="badge badge-secondary">{{ issue.text }}</span>
+</template>
+
+<script>
+export default {
+   name: "SocialIssues",
+   props: ['issue']
+}
+</script>
+
+<style lang="scss" scoped>
+span.badge {
+   font-size: 95%;
+   text-transform: capitalize !important;
+   font-weight: 500 !important;
+   margin-bottom: 5px;
+   margin-right: 1em;
+}
+</style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue
similarity index 100%
rename from src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ToggleFlags.vue
rename to src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Banner/ToggleFlags.vue
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 c3e83a548..858d6d04e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Comment.vue
@@ -8,17 +8,17 @@
       </div-->
       
       <div>
-         <div v-if="initialComment">
-            créé par {{ initialComment.creator.text }}
-            le {{ $d(initialComment.createdAt.datetime, 'long') }}
-            <div v-if="initialComment.updatedAt.datetime !== initialComment.createdAt.datetime">
-               modifié par {{ initialComment.updatedBy.text }}
-               le {{ $d(initialComment.updatedAt.datetime, 'long') }}
-            </div>
-         </div>
-         
          <form @submit.prevent="submitform">
+            
             <label for="content">{{ $t('comment.label') }}</label>
+            
+            <div v-if="initialComment">
+               {{ $t('comment.created_by', [
+                  initialComment.creator.text, 
+                  $d(initialComment.createdAt.datetime, 'long')
+               ]) }}
+            </div>
+            
             <textarea 
                name="content" 
                v-bind:placeholder="$t('comment.content')"
@@ -27,6 +27,7 @@
                ckeditor="ckeditor"
                v-model="content">
             </textarea>
+            
             <ul class="record_actions">
                <li>
                   <button type="submit" class="sc-button bt-save">{{ $t('action.save') }}</button>
@@ -38,6 +39,7 @@
                   </a>
                </li>
             </ul>
+            
          </form>
       </div>
       
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
index 9c31c7ef5..7c61b066c 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated.vue
@@ -43,7 +43,7 @@
 
 <script>
 import { mapState } from 'vuex';
-import PersonItem from "./PersonItem.vue"
+import PersonItem from "./PersonsAssociated/PersonItem.vue"
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue'
 
 export default {
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/PersonItem.vue
similarity index 100%
rename from src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonItem.vue
rename to src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/PersonsAssociated/PersonItem.vue
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
index 39952e687..b007bc17e 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue
@@ -1,11 +1,77 @@
 <template>
   <div class="vue-component">
      <h2><a name="section-40"></a>{{ $t('referrer.title') }}</h2>
+     
+     <div class="my-4">
+        <label for="" class="">
+           {{ $t('referrer.label') }}
+        </label>
+        
+        <VueMultiselect
+           track-by="id"
+           label="text"
+           :multiple="false"
+           :searchable="true"
+           :placeholder="$t('referrer.placeholder')"
+           @update:model-value="updateReferrer"
+           :model-value="value"
+           :options="options">
+        </VueMultiselect>
+        
+        <ul class="record_actions">
+           <li>
+             <button 
+                class="sc-button bt-create" 
+                type="button" 
+                name="button"
+                @click="assignMe">
+                {{ $t('referrer.assign_me') }}
+             </button>
+           </li>
+        </ul>
+        
+     </div>
   </div>
 </template>
 
 <script>
+import VueMultiselect from 'vue-multiselect';
+//import { getUsers } from '../api';
+import { mapState } from 'vuex';
+
 export default {
    name: "Referrer",
+   components: { VueMultiselect },
+   data() {
+      return {
+         options: []
+      }
+   },
+   computed: {
+      ...mapState({
+         value: state => state.accompanyingCourse.user,
+      }),
+   },
+   mounted() {
+      this.getOptions();
+   },
+   methods: {
+      getOptions() {
+         //getUsers().then(response => new Promise((resolve, reject) => {
+         //   console.log(response);
+         //   resolve();
+         //})).catch(er => this.$store.commit('catchError'), error));
+      },
+      updateReferrer(value) {
+         //this.$store.dispatch('updateReferrer', this.transformValue(value));
+      },
+      transformValue(value) {
+         let payload = value;
+         return { payload, body, method };
+      },
+      assignMe() {
+         console.log('assign me');
+      }
+   }
 }
 </script>
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 6a2c6d5cc..c6783677a 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Requestor.vue
@@ -53,7 +53,10 @@
             </button>
          </li>
       </ul>
-   </div>   
+   </div> 
+   <div v-else>
+      <label>{{ $t('requestor.counter') }}</label>
+   </div>  
    
    <div>
       <add-persons v-if="accompanyingCourse.requestor === null"
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
index d69c3d0ea..596da7483 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources.vue
@@ -42,7 +42,7 @@
 <script>
 import { mapState } from 'vuex';
 import AddPersons from 'ChillPersonAssets/vuejs/_components/AddPersons.vue';
-import ResourceItem from './ResourceItem.vue';
+import ResourceItem from './Resources/ResourceItem.vue';
 
 export default {
    name: 'Resources',
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ResourceItem.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
similarity index 100%
rename from src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/ResourceItem.vue
rename to src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Resources/ResourceItem.vue
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
index a756727d8..26bd160c1 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/SocialIssue.vue
@@ -3,19 +3,21 @@
      <h2><a name="section-30"></a>{{ $t('social_issue.title') }}</h2>
      
      <div class="my-4">
-        <!--label for="selectIssues">{{ $t('social_issue.label') }}</label-->
+        <!--label for="field">{{ $t('social_issue.label') }}</label
+        -->
         <VueMultiselect
-            name="selectIssues"
-            v-model="selected"
-            track-by="id"
-            label="text"
-            :placeholder="$t('social_issue.label')"
-            :multiple="true"
-            :searchable="true"
-            :close-on-select="false"
-            :allow-empty="true" 
-            :show-labels="false" 
-            :options="options">
+           name="field"
+           :close-on-select="false"
+           :allow-empty="true" 
+           :show-labels="false" 
+           track-by="id"
+           label="text"
+           :multiple="true"
+           :searchable="false"
+           :placeholder="$t('social_issue.label')"
+           @update:model-value="updateSocialIssues"
+           :model-value="value"
+           :options="options">
         </VueMultiselect>
      </div>
      
@@ -23,38 +25,56 @@
 </template>
 
 <script>
-import VueMultiselect from 'vue-multiselect'
-import { getSocialIssues } from '../api'
+import VueMultiselect from 'vue-multiselect';
+import { getSocialIssues } from '../api';
+import { mapState } from 'vuex';
 
 export default {
    name: "SocialIssue",
    components: { VueMultiselect },
-   data () {
+   data() {
       return {
-         selected: null,
          options: []
       }
    },
    computed: {
+      ...mapState({
+         value: state => state.accompanyingCourse.socialIssues,
+      }),
    },
    mounted() {
       this.getOptions();
    },
    methods: {
       getOptions() {
-         getSocialIssues().then(socialIssues => new Promise((resolve, reject) => {
-            console.log('socialIssues', socialIssues);
-            this.options = socialIssues.results; 
+         getSocialIssues().then(response => new Promise((resolve, reject) => {
+            //console.log('get socialIssues', response.results);
+            this.options = response.results;
             resolve();
          })).catch(error => this.$store.commit('catchError', error));        
       },
+      updateSocialIssues(value) {
+         this.$store.dispatch('updateSocialIssues', this.transformValue(value));
+      },
+      transformValue(updated) {
+         let stored = this.value;
+         let added = updated.filter(x => stored.indexOf(x) === -1).shift();
+         let removed = stored.filter(x => updated.indexOf(x) === -1).shift();
+         let method = (typeof removed === 'undefined') ? 'POST' : 'DELETE';         
+         let changed = (typeof removed === 'undefined') ? added : removed;
+         let body = { type: "social_issue", id: changed.id };
+         //console.log('body', body);
+         //console.log('@@@', method, changed.text);
+         let payload = updated;
+         return { payload, body, method };
+      }
    }
 }
 </script>
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
-<style lang="scss" scoped>
-   div.vue-component > div {
-      //margin: 3em;
+<style lang="scss">
+   span.multiselect__tag {
+      background: #e2793d;
    }
 </style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
new file mode 100644
index 000000000..117c4f09b
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
@@ -0,0 +1,191 @@
+<template>
+   <teleport to="#content_conainter .container.content .container">
+      <div id="navmap">
+         <nav>
+            <a class="top" href="#top">
+               <i class="fa fa-fw fa-square"></i>
+               <span>{{ $t('nav.top') }}</span>
+            </a>
+            <item
+               v-for="item of items"
+               :key="item.key"
+               :item="item"
+               :step="step">
+            </item>
+         </nav>
+      </div>
+   </teleport>
+</template>
+
+<script>
+import Item from './StickyNav/Item.vue';
+
+export default {
+   name: "StickyNav",
+   components: {
+      Item
+   },
+   data() {
+      return {
+         header: document.querySelector("header.navigation.container"),
+         bannerName: document.querySelector("#header-accompanying_course-name"),
+         bannerDetails: document.querySelector("#header-accompanying_course-details"),
+         container: null,
+         heightSum: null,
+         stickyNav: null,
+         limit: 25,
+         anchors: null,
+         items: [],
+      }
+   },
+   computed: {
+      accompanyingCourse() {
+         return this.$store.state.accompanyingCourse;
+      },
+      step() {
+         return this.accompanyingCourse.step;
+      },
+      top() {
+         return parseInt(window.getComputedStyle(this.stickyNav).getPropertyValue('top').slice(0, -2));
+      },
+   },
+   mounted() {
+      this.ready();
+      window.addEventListener('scroll', this.handleScroll);
+   },
+   destroyed() {
+      window.removeEventListener('scroll', this.handleScroll);
+   },
+   methods: {
+      ready() {
+
+         // load datas DOM when mounted ready
+         this.container = document.querySelector("#content_conainter .container.content .container");
+         this.stickyNav = document.querySelector('#navmap');
+         this.anchors = document.querySelectorAll("h2 a[name^='section']");
+         this.initItemsMap();                  
+         
+         // TODO resizeObserver not supports IE !
+         // Listen when elements change size, then recalculate heightSum and initItemsMap
+         const resizeObserver = new ResizeObserver(entries => {
+            this.refreshPos();
+         });
+         
+         resizeObserver.observe(this.header);
+         resizeObserver.observe(this.bannerName);
+         resizeObserver.observe(this.bannerDetails);
+         resizeObserver.observe(this.container);
+      },
+      initItemsMap() {
+         
+         this.anchors.forEach(anchor => {
+            this.items.push({
+               pos: null,
+               active: false,
+               key: parseInt(anchor.name.slice(8).slice(0, -1)),
+               name: '#' + anchor.name
+            })
+         });
+      },
+      refreshPos() {
+         
+         //console.log('refreshPos');
+         this.heightSum = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
+         
+         this.anchors.forEach((anchor, i) => {
+            this.items[i].pos = this.findPos(anchor)['y'];
+         });
+      },
+      findPos(element) {
+         
+          let posX = 0, posY = 0;
+          do {
+              posX += element.offsetLeft;
+              posY += element.offsetTop;
+              element = element.offsetParent;
+          }
+          while( element != null );
+          
+          let pos = [];
+          pos['x'] = posX;
+          pos['y'] = posY;
+          
+          return pos;
+      },
+      handleScroll(event) {
+         
+         let pos = this.findPos(this.stickyNav);
+         let top = this.heightSum + this.top - window.scrollY;
+         //console.log(window.scrollY); 
+         
+         if (top > this.limit) {            
+            this.stickyNav.style.position = 'absolute';
+            this.stickyNav.style.left = '-60px';
+         } else {
+            this.stickyNav.style.position = 'fixed';
+            this.stickyNav.style.left = pos['x'] + 'px';
+         }
+         
+         this.switchActive();
+      },
+      switchActive() {
+         
+         this.items.forEach((item, i) => {
+            let next = (this.items[i+1]) ? this.items[i+1].pos : '100000';
+            item.active = 
+                (window.scrollY >= item.pos & window.scrollY < next) ? true : false;
+         }, this);
+         
+         // last item never switch active because scroll reach bottom of page 
+         if (document.body.scrollHeight == window.scrollY + window.innerHeight) {
+            this.items[this.items.length-1].active = true;
+            this.items[this.items.length-2].active = false;
+         } else {
+            this.items[this.items.length-1].active = false;
+         }
+      }
+   }
+}
+</script>
+
+<style lang="scss">
+div#navmap {
+   position: absolute;
+   top: 30px;
+   left: -60px; //-10%;
+   nav {
+      font-size: small;
+      a {
+         display: block;
+         box-sizing: border-box;
+         margin-bottom: -3px;
+         color: #71859669;
+         &.top {
+            color: #718596;
+         }
+         span {
+            display: none;
+         }
+         &:hover, 
+         &.active {
+            span {
+               display: inline;
+               padding-left: 8px;
+            }
+         }
+         &:hover {
+            color: #718596b5;
+         }
+         &.active {
+            color: #e2793d; //orange
+            //color: #eec84a; //jaune
+         }
+      }
+   }
+}
+@media only screen and (max-width: 768px) {
+   div.sticky-section {
+      display: none;
+   }
+}
+</style>
diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue
new file mode 100644
index 000000000..413f216cc
--- /dev/null
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav/Item.vue
@@ -0,0 +1,30 @@
+<template>
+   <a 
+      v-if="item.key <= 5"
+      :href="item.name" 
+      :class="{ 'active': isActive }"
+      >
+      <i class="fa fa-fw fa-square"></i>
+      <span>{{ item.key }}</span>
+   </a>
+   <a 
+      v-else-if="step === 'DRAFT'"
+      :href="item.name" 
+      :class="{ 'active': isActive }"
+      >
+      <i class="fa fa-fw fa-square"></i>
+      <span>{{ item.key }}</span>
+   </a>
+</template>
+
+<script>
+export default {
+   name: "Item",
+   props: ['item', 'step'],
+   computed: {
+      isActive() {
+         return this.item.active;
+      }
+   }
+}
+</script>
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 93de282db..242d48b8f 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/js/i18n.js
@@ -39,6 +39,7 @@ const appMessages = {
          title: "Demandeur",
          add_requestor: "Ajouter un demandeur",
          is_anonymous: "Le demandeur est anonyme",
+         counter: "Il n'y a pas encore de demandeur",
          type: "Type",
          person_id: "id",
          text: "Dénomination",
@@ -57,7 +58,10 @@ const appMessages = {
          label: "Choisir les problématiques sociales",
       },
       referrer: {
-         title: "Référent",
+         title: "Référent du parcours",
+         label: "Vous pouvez choisir un TMS ou vous assigner directement comme référent",
+         placeholder: "Choisir un TMS",
+         assign_me: "M'assigner comme référent",
       },
       resources: {
          title: "Interlocuteurs privilégiés",
@@ -69,7 +73,8 @@ const appMessages = {
       comment: {
          title: "Observations",
          label: "Ajout d'une note",
-         content: "Rédigez une première note..."
+         content: "Rédigez une première note...",
+         created_by: "créé par {0}, le {1}" 
       },
       confirm: {
          title: "Confirmation",
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 0f7a4f188..c9121c5fd 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/store/index.js
@@ -5,7 +5,8 @@ import { getAccompanyingCourse,
    confirmAccompanyingCourse,
    postParticipation, 
    postRequestor,
-   postResource } from '../api';
+   postResource,
+   postSocialIssue } from '../api';
 
 const debug = process.env.NODE_ENV !== 'production';
 const id = window.accompanyingCourseId;
@@ -74,8 +75,11 @@ let initPromise = getAccompanyingCourse(id)
                state.accompanyingCourse.confidential = value;
             },
             postFirstComment(state, comment) {
-               console.log('### mutation: postFirstComment', comment);
+               //console.log('### mutation: postFirstComment', comment);
                state.accompanyingCourse.initialComment = comment;
+            }, 
+            updateSocialIssues(state, value) {
+               state.accompanyingCourse.socialIssues = value;
             },
             confirmAccompanyingCourse(state, response) {
                //console.log('### mutation: confirmAccompanyingCourse: response', response);
@@ -145,7 +149,7 @@ let initPromise = getAccompanyingCourse(id)
                })).catch((error) => { commit('catchError', error) });
             },
             toggleIntensity({ commit }, payload) {
-               console.log(payload);
+               //console.log(payload);
                patchAccompanyingCourse(id, { type: "accompanying_period", intensity: payload })
                .then(course => new Promise((resolve, reject) => {
                   commit('toggleIntensity', course.intensity);
@@ -167,16 +171,24 @@ let initPromise = getAccompanyingCourse(id)
                })).catch((error) => { commit('catchError', error) });
             },
             postFirstComment({ commit }, payload) {
-               console.log('## action: postFirstComment: payload', payload);
+               //console.log('## action: postFirstComment: payload', payload);
                patchAccompanyingCourse(id, { type: "accompanying_period", initialComment: payload })
                .then(course => new Promise((resolve, reject) => {
                   commit('postFirstComment', course.initialComment);
                   resolve();
                })).catch((error) => { commit('catchError', error) });
             },
-            
+            updateSocialIssues({ commit }, { payload, body, method }) {
+               //console.log('## action: payload', { payload, body, method });
+               postSocialIssue(id, body, method)
+               .then(response => new Promise((resolve, reject) => {
+                  //console.log('response', response);
+                  commit('updateSocialIssues', payload);
+                  resolve();
+               })).catch((error) => { commit('catchError', error) });
+            },
             confirmAccompanyingCourse({ commit }) {
-               console.log('## action: confirmAccompanyingCourse');
+               //console.log('## action: confirmAccompanyingCourse');
                confirmAccompanyingCourse(id)
                .then(response => new Promise((resolve, reject) => {
                   commit('confirmAccompanyingCourse', response);