diff --git a/frontend/src/cssstyle/documentation.css b/frontend/src/cssstyle/documentation.css
deleted file mode 100644
index 70e1259..0000000
--- a/frontend/src/cssstyle/documentation.css
+++ /dev/null
@@ -1,24 +0,0 @@
-h1 {
-    @apply self-center my-10 text-6xl font-bold;
-}
-
-h2 {
-    @apply text-lg font-semibold font-sans;
-}
-
-.DocTitle {
-    font-size: 2rem;
-    text-align: center;
-    color: #a30e79;
-}
-
-.SubTitle {
-    font-size: 1.5rem;
-    text-align: center;
-    color: #a30e79;
-    @apply py-6;
-}
-
-.DocContainer{
-    @apply flex  flex-col items-center justify-center max-w-screen-md px-5 pb-14  mx-auto;
-}
\ No newline at end of file
diff --git a/frontend/src/cssstyle/tosstyle.css b/frontend/src/cssstyle/tosstyle.css
deleted file mode 100644
index 37e579f..0000000
--- a/frontend/src/cssstyle/tosstyle.css
+++ /dev/null
@@ -1,41 +0,0 @@
-.h1-tos {
-   font-size: 3rem; 
-   font-weight: bold; 
-}
-
-
-.h2-tos {
-   font-size: 2rem;
-   font-weight: bold;
-   margin-top: 5px;
-   margin-bottom: 5px;
-}
-
-.p-tos {
-   font-size: 1.1rem;
-   margin-bottom: 15px;
-}
-
-.card-member {
-   margin: 10px;
-}
-
-.card-content {
-   margin: 10px;
-}
-
-.member-name {
-   font-size: 1.5rem;
-   font-weight: bold;
-}
-
-.member-title {
-   font-size: 1rem; 
-   margin-bottom: 15px;
-}
-
-.member-description {
-   hyphens: auto;
-   font-size: 0.8rem;
-   text-align: justify;
-}
\ No newline at end of file
diff --git a/frontend/src/router/router.js b/frontend/src/router/router.js
index 7c2053c..b4d87d6 100644
--- a/frontend/src/router/router.js
+++ b/frontend/src/router/router.js
@@ -5,7 +5,6 @@ import CreatorLayout from '@/views/creators/CreatorLayout.vue';
 import About from '@/views/documentation/About.vue';
 import ContentPolicy from '@/views/documentation/ContentPolicy.vue';
 import CreatorGuide from '@/views/documentation/CreatorGuide.vue';
-import DocumentationHome from '@/views/documentation/DocumentationHome.vue';
 import DocumentationLayout from '@/views/documentation/DocumentationLayout.vue';
 import FAQ from '@/views/documentation/FAQ.vue';
 import HelpAndContact from '@/views/documentation/HelpAndContact.vue';
