diff --git a/src/views/main/YourProfile.vue b/src/views/main/YourProfile.vue
index b41365c..88f1d9c 100644
--- a/src/views/main/YourProfile.vue
+++ b/src/views/main/YourProfile.vue
@@ -1,16 +1,112 @@
 <template>
-  <DefaultLayout></DefaultLayout>
-  <main class="top-aligned-column">
-    <div class="center-column column">
-      <p>YourProfile</p>
-    </div>
-  </main>
 
- 
+  <body style="background-color:#f4f4f4">
+    <DefaultLayout></DefaultLayout>
+
+    <v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;"></v-row>
+
+    <v-row justify="center">
+      <v-col cols="12">
+        <v-img class="profile-banner " max-height="375" :src="bannerImageUrl" cover
+          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
+      </v-col>
+    </v-row>
+    <v-row style="background-color: #6b0065; height: 100px; margin-top: -0px;" align="center">
+      <v-col cols="12" class="text-right">
+        <v-btn style="margin-right: 3%" @click="editBannerImage"> <v-icon>mdi-pencil</v-icon></v-btn>
+      </v-col>
+    </v-row>
+
+    <v-row justify="center">
+
+    </v-row>
+
+
+    <v-container style="max-width: 800px;" class="d-flex justify-center align-center">
+      <v-container>
+        <v-row>
+          <v-col style="background-color: white; border-radius: 30px;" class=" col-shadow">
+            <v-row style="margin-bottom: 20px;">
+              <v-spacer></v-spacer>
+              <v-col style="margin-top: -70px;">
+                <v-row>
+                  <v-img class="your-profile-picture" :src="profilePictureUrl"></v-img>
+                </v-row>
+                <v-col>
+                  <v-btn style="margin-top: -30px; margin-left: " @click="editProfilePicture">
+                    <v-icon>mdi-pencil</v-icon>
+                  </v-btn>
+                </v-col>
+
+              </v-col>
+              <v-spacer></v-spacer>
+            </v-row>
+            <p class="text-center" style="margin-bottom: 10px; font-size: 2rem; font-weight: 600;">{{ userName }}</p>
+            <p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">Informations personnelles</p>
+
+            <v-form @submit.prevent="updateProfile">
+              <v-text-field v-model="firstName" label="Prénom" :readonly="!isEditing"></v-text-field>
+              <v-text-field v-model="lastName" label="Nom" :readonly="!isEditing"></v-text-field>
+              <v-text-field v-model="description" label="Description" :readonly="!isEditing"></v-text-field>
+
+            </v-form>
+            <v-col class="text-right"> <!-- Aligner le contenu à droite -->
+              <v-btn v-if="!isEditing" @click="isEditing = true">Éditer</v-btn>
+              <v-btn v-else @click="isEditing = false; updateProfile">Enregistrer</v-btn>
+            </v-col>
+
+          </v-col>
+
+        </v-row>
+      </v-container>
+    </v-container>
+    <FooterLayout></FooterLayout>
+  </body>
 </template>
 
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import FooterLayout from '@/layouts/FooterLayout.vue';
+import { ref } from 'vue';
 
 
+
+const profilePictureUrl = ref('../../../images/guillaume.png');
+const bannerImageUrl = ref('../../../images/guillaimeaime3x.png');
+
+let userName = 'Guillaume Mousseau';
+const firstName = ref('Votre prénom');
+const lastName = ref('Votre nom');
+const description = ref('Votre description');
+const password = ref('Votre mot de passe');
+const isEditing = ref(false);
+
+const editProfilePicture = () => {
+  // Mettez ici la logique pour changer la photo de profil
+};
+
+const editBannerImage = () => {
+  // Mettez ici la logique pour changer la bannière de profil
+};
+
+const updateProfile = () => {
+  // Mettez ici la logique pour mettre à jour le profil
+};
 </script>
+
+<style>
+.your-profile-picture {
+  width: 300px;
+  border-radius: 40px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
+
+}
+
+.row-shadow {
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
+}
+
+.col-shadow {
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+}
+</style>
