I added the modal files and connected them to their buttons. I need to complete every modal file.

src/views/Profile/AccountSecurity.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="flex flex-col items-center w-full">
+    <h1 class="uppercase pb-5 text-2xl">   <v-icon class="mr-2">mdi-security</v-icon> Sécurité</h1>
+
+    <div class="border rounded-2xl w-full max-w-[800px]">
+      <div class="py-5 uppercase ml-4">Comment vous connecter à Hutopy</div>
+
+      <div class="flex flex-col w-full">    
+        <button
+            @click="openModal('ModalPassword')"
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-onepassword</v-icon></span>
+          <span class="flex-auto text-left pr-6">Mot de passe</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button
+            @click="openModal('ModalRecoveryByEmailInfo')"
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-email-outline</v-icon></span>
+          <span class="flex-auto text-left pr-6">Adresse e-mail de récupération</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button
+            @click="openModal('ModalRecoveryByPhoneInfo')"
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl">
+          <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-cellphone</v-icon></span>
+          <span class="flex-auto text-left pr-6">Numéro de téléphone de récupération</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal -->
+  <v-dialog v-model="dialog" max-width="600px">
+    <v-card>
+      <v-card-title>
+
+        <v-spacer></v-spacer>
+
+      </v-card-title>
+      <v-card-text>
+        <component :is="currentComponent"></component>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+
+  
+</template>
+
+
+
+<script setup>
+import { ref } from 'vue';
+import ModalPassword from '@/views/Profile/Dialogs/AccountSecurity/ModalPassword.vue';
+import ModalRecoveryByEmailInfo from '@/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByEmailInfo.vue';
+import ModalRecoveryByPhoneInfo from '@/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByPhoneInfo.vue';
+
+
+const dialog = ref(false);
+const currentComponent = ref('');
+
+const componentsMap = {
+  ModalPassword,
+  ModalRecoveryByEmailInfo,
+  ModalRecoveryByPhoneInfo,
+
+};
+
+const openModal = (component) => {
+  currentComponent.value = componentsMap[component];
+  dialog.value = true;
+};
+</script>
+
+<style>
+.HoverBtn:hover {
+  @apply bg-[#A6147D] text-white;
+  @apply hover:opacity-90; /* Réduire l'opacité au survol */
+}
+
+
+</style>
+
+

src/views/Profile/Dialogs/AccountSecurity/ModalPassword.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Password
+</template>
+
+<style scoped>
+
+</style>

src/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByEmailInfo.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  RecoveryByEmail
+</template>
+
+<style scoped>
+
+</style>

src/views/Profile/Dialogs/AccountSecurity/ModalRecoveryByPhoneInfo.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+ RecoveryByPhoneInfo
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Facebook
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  Instagram
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  LinkedIn
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Reddit
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+TikTok
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Website
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+ X
+</template>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Youtube
+</template>
+
+<style scoped>
+
+</style>

src/views/Profile/Dialogs/PersonnalInfo/AdressesHome.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Adresses home
+</template>
+
+<style scoped>
+
+</style>

src/views/Profile/Dialogs/PersonnalInfo/AdressesWork.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+AdressesWork
+</template>
+
+<style scoped>
+
+</style>

src/views/Profile/Dialogs/PersonnalInfo/Birthday.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Birthday
+</template>
+
+<style scoped>
+
+</style>

src/views/Profile/Dialogs/PersonnalInfo/Email.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Email
+</template>
+
+<style scoped>
+
+</style>

src/views/Profile/Dialogs/PersonnalInfo/Gender.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+gender
+</template>
+
+<style scoped>
+
+</style>

src/views/Profile/Dialogs/PersonnalInfo/Name.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+ Name
+</template>
+
+<style scoped>
+
+</style>

src/views/Profile/Dialogs/PersonnalInfo/Phone.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+Phone
+</template>
+
+<style scoped>
+
+</style>

src/views/Profile/ManageAccount.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="flex flex-col items-center w-full">
+    <h1 class="uppercase pb-5 text-2xl">  <v-icon class="mr-2 text">mdi-account</v-icon> Gestion des comptes</h1>
+
+    <div class="border rounded-2xl w-full max-w-[800px]">
+      <div class="py-5 uppercase ml-4">Comptes</div>
+
+      <div class="flex flex-col w-full">
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="min-w-32 text-left">Id de la page</span>
+          <span class="flex-auto pr-6 text-left">Nom de la page / utilisateur </span>
+          <span class="flex-none">
+            <img
+                :src="'/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
+                alt="Profile Image"
+                class="ml-2 rounded-full"
+                style="width: 48px; height: 48px;">
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out rounded-b-2xl w-full">
+          <span class="flex-none pa-2 min-w-32 text-left">Ajouter un compte</span>
+          
+          <span class="flex-none text-fuchsia-800">
+            <v-icon>mdi-plus-circle</v-icon>
+          </span>
+        </button>
+      </div>
+    </div>
+
+    <div class="border rounded-2xl w-full max-w-[800px] mt-10">
+      <div class="py-5 uppercase ml-4">Autorisations accordées</div>
+
+      <div class="flex flex-col w-full">
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="min-w-32 text-left">Id de la page</span>
+          <span class="flex-auto pr-6 text-left">Nom de utilisateur </span>
+          <span class="flex-none">
+            <img
+                :src="'/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
+                alt="Profile Image"
+                class="ml-2 rounded-full"
+                style="width: 48px; height: 48px;">
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out rounded-b-2xl w-full">
+          <span class="flex-none pa-2 min-w-32 text-left">Ajouter un compte</span>
+
+          <span class="flex-none text-fuchsia-800">
+            <v-icon>mdi-plus-circle</v-icon>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+
+
+<script setup>
+
+</script>
+
+<style>
+.HoverBtn:hover {
+  @apply bg-[#A6147D] text-white;
+  @apply hover:opacity-90; /* Réduire l'opacité au survol */
+}
+
+
+</style>
+
+

src/views/Profile/PageInformations.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="flex flex-col items-center w-full">
+    <h1 class="uppercase pb-5 text-2xl">   <v-icon class="mr-2">mdi-file-edit-outline</v-icon> Informations de votre page</h1>
+
+    <div class="border rounded-2xl w-full max-w-[800px]">
+      <div class="py-5 uppercase ml-4">Bannière et image de profil</div>
+      <div class="flex flex-col w-full">    
+       
+        <button class="flex justify-end h-10 align-center bg-fuchsia-800 text-white px-5">
+          <v-icon>mdi-eyedropper-variant</v-icon>
+        </button>
+
+        <button >
+          <img
+              src="/images/hutopymedia/banners/tutorialbanner.png"
+              class="w-full transition duration-200 ease-in-out transform hover:brightness-125"
+              alt="Tutorial Banner"
+          >
+        </button>
+
+
+        <button class="flex justify-end h-10 align-center bg-fuchsia-600 text-white px-5">
+          <v-icon>mdi-eyedropper-variant</v-icon>
+        </button>
+
+        <button class="flex justify-center my-5">
+          <img
+              class="custom-border hover:brightness-125 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"
+          >
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-circle-outline</v-icon></span>
+          <span class="flex-auto text-left pr-6">Couleur du contour de la photo de profil.</span>
+          <span class="flex-none">
+        <v-icon>mdi-eyedropper-variant</v-icon>
+          </span>
+        </button>
+
+        <button class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl">
+          <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-menu</v-icon></span>
+          <span class="flex-auto text-left pr-6">couleur des entêtes de menus</span>
+          <span class="flex-none">
+           <v-icon>mdi-eyedropper-variant</v-icon>
+          </span>
+        </button>    
+      </div>
+    </div>
+
+    <!-- Réseaux sociaux -->
+    <div class="mt-10 border rounded-2xl w-full max-w-[800px]">
+      <div class="py-5 uppercase ml-4">Réseaux Sociaux</div>
+      <div class="flex flex-col w-full">
+        <button
+            @click="openModal('ModalFacebook')"
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-facebook</v-icon></span>
+          <span class="flex-auto text-left pr-6">Facebook</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button
+            @click="openModal('ModalInstagram')"
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-instagram</v-icon></span>
+          <span class="flex-auto text-left pr-6">Instagram</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button
+            @click="openModal('ModalX')"
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
+          <span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/hutopymedia/icons/black/xblack.png" class="w-5 h-5" ></span>
+          <span class="flex-auto text-left pr-6">X</span>
+          <span class="flex-none">          
+                        <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button
+            @click="openModal('ModalLinkedIn')"
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
+          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-linkedin</v-icon></span>
+          <span class="flex-auto text-left pr-6">LinkedIn</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button
+            @click="openModal('ModalTikTok')"
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
+          <span class="flex-none pa-2 min-w-32 text-left"> <img src="/images/hutopymedia/icons/black/tiktokblack.png" class="w-5 h-5" ></span>
+          <span class="flex-auto text-left pr-6">TikTok</span>
+          <span class="flex-none">          
+                        <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button
+            @click="openModal('ModalYoutube')"
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
+          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-youtube</v-icon></span>
+          <span class="flex-auto text-left pr-6">Youtube</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button
+            @click="openModal('ModalReddit')"
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full ">
+          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-reddit</v-icon></span>
+          <span class="flex-auto text-left pr-6">Reddit</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button
+            @click="openModal('ModalWebsite')"
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl  ">
+          <span class="pa-2 min-w-32 text-left"><v-icon>mdi-web</v-icon></span>
+          <span class="flex-auto text-left pr-6">Site web personnel</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+        
+        
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal -->
+  <v-dialog v-model="dialog" max-width="600px">
+    <v-card>
+      <v-card-title>
+
+        <v-spacer></v-spacer>
+
+      </v-card-title>
+      <v-card-text>
+        <component :is="currentComponent"></component>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+  
+
+</template>
+
+
+
+<script setup>
+import { ref } from 'vue';
+import ModalFacebook from '@/views/Profile/Dialogs/PageInformations/ModalFacebook.vue';
+import ModalInstagram from '@/views/Profile/Dialogs/PageInformations/ModalInstagram.vue';
+import ModalLinkedIn from '@/views/Profile/Dialogs/PageInformations/ModalLinkedIn.vue';
+import ModalReddit from '@/views/Profile/Dialogs/PageInformations/ModalReddit.vue';
+import ModalTikTok from '@/views/Profile/Dialogs/PageInformations/ModalTikTok.vue';
+import ModalWebsite from '@/views/Profile/Dialogs/PageInformations/ModalWebsite.vue';
+import ModalX from '@/views/Profile/Dialogs/PageInformations/ModalX.vue';
+import ModalYoutube from '@/views/Profile/Dialogs/PageInformations/ModalYoutube.vue';
+
+
+const dialog = ref(false);
+const currentComponent = ref('');
+
+const componentsMap = {
+  ModalFacebook,
+  ModalInstagram,
+  ModalLinkedIn,
+  ModalReddit,
+  ModalTikTok,
+  ModalWebsite,
+  ModalX,
+  ModalYoutube
+};
+
+const openModal = (component) => {
+  currentComponent.value = componentsMap[component];
+  dialog.value = true;
+};
+
+</script>
+
+<style>
+.HoverBtn:hover {
+  @apply bg-[#A6147D] text-white;
+  @apply hover:opacity-90; /* Réduire l'opacité au survol */
+}
+
+.HoverBtnpicture:hover {
+  @apply bg-[#A6147D] text-white;
+  @apply hover:opacity-90; /* Réduire l'opacité au survol */
+}
+
+.custom-border {
+  border: 3px solid #A6147D;
+}
+
+</style>
+
+

src/views/Profile/PersonnalInfo.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="flex flex-col items-center w-full">
+    <h1 class="uppercase pb-5 text-2xl">
+      <v-icon class="mr-2">mdi-information</v-icon> Informations personnelles
+    </h1>
+
+    <div class="border rounded-2xl w-full max-w-[800px]">
+      <div class="py-5 uppercase ml-4">Information de base</div>
+
+      <div class="flex flex-col w-full">
+        <button
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
+            @click="openModal('Name')">
+          <span class="min-w-32 text-left">Photo de profil</span>
+          <span class="flex-auto pr-6 text-left">Une photo de profil aide à personnaliser votre compte</span>
+          <span class="flex-none">
+            <img
+                :src="'/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png'"
+                alt="Profile Image"
+                class="ml-2 rounded-full"
+                style="width: 48px; height: 48px;">
+          </span>
+        </button>
+
+        <button
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
+            @click="openModal('Name')">
+          <span class="pa-2 min-w-32 text-left">Nom</span>
+          <span class="flex-auto text-left pr-6">Pascal Marchesseault</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
+            @click="openModal('Birthday')">
+          <span class="flex-none pa-2 min-w-32 text-left">Anniversaire</span>
+          <span class="flex-auto text-left pr-6">27 octobre 1988</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out rounded-b-2xl w-full"
+            @click="openModal('Gender')">
+          <span class="flex-none pa-2 min-w-32 text-left">Genre</span>
+          <span class="flex-auto text-left pr-6">Homme</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Phone & email -->
+  <div class="flex flex-col items-center mt-10 w-full">
+    <div class="border rounded-2xl w-full max-w-[800px]">
+      <div class="py-5 uppercase ml-4">Coordonnées</div>
+
+      <div class="flex flex-col w-full">
+        <button
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
+            @click="openModal('Email')">
+          <span class="min-w-32 text-left">Courriel</span>
+          <span class="flex-auto pr-6 text-left">marchesseault_pascal@hotmail.com</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
+            @click="openModal('Phone')">
+          <span class="pa-2 min-w-32 text-left">Téléphone</span>
+          <span class="flex-auto text-left pr-6">(581) 999-7540</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Address -->
+  <div class="flex flex-col items-center mt-10 w-full">
+    <div class="border rounded-2xl w-full max-w-[800px]">
+      <div class="py-5 uppercase ml-4">Adresses</div>
+
+      <div class="flex flex-col w-full">
+        <button
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
+            @click="openModal('AdressesHome')">
+          <span class="min-w-32 text-left">Domicile</span>
+          <span class="flex-auto pr-6 text-left">2127 Rue De Casson, Trois-Rivières, Qc</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+
+        <button
+            class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
+            @click="openModal('AdressesWork')">
+          <span class="pa-2 min-w-32 text-left">Travail</span>
+          <span class="flex-auto pr-6 text-left">2127 Rue De Casson, Trois-Rivières, Qc</span>
+          <span class="flex-none">
+            <v-icon>mdi-chevron-right</v-icon>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Modal -->
+  <v-dialog v-model="dialog" max-width="600px">
+    <v-card>
+      <v-card-title>
+      
+        <v-spacer></v-spacer>
+      
+      </v-card-title>
+      <v-card-text>
+        <component :is="currentComponent"></component>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
+
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Name from '@/views/Profile/Dialogs/PersonnalInfo/Name.vue';
+import AdressesHome from '@/views/Profile/Dialogs/PersonnalInfo/AdressesHome.vue';
+import AdressesWork from '@/views/Profile/Dialogs/PersonnalInfo/AdressesWork.vue';
+import Birthday from '@/views/Profile/Dialogs/PersonnalInfo/Birthday.vue';
+import Email from '@/views/Profile/Dialogs/PersonnalInfo/Email.vue';
+import Gender from '@/views/Profile/Dialogs/PersonnalInfo/Gender.vue';
+import Phone from '@/views/Profile/Dialogs/PersonnalInfo/Phone.vue';
+
+const dialog = ref(false);
+const currentComponent = ref('');
+
+const componentsMap = {
+  Name,
+  AdressesHome,
+  AdressesWork,
+  Birthday,
+  Email,
+  Gender,
+  Phone
+};
+
+const openModal = (component) => {
+  currentComponent.value = componentsMap[component];
+  dialog.value = true;
+};
+</script>
+
+<style>
+.HoverBtn:hover {
+  @apply bg-[#A6147D] text-white;
+  @apply hover:opacity-90; /* Réduire l'opacité au survol */
+}
+</style>