diff --git a/_includes/layouts/layout.njk b/_includes/layouts/layout.njk
index 793aebb..0efff17 100644
--- a/_includes/layouts/layout.njk
+++ b/_includes/layouts/layout.njk
@@ -20,35 +20,64 @@
 
 	</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>
+			<symbol id="icon-house" viewBox="0 0 32 32">
+				<path fill="#fff" style="fill: var(--color1, #fff)" d="M16 1.204l-14.796 14.796 0.796 0.796 14-14 14 14 0.796-0.796-0.398-0.398zM6 3v6.705l4-4v-2.704zM16 4.295l-12 12v14.080h4v-10.375h6v10.375h14v-14.080zM18 20h6v5h-6z"></path>
+			</symbol>
+			<symbol id="icon-star-swirl" viewBox="0 0 32 32">
+				<path fill="#fff" style="fill: var(--color1, #fff)" d="M27.275 1.852l-1.131 2.639-3.035 0.369 2.635 1.604 0.086 0.842c-2.834-1.633-6.928-2.595-12.406-2.16l-1.262-0.209-1.508-2.4 0.031 2.486-3.076 1.027 3.441 0.285 0.49 2.111 1.068-2.361 1.119-0.172c12.75 1.377 17.342 12.797 4.867 12.977l0.326-2.35 2.297-2.732-3.209-1.56-1.889-3.029-2.476 2.57-0.258 0.064c-13.912-1.659-15.368 7.179-7.209 11.657l-0.746 0.793-2.941-0.895 2.064 2.463-0.945 2.658 2.273-1.947 2.939 1.131-1.898-2.742 0.293-0.939c3.902 1.791 9.616 2.635 16.906 1.295-15.065 2.086-22.759-8.621-13.705-12.23l1.44 2.703-0.25 3.561 3.514-0.623 1.203 0.488c13.641 6.413 18.591-5.245 10.74-11.109l0.898-1.389 2.904-1.031-2.619-0.926-0.973-2.916zM2.158 4.939l0.303 1.631-1.217 1.375 1.701-0.203 1.098 1.459 0.043-1.842 1.549-1.119-2.076-0.107-1.4-1.193zM24.568 23.596l0.891 3.229-1.961 2.566 3.099-0.793 2.105 2.143-0.158-3.213 2.201-1.898-3.225 0.098-2.953-2.131z"></path>
+			</symbol>
+			<symbol id="icon-world" viewBox="0 0 32 32">
+				<path fill="#fff" style="fill: var(--color1, #fff)" d="M15.842 1.088c-8.107 0-14.69 6.585-14.69 14.691s6.583 14.691 14.689 14.691c8.107 0 14.691-6.585 14.691-14.691s-6.585-14.691-14.691-14.691zM22.992 4.297c3.828 2.387 6.373 6.634 6.373 11.482 0 1.071-0.125 2.114-0.359 3.113l-2.141-1.129 1.375 3.43c-0.591 1.353-1.398 2.59-2.375 3.668l-2.697-1.933-4.039 2.983-3.854 0.435-0.869-2.611-3.107 1.678-4.256-1.184 0.572 2.287c-1.776-1.362-3.202-3.154-4.125-5.223l1.588-2.264 2.016 1.070 3.701-0.617 0.178-2.557-2.334-0.107 0.307-1.115 1.924-1.582-1.568-0.977 4.201-2.412-2.834-1.854-4.164 2.512-3.090-0.955c0.863-2.009 2.201-3.764 3.869-5.129l-0.234 2.773 2.711-2.133 4.5 1.389-1.406-1.713 1.709-0.9 1.676 1.779 4.438 0.615-0.219-2.154 2.592 0.791-0.057-1.457zM23.064 11.799l-5.689 0.668 1.807 2.701 0.197 4.029 1.824 0.865 0.715-1.773 3.916 3.041-1.098-2.955 0.401-3.021-2.734-1.42 0.662-2.135zM13.813 12.027l-1.975 1.324 2.279 0.924 1.043-0.924-1.348-1.324zM15.199 21.070l1.168 3.287 1.236-2.66-2.404-0.627z"></path>
+			</symbol>
+			<symbol id="icon-dice" viewBox="0 0 32 32">
+				<path fill="#fff" style="fill: var(--color1, #fff)" d="M23.468 15.703l-6.874 3.196 0.013 11.461 13.206-13.713-5.437-1.363zM22.672 22.492l-0.372 0.919-3.038-0.56 0.313-0.802c0.312-0.232 0.588-0.465 0.848-0.713l-0.003 0.003c0.37-0.339 0.709-0.697 1.021-1.077l0.014-0.018c0.265-0.328 0.525-0.694 0.762-1.077l0.026-0.046c0.211-0.321 0.41-0.69 0.577-1.076l0.018-0.047 0.879 0.157q-0.586 1.396-1.898 2.777-0.831 0.852-1.29 1.165zM7.6 15.271l-5.294 1.36 13.099 13.744v-11.476l-6.872-3.196zM8.797 18.449c0.097-0.019 0.209-0.029 0.323-0.029 0.459 0 0.878 0.172 1.195 0.456l-0.002-0.002c0.279 0.25 0.513 0.543 0.693 0.87l0.009 0.017-0.818 0.167c-0.091-0.177-0.204-0.329-0.337-0.461l-0-0q-0.324-0.305-0.704-0.241l-0.030 0.006c-0.153 0.025-0.276 0.133-0.322 0.275l-0.001 0.003c-0.053 0.149-0.015 0.347 0.112 0.586q0.255 0.475 0.676 0.564c0.070 0.012 0.151 0.018 0.233 0.018 0.107 0 0.211-0.011 0.312-0.033l-0.010 0.002 0.117-0.021 0.362 0.676q-0.4 0.089-0.514 0.205-0.201 0.196 0.027 0.621c0.089 0.173 0.219 0.315 0.376 0.416l0.004 0.003c0.1 0.066 0.222 0.105 0.354 0.105 0.038 0 0.075-0.003 0.111-0.009l-0.004 0.001 0.026-0.005q0.297-0.060 0.317-0.297c0.016-0.161-0.041-0.359-0.172-0.595l0.774-0.159c0.105 0.201 0.194 0.435 0.252 0.681l0.004 0.021c0.011 0.063 0.018 0.136 0.018 0.21 0 0.134-0.021 0.264-0.060 0.385l0.002-0.009c-0.050 0.138-0.135 0.253-0.246 0.337l-0.002 0.001c-0.142 0.1-0.311 0.171-0.495 0.201l-0.007 0.001-0.074 0.013c-0.088 0.016-0.19 0.025-0.294 0.025-0.292 0-0.567-0.072-0.809-0.198l0.010 0.005c-0.382-0.196-0.686-0.499-0.878-0.87l-0.005-0.011q-0.227-0.424-0.163-0.762c0.017-0.123 0.074-0.229 0.157-0.309l0-0h-0.004q-0.115 0.019-0.44-0.156c-0.348-0.199-0.625-0.489-0.802-0.838l-0.005-0.011q-0.328-0.61-0.205-1.15t0.855-0.688zM1.699 15.554l6.799-7.269c0.013-0.001 0.029-0.002 0.045-0.002s0.031 0.001 0.046 0.002l-0.002-0h0.010q0.196 0.022 0.178 0.232c-0.031 0.192-0.104 0.363-0.208 0.51l0.002-0.004c-0.165 0.255-0.367 0.471-0.601 0.646l-0.006 0.005q-0.245 0.184-0.94 0.595-0.8 0.469-1.222 0.923c-0.262 0.269-0.499 0.565-0.706 0.883l-0.014 0.022 2.057 0.235 0.511-0.81-1.31-0.149c0.089-0.085 0.186-0.164 0.289-0.234l0.008-0.005q0.149-0.1 0.528-0.32l0.401-0.234c0.306-0.174 0.57-0.356 0.817-0.557l-0.011 0.008c0.304-0.257 0.563-0.554 0.773-0.885l0.009-0.016q0.428-0.678 0.406-1.122c-0.012-0.247-0.132-0.402-0.355-0.469l4.987-5.323-6.738 11.852zM24.652 11.056q-0.239-0.341-0.235-0.532c0-0.127 0.074-0.2 0.223-0.216h0.036c0.162 0.001 0.312 0.053 0.434 0.142l-0.002-0.001c0.195 0.137 0.357 0.304 0.486 0.496l0.004 0.007q0.23 0.33 0.232 0.525c0 0.131-0.074 0.204-0.218 0.223h-0.037c-0.164-0.002-0.315-0.057-0.437-0.15l0.002 0.001c-0.193-0.134-0.355-0.298-0.483-0.486l-0.004-0.006zM17.814 2.211l5.247 5.602h-0.074c-0.024 0-0.061 0-0.091 0.007q-0.489 0.056-0.52 0.429t0.314 0.859c0.124 0.171 0.254 0.322 0.397 0.46l0.001 0.001c0.181 0.172 0.39 0.316 0.62 0.425l0.014 0.006q-0.132 0.181-0.044 0.499c0.084 0.265 0.203 0.495 0.355 0.7l-0.004-0.006c0.258 0.369 0.574 0.677 0.939 0.917l0.013 0.008q0.506 0.329 1.004 0.308 0.051 0 0.101-0.008 0.549-0.062 0.577-0.492c0.001-0.017 0.002-0.037 0.002-0.057 0-0.087-0.011-0.172-0.032-0.253l0.002 0.007 3.668 3.918-5.723-1.434-0.381-0.669zM23.952 8.769l0.153 0.164c0.028 0.036 0.056 0.074 0.085 0.111 0.113 0.162 0.17 0.297 0.17 0.408s-0.065 0.174-0.195 0.189h-0.032c-0.001 0-0.001 0-0.002 0-0.142 0-0.273-0.046-0.38-0.123l0.002 0.001c-0.154-0.103-0.282-0.231-0.383-0.379l-0.003-0.005c-0.123-0.177-0.184-0.319-0.18-0.426s0.070-0.169 0.199-0.184h0.033c0.002 0 0.003-0 0.005-0 0.139 0 0.267 0.044 0.372 0.119l-0.002-0.001c0.059 0.040 0.111 0.081 0.159 0.126l-0.001-0.001zM15.999 1.625l-7.408 12.814 7.408 3.441 7.413-3.441zM15.925 14.654q-1.096 0-1.536-0.767t-0.441-2.187 0.441-2.19 1.536-0.771 1.536 0.771 0.441 2.19-0.441 2.187-1.536 0.768zM16.583 10.166q0.156 0.498 0.156 1.534 0 0.989-0.156 1.513t-0.659 0.52q-0.502 0-0.665-0.52t-0.162-1.512q0-1.036 0.162-1.534t0.665-0.498q0.501-0.001 0.657 0.497z"></path>
+			</symbol>
 		</svg>
 
 		<a href="#skip" class="visually-hidden">Skip to main content</a>
