diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk
index bea3033..2eb3878 100644
--- a/_includes/layouts/base.njk
+++ b/_includes/layouts/base.njk
@@ -1,11 +1,8 @@
 ---
 layout: layouts/parent.njk
 ---
-<main id="skip">
-  <div>
-    {{ content | safe }}
-  </div>
-</main>
+
+<h1>{{ eleventyNavigation.key }}</h1>
 
 <aside>
   <div id="more-info">
@@ -13,3 +10,9 @@ layout: layouts/parent.njk
   {{ content | toc | safe }}
   </div>
 </aside>
+
+<main id="skip">
+  <div>
+    {{ content | safe }}
+  </div>
+</main>
diff --git a/_includes/layouts/parent.njk b/_includes/layouts/parent.njk
index 06e5b86..cd79630 100644
--- a/_includes/layouts/parent.njk
+++ b/_includes/layouts/parent.njk
@@ -19,6 +19,13 @@
 
 	</head>
 	<body>
+
+		<svg class="d-none" alt="">
+			<symbol id="icon-bars" viewBox="0 0 32 32">
+				<path d="M30 24v3c0 .6-.4 1-1 1h-26c-.6 0-1-.4-1-1v-3c0-.6.4-1 1-1h26c.6 0 1 .4 1 1zM30 15v3c0 .6-.4 1-1 1h-26c-.6 0-1-.4-1-1v-3c0-.6.4-1 1-1h26c.6 0 1 .4 1 1zM30 6v3c0 .6-.4 1-1 1h-26c-.6 0-1-.4-1-1v-3c0-.6.4-1 1-1h26c.6 0 1 .4 1 1z"></path>
+			</symbol>
+		</svg>
+
 		<a href="#skip" class="visually-hidden">Skip to main content</a>
 		<nav id="sidebar">
 				{{ collections.all | eleventyNavigation | eleventyNavigationToHtml({anchorClass: "itemLink",activeAnchorClass: "active",activeListItemClass: "active",activeKey: eleventyNavigation.key, listClass: "nav", listItemClass: "item"}) | safe }}
@@ -26,10 +33,13 @@
 
 		<div class="wrapper">
 		  {{ content | safe }}
+
+			<footer><a href="https://quarante-douze.net/"><img src="/img/qdouze.gif" alt="" /><span class="visually-hidden">Site hébergé par Fanstuff Garden.</span></a>  <a href="https://creativecommons.org/licenses/by-sa/4.0/"><img src="/img/cc-by-sa.png" alt="" /><span class="visually-hidden">Tout le contenu de cette page est sous licence Creatve Common Attribution - Partage à l'identique.</span></a></footer>
 		</div>
 
-		<footer><a href="https://quarante-douze.net/"><img src="/img/qdouze.gif" alt="" /><span class="visually-hidden">Site hébergé par Fanstuff Garden.</span></a>  <a href="https://creativecommons.org/licenses/by-sa/4.0/"><img src="/img/cc-by-sa.png" alt="" /><span class="visually-hidden">Tout le contenu de cette page est sous licence Creatve Common Attribution - Partage à l'identique.</span></a></footer>
 
-		<!-- Current page: {{ page.url | htmlBaseUrl }} -->
+		<button id="mobile-button" class="menu-button"><svg class="icon icon-bars" alt=""><use xlink:href="#icon-bars"></use></svg> <span class="sr-only">Afficher le menu</span></button>
+
+		<script src="/js/mobile-sidebar.js"></script>
 	</body>
 </html>
diff --git a/content/about.md b/content/about.md
index 20d7aad..b1f1aa6 100644
--- a/content/about.md
+++ b/content/about.md
@@ -6,8 +6,6 @@ eleventyNavigation:
   order: 0
 ---
 
-# À propos
-
 {{ metadata.title }} est un site de présentation de site web et créateurs web indépendants (créateurs au sens large) francophone, visant à permettre de découvrir des sujets ou des projets intéressants.
 
 ## Pourquoi ?
diff --git a/content/autres.md b/content/autres.md
index 732156e..6f696ee 100644
--- a/content/autres.md
+++ b/content/autres.md
@@ -5,8 +5,6 @@ eleventyNavigation:
   order: 2
 ---
 
-# La gare - Sites similaires
-
 La gare recense d'autres projets similaire à celui de {{ metadata.title }}, c'est à dire d'autres travaux de curations qui peuvent exister à travers le web. À noter que contrairement aux *quatiers*, cette liste ne contient pas que des sites francophones, mais aussi des listings anglophones.
 
 ## Sites légers
diff --git a/content/contribuer.md b/content/contribuer.md
index 9fa4835..76377db 100644
--- a/content/contribuer.md
+++ b/content/contribuer.md
@@ -5,8 +5,6 @@ eleventyNavigation:
   order: 10
 ---
 
