diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f5e40ef..13c248c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -40,7 +40,6 @@ import { AutofocusFixModule  } from 'ngx-autofocus-fix';
 
 
 
-
 @NgModule({
   declarations: [
     AppComponent,
@@ -75,7 +74,6 @@ import { AutofocusFixModule  } from 'ngx-autofocus-fix';
     PageAjoutContactComponent,
     PageModifierContactComponent,
     PageCreationTeamComponent,
-
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/humeur/humeur.component.html b/src/app/components/humeur/humeur.component.html
index 2448f4b..079e3d1 100644
--- a/src/app/components/humeur/humeur.component.html
+++ b/src/app/components/humeur/humeur.component.html
@@ -1 +1,6 @@
-<p>humeur works!</p>
+<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.ts b/src/app/components/humeur/humeur.component.ts
index b3b1f46..43ec550 100644
--- a/src/app/components/humeur/humeur.component.ts
+++ b/src/app/components/humeur/humeur.component.ts
@@ -7,9 +7,23 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HumeurComponent implements OnInit {
 
-  constructor() { }
+
+
+
+
+
+  constructor() {
+    
+   
+    
+
+   }
 
   ngOnInit(): void {
+
+
+
+
   }
 
 }
diff --git a/src/app/emoticon/emoticon.component.html b/src/app/emoticon/emoticon.component.html
new file mode 100644
index 0000000..9c09552
--- /dev/null
+++ b/src/app/emoticon/emoticon.component.html
@@ -0,0 +1,6 @@
+<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
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/emoticon/emoticon.component.spec.ts b/src/app/emoticon/emoticon.component.spec.ts
new file mode 100644
index 0000000..a5d81b3
--- /dev/null
+++ b/src/app/emoticon/emoticon.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmoticonComponent } from './emoticon.component';
+
+describe('EmoticonComponent', () => {
+  let component: EmoticonComponent;
+  let fixture: ComponentFixture<EmoticonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EmoticonComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EmoticonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/emoticon/emoticon.component.ts b/src/app/emoticon/emoticon.component.ts
new file mode 100644
index 0000000..9be5950
--- /dev/null
+++ b/src/app/emoticon/emoticon.component.ts
@@ -0,0 +1,26 @@
+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/pages/page-not-found/page-not-found.component.html b/src/app/pages/page-not-found/page-not-found.component.html
index 575a83b..860c18d 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
@@ -2,11 +2,15 @@
 
 <div>
 
-<p> Page introuvable</p>
-<a routerLink="" routerLinkActive="!active"><br><br>
-    Je retourne à l'accueil<br><br><br><br><br><br><br><br><br><br><br><br></a>
+  <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>
+    
+  </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 6ae07c1..1169f6b 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
@@ -1,25 +1,16 @@
-a.hover {
-  color: rgb(219, 200, 28);
+p{
+    color: black;
+    text-align: center;
 }
 
-a {
-  color: rgb(32, 114, 45);
+
+.ctn-link > div {
+    padding-top: 7em;
 }
 
-div {
-  text-align: center;
-  font-weight: bold;
 
-  // si on préfère une image en fond
-  // background-image: url("../../../assets/images/404.jpg");
-  // background-size: cover;
-
-  background-image: linear-gradient(
-    to left top,
-    #051937,
-    #004d7a,
-    #008793,
-    #e2ebe7,
-    #f8faf5
-  );
+.min-vh-100  {
+    font-weight: bold;
+    background-image: linear-gradient(to left top, #051937, #004d7a, #008793, #e2ebe7, #f8faf5);
+    //max-width: max-content;
 }
diff --git a/src/assets/images/emoticon-insulter.png b/src/assets/images/emoticon-insulter.png
new file mode 100644
index 0000000..258096a
Binary files /dev/null and b/src/assets/images/emoticon-insulter.png differ
diff --git a/src/assets/images/emoticon-pleurer.png b/src/assets/images/emoticon-pleurer.png
new file mode 100644
index 0000000..465e493
Binary files /dev/null and b/src/assets/images/emoticon-pleurer.png differ
diff --git a/src/assets/images/emoticon-vomir.png b/src/assets/images/emoticon-vomir.png
new file mode 100644
index 0000000..9186b79
Binary files /dev/null and b/src/assets/images/emoticon-vomir.png differ