diff --git a/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js b/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js
index cf689f82..9f3257e5 100644
--- a/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js	
+++ b/Site Web/client/src/components/Configurations/ConfigurationDuProfil.js	
@@ -12,8 +12,8 @@ const ConfigurationDuProfil = ()=>{
    
     const userData = useSelector((state) => state.user.user);
     const [pseudo, setPseudo] = useState(userData.pseudo);
-    const[userPicture, setUserPicture] = useState(userData.picture)
-    const [tmpImage, setTmpImage] =useState('')
+    const[userPicture, setUserPicture] = useState(userData.picture);
+    const [tmpImage, setTmpImage] =useState(PLUS);
     const [displayAdd, setDisplayAdd] = useState(false);
     const dispatch = useDispatch();
 
@@ -22,11 +22,23 @@ const ConfigurationDuProfil = ()=>{
         setDisplayAdd(false);
     }
     const handleLoadFile=(e)=>{
-        var image = document.getElementById("output");
-        image.src = URL.createObjectURL(e.target.files[0]);
-        setTmpImage(image.src);
+        const file=e.target.files[0];
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+        setTmpImage({
+            data: reader.result,
+            contentType: file.type,
+        });
     };
+    };
+
 
+
+    const handleTPM =()=> {
+        console.log("test");
+        console.log(tmpImage);
+    }
     const handleUpdate = async (e) => {
         console.log(userPicture)
         e.preventDefault();
@@ -123,13 +135,13 @@ const ConfigurationDuProfil = ()=>{
                         <span className="camera"></span>
                             <span>Changer</span>
                         </label>
-                        <input type="file" id="file" name='file' accept=".jpg, .jpeg, .png" onChange={handleLoadFile}/> {/* onChange={(e)=> setTmpImage(e.target.files[0].name)} */}
-                        <img src={PLUS} className="imageDeProfil"id="output" />
+                        <input type="file" id="file" name='file' accept=".jpg, .jpeg, .png" onChange={handleLoadFile}/> {/*onChange={handleLoadFile} onChange={(e)=> setTmpImage(e.target.files[0].name)} */}
+                        <img src={tmpImage} className="imageDeProfil"id="output" />
                     </div>
                 </div >
                 <div className='buttonPopup'>
                 <button  onClick={()=>setDisplayAdd(false)}>Retour</button>
-                <button onClick={handleValidationPopup} >Valider</button>
+                <button onClick={handleTPM()} >Valider</button>
                 
                 </div>
                 </div>
diff --git a/Site Web/client/src/pages/Profil.js b/Site Web/client/src/pages/Profil.js
index ac383372..4d4632f1 100644
--- a/Site Web/client/src/pages/Profil.js	
+++ b/Site Web/client/src/pages/Profil.js	
@@ -13,6 +13,11 @@ import MiniProfil from "../components/MiniProfil";
 const Profil = () => {
     const { uid } = useParams();
     const [userData, setUserData] = useState(null);
+    const [followingPopup, setFollowingPopup] = useState(false);
+    const [followerPopup, setFollowerPopup] = useState(false);
+    const [dossierPersonnels,setdossierPersonnels ] = useState(false);
+    const [postPersonnels,setpostPersonnels ] = useState(true);
+    const [postLikes,setpostLikes ] = useState(false)
 
     useEffect(() => {
         async function fetchData() {
@@ -24,12 +29,6 @@ const Profil = () => {
     }, [uid]);
 
 
-    const [followingPopup, setFollowingPopup] = useState(false);
-    const [followerPopup, setFollowerPopup] = useState(false);
-    const [dossierPersonnels,setdossierPersonnels ] = useState(false);
-    const [postPersonnels,setpostPersonnels ] = useState(true);
-    const [postLikes,setpostLikes ] = useState(false)
-
     const handleModals = (e) => {
         if (e.target.id === "DossierPersonnels") {
             setdossierPersonnels(true);
@@ -217,13 +216,13 @@ const Profil = () => {
                     <nav role="navigation" className="navProfil">
                         <ul className="navItemsProfil">
                             <li className="navItemProfil">
-                                <a className="navLinkProfil" id='DossierPersonnels' onClick={handleModals}><span>Dossier Personnel</span></a>
+                                <a className="navLinkProfil" id='DossierPersonnels' onClick={handleModals}>Dossier Personnel</a>
                             </li> 
                             <li className="navItemProfil">
-                                <a className="navLinkProfil" id='PostsPersonnels' onClick={handleModals}><span>Posts</span></a>
+                                <a className="navLinkProfil" id='PostsPersonnels' onClick={handleModals}>Posts</a>
                             </li>
                             <li className="navItemProfil">
-                                <a  className="navLinkProfil" id='PostLikes' onClick={handleModals}><span>Posts likés</span></a>
+                                <a  className="navLinkProfil" id='PostsLikes' onClick={handleModals}>Posts likés</a>
                             </li> 
                           
                         </ul>