diff --git a/components/menu.html b/components/menu.html
index d678115..9ee01a2 100644
--- a/components/menu.html
+++ b/components/menu.html
@@ -10,7 +10,7 @@
     <li class="dropdown">
       <a href="#">Riichi</a>
       <ul class="submenu">
-        <li><a href="">Chapitre 1 : Les tuiles</a></li>
+        <li><a href="/frontend/pages/chap1.html">Chapitre 1 : Les tuiles</a></li>
         <li><a href="">Chapitre 2 : La main</a></li>
         <li><a href="">Chapitre 3 : Les groupes</a></li>
       </ul>
diff --git a/frontend/css/speech-bubble.css b/frontend/css/speech-bubble.css
index 79b47cf..0fa29e1 100644
--- a/frontend/css/speech-bubble.css
+++ b/frontend/css/speech-bubble.css
@@ -36,7 +36,7 @@
 .speech-text {
   flex: 1;
   white-space: nowrap;
-  font-size: 1.2rem;
+  font-size: 1.5rem;
 }
 
 .dialog-buttons {
diff --git a/frontend/js/fr/texts.js b/frontend/js/fr/texts.js
index f7d4412..d68b5d8 100644
--- a/frontend/js/fr/texts.js
+++ b/frontend/js/fr/texts.js
@@ -15,5 +15,23 @@ const texts = {
     Pour obtenir mon aide et ouvrir et fermer ce dialogue, il suffit de cliquer sur moi, je ne vais<br>
     pas te mordre !
     `
+  },
+
+  riichi: {
+    chap1: `
+    Voici l'ensemble des tuiles au Riichi. Chacune des tuiles présentent ici<br>
+    existe en exactement 4 exemplaires, formant un jeu de 136 tuiles.<br>
+    <br>
+    Il y a 3 types de tuiles:<br>
+    - Les familles : Caractères, Ronds et Bambous<br>
+    - Les vents : Est, Sud, Ouest et Nord<br>
+    - Les dragons : Rouge, Vert et Blanc<br>
+    <br>
+    Les familles sont numérotées de 1 à 9, exactement comme dans un jeu<br>
+    de cartes.<br>
+    <br>
+    Les vents et dragons quant à eux n'ont pas de numéro. On les appelle<br>
+    les honneurs, et ne sont caractérisés que par leur nom.
+    `
   }
 };
diff --git a/frontend/pages/chap1.html b/frontend/pages/chap1.html
new file mode 100644
index 0000000..1f526b1
--- /dev/null
+++ b/frontend/pages/chap1.html
@@ -0,0 +1,300 @@
+<!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">
+  <style>
+    #menu {
+      position: relative;
+      z-index: 10;
+    }
+
+    #mascotte {
+      position: fixed;
+      bottom: 0px;
+      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;
+    }
+
+    #tiles-display {
+      padding: 20px;
+      max-width: 900px;
+      margin: 20px auto;
+      display: grid;
+      grid-template-columns: 100px 1fr;
+      gap: 30px;
+      align-items: start;
+    }
+
+    .tiles-family {
+      margin-bottom: 0;
+      grid-column: 1 / -1;
+      display: grid;
+      grid-template-columns: 100px 1fr;
+      gap: 30px;
+      align-items: start;
+    }
+
+    .tiles-family h3 {
+      color: #ffffff;
+      margin: 0;
+      font-size: 1.2rem;
+      white-space: nowrap;
+    }
+
+    .tiles-grid {
+      display: grid;
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+      gap: 3px;
+    }
+
+    .tile-item {
+      padding: 0;
+      text-align: center;
+      border-radius: 4px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .tiles-numbers {
+      grid-column: 2;
+      display: grid;
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+      gap: 3px;
+      margin-bottom: 20px;
+    }
+
+    .tiles-numbers div {
+      text-align: center;
+      font-weight: bold;
+      color: #ffffff;
+      padding: 5px 0;
+      min-height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .wind-names {
+      grid-column: 2;
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 3px;
+      margin-bottom: 20px;
+    }
+
+    .wind-names div {
+      text-align: center;
+      font-weight: bold;
+      color: #ffffff;
+      padding: 5px 0;
+      min-height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .dragon-names {
+      grid-column: 2;
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 3px;
+      margin-bottom: 20px;
+    }
+
+    .dragon-names div {
+      text-align: center;
+      font-weight: bold;
+      color: #ffffff;
+      padding: 5px 0;
+      min-height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  </style>
+</head>
+<body>
+  <div id="menu"></div>
+  <div id="tile-container"></div>
+  <div id="tiles-display">
+    <div class="tiles-numbers">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+      <div>4</div>
+      <div>5</div>
+      <div>6</div>
+      <div>7</div>
+      <div>8</div>
+      <div>9</div>
+    </div>
+  </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>
+    // Charger le menu
+    fetch('../../components/menu.html')
+      .then(r => r.text())
+      .then(html => document.getElementById('menu').innerHTML = html);
+
+    // Afficher la mascotte
+    const mascolteEl = document.getElementById('mascotte');
+    mascolteEl.innerHTML = '<img src="../../img/tilineau/speaking.png" alt="Tilineau">';
+
+    // Afficher le texte de bienvenue
+    document.getElementById('speech-text').innerHTML = texts.riichi.chap1;
+
+    // Toggle bulle de dialogue au clic sur la mascotte
+    const speechBubble = document.querySelector('.speech-bubble');
+    mascolteEl.addEventListener('click', () => {
+      speechBubble.classList.toggle('visible');
+      if (speechBubble.classList.contains('visible')) {
+        mascolteEl.innerHTML = '<img class="explaining" src="../../img/tilineau/explaining.png" alt="Tilineau">';
+      } else {
+        mascolteEl.innerHTML = '<img src="../../img/tilineau/speaking.png" alt="Tilineau">';
+      }
+    });
+
+    let allTiles = [];
+
+    // Récupérer les tuiles
+    fetch('http://localhost:5000/api/tiles')
+      .then(r => r.json())
+      .then(data => {
+        allTiles = data.tiles;
+        
+        const tilesDisplay = document.getElementById('tiles-display');
+        
+        // Man
+        let section = document.createElement('div');
+        section.className = 'tiles-family';
+        const manTitle = document.createElement('h3');
+        manTitle.textContent = 'Caractères';
+        const manGrid = document.createElement('div');
+        manGrid.className = 'tiles-grid';
+        section.appendChild(manTitle);
+        section.appendChild(manGrid);
+        for (let i = 0; i < 9; i++) {
+          const tileDiv = document.createElement('div');
+          tileDiv.className = 'tile-item';
+          tileDiv.innerHTML = allTiles[i].svg;
+          manGrid.appendChild(tileDiv);
+        }
+        tilesDisplay.appendChild(section);
+        
+        // Pin
+        section = document.createElement('div');
+        section.className = 'tiles-family';
+        const pinTitle = document.createElement('h3');
+        pinTitle.textContent = 'Ronds';
+        const pinGrid = document.createElement('div');
+        pinGrid.className = 'tiles-grid';
+        section.appendChild(pinTitle);
+        section.appendChild(pinGrid);
+        for (let i = 9; i < 18; i++) {
+          const tileDiv = document.createElement('div');
+          tileDiv.className = 'tile-item';
+          tileDiv.innerHTML = allTiles[i].svg;
+          pinGrid.appendChild(tileDiv);
+        }
+        tilesDisplay.appendChild(section);
+        
+        // Sou
+        section = document.createElement('div');
+        section.className = 'tiles-family';
+        const souTitle = document.createElement('h3');
+        souTitle.textContent = 'Bambous';
+        const souGrid = document.createElement('div');
+        souGrid.className = 'tiles-grid';
+        section.appendChild(souTitle);
+        section.appendChild(souGrid);
+        for (let i = 18; i < 27; i++) {
+          const tileDiv = document.createElement('div');
+          tileDiv.className = 'tile-item';
+          tileDiv.innerHTML = allTiles[i].svg;
+          souGrid.appendChild(tileDiv);
+        }
+        tilesDisplay.appendChild(section);
+
+        // Ligne des noms de vents
+        const windNamesDiv = document.createElement('div');
+        windNamesDiv.className = 'wind-names';
+        windNamesDiv.innerHTML = '<div>Est</div><div>Sud</div><div>Ouest</div><div>Nord</div>';
+        tilesDisplay.appendChild(windNamesDiv);
+
+        // Vents
+        section = document.createElement('div');
+        section.className = 'tiles-family';
+        const windTitle = document.createElement('h3');
+        windTitle.textContent = 'Vents';
+        const windGrid = document.createElement('div');
+        windGrid.className = 'tiles-grid';
+        windGrid.style.gridTemplateColumns = 'repeat(4, minmax(0, 1fr))';
+        section.appendChild(windTitle);
+        section.appendChild(windGrid);
+        const windNames = ['Est', 'Sud', 'Ouest', 'Nord'];
+        for (let i = 27; i < 31; i++) {
+          const tileDiv = document.createElement('div');
+          tileDiv.className = 'tile-item';
+          tileDiv.innerHTML = allTiles[i].svg;
+          windGrid.appendChild(tileDiv);
+        }
+        tilesDisplay.appendChild(section);
+
+        // Ligne des noms de dragons
+        const dragonNamesDiv = document.createElement('div');
+        dragonNamesDiv.className = 'dragon-names';
+        dragonNamesDiv.innerHTML = '<div>Blanc</div><div>Vert</div><div>Rouge</div>';
+        tilesDisplay.appendChild(dragonNamesDiv);
+
+        // Dragons
+        section = document.createElement('div');
+        section.className = 'tiles-family';
+        const dragonTitle = document.createElement('h3');
+        dragonTitle.textContent = 'Dragons';
+        const dragonGrid = document.createElement('div');
+        dragonGrid.className = 'tiles-grid';
+        dragonGrid.style.gridTemplateColumns = 'repeat(3, minmax(0, 1fr))';
+        section.appendChild(dragonTitle);
+        section.appendChild(dragonGrid);
+        for (let i = 31; i < 34; i++) {
+          const tileDiv = document.createElement('div');
+          tileDiv.className = 'tile-item';
+          tileDiv.innerHTML = allTiles[i].svg;
+          dragonGrid.appendChild(tileDiv);
+        }
+        tilesDisplay.appendChild(section);
+      });
+
+
+  </script>
+</body>
+</html>
\ No newline at end of file
