diff --git a/assets/js/theme/nav/mainMenu.js b/assets/js/theme/nav/mainMenu.js
index 3fa3cace2a5cf55ac582e18e0c2c91c4b0cc1665..89904b51aa3634f63e64ba398d68ef2dfefe108e 100644
--- a/assets/js/theme/nav/mainMenu.js
+++ b/assets/js/theme/nav/mainMenu.js
@@ -11,7 +11,7 @@ class MainMenu {
         this.element = document.querySelector(selector);
         this.menu = this.element.querySelector('.menu');
         this.mainButton = this.element.querySelector('button');
-        this.dropdownsButtons = this.element.querySelectorAll('.has-children a[role="button"]');
+        this.dropdownsButtons = this.element.querySelectorAll('.has-children [role="button"]');
 
         this.state = {
             isOpened: false,
@@ -113,7 +113,7 @@ class MainMenu {
             y = window.scrollY,
             isNearTop = y < offset;
 
-        if (isNearTop) {
+        if (isNearTop) {    
             this.element.classList.remove(CLASSES.sticky);
         } else {
             this.element.classList.add(CLASSES.sticky);
diff --git a/assets/sass/_theme/_utils.sass b/assets/sass/_theme/_utils.sass
index 21805a7e01dc6d30e3dd47191b7581f1db209e40..081aaf53d5d16c3586e4a61862579ed7443ebf6e 100644
--- a/assets/sass/_theme/_utils.sass
+++ b/assets/sass/_theme/_utils.sass
@@ -49,7 +49,7 @@
 
 // NEW UTILS
 
-@mixin icon($icon-name: '', $pseudo-element: before)
+@mixin icon($icon-name: '', $pseudo-element: before, $font-size: px2rem(7))
     &::#{$pseudo-element}
         content: map-get($icons, $icon-name)
         display: inline-block
@@ -61,6 +61,7 @@
         speak: never
         text-transform: none
         vertical-align: middle
+        @content // TODO : important de documenter ça
 
 @mixin container
     margin-left: auto
diff --git a/assets/sass/_theme/design-system/nav.sass b/assets/sass/_theme/design-system/nav.sass
index c062254a0b2bf923237f65e0856b99aac0e31ca9..a9e60be647f2711a4f80e65d557a4542183c2cc8 100644
--- a/assets/sass/_theme/design-system/nav.sass
+++ b/assets/sass/_theme/design-system/nav.sass
@@ -30,6 +30,19 @@
         font-size: px2rem(18)
         line-height: px2rem(26)
         color: $header-color
+        cursor: pointer
+        transition: text-decoration 0.15s
+        &:not(:hover)
+            text-decoration-color: transparent
+        &[aria-expanded]
+            @include icon('caret', 'after')
+                font-size: px2rem(6)
+                margin-left: px2rem(5)
+                transition: transform  0.15s
+            &[aria-expanded="true"]
+                &::after
+                    transform: rotate(180deg)
+
         @include media-breakpoint-up(md)
             a:hover,
             a:focus
@@ -50,12 +63,12 @@
             @include grid(1)
         > li
             > a, span
-                padding: $spacing1
                 display: block
+                padding: $spacing1
             &:last-child a
                 padding-right: 0
         li.has-children
-            a[aria-expanded="true"] + .dropdown-menu
+            [aria-expanded="true"] + .dropdown-menu
                 display: block
                 animation-duration: $header-dropdown-transition
                 animation-fill-mode: both
@@ -67,9 +80,8 @@
             @include container
             @include grid(4, md)
         > li
-            &,
-            & > a,
-            & > span
+            > a,
+            > span
                 font-size: px2rem(16)
                 line-height: px2rem(26)
                 @include media-breakpoint-up(lg)
@@ -93,7 +105,7 @@
                 > li:not(:last-child) 
                     border-bottom: 1px solid #adb5bd
                 li.has-children
-                    a[role="button"]
+                    [role="button"]
                         align-items: center
                         display: flex
                         justify-content: space-between
@@ -105,11 +117,8 @@
                         display: none
                         padding-top: 0
                     
-                    a[aria-expanded=true]
-                        @include icon("caret-top", after)
-
-                        + .dropdown-menu
-                            display: block
+                    [aria-expanded=true] + .dropdown-menu
+                        display: block
 
 body
     &::after