diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 86990f8..4bdcac1 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -13,12 +13,14 @@ import { PageForgotPasswordComponent } from './pages/page-forgot-password/page-f
 import { PageMenuSemaineComponent } from './pages/page-menu-semaine/page-menu-semaine.component';
 import { PageModifierContactComponent } from './pages/page-modifier-contact/page-modifier-contact.component';
 import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
+import { PageHumeurComponent} from './pages/page-humeur/page-humeur.component';
 import { PageRepertoireComponent } from './pages/page-repertoire/page-repertoire.component';
 import { PageResetPasswordComponent } from './pages/page-reset-password/page-reset-password.component';
 import { PageSignupComponent } from './pages/page-signup/page-signup.component';
 import { PageToDoListComponent } from './pages/page-to-do-list/page-to-do-list.component';
 import { PageUpdateAccountComponent } from './pages/page-update-account/page-update-account.component';
 import { PageUpdateMemberComponent } from './pages/page-update-member/page-update-member.component';
+import { FooterComponent } from './components/footer/footer.component';
 
 const routes: Routes = [
   { path: '', redirectTo: 'accueil', pathMatch: 'full' },
@@ -40,6 +42,8 @@ const routes: Routes = [
   { path: 'modifier-compte', component: PageUpdateAccountComponent },
   { path: 'ajouter-contact', component: PageAjoutContactComponent },
   { path: 'creation-team', component: PageCreationTeamComponent },
+  { path: 'humeur', component: PageHumeurComponent },
+  { path: 'footer', component: FooterComponent},
   { path: '**', component: PageNotFoundComponent },
 ];
 
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 552fccc..8de0573 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -21,7 +21,6 @@ import { PageUpdateMemberComponent } from './pages/page-update-member/page-updat
 import { SigninComponent } from './components/signin/signin.component';
 import { PageDashboardComponent } from './pages/page-dashboard/page-dashboard.component';
 import { MeteoComponent } from './components/meteo/meteo.component';
-import { HumeurComponent } from './components/humeur/humeur.component';
 import { CalendrierComponent } from './components/calendrier/calendrier.component';
 import { CardMemberComponent } from './components/card-member/card-member.component';
 import { ToDoListComponent } from './components/to-do-list/to-do-list.component';
@@ -36,6 +35,8 @@ import { PageAjoutContactComponent } from './pages/page-ajout-contact/page-ajout
 import { PageModifierContactComponent } from './pages/page-modifier-contact/page-modifier-contact.component';
 import { PageCreationTeamComponent } from './pages/page-creation-team/page-creation-team.component';
 import { AutofocusFixModule  } from 'ngx-autofocus-fix';
+import { PageHumeurComponent } from './pages/page-humeur/page-humeur.component';
+import { FooterComponent } from './components/footer/footer.component';
 import { PageDeleteAccountComponent } from './pages/page-delete-account/page-delete-account.component';
 import { PageUpdateAccountComponent } from './pages/page-update-account/page-update-account.component';
 import { EmoticonComponent } from './emoticon/emoticon.component';
@@ -63,7 +64,7 @@ import { EmoticonComponent } from './emoticon/emoticon.component';
     SigninComponent,
     PageDashboardComponent,
     MeteoComponent,
-    HumeurComponent,
+    PageHumeurComponent,
     CalendrierComponent,
     CardMemberComponent,
     ToDoListComponent,
@@ -75,6 +76,8 @@ import { EmoticonComponent } from './emoticon/emoticon.component';
     PageAjoutContactComponent,
     PageModifierContactComponent,
     PageCreationTeamComponent,
+    PageHumeurComponent,
+    FooterComponent,
     PageDeleteAccountComponent,
     PageUpdateAccountComponent,
     EmoticonComponent,
@@ -85,7 +88,7 @@ import { EmoticonComponent } from './emoticon/emoticon.component';
     ReactiveFormsModule,
     HttpClientModule,
     FormsModule,
-    AutofocusFixModule.forRoot(),
+    // AutofocusFixModule.forRoot(),
   ],
   providers: [
 
diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html
new file mode 100644
index 0000000..58bdfe9
--- /dev/null
+++ b/src/app/components/footer/footer.component.html
@@ -0,0 +1,19 @@
+<body>
+
+<p>footer works!</p>
+<h2>PLAN DU SITE</h2>
+
+
+
+<a routerLink="../accueil" routerLinkActive="active-custom" class="nav-link">Page d'accueil</a>
+<a routerLink="../compte" routerLinkActive="active-custom" class="nav-link">Ma Team</a>
+<a routerLink="../repertoire" routerLinkActive="active-custom" class="nav-link">Répertoire</a>
+<a routerLink="../to-do-list" routerLinkActive="active-custom" class="nav-link">To-Do-List</a>
+<a routerLink="../menu" routerLinkActive="active-custom" class="nav-link">Menus</a>
+<a routerLink="../compte" routerLinkActive="active-custom" class="nav-link">Ma Team</a>
+<a routerLink="../repertoire" routerLinkActive="active-custom" class="nav-link">Répertoire</a>
+<a routerLink="../to-do-list" routerLinkActive="active-custom" class="nav-link">To-Do-List</a>
+<a routerLink="../menu" routerLinkActive="active-custom" class="nav-link">Menus</a>
+
+
+</body>
\ No newline at end of file
diff --git a/src/app/components/footer/footer.component.scss b/src/app/components/footer/footer.component.scss
new file mode 100644
index 0000000..ab74bd8
--- /dev/null
+++ b/src/app/components/footer/footer.component.scss
@@ -0,0 +1,7 @@
+body {
+    background-color: pink;
+    text-align: left;
+}
+h2 {
+    color : blue
+}
\ No newline at end of file
diff --git a/src/app/components/humeur/humeur.component.spec.ts b/src/app/components/footer/footer.component.spec.ts
similarity index 56%
rename from src/app/components/humeur/humeur.component.spec.ts
rename to src/app/components/footer/footer.component.spec.ts
index 93d1e87..a3c4af9 100644
--- a/src/app/components/humeur/humeur.component.spec.ts
+++ b/src/app/components/footer/footer.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { HumeurComponent } from './humeur.component';
+import { FooterComponent } from './footer.component';
 
-describe('HumeurComponent', () => {
-  let component: HumeurComponent;
-  let fixture: ComponentFixture<HumeurComponent>;
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ HumeurComponent ]
+      declarations: [ FooterComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(HumeurComponent);
+    fixture = TestBed.createComponent(FooterComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/components/footer/footer.component.ts b/src/app/components/footer/footer.component.ts
new file mode 100644
index 0000000..c7a7ec5
--- /dev/null
+++ b/src/app/components/footer/footer.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/components/humeur/humeur.component.html b/src/app/components/humeur/humeur.component.html
deleted file mode 100644
index 079e3d1..0000000
--- a/src/app/components/humeur/humeur.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<p>Mon humeur est :</p>
-
-<p>Affichage des items du tableau des humeurs</p>
-
-<app-emoticon> *ngFor ="let tabHumeur of tabHumeur" 
-    [tabHumeur]="tabHumeur"></app-emoticon>
\ No newline at end of file
diff --git a/src/app/components/humeur/humeur.component.scss b/src/app/components/humeur/humeur.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/components/humeur/humeur.component.ts b/src/app/components/humeur/humeur.component.ts
deleted file mode 100644
index 43ec550..0000000
--- a/src/app/components/humeur/humeur.component.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-humeur',
-  templateUrl: './humeur.component.html',
-  styleUrls: ['./humeur.component.scss']
-})
-export class HumeurComponent implements OnInit {
-
-
-
-
-
-
-  constructor() {
-    
-   
-    
-
-   }
-
-  ngOnInit(): void {
-
-
-
-
-  }
-
-}
diff --git a/src/app/emoticon/emoticon.component.html b/src/app/emoticon/emoticon.component.html
deleted file mode 100644
index 9c09552..0000000
--- a/src/app/emoticon/emoticon.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<p>emoticon des humeurs</p>
-<div *ngFor="let humor of tabHumeur">{{humor.title}}</div>
-<div *ngFor="let humor of tabHumeur"> <img src="{{humor.lien}}" alt="{{humor.title}}"></div>
-
-
-
diff --git a/src/app/emoticon/emoticon.component.scss b/src/app/emoticon/emoticon.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/emoticon/emoticon.component.ts b/src/app/emoticon/emoticon.component.ts
deleted file mode 100644
index 9be5950..0000000
--- a/src/app/emoticon/emoticon.component.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-emoticon',
-  templateUrl: './emoticon.component.html',
-  styleUrls: ['./emoticon.component.scss']
-})
-export class EmoticonComponent implements OnInit {
-
-     //declaration du tableau
-     tabHumeur= [
-      { title : "Je pleure", lien : "../../../assets/images/emoticon-pleurer.png"},
-      { title : "Je suis en colère", lien : "../../../assets/images/emoticon-insulter.png"},
-      { title : "Je suis malade", lien : "../../../assets/images/emoticon-vomir.png"}
-    ]
-
-
-  constructor() { }
-
-  ngOnInit(): void {
-
-
-console.log("tab humeurs ==>", this.tabHumeur)
-  }
-
-}
diff --git a/src/app/models/membre.ts b/src/app/models/membre.ts
index 6f5d19f..3ebf4b5 100644
--- a/src/app/models/membre.ts
+++ b/src/app/models/membre.ts
@@ -6,5 +6,6 @@ export interface Membre {
   dateNaissance: Date;
   couleur: string;
   passwordConfirm: string;
+ // smiley: string;
   roleList: string[];
 }
