diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index da54312..b69c37f 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -40,8 +40,9 @@ export const routes: Routes = [
     canActivate: [AuthGuard],
   },
   {
-    path: "mitarbeiterdetails",
+    path: "mitarbeiterdetails/:id",
     component: EmployeeDetailComponent,
+    canActivate: [AuthGuard],
   },
   {
     path: "qualifikationbearbeiten/:id",
diff --git a/src/app/components/employee-detail/employee-detail.component.html b/src/app/components/employee-detail/employee-detail.component.html
index 4ad8edc..30fe658 100644
--- a/src/app/components/employee-detail/employee-detail.component.html
+++ b/src/app/components/employee-detail/employee-detail.component.html
@@ -1,25 +1,25 @@
 <div class="d-flex flex-col" style="height: 100%;">
   <app-navigation-bar></app-navigation-bar>
   <div class="p-3" style="width: 100%;">
-    <a href="" class="btn btn-primary">Zurück</a>
+    <button class="btn btn-primary" (click)="goToEmployeePage()">Zurück</button>
     <div class="row align-items-start pt-3">
       <div class="col">
-        <h1>Name des Mitarbeiters</h1>
-        <p><strong>Straße: </strong>Straße des Benutzers</p>
-        <p><strong>Postleitzahl: </strong>Postleitzahl des Benutzers</p>
-        <p><strong>Stadt: </strong>Stadt des Benutzers</p>
-        <p><strong>Telefonnummer: </strong>Telefonnummer des Benutzers</p>
-        <button class="btn btn-danger">Löschen</button>
-        <button class="ms-3 btn btn-primary">Bearbeiten</button>
+        <h1>{{ employee.firstName }} {{ employee.lastName }} </h1>
+        <p><strong>Straße: </strong>{{ employee.street }}</p>
+        <p><strong>Postleitzahl: </strong>{{ employee.postcode }}</p>
+        <p><strong>Stadt: </strong>{{ employee.city }}</p>
+        <p><strong>Telefonnummer: </strong>{{ employee.phone }}s</p>
+        <button class="btn btn-danger" (click)="deleteEmployee(currentId)">Löschen</button>
+        <button class="ms-3 btn btn-primary" (click)="editEmployee(currentId)">Bearbeiten</button>
+
       </div>
       <div class="col">
         <h2>Qualifikationen</h2>
         <ul class="list-group" style="width: fit-content;">
-          <li class="list-group-item">Qualifikation 1</li>
-          <li class="list-group-item">Qualifikation 2</li>
-          <li class="list-group-item">Qualifikation 3</li>
-          <li class="list-group-item">Qualifikation 4</li>
-          <li class="list-group-item">Qualifikation 5</li>
+          @for(skill of skillSet; track skill) {
+          <li class="list-group-item">{{ skill }}</li>
+          }
+
         </ul>
       </div>
     </div>
diff --git a/src/app/components/employee-detail/employee-detail.component.ts b/src/app/components/employee-detail/employee-detail.component.ts
index 9fe85a8..6b6dfd2 100644
--- a/src/app/components/employee-detail/employee-detail.component.ts
+++ b/src/app/components/employee-detail/employee-detail.component.ts
@@ -1,5 +1,11 @@
-import { Component } from '@angular/core';
-import { NavigationBarComponent } from '../navigation-bar/navigation-bar.component';
+import {Component} from '@angular/core';
+import {NavigationBarComponent} from '../navigation-bar/navigation-bar.component';
+import {EmployeeNameAndSkillDataDTO, EmployeeResponseDTO} from "../../models/mitarbeiter";
+import {EmployeeService} from "../../service/employee.service";
+import {ActivatedRoute, Router} from "@angular/router";
+import {Observable} from "rxjs";
+import {QualificationGetDTO} from "../../models/skill";
+import {SkillService} from "../../service/skill.service";
 
 @Component({
   selector: 'app-employee-detail',
@@ -9,5 +15,31 @@ import { NavigationBarComponent } from '../navigation-bar/navigation-bar.compone
   styleUrl: './employee-detail.component.css'
 })
 export class EmployeeDetailComponent {
+  employee!: EmployeeResponseDTO;
+  skillSet: string[] = [];
+  currentId: number = 0;
 
+  constructor(private employeeService: EmployeeService, private router: Router, private route: ActivatedRoute, private skillService: SkillService) {
+    this.currentId = this.route.snapshot.params['id'];
+    this.employeeService.getEmployeeById(this.route.snapshot.params['id']).subscribe(employee => {
+      this.employee = employee;
+      this.skillSet = this.employee.skillSet?.map(skill => skill.skill) || [];
+    });
+  }
+
+  editEmployee(id: number) {
+    this.router.navigate([`/mitarbeiterbearbeiten/${id}`]);
+  }
+
+  goToEmployeePage(){
+    this.router.navigate(['mitarbeiter']);
+  }
+
+  deleteEmployee(id: number) {
+    this.employeeService.deleteEmployee(id);
+    this.router.navigate([`mitarbeiter`]);
+  }
+
+
+  protected readonly EmployeeService = EmployeeService;
 }
diff --git a/src/app/components/mitarbeiter-erstellen/mitarbeiter-erstellen.component.ts b/src/app/components/mitarbeiter-erstellen/mitarbeiter-erstellen.component.ts
index c21bc4e..4ff3a0e 100644
--- a/src/app/components/mitarbeiter-erstellen/mitarbeiter-erstellen.component.ts
+++ b/src/app/components/mitarbeiter-erstellen/mitarbeiter-erstellen.component.ts
@@ -17,6 +17,7 @@ export class MitarbeiterErstellenComponent {
   constructor(private employeeService: EmployeeService, private route: ActivatedRoute, private router: Router) { }
 
   submitted(mitarbeiter: EmployeeResponseDTO) {
+    console.log(mitarbeiter)
     this.employeeService.createEmployee(mitarbeiter);
     this.returnToEmployeeOverview();
   }
diff --git a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts
index f9ed6af..8e6e536 100644
--- a/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts
+++ b/src/app/components/mitarbeiter-form/mitarbeiter-form.component.ts
@@ -11,7 +11,7 @@ import { Observable, of } from 'rxjs';
 @Component({
   selector: 'app-mitarbeiter-form',
   standalone: true,
-  imports: [MitarbeiterFormComponent, ReactiveFormsModule, NgFor, AsyncPipe],
+  imports: [ReactiveFormsModule, NgFor, AsyncPipe],
   templateUrl: './mitarbeiter-form.component.html',
   styleUrl: './mitarbeiter-form.component.css'
 })
@@ -24,9 +24,7 @@ export class MitarbeiterFormComponent {
   public hasAllSkills: boolean = false;
   errorMessages: Record<string, string> = {};
 
-  constructor(public http: HttpClient, public router: Router, private skillService: SkillService) {
-
-  }
+  constructor(public http: HttpClient, public router: Router, private skillService: SkillService) {}
 
   returnToEmployeeOverview() {
     this.router.navigate(["mitarbeiter"]);
@@ -40,7 +38,7 @@ export class MitarbeiterFormComponent {
       postcode: new FormControl(this.mitarbeiter.postcode, [Validators.required, Validators.minLength(5), Validators.maxLength(5)]),
       city: new FormControl(this.mitarbeiter.city, Validators.required),
       phone: new FormControl(this.mitarbeiter.phone, [Validators.required, Validators.pattern('^[- +()0-9]+$')]),
-      newSkill: new FormControl(),
+      newSkill: new FormControl(null, Validators.required) // Added
     });
   }
 
@@ -88,6 +86,7 @@ export class MitarbeiterFormComponent {
       const newSkill = skills.filter(skill => skill.id == id)[0];
       this.mitarbeiter.skillSet?.push(newSkill);
       this.skillsChanged();
+      this.mitarbeiterForm.get("newSkill")?.reset(null); // Added
     });
   }
 
diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html
index 467faee..7dc65ab 100644
--- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html
+++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html
@@ -46,7 +46,7 @@
         <td>{{ employee.city }}</td>
         <td>{{ employee.phone }}</td>
         <td>
-          <button class="btn btn-primary me-2" (click)="editEmployee(employee.id)">Edit</button>
+          <button class="btn btn-primary me-2" (click)="goToEmployeeDetailPage(employee.id)">Details</button>
           <button class="btn btn-danger" (click)="deleteEmployee(employee.id)">Delete</button>
         </td>
       </tr>
diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts
index 8415072..dfc55f1 100644
--- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts
+++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts
@@ -17,7 +17,9 @@ export class MitarbeiterverwaltungViewComponent implements OnInit {
   employees: Array<EmployeeResponseDTO> = [];
   searchForm!: FormGroup;
 
-  constructor(private employeeService: EmployeeService, private router: Router) {}
+  constructor(private employeeService: EmployeeService, private router: Router) {
+    this.updateEmployees();
+  }
 
   submit() {
     const searchTerm = this.searchForm.get("search")?.value || '';
@@ -55,10 +57,18 @@ export class MitarbeiterverwaltungViewComponent implements OnInit {
     this.employees = this.employees.filter(employee => employee.id != id);
   }
 
+  goToEmployeeDetailPage(id: number){
+    this.router.navigate([`/mitarbeiterdetails/${id}`]);
+  }
+
+  updateEmployees() {
+    this.employeeService.getAllEmployees().subscribe(employees => this.employees = employees);
+  }
+
   ngOnInit(): void {
     this.searchForm = new FormGroup({
       search: new FormControl(''),
     });
-    this.employeeService.getAllEmployees().subscribe(employees => this.employees = employees);
+    this.updateEmployees();
   }
 }
diff --git a/src/app/service/skill.service.ts b/src/app/service/skill.service.ts
index d0321a2..cd2af5d 100644
--- a/src/app/service/skill.service.ts
+++ b/src/app/service/skill.service.ts
@@ -1,10 +1,10 @@
-import { HttpClient } from "@angular/common/http";
-import { Injectable } from "@angular/core";
-import { EmployeesForAQualificationDTO, QualificationGetDTO, QualificationPostDTO } from "../models/skill";
-import { Observable } from "rxjs";
-import { EmployeeNameDataDTO } from "../models/mitarbeiter";
-import { EmployeeService } from "./employee.service";
-import { Environment } from "../environments/environment";
+import {HttpClient} from "@angular/common/http";
+import {Injectable} from "@angular/core";
+import {EmployeesForAQualificationDTO, QualificationGetDTO, QualificationPostDTO} from "../models/skill";
+import {Observable} from "rxjs";
+import {EmployeeNameAndSkillDataDTO, EmployeeNameDataDTO} from "../models/mitarbeiter";
+import {EmployeeService} from "./employee.service";
+import {Environment} from "../environments/environment";
 
 @Injectable({
   providedIn: 'root'
@@ -47,4 +47,9 @@ export class SkillService {
   getEmployeesBySkill(id: number): Observable<EmployeesForAQualificationDTO> {
     return this.http.get<EmployeesForAQualificationDTO>(`${SkillService.BASE_URL}/qualifications/${id}/employees`);
   }
+
+  getSkillsOfEmployee(id: number): Observable<EmployeeNameAndSkillDataDTO> {
+    return this.http.get<EmployeeNameAndSkillDataDTO>(`${SkillService.BASE_URL}/employees/${id}/qualifications`);
+  }
+
 }