diff --git a/backend/app/controllers/joueur.controller.js b/backend/app/controllers/joueur.controller.js
index 969ca399c4649f7e85066fcea8383dd6a3b16d84..a28bcdb1902e835dd0ba4f6c14aa824292ef0e82 100644
--- a/backend/app/controllers/joueur.controller.js
+++ b/backend/app/controllers/joueur.controller.js
@@ -35,7 +35,6 @@ exports.checkLogin = (req, response) => {
 };
 
 exports.amiList = (req, res) => {
-    console.log(req.session.loggedIn)
     if (req.session.loggedIn) {
         Joueur.amiListe(req.session.uid, (err, pseudo) => {
             if (err) {
@@ -54,4 +53,16 @@ exports.amiList = (req, res) => {
         res.send({ rep: false, res: 'You must be logged in to see friends !' });
         res.end();
     }
+};
+
+exports.allJoueur = (req, res) => {
+    if (req.session.loggedIn) {
+        Joueur.getAll(req.session.uid, (err, data) => {
+            if (err)
+                res.status(500).send({
+                    message: err.message || "Some error occurred while retrieving Players."
+                });
+            else res.send(data);
+        });
+    }
 };
\ No newline at end of file
diff --git a/backend/app/models/joueur.model.js b/backend/app/models/joueur.model.js
index 3eb5c8931ce85e702f734d44148ebce433fb0b11..787547fb489d03bcd598052046cac410b065bd16 100644
--- a/backend/app/models/joueur.model.js
+++ b/backend/app/models/joueur.model.js
@@ -45,4 +45,15 @@ Joueur.amiListe = (pseudo, results) => {
     });
 };
 
+Joueur.getAll = (pseudo, result) => {
+    sql.query("SELECT * FROM joueur WHERE joueur.id_joueur <> ?", [pseudo], (err, res) => {
+        if (err) {
+            console.log("error: ", err);
+            result(null, err);
+            return;
+        }
+        result(null, res);
+    });
+};
+
 module.exports = Joueur;
\ No newline at end of file
diff --git a/backend/app/routes/joueur.routes.js b/backend/app/routes/joueur.routes.js
index e991b851ab1dd23a6740575d69dca94690db84d4..754c53e7364f7bb9bb17e8256c53bcb16670ecc9 100644
--- a/backend/app/routes/joueur.routes.js
+++ b/backend/app/routes/joueur.routes.js
@@ -10,4 +10,7 @@ module.exports = app => {
     // Retrieve all Friends
     app.get("/allfriends", joueur.amiList);
 
+    // Retrieve all Players
+    app.get("/alljoueurs", joueur.allJoueur);
+
 };
\ No newline at end of file
diff --git a/backend/package-lock.json b/backend/package-lock.json
index 4648be30e3021656337a318941cc86cbf37025aa..3c5c4ee6e6c8de4fb6cd0dbfff7ce2cd5ae94c31 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -1569,4 +1569,4 @@
             "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
         }
     }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/friends-menu/friends-menu.component.html b/frontend/src/app/friends-menu/friends-menu.component.html
index 5b4052db220d4cdfa64f34d1820f47d4a8ad4727..4516075b725972d605704b46576c0102b101ced8 100644
--- a/frontend/src/app/friends-menu/friends-menu.component.html
+++ b/frontend/src/app/friends-menu/friends-menu.component.html
@@ -1,5 +1,29 @@
+<section class="filter-wrapper" (clickOutside)="show = false" *ngIf="log">
+    <div class="keyword-wrapper">
+        <input [formControl]="queryField" type="text" id="keyword" placeholder="search for players..." (click)="show = true" autofocus/>
+    </div>
+    <ul class="filter-select" *ngIf="show">
+        <li *ngFor="let result of results" class="filter-select-list" (click)="displayFriend(result)">
+            <p>{{result.pseudo}}</p>
+        </li>
+    </ul>
+</section>
+
+
+<section>
+    <div class="text-info-outer">
+        <div class="text-info-inner">
+            <h1>{{currentAmi.pseudo}}</h1>
+            <p>{{profileBody}}</p>
+            <div class="follow-button" (click)="addfriend()">
+                <h6>Send a friend request</h6>
+            </div>
+        </div>
+    </div>
+</section>
+
 <div class="liste" *ngIf="log">
-    <h1>Liste de tes amis</h1>
+    <h1>Your friend list</h1>
     <div class="container py-3" *ngIf="amis!=null">
         <div *ngFor="let ami of amis; let i=index">
             <h4>{{ami.pseudo}}</h4>
diff --git a/frontend/src/app/friends-menu/friends-menu.component.ts b/frontend/src/app/friends-menu/friends-menu.component.ts
index 88e459e1756f454a87da0e51b84f243b3cb9be37..4bb9ad47f0f0a249f9a0cf54d2d1c81606868b4c 100644
--- a/frontend/src/app/friends-menu/friends-menu.component.ts
+++ b/frontend/src/app/friends-menu/friends-menu.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { FormControl } from '@angular/forms';
+import { SelectorMatcher } from '@angular/compiler';
 
 @Component({
   selector: 'app-friends',
@@ -11,10 +13,45 @@ export class FriendsMenuComponent implements OnInit {
   amis: any = [];
   resultat: any = {};
   log: boolean;
+  currentAmi: any ={};
+  show: boolean;
+  profileBody: any;
+  joueurs: any = [];
+  queryField: FormControl = new FormControl();
+  nom: any = {};
+  results: any[] = [];
 
   constructor(private httpClient: HttpClient) { }
 
+  displayFriend(ami){
+    this.currentAmi = ami;
+    this.show = true;
+    console.log(ami.pseudo + " avec comme id: " + ami.id_joueur);
+    this.httpClient.get("http://localhost:3000/alljoueurs", { responseType: 'json' , withCredentials:true}).subscribe(res => {this.nom = res; this.profileBody = this.nom; console.log(res)})
+  }
+
+  addfriend(){
+  }
+
+
+  suggest(data : String){
+    if(data.length == 0) return [];
+    var newArr = this.joueurs.filter(play => play.pseudo.includes(data));
+    console.log(newArr);
+    return newArr;
+  }  
+
+  search(){
+    this.httpClient.get("http://localhost:3000/alljoueurs", { responseType: 'json', withCredentials:true}).
+    subscribe(res => {this.joueurs = res; console.log(res)})
+    this.queryField.valueChanges
+    .debounceTime(200)
+    .distinctUntilChanged()
+    .subscribe(query => this.results = this.suggest(query));
+  }
+
   ngOnInit(): void {
+    this.search();
     this.httpClient.get('http://localhost:3000/allfriends', { responseType: 'json', withCredentials:true }).subscribe((res => {this.resultat = res;console.log(res); this.amis = this.resultat.res; this.log=this.resultat.rep}))
   }