diff --git a/public/images/hutopymedia/banners/hutopy.png b/public/images/hutopymedia/banners/hutopy.png
index c61baa3..4b71848 100644
Binary files a/public/images/hutopymedia/banners/hutopy.png and b/public/images/hutopymedia/banners/hutopy.png differ
diff --git a/public/images/hutopymedia/homepage/votrehutopy.png b/public/images/hutopymedia/homepage/votrehutopy.png
index 074f21f..b2f8783 100644
Binary files a/public/images/hutopymedia/homepage/votrehutopy.png and b/public/images/hutopymedia/homepage/votrehutopy.png differ
diff --git a/public/images/usersmedia/leffet/banners/banner02.png b/public/images/usersmedia/leffet/banners/banner02.png
new file mode 100644
index 0000000..4357f58
Binary files /dev/null and b/public/images/usersmedia/leffet/banners/banner02.png differ
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 72c49ae..c3b41e0 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -19,7 +19,7 @@
                     <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
                       class="header-profile-icon mr-2" alt="Logo">
                     <v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props">
-                      ANONYME
+                      INVITÉ
                     </v-btn>
                   </div>
                 </v-col>
diff --git a/src/router/index.js b/src/router/index.js
index f19d238..7ece6e5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,3 +1,4 @@
+import GuillaumeAime from '@/views/manualusers/GuillaumeAime.vue'
 import About from '@/views/tos/About.vue'
 import ContentPolicy from '@/views/tos/ContentPolicy.vue'
 import FAQ from '@/views/tos/FAQ.vue'
