diff --git a/src/app/post/components/post-card/post-card.component.html b/src/app/post/components/post-card/post-card.component.html
index 3dc507bda5fc27ef29f10c32c8bd46d7f492ff9e..1f223f0210e4b521b68209b04e53b83c88021ef7 100644
--- a/src/app/post/components/post-card/post-card.component.html
+++ b/src/app/post/components/post-card/post-card.component.html
@@ -1,4 +1,4 @@
-<div fxLayout="column" *ngIf="post" class="post" [ngClass]="class" fxLayoutGap="12px">
+<div fxLayout="column" *ngIf="post" class="post" [ngClass]="class" fxLayoutGap="12px" (click)="showDetails(post)">
   <div fxLayout="column" fxLayoutGap="4px">
     <div fxLayout="row" class="tag" fxLayoutAlign=" center" fxLayoutGap="12px" *ngIf="getIconOfTag(post.tags[0].slug)">
       <app-svg-icon
diff --git a/src/app/post/components/post-card/post-card.component.scss b/src/app/post/components/post-card/post-card.component.scss
index fd0d45d248b9891b494cf2b39eba206c750e08bc..c4213f621d3d6e9161793a4a743181573daa9415 100644
--- a/src/app/post/components/post-card/post-card.component.scss
+++ b/src/app/post/components/post-card/post-card.component.scss
@@ -2,7 +2,8 @@
 @import '../../../../assets/scss/typography';
 
 .post {
-  padding: 24px 6px;
+  cursor: pointer;
+  margin: 24px 6px;
   border-bottom: 1px dashed $grey-3;
   &.bigNew {
     border: 0;
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 317e19c03f502998ce0f71ebfc4ae5bde3ac5b56..24d4c178739e9ecfe1e56c12c4f5631717077a8d 100644
--- a/src/app/post/components/post-card/post-card.component.ts
+++ b/src/app/post/components/post-card/post-card.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { TagEnum } from '../../enum/tagEnum.enum';
 import { Post } from '../../models/post.model';
 
@@ -11,14 +12,9 @@ export class PostCardComponent implements OnInit {
   @Input() post: Post;
   @Input() class: string;
   test: string;
-  constructor() {}
+  constructor(private router: Router) {}
 
-  ngOnInit(): void {
-    /*ùif (this.post) {
-      console.log(this.post);
-      this.test = this.post.html.replace(/<[^>]*>/g, '');
-    }*/
-  }
+  ngOnInit(): void {}
 
   getIconOfTag(tag: string): string {
     switch (tag) {
@@ -40,4 +36,7 @@ export class PostCardComponent implements OnInit {
         return null;
     }
   }
+  public showDetails(post: Post): void {
+    this.router.navigateByUrl('posts/details/' + post.id);
+  }
 }
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 adf283aa1d0ed592aa5ebe4e48d79803b57405d6..4cfba29e6a51c23d51816aabe6beca2a34f8ba1b 100644
--- a/src/app/post/components/post-details/post-details.component.ts
+++ b/src/app/post/components/post-details/post-details.component.ts
@@ -1,15 +1,16 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'app-post-details',
   templateUrl: './post-details.component.html',
-  styleUrls: ['./post-details.component.scss']
+  styleUrls: ['./post-details.component.scss'],
 })
 export class PostDetailsComponent implements OnInit {
-
-  constructor() { }
-
+  constructor(private activatedRoute: ActivatedRoute) {}
+  postId: string;
   ngOnInit(): void {
+    this.postId = this.activatedRoute.snapshot.paramMap.get('id');
+    console.log(this.postId);
   }
-
 }
diff --git a/src/app/post/post-routing.module.ts b/src/app/post/post-routing.module.ts
index 2ec94d5983886a32f5bf1d35937aa1867a1139e4..f8f06e2dd13746b52d5651a316c7a45b02d490ca 100644
--- a/src/app/post/post-routing.module.ts
+++ b/src/app/post/post-routing.module.ts
@@ -1,8 +1,25 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+import { PostDetailsComponent } from './components/post-details/post-details.component';
+import { PostListComponent } from './components/post-list/post-list.component';
 import { PostComponent } from './post.component';
 
-const routes: Routes = [{ path: '', component: PostComponent }];
+const routes: Routes = [
+  {
+    path: '',
+    component: PostComponent,
+    children: [
+      {
+        path: '',
+        component: PostListComponent,
+      },
+      {
+        path: 'details/:id',
+        component: PostDetailsComponent,
+      },
+    ],
+  },
+];
 
 @NgModule({
   imports: [RouterModule.forChild(routes)],
diff --git a/src/app/post/post.component.html b/src/app/post/post.component.html
index 2ea36328d11da5ce494b8fb63f384c32e39bf5e9..8fe7258a1fe05d54aaca1aa770ec82c512848987 100644
--- a/src/app/post/post.component.html
+++ b/src/app/post/post.component.html
@@ -1,2 +1,2 @@
 <app-post-header></app-post-header>
-<app-post-list></app-post-list>
+<router-outlet></router-outlet>
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index 75dd41e99e0493162e4156be96636a3c079c64a3..7b72d6a99b74d8253d4dd1dd61560951700cd455 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -7,7 +7,7 @@ $grey-1: #333333;
 $grey-2: #4f4f4f;
 $grey-3: #828282;
 $grey-4: #bdbdbd;
-$grey-6: #f2f2f2;
+$grey-6: #f8f8f8;
 /* form colors */
 $green-1: #47c562;
 /* Status colors */