diff --git a/src/app/notes/details-note/details-note.component.html b/src/app/notes/details-note/details-note.component.html
new file mode 100644
index 0000000..180fa77
--- /dev/null
+++ b/src/app/notes/details-note/details-note.component.html
@@ -0,0 +1,18 @@
+<app-nav-menu></app-nav-menu>
+
+<ng-container *ngIf="note == undefined">
+    <mat-spinner></mat-spinner>
+</ng-container>
+<ng-container *ngIf="note != undefined">
+    <p>Collaborateur : {{ note.collaborateur.nom }} {{ note.collaborateur.prenom }}  <button mat-raised-button [routerLink]="['/collaborateurs', note.collaborateur.id]">Voir les détails</button></p>
+    <p>Créé le {{ note.dateCreation | date : 'dd/MM/yyyy à hh:mm'}}</p>
+    <p>Dernère mise à jour le {{ note.dateMiseAjour | date : 'dd/MM/yyyy à hh:mm'}}</p>
+        
+    <h2>Titre</h2>
+    <div>
+        <mat-form-field appearance="fill">
+            <mat-label>Contenu de la note</mat-label>
+            <textarea matInput disabled >{{note.texte}}</textarea>
+        </mat-form-field>
+    </div>
+</ng-container>
\ No newline at end of file
diff --git a/src/app/notes/details-note/details-note.component.ts b/src/app/notes/details-note/details-note.component.ts
new file mode 100644
index 0000000..a934f5d
--- /dev/null
+++ b/src/app/notes/details-note/details-note.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute } from "@angular/router";
+import { DetailsNoteDTO, NotesService } from "@shared/api-swagger";
+import { Subscription } from "rxjs";
+
+
+@Component({
+    selector: "app-details-note",
+    templateUrl: "./details-note.component.html"
+})
+export class DetailsNoteComponent implements OnInit{
+
+    note: DetailsNoteDTO;
+
+    noteSubscription: Subscription;
+
+    constructor(private noteService: NotesService, private activatedRoute: ActivatedRoute) {}
+
+    ngOnInit() {
+        const id: any = this.activatedRoute.snapshot.paramMap.get("id");
+        if(id != undefined) {
+            this.noteSubscription = this.noteService.getNoteById(id).subscribe(
+                note => this.note = note,
+                err => console.log(err)
+            )
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/notes/notes.component.html b/src/app/notes/notes.component.html
index dc958bb..ef8c786 100644
--- a/src/app/notes/notes.component.html
+++ b/src/app/notes/notes.component.html
@@ -39,7 +39,7 @@
             </ng-container>
 
             <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
+            <mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/notes',row.id]"></mat-row>
 
         </mat-table>
 
diff --git a/src/app/notes/notes.module.ts b/src/app/notes/notes.module.ts
index 26057b9..86f0e5a 100644
--- a/src/app/notes/notes.module.ts
+++ b/src/app/notes/notes.module.ts
@@ -9,11 +9,14 @@ import { NotesComponent } from "./notes.component";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { DialogChoixCollaborateurNoteComponent, NouvelleNoteComponent } from "./nouvelle-note/nouvelle-note.component";
 import { MatTablesModule } from "@shared/mat-tables/mat-tables.module";
+import { DetailsNoteComponent } from "./details-note/details-note.component";
 
 
 @NgModule({
     declarations: [ 
-        NotesComponent, NouvelleNoteComponent, DialogChoixCollaborateurNoteComponent
+        NotesComponent, NouvelleNoteComponent, 
+        DialogChoixCollaborateurNoteComponent,
+        DetailsNoteComponent
     ],
     imports: [
       CommonModule,
diff --git a/src/app/notes/notes.routing.module.ts b/src/app/notes/notes.routing.module.ts
index 8b88bc7..c0abbe8 100644
--- a/src/app/notes/notes.routing.module.ts
+++ b/src/app/notes/notes.routing.module.ts
@@ -8,10 +8,12 @@ import { AuthGuard } from "@shared/auth/auth.guard";
 
 import { paths_notes } from "@shared/utils/paths";
 import { NouvelleNoteComponent } from './nouvelle-note/nouvelle-note.component';
+import { DetailsNoteComponent } from './details-note/details-note.component';
 
 const routes: Routes = [
     { path: paths_notes.ajoutNote, component: NouvelleNoteComponent, canActivate: [AuthGuard]},
-    {path: "", component: NotesComponent, canActivate: [AuthGuard]},
+    { path: paths_notes.get, component: DetailsNoteComponent, canActivate: [AuthGuard]},
+    { path: "", component: NotesComponent, canActivate: [AuthGuard]},
 ]
 
 
diff --git a/src/app/notes/nouvelle-note/nouvelle-note.component.ts b/src/app/notes/nouvelle-note/nouvelle-note.component.ts
index a740fd4..a9eacf4 100644
--- a/src/app/notes/nouvelle-note/nouvelle-note.component.ts
+++ b/src/app/notes/nouvelle-note/nouvelle-note.component.ts
@@ -42,7 +42,7 @@ export class NouvelleNoteComponent {
         this.noteSubscription = this.noteService.addNote(nouvelleNote).subscribe(
             note => {
                 console.log(note);
-                this.router.navigate(["/notes"]);
+                this.router.navigate(["/notes", note.id]);
             },
             err => console.log(err)
         );