diff --git a/pong/static/index.html b/pong/static/index.html
index 1aad5b6..07a0e9b 100644
--- a/pong/static/index.html
+++ b/pong/static/index.html
@@ -6,8 +6,27 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Pong Game</title>
     <link rel="stylesheet" type="text/css" href="{% static 'styles.css' %}">
+    <div class="logo">
+        <img src="logo-42-perpignan.png" alt="Logo">
+    </div>
+    <div class="background">
+        <div class="stars" id="stars"></div>
+    </div>
+</div>
+<div class="pong-elements">
+    <div class="paddle paddle-left"></div>
+    <div class="paddle paddle-right"></div>
+    <div class="ball_anim"></div>
+</div>
 </head>
 <body>
+    <div class="background">
+        <div class="stars" id="stars"></div>
+    </div>
+</div>
+<div class="container">
+    <h1>BIENVENUE DANS LE PONG 42</h1>
+    <div class="input-container">
     <div id="auth-form">
         <label for="nickname">Enter your nickname:</label>
         <input type="text" id="nickname" name="nickname">
@@ -25,6 +44,7 @@
         <input type="password" id="login-password" name="login-password">
         <button id="login">Login</button>
     </div>
+</div>
     <div id="game1" style="display: none;">
         <div id="gameCode" class="game-code">Game Code: </div>
         <div id="player1-name" class="name">Player 1</div>
@@ -38,5 +58,20 @@
         </div>
     </div>
     <script src="{% static 'game.js' %}"></script>
+    <script>
+        const starsContainer = document.getElementById('stars');
+         for (let i = 0; i < 500; i++) {
+                const star = document.createElement('div');
+             star.className = 'star';
+             star.style.width = `${Math.random() * 3}px`;
+             star.style.height = star.style.width;
+             star.style.left = `${Math.random() * 100}%`;
+             star.style.top = `${Math.random() * 100}%`;
+             star.style.animationDuration = `${Math.random() * 2 + 1}s`;
+             starsContainer.appendChild(star);
+        }
+       
+setInterval(createTrail, 100);
+    </script>
 </body>
 </html>
diff --git a/pong/static/logo-42-perpignan.png b/pong/static/logo-42-perpignan.png
new file mode 100644
index 0000000..d91cd1f
Binary files /dev/null and b/pong/static/logo-42-perpignan.png differ
diff --git a/pong/static/styles.css b/pong/static/styles.css
index 1dfd64b..c07dbd0 100644
--- a/pong/static/styles.css
+++ b/pong/static/styles.css
@@ -1,15 +1,17 @@
 /* General styles */
-body {
+body, html {
     font-family: Arial, sans-serif;
-    color: #ffffff;
-    background-color: #000000;
+    color: #00ffff;
+    background-color: #0a0a2a;
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    height: 100vh;
+    height: 100%;
+    overflow: hidden;
+
 }
 
 label {
@@ -111,3 +113,111 @@ button {
     border-radius: 50%;
     position: absolute;
 }
+
+.logo {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    font-size: 3rem;
+    color: #00ffff;
+    text-shadow: 0 0 15px #00ffff;
+    z-index: 20;
+}
+
+.stars {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.star {
+    position: absolute;
+    background-color: #ffffff;
+    border-radius: 50%;
+    animation: twinkle 2s infinite alternate;
+}
+
+.background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    pointer-events: none;
+}
+
+.pong-elements {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 5;
+    pointer-events: none;
+}
+
+.paddle {
+    position: absolute;
+    width: 20px;
+    height: 100px;
+    background-color: #00ffff;
+    border-radius: 10px;
+    box-shadow: 0 0 15px #00ffff;
+}
+
+.paddle-left {
+    left: 50px;
+    animation: paddleMove 5s infinite alternate ease-in-out;
+}
+
+.paddle-right {
+    right: 50px;
+    animation: paddleMove 4s infinite alternate-reverse ease-in-out;
+}
+
+.ball_anim {
+    position: absolute;
+    width: 30px;
+    height: 30px;
+    background-color: #00ffff;
+    border-radius: 50%;
+    box-shadow: 0 0 20px #00ffff;
+    left: 80px;
+    top: 50%;
+    transform-style: preserve-3d;
+    animation: ballMove 3s linear infinite;
+}
+
+@keyframes paddleMove {
+    0% { transform: translateY(10vh); }
+    100% { transform: translateY(70vh); }
+}
+
+@keyframes ballMove {
+    0% {
+        transform: translateZ(0) scale(1);
+    }
+    50% {
+        transform: translateZ(-500px) scale(0.5);
+    }
+    100% {
+        transform: translateZ(0) scale(1);
+    }
+}
+
+.input-container {
+    margin-bottom: 2rem;
+}
+
+.container {
+    text-align: center;
+    background-color: rgba(0, 0, 40, 0.8);
+    padding: 3rem;
+    border-radius: 15px;
+    border: 3px solid #00ffff;
+    box-shadow: 0 0 30px #00ffff, inset 0 0 20px #00ffff;
+    position: relative;
+    z-index: 10;
+    max-width: 80%;
+}
\ No newline at end of file
