diff --git a/images/BannerGaspe.png b/images/BannerGaspe.png
index 45ed974..14d25c4 100644
Binary files a/images/BannerGaspe.png and b/images/BannerGaspe.png differ
diff --git a/images/guillaumepublication.jpg b/images/guillaumepublication.jpg
new file mode 100644
index 0000000..ecd07a0
Binary files /dev/null and b/images/guillaumepublication.jpg differ
diff --git a/images/inspirer.png b/images/inspirer.png
index 37017f4..6edf7ab 100644
Binary files a/images/inspirer.png and b/images/inspirer.png differ
diff --git a/images/pascal.jpg b/images/pascal.jpg
index afad3d2..96cedbe 100644
Binary files a/images/pascal.jpg and b/images/pascal.jpg differ
diff --git a/images/roadmapbanner.png b/images/roadmapbanner.png
new file mode 100644
index 0000000..2689189
Binary files /dev/null and b/images/roadmapbanner.png differ
diff --git a/images/world.png b/images/world.png
index e995857..154bd71 100644
Binary files a/images/world.png and b/images/world.png differ
diff --git a/src/cssstyle/index.css b/src/cssstyle/index.css
index 0bf0016..e48adb5 100644
--- a/src/cssstyle/index.css
+++ b/src/cssstyle/index.css
@@ -1,5 +1,3 @@
-
-
 /* CSS pour ajuster la taille de l'image */
 .img-small {
   width: 70px;
@@ -38,7 +36,7 @@
   /* Centrer les éléments verticalement */
   flex: 1;
   /* Utiliser tout l'espace disponible */
-  margin-right:8%
+  margin-right: 8%
 }
 
 /* CSS pour le texte du menu-right */
@@ -66,8 +64,10 @@
 }
 
 .profilePicture {
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
   /* Ajouter une ombre à la photo */
+  border: 2px solid #a30e79;
+  /* Ajouter une bordure de 2px solide de couleur rouge (#f00) */
 }
 
 .bg-customdarker {
@@ -85,29 +85,28 @@
 }
 
 .center-column {
-  flex: 3; /* La colonne centrale occupe 3 fois plus d'espace que les autres */
+  flex: 3;
+  /* La colonne centrale occupe 3 fois plus d'espace que les autres */
 }
 
 
