diff --git a/images/anonymelarge.png b/images/anonymelarge.png
new file mode 100644
index 0000000..b3f3071
Binary files /dev/null and b/images/anonymelarge.png differ
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 83b1759..7dddb6b 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -3,20 +3,35 @@
   <body style="background-color: #f4f4f4;">
 
     <!-- Version pour ordinateur -->
-    <v-card style="z-index: 9000; background-color: #ffff;" class="hidden-sm-and-down" hidden-sm-and-down elevation="5">
+    <v-card style="z-index: 1000; background-color: #ffff;" class="hidden-sm-and-down" hidden-sm-and-down elevation="5">
       <v-container style="z-index: 2000; margin-bottom: .8%; margin-top: -.3%; margin-right: 1%;">
         <v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
 
-
-
-          <v-col cols="auto" class="d-flex align-end justify-end">
-            <router-link :to="{ name: 'yourprofile' }">
-              <v-row class="d-flex align-center">
+          <v-menu :location="location">
+            <template v-slot:activator="{ props }">
+              <div class="d-flex align-center" v-bind="attrs" v-on="on">
                 <img src="/images/anonyme.png" class="header-profile-icon mr-2" alt="Logo">
-                <h1 class="mb-0 text-h5">ANONYME</h1>
-              </v-row>
-            </router-link>
-          </v-col>
+                <v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props">
+                  ANONYME
+                </v-btn>
+              </div>
+            </template>
+
+            <v-list style="padding: 0;"> <!-- Supprimer le padding pour que les boutons occupent toute la largeur -->
+              <v-list-item>
+                <router-link :to="{ name: 'yourprofile' }">
+                  <v-btn class="full-width-btn" flat>Mon profile</v-btn>
+                </router-link>
+              </v-list-item>
+              <v-list-item>
+
+                <v-btn class="full-width-btn" flat>Déconnexion</v-btn>
+
+              </v-list-item>
+            </v-list>
+          </v-menu>
+
+
         </v-row>
       </v-container>
     </v-card>
