diff --git a/src/app/components/fiche-contact/fiche-contact.component.html b/src/app/components/fiche-contact/fiche-contact.component.html
index bbbdbef..54d74e8 100644
--- a/src/app/components/fiche-contact/fiche-contact.component.html
+++ b/src/app/components/fiche-contact/fiche-contact.component.html
@@ -12,7 +12,8 @@
         </div>
         <div class="row align-items-center">
             <div class="col-md-6 offset-md-3">
-                <img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/contact-1.png"/>
+                <p class="fiche-contact" > 
+                    {{ personne.couleur }}</p>
                 <p class="fiche-contact" >{{ personne.prenom }} {{ personne.nom }}</p>
                 <p class="fiche-contact" ><img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/phone.png"/>
                     {{ personne.telephone }}</p>
diff --git a/src/app/pages/page-ajout-contact/page-ajout-contact.component.ts b/src/app/pages/page-ajout-contact/page-ajout-contact.component.ts
index 7de50de..c6c662c 100644
--- a/src/app/pages/page-ajout-contact/page-ajout-contact.component.ts
+++ b/src/app/pages/page-ajout-contact/page-ajout-contact.component.ts
@@ -6,6 +6,7 @@ import {
   Validators,
 } from '@angular/forms';
 import { Router } from '@angular/router';
+import { TokenService } from 'src/app/services/token.service';
 import { Contact } from '../../models/contact';
 import { RepertoireService } from '../../services/repertoire.service';
 
@@ -19,6 +20,7 @@ export class PageAjoutContactComponent implements OnInit {
 
   constructor(
     private repertoireService: RepertoireService,
+    private tokenService: TokenService,
     private router: Router,
     private fb: FormBuilder
   ) {
@@ -49,6 +51,7 @@ export class PageAjoutContactComponent implements OnInit {
     const emailValue = this.ajoutContactForm.value['emailFc'];
     const dateNaissanceValue = this.ajoutContactForm.value['dateNaissanceFc'];
     const adresseValue = this.ajoutContactForm.value['adresseFc'];
+    const teamId = this.tokenService.getCurrentTeamId()
 
     const contact: Contact = {
       id: '',
@@ -59,7 +62,7 @@ export class PageAjoutContactComponent implements OnInit {
       email: emailValue,
       dateNaissance: dateNaissanceValue,
       adresse: adresseValue,
-      team: { id: '1' }, // changer l'id quand la personne est logé => recuperer l'id de la team du membre
+      team: { id: teamId }, // changer l'id quand la personne est logé => recuperer l'id de la team du membre
     };
 
     if (contact.nom !== '') {
@@ -67,7 +70,7 @@ export class PageAjoutContactComponent implements OnInit {
         this.router.navigate(['repertoire/']);
       });
     } else {
-      // affichage erreur
+      window.alert("Le contact ne peut pas être ajouté!")
     }
   }
 }
diff --git a/src/app/pages/page-modifier-contact/page-modifier-contact.component.html b/src/app/pages/page-modifier-contact/page-modifier-contact.component.html
index 5ac961b..3b7f16b 100644
--- a/src/app/pages/page-modifier-contact/page-modifier-contact.component.html
+++ b/src/app/pages/page-modifier-contact/page-modifier-contact.component.html
@@ -4,10 +4,14 @@
 </div>
 
 <div class="modifContact-form text-center">
+    <h1>Modifier ce contact</h1>
     <main class="form-modifContact">
         <form  (ngSubmit)="onSubmit()" [formGroup]="modifContactForm">
-            <h1>Modifier ce contact</h1>
-
+            
+            <div class="form-floating">
+            <input type="color" class="form-control" id="floatingInputcouleur" placeholder="" name="couleur"
+            formControlName="couleurFc">
+            </div>
 
             <div class="form-floating">
                 <input type="text" 
diff --git a/src/app/pages/page-modifier-contact/page-modifier-contact.component.scss b/src/app/pages/page-modifier-contact/page-modifier-contact.component.scss
index 6709ac8..ee16c4d 100644
--- a/src/app/pages/page-modifier-contact/page-modifier-contact.component.scss
+++ b/src/app/pages/page-modifier-contact/page-modifier-contact.component.scss
@@ -8,7 +8,13 @@
   width: 100%;
   max-width: 330px;
   padding: 15px;
-  margin: auto;
+  margin-top: 50px;
+  margin-left: auto;
+  margin-right: auto;
+  border: solid 1px;
+  border-radius: 10px;
+  background-color: #fcddec;
+  border-color: #81164d;
 }
 
 .form-modifContact .checkbox {
@@ -25,7 +31,40 @@
   border-bottom-left-radius: 0;
 }
 
