diff --git a/WEB/View/assets/img/CyberpunkGirl4.png b/WEB/View/assets/img/CyberpunkGirl4.png
new file mode 100644
index 00000000..a25b898d
Binary files /dev/null and b/WEB/View/assets/img/CyberpunkGirl4.png differ
diff --git a/WEB/View/assets/img/CyperpunkGirl.png b/WEB/View/assets/img/CyperpunkGirl.png
new file mode 100644
index 00000000..c354d88f
Binary files /dev/null and b/WEB/View/assets/img/CyperpunkGirl.png differ
diff --git a/WEB/View/assets/img/ImgMain.png b/WEB/View/assets/img/ImgMain.png
deleted file mode 100644
index 6040317c..00000000
Binary files a/WEB/View/assets/img/ImgMain.png and /dev/null differ
diff --git a/WEB/View/assets/img/ImgMain2.png b/WEB/View/assets/img/ImgMain2.png
new file mode 100644
index 00000000..57dc1eb5
Binary files /dev/null and b/WEB/View/assets/img/ImgMain2.png differ
diff --git a/WEB/View/assets/img/ScriptedLogo.png b/WEB/View/assets/img/ScriptedLogo.png
deleted file mode 100644
index 796e3127..00000000
Binary files a/WEB/View/assets/img/ScriptedLogo.png and /dev/null differ
diff --git a/WEB/View/src/CSS/Main2.css b/WEB/View/src/CSS/Main2.css
index 7108748c..4a61cd3f 100644
--- a/WEB/View/src/CSS/Main2.css
+++ b/WEB/View/src/CSS/Main2.css
@@ -4,7 +4,7 @@
   color: white;
   scroll-behavior: smooth;
   height: 100vh;
-  background-image: url("../../assets/img/ImgMain.png");
+  background-image: url("../../assets/img/ImgMain2.png");
   background-position: center center;
   background-attachment: fixed;
   background-repeat: no-repeat;
@@ -24,22 +24,160 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  width: 85%;
-  height: 70%;
+  width: 70%;
+  height: 80%;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   -ms-border-radius: 10px;
   -o-border-radius: 10px;
+  border: 1px solid #fff;
 }
 
-#AllBg {
+.neonBg {
   background-color: #511949;
   opacity: 0.8;
   background-size: 10px 10px;
-  border-radius: 5px;
-  -webkit-border-radius: 5px;
-  -moz-border-radius: 5px;
-  -ms-border-radius: 5px;
-  -o-border-radius: 5px;
+  border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+  -ms-border-radius: 10px;
+  -o-border-radius: 10px;
+}
+
+button:focus {
+  outline: none;
+}
+
+#imgProfil {
+  width: 30%;
+  height: 100%;
+}
+
+@media screen and (max-width: 1100px) {
+  #imgProfil {
+    display: none;
+  }
+}
+
+#profil {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  height: 100%;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  transition: all 0.1s;
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  -o-transition: all 0.1s;
+}
+
+#profil.open {
+  left: 0;
+  opacity: 1;
+  display: flex;
+}
+
+#profilIcon.open {
+  transition: transform 0.5s;
+  -webkit-transition: transform 0.5s;
+  -moz-transition: transform 0.5s;
+  -ms-transition: transform 0.5s;
+  -o-transition: transform 0.5s;
+  background: none;
+  transform: rotate(180deg) !important;
+  -webkit-transform: rotate(180deg) !important;
+  -moz-transform: rotate(180deg) !important;
+  -ms-transform: rotate(180deg) !important;
+  -o-transform: rotate(180deg) !important;
+}
+
+#profilContainer.open {
+  justify-content: end;
+}
+
+/* Button Login/ Logout animation */
+
+button {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  outline: none;
+  border: 0;
+  text-decoration: none;
+  background: transparent;
+  padding: 0;
+  font-size: inherit;
+  font-family: inherit;
+}
+
+button.logButton {
+  width: 12rem;
+  height: 50px;
+}
+
+button.logButton .circle {
+  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
+  display: block;
+  margin: 0;
+  width: 3rem;
+  height: 3rem;
+  background: #fff;
+  border-radius: 1.625rem;
+}
+button.logButton .circle .icon {
+  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  background: #222831;
+}
+button.logButton .circle .icon.arrow {
+  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
+  left: 0.625rem;
+  width: 1.125rem;
+  height: 0.125rem;
+  background: none;
+}
+button.logButton .circle .icon.arrow::before {
+  position: absolute;
+  content: "";
+  top: -0.25rem;
+  right: 0.0625rem;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-top: 0.125rem solid #222831;
+  border-right: 0.125rem solid #222831;
+  transform: rotate(45deg);
+}
+button.logButton .button-text {
+  transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0.75rem 0;
+  margin: 0 0 0 1.85rem;
+  color: #fff;
+  font-weight: 700;
+  line-height: 1.6;
+  text-align: center;
+  text-transform: uppercase;
+}
+
+button:hover .circle {
+  width: 100%;
+}
+
+button:hover .circle .icon.arrow {
+  background: #222831;
+  transform: translate(1rem, 0);
+}
+
+button:hover .button-text {
+  color: #222831;
 }
