diff --git a/src/App.jsx b/src/App.jsx
index 00d3a51..76b92b4 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -18,6 +18,11 @@ export default function App() {
   const [loggedIn, setLoggedIn] = useState(false);
   const [clientId, setClientId] = useState([]);
 
+  const [updateUsername, setUpdateUsername] = useState("");
+  const [updateCurrentPassword, setUpdateCurrentPassword] = useState("");
+  const [updateNewPassword, setUpdateNewPassword] = useState("");
+
+
   useEffect(() => {
     checkAuth();
   }, []);
@@ -77,6 +82,31 @@ async function logoutUser() {
   }
 }
 
+function updatePassword(e) {
+  e.preventDefault();
+
+  //try
+  const payload = {
+    username : updateUsername,
+    current_password : updateCurrentPassword,
+    newpassword : updateNewPassword
+  }
+
+  const res = fetch(`${API_BASE}/auth/update_password`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+            "User-Agent": "react-app",
+          },
+          credentials: "include", // send cookies automatically
+          body: JSON.stringify(payload),
+        });
+
+        if (!res.ok) {
+        console.log("update password failed"+ updateCurrentPassword, updateNewPassword, updateUsername)
+      }
+
+}
 
   if (loading) return <p>Loading...</p>; // can show a spinner
 
@@ -84,6 +114,31 @@ return (
   <>
     <button onClick={logoutUser}>disconnect</button>
 
+    <form onSubmit={updatePassword}>
+      <input
+        type="text"
+        placeholder="Username"
+        value={updateUsername}
+        onChange={(e) => setUpdateUsername(e.target.value)}
+      />
+
+      <input
+        type="text"
+        placeholder="MDP actuel"
+        value={updateCurrentPassword}
+        onChange={(e) => setUpdateCurrentPassword(e.target.value)}
+      />
+
+      <input
+        type="text"
+        placeholder="Nouveau MDP"
+        value={updateNewPassword}
+        onChange={(e) => setUpdateNewPassword(e.target.value)}
+      />
+
+      <button type="submit">Uppdate</button>
+    </form>
+
     {loggedIn ? (
       <MainApp resClientId={clientId} />
     ) : (