diff --git a/htdocs/page_acceuil.html b/htdocs/page_acceuil.html
index 970950ab170ec7ebd26ee940a3c284921662a684..fb30a0a495ecd7dc5ec77c0792ee6202f22fba8e 100644
--- a/htdocs/page_acceuil.html
+++ b/htdocs/page_acceuil.html
@@ -1,23 +1,32 @@
 <!DOCTYPE html>
 <html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Page d'Accueil - Jeu d'Échecs</title>
-    <link rel="stylesheet" href="style_page_acceuil.css">
-</head>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Page d'Accueil - Jeu d'Échecs</title>
+        <link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet"> <!-- Ajout de la police Libre Baskerville -->
+        <link rel="stylesheet" href="style_page_acceuil.css">
+    </head>    
+    
+    
 <body>
     <header>
-        <h1>Bienvenue sur le Jeu d'Échecs d'Adam et Thomas</h1>
+        <h1>Bienvenue sur le Jeu d'Échecs</h1>
     </header>
 
-    <section id="options">
+    <section id="menu">
         <h2>Choisissez une option :</h2>
-        <ul>
-            <li><a href="page_jeu.html">Jouer</a></li>
-            <li><a href="#rankings.html">Classement</a></li>
-            <li><a href="#contact.html">Contact</a></li>
-        </ul>
+        <div class="options-container">
+            <div class="option">
+                <a href="game.html">Jouer</a>
+            </div>
+            <div class="option">
+                <a href="#rankings">Classement</a>
+            </div>
+            <div class="option">
+                <a href="#contact">Contact</a>
+            </div>
+        </div>
     </section>
 
     <footer>
diff --git a/htdocs/style_page_acceuil.css b/htdocs/style_page_acceuil.css
index f2dca3c85c6021c6a16b8bc752d40e79117bb84d..b5fa5bcae1f69b244519bd4ac9126f16b526b4b2 100644
--- a/htdocs/style_page_acceuil.css
+++ b/htdocs/style_page_acceuil.css
@@ -1,20 +1,20 @@
 /* Général */
 body {
-    font-family: Arial, sans-serif;
+    font-family: 'Libre Baskerville', serif;  /* Utilisation de la police de style rétro */
     margin: 0;
     padding: 0;
-    background-color: #a8d5ba;
-    color: black;
+    background-color: #f4f4f4;
+    color: #333;
 }
 
 h1, h2 {
-    color: #a8d5ba;
+    color: #444;
 }
 
 /* Header */
 header {
-    background-color: black;
-    color: #a8d5ba;
+    background-color: #333;
+    color: white;
     padding: 20px;
     text-align: center;
 }
@@ -23,39 +23,51 @@ header h1 {
     margin: 0;
 }
 
-nav ul {
-    list-style: none;
-    padding: 0;
+/* Menu */
+#menu {
+    text-align: center;
+    margin-top: 20px;
 }
 
-nav ul li {
-    display: inline;
-    margin: 0 10px;
+#menu h2 {
+    font-size: 24px;
+    margin-bottom: 20px;
 }
 
-nav ul li a {
-    color: #a8d5ba;
-    text-decoration: none;
+.options-container {
+    display: flex;
+    justify-content: center;
+    gap: 40px; /* espace entre les cases */
 }
 
-nav ul li a:hover {
-    text-decoration: underline;
+.option {
+    width: 250px;
+    height: 150px;
+    border: 2px solid #333;
+    border-radius: 10px;
+    background-color: #b60c0c;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
-/* Sections */
-section {
-    padding: 20px;
-    margin: 20px;
+.option a {
+    color: white;
+    font-size: 18px;
+    text-decoration: none;
+    font-weight: bold;
+    text-align: center;
 }
 
-#chessboard {
-    background-color: #a8d5ba;
-    border: 5px solid black;
+.option a:hover {
+    text-decoration: underline;
+    background-color: #F5DEB3;
 }
 
+/* Footer */
 footer {
-    background-color: #a8d5ba;
-    color: black;
+    background-color: #333;
+    color: white;
     text-align: center;
     padding: 10px;
     position: fixed;