-.colum-aligncenter
-{
+.colum-aligncenter {
   text-align: center;
 }
 
 .menu-center a:nth-child(1):hover svg {
-  color: rgba(163, 14, 121, 1); /* Changer la couleur en rouge au survol */
+  color: rgba(163, 14, 121, 1);
+  /* Changer la couleur en rouge au survol */
 }
 
 /* Pour le deuxième bouton */
 .menu-center a:nth-child(2):hover svg {
-  color:  rgba(163, 14, 121, 1); /* Changer la couleur en bleu au survol */
+  color: rgba(163, 14, 121, 1);
+  /* Changer la couleur en bleu au survol */
 }
 
 /* Pour le troisième bouton */
 .menu-center a:nth-child(3):hover svg {
-  color:  rgba(163, 14, 121, 1); /* Changer la couleur en vert au survol */
-}
-
-
-
-
+  color: rgba(163, 14, 121, 1);
+  /* Changer la couleur en vert au survol */
+}
\ No newline at end of file
diff --git a/src/layouts/CardDonate.vue b/src/layouts/CardDonate.vue
new file mode 100644
index 0000000..123c1a1
--- /dev/null
+++ b/src/layouts/CardDonate.vue
@@ -0,0 +1,41 @@
+<template>
+
+
+    <div class="md:flex hidden items-center justify-between flex-col">
+
+    </div>
+
+
+
+
+
+    <div class="md:hidden flex flex-col items-center justify-center">
+        <v-container class=" footer-donate-container">
+
+            <h1 style="text-align: center; color: rgb(107, 0, 101); margin-bottom: 4%;"> ENCOURAGEZ-MOI </h1>
+
+
+            <v-text-field label="Montant"
+                style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+
+            <v-text-field label="Message"
+                style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+
+            <v-btn style="margin-bottom: 3px; background-color: rgb(163, 14, 121); color: white;" rounded="xl"
+                size="x-large" block>Faire un don</v-btn>
+
+        </v-container>
+    </div>
+</template>
+
+
+
+
+
+<style>
+.footer-donate-container {
+
+    background-color: rgb(255, 255, 255);
+
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/CreatorHeader.vue b/src/layouts/CreatorHeader.vue
new file mode 100644
index 0000000..ef0e5a5
--- /dev/null
+++ b/src/layouts/CreatorHeader.vue
@@ -0,0 +1,164 @@
+<template>
+    <div class="md:flex hidden  items-center justify-between">
+        <v-container>
+
+
+            <div class="banner-container">
+                <img src="../../../images/guillaimeaime.png" class="banner-creator smooth-picture"
+                    style="margin-bottom: -80px;">
+            </div>
+
+
+            <div class="banner-container ">
+                <img src="../../../images/guillaume.png" class="profile-picture">
+                <img src="../../../images/checkprofile.png" class="check-profile" style="margin-top: 5px;">
+
+            </div>
+
+            <div style="margin-top: 40px; text-align: center;">
+                <v-container class="label-creator">
+                    <v-row justify="center">
+
+                        <v-card style="width: 470px; margin-top: 10px;">
+                            <v-card-title class="card-background label-creator-texte-color">Guillaume
+                                Mousseau</v-card-title>
+                        </v-card>
+
+
+
+                        <v-card style="width: 470px; margin-top: 10px;">
+                            <v-card-title class="card-background label-creator-texte-color">Créateur de
+                                contenus</v-card-title>
+                        </v-card>
+
+                    </v-row>
+                </v-container>
+            </div>
+
+
+        </v-container>
+    </div>
+
+
+    <div class="md:hidden flex flex-col items-center justify-center">
+        <div style="margin-top: -100px;">
+
+            <img src="../../../images/guillaimeaime.png" class="banner-creator" style="margin-top: 10;">
+
+
+
+            <div class="banner-container ">
+                <img src="../../../images/guillaume.png" class="profile-picture-mobile">
+                <img src="../../../images/checkprofile.png" class="check-profile-mobile" style="margin-top: 5px;">
+
+            </div>
+
+            <div style="margin-top: 150px; text-align: right;">
+                <v-container class="label-creator" style="width: 105%;">
+                    <v-row justify="center">
+
+                        <v-card style="width: 350px; margin-top: 5%; margin-left: 10%;">
+                            <v-card-title class="card-background2 label-creator-texte-color">Guillaume
+                                Mousseau</v-card-title>
+                        </v-card>
+
+
+
+                        <v-card style="width: 350px; margin-top: 1%; margin-left: 10%;">
+                            <v-card-title class="card-background label-creator-texte-color">Créateur de
+                                contenus</v-card-title>
+                        </v-card>
+
+                    </v-row>
+                </v-container>
+
+            </div>
+
+
+        </div>
+
+    </div>
+</template>
+
+
+<style>
+.banner-creator {
+    align-items: center;
+    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
+}
+
+.smooth-picture {
+    border-radius: 13px;
+}
+
+.profile-picture {
+    border-radius: 50%;
+    width: 200px;
+    height: 200px;
+    position: relative;
+    top: -20px;
+    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
+    border: 2px solid rgba(163, 14, 121, 0.5);
+}
+
+.profile-picture-mobile {
+    border-radius: 50%;
+    width: 170px;
+    height: 170px;
+    position: relative;
+    top: -45px;
+    margin-top: 420px;
+    margin-left: -230px;
+    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
+    border: 2px solid rgba(163, 14, 121, 0.5);
+    position: absolute;
+}
+
+
+.check-profile {
+    width: 40px;
+    height: 40px;
+
+    margin-top: -90px;
+    margin-left: 160px;
+    position: absolute;
+}
+
+.check-profile-mobile {
+    width: 40px;
+    height: 40px;
+
+    margin-top: -90px;
+    margin-left: -80px;
+    position: absolute;
+}
+
+
+.label-creator-texte-color {
+    color: white;
+}
+
+.label-creator {
+    margin-right: 43px;
+    margin-top: -160px;
+    position: relative;
+    z-index: -1;
+    /* Valeur inférieure pour placer derrière */
+}
+
+
+.card-background2 {
+    background-color: rgba(163, 14, 121, 1);
+    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
+}
+
+.card-background {
+    background-color: rgba(107, 0, 101, 1);
+    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
+}
+
+.banner-container {
+    display: flex;
+    justify-content: center;
+}
+</style>
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index fccdef8..624fce7 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -9,38 +9,42 @@
           </router-link>
         </div>
         <div class="menu-center flex items-center justify-center space-x-12">
+
           <router-link :to="{ name: 'home' }" class="text-green-700">
-            <router-link :to="{ name: 'home' }" class="text-green-700">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                  d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
-              </svg>
-            </router-link>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+              stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
+              <path stroke-linecap="round" stroke-linejoin="round"
+                d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+            </svg>
           </router-link>
+
+
           <router-link :to="{ name: 'contact' }" class="text-green-700">
-            <router-link :to="{ name: 'contact' }" class="text-green-700">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                  d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
-              </svg>
-            </router-link>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+              stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
+              <path stroke-linecap="round" stroke-linejoin="round"
+                d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
+            </svg>
           </router-link>
+
+
           <router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
-            <router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                  d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
-              </svg>
-            </router-link>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+              stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
+              <path stroke-linecap="round" stroke-linejoin="round"
+                d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+            </svg>
           </router-link>
+
+
+
+
+
+
         </div>
         <div class="menu-right">
           <router-link :to="{ name: 'yourprofile' }">
-            <img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small profilePicture"
-              alt="Logo">
+            <img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture" alt="Logo">
           </router-link>
         </div>
       </div>
@@ -50,6 +54,8 @@
       <div class="md:hidden flex flex-col items-center justify-center">
         <v-container style="margin-top: -20px;">
           <v-row>
+
+
             <v-col cols="auto">
               <!-- Logo -->
               <router-link :to="{ name: 'home' }">
@@ -60,7 +66,7 @@
             <v-col cols="auto">
               <!-- Photo de profil -->
               <router-link :to="{ name: 'yourprofile' }" class="text-green-700">
-                <img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small profilePicture"
+                <img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture"
                   alt="Logo">
               </router-link>
             </v-col>
@@ -69,6 +75,7 @@
 
         <v-container class="text-center" style="margin-top: -30px;">
           <v-row class="justify-center">
+
             <!-- Premier lien avec icône -->
             <v-col cols="auto" class="mx-4">
               <router-link :to="{ name: 'home' }" class="text-green-700">
@@ -98,8 +105,13 @@
                     d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
                 </svg>
               </router-link>
-
             </v-col>
+
+
+
+
+
+
             <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: 20px;"></div>
 
           </v-row>
diff --git a/src/layouts/FooterLayout.vue b/src/layouts/FooterLayout.vue
index f07b5bb..d8d42d5 100644
--- a/src/layouts/FooterLayout.vue
+++ b/src/layouts/FooterLayout.vue
@@ -26,6 +26,10 @@
       {{ new Date().getFullYear() }} — <strong>Hutopy</strong>
     </v-container>
 
+
+    <v-container class="custom-footer">
+    </v-container>
+
   </div>
 </template>
 
@@ -39,7 +43,7 @@ export default {
       'Conditions générales',
       'Politique des contenus',
       'Programme Ambassadeurs',
-      'conditions_utilisation',
+      'conditions utilisation',
       'anti-exploitation',
     ],
   }),
