diff --git a/Transcendence/srcs/backend/avatar/user_1_1769596136442.jpg b/Transcendence/srcs/backend/avatar/user_1_1769596136442.jpg
new file mode 100644
index 0000000..93327dd
Binary files /dev/null and b/Transcendence/srcs/backend/avatar/user_1_1769596136442.jpg differ
diff --git a/Transcendence/srcs/frontend/src/app.js b/Transcendence/srcs/frontend/src/app.js
index ec84433..5058dd8 100644
--- a/Transcendence/srcs/frontend/src/app.js
+++ b/Transcendence/srcs/frontend/src/app.js
@@ -16,6 +16,7 @@ class App {
     constructor() {
         this.initWindows();
         this.initMenu();
+        this.initGame();
         this.initEasterEgg();
     }
 
@@ -65,17 +66,73 @@ class App {
         });
     }
 
+    initGame() {
+        const game = document.querySelector('.game');
+        if (!game) {
+            console.warn('Game not found');
+            return;
+        }
+
+        // Action to window name mapping
+        const actionMap = {
+            'new_game': 'new_game'
+        };
+
+        // Event delegation on the menu
+        game.addEventListener('click', (e) => {
+            const button = e.target.closest('.game__item');
+            if (!button) return;
+
+            const action = button.dataset.action;
+
+            // Actions with associated windows
+            if (actionMap[action]) {
+                windowRegistry.toggle(actionMap[action]);
+                return;
+            }
+
+        });
+    }
+
+    initPage() {
+        const page = document.querySelector('.page');
+        if (!page) {
+            console.warn('Page not found');
+            return;
+        }
+
+        // Action to window name mapping
+        const actionMap = {
+            'new_page': 'new_page'
+        };
+
+        // Event delegation on the menu
+        page.addEventListener('click', (e) => {
+            const button = e.target.closest('.page__item');
+            if (!button) return;
+
+            const action = button.dataset.action;
+
+            // Actions with associated windows
+            if (actionMap[action]) {
+                windowRegistry.toggle(actionMap[action]);
+                return;
+            }
+
+        });
+    }
+
     /**
      * Initializes the easter egg button
      */
-    initEasterEgg() {
-        const easterEgg = document.querySelector('.easter-egg');
-        if (easterEgg) {
-            easterEgg.addEventListener('click', () => {
-                alert('You clicked when we told you not to!');
-            });
-        }
-    }
+    // initEasterEgg() {
+    //     const easterEgg = document.querySelector('.easter-egg');
+    //     if (easterEgg) {
+    //         easterEgg.addEventListener('click', () => {
+    //             alert('You clicked when we told you not to!');
+    //         });
+    //     }
+    // }
 }
 
 // Start the application when DOM is ready
