diff --git a/src/app/components/card-avatar/card-avatar.component.html b/src/app/components/card-avatar/card-avatar.component.html
index 4591621..d6969cb 100644
--- a/src/app/components/card-avatar/card-avatar.component.html
+++ b/src/app/components/card-avatar/card-avatar.component.html
@@ -1,13 +1,12 @@
-<div class="container mt-5 membre">
-  <div class="row d-flex justify-content-center">
-      <div class="col-md-auto">
-          <div class="card p-3 py-4 align-items">
-            <!-- récuperer couleur du back-->
-            <div class="text-center"><div class="rounded-circle"id="couleur"[style.background-color]="membre.couleur"></div></div>
-            <div class="text-center mt-3">
-              <h3 class="mt-2 mb-0">{{membre.prenom }}  {{membre.nom }}</h3>
-              </div>
-            </div>
-          </div>
+<div class="card m-1 p-1 avatar bg-light">
+
+  <div class="card-img-top">
+    <div class="rounded-circle"id="couleur"[style.background-color]="membre.couleur">
+    </div>
   </div>
-</div>
+
+  <div class="card-body">
+    <h6 class="card-title flex-wrap d-flex flex-column border">{{membre.prenom }}  {{membre.nom }}</h6>
+  </div>
+
+</div>
\ No newline at end of file
diff --git a/src/app/components/card-avatar/card-avatar.component.scss b/src/app/components/card-avatar/card-avatar.component.scss
index 91c7e56..86d9570 100644
--- a/src/app/components/card-avatar/card-avatar.component.scss
+++ b/src/app/components/card-avatar/card-avatar.component.scss
@@ -3,18 +3,14 @@
   height: 60px;
   margin: 0 auto;
   background: black;
-
 }
 
-.card {
-  min-height: 8px;
-  border: none;
-  overflow: hidden;
-  border-radius: 8px;
-  justify-content: center;
+.card-title{
+  text-align: center;
 }
 
-
-h3 {
-  font-size: small;
-}
+.avatar{
+  width: 150px;
+  height: 170px;
+  border-radius: 20px;
+}
\ No newline at end of file
diff --git a/src/app/pages/page-dashboard/page-dashboard.component.html b/src/app/pages/page-dashboard/page-dashboard.component.html
index 95545c6..6d627bb 100644
--- a/src/app/pages/page-dashboard/page-dashboard.component.html
+++ b/src/app/pages/page-dashboard/page-dashboard.component.html
@@ -2,30 +2,37 @@
 <app-side-bar></app-side-bar>
 
 <div class="container">
-  <div>
-    <h3 class="titre">Bienvenue {{ conectedUser.prenom }}!!</h3>
-  </div>
-  <div class="row d-flex align-items-center flex-row">
-    <div class="col-sm-3 col-xs-6 box border" id="boxThree">
-      <app-meteo></app-meteo>
-    </div>
-    <div class="col-sm-3 col-xs-6 box border" id="boxTwo">
-      <app-calendrier>A venir</app-calendrier>
+  <div class="row p-1 col-12 ">
+
+    <div class="row ">
+      <h3 class="titre">Bienvenue {{ conectedUser.prenom }}!!</h3>
     </div>
 
-    <div class="row">
-      <div class="col-sm-3 col-xs-6 box border" id="boxFour">
-        <div>
+    <div class="row col-12">
+
+      <div class="col-5  d-flex flex-column align-items-start">
+        <div class="d-flex justify-content-center w-100 my-2" id="boxThree">
+          <app-meteo></app-meteo>
+        </div>
+        <div class="d-flex justify-content-center w-100 my-2"> 
           <app-humeur></app-humeur>
         </div>
       </div>
+
+      <div class=" col-7" id="boxTwo">
+        <app-calendrier class="w-100 h-100">A venir</app-calendrier>
+      </div>
+
     </div>
 
-    <div class="row avatar">
-      <div class="col" *ngFor="let membreData of listMembres">
-        <app-card-avatar [membre]="membreData"> </app-card-avatar>
+      <div class="row d-flex flex-wrap my-2 p-1">
+        <ul class="list-inline">
+          <li class="list-inline-item" *ngFor="let membreData of listMembres">
+            <app-card-avatar class="avatar" [membre]="membreData"> </app-card-avatar>
+          </li>
+        </ul>
       </div>
-    </div>
+
   </div>
 </div>
 
diff --git a/src/app/pages/page-dashboard/page-dashboard.component.scss b/src/app/pages/page-dashboard/page-dashboard.component.scss
index d2d8bff..ba266b3 100644
--- a/src/app/pages/page-dashboard/page-dashboard.component.scss
+++ b/src/app/pages/page-dashboard/page-dashboard.component.scss
@@ -11,40 +11,9 @@
 }
 
 .container {
-  display: flex;
-  padding: 20px;
-
-}
-
-button{
-  margin-bottom: 5px;
-}
-
-.calendrier{
-  align-content: flex-end;
-}
-
-#boxFour{
-  height: 150px;
-  margin-top: -99px;
-  width: fit-content;
-}
-
-#boxThree{
-  margin-top: -85px;
-  height: 150px;
-  width: fit-content;
-}
-
-#boxTwo{
-  margin-top: 50px;
-  margin-left: 150px;
-  height: 50%;
-  width: fit-content;
+margin-left:200px;
 }
 
 .avatar{
-  margin-top: -50px;
-  justify-content: space-between;
-  margin: 0;
+  margin:O;
 }