diff --git a/src/layouts/FormInscriptionBeta.vue b/src/layouts/FormInscriptionBeta.vue
index 0682064..34445bb 100644
--- a/src/layouts/FormInscriptionBeta.vue
+++ b/src/layouts/FormInscriptionBeta.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="md:flex hidden items-center justify-between flex-col">
+  <div class="md:flex hidden justify-between flex-col">
     <div>
-      <H1 class="h1-inscription-beta-Inscrivez-vous"> Inscrivez-vous </H1>
+      <h1 class="h1-inscription-beta-Inscrivez-vous"> Inscrivez-vous </h1>
     </div>
 
     <div>
@@ -15,26 +15,25 @@
         style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-textarea>
 
     </div>
+
   </div>
 
-  <div class="md:hidden flex flex-col items-center justify-center">
+  <div class="md:hidden flex flex-col justify-center">
+    <div>
+      <h1 class="h1-inscription-beta-Inscrivez-vous">Inscrivez-vous</h1>
+    </div>
+    <div style="margin-left: -45%; margin-right: -45%;">
+      <v-text-field label="First name" class="w-full"
+        style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+      <v-text-field label="Last name" class="w-full"
+        style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+      <v-text-field label="E-mail" class="w-full"
+        style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+      <v-textarea label="Pourquoi voulez-vous participer?" class="w-full"
+        style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-textarea>
+    </div>
+  </div>
 
-<div>
-  <H1 class="h1-inscription-beta-Inscrivez-vous"> Inscrivez-vous </H1>
-</div>
-
-<div>
-  <v-text-field label="First name"
-    style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
-  <v-text-field label="Last name"
-    style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
-  <v-text-field label="E-mail"
-    style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
-  <v-textarea label="Pourquoi voulez-vous participer?"
-    style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-textarea>
-
-</div>
-</div>
 
 </template>
 
