diff --git a/src/app/post/components/post-card/post-card.component.ts b/src/app/post/components/post-card/post-card.component.ts
index 24d4c178739e9ecfe1e56c12c4f5631717077a8d..b571eff0016d300940310e551187f27126d8b3d0 100644
--- a/src/app/post/components/post-card/post-card.component.ts
+++ b/src/app/post/components/post-card/post-card.component.ts
@@ -37,6 +37,6 @@ export class PostCardComponent implements OnInit {
     }
   }
   public showDetails(post: Post): void {
-    this.router.navigateByUrl('posts/details/' + post.id);
+    this.router.navigateByUrl('posts/details/' + post.id, { state: { data: post } });
   }
 }
diff --git a/src/app/post/components/post-details/post-details.component.html b/src/app/post/components/post-details/post-details.component.html
index 11f24be812b5d3336a4faa305b3a7cbfb1cb3388..4f39ba1e693450fd374f4791c0f5511872c4d28d 100644
--- a/src/app/post/components/post-details/post-details.component.html
+++ b/src/app/post/components/post-details/post-details.component.html
@@ -1 +1,5 @@
-<p>post-details works!</p>
+<div *ngIf="post">
+  <h2>{{ post.title }}</h2>
+</div>
+
+<button (click)="backToPosts()">Retour</button>
diff --git a/src/app/post/components/post-details/post-details.component.ts b/src/app/post/components/post-details/post-details.component.ts
index 4cfba29e6a51c23d51816aabe6beca2a34f8ba1b..ce30a25370c71a22062a18234a2a1a5ecf562793 100644
--- a/src/app/post/components/post-details/post-details.component.ts
+++ b/src/app/post/components/post-details/post-details.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Post } from '../../models/post.model';
+import { PostService } from '../../services/post.service';
 
 @Component({
   selector: 'app-post-details',
@@ -7,10 +9,21 @@ import { ActivatedRoute } from '@angular/router';
   styleUrls: ['./post-details.component.scss'],
 })
 export class PostDetailsComponent implements OnInit {
-  constructor(private activatedRoute: ActivatedRoute) {}
-  postId: string;
+  constructor(private activatedRoute: ActivatedRoute, private router: Router, private postService: PostService) {}
+  post: Post;
   ngOnInit(): void {
-    this.postId = this.activatedRoute.snapshot.paramMap.get('id');
-    console.log(this.postId);
+    if (history.state.data) {
+      this.post = new Post(history.state.data);
+    } else {
+      const postId = this.activatedRoute.snapshot.paramMap.get('id');
+      this.postService.getPost(postId).subscribe((post) => {
+        this.post = post.posts[0];
+        console.log(this.post);
+      });
+    }
+  }
+
+  public backToPosts(): void {
+    this.router.navigateByUrl('/posts');
   }
 }
diff --git a/src/app/post/models/post.model.ts b/src/app/post/models/post.model.ts
index 53efadc333d83d11bdad7943a08b49b34b8d20b8..604f439950f3db59f625aca07754b21d16fd883f 100644
--- a/src/app/post/models/post.model.ts
+++ b/src/app/post/models/post.model.ts
@@ -9,4 +9,8 @@ export class Post {
   html: string;
   author: string;
   tags: Tag[];
+
+  constructor(obj?: any) {
+    Object.assign(this, obj);
+  }
 }
diff --git a/src/app/post/services/post.service.ts b/src/app/post/services/post.service.ts
index 848e6a58e1260b8b556a66fb522a59a3a23a235e..c5f3841bc332c370e90c08a8d42c6e9070688241 100644
--- a/src/app/post/services/post.service.ts
+++ b/src/app/post/services/post.service.ts
@@ -2,6 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { Post } from '../models/post.model';
 import { PostWithMeta } from '../models/postWithMeta.model';
 
 @Injectable({
@@ -11,6 +12,12 @@ export class PostService {
   private readonly baseUrl = 'api/posts';
   constructor(private http: HttpClient) {}
 
+  public getPost(idPost: string): Observable<PostWithMeta> {
+    return this.http
+      .get<PostWithMeta>(`${this.baseUrl}/` + idPost)
+      .pipe(map((item: PostWithMeta) => new PostWithMeta(item)));
+  }
+
   public getPosts(tags?: string[]): Observable<PostWithMeta> {
     if (!tags) {
       return this.http