All the modals are created, only the connection remains to be done.

src/views/Profile/Dialogs/PageInformations/BannerPicker.vue

@@ -1,18 +1,25 @@
 <template>
   <div class="p-4">
     
-    <h2 class="text-lg font-semibold mb-4">Sélectionne ta bannière</h2>
+    <h2 class="text-2xl font-semibold mb-4 flex justify-center">Sélectionne ta bannière</h2>
+    <div class="mb-5">
     <img
         @click="openModal('BannerPicker')"
         src="/images/hutopymedia/banners/tutorialbanner.png"
-        class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
+        class="w-full transition duration-200 ease-in-out transform"
         alt="Tutorial Banner"
     >
-   
+    </div>
     <v-file-input
+        variant="outlined"
         accept="image/*"
         label="File input"
     ></v-file-input>
+
+    <div class="flex justify-end space-x-4">
+      <v-btn variant="plain" color="black">Annuler</v-btn>
+      <v-btn color="#A6147D">Enregistrer</v-btn>
+    </div>
   </div>
 </template>
 

src/views/Profile/Dialogs/PageInformations/ColorBorder.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="title text-2xl">Couleur contour</h2>
+    <h2 class="title font-semibold  text-2xl">Couleur contour</h2>
 
     <div  class="flex justify-center"><v-color-picker></v-color-picker></div>
 

src/views/Profile/Dialogs/PageInformations/ColorBottomBanner.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="title text-2xl">Couleur de la bannière inférieur</h2>
+    <h2 class="title font-semibold  text-2xl">Couleur de la bannière inférieur</h2>
 
     <div  class="flex justify-center"><v-color-picker></v-color-picker></div>
 

src/views/Profile/Dialogs/PageInformations/ColorMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="title text-2xl">Couleur des Menus</h2>
+    <h2 class="title font-semibold  text-2xl">Couleur des Menus</h2>
 
     <div  class="flex justify-center"><v-color-picker></v-color-picker></div>
 

src/views/Profile/Dialogs/PageInformations/ColorTopBanner.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h2 class="title text-2xl">Couleur de la bannière supérieure</h2>
+    <h2 class="title font-semibold  text-2xl">Couleur de la bannière supérieure</h2>
     
     <div  class="flex justify-center"><v-color-picker></v-color-picker></div>
     

src/views/Profile/Dialogs/PageInformations/ProfilePicturePicker.vue

@@ -1,11 +1,29 @@
 <template>
   <div class="p-4">
-    <h2 class="text-lg font-semibold mb-4">Choisir Image de profil</h2>
+    <h2 class="text-2xl font-semibold mb-4 flex justify-center">Choisir Image de profil</h2>
-    <input type="file" @change="onFileChange" accept="image/*" class="mb-4" />
+    <div class="flex justify-center mb-5">
+    <img
+        @click="openModal('ProfilePicturePicker')"
+        class=" custom-border  active:bg-gray-600 shadow flex items-center transition duration-200 ease-in-out w-48 h-48 rounded-full"
+        src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png"
+        alt="Profile Image"
+    >
+
+    </div>
+    <v-file-input
+        variant="outlined"
+        accept="image/*"
+        label="File input"
+    ></v-file-input>
     <div v-if="bannerUrl" class="mt-4">
       <h3 class="text-md font-semibold mb-2">Aperçu de la bannière:</h3>
       <img :src="bannerUrl" alt="Banner Preview" class="w-full h-auto rounded shadow" />
     </div>
+
+    <div class="flex justify-end space-x-4">
+      <v-btn variant="plain" color="black">Annuler</v-btn>
+      <v-btn color="#A6147D">Enregistrer</v-btn>
+    </div>
   </div>
 </template>