+.form-modifContact input[type="color"] {
+  border: none;
+  margin-bottom: 10px;
+  margin-top: -70px;
+  margin-left: 100px;
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+}
+
+.form-modifContact input[type="color"]::-webkit-color-swatch {
+  border: none;
+  margin-top: -15px;
+  border-radius: 80%;
+  width: 80px;
+  height: 80px;
+}
+
+.form-modifContact input[type="text"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-modifContact input[type="date"] {
+  margin-bottom: 10px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+
 .btn-secondary {
-  color: #fff;
+  margin-top: 10px;
+  background-color: #ffff;
+  color: rgb(255, 255, 255);
   background-color: #5a1e63 !important;
 }
diff --git a/src/app/pages/page-modifier-contact/page-modifier-contact.component.ts b/src/app/pages/page-modifier-contact/page-modifier-contact.component.ts
index cf1a49d..fe6c2ad 100644
--- a/src/app/pages/page-modifier-contact/page-modifier-contact.component.ts
+++ b/src/app/pages/page-modifier-contact/page-modifier-contact.component.ts
@@ -71,7 +71,7 @@ export class PageModifierContactComponent implements OnInit {
 
   //Méthode qui envoie les champs modifiés pour mise à jour
   public onSubmit(): void {
-    const couleurValue = this.modifContactForm.value['couleurFc'];
+    const couleurValue = this.modifContactForm.value[''];
     const firstNameValue = this.modifContactForm.value['firstNameFc'];
     const lastNameValue = this.modifContactForm.value['lastNameFc'];
     const telephoneValue = this.modifContactForm.value['telephoneFc'];
diff --git a/src/app/services/repertoire.service.ts b/src/app/services/repertoire.service.ts
index cf9701b..8c85751 100644
--- a/src/app/services/repertoire.service.ts
+++ b/src/app/services/repertoire.service.ts
@@ -3,6 +3,8 @@ import { HttpClient } from '@angular/common/http';
 import { map, Observable } from 'rxjs';
 import { environment } from 'src/environments/environment';
 import { Contact } from '../models/contact';
+import { Router } from '@angular/router';
+import { TokenService } from './token.service';
 
 @Injectable({
   providedIn: 'root',
@@ -11,14 +13,15 @@ export class RepertoireService {
   apiUrl: string;
   tokenKey: string;
 
-  constructor(private http: HttpClient) {
+  constructor(private http: HttpClient, private router: Router,  private tokenService: TokenService) {
     // On se sert des variables d'environnement de notre application
     this.apiUrl = environment.apiUrl;
     this.tokenKey = environment.tokenKey;
   }
 
   getContact(): Observable<any> {
-    return this.http.get(`${this.apiUrl}/contacts/team/1`);
+    const teamId = this.tokenService.getCurrentTeamId()
+    return this.http.get(`${this.apiUrl}/contacts/team/${teamId}`);
   }
 
   getContactById(id: any): Observable<any> {
@@ -26,7 +29,7 @@ export class RepertoireService {
   }
 
   addContact(contact: Contact): Observable<any> {
-    console.log(contact);
+    const teamId = this.tokenService.getCurrentTeamId()
     return this.http.post(`${this.apiUrl}/contacts/add`, contact);
   }
 
@@ -35,6 +38,6 @@ export class RepertoireService {
   }
 
   updateContact(contact: Contact): Observable<any> {
-    return this.http.put(`${this.apiUrl}/contacts/update/1`, contact);
+    return this.http.put(`${this.apiUrl}/contacts/update/`, contact);
   }
 }