diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 59379ed..73f853d 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -2,13 +2,13 @@
 
   <body style="background-color: #f4f4f4;">
 
+    <v-card style="z-index: 9000; background-color: #f4f4f4;" class="hidden-sm-and-down" hidden-sm-and-down>
 
-    <div class="md:flex hidden items-center justify-between flex-col">
       <!-- Version pour ordinateur -->
       <v-container style="z-index: 2000; margin-bottom: 1.4%">
         <v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
 
-          <v-card-text justify="end" style="max-width: 22%; min-width: 500px; margin-top: .2%; margin-bottom: -1.2%;">
+          <v-card-text justify="end" style="max-width: 22%; min-width: 500px; margin-top: .2%;">
             <v-text-field append-inner-icon="mdi-magnify" density="compact"
               label="Recherche et comptes (Non fonctionnel pour le moment)" variant="solo" hide-details
               single-line></v-text-field>
@@ -27,87 +27,48 @@
 
       </v-container>
 
-    </div>
 
+    </v-card>
 
     <!-- Version pour mobile -->
-    <div class="md:hidden flex flex-col items-center justify-center">
-      <v-container style="margin-top: -20px;">
+    <v-card style="z-index: 9000; background-color: #f4f4f4;" class="hidden-md-and-up" hidden-md-and-up>
+      <v-app-bar app>
+        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
         <v-row>
-
-
-          <v-col cols="auto">
-            <!-- Logo -->
-            <router-link :to="{ name: 'home' }">
-              <img src="/images/Chevron2.png" class="img-Logo mr-2 logo rounded-full" alt="Logo">
-            </router-link>
+          <v-col cols="11" class="d-flex align-center justify-center">
+            <img src="/images/Chevron2.png" class="mobile-header" alt="Logo">
           </v-col>
-          <v-spacer></v-spacer> <!-- Espace flexible pour pousser la photo de profil à droite -->
-          <v-col cols="auto">
-            <!-- Photo de profil -->
-            <router-link :to="{ name: 'yourprofile' }" class="text-green-700">
-              <img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture"
-                alt="Logo">
-            </router-link>
-          </v-col>
-        </v-row>
-      </v-container>
-
-      <v-container class="text-center" style="margin-top: -30px;">
-        <v-row class="justify-center">
-
-          <!-- Premier lien avec icône -->
-          <v-col cols="auto" class="mx-4">
-            <router-link :to="{ name: 'home' }" class="text-green-700">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                  d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
-              </svg>
-            </router-link>
-          </v-col>
-          <!-- Deuxième lien avec icône -->
-          <v-col cols="auto" class="mx-4">
-            <router-link :to="{ name: 'contact' }" class="text-green-700">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                  d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
-              </svg>
-            </router-link>
-          </v-col>
-          <!-- Troisième lien avec icône -->
-          <v-col cols="auto" class="mx-4">
-            <router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
-              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-                stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
-                <path stroke-linecap="round" stroke-linejoin="round"
-                  d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
-              </svg>
-            </router-link>
-          </v-col>
-
-
-
-          <div v-if="user">
-            Hello, {{ user.email }}
-          </div>
-          <v-btn color="red" variant="text" @click="logout()">Logout</v-btn>
-
-
-
-          <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: 20px;"></div>
 
         </v-row>
+      </v-app-bar>
+      <v-navigation-drawer v-model="drawer" temporary>
+        <v-list>
+          <v-list-item subtitle="Pascal@hutopy.com" title="Pascal Marchesseault">
+            <template v-slot:prepend>
+              <img src="/images/pascal.jpg" class="mobile-profile-picture mini-profile-picture " alt="Avatar">
+            </template>
 
+          </v-list-item>
+        </v-list>
+        <v-divider></v-divider>
+        <v-list density="compact" nav>
+          <h1 class="h1-navigation">Navigation</h1>
+          <router-link :to="{ name: 'home' }" class="">
+            <v-list-item prepend-icon="mdi-home" title="Accueil" value="home"></v-list-item>
+          </router-link>
+          <RouterLink :to="{ name: 'contact' }">
+            <v-list-item prepend-icon="mdi-account-multiple" title="Amis" value="friends"></v-list-item>
+          </RouterLink>
+          <v-list-item prepend-icon="mdi-newspaper" title="Contenu" value="content"></v-list-item>
+          <v-divider style="margin-top: 20%;"></v-divider>
+          <h1 class="h1-navigation">Outils</h1>
+          <v-list-item prepend-icon="mdi-wallet" title="Portefeuille" value="wallet"></v-list-item>
+          <v-list-item style="margin-top: 110%;" prepend-icon="mdi-logout" title="Déconnexion"
+            value="logout"></v-list-item>
 
