diff --git a/front/style/template/header.css b/front/style/component/header.css
similarity index 83%
rename from front/style/template/header.css
rename to front/style/component/header.css
index 1383e09..b0f2181 100644
--- a/front/style/template/header.css
+++ b/front/style/component/header.css
@@ -1,3 +1,5 @@
+@import url("./main_title.css"); 
+
 :root {
     --height-header : 110px;
 }
@@ -6,11 +8,9 @@
     text-align: center;
     background-color: var(--main-color);
     margin: 0px;
-    /* border : var(--accent-color) 1px solid; */
     display: flex;
     flex-direction: row;
     font-family: var(--font-title);
-    /* border-radius: 0.75cap; */
     padding-left : 1%;
     padding-right: 1%;
     height: var(--height-header);
@@ -18,16 +18,15 @@
 
 #header-center {
     width: 80%;
-    /* border : yellow 1px solid; */
     padding : 0px;
     display: flex;
     justify-content: center;
+    align-items: center;
 }
 
 #header-right,
 #header-left {
     width: 10%;
-    /* border: yellow 2px solid; */
 }
 
 #header-right {
@@ -44,7 +43,6 @@
 #img-account {
     width: 100%;
     cursor: pointer;
-    /* border : 1px red solid;    */
 }
 
 #username {
@@ -74,7 +72,6 @@
     color: var(--accent-color);
     font-weight: bold;
     font-size: 45px;
-    /* border: red 1px solid; */
     width: fit-content;
     text-align: center;
 }
diff --git a/front/style/component/main_title.css b/front/style/component/main_title.css
index 15cc69b..19f5015 100644
--- a/front/style/component/main_title.css
+++ b/front/style/component/main_title.css
@@ -2,7 +2,6 @@
 
 .main-title h2 {
     text-align: center;
-    /* font-weight: bold; */ 
 }
 
 .title {
diff --git a/front/style/home/home.css b/front/style/home/home.css
index 0536bbd..57e7101 100644
--- a/front/style/home/home.css
+++ b/front/style/home/home.css
@@ -1,15 +1,9 @@
 @import url(../theme/dark.css);
 @import url(personnal_space.css);
 @import url(side_menu.css);
-@import url(../template/header.css);
+@import url(../component/header.css);
 
-body {
-    /* background-color: #303030; */
-}
 #main {
-    /* margin-left : 10%;
-    margin-right: 10%; */
-    /* border : solid 1px #303030; */
     display: flex;
     flex-direction: column;
     font-family: var(--font-content);
diff --git a/front/style/home/personnal_space.css b/front/style/home/personnal_space.css
index 9d6c4fb..22341c5 100644
--- a/front/style/home/personnal_space.css
+++ b/front/style/home/personnal_space.css
@@ -1,4 +1,4 @@
-@import url(../component/main_title.css);
+@import url(../component/header.css);
 
 #personal-space {
     display: flex;
@@ -7,7 +7,6 @@
 
 #body-personal-space {
     width: 95%;
-    /* background-color: #ccc2b7; */
     border: 3px var(--main-color) solid;
     border-radius: 0.5cap;
     align-self: center;
diff --git a/front/style/settings/settings.css b/front/style/settings/settings.css
index 089095f..f94b41d 100644
--- a/front/style/settings/settings.css
+++ b/front/style/settings/settings.css
@@ -1,10 +1,8 @@
-@import url(../template/header.css);
+@import url(../component/header.css);
 @import url(../theme/dark.css);
-@import url(../component/main_title.css);
 
 #body {
     background-color: var(--second-color);
-    /* border: 1px solid red; */
     width: 100%;
     height: 100vh;
     display: flex;
@@ -13,8 +11,8 @@
 
 #content {
     width: 85%;
-    /* border: 1px yellow solid; */
     height: 100%;
+    padding-top : 20px;
 }
 
 .content {
@@ -24,4 +22,11 @@
 #account-infos {
     width: 50%;
     padding-left : 5%;
+}
+
+#img {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    padding-bottom : 10px;
 }
\ No newline at end of file
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index 051d6fd..65d38f5 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -95,8 +95,6 @@ function PersonalSpace({
     )
 }
 