diff --git a/src/layouts/SimpleVideoCard.vue b/src/layouts/SimpleVideoCard.vue
new file mode 100644
index 0000000..703ad58
--- /dev/null
+++ b/src/layouts/SimpleVideoCard.vue
@@ -0,0 +1,36 @@
+<template>
+    <v-card class="vcard-descriptions-mobile" style="margin-top: 30px;">
+
+        <h1 class="h1profilemobile">Podcast #01</h1>
+
+
+        <h2 clase="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024 </h2>
+        <iframe width="420" height="315" src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD">
+        </iframe>
+
+        <p class="text-justify pa-4" style="font-size: 1.2em">
+            Voici mon nouveau podcast!
+
+        </p>
+    </v-card>
+</template>
+
+<style>
+.vcard-descriptions-mobile {
+    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.6);
+
+}
+
+.h1profilemobile {
+    font-size: 2rem;
+    text-align: center;
+
+    color: rgba(163, 14, 121, 0.85);
+
+
+}
+
+.card-date {
+    text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 4a8e448..90adce9 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,6 +5,7 @@ import LoginView from '../views/LoginView.vue'
 import ContactView from '../views/main/ContactView.vue'
 import CreatorFolio from '../views/main/CreatorFolio.vue'
 import YourProfile from '../views/main/YourProfile.vue'
+import ProjectRoadmap from '@/views/main/ProjectRoadmap.vue'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -38,6 +39,11 @@ const router = createRouter({
       name: 'login',
       component: LoginView
     },
+    {
+      path: '/roadmap',
+      name: 'roadmap',
+      component: ProjectRoadmap
+    },
 
 
   ]
diff --git a/src/views/main/ContactView.vue b/src/views/main/ContactView.vue
index 2e0ce80..364b870 100644
--- a/src/views/main/ContactView.vue
+++ b/src/views/main/ContactView.vue
@@ -7,16 +7,20 @@
 
       <div class="column"></div>
       <div class="center-column" style="width: 70vw; margin: auto;">
+        <h1 class="h1-inscription-beta">Participez au développement de </h1>
+        <h1 class="h1-inscription-betacolor">Hutopy</h1>
         <div class="grid grid-cols-2 gap-4">
           <div class="rectangular-image h-full flex justify-center items-center">
-            <img src="../../../images/contactpicture.png" alt="Bannière" class="contactpicture">
+
+            <img src="../../../images/contactpicture.png" alt="Bannière" class="contactpicture" style="float: right;">
+
           </div>
 
           <div>
-            <h1 class="h1-inscription-betacolor">Hutopy</h1>
-            <h1 class="h1-inscription-beta">Participez au développement de </h1>
 
-            <p class="para-inscription">
+
+
+            <p class="para-inscription" style="font-size: 1.4rem;">
               Étant au début de notre projet, vous pouvez nous contacter pour être ajouté à la liste des ambassadeurs et
               nous aider à créer la plateforme de vos rêves pour partager votre contenu. Nous recherchons des personnes
               passionnées et qui ont une vision d'un monde meilleur. Aidez-nous à grandir en nous donnant vos
@@ -41,7 +45,7 @@
 
     <div class="md:hidden flex flex-col items-center justify-center">
       <h1 class="h1-inscription-betacolor" style="margin-bottom: 35px;">Hutopy</h1>
-      <h1 class="h1-inscription-beta">Participez au développement de </h1>
+
 
 
       <div class="w-screen flex justify-center" style="margin-left: -5px; margin-right: -5px;">
@@ -80,7 +84,9 @@ import FormInscriptionBeta from '@/layouts/FormInscriptionBeta.vue';
 
 <style scoped>
 .contactpicture {
-  margin-top: 15px;
+  height: 800px;
+  width: auto;
+
   /* ajustez cette valeur selon votre besoin */
   margin-bottom: 45px;
   border-radius: 12px;
diff --git a/src/views/main/CreatorFolio copy.vue b/src/views/main/CreatorFolio copy.vue
deleted file mode 100644
index 040dd3d..0000000
--- a/src/views/main/CreatorFolio copy.vue	
+++ /dev/null
@@ -1,263 +0,0 @@
-<template>
-
-
-  <DefaultLayout></DefaultLayout>
-
-  <v-container> 
-
-  <div class="banner-container">
-    <img src="../../../images/guillaimeaime.png" class="banner-creator smooth-picture" style="margin-bottom: -80px;">
-  </div>
-
-  
-  <div class="banner-container ">
-    <img src="../../../images/guillaume.png" class="profile-picture">
-    <img src="../../../images/checkprofile.png" class="check-profile" style="margin-top: 5px;">
-
-  </div>
-  
-<div style="margin-top: 40px;">
-  <v-container class="label-creator" >
-  <v-row justify="center">
-    <v-col cols="12" sm="2" md="3" class="d-flex justify-center">
-      <v-card style="width: 425px;">
-        <v-card-title class="card-background text-center label-creator-texte-color">Guillaume Mousseau</v-card-title>
-      </v-card>
-    </v-col>
-    <v-col cols="12" sm="4" md="3" class="d-flex justify-center">
-      <v-card style="width: 425px;">
-        <v-card-title class="card-background text-center label-creator-texte-color">Créateur de contenus</v-card-title>
-      </v-card>
-    </v-col>
-  </v-row>
-</v-container>
-</div>
-
-
-
-
-</v-container>
-
-
-  <v-container fluid class="menu-creator-position">
-    <v-row>
-     <v-col cols="3" class="d-flex justify-end">
-  <!-- Menu à gauche -->
-  <v-card class="label-paiement-color" style="min-width: 300px;  max-width: 75%; max-width: 300px;">
-    <v-card-text>
-      Menu gauche
-      <v-row>
-        <v-col class="" cols="6">
-          <v-switch :model-value="true" color="primary" label="on"></v-switch>
-        </v-col>
-      </v-row>
-    </v-card-text>
-  </v-card>
-</v-col>
-
-<v-col cols="6" class="d-flex justify-center">
-  <!-- Contenu centré -->
-  <v-card class="flow-menu" style="max-width: 80; max-width: 1200px;">
-    <v-card-text class="color">
-      Contenu centré
-      <v-container>
-        <p>AESDAWDAESDAWDAESDAWDAESDAWD
-          AESDAWDAESDAWDAESDAWDAESDAWD
-          ...
-          
-          ...
-          sssAESDAWDAESDAWDAESDAWDAESDAWD
-          sss   AESDAWDAESDAWDAESDAWDAESDAWD
-          ...
-          
-          ...
-          sssAESDAWDAESDAWDAESDAWDAESDAWD
-          sss
-        </p>
-      </v-container>
-    </v-card-text>
-  </v-card>
-</v-col>
-
-
-      <v-col cols="3">
-        <!-- Menu à droite -->
-        <v-card class="label-paiement-color" style="max-width: 75%; max-width: 350px;">
-          <v-card-text>
-            <v-container>
-              <v-row>
-                <v-col>
-                  <H1 class="tips-h1">ENCOURAGEZ-MOI</H1>
-                </v-col>
-              </v-row>
-              <v-row>
-                <v-col>
-                  <v-sheet class="mx-auto" width="250">
-                    <v-form @submit.prevent>
-                      <v-text-field label="Montant ($)" style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
-                      <v-text-field label="Message" style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
-                      <v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4" block>Envoyez</v-btn>
-                    </v-form>
-                  </v-sheet>
-                </v-col>
-              </v-row>
-            </v-container>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
-
-  
-  <FooterLayout></FooterLayout>
-</template>
-
-<script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-
-
-</script>
-  
-<style scoped>
-.sticky-column {
-  position: sticky;
-  top: 0;
-}
-
-.profile-picture-position{
-  margin-top: 25;
-}
-
-.label-paiement-color{
-  color: rgba(163, 14, 121, 0.85); /* Couleur du texte (utilisez la couleur souhaitée) */
-  background-color: rgba(255, 255, 255, 0.2); /* Couleur de fond */
-  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4); /* Ombre */
-  
-}
-
-.tips-h1{
-  text-align: center;
-  font-weight: bold;
-  color: rgba(163, 14, 121, 0.85); /* Couleur du texte (utilisez la couleur souhaitée) */
-  font-size: 25px;
-}
-
-.test-color{
-  background-color: rgba(163, 14, 121, 0.1);
-}
-
-.check-profile {
-  width: 40px;
-  height: 40px;
-  margin-top: -90px;
-  margin-left: 140px;
-  position: absolute;
-}
-
-.label-tips
-{
-  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
-}
-
-.label-creator-texte-color {
-  color: white;
-}
-
-.menu-creator-position {
-  margin-top: -25px;
-  position: relative;
-}
-
-.label-creator {
-  margin-right: 43px;
-  margin-top: -160px;
-  position: relative;
-  z-index: -1;
-  /* Valeur inférieure pour placer derrière */
-}
-
-.card-background {
-  background-color: rgba(107, 0, 101, 1);
-  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
-}
-
-.flow-menu {
-  background-color: rgba(255, 255, 255, 0.3);
-  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.3);
-  border-radius: 10px;
-}
-
-.banner-container {
-  display: flex;
-  justify-content: center;
-}
-
-.banner-creator {
-  align-items: center;
-  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
-}
-
-.profile-picture {
-  border-radius: 50%;
-  width: 200px;
-  height: 200px;
-  position: relative;
-  top: -100px;
-  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
-  border: 2px solid rgba(163, 14, 121, 0.5);
-}
-
-.smooth-picture {
-  border-radius: 13px;
-}
-
-.column-container {
-  display: flex;
-  justify-content: center;
-  margin-top: 20px;
-}
-
-.column-creatorFolio {
-  flex-grow: 1.2;
-  /* La colonne centrale peut agrandir de 20% */
-  flex-shrink: 0;
-  /* Empêche la colonne centrale de rétrécir */
-  flex-basis: auto;
-  /* La colonne centrale prend sa taille de base */
-
-  text-align: center;
-  width: 100%;
-}
-
-.column-creatorFolio-side {
-  flex-grow: 0;
-  /* Les colonnes latérales ne peuvent pas agrandir */
-  flex-shrink: 0;
-  /* Empêche les colonnes latérales de rétrécir */
-  flex-basis: 200px;
-  /* Largeur fixe pour les colonnes latérales */
-  text-align: center;
-}
-
-.rgb-background {
-  background-color: rgba(163, 14, 121, 0.1);
-  width: 300px;
-  padding: 20px;
-}
-
-.top-aligned-column {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-}
-
-.center-column {
-  text-align: center;
-}
-
-.column {
-  flex: 1;
-}
-</style>
-
diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index dda7c70..969546e 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -1,130 +1,181 @@
 <template>
 
