diff --git a/src/views/UsersBrowser.vue b/src/views/UsersBrowser.vue
index 02fda2e..82b5bfd 100644
--- a/src/views/UsersBrowser.vue
+++ b/src/views/UsersBrowser.vue
@@ -1,65 +1,253 @@
 <template>
     <div style="background-color: #f4f4f4;">
-        <DefaultLayout />
+        <DefaultLayout style="margin-bottom: 30px"></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" style="border-radius:10px">Accueil</v-btn>
-                            </router-link>
-                        </v-col>
-                        <v-col cols="12">
+        <!-- "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>
 
-                            <div class="headline font-weight-bold">CRÉATEURS</div>
+        <!-- "PurpleLine" -->
+        <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
+        </v-row>
 
-                        </v-col>
+        <!-- "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://twitter.com/Hutopyinc">
+                        <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/xblack.png"
+                            alt="X"></v-img>
+                    </a>
+                </v-col>
+
+                <v-spacer class="hidden-xs"> </v-spacer>
+
+
+
+            </v-row>
+
+            <!-- User informations Name title and description  -->
+            <v-row class="social-container-mobile">
+                <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
+                    <v-row class="d-flex justify-center">
+                        {{ name }}
+                    </v-row>
+                </v-col>
+                <v-spacer xs="12" sm="4"></v-spacer>
+                <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
+                    <v-row class="d-flex justify-center">
+                        {{ title }}
                     </v-row>
                 </v-col>
             </v-row>
-        </v-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
+                    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>
-        <FooterLayout />
+
+        <!-- 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="3" xl="3" xxl="2" 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>
+                                </v-col>
+                            </v-container>
+                        </v-col>
+                    </v-row>
+                    <v-row style="height: 400px;"></v-row>
+                </v-col>
+            </v-col>
+
+            <!-- creators -->
+            <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="6" xl="6" xxl="8">
+                <v-container fluid style="margin-bottom: -40px; font-size: 3rem;">
+                    <v-row justify="center" class="text-center">
+                        <v-row justify="center">
+                            <v-col cols="12" class="text-left d-flex justify-center ">
+                                <div class="headline font-weight-bold">CRÉATEURS</div>
+                            </v-col>
+                        </v-row>
+                    </v-row>
+                </v-container>
+
+                <v-container>
+                    <v-row justify="center">
+                        <v-col cols="12">
+                            <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: 300px;">
+                                                <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>
+            </v-col>
+
+            <!-- "Large-Monitor-RightCol" Donation -->
+            <v-col cols="2" md="3" lg="3" xl="2" xxl="2" 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 creator-id="3c4317c6-af4d-475a-a382-6d0a675cc67f"></StripePayment>
+                                </v-container>
+                            </v-card>
+                        </v-container>
+                        <v-container style="height: 400px;">
+                        </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 creator-id="3c4317c6-af4d-475a-a382-6d0a675cc67f"></StripePayment>
+                    </v-container>
+                </v-bottom-sheet>
+
+            </div>
+        </template>
+
+        <FooterLayout></FooterLayout>
     </div>
 </template>
 
-<style>
-.card-equal-width {
-    max-width: 300px;
-    /* Ajustez cette valeur selon vos besoins */
-}
-</style>
-
 <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: 'Créateurs', link: '/userbrowser' },
+    { icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
+];
 
 const profiles = ref([
     {
@@ -110,11 +298,586 @@ const profiles = ref([
 </script>
 
 <style scoped>
-.text-decoration-none {
-    text-decoration: none;
+.invert-color {
+    filter: invert(1);
 }
 
-.card-equal-width {
-    width: 220px;
+
+.Hutopy-menu-sticky-mobile {
+    position: sticky;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1000;
+    margin-top: -40px;
 }
-</style>
+
+.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;
+    margin-bottom: -20px;
+    font-size: .8rem;
+}
+
+.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