diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 5465f4b..81648b7 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -27,6 +27,7 @@ import {WaypointListComponent} from "./waypoint/waypoint-list/waypoint-list.comp
 import {WaypointDetailComponent} from "./waypoint/waypoint-detail/waypoint-detail.component";
 import {WaypointEditComponent} from "./waypoint/waypoint-edit/waypoint-edit.component";
 import {WaypointDeleteComponent} from "./waypoint/waypoint-delete/waypoint-delete.component";
+import {RouteVersionsDeleteComponent} from "./route-versions/route-versions-delete/route-versions-delete.component";
 
 const routes: Routes = [
   { path: 'users/create', component: UserRegisterComponent},
@@ -42,6 +43,7 @@ const routes: Routes = [
   { path: 'routes', component: RouteListComponent, canActivate: [CheckLoggedInGuard] },
 
   { path: 'route-versions-create', component: RouteVersionsCreateComponent, canActivate: [CheckIsNotAdminGuard] },
+  { path: 'route-versions/delete', component: RouteVersionsDeleteComponent, canActivate: [CheckIsNotAdminGuard] },
 
   { path: 'routeFollowed/create', component: RouteFollowedCreateComponent, canActivate: [CheckIsNotAdminGuard] },
   { path: 'routeFollowed/:id/delete', component: RouteFollowedDeleteComponent, canActivate: [CheckIsNotAdminGuard]},
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f3be4a7..9b8faab 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -48,6 +48,8 @@ import {RouteFollowedDetailComponent} from "./routeFollowed/route-followed-detai
 import { RouteVersionsCreateComponent } from './route-versions/route-versions-create/route-versions-create.component';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import {NgxDatatableModule} from "@swimlane/ngx-datatable";
+import { RouteVersionsListComponent } from './route-versions/route-versions-list/route-versions-list.component';
+import { RouteVersionsDeleteComponent } from './route-versions/route-versions-delete/route-versions-delete.component';
 
 @NgModule({
   declarations: [
@@ -78,7 +80,9 @@ import {NgxDatatableModule} from "@swimlane/ngx-datatable";
     RouteFollowedEditComponent,
     RouteFollowedListComponent,
     RouteFollowedDetailComponent,
-    RouteVersionsCreateComponent
+    RouteVersionsCreateComponent,
+    RouteVersionsListComponent,
+    RouteVersionsDeleteComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/route-versions/route-versions-delete/route-versions-delete.component.html b/src/app/route-versions/route-versions-delete/route-versions-delete.component.html
new file mode 100644
index 0000000..5af9069
--- /dev/null
+++ b/src/app/route-versions/route-versions-delete/route-versions-delete.component.html
@@ -0,0 +1 @@
+<p>route-versions-delete works!</p>
diff --git a/src/app/route-versions/route-versions-delete/route-versions-delete.component.scss b/src/app/route-versions/route-versions-delete/route-versions-delete.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/route-versions/route-versions-delete/route-versions-delete.component.ts b/src/app/route-versions/route-versions-delete/route-versions-delete.component.ts
new file mode 100644
index 0000000..b2c6e3f
--- /dev/null
+++ b/src/app/route-versions/route-versions-delete/route-versions-delete.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-route-versions-delete',
+  templateUrl: './route-versions-delete.component.html',
+  styleUrls: ['./route-versions-delete.component.scss']
+})
+export class RouteVersionsDeleteComponent {
+
+}
diff --git a/src/app/route-versions/route-versions-list/route-versions-list.component.html b/src/app/route-versions/route-versions-list/route-versions-list.component.html
new file mode 100644
index 0000000..f41addb
--- /dev/null
+++ b/src/app/route-versions/route-versions-list/route-versions-list.component.html
@@ -0,0 +1,30 @@
+<div class="row">
+  <div class="card col-lg-4 col-md-6 col-sm-12 col-xs-12" *ngFor="let version of routeVersions">
+    <div class="card-block">
+      <div class="card-header row m-1 text-center" >
+        <h5>Route Version</h5>
+      </div>
+      <div class="card-body row m-1">
+        <div class="col-md-6 p-3">
+          <h6 class="card-subtitle text-muted">CreatedBy</h6>
+          <p class="card-text">{{version.createdBy?.username}}</p>
+        </div>
+        <div class="col-md-6 p-3">
+          <h6 class="card-subtitle text-muted">Creation date</h6>
+          <p class="card-text">{{version.creationDate | date: 'dd/MM/yyyy HH:mm:ss'}}</p>
+        </div>
+        <div class="col-md-6 p-3">
+          <h6 class="card-subtitle text-muted">Title</h6>
+          <p class="card-text">{{version.title}}</p>
+        </div>
+      </div>
+      <div class="card-footer text-right row">
+        <div class="btn-group" role="group" aria-label="Basic example">
+          <button type="button" *ngIf="!isRole('admin')" (click)="delete(version)" class="btn col-6 m-1 btn-outline-danger">Delete</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<ngb-pagination class="d-flex justify-content-center" [(page)]="page" [pageSize]="pageSize" [collectionSize]="totalRoutes" (pageChange)="changePage()">
+</ngb-pagination>
diff --git a/src/app/route-versions/route-versions-list/route-versions-list.component.scss b/src/app/route-versions/route-versions-list/route-versions-list.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/route-versions/route-versions-list/route-versions-list.component.ts b/src/app/route-versions/route-versions-list/route-versions-list.component.ts
new file mode 100644
index 0000000..cc5cfd1
--- /dev/null
+++ b/src/app/route-versions/route-versions-list/route-versions-list.component.ts
@@ -0,0 +1,76 @@
+import {Component, OnInit} from '@angular/core';
+import {PagedResourceCollection} from "@lagoshny/ngx-hateoas-client";
+import {RouteVersion} from "../routeVersion.entity";
+import {Router} from "@angular/router";
+import {RouteVersionsService} from "../route-versions.service";
+import {AuthenticationBasicService} from "../../login-basic/authentication-basic.service";
+import {HttpClient} from "@angular/common/http";
+import {User} from "../../login-basic/user";
+
+@Component({
+  selector: 'app-route-versions-list',
+  templateUrl: './route-versions-list.component.html',
+  styleUrls: ['./route-versions-list.component.scss']
+})
+export class RouteVersionsListComponent implements OnInit {
+
+  public routesPagedResource: PagedResourceCollection<RouteVersion>;
+  public routeVersions: RouteVersion[] = [];
+  public pageSize = 5;
+  public page = 1;
+  public totalRoutes = 0;
+  public types: [];
+  public type: string;
+  public params: any;
+
+  constructor(
+    public router: Router,
+    private routeVersionService: RouteVersionsService,
+    private authenticationService: AuthenticationBasicService,
+    private http: HttpClient) {
+    //this.params = this.router.getCurrentNavigation().extras.state?.['param']
+  }
+
+  ngOnInit(): void {
+    this.routeVersionService.getPage({ pageParams: { size: this.pageSize }, sort: { username: 'ASC' } }).subscribe(
+      async (page: PagedResourceCollection<RouteVersion>) => {
+        function delay(ms: number) {
+          return new Promise(resolve => setTimeout(resolve, ms));
+        }
+
+        await delay(2000)
+        this.routeVersions = page.resources; //Comprovar si hi es o no, i si no hi es li afegeix-ho jo.
+        this.totalRoutes = page.totalElements;
+        this.routesPagedResource = page;
+        this.routeVersions.map(routes => {
+          routes.getRelation('createdBy')
+            .subscribe((user: User) => {
+              routes.createdBy = user;
+            });
+        });
+      });
+  }
+
+  changePage(): void {
+    this.routesPagedResource.customPage(
+      {pageParams: {page: this.page - 1, size: this.pageSize},
+        sort: {name: 'ASC'}}).subscribe(
+      (page: PagedResourceCollection<RouteVersion>) => {
+        this.routeVersions = page.resources;
+        this.routeVersions.map(routes => {
+          routes.getRelation('createdBy')
+            .subscribe((user: User) => {
+              routes.createdBy = user;
+            });
+        });
+      });
+  }
+
+  isRole(role: string): boolean {
+    return this.authenticationService.isRole(role);
+  }
+
+  delete(version : RouteVersion ): void {
+    this.routeVersionService.deleteResource(version).subscribe();
+  }
+}
diff --git a/src/app/routes/route-detail/route-detail.component.html b/src/app/routes/route-detail/route-detail.component.html
index 6cb7877..46cfbd6 100644
--- a/src/app/routes/route-detail/route-detail.component.html
+++ b/src/app/routes/route-detail/route-detail.component.html
@@ -36,3 +36,7 @@ <h6 class="card-subtitle text-muted">Description</h6>
     </div>
   </div>
 </div>
+<div class="row">
+  <hr class="my-3">
+</div>
+<app-route-versions-list></app-route-versions-list>