diff --git a/components/menu.html b/components/menu.html
index 3a60613..79d0c33 100644
--- a/components/menu.html
+++ b/components/menu.html
@@ -52,7 +52,7 @@
           <li><a href="">Chapitre 5 : Une partie à trois</a></li>
         </ul>
     </li>
-    <li><a href="">Liste des Yakus</a></li>
+    <li><a href="/frontend/pages/liste_yakus.html">Liste des Yakus</a></li>
     <li><a href="">Ressources</a></li>
   </ul>
 </nav>
diff --git a/frontend/js/fr/texts.js b/frontend/js/fr/texts.js
index 92b9b54..37314e8 100644
--- a/frontend/js/fr/texts.js
+++ b/frontend/js/fr/texts.js
@@ -172,5 +172,11 @@ const texts = {
     Une liste exhaustive des yakus les plus courants au moins courants sont présentés dans<br>
     l'onglet dédié.
     `
+  },
+
+  liste_yakus:{
+    explanation:`
+    Liste des yakus les plus courants selon Tenhou février 2026
+    `
   }
 };
\ No newline at end of file
diff --git a/frontend/pages/liste_yakus.html b/frontend/pages/liste_yakus.html
new file mode 100644
index 0000000..880ec13
--- /dev/null
+++ b/frontend/pages/liste_yakus.html
@@ -0,0 +1,416 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <title>Liste des Yakus - 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: absolute;
+      top: 670px;
+      right: 100px;
+      z-index: 999;
+      transform: scaleX(-1);
+      cursor: pointer;
+    }
+
+    #mascotte img {
+      width: 250px;
+      height: auto;
+      display: block;
+    }
+
+    .speech-bubble {
+      position: absolute;
+      top: 150px;
+      right: 170px;
+      z-index: 1;
+      display: none;
+    }
+
+    .speech-bubble.visible {
+      display: flex;
+    }
+
+    h1 {
+      text-align: center;
+      color: white;
+      margin: 40px 0 50px 0;
+      font-size: 2.5rem;
+    }
+
+    .yakus-container {
+      max-width: 1000px;
+      margin: 0 auto;
+      padding: 20px;
+      display: grid;
+      gap: 20px;
+    }
+
+    .yaku-card {
+      background: rgba(45, 85, 60, 0.8);
+      border: 2px solid rgba(82, 183, 136, 0.6);
+      border-radius: 10px;
+      padding: 20px;
+      display: grid;
+      grid-template-columns: 1fr 100px;
+      gap: 20px;
+      align-items: center;
+      transition: all 0.3s ease;
+    }
+
+    .yaku-card:hover {
+      background: rgba(45, 85, 60, 1);
+      border-color: rgba(82, 183, 136, 1);
+      box-shadow: 0 0 20px rgba(82, 183, 136, 0.3);
+      transform: translateX(5px);
+    }
+
+    .yaku-info h3 {
+      color: #52b788;
+      margin: 0 0 10px 0;
+      font-size: 1.3rem;
+    }
+
+    .yaku-info p {
+      color: #c8e6c9;
+      margin: 0;
+      line-height: 1.5;
+      font-size: 0.95rem;
+    }
+
+    .yaku-percentage {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(135deg, #52b788, #40916c);
+      border-radius: 8px;
+      padding: 15px;
+      min-height: 80px;
+    }
+
+    .percentage-number {
+      font-size: 2rem;
+      font-weight: bold;
+      color: white;
+    }
+
+    .percentage-label {
+      font-size: 0.8rem;
+      color: #e8f5e9;
+      margin-top: 5px;
+    }
+
+    .yaku-bar {
+      width: 100%;
+      height: 4px;
+      background: rgba(82, 183, 136, 0.3);
+      border-radius: 2px;
+      margin-top: 10px;
+      overflow: hidden;
+    }
+
+    .yaku-bar-fill {
+      height: 100%;
+      background: linear-gradient(90deg, #52b788, #74c69d);
+      border-radius: 2px;
+    }
+  </style>
+</head>
+<body>
+  <div id="menu"></div>
+  <div class="speech-bubble">
+    <div class="speech-text" id="speech-text"></div>
+  </div>
+  <div id="mascotte"></div>
+
+  <h1>Yakus les plus courants</h1>
+
+  <div class="yakus-container" id="yakus-list"></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 et le texte
+    const mascolteEl = document.getElementById('mascotte');
+    mascolteEl.innerHTML = '<img src="/img/tilineau/idle.png" alt="Tilineau">';
+    document.getElementById('speech-text').innerHTML = texts.liste_yakus.explanation;
+
+    // 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/explaining.png" alt="Tilineau">'
+        : '<img src="/img/tilineau/idle.png" alt="Tilineau">';
+    });
+
+    // Données des yakus
+    const yakus = [
+      {
+        name: 'Riichi',
+        description: '',
+        percentage: 41.9
+      },
+      {
+        name: 'Brelan de dragon',
+        description: '',
+        percentage: 23.8
+      },
+      {
+        name: 'Tanyao',
+        description: '',
+        percentage: 23.3
+      },
+      {
+        name: 'Pinfu',
+        description: '',
+        percentage: 19.9
+      },
+      {
+        name: 'Tout caché tiré',
+        description: '',
+        percentage: 17.8
+      },
+      {
+        name: 'Ippatsu',
+        description: '',
+        percentage: 9.2
+      },
+      {
+        name: 'Vent de la manche',
+        description: '',
+        percentage: 8.3
+      },
+      {
+        name: 'Vent du joueur',
+        description: '',
+        percentage: 8.17
+      },
+      {
+        name: 'Semie pure',
+        description: '',
+        percentage: 6.3
+      },
+      {
+        name: 'iipeiko',
+        description: '',
+        percentage: 4.2
+      },
+      {
+        name: 'sanshoku',
+        description: '',
+        percentage: 3.5
+      },
+      {
+        name: 'Tout brelan',
+        description: '',
+        percentage: 3.0
+      },
+      {
+        name: '7 paires',
+        description: '',
+        percentage: 2.3
+      },
+      {
+        name: 'ittsu',
+        description: '',
+        percentage: 1.6
+      },
+      {
+        name: 'Chanta',
+        description: '',
+        percentage: 1.0
+      },
+      {
+        name: 'Pure',
+        description: '',
+        percentage: 0.87
+      },
+      {
+        name: 'Trois brelans cachés',
+        description: '',
+        percentage: 0.68
+      },
+      {
+        name: 'Under the river',
+        description: '',
+        percentage: 0.57
+      },
+      {
+        name: 'Terminal partout',
+        description: '',
+        percentage: 0.32
+      },
+      {
+        name: 'Under the sea',
+        description: '',
+        percentage: 0.31
+      },
+      {
+        name: '(after a kong)',
+        description: '',
+        percentage: 0.28
+      },
+      {
+        name: 'Double riichi?',
+        description: '',
+        percentage: 0.17
+      },
+      {
+        name: 'Trois petits dragons',
+        description: '',
+        percentage: 0.12
+      },
+      {
+        name: 'Tout terminal et honneur',
+        description: '',
+        percentage: 0.058
+      },
+      {
+        name: "Vole d'un Khan",
+        description: '',
+        percentage: 0.057
+      },
+      {
+        name: '(rayanpeiko)',
+        description: '',
+        percentage: 0.042
+      },
+      {
+        name: 'Triple brelan mixte',
+        description: '',
+        percentage: 0.038
+      },
+      {
+        name: 'Quatre brelans cachés',
+        description: '',
+        percentage: 0.036
+      },
+      {
+        name: 'Triple grands dragons',
+        description: '',
+        percentage: 0.032
+      },
+      {
+        name: '13 orphelins',
+        description: '',
+        percentage: 0.022
+      },
+      {
+        name: 'Quatre petits vents',
+        description: '',
+        percentage: 0.0095
+      },
+      {
+        name: 'Tout honneur',
+        description: '',
+        percentage: 0.0054
+      },
+      {
+        name: 'su anko tanko',
+        description: '',
+        percentage: 0.0038
+      },
+      {
+        name: 'Trois Khan',
+        description: '',
+        percentage: 0.0035
+      },
+      {
+        name: 'Tout terminal',
+        description: '',
+        percentage: 0.00059
+      },
+      {
+        name: 'Quatre grands vents',
+        description: '',
+        percentage: 0.00059
+      },
+      {
+        name: 'Bénédiction du ciel',
+        description: '',
+        percentage: 0.00044
+      },
+      {
+        name: 'Bénédiction de la terre',
+        description: '',
+        percentage: 0.00044
+      },
+      {
+        name: 'Neufs portes',
+        description: '',
+        percentage: 0.00044
+      },
+      {
+        name: 'Tout vert',
+        description: '',
+        percentage: 0.00030
+      },
+      {
+        name: 'Quatres khans',
+        description: '',
+        percentage: 0.00015
+      },
+    ];
+
+    // Afficher les yakus
+    const yakusList = document.getElementById('yakus-list');
+    yakus.forEach(yaku => {
+      const card = document.createElement('div');
+      card.className = 'yaku-card';
+      
+      const info = document.createElement('div');
+      info.className = 'yaku-info';
+      
+      const title = document.createElement('h3');
+      title.textContent = yaku.name;
+      
+      const desc = document.createElement('p');
+      desc.textContent = yaku.description;
+      
+      const bar = document.createElement('div');
+      bar.className = 'yaku-bar';
+      
+      const barFill = document.createElement('div');
+      barFill.className = 'yaku-bar-fill';
+      barFill.style.width = yaku.percentage + '%';
+      bar.appendChild(barFill);
+      
+      info.appendChild(title);
+      info.appendChild(desc);
+      info.appendChild(bar);
+      
+      const percentage = document.createElement('div');
+      percentage.className = 'yaku-percentage';
+      
+      const number = document.createElement('div');
+      number.className = 'percentage-number';
+      number.textContent = yaku.percentage + '%';
+      
+      const label = document.createElement('div');
+      label.className = 'percentage-label';
+      label.textContent = 'Fréquence';
+      
+      percentage.appendChild(number);
+      percentage.appendChild(label);
+      
+      card.appendChild(info);
+      card.appendChild(percentage);
+      
+      yakusList.appendChild(card);
+    });
+  </script>
+</body>
+</html>