-
-
 function TableData({ allTactics }: { allTactics: Tactic[] }) {
     const nbRow = Math.floor(allTactics.length / 3) + 1
     let listTactic = Array(nbRow)
diff --git a/front/views/Settings.tsx b/front/views/Settings.tsx
index 2da2d1d..a4d4a59 100644
--- a/front/views/Settings.tsx
+++ b/front/views/Settings.tsx
@@ -1,5 +1,5 @@
-import { BASE } from "../Constants"
 import "../style/settings/settings.css"
+
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { MainTitle, SecondTitle } from "./component/Title"
 import { Header } from './template/Header'
@@ -11,16 +11,11 @@ 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";
 import axios from "axios";
 import Modal from 'react-bootstrap/Modal';
 import { Stack } from "react-bootstrap";
-import * as http from 'follow-redirects/http';
-import * as https from 'follow-redirects/https';
-// import fetch from 'node-fetch';
-
 
 export default function Settings({ user }: { user: User }) {
 	return (
@@ -28,14 +23,14 @@ export default function Settings({ user }: { user: User }) {
 			<Header username={user.name} />
 			<Body user={user} />
 		</div>
-	)
+	);
 }
 
 function Body({ user }: { user: User }) {
 	return (
 		<div id="body">
 			<div id="content">
-				<MainTitle title="Paramètres" id={null} />
+				<MainTitle title="Paramètres" id="param" />
 				<AccountSettings user={user} />
 			</div>
 		</div>
@@ -55,15 +50,16 @@ function ProfilSettings({ user }: { user: User }) {
 	const nameRef = useRef<HTMLInputElement>(null);
 	const emailRef = useRef<HTMLInputElement>(null);
 	const [modalShow, setModalShow] = useState(false);
-	const width = 140;
+	const width = 150;
 	const profilePicture = user.profilePicture;
-	console.log("profile :" + profilePicture);
 	return (
 		<Container>
 			<Row>
 				<Col>
 					<Stack>
-						<Image src={profilePicture} width={width} height={width} roundedCircle />
+						<div id="img">
+							<Image src={profilePicture} width={width} height={width} roundedCircle />
+						</div>
 						<Button variant="outline-primary" onClick={() => setModalShow(true)}>Changer photo de profil</Button>
 						<MyVerticallyCenteredModal
 							show={modalShow}
@@ -81,7 +77,6 @@ function ProfilSettings({ user }: { user: User }) {
 						<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.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)}>Mettre à jour</Button>
 					</Form>
@@ -114,13 +109,12 @@ function updateAccountPicture(lien: string) {
 function MyVerticallyCenteredModal(props: any) {
 	const urlRef = useRef<HTMLInputElement>(null);
 	const [invalidShow, setInvalidShow] = useState(false);
-
 	return (
 		<Modal
 			{...props}
 			size="lg"
 			aria-labelledby="title-modal"
-			centered
+			centered 
 		>
 			<Modal.Header>
 				<Modal.Title id="title-modal" >
@@ -141,7 +135,6 @@ function MyVerticallyCenteredModal(props: any) {
 
 async function handleNewImage(lien: string, invalidRef : React.Dispatch<React.SetStateAction<boolean>>) {
 	let exist = await testImage(lien);
-	console.log(exist);
 	if (exist) {
 		invalidRef(false);
 		updateAccountPicture(lien);
@@ -154,10 +147,8 @@ async function handleNewImage(lien: string, invalidRef : React.Dispatch<React.Se
 async function testImage(lien: string) {
 	try {
 		const response = await axios.head(lien);
-		console.log(response);
-		// Vérifier le statut de la réponse (200 OK est considéré comme valide)
+
 		if (response.status === 200) {
-			// Vérifier le type de contenu pour s'assurer qu'il s'agit d'une image
 			const contentType = response.headers['content-type'];
 			if (contentType && contentType.startsWith('image/')) {
 			    return true;
@@ -169,28 +160,4 @@ async function testImage(lien: string) {
 		console.error("Erreur lors de la requête HEAD: ", error);
 		return false;
 	}
-	// return true;
-}
-
-// async function testImage(imageUrl: string) {
-//   try {
-//     const response = await axios.head(`${BASE.PROXY}?url=${encodeURIComponent(imageUrl)}`);
-
-//     console.log(response);
-
-//     // Check the response status (200 OK is considered valid)
-//     if (response.status === 200) {
-//       // Check the content type to ensure it's an image
-//       const contentType = response.headers['content-type'];
-//       if (contentType && contentType.startsWith('image/')) {
-//         return true;
-//       }
-//       return false;
-//     }
-
-//     return false;
-//   } catch (error) {
-//     console.error("Error during HEAD request: ", error);
-//     return false;
-//   }
-// }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/front/views/component/Title.tsx b/front/views/component/Title.tsx
index 83eec34..fb7de9e 100644
--- a/front/views/component/Title.tsx
+++ b/front/views/component/Title.tsx
@@ -2,6 +2,7 @@
 
 export function MainTitle({title, id} : {title : string, id : string|null}) {
     let titre;
+    console.log(id);
     if (id==null){
         titre = <h3>{title}</h3>;
     }
diff --git a/front/views/template/Header.tsx b/front/views/template/Header.tsx
index 9912ee3..f23f66c 100644
--- a/front/views/template/Header.tsx
+++ b/front/views/template/Header.tsx
@@ -1,4 +1,5 @@
 import { BASE } from "../../Constants"
+import "../../style/component/header.css"
 
 /**
  *
@@ -35,5 +36,5 @@ export function Header({ username }: { username: string }) {
                 </div>
             </div>
         </div>
-    )
+    );
 }