diff --git a/src/app/components/friend-page/friend-page.component.html b/src/app/components/friend-page/friend-page.component.html
index b12bcf5..58f6386 100644
--- a/src/app/components/friend-page/friend-page.component.html
+++ b/src/app/components/friend-page/friend-page.component.html
@@ -1,26 +1,36 @@
 <!-- Bouton d'ouverture du modal -->
 <button
-  data-modal-target="friends-modal"
-  data-modal-toggle="friends-modal"
+  (click)="openFriendModal()"
   class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
   type="button"
 >
   Amis
 </button>
 
+<!-- Fond assombri -->
+<div
+  class="fixed inset-0 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out z-40"
+  [ngClass]="{'opacity-0 pointer-events-none': !isFriendModalOpen, 'opacity-100': isFriendModalOpen}"
+  (click)="closeFriendModal()"
+></div>
+
 <!-- Modal principal -->
 <div
   id="friends-modal"
   tabindex="-1"
   aria-hidden="true"
-  class="hidden fixed inset-0 z-50 flex items-center justify-center w-full h-full bg-gray-900 bg-opacity-50"
+  [ngClass]="{
+    'opacity-0 scale-50 pointer-events-none': !isFriendModalOpen,
+    'opacity-100 scale-100': isFriendModalOpen
+  }"
+  class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-opacity transition-transform duration-300 ease-in-out"
 >
   <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg w-96 max-w-full">
     <!-- En-tête du modal -->
     <div class="flex items-center justify-between p-4 border-b dark:border-gray-700">
       <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Liste d'amis</h3>
       <button
-        data-modal-toggle="friends-modal"
+        (click)="closeFriendModal()"
         class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
       >
         ✕
diff --git a/src/app/components/friend-page/friend-page.component.ts b/src/app/components/friend-page/friend-page.component.ts
index d799096..945ac62 100644
--- a/src/app/components/friend-page/friend-page.component.ts
+++ b/src/app/components/friend-page/friend-page.component.ts
@@ -1,10 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { FriendsService } from '../../services/friends/friends.service';
-import { NgFor, NgIf } from '@angular/common';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-friend-page',
-  imports: [NgFor, NgIf],
+  imports: [CommonModule],
   templateUrl: './friend-page.component.html',
   styleUrls: ['./friend-page.component.css']
 })
@@ -12,6 +12,7 @@ export class FriendPageComponent implements OnInit {
   protected listFriend: {username: string, status: string, friend_user_id: string}[] = [];
   userId: string = "";
   status: string = "";
+  isFriendModalOpen: boolean = false;
 
   constructor(private friendService: FriendsService) {
   }
@@ -43,4 +44,11 @@ export class FriendPageComponent implements OnInit {
     this.friendService.acceptOrDenyFriendById(friend_user_id,choice).subscribe()
   }
   
+  openFriendModal() {
+    this.isFriendModalOpen = true;
+  }
+
+  closeFriendModal() {
+    this.isFriendModalOpen = false;
+  }
 }