diff --git a/public/avatar.png b/public/avatar.png
new file mode 100644
index 0000000..1f5e89d
Binary files /dev/null and b/public/avatar.png differ
diff --git a/src/app/components/friend-page/friend-page.component.html b/src/app/components/friend-page/friend-page.component.html
index e3d2f48..84ee7f8 100644
--- a/src/app/components/friend-page/friend-page.component.html
+++ b/src/app/components/friend-page/friend-page.component.html
@@ -59,14 +59,13 @@
 
       <div *ngIf="listUser" class="text-gray-500 text-sm">
         <div
-          style="padding-top: 10px"
           *ngFor="let user of listUser"
-          class="friend flex items-center justify-between space-x-3"
+          class="friend flex items-center justify-between space-x-3 pt-10"
         >
           <div class="friend flex items-center space-x-3">
             <img
               class="w-10 h-10 rounded-full"
-              src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png"
+              src="/avatar.png"
               alt="Friend 2"
             />
             <span class="text-gray-900 dark:text-white">{{
@@ -115,7 +114,7 @@
           <div class="friend flex items-center space-x-3">
             <img
               class="w-10 h-10 rounded-full"
-              src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png"
+              src="/avatar.png"
               alt="Friend 2"
             />
             <span class="text-gray-900 dark:text-white">{{
@@ -155,7 +154,7 @@
           <div class="friend flex items-center space-x-3">
             <img
               class="w-10 h-10 rounded-full"
-              src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png"
+              src="/avatar.png"
               alt="Friend 2"
             />
             <span class="text-gray-900 dark:text-white">{{
@@ -216,7 +215,7 @@
           <div class="friend flex items-center space-x-3">
             <img
               class="w-10 h-10 rounded-full"
-              src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png"
+              src="/avatar.png"
               alt="Friend 2"
             />
             <span class="text-gray-900 dark:text-white">{{
diff --git a/src/app/components/login-page/login-page.component.css b/src/app/components/login-page/login-page.component.css
deleted file mode 100644
index 227bd40..0000000
--- a/src/app/components/login-page/login-page.component.css
+++ /dev/null
@@ -1,9 +0,0 @@
-#authentication-modal.show {
-    opacity: 1;
-    transition: opacity 0.3s ease-in-out;
-}
-
-#authentication-modal.hidden {
-    opacity: 0;
-    transition: opacity 0.3s ease-in-out;
-}
\ No newline at end of file
diff --git a/src/app/components/login-page/login-page.component.ts b/src/app/components/login-page/login-page.component.ts
index ae85187..c2333fe 100644
--- a/src/app/components/login-page/login-page.component.ts
+++ b/src/app/components/login-page/login-page.component.ts
@@ -18,7 +18,6 @@ import { ModalService } from '../../services/modal/modal.service';
   selector: 'app-login-page',
   imports: [FormsModule, ReactiveFormsModule, NgIf, CommonModule],
   templateUrl: './login-page.component.html',
-  styleUrl: './login-page.component.css',
 })
 export class LoginPageComponent {
   modalId: string = 'login-modal';
@@ -69,7 +68,7 @@ export class LoginPageComponent {
     this.loginService.login(this.user.login, this.user.password).subscribe({
       next: (response) => {
         this.localStorageService.setToken(response.access_token);
-        this.localStorageService.setUsername(this.user.login)
+        this.localStorageService.setUsername(this.user.login);
         this.closeLoginModal();
         setTimeout(() => {
           this.router.navigate(['/map']);
diff --git a/src/app/components/share-modal/share-modal.component.html b/src/app/components/share-modal/share-modal.component.html
index 0c2da09..43636e9 100644
--- a/src/app/components/share-modal/share-modal.component.html
+++ b/src/app/components/share-modal/share-modal.component.html
@@ -72,14 +72,13 @@
 
             <div *ngIf="listUser" class="text-gray-500 text-sm">
               <div
-                style="padding-top: 10px"
                 *ngFor="let user of listUser"
-                class="friend flex items-center justify-between space-x-3"
+                class="friend flex items-center justify-between space-x-3 pt-10"
               >
                 <div class="friend flex items-center space-x-3">
                   <img
                     class="w-10 h-10 rounded-full"
-                    src="https://latelierduformateur.fr/wp-content/uploads/2021/05/Multiavatar-Formatrice.png"
+                    src="/avatar.png"
                     alt="Friend 2"
                   />
                   <span class="text-gray-900 dark:text-white">{{
diff --git a/src/app/components/share-modal/share-modal.component.ts b/src/app/components/share-modal/share-modal.component.ts
index 8216da0..d9ff2d0 100644
--- a/src/app/components/share-modal/share-modal.component.ts
+++ b/src/app/components/share-modal/share-modal.component.ts
@@ -1,7 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { NavigationEnd, Router } from '@angular/router';
 import { Subject, Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
 import { FriendsService } from '../../services/friends/friends.service';
 import { ModalService } from '../../services/modal/modal.service';
 import { PinService } from '../../services/pin/pin.service';
@@ -16,6 +18,7 @@ export class ShareModalComponent implements OnInit, OnDestroy {
   modalId: string = 'share-modal';
   isShareModalOpen = false;
   private modalSub!: Subscription;
+  private routerSubscription!: Subscription;
   isFriendModalOpen: boolean = false;
   hasAcceptedFriends: boolean = false;
   hasPendingFriends: boolean = false;
@@ -28,7 +31,8 @@ export class ShareModalComponent implements OnInit, OnDestroy {
   constructor(
     private modalService: ModalService,
     private friendService: FriendsService,
-    private pinService: PinService
+    private pinService: PinService,
+    private router: Router
   ) {}
 
   ngOnInit() {
@@ -39,12 +43,24 @@ export class ShareModalComponent implements OnInit, OnDestroy {
         if (open) {
           this.getFriend();
           this.pinId = this.modalService.getCurrentPinId();
+          setTimeout(() => this.moveModalToBody(), 0);
         }
       });
+
+    // S'abonner aux événements de navigation du router
+    this.routerSubscription = this.router.events
+      .pipe(filter((event) => event instanceof NavigationEnd))
+      .subscribe(() => {
+        // Attendre que le DOM soit mis à jour après la navigation
+        setTimeout(() => this.moveModalToBody(), 0);
+      });
   }
 
   ngOnDestroy() {
     this.modalSub?.unsubscribe();
+    if (this.routerSubscription) {
+      this.routerSubscription.unsubscribe();
+    }
   }
 
   openShareModal() {