diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 7b69bb5..701d1bf 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -4,16 +4,15 @@
             style="background-color: #f4f4f4; margin-top: 3%;">
 
             <body style="background-color: #f4f4f4;">
-                <v-container style="background-color: #f4f4f4;">
+                <v-container style=" background-color: #f4f4f4;">
                     <v-row align="center" justify="center">
-                        <!-- Colonne de l'image -->
-                        <v-col cols="8" lg="8" style="align-items: center;">
-                            <img class="headermarginleft" style="border-radius: 20px; max-width: 90%;"
-                                src="../../../images/loginpage/loginhutopy.png">
+                        <!-- Header -->
+                        <v-col cols="8" lg="8" md="10" sm="10" xs="10" style=" align-items: center; ">
+                            <img class="login-picture" src="../../../images/loginpage/loginhutopy.png">
                         </v-col>
 
-                        <!-- Colonne du contenu -->
-                        <v-col cols="3" lg="4" md="5" sm="6" xs="6">
+                        <!-- Connexion-objects -->
+                        <v-col cols="3" lg="4" md="10" sm="10" xs="10" class="connexion-container">
                             <h1 class="text-center display-6 h1-connexion">Connexion</h1>
                             <h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous
                                 vous connecter à votre compte?</h2>
@@ -34,16 +33,16 @@
                             <v-card-actions>
                                 <div class="flex-grow-1"></div>
                                 <router-link :to="{ name: 'home' }">
-                                    <v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
+                                    <v-btn color="#6b0065" class="ma-2 btnhome">Accueil</v-btn>
                                 </router-link>
-                                <v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
+                                <v-btn color="primary" class="ma-2 btnhome" @click="login">Login</v-btn>
                             </v-card-actions>
                             <div class="text-center">
-                                <h2 class="text-center display-3 h2-connexion">
+                                <h2 class="text-center display-3 h2pasinscrit">
                                     Pas encore
                                     inscrit?</h2>
                                 <router-link :to="{ name: 'contact' }">
-                                    <v-btn color="#6b0065"
+                                    <v-btn color="#6b0065" class="inscriptionbtn"
                                         style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
                                 </router-link>
                             </div>
@@ -58,11 +57,11 @@
 
         <div class="sm:hidden flex flex-col items-center justify-start"
             style="background-color: #f4f4f4; height: 100vh;">
-            <img style="box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; "
+            <img style="margin-top: 10%;  width: 350px;  box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-radius: 25px; "
                 src="../../../images/loginpage/loginhutopy.png">
 
-            <h1 class="text-center">Connexion</h1>
-            <h2 class="text-center">Comment souhaitez-vous
+            <h1 class="h1-connexion">Connexion</h1>
+            <h2 class="h2-connexion">Comment souhaitez-vous
                 vous connecter à votre compte?</h2>
 
             <v-form style="max-width: 400px; width: 350px;">
@@ -79,11 +78,11 @@
                 <v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
             </v-card-actions>
             <div class="text-center">
-                <h2 class="text-center display-3 h2-connexion">
+                <h2 class="h2pasinscrit">
                     Pas encore
                     inscrit?</h2>
                 <router-link :to="{ name: 'contact' }">
-                    <v-btn color="#6b0065"
+                    <v-btn color="#6b0065" class="inscriptionbtn"
                         style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
                 </router-link>
             </div>
@@ -111,6 +110,7 @@ let errorSnackBar = ref(false);
 
 const goHome = () => {
     router.push('/');
+
 }
 
 
