diff --git a/client/public/css/style.css b/client/public/css/style.css
index ad7f04a95019ae05f6e04f85344d5c4140a67af0..7ce59c9bad984651696295b834f8e35d866bd11d 100644
--- a/client/public/css/style.css
+++ b/client/public/css/style.css
@@ -236,6 +236,53 @@ li{
     cursor: pointer;
 }
 
+.saiyans{
+    display: none; /*DISPLAY*/
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: 100vh;
+    min-height: 600px;
+    background-image: url('../images/broly.jpg');
+    background-size: cover;
+    background-position: center;
+}
+
+.classement-container{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 80%;
+}
+
+.classement{
+    width: 40%;
+    height: 90%;
+    background-color: rgba(0, 0, 0, 0.644);
+    overflow-y: scroll;
+}
+@media screen and (max-width: 950px) {
+    .classement{
+        width: 60%;
+    }
+}
+@media screen and (max-width: 400px) {
+    .classement{
+        width: 80%;
+    }
+}
+.player-classement{
+    display: flex;
+    justify-content: space-between;
+    color: #fff;
+    font-size: 30px;
+    font-family: 'Karantina', cursive;
+    padding: 20px;
+    width: 100%;
+    border-bottom: 1px solid#fff;
+}
+
 .map{
     display: none;
     background-size: cover;
diff --git a/client/public/images/broly.jpg b/client/public/images/broly.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..816855868a08b4fe3640fbdd96cefa3b17f5140c
Binary files /dev/null and b/client/public/images/broly.jpg differ
diff --git a/client/public/index.html b/client/public/index.html
index ad1fc5f224e8e8def63d8fe4e698bad4962d5885..347c056c7c5ffef0d5c3828513c1c3ded40f3747 100644
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -19,7 +19,7 @@
             <img class="goku" src="./images/goku.png" />
             <ul>
                 <li><a href="/play"><h1>PLAY</h1></a></li>
-                <li><a href="/settings"><h1>SETTINGS</h1></a></li>
+                <li><a href="/saiyans"><h1>SAIYANS</h1></a></li>
                 <li><a href="/credits"><h1>CREDITS</h1></a></li>
             </ul>
         </div>
@@ -53,6 +53,19 @@
             <button href="/map" class="start-button">START</button>
         </div>
     </section>
+    <section class="saiyans">
+        <div class="play-top">
+            <a href="/"><h1 class="exit">EXIT</h1></a>
+        </div>
+        <div class="classement-container">
+            <div class="classement">
+                <div class="player-classement">
+                    <h1>biceps</h1>
+                    <h1>score</h1>
+                </div>
+            </div>
+        </div>
+    </section>
     <canvas class="map"></canvas>
 </body>
 </html>
\ No newline at end of file
diff --git a/common/index.ts b/common/index.ts
index c1fdb271c6b94134382e3372d23c5e31c68fb947..9ccddedf1f91f8b8193fb745b622ef913a561c24 100644
--- a/common/index.ts
+++ b/common/index.ts
@@ -1,3 +1,4 @@
+import { response } from "express";
 import Main from "./main";
 import Router from "./Router";
 
@@ -6,6 +7,7 @@ const routes = [
   { path: "/", page: "home" },
   { path: "/play", page: "play" },
   { path: "/map", page: "map" },
+  { path: "/saiyans", page: "saiyans" },
 ];
 let router = new Router(routes);
 
@@ -24,6 +26,33 @@ for (let i = 0; i < links.length; i++) {
   });
 }
 
+interface Classement {
+  id: number;
+  name: string;
+  score: number;
+}
+
+fetch("../classement.json")
+  .then((response) => response.json())
+  .then((responseData) => {
+    getClassement(responseData);
+  });
+
+const classement = document.querySelector(".classement");
+
+function getClassement(ranks: Classement[]) {
+  let html = "";
+  ranks.forEach((rank) => {
+    html += `<div class="player-classement">
+                <span>${rank.name}</span>
+                <span>score: ${rank.score}</span>
+            </div>`;
+  });
+  if (classement) {
+    classement.innerHTML = html;
+  }
+}
+
 const inputName = document.querySelector(".name");
 const slides = document.querySelectorAll(".slide");
 
diff --git a/common/main.ts b/common/main.ts
index 403fcd69c550736f41ce857ed25fbb9c54e4d0af..02da622eaf3ba864b9398d80b0aa483a37cf2b4a 100644
--- a/common/main.ts
+++ b/common/main.ts
@@ -140,12 +140,6 @@ const Main = (playerName: string, playerCharacter: string) => {
     });
   }
 
-  interface Classement {
-    id: number;
-    name: string;
-    score: number;
-  }
-
   async function myFunction() {
     try {
       const userId = (await getUserId()) as number;