@@ -26,7 +27,7 @@ const router = createRouter({
       component: HomeView
     },
     {
-      path: '/guillaumeaime',
+      path: '/creatorfolio',
       name: 'creatorfolio',
       component: CreatorFolio
     },
@@ -116,6 +117,12 @@ const router = createRouter({
       name: 'chloebeauregard',
       component: ChloeBeauregard
     },
+
+    {
+      path: '/guillaumeaime',
+      name: 'guillaumeaime',
+      component: GuillaumeAime
+    },
   ],
   scrollBehavior(to, from, savedPosition) {
     return { top: 0 };
diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index 57761ae..bcabdf4 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -283,7 +283,9 @@
           </v-container>
         </v-container>
 
-        <!--   <PostContentMenu style="margin-top: -30px;"></PostContentMenu>  Post   -->
+
+        <PostContentMenu style="margin-top: -30px;"></PostContentMenu>
+
 
         <!-- Card youtube balado -->
         <v-container>
@@ -306,8 +308,7 @@
             </v-col>
 
             <!-- Card core Video/image & text -->
-            <div
-              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
+            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
               <v-container>
                 <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
                   src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
@@ -317,14 +318,14 @@
                 <!-- Date -->
                 <v-row class="text-right">
                   <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px">
+                    <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
                       24-04-2024
                     </h1>
                   </v-col>
                 </v-row>
 
 
-                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">C’est un honneur de vous
+                <p class="text-justify pa-10" style="margin-bottom: -50px; font-size: 1em">C’est un honneur de vous
                   présenter
                   mon tout premier balado. Dans ce premier épisode, les passionnés de cinéma et de gadgets seront
                   particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement. Par la suite, je
@@ -346,13 +347,14 @@
                 </div>
 
                 <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px;"
-                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
+                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
               </v-container>
             </div>
           </v-card>
         </v-container>
 
+
         <!-- Card nouvelle boutique -->
         <v-container>
           <v-card class="flow-menu m-0 youtube-card">
@@ -363,19 +365,18 @@
                   <h1 class="card-title">
                     NOUVELLE BOUTIQUE À SAINT-HYACINTHE</h1>
                 </v-col>
-                <!--
-                <v-col class="text-right">
-                 <v-btn class="btn-card-options" flat tile elevation="0">
+
+                <!--<v-col class="text-right">
+<v-btn class="btn-card-options" flat tile elevation="0">
                     <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
                   </v-btn>          (a intégrer)
-                </v-col>  -->
+                </v-col> -->
               </v-row>
 
             </v-col>
 
             <!-- Card core Video/image & text -->
-            <div
-              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
+            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
               <v-container>
                 <v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/nouvelleboutique.jpg"
                   title="Guillaumem"></v-img>
@@ -383,13 +384,14 @@
                 <!-- Date -->
                 <v-row class="text-right">
                   <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px">
-                      23-04-2024
+                    <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
+                      24-04-2024
                     </h1>
                   </v-col>
                 </v-row>
 
-                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">J’ai découvert une nouvelle
+
+                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">J’ai découvert une nouvelle
                   boutique
                   à St-Hyacinthe qui embrasse exactement ma philosophie derrière la page Guillaume Aime: faire découvrir
                   le
@@ -402,6 +404,7 @@
                   Carl
                   pour ce projet!</p>
 
+
                 <!-- Like dislike commment Section -->
                 <div style="height: 20px;"></div>
                 <div
@@ -411,8 +414,8 @@
                 </div>
 
                 <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px;"
-                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
+                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
               </v-container>
             </div>
           </v-card>
@@ -439,8 +442,7 @@
             </v-col>
 
             <!-- Card core Video/image & text -->
-            <div
-              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
+            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
               <v-container>
                 <v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/cestparti.jpg"
                   title="Guillaumem"></v-img>
@@ -448,13 +450,13 @@
                 <!-- Date -->
                 <v-row class="text-right">
                   <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px">
+                    <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
                       22-04-2024
                     </h1>
                   </v-col>
                 </v-row>
 
-                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">C'est parti pour 2024 ! De
+                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">C'est parti pour 2024 ! De
                   retour au
                   travail officiellement ce matin afin d'aider les entreprises de la région à rayonner ! Mettre en
                   lumière les
@@ -471,8 +473,8 @@
                 </div>
 
                 <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px;"
-                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
+                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
               </v-container>
             </div>
           </v-card>
@@ -539,6 +541,7 @@
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
+import PostContentMenu from '@/layouts/PostContentMenu.vue';
 import { ref } from 'vue';
 import StripePayment from '../StripePayment.vue';
 let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
@@ -559,6 +562,7 @@ let navigationItems = [
   filter: invert(1);
 }
 
+
 .Hutopy-menu-sticky-mobile {
   position: sticky;
   top: 0;
@@ -679,9 +683,13 @@ let navigationItems = [
 
 .card-date {
   margin-left: 10px;
-  margin-top: -18px
+  margin-top: -18px;
+  margin-bottom: -20px;
+  font-size: .8rem;
 }
 
+
+
 .social-container {
   background-color: #006d77;
   border-top-right-radius: 30px;
diff --git a/src/views/main/HomeView.vue b/src/views/main/HomeView.vue
index 28ef47e..3d0b379 100644
--- a/src/views/main/HomeView.vue
+++ b/src/views/main/HomeView.vue
@@ -126,7 +126,7 @@
                   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
+                  é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é.
@@ -196,7 +196,7 @@
                 </router-link>
               </v-col>
               <v-col>
-                <router-link :to="{ name: 'creatorfolio' }">
+                <router-link :to="{ name: 'guillaumeaime' }">
                   <img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
                     alt="Profile Image" class="profile-image">
                 </router-link>
@@ -278,7 +278,7 @@
             <p style="margin-top: 3%; margin-bottom: 5%; text-align: justify;" class="center-vertical">
               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
+              é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é.
@@ -338,7 +338,7 @@
               </router-link>
             </v-col>
             <v-col cols="8">
-              <router-link :to="{ name: 'creatorfolio' }">
+              <router-link :to="{ name: 'guillaumeaime' }">
                 <img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
                   alt="Profile Image" class="profile-image">
               </router-link>
diff --git a/src/views/manualusers/ChloeProfile.vue b/src/views/manualusers/ChloeProfile.vue
index 753fd8e..3159d03 100644
--- a/src/views/manualusers/ChloeProfile.vue
+++ b/src/views/manualusers/ChloeProfile.vue
@@ -278,22 +278,21 @@ Je suis authentique, créative, stratégique, caféinée et à l’écoute. Et s
         <v-container>
           <v-card class="flow-menu m-0 youtube-card">
 
-            <div
-              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
+            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
               <v-container style="margin-top: -15px;">
                 <v-img src="images/usersmedia/chloebeaugrand/pictures/posts/postsChloeBeaugrand01.png"
-                  title="Guillaumem"></v-img>
+                  title="Savoir faire"></v-img>
 
                 <!-- Date -->
                 <v-row class="text-right">
                   <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px">
+                    <h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
                       23-04-2024
                     </h1>
                   </v-col>
                 </v-row>
 
-                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">Quand on observe des gens
+                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">Quand on observe des gens
                   réaliser un
                   Rubik’s Cube ça a l’air si facile pour eux qu’on est vraiment impressionnés et peut-être même
                   découragés…<br><br>
@@ -316,8 +315,8 @@ Je suis authentique, créative, stratégique, caféinée et à l’écoute. Et s
                 </div>
 
                 <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px;"
-                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
+                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px" class="Comments-font"
+                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
               </v-container>
             </div>
           </v-card>
@@ -328,8 +327,7 @@ Je suis authentique, créative, stratégique, caféinée et à l’écoute. Et s
         <v-container>
           <v-card class="flow-menu m-0 youtube-card">
 
-            <div
-              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
+            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
               <v-container style="margin-top: -15px;">
                 <v-img src="images/usersmedia/chloebeaugrand/pictures/posts/postsChloeBeaugrand02.png"
                   title="Guillaumem"></v-img>
@@ -337,13 +335,13 @@ Je suis authentique, créative, stratégique, caféinée et à l’écoute. Et s
                 <!-- Date -->
                 <v-row class="text-right">
                   <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px">
+                    <h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
                       23-04-2024
                     </h1>
                   </v-col>
                 </v-row>
 
-                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">
+                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
                   Que ce soit pour un portrait créatif, la gestion totales de tes médias sociaux où pour devenir
                   autonome à
                   les gérer par toi-même → Je suis là pour ça!
@@ -363,8 +361,8 @@ Je suis authentique, créative, stratégique, caféinée et à l’écoute. Et s
                 </div>
 
                 <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px;"
-                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
+                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
               </v-container>
             </div>
           </v-card>
@@ -449,6 +447,13 @@ let navigationItems = [
   filter: invert(1);
 }
 
+
+
+.Comments-font {
+  font-size: .1rem;
+}
+
+
 .Hutopy-menu-sticky-mobile {
   position: sticky;
   top: 0;
@@ -569,7 +574,9 @@ let navigationItems = [
 
 .card-date {
   margin-left: 10px;
-  margin-top: -18px
+  margin-top: -18px;
+  margin-bottom: -20px;
+  font-size: .8rem;
 }
 
 .social-container {
diff --git a/src/views/manualusers/GuillaumeAime.vue b/src/views/manualusers/GuillaumeAime.vue
new file mode 100644
index 0000000..593ff7f
--- /dev/null
+++ b/src/views/manualusers/GuillaumeAime.vue
@@ -0,0 +1,1138 @@
+<template>
+  <div style="background-color: #f4f4f4;">
+    <DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
+
+    <!-- "Mobile -->
+    <v-row class="fluid hidden-md-and-up social-mobile-container"
+      style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
+      <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
+        <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
+          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
+      </v-col>
+    </v-row>
+
+    <!-- "PurpleLine" -->
+    <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
+    </v-row>
+
+    <!-- "Mobile-Profile" -->
+    <!-- "Profile picture" -->
+    <v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
+      <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
+    </v-row>
+
+    <!-- User Social Network Links -->
+    <v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
+      hidden-md-and-down>
+
+      <!-- Facebook -->
+      <v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
+        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
+          <a href="https://www.facebook.com/GuillaumeMousseau222">
+            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
+              alt="Facebook"></v-img>
+          </a>
+        </v-col>
+        <!-- Instagram -->
+        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
+          <a href="https://www.instagram.com/guillaumeaime/">
+            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
+              alt="Instagram"></v-img>
+          </a>
+        </v-col>
+        <!-- Profile picture - Small -->
+        <v-col cols="4" sm="4" xs="0" class="hidden-xs">
+          <v-row class="d-flex justify-center align-center">
+            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
+          </v-row>
+        </v-col>
+
+        <!-- TikTok -->
+        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
+          <a href="https://www.tiktok.com/@guillaumeaime">
+            <v-img class="socialicons-mobile invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
+              alt="TikTok"></v-img>
+          </a>
+        </v-col>
+
+
+
+
+        <v-spacer class="hidden-xs"> </v-spacer>
+
+
+      </v-row>
+
+      <!-- User informations Name title and description  -->
+      <v-row class="social-container-mobile">
+        <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
+          <v-row class="d-flex justify-center">
+            {{ name }}
+          </v-row>
+        </v-col>
+        <v-spacer xs="12" sm="4"></v-spacer>
+        <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
+          <v-row class="d-flex justify-center">
+            {{ title }}
+          </v-row>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-container style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
+          class="social-icon-group-mobile">
+          <v-expansion-panels style="min-width: 320px;">
+            <v-col cols="12" offset="-1">
+              <v-expansion-panel class="background-pink text-justify" style="color: white;"
+                text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
+                title="À propos : Ma mission est claire :">
+
+
+              </v-expansion-panel>
+            </v-col>
+          </v-expansion-panels>
+        </v-container>
+      </v-row>
+    </v-container>
+
+    <!-- Bannière Pc -->
+    <v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
+      hidden-sm-and-up>
+      <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
+        <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
+          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
+      </v-col>
+    </v-row>
+    <v-row class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);"
+      hidden-sm-and-up>
+    </v-row>
+
+    <!-- "Core (Menu / Center / Donation)" -->
+    <v-row>
+      <!-- "Menu" -->
+      <v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
+        <v-col style="margin: 0;">
+          <v-row class="Hutopy-menu-sticky-mobile">
+            <v-spacer></v-spacer>
+            <v-col>
+              <v-container style=" overflow-y: hidden;">
+                <!-- Nav-Btn -->
+                <v-col cols="12" class="px-0">
+                  <v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image"
+                    style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
+                  <v-list dense class="main-background">
+                    <v-list-item v-for="item in navigationItems" :key="item.link">
+                      <router-link :to="item.link">
+                        <v-btn text class="d-flex align-start align-center main-background" elevation="0"
+                          outlined="false">
+                          <v-icon left class="mr-4">{{ item.icon }}</v-icon>
+                          {{ item.text }}
+                        </v-btn>
+                      </router-link>
+                    </v-list-item>
+
+                    <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-icon left class="mr-4">mdi-wallet</v-icon>
+                            <p @click="isActive.value = false">Bourse</p>
+                          </v-btn>
+                        </template>-->
+
+                        <!-- Wallet Modale -->
+                        <template v-slot:default="{ isActive }">
+                          <v-card style="border-radius: 30px;">
+                            <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>
+                            </div>
+                            <v-card-text class="text-h1 pa-12">
+                              <v-row>
+                                <v-col>
+                                  <v-row>
+                                    <v-col cols="7">
+                                      <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Balance actuelle</h1>
+                                      <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Montant reçu</h1>
+                                      <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Dernier don</h1>
+                                    </v-col>
+                                    <v-col>
+                                      <h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
+                                      <h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
+                                      <h1 style="margin-bottom: 4%; font-size: 1.3rem;">2024-10-04</h1>
+                                      <p></p>
+                                    </v-col>
+                                  </v-row>
+                                </v-col>
+                                <v-col>
+                                  <v-row>
+                                    <v-col cols="8">
+                                      <h1 style="margin-bottom: 4%; font-size: 1.2rem;">Dons</h1>
+                                      <h1 style="margin-bottom: 4%; font-size: 1.2rem;">Montant retiré</h1>
+                                    </v-col>
+                                    <v-col>
+                                      <h1 style="margin-bottom: 4%; font-size: 1.2rem;">0</h1>
+                                      <h1 style="margin-bottom: 4%; font-size: 1.2rem;">0$</h1>
+                                      <p></p>
+                                    </v-col>
+                                  </v-row>
+                                </v-col>
+                              </v-row>
+                            </v-card-text>
+
+                            <v-card-actions class="justify-center">
+                              <v-btn text="Fermer" @click="isActive.value = false"></v-btn>
+                            </v-card-actions>
+                          </v-card>
+
+                          <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>
+                              <v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
+                                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>
+                              <v-col cols="5" class="text-truncate text-center font-weight-bold">message</v-col>
+                            </v-row>
+                          </v-card>
+
+                          <v-card style=" border-radius: 25px; margin-top: .5%; max-height: 450px;">
+                            <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>
+                              <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>
+                              <v-col cols="5" class="text-truncate">Good Job</v-col>
+                            </v-row>
+                          </v-card>
+                        </template>
+                      </v-dialog>
+                    </v-list-item>
+                  </v-list>
+                </v-col>
+              </v-container>
+            </v-col>
+          </v-row>
+          <v-row style="height: 3000px;"></v-row>
+        </v-col>
+      </v-col>
+
+      <!-- Profile Info Picture name title & description -->
+      <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
+        <v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
+          <v-container>
+            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
+            <!-- User informations Name & title  -->
+            <v-container class="background-profile-container" style="margin-top: -8%;">
+              <v-row>
+                <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
+                  <h1 class="name-info">{{ name }}</h1>
+                </v-col>
+                <v-col></v-col>
+              </v-row>
+              <v-row>
+                <v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
+                  <h1 class="occupation-info">{{ title }}</h1>
+                </v-col>
+                <v-col></v-col>
+              </v-row>
+
+              <!-- User Social Network Links -->
+              <v-row>
+                <v-spacer></v-spacer>
+                <v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
+                  <v-row>
+                    <a href="https://www.facebook.com/GuillaumeMousseau222">
+                      <img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
+                        alt="Description image 2">
+                    </a>
+                    <a href="https://www.instagram.com/p/C2f-3UnNdfX/">
+                      <img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
+                        alt="Description image 2">
+                    </a>
+
+                    <a href="https://www.tiktok.com/@guillaumeaime">
+                      <img class="socialicons invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
+                        alt="Description image 2">
+                    </a>
+                  </v-row>
+                </v-col>
+                <v-col background-color="primary"></v-col>
+              </v-row>
+
+              <!-- Description  -->
+              <v-row>
+                <v-container
+                  style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
+                  <v-expansion-panels style="min-width: 320px;">
+                    <v-col cols="12" offset="-1">
+                      <v-expansion-panel class="background-pink text-justify" style="color: white;"
+                        text="Mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
+                        title="À propos : Ma mission est claire :">
+                      </v-expansion-panel>
+                    </v-col>
+                  </v-expansion-panels>
+                </v-container>
+              </v-row>
+            </v-container>
+          </v-container>
+        </v-container>
+
+
+        <!--   <PostContentMenu style="margin-top: -30px;"></PostContentMenu> -->
+
+
+        <!-- Card youtube balado -->
+        <v-container>
+          <v-card class="flow-menu m-0 youtube-card">
+            <!-- Title, date and btn -->
+            <v-col>
+              <v-row>
+                <v-col class="text-center">
+                  <h1 class="card-title">
+                    MON PREMIER BALADO</h1>
+                </v-col>
+
+                <!--<v-col class="text-right">
+<v-btn class="btn-card-options" flat tile elevation="0">
+                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
+                  </v-btn>          (a intégrer)
+                </v-col> -->
+              </v-row>
+
+            </v-col>
+
+            <!-- Card core Video/image & text -->
+            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
+              <v-container>
+                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
+                  src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen></iframe>
+
+                <!-- Date -->
+                <v-row class="text-right">
+                  <v-col>
+                    <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
+                      24-04-2024
+                    </h1>
+                  </v-col>
+                </v-row>
+
+
+                <p class="text-justify pa-10" style="margin-bottom: -50px; font-size: 1em">C’est un honneur de vous
+                  présenter
+                  mon tout premier balado. Dans ce premier épisode, les passionnés de cinéma et de gadgets seront
+                  particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement. Par la suite, je
+                  partage mon itinéraire professionnel peu conventionnel : de mes débuts dans le secteur bovin à travers
+                  le
+                  Canada, à mon poste actuel comme directeur marketing chez Journal Mobile, jusqu'à la direction de mon
+                  agence
+                  créative, Alliés. Enfin, je vous invite à découvrir un autre aspect de ma vie à travers ma page
+                  personnelle,
+                  "Guillaume aime", où je partage tout ce qui me passionne.</p>
+
+
+                <!-- Like dislike commment Section -->
+                <div style="height: 20px;"></div>
+                <div
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+
+                <!-- Comments -->
+                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
+              </v-container>
+            </div>
+          </v-card>
+        </v-container>
+
+
+        <!-- Card nouvelle boutique -->
+        <v-container>
+          <v-card class="flow-menu m-0 youtube-card">
+            <!-- Title, date and btn -->
+            <v-col>
+              <v-row>
+                <v-col class="text-center">
+                  <h1 class="card-title">
+                    NOUVELLE BOUTIQUE À SAINT-HYACINTHE</h1>
+                </v-col>
+
+                <!--<v-col class="text-right">
+<v-btn class="btn-card-options" flat tile elevation="0">
+                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
+                  </v-btn>          (a intégrer)
+                </v-col> -->
+              </v-row>
+
+            </v-col>
+
+            <!-- Card core Video/image & text -->
+            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
+              <v-container>
+                <v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/nouvelleboutique.jpg"
+                  title="Guillaumem"></v-img>
+
+                <!-- Date -->
+                <v-row class="text-right">
+                  <v-col>
+                    <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
+                      24-04-2024
+                    </h1>
+                  </v-col>
+                </v-row>
+
+
+                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">J’ai découvert une nouvelle
+                  boutique
+                  à St-Hyacinthe qui embrasse exactement ma philosophie derrière la page Guillaume Aime: faire découvrir
+                  le
+                  savoir-faire québécois !
+
+                  J’y ai croisé Carl Vaillancourt, copropriétaire de l’entreprise Espace Karibou au Centre-ville
+                  Saint-Hyacinthe ainsi que mon ami Marc-Olivier Hébert de la Fondation L'effet.
+
+                  Je vous invite à découvrir cette boutique sur la rue Cascade à St-Hyacinthe. Bravo à Karianne Hamel et
+                  Carl
+                  pour ce projet!</p>
+
+
+                <!-- Like dislike commment Section -->
+                <div style="height: 20px;"></div>
+                <div
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+
+                <!-- Comments -->
+                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
+              </v-container>
+            </div>
+          </v-card>
+        </v-container>
+
+        <!-- Card nouvelle boutique -->
+        <v-container>
+          <v-card class="flow-menu m-0 youtube-card">
+            <!-- Title, date and btn -->
+            <v-col>
+              <v-row>
+                <v-col class="text-center">
+                  <h1 class="card-title">
+                    C'EST PARTI POUR 2024!</h1>
+                </v-col>
+                <!--
+                <v-col class="text-right">
+                 <v-btn class="btn-card-options" flat tile elevation="0">
+                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
+                  </v-btn>          (a intégrer)
+                </v-col>  -->
+              </v-row>
+
+            </v-col>
+
+            <!-- Card core Video/image & text -->
+            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
+              <v-container>
+                <v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/cestparti.jpg"
+                  title="Guillaumem"></v-img>
+
+                <!-- Date -->
+                <v-row class="text-right">
+                  <v-col>
+                    <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
+                      22-04-2024
+                    </h1>
+                  </v-col>
+                </v-row>
+
+                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">C'est parti pour 2024 ! De
+                  retour au
+                  travail officiellement ce matin afin d'aider les entreprises de la région à rayonner ! Mettre en
+                  lumière les
+                  entrepreneurs et leur unicité, c'est ma passion ! Si jamais tu as besoin d'aide dans ce domaine,
+                  n'hésite
+                  pas à me contacter.</p>
+
+                <!-- Like dislike commment Section -->
+                <div style="height: 20px;"></div>
+                <div
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+
+                <!-- Comments -->
+                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
+              </v-container>
+            </div>
+          </v-card>
+        </v-container>
+
+
+      </v-col>
+
+      <!-- "Large-Monitor-RightCol" Donation -->
+      <v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
+        <v-row>
+          <v-col>
+            <v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ;  bottom: 0;">
+              <!-- Donnation -->
+              <v-card style="border-radius: 20px;">
+                <v-container>
+                  <v-row class="mb-0"
+                    style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
+                    <v-card-title class="text-soutiens" style="margin-top: 15px;">
+                      JE SOUTIENS!
+                    </v-card-title>
+                  </v-row>
+                  <StripePayment></StripePayment>
+                </v-container>
+              </v-card>
+            </v-container>
+            <v-container style="height: 3000px;">
+            </v-container>
+          </v-col>
+          <v-spacer>
+          </v-spacer>
+        </v-row>
+      </v-col>
+    </v-row>
+
+    <!-- "Mobile" Donation -->
+    <v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
+      style="background-color: #6b0065; margin-top: 30px; text-align: center;">
+
+      <!-- Barre cliquable pour ouvrir le drawer -->
+      <v-btn @click="drawerbottom = !drawerbottom" elevation="0"
+        style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
+        JE SOUTIENS
+      </v-btn>
+    </v-col>
+
+    <!-- Drawer du bas -->
+    <template>
+      <div>
+        <v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
+          <v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
+            <h1 class="text-soutiens">JE SOUTIENS</h1>
+            <StripePayment></StripePayment>
+          </v-container>
+        </v-bottom-sheet>
+
+      </div>
+    </template>
+
+    <FooterLayout></FooterLayout>
+  </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';
+let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
+let profilePicture = '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png';
+let name = 'Guillaume Mousseau'
+let title = 'Créateur de contenus'
+let drawerbottom = ref(false)
+
+let navigationItems = [
+  { icon: 'mdi-home', text: 'Accueil', link: 'home' },
+  { icon: 'mdi-account-group', text: 'Utilisateur', link: '/userbrowser' },
+  //{ icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
+];
+</script>
+
+<style scoped>
+.invert-color {
+  filter: invert(1);
+}
+
+
+.Hutopy-menu-sticky-mobile {
+  position: sticky;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  margin-top: -40px;
+}
+
+.sticky-bottom-label {
+  position: sticky;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  margin-top: 20px;
+}
+
+.sticky-top-label {
+  position: sticky;
+  bottom: 0;
+  right: 10%;
+  width: 100%;
+  z-index: 1000;
+}
+
+.text-soutiens {
+  margin-bottom: 15px;
+  color: white;
+  font-size: 1.5rem;
+  letter-spacing: 7px;
+  text-align: center;
+}
+
+.name-info {
+  margin-top: -10px;
+  margin-left: 15%;
+}
+
+.occupation-info {
+  margin-left: 15%;
+  font-size: large;
+}
+
+.name-info-mobile {
+  margin-left: 22px;
+  font-size: 1.3rem
+}
+
+.main-background {
+  background-color: #f4f4f4;
+}
+
+.profile-container {
+  margin-top: -16%;
+}
+
+.btn-custom {
+  width: 100%;
+  background-color: transparent;
+}
+
+.background-profile-container {
+  background-color: #ececec;
+  color: white;
+  border-top: 3px solid #a30e79;
+  border-right: 3px solid #a30e79;
+  font-weight: 700;
+  font-size: 1.15rem;
+  border-radius: 25px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
+}
+
+.background-pink {
+  background-color: #cc6f91;
+  color: white;
+  font-weight: 400;
+}
+
+.label-text {
+  font-weight: 400;
+  margin-left: 3%;
+  font-size: 1rem;
+}
+
+.profile-name {
+  margin-top: -15%;
+}
+
+.socialicons {
+  width: 35px;
+  max-width: 100px;
+  margin-top: 3px;
+  margin-left: 40px;
+}
+
+.socialicons-mobile {
+  width: 35px;
+  max-width: 100px;
+  margin-top: 27px;
+  margin-left: 20px;
+}
+
+.youtube-card {
+  margin-left: 2%;
+  margin-right: 2%;
+  border-radius: 15px;
+  background-color: #f4f4f4;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
+}
+
+.card-title {
+  font-size: 1.4rem;
+  margin-top: 10px;
+}
+
+.card-date {
+  margin-left: 10px;
+  margin-top: -18px;
+  margin-bottom: -20px;
+  font-size: .8rem;
+}
+
+
+
+.social-container {
+  background-color: #006d77;
+  border-top-right-radius: 30px;
+  border-bottom-right-radius: 30px;
+  font-size: 1.7rem;
+  font-weight: 600;
+  color: white;
+}
+
+.social-container2 {
+  background-color: #0baab2;
+  border-bottom-right-radius: 30px;
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: white;
+}
+
+.social-container-mobile {
+  background-color: #006d77;
+  font-size: 1.4rem;
+  font-weight: 600;
+  color: white;
+  z-index: 1000;
+  margin: auto;
+  text-align: center;
+}
+
+.social-container2-mobile {
+  background-color: #0baab2;
+  z-index: 1000;
+  font-size: 1.2rem;
+  font-weight: 500;
+  color: white;
+}
+
+.social-icon-group-mobile {
+  background-color: #0baab2;
+}
+
+.mini-profile-picture {
+  border-radius: 100px;
+}
+
+.btn-card-options {
+  background-color: #f4f4f4;
+  width: 50px;
+  margin-left: -12px;
+  margin-top: 10px;
+}
+
+.mobile-profile-picture-creator {
+  border-radius: 100px;
+  height: 150px;
+  width: 150px;
+  border-radius: 50%;
+  max-width: 150px;
+  border: 4px solid white;
+  z-index: 1000;
+}
+
+.mobile-header {
+  height: 50px;
+  margin-left: -13%;
+  margin-top: 6%;
+}
+
+.h1-navigation {
+  text-align: center;
+  font-weight: 600;
+  margin-bottom: 10%;
+}
+
+.mobile-profile-picture {
+  height: 40px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  border: 2px solid #a30e79;
+  margin-right: 10px
+}
+
+.profile-banner {
+  margin-top: 25px;
+  min-height: 200px
+}
+
+.v-navigation-drawer {
+  max-height: 100vh;
+}
+
+@media (min-width: 150px) and (max-width: 474px) {
+  .mobile-profile-picture-creator {
+    transform: scale(1.5) translateY(-30%) translateX(0%);
+  }
+
+  .socialicons-mobile {
+    width: 35px;
+    max-width: 100px;
+    margin-top: 0px;
+    margin-left: 20px;
+  }
+}
+
+
+@media (min-width: 475px) and (max-width: 599px) {
+  .socialicons-mobile {
+    width: 35px;
+    max-width: 100px;
+    margin-top: 0px;
+    margin-left: px;
+  }
+
+  .mobile-profile-picture-creator {
+    transform: scale(1.5) translateY(-30%) translateX(0%);
+  }
+
+  .profile-container-mobile {
+    width: 110%;
+    margin-left: -3%;
+    margin-top: -112px;
+  }
+
+  .occupation-info {
+    font-size: 1rem;
+  }
+
+  .card-youtube {
+    min-height: 250px;
+  }
+
+  .name-info-mobile {
+    font-size: 1.6rem;
+  }
+}
+
+@media (min-width: 599px) and (max-width: 749px) {
+  .mobile-profile-picture-creator {
+    transform: scale(1.5) translateY(25%) translateX(0%);
+  }
+
+  .profile-container {
+
+    width: 110%;
+    margin-left: -3%;
+  }
+
+  .profile-container-mobile {
+
+    width: 110%;
+    margin-left: -3%;
+    margin-top: -110px;
+  }
+
+  .name-info {
+    font-size: 1.2rem;
+  }
+
+  .occupation-info {
+    font-size: 1rem;
+  }
+
+  .card-youtube {
+    min-height: 330px;
+  }
+}
+
+@media (min-width: 750px) and (max-width: 960px) {
+  .mobile-profile-picture-creator {
+    transform: scale(1.8) translateY(25%) translateX(0%);
+  }
+
+  .profile-container {
+    width: 110%;
+    margin-left: -3%;
+  }
+
+  .profile-container-mobile {
+    width: 110%;
+    margin-left: -3%;
+    margin-top: -110px;
+  }
+
+  .name-info {
+    font-size: 1.2rem;
+  }
+
+  .occupation-info {
+    font-size: 1rem;
+  }
+
+  .card-youtube {
+    min-height: 425px;
+  }
+}
+
+@media (min-width: 960px) and (max-width: 1280px) {
+  .middle-col {
+    margin-left: -30px;
+  }
+
+  .text-soutiens {
+    font-size: 1.2rem;
+    letter-spacing: 5px;
+  }
+
+  .profile-container {
+    margin-top: -185px;
+    min-width: 480px
+  }
+
+  .card-youtube {
+    min-height: 270px;
+  }
+
+  .Je-soutien-container {
+    min-width: 325px;
+    margin-left: -35px;
+  }
+
+  .mobile-profile-picture-creator {
+    transform: scale(1.3) translateY(25%) translateX(-50px);
+  }
+
+  .name-info {
+    font-size: 1.2rem;
+    margin-left: 20px;
+    margin-top: -6px
+  }
+
+  .occupation-info {
+    margin-left: 40px;
+    margin-top: -8px
+  }
+
+  .social-container {
+    margin-left: 80px;
+    min-width: 270px;
+    max-height: 40px
+  }
+
+  .social-container2 {
+    margin-left: 50px;
+    min-width: 250px;
+    max-height: 35px
+  }
+
+  .socialicons {
+    width: 34px;
+    max-width: 100px;
+    margin-top: 15px;
+    margin-left: 25px;
+  }
+}
+
+@media (min-width: 1280px) and (max-width: 1600px) {
+  .text-soutiens {
+    font-size: 1.3rem;
+    letter-spacing: 8px;
+  }
+
+  .mobile-profile-picture-creator {
+    transform: scale(1.3) translateY(25%) translateX(-50px);
+  }
+
+  .profile-container {
+    margin-top: -180px;
+  }
+
+  .card-youtube {
+    min-height: 290px;
+  }
+
+  .menu-col {
+    margin-left: -4%;
+  }
+
+  .Je-soutien-container {
+    min-width: 350px;
+  }
+
+  .name-info {
+    font-size: 1.2rem;
+    margin-left: 20px;
+    margin-top: -6px
+  }
+
+  .social-container {
+    margin-left: 90px;
+    min-width: 350;
+    max-height: 40px
+  }
+
+  .occupation-info {
+    margin-left: 70px;
+    margin-top: -8px
+  }
+
+  .social-container2 {
+
+    margin-left: 40px;
+    min-width: 290px;
+    max-height: 35px
+  }
+
+  .socialicons {
+    width: 34px;
+    max-width: 100px;
+    margin-top: 15px;
+    margin-left: 25px;
+  }
+}
+
+@media (min-width: 1600px) and (max-width: 1919px) {
+  .text-soutiens {
+    font-size: 1.3rem;
+
+  }
+
+  .mobile-profile-picture-creator {
+    transform: scale(1.4) translateY(25%) translateX(-40px);
+  }
+
+  .profile-container {
+    margin-top: -171px;
+  }
+
+  .card-youtube {
+    min-height: 355px;
+  }
+
+  .menu-col {
+    margin-left: -4%;
+  }
+
+  .Je-soutien-container {
+    min-width: 400px;
+  }
+
+  .name-info {
+    font-size: 1.5rem;
+    margin-top: -4px;
+    margin-left: 35px;
+  }
+
+  .occupation-info {
+    font-size: 1.3rem;
+    margin-left: 75px;
+    margin-top: -2px
+  }
+
+  .social-container2 {
+    margin-left: 70px;
+    min-width: 300px;
+  }
+}
+
+@media (min-width: 1920px) and (max-width: 2559px) {
+  .text-soutiens {
+    font-size: 1.3rem;
+  }
+
+  .profile-container {
+    margin-top: -160px;
+  }
+
+  .card-youtube {
+    min-height: 380px;
+  }
+
+  .Je-soutien-container {
+    min-width: 400px;
+  }
+
+  .mobile-profile-picture-creator {
+    transform: scale(1.4) translateY(25%) translateX(-40px);
+  }
+
+  .name-info {
+    font-size: 1.5rem;
+    margin-left: 35px;
+    margin-top: -4px;
+  }
+
+  .social-container {
+    margin-left: 100px;
+  }
+
+  .occupation-info {
+    font-size: 1.3rem;
+    margin-left: 110px;
+    margin-top: -4px
+  }
+
+  .social-container2 {
+    margin-left: 30px;
+    min-width: 360px;
+  }
+
+  .socialicons {
+    width: 38px;
+    max-width: 100px;
+    margin-top: 13px;
+    margin-left: 40px;
+  }
+}
+
+@media (min-width: 2560px) {
+
+
+
+  .mobile-profile-picture-creator {
+    transform: scale(1.5) translateY(25%) translateX(-20px);
+  }
+
+  .card-youtube {
+    min-height: 380px;
+  }
+
+  .text-soutiens {
+    font-size: 1.5rem;
+  }
+
+  .name-info {
+    font-size: 2rem;
+
+  }
+
+  .social-container {
+    margin-left: 140px;
+  }
+
+  .social-container2 {
+    margin-left: 130px;
+  }
+
+  .occupation-info {
+    font-size: 1.5rem;
+    margin-left: 65px;
+    margin-top: -6px
+  }
+
+  .socialicons {
+    width: 45px;
+    max-width: 100px;
+    margin-top: 15px;
+    margin-left: 40px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/manualusers/HutopyProfile.vue b/src/views/manualusers/HutopyProfile.vue
index dffbe4d..b2a18e8 100644
--- a/src/views/manualusers/HutopyProfile.vue
+++ b/src/views/manualusers/HutopyProfile.vue
@@ -283,7 +283,7 @@
 
         <!--   <PostContentMenu style="margin-top: -30px;"></PostContentMenu>  Post   -->
 
-        <!-- Card nouvelle boutique -->
+        <!-- Release v0.1 -->
         <v-container>
           <v-card class="flow-menu m-0 youtube-card">
             <!-- Title, date and btn -->
@@ -293,32 +293,32 @@
                   <h1 class="card-title">
                     Déploiement de la version 0.10 d'Hutopy</h1>
                 </v-col>
-                <!--
-                <v-col class="text-right">
-                 <v-btn class="btn-card-options" flat tile elevation="0">
+
+                <!--<v-col class="text-right">
+<v-btn class="btn-card-options" flat tile elevation="0">
                     <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
                   </v-btn>          (a intégrer)
-                </v-col>  -->
+                </v-col> -->
               </v-row>
 
             </v-col>
 
             <!-- Card core Video/image & text -->
-            <div
-              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
+            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
               <v-container>
-                <v-img src="images/usersmedia/HutopyProfile/pictures/version.png" title="Guillaumem"></v-img>
+                <v-img src="images/usersmedia/HutopyProfile/pictures/version.png" title="Release v0.1"></v-img>
 
                 <!-- Date -->
                 <v-row class="text-right">
                   <v-col>
-                    <h1 style=" margin-right: 40px; margin-top: 10px">
-                      06-05-2024
+                    <h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
+                      24-04-2024
                     </h1>
                   </v-col>
                 </v-row>
 
-                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">
+
+                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
 
                   Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une
                   aventure
@@ -342,6 +342,7 @@
 
                   Merci de visiter Hutopy.</p>
 
+
                 <!-- Like dislike commment Section -->
                 <div style="height: 20px;"></div>
                 <div
@@ -351,14 +352,13 @@
                 </div>
 
                 <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px;"
-                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
+                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
               </v-container>
             </div>
           </v-card>
         </v-container>
 
-
       </v-col>
 
       <!-- "Large-Monitor-RightCol" Donation -->
@@ -439,6 +439,7 @@ let navigationItems = [
   filter: invert(1);
 }
 
+
 .Hutopy-menu-sticky-mobile {
   position: sticky;
   top: 0;
@@ -559,7 +560,9 @@ let navigationItems = [
 
 .card-date {
   margin-left: 10px;
-  margin-top: -18px
+  margin-top: -18px;
+  margin-bottom: -20px;
+  font-size: .8rem;
 }
 
 .social-container {
diff --git a/src/views/manualusers/LeffetProfile.vue b/src/views/manualusers/LeffetProfile.vue
index 850ca5c..ca0010c 100644
--- a/src/views/manualusers/LeffetProfile.vue
+++ b/src/views/manualusers/LeffetProfile.vue
@@ -286,8 +286,7 @@
             </v-col>
 
             <!-- Card core Video/image & text -->
-            <div
-              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
+            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
               <v-container>
                 <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
                   src="https://www.youtube.com/embed/3MqKVf1CEIQ?si=aV03Xq2ZNwlv1DWu" title="Guillaumem" frameborder="0"
@@ -304,7 +303,7 @@
                 </v-row>
 
 
-                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">
+                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
 
                   C’est un honneur de vous
                   En exclusivité : Voici l'Épisode 8 de la Saison 2 du Docu-Podcast de Cédieu Léveillé avec le Fondateur
@@ -358,13 +357,13 @@
                 </div>
 
                 <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px;"
-                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
+                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
               </v-container>
             </div>
           </v-card></v-container>
 
-        <!-- Card nouvelle boutique -->
+        <!-- Le nom -->
         <v-container>
           <v-card class="flow-menu m-0 youtube-card">
             <!-- Title, date and btn -->
@@ -385,8 +384,7 @@
             </v-col>
 
             <!-- Card core Video/image & text -->
-            <div
-              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
+            <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
               <v-container>
                 <v-img src="images/usersmedia/leffet/profilepictures/leffetProfile01.png" title="Guillaumem"></v-img>
 
@@ -399,7 +397,7 @@
                   </v-col>
                 </v-row>
 
-                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">Le nom de la Fondation vient de
+                <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">Le nom de la Fondation vient de
                   l'origine du phénomène que l’on nomme ‘’L’effet Papillon’’. Cette théorie implique que le battement
                   d’ailes d’un papillon au Brésil peut provoquer une tempête au Texas.<br><br>
 
@@ -435,8 +433,8 @@
                 </div>
 
                 <!-- Comments -->
-                <v-text-field style="margin-left: 2%; margin-bottom: 15px;"
-                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
+                <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
+                  placeholder="Commentaire (Arrive bientôt)"></v-text-field>
               </v-container>
             </div>
           </v-card>
@@ -505,7 +503,7 @@ import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
 import { ref } from 'vue';
 import StripePayment from '../StripePayment.vue';
-let imageSrc = '/images/usersmedia/leffet/banners/banner02.jpg';
+let imageSrc = '/images/usersmedia/leffet/banners/banner02.png';
 let profilePicture = '/images/usersmedia/leffet/profilepictures/leffetProfile01.png';
 let name = 'L\'EFFET'
 let title = 'Page officiel'
@@ -523,6 +521,7 @@ let navigationItems = [
   filter: invert(1);
 }
 
+
 .Hutopy-menu-sticky-mobile {
   position: sticky;
   top: 0;
@@ -643,7 +642,9 @@ let navigationItems = [
 
 .card-date {
   margin-left: 10px;
-  margin-top: -18px
+  margin-top: -18px;
+  margin-bottom: -20px;
+  font-size: .8rem;
 }
 
 .social-container {