diff --git a/backend/public/assets/usersAvatars/0e808374bd2993ca162a4e3e2bb703cf-The_Phantom_Troupe_Logo.jpg.webp b/backend/public/assets/usersAvatars/0e808374bd2993ca162a4e3e2bb703cf-The_Phantom_Troupe_Logo.jpg.webp
new file mode 100644
index 0000000..559b357
Binary files /dev/null and b/backend/public/assets/usersAvatars/0e808374bd2993ca162a4e3e2bb703cf-The_Phantom_Troupe_Logo.jpg.webp differ
diff --git a/backend/public/assets/usersAvatars/1e8152b03fdb1be16ee2fab2fa87a769-tatouage-brigade-fantome-hunter-x-hunter-316169.webp b/backend/public/assets/usersAvatars/1e8152b03fdb1be16ee2fab2fa87a769-tatouage-brigade-fantome-hunter-x-hunter-316169.webp
new file mode 100644
index 0000000..c5073c8
Binary files /dev/null and b/backend/public/assets/usersAvatars/1e8152b03fdb1be16ee2fab2fa87a769-tatouage-brigade-fantome-hunter-x-hunter-316169.webp differ
diff --git a/backend/public/assets/usersAvatars/7bad873a2b308da51803041b3fbfc1d5-The_Phantom_Troupe_Logo.jpg.webp b/backend/public/assets/usersAvatars/7bad873a2b308da51803041b3fbfc1d5-The_Phantom_Troupe_Logo.jpg.webp
new file mode 100644
index 0000000..559b357
Binary files /dev/null and b/backend/public/assets/usersAvatars/7bad873a2b308da51803041b3fbfc1d5-The_Phantom_Troupe_Logo.jpg.webp differ
diff --git a/frontend/src/pages/Profil.jsx b/frontend/src/pages/Profil.jsx
index 7a25cb1..c8262d0 100644
--- a/frontend/src/pages/Profil.jsx
+++ b/frontend/src/pages/Profil.jsx
@@ -3,7 +3,7 @@ import axios from "axios";
 
 import Recipe from "./Recipe";
 import "./style/RecipeList.scss";
-import addimage from "../assets/addimage.svg";
+
 import "./style/Profil.scss";
 
 function Profil() {
@@ -11,12 +11,15 @@ function Profil() {
   const [editing, setEditing] = useState(false);
   const [recipeBy, setRecipeBy] = useState([]);
   const [userData, setUserData] = useState({
+    avatar: null,
     username: null,
     firstname: null,
     lastname: null,
     birthdate: null,
     description: null,
   });
+  const [selectedFile, setSelectedFile] = useState(null);
+  const [selectedFileUrl, setselectedFileUrl] = useState(null);
   const [fav, setFav] = useState([]);
 
   const handleEditClick = () => {
@@ -73,23 +76,27 @@ function Profil() {
     }
   }, [id]);
 
-  const handleSaveClick = () => {
-    axios
-      .put(
-        `${import.meta.env.VITE_BACKEND_URL}/api/users/${id}`,
-        {
-          username: userData.username,
-          description: userData.description,
-          firstname: userData.firstname,
-          lastname: userData.lastname,
-          birthdate: userData.birthdate,
-        },
-        { withCredentials: true }
-      )
-      .then(() => {
-        setEditing(false);
-      });
-    setEditing(false);
+  const handleSaveClick = async () => {
+    try {
+      const formData = new FormData();
+      formData.append("avatar", selectedFile);
+      formData.append("name", userData.recipeName);
+      formData.append("title", userData.recipeDesc);
+      formData.append("prep_time", userData.prepTime);
+      formData.append("nb_people", userData.nbPeople);
+      formData.append("difficulty", userData.difficulty);
+
+      await axios
+        .put(`${import.meta.env.VITE_BACKEND_URL}/api/users/${id}`, formData, {
+          withCredentials: true,
+        })
+        .then(() => {
+          setEditing(false);
+        });
+      setEditing(false);
+    } catch (err) {
+      console.error(err);
+    }
   };
 
   const handleChange = (e) => {
@@ -99,13 +106,33 @@ function Profil() {
       [name]: value,
     }));
   };
+  const handleFileInput = (e) => {
+    setSelectedFile(e.target.files[0]);
+  };
+  const handleImageUpload = (e) => {
+    if (e.target.files && e.target.files[0]) {
+      const imgFile = e.target.files[0];
+      setselectedFileUrl(URL.createObjectURL(imgFile));
+    }
+  };
+
+  const combineImagehandler = (e) => {
+    handleFileInput(e);
+    handleImageUpload(e);
+  };
+  const imageUrl = `${import.meta.env.VITE_BACKEND_URL}/${userData.avatar}`;
 
   return (
     <div className="body-content" style={{ flexDirection: "column" }}>
       <div className="Profil_container">
         <div className="first">
           <div className="left-bloc">
-            <img className="No-photo" src={addimage} alt="No Photos" />
+            <input type="file" onChange={combineImagehandler} />
+            {selectedFileUrl ? (
+              <img src={selectedFileUrl} alt="Preview" />
+            ) : (
+              <img src={imageUrl} alt="vide" /> || "photo de profil"
+            )}
           </div>
           <div className="right-bloc">
             <label className="stats-label">