+
   <DefaultLayout></DefaultLayout>
 
+  <CreatorHeader></CreatorHeader>
 
-<h1>Dashboard</h1>
-  <v-container>
-    <div class="d-flex flex-colum flex-md-row justify-space-between">
-      <div 
-        class="w-100 pa-4 rounded-lg elevation-2"
-      >
-        TEST
-      </div>
+  <!-- PC-->
+  <div class="md:flex hidden items-center justify-between flex-col">
+
+    <v-container fluid class="menu-creator-position donate-menu">
+      <v-row>
+        <v-col cols="3" class="d-flex" style="justify-content: end;">
+          <!-- Menu à gauche -->
+          <v-card class="label-paiement-color"
+            style="max-width: 75%; max-height: 350px; min-width: 340px; position: sticky; top: 0;">
+            <v-card-text>
+              <v-container>
+                <v-row>
+                  <v-col>
+                    <h1 class="tips-h1">ENCOURAGEZ-MOI</h1>
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col>
+                    <v-sheet class="mx-auto" width="250">
+                      <v-form @submit.prevent>
+                        <v-text-field label="Montant ($)"
+                          style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+                        <v-text-field label="Message"
+                          style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+                        <v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
+                          class="mt-4" block>Envoyez</v-btn>
+                      </v-form>
+                    </v-sheet>
+                  </v-col>
+                </v-row>
+              </v-container>
+            </v-card-text>
+          </v-card>
+
+        </v-col>
 
 
+        <!-- Center -->
+        <v-col cols="6" class="d-flex flex-column justify-center" style="max-width: 1400px;">
+          <!-- Premier composant -->
+          <v-card class="flow-menu"
+            style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%;">
+            <v-card-text class="color">
+              <v-container>
+                <h1 style="margin-top: 25px;" class="h1profilemobile">MA MISSION</h1>
+                <h1 class="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024
+                </h1>
+                <v-img src="../../../images/guillaumepublication.jpg"></v-img>
+                <p class="text-justify pa-4" style="font-size: 1.2em">Ma mission est claire : mettre en lumière le
+                  côté
+                  humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion,
+                  d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions
+                  authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque
+                  entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi,
+                  quel
+                  est ton objectif pour cette année?</p>
+              </v-container>
+            </v-card-text>
+          </v-card>
 
