diff --git a/front/style/component/main_title.css b/front/style/component/main_title.css
new file mode 100644
index 0000000..15cc69b
--- /dev/null
+++ b/front/style/component/main_title.css
@@ -0,0 +1,11 @@
+@import url(../theme/dark.css);
+
+.main-title h2 {
+    text-align: center;
+    /* font-weight: bold; */ 
+}
+
+.title {
+    color: var(--main-contrast-color);
+    font-family: var(--font-title);
+}
\ No newline at end of file
diff --git a/front/style/home/personnal_space.css b/front/style/home/personnal_space.css
index 83f2510..9d6c4fb 100644
--- a/front/style/home/personnal_space.css
+++ b/front/style/home/personnal_space.css
@@ -1,15 +1,10 @@
+@import url(../component/main_title.css);
+
 #personal-space {
     display: flex;
     flex-direction: column;
 }
 
-#title-personal-space h2 {
-    text-align: center;
-    color: var(--main-contrast-color);
-    /* font-family: Helvetica;
-    font-weight: bold; */
-}
-
 #body-personal-space {
     width: 95%;
     /* background-color: #ccc2b7; */
diff --git a/front/style/settings/settings.css b/front/style/settings/settings.css
index c3cfd47..228879b 100644
--- a/front/style/settings/settings.css
+++ b/front/style/settings/settings.css
@@ -1,5 +1,6 @@
 @import url(../template/header.css);
 @import url(../theme/dark.css);
+@import url(../component/main_title.css);
 
 #body {
     background-color: var(--second-color);
diff --git a/front/views/Home.tsx b/front/views/Home.tsx
index a9a4b0a..2f80322 100644
--- a/front/views/Home.tsx
+++ b/front/views/Home.tsx
@@ -3,6 +3,7 @@ import "../style/home/home.css"
 // import AccountSvg from "../assets/account.svg?react"
 import { Header } from "./template/Header"
 import { BASE } from "../Constants"
+import { MainTitle } from "./component/Title"
 
 interface Tactic {
     id: number
@@ -100,19 +101,13 @@ function PersonalSpace({
             style={{
                 width: width + "%",
             }}>
-            <TitlePersonalSpace />
+            <MainTitle title="Espace Personnel" id={null}/>
             <BodyPersonalSpace allTactics={allTactics} />
         </div>
     )
 }
 
-function TitlePersonalSpace() {
-    return (
-        <div id="title-personal-space">
-            <h2>Espace Personnel</h2>
-        </div>
-    )
-}
+
 
 function TableData({ allTactics }: { allTactics: Tactic[] }) {
     const nbRow = Math.floor(allTactics.length / 3) + 1
diff --git a/front/views/Settings.tsx b/front/views/Settings.tsx
index 05106f2..08a4fb9 100644
--- a/front/views/Settings.tsx
+++ b/front/views/Settings.tsx
@@ -1,4 +1,5 @@
 import "../style/settings/settings.css"
+import { MainTitle } from "./component/Title"
 import {Header} from './template/Header'
 
 export default function Settings({username} : {username : string}){
@@ -14,19 +15,13 @@ function Body() {
     return (
         <div id="body">
             <div id="content">
-                <Title/>
+                <MainTitle title="Paramètres" id={null}/>
                 <AccountSettings/>
             </div>
         </div>
     )
 }
 
-function Title() {
-    return (
-        <h1>Paramètres</h1>
-    )
-}
-
 function AccountSettings(){
     return (
         <div id="account">
diff --git a/front/views/component/Title.tsx b/front/views/component/Title.tsx
new file mode 100644
index 0000000..83eec34
--- /dev/null
+++ b/front/views/component/Title.tsx
@@ -0,0 +1,30 @@
+
+
+export function MainTitle({title, id} : {title : string, id : string|null}) {
+    let titre;
+    if (id==null){
+        titre = <h3>{title}</h3>;
+    }
+    else {
+        titre = <h3 id={id}>{title}</h3>;
+    }
+    return (
+        <div className="title main-title">
+            <h2>{title}</h2>
+        </div>
+    )
+}
+export function SecondTitle({title, id} : {title : string, id : string|null}) {
+    let titre;
+    if (id==null){
+        titre = <h3>{title}</h3>;
+    }
+    else {
+        titre = <h3 id={id}>{title}</h3>;
+    }
+    return (
+        <div className="title second-title">
+            {titre}
+        </div>
+    )
+}