diff --git a/public/images/usersmedia/HutopyProfile/banners/banner01.png b/public/images/usersmedia/HutopyProfile/banners/banner01.png
new file mode 100644
index 0000000..3a2a2e5
Binary files /dev/null and b/public/images/usersmedia/HutopyProfile/banners/banner01.png differ
diff --git a/public/images/usersmedia/HutopyProfile/pictures/version.png b/public/images/usersmedia/HutopyProfile/pictures/version.png
new file mode 100644
index 0000000..2689189
Binary files /dev/null and b/public/images/usersmedia/HutopyProfile/pictures/version.png differ
diff --git a/public/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png b/public/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png
new file mode 100644
index 0000000..eda1edf
Binary files /dev/null and b/public/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png differ
diff --git a/public/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png b/public/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png
new file mode 100644
index 0000000..447918f
Binary files /dev/null and b/public/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png differ
diff --git a/public/images/usersmedia/chloebeaugrand/banners/bannerChloeBeaugrand01.png b/public/images/usersmedia/chloebeaugrand/banners/bannerChloeBeaugrand01.png
new file mode 100644
index 0000000..0a34441
Binary files /dev/null and b/public/images/usersmedia/chloebeaugrand/banners/bannerChloeBeaugrand01.png differ
diff --git a/public/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand.jpg b/public/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand.jpg
new file mode 100644
index 0000000..4eee3cf
Binary files /dev/null and b/public/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand.jpg differ
diff --git a/public/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png b/public/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png
new file mode 100644
index 0000000..820e0f0
Binary files /dev/null and b/public/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png differ
diff --git a/public/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png b/public/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png
new file mode 100644
index 0000000..c42c0b0
Binary files /dev/null and b/public/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png differ
diff --git a/public/images/usersmedia/leffet/banners/banner01.png b/public/images/usersmedia/leffet/banners/banner01.png
new file mode 100644
index 0000000..8a5b4f9
Binary files /dev/null and b/public/images/usersmedia/leffet/banners/banner01.png differ
diff --git a/public/images/usersmedia/leffet/profilepictures/leffetProfile01.png b/public/images/usersmedia/leffet/profilepictures/leffetProfile01.png
new file mode 100644
index 0000000..973d500
Binary files /dev/null and b/public/images/usersmedia/leffet/profilepictures/leffetProfile01.png differ
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 50a92ed..f508872 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -8,17 +8,25 @@
         <v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
           <v-menu>
             <template v-slot:activator="{ props }">
-              <div class="d-flex align-center">
+              <v-row>
 
-                <!-- Profile picture in the top right corner -->
-                <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
-                </v-btn>
-              </div>
+
+
+
+                <!-- Colonne de droite -->
+                <v-col class="text-right d-flex align-center justify-end">
+                  <div class="d-flex align-center ">
+                    <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
+                    </v-btn>
+                  </div>
+                </v-col>
+              </v-row>
             </template>
 
+
             <!-- Dropdown Menu Profile/Connection -->
             <v-list style="padding: 0;">
               <v-list-item>
diff --git a/src/layouts/FooterLayout.vue b/src/layouts/FooterLayout.vue
index 938f3a2..22cc4ea 100644
--- a/src/layouts/FooterLayout.vue
+++ b/src/layouts/FooterLayout.vue
@@ -35,9 +35,10 @@
 
             <!-- Need X Account -->
             <v-col cols="auto">
-              <router-link :to="{ name: 'home' }">
+              <a href="https://twitter.com/Hutopyinc">
                 <img src="/images/hutopymedia/icons/pink/xpink.png" alt="Description image 1" class="icons">
-              </router-link>
+              </a>
+
             </v-col>
           </v-row>
         </v-container>
diff --git a/src/router/index.js b/src/router/index.js
index 5141903..f19d238 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,13 +6,16 @@ import HelpAndContact from '@/views/tos/HelpAndContact.vue'
 import TermsAndConditions from '@/views/tos/TermsAndConditions.vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import LoginView from '../views/LoginView.vue'
+import PaymentCompleted from '../views/PayementCompleted.vue'
 import SignupView from '../views/SignupView.vue'