-      <div 
-        class="w-100 pa-4 rounded-lg elevation-2"
-      >
-        TEST
-      </div>
+          <!-- Deuxième composant -->
+          <v-card class="flow-menu" style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto;">
+            <h1 style="margin-top: 25px;" class="h1profilemobile">PODCAST #01</h1>
+            <h1 class="card-date" style="align-items: center; margin-bottom: 4%; text-align: right; margin-right: 5%;">
+              10-03-2024 </h1>
+            <v-container style="height: 700px;">
+              <iframe width="100%" height="100%"
+                src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD"></iframe>
+            </v-container>
+
+            <p class="text-justify pa-4" style="font-size: 1.2em">Voici mon nouveau podcast!</p>
+          </v-card>
+        </v-col>
 
 
-
-    </div>
-
-  </v-container>
-
-
-
-  <v-layout column justify-center align-center>
-    <v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
-      <v-card class="card-background" style="margin-top: -30px;">
-        <!-- Remonter les cartes de 30px et limiter la largeur -->
-        <v-card-title class="text-center label-creator-texte-color">Guillaume Mousseau</v-card-title>
-      </v-card>
-    </v-flex>
-    <v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
-      <v-card class="card-background" style="margin-top: -30px;">
-        <!-- Remonter les cartes de 30px et limiter la largeur -->
-        <v-card-title class="text-center label-creator-texte-color">Créateur de contenus</v-card-title>
-      </v-card>
-    </v-flex>
-  </v-layout>
-
-
-
-
-
-
-
-
-  <v-container>
-    <v-row justify="center"> <!-- Centrage horizontal -->
-      <v-col cols="12" sm="6"> <!-- Taille de la colonne pour occuper la moitié de la largeur en plein écran -->
-        <div class="banner-container" style="width: 100%; max-width: 50vw; margin: auto;">
-          <!-- Utilisation de margin: auto; pour centrer -->
-          <img src="../../../images/guillaimeaime.png" class="banner-creator smooth-picture"
-            style="width: 100%; margin-bottom: -80px;">
-        </div>
-      </v-col>
-    </v-row>
-
-    <div class="banner-container">
-      <img src="../../../images/guillaume.png" class="profile-picture">
-      <img src="../../../images/checkprofile.png" class="check-profile">
-    </div>
-
-    <v-container class="label-creator">
-      <v-row justify="center">
-        <v-col cols="12" sm="2" md="3" class="d-flex justify-center"></v-col>
-        <v-col cols="12" sm="4" md="3" class="d-flex justify-center"></v-col>
+        <v-col cols="3" class="d-flex justify-end">
+          <!-- Menu à droite -->
+          <!-- Ajoutez ici votre menu de droite -->
+        </v-col>
       </v-row>
+
+
     </v-container>
 
-    <v-layout column justify-center align-center>
-      <v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
-        <v-card class="card-background" style="margin-top: -30px; max-width: 400px; margin-left: 460px;">
-          <!-- Remonter les cartes de 30px et limiter la largeur -->
-          <v-card-title class="text-center label-creator-texte-color">Guillaume Mousseau</v-card-title>
-        </v-card>
-      </v-flex>
-      <v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
-        <v-card class="card-background" style="margin-top: -30px; max-width: 400px; margin-left: 20px">
-          <!-- Remonter les cartes de 30px et limiter la largeur -->
-          <v-card-title class="text-center label-creator-texte-color">Créateur de contenus</v-card-title>
-        </v-card>
-      </v-flex>
-    </v-layout>
-  </v-container>
+
+  </div>
+
+
+
+  <!-- DonateMobile-->
+  <div class="md:hidden flex flex-col items-center justify-center">
+
+    <v-container style="width: 105%;">
+      <v-card class="vcard-descriptions-mobile">
+        <h1 class="h1profilemobile">Ma mission</h1>
+        <h2 clase="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024 </h2>
+
+        <v-img src="../../../images/guillaumepublication.jpg"></v-img>
+
+
+
+
+
+        <p class="text-justify pa-4" style="font-size: 1.2em">Ma mission est claire : mettre en lumière le côté humain
+          des entrepreneurs. Chaque
+          service,
+          chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif
+          est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs
+          et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui
+          méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?</p>
+
+      </v-card>
+
+      <SimpleVideoCard> </SimpleVideoCard>
+
+
+
+    </v-container>
+
+    <v-container class="footer-donate footer-donate-container" style=" position: sticky; top: 0; margin-bottom: -4%;">
+
+      <h1 class="tips-h1" style="margin-bottom: 1%;">ENCOURAGEZ-MOI</h1>
+
+
+
+      <v-btn style=" background-color: rgb(163, 14, 121); color: white;" rounded="xl" size="small" block>Faire un
+        don</v-btn>
+
+    </v-container>
+
+
+
+
+
+  </div>
+
+
+
+
+
+
 
   <FooterLayout></FooterLayout>
+
 </template>
 
-
-
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
+import CreatorHeader from '@/layouts/CreatorHeader.vue';
 
-  import { computed } from 'vue'
-  import { useDisplay } from 'vuetify'
+import SimpleVideoCard from '@/layouts/SimpleVideoCard.vue';
 
-  const { name } = useDisplay()
-
-  const height = computed(() => {
-    // name is reactive and
-    // must use .value
-    switch (name.value) {
-      case 'xs': return 220
-      case 'sm': return 400
-      case 'md': return 500
-      case 'lg': return 600
-      case 'xl': return 800
-      case 'xxl': return 1200
-    }
-
-    return undefined
-  })
 </script>
 
-
+<script>
+export default {
+  data() {
+    return {
+      overlayMenu: false,
+    };
+  },
+};
+</script>
 
 <style scoped>
 .sticky-column {
   position: sticky;
   top: 0;
+
+
 }
 
 .profile-picture-position {
@@ -141,6 +192,8 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
 
 }
 