diff --git a/Transcendence/srcs/frontend/src/assets/background.png b/Transcendence/srcs/frontend/src/assets/background.png
new file mode 100644
index 0000000..8afd0a3
Binary files /dev/null and b/Transcendence/srcs/frontend/src/assets/background.png differ
diff --git a/Transcendence/srcs/frontend/src/assets/grwweg.png b/Transcendence/srcs/frontend/src/assets/grwweg.png
new file mode 100644
index 0000000..716affb
Binary files /dev/null and b/Transcendence/srcs/frontend/src/assets/grwweg.png differ
diff --git a/Transcendence/srcs/frontend/src/game.css b/Transcendence/srcs/frontend/src/game.css
new file mode 100644
index 0000000..2ec61f3
--- /dev/null
+++ b/Transcendence/srcs/frontend/src/game.css
@@ -0,0 +1,707 @@
+:root {
+    --color-primary: #0066cc;
+    --color-primary-hover: #0052a3;
+    --color-success: #3cff01;
+    --color-success-dark: #28a745;
+    --color-error: #ff4d4d;
+    --color-warning: #ffc107;
+    --color-github: #24292e;
+
+    --color-bg: #000;
+
+    --app-background-base: radial-gradient(
+        circle at top,
+        #1b2735,
+        #090a0f
+    );
+
+    /* --app-background-image: url("./assets/background.png"); */
+
+    --color-surface: #222;
+    --color-surface-light: #333;
+    --color-text: #fff;
+    --color-text-muted: #aaa;
+
+    --font-size-base: 10px;
+    --font-size-sm: 1.2rem;
+    --font-size-md: 1.4rem;
+    --font-size-lg: 1.6rem;
+    --font-size-xl: 3rem;
+
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 12px;
+    --spacing-lg: 16px;
+    --spacing-xl: 24px;
+
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 12px;
+    --radius-full: 50%;
+
+    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
+    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
+
+    --transition-fast: 150ms ease;
+    --transition-normal: 250ms ease;
+    
+    --z-menu: 2;
+    --z-window: 100;
+    --z-modal: 200;
+}
+
+/* ============================================
+   RESET & BASE
+   ============================================ */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    height: 100%;
+    background-image:
+        var(--app-background-base);
+
+    background-size:
+        contain,
+        cover;
+
+    background-position:
+        center,
+        center;
+
+    background-repeat:
+        no-repeat,
+        no-repeat;
+}
+
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    color: var(--color-text);
+    line-height: 1.5;
+}
+
+.app {
+	position: relative;
+    width: 70%;
+    min-width: 800px;
+    margin: 0 auto;
+}
+
+
+/* ============================================
+   TYPOGRAPHY
+   ============================================ */
+.title {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    text-transform: uppercase;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+    font-size: var(--font-size-xl);
+    text-align: center;
+    text-shadow: 2px 2px 10px black;
+    z-index: 1;
+    font-family: "Cinzel Decorative", cursive;
+    color: var(--color-success);
+    margin: 0;
+    padding: var(--spacing-md);
+}
+
+/* ============================================
+   MENU
+   ============================================ */
+
+.menu {
+    position: fixed;
+    top: 0;
+    left: 50px;
+    padding: 0;
+    margin: 0;
+    z-index: var(--z-menu);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+}
+
+.menu__item {
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-surface-light);
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    text-align: left;
+}
+
+.menu__item:hover {
+    background: var(--color-surface-light);
+    font-size: var(--font-size-lg);
+}
+
+.menu__item--active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+}
+
+/* ============================================
+   GAME
+   ============================================ */
+
+.game {
+    position: fixed;
+    top: 0;
+    right: 50px;
+    padding: 0;
+    margin: 0;
+    z-index: var(--z-menu);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+}
+
+.game__item {
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-surface-light);
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    text-align: right;
+}
+
+.game__item:hover {
+    background: var(--color-surface-light);
+    font-size: var(--font-size-lg);
+}
+
+.game__item--active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+}
+
+/* ============================================
+   PAGES
+   ============================================ */
+
+.page {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+
+    z-index: var(--z-menu);
+}
+
+.page__item {
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-surface-light);
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    text-align: right;
+}
+
+.page__item:hover {
+    background: var(--color-surface-light);
+    font-size: var(--font-size-lg);
+}
+
+.page__item--active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+}
+
+/* ============================================
+   BUTTONS
+   ============================================ */
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-md);
+    font-weight: 500;
+    border: none;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    text-decoration: none;
+}
+
+.btn:hover {
+    opacity: 0.9;
+    transform: translateY(-1px);
+}
+
+.btn:active {
+    transform: translateY(0);
+}
+
+.btn--primary {
+    background: var(--color-primary);
+    color: var(--color-text);
+}
+
+.btn--primary:hover {
+    background: var(--color-primary-hover);
+}
+
+.btn--secondary {
+    background: var(--color-surface-light);
+    color: var(--color-text);
+}
+
+.btn--success {
+    background: var(--color-success-dark);
+    color: var(--color-text);
+}
+
+.btn--danger {
+    background: var(--color-error);
+    color: var(--color-text);
+}
+
+.btn--github {
+    background: var(--color-github);
+    color: var(--color-text);
+}
+
+.btn--ghost {
+    background: transparent;
+    color: var(--color-text);
+    border: 1px solid var(--color-surface-light);
+}
+
+/* ============================================
+   INPUTS
+   ============================================ */
+.input {
+    width: 100%;
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-md);
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-surface-light);
+    border-radius: var(--radius-md);
+    transition: border-color var(--transition-fast);
+}
+
+.input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+}
+
+.input::placeholder {
+    color: var(--color-text-muted);
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+/* ============================================
+   WINDOWS
+   ============================================ */
+.window {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: var(--color-bg);
+    border: 2px ridge var(--color-text);
+    color: var(--color-text);
+    z-index: var(--z-window);
+    display: none;
+    flex-direction: column;
+    min-width: 280px;
+    box-shadow: var(--shadow-lg);
+}
+
+.window--visible {
+    display: flex;
+}
+
+.window--left {
+    left: 25%;
+}
+
+.window--right {
+    left: 75%;
+}
+
+.window__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--spacing-sm) var(--spacing-md);
+    background: var(--color-surface);
+    cursor: move;
+    user-select: none;
+}
+
+.window__title {
+    font-weight: 500;
+    font-size: var(--font-size-md);
+}
+
+.window__close {
+    cursor: pointer;
+    font-size: var(--font-size-lg);
+    opacity: 0.8;
+    transition: opacity var(--transition-fast);
+    background: none;
+    border: none;
+    color: var(--color-text);
+    padding: 0;
+    line-height: 1;
+}
+
+.window__close:hover {
+    opacity: 1;
+}
+
+.window__body {
+    padding: var(--spacing-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    flex: 1;
+    overflow: auto;
+}
+
+/* ============================================
+   MESSAGES
+   ============================================ */
+.message {
+    font-size: var(--font-size-sm);
+    padding: var(--spacing-xs);
+    border-radius: var(--radius-sm);
+}
+
+.message--success {
+    color: var(--color-success);
+}
+
+.message--error {
+    color: var(--color-error);
+}
+
+.message--info {
+    color: var(--color-text-muted);
+}
+
+/* ============================================
+   LOGIN WINDOW
+   ============================================ */
+.login {
+    width: 320px;
+}
+
+.login__form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.login__actions {
+    display: flex;
+    gap: var(--spacing-sm);
+    margin-top: var(--spacing-xs);
+}
+
+.login__divider {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    margin: var(--spacing-sm) 0;
+}
+
+.login__divider::before,
+.login__divider::after {
+    content: '';
+    flex: 1;
+    height: 1px;
+    background: var(--color-surface-light);
+}
+
+/* ============================================
+   CHAT WINDOW
+   ============================================ */
+.chat {
+    width: 380px;
+    height: 400px;
+}
+
+.chat__output {
+    flex: 1;
+    overflow-y: auto;
+    padding: var(--spacing-sm);
+    background: var(--color-surface);
+    border-radius: var(--radius-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    min-height: 150px;
+}
+
+.chat__message {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    background: var(--color-surface-light);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-sm);
+}
+
+.chat__message--own {
+    background: var(--color-primary);
+    align-self: flex-end;
+}
+
+.chat__friend-indicator {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    background-color: var(--color-success);
+    border-radius: 50%;
+    margin-right: var(--spacing-xs);
+    vertical-align: middle;
+}
+
+.chat__system {
+    color: var(--color-text-muted);
+    font-size: var(--font-size-sm);
+    font-style: italic;
+    text-align: center;
+}
+
+.chat__system--error {
+    color: var(--color-error);
+}
+
+.chat__system--success {
+    color: var(--color-success);
+}
+
+.chat__input-container {
+    display: flex;
+    gap: var(--spacing-sm);
+    margin-top: var(--spacing-sm);
+}
+
+.chat__input {
+    flex: 1;
+}
+
+.chat__controls {
+    display: flex;
+    gap: var(--spacing-sm);
+    margin-top: var(--spacing-sm);
+}
+
+/* ============================================
+   AVATAR WINDOW
+   ============================================ */
+.avatar-window {
+    width: 360px;
+}
+
+.avatar__preview {
+    width: 120px;
+    height: 120px;
+    object-fit: cover;
+    border-radius: var(--radius-full);
+    border: 3px solid var(--color-text);
+    box-shadow: var(--shadow-md);
+    background: var(--color-surface);
+    align-self: center;
+}
+
+.avatar__username {
+    font-size: var(--font-size-lg);
+    font-weight: 600;
+    text-align: center;
+    color: var(--color-text);
+    margin-top: var(--spacing-sm);
+}
+
+.avatar__controls {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    align-items: center;
+}
+
+.avatar__file-input {
+    display: none;
+}
+
+/* ============================================
+   EASTER EGG BUTTON
+   ============================================ */
+/* .easter-egg {
+    position: absolute;
+    top: 20%;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1;
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-surface-light);
+    padding: var(--spacing-sm) var(--spacing-md);
+    cursor: pointer;
+    font-size: var(--font-size-md);
+    border-radius: var(--radius-md);
+    transition: all var(--transition-fast);
+}
+
+.easter-egg:hover {
+    background: var(--color-error);
+    border-color: var(--color-error);
+} */
+
+/* ============================================
+   UTILITIES
+   ============================================ */
+.hidden {
+    display: none !important;
+}
+
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.flex-center {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* ============================================
+   FRIENDS WINDOW
+   ============================================ */
+.friends-window {
+    width: 400px;
+    height: 450px;
+}
+
+.friends__tabs {
+    display: flex;
+    gap: var(--spacing-xs);
+    margin-bottom: var(--spacing-sm);
+}
+
+.friends__tab {
+    flex: 1;
+    padding: var(--spacing-sm);
+    background: var(--color-surface);
+    border: 1px solid var(--color-surface-light);
+    color: var(--color-text);
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+    transition: all var(--transition-fast);
+}
+
+.friends__tab:hover {
+    background: var(--color-surface-light);
+}
+
+.friends__tab--active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+}
+
+.friends__content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+}
+
+.friends__search {
+    display: flex;
+    gap: var(--spacing-sm);
+    margin-bottom: var(--spacing-sm);
+}
+
+.friends__search .input {
+    flex: 1;
+}
+
+.friends__list {
+    flex: 1;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-sm);
+}
+
+.friends__item {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+    padding: var(--spacing-sm);
+    background: var(--color-surface);
+    border-radius: var(--radius-md);
+}
+
+.friends__avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: var(--radius-full);
+    object-fit: cover;
+    border: 2px solid var(--color-surface-light);
+}
+
+.friends__name {
+    flex: 1;
+    font-size: var(--font-size-md);
+    font-weight: 500;
+}
+
+.friends__actions {
+    display: flex;
+    gap: var(--spacing-xs);
+}
+
+.friends__actions .btn {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: var(--font-size-sm);
+}
+
+.friends__empty {
+    text-align: center;
+    color: var(--color-text-muted);
+    padding: var(--spacing-lg);
+}
diff --git a/Transcendence/srcs/frontend/src/game.html b/Transcendence/srcs/frontend/src/game.html
new file mode 100644
index 0000000..0412d41
--- /dev/null
+++ b/Transcendence/srcs/frontend/src/game.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="fr">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Lobby</title>
+		<link rel="stylesheet" href="game.css" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet" />
+	</head>
+	<body>
+		<h1 class="title">Lobby</h1>
+
+		<nav class="menu" aria-label="Menu principal">
+			<button class="menu__item" data-action="login" aria-label="Login">Login</button>
+			<button class="menu__item" data-action="chat" aria-label="Global chat">Global chat</button>
+			<button class="menu__item" data-action="avatar" aria-label="Avatar">Avatar</button>
+			<button class="menu__item" data-action="friends" aria-label="Amis">Amis</button>
+		</nav>
+
+		<nav class="game" aria-label="Game">
+			<button class="game__item" data-action="Home page" aria-label="Home Page"
+			onclick="window.location.href='index.html'">Home Page</button>
+		</nav>
+
+    <div class="page" aria-label="Page">
+      <button class="page__item">Create new game</button>
+      <button class="page__item">Join existing game</button>
+    </div>
+
+
+		<script type="module" src="app.js"></script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/Transcendence/srcs/frontend/src/style.css b/Transcendence/srcs/frontend/src/index.css
similarity index 88%
rename from Transcendence/srcs/frontend/src/style.css
rename to Transcendence/srcs/frontend/src/index.css
index 4714622..b8c8788 100644
--- a/Transcendence/srcs/frontend/src/style.css
+++ b/Transcendence/srcs/frontend/src/index.css
@@ -15,7 +15,16 @@
     --color-warning: #ffc107;
     --color-github: #24292e;
 