@@ -108,6 +123,18 @@ export default {
 </script>
 
 <style scoped>
+.full-width-btn {
+  width: 100%;
+
+  text-align: left;
+
+  padding-left: 24px;
+
+  padding-right: 24px;
+
+  z-index: 1001;
+}
+
 .mini-profile-picture {
   border-radius: 100px;
 }
diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index 0925180..1d28a9e 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -124,8 +124,8 @@
                     <v-list-item>
                       <v-dialog transition="dialog-top-transition" width="auto">
                         <template v-slot:activator="{ props: activatorProps }">
-                          <v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background" elevation="0"
-                                 outlined="false">
+                          <v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background"
+                            elevation="0" outlined="false">
                             <v-icon left class="mr-4">mdi-wallet</v-icon>
                             <p @click="isActive.value = false">Bourse</p>
                           </v-btn>
@@ -137,7 +137,7 @@
                             <div class="text-center" style=" margin-top: 2%; margin-bottom: 2%;">
                               <v-icon left size="48">mdi-wallet</v-icon>
                               <v-toolbar title="PORTEFEUILLE"
-                                         style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
+                                style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
                             </div>
                             <v-card-text class="text-h1 pa-12">
                               <v-row>
@@ -182,12 +182,12 @@
                           <v-card style="border-radius: 25px; margin-top: 3%; height: 30px;">
                             <v-row>
                               <v-col style="margin-right: -2%;" cols="1"
-                                     class="text-truncate text-center font-weight-bold">#T</v-col>
+                                class="text-truncate text-center font-weight-bold">#T</v-col>
                               <v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
-                                     class="text-truncate text-center font-weight-bold">$</v-col>
+                                class="text-truncate text-center font-weight-bold">$</v-col>
                               <v-col cols="2" class="text-truncate text-center font-weight-bold">Date</v-col>
                               <v-col cols="3" class="text-truncate text-center font-weight-bold"
-                                     style="margin-right: 2%; background-color: #fbccee">Name</v-col>
+                                style="margin-right: 2%; background-color: #fbccee">Name</v-col>
                               <v-col cols="5" class="text-truncate text-center font-weight-bold">message</v-col>
                             </v-row>
                           </v-card>
@@ -196,10 +196,10 @@
                             <v-row>
                               <v-col style="margin-right: -2%;" cols="1" class="text-truncate">1</v-col>
                               <v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
-                                     class="text-truncate">10$</v-col>
+                                class="text-truncate">10$</v-col>
                               <v-col cols="2" class="text-truncate">20-10-2025</v-col>
                               <v-col cols="3" class="text-truncate"
-                                     style="margin-right: 2%;  background-color: #fbccee">Pascal</v-col>
+                                style="margin-right: 2%;  background-color: #fbccee">Pascal</v-col>
                               <v-col cols="5" class="text-truncate">Good Job</v-col>
                             </v-row>
 
@@ -210,13 +210,7 @@
                   </v-list>
                 </v-col>
 
-                <!-- Log-out -->
-                <v-col cols="12" class="px-0 logout-button">
-                  <v-btn text class="d-flex align-start main-background align-center" elevation="0" outlined="false">
-                    <v-icon left class="mr-4">mdi-logout</v-icon>
-                    Déconnexion
-                  </v-btn>
-                </v-col>
+
               </v-container>
 
             </v-col>
@@ -453,14 +447,111 @@
 
 
     <FooterLayout></FooterLayout>
+    <v-dialog v-model="accepted" max-width="500">
+      <template v-slot:activator="{ on }">
+        <div class="text-center pa-4">
+          <v-btn @click="accepted = true" v-on="on">
+            Approuve
+          </v-btn>
+        </div>
+      </template>
+
+      <!-- Your custom dialog content -->
+      <v-card class="custom-dialog" style="background-color: #f4f4f4;">
+        <v-container>
+          <v-row justify="center">
+            <v-col cols="12" class="text-center">
+              <v-icon color=#a30e79 size="250">mdi-check-circle</v-icon>
+            </v-col>
+          </v-row>
+
+          <v-row justify="center">
+            <v-col cols="12">
+              <v-card-text style="font-weight: 600;">
+                Paiement complété
+              </v-card-text>
+              <v-card-text style="margin-top: -24px;">
+                Transaction : #
+              </v-card-text>
+
+              <v-card-text style="font-size: 1.2rem; text-align: center;">
+                Merci de supporter
+              </v-card-text>
+              <v-card-text style="font-weight: 600; font-size: 1.6rem; text-align: center;">
+                Guillaume Mousseau
+              </v-card-text>
+
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col cols="12">
+              <v-card-actions class="justify-end">
+                <v-btn text @click="accepted = false">Ok</v-btn>
+              </v-card-actions>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card>
+
+
+
+    </v-dialog>
+
+    <v-dialog v-model="decline" max-width="500">
+      <template v-slot:activator="{ on }">
+        <div class="text-center pa-4">
+          <v-btn @click="decline = true" v-on="on">
+            Decline
+          </v-btn>
+        </div>
+      </template>
+
+      <!-- Your custom dialog content -->
+      <v-card class="custom-dialog" style="background-color: #f4f4f4;">
+        <v-container>
+          <v-row justify="center">
+            <v-col cols="12" class="text-center">
+              <v-icon color="black" size="250">mdi-cancel</v-icon>
+            </v-col>
+          </v-row>
+
+          <v-row justify="center">
+            <v-col cols="12">
+              <v-card-text style="font-size: 2rem; font-weight: 600; text-align: center;">
+                Paiement refusé
+              </v-card-text>
+
+
+              <v-card-text style="font-size: 1rem; text-align: center;">
+                Une erreur s'est produit
+              </v-card-text>
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col cols="12">
+              <v-card-actions class="justify-end">
+                <v-btn text @click="decline = false">Ok</v-btn>
+              </v-card-actions>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card>
+
+
+
+    </v-dialog>
   </div>
 </template>
 
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
+import { ref } from 'vue';
 import StripePayment from '../StripePayment.vue';
-
+const accepted = ref(false);
+const decline = ref(false);
 
 let imageSrc = '../../../images/guillaimeaime3x.png';
 let profilePicture = '../../../images/guillaume.png';
@@ -469,9 +560,9 @@ let name = 'Guillaume Mousseau'
 let title = 'Créateur de contenus'
 let drawerbottom = false
 let navigationItems = [
-    { icon: 'mdi-home', text: 'Accueil', link: 'home' },
-    { icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
-    { icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
+  { icon: 'mdi-home', text: 'Accueil', link: 'home' },
+  { icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
+  { icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
 ];
 let tools = [
   { icon: 'mdi-wallet', text: 'Bourse', link: '/portefeuille' },
@@ -479,8 +570,8 @@ let tools = [
 
 
 let items = [
-  {icon: "icon", text: "text"},
-  {icon: "icon2", text: "text2"},
+  { icon: "icon", text: "text" },
+  { icon: "icon2", text: "text2" },
 ]
 
 </script>
diff --git a/src/views/main/HomeView.vue b/src/views/main/HomeView.vue
index b8e528b..06e910f 100644
--- a/src/views/main/HomeView.vue
+++ b/src/views/main/HomeView.vue
@@ -5,270 +5,220 @@
     <div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
 
       <!--Logo & bouttons -->
-      <v-container class="d-flex justify-center align-center">
-        <div style="margin-left: 20%;">
-          <v-row>
-
-            <img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
-            <RouterLink :to="{ name: 'login' }">
-              <v-btn size="large"
-                style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100px;"
-                light elevation="0">
-                Connexion
-              </v-btn>
-            </RouterLink>
-            <RouterLink :to="{ name: 'contact' }">
-              <v-btn size="large"
-                style="margin-left: 50%; margin-top: 48%; min-width: 150px; max-width: 200px; border-radius: 40px;"
-                color="rgb(107, 0, 101)" outlined elevation="0">
-                Inscription
-              </v-btn>
-            </RouterLink>
-
-          </v-row>
-
-
-        </div>
+      <v-container class="d-flex justify-center align-center container-spacer header-container">
+        <v-row justify="center" align="center">
+          <v-col></v-col>
+          <v-col cols="5" xl="4" xxl="4">
+            <v-img class="profile-banner" src="../../../images/hutopy.png"></v-img>
+          </v-col>
+          <v-col>
+            <v-row>
+              <RouterLink :to="{ name: 'login' }">
+                <v-btn size="large" style="background-color: #F4F4F4;" light elevation="0">
+                  Connexion
+                </v-btn>
+              </RouterLink>
+              <RouterLink :to="{ name: 'contact' }">
+                <v-btn size="large" style="border-radius: 40px;" color="rgb(107, 0, 101)" outlined elevation="0">
+                  Inscription
+                </v-btn>
+              </RouterLink>
+            </v-row>
+          </v-col>
+        </v-row>
       </v-container>
 
-      <div>
-        <v-container style="margin: 0; padding: 0;">
-          <v-row style="justify-content: center;">
-            <img src="../../../images/homepage/bannierehomepage.png"
-              style="max-width: 100%; height: auto; max-height: 50vh; min-width: 1000px; min-height: 450px; object-fit: cover; border-radius: 20px; margin: auto;">
-          </v-row>
-        </v-container>
-      </div>
-
-
-      <!-- Colonnes Créer Partager Inspirer-->
-      <v-container>
+      <!--Header -->
+      <v-container class="container-spacer">
         <v-row>
-          <!-- vide de gauche -->
-          <v-col cols="1" class="ml-4 ml-sm-0">
-          </v-col>
-          <!-- Colonne Centre -->
-          <v-col cols="9" style="margin-left: 4%;">
-
-            <!-- Créer Profiter Inspirer  -->
-
-            <div class="d-flex justify-center align-center">
-              <div>
-                <div style="margin-top: 40px;">
-                  <v-container class="d-flex justify-center align-center" style="width: 128vh;">
-                    <v-hover v-slot="{ isHovering, props }">
-                      <v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto" :max-width="600"
-                        v-bind="props">
-                        <v-img src="../../../images/homepage/creer.png"
-                          style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
-                        <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
-                          contained>
-                          <v-container>
-                            <v-card class="mx-auto" :max-width="600" 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-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 style="margin-left: 5vw;"></div>
-
-                    <v-hover v-slot="{ isHovering, props }">
-                      <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
-                        v-bind="props">
-                        <v-img src="../../../images/homepage/partager.png"
-                          style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
-                        <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
-                          contained>
-                          <v-container>
-                            <v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
-                              <h3 class="white--text"
-                                style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }">
-                                PROFITER</h3>
-                              <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 style="margin-left: 5vw;"></div>
-
-                    <v-hover v-slot="{ isHovering, props }">
-                      <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
-                        v-bind="props">
-                        <v-img src="../../../images/homepage/inspirer.png"
-                          style="border-radius: 20px; width: 80vw;"></v-img>
-                        <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
-                          contained>
-                          <v-container>
-                            <v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
-                              <h3 class="white--text"
-                                style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }">
-                                INSPIRER</h3>
-                              <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>
-                  </v-container>
-                </div>
-              </div>
-            </div>
-
-
-
-
-
-
-
-          </v-col>
-          <!-- vide de droite -->
-          <v-col cols="2" class="mr-4 mr-sm-0">
+          <v-spacer></v-spacer>
+          <v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
+            <v-img class="profile-banner banner-homepage" src="../../../images/homepage/bannierehomepage.png"
+              style="border-radius: 20px;"></v-img>
           </v-col>
+          <v-spacer></v-spacer>
         </v-row>
       </v-container>
 
-      <!-- Description D'hutopy -->
-
-      <v-container style="max-width: 65%; min-width: 1150px;" class="custom-width">
-        <v-row class="justify-center">
-          <v-col cols="6">
-            <v-col cols="11" class="d-flex justify-center align-center">
-              <v-img style="margin-top: -5%; min-width: 350px;" src="../../../images/homepage/votrehutopy.png"></v-img>
-            </v-col>
-            <v-col cols="auto" md="10">
-              <p class="text-center text-justify votre_hutopy_fontsize"
-                style="margin-top: 3%; margin-bottom: 5%; max-width: 900px; ">
-                Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
-                cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
-                écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer
-                mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
-                communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
-                la créativité.
-              </p>
-              <p class="text-center text-justify votre_hutopy_fontsize"
-                style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
-                Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
-                conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
-                réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
-                autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
-                prendre vie.
-              </p>
-              <v-col cols="auto" class="d-flex justify-center align-center">
-                <RouterLink style="width: 450px;" :to="{ name: 'contact' }">
-                  <v-btn size="x-large" style="width: 400px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
-                    elevation="0">
-                    Inscription
-                  </v-btn>
-                </RouterLink>
+      <!-- Créer Profiter Inspirer  -->
+      <v-container class="container-spacer">
+        <v-row class="d-flex justify-center creer-profiter-inspirer-row">
+          <v-col cols="10" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
+            <v-row justify="center" align="center" class="créer-profiter-inspirer-row">
+              <v-col cols="4" sm="4" md="4">
+                <v-hover v-slot="{ isHovering, props }">
+                  <v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto card-size" v-bind="props">
+                    <v-img src="../../../images/homepage/creer.png"
+                      style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
+                    <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
+                      <v-container>
+                        <v-card class="mx-auto" :max-width="600" 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-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>
               </v-col>
-            </v-col>
+              <v-col cols="4" sm="4" md="4">
+                <v-hover v-slot="{ isHovering, props }">
+                  <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size " v-bind="props">
+                    <v-img src="../../../images/homepage/partager.png"
+                      style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
+                    <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
+                      <v-container>
+                        <v-card class="mx-auto" :max-width="600" 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-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>
+              </v-col>
+              <v-col cols="4" sm="4" md="4">
+                <v-hover v-slot="{ isHovering, props }">
+                  <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size" v-bind="props">
+                    <v-img src="../../../images/homepage/inspirer.png"
+                      style="border-radius: 20px; width: 80vw;"></v-img>
+                    <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065" contained>
+                      <v-container>
+                        <v-card class="mx-auto" :max-width="600" 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-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>
+              </v-col>
+            </v-row>
           </v-col>
 
-          <!-- Colonne de droite -->
-          <v-col cols="3">
-            <v-img src="../../../images/homepage/grinding.png"
-              style="margin-bottom: 4%; border-radius: 30px; width: 80px;"></v-img>
-            <v-img src="../../../images/homepage/girlarmy.png" style="border-radius: 30px; min-width: 250px;"></v-img>
-          </v-col>
-          <v-col cols="3" style>
-            <v-img src="../../../images/homepage/microphone.png"
-              style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img>
-            <v-img src="../../../images/homepage/girlvr.png"
-              style="border-radius: 30px; min-width: 250px; max-height: 350;"></v-img>
+        </v-row>
+      </v-container>
+
+      <!-- Votre Hutopy  -->
+      <v-container class="container-spacer">
+        <v-row justify="center">
+          <v-col cols="7" xs="12" sm="11" md="12" lg="10" xl="7" xxl="6">
+            <v-row justify="center">
+              <v-col cols="6" md="7" lg="6">
+                <v-img cols="12" style="margin-top: -5%; min-width: 350px;"
+                  src="../../../images/homepage/votrehutopy.png"></v-img>
+
+                <p class="text-center text-justify votre_hutopy_fontsize"
+                  style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
+                  Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
+                  cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
+                  écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer
+                  mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
+                  communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
+                  la créativité.
+                </p>
+                <p class="text-center text-justify votre_hutopy_fontsize"
+                  style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
+                  Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
+                  conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
+                  réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
+                  autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
+                  prendre vie.
+                </p>
+
+                <v-col cols="12" class="text-center">
+                  <RouterLink style="width: 450px;" :to="{ name: 'contact' }">
+                    <v-btn size="x-large" style="width: 300px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
+                      elevation="0">
+                      Inscription
+                    </v-btn>
+                  </RouterLink>
+                </v-col>
+              </v-col>
+
+
+              <v-col cols="6" md="5" lg="6">
+                <v-row justify="center" class="votre-hutopy-img">
+                  <v-col cols="6" sm="12" md="12" lg="6">
+                    <v-img style="border-radius: 30px;" src="../../../images/homepage/grinding.png"
+                      class="hidden-md-and-down" hidden-and-down></v-img>
+                  </v-col>
+                  <v-col cols="6" sm="12" md="12" lg="6">
+                    <v-img style="border-radius: 30px;" src="../../../images/homepage/microphone.png"></v-img>
+                  </v-col>
+                  <v-col cols="6" sm="12" md="6" lg="6">
+                    <v-img style="border-radius: 30px;" src="../../../images/homepage/girlarmy.png"></v-img>
+                  </v-col>
+                  <v-col cols="6" sm="6" md="6" lg="6">
+                    <v-img style="border-radius: 30px;" class="d-none d-md-block"
+                      src="../../../images/homepage/girlvr.png"></v-img>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
           </v-col>
         </v-row>
       </v-container>
 
-      <!-- ILS SONT SUR HUTOPY -->
-      <v-container style="max-width: 1500px;">
-        <v-card-text>
-          <h1 style="text-align: center;  margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
+
+
+      <v-row style="margin-top: 40px; margin-bottom: 60px;">
+        <v-spacer></v-spacer>
+
+        <v-col cols="7" xs="12" sm="12" md="12" lg="10" xl="6" xxl="7">
+          <h1 style=" margin-bottom: 70px; text-align: center;  font-size: 4rem; font-weight: bold; color: #24393c">
             Ils sont sur Hutopy.</h1>
 
-
-          <v-container style="margin-top: 25px; margin-bottom: -6%; max-width:  1200px;">
+          <v-spacer></v-spacer>
+          <v-col>
 
 
             <v-row justify="center" class="profile-images">
-
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
-                  <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image  ">
-
+                  <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image  ">
                 </router-link>
-                <RouterLink :to="{ name: 'creatorfolio' }">
-                  <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
-                    color="rgb(107, 0, 101)" outlined elevation="10">
-                    Inscription
-                  </v-btn>
-                </RouterLink>
-
-
               </v-col>
-
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
                   <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
-
                 </router-link>
-                <RouterLink :to="{ name: 'creatorfolio' }">
-                  <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
-                    color="rgb(107, 0, 101)" outlined elevation="10">
-                    Inscription
-                  </v-btn>
-                </RouterLink>
-
-
               </v-col>
-
-
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
-                  <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
-
+                  <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image">
                 </router-link>
-                <RouterLink :to="{ name: 'creatorfolio' }">
-                  <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
-                    color="rgb(107, 0, 101)" outlined elevation="10">
-                    Inscription
-                  </v-btn>
-                </RouterLink>
-
-
               </v-col>
 
-
             </v-row>
+          </v-col>
+          <v-spacer></v-spacer>
+
+        </v-col>
+        <v-spacer></v-spacer>
+      </v-row>
+
+
+
 
 
-          </v-container>
-        </v-card-text>
-      </v-container>
 
 
-      <!-- Fin Description D'hutopy -->
 
     </div>
 
@@ -277,7 +227,8 @@
       <div>
 
 
-        <img src="../../../images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">
+        <img src="../../../images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière"
+          style="margin-top: -100px;">
 
         <div>
           <v-card-text>
@@ -392,18 +343,19 @@
     </v-snackbar>
 
     <v-list style="background-color: #F4F4F4;" lines="one">
-      <v-list-item v-for=" item  in  itemList " :key="item" :title="item.firstName" :subtitle="item.lastName"></v-list-item>
+      <v-list-item v-for=" item  in  itemList " :key="item" :title="item.firstName"
+        :subtitle="item.lastName"></v-list-item>
     </v-list>
     <FooterLayout></FooterLayout>
   </div>
 
-  s
+
 </template>
 
 <script async setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
-import {useClient} from "@/plugins/api.js";
+import { useClient } from "@/plugins/api.js";
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
@@ -436,116 +388,37 @@ const goToLoginPage = () => {
 <style src="../../cssstyle/homeView.css"></style>
 
 <style scoped>
-.phototexte {
-  margin-left: 10px;
-  margin-right: 10px;
-
-}
-
-.layer1-background {
-  background-color: rgba(163, 14, 121, 0.03);
-  border-radius: 20px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-
-}
-
 .layer1-backgroundmobile {
   background-color: rgba(163, 14, 121, 0.1);
   border-radius: 20px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-
 }
 
 .layer2-backgroundmobile {
-
   border-radius: 20px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-
 }
 
-
-
-.layer2-background {
-  background-color: rgba(107, 0, 101, 0.02);
-  border-radius: 20px;
-}
-
-.v-container {
+.container-spacer {
   margin-bottom: 50px;
   /* Augmente l'espace entre les v-containers */
 }
 
-.h2ilssontsurutopy {
-  font-weight: bold;
-  font-size: 2rem;
-  margin-bottom: 100px;
-  /* Ajoute de l'espace en bas du titre */
-  margin-top: 25px;
-}
-
-.h2ilssontsurutopytitle {
-  color: rgba(107, 0, 101, 0.85);
-}
-
 .profile-images {
-  gap: 90px;
-  /* Espace entre les images */
-  margin-top: 50px;
-  /* Ajoute de l'espace en haut des images */
-
-
-
+  gap: 15px;
+  transform: scale(.92);
 }
 
 .profile-image {
   width: auto;
-  /* Largeur des images */
-
-  /* Hauteur des images */
   border-radius: 35px;
-  /* Coins arrondis */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
 }
 
-.image-wrapper {
-  display: flex;
-  justify-content: center;
-  margin-top: 30px;
-  margin-bottom: 30px;
-}
-
-.image-container {
-  position: relative;
-  width: 23vw;
-  /* Utilisation de 20% de la largeur de la vue */
-  margin: 5px 8px;
-}
-
 .image {
   width: 100%;
   height: auto;
   border-radius: 8px;
-
-}
-
-.v-card-text h2 {
-  margin-bottom: 20px;
-  /* Ajoute de l'espace en bas du titre h2 */
-  font-size: 2rem;
-  /* Taille du texte */
-  font-weight: bold;
-  /* Texte en gras */
-  color: rgba(163, 14, 121, 0.85);
-  /* Couleur du texte (utilisez la couleur souhaitée) */
-}
-
-.v-card-text p {
-  font-size: 1rem;
-  /* Taille du texte */
-}
-
-.textjustify {
-  text-align: justify;
 }
 
 .overlay {
@@ -560,17 +433,13 @@ const goToLoginPage = () => {
   display: flex;
   text-align: left;
   font-size: 1.5rem;
-
-
   align-items: center;
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
 }
 
 .banner-image {
-
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
-  /* Ombre douce */
 }
 
 .image-container:hover .overlay {
@@ -587,8 +456,6 @@ const goToLoginPage = () => {
   position: relative;
   max-width: 100vw;
   /* Limiter la largeur de la v-container à la largeur de l'écran */
-
-
 }
 
 .v-card {
@@ -602,61 +469,189 @@ const goToLoginPage = () => {
   border-radius: 8px;
 }
 
-.overlay p.image-text {
-  display: none;
-}
-
-.overlay:hover p.image-text {
-  display: block;
-}
-
 body {
   background-color: #F4F4F4;
 }
 
-.votre_hutopy_fontsize {
-  font-size: .2em;
-}
 
-@media (max-width: 475px) {
+
+@media (max-width: 600px) {
   .votre_hutopy_fontsize {
     font-size: 0.55em;
   }
 }
 
-@media (min-width: 476px) and (max-width: 640px) {
+
+@media (min-width: 601px) and (max-width: 889px) {
   .votre_hutopy_fontsize {
-    font-size: 0.9em;
+    font-size: 1.06em;
+  }
+
+  .créer-profiter-inspirer-row {
+    margin-left: -120px;
+    margin-top: -120px
+  }
+
+  .card-size {
+    transform: scale(.7);
+  }
+
+  .banner-homepage {
+    transform: scale(1.19)
+  }
+
+  .votre-hutopy-img {
+    margin-top: -30px;
+  }
+
+  .header-container {
+    margin-top: 30px;
   }
 }
 
-@media (min-width: 641px) and (max-width: 768px) {
+
+@media (min-width: 890px) and (max-width: 960px) {
+
+  .header-container {
+    margin-top: 30px;
+  }
+
   .votre_hutopy_fontsize {
-    font-size: 0.9em;
+    font-size: 1.2em;
+  }
+
+  .card-size {
+    transform: scale(.75);
+  }
+
+  .créer-profiter-inspirer-row {
+    margin-left: -80px;
+    margin-top: -130px
+  }
+
+  .banner-homepage {
+    transform: scale(1.07)
+  }
+
+  .votre-hutopy-img {
+    margin-top: -40px;
   }
 }
 
-@media (min-width: 769px) and (max-width: 1024px) {
-  .votre_hutopy_fontsize {
-    font-size: 0.9em;
-  }
-}
 
-@media (min-width: 1025px) and (max-width: 1536px) {
-  .votre_hutopy_fontsize {
-    font-size: 0.9em;
-  }
-}
-
-@media (min-width: 1537px) and (max-width: 1920px) {
+@media (min-width: 961px) and (max-width: 1280px) {
   .votre_hutopy_fontsize {
     font-size: 1.1em;
   }
-}
 
-@media (min-width: 1921px) {
-  .votre_hutopy_fontsize {
-    font-size: 1.5em;
+  .banner-homepage {
+    transform: scale(1.06)
+  }
+
+  .card-size {
+    transform: scale(.90);
+  }
+
+  .créer-profiter-inspirer-row {
+    margin-left: -55px;
+    margin-top: -90px
+  }
+
+  .in-between-image {
+    margin-left: -100px;
+  }
+
+  .profile-images {
+    gap: 15px;
+    transform: scale(.72);
+  }
+
+  .votre-hutopy-img {
+    margin-top: -30px;
   }
 }
+
+
+@media (min-width: 1281px) and (max-width: 1920px) {
+  .votre_hutopy_fontsize {
+    font-size: 1.2em;
+  }
+
+  .card-size {
+    transform: scale(1);
+  }
+
+  .banner-homepage {
+    transform: scale(1.03)
+  }
+
+  .créer-profiter-inspirer-row {
+    margin-left: -25px;
+    margin-top: -70px
+  }
+
+  .profile-images {
+    gap: 15px;
+    transform: scale(.64);
+  }
+
+  .votre-hutopy-img {
+    margin-top: 65px;
+  }
+}
+
+@media (min-width: 1921px) and (max-width: 2560px) {
+  .votre_hutopy_fontsize {
+    font-size: 1.2em;
+  }
+
+  .créer-profiter-inspirer-row {
+    margin-top: -60px;
+
+  }
+
+
+
+  .banner-homepage {
+    transform: scale(1.0)
+  }
+
+  .profile-images {
+    gap: 15px;
+    transform: scale(.90);
+  }
+
+  .votre-hutopy-img {
+    margin-top: 65px;
+  }
+
+}
+
+@media (min-width: 2561px) {
+  .votre_hutopy_fontsize {
+    font-size: 1.2em;
+  }
+
+  .créer-profiter-inspirer-row {
+    margin-top: -50px;
+  }
+
+  .card-size {
+    transform: scale(.98);
+  }
+
+  .banner-homepage {
+    transform: scale(.98)
+  }
+
+  .profile-images {
+    gap: 15px;
+    transform: scale(.978);
+  }
+
+  .votre-hutopy-img {
+    margin-top: -10px;
+  }
+
+}
 </style>
diff --git a/src/views/main/YourProfile.vue b/src/views/main/YourProfile.vue
index c57356e..f2706f1 100644
--- a/src/views/main/YourProfile.vue
+++ b/src/views/main/YourProfile.vue
@@ -1,24 +1,116 @@
 <template>
-  <DefaultLayout></DefaultLayout>
-  <main class="top-aligned-column">
+
+  <body style="background-color:#f4f4f4">
+    <DefaultLayout></DefaultLayout>
+
+    <v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;"></v-row>
+
+    <v-row justify="center">
+      <v-col cols="12">
+        <v-img class="profile-banner " max-height="375" :src="bannerImageUrl" cover
+          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
+      </v-col>
+    </v-row>
+    <v-row style="background-color: #6b0065; height: 100px; margin-top: -0px;" align="center">
+      <v-col cols="12" class="text-right">
+        <v-btn style="margin-right: 3%" @click="editBannerImage"> <v-icon>mdi-pencil</v-icon></v-btn>
+      </v-col>
+    </v-row>
+
+    <v-row justify="center">
+
+    </v-row>
 
 
-    <div class="column">
+    <v-container style="max-width: 800px; margin-top: -100px" class="d-flex justify-center align-center">
+      <v-container>
+        <v-row>
+          <v-col style="background-color: white; border-radius: 30px;" class=" col-shadow">
+            <v-row style="margin-bottom: 20px;">
+              <v-spacer></v-spacer>
+              <v-col style="margin-top: -70px;">
+                <v-row>
+                  <v-img class="your-profile-picture" :src="profilePictureUrl"></v-img>
+                </v-row>
+                <v-col>
+                  <v-btn style="margin-top: -30px; margin-left: " @click="editProfilePicture">
+                    <v-icon>mdi-pencil</v-icon>
+                  </v-btn>
+                </v-col>
 
-    </div>
+              </v-col>
+              <v-spacer></v-spacer>
+            </v-row>
+            <p class="text-center" style="margin-bottom: 10px; font-size: 2rem; font-weight: 600;">{{ userName }}</p>
+            <p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">Informations personnelles</p>
 
-    <div class="center-column column">
-      <p>YourProfile</p>
-    </div>
+            <v-form @submit.prevent="updateProfile">
+              <v-text-field v-model="firstName" label="Prénom" :readonly="!isEditing"></v-text-field>
+              <v-text-field v-model="lastName" label="Nom" :readonly="!isEditing"></v-text-field>
+              <v-text-field v-model="description" label="Description" :readonly="!isEditing"></v-text-field>
 
-    <div class="column">
+            </v-form>
+            <v-col class="text-right"> <!-- Aligner le contenu à droite -->
 
-    </div>
-  </main>
+              <router-link :to="{ name: 'creatorfolio' }" class="">
+                <v-btn style="margin-right: 20px;">Retour</v-btn>
+              </router-link>
+              <v-btn v-if="!isEditing" @click="isEditing = true">Éditer</v-btn>
+              <v-btn v-else @click="isEditing = false; updateProfile">Enregistrer</v-btn>
+            </v-col>
+
+          </v-col>
+
+        </v-row>
+      </v-container>
+    </v-container>
+    <FooterLayout></FooterLayout>
+  </body>
 </template>
-  
+
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import FooterLayout from '@/layouts/FooterLayout.vue';
+import { ref } from 'vue';
+
+
+
+const profilePictureUrl = ref('../../../images/guillaume.png');
+const bannerImageUrl = ref('../../../images/guillaimeaime3x.png');
+
+let userName = 'Guillaume Mousseau';
+const firstName = ref('Votre prénom');
+const lastName = ref('Votre nom');
+const description = ref('Votre description');
+const password = ref('Votre mot de passe');
+const isEditing = ref(false);
+
+const editProfilePicture = () => {
+  // Mettez ici la logique pour changer la photo de profil
+};
+
+const editBannerImage = () => {
+  // Mettez ici la logique pour changer la bannière de profil
+};
+
+const updateProfile = () => {
+  // Mettez ici la logique pour mettre à jour le profil
+};
 </script>
-  
- 
\ No newline at end of file
+
+<style>
+.your-profile-picture {
+  width: 300px;
+  border-radius: 40px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
+
+}
+
+.row-shadow {
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
+}
+
+.col-shadow {
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+}
+</style>