diff --git a/src/app/pages/page-humeur/page-humeur.component.html b/src/app/pages/page-humeur/page-humeur.component.html
new file mode 100644
index 0000000..53f7bdd
--- /dev/null
+++ b/src/app/pages/page-humeur/page-humeur.component.html
@@ -0,0 +1,22 @@
+
+<body>
+
+<h2>Mon humeur :</h2>
+
+
+
+
+<p><img src="{{monHumeurLien}}"  *ngIf="monHumeurLien" ></p> 
+
+<p>Je modifie mon avatar :</p>
+
+
+<div class="humeur" *ngFor="let humor of tabHumeur; let i=index">
+    <img src="{{humor.lien}}" alt="{{humor.title}}"  (click)="onChoixHumeur(i)">
+</div> 
+
+
+<div >
+    
+
+</div> </body>
\ No newline at end of file
diff --git a/src/app/pages/page-humeur/page-humeur.component.scss b/src/app/pages/page-humeur/page-humeur.component.scss
new file mode 100644
index 0000000..488fbee
--- /dev/null
+++ b/src/app/pages/page-humeur/page-humeur.component.scss
@@ -0,0 +1,23 @@
+
+
+
+p>img {
+	width: 85px;
+	height: 85px;
+}
+
+img {
+	width: 50px;
+	height: 50px;
+	
+
+}
+
+.humeur {
+display: inline;
+}
+
+body {
+	background-color: grey;
+text-align: center;
+}
\ No newline at end of file
diff --git a/src/app/emoticon/emoticon.component.spec.ts b/src/app/pages/page-humeur/page-humeur.component.spec.ts
similarity index 54%
rename from src/app/emoticon/emoticon.component.spec.ts
rename to src/app/pages/page-humeur/page-humeur.component.spec.ts
index a5d81b3..01c84db 100644
--- a/src/app/emoticon/emoticon.component.spec.ts
+++ b/src/app/pages/page-humeur/page-humeur.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { EmoticonComponent } from './emoticon.component';
+import { PageHumeurComponent } from './page-humeur.component';
 