+import UserBrowser from '../views/UsersBrowser.vue'
 import ContactView from '../views/main/ContactView.vue'
 import CreatorFolio from '../views/main/CreatorFolio.vue'
-import PaymentCompleted from '../views/PayementCompleted.vue'
 import HomeView from '../views/main/HomeView.vue'
 import YourProfile from '../views/main/YourProfile.vue'
-
+import ChloeBeauregard from '../views/manualusers/ChloeProfile.vue'
+import Hutopy from '../views/manualusers/HutopyProfile.vue'
+import Leffet from '../views/manualusers/LeffetProfile.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -89,6 +92,30 @@ const router = createRouter({
       name: 'about',
       component: About
     },
+
+    {
+      path: '/Hutopy',
+      name: 'Hutopy',
+      component: Hutopy
+    },
+
+    {
+      path: '/Leffet',
+      name: 'Leffet',
+      component: Leffet
+    },
+
+    {
+      path: '/userbrowser',
+      name: 'userbrowser',
+      component: UserBrowser
+    },
+
+    {
+      path: '/chloebeauregard',
+      name: 'chloebeauregard',
+      component: ChloeBeauregard
+    },
   ],
   scrollBehavior(to, from, savedPosition) {
     return { top: 0 };
diff --git a/src/views/UsersBrowser.vue b/src/views/UsersBrowser.vue
new file mode 100644
index 0000000..933b7c2
--- /dev/null
+++ b/src/views/UsersBrowser.vue
@@ -0,0 +1,104 @@
+<template>
+    <div style="background-color: #f4f4f4;">
+        <DefaultLayout />
+
+        <v-container fluid style="margin-top: 100px; font-size: 3rem;">
+            <v-row justify="center">
+                <v-col cols="12" class="text-center">
+                    <v-row justify="center">
+                        <!-- Colonne de gauche -->
+                        <v-col class="text-left d-flex justify-center "> <!-- Ajout de align-center -->
+                            <router-link to="/" class="d-flex justify-center">
+                                <!-- Retrait de la classe align-center -->
+                                <v-btn color="#a30e79">Accueil</v-btn>
+                            </router-link>
+                        </v-col>
+                        <v-col cols="12">
+
+                            <div class="headline font-weight-bold">UTILISATEURS</div>
+
+                        </v-col>
+                    </v-row>
+                </v-col>
+            </v-row>
+        </v-container>
+
+        <v-container fluid style="margin-bottom: 80px;">
+            <v-row justify="center">
+                <v-col cols="12" sm="8" md="8">
+                    <v-container class="mt-10">
+                        <v-row justify="center">
+                            <router-link v-for="(profile, index) in profiles" :key="index" :to="profile.routerLink"
+                                class="text-decoration-none">
+                                <v-col>
+                                    <v-card class="mb-4 card-equal-width" style="max-width: 250px; height: 325px;">
+                                        <v-img :src="profile.imageUrl" height="200px" width="300px"
+                                            style="margin-top: 10px;"></v-img>
+                                        <v-card-title style="font-weight: 600;" class="text-center">{{ profile.name
+                                            }}</v-card-title>
+                                        <v-card-text class="text-center">{{ profile.description }}</v-card-text>
+                                    </v-card>
+                                </v-col>
+                            </router-link>
+                        </v-row>
+                    </v-container>
+                </v-col>
+            </v-row>
+        </v-container>
+        <FooterLayout />
+    </div>
+</template>
+
+<style>
+.card-equal-width {
+    max-width: 300px;
+    /* Ajustez cette valeur selon vos besoins */
+}
+</style>
+
+<script setup>
+import { ref } from 'vue';
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import FooterLayout from '@/layouts/FooterLayout.vue';
+
+const profiles = ref([
+    {
+        id: 1,
+        name: "Hutopy",
+        description: "Page officiel",
+        imageUrl: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png',
+        routerLink: 'Hutopy'
+    },
+    {
+        id: 2,
+        name: "L'effet",
+        description: "Fondation",
+        imageUrl: '/images/usersmedia/leffet/profilepictures/leffetProfile01.png',
+        routerLink: 'leffet'
+    },
+    {
+        id: 3,
+        name: "Guillaume M",
+        description: "Créateur de contenus",
+        imageUrl: '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png',
+        routerLink: 'guillaumeaime'
+    },
+    {
+        id: 4,
+        name: "Chloé Beauregard",
+        description: "Spécialiste en médias sociaux",
+        imageUrl: '/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png',
+        routerLink: 'chloebeauregard'
+    }
+]);
+</script>
+
+<style scoped>
+.text-decoration-none {
+    text-decoration: none;
+}
+
+.card-equal-width {
+    width: 220px;
+}
+</style>
diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index a78f0e2..bff314a 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -46,13 +46,14 @@
             <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
           </v-row>
         </v-col>
-        <!-- X
+
         <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.x.com/">
             <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/xblack.png" alt="X"></v-img>
           </a>
-        </v-col> -->
+        </v-col>
         <!-- TikTok -->
+        <v-spacer></v-spacer>
         <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"
@@ -64,13 +65,13 @@
       <!-- 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>
+          <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>
+          <v-row class="d-flex justify-center">
             {{ title }}
           </v-row>
         </v-col>
@@ -552,7 +553,7 @@ let drawerbottom = ref(false)
 
 let navigationItems = [
   { icon: 'mdi-home', text: 'Accueil', link: 'home' },
-  { icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
+  { icon: 'mdi-account-group', text: 'Utilisateur', link: '/userbrowser' },
   //{ icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
 ];
 </script>
@@ -766,6 +767,7 @@ let navigationItems = [
 
 .profile-banner {
   margin-top: 25px;
+  min-height: 200px
 }
 
 .v-navigation-drawer {
@@ -1089,6 +1091,9 @@ let navigationItems = [
 }
 
 @media (min-width: 2560px) {
+
+
+
   .mobile-profile-picture-creator {
     transform: scale(1.5) translateY(25%) translateX(-20px);
   }
diff --git a/src/views/main/HomeView.vue b/src/views/main/HomeView.vue
index d7f2b43..28ef47e 100644
--- a/src/views/main/HomeView.vue
+++ b/src/views/main/HomeView.vue
@@ -190,9 +190,9 @@
             <!-- Account links  -->
             <v-row justify="center" class="profile-images">
               <v-col>
-                <router-link :to="{ name: 'creatorfolio' }">
-                  <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeLarge.png" alt="Profile Image"
-                    class="profile-image  ">
+                <router-link :to="{ name: 'Hutopy' }">
+                  <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png"
+                    alt="Profile Image" class="profile-image  ">
                 </router-link>
               </v-col>
               <v-col>
@@ -202,9 +202,9 @@
                 </router-link>
               </v-col>
               <v-col>
-                <router-link :to="{ name: 'creatorfolio' }">
-                  <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeLarge.png" alt="Profile Image"
-                    class="profile-image">
+                <router-link :to="{ name: 'chloebeauregard' }">
+                  <img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
+                    alt="Profile Image" class="profile-image">
                 </router-link>
               </v-col>
             </v-row>
@@ -327,8 +327,16 @@
           style="margin-top: 50px;  margin-bottom: 50px; text-align: center;  font-size: 3rem; font-weight: bold; color: #24393c">
           Ils sont sur Hutopy.</h1>
 
+
+
         <v-col>
           <v-row justify="center" class="profile-images">
+            <v-col cols="8">
+              <router-link :to="{ name: 'Hutopy' }">
+                <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png"
+                  alt="Profile Image" class="profile-image  ">
+              </router-link>
+            </v-col>
             <v-col cols="8">
               <router-link :to="{ name: 'creatorfolio' }">
                 <img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
@@ -336,15 +344,9 @@
               </router-link>
             </v-col>
             <v-col cols="8">
-              <router-link :to="{ name: 'creatorfolio' }">
-                <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeLarge.png" alt="Profile Image"
-                  class="profile-image  ">
-              </router-link>
-            </v-col>
-            <v-col cols="8">
-              <router-link :to="{ name: 'creatorfolio' }">
-                <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeLarge.png" alt="Profile Image"
-                  class="profile-image">
+              <router-link :to="{ name: 'chloebeauregard' }">
+                <img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
+                  alt="Profile Image" class="profile-image">
               </router-link>
             </v-col>
           </v-row>
diff --git a/src/views/manualusers/ChloeProfile.vue b/src/views/manualusers/ChloeProfile.vue
new file mode 100644
index 0000000..6efe4d7
--- /dev/null
+++ b/src/views/manualusers/ChloeProfile.vue
@@ -0,0 +1,1128 @@
+<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/p/C2f-3UnNdfX//">
+            <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-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
+        </v-col>
+      </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>
+                    <!-- x
+                    <a href="https://www.facebook.com/profile.php?id=61556819217561">
+                      <img class="socialicons" src="/images/hutopymedia/icons/black/xblack.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>  Post   -->
+
+        <!-- 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%; margin-bottom: -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">
+                      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
+                  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;"
+                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></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%; margin-bottom: -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">
+                      23-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
+                  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;"
+                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></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%; margin-bottom: -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">
+                      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
+                  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;"
+                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></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/chloebeaugrand/banners/bannerChloeBeaugrand01.png';
+let profilePicture = '/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.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: 'Membres', link: '/contact' },
+  //{ 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
+}
+
+.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;
+}
+
+.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
new file mode 100644
index 0000000..227adb7
--- /dev/null
+++ b/src/views/manualusers/HutopyProfile.vue
@@ -0,0 +1,1022 @@
+<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/Hutopy">
+            <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/hutopy.inc/">
+            <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>
+
+        <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.x.com/">
+            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/xblack.png" alt="X"></v-img>
+          </a>
+        </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-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="Notre mission chez Hutopy est d'aider les gens à s'épanouir en leur proposant un environnement de partage unique qui va leur permettre de se surpasser. Nous travaillons étroitement avec la communauté d'Hutopy afin de concentrer notre développement sur ce que vous demandez et sur vos besoins, afin d'offrir les meilleurs outils. Le tout en gardant à l'esprit l'aspect humain de chacun. Il est important pour nous de contribuer à créer un monde meilleur."
+                title="À propos d'Hutopy :">
+
+
+              </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: 1000px;"></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/Hutopy">
+                      <img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
+                        alt="Description image 2">
+                    </a>
+                    <a href="https://www.instagram.com/hutopy.inc/">
+                      <img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
+                        alt="Description image 2">
+                    </a>
+
+                    <a href="https://www.facebook.com/profile.php?id=61556819217561">
+                      <img class="socialicons" src="/images/hutopymedia/icons/black/xblack.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="Notre mission chez Hutopy est d'aider les gens à s'épanouir en leur proposant un environnement de partage unique qui va leur permettre de se surpasser. Nous travaillons étroitement avec la communauté d'Hutopy afin de concentrer notre développement sur ce que vous demandez et sur vos besoins, afin d'offrir les meilleurs outils. Le tout en gardant à l'esprit l'aspect humain de chacun. Il est important pour nous de contribuer à créer un monde meilleur."
+                        title="À propos d'Hutopy :">
+                      </v-expansion-panel>
+                    </v-col>
+                  </v-expansion-panels>
+                </v-container>
+              </v-row>
+            </v-container>
+          </v-container>
+        </v-container>
+
+        <!--   <PostContentMenu style="margin-top: -30px;"></PostContentMenu>  Post   -->
+
+        <!-- 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">
+                    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-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%; margin-bottom: -5%;">
+              <v-container>
+                <v-img src="images/usersmedia/HutopyProfile/pictures/version.png" title="Guillaumem"></v-img>
+
+                <!-- Date -->
+                <v-row class="text-right">
+                  <v-col>
+                    <h1 style=" margin-right: 40px; margin-top: 10px">
+                      06-05-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
+
+                  Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une
+                  aventure
+                  visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de
+                  fraîcheur en
+                  favorisant des interactions plus constructives entre les individus.
+
+                  Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur.
+                  Dans
+                  un futur
+                  proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites
+                  via
+                  l'onglet d'inscription et ont rempli quelques questions.
+
+                  Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La
+                  première
+                  consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire
+                  partie
+                  de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire
+                  progresser certaines fonctionnalités.
+
+                  Merci de visiter Hutopy.</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;"
+                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></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: 1000px;">
+            </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/HutopyProfile/banners/banner01.png';
+let profilePicture = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
+let name = 'Hutopy'
+let title = 'Page officiel'
+let drawerbottom = ref(false)
+
+let navigationItems = [
+  { icon: 'mdi-home', text: 'Accueil', link: 'home' },
+  { icon: 'mdi-account-group', text: 'Membres', 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: #23393b;
+  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
+}
+
+.social-container {
+  background-color: #6b0065;
+  border-top-right-radius: 30px;
+  border-bottom-right-radius: 30px;
+  font-size: 1.7rem;
+  font-weight: 600;
+  color: white;
+}
+
+.social-container2 {
+  background-color: #a30e79;
+  border-bottom-right-radius: 30px;
+  font-size: 1.4rem;
+  font-weight: 500;
+  color: white;
+}
+
+.social-container-mobile {
+  background-color: #a30e79;
+  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: #6b0065;
+}
+
+.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);
+  }
+
+  .profile-container {
+    margin-top: -150px
+  }
+
+  .profile-banner {
+    margin-top: 25px;
+    min-height: 450px;
+  }
+
+  .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/LeffetProfile.vue b/src/views/manualusers/LeffetProfile.vue
new file mode 100644
index 0000000..819e419
--- /dev/null
+++ b/src/views/manualusers/LeffetProfile.vue
@@ -0,0 +1,1001 @@
+<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/Hutopy">
+            <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/hutopy.inc/">
+            <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>
+
+        <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.x.com/">
+            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/xblack.png" alt="X"></v-img>
+          </a>
+        </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-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>
+            {{ 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>
+            {{ 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="Notre mission chez Hutopy est d'aider les gens à s'épanouir en leur proposant un environnement de partage unique qui va leur permettre de se surpasser. Nous travaillerons étroitement avec la communauté d'Hutopy afin de concentrer notre développement sur ce que vous demandez et sur vos besoins, afin d'offrir les meilleurs outils. Le tout en gardant à l'esprit l'aspect humain de chacun. Il est important pour nous de contribuer à créer un monde meilleur."
+                title="À propos d'Hutopy :">
+
+
+              </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/Hutopy">
+                      <img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
+                        alt="Description image 2">
+                    </a>
+                    <a href="https://www.instagram.com/hutopy.inc/">
+                      <img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
+                        alt="Description image 2">
+                    </a>
+
+                    <a href="https://www.facebook.com/profile.php?id=61556819217561">
+                      <img class="socialicons" src="/images/hutopymedia/icons/black/xblack.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="Notre mission chez Hutopy est d'aider les gens à s'épanouir en leur proposant un environnement de partage unique qui va leur permettre de se surpasser. Nous travaillerons étroitement avec la communauté d'Hutopy afin de concentrer notre développement sur ce que vous demandez et sur vos besoins, afin d'offrir les meilleurs outils. Le tout en gardant à l'esprit l'aspect humain de chacun. Il est important pour nous de contribuer à créer un monde meilleur."
+                        title="À propos d'Hutopy :">
+                      </v-expansion-panel>
+                    </v-col>
+                  </v-expansion-panels>
+                </v-container>
+              </v-row>
+            </v-container>
+          </v-container>
+        </v-container>
+
+        <!--   <PostContentMenu style="margin-top: -30px;"></PostContentMenu>  Post   -->
+
+        <!-- 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%; margin-bottom: -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">
+                      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
+                  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;"
+                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></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/leffet/banners/banner01.png';
+let profilePicture = '/images/usersmedia/leffet/profilepictures/leffetProfile01.png';
+let name = 'L\'effet'
+let title = 'page officiel'
+let drawerbottom = ref(false)
+
+let navigationItems = [
+  { icon: 'mdi-home', text: 'Accueil', link: 'home' },
+  { icon: 'mdi-account-group', text: 'Membres', 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: #23393b;
+  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
+}
+
+.social-container {
+  background-color: #6b0065;
+  border-top-right-radius: 30px;
+  border-bottom-right-radius: 30px;
+  font-size: 1.7rem;
+  font-weight: 600;
+  color: white;
+}
+
+.social-container2 {
+  background-color: #a30e79;
+  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 {
+  height: 150px;
+  width: 150px;
+  border-radius: 50%;
+  max-width: 150px;
+  border: 6px 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);
+  }
+
+  .profile-container {
+    margin-top: -150px
+  }
+
+  .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