-      </v-container>
-    </div>
-
-
-
-
-
+        </v-list>
+      </v-navigation-drawer>
+    </v-card>
 
 
     <main class="px-8 py-3 ">
@@ -122,7 +83,7 @@ import { useAuthStore } from '@/plugins/store/authStore';
 import { useRouter } from 'vue-router';
 
 const authStore = useAuthStore();
-const router = useRouter()
+const router = useRouter();
 
 const logout = () => {
   authStore.logout();
@@ -130,6 +91,71 @@ const logout = () => {
 }
 
 const user = authStore.user;
+
 </script>
 
-<style src="../cssstyle/index.css"></style>
\ No newline at end of file
+<script>
+export default {
+
+
+
+
+  data() {
+    return {
+      imageSrc: '../../../images/guillaimeaime3x.png',
+      drawer: false,
+      items: [
+        { title: 'Item 1' },
+        { title: 'Item 2' },
+        { title: 'Item 3' },
+      ],
+    };
+
+
+  },
+};
+</script>
+
+<style>
+.mini-profile-picture {
+  border-radius: 100px;
+}
+
+.mobile-profile-picture {
+  height: 40px;
+  border-radius: px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+  /* Ajouter une ombre à la photo */
+  border: 2px solid #a30e79;
+  margin-right: 10px
+}
+
+.header-banner {
+  border-top: 5px solid rgba(107, 0, 101, 1);
+  margin-top: 15%;
+
+}
+
+.social-container {
+  background-color: #006d77;
+  margin-top: -20%;
+  font-size: 1.4rem;
+  font-weight: 800;
+  color: white;
+}
+
+.social-container2 {
+  background-color: #0baab2;
+  font-size: 1.4rem;
+  font-weight: 800;
+  color: white;
+  min-width: 400px;
+
+}
+
+
+.mobile-header {
+  height: 50px;
+
+}
+</style>
\ No newline at end of file
diff --git a/src/layouts/FooterLayout.vue b/src/layouts/FooterLayout.vue
index 86f07e9..a288dea 100644
--- a/src/layouts/FooterLayout.vue
+++ b/src/layouts/FooterLayout.vue
@@ -1,56 +1,57 @@
 <!--lg="8" md="10" sm="10" xs="10" -->
 
 <template>
-  <v-container>
 
+  <body style="background-color: #f4f4f4;">
+    <v-container style="background-color: #f4f4f4;">
+      <div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;"
+        class="footer-align">
+        <v-container style="background-color: #f4f4f4">
+          <v-row justify="center" style="margin-top: 30px;">
+            <v-col cols="5" lg="5" md="5" sm="12" xs="7">
+              <v-row>
+                <v-img src="../../../images/hutopy.png" class="hutopy-footer-picture"></v-img>
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-container>
 
-    <div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;"
-      class="footer-align">
-      <v-container style="background-color: #f4f4f4">
-        <v-row justify="center" style="margin-top: 30px;">
-          <v-col cols="5" lg="5" md="5" sm="12" xs="7">
-            <v-row>
-              <v-img src="../../../images/hutopy.png" class="hutopy-footer-picture"></v-img>
-            </v-row>
-          </v-col>
-        </v-row>
-      </v-container>
+        <v-container>
+          <v-row justify="center">
+            <v-col cols="auto">
+              <a href="https://www.facebook.com/profile.php?id=61556819217561">
+                <img class="icons" src="../../../images/facebookiconblackpink.png" alt="Description image 2">
+              </a>
+            </v-col>
+            <v-col cols="auto">
+              <a href="https://www.instagram.com/hutopy.inc/">
+                <img src="../../../images/instagramblackpink.png" alt="Description image 3" class="icons">
+              </a>
+            </v-col>
+            <v-col cols="auto">
+              <router-link :to="{ name: 'home' }">
+                <img src="../../../images/xblackpink.png" alt="Description image 1" class="icons">
+              </router-link>
+            </v-col>
+          </v-row>
+        </v-container>
 
-      <v-container>
-        <v-row justify="center">
-          <v-col cols="auto">
-            <a href="https://www.facebook.com/profile.php?id=61556819217561">
-              <img class="icons" src="../../../images/facebookiconblackpink.png" alt="Description image 2">
-            </a>
-          </v-col>
-          <v-col cols="auto">
-            <a href="https://www.instagram.com/hutopy.inc/">
-              <img src="../../../images/instagramblackpink.png" alt="Description image 3" class="icons">
-            </a>
-          </v-col>
-          <v-col cols="auto">
-            <router-link :to="{ name: 'home' }">
-              <img src="../../../images/xblackpink.png" alt="Description image 1" class="icons">
-            </router-link>
-          </v-col>
-        </v-row>
-      </v-container>
+        <v-container class="text-center" style="flex-grow: 1;">
+          <v-btn v-for="link in links" :key="link" class="mx-2" color="black" rounded="xl" variant="text">
+            {{ link }}
+          </v-btn>
+        </v-container>
 
-      <v-container class="text-center" style="flex-grow: 1;">
-        <v-btn v-for="link in links" :key="link" class="mx-2" color="black" rounded="xl" variant="text">
-          {{ link }}
-        </v-btn>
-      </v-container>
-
-      <v-container class="text-black text-center ">
-        {{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
-      </v-container>
+        <v-container class="text-black text-center ">
+          {{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
+        </v-container>
 
 
 
 
-    </div>
-  </v-container>
+      </div>
+    </v-container>
+  </body>
 </template>
 
 
diff --git a/src/router/index.js b/src/router/index.js
index 90adce9..3d75271 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,11 +1,12 @@
+import ProjectRoadmap from '@/views/main/ProjectRoadmap.vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/main/HomeView.vue'
-import SignupView from '../views/SignupView.vue'
 import LoginView from '../views/LoginView.vue'
+import SignupView from '../views/SignupView.vue'
 import ContactView from '../views/main/ContactView.vue'
 import CreatorFolio from '../views/main/CreatorFolio.vue'
+import HomeView from '../views/main/HomeView.vue'
 import YourProfile from '../views/main/YourProfile.vue'
-import ProjectRoadmap from '@/views/main/ProjectRoadmap.vue'
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -43,10 +44,11 @@ const router = createRouter({
       path: '/roadmap',
       name: 'roadmap',
       component: ProjectRoadmap
-    },
-
-
-  ]
+    }
+  ],
+  scrollBehavior(to, from, savedPosition) {
+    return { top: 0 };
+  }
 })
 
 export default router
diff --git a/src/views/main/ContactView.vue b/src/views/main/ContactView.vue
index 77f82f6..a89d849 100644
--- a/src/views/main/ContactView.vue
+++ b/src/views/main/ContactView.vue
@@ -1,4 +1,5 @@
 <template>
+  <DefaultLayout></DefaultLayout>
   <!--PC -->
   <div class="hutopy-backgroud-color">
     <div class="hidden-xs flex-col items-center page-margin">
@@ -6,9 +7,9 @@
         <v-row class="text-center align-center row-between-logo-text home-row">
           <v-col xl="7" lg="9" md="11" sm="12" xs="12"> </v-col>
 
-          <v-col cols="auto">
-            <img class="hutopy-header-image" src="../../../images/hutopy.png">
-          </v-col>
+
+          <img class="hutopy-header-image" src="../../../images/hutopy.png">
+
 
           <v-col class="ml-0 text-left ">
             <RouterLink :to="{ name: 'home' }">
@@ -24,6 +25,7 @@
 
           <v-col xl="8" lg="11" md="12" sm="12" xs="12">
             <v-row>
+
               <v-col>
                 <img class="contact-image" src="../../../images/contactpage/contactpicture.png">
               </v-col>
@@ -85,22 +87,14 @@
     </div>
 
     <div class="hidden-sm-and-up flex-col items-center justify-center">
-
-      <img class="hutopy-header-image" src="../../../images/hutopy.png">
-      <img class="contact-image" src="../../../images/contactpage/contactpicture.png">
+      <v-spacer style="margin-bottom: 25px;"></v-spacer>
+      <v-img src="../../../images/contactpage/contactpicture.png" contain aspect-ratio="16/9"
+        style="clip-path: polygon(0 20%, 100% 0, 100% 60%, 0 100%);"></v-img>
 
       <v-row>
-        <v-col cols="7">
+        <v-col cols="12">
           <h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
         </v-col>
-
-        <v-col>
-          <RouterLink :to="{ name: 'home' }">
-            <v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0">
-              Accueil
-            </v-btn>
-          </RouterLink>
-        </v-col>
       </v-row>
 
       <v-text-field class="labelsize" label="Nom ($)" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
@@ -156,6 +150,7 @@
 
 
 <script setup>
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
 </script>
 
@@ -184,10 +179,11 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
 
 
   .h2-Participez-au-développement {
-    font-size: 1.8rem;
-    margin-top: 3%;
+    font-size: 1.4rem;
+    margin-top: 10%;
     margin-bottom: 6%;
     margin-left: 5%;
+    font-weight: 600;
   }
 
   .home-btn {
@@ -223,20 +219,22 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
     box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
     max-width: 100%;
     margin-top: 4%;
+    height: 103%;
   }
 
   .home-btn {
-    margin-top: 5%;
+    margin-top: 20%;
 
     border-radius: 30px;
-    width: 180px;
-    min-width: 175px;
-    margin-left: 70%;
+    width: 140px;
+
+    min-width: 140px;
+    margin-left: 55%;
   }
 
   .h2-Participez-au-développement {
-    font-size: 2rem;
-    margin-top: -3%;
+    font-size: 1.6rem;
+    margin-top: 10%;
     margin-bottom: 6%;
   }
 
@@ -250,6 +248,11 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
   }
 
 
