diff --git a/src/main/game_ui/static/css/home_awale_styles.css b/src/main/game_ui/static/css/home_awale_styles.css
index 3ce6d60..1d280e0 100644
--- a/src/main/game_ui/static/css/home_awale_styles.css
+++ b/src/main/game_ui/static/css/home_awale_styles.css
@@ -233,4 +233,87 @@ body {
 
 .selected_2:hover{
     background-color: #cc945b;
-}  
\ No newline at end of file
+} 
+
+
+
+/* ============== fenetre regles ==========================*/
+/* Styles pour le bouton */
+#reglesBtn{
+    user-select: none;
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 40px;
+    margin: 10px;
+    padding: 0;
+    left: 0%;
+    top: 0%;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+    transform: translate(-10%, 0%);
+    background-color: #0892A5;
+    border-radius: 10px;
+    transition: transform .1s;
+    font-size: 110%;
+    font-size: 16px;
+    color: #DDE0BD;
+
+}
+
+#reglesBtn:hover {
+    background-color: #08636F;
+    transform: scale(1.1) translate(-10%, 0%);
+}
+
+/* Styles pour la fenêtre modale */
+.modal {
+    display: none; /* Masquer la fenêtre modale par défaut */
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.5);
+}
+
+.modal-content {
+    display: flex;
+    flex-direction: column;
+    font-size: 20px;
+    background-color: #0892A5;
+    border-radius: 10px;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    position: relative;
+}
+
+.regles-content{
+    display: flex;
+    flex-direction: column;
+    float: left;
+    width: 100%;
+}
+
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
\ No newline at end of file
diff --git a/src/main/game_ui/static/css/home_hex_styles.css b/src/main/game_ui/static/css/home_hex_styles.css
index 8360c10..fc88022 100644
--- a/src/main/game_ui/static/css/home_hex_styles.css
+++ b/src/main/game_ui/static/css/home_hex_styles.css
@@ -292,4 +292,96 @@ body {
 #container{
     justify-content: center;
     flex-direction: column;
+}
+
+/* ============== fenetre regles ==========================*/
+/* Styles pour le bouton */
+#reglesBtn{
+    user-select: none;
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 40px;
+    margin: 10px;
+    padding: 0;
+    left: 0%;
+    top: 0%;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+    transform: translate(-10%, 0%);
+    background-color: #0892A5;
+    border-radius: 10px;
+    transition: transform .1s;
+    font-size: 110%;
+    font-size: 16px;
+    color: #DDE0BD;
+
+}
+
+#reglesBtn:hover {
+    background-color: #08636F;
+    transform: scale(1.1) translate(-10%, 0%);
+}
+
+/* Styles pour la fenêtre modale */
+.modal {
+    display: none; /* Masquer la fenêtre modale par défaut */
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.5);
+}
+
+.modal-content {
+    display: flex;
+    flex-direction: row;
+    font-size: 20px;
+    background-color: #0892A5;
+    border-radius: 10px;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    position: relative;
+}
+
+.regles-content{
+    float: left;
+    width: 50%;
+}
+
+.exemple{
+    justify-content: center;
+    align-items: center;
+    width: 50%;
+    padding-left: 15%;
+    padding-top: 3%;
+}
+.gif{
+    width: 100%;
+    height: 100%;
+    background-image: url(../images/HexGif.gif);
+    background-repeat: no-repeat;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/src/main/game_ui/static/images/HexGif.gif b/src/main/game_ui/static/images/HexGif.gif
new file mode 100644
index 0000000..dbd1243
Binary files /dev/null and b/src/main/game_ui/static/images/HexGif.gif differ
diff --git a/src/main/game_ui/static/js/game_hex.js b/src/main/game_ui/static/js/game_hex.js
index 1fce4af..1dd4d02 100644
--- a/src/main/game_ui/static/js/game_hex.js
+++ b/src/main/game_ui/static/js/game_hex.js
@@ -1,3 +1,7 @@
+var hover1 = "#344792"
+var hover2 = "#BA3533"
+var hex_color = "#B0BFB1"
+
 window.onload = function () {
     let current_player = 1; // Player 1 starts the game
     let game_over = false;
@@ -246,19 +250,19 @@ window.onload = function () {
     function survolHex(element) {
         return function (event) {
             // Hover uniquement si on n'est ni une couleur ni désactivé
-            if (event.type === "mouseover" && game_over === false && !element.getAttribute('couleur') && !element.getAttribute("disabled")) {
-                if (current_player === 1) {
-                    element.style.backgroundColor = "#344792";
+            if (event.type === "mouseover" && game_over===false && !element.getAttribute('couleur') && !element.getAttribute("disabled")){
+                if (current_player===1){
+                    element.style.backgroundColor = hover1;
                 }
-                if (current_player === 2) {
-                    element.style.backgroundColor = "#BA3533";
+                if (current_player===2){
+                    element.style.backgroundColor = hover2;
                 }
                 element.setAttribute("nimp", true);
             }
             // Enlève le hover si on quitte un hex ni en couleur ni disabled
-            else if (event.type === "mouseout" && game_over === false && element.getAttribute("nimp") && !element.getAttribute('disabled')) {
-                element.style.backgroundColor = "#B0BFB1";
-                element.removeAttribute("nimp");
+            else if (event.type === "mouseout" && game_over===false && element.getAttribute("nimp") && !element.getAttribute('disabled')){
+               element.style.backgroundColor = hex_color;
+               element.removeAttribute("nimp");
             }
         }
     }
@@ -287,6 +291,10 @@ document.addEventListener("keydown", gestionnairePressionTouche);
 
 
 function changerFichiers() {
+    var bhover1 = "#344792"
+    var bhover2 = "#BA3533"
+    var mhover1 = "#5197BA"
+    var mhover2 = "#F6995C"
     var Mblue = "rgb(81, 130, 155)";
     var Mred = "rgb(248, 124, 41)";
     var blue = "rgb(41, 51, 92)";
@@ -297,28 +305,37 @@ function changerFichiers() {
     if (styleSheet.getAttribute('href') === "../static/css/game_hex_styles.css") {
         //console.log("touché");
         styleSheet.setAttribute('href', "../static/css/game_hex_marine_skin.css");
+        hex_color = "#ADBBC6"
+        hover1 = mhover1;
+        hover2 = mhover2;
         div1.setAttribute("value", Mred);
         div2.setAttribute("value", Mblue);
-        changecolor(blue, Mblue, red, Mred)
+        changecolor(blue,Mblue,red,Mred,hex_color)
     } else {
         styleSheet.setAttribute('href', "../static/css/game_hex_styles.css");
-        div1.setAttribute("value", red);
+        hex_color = "#B0BFB1"
+        hover1 = bhover1;
+        hover2 = bhover2;
+        div1.setAttribute("value",red);
         div2.setAttribute("value", blue);
-        changecolor(Mblue, blue, Mred, red)
+        changecolor(Mblue,blue,Mred,red,hex_color)
     }
 
 }
 
-function changecolor(b1, b2, r1, r2) {
+function changecolor(b1,b2,r1,r2,hex_color){
     const cells = document.querySelectorAll('.hex');
     cells.forEach(hex => {
-        console.log(hex.style.backgroundColor);
+        //console.log(hex.style.backgroundColor);
         if (hex.style.backgroundColor == b1) {
             hex.style.backgroundColor = b2;
         }
-        if (hex.style.backgroundColor == r1) {
+        else if (hex.style.backgroundColor == r1) {
             hex.style.backgroundColor = r2;
         }
+        else {
+            hex.style.backgroundColor = hex_color;
+        }
     })
 }
 
diff --git a/src/main/game_ui/static/js/game_hexia.js b/src/main/game_ui/static/js/game_hexia.js
index 83c3a59..2ff191a 100644
--- a/src/main/game_ui/static/js/game_hexia.js
+++ b/src/main/game_ui/static/js/game_hexia.js
@@ -372,9 +372,9 @@ window.onload = async function () {
                 element.setAttribute("nimp", true);
             }
             // Enlève le hover si on quitte un hex ni en couleur ni disabled
-            else if (event.type === "mouseout" && game_over === false && element.getAttribute("nimp") && !element.getAttribute('disabled')) {
-                element.style.backgroundColor = "#B0BFB1";
-                element.removeAttribute("nimp");
+            else if (event.type === "mouseout" && game_over===false && element.getAttribute("nimp") && !element.getAttribute('disabled')){
+               element.style.backgroundColor = "#ADBBC6";
+               element.removeAttribute("nimp");
             }
         }
     }
diff --git a/src/main/game_ui/static/js/home_awale.js b/src/main/game_ui/static/js/home_awale.js
index 1214bd7..92ca13f 100644
--- a/src/main/game_ui/static/js/home_awale.js
+++ b/src/main/game_ui/static/js/home_awale.js
@@ -35,4 +35,27 @@ function player_blue() {
     document.getElementById("button_red").classList.remove("selected_2")
     document.getElementById("button_blue").classList.add("selected_2")
     player = 2;
-}
\ No newline at end of file
+}
+
+// ========== fenetre regles ==================================
+
+const openModalBtn = document.getElementById('reglesBtn');
+const modal = document.getElementById('modal');
+const closeBtn = document.getElementsByClassName('close')[0];
+
+// Fonction pour ouvrir la fenêtre regles
+openModalBtn.onclick = function() {
+    modal.style.display = 'block';
+}
+
+// Fonction pour fermer la fenêtre modale lorsque l'utilisateur clique sur le bouton de fermeture (×)
+closeBtn.onclick = function() {
+    modal.style.display = 'none';
+}
+
+// Fermer la fenêtre modale si l'utilisateur clique en dehors de la fenêtre modale
+window.onclick = function(event) {
+    if (event.target == modal) {
+        modal.style.display = 'none';
+    }
+}
diff --git a/src/main/game_ui/static/js/home_hex.js b/src/main/game_ui/static/js/home_hex.js
index 38e63a4..8ca9d08 100644
--- a/src/main/game_ui/static/js/home_hex.js
+++ b/src/main/game_ui/static/js/home_hex.js
@@ -57,4 +57,25 @@ function back() {
     window.location.href = '/';
 }
 
+// ========== fenetre regles ==================================
 
+const openModalBtn = document.getElementById('reglesBtn');
+const modal = document.getElementById('modal');
+const closeBtn = document.getElementsByClassName('close')[0];
+
+// Fonction pour ouvrir la fenêtre regles
+openModalBtn.onclick = function() {
+    modal.style.display = 'block';
+}
+
+// Fonction pour fermer la fenêtre modale lorsque l'utilisateur clique sur le bouton de fermeture (×)
+closeBtn.onclick = function() {
+    modal.style.display = 'none';
+}
+
+// Fermer la fenêtre modale si l'utilisateur clique en dehors de la fenêtre modale
+window.onclick = function(event) {
+    if (event.target == modal) {
+        modal.style.display = 'none';
+    }
+}
diff --git a/src/main/game_ui/templates/home_awale.html b/src/main/game_ui/templates/home_awale.html
index 94fd242..bd1c19f 100644
--- a/src/main/game_ui/templates/home_awale.html
+++ b/src/main/game_ui/templates/home_awale.html
@@ -1,28 +1,28 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <title>Jeux combinatoires</title>
     <link rel="stylesheet" href="../static/css/home_awale_styles.css" />
-  </head>
+</head>
 
   <body>
     <div class="home" onclick="back()">Home</div>
-    <div class="titre">
-      <h1><center>Awale</center></h1>
-    </div>
+        <div class="titre">
+            <h1><center>Awale</center></h1>
+        </div>
 
     <div class="container">
-      <form action="/game_awale" method="post">
+    <form action="/game_awale" method="post">
         <div class="start_game1v1" type="button" onclick="submitForm(1)">Player vs Player</div>
-      </form>
-      <div class="containeIA">
+    </form>
+    <div class="containeIA">
         <form action="/game_awaleia" method="post">
-          <input type="hidden" id="player" name="player" value="" />
-          <div class="start_gameIA" type="button" onclick="submitForm(2)">Player vs IA</div>
+            <input type="hidden" id="player" name="player" value="" />
+            <div class="start_gameIA" type="button" onclick="submitForm(2)">Player vs IA</div>
         </form>
         <div class="choose_color">
-          <div class="chooseplayer_blue color_button selected_2" id="button_red" onclick="player_red()">Red</div>
-          <div class="chooseplayer_red color_button" id="button_blue" onclick="player_blue()">Blue</div>
+            <div class="chooseplayer_blue color_button selected_2" id="button_red" onclick="player_red()">Red</div>
+            <div class="chooseplayer_red color_button" id="button_blue" onclick="player_blue()">Blue</div>
         </div>
       </div>
 
@@ -32,6 +32,23 @@ <h1><center>Awale</center></h1>
 
       <div class="button_out"></div>
     </div>
+    <button id="reglesBtn">Regles</button>
+
+    <div id="modal" class="modal">
+      <div class="modal-content">
+        <span class="close">&times;</span>
+        <div class="regles-content">
+          <p>L'awalé ou awélé est un jeu de société combinatoire abstrait créé en Afrique. </p>
+
+          <p>Chaque tour consiste à choisir l'un des trous de son camp, puis à prendre toutes les graines de ce trou pour les semer une par une dans les trous suivants, d'abord sur sa propre rangée, puis sur celle de l'adversaire, dans le sens trigonometrique.</p>
+
+          <p>Si la dernière graine semée atterrit dans un trou du camp adverse et qu'il y a alors deux ou trois graines dans ce trou, le joueur capture ces graines et les met de côté. Ensuite, il regarde la case précédente et capture également si elle contient deux ou trois graines, et ainsi de suite jusqu'à son camp ou jusqu'à ce qu'il y ait un nombre différent de graines.</p>
+
+          <p>La partie se termine lorsque l'un des joueurs a capturé au moins 25 graines (la moitié ou plus), lorsqu'il n'est plus possible de capturer d'autres graines, ou lorsqu'un joueur n'a plus de graines dans son camp sans possibilité de nourrir son adversaire.</p>
+        </div>
+      </div>
+    </div>
+
     <script src="../static/js/home_awale.js"></script>
   </body>
 </html>
diff --git a/src/main/game_ui/templates/home_hex.html b/src/main/game_ui/templates/home_hex.html
index 1e5d6e4..43a2499 100644
--- a/src/main/game_ui/templates/home_hex.html
+++ b/src/main/game_ui/templates/home_hex.html
@@ -47,6 +47,36 @@ <h1><center>Hex</center></h1>
       </form>
     </div>
 
+    <button id="reglesBtn">Regles</button>
+
+    <div id="modal" class="modal">
+      <div class="modal-content">
+        <span class="close">&times;</span>
+        <div class="regles-content">
+          <p>Le jeu de Hex est un jeu de stratégie abstrait pour deux joueurs,
+          où le joueur 1 utilise la couleur bleue et le joueur 2 utilise la couleur rouge.</p>
+
+          <p>Le but du jeu est de créer une chaîne continue d'hexagones 
+          de sa propre couleur reliant deux bords opposés du plateau : 
+          le haut et le bas pour le joueur rouge, et la gauche et la droite pour le joueur bleu.</p>
+
+          <p>Le jeu se déroule sur un plateau hexagonal de taille variable,
+          où les joueurs placent alternativement des hexagones de leur couleur sur les cases du plateau.
+          Le joueur bleu commence en plaçant un hexagone bleu sur n'importe quelle case vide du plateau. 
+          Les joueurs se relaient ensuite pour placer un hexagone de leur couleur sur une case libre du plateau,
+          et une fois placée, un hexagone ne peut plus être déplacée ou retirée du plateau.</p>
+
+          <p>La partie se termine dès qu'un joueur réussit à relier ses deux bords 
+          avec une chaîne continue de pierres de sa couleur. 
+          Le premier joueur à atteindre cet objectif est déclaré vainqueur.</p>
+        </div>
+        <div class="exemple">
+          <div class="gif"> 
+          </div>
+      </div>
+      </div>
+    </div>
+
     <script src="../static/js/home_hex.js"></script>
   </body>
 </html>