-		<nav id="sidebar">
+		<nav id="sidebar" style="display:flex;">
 			{% set navPages = collections.all | eleventyNavigation %}
-			{% macro renderNavListItem(entry) -%}
-				<li class="item">
-					{% if entry.url != "#" %}
-						<a href="{{ entry.url }}" {% if entry.url == page.url %} class="active"{% endif %}>{{ entry.title }}</a>
-					{%- else -%}
-						{% if entry.notitle != true %}
-							<span>{{ entry.title }}</span>
+			{% macro renderNavListItem(entry, group) -%}
+				{% if entry.group == group %}
+					<li class="item">
+						{% if entry.url != "#" %}
+							<a href="{{ entry.url }}" {% if entry.url == page.url %} class="active"{% endif %}>{{ entry.title }}</a>
+						{%- else -%}
+							{% if entry.notitle != true %}
+								<span>{{ entry.title }}</span>
+							{%- endif -%}
 						{%- endif -%}
-					{%- endif -%}
-					{%- if entry.children.length -%}
-					<ul>
-						{%- for child in entry.children %}{{ renderNavListItem(child) }}{% endfor -%}
-					</ul>
-					{%- endif -%}
-				</li>
+						{%- if entry.children.length -%}
+						<ul>
+							{%- for child in entry.children %}{{ renderNavListItem(child) }}{% endfor -%}
+						</ul>
+						{%- endif -%}
+					</li>
+				{%- endif -%}
 			{%- endmacro %}
 