\ No newline at end of file
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 f518f82..9a52750 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
@@ -20,10 +20,10 @@
                         id="floatingInputlastName" 
                         placeholder="" 
                         name="lastName" 
-                        formControlName="lastNameFc" value= "{{ listContactInfo.nom }}">
+                        formControlName="lastNameFc" value= "{{ listContactInfo.nom }}"
+                        [(ngModel)]="listContactInfo.nom">
                 <label for="floatingInputlastName">Nom</label>
 
-
             </div>
             <div class="form-floating">
                 <input type="text" 
@@ -31,10 +31,10 @@
                         id="floatingInputfirstName" 
                         placeholder="" 
                         name="firstName" 
-                        formControlName="firstNameFc" value= "{{ listContactInfo.prenom }}">
+                        formControlName="firstNameFc" value= "{{ listContactInfo.prenom }}"
+                        [(ngModel)]="listContactInfo.prenom">
                 <label for="floatingInputfirstName">Prénom</label>
 
-
             </div>
             <div class="form-floating">
                 <input type="text" 
@@ -42,10 +42,10 @@
                         id="floatingInputTelephone" 
                         placeholder="" 
                         name="telephone" 
-                        formControlName="telephoneFc" value= "{{ listContactInfo.telephone }}">
+                        formControlName="telephoneFc" value= "{{ listContactInfo.telephone }}"
+                        [(ngModel)]="listContactInfo.telephone">
                 <label for="floatingInputfirstName">Téléphone</label>
 
-
             </div>
             <div class="form-floating">
                 <input type="email" 
@@ -53,29 +53,31 @@
                         id="floatingInput" 
                         placeholder="" 
                         name="email" 
-                        formControlName="emailFc" value= "{{ listContactInfo.email }}">
+                        formControlName="emailFc" value= "{{ listContactInfo.email }}"
+                        [(ngModel)]="listContactInfo.email">
                 <label for="floatingInput">Adresse email</label>
             </div>
 
-
             <div class="form-floating">
                 <input type="date" 
                         class="form-control" 
                         id="floatingInputdateNaissance" 
                         placeholder="" 
                         name="dateNaissance" 
-                        formControlName="dateNaissanceFc" value= "{{ listContactInfo.dateNaissance }}">
+                        formControlName="dateNaissanceFc" 
+                        value= "{{ listContactInfo.dateNaissance }}"
+                        [(ngModel)]="listContactInfo.dateNaissance">
                 <label for="floatingInputfirstName">Date de naissance</label>
             </div>
 
-
             <div class="form-floating">
                 <input type="text" 
                         class="form-control" 
                         id="floatingInputAdresse" 
                         placeholder="" 
                         name="adresse" 
-                        formControlName="adresseFc" value= "{{ listContactInfo.adresse }}">
+                        formControlName="adresseFc" value= "{{ listContactInfo.adresse }}"
+                        [(ngModel)]="listContactInfo.adresse">
                 <label for="floatingInputfirstName">Adresse</label>
             </div>