diff --git a/assets/js/theme/design-system/dropdown.js b/assets/js/theme/design-system/dropdown.js
new file mode 100644
index 0000000000000000000000000000000000000000..6eee0c0f562f99743b0fc27b9b9e22f260bdfd52
--- /dev/null
+++ b/assets/js/theme/design-system/dropdown.js
@@ -0,0 +1,33 @@
+const CLASSES = {
+    DropdownOpened: 'is-opened'
+};
+
+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);
+        this.element.classList[classAction](CLASSES.DropdownOpened);
+    }
+}
+
+export default new Dropdown('.diplomas-select');
diff --git a/assets/js/theme/index.js b/assets/js/theme/index.js
index 8aa2514e8224c085cf1593ddc901cc5272b42dd7..7c7f6a54f31224214c4b2647c17c6eb87b8f7845 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 6063a041870949e00067059d19078d7e3a2d4dba..33d8d4b020cb87e625a434f28d880c57b9b7029f 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)
@@ -45,4 +46,21 @@ ul.diplomas
             &:hover
                 background-color: lighten(black, 3)
             &:focus
-                color: black
\ No newline at end of file
+                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
\ No newline at end of file