diff --git a/front/style/settings/settings.css b/front/style/settings/settings.css
index 228879b..9734c25 100644
--- a/front/style/settings/settings.css
+++ b/front/style/settings/settings.css
@@ -15,4 +15,13 @@
     width: 85%;
     border: 1px yellow solid;
     height: 100%;
+}
+
+.content {
+    color : var(--main-contrast-color);
+}
+
+#account-infos {
+    width: 50%;
+    padding-left : 5%;
 }
\ No newline at end of file
diff --git a/front/views/Settings.tsx b/front/views/Settings.tsx
index 71a6c62..f9b2c20 100644
--- a/front/views/Settings.tsx
+++ b/front/views/Settings.tsx
@@ -1,8 +1,11 @@
 import "../style/settings/settings.css"
+import 'bootstrap/dist/css/bootstrap.min.css';
 import { MainTitle, SecondTitle } from "./component/Title"
 import {Header} from './template/Header'
 import { useState, ChangeEvent } from "react"
 import { User } from "./model/User" 
+import Button from 'react-bootstrap/Button';
+import Form from 'react-bootstrap/Form';
 
 export default function Settings({user} : {user : User}){
     return (
@@ -18,7 +21,7 @@ function Body({user} : {user : User}) {
         <div id="body">
             <div id="content">
                 <MainTitle title="Paramètres" id={null}/>
-                <AccountSettings user={user}/>
+                <AccountSettings user={user} />
             </div>
         </div>
     )
@@ -35,22 +38,38 @@ function AccountSettings({user} : {user : User}){
 
 function ContentAccountSettings({user} : {user : User}) {
     // Utilisez useState pour gérer l'état du champ de saisie
-    const [username, setUsername] = useState(user.name);
+    // const [username, setUsername] = useState({user.username});
 
-    // Fonction pour mettre à jour l'état lorsqu'il y a un changement dans le champ de saisie
-    const handleUsernameChange = (event :  ChangeEvent<HTMLInputElement>) => {
-        setUsername(event.target.value);
-    };
+    // // Fonction pour mettre à jour l'état lorsqu'il y a un changement dans le champ de saisie
+    // const handleUsernameChange = (event :  ChangeEvent<HTMLInputElement>) => {
+    //     setUsername(event.target.value);
+    // };
+
+    // return (
+    //     <form id="account-content">
+    //         <dl>
+    //             <dt>Nom d'utilisateur</dt>
+    //             {/* Utilisez la valeur de l'état et la fonction onChange */}
+    //             <dd><input type="text" value={username} onChange={handleUsernameChange} /></dd>
+    //         </dl>
+    //     </form>
+    // );
 
     return (
-        <form id="account-content">
-            <dl>
-                <dt>Nom d'utilisateur</dt>
-                {/* Utilisez la valeur de l'état et la fonction onChange */}
-                <dd><input type="text" value={username} id="username" name="username" onChange={handleUsernameChange} /></dd>
-            </dl>
-            <input type="submit" value="Update"/>
-        </form>
+        <div id="account-infos">
+            <Form>
+                <Form.Group className="mb-3" controlId="formUsername">
+                    <Form.Label className="content">Nom d'utilisateur</Form.Label>
+                    <Form.Control size="sm" defaultValue={user.name}/>
+                </Form.Group>
+                <Form.Group className="mb-3" controlId="formEmail">
+                    <Form.Label className="content">Adresse mail</Form.Label>
+                    <Form.Control size="sm" defaultValue={user.email} type="email" placeholder="Password" />
+                </Form.Group>
+                <Button variant="outline-primary" type="submit">Mettre à jour</Button>
+            </Form>
+        </div>
+        
     );
 }
 
diff --git a/front/views/model/User.tsx b/front/views/model/User.tsx
index 36bbb67..ff4c757 100644
--- a/front/views/model/User.tsx
+++ b/front/views/model/User.tsx
@@ -3,4 +3,4 @@ export interface User {
     name: string
     email: string
     profilePicture: string
-}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 1380d59..f831e60 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
     "@types/node": "^16.18.59",
     "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
+    "bootstrap": "^5.3.2",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.10.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
     "typescript": "^5.2.2",
diff --git a/public/api/index.php b/public/api/index.php
index 8e148db..0331ca8 100644
--- a/public/api/index.php
+++ b/public/api/index.php
@@ -26,7 +26,7 @@ function getAuthController(): APIAuthController {
     return new APIAuthController(new AuthModel(new AccountGateway(new Connection(get_database()))));
 }
 
-function getAPIUserController() : APIUserController {
+function getAPIUserController(): APIUserController {
     return new APIUserController(new AuthModel(new AccountGateway(new Connection(get_database()))));
 }
 
@@ -37,7 +37,8 @@ function getRoutes(): AltoRouter {
     $router->map("POST", "/auth", Action::noAuth(fn() => getAuthController()->authorize()));
     $router->map("POST", "/tactic/[i:id]/edit/name", Action::auth(fn(int $id, Account $acc) => getTacticController()->updateName($id, $acc)));
     $router->map("POST", "/tactic/[i:id]/save", Action::auth(fn(int $id, Account $acc) => getTacticController()->saveContent($id, $acc)));
-    // $router->map("POST", "/user/username", Action::auth(fn(Account $acc) => getAPIUserController()->changeUsername($acc)));
+    $router->map("POST", "/update/profil", Action::auth(fn(Account $acc) => getAPIUserController()->updateProfil($acc)));
+
     return $router;
 }
 
diff --git a/public/index.php b/public/index.php
index 1c14e1a..beae9b7 100644
--- a/public/index.php
+++ b/public/index.php
@@ -85,9 +85,7 @@ function getRoutes(): AltoRouter {
     $ar->map("GET", "/home", Action::auth(fn(SessionHandle $s) => getUserController()->home($s)));
     $ar->map("GET", "/settings", Action::auth(fn(SessionHandle $s) => getUserController()->settings($s)));
     $ar->map("GET", "/disconnect", Action::auth(fn(MutableSessionHandle $s) => getUserController()->disconnect($s)));
-    $ar->map("POST", "/user/profil", Action::auth(fn(SessionHandle $s) => getUserController()->updateProfil($_POST, $s)));
-
-
+    
     //tactic-related
     $ar->map("GET", "/tactic/[i:id]/view", Action::auth(fn(int $id, SessionHandle $s) => getVisualizerController()->openVisualizer($id, $s)));
     $ar->map("GET", "/tactic/[i:id]/edit", Action::auth(fn(int $id, SessionHandle $s) => getEditorController()->openEditor($id, $s)));
@@ -110,7 +108,6 @@ function getRoutes(): AltoRouter {
     $ar->map("GET", "/team/[i:id]/edit", Action::auth(fn(int $idTeam, SessionHandle $s) => getTeamController()->displayEditTeam($idTeam, $s)));
     $ar->map("POST", "/team/[i:id]/edit", Action::auth(fn(int $idTeam, SessionHandle $s) => getTeamController()->editTeam($idTeam, $_POST, $s)));
 
-
     return $ar;
 }
 
diff --git a/sql/setup-tables.sql b/sql/setup-tables.sql
index 0d157d9..5e8c155 100644
--- a/sql/setup-tables.sql
+++ b/sql/setup-tables.sql
@@ -49,4 +49,4 @@ CREATE TABLE Member
     role    text CHECK (role IN ('COACH', 'PLAYER')) NOT NULL,
     FOREIGN KEY (id_team) REFERENCES Team (id),
     FOREIGN KEY (id_user) REFERENCES Account (id)
-);
+);
\ No newline at end of file
diff --git a/src/Api/Controller/APIUserController.php b/src/Api/Controller/APIUserController.php
index 9894f85..a117122 100644
--- a/src/Api/Controller/APIUserController.php
+++ b/src/Api/Controller/APIUserController.php
@@ -3,29 +3,47 @@
 namespace IQBall\Api\Controller;
 
 use IQBall\App\Control;
-use IQBall\Core\Model\AuthModel;
 use IQBall\Core\Data\Account;
 use IQBall\Core\Http\HttpCodes;
 use IQBall\Core\Http\HttpRequest;
 use IQBall\Core\Http\HttpResponse;
+use IQBall\Core\Http\JsonHttpResponse;
+use IQBall\Core\Model\AuthModel;
+use IQBall\Core\Validation\FieldValidationFail;
+use IQBall\Core\Validation\Validator;
 use IQBall\Core\Validation\Validators;
 
+/**
+ * API endpoint related to tactics
+ */
 class APIUserController {
     private AuthModel $model;
 
+    /**
+     * @param AuthModel $model
+     */
     public function __construct(AuthModel $model) {
         $this->model = $model;
     }
 
-    public function changeUsername(Account $acc) {
+    /**
+     * @param Account $account
+     * @return HttpResponse
+     */
+    public function updateProfil(Account $account): HttpResponse {
         return Control::runChecked([
-            "username" => [Validators::name()]
-        ], function(HttpRequest $request) use ($acc) {
-            $this->model->changeUsername($acc->getUser()->getId(), $request["username"]);
+            "username" => [Validators::name()],
+            "email" => [Validators::email()]
+        ], function (HttpRequest $request) use ($account) {
+
+            $failures = $this->model->updateProfil($request["username"], $request["email"], $account->getUser()->getId());
+
+            if (!empty($failures)) {
+                //TODO find a system to handle Unauthorized error codes more easily from failures.
+                return new JsonHttpResponse($failures, HttpCodes::BAD_REQUEST);
+            }
 
             return HttpResponse::fromCode(HttpCodes::OK);
         });
     }
 }
-
-?>
\ No newline at end of file
diff --git a/src/App/Controller/EditorController.php b/src/App/Controller/EditorController.php
index 4bdcfae..293ef7c 100644
--- a/src/App/Controller/EditorController.php
+++ b/src/App/Controller/EditorController.php
@@ -84,4 +84,4 @@ class EditorController {
 
         return $this->openEditorFor($tactic);
     }
-}
+}
\ No newline at end of file
diff --git a/src/App/Controller/UserController.php b/src/App/Controller/UserController.php
index 322c6ab..650e56b 100644
--- a/src/App/Controller/UserController.php
+++ b/src/App/Controller/UserController.php
@@ -13,7 +13,6 @@ class UserController {
     private TacticModel $tactics;
     private ?TeamModel $teams;
 
-
     /**
      * @param TacticModel $tactics
      * @param TeamModel|null $teams
@@ -63,9 +62,4 @@ class UserController {
         $session->destroy();
         return HttpResponse::redirect("/");
     }
-
-    public function updateProfil(array $request, SessionHandle $s) {
-        
-    }
-
-}
+}
\ No newline at end of file
diff --git a/src/Core/Gateway/AccountGateway.php b/src/Core/Gateway/AccountGateway.php
index 561cabd..02350b1 100644
--- a/src/Core/Gateway/AccountGateway.php
+++ b/src/Core/Gateway/AccountGateway.php
@@ -82,8 +82,8 @@ class AccountGateway {
         return new Account($acc["token"], new User($acc["email"], $acc["username"], $acc["id"], $acc["profilePicture"]));
     }
 
-    public function changeUsername(int $id, string $username) {
-        $this->con->exec("UPDATE Account SET username = :username WHERE id = :id", [":username" => [$username, PDO::PARAM_STR], ":id" => [$id, PDO::PARAM_INT]]);
+    public void updateProfil() {
+        
     }
 
 
diff --git a/src/Core/Model/AuthModel.php b/src/Core/Model/AuthModel.php
index 22351b1..103d4e4 100644
--- a/src/Core/Model/AuthModel.php
+++ b/src/Core/Model/AuthModel.php
@@ -6,6 +6,7 @@ use Exception;
 use IQBall\Core\Data\Account;
 use IQBall\Core\Data\User;
 use IQBall\Core\Gateway\AccountGateway;
+use IQBall\Core\Http\HttpResponse;
 use IQBall\Core\Validation\FieldValidationFail;
 use IQBall\Core\Validation\ValidationFail;
 
@@ -50,6 +51,10 @@ class AuthModel {
         return new Account($token, new User($email, $username, $accountId, self::DEFAULT_PROFILE_PICTURE));
     }
 
+    public function updateProfil(string $username, string $mail, Account $account) {
+        $gateway-> 
+    }
+
     /**
      * Generate a random base 64 string
      * @return string