-# Contribuer à {{ metadata.title }}
-
 {{ metadata.title }} est un projet open-source, dont [le code source est disponible sur Codeberg](https://codeberg.org/Kazhnuz/tramweb/) et qui est hébergé par Quarante-Douze. Toutes les contributions sont les bienvenues, tant qu'elles participent à aider à construire un annuaire de site web sain et anti-oppression.
 
 Il y a plusieurs manière de contribuer à la liste et de nous aider à la rendre le mieux possible !
diff --git a/content/districts/arcadia.md b/content/districts/arcadia.md
index b198897..9f19b58 100644
--- a/content/districts/arcadia.md
+++ b/content/districts/arcadia.md
@@ -7,8 +7,6 @@ eleventyNavigation:
   description: Jeux vidéos, jeux en ligne et jeux de sociétés.
 ---
 
-# La salle d'arcade
-
 Arcadia est le district des jeux vidéos et de tout ce qui est jeux en général. Cela peut être aussi bien pour *parler* de jeux vidéo que pour jouer à des jeux.
 
 ## Sites de jeux-vidéo
diff --git a/content/districts/cyberspace.md b/content/districts/cyberspace.md
index b3c011e..e3fee79 100644
--- a/content/districts/cyberspace.md
+++ b/content/districts/cyberspace.md
@@ -7,8 +7,6 @@ eleventyNavigation:
   description: Informatique, technologie et tout ce qui tourne autour.
 ---
 
-# Le cyberspace
-
 Le cyberspace est le district qui parle de numérique et de technologie en générale ! Ici, vous retrouverez tout ce qui est lié à la bidouille, aux ordinateurs, mais aussi potentiellements aux autres types de matériels.
 
 ## Disussions informatiques
diff --git a/content/districts/index.md b/content/districts/index.md
index 3ebd282..b443841 100644
--- a/content/districts/index.md
+++ b/content/districts/index.md
@@ -5,8 +5,6 @@ eleventyNavigation:
   order: 1
 ---
 
-# Les quartiers
-
 Les quartiers sont le coeur de {{ metadata.title }} (et sont inspiré des districts de Goecities/Neocities districts). Il s'agit des grands types de sujets dans lesquels sont regroupés les sites. 
 
 Les noms sont inspirés (mais ne seront pas forcément repris tel quel) de [la liste des districts](http://www.geocities.ws/NapaValley/2022/cities.html) de Neocities.
diff --git a/content/districts/lgbt.md b/content/districts/lgbt.md
index 48762cc..9f3810a 100644
--- a/content/districts/lgbt.md
+++ b/content/districts/lgbt.md
@@ -7,8 +7,6 @@ eleventyNavigation:
   description: Sites liés aux questions LGBT+
 ---
 
-# Le centre LGBT+
-
 Le centre LGBT+ est l'ensemble des sites liés aux questions LGBT+ ! Il a sa propre page plutôt que d'être une sous-partie pour pouvoir regrouper (à noter que cependant, les sites de personnes LGBTs n'y sont pas mis sauf si iels parlent principalement de sujets LGBT+ Genre quelqu'un parlant de cinéma mais qui serait bi sera dans la section cinéma, sauf si son site est spécialisé en "le cinéma et les identités LGBT+").
 
 ## Sites d'associations
diff --git a/content/districts/mediatheque.md b/content/districts/mediatheque.md
index c1e2853..4bf24f9 100644
--- a/content/districts/mediatheque.md
+++ b/content/districts/mediatheque.md
@@ -7,8 +7,6 @@ eleventyNavigation:
   description: Littérature, BD, films et musique.
 ---
 
-# La médiathèque
-
 La médiathèque est le district de la création ! Littérature, BD, films, musiques… ici vous pourrez trouver un accès à de nombreuses créations qui peuvent vous intéresser !
 
 ## Source de textes
diff --git a/content/districts/resto.md b/content/districts/resto.md
index 3a2c40d..72d3ec0 100644
--- a/content/districts/resto.md
+++ b/content/districts/resto.md
@@ -7,8 +7,6 @@ eleventyNavigation:
   description: Alimentation et lifestyle.
 ---
 
-# Les bars et restaurants
-
 Les bars et restaurants sont le quartier de la nourriture, de l'alimentation et des modes de vies ! Vegetarisme, alimentation, et autres choix pour mener sa vie y sont discuté.
 
 ## Végé & vegan
diff --git a/content/districts/universite.md b/content/districts/universite.md
index 414cf6d..123a736 100644
--- a/content/districts/universite.md
+++ b/content/districts/universite.md
@@ -7,8 +7,6 @@ eleventyNavigation:
   description: Sciences de la nature et sciences sociales.
 ---
 
-# L'université
-
 L'université est le district des sciences de la natures et des sciences sociales. Vous y pourrez trouver de nombreux endroits qui parlent d'informations scientifiques et universitaires.
 
 ## Sciences sociales
diff --git a/content/plateformes.md b/content/plateformes.md
index 1f214d7..3053a94 100644
--- a/content/plateformes.md
+++ b/content/plateformes.md
@@ -1,12 +1,10 @@
 ---
 layout: layouts/base.njk
 eleventyNavigation:
-  key: Services du web indé
+  key: Plateformes indépendantes
   order: 9
 ---
 
-# Plateformes indépendants
-
 Cette liste de site est séparée des autres, parce que le but est de présenter les "plateformes" et services du web indépendants. Tout ce qui est hébergements, moteurs de recherches, etc. à pour but d'être ici. Le but de ce site est de montrer qu'il existe des alternatives au web corporate même en terme de services.
 
 Cette liste, contrairement aux autres, **contient des sites anglphones** puisqu'elle traite de services notamment d'hébergement, et où vous pourrez trouver de nombreux sites.
diff --git a/public/css/index.css b/public/css/index.css
index a8e2fdd..881c3be 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -33,6 +33,8 @@
   --color-gray-20: #e0e0e0;
   --color-gray-50: #C0C0C0;
   --color-gray-90: #2f2f2f;
+  --sidebar-width: 280px;
+  --main-width: 800px;
 
 	/* --text-color is assigned to --color-gray-_ above */
 	--text-color-link: #c92a2a;
@@ -73,6 +75,7 @@ body {
 	min-height:100%;
 	font-family: var(--font-family);
 	color: var(--text-color);
+  font-size: 16px;
 }
 
 body {
@@ -80,7 +83,7 @@ body {
 }
 
 .wrapper {
-  width: 800px;
+  max-width: var(--main-width);
   margin: auto;
   position: relative;
 }
@@ -204,15 +207,17 @@ header h1 a[href] {
   box-shadow: 1px 0px 1px 0px rgba(0,0,0,0.4);
 }
 
+#sidebar.shown {
+  left: 0;
+}
+
 #sidebar > ul > li {
   margin:0;
   padding:3px;
 }
 
 main {
-  background-color: var(--background-color);
   line-height:1.5rem;
-  width: 800px;
   margin: auto;
 }
 
@@ -318,8 +323,9 @@ aside {
 }
 
 #sidebar {
-  min-width:280px;
-  width:280px;
+  min-width:var(--sidebar-width);
+  width:var(--sidebar-width);
+  z-index:10;
 }
 
 #more-info {