diff --git a/WEB/View/src/pages/Main2.html b/WEB/View/src/pages/Main2.html
index 15ee904c..051fcd66 100644
--- a/WEB/View/src/pages/Main2.html
+++ b/WEB/View/src/pages/Main2.html
@@ -27,9 +27,70 @@
     <link rel="stylesheet" href="../CSS/Main2.css" />
   </head>
   <body>
-    <div>
-      <div id="imgMain">
-        <span class="material-symbols-outlined p-2" id="AllBg" style="font-size:40px; transform: rotate(90deg)"> clear_all </span>
+    <script>
+      function displayProfil() {
+        profil.classList.toggle("open");
+        profilIcon.classList.toggle("open");
+        profilContainer.classList.toggle("open");
+      }
+    </script>
+
+    <div id="imgMain">
+      <div class="col-3 d-flex" id="profilContainer">
+        <button
+          class="d-flex p-0"
+          id="btnProfil"
+          style="background: transparent; border: none; z-index: 10"
+          onclick="displayProfil()"
+        >
+          <span
+            class="material-symbols-outlined p-1 neonBg"
+            id="profilIcon"
+            style="font-size: 40px; color: white; transform: rotate(90deg)"
+          >
+            clear_all
+          </span>
+        </button>
+        <div
+          class="col-3"
+          id="profil"
+          style="
+            background-color: #222831;
+            border-radius: 10px;
+            height: 100%;
+            z-index: 2;
+          "
+        >
+          <!-- If connected this, else nothing (don't display the img) -->
+          <div class="row py-5 d-flex justify-content-center mx-0">
+            <img
+              src="../../assets/img/CyberpunkGirl4.png"
+              alt="Profil"
+              id="imgProfil"
+              class="img-fluid rounded-circle align-self-center"
+              style="
+                width: 125px;
+                height: 125px;
+                padding: 0;
+                border: 2px solid #44fff6;
+                background-image: url('View/assets/img/BackgroundMain.jpg');
+                background-size: cover;
+                background-position: center;
+              "
+            />
+            <p class="d-flex justify-content-center">Pseudo</p>
+
+            <div class="d-flex justify-content-center align-self-end p-0 m-0" id="container">
+              <button class="logButton">
+                <span class="circle" aria-hidden="true">
+                  <span class="icon arrow"></span>
+                </span>
+                <span class="button-text">Logout</span>
+              </button>
+            </div>
+
+          </div>
+        </div>
       </div>
     </div>
   </body>
diff --git a/WEB/View/src/pages/Presentation.html b/WEB/View/src/pages/Presentation.html
index 7d036a1f..882dcf00 100644
--- a/WEB/View/src/pages/Presentation.html
+++ b/WEB/View/src/pages/Presentation.html
@@ -47,7 +47,7 @@
     </nav>
 
     <img src="View/assets/img/BGPres.png" class="img-fluid" />
-    
+
     <div class="container pt-5">
       <div class="col-12">
         <div class="row py-5">
@@ -81,9 +81,11 @@
               </p>
             </section>
 
-            <section class="hidden row" style="min-height: 50vh;">
+            <section class="hidden row" style="min-height: 50vh">
               <p>
-                Clique sur le bouton NEXT pour commencer tes premiers pas dans l'ère du developpement.<br /> <br/>
+                Clique sur le bouton NEXT pour commencer tes premiers pas dans
+                l'ère du developpement.<br />
+                <br />
                 Clique sur SKIP pour aller directement aux énigmes.
               </p>
             </section>
@@ -94,7 +96,12 @@
               src="View/assets/img/Foxy.png"
               alt="Logo"
               class="img-fluid rounded-circle moving-fox"
-              style="border: 2px solid #44fff6"
+              style="
+                border: 2px solid #44fff6;
+                background-image: url('View/assets/img/BackgroundMain.jpg');
+                background-size: cover;
+                background-position: center;
+              "
             />
           </div>
         </div>