diff --git a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
index 2577b42e3..82a4a3979 100644
--- a/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
+++ b/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
@@ -6,31 +6,31 @@
                <i class="fa fa-fw fa-square-o"></i>
                <span>Haut</span>
             </a>
-            <a href="#section-10">
+            <a href="#section-10" :class="{ 'active': isActive }">
                <i class="fa fa-fw fa-square"></i>
                <span>1</span>
             </a>
-            <a href="#section-20">
+            <a href="#section-20" :class="{ 'active': isActive }">
                <i class="fa fa-fw fa-square"></i>
                <span>2</span>
             </a>
-            <a href="#section-30">
+            <a href="#section-30" :class="{ 'active': isActive }">
                <i class="fa fa-fw fa-square"></i>
                <span>3</span>
             </a>
-            <a href="#section-40">
+            <a href="#section-40" :class="{ 'active': isActive }">
                <i class="fa fa-fw fa-square"></i>
                <span>4</span>
             </a>
-            <a href="#section-50">
+            <a href="#section-50" :class="{ 'active': isActive }">
                <i class="fa fa-fw fa-square"></i>
                <span>5</span>
             </a>
-            <a href="#section-60" v-if="accompanyingCourse.step === 'DRAFT'">
+            <a href="#section-60" v-if="accompanyingCourse.step === 'DRAFT'" :class="{ 'active': isActive }">
                <i class="fa fa-fw fa-square"></i>
                <span>6</span>
             </a>
-            <a href="#section-70" v-if="accompanyingCourse.step === 'DRAFT'">
+            <a href="#section-70" v-if="accompanyingCourse.step === 'DRAFT'" :class="{ 'active': isActive }">
                <i class="fa fa-fw fa-square"></i>
                <span>7</span>
             </a>
@@ -53,6 +53,7 @@ export default {
          bannerName: document.querySelector("#header-accompanying_course-name"),
          bannerDetails: document.querySelector("#header-accompanying_course-details"),
          stickyNav: null,
+         anchors: null,
          sumBanner: null,
          limit: 25
       }
@@ -79,6 +80,8 @@ export default {
          this.stickyNav = document.querySelector('#navmap');
          this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
          
+         this.anchorsMap();
+         
          const resizeObserver = new ResizeObserver(entries => {   // FF/Chrome!
             
             //console.log('header', this.header.offsetHeight);
@@ -92,7 +95,7 @@ export default {
          resizeObserver.observe(this.header);
          resizeObserver.observe(this.bannerName);
          resizeObserver.observe(this.bannerDetails);
-         
+             
       },
       handleScroll(event) {
          
@@ -126,6 +129,17 @@ export default {
           pos['y'] = posY;
           
           return pos;
+      },
+      anchorsMap() {
+         
+         this.anchors = document.querySelectorAll("h2 a[name^='section']");
+         this.anchors.forEach(anchor => {
+            console.log('anchor', this.findPosition(anchor)['y']);
+         });
+         
+      },
+      isActive() {
+         return true;
       }
    }
 }
@@ -148,13 +162,16 @@ div#navmap {
          }
          &:hover {
             color: #718596b5;
+         }
+         &:hover, 
+         &.active {
             span {
                display: inline;
                padding-left: 8px;
             }
          }
          &.active {
-            color: #df6a27;
+            color: #df6a27; //#e2793d
          }
       }
    }