diff --git a/components/menu.html b/components/menu.html
index b71b35a..9b55571 100644
--- a/components/menu.html
+++ b/components/menu.html
@@ -12,7 +12,7 @@
       <ul class="submenu">
         <li><a href="/frontend/pages/chap1.html">Chapitre 1 : Les tuiles</a></li>
         <li><a href="/frontend/pages/chap2.html">Chapitre 2 : La main</a></li>
-        <li><a href="">Chapitre 3 : Les groupes</a></li>
+        <li><a href="/frontend/pages/chap3.html">Chapitre 3 : Les groupes</a></li>
       </ul>
     </li>
     <li>
diff --git a/frontend/pages/chap3.html b/frontend/pages/chap3.html
new file mode 100644
index 0000000..e0ad01f
--- /dev/null
+++ b/frontend/pages/chap3.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <title>Tuto Riichi</title>
+  <link rel="stylesheet" href="../../frontend/css/style.css">
+  <link rel="stylesheet" href="../../frontend/css/speech-bubble.css">
+  <link rel="stylesheet" href="../../frontend/css/hand.css">
+  <style>
+    #menu {
+      position: relative;
+      z-index: 10;
+    }
+
+    #mascotte {
+      position: fixed;
+      bottom: 0;
+      right: 160px;
+      z-index: 999;
+      transform: scaleX(-1);
+      cursor: pointer;
+    }
+
+    #mascotte img {
+      width: 250px;
+      height: auto;
+      display: block;
+    }
+
+    .speech-bubble {
+      position: fixed;
+      bottom: 320px;
+      right: 170px;
+      z-index: 998;
+      display: none;
+    }
+
+    .speech-bubble.visible {
+      display: flex;
+    }
+  </style>
+</head>
+<body>
+  <div id="menu"></div>
+  <div id="tiles-display"></div>
+  <div class="speech-bubble">
+    <div class="speech-text" id="speech-text"></div>
+  </div>
+  <div id="mascotte"></div>
+  
+  <script src="../../frontend/js/fr/texts.js"></script>
+  <script src="../../frontend/js/hand.js"></script>
+  <script>
+    // Charger le menu
+    fetch('../../components/menu.html')
+      .then(r => r.text())
+      .then(html => document.getElementById('menu').innerHTML = html);
+
+    // Afficher la mascotte et le texte
+    const mascolteEl = document.getElementById('mascotte');
+    mascolteEl.innerHTML = '<img src="../../img/tilineau/speaking.png" alt="Tilineau">';
+    document.getElementById('speech-text').innerHTML = texts.riichi.chap3;
+
+    // Toggle bulle de dialogue au clic sur la mascotte
+    const speechBubble = document.querySelector('.speech-bubble');
+    mascolteEl.addEventListener('click', () => {
+      speechBubble.classList.toggle('visible');
+      mascolteEl.innerHTML = speechBubble.classList.contains('visible')
+        ? '<img class="explaining" src="../../img/tilineau/speaking.png" alt="Tilineau">'
+        : '<img src="../../img/tilineau/speaking.png" alt="Tilineau">';
+    });
+  </script>
+</body>
+</html>
\ No newline at end of file
