diff --git a/front/style/settings/settings.css b/front/style/settings/settings.css
index 9734c25..089095f 100644
--- a/front/style/settings/settings.css
+++ b/front/style/settings/settings.css
@@ -4,7 +4,7 @@
 
 #body {
     background-color: var(--second-color);
-    border: 1px solid red;
+    /* border: 1px solid red; */
     width: 100%;
     height: 100vh;
     display: flex;
@@ -13,7 +13,7 @@
 
 #content {
     width: 85%;
-    border: 1px yellow solid;
+    /* border: 1px yellow solid; */
     height: 100%;
 }
 
diff --git a/front/views/Settings.tsx b/front/views/Settings.tsx
index 894f86c..2c9b0ce 100644
--- a/front/views/Settings.tsx
+++ b/front/views/Settings.tsx
@@ -1,47 +1,50 @@
 import "../style/settings/settings.css"
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { MainTitle, SecondTitle } from "./component/Title"
-import {Header} from './template/Header'
+import { Header } from './template/Header'
 import { useState, ChangeEvent, useRef } from "react"
-import { User } from "./model/User" 
+import { User } from "./model/User"
 import Button from 'react-bootstrap/Button';
-import Form from 'react-bootstrap/Form';    
+import Form from 'react-bootstrap/Form';
 import Image from 'react-bootstrap/Image';
+import Container from 'react-bootstrap/Container'
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
 import { updateSourceFile } from "typescript";
 import { fetchAPI } from "../Fetcher";
 import { fetchPOST } from "../Fetcher";
 
 
-export default function Settings({user} : {user : User}){
+export default function Settings({ user }: { user: User }) {
     return (
         <div id="main">
             <Header username={user.name} />
-            <Body user={user}/>
+            <Body user={user} />
         </div>
     )
 }
 
-function Body({user} : {user : User}) {
+function Body({ user }: { user: User }) {
     return (
         <div id="body">
             <div id="content">
-                <MainTitle title="Paramètres" id={null}/>
+                <MainTitle title="Paramètres" id={null} />
                 <AccountSettings user={user} />
             </div>
         </div>
     )
 }
 
-function AccountSettings({user} : {user : User}){
+function AccountSettings({ user }: { user: User }) {
     return (
         <div id="account">
-            <SecondTitle title="Compte personnel" id={null}/>
+            <SecondTitle title="Compte personnel" id={null} />
             <ProfilSettings user={user} />
         </div>
     );
 }
 
-function ProfilSettings({user} : {user : User}) {
+function ProfilSettings({ user }: { user: User }) {
     // Utilisez useState pour gérer l'état du champ de saisie
     // const [username, setUsername] = useState({user.username});
 
@@ -63,37 +66,58 @@ function ProfilSettings({user} : {user : User}) {
     const nameRef = useRef<HTMLInputElement>(null);
     const emailRef = useRef<HTMLInputElement>(null);
 
-
     const size = "171x180";
     const profilePicture = user.profilePicture + "/" + size;
     return (
-        <div id="account">
-            <div id="profil-picture">
-                <Image src={profilePicture}roundedCircle />
-                <Button variant="outline-primary">Changer photo de profil</Button>
-            </div>
-            <div id="account-infos">
-                <Form>
-                    <Form.Group className="mb-3" controlId="formUsername">
-                        <Form.Label className="content">Nom d'utilisateur</Form.Label>
-                        <Form.Control ref={nameRef} size="sm" defaultValue={user.name}/>
-                    </Form.Group>
-                    <Form.Group className="mb-3" controlId="formEmail">
-                        <Form.Label className="content">Adresse mail</Form.Label>
-                        <Form.Control ref={emailRef} id="control" size="sm" defaultValue={user.email} type="email" placeholder="Password" />
-                    </Form.Group>
-                    <Button variant="outline-primary" type="button" onClick={() => updateAccountInfos(nameRef.current!.value, emailRef.current!.value, user)}>Mettre à jour</Button>
-                </Form>
-            </div>
-        </div>
+        <Container>
+            <Row>
+                <Col>
+                    <Image src={profilePicture} roundedCircle />
+                    <Button variant="outline-primary" onClick={() => alert("En cours de développement...")}>Changer photo de profil</Button>
+                </Col>
+                <Col>
+                    <Form>
+                        <Form.Group className="mb-3" controlId="formUsername">
+                            <Form.Label className="content">Nom d'utilisateur</Form.Label>
+                            <Form.Control ref={nameRef} size="sm" defaultValue={user.name} />
+                        </Form.Group>
+                        <Form.Group className="mb-3" controlId="formEmail">
+                            <Form.Label className="content">Adresse mail</Form.Label>
+                            <Form.Control readOnly onClick={() => alert("En cours de développement...")} ref={emailRef} id="control" size="sm" defaultValue={user.email} type="email" placeholder="Password" />
+                        </Form.Group>
+                        <Button variant="outline-primary" type="button" onClick={() => updateAccountInfos(nameRef.current!.value, emailRef.current!.value, user)}>Mettre à jour</Button>
+                    </Form>
+                </Col>
+
+            </Row>
+        </Container>
+        // <div id="account">
+        //     <div id="profil-picture">
+        //         <Image src={profilePicture}roundedCircle />
+        //         <Button variant="outline-primary">Changer photo de profil</Button>
+        //     </div>
+        //     <div id="account-infos">
+        //         <Form>
+        //             <Form.Group className="mb-3" controlId="formUsername">
+        //                 <Form.Label className="content">Nom d'utilisateur</Form.Label>
+        //                 <Form.Control ref={nameRef} size="sm" defaultValue={user.name}/>
+        //             </Form.Group>
+        //             <Form.Group className="mb-3" controlId="formEmail">
+        //                 <Form.Label className="content">Adresse mail</Form.Label>
+        //                 <Form.Control readOnly onClick={() => alert("En cours de développement...")} ref={emailRef} id="control" size="sm" defaultValue={user.email} type="email" placeholder="Password" />
+        //             </Form.Group>
+        //             <Button variant="outline-primary" type="button" onClick={() => updateAccountInfos(nameRef.current!.value, emailRef.current!.value, user)}>Mettre à jour</Button>
+        //         </Form>
+        //     </div>
+        // </div>
     );
 }
 
 
-function updateAccountInfos(name : string, email : string, user : User) {
+function updateAccountInfos(name: string, email: string, user: User) {
     fetchAPI("account/update/profile", {
-        name : name,
-        email : email
+        name: name,
+        email: email
     });
     fetchPOST("account/update", {});
     location.reload();
diff --git a/src/App/Controller/AuthController.php b/src/App/Controller/AuthController.php
index 2ef9974..2addfe6 100644
--- a/src/App/Controller/AuthController.php
+++ b/src/App/Controller/AuthController.php
@@ -55,8 +55,7 @@ class AuthController {
 
         return HttpResponse::redirect("/home");
     }
-
-
+    
     public function displayLogin(): HttpResponse {
         return ViewHttpResponse::twig("display_login.html.twig", []);
     }