@@ -126,7 +126,7 @@ async function login() {
 
 </script>
 
-<style>
+<style scoped>
 .h1-connexion {
     font-size: 0.55em;
 }
@@ -139,99 +139,273 @@ async function login() {
     margin-bottom: -10%;
 }
 
-.logincol {
-    cols: 3;
-}
 
 
-@media (max-width: 475px) {
+@media (min-width: 300px) {
     .h1-connexion {
-        font-size: 1em;
-    }
-}
-
-@media (min-width: 476px) and (max-width: 640px) {
-    .h1-connexion {
-        font-size: 1em;
-
-    }
-}
-
-@media (min-width: 641px) and (max-width: 768px) {
-    .h1-connexion {
-        font-size: 1em;
+        font-size: 2em;
+        margin-bottom: 5%;
     }
 
     .h2-connexion {
-        font-size: 1em;
+        font-size: 1.1em;
         margin-bottom: 5%;
+
+        text-align: center;
+    }
+
+    .h2pasinscrit {
+        margin-bottom: 6%;
+        font-size: 1.1em;
+    }
+
+    .inscriptionbtn {
+        transform: scale(.7);
+    }
+}
+
+@media (min-width: 450px) and (max-width: 670px) {
+    .h1-connexion {
+        font-size: 2em;
+        margin-bottom: 5%;
+    }
+
+    .h2-connexion {
+        font-size: 1.1em;
+        margin-bottom: 5%;
+
+        text-align: center;
+    }
+
+    .h2pasinscrit {
+        margin-bottom: 6%;
+        font-size: 1.1em;
+    }
+
+    .inscriptionbtn {
+        transform: scale(.7);
+    }
+
+    .login-picture {
+        width: auto;
+        border-radius: 30px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+
+
+    }
+}
+
+@media (min-width: 641px) and (max-width: 770px) {
+    .h1-connexion {
+        font-size: 2.5em;
+    }
+
+    .h2-connexion {
+        font-size: 1.1em;
+        margin-bottom: 5%;
+    }
+
+
+    .h2pasinscrit {
+        margin-bottom: 5%;
+        font-size: 1.1em;
     }
 
     .headermarginleft {
         margin-left: 4%;
     }
+
+
+    .label-mail-password {
+        margin-bottom: -3%;
+        width: 425px;
+        margin-left: 6%;
+
+    }
+
+
+    .btnhome {
+
+        font-size: 1em;
+
+        justify-content: center;
+        transform: matrix(1, 0, 0, 1, -160, 0);
+    }
+
+    .login-picture {
+        width: auto;
+        border-radius: 30px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+
+
+    }
+
+    .inscriptionbtn {
+        transform: scale(.8);
+    }
+
+
+
+
+
+
 }
 
-@media (min-width: 769px) and (max-width: 1024px) {
-    .h1-connexion {
-        font-size: 1em;
-    }
-
-    .h2-connexion {
-        font-size: 1em;
-        margin-bottom: 5%;
-    }
-
-    .headermarginleft {
-        margin-left: 4%;
-    }
-}
-
-@media (min-width: 1025px) and (max-width: 1272px) {
+@media (min-width: 769px) and (max-width: 1280px) {
     .h1-connexion {
         font-size: 3em;
-        margin-top: 15%;
-        margin-bottom: 1%;
+    }
+
+    .h2-connexion {
+        font-size: 1.2em;
+        margin-bottom: 5%;
+    }
+
+    .h2pasinscrit {
+        margin-bottom: 5%;
+        font-size: 1.7em;
+    }
+
+    .label-mail-password {
+        margin-bottom: -3%;
+        width: 550px;
+        margin-left: 9%;
+
+    }
+
+
+    .headermarginleft {
+        margin-left: 4%;
+    }
+
+    .inscriptionbtn {
+        transform: scale(.8);
+    }
+
+    .login-picture {
+        width: auto;
+        border-radius: 30px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+
+
+    }
+
+    .btnhome {
+        font-size: 1em;
+
+        justify-content: center;
+
+    }
+
+
+
+
+}
+
+@media (min-width: 1279px) and (max-width: 1920px) {
+    .h1-connexion {
+        font-size: 2em;
+        margin-top: 4%;
+        font-weight: 600;
     }
 
     .h2-connexion {
         font-size: 1em;
         margin-bottom: 5%;
+        font-weight: 500;
+    }
+
+    .h2pasinscrit {
+        margin-bottom: 5%;
+        font-size: 1.3em;
+    }
+
+
+    .h2-pasinscrit {
+        margin-bottom: -10%;
+
     }
 
     .label-mail-password {
         margin-bottom: -10%;
+        margin-top: -4%;
+
     }
 
-    .headermarginleft {
-        margin-left: -10%;
-        min-width: 700px;
+
+    .inscriptionbtn {
+        transform: scale(.6);
+        margin-top: -5%;
     }
 
-}
-
-@media (min-width: 1537px) and (max-width: 1920px) {
-    .h1-connexion {
-        font-size: 3.0em;
-        margin-top: 18%;
-    }
-
-    .h2-connexion {
-        font-size: 1em;
-        margin-bottom: 5%;
-    }
-
-    .label-mail-password {
-        margin-bottom: 0%;
-    }
 
     .headermarginleft {
         margin-left: 0%;
     }
 
+    .login-picture {
+        width: auto;
+        border-radius: 30px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+        margin-left: -5%;
+
+    }
+
+
+
+
+
+
 }
 
 @media (min-width: 1921px) {
+    .h1-connexion {
+        font-size: 4.2em;
+    }
+
+    .h2-connexion {
+        font-size: 1.3em;
+        margin-bottom: 5%;
+        margin-left: 6%;
+    }
+
+    .h2pasinscrit {
+        margin-bottom: 5%;
+        font-size: 1.7em;
+    }
+
+
+    .label-mail-password {
+        margin-left: 5%;
+        margin-bottom: 0%;
+        width: auto;
+    }
+
+    .insriptionbutton {
+        font-size: 1.2em;
+
+    }
+
+    .headermarginleft {
+        margin-left: 0%;
+
+    }
+
+    .connexion-container {
+        margin-left: -7%;
+
+    }
+
+
+    .login-picture {
+        width: auto;
+        border-radius: 30px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+        margin-left: -10%;
+    }
+}
+
+@media (min-width: 2500px) and (max-width: 4000px) {
     .h1-connexion {
         font-size: 6.2em;
     }
@@ -241,8 +415,15 @@ async function login() {
         margin-bottom: 5%;
     }
 
+    .h2pasinscrit {
+        margin-bottom: 5%;
+        font-size: 1.7em;
+    }
+
     .label-mail-password {
         margin-bottom: 0%;
+        margin-left: 10%;
+        width: auto;
     }
 
     .insriptionbutton {
@@ -250,12 +431,25 @@ async function login() {
     }
 
     .headermarginleft {
-        margin-left: 0%;
+        margin-left: 1%;
 
     }
 
+    .inscriptionbtn {
+        transform: scale(1);
+    }
 
 
+    .connexion-container {
+        margin-left: -3%;
+    }
+
+    .login-picture {
+        width: auto;
+        border-radius: 30px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+        margin-left: -5%;
+    }
 
 
 }
diff --git a/src/views/main/HomeView.vue b/src/views/main/HomeView.vue
index 61b13c6..d7e7f91 100644
--- a/src/views/main/HomeView.vue
+++ b/src/views/main/HomeView.vue
@@ -1,399 +1,408 @@
 <template>
-  <div style="background-color: #F4F4F4;">
-
-    <!--PC -->
-    <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: 100;"
-                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>
-
-          <v-row>
-
-          </v-row>
-        </div>
-      </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>
+  <v-app style="background-color: #F4F4F4;">
 
 
-      <!-- Colonnes Créer Partager Inspirer-->
-      <v-container>
-        <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%;">
+    <div style="background-color: #F4F4F4;">
 
-            <!-- Créer Profiter Inspirer  -->
+      <!--PC -->
+      <div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
 
-            <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-col>
-        </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>
-              </v-col>
-            </v-col>
-          </v-col>
-
-          <!-- Colonne de droite -->
-          <v-col cols="3">
-            <v-img src="../../../images/homepage/grinding.png"
-              style="margin-bottom: 4%; border-radius: 30px; width: 80 vw;"></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: 250pxpx; max-height: 350;"></v-img>
-          </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">
-            Ils sont sur Hutopy.</h1>
-
-
-          <v-container style="margin-top: 25px; margin-bottom: -6%; max-width:  1200px;">
-
-
-            <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  ">
-
-                </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">
-
-                </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>
+        <!--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: 100;"
+                  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>
 
 
-          </v-container>
-        </v-card-text>
-      </v-container>
-
-
-      <!-- Fin Description D'hutopy -->
-
-    </div>
-
-    <!-- Mobile -->
-    <div class="md:hidden flex flex-col items-center justify-center">
-      <div>
-
-        <DefaultLayout></DefaultLayout>
-
-        <img src="../../../images/bannieremobile.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">
+          </div>
+        </v-container>
 
         <div>
-          <v-card-text>
-            <div>
-              <h2 style="text-align: center;">C'EST QUOI HUTOPY</h2>
-              <p class="textjustify pa-4">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
-                intuitive où profiter, créer et inspirer deviennent un quotidien enrichi et significatif.
-                Hutopy n'est pas seulement une plateforme, c'est un mouvement vers une interaction plus
-                humaine et créative dans l'espace numérique. Avec un modèle économique équitable et une
-                variété de contenus, nous offrons un lieu où les inspirations se rencontrent et où les idées
-                prennent vie. Rejoindre Hutopy, c'est faire partie d'une communauté qui valorise
-                l'expression authentique et construit un avenir où la technologie enrichit véritablement nos
-                vies. Nous vous invitons à explorer Hutopy, à contribuer à sa vision et à faire partie de
-                notre communauté mondiale. Ensemble, façonnons l'avenir de la création et du partage de
-                contenu. Bienvenue sur Hutopy, où vous pouvez créer votre propre univers.</p>
-            </div>
-
-            <v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"></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>
-
-          </v-card-text>
+          <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>
 
-        <v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
-          <v-img src="../../../images/creermobile.png" width="400" height="300"></v-img>
-          <p class="text-justify pa-4" 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>
-
-        </v-container>
-
-        <v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
-          <v-img src="../../../images/profitezmobile.png" width="400" height="300"></v-img>
-          <p class="text-justify pa-4" style="font-size: 1em;">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-container>
-
-
-        <v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
-          <v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img>
-          <p class="text-justify pa-4" style="font-size: 1em;">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-container>
 
+        <!-- Colonnes Créer Partager Inspirer-->
         <v-container>
+          <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-col>
+          </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>
+                </v-col>
+              </v-col>
+            </v-col>
+
+            <!-- Colonne de droite -->
+            <v-col cols="3">
+              <v-img src="../../../images/homepage/grinding.png"
+                style="margin-bottom: 4%; border-radius: 30px; width: 80 vw;"></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: 250pxpx; max-height: 350;"></v-img>
+            </v-col>
+          </v-row>
+        </v-container>
+
+        <!-- ILS SONT SUR HUTOPY -->
+        <v-container style="max-width: 1500px;">
           <v-card-text>
-            <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;">
-            </div>
-            <h1 style="text-align: center; color: #24393c; 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 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: auto;" />
-
-              </router-link>
-
-              <router-link :to="{ name: 'creatorfolio' }">
-                <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
-                  style="border-radius: 50%; margin: 0 20px; width: 120px; height: auto;" />
-              </router-link>
-
-              <router-link :to="{ name: 'creatorfolio' }">
-                <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
-                  style="border-radius: 50%; margin-left: 20px; width: 120px; height: auto;" />
-              </router-link>
-            </div>
+            <h1 style="text-align: center;  margin-bottom: 2%; 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-row justify="center" class="profile-images">
+
+                <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">
+
+                  </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-row>
+
+
+            </v-container>
           </v-card-text>
         </v-container>
 
+
+        <!-- Fin Description D'hutopy -->
+
       </div>
+
+      <!-- Mobile -->
+      <div class="md:hidden flex flex-col items-center justify-center">
+        <div>
+
+          <DefaultLayout></DefaultLayout>
+
+          <img src="../../../images/bannieremobile.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">
+
+          <div>
+            <v-card-text>
+              <div>
+                <h2 style="text-align: center;">C'EST QUOI HUTOPY</h2>
+                <p class="textjustify pa-4">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
+                  intuitive où profiter, créer et inspirer deviennent un quotidien enrichi et significatif.
+                  Hutopy n'est pas seulement une plateforme, c'est un mouvement vers une interaction plus
+                  humaine et créative dans l'espace numérique. Avec un modèle économique équitable et une
+                  variété de contenus, nous offrons un lieu où les inspirations se rencontrent et où les idées
+                  prennent vie. Rejoindre Hutopy, c'est faire partie d'une communauté qui valorise
+                  l'expression authentique et construit un avenir où la technologie enrichit véritablement nos
+                  vies. Nous vous invitons à explorer Hutopy, à contribuer à sa vision et à faire partie de
+                  notre communauté mondiale. Ensemble, façonnons l'avenir de la création et du partage de
+                  contenu. Bienvenue sur Hutopy, où vous pouvez créer votre propre univers.</p>
+              </div>
+
+              <v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"></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>
+
+            </v-card-text>
+          </div>
+
+          <v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
+            <v-img src="../../../images/creermobile.png" width="400" height="300"></v-img>
+            <p class="text-justify pa-4" 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>
+
+          </v-container>
+
+          <v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
+            <v-img src="../../../images/profitezmobile.png" width="400" height="300"></v-img>
+            <p class="text-justify pa-4" style="font-size: 1em;">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-container>
+
+
+          <v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
+            <v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img>
+            <p class="text-justify pa-4" style="font-size: 1em;">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-container>
+
+          <v-container>
+            <v-card-text>
+              <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;">
+              </div>
+              <h1 style="text-align: center; color: #24393c; 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 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: auto;" />
+
+                </router-link>
+
+                <router-link :to="{ name: 'creatorfolio' }">
+                  <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
+                    style="border-radius: 50%; margin: 0 20px; width: 120px; height: auto;" />
+                </router-link>
+
+                <router-link :to="{ name: 'creatorfolio' }">
+                  <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
+                    style="border-radius: 50%; margin-left: 20px; width: 120px; height: auto;" />
+                </router-link>
+              </div>
+
+
+            </v-card-text>
+          </v-container>
+
+        </div>
+      </div>
+
+      <v-btn variant="outlined" @click="callBackend()">
+        Get items
+      </v-btn>
+
+
+
+      <v-snackbar v-model="errorNoAccessSnackBar">
+        Vous n'etes pas connecter !
+        <template v-slot:actions>
+          <v-btn color="red" variant="text" @click="errorNoAccessSnackBar = false">
+            Fermer
+          </v-btn>
+          <v-btn color="green" variant="text" @click="goToLoginPage()">
+            Se connecter
+          </v-btn>
+        </template>
+      </v-snackbar>
+
+      <v-list style="background-color: #F4F4F4;" lines="one">
+        <v-list-item v-for=" item  in  itemList " :key="item" :title="item.id" :subtitle="item.title"></v-list-item>
+      </v-list>
+      <FooterLayout></FooterLayout>
     </div>
 
-    <v-btn variant="outlined" @click="callBackend()">
-      Get items
-    </v-btn>
-
-
-
-    <v-snackbar v-model="errorNoAccessSnackBar">
-      Vous n'etes pas connecter !
-      <template v-slot:actions>
-        <v-btn color="red" variant="text" @click="errorNoAccessSnackBar = false">
-          Fermer
-        </v-btn>
-        <v-btn color="green" variant="text" @click="goToLoginPage()">
-          Se connecter
-        </v-btn>
-      </template>
-    </v-snackbar>
-
-    <v-list style="background-color: #F4F4F4;" lines="one">
-      <v-list-item v-for=" item  in  itemList " :key="item" :title="item.id" :subtitle="item.title"></v-list-item>
-    </v-list>
-    <FooterLayout></FooterLayout>
-  </div>
+  </v-app>
 </template>
 
 <script async setup>
@@ -644,6 +653,8 @@ body {
   .votre_hutopy_fontsize {
     font-size: 0.9em;
   }
+
+
 }
 
 @media (min-width: 1537px) and (max-width: 1920px) {
