diff --git a/assets/js/theme/design-system/dropdown.js b/assets/js/theme/design-system/dropdown.js
new file mode 100644
index 000000000..95b8b6280
--- /dev/null
+++ b/assets/js/theme/design-system/dropdown.js
@@ -0,0 +1,28 @@
+class Dropdown {
+    constructor (selector) {
+        this.element = document.querySelector(selector);
+        this.dropdownButton = this.element.querySelector('button');
+
+        this.state = {
+            isOpened: false
+        };
+
+        this.listen();
+    }
+
+    listen () {
+        this.dropdownButton.addEventListener('click', () => {
+            this.toggleDropdown();
+        });
+    }
+
+    toggleDropdown (open = !this.state.isOpened) {
+        console.log('lalala')
+        let classAction;
+        this.state.isOpened = open;
+        classAction = this.state.isOpened ? 'add' : 'remove';
+        this.dropdownButton.setAttribute('aria-expanded', this.state.isOpened);
+    }
+}
+
+export default new Dropdown('.diplomas-select');
diff --git a/assets/js/theme/index.js b/assets/js/theme/index.js
index 8aa2514e8..7c7f6a54f 100644
--- a/assets/js/theme/index.js
+++ b/assets/js/theme/index.js
@@ -1,6 +1,7 @@
 import './body.js';
 import './blocks/keyFigures';
 import './blocks/timeline';
+import './design-system/dropdown';
 import './nav/stickyNav';
 // import './nav/responsive';
 import './nav/mainMenu';
diff --git a/assets/sass/_theme/sections/diplomas.sass b/assets/sass/_theme/sections/diplomas.sass
index bb592788c..afd6579c6 100644
--- a/assets/sass/_theme/sections/diplomas.sass
+++ b/assets/sass/_theme/sections/diplomas.sass
@@ -27,6 +27,7 @@ ul.diplomas
     .dropdown-menu
         @include inset(100%, 0, auto, auto)
         background-color: black
+        display: none
         position: absolute
         @include media-breakpoint-down(md)
             // padding-left: $container-gutter-width
@@ -34,8 +35,8 @@ ul.diplomas
         &,
         a
             color: white
-            display: block
         a
+            display: block
             padding: $spacing0
             white-space: normal
             &:not(:first-child)
@@ -47,6 +48,23 @@ ul.diplomas
             &:focus
                 color: black
 
+    button[aria-expanded="true"] 
+        @include icon('caret-top', 'after')
+        + .dropdown-menu
+            display: block
+
+    
+    // TODO : style de l'icone
+    // button::after,
+    // button[aria-expanded="true"]::after
+    //     display: inline-block
+    //     font-family: Icon
+    //     font-size: .375rem
+    //     font-weight: 400
+    //     line-height: 1
+    //     margin-left: 0.3125rem
+    //     vertical-align: middle
+
 .essential
     @include grid(12, false, 0)
     flex-wrap: wrap
@@ -65,4 +83,4 @@ ul.diplomas
     dd
         grid-column: 5/13
         @include media-breakpoint-down(md)
-            padding-top: 0
\ No newline at end of file
+            padding-top: 0