diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index 505386e..0925180 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -112,30 +112,104 @@
                   <v-img src="../../../images/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-group>
-                      <router-link v-for="(item, index) in navigationItems" :key="index" :to="item.link">
+                    <v-list-item v-for="item in navigationItems">
+                      <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-group>
-                  </v-list>
-                </v-col>
-                <!-- Tools -->
-                <v-col cols="12" class="px-0">
-                  <v-list dense class="d-flex align-start align-center main-background">
-                    <v-list-item-group>
-                      <router-link v-for="(item, index) in tools" :key="index" :to="item.link">
-                        <v-btn text class="btn-custom" elevation="0" outlined="false">
-                          <v-icon left class="mr-4">{{ item.icon }}</v-icon>
-                          {{ item.text }}
-                        </v-btn>
-                      </router-link>
-                    </v-list-item-group>
+                    </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>
+
                 <!-- Log-out -->
                 <v-col cols="12" class="px-0 logout-button">
                   <v-btn text class="d-flex align-start main-background align-center" elevation="0" outlined="false">
@@ -149,96 +223,7 @@
 
 
           </v-row>
-
           <v-row style="height: 1400px;"></v-row>
-
-          <!-- Wallet -->
-          <v-row>
-            <v-dialog transition="dialog-top-transition" width="auto">
-              <template v-slot:activator="{ props: activatorProps }">
-                <v-btn v-bind="activatorProps" text class="text-left" block size="x-large"
-                  style="margin-left: -20%; background-color: #f4f4f4; transform: scale(1.3);" elevation="0">
-                  <v-icon color="black">mdi-wallet</v-icon>
-                  <div @click="isActive.value = false">PORTEFEUILLE</div>
-                </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-row>
         </v-col>
 
       </v-col>
@@ -475,44 +460,31 @@
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
 import StripePayment from '../StripePayment.vue';
+
+
+let imageSrc = '../../../images/guillaimeaime3x.png';
+let profilePicture = '../../../images/guillaume.png';
+
+let name = 'Guillaume Mousseau'
+let title = 'Créateur de contenus'
+let drawerbottom = false
+let navigationItems = [
+    { icon: 'mdi-home', text: 'Accueil', link: 'home' },
+    { icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
+    { icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
+];
+let tools = [
+  { icon: 'mdi-wallet', text: 'Bourse', link: '/portefeuille' },
+]
+
+
+let items = [
+  {icon: "icon", text: "text"},
+  {icon: "icon2", text: "text2"},
+]
+
 </script>
 
-<script>
-export default {
-  data() {
-    return {
-      imageSrc: '../../../images/guillaimeaime3x.png',
-      profilePicture: '../../../images/guillaume.png',
-      name: 'Guillaume Mousseau',
-      title: 'Créateur de contenus',
-      facebookLink: 'www.facebook.com',
-      instagramLink: 'www.instagram.com',
-      xLink: 'x.com',
-      tiktokLink: 'tiktok.com',
-      drawer: false,
-      drawerbottom: false,
-
-      items: [
-        { title: 'Item 1' },
-        { title: 'Item 2' },
-        { title: 'Item 3' },
-      ],
-      navigationItems: [
-        { icon: 'mdi-home', text: 'Accueil', link: 'home' },
-        { icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
-        { icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
-      ],
-      tools: [
-        { icon: 'mdi-wallet', text: 'Bourse', link: '/portefeuille' },
-      ]
-    };
-  },
-};
-</script>
-
-
-
-
 <style scoped>
 .Hutopy-menu-sticky {
   position: sticky;
diff --git a/src/views/main/HomeView.vue b/src/views/main/HomeView.vue
index d6bb4e6..688b249 100644
--- a/src/views/main/HomeView.vue
+++ b/src/views/main/HomeView.vue
@@ -368,7 +368,7 @@
     </v-snackbar>
 
     <v-list style="background-color: #F4F4F4;" lines="one">
-      <v-list-item v-for=" item  in  itemList " :key="item" :title="item.id" :subtitle="item.title"></v-list-item>
+      <v-list-item v-for=" item  in  itemList " :key="item" :title="item.firstName" :subtitle="item.lastName"></v-list-item>
     </v-list>
     <FooterLayout></FooterLayout>
   </div>
@@ -392,10 +392,8 @@ let errorNoAccessSnackBar = ref(false);
 
 async function callBackend() {
   try {
-    const response = await client.get('/api/TodoItems?ListId=1&PageNumber=1&PageSize=10');
-    const responseItems = response.data.items;
-    const orderedResponseItems = responseItems.sort((a, b) => a.id - b.id);
-    itemList.value = orderedResponseItems
+    const response = await client.get('/api/JoinUs?PageNumber=1&PageSize=10');
+    itemList.value = response.data.items;
 
   } catch (error) {
     errorNoAccessSnackBar.value = true;