@@ -329,11 +335,109 @@ aside {
 
 footer {
   text-align:right;
-  margin: auto;
-  width: 800px;
+  width: 100%;
 }
 
 iframe {
   border: none;
 }
 
+.menu-button {
+  display: none;
+}
+
+@media screen and (max-width: 1400px) {
+  .wrapper {
+    margin-left: var(--sidebar-width);
+    position: relative;
+  }
+
+  aside {
+    position: static !important;
+  }
+
+  #more-info {
+    position: static;
+    border-left: 3px solid #e03131;
+    padding: 6px;
+  }
+}
+
+.d-none {
+  display: none;
+}
+
+.icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: currentColor;
+  color: currentColor;
+  position: relative;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  opacity: 0;
+  transition-delay: .8s;
+  transition-property: opacity;
+  transition-duration: 0.2s;
+}
+
+@media screen and (max-width: 1000px) {
+  #sidebar {
+    left: calc(-1* var(--sidebar-width));
+  }
+
+  .wrapper {
+    margin: .5rem;
+  }
+
+  .menu-button {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    background-color: rgba(0, 0, 0, 0.4);
+    color: white;
+    padding: 0.75em;
+    border: none;
+    font-size: 1.2rem;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    aspect-ratio: 1;
+    border-radius: 999px;
+    z-index: 12;
+  }
+
+  .menu-button:hover {
+    background-color: var(--text-color-link);
+  }
+}
+
+@media screen and (max-width: 600px) {
+  header h1 a[href] {
+    font-size: 5rem;
+  }
+}
+
+@media screen and (max-width: 460px) {
+  header h1 a[href] {
+    font-size: 4.5rem;
+  }
+}
+
+@media screen and (max-width: 390px) {
+  header h1 a[href] {
+    font-size: 4rem;
+  }
+}
\ No newline at end of file
diff --git a/public/js/mobile-sidebar.js b/public/js/mobile-sidebar.js
new file mode 100644
index 0000000..e38e864
--- /dev/null
+++ b/public/js/mobile-sidebar.js
@@ -0,0 +1,10 @@
+document.getElementById('mobile-button').addEventListener('click', function () {
+  const sidebar = document.getElementById('sidebar');
+  if (!sidebar.classList.contains('shown')) {
+    sidebar.classList.remove('hidden');
+    sidebar.classList.add('shown');
+  } else {
+    sidebar.classList.remove('shown');
+    sidebar.classList.add('hidden');
+  }
+});