+
+
 .tips-h1 {
   text-align: center;
   font-weight: bold;
@@ -153,42 +206,20 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
   background-color: rgba(163, 14, 121, 0.1);
 }
 
-.check-profile {
-  width: 40px;
-  height: 40px;
-  margin-top: -20px;
-  margin-left: 140px;
-  position: absolute;
-  z-index: 1;
-  /* Placez les levels derrière la photo de profil */
-}
 
 .label-tips {
   box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
 }
 
-.label-creator-texte-color {
-  color: white;
-}
+
 
 .menu-creator-position {
   margin-top: -25px;
   position: relative;
 }
 
-.label-creator {
-  margin-right: 43px;
-  margin-top: -160px;
-  position: relative;
-  z-index: -1;
-  /* Placez les levels derrière la photo de profil */
-  /* Valeur inférieure pour placer derrière */
-}
 
-.card-background {
-  background-color: rgba(107, 0, 101, 1);
-  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
-}
+
 
 .flow-menu {
   background-color: rgba(255, 255, 255, 0.3);
@@ -196,27 +227,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
   border-radius: 10px;
 }
 
-.banner-container {
-  display: flex;
-  justify-content: center;
-}
 
-.banner-creator {
-  align-items: center;
-  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
-}
-
-.profile-picture {
-  border-radius: 50%;
-  width: 200px;
-  height: 200px;
-  position: relative;
-  top: -25px;
-  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
-  border: 2px solid rgba(163, 14, 121, 0.5);
-  z-index: 1;
-  /* Assurez-vous que la photo de profil est au-dessus des autres éléments */
-}
 
 
 
diff --git a/src/views/main/HomeView.vue b/src/views/main/HomeView.vue
index 55fd36b..5a94661 100644
--- a/src/views/main/HomeView.vue
+++ b/src/views/main/HomeView.vue
@@ -4,7 +4,7 @@
 
     <!--PC -->
     <div class="md:flex hidden items-center justify-between flex-col">
-    
+
       <img src="../../../images/BannerGaspe.png" class="banner-image" alt="Bannière">
 
 
@@ -13,11 +13,11 @@
       <!-- Colonnes -->
       <v-container>
         <v-row>
-          <v-col cols="2" class="ml-4 ml-sm-0">
+          <v-col cols="1" class="ml-4 ml-sm-0">
             <!-- vide de gauche -->
           </v-col>
 
-          <v-col cols="8">
+          <v-col cols="9" style="margin-left: 3%;">
 
 
 
@@ -28,8 +28,11 @@
                 <v-col cols="6">
                   <v-card-text>
                     <div>
-                      <h2 style="text-align: center;">C'EST QUOI HUTOPY</h2>
-                      <p class="textjustify">Découvrez Hutopy, une plateforme révolutionnaire conçue pour célébrer
+                      <h2 style="margin-top: 30px; margin-bottom: 70px; font-size: 50px; text-align: center;">C'EST QUOI
+                        HUTOPY</h2>
+                      <p class="textjustify" style="margin-bottom: 75px; font-size: 1.5em;">Découvrez Hutopy, une
+                        plateforme révolutionnaire
+                        conçue pour célébrer
                         la créativité, l'authenticité et l'inspiration. Ici, chaque créateur trouve un espace pour
                         exprimer sa passion et partager ses œuvres avec une communauté engagée. Hutopy se distingue
                         par son engagement envers une expérience numérique enrichissante, offrant une interface
@@ -44,17 +47,19 @@
                         contenu. Bienvenue sur Hutopy, où vous pouvez créer votre propre univers.</p>
                     </div>
 
+                    <router-link :to="{ name: 'contact' }">
+                      <v-btn style=" background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4"
+                        block>
+                        CONNECTEZ-VOUS
+                      </v-btn>
+                    </router-link>
+
                   </v-card-text>
                 </v-col>
                 <v-col cols="6" class="mt-auto">
                   <v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"
-                    style="margin-bottom: 25px;"></v-img>
-                  <router-link :to="{ name: 'contact' }">
-                    <v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4"
-                      block>
-                      CONNECTEZ-VOUS
-                    </v-btn>
-                  </router-link>
+                    style="margin-bottom: 5px;"></v-img>
+
                 </v-col>
               </v-row>
             </v-container>
@@ -64,86 +69,86 @@
 
             <!-- Créer Profiter Inspirer  -->
 
-            <div style="margin-top: 30px;">
-              <v-container class="d-flex">
-                <v-container style="margin-top: 35px;" class="flex-grow-1">
-                  <div>
+            <div class="d-flex justify-center align-center">
+              <div>
+                <div style="margin-top: 30px;">
+                  <v-container class="d-flex ">
+
                     <v-hover v-slot="{ isHovering, props }">
-                      <v-card class="mx-auto" max-width="344" v-bind="props">
-                        <v-img src="../../../images/creer.png"></v-img>
+                      <v-card class=" mx-auto" max-width="400" v-bind="props">
+                        <v-img src="../../../images/creer.png" style="min-width: 344px;"></v-img>
                         <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                           contained>
                           <v-container>
-                            <v-card class="mx-auto" max-width="344" v-bind="props" color="#a30e79">
+                            <v-card class="mx-auto" max-width="400" v-bind="props" color="#a30e79">
                               <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