-describe('EmoticonComponent', () => {
-  let component: EmoticonComponent;
-  let fixture: ComponentFixture<EmoticonComponent>;
+describe('PageHumeurComponent', () => {
+  let component: PageHumeurComponent;
+  let fixture: ComponentFixture<PageHumeurComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ EmoticonComponent ]
+      declarations: [ PageHumeurComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(EmoticonComponent);
+    fixture = TestBed.createComponent(PageHumeurComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/pages/page-humeur/page-humeur.component.ts b/src/app/pages/page-humeur/page-humeur.component.ts
new file mode 100644
index 0000000..7ca9b3d
--- /dev/null
+++ b/src/app/pages/page-humeur/page-humeur.component.ts
@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-humeur',
+  templateUrl: './page-humeur.component.html',
+  styleUrls: ['./page-humeur.component.scss']
+})
+
+export class PageHumeurComponent implements OnInit {
+  
+ monHumeurLien! : string[];
+ monHumeurTitle! : string[] ;
+
+
+  tabHumeur= [
+      { title : "Je vais bien", lien : "assets/images/emoticon-heureux.png"},
+      { title : "Je pleure", lien : "assets/images/emoticon-pleurer.png"},
+      { title : "Je suis fatigué", lien : "assets/images/emoticon-fatigue.png"},
+      { title : "Je suis en colère", lien : "assets/images/emoticon-insulter.png"},
+      { title : "Je suis malade", lien : "assets/images/emoticon-vomir.png"}  ]
+
+  constructor() {    }
+
+  ngOnInit(): void { }
+
+onChoixHumeur(numero: number){
+ this.monHumeurTitle= [this.tabHumeur[numero].title];
+ this.monHumeurLien= [this.tabHumeur[numero].lien];
+
+console.log("humeur titre est : ", this.monHumeurTitle);
+console.log("humeur lien est : ", this.monHumeurLien);
+console.log("index humeur est : ", numero );
+
+}
+
+
+
+}
+
diff --git a/src/app/pages/page-not-found/page-not-found.component.html b/src/app/pages/page-not-found/page-not-found.component.html
index c410e3b..4d60f4e 100644
--- a/src/app/pages/page-not-found/page-not-found.component.html
+++ b/src/app/pages/page-not-found/page-not-found.component.html
@@ -4,12 +4,16 @@
 
   <div class="ctn-link min-vh-100">
  <div class="text-center">
- <p> Page introuvable</p>
+ 
 
 
       <a routerLink="" routerLinkActive="!active">Je retourne à l'accueil</a>
-    </div>
+      <p></p>
+      
+
     
+     <img src="/assets/images/404.gif" alt="Page introuvable">
+    </div>
   </div>
 
 </div>
diff --git a/src/app/pages/page-not-found/page-not-found.component.scss b/src/app/pages/page-not-found/page-not-found.component.scss
index 1169f6b..3e84bf3 100644
--- a/src/app/pages/page-not-found/page-not-found.component.scss
+++ b/src/app/pages/page-not-found/page-not-found.component.scss
@@ -11,6 +11,9 @@ p{
 
 .min-vh-100  {
     font-weight: bold;
-    background-image: linear-gradient(to left top, #051937, #004d7a, #008793, #e2ebe7, #f8faf5);
+    //background-image: linear-gradient(to left top, #051937, #004d7a, #008793, #e2ebe7, #f8faf5);
     //max-width: max-content;
 }
+
+img {justify-content: center;
+}
\ No newline at end of file
diff --git a/src/assets/images/404.gif b/src/assets/images/404.gif
new file mode 100644
index 0000000..3d0d42e
Binary files /dev/null and b/src/assets/images/404.gif differ
diff --git a/src/assets/images/404.jpg b/src/assets/images/404.jpg
deleted file mode 100644
index 9b6c4bf..0000000
Binary files a/src/assets/images/404.jpg and /dev/null differ
diff --git a/src/assets/images/emoticon-fatigue.png b/src/assets/images/emoticon-fatigue.png
new file mode 100644
index 0000000..c43712c
Binary files /dev/null and b/src/assets/images/emoticon-fatigue.png differ
diff --git a/src/assets/images/emoticon-heureux.png b/src/assets/images/emoticon-heureux.png
new file mode 100644
index 0000000..8aab547
Binary files /dev/null and b/src/assets/images/emoticon-heureux.png differ