@@ -43,11 +42,6 @@ const routes = [
     path: '/documents',
     component: DocumentationLayout,
     children: [
-      {
-        path: '',
-        component: DocumentationHome,
-        redirect: { name: 'about' }, // TODO remove this line when the page is ready
-      },
       {
         path: 'helpandcontact',
         name: 'helpandcontact',
diff --git a/frontend/src/views/creators/CreatorLayout.vue b/frontend/src/views/creators/CreatorLayout.vue
index a2ba926..7918af8 100644
--- a/frontend/src/views/creators/CreatorLayout.vue
+++ b/frontend/src/views/creators/CreatorLayout.vue
@@ -1,6 +1,6 @@
 <template>
 
-  <div class="flex flex-col min-h-screen max-w-[1100px] mx-auto">
+  <div class="flex flex-col min-h-screen max-w-[960px] mx-auto">
     <div v-if="brandingStore.loading">
       <v-progress-linear indeterminate></v-progress-linear>
     </div>
diff --git a/frontend/src/views/documentation/About.vue b/frontend/src/views/documentation/About.vue
index 7e30016..2e8f861 100644
--- a/frontend/src/views/documentation/About.vue
+++ b/frontend/src/views/documentation/About.vue
@@ -1,134 +1,159 @@
 <template>
-  <div>  
-    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">À propos</h1>
-  </div>
 
-  <div class="mx-auto max-w-[1000px] px-4">
-    <p class="text-justify p-tos">
-      Bienvenue sur la page "À Propos" d’Hutopy, où nous partageons notre histoire, notre mission,
-      notre vision, et vous présentons l'équipe passionnée qui rend tout cela possible. Hutopy
-      n'est pas seulement une plateforme ; c'est une communauté, un mouvement, un lieu où la
-      créativité rencontre la technologie pour créer des expériences inoubliables.
-    </p>
+  <h1>À propos</h1>
 
-    <h2 class="h2-tos">
-      Notre Histoire
-    </h2>
+  <p>
+    Bienvenue sur la page "À Propos" d’Hutopy, où nous partageons notre histoire, notre mission,
+    notre vision, et vous présentons l'équipe passionnée qui rend tout cela possible. Hutopy
+    n'est pas seulement une plateforme ; c'est une communauté, un mouvement, un lieu où la
+    créativité rencontre la technologie pour créer des expériences inoubliables.
+  </p>
 
-    <p class="text-justify p-tos">
-      Hutopy a été fondée en 2024, née de l'idée simple mais puissante que chaque créateur qu'il
-      soit grand ou petit, novice ou expérimenté, devrait avoir accès aux outils et au soutien
-      nécessaires pour partager sa passion avec le monde.
-    </p>
+  <h2>Notre Histoire</h2>
 
-    <h2 class="h2-tos">
-      Notre Mission
-    </h2>
+  <p>
+    Hutopy a été fondée en 2024, née de l'idée simple mais puissante que chaque créateur qu'il
+    soit grand ou petit, novice ou expérimenté, devrait avoir accès aux outils et au soutien
+    nécessaires pour partager sa passion avec le monde.
+  </p>
 
-    <p class="text-justify p-tos">
-      Notre mission est de démocratiser la création de contenu numérique, en offrant une
-      plateforme accessible, intuitive et puissante qui permet aux créateurs de tout horizon de
-      s'exprimer, d'innover et de connecter avec une audience mondiale. Nous nous engageons à
-      fournir les outils, les ressources et le soutien nécessaires pour que chaque voix puisse
-      être entendue.
+  <h2>Notre Mission</h2>
 
-    </p>
+  <p>
+    Notre mission est de démocratiser la création de contenu numérique, en offrant une
+    plateforme accessible, intuitive et puissante qui permet aux créateurs de tout horizon de
+    s'exprimer, d'innover et de connecter avec une audience mondiale. Nous nous engageons à
+    fournir les outils, les ressources et le soutien nécessaires pour que chaque voix puisse
+    être entendue.
+  </p>
 
-    <h2 class="h2-tos">
-      Notre Vision
-    </h2>
+  <h2>
+    Notre Vision
+  </h2>
 
-    <p class="text-justify p-tos">
-      Nous envisageons un monde où la barrière entre les créateurs et leur audience est réduite au
-      minimum, où les idées, l'expertise et les histoires peuvent circuler librement et sans
-      entrave. Hutopy aspire à être au cœur de cet écosystème créatif et professionnel, en étant
-      une source d'inspiration, une plateforme de lancement et un foyer pour tous.
-    </p>
+  <p>
+    Nous envisageons un monde où la barrière entre les créateurs et leur audience est réduite au
+    minimum, où les idées, l'expertise et les histoires peuvent circuler librement et sans
+    entrave. Hutopy aspire à être au cœur de cet écosystème créatif et professionnel, en étant
+    une source d'inspiration, une plateforme de lancement et un foyer pour tous.
+  </p>
 
-    <h2 class="h2-tos">
-      Notre Équipe
-    </h2>
+  <h2>
+    Notre Équipe
+  </h2>
 
-    <p class="text-justify p-tos">
-      Derrière Hutopy, il y a une équipe de penseurs innovants, de créatifs passionnés et de
-      technologues dévoués, tous unis par le désir de soutenir la communauté des créateurs de
-      contenu. Notre équipe est notre plus grande force, chaque membre apportant une expertise
-      unique et une perspective fraîche à notre mission commune.
-    </p>
+  <p>
+    Derrière Hutopy, il y a une équipe de penseurs innovants, de créatifs passionnés et de
+    technologues dévoués, tous unis par le désir de soutenir la communauté des créateurs de
+    contenu. Notre équipe est notre plus grande force, chaque membre apportant une expertise
+    unique et une perspective fraîche à notre mission commune.
+  </p>
 
-    <br>
-    <v-row justify="center">
-      <v-card max-width="250px" class="card-member" style="margin: 10px;">
-        <img class="member-profile-picture"
-             src="/images/hutopymedia/tospage/membersPictures/profileMarco.png"
-             alt="Marc-Olivier Hébert">
-        <div class="card-content">
-          <div class="member-name">Marc-Olivier</div>
-          <div class="member-name">Hébert</div>
-          <div class="member-title">Fondateur</div>
-          <p class="member-description">Avec une vision claire et un engagement sans faille, il a lancé Hutopy pour changer la manière dont le contenu est créé et partagé.</p>
-        </div>
-      </v-card>
+  <br>
+  <v-row justify="center">
+    <v-card max-width="250px" class="card-member" style="margin: 10px;">
+      <img class="member-profile-picture"
+           src="/images/hutopymedia/tospage/membersPictures/profileMarco.png"
+           alt="Marc-Olivier Hébert">
+      <div class="card-content">
+        <div class="member-name">Marc-Olivier</div>
+        <div class="member-name">Hébert</div>
+        <div class="member-title">Fondateur</div>
+        <p class="member-description">Avec une vision claire et un engagement sans faille, il a lancé Hutopy pour
+          changer la manière dont le contenu est créé et partagé.</p>
+      </div>
+    </v-card>
 
-      <v-card max-width="250px" class="card-member" style="margin: 10px;">
-        <img class="member-profile-picture"
-             src="/images/hutopymedia/tospage/membersPictures/profileDominique.png"
-             alt="Dominic Villemure">
-        <div class="card-content">
-          <div class="member-name">Dominic</div>
-          <div class="member-name">Villemure</div>
-          <div class="member-title">Responsable Technique</div>
-          <p class="member-description">À la tête de notre équipe de développement, il assure qu’Hutopy reste à la pointe de la technologie.</p>
-        </div>
-      </v-card>
+    <v-card max-width="250px" class="card-member" style="margin: 10px;">
+      <img class="member-profile-picture"
+           src="/images/hutopymedia/tospage/membersPictures/profileDominique.png"
+           alt="Dominic Villemure">
+      <div class="card-content">
+        <div class="member-name">Dominic</div>
+        <div class="member-name">Villemure</div>
+        <div class="member-title">Responsable Technique</div>
+        <p class="member-description">À la tête de notre équipe de développement, il assure qu’Hutopy reste à la
+          pointe de la technologie.</p>
+      </div>
+    </v-card>
 
-      <v-card max-width="250px" class="card-member" style="margin: 10px;">
-        <img class="member-profile-picture"
-             src="/images/hutopymedia/tospage/membersPictures/profilePascal.png"
-             alt="Pascal Marchesseault">
-        <div class="card-content">
-          <div class="member-name">Pascal</div>
-          <div class="member-name">Marchesseault</div>
-          <div class="member-title">Gestionnaire de projet / UI</div>
-          <p class="member-description">A pour mission d'assurer le développement du projet tout en créant une interface qui permettra au projet d'avoir une interaction positive et enrichissante avec Hutopy pour les utilisateurs.</p>
-        </div>
-      </v-card>
+    <v-card max-width="250px" class="card-member" style="margin: 10px;">
+      <img class="member-profile-picture"
+           src="/images/hutopymedia/tospage/membersPictures/profilePascal.png"
+           alt="Pascal Marchesseault">
+      <div class="card-content">
+        <div class="member-name">Pascal</div>
+        <div class="member-name">Marchesseault</div>
+        <div class="member-title">Gestionnaire de projet / UI</div>
+        <p class="member-description">A pour mission d'assurer le développement du projet tout en créant une interface
+          qui permettra au projet d'avoir une interaction positive et enrichissante avec Hutopy pour les
+          utilisateurs.</p>
+      </div>
+    </v-card>
 
-      <v-card max-width="250px" class="card-member" style="margin: 10px;">
-        <img class="member-profile-picture"
-             src="/images/hutopymedia/tospage/membersPictures/profileChloe.png"
-             alt="Chloé Beaugrand">
-        <div class="card-content">
-          <div class="member-name">Chloé</div>
-          <div class="member-name">Beaugrand</div>
-          <div class="member-title">Responsable Marketing</div>
-          <p class="member-description">Elle façonne l'image d’Hutopy et engage notre communauté à travers des campagnes innovantes et impactantes.</p>
-        </div>
-      </v-card>
+    <v-card max-width="250px" class="card-member" style="margin: 10px;">
+      <img class="member-profile-picture"
+           src="/images/hutopymedia/tospage/membersPictures/profileChloe.png"
+           alt="Chloé Beaugrand">
+      <div class="card-content">
+        <div class="member-name">Chloé</div>
+        <div class="member-name">Beaugrand</div>
+        <div class="member-title">Responsable Marketing</div>
+        <p class="member-description">Elle façonne l'image d’Hutopy et engage notre communauté à travers des campagnes
+          innovantes et impactantes.</p>
+      </div>
+    </v-card>
 
-      <v-card max-width="250px" class="card-member" style="margin: 10px;">
-        <img class="member-profile-picture"
-             src="/images/hutopymedia/tospage/membersPictures/Jonathan.png"
-             alt="Édouard Letarte">
-        <div class="card-content">
-          <div class="member-name">Jonathan</div>
-          <div class="member-name">Bourdon</div>
-          <div class="member-title">Programeur / Architecte</div>
-          <p class="member-description">Son expérience d'architecte senior nous permet de développer un logiciel avec une durabilité qui nous permettra de nous développer pendant de longues années.</p>
-        </div>
-      </v-card>
-    </v-row>
+    <v-card max-width="250px" class="card-member" style="margin: 10px;">
+      <img class="member-profile-picture"
+           src="/images/hutopymedia/tospage/membersPictures/Jonathan.png"
+           alt="Édouard Letarte">
+      <div class="card-content">
+        <div class="member-name">Jonathan</div>
+        <div class="member-name">Bourdon</div>
+        <div class="member-title">Programeur / Architecte</div>
+        <p class="member-description">Son expérience d'architecte senior nous permet de développer un logiciel avec
+          une durabilité qui nous permettra de nous développer pendant de longues années.</p>
+      </div>
+    </v-card>
+  </v-row>
 
+  <p>
+    Chez Hutopy, nous sommes plus qu'une plateforme ; nous sommes une famille dédiée à la
+    réussite de nos créateurs. Nous vous invitons à nous joindre dans cette aventure
+    passionnante, à partager votre créativité et votre expertise avec le monde et à faire
+    d’Hutopy votre utopie. Merci de faire partie de notre histoire.
+  </p>
 
-    <p class="text-justify py-6 p-tos">
-      Chez Hutopy, nous sommes plus qu'une plateforme ; nous sommes une famille dédiée à la
-      réussite de nos créateurs. Nous vous invitons à nous joindre dans cette aventure
-      passionnante, à partager votre créativité et votre expertise avec le monde et à faire
-      d’Hutopy votre utopie. Merci de faire partie de notre histoire.
-    </p>
-  </div>
 </template>
 
-<style>
-@import '@/cssstyle/tosstyle.css';
-</style>
\ No newline at end of file
+<style scoped>
+@import '@/views/documentation/documentation.css';
+
+.card-member {
+  margin: 10px;
+}
+
+.card-content {
+  margin: 10px;
+}
+
+.member-name {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.member-title {
+  font-size: 1rem;
+  margin-bottom: 15px;
+}
+
+.member-description {
+  hyphens: auto;
+  font-size: 0.8rem;
+  text-align: justify;
+}
+
+</style>
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/frontend/src/views/documentation/ContentPolicy.vue b/frontend/src/views/documentation/ContentPolicy.vue
index 0cf36c6..5fe7874 100644
--- a/frontend/src/views/documentation/ContentPolicy.vue
+++ b/frontend/src/views/documentation/ContentPolicy.vue
@@ -1,131 +1,189 @@
 <template>
-  <div>
-    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">Politique de Contenu</h1>
-  </div>
 
-  <div class="mx-auto max-w-[1000px] px-4">
-    <h2 class="h2-tos">Introduction</h2>
-    <p class="text-justify p-tos">
-      Hutopy vise à offrir une plateforme sécurisée, inclusive et respectueuse où les créateurs peuvent partager leur travail et interagir avec une communauté engagée. Pour maintenir cet environnement, nous avons établi des lignes directrices claires concernant le type de contenu autorisé sur notre plateforme. En utilisant Hutopy, vous acceptez de respecter cette politique de contenu.
+  <div>
+    <h1>Politique de Contenu</h1>
+
+    <h2>Introduction</h2>
+    <p>
+      Hutopy vise à offrir une plateforme sécurisée, inclusive et respectueuse où les créateurs peuvent partager leur
+      travail et interagir avec une communauté engagée. Pour maintenir cet environnement, nous avons établi des lignes
+      directrices claires concernant le type de contenu autorisé sur notre plateforme. En utilisant Hutopy, vous
+      acceptez
+      de respecter cette politique de contenu.
     </p>
 
-    <h2 class="h2-tos">Contenu Autorisé</h2>
-    <ul class="list-disc pl-5">
-      <li class="text-justify p-tos">
+    <h2>Contenu Autorisé</h2>
+
+    <ul>
+      <li>
         Hutopy encourage la publication de contenu créatif, éducatif et inspirant dans divers formats, y compris :
       </li>
-      <li class="text-justify p-tos">Arts visuels et design : Illustrations, photographies, designs graphiques respectant le droit d'auteur.</li>
-      <li class="text-justify p-tos">Éducation et apprentissage : Tutoriels, cours en ligne, webinaires qui favorisent l'apprentissage et le développement personnel.</li>
-      <li class="text-justify p-tos">Contenu écrit : Articles, blogs, poésies qui enrichissent les discussions et partagent des connaissances.</li>
-      <li class="text-justify p-tos">Multimédia : Vidéos, podcasts et musique originales qui respectent les droits d'auteur et encouragent l'expression créative.</li>
-    </ul>
-
-    <h2 class="h2-tos">Contenu Interdit</h2>
-    <ul class="list-disc pl-5">
-      <li class="text-justify p-tos">
-        Pour protéger notre communauté, certains types de contenu ne sont pas autorisés sur Hutopy, incluant mais non limité à :
+      <li>Arts visuels et design : Illustrations, photographies, designs graphiques respectant le droit d'auteur.</li>
+      <li>Éducation et apprentissage : Tutoriels, cours en ligne, webinaires qui favorisent l'apprentissage et le
+        développement personnel.
+      </li>
+      <li>Contenu écrit : Articles, blogs, poésies qui enrichissent les discussions et partagent des connaissances.</li>
+      <li>Multimédia : Vidéos, podcasts et musique originales qui respectent les droits d'auteur et encouragent
+        l'expression créative.
       </li>
-      <li class="text-justify p-tos">Contenu illégal : Tout contenu promouvant des activités illégales ou fournissant des instructions pour commettre des actes illégaux.</li>
-      <li class="text-justify p-tos">Harcèlement et discours de haine : Contenu visant à harceler, menacer, ou promouvoir la haine contre des individus ou des groupes basés sur la race, l'ethnie, la religion, le genre, l'orientation sexuelle, l'identité de genre ou tout autre caractère distinctif.</li>
-      <li class="text-justify p-tos">Contenu pour adultes : Matériel pornographique ou explicitement sexuel.</li>
-      <li class="text-justify p-tos">Violence et contenu graphique : Images ou descriptions de violence excessive, gore ou choquantes.</li>
-      <li class="text-justify p-tos">Publicité mensongère et spam : Contenu trompeur, frauduleux ou spammy.</li>
     </ul>
 
-    <h2 class="h2-tos">Droits d'Auteur et Propriété Intellectuelle</h2>
-    <p class="text-justify p-tos">
-      Respect des Droits : Vous devez posséder les droits sur le contenu que vous publiez sur Hutopy ou avoir l'autorisation expresse du détenteur des droits pour utiliser ce contenu.
+    <h2>Contenu Interdit</h2>
+    <ul>
+      <li>
+        Pour protéger notre communauté, certains types de contenu ne sont pas autorisés sur Hutopy, incluant mais non
+        limité à :
+      </li>
+      <li>Contenu illégal : Tout contenu promouvant des activités illégales ou fournissant des instructions pour
+        commettre
+        des actes illégaux.
+      </li>
+      <li>Harcèlement et discours de haine : Contenu visant à harceler, menacer, ou promouvoir la haine contre des
+        individus ou des groupes basés sur la race, l'ethnie, la religion, le genre, l'orientation sexuelle, l'identité
+        de
+        genre ou tout autre caractère distinctif.
+      </li>
+      <li>Contenu pour adultes : Matériel pornographique ou explicitement sexuel.</li>
+      <li>Violence et contenu graphique : Images ou descriptions de violence excessive, gore ou choquantes.</li>
+      <li>Publicité mensongère et spam : Contenu trompeur, frauduleux ou spammy.</li>
+    </ul>
+
+    <h2>Droits d'Auteur et Propriété Intellectuelle</h2>
+    <p>
+      Respect des Droits : Vous devez posséder les droits sur le contenu que vous publiez sur Hutopy ou avoir
+      l'autorisation expresse du détenteur des droits pour utiliser ce contenu.
     </p>
-    <p class="text-justify p-tos">
-      Attribution : Lorsque vous utilisez ou adaptez le contenu protégé par des droits d'auteur appartenant à autrui, une attribution claire et correcte doit être fournie.
+    <p>
+      Attribution : Lorsque vous utilisez ou adaptez le contenu protégé par des droits d'auteur appartenant à autrui,
+      une
+      attribution claire et correcte doit être fournie.
     </p>
 
-    <h2 class="h2-tos">Modération et Signalement</h2>
-    <p class="text-justify p-tos">
-      Modération : Hutopy utilise à la fois des modérateurs humains et des outils automatisés pour surveiller et évaluer le contenu publié, garantissant le respect de cette politique.
+    <h2>Modération et Signalement</h2>
+    <p>
+      Modération : Hutopy utilise à la fois des modérateurs humains et des outils automatisés pour surveiller et évaluer
+      le contenu publié, garantissant le respect de cette politique.
     </p>
-    <p class="text-justify p-tos">
-      Signalement : Les utilisateurs de Hutopy sont encouragés à signaler tout contenu qu'ils considèrent comme enfreignant notre politique de contenu via les outils de signalement disponibles sur la plateforme.
+    <p>
+      Signalement : Les utilisateurs de Hutopy sont encouragés à signaler tout contenu qu'ils considèrent comme
+      enfreignant notre politique de contenu via les outils de signalement disponibles sur la plateforme.
     </p>
 
-    <h2 class="h2-tos">Conséquences des Violations</h2>
-    <p class="text-justify p-tos">
-      La violation de notre politique de contenu peut entraîner des actions allant de l'avertissement à la suppression du contenu ou à la suspension, voire à la résiliation du compte utilisateur.
+    <h2>Conséquences des Violations</h2>
+    <p>
+      La violation de notre politique de contenu peut entraîner des actions allant de l'avertissement à la suppression
+      du
+      contenu ou à la suspension, voire à la résiliation du compte utilisateur.
     </p>
 
-    <h2 class="h2-tos">Révisions de la Politique</h2>
-    <p class="text-justify p-tos">
-      Hutopy se réserve le droit de modifier cette politique de contenu à tout moment pour refléter les changements dans nos pratiques ou pour se conformer à de nouvelles réglementations légales.
+    <h2>Révisions de la Politique</h2>
+    <p>
+      Hutopy se réserve le droit de modifier cette politique de contenu à tout moment pour refléter les changements dans
+      nos pratiques ou pour se conformer à de nouvelles réglementations légales.
     </p>
 
-    <h2 class="h2-tos">Dans le cas d’une non conformité aux politiques de contenus :</h2>
-    <p class="text-justify p-tos">
-      1. Suspension des Fonds : Les montants accumulés sur le compte de l'utilisateur en question seront suspendus temporairement le temps de l'évaluation.
+    <h2>Dans le cas d’une non conformité aux politiques de contenus :</h2>
+    <p>
+      1. Suspension des Fonds : Les montants accumulés sur le compte de l'utilisateur en question seront suspendus
+      temporairement le temps de l'évaluation.
     </p>
-    <p class="text-justify p-tos">
-      2. Redistribution à des Œuvres de Charité : Si, après évaluation, le contenu est définitivement jugé non conforme à nos clauses de conformité, les fonds suspendus seront redistribués à des œuvres de charité choisies par Hutopy. L'utilisateur concerné sera informé de cette décision et des raisons de la non-conformité de son contenu.
+    <p>
+      2. Redistribution à des Œuvres de Charité : Si, après évaluation, le contenu est définitivement jugé non conforme
+      à
+      nos clauses de conformité, les fonds suspendus seront redistribués à des œuvres de charité choisies par Hutopy.
+      L'utilisateur concerné sera informé de cette décision et des raisons de la non-conformité de son contenu.
     </p>
-    <p class="text-justify p-tos">
-      Cette mesure vise à renforcer la responsabilité des créateurs quant au type de contenu partagé sur Hutopy, tout en soutenant des causes bénéfiques en cas de violation de nos directives.
+    <p>
+      Cette mesure vise à renforcer la responsabilité des créateurs quant au type de contenu partagé sur Hutopy, tout en
+      soutenant des causes bénéfiques en cas de violation de nos directives.
     </p>
 
-    <h2 class="h2-tos">Section Anti-Exploitation d’Hutopy</h2>
-    <h2 class="h2-tos" style="margin-top: 25px; margin-bottom: 25px; font-weight: 600; font-size: 1.3rem;">Engagement d’Hutopy</h2>
-    <p class="text-justify p-tos">
-      Hutopy s'engage fermement à maintenir une plateforme sûre et respectueuse pour tous ses utilisateurs. Nous prenons une position intransigeante contre toute forme d'exploitation humaine et nous travaillons activement pour prévenir, identifier et combattre les comportements et contenus exploitants. Notre mission est de créer un environnement où la créativité et l'expression personnelle peuvent s'épanouir sans crainte d'exploitation ou d'abus.
+    <h2>Section Anti-Exploitation d’Hutopy</h2>
+    <h2>Engagement d’Hutopy</h2>
+    <p>
+      Hutopy s'engage fermement à maintenir une plateforme sûre et respectueuse pour tous ses utilisateurs. Nous prenons
+      une position intransigeante contre toute forme d'exploitation humaine et nous travaillons activement pour
+      prévenir,
+      identifier et combattre les comportements et contenus exploitants. Notre mission est de créer un environnement où
+      la
+      créativité et l'expression personnelle peuvent s'épanouir sans crainte d'exploitation ou d'abus.
     </p>
 
-    <h2 class="h2-tos">Politique de Tolérance Zéro</h2>
-    <p class="text-justify p-tos">
+    <h2>Politique de Tolérance Zéro</h2>
+    <p>
       Nous appliquons une politique de tolérance zéro à l'égard de :
     </p>
-    <ul class="list-disc pl-5">
-      <li class="text-justify p-tos">Exploitation sexuelle : Cela inclut, mais n'est pas limité à, la pornographie infantile, le trafic sexuel, et le harcèlement sexuel.</li>
-      <li class="text-justify p-tos">Travail forcé : Nous nous opposons à toute forme de travail forcé ou de servitude, y compris le travail des enfants.</li>
-      <li class="text-justify p-tos">Exploitation financière : Cela comprend les arnaques, la fraude et tout autre type d'exploitation financière.</li>
+    <ul>
+      <li>Exploitation sexuelle : Cela inclut, mais n'est pas limité à, la pornographie infantile, le trafic sexuel, et
+        le
+        harcèlement sexuel.
+      </li>
+      <li>Travail forcé : Nous nous opposons à toute forme de travail forcé ou de servitude, y compris le travail des
+        enfants.
+      </li>
+      <li>Exploitation financière : Cela comprend les arnaques, la fraude et tout autre type d'exploitation financière.
+      </li>
     </ul>
 
-    <h2 class="h2-tos">Politique de Tolérance Zéro et Signalement/Actions</h2>
-    <ul class="list-disc pl-5">
-      <li class="text-justify p-tos">Mécanismes de Signalement : Hutopy fournit des outils faciles à utiliser pour signaler rapidement tout contenu ou comportement suspect d'exploitation. Nous encourageons vivement les utilisateurs à utiliser ces outils s'ils rencontrent ou soupçonnent des cas d'exploitation.</li>
-      <li class="text-justify p-tos">Réponse Rapide : Notre équipe dédiée examine tous les signalements avec la plus grande attention et prend des mesures immédiates pour adresser les problèmes signalés. Cela peut inclure la suppression de contenu, la suspension de comptes, et, si nécessaire, le signalement aux autorités compétentes.</li>
+    <h2>Politique de Tolérance Zéro et Signalement/Actions</h2>
+    <ul>
+      <li>Mécanismes de Signalement : Hutopy fournit des outils faciles à utiliser pour signaler rapidement tout contenu
+        ou comportement suspect d'exploitation. Nous encourageons vivement les utilisateurs à utiliser ces outils s'ils
+        rencontrent ou soupçonnent des cas d'exploitation.
+      </li>
+      <li>Réponse Rapide : Notre équipe dédiée examine tous les signalements avec la plus grande attention et prend des
+        mesures immédiates pour adresser les problèmes signalés. Cela peut inclure la suppression de contenu, la
+        suspension de comptes, et, si nécessaire, le signalement aux autorités compétentes.
+      </li>
     </ul>
 
-    <h2 class="h2-tos">Collaboration avec les Autorités</h2>
-    <p class="text-justify p-tos">
-      Nous collaborons étroitement avec les autorités et les organisations spécialisées pour combattre l'exploitation sous toutes ses formes. Hutopy est déterminé à respecter toutes les lois applicables et à coopérer avec les autorités dans leurs efforts de lutte contre l'exploitation et l'abus.
+    <h2>Collaboration avec les Autorités</h2>
+    <p>
+      Nous collaborons étroitement avec les autorités et les organisations spécialisées pour combattre l'exploitation
+      sous
+      toutes ses formes. Hutopy est déterminé à respecter toutes les lois applicables et à coopérer avec les autorités
+      dans leurs efforts de lutte contre l'exploitation et l'abus.
     </p>
 
-    <h2 class="h2-tos">Engagements des Utilisateurs</h2>
-    <p class="text-justify p-tos">
-      En rejoignant Hutopy, les utilisateurs s'engagent à respecter nos principes anti-exploitation et à contribuer à la création d'un espace sûr pour tous. Tout manquement à ces engagements entraînera des conséquences sérieuses, conformément à notre politique de tolérance zéro.
+    <h2>Engagements des Utilisateurs</h2>
+    <p>
+      En rejoignant Hutopy, les utilisateurs s'engagent à respecter nos principes anti-exploitation et à contribuer à la
+      création d'un espace sûr pour tous. Tout manquement à ces engagements entraînera des conséquences sérieuses,
+      conformément à notre politique de tolérance zéro.
     </p>
 
-    <h2 class="h2-tos">Modération et Signalement</h2>
-    <ul class="list-disc pl-5">
-      <li class="text-justify p-tos">Modération : Hutopy utilise à la fois des modérateurs humains et des outils automatisés pour surveiller et évaluer le contenu publié, garantissant le respect de cette politique.</li>
-      <li class="text-justify p-tos">Signalement : Les utilisateurs d’Hutopy sont encouragés à signaler tout contenu qu'ils considèrent comme enfreignant notre politique de contenu via les outils de signalement disponibles sur la plateforme.</li>
+    <h2>Modération et Signalement</h2>
+    <ul>
+      <li>Modération : Hutopy utilise à la fois des modérateurs humains et des outils automatisés pour surveiller et
+        évaluer le contenu publié, garantissant le respect de cette politique.
+      </li>
+      <li>Signalement : Les utilisateurs d’Hutopy sont encouragés à signaler tout contenu qu'ils considèrent comme
+        enfreignant notre politique de contenu via les outils de signalement disponibles sur la plateforme.
+      </li>
     </ul>
 
-    <h2 class="h2-tos">Conséquences des Violations</h2>
-    <p class="text-justify p-tos">
-      La violation de notre politique de contenu peut entraîner des actions allant de l'avertissement à la suppression du contenu ou à la suspension, voire à la résiliation du compte utilisateur.
+    <h2>Conséquences des Violations</h2>
+    <p>
+      La violation de notre politique de contenu peut entraîner des actions allant de l'avertissement à la suppression
+      du
+      contenu ou à la suspension, voire à la résiliation du compte utilisateur.
     </p>
 
-    <h2 class="h2-tos">Révisions de la Politique</h2>
-    <p class="text-justify p-tos">
-      Hutopy se réserve le droit de modifier cette politique de contenu à tout moment pour refléter les changements dans nos pratiques ou pour se conformer à de nouvelles réglementations légales.
+    <h2>Révisions de la Politique</h2>
+    <p>
+      Hutopy se réserve le droit de modifier cette politique de contenu à tout moment pour refléter les changements dans
+      nos pratiques ou pour se conformer à de nouvelles réglementations légales.
     </p>
 
-    <h2 class="h2-tos">Contact</h2>
-    <p class="text-justify p-tos">
-      Si vous avez des questions sur cette politique de contenu ou sur la manière dont nous l'appliquons, veuillez contacter notre équipe d'assistance à <a href="mailto:support@hutopy.com">support@hutopy.com</a>.
+    <h2>Contact</h2>
+    <p>
+      Si vous avez des questions sur cette politique de contenu ou sur la manière dont nous l'appliquons, veuillez
+      contacter notre équipe d'assistance à <a href="mailto:support@hutopy.com">support@hutopy.com</a>.
     </p>
   </div>
+
 </template>
 
-<style>
-@import '@/cssstyle/tosstyle.css';
-</style>
-<script setup lang="ts">
-</script>
\ No newline at end of file
+<style scoped>
+@import '@/views/documentation/documentation.css';
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/documentation/CreatorGuide.vue b/frontend/src/views/documentation/CreatorGuide.vue
index af737c6..77113ff 100644
--- a/frontend/src/views/documentation/CreatorGuide.vue
+++ b/frontend/src/views/documentation/CreatorGuide.vue
@@ -1,46 +1,66 @@
 <template>
-  <div>
-    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">Guide pour les Créateurs</h1>
-  </div>
 
-  <div class="mx-auto max-w-[1000px] px-4">
-    <h2 class="h2-tos">Bienvenue dans la Communauté de Créateurs d’Hutopy</h2>
-    <p class="text-justify p-tos">
-      Félicitations pour avoir choisi Hutopy pour partager votre créativité et votre savoir ! Ce guide est conçu pour vous aider à maximiser votre présence sur la plateforme, à engager votre audience et à tirer le meilleur parti des outils à votre disposition.
-    </p>
+  <h1>Guide pour les Créateurs</h1>
 
-    <h2 class="h2-tos">1. Création de Votre Profil de Créateur :</h2>
-    <ul class="list-disc pl-5">
-      <li class="text-justify p-tos">Personnalisez Votre Profil : Ajoutez une photo de profil, une bannière et une bio qui reflète votre personnalité et votre marque de créateur.</li>
-      <li class="text-justify p-tos">Liens et Contacts : Intégrez des liens vers vos autres plateformes sociales.</li>
-    </ul>
+  <h2>Bienvenue dans la Communauté de Créateurs d’Hutopy</h2>
 
-    <h2 class="h2-tos">2. Publication de Contenu :</h2>
-    <ul class="list-disc pl-5">
-      <li class="text-justify p-tos">Diversifiez Votre Contenu : Explorez différents formats – vidéos, articles, podcasts – pour captiver divers segments d'audience.</li>
-      <li class="text-justify p-tos">Planification et Consistance : Publiez régulièrement pour garder votre audience engagée. Utilisez l'outil de planification d’Hutopy pour organiser vos publications à l'avance.</li>
-    </ul>
+  <p>
+    Félicitations pour avoir choisi Hutopy pour partager votre créativité et votre savoir ! Ce guide est conçu pour vous
+    aider à maximiser votre présence sur la plateforme, à engager votre audience et à tirer le meilleur parti des outils
+    à votre disposition.
+  </p>
 
-    <h2 class="h2-tos">3. Engagement avec Votre Audience :</h2>
-    <ul class="list-disc pl-5">
-      <li class="text-justify p-tos">Interagissez : Répondez aux commentaires, participez à des discussions et créez des sondages pour encourager l'interaction.</li>
-      <li class="text-justify p-tos">Analysez Vos Performances : Utilisez les outils d'analyse d’Hutopy pour comprendre ce qui résonne avec votre audience et ajustez votre stratégie en conséquence.</li>
-    </ul>
+  <h2>Création de Votre Profil de Créateur</h2>
 
-    <h2 class="h2-tos">4. Monétisation :</h2>
-    <ul class="list-disc pl-5">
-      <li class="text-justify p-tos">Explorez les Options : Hutopy offre plusieurs voies de monétisation, y compris les abonnements payants, les dons et le programme d'ambassadeur. Choisissez ce qui convient le mieux à votre contenu et à votre audience.</li>
-    </ul>
+  <p>
+    Personnalisez Votre Profil : Ajoutez une photo de profil, une bannière et une bio qui reflète votre personnalité et
+    votre marque de créateur.
+  </p>
+  <p>
+    Liens et Contacts : Intégrez des liens vers vos autres plateformes sociales.
+  </p>
+
+  <h2>2. Publication de Contenu</h2>
+
+  <p>
+    Diversifiez Votre Contenu : Explorez différents formats – vidéos, articles,
+    podcasts – pour captiver divers segments d'audience.
+  </p>
+  <p>
+    Planification et Consistance : Publiez régulièrement pour garder votre audience
+    engagée. Utilisez l'outil de planification d’Hutopy pour organiser vos publications à l'avance.
+  </p>
+
+  <h2>3. Engagement avec Votre Audience</h2>
+
+  <p>
+    Interagissez : Répondez aux commentaires, participez à des discussions et créez
+    des sondages pour encourager l'interaction.
+  </p>
+  <p>
+    Analysez Vos Performances : Utilisez les outils d'analyse d’Hutopy pour
+    comprendre ce qui résonne avec votre audience et ajustez votre stratégie en conséquence.
+  </p>
+
+  <h2>4. Monétisation</h2>
+
+  <p>
+    Explorez les Options : Hutopy offre plusieurs voies de monétisation, y compris
+    les abonnements payants, les dons et le programme d'ambassadeur. Choisissez ce qui convient le mieux à votre
+    contenu et à votre audience.
+  </p>
+
+  <h2>5. Croissance et Développement</h2>
+
+  <p>
+    Continuez à Apprendre : Utilisez le Centre de Ressources Éducatives d’Hutopy pour
+    améliorer vos compétences et rester à jour sur les tendances du secteur. (À venir)
+  </p>
 
-    <h2 class="h2-tos">5. Croissance et Développement :</h2>
-    <ul class="list-disc pl-5">
-      <li class="text-justify p-tos">Continuez à Apprendre : Utilisez le Centre de Ressources Éducatives d’Hutopy pour améliorer vos compétences et rester à jour sur les tendances du secteur. (À venir)</li>
-    </ul>
-  </div>
 </template>
 
-<style>
-@import '@/cssstyle/tosstyle.css';
+<style scoped>
+@import '@/views/documentation/documentation.css';
 </style>
 <script setup lang="ts">
 </script>
\ No newline at end of file
diff --git a/frontend/src/views/documentation/DocumentationHome.vue b/frontend/src/views/documentation/DocumentationHome.vue
deleted file mode 100644
index 8a8edb9..0000000
--- a/frontend/src/views/documentation/DocumentationHome.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<script setup>
-</script>
-
-<template>
-</template>
-
-<style scoped>
-</style>
\ No newline at end of file
diff --git a/frontend/src/views/documentation/DocumentationLayout.vue b/frontend/src/views/documentation/DocumentationLayout.vue
index b517e93..b5676c3 100644
--- a/frontend/src/views/documentation/DocumentationLayout.vue
+++ b/frontend/src/views/documentation/DocumentationLayout.vue
@@ -3,21 +3,19 @@ import Footer from "@/views/main/Footer.vue";
 </script>
 
 <template>
-  
-  <div class="flex justify-center">
+
+  <div class="flex flex-col min-h-screen max-w-[960px] mx-auto">
+
     <img src="/images/hutopymedia/banners/hutopyul.png"
-         class="max-w-[1000px] rounded-2xl shadow" alt="">
+         class="rounded-2xl"
+         alt="logo hutopy">
+
+    <div class="p-4">
+      <router-view></router-view>
+    </div>
+
+    <Footer></Footer>
+
   </div>
 
-  <div class="py-8 flex-grow">
-    <router-view></router-view>
-  </div>
-
-  <Footer></Footer>
-
-
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/frontend/src/views/documentation/FAQ.vue b/frontend/src/views/documentation/FAQ.vue
index 2dd455f..22d6376 100644
--- a/frontend/src/views/documentation/FAQ.vue
+++ b/frontend/src/views/documentation/FAQ.vue
@@ -1,113 +1,117 @@
 <template>
-  <div>
-    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">FAQ</h1>
-  </div>
 
-  <div class="mx-auto max-w-[1000px] px-4">
+  <h1>FAQ</h1>
 
-    <h2 class="h2-tos">Foire Aux Questions</h2>
-    <p class="text-justify p-tos">
-      La section FAQ de Hutopy est votre ressource essentielle pour trouver des réponses rapides aux questions les plus
-      fréquemment posées sur notre plateforme. Explorez nos réponses détaillées pour optimiser votre utilisation de
-      Hutopy et résoudre vos problèmes en un instant. Consultez régulièrement notre FAQ pour rester informé des
-      dernières fonctionnalités.
-    </p>
+  <h2>Foire Aux Questions</h2>
 
-    <h2 class="h2-tos">1. Comment puis-je créer un compte sur Hutopy ?</h2>
-    <p class="text-justify p-tos">
-      Créer un compte est simple ! Visitez notre page d'inscription, remplissez les informations requises, et suivez les
-      instructions pour confirmer votre adresse e-mail ou vous connecter via les partenaires de connexion. Vous pourrez
-      commencer à explorer et à interagir avec la communauté Hutopy immédiatement après.
-    </p>
+  <p>
+    La section FAQ de Hutopy est votre ressource essentielle pour trouver des réponses rapides aux questions les plus
+    fréquemment posées sur notre plateforme. Explorez nos réponses détaillées pour optimiser votre utilisation de
+    Hutopy et résoudre vos problèmes en un instant. Consultez régulièrement notre FAQ pour rester informé des
+    dernières fonctionnalités.
+  </p>
 
-    <h2 class="h2-tos">2. Quels types de contenu puis-je publier sur Hutopy ?</h2>
-    <p class="text-justify p-tos">
-      Hutopy accueille une large variété de contenus créatifs, incluant mais non limité à des vidéos, articles,
-      podcasts, et illustrations. Nous encourageons la diversité et l'originalité, tant que le contenu respecte nos
-      valeurs.
-    </p>
+  <h2>1. Comment puis-je créer un compte sur Hutopy ?</h2>
 
-    <h2 class="h2-tos">3. Comment Hutopy rémunère-t-il les créateurs de contenu ?</h2>
-    <p class="text-justify p-tos">
-      Les créateurs peuvent monétiser leur contenu de plusieurs façons, notamment via des abonnements payants et des
-      dons de la part des utilisateurs.
-    </p>
+  <p>
+    Créer un compte est simple ! Visitez notre page d'inscription, remplissez les informations requises, et suivez les
+    instructions pour confirmer votre adresse e-mail ou vous connecter via les partenaires de connexion. Vous pourrez
+    commencer à explorer et à interagir avec la communauté Hutopy immédiatement après.
+  </p>
 
-    <h2 class="h2-tos">4. Comment puis-je modifier mon profil ?</h2>
-    <p class="text-justify p-tos">
-      Connectez-vous à votre compte, accédez à votre profil, puis cliquez sur "Éditer le profil" pour modifier vos
-      informations, ajouter une bio, changer votre photo de profil, et plus encore.
-    </p>
+  <h2>2. Quels types de contenu puis-je publier sur Hutopy ?</h2>
 
-    <h2 class="h2-tos">5. Est-il possible de supprimer mon compte ?</h2>
-    <p class="text-justify p-tos">
-      Oui, vous pouvez faire la suppression de votre compte sur votre profil dans la section plus. Notez que cette
-      action est irréversible.
-    </p>
+  <p>
+    Hutopy accueille une large variété de contenus créatifs, incluant mais non limité à des vidéos, articles,
+    podcasts, et illustrations. Nous encourageons la diversité et l'originalité, tant que le contenu respecte nos
+    valeurs.
+  </p>
 
-    <h2 class="h2-tos">6. Que faire si j'oublie mon mot de passe ?</h2>
-    <p class="text-justify p-tos">
-      Sur la page de connexion, cliquez sur "Mot de passe oublié ?" et suivez les instructions pour réinitialiser votre
-      mot de passe via votre adresse courriel.
-    </p>
+  <h2>3. Comment Hutopy rémunère-t-il les créateurs de contenu ?</h2>
 
-    <h2 class="h2-tos">7. Comment signaler un contenu inapproprié ?</h2>
-    <p class="text-justify p-tos">
-      Si vous rencontrez du contenu qui viole nos directives, cliquer sur les trois petits points en haut de la
-      publication et cliquez sur le bouton "Signaler" associé au contenu en question pour alerter notre équipe de
-      modération.
-    </p>
+  <p>
+    Les créateurs peuvent monétiser leur contenu de plusieurs façons, notamment via des abonnements payants et des
+    dons de la part des utilisateurs.
+  </p>
 
-    <h2 class="h2-tos">8. Comment puis-je contacter le support Hutopy ?</h2>
-    <p class="text-justify p-tos">
-      Pour toute assistance, vous pouvez nous contacter via notre formulaire en ligne ou par e-mail à
-      support@hutopy.com, ou via nos réseaux sociaux. Notre équipe s'efforce de répondre rapidement à toutes les
-      demandes.
-    </p>
+  <h2>4. Comment puis-je modifier mon profil ?</h2>
 
-    <h2 class="h2-tos">9. Quels sont les frais pour les créateurs sur Hutopy ?</h2>
-    <p class="text-justify p-tos">
-      Hutopy prélève une commission de 12% + 0,30$ sur chaque transaction réalisée sur la plateforme, que ce soit pour
-      les abonnements, les dons ou tout autre revenu généré par les créateurs. Cette commission nous aide à couvrir les
-      coûts de maintenance de la plateforme, de la bande passante, d'assistance utilisateur, des frais de transaction de
-      Stripe et le développement continu pour améliorer votre expérience sur Hutopy.
-    </p>
+  <p>
+    Connectez-vous à votre compte, accédez à votre profil, puis cliquez sur "Éditer le profil" pour modifier vos
+    informations, ajouter une bio, changer votre photo de profil, et plus encore.
+  </p>
 
-    <h2 class="h2-tos">10. Y a-t-il des frais pour s'inscrire ou pour maintenir mon compte sur Hutopy ?</h2>
-    <p class="text-justify p-tos">
-      Non, l'inscription sur Hutopy est gratuite, et il n'y a pas de frais mensuels ou annuels pour maintenir votre
-      compte. Vous pouvez commencer à utiliser Hutopy et à partager votre contenu sans aucun coût initial.
-    </p>
+  <h2>5. Est-il possible de supprimer mon compte ?</h2>
 
-    <h2 class="h2-tos">11. Les utilisateurs doivent-ils payer pour accéder au contenu sur Hutopy ?</h2>
-    <p class="text-justify p-tos">
-      Hutopy offre à la fois du contenu gratuit et du contenu premium. Les utilisateurs peuvent accéder gratuitement à
-      une partie du contenu sur la plateforme. Cependant, certains créateurs peuvent choisir de rendre leur contenu
-      accessible uniquement via un abonnement payant ou un achat unique pour soutenir leur travail.
-    </p>
+  <p>
+    Oui, vous pouvez faire la suppression de votre compte sur votre profil dans la section plus. Notez que cette
+    action est irréversible.
+  </p>
 
-    <h2 class="h2-tos">12. Existe-t-il des frais pour retirer mes gains de la plateforme ?</h2>
-    <p class="text-justify p-tos">
-      Les créateurs peuvent retirer leurs gains sans frais supplémentaires de la part d’Hutopy. Cependant, les
-      transactions bancaires ou les transferts vers des portefeuilles électroniques peuvent être soumis aux frais
-      standards imposés par ces services ou institutions financières, mais pas par Hutopy.
-    </p>
+  <h2>6. Que faire si j'oublie mon mot de passe ?</h2>
 
-    <h2 class="h2-tos">13. Les frais Hutopy sont-ils les mêmes pour tous les types de contenu ?</h2>
-    <p class="text-justify p-tos">
-      Oui, les frais de commission d’Hutopy sont uniformément appliqués à tous les types de contenu et de transactions
-      sur la plateforme pour maintenir la simplicité et la transparence et ce peu importe le montant.
-    </p>
-  </div>
+  <p>
+    Sur la page de connexion, cliquez sur "Mot de passe oublié ?" et suivez les instructions pour réinitialiser votre
+    mot de passe via votre adresse courriel.
+  </p>
+
+  <h2>7. Comment signaler un contenu inapproprié ?</h2>
+
+  <p>
+    Si vous rencontrez du contenu qui viole nos directives, cliquer sur les trois petits points en haut de la
+    publication et cliquez sur le bouton "Signaler" associé au contenu en question pour alerter notre équipe de
+    modération.
+  </p>
+
+  <h2>8. Comment puis-je contacter le support Hutopy ?</h2>
+
+  <p>
+    Pour toute assistance, vous pouvez nous contacter via notre formulaire en ligne ou par e-mail à
+    support@hutopy.com, ou via nos réseaux sociaux. Notre équipe s'efforce de répondre rapidement à toutes les
+    demandes.
+  </p>
+
+  <h2>9. Quels sont les frais pour les créateurs sur Hutopy ?</h2>
+
+  <p>
+    Hutopy prélève une commission de 12% + 0,30$ sur chaque transaction réalisée sur la plateforme, que ce soit pour
+    les abonnements, les dons ou tout autre revenu généré par les créateurs. Cette commission nous aide à couvrir les
+    coûts de maintenance de la plateforme, de la bande passante, d'assistance utilisateur, des frais de transaction de
+    Stripe et le développement continu pour améliorer votre expérience sur Hutopy.
+  </p>
+
+  <h2>10. Y a-t-il des frais pour s'inscrire ou pour maintenir mon compte sur Hutopy ?</h2>
+
+  <p>
+    Non, l'inscription sur Hutopy est gratuite, et il n'y a pas de frais mensuels ou annuels pour maintenir votre
+    compte. Vous pouvez commencer à utiliser Hutopy et à partager votre contenu sans aucun coût initial.
+  </p>
+
+  <h2>11. Les utilisateurs doivent-ils payer pour accéder au contenu sur Hutopy ?</h2>
+
+  <p>
+    Hutopy offre à la fois du contenu gratuit et du contenu premium. Les utilisateurs peuvent accéder gratuitement à
+    une partie du contenu sur la plateforme. Cependant, certains créateurs peuvent choisir de rendre leur contenu
+    accessible uniquement via un abonnement payant ou un achat unique pour soutenir leur travail.
+  </p>
+
+  <h2>12. Existe-t-il des frais pour retirer mes gains de la plateforme ?</h2>
+
+  <p>
+    Les créateurs peuvent retirer leurs gains sans frais supplémentaires de la part d’Hutopy. Cependant, les
+    transactions bancaires ou les transferts vers des portefeuilles électroniques peuvent être soumis aux frais
+    standards imposés par ces services ou institutions financières, mais pas par Hutopy.
+  </p>
+
+  <h2>13. Les frais Hutopy sont-ils les mêmes pour tous les types de contenu ?</h2>
+
+  <p>
+    Oui, les frais de commission d’Hutopy sont uniformément appliqués à tous les types de contenu et de transactions
+    sur la plateforme pour maintenir la simplicité et la transparence et ce peu importe le montant.
+  </p>
 
 </template>
 
-<style>
-@import '@/cssstyle/tosstyle.css';
-
-.important {
-  @apply m-2 text-red-500 my-4;
-}
-</style>
-<script setup lang="ts">
-</script>
\ No newline at end of file
+<style scoped>
+@import '@/views/documentation/documentation.css';
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/documentation/HelpAndContact.vue b/frontend/src/views/documentation/HelpAndContact.vue
index 02a1b47..5e063e5 100644
--- a/frontend/src/views/documentation/HelpAndContact.vue
+++ b/frontend/src/views/documentation/HelpAndContact.vue
@@ -1,42 +1,57 @@
 <template>
-  <div>
-    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">Aide et contact</h1>
-  </div>
 
-  <div class="mx-auto max-w-[1000px] px-4">
-    <p class="text-justify p-tos">
-      Bienvenue dans notre espace d'assistance ! Que vous soyez un créateur à la recherche de conseils pour optimiser votre présence sur Hutopy, ou un utilisateur curieux d'en apprendre plus sur notre plateforme, vous êtes au bon endroit. Notre objectif est de vous fournir tout le soutien nécessaire pour que votre expérience sur Hutopy soit aussi enrichissante et agréable que possible.
-    </p>
+  <h1>Aide et contact</h1>
 
-    <h2 class="h2-tos">FAQ (Foire Aux Questions)</h2>
-    <p class="text-justify">
-      Retrouvez les réponses aux questions les plus fréquemment posées concernant l'utilisation d’Hutopy, les fonctionnalités de la plateforme, les options de monétisation, et plus encore. Consulter la FAQ
-    </p>
+  <p>
+    Bienvenue dans notre espace d'assistance ! Que vous soyez un créateur à la recherche de conseils pour optimiser
+    votre présence sur Hutopy, ou un utilisateur curieux d'en apprendre plus sur notre plateforme, vous êtes au bon
+    endroit. Notre objectif est de vous fournir tout le soutien nécessaire pour que votre expérience sur Hutopy soit
+    aussi enrichissante et agréable que possible.
+  </p>
 
-    <h2 class="h2-tos">Contactez-Nous</h2>
-    <p class="text-justify">
-      Nous sommes toujours ravis d'entendre nos utilisateurs ! Que ce soit pour partager vos retours, poser une question spécifique, ou demander des renseignements sur des partenariats, n'hésitez pas à nous contacter.
-    </p>
-    <p class="text-justify">
-      - Par E-mail : <a href="mailto:info@hutopy.com" style="color: #a30e79;">info@hutopy.com</a><br>
-      - Réseaux Sociaux : Nous sommes actifs sur <a href="https://www.facebook.com/Hutopy" style="color: #a30e79;">Facebook</a>, et <a href="https://www.instagram.com/hutopy.inc" style="color: #a30e79;">Instagram</a><br>
-      - Suivez-nous pour rester informé et interagir avec notre communauté.
-    </p>
+  <h2>FAQ (Foire Aux Questions)</h2>
 
-    <h2 class="h2-tos">Assistance Technique</h2>
-    <p class="text-justify">
-      Rencontrez-vous un problème technique ?
-      Notre équipe d'assistance est là pour vous aider : <a href="mailto:support@hutopy.com" style="color: #a30e79;">support@hutopy.com</a>
-    </p>
-    <p class="text-justify my-5">
-      Nous sommes là pour rendre votre expérience sur Hutopy aussi fluide et positive que possible. N'hésitez pas à nous contacter pour toute aide supplémentaire !
-    </p>
-  </div>
+  <p>
+    Retrouvez les réponses aux questions les plus fréquemment posées concernant l'utilisation d’Hutopy, les
+    fonctionnalités de la plateforme, les options de monétisation, et plus encore. Consulter la FAQ
+  </p>
+
+  <h2>Contactez-Nous</h2>
+
+  <p>
+    Nous sommes toujours ravis d'entendre nos utilisateurs ! Que ce soit pour partager vos retours, poser une question
+    spécifique, ou demander des renseignements sur des partenariats, n'hésitez pas à nous contacter.
+  </p>
+
+  <ul>
+    <li>
+      Par E-mail : <a href="mailto:info@hutopy.com" style="color: #a30e79;">
+      info@hutopy.com</a>
+    </li>
+
+    <li>
+      Réseaux Sociaux : Nous sommes actifs sur
+      <a href="https://www.facebook.com/Hutopy" style="color: #a30e79;">Facebook</a>
+      et <a href="https://www.instagram.com/hutopy.inc" style="color: #a30e79;">Instagram</a>
+    </li>
+
+    <li>Suivez-nous pour rester informé et interagir avec notre communauté.</li>
+  </ul>
+
+  <h2>Assistance Technique</h2>
+
+  <p>
+    Rencontrez-vous un problème technique ?
+    Notre équipe d'assistance est là pour vous aider : <a href="mailto:support@hutopy.com" style="color: #a30e79;">support@hutopy.com</a>
+  </p>
+
+  <p>
+    Nous sommes là pour rendre votre expérience sur Hutopy aussi fluide et positive que possible. N'hésitez pas à nous
+    contacter pour toute aide supplémentaire !
+  </p>
 
 </template>
 
-<style>
-@import '@/cssstyle/tosstyle.css';
-</style>
-<script setup lang="ts">
-</script>
\ No newline at end of file
+<style scoped>
+@import '@/views/documentation/documentation.css';
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/documentation/Pricing.vue b/frontend/src/views/documentation/Pricing.vue
index 52da677..a691a45 100644
--- a/frontend/src/views/documentation/Pricing.vue
+++ b/frontend/src/views/documentation/Pricing.vue
@@ -1,9 +1,8 @@
 <template>
   <div>
-    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">Frais</h1>
+    <h1 class="h1-tos py-10  flex items-center justify-center uppercase">Frais</h1>
   </div>
 
-  <div class="mx-auto max-w-[1000px] px-4">
     <p class="text-justify p-tos">
       Découvrez Hutopy, l'endroit où la valorisation de votre travail atteint son apogée. Avec une commission réduite à seulement 9 %, notre engagement envers votre succès est palpable. Chaque pourcentage prélevé est réinvesti avec soin pour catalyser votre croissance afin de développer des fonctionnalités innovantes, maintenir une infrastructure technologique de pointe, et un support utilisateur de premier ordre. Notre objectif ? Amplifier votre expansion et garantir une expérience utilisateur sans précédent.
     </p>
@@ -19,9 +18,9 @@
     <p class="text-justify p-tos">
       Hutopy est plus qu'une plateforme ; c'est une communauté où la transformation de la passion en profit devient réalité, grâce au soutien indéfectible d'une équipe dévouée à enrichir votre parcours. Nous vous invitons à nous rejoindre pour explorer ensemble les avenues de succès, tout en vous garantissant une part conséquente de vos revenus. Embarquez dans une aventure où votre présence en ligne ne connaît pas de limites, soutenue par Hutopy, votre allié dans la quête du succès.
     </p>
-  </div>  
+
 </template>
 
 <style>
-@import '@/cssstyle/tosstyle.css';
+@import '@/views/documentation/documentation.css';
 </style>
\ No newline at end of file
diff --git a/frontend/src/views/documentation/TermsAndConditions.vue b/frontend/src/views/documentation/TermsAndConditions.vue
index 8b58fa9..e5a2ad9 100644
--- a/frontend/src/views/documentation/TermsAndConditions.vue
+++ b/frontend/src/views/documentation/TermsAndConditions.vue
@@ -1,71 +1,103 @@
 <template>
-  <div>
-    <h1 class="h1-tos py-10   flex items-center justify-center uppercase">Conditions générales</h1>
-  </div>
 
-  <div class="mx-auto max-w-[1000px] px-4">
-    <h2 class="h2-tos">Bienvenue sur Hutopy</h2>
-    <p class="text-justify p-tos">
-      En accédant à la plateforme Hutopy et en l'utilisant, vous acceptez de vous conformer aux conditions générales d'utilisation suivantes, qui sont conçues pour assurer une expérience sûre, respectueuse et positive pour tous les utilisateurs. Ces conditions s'appliquent à tous les visiteurs, utilisateurs et autres personnes qui accèdent ou utilisent le service.
-    </p>
+  <h1>Conditions générales</h1>
 
-    <h2 class="h2-tos">Utilisation Acceptable</h2>
-    <p class="text-justify p-tos">
-      1. Contenu : Vous vous engagez à ne pas publier de contenu illégal, diffamatoire, abusif, pornographique, haineux, raciste ou de toute autre nature susceptible de causer du tort. Tout contenu publié reste sous votre responsabilité.
-    </p>
-    <p class="text-justify p-tos">
-      2. Comportement : Tout comportement visant à nuire à d'autres utilisateurs, à la plateforme ou à ses opérations est strictement interdit. Cela inclut le piratage, la diffusion de logiciels malveillants et les tentatives d'hameçonnage.
-    </p>
+  <h2>Bienvenue sur Hutopy</h2>
 
-    <h2 class="h2-tos">Droits de Propriété Intellectuelle</h2>
-    <p class="text-justify p-tos">
-      Le contenu publié sur Hutopy par les utilisateurs reste la propriété de leurs créateurs respectifs. En publiant du contenu sur Hutopy, vous accordez à la plateforme une licence non exclusive, transférable, libre de droits et mondiale pour utiliser, reproduire, modifier, publier, traduire et distribuer ce contenu dans tout média.
-    </p>
+  <p>
+    En accédant à la plateforme Hutopy et en l'utilisant, vous acceptez de vous conformer aux conditions générales
+    d'utilisation suivantes, qui sont conçues pour assurer une expérience sûre, respectueuse et positive pour tous les
+    utilisateurs. Ces conditions s'appliquent à tous les visiteurs, utilisateurs et autres personnes qui accèdent ou
+    utilisent le service.
+  </p>
 
-    <h2 class="h2-tos">Confidentialité</h2>
-    <p class="text-justify p-tos">
-      La protection de vos données personnelles est de la plus haute importance pour Hutopy. Votre information est collectée et utilisée conformément à notre politique de confidentialité.
-    </p>
+  <h2>Utilisation Acceptable</h2>
 
-    <h2 class="h2-tos">Limitation de Responsabilité</h2>
-    <p class="text-justify p-tos">
-      Hutopy et ses affiliés ne seront pas responsables des dommages indirects, accidentels, spéciaux, consécutifs ou punitifs, y compris sans limitation, la perte de profits, de données ou d'usage, que ce soit dans une action contractuelle, délictuelle y compris la négligence ou autre, découlant de ou en relation avec l'accès ou l'utilisation de la plateforme Hutopy.
-    </p>
+  <p>
+    1. Contenu : Vous vous engagez à ne pas publier de contenu illégal, diffamatoire, abusif, pornographique, haineux,
+    raciste ou de toute autre nature susceptible de causer du tort. Tout contenu publié reste sous votre responsabilité.
+  </p>
+  <p>
+    2. Comportement : Tout comportement visant à nuire à d'autres utilisateurs, à la plateforme ou à ses opérations est
+    strictement interdit. Cela inclut le piratage, la diffusion de logiciels malveillants et les tentatives
+    d'hameçonnage.
+  </p>
 
-    <h2 class="h2-tos">Clause de Non-Poursuite</h2>
-    <p class="text-justify p-tos">
-      En acceptant ces conditions générales d'utilisation, vous convenez qu'en aucun cas Hutopy, ses dirigeants, employés, partenaires, agents, fournisseurs ou affiliés ne pourront être tenus responsables de dommages directs, indirects, accidentels, spéciaux, consécutifs ou exemplaires résultant de votre utilisation de la plateforme Hutopy. Par conséquent, vous renoncez expressément à tout droit de poursuivre Hutopy et ses affiliés pour toute réclamation liée à votre utilisation de la plateforme.
-    </p>
+  <h2>Droits de Propriété Intellectuelle</h2>
 
-    <h2 class="h2-tos">Gestion du Contenu Inapproprié et Sanctions Financières</h2>
-    <p class="text-justify p-tos">
-      Hutopy s'engage à maintenir un environnement sûr et respectueux pour tous ses utilisateurs. Ainsi, tout contenu publié sur la plateforme est sujet à une évaluation de conformité avec nos directives et nos standards éthiques. Dans l'éventualité où le contenu d'un utilisateur est jugé inapproprié, offensant ou en violation avec nos Acceptation des Conditions
-      <br><br>
-      Votre accès et votre utilisation continue de la plateforme Hutopy constituent votre acceptation des présentes conditions générales et de toutes les modifications futures. Il est de votre responsabilité de vous tenir informé des mises à jour de ces conditions.
-      <br><br>
-      Nous vous encourageons à utiliser Hutopy de manière responsable et conforme à nos directives, afin de contribuer à une communauté positive et enrichissante pour tous.
-    </p>
+  <p>
+    Le contenu publié sur Hutopy par les utilisateurs reste la propriété de leurs créateurs respectifs. En publiant du
+    contenu sur Hutopy, vous accordez à la plateforme une licence non exclusive, transférable, libre de droits et
+    mondiale pour utiliser, reproduire, modifier, publier, traduire et distribuer ce contenu dans tout média.
+  </p>
 
-    <h2 class="h2-tos">Modifications des Conditions</h2>
-    <p class="text-justify p-tos">
-      Hutopy se réserve le droit de modifier ou de remplacer ces conditions à tout moment. Il est de votre responsabilité de revoir régulièrement ces conditions pour vous tenir informé des mises à jour.
-    </p>
+  <h2>Confidentialité</h2>
 
-    <h2 class="h2-tos">Résiliation</h2>
-    <p class="text-justify p-tos">
-      Hutopy peut résilier ou suspendre votre accès à la plateforme immédiatement, sans préavis ni responsabilité, pour quelque raison que ce soit, y compris, sans limitation, si vous violez les conditions.
-    </p>
+  <p>
+    La protection de vos données personnelles est de la plus haute importance pour Hutopy. Votre information est
+    collectée et utilisée conformément à notre politique de confidentialité.
+  </p>
 
-    <h2 class="h2-tos">Loi Applicable</h2>
-    <p class="text-justify p-tos">
-      Ces conditions seront régies et interprétées conformément aux lois du pays/juridiction où est basée la plateforme, sans égard à ses conflits de dispositions légales.
-    </p>
-  </div>
+  <h2>Limitation de Responsabilité</h2>
+
+  <p>
+    Hutopy et ses affiliés ne seront pas responsables des dommages indirects, accidentels, spéciaux, consécutifs ou
+    punitifs, y compris sans limitation, la perte de profits, de données ou d'usage, que ce soit dans une action
+    contractuelle, délictuelle y compris la négligence ou autre, découlant de ou en relation avec l'accès ou
+    l'utilisation de la plateforme Hutopy.
+  </p>
+
+  <h2>Clause de Non-Poursuite</h2>
+
+  <p>
+    En acceptant ces conditions générales d'utilisation, vous convenez qu'en aucun cas Hutopy, ses dirigeants, employés,
+    partenaires, agents, fournisseurs ou affiliés ne pourront être tenus responsables de dommages directs, indirects,
+    accidentels, spéciaux, consécutifs ou exemplaires résultant de votre utilisation de la plateforme Hutopy. Par
+    conséquent, vous renoncez expressément à tout droit de poursuivre Hutopy et ses affiliés pour toute réclamation liée
+    à votre utilisation de la plateforme.
+  </p>
+
+  <h2>Gestion du Contenu Inapproprié et Sanctions Financières</h2>
+
+  <p>
+    Hutopy s'engage à maintenir un environnement sûr et respectueux pour tous ses utilisateurs. Ainsi, tout contenu
+    publié sur la plateforme est sujet à une évaluation de conformité avec nos directives et nos standards éthiques.
+    Dans l'éventualité où le contenu d'un utilisateur est jugé inapproprié, offensant ou en violation avec nos
+    Acceptation des Conditions
+  </p>
+  <p>
+    Votre accès et votre utilisation continue de la plateforme Hutopy constituent votre acceptation des présentes
+    conditions générales et de toutes les modifications futures. Il est de votre responsabilité de vous tenir informé
+    des mises à jour de ces conditions.
+  </p>
+  <p>
+    Nous vous encourageons à utiliser Hutopy de manière responsable et conforme à nos directives, afin de contribuer à
+    une communauté positive et enrichissante pour tous.
+  </p>
+
+  <h2>Modifications des Conditions</h2>
+
+  <p>
+    Hutopy se réserve le droit de modifier ou de remplacer ces conditions à tout moment. Il est de votre responsabilité
+    de revoir régulièrement ces conditions pour vous tenir informé des mises à jour.
+  </p>
+
+  <h2>Résiliation</h2>
+
+  <p>
+    Hutopy peut résilier ou suspendre votre accès à la plateforme immédiatement, sans préavis ni responsabilité, pour
+    quelque raison que ce soit, y compris, sans limitation, si vous violez les conditions.
+  </p>
+
+  <h2>Loi Applicable</h2>
+
+  <p>
+    Ces conditions seront régies et interprétées conformément aux lois du pays/juridiction où est basée la plateforme,
+    sans égard à ses conflits de dispositions légales.
+  </p>
 
 </template>
 
-<style>
-@import '@/cssstyle/tosstyle.css';
-</style>
-<script setup lang="ts">
-</script>
\ No newline at end of file
+<style scoped>
+@import '@/views/documentation/documentation.css';
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/documentation/documentation.css b/frontend/src/views/documentation/documentation.css
new file mode 100644
index 0000000..51a3450
--- /dev/null
+++ b/frontend/src/views/documentation/documentation.css
@@ -0,0 +1,23 @@
+h1 {
+    @apply bg-hSurface text-hOnSurface;
+    @apply py-5 flex items-center justify-center uppercase;
+    @apply font-sans font-semibold text-xl;
+    @apply tracking-widest;
+    @apply px-2;
+}
+
+h2 {
+    @apply bg-hSurface text-hOnSurface;
+    @apply font-sans font-semibold text-lg;
+    @apply tracking-widest;
+    @apply py-2;
+    @apply px-2;
+}
+
+p, ul {
+    @apply bg-hSurface text-hOnSurface;
+    @apply font-mono font-normal text-base;
+    @apply tracking-wide;
+    @apply py-1;
+    @apply px-2;
+}
diff --git a/frontend/src/views/profile/ProfilePage.vue b/frontend/src/views/profile/ProfilePage.vue
index e38797e..a222e21 100644
--- a/frontend/src/views/profile/ProfilePage.vue
+++ b/frontend/src/views/profile/ProfilePage.vue
@@ -1,170 +1,173 @@
 <template>
 
-  <!-- Modal -->
-  <v-dialog v-model="dialogEditFullnameShown" max-width="800px">
-    <fullname-dialog
-        :firstname="userProfileStore.user.firstname"
-        :lastname="userProfileStore.user.lastname"
-        @close="handleCloseEditFullname"
-        @save="handleSaveEditFullname"
-    ></fullname-dialog>
-  </v-dialog>
+  <div class="flex flex-col min-h-screen max-w-[960px] mx-auto">
+    <!-- Modal -->
+    <v-dialog v-model="dialogEditFullnameShown" max-width="800px">
+      <fullname-dialog
+          :firstname="userProfileStore.user.firstname"
+          :lastname="userProfileStore.user.lastname"
+          @close="handleCloseEditFullname"
+          @save="handleSaveEditFullname"
+      ></fullname-dialog>
+    </v-dialog>
 
-  <v-dialog v-model="dialogEditAliasShown" max-width="800px">
-    <alias-dialog
-        :alias="userProfileStore.user.alias"
-        @close="handleCloseEditAlias"
-        @save="handleSaveEditAlias"
-    ></alias-dialog>
-  </v-dialog>
+    <v-dialog v-model="dialogEditAliasShown" max-width="800px">
+      <alias-dialog
+          :alias="userProfileStore.user.alias"
+          @close="handleCloseEditAlias"
+          @save="handleSaveEditAlias"
+      ></alias-dialog>
+    </v-dialog>
 
-  <!-- Creator Section (integrated directly) -->
-  <v-dialog v-model="dialog" max-width="800px">
-    <div class="card">
+    <!-- Creator Section (integrated directly) -->
+    <v-dialog v-model="dialog" max-width="800px">
+      <div class="card">
         <component
             :is="currentComponent"
             :creator="creatorProfileStore.creator"
             @closeRequested="closeDialog"
         ></component>
       </div>
-  </v-dialog>
+    </v-dialog>
 
-  <div class="space-y-6 p-4">
+    <div class="space-y-6 p-4">
 
-    <div class="card">
+      <div class="card">
 
-      <div class="title">
-        {{ $t('personnalinformation.informations') }}
-      </div>
+        <div class="title">
+          {{ $t('personnalinformation.informations') }}
+        </div>
 
-      <div class="content">
-        <button
-            class="action"
-            @click="openEditFullname">
-          <span class="label">{{ $t('personnalinformation.fullname') }}</span>
-          <span class="value">{{ userProfileStore.fullname }}</span>
-          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-        </button>
+        <div class="content">
+          <button
+              class="action"
+              @click="openEditFullname">
+            <span class="label">{{ $t('personnalinformation.fullname') }}</span>
+            <span class="value">{{ userProfileStore.fullname }}</span>
+            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+          </button>
 
-        <button
-            class="action"
-            @click="openEditAlias">
-          <span class="label">{{ $t('personnalinformation.alias') }}</span>
-          <span class="value">{{ userProfileStore.user.alias }}</span>
-          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-        </button>
-      </div>
-
-    </div>
-
-    <!-- Phone & email -->
-    <div class="card">
-
-      <div class="title">
-        {{ $t('personnalinformation.contactdetails') }}
-      </div>
-
-      <div class="content">
-        <button class="action" @click="openDialog('EmailDialog')">
-          <span class="label">{{ $t('personnalinformation.email') }}</span>
-          <span class="value">{{ userProfileStore.user.email }}</span>
-          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-        </button>
-      </div>
-
-    </div>
-
-    <!--  Lorsque l'utilisateur n'a pas de creator name-->
-    <div class="card">
-
-      <div class="title">
-        {{ $t('creatorinfopage.informations') }}
-      </div>
-
-      <div class="content">
-
-        <!-- NAME -->
-        <button class="action">
-          <span class="label">{{ $t('creatorinfopage.name') }}</span>
-          <span class="value">{{ creatorProfileStore.creator.name }}</span>
-          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-        </button>
-
-        <!-- TITLE -->
-        <button class="action" @click="openDialog('ChangeTitleDialog')">
-          <span class="label">{{ $t('creatorinfopage.title') }}</span>
-          <span class="value">{{ creatorProfileStore.creator.title }}</span>
-          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-        </button>
-
-        <!-- STRIPE -->
-        <button class="action" @click="openDialog('ChangeStripeIdDialog')">
-          <span class="label">Stripe Account ID</span>
-          <span class="value">{{ creatorProfileStore.creator.stripeId }}</span>
-          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-        </button>
+          <button
+              class="action"
+              @click="openEditAlias">
+            <span class="label">{{ $t('personnalinformation.alias') }}</span>
+            <span class="value">{{ userProfileStore.user.alias }}</span>
+            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+          </button>
+        </div>
 
       </div>
 
-    </div>
+      <!-- Phone & email -->
+      <div class="card">
 
-    <div class="card">
+        <div class="title">
+          {{ $t('personnalinformation.contactdetails') }}
+        </div>
 
-      <div class="title">
-        {{ $t('creatorinfopage.socialnetwork') }}
-      </div>
-
-      <div class="content">
-
-        <button class="action" @click="openDialog('SocialsDialog')">
-          <span class="label"><v-icon>mdi-facebook</v-icon></span>
-          <span class="value">{{ creatorProfileStore.creator.socials?.facebookUrl }}</span>
-          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-        </button>
-
-        <button class="action" @click="openDialog('SocialsDialog')">
-          <span class="label"><v-icon>mdi-instagram</v-icon></span>
-          <span class="value">{{ creatorProfileStore.creator.socials?.instagramUrl }}</span>
-          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-        </button>
-
-        <button class="action" @click="openDialog('SocialsDialog')">
-          <span class="label"><x-icon class="w-6 h-6"></x-icon></span>
-          <span class="value">{{ creatorProfileStore.creator.socials?.xUrl }}</span>
-          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-        </button>
-
-        <button class="action" @click="openDialog('SocialsDialog')">
-          <span class="label"><v-icon>mdi-linkedin</v-icon></span>
-          <span class="value">{{ creatorProfileStore.creator.socials?.linkedInUrl }}</span>
-          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-        </button>
-
-        <button class="action" @click="openDialog('SocialsDialog')">
-          <span class="label"><x-icon class="w-6 h-6"></x-icon></span>
-          <span class="value">{{ creatorProfileStore.creator.socials?.tikTokUrl }}</span>
-          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-        </button>
-
-        <button class="action" @click="openDialog('SocialsDialog')">
-          <span class="label"><v-icon>mdi-youtube</v-icon></span>
-          <span class="value">{{ creatorProfileStore.creator.socials?.youtubeUrl }}</span>
-          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-        </button>
-
-        <button class="action" @click="openDialog('SocialsDialog')">
-          <span class="label"><v-icon>mdi-reddit</v-icon></span>
-          <span class="value">{{ creatorProfileStore.creator.socials?.redditUrl }}</span>
-          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-        </button>
-
-        <button class="action" @click="openDialog('SocialsDialog')">
-          <span class="label"><v-icon>mdi-web</v-icon></span>
-          <span class="value">{{ creatorProfileStore.creator.socials?.websiteUrl }}</span>
-          <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
-        </button>
+        <div class="content">
+          <button class="action" @click="openDialog('EmailDialog')">
+            <span class="label">{{ $t('personnalinformation.email') }}</span>
+            <span class="value">{{ userProfileStore.user.email }}</span>
+            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+          </button>
+        </div>
 
       </div>
+
+      <!--  Lorsque l'utilisateur n'a pas de creator name-->
+      <div class="card">
+
+        <div class="title">
+          {{ $t('creatorinfopage.informations') }}
+        </div>
+
+        <div class="content">
+
+          <!-- NAME -->
+          <button class="action">
+            <span class="label">{{ $t('creatorinfopage.name') }}</span>
+            <span class="value">{{ creatorProfileStore.creator.name }}</span>
+            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+          </button>
+
+          <!-- TITLE -->
+          <button class="action" @click="openDialog('ChangeTitleDialog')">
+            <span class="label">{{ $t('creatorinfopage.title') }}</span>
+            <span class="value">{{ creatorProfileStore.creator.title }}</span>
+            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+          </button>
+
+          <!-- STRIPE -->
+          <button class="action" @click="openDialog('ChangeStripeIdDialog')">
+            <span class="label">Stripe Account ID</span>
+            <span class="value">{{ creatorProfileStore.creator.stripeId }}</span>
+            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+          </button>
+
+        </div>
+
+      </div>
+
+      <div class="card">
+
+        <div class="title">
+          {{ $t('creatorinfopage.socialnetwork') }}
+        </div>
+
+        <div class="content">
+
+          <button class="action" @click="openDialog('SocialsDialog')">
+            <span class="label"><v-icon>mdi-facebook</v-icon></span>
+            <span class="value">{{ creatorProfileStore.creator.socials?.facebookUrl }}</span>
+            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+          </button>
+
+          <button class="action" @click="openDialog('SocialsDialog')">
+            <span class="label"><v-icon>mdi-instagram</v-icon></span>
+            <span class="value">{{ creatorProfileStore.creator.socials?.instagramUrl }}</span>
+            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+          </button>
+
+          <button class="action" @click="openDialog('SocialsDialog')">
+            <span class="label"><x-icon class="w-6 h-6"></x-icon></span>
+            <span class="value">{{ creatorProfileStore.creator.socials?.xUrl }}</span>
+            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+          </button>
+
+          <button class="action" @click="openDialog('SocialsDialog')">
+            <span class="label"><v-icon>mdi-linkedin</v-icon></span>
+            <span class="value">{{ creatorProfileStore.creator.socials?.linkedInUrl }}</span>
+            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+          </button>
+
+          <button class="action" @click="openDialog('SocialsDialog')">
+            <span class="label"><x-icon class="w-6 h-6"></x-icon></span>
+            <span class="value">{{ creatorProfileStore.creator.socials?.tikTokUrl }}</span>
+            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+          </button>
+
+          <button class="action" @click="openDialog('SocialsDialog')">
+            <span class="label"><v-icon>mdi-youtube</v-icon></span>
+            <span class="value">{{ creatorProfileStore.creator.socials?.youtubeUrl }}</span>
+            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+          </button>
+
+          <button class="action" @click="openDialog('SocialsDialog')">
+            <span class="label"><v-icon>mdi-reddit</v-icon></span>
+            <span class="value">{{ creatorProfileStore.creator.socials?.redditUrl }}</span>
+            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+          </button>
+
+          <button class="action" @click="openDialog('SocialsDialog')">
+            <span class="label"><v-icon>mdi-web</v-icon></span>
+            <span class="value">{{ creatorProfileStore.creator.socials?.websiteUrl }}</span>
+            <span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
+          </button>
+
+        </div>
+      </div>
+
     </div>
 
   </div>
@@ -186,12 +189,15 @@ const userProfileStore = useUserProfileStore()
 
 // ### Fullname
 const dialogEditFullnameShown = ref(false)
+
 function openEditFullname() {
   dialogEditFullnameShown.value = true
 }
+
 function handleCloseEditFullname() {
   dialogEditFullnameShown.value = false
 }
+
 function handleSaveEditFullname(firstname, lastname) {
   userProfileStore.changeFullname(firstname, lastname)
   dialogEditFullnameShown.value = false
@@ -199,12 +205,15 @@ function handleSaveEditFullname(firstname, lastname) {
 
 // ### Alias
 const dialogEditAliasShown = ref(false)
+
 function openEditAlias() {
   dialogEditAliasShown.value = true
 }
+
 function handleCloseEditAlias() {
   dialogEditAliasShown.value = false
 }
+
 function handleSaveEditAlias(alias) {
   userProfileStore.changeAlias(alias)
   dialogEditAliasShown.value = false
@@ -212,12 +221,15 @@ function handleSaveEditAlias(alias) {
 
 // ### Email
 const dialogEditEmailShown = ref(false)
+
 function openEditEmail() {
   dialogEditEmailShown.value = true
 }
+
 function handleCloseEditEmail() {
   dialogEditEmailShown.value = false
 }
+
 function handleSaveEditEmail(firstname, lastname) {
   userProfileStore.changeEmail(firstname, lastname)
   dialogEditEmailShown.value = false