-                                CRÉER
-                              </h3>
-                              <p class="text-justify pa-10" style="font-size: 1em;">Libérez votre créativité sur Hutopy,
-                                où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de
-                                possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
+                                CRÉER</h3>
+                              <p class="text-justify pa-4" style="font-size: 1.2em; ">Libérez votre créativité sur
+                                Hutopy,
+                                où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli
+                                de possibilités
+                                infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
                             </v-card>
                           </v-container>
                         </v-overlay>
                       </v-card>
                     </v-hover>
-                  </div>
-                </v-container>
 
+                    <v-space style="margin-left: 30px;"></v-space>
 
-                <v-container style="margin-top: 35px;" class="flex-grow-1 ">
-                  <div>
                     <v-hover v-slot="{ isHovering, props }">
-                      <v-card class="mx-auto" max-width="344" v-bind="props">
-                        <v-img src="../../../images/profitez.png"></v-img>
+                      <v-card class="mx-auto" max-width="400" v-bind="props">
+                        <v-img src="../../../images/profitez.png" style="min-width: 344px;"></v-img>
                         <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                           contained>
                           <v-container>
-                            <v-card class="mx-auto" max-width="344" v-bind="props" color="#a30e79">
+                            <v-card class="mx-auto" max-width="400" v-bind="props" color="#a30e79">
                               <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
                                 PROFITER</h3>
-                              <p class="text-justify pa-10" style="">Plongez dans l'univers Hutopy et découvrez un
-                                espace
-                                où profiter rime avec
-                                s'enrichir. Savourez des contenus uniques, des interactions authentiques et une
-                                expérience
-                                personnalisée conçue pour éveiller vos sens et enrichir votre quotidien.</p>
+                              <p class="text-justify pa-4" style="font-size: 1.2em; ">Plongez dans l'univers Hutopy
+                                et découvrez un
+                                espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des
+                                interactions authentiques
+                                et une expérience personnalisée conçue pour éveiller vos sens et enrichir votre
+                                quotidien.</p>
                             </v-card>
                           </v-container>
                         </v-overlay>
                       </v-card>
                     </v-hover>
-                  </div>
-                </v-container>
+
+                    <v-space style="margin-left: 30px;"> </v-space>
 
 
 
-                <v-container style="margin-top: 35px;" class="flex-grow-1">
-                  <div>
                     <v-hover v-slot="{ isHovering, props }">
-                      <v-card class="mx-auto" max-width="344" v-bind="props">
-                        <v-img src="../../../images/inspirer.png"></v-img>
+                      <v-card class="mx-auto" max-width="400" v-bind="props">
+                        <v-img src="../../../images/inspirer.png" style="min-width: 344px;"></v-img>
                         <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                           contained>
                           <v-container>
-                            <v-card class="mx-auto" max-width="344" v-bind="props" color="#a30e79">
+                            <v-card class="mx-auto" max-width="400" v-bind="props" color="#a30e79">
                               <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
                                 INSPIRER</h3>
-                              <p class="text-justify pa-10" style="">Devenez une source d'inspiration sur Hutopy, en
-                                partageant votre vision,
-                                votre talent et vos histoires. Influencez positivement la communauté, éveillez la
-                                curiosité et
-                                inspirez les autres à poursuivre leurs rêves dans un cercle vertueux de créativité et
+                              <p class="text-justify pa-4" style="font-size: 1.2em; ">Devenez une source
+                                d'inspiration sur Hutopy, en
+                                partageant votre vision, votre talent et vos histoires. Influencez positivement la
+                                communauté, éveillez
+                                la curiosité et inspirez les autres à poursuivre leurs rêves dans un cercle
+                                vertueux de créativité et
                                 d'inspiration.</p>
                             </v-card>
                           </v-container>
                         </v-overlay>
                       </v-card>
                     </v-hover>
-                  </div>
-                </v-container>
-              </v-container>
+
+                  </v-container>
+                </div>
+              </div>
             </div>
 
+
             <!-- ILS SONT SUR HUTOPY -->
             <v-container>
               <v-card-text>
@@ -256,13 +261,14 @@
         <v-container>
           <v-card-text>
             <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;">
-                  </div>
+            </div>
             <h1 style="text-align: center; color: #a30e79; font-size: 2.2em; margin-bottom: 10%;">ILS SONT SUR HUTOPY
             </h1>
             <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;">
-                  </div>
+            </div>
 
-            <div class="d-flex justify-content-center" style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
+            <div class="d-flex justify-content-center"
+              style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
               <router-link :to="{ name: 'creatorfolio' }">
                 <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
                   style="border-radius: 50%; margin-right: 20px; width: 120px; height: 120px;" />
diff --git a/src/views/main/ProjectRoadmap.vue b/src/views/main/ProjectRoadmap.vue
new file mode 100644
index 0000000..c7b9ac7
--- /dev/null
+++ b/src/views/main/ProjectRoadmap.vue
@@ -0,0 +1,43 @@
+<template>
+    <DefaultLayout></DefaultLayout>
+    <v-container>
+        <v-img class="roadmap-image" src="../../../images/roadmapbanner.png"></v-img>
+
+    </v-container>
+
+    <FooterLayout></FooterLayout>
+</template>
+
+
+<script setup>
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import FooterLayout from '@/layouts/FooterLayout.vue';
+
+
+</script>
+
+
+<style>
+.footer-donate {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 3;
+}
+
+.footer-donate-container {
+
+    background-color: rgb(255, 255, 255);
+
+}
+
+.roadmap-image {
+    border-radius: 35px;
+    width: 50%;
+    /* reduces width by 50% */
+    height: auto;
+    /* maintains aspect ratio */
+
+}
+</style>