diff --git a/package-lock.json b/package-lock.json
index be9bea4a1532f90c3f14174b40782b0f383c4551..48a72d1b0d9972f5ddb6c8f32fc21193c4b68c4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "climbing-hall",
       "version": "0.0.0",
       "dependencies": {
-        "@angular/animations": "^14.2.0",
+        "@angular/animations": "^14.2.8",
         "@angular/cdk": "^14.2.6",
         "@angular/common": "^14.2.0",
         "@angular/compiler": "^14.2.0",
diff --git a/package.json b/package.json
index 997d35f5b9262c935e9ad3b93ac5bb0a4d58bdb0..b5ffdea4e5e1e6445815d63b16213fe1dd7fb5e8 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^14.2.0",
+    "@angular/animations": "^14.2.8",
     "@angular/cdk": "^14.2.6",
     "@angular/common": "^14.2.0",
     "@angular/compiler": "^14.2.0",
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 24aefee2a57f72f90bb6d037e41c66e54b04b095..0b4edbe1855183c663de67780466b97af8de02df 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,18 +1,37 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { MembersListComponent } from './components/members/members-list.component'
-import { RoutesComponent } from './components/routes/routes.component'
+import {RoutesComponent} from "./components/routes/routes.component";
+import {RouteComponent} from "./components/routes/route/route.component";
+import {RouteDetailPageComponent} from "./components/routes/route/route-detail-page/route-detail-page.component";
+import {AddRouteFormComponent} from "./components/routes/route/add-route-form/add-route-form.component";
 
 const routes: Routes = [
   {
     path:'members', component:MembersListComponent
   },
   {
-    path:'routes', component:RoutesComponent
+    path: 'routes',
+    component: RoutesComponent,
   },
   {
-    path:'', redirectTo:'members', pathMatch:'full'
-  }
+    path: 'route',
+    component: RouteComponent,
+  },
+  {
+    path: 'routeDetails/:id',
+    component: RouteDetailPageComponent,
+    pathMatch: 'full',
+  },
+  {
+    path: 'routesAddForm',
+    component: AddRouteFormComponent,
+  },
+  {
+    path: '',
+    redirectTo: 'members',
+    pathMatch: 'full',
+  },
 ];
 
 @NgModule({
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 247597e3b7826d30fdc9608f04aaad1aa6390f93..473c2c363fef276b26182be77d03e2f16cc0ade8 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,20 +1,29 @@
 <nav>
-  <a aria-current="page" class="headline" routerLink="/"><h1>Kletterhalle</h1></a>
+  <a aria-current="page" class="headline" routerLink="/">
+    <mat-icon>home</mat-icon>
+    <h1>Kletterhalle</h1>
+  </a>
   <div>
-      <ul>
-        <li>
-          <a aria-current="page" class="nav-link" routerLink="/members">Members</a>
-        </li>
-        <li>
-          <a aria-current="page" class="nav-link" routerLink="/routes">Routes</a>
-        </li>
-      </ul>
+    <ul>
+      <li>
+        <a
+          [routerLinkActive]="'active'"
+          aria-current="page"
+          class="nav-link"
+          routerLink="/members"
+          >Members</a
+        >
+      </li>
+      <li>
+        <a
+          [routerLinkActive]="'active'"
+          aria-current="page"
+          class="nav-link"
+          routerLink="/routes"
+          >Routes</a
+        >
+      </li>
+    </ul>
   </div>
 </nav>
-
 <router-outlet></router-outlet>
-<!--<button mat-button [matMenuTriggerFor]="menu">Menu</button>-->
-<!--<mat-menu #menu="matMenu">-->
-<!--  <button mat-menu-item>Item 1</button>-->
-<!--  <button mat-menu-item>Item 2</button>-->
-<!--</mat-menu>-->
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index a30ca4c798ea314d3d58cb440a639b9bb1b4bac2..f359eeb6a116219ce9fc09917b0a6ced99901702 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,7 +1,7 @@
 nav {
-  color: rgba(5, 20, 20, 0.7);
   height: 60px;
   width: 100%;
+  background-color: rgba(40, 42, 53, 1);
   display: flex;
   justify-content: space-between;
   margin-bottom: 25px;
@@ -10,7 +10,7 @@ nav {
 
   .headline {
     width: 20%;
-    padding-left: 20px;
+    padding-left: 15px;
     padding-top: 15px;
     display: flex;
     justify-content: left;
@@ -18,6 +18,26 @@ nav {
 
     h1 {
       font-size: 1.3rem;
+      color: white;
+    }
+
+    mat-icon {
+      color: white;
+      margin-top: 2.7px;
+      margin-right: 10px;
+    }
+  }
+
+  .headline:active {
+    color: darkred;
+
+    h1 {
+      font-size: 1.3rem;
+      color: darkred;
+    }
+
+    mat-icon {
+      color: darkred;
     }
   }
 
@@ -30,30 +50,24 @@ nav {
     padding: 0;
 
     li {
-      display: flex;
-      align-items: center;
-      justify-content: center;
       width: 50%;
       height: 100%;
-      text-align: center;
       text-decoration: none;
 
       a {
+        color: white;
+        text-align:center;
+        display:flex;
+        align-items: center;
+        justify-content: center;
         text-decoration: none;
         font-size: 1.3rem;
+        width: 100%;
+        height: 100%;
       }
     }
-
-    li:hover {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: aliceblue;
-      width: 50%;
-      height: 100%;
-      text-align: center;
-      text-decoration: none;
-    }
   }
 }
 
+
+
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 99eca01c297798708fd068ba44b7f2ab388b66ba..e194dbf21481f413fe3c99bad7d1d3f0d8d6448f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,13 +1,11 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatMenuModule} from '@angular/material/menu';
 import { MembersListComponent } from './components/members/members-list.component';
-import { RoutesComponent } from './components/routes/routes.component'
-import {FormsModule} from "@angular/forms";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {MatTableModule} from "@angular/material/table";
 import {HttpClientModule} from "@angular/common/http";
 import {MatSliderModule} from "@angular/material/slider";
@@ -17,12 +15,23 @@ import {MatFormFieldModule} from "@angular/material/form-field";
 import {MatInputModule} from "@angular/material/input";
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from "@angular/material/icon";
+import { MatListModule } from '@angular/material/list';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatSelectModule } from '@angular/material/select';
+import {RoutesComponent} from "./components/routes/routes.component";
+import {RouteComponent} from "./components/routes/route/route.component";
+import {AddRouteFormComponent} from "./components/routes/route/add-route-form/add-route-form.component";
+import {RouteDetailPageComponent} from "./components/routes/route/route-detail-page/route-detail-page.component";
 
 @NgModule({
   declarations: [
     AppComponent,
     MembersListComponent,
-    RoutesComponent
+    RoutesComponent,
+    RouteComponent,
+    AddRouteFormComponent,
+    RouteDetailPageComponent,
   ],
   imports: [
     BrowserModule,
@@ -38,7 +47,12 @@ import {MatIconModule} from "@angular/material/icon";
     HttpClientModule,
     MatSliderModule,
     MatButtonModule,
-    MatIconModule
+    MatIconModule,
+    MatListModule,
+    MatCardModule,
+    MatDividerModule,
+    ReactiveFormsModule,
+    MatSelectModule,
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/components/routes/route.ts b/src/app/components/routes/route.ts
deleted file mode 100644
index 93835199a22d1935427e0e8fde15782f3dd9a781..0000000000000000000000000000000000000000
--- a/src/app/components/routes/route.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export interface Route {
-  id: number;
-  routeName: string;
-  difficultyLevel: string;
-}
diff --git a/src/app/components/routes/route/add-route-form/add-route-form.component.html b/src/app/components/routes/route/add-route-form/add-route-form.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..734d49cb6e807ff04896f19dd52262153def15e3
--- /dev/null
+++ b/src/app/components/routes/route/add-route-form/add-route-form.component.html
@@ -0,0 +1,53 @@
+<h2>Add Route</h2>
+<mat-divider></mat-divider>
+<form [formGroup]="addRouteForm">
+  <mat-form-field appearance="fill">
+    <mat-label>Route name</mat-label>
+    <input formControlName="routeName" matInput />
+  </mat-form-field>
+
+  <ng-container *ngIf="addRouteForm.controls['routeName'] as routeName">
+    <ng-container *ngIf="routeName.dirty || routeName.touched">
+      <p class="error" *ngIf='routeName.errors?.["required"]'>
+        Es muss ein RoutenName eingegeben werden
+      </p>
+      <!--          <p>{{ routeName.errors | json}}</p>-->
+      <p class="error" *ngIf='routeName.errors?.["minlength"]'>
+        Es muss müssen mindestens 3 Buchstaben eingegeben werden
+      </p>
+      <!--                    <p>{{ routeName.errors | json}}</p>-->
+    </ng-container>
+  </ng-container>
+
+  <mat-form-field appearance="fill">
+    <mat-label>Difficulty</mat-label>
+    <mat-select formControlName="difficultyLevel">
+      <mat-option *ngFor="let difficulty of Difficulty" [value]="difficulty">{{
+        difficulty
+      }}</mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <ng-container *ngIf="addRouteForm.controls['difficultyLevel'] as routeName">
+    <ng-container *ngIf="routeName.dirty || routeName.touched">
+      <ng-container *ngIf="addRouteForm.controls['routeName'] as errors">
+        <p class="error" *ngIf="routeName.errors">
+          Es muss ein Schwierigkeitsgrad eingegeben werden
+        </p>
+        <!--          <p>{{ routeName.errors | json}}</p>-->
+      </ng-container>
+    </ng-container>
+  </ng-container>
+
+  <button
+    mat-button
+    class="send-btn"
+    [disabled]="
+      !(addRouteForm.valid && (addRouteForm.dirty || addRouteForm.touched))
+    "
+    (click)="addRoute()"
+  >
+    Send
+  </button>
+  <button mat-button class="back-btn" routerLink="/routes">Back</button>
+</form>
diff --git a/src/app/components/routes/route/add-route-form/add-route-form.component.scss b/src/app/components/routes/route/add-route-form/add-route-form.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..34fbfb20f59a308e332d1e024f0d607bf2f6499f
--- /dev/null
+++ b/src/app/components/routes/route/add-route-form/add-route-form.component.scss
@@ -0,0 +1,44 @@
+h2 {
+  font-size: 1.3rem;
+  width: 60%;
+  height: 3%;
+  margin: 30px auto;
+  display: flex;
+  justify-content: center;
+  color: darkred;
+}
+
+mat-divider {
+  width: 30%;
+  display: flex;
+  margin: 0px auto 20px auto;
+  background-color: darkred;
+}
+
+.error {
+  color: red;
+}
+
+form {
+  font-size: 1.4rem;
+  border: 2px solid darkgrey;
+  background-color: white;
+  width: 20%;
+  margin: 30px auto;
+  padding: 20px;
+}
+
+form * {
+  display: flex;
+  justify-content: center;
+}
+
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.send-btn {
+  margin: 0 auto;
+}
diff --git a/src/app/components/routes/route/add-route-form/add-route-form.component.spec.ts b/src/app/components/routes/route/add-route-form/add-route-form.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3e1ec0f25cd30862325e3c9087a6506046c0a4d6
--- /dev/null
+++ b/src/app/components/routes/route/add-route-form/add-route-form.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddRouteFormComponent } from './add-route-form.component';
+
+describe('AddRouteFormComponent', () => {
+  let component: AddRouteFormComponent;
+  let fixture: ComponentFixture<AddRouteFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddRouteFormComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddRouteFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/routes/route/add-route-form/add-route-form.component.ts b/src/app/components/routes/route/add-route-form/add-route-form.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..50b996e85752b6a81d8d71d1ebaa9c4d0dd69dff
--- /dev/null
+++ b/src/app/components/routes/route/add-route-form/add-route-form.component.ts
@@ -0,0 +1,40 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import {RouteService} from "../../../../services/route.service";
+import {Route} from "../../../../models/route";
+
+@Component({
+  selector: 'app-add-route-form',
+  templateUrl: './add-route-form.component.html',
+  styleUrls: ['./add-route-form.component.scss'],
+})
+export class AddRouteFormComponent implements OnInit {
+  Difficulty: string[] = ['EASY', 'MEDIUM', 'HARD', 'HELL'];
+
+  public addRouteForm: FormGroup = new FormGroup({
+    routeName: new FormControl(
+      '',
+      [Validators.required, Validators.minLength(3)],
+      []
+    ),
+    difficultyLevel: new FormControl('', [Validators.required], []),
+  });
+
+  constructor(private router: Router, private routeService: RouteService) {
+    this.addRouteForm.valueChanges.subscribe();
+  }
+
+  ngOnInit(): void {}
+
+  addRoute() {
+    if (this.addRouteForm.valid) {
+      const route: Route = {
+        name: this.addRouteForm.get('routeName')?.value,
+        difficultyLevelEnum: this.addRouteForm.get('difficultyLevel')?.value,
+      };
+      this.routeService.addRoute(route).subscribe();
+      this.router.navigateByUrl('/routes');
+    }
+  }
+}
diff --git a/src/app/components/routes/route/route-detail-page/route-detail-page.component.html b/src/app/components/routes/route/route-detail-page/route-detail-page.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..ed40abe5a9d92862163f1e72ff0510fb65dc1440
--- /dev/null
+++ b/src/app/components/routes/route/route-detail-page/route-detail-page.component.html
@@ -0,0 +1,16 @@
+<div class="route-details-wrapper">
+  <h2>Route Details</h2>
+  <mat-divider></mat-divider>
+</div>
+
+<mat-card class="example-card">
+  <mat-card-title>{{ route?.name }}</mat-card-title>
+  <mat-divider></mat-divider>
+  <mat-card-subtitle>Difficulty level:</mat-card-subtitle>
+  <mat-card-content>
+    <p>{{ route?.difficultyLevelEnum }}</p>
+  </mat-card-content>
+  <mat-card-actions>
+    <button mat-button routerLink="/routes">Zurück!</button>
+  </mat-card-actions>
+</mat-card>
diff --git a/src/app/components/routes/route/route-detail-page/route-detail-page.component.scss b/src/app/components/routes/route/route-detail-page/route-detail-page.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c5c5739f6c32273073af0c85a86093dc18ef058b
--- /dev/null
+++ b/src/app/components/routes/route/route-detail-page/route-detail-page.component.scss
@@ -0,0 +1,51 @@
+h2 {
+  font-size: 1.3rem;
+  width: 60%;
+  margin: 30px auto;
+  display: flex;
+  justify-content: center;
+  color: darkred;
+}
+
+mat-divider {
+  width: 30%;
+  display: flex;
+  margin: 0px auto 20px auto;
+  background-color: darkred;
+}
+.example-card {
+  max-width: 500px;
+  margin: 20px auto;
+  padding: 20px;
+
+  button {
+    font-size: 1.2rem;
+    width: 100px;
+    height: 40px;
+    cursor: pointer;
+  }
+
+  mat-card-title {
+    font-size: 2rem;
+    margin-bottom: 40px;
+  }
+
+  mat-divider {
+    width: 95%;
+    background-color: darkgrey;
+    margin-left: 10px;
+    margin-top: -10px;
+  }
+
+  mat-card-subtitle {
+    font-size: 1.4rem;
+    margin-top: 50px;
+    margin-bottom: 30px;
+  }
+
+  p {
+    margin-bottom: 30px;
+    font-size: 1.2rem;
+  }
+}
+
diff --git a/src/app/components/routes/route/route-detail-page/route-detail-page.component.spec.ts b/src/app/components/routes/route/route-detail-page/route-detail-page.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0fcdcd8ba3d4cf7165a15a5c42dbd89a86979db3
--- /dev/null
+++ b/src/app/components/routes/route/route-detail-page/route-detail-page.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RouteDetailPageComponent } from './route-detail-page.component';
+
+describe('RouteDetailPageComponent', () => {
+  let component: RouteDetailPageComponent;
+  let fixture: ComponentFixture<RouteDetailPageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RouteDetailPageComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RouteDetailPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/routes/route/route-detail-page/route-detail-page.component.ts b/src/app/components/routes/route/route-detail-page/route-detail-page.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1a710cab853e730ae3c7ba3d3437bf77dad0dfcd
--- /dev/null
+++ b/src/app/components/routes/route/route-detail-page/route-detail-page.component.ts
@@ -0,0 +1,26 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import {Route} from "../../../../models/route";
+import {RouteService} from "../../../../services/route.service";
+
+@Component({
+  selector: 'app-route-detail-page',
+  templateUrl: './route-detail-page.component.html',
+  styleUrls: ['./route-detail-page.component.scss'],
+})
+export class RouteDetailPageComponent implements OnInit {
+  @Input() route!: Route;
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private routeService: RouteService
+  ) {}
+
+  ngOnInit(): void {
+    this.activatedRoute.params.subscribe((params) => {
+      this.routeService.getRouteById(params['id']).subscribe((result) => {
+        this.route = result;
+      });
+    });
+  }
+}
diff --git a/src/app/components/routes/route/route.component.html b/src/app/components/routes/route/route.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..fa165e13682ebff1eb76d0558473b6a78fee53d7
--- /dev/null
+++ b/src/app/components/routes/route/route.component.html
@@ -0,0 +1,17 @@
+<mat-card class="route">
+  <span class="name-wrapper" [routerLink]="['/routeDetails', route.id]">
+    <mat-icon>info</mat-icon>
+    <span>Route: {{ route?.name }}</span>
+  </span>
+  <!--  Difficulty Level: {{ route.difficultyLevel }}-->
+  <span class="delete-wrapper">
+    <button
+      mat-raised-button
+      color="warn"
+      class="delete-btn"
+      (click)="deleteRoute(route)"
+    >
+      DELETE
+    </button>
+  </span>
+</mat-card>
diff --git a/src/app/components/routes/route/route.component.scss b/src/app/components/routes/route/route.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b1466bbd8d9ee7d704084c50f4d46caf9959f667
--- /dev/null
+++ b/src/app/components/routes/route/route.component.scss
@@ -0,0 +1,41 @@
+.route {
+  font-size: 1.1rem;
+  margin: 20px auto;
+  height: 45px;
+  width: 900px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.delete-btn {
+  width: 100px;
+  height: 38px;
+  cursor: pointer;
+}
+
+.delete-wrapper {
+  height: 100%;
+  display: flex;
+  align-content: center;
+}
+
+mat-icon {
+  cursor: pointer;
+}
+
+.name-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  span {
+    margin-left: 13px;
+    font-size: 1.5rem;
+  }
+}
+
+mat-list {
+  dsiplay: flex;
+}
diff --git a/src/app/components/routes/route/route.component.spec.ts b/src/app/components/routes/route/route.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e7ca7c31b7f2c9fc52b4a130cd8db8c78edaa1ac
--- /dev/null
+++ b/src/app/components/routes/route/route.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RouteComponent } from './route.component';
+
+describe('RouteComponent', () => {
+  let component: RouteComponent;
+  let fixture: ComponentFixture<RouteComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RouteComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(RouteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/routes/route/route.component.ts b/src/app/components/routes/route/route.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..46f94ad231ded097f7042c736f2326c682fe1e5b
--- /dev/null
+++ b/src/app/components/routes/route/route.component.ts
@@ -0,0 +1,23 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import {Route} from "../../../models/route";
+import {RouteService} from "../../../services/route.service";
+
+@Component({
+  selector: 'app-route',
+  templateUrl: './route.component.html',
+  styleUrls: ['./route.component.scss'],
+})
+export class RouteComponent implements OnInit {
+  @Input() route!: Route;
+
+  constructor(private router: Router, private routeService: RouteService) {}
+
+  ngOnInit(): void {}
+
+  deleteRoute(route: Route): void {
+    this.routeService.deleteRoute(route.id).subscribe();
+    // this.routeService.deleteRoute(route);
+    // this.router.navigateByUrl('/routes');
+  }
+}
diff --git a/src/app/components/routes/routes.component.html b/src/app/components/routes/routes.component.html
index a00059ca9fccc0613e4caf1b262e7732f3cf8dd1..972065452009ebb4e4b9897b22eb824bb968a76f 100644
--- a/src/app/components/routes/routes.component.html
+++ b/src/app/components/routes/routes.component.html
@@ -1,6 +1,8 @@
-<p>routes works!</p>
-<ul>
-  <li *ngFor="let route of routes">
-    <div>Route: {{ route.routeName }} | Difficulty Level: {{ route.difficultyLevel }}</div>
-  </li>
-</ul>
+<button mat-button class='add-route-btn' routerLink='/routesAddForm'>
+  Add +
+</button>
+<mat-list role='list'>
+  <mat-list-item *ngFor='let route of routes' role='listitem'>
+    <app-route [route]='route'></app-route>
+  </mat-list-item>
+</mat-list>
diff --git a/src/app/components/routes/routes.component.scss b/src/app/components/routes/routes.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0ec277b6904804a7bef22065cfb96c8d1621a77b 100644
--- a/src/app/components/routes/routes.component.scss
+++ b/src/app/components/routes/routes.component.scss
@@ -0,0 +1,22 @@
+mat-list * {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 60px auto;
+}
+
+button {
+  margin: 10px auto;
+  display: flex;
+  align-self: center;
+}
+
+.add-route-btn {
+  font-size: 1.3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 200px;
+  height: 50px;
+  cursor: pointer;
+}
diff --git a/src/app/components/routes/routes.component.ts b/src/app/components/routes/routes.component.ts
index 6980108472defd3fe58ced9772a895c7a938a5ab..520dc6c2bda6cffc6418b4542fa9536272694589 100644
--- a/src/app/components/routes/routes.component.ts
+++ b/src/app/components/routes/routes.component.ts
@@ -1,22 +1,26 @@
 import { Component, OnInit } from '@angular/core';
-import { Route } from './route'
+import { HttpErrorResponse } from '@angular/common/http';
+import {RouteService} from "../../services/route.service";
+import {Route} from "../../models/route";
 
 @Component({
   selector: 'app-routes',
   templateUrl: './routes.component.html',
-  styleUrls: ['./routes.component.scss']
+  styleUrls: ['./routes.component.scss'],
 })
 export class RoutesComponent implements OnInit {
-  routes : Route[] = [
-    {id: 1, routeName: 'höllenaufgang', difficultyLevel: 'hard'},
-    {id: 1, routeName: 'himmeltreppe', difficultyLevel: 'easy'},
-    {id: 1, routeName: 'funkyWeg', difficultyLevel: 'medium'},
-    {id: 1, routeName: 'ff', difficultyLevel: 'hard'},
-  ];
-
-  constructor() { }
+  routes: Route[] = [];
+  constructor(private routeService: RouteService) {}
 
   ngOnInit(): void {
+    this.routeService.getRoutes().subscribe(
+      (result) => {
+        this.routes = result;
+        console.log(this.routes);
+      },
+      (error: HttpErrorResponse) => {
+        alert(error.message);
+      }
+    );
   }
-
 }
diff --git a/src/app/models/route.ts b/src/app/models/route.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4f4d8cc5e8dc09520fe2daf289903c3353a0f86c
--- /dev/null
+++ b/src/app/models/route.ts
@@ -0,0 +1,5 @@
+export interface Route {
+  id?: number;
+  name: string;
+  difficultyLevelEnum: string;
+}
diff --git a/src/app/services/route.service.spec.ts b/src/app/services/route.service.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..521b710d69487cacb0fe160830093ebaaf46e443
--- /dev/null
+++ b/src/app/services/route.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { RouteService } from './route.service';
+
+describe('RouteService', () => {
+  let service: RouteService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(RouteService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/services/route.service.ts b/src/app/services/route.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f715bf980424987378ea372fa94e3b2ae5b10bf2
--- /dev/null
+++ b/src/app/services/route.service.ts
@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import { environment } from '../../environments/environment';
+import { Observable } from 'rxjs';
+import { Route } from '../models/route';
+import { HttpClient } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class RouteService {
+  private apiServerUrl = environment.apiServerUrl;
+
+  constructor(private http: HttpClient) {}
+
+  public getRoutes(): Observable<Route[]> {
+    return this.http.get<Route[]>(`${this.apiServerUrl}/climbingRoutes/all`);
+  }
+
+  public getRouteById(routeId: number): Observable<Route> {
+    return this.http.get<Route>(
+      `${this.apiServerUrl}/climbingRoute/${routeId}`
+    );
+  }
+
+  public addRoute(route: Route): Observable<Route> {
+    return this.http.post<Route>(
+      `${this.apiServerUrl}/climbingRoute/add`,
+      route
+    );
+  }
+
+  /*public updateRoute(routeId: number): Observable<void> {
+      return this.http.put<void>(`${this.apiServerUrl}/climbingRoute/${routeId}`);
+    }*/
+
+  public deleteRoute(routeId: number | undefined): Observable<void> {
+    return this.http.delete<void>(
+      `${this.apiServerUrl}/climbingRoute/${routeId}`
+    );
+  }
+}
diff --git a/src/assets/free-climber-young-man-climbing-artificial-boulder-indoors.png b/src/assets/free-climber-young-man-climbing-artificial-boulder-indoors.png
new file mode 100644
index 0000000000000000000000000000000000000000..28d56800ee64b2a8f8e91e419d86948c724317ba
Binary files /dev/null and b/src/assets/free-climber-young-man-climbing-artificial-boulder-indoors.png differ
diff --git a/src/index.html b/src/index.html
index 026a8e144559b91b64fedd0ab8c06f76f041a134..bb6b443c75df5496bd94276c0830e33d1a5d0e4e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,8 +6,6 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body class="mat-typography">
diff --git a/src/styles.scss b/src/styles.scss
index 24b2054a4787629c2d73c522a74087faeeeaeb66..233abbe5561d4af7ae7215ec43c476994f57aea1 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -2,3 +2,7 @@
 
 html, body { height: 100%; margin: 20px; box-sizing: border-box; font-size: 16px}
 body { margin: 0; font-family: 'Segoe UI', Roboto, "Helvetica Neue", sans-serif; }
+
+.active {
+  background-color: darkred;
+}
diff --git a/tsconfig.json b/tsconfig.json
index ff06eae10c542e0ecce4498ce0caef544483f0af..5b19cbedc8cd6184788e7ecf67e661d0a85bcc01 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,6 @@
 /* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
+  "strictPropertyInitialization": false,
   "compileOnSave": false,
   "compilerOptions": {
     "baseUrl": "./",