-			<ul class="nav">
-			{%- for entry in navPages %}{{ renderNavListItem(entry) }}{%- endfor -%}
+			<ul class="sidebar-selector">
+				<li><button data-select="nav-accueil"><svg class="icon icon-32 icon-house"><use xlink:href="#icon-house"></use></svg></button></li>
+				<li><button data-select="nav-jdr"><svg class="icon icon-32 icon-house"><use xlink:href="#icon-dice"></use></svg></button></li>
+				<li><button data-select="nav-lore"><svg class="icon icon-32 icon-house"><use xlink:href="#icon-world"></use></svg></button></li>
+				<li><button data-select="nav-bonus"><svg class="icon icon-32 icon-house"><use xlink:href="#icon-star-swirl"></use></svg></button></li>
+			</ul>
+
+			<ul class="nav nav-accueil">
+				{%- for entry in navPages %}{{ renderNavListItem(entry, "accueil") }}{%- endfor -%}
+			</ul>
+			<ul class="nav nav-jdr">
+				{%- for entry in navPages %}{{ renderNavListItem(entry, "jdr") }}{%- endfor -%}
+			</ul>
+			<ul class="nav nav-lore">
+				{%- for entry in navPages %}{{ renderNavListItem(entry, "lore") }}{%- endfor -%}
+			</ul>
+			<ul class="nav nav-bonus">
+				{%- for entry in navPages %}{{ renderNavListItem(entry, "bonus") }}{%- endfor -%}
 			</ul>
 		</nav>
 
