diff --git a/WEB/assets/img/Renard.png b/WEB/assets/img/Renard.png
new file mode 100644
index 00000000..e5655e31
Binary files /dev/null and b/WEB/assets/img/Renard.png differ
diff --git a/WEB/src/CSS/Presentation.css b/WEB/src/CSS/Presentation.css
new file mode 100644
index 00000000..6429bec9
--- /dev/null
+++ b/WEB/src/CSS/Presentation.css
@@ -0,0 +1,64 @@
+
+html{
+    scroll-behavior: smooth;
+    background-image: url(../../assets/img/Background5.png);
+    height: 100vh;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+  }
+  
+
+body{
+    font-family: "Orbitron", sans-serif;
+}
+
+.Presentation{
+    font-family: "Orbitron", sans-serif;
+    color:aliceblue;
+    font-size: 20px;
+}
+
+.Histoire{
+    margin-left: 5% ;
+    width: 80%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.ConsigneRun{
+    margin-left: 5% ;
+    width: 80%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.ConsigneSubmit{
+    margin-left: 5% ;
+    width: 80%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.Consigne{
+    width: 50%;
+}
+
+.Histoire,.ConsigneRun,.ConsigneSubmit{
+    margin-top: 0;
+    margin-left: 20px;
+    background: rgba(0,0,0,0.6);
+    box-sizing: border-box;
+    box-shadow: 0 15px 25px rgba(0,0,0,);
+    border-radius: 10px;
+    padding: 10px;
+    margin-left: 10%;
+    margin-right: 10%;
+}
+
+.sign{
+    margin-bottom: 30px;
+}
\ No newline at end of file
diff --git a/WEB/src/CSS/presenation.css b/WEB/src/CSS/presenation.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/WEB/src/pages/Enigme/Presentation.html b/WEB/src/pages/Enigme/Presentation.html
index fb3d0504..af37169e 100644
--- a/WEB/src/pages/Enigme/Presentation.html
+++ b/WEB/src/pages/Enigme/Presentation.html
@@ -4,9 +4,52 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="../../CSS/enigme.css">
+    <link rel="stylesheet" href="../../CSS/Home.css">
+    <link rel="stylesheet" href="../../CSS/Presentation.css">
     <title>Presentation</title>
 </head>
 <body>
-    
+    <div class="presentation_titre" id="home">
+        <div class="sign">
+            <h1>
+                <span class="fast-flicker">P</span>
+                <span>resen</span>
+                <span class="flicker">t</span>
+                <span>ation</span>
+            </h1>
+        </div>
+        <div class="Presentation">
+            <div class="Histoire">
+                <img src="../../../assets/img/Renard.png">
+                <div class="Consigne">
+                    <p>Bonjour utilisateur ! Je suis Foxy, une IA créer par Howard Aiken, un chercheur en informatique. J'ai besoin de ton aide ... </p>
+                </div>
+            </div>
+            <br>
+            <div class="ConsigneRun">
+                <div class="Consigne">
+                    <p>Le Bouton Run te permet de tester ton code, n'oublie pas de faire print(nomFonction(x)) pour afficher sur la console !</p>
+                </div>
+                <div class="buttons">
+                    <a class="btn">
+                        <span class="noAnimation">Run</span>
+                    </a>
+                    
+                </div> 
+            </div>
+            <br>
+            <div class="ConsigneSubmit">
+                <div class="buttons">
+                    <a class="btn">
+                        <span class="noAnimation">Submit</span>
+                    </a>
+                </div>
+                <div class="Consigne">
+                    <p>Tu pense avoir réussi ? Tres bien ! Utilise le bouton submit pour faire valider ton code est passer à la prochaine enigme </p>
+                </div> 
+            </div>
+        </div> 
+    </div>
 </body>
 </html>
\ No newline at end of file
