diff --git a/css/style.css b/css/style.css
index e9471bf..1ba92b5 100644
--- a/css/style.css
+++ b/css/style.css
@@ -24,12 +24,24 @@ h1, h2{
   color:#ff0000;
 }
 
+nav {
+  text-align: center;
+}
+
+summary {
+  cursor: pointer;
+  list-style: none;
+  background: #ff0000;
+  color: white;
+}
+
 nav ul {
   display: flex;
   list-style: none;
   padding: inherit;
   margin: inherit;
   justify-content: center;
+  border-bottom: solid 10px #ff0000;
 }
 
 nav li a {
@@ -38,10 +50,6 @@ nav li a {
   display: block;
 }
 
-header{
-  border-top: 20px solid #ff0000;
-}
-
 footer{
   border-bottom: 20px solid #ff0000;
 }
@@ -74,4 +82,10 @@ hr {height: 40px; background: url('../images/separation.png') no-repeat 50% 50%;
 .page {
     margin: auto;
     max-width: 960px;
-}
\ No newline at end of file
+}
+
+@media screen and (max-width: 700px) {
+  nav ul {
+    flex-direction: column;
+  }
+}
diff --git a/index.html b/index.html
index a5744cb..d94b791 100644
--- a/index.html
+++ b/index.html
@@ -10,13 +10,17 @@
   </head>
   <body>
     <nav>
-      <ul>
-        <li><a href="https://wiki.interhacker.space">wiki</a></li>
-        <li><a href="https://git.interhacker.space">forge</a></li>
-        <!-- <li><a href="https://element.interhacker.space">matrix</a></li> -->
-        <li><a href="https://tube.interhacker.space">peertube</a></li>
-      </ul>
-    </nav>
+      <details>
+        <summary>☰ outils</summary>
+        <ul class="desktop">
+          <li><a href="https://wiki.interhacker.space">wiki</a></li>
+          <li><a href="https://git.interhacker.space">forge</a></li>
+          <li><a href="https://element.interhacker.space">matrix</a></li>
+          <li><a href="https://md.interhacker.space/">pads</a></li>
+          <li><a href="https://tube.interhacker.space">peertube</a></li>
+        </ul>
+      </details>
+      </nav>
     <header>
       <h1>UNE INTRODUCTION AUX HACKERSPACES ET À LEURS ACTIVITÉS</h1>
     </header>