diff --git a/content/index.md b/content/index.md
index 375696d..e94dc4b 100644
--- a/content/index.md
+++ b/content/index.md
@@ -11,7 +11,7 @@ DanseRonce est un JDR de fantasy urbaine se passant dans une terre alternative c
 
 Cette page a pour objectif de vous présenter à la fois l'univers et comment il interragit avec le système. Ce JDR est fourni par [Kazhnuz](https://kazhnuz.space), avec certaines règles reprise du système de [MDupoignard](https://twitter.com/MDupoignard). Il est distribué sous la Creative Commons CC-BY-SA 4.0.
 
-<div style="text-align:center;">
+<div style="text-align:center;" class="picture">
 
 ![Une poupée abimée de renard bleu foncée, avec une cape noire et deux petites corne blanche. Un de ses "yeux" (des boutons) est en train de tomber.](/img/poupeeSoph.png)
 
diff --git a/content/jdr/datas/index.md b/content/jdr/datas/index.md
index 189c645..ede866a 100644
--- a/content/jdr/datas/index.md
+++ b/content/jdr/datas/index.md
@@ -4,5 +4,6 @@ eleventyNavigation:
   key: Données
   order: 3
   url: '#'
+  group: "jdr"
 permalink: false
 ---
\ No newline at end of file
diff --git a/content/jdr/index.md b/content/jdr/index.md
index ebb84fe..9f1a755 100644
--- a/content/jdr/index.md
+++ b/content/jdr/index.md
@@ -5,5 +5,6 @@ eleventyNavigation:
   order: -1
   url: '#'
   notitle: true
+  group: "accueil"
 permalink: false
 ---
\ No newline at end of file
diff --git a/content/jdr/mobs/index.md b/content/jdr/mobs/index.md
index 52736b1..dd2bc6a 100644
--- a/content/jdr/mobs/index.md
+++ b/content/jdr/mobs/index.md
@@ -4,5 +4,6 @@ eleventyNavigation:
   key: Mobs
   order: 4
   url: '#'
+  group: "jdr"
 permalink: false
 ---
\ No newline at end of file
diff --git a/content/jdr/personnages/index.md b/content/jdr/personnages/index.md
index a825017..051134f 100644
--- a/content/jdr/personnages/index.md
+++ b/content/jdr/personnages/index.md
@@ -4,5 +4,6 @@ eleventyNavigation:
   key: Personnages
   order: 1
   url: '#'
+  group: "jdr"
 permalink: false
 ---
