diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 5c191fa..a1367e7 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,10 +1,15 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { FavorisUserComponent } from './pages/favoris-user/favoris-user.component';
 import { HomePageComponent } from './pages/home-page/home-page.component';
+import { ListCategoriesComponent } from './pages/list-categories/list-categories.component';
 
 const routes: Routes = [
     { path: '', redirectTo: 'home', pathMatch: 'full' },
     { path: 'home', component: HomePageComponent },
+    { path: 'categories', component: ListCategoriesComponent },
+    { path: 'favoris', component: FavorisUserComponent },
+    { path: 'Deconnexion', redirectTo: 'home'}
 ];
 
 @NgModule({
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 435cdfd..3d99444 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,2 +1,3 @@
+<app-search-bar></app-search-bar>
 <app-nav-bar></app-nav-bar>
 <router-outlet></router-outlet>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 958ce0d..dcbf3e8 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -15,6 +15,8 @@ import { CardRestoComponent } from './card-resto/card-resto.component';
 import { FooterComponent } from './footer/footer.component';
 import { HomePageComponent } from './pages/home-page/home-page.component';
 import { HttpClientModule } from '@angular/common/http';
+import { ListCategoriesComponent } from './pages/list-categories/list-categories.component';
+import { FavorisUserComponent } from './pages/favoris-user/favoris-user.component';
 
 @NgModule({
   declarations: [
@@ -29,7 +31,9 @@ import { HttpClientModule } from '@angular/common/http';
     CardCategoryComponent,
     CardRestoComponent,
     FooterComponent,
-    HomePageComponent
+    HomePageComponent,
+    ListCategoriesComponent,
+    FavorisUserComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/header/components/nav-bar/nav-bar.component.html b/src/app/header/components/nav-bar/nav-bar.component.html
index 108f6fd..705301a 100644
--- a/src/app/header/components/nav-bar/nav-bar.component.html
+++ b/src/app/header/components/nav-bar/nav-bar.component.html
@@ -1 +1,27 @@
-<p>nav-bar works!</p>
+<nav class="navbar-expand-lg navbar-light">
+  <div class="container-fluid">
+      <button class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarNavAltMarkup"
+          aria-controls="navbarNavAltMarkup"
+          aria-expanded="false"
+          aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
+          <div class="navbar-nav ">
+              <a routerLink="home" routerLinkActive="active-custom" class="nav-link p-4 ">Accueil</a>
+              <a routerLink="categories" routerLinkActive="active-custom" class="nav-link p-4">Categories</a>
+              <a routerLink="favoris" routerLinkActive="active-custom" class="nav-link p-4">Mes favoris</a>
+              <a routerLink="" routerLinkActive="active-custom" class="nav-link p-4">Deconnexion</a>
+          </div>
+      </div>
+      <div id="image-header">
+      <img src="assets/images-header/fond.png" alt="fond_header">
+    </div>
+  </div>
+</nav>
+
+
+
diff --git a/src/app/header/components/nav-bar/nav-bar.component.scss b/src/app/header/components/nav-bar/nav-bar.component.scss
index e69de29..5f6e9ae 100644
--- a/src/app/header/components/nav-bar/nav-bar.component.scss
+++ b/src/app/header/components/nav-bar/nav-bar.component.scss
@@ -0,0 +1,7 @@
+#image-header{
+  display: flex;
+  justify-content: center;
+  margin: auto;
+  padding-bottom: 5%;
+  filter: drop-shadow(0 0 0.30rem black);
+}
diff --git a/src/app/header/components/search-bar/search-bar.component.html b/src/app/header/components/search-bar/search-bar.component.html
index aac7a30..e13586b 100644
--- a/src/app/header/components/search-bar/search-bar.component.html
+++ b/src/app/header/components/search-bar/search-bar.component.html
@@ -1 +1,8 @@
-<p>search-bar works!</p>
+<nav class="navbar navbar-light">
+  <div class="container-fluid">
+<img src="assets/images-header/logo.png" alt="logo">
+    <form style="width: 20%;" class="d-flex">
+      <input class="form-control me-2" type="search" placeholder="Trouver votre Simpl'eat" aria-label="Search">
+    </form>
+  </div>
+</nav>
diff --git a/src/app/header/components/search-bar/search-bar.component.scss b/src/app/header/components/search-bar/search-bar.component.scss
index e69de29..1403dca 100644
--- a/src/app/header/components/search-bar/search-bar.component.scss
+++ b/src/app/header/components/search-bar/search-bar.component.scss
@@ -0,0 +1,7 @@
+.container-fluid
+{
+  padding-top: 2%;
+  width : 100%;
+  margin: auto;
+  border-bottom: 3px crimson;
+}
diff --git a/src/app/pages/favoris-user/favoris-user.component.html b/src/app/pages/favoris-user/favoris-user.component.html
new file mode 100644
index 0000000..45dd947
--- /dev/null
+++ b/src/app/pages/favoris-user/favoris-user.component.html
@@ -0,0 +1 @@
+<p>favoris-user works!</p>
diff --git a/src/app/pages/favoris-user/favoris-user.component.scss b/src/app/pages/favoris-user/favoris-user.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/favoris-user/favoris-user.component.spec.ts b/src/app/pages/favoris-user/favoris-user.component.spec.ts
new file mode 100644
index 0000000..a1e56bd
--- /dev/null
+++ b/src/app/pages/favoris-user/favoris-user.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FavorisUserComponent } from './favoris-user.component';
+
+describe('FavorisUserComponent', () => {
+  let component: FavorisUserComponent;
+  let fixture: ComponentFixture<FavorisUserComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FavorisUserComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FavorisUserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/favoris-user/favoris-user.component.ts b/src/app/pages/favoris-user/favoris-user.component.ts
new file mode 100644
index 0000000..98e9f06
--- /dev/null
+++ b/src/app/pages/favoris-user/favoris-user.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-favoris-user',
+  templateUrl: './favoris-user.component.html',
+  styleUrls: ['./favoris-user.component.scss']
+})
+export class FavorisUserComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/pages/home-page/home-page.component.html b/src/app/pages/home-page/home-page.component.html
index 020706a..4ae502f 100644
--- a/src/app/pages/home-page/home-page.component.html
+++ b/src/app/pages/home-page/home-page.component.html
@@ -1,3 +1,3 @@
 <div *ngFor="let category of listCategories">
-    <app-card-category [categoryData]="category"></app-card-category>
-</div>
\ No newline at end of file
+  <app-card-category [categoryData]="category"></app-card-category>
+</div>
diff --git a/src/app/pages/list-categories/list-categories.component.html b/src/app/pages/list-categories/list-categories.component.html
new file mode 100644
index 0000000..744a7e2
--- /dev/null
+++ b/src/app/pages/list-categories/list-categories.component.html
@@ -0,0 +1 @@
+category-works!
diff --git a/src/app/pages/list-categories/list-categories.component.scss b/src/app/pages/list-categories/list-categories.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/list-categories/list-categories.component.spec.ts b/src/app/pages/list-categories/list-categories.component.spec.ts
new file mode 100644
index 0000000..8ed152c
--- /dev/null
+++ b/src/app/pages/list-categories/list-categories.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ListCategoriesComponent } from './list-categories.component';
+
+describe('ListCategoriesComponent', () => {
+  let component: ListCategoriesComponent;
+  let fixture: ComponentFixture<ListCategoriesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ListCategoriesComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ListCategoriesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/list-categories/list-categories.component.ts b/src/app/pages/list-categories/list-categories.component.ts
new file mode 100644
index 0000000..a2b5ac0
--- /dev/null
+++ b/src/app/pages/list-categories/list-categories.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { ApiBackService } from 'src/app/services/api-back.service';
+
+
+@Component({
+  selector: 'app-list-categories',
+  templateUrl: './list-categories.component.html',
+  styleUrls: ['./list-categories.component.scss']
+})
+export class ListCategoriesComponent implements OnInit {
+
+  constructor(private apiBackService : ApiBackService) {
+   }
+
+  ngOnInit(): void {}
+}
diff --git a/src/assets/images-header/fond.png b/src/assets/images-header/fond.png
new file mode 100644
index 0000000..fbd2d6c
Binary files /dev/null and b/src/assets/images-header/fond.png differ
diff --git a/src/assets/images-header/logo.png b/src/assets/images-header/logo.png
new file mode 100644
index 0000000..725a0ce
Binary files /dev/null and b/src/assets/images-header/logo.png differ
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index a0c2872..170a57c 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -4,7 +4,7 @@
 
 export const environment = {
   production: false,
-  apiUrl: "http://localhost:8080",
+  apiUrl: "http://localhost:3000",
 };
 
 /*