+  .hutopy-header-image {
+    margin-top: 6%;
+    width: 400px;
+    margin-left: 2%;
+  }
 
 }
 
@@ -264,17 +267,20 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
   }
 
   .home-btn {
-    margin-top: 5%;
+    margin-top: 35%;
 
     border-radius: 30px;
-    width: 180px;
-    min-width: 175px;
-    margin-left: 74%;
+    width: auto;
+    min-width: 160px;
+    max-width: 180px;
+    margin-left: 40%;
+
+
   }
 
   .h2-Participez-au-développement {
     font-size: 2rem;
-    margin-top: -3%;
+    margin-top: 10%;
     margin-bottom: 6%;
   }
 
@@ -287,7 +293,11 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
     margin-top: 3%;
   }
 
-
+  .hutopy-header-image {
+    margin-top: 6%;
+    width: 500px;
+    margin-left: 1%;
+  }
 
 }
 
@@ -296,7 +306,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
   .hutopy-header-image {
     margin: 0 auto;
     height: 120px;
-    margin-left: -0%;
+    margin-left: 1%;
   }
 
 
@@ -306,7 +316,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
     border-radius: 30px;
     width: 180px;
     min-width: 175px;
-    margin-left: 22%;
+    margin-left: 30%;
     margin-top: 37%;
 
 
