diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 0297262..b13fd24 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,7 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { PageAccueilComponent } from './pages/page-accueil/page-accueil.component';
+import { PageDetailsComponent } from './pages/page-details/page-details.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path:'home', component: PageAccueilComponent},
+  {path : 'details', component: PageDetailsComponent}
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 72e8782..c26af53 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,11 +4,18 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { NavBarComponent } from './components/nav-bar/nav-bar.component';
+import { PageAccueilComponent } from './pages/page-accueil/page-accueil.component';
+import { PageDetailsComponent } from './pages/page-details/page-details.component';
+import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
+
 
 @NgModule({
   declarations: [
     AppComponent,
-    NavBarComponent
+    NavBarComponent,
+    PageAccueilComponent,
+    PageDetailsComponent,
+    PageNotFoundComponent,
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/nav-bar/nav-bar.component.html b/src/app/components/nav-bar/nav-bar.component.html
index 0eed8fc..d59698b 100644
--- a/src/app/components/nav-bar/nav-bar.component.html
+++ b/src/app/components/nav-bar/nav-bar.component.html
@@ -12,8 +12,8 @@
         </button>
         <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
             <div class="navbar-nav">
-                <a class="nav-link">Accueil</a>
-                <a class="nav-link">Details</a>
+                <a routerLink = "home"  routerLinkActive="active-custom" class="nav-link">Accueil</a>
+                <a routerLink = "details" routerLinkActive="active-custom" class="nav-link">Details</a>
                 <a class="nav-link">Panier</a>
                 <a class="nav-link disabled">Plus d'option bientôt</a>
             </div>
diff --git a/src/app/components/nav-bar/nav-bar.component.scss b/src/app/components/nav-bar/nav-bar.component.scss
index e69de29..6f2ccfe 100644
--- a/src/app/components/nav-bar/nav-bar.component.scss
+++ b/src/app/components/nav-bar/nav-bar.component.scss
@@ -0,0 +1,3 @@
+.active-custom{
+    color: green !important;
+}
\ No newline at end of file
diff --git a/src/app/pages/page-accueil/page-accueil.component.html b/src/app/pages/page-accueil/page-accueil.component.html
new file mode 100644
index 0000000..0c10a7b
--- /dev/null
+++ b/src/app/pages/page-accueil/page-accueil.component.html
@@ -0,0 +1 @@
+<p>page-accueil works!</p>
diff --git a/src/app/pages/page-accueil/page-accueil.component.scss b/src/app/pages/page-accueil/page-accueil.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/page-accueil/page-accueil.component.spec.ts b/src/app/pages/page-accueil/page-accueil.component.spec.ts
new file mode 100644
index 0000000..ee285ad
--- /dev/null
+++ b/src/app/pages/page-accueil/page-accueil.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageAccueilComponent } from './page-accueil.component';
+
+describe('PageAccueilComponent', () => {
+  let component: PageAccueilComponent;
+  let fixture: ComponentFixture<PageAccueilComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageAccueilComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageAccueilComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/page-accueil/page-accueil.component.ts b/src/app/pages/page-accueil/page-accueil.component.ts
new file mode 100644
index 0000000..a3a39fd
--- /dev/null
+++ b/src/app/pages/page-accueil/page-accueil.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-accueil',
+  templateUrl: './page-accueil.component.html',
+  styleUrls: ['./page-accueil.component.scss']
+})
+export class PageAccueilComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/pages/page-details/page-details.component.html b/src/app/pages/page-details/page-details.component.html
new file mode 100644
index 0000000..d4ebe3b
--- /dev/null
+++ b/src/app/pages/page-details/page-details.component.html
@@ -0,0 +1 @@
+<p>page-details works!</p>
diff --git a/src/app/pages/page-details/page-details.component.scss b/src/app/pages/page-details/page-details.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/page-details/page-details.component.spec.ts b/src/app/pages/page-details/page-details.component.spec.ts
new file mode 100644
index 0000000..8be7d1c
--- /dev/null
+++ b/src/app/pages/page-details/page-details.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageDetailsComponent } from './page-details.component';
+
+describe('PageDetailsComponent', () => {
+  let component: PageDetailsComponent;
+  let fixture: ComponentFixture<PageDetailsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageDetailsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageDetailsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/page-details/page-details.component.ts b/src/app/pages/page-details/page-details.component.ts
new file mode 100644
index 0000000..e63485f
--- /dev/null
+++ b/src/app/pages/page-details/page-details.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-details',
+  templateUrl: './page-details.component.html',
+  styleUrls: ['./page-details.component.scss']
+})
+export class PageDetailsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
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
new file mode 100644
index 0000000..cc75e49
--- /dev/null
+++ b/src/app/pages/page-not-found/page-not-found.component.html
@@ -0,0 +1 @@
+<p>page-not-found works!</p>
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
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/page-not-found/page-not-found.component.spec.ts b/src/app/pages/page-not-found/page-not-found.component.spec.ts
new file mode 100644
index 0000000..aa242a9
--- /dev/null
+++ b/src/app/pages/page-not-found/page-not-found.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PageNotFoundComponent } from './page-not-found.component';
+
+describe('PageNotFoundComponent', () => {
+  let component: PageNotFoundComponent;
+  let fixture: ComponentFixture<PageNotFoundComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PageNotFoundComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PageNotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/page-not-found/page-not-found.component.ts b/src/app/pages/page-not-found/page-not-found.component.ts
new file mode 100644
index 0000000..5faa15b
--- /dev/null
+++ b/src/app/pages/page-not-found/page-not-found.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-page-not-found',
+  templateUrl: './page-not-found.component.html',
+  styleUrls: ['./page-not-found.component.scss']
+})
+export class PageNotFoundComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}