-    --color-bg: #000;
+    --color-bg: #a3a3a3;
+
+    --app-background-base: radial-gradient(
+        circle at top,
+        #000000,
+        #4d4d4d
+    );
+
+    --app-background-image: url("./assets/background.png");
+
     --color-surface: #222;
     --color-surface-light: #333;
     --color-text: #fff;
@@ -25,7 +34,7 @@
     --font-size-sm: 1.2rem;
     --font-size-md: 1.4rem;
     --font-size-lg: 1.6rem;
-    --font-size-xl: 4rem;
+    --font-size-xl: 3rem;
 
     --spacing-xs: 4px;
     --spacing-sm: 8px;
@@ -44,7 +53,7 @@
 
     --transition-fast: 150ms ease;
     --transition-normal: 250ms ease;
-
+    
     --z-menu: 2;
     --z-window: 100;
     --z-modal: 200;
@@ -60,8 +69,22 @@
 }
 
 html {
-    font-size: var(--font-size-base);
-    background-color: var(--color-bg);
+    height: 100%;
+    background-image:
+        var(--app-background-image),
+        var(--app-background-base);
+
+    background-size:
+        contain,
+        cover;
+
+    background-position:
+        center,
+        center;
+
+    background-repeat:
+        no-repeat,
+        no-repeat;
 }
 
 body {
@@ -77,29 +100,40 @@ body {
 /* ============================================
    TYPOGRAPHY
    ============================================ */
+   
 .title {
     position: absolute;
-    top: 0;
+    top: 20px;                  
     left: 50%;
     transform: translateX(-50%);
     text-transform: uppercase;
+
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
+
     font-size: var(--font-size-xl);
     text-align: center;
     text-shadow: 2px 2px 10px black;
     z-index: 1;
     font-family: "Cinzel Decorative", cursive;
-    color: var(--color-success);
+    color: rgba(248, 252, 2, 0.6);
+
     margin: 0;
     padding: var(--spacing-md);
+
+    /* Rectangle + rounded corners */
+    background-color: rgba(247, 7, 67, 0.6);
+    border: 2px solid rgba(0, 0, 0, 0.6);
+    border-radius: 15px;
 }
 
+
 /* ============================================
    MENU
    ============================================ */
+
 .menu {
     position: fixed;
     top: 0;
@@ -133,6 +167,43 @@ body {
     border-color: var(--color-primary);
 }
 
+/* ============================================
+   GAME
+   ============================================ */
+
+.game {
+    position: fixed;
+    top: 0;
+    right: 50px;
+    padding: 0;
+    margin: 0;
+    z-index: var(--z-menu);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+}
+
+.game__item {
+    background: var(--color-surface);
+    color: var(--color-text);
+    border: 1px solid var(--color-surface-light);
+    padding: var(--spacing-sm) var(--spacing-md);
+    font-size: var(--font-size-md);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    text-align: right;
+}
+
+.game__item:hover {
+    background: var(--color-surface-light);
+    font-size: var(--font-size-lg);
+}
+
+.game__item--active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+}
+
 /* ============================================
    BUTTONS
    ============================================ */
@@ -463,7 +534,7 @@ body {
 /* ============================================
    EASTER EGG BUTTON
    ============================================ */
-.easter-egg {
+/* .easter-egg {
     position: absolute;
     top: 20%;
     left: 50%;
@@ -482,7 +553,7 @@ body {
 .easter-egg:hover {
     background: var(--color-error);
     border-color: var(--color-error);
-}
+} */
 
 /* ============================================
    UTILITIES
diff --git a/Transcendence/srcs/frontend/src/index.html b/Transcendence/srcs/frontend/src/index.html
index 0003109..4da5cae 100644
--- a/Transcendence/srcs/frontend/src/index.html
+++ b/Transcendence/srcs/frontend/src/index.html
@@ -1,26 +1,31 @@
 <!doctype html>
 <html lang="fr">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>scribl.lidl_edition</title>
-    <link rel="stylesheet" href="style.css" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet" />
-  </head>
-  <body>
-    <h1 class="title">scribl.lidl_edition</h1>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>Transcendence.io</title>
+		<link rel="stylesheet" href="index.css" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link href="https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&display=swap" rel="stylesheet" />
+	</head>
+	<body>
+		<h1 class="title">Transcendence.io</h1>
 
-    <nav class="menu" aria-label="Menu principal">
-      <button class="menu__item" data-action="login" aria-label="Login">Login</button>
-      <button class="menu__item" data-action="chat" aria-label="Global chat">Global chat</button>
-      <button class="menu__item" data-action="avatar" aria-label="Avatar">Avatar</button>
-      <button class="menu__item" data-action="friends" aria-label="Amis">Amis</button>
-    </nav>
+		<nav class="menu" aria-label="Menu principal">
+			<button class="menu__item" data-action="login" aria-label="Login">Login</button>
+			<button class="menu__item" data-action="chat" aria-label="Global chat">Global chat</button>
+			<button class="menu__item" data-action="avatar" aria-label="Avatar">Avatar</button>
+			<button class="menu__item" data-action="friends" aria-label="Amis">Amis</button>
+		</nav>
 
-    <button class="easter-egg" data-action="easter-egg">Ne cliquez pas !</button>
-
-    <script type="module" src="app.js"></script>
-  </body>
-</html>
+		<nav class="game" aria-label="Game">
+			<button class="game__item" data-action="new_game" aria-label="Start new game"
+			onclick="window.location.href='game.html'">Start new game</button>
+		</nav>
+		
+		<script type="module" src="app.js"></script>
+	</body>
+	</html>
+	
+	<!-- <button class="easter-egg" data-action="easter-egg">Ne cliquez pas !</button> -->
\ No newline at end of file