diff --git a/src/app/components/friend-page/friend-page.component.html b/src/app/components/friend-page/friend-page.component.html
index 7e69d4f..b12bcf5 100644
--- a/src/app/components/friend-page/friend-page.component.html
+++ b/src/app/components/friend-page/friend-page.component.html
@@ -44,12 +44,12 @@
           <span class="text-gray-900 dark:text-white">{{ friend.username }}</span>
         </div>
         <div *ngIf="friend.status == 'pending'" class="flex space-x-2">
-          <button class="p-2 bg-green-500 text-white rounded-full">
+          <button (click)="onAcceptOrDeny(friend.friend_user_id, 'accept')" class="p-2 bg-green-500 text-white rounded-full">
             <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
             </svg>
           </button>
-          <button class="p-2 bg-red-500 text-white rounded-full">
+          <button (click)="onAcceptOrDeny(friend.friend_user_id, 'deny')" class="p-2 bg-red-500 text-white rounded-full">
             <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
             </svg>
diff --git a/src/app/components/friend-page/friend-page.component.ts b/src/app/components/friend-page/friend-page.component.ts
index 8ca9b57..d799096 100644
--- a/src/app/components/friend-page/friend-page.component.ts
+++ b/src/app/components/friend-page/friend-page.component.ts
@@ -9,7 +9,7 @@ import { NgFor, NgIf } from '@angular/common';
   styleUrls: ['./friend-page.component.css']
 })
 export class FriendPageComponent implements OnInit {
-  listFriend: {username: string, status: string}[] = [];
+  protected listFriend: {username: string, status: string, friend_user_id: string}[] = [];
   userId: string = "";
   status: string = "";
 
@@ -30,12 +30,17 @@ export class FriendPageComponent implements OnInit {
           this.friendService.getFriendById(userId).subscribe((friendData: any) => {
             this.listFriend.push({
               username: friendData.username,
-              status: status
+              status: status,
+              friend_user_id: userId
             });
           });
         });
       }
     });
   }
+
+  onAcceptOrDeny(friend_user_id: string, choice: string){
+    this.friendService.acceptOrDenyFriendById(friend_user_id,choice).subscribe()
+  }
   
 }
diff --git a/src/app/services/friends/friends.service.ts b/src/app/services/friends/friends.service.ts
index 4c1d6e2..d966e22 100644
--- a/src/app/services/friends/friends.service.ts
+++ b/src/app/services/friends/friends.service.ts
@@ -28,4 +28,13 @@ export class FriendsService {
     });
     return this.http.get<any>(url, { headers });
   }
+
+  acceptOrDenyFriendById(id: string,choice: string){
+    const url = `${this.apiURL}/friend/${id}/${choice}`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      Authorization: 'Bearer ' + this.token,
+    });
+    return this.http.get<any>(url, { headers });
+  }
 }