@@ -350,7 +360,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
   .hutopy-header-image {
     margin: 0 auto;
     height: 165px;
-    margin-left: -4%;
+    margin-left: -2.8%;
   }
 
   .home-btn {
@@ -359,7 +369,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
     border-radius: 30px;
     width: 180px;
     min-width: 175px;
-    margin-left: 50%;
+    margin-left: 53%;
     margin-top: 45%;
 
 
@@ -416,7 +426,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
   .hutopy-header-image {
     margin: 0 auto;
     height: 165px;
-    margin-left: -5%;
+    margin-left: -3%;
   }
 
   .home-btn {
@@ -425,7 +435,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
     border-radius: 30px;
     width: 180px;
     min-width: 175px;
-    margin-left: 75%;
+    margin-left: 82%;
     margin-top: 40%;
 
 
@@ -481,7 +491,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
   .hutopy-header-image {
     margin: 0 auto;
     height: 160px;
-    margin-left: -8%;
+    margin-left: -4.6%;
   }
 
   .contact-image {
@@ -492,7 +502,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
 
   .home-btn {
     margin-top: 5%;
-    margin-left: 47%;
+    margin-left: 53%;
     border-radius: 30px;
     width: 180px;
     min-width: 175px;
@@ -551,7 +561,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
   .hutopy-header-image {
     margin: 0 auto;
     height: 180px;
-    margin-left: 7%;
+    margin-left: 3.5%;
   }
 
   .contact-image {
@@ -563,7 +573,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
 
   .home-btn {
     margin-top: 5%;
-    margin-left: 33%;
+    margin-left: 30%;
     border-radius: 30px;
     width: 180px;
     min-width: 175px;
