diff --git a/frontend/index.html b/frontend/index.html
index 6bb6e1e..d769b27 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,7 +5,7 @@
     <link
       rel="icon"
       type="image/svg+xml"
-      href="./src/assets/W-removebg-preview.png"
+      href="./src/assets/icons8-user-70.png"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
diff --git a/frontend/src/assets/icons8-admin-55.png b/frontend/src/assets/icons8-admin-55.png
new file mode 100644
index 0000000..3219097
Binary files /dev/null and b/frontend/src/assets/icons8-admin-55.png differ
diff --git a/frontend/src/assets/icons8-admin-57.png b/frontend/src/assets/icons8-admin-57.png
new file mode 100644
index 0000000..346638e
Binary files /dev/null and b/frontend/src/assets/icons8-admin-57.png differ
diff --git a/frontend/src/assets/icons8-user-70.png b/frontend/src/assets/icons8-user-70.png
index 80499ab..90e174c 100644
Binary files a/frontend/src/assets/icons8-user-70.png and b/frontend/src/assets/icons8-user-70.png differ
diff --git a/frontend/src/components/AdminUsersTable.jsx b/frontend/src/components/AdminUsersTable.jsx
index a1ef8e2..52c59b7 100644
--- a/frontend/src/components/AdminUsersTable.jsx
+++ b/frontend/src/components/AdminUsersTable.jsx
@@ -34,7 +34,7 @@ function AdminUsersTable({ search }) {
           <th>#</th>
           <th>User Name</th>
           <th>Email</th>
-          <th>#Edit</th>
+          <th>#Delete</th>
         </tr>
       </thead>
       <tbody>
diff --git a/frontend/src/components/ProfilPage/InfoProfil.jsx b/frontend/src/components/ProfilPage/InfoProfil.jsx
index 50970e2..29c5c08 100644
--- a/frontend/src/components/ProfilPage/InfoProfil.jsx
+++ b/frontend/src/components/ProfilPage/InfoProfil.jsx
@@ -3,25 +3,21 @@ import PropTypes from "prop-types";
 
 function InfoProfil({ time, timePlayed, numberPlayed, numberWon }) {
   return (
-    <div className="infoGamerContainer">
+    <div className="gridContainer">
       <div className="menberSince">
         <h2>Menbre depuis : {time}</h2>
       </div>
-      <div className="bottomContainer">
-        <div className="leftinfo">
-          <p>Temps du jeu :</p>
-          <br />
-          <p>{timePlayed}</p>
-        </div>
-        <div className="rightinfos">
-          <p>
-            Partie :<span>{numberPlayed}</span>
-          </p>
-          <br />
-          <p>
-            Gagné :<span>{numberWon}</span>
-          </p>
-        </div>
+      <div className="leftinfos">
+        <p>Temps du jeu :</p>
+        <p>{timePlayed}</p>
+      </div>
+      <div className="rightinfos">
+        <p>
+          Partie :<span>{numberPlayed}</span>
+        </p>
+        <p>
+          Gagné :<span>{numberWon}</span>
+        </p>
       </div>
     </div>
   );
diff --git a/frontend/src/components/ProfilPage/ProfilBio.jsx b/frontend/src/components/ProfilPage/ProfilBio.jsx
index f03418b..ccd6eca 100644
--- a/frontend/src/components/ProfilPage/ProfilBio.jsx
+++ b/frontend/src/components/ProfilPage/ProfilBio.jsx
@@ -3,15 +3,13 @@ import PropTypes from "prop-types";
 
 function ProfilBio({ img, username, bio }) {
   return (
-    <div className="profilbioContainer">
-      <h2>Profil</h2>
-      <div className="toprofilbioContainer">
-        <img src={img} alt="profil img" />
+    <div className="profilBioContainer">
+      <h2 className="titleProfil">Profil</h2>
+      <div className="topProfilBioContainer">
+        <img className="imageProfile" src={img} alt="profil img" width={40} />
         <h2>{username}</h2>
       </div>
-      <div className="bottomprofilbioContainer">
-        <textarea>{bio}</textarea>
-      </div>
+      <textarea className="textAreaBio">{bio}</textarea>
     </div>
   );
 }
diff --git a/frontend/src/components/ProfilPage/Rancking.jsx b/frontend/src/components/ProfilPage/Rancking.jsx
index 065fdbf..34ee40c 100644
--- a/frontend/src/components/ProfilPage/Rancking.jsx
+++ b/frontend/src/components/ProfilPage/Rancking.jsx
@@ -4,14 +4,13 @@ import PropTypes from "prop-types";
 function Rancking({ rang, trophy }) {
   return (
     <div className="ranckingContainer">
-      <div>
+      <div className="divisionRang">
         <h2>
           Division <span>{rang}</span>
         </h2>
       </div>
-      <hr />
-      <div>
-        <img src={trophy} width={105} alt="trophée" />
+      <div className="cup">
+        <img src={trophy} width={55} alt="trophée" />
       </div>
     </div>
   );
diff --git a/frontend/src/components/header/Header.jsx b/frontend/src/components/header/Header.jsx
index 6b35d40..327c74c 100644
--- a/frontend/src/components/header/Header.jsx
+++ b/frontend/src/components/header/Header.jsx
@@ -7,10 +7,10 @@ import AdminButton from "../input/AdminButton";
 function Header() {
   return (
     <div className="headerContainer">
-      <img src={logo} alt="logo" width={50} />
-      <ButtonConected />
+      <img src={logo} alt="logo" width={50} style={{ marginLeft: "25px" }} />
       <InputProfil />
       <AdminButton />
+      <ButtonConected />
     </div>
   );
 }
diff --git a/frontend/src/components/input/AdminButton.jsx b/frontend/src/components/input/AdminButton.jsx
index 194988a..7f2e2ca 100644
--- a/frontend/src/components/input/AdminButton.jsx
+++ b/frontend/src/components/input/AdminButton.jsx
@@ -1,6 +1,7 @@
 import { useContext } from "react";
 import { Link } from "react-router-dom";
 import { AuthContext } from "../../../context/AuthContext";
+import Admin from "../../assets/icons8-admin-55.png";
 
 function AdminButton() {
   const { connected } = useContext(AuthContext);
@@ -8,7 +9,7 @@ function AdminButton() {
   if (connected && connected.login && connected.login.role_id === 2) {
     return (
       <Link style={{ color: "white" }} className="buttonAdmin" to="/admin/user">
-        <p>Admin</p>
+        <img style={{ marginTop: "2px" }} src={Admin} alt="icone admin" />
       </Link>
     );
   }
diff --git a/frontend/src/components/input/InputProfil.jsx b/frontend/src/components/input/InputProfil.jsx
index 0041a25..236e1cd 100644
--- a/frontend/src/components/input/InputProfil.jsx
+++ b/frontend/src/components/input/InputProfil.jsx
@@ -1,16 +1,20 @@
+import { useContext } from "react";
 import { Link } from "react-router-dom";
-import logo from "../../assets/icons8-user-32.png";
+import logo from "../../assets/icons8-user-70.png";
+import { AuthContext } from "../../../context/AuthContext";
 
 function InputProfil() {
-  return (
-    <Link to="/profil">
-      <button type="button">
+  const { connected, profil } = useContext(AuthContext);
+  if (connected && connected.login && profil) {
+    return (
+      <Link to="/profil">
         <span>
-          <img src={logo} alt="profilimage" />
+          <img style={{ marginTop: "7px" }} src={logo} alt="profilimage" />
         </span>
-      </button>
-    </Link>
-  );
+      </Link>
+    );
+  }
+  return "";
 }
 
 export default InputProfil;
diff --git a/frontend/src/components/profilContainer/Profile.jsx b/frontend/src/components/profilContainer/Profile.jsx
index 5942817..f2e7cb0 100644
--- a/frontend/src/components/profilContainer/Profile.jsx
+++ b/frontend/src/components/profilContainer/Profile.jsx
@@ -17,17 +17,19 @@ function ProfilContainer() {
             alt={profil.alt}
             width={40}
           />
-          <p>{connected.login.username}</p>
+          <p className="userName">{connected.login.username}</p>
         </div>
         <div className="profil-container">
-          <h3 className="division">
-            Division {division(connected.wonGames.won_count)}
-          </h3>
+          <div className="division">
+            <h3>Division {division(connected.wonGames.wonGames)}</h3>
+          </div>
           <div className="member">
-            <span>MEMBRE DEPUIS</span>
+            <p>MEMBRE DEPUIS</p>
             <p>{convertTime(profil.createdat)}</p>
+          </div>
+          <div className="cupColors">
             <img
-              src={cupColors(connected.wonGames.won_count)}
+              src={cupColors(connected.wonGames.wonGames)}
               alt="trophée expérience"
             />
           </div>
diff --git a/frontend/src/pages/ProfilPage.jsx b/frontend/src/pages/ProfilPage.jsx
index 216a57f..c6eaa58 100644
--- a/frontend/src/pages/ProfilPage.jsx
+++ b/frontend/src/pages/ProfilPage.jsx
@@ -8,6 +8,7 @@ import ProfilBio from "../components/ProfilPage/ProfilBio";
 import division from "../services/divisions";
 import cupColors from "../services/cupColors";
 import convertTime from "../services/convertTime";
+import Header from "../components/header/Header";
 
 function ProfilPage() {
   const { profil, connected } = useContext(AuthContext);
@@ -15,19 +16,22 @@ function ProfilPage() {
   if (connected && connected.login && connected.login.username && profil) {
     return (
       <div className="profilPageContainer">
-        <div className="ranckingContainerPage">
-          <Rancking
-            rang={division(connected.wonGames.won_count)}
-            trophy={cupColors(connected.wonGames.won_count)}
-          />
-        </div>
-        <div className="infoProfilContainer">
-          <InfoProfil
-            time={convertTime(profil.createdat)}
-            timePlayed={connected.timePerPLayer.time}
-            numberPlayed={connected.wonGames.totalGames}
-            numberWon={connected.wonGames.wonGames}
-          />
+        <Header />
+        <div className="ranckingInfoProfilContainer">
+          <div className="ranckingContainerPage">
+            <Rancking
+              rang={division(connected.wonGames.wonGames)}
+              trophy={cupColors(connected.wonGames.wonGames)}
+            />
+          </div>
+          <div className="infoProfilContainer">
+            <InfoProfil
+              time={convertTime(profil.createdat)}
+              timePlayed={connected.timePerPLayer.time}
+              numberPlayed={connected.wonGames.totalGames}
+              numberWon={connected.wonGames.wonGames}
+            />
+          </div>
         </div>
         <div>
           <ProfilBio
diff --git a/frontend/src/style/components/AdminUsersTable.scss b/frontend/src/style/components/AdminUsersTable.scss
index c886519..ca07ec7 100644
--- a/frontend/src/style/components/AdminUsersTable.scss
+++ b/frontend/src/style/components/AdminUsersTable.scss
@@ -2,6 +2,14 @@
   width: 60vw;
 }
 
+.title-table {
+  color: var(--text-color);
+}
+
+tbody {
+  color: var(--text-color);
+}
+
 th,
 td {
   padding-right: 4rem;
diff --git a/frontend/src/style/components/ButtonConnected.scss b/frontend/src/style/components/ButtonConnected.scss
index 5e03251..6ec9507 100644
--- a/frontend/src/style/components/ButtonConnected.scss
+++ b/frontend/src/style/components/ButtonConnected.scss
@@ -8,6 +8,7 @@
   margin-bottom: 1rem;
   color: var(--text-color);
   cursor: pointer;
+  margin-right: 1rem;
 }
 
 .disconnectedButton {
@@ -20,4 +21,5 @@
   margin-bottom: 1rem;
   color: var(--text-color);
   cursor: pointer;
+  margin-right: 1rem;
 }
diff --git a/frontend/src/style/components/Header.scss b/frontend/src/style/components/Header.scss
index 3387418..9ec26bc 100644
--- a/frontend/src/style/components/Header.scss
+++ b/frontend/src/style/components/Header.scss
@@ -1,8 +1,28 @@
 .headerContainer {
   display: flex;
   flex-direction: row;
-  justify-content: space-around;
+  justify-content: space-between;
   align-items: center;
-  width: 100%;
+  width: 90%;
   margin-left: 3rem;
+  margin-top: 5px;
+}
+
+.mainHeaderContainer {
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 3rem;
+  margin-right: 3rem;
+}
+
+.mainHeaderContent {
+  display: flex;
+  justify-content: space-between;
+  width: 150px;
+}
+
+@media screen and (max-width: 600px) {
+  .buttonAdmin {
+    display: none;
+  }
 }
diff --git a/frontend/src/style/components/InfoProfil.scss b/frontend/src/style/components/InfoProfil.scss
new file mode 100644
index 0000000..a5a5171
--- /dev/null
+++ b/frontend/src/style/components/InfoProfil.scss
@@ -0,0 +1,49 @@
+.gridContainer {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 2px;
+}
+
+.menberSince {
+  grid-column: span 2;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  color: var(--text-color);
+  background-color: var(--primary-color);
+  padding: 1rem;
+}
+
+.leftinfos {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 10px;
+  border-bottom-left-radius: 20px;
+  color: var(--text-color);
+  background-color: var(--primary-color);
+  padding: 1rem;
+}
+.rightinfos {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 10px;
+  border-bottom-right-radius: 20px;
+  color: var(--text-color);
+  background-color: var(--primary-color);
+  padding: 1rem;
+}
+
+@media screen and (max-width: 550px) {
+  .menberSince {
+    width: 70vw;
+  }
+  .leftinfos {
+    width: 35vw;
+  }
+  .rightinfos {
+    width: 35vw;
+  }
+}
diff --git a/frontend/src/style/components/LeaderBoard/LeaderBoard.scss b/frontend/src/style/components/LeaderBoard/LeaderBoard.scss
index a0b8355..31a8752 100644
--- a/frontend/src/style/components/LeaderBoard/LeaderBoard.scss
+++ b/frontend/src/style/components/LeaderBoard/LeaderBoard.scss
@@ -42,6 +42,7 @@
     }
   }
 }
+
 .burger,
 .cross {
   color: rgb(0, 0, 0);
@@ -49,25 +50,31 @@
   margin: 0 5px;
   cursor: pointer;
   position: absolute;
-  top: 5px;
+  top: 17px;
   left: 5px;
   z-index: 10;
+  color: white;
 }
+
 .cross {
   color: white;
 }
+
 .menu {
   margin-top: 4rem;
 }
+
 .menuBurgerRanking {
   display: none;
 }
+
 .leaderBoardMobile {
   z-index: 10;
   position: fixed;
   background-color: #383a40;
   width: 100%;
 }
+
 @media screen and (max-width: 900px) {
   .menuBurgerRanking {
     display: flex;
@@ -75,16 +82,19 @@
     justify-content: center;
   }
 }
+
 @media screen and (max-width: 470px) {
   .leaderBoardLineContainer {
     gap: 40px;
   }
 }
+
 @media screen and (max-width: 900px) {
   .LeaderBoard-container {
     display: none;
   }
 }
+
 .menuBurguerRankingContainer {
   .leaderBoardLineContainer {
     display: flex;
diff --git a/frontend/src/style/components/ProfilBio.scss b/frontend/src/style/components/ProfilBio.scss
new file mode 100644
index 0000000..692b65d
--- /dev/null
+++ b/frontend/src/style/components/ProfilBio.scss
@@ -0,0 +1,46 @@
+.profilBioContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 1rem;
+  color: var(--text-color);
+  width: 50%;
+  margin: auto;
+  border-radius: 20px;
+  background-color: var(--primary-color);
+}
+
+.topProfilBioContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: var(--text-color);
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+.titleProfil {
+  margin-bottom: 1rem;
+}
+
+.imageProfile {
+  border-radius: 50%;
+}
+
+.textAreaBio {
+  background-color: var(--main-bg-color);
+  color: var(--text-color);
+  width: 100%;
+  height: 7rem;
+  border-radius: 10px;
+  border: none;
+  padding: 0.5rem;
+}
+
+@media screen and (max-width: 550px) {
+  .profilBioContainer {
+    width: 70vw;
+  }
+  .textAreaBio {
+    height: 8rem;
+  }
+}
diff --git a/frontend/src/style/components/Rancking.scss b/frontend/src/style/components/Rancking.scss
new file mode 100644
index 0000000..150b2f6
--- /dev/null
+++ b/frontend/src/style/components/Rancking.scss
@@ -0,0 +1,37 @@
+.ranckingContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.divisionRang {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20vw;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  color: var(--text-color);
+  background-color: var(--primary-color);
+  padding: 1rem;
+}
+
+.cup {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20vw;
+  padding: 1rem;
+  border-bottom-right-radius: 20px;
+  border-bottom-left-radius: 20px;
+  background-color: var(--primary-color);
+}
+
+@media screen and (max-width: 550px) {
+  .cup {
+    width: 70vw;
+  }
+  .divisionRang {
+    width: 70vw;
+  }
+}
diff --git a/frontend/src/style/index.scss b/frontend/src/style/index.scss
index f207255..05daf68 100644
--- a/frontend/src/style/index.scss
+++ b/frontend/src/style/index.scss
@@ -22,3 +22,7 @@
 @import "../style/components/Header.scss";
 @import "../style/components/ButtonConnected.scss";
 @import "../style/pages/Profil.scss";
+@import "../style/pages/ProfilPage.scss";
+@import "../style/components/Rancking.scss";
+@import "../style/components/ProfilBio.scss";
+@import "../style/components/InfoProfil.scss";
diff --git a/frontend/src/style/pages/Profil.scss b/frontend/src/style/pages/Profil.scss
index 3d5b9e2..b96d4f6 100644
--- a/frontend/src/style/pages/Profil.scss
+++ b/frontend/src/style/pages/Profil.scss
@@ -3,31 +3,74 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  background-color: var(--primary-color);
-  border-radius: 20px;
   color: var(--text-color);
+  width: 100%;
 }
+
+.avatar-profil {
+  border-radius: 100px;
+}
+
 .user-info {
   display: flex;
   align-items: center;
   gap: 1rem;
   margin-bottom: 0.5rem;
+  width: 100%;
 }
-.avatar-profil {
-  border-radius: 100px;
-}
+
 .division {
-  border-bottom: white solid 1px;
+  background-color: var(--primary-color);
+  margin-bottom: 2px;
+  padding: 1rem;
+  width: 100%;
+  border-top-right-radius: 20px;
+  border-top-left-radius: 20px;
 }
+
+.division h3 {
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
 .member {
   display: flex;
   flex-direction: column;
-  border-bottom: 1px solid white;
   align-items: center;
   justify-content: center;
+  background-color: var(--primary-color);
+  width: 100%;
+  margin-bottom: 2px;
+  padding: 1rem;
+}
+
+.cupColors {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--primary-color);
+  width: 100%;
+  border-bottom-left-radius: 20px;
+  border-bottom-right-radius: 20px;
+  padding: 1rem;
+}
+
+.info-profil-container {
+  width: 300px;
+}
+
+.userName {
+  color: var(--user-color);
 }
 @media screen and (max-width: 1200px) {
   .info-profil-container {
     display: none;
   }
 }
+
+@media screen and (max-width: 1500px) {
+  .info-profil-container {
+    width: 200px;
+  }
+}
diff --git a/frontend/src/style/pages/ProfilPage.scss b/frontend/src/style/pages/ProfilPage.scss
new file mode 100644
index 0000000..a22c098
--- /dev/null
+++ b/frontend/src/style/pages/ProfilPage.scss
@@ -0,0 +1,22 @@
+.profilPageContainer {
+  width: 100%;
+}
+
+.ranckingInfoProfilContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+  margin-top: 10rem;
+  margin-bottom: 5rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+@media screen and (max-width: 550px) {
+  .ranckingInfoProfilContainer {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 2rem;
+  }
+}