\ No newline at end of file
diff --git a/content/jdr/rules/bonus/index.md b/content/jdr/rules/bonus/index.md
index 2067cfc..25a625f 100644
--- a/content/jdr/rules/bonus/index.md
+++ b/content/jdr/rules/bonus/index.md
@@ -4,5 +4,7 @@ eleventyNavigation:
   key: Bonus
   order: 100
   url: '#'
+  group: "bonus"
+  notitle: true
 permalink: false
 ---
\ No newline at end of file
diff --git a/content/jdr/rules/index.md b/content/jdr/rules/index.md
index 18db419..1948f31 100644
--- a/content/jdr/rules/index.md
+++ b/content/jdr/rules/index.md
@@ -4,5 +4,7 @@ eleventyNavigation:
   key: Système de jeu
   order: 0
   url: '#'
+  notitle: true
+  group: "jdr"
 permalink: false
 ---
\ No newline at end of file
diff --git a/public/css/index.css b/public/css/index.css
index 3ed368a..e8993b1 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -2,7 +2,7 @@
   --color-gray-20: #e0e0e0;
   --color-gray-50: #C0C0C0;
   --color-gray-90: #002b36;
-  --sidebar-width: 280px;
+  --sidebar-width: 320px;
   --main-width: 780px;
   --main-width-large: 900px;
 
@@ -252,7 +252,7 @@ ul.nav,
   width:100%;
   text-decoration:dashed;
   color: white;
-  border-radius:3px;
+  border-radius:6px;
   padding:6px;
 }
 
@@ -311,6 +311,37 @@ aside {
   z-index:10;
 }
 
+#sidebar .nav {
+  display: none;
+  width: 100%;
+}
+
+.sidebar-selector {
+  padding:0;
+  margin:0;
+}
+
+.sidebar-selector button {
+  background: transparent;
+  border: 0;
+  margin:0;
+  line-height: 0;
+  width: 40px;
+  aspect-ratio: 1;
+  padding:0.25rem;
+  border-radius: 6px;
+}
+
+.sidebar-selector button:hover,
+.sidebar-selector button.active {
+  background-color: rgba(255,255,255,0.3);
+}
+
+.picture img {
+  border-radius: 12px;
+  box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
+}
+
 #more-info {
   min-width: 240px;
   width: 240px;
@@ -371,6 +402,11 @@ iframe {
   position: relative;
 }
 
+.icon-32 {
+  width: 1.8em;
+  height: 1.8em;
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
diff --git a/public/js/mobile-sidebar.js b/public/js/mobile-sidebar.js
index e38e864..266734d 100644
--- a/public/js/mobile-sidebar.js
+++ b/public/js/mobile-sidebar.js
@@ -8,3 +8,48 @@ document.getElementById('mobile-button').addEventListener('click', function () {
     sidebar.classList.add('hidden');
   }
 });
+
+document.addEventListener('DOMContentLoaded', function() {
+  // Fonction pour afficher le bon ul au chargement de la page
+  function showActiveNav() {
+      let activeLink = document.querySelector('a.active');
+      if (activeLink) {
+          const parentUl = activeLink.closest('ul.nav');
+          if (parentUl) {
+              parentUl.style.display = 'block';
+              
+              const dataSelect = parentUl.classList[1];
+              
+              const activeButton = document.querySelector(`button[data-select="${dataSelect}"]`);
+              if (activeButton) {
+                  activeButton.classList.add('active');
+              }
+          }
+      }
+  }
+
+  showActiveNav();
+
+  const buttons = document.querySelectorAll('.sidebar-selector button');
+
+  buttons.forEach(button => {
+      button.addEventListener('click', function() {
+          const selectedNav = this.getAttribute('data-select');
+
+          document.querySelectorAll('ul.nav').forEach(nav => {
+              nav.style.display = 'none';
+          });
+
+          const activeNav = document.querySelector(`ul.${selectedNav}`);
+          if (activeNav) {
+              activeNav.style.display = 'block';
+          }
+
+          buttons.forEach(btn => {
+              btn.classList.remove('active');
+          });
+
+          this.classList.add('active');
+      });
+  });
+});
\ No newline at end of file
