diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 04ea690..18c70af 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,10 +1,25 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import {Component} from '@angular/core';
+import {RouterOutlet} from '@angular/router';
+import {LoginViewComponent} from "./components/login-view/login-view.component";
+import {
+  MitarbeiterverwaltungViewComponent
+} from "./components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component";
+
+import {NavigationBarComponent} from './components/navigation-bar/navigation-bar.component';
+import {EmployeeDetailComponent} from './components/employee-detail/employee-detail.component';
+import {
+  MitarbeiterBearbeitenViewComponent
+} from "./components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component";
+import {
+  QualifikatonBearbeitenViewComponent
+} from "./components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component";
+import {QualifikatonDetailComponent} from "./components/qualifikaton-detail/qualifikaton-detail.component";
+
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [RouterOutlet, NavigationBarComponent, EmployeeDetailComponent, LoginViewComponent, MitarbeiterverwaltungViewComponent, MitarbeiterBearbeitenViewComponent, QualifikatonBearbeitenViewComponent, QualifikatonDetailComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index fff369b..93c626a 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -3,8 +3,9 @@ import { LoginViewComponent } from "./components/login-view/login-view.component
 import { MitarbeiterverwaltungViewComponent } from "./components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component";
 import { EmployeeDetailComponent } from "./components/employee-detail/employee-detail.component";
 import { QualifikatonBearbeitenViewComponent } from "./components/qualifikaton-bearbeiten-view/qualifikaton-bearbeiten-view.component";
-import { MitarbeiterBearbeitenViewComponent } from "./components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component";
+import { KeycloakAuthGuard } from "keycloak-angular";
 import { AuthGuard } from "./service/auth.service";
+import { MitarbeiterBearbeitenViewComponent } from "./components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component";
 
 export const routes: Routes = [
   {
diff --git a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts
index cc4c5f6..253070e 100644
--- a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts
+++ b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.ts
@@ -1,8 +1,8 @@
 import { Component } from '@angular/core';
 import { MitarbeiterFormComponent } from '../mitarbeiter-form/mitarbeiter-form.component';
 import { EmployeeResponseDTO } from '../../models/mitarbeiter';
-import { ActivatedRoute, Router } from '@angular/router';
 import { EmployeeService } from '../../service/employee.service';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'app-mitarbeiter-bearbeiten-view',
diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.css b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.css
index 3d3b957..6f010a4 100644
--- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.css
+++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.css
@@ -19,7 +19,7 @@ h1 {
 
 .search-bar {
   display: flex;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
   align-items: center;
 }
 
diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html
index 7823733..baea199 100644
--- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html
+++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.html
@@ -1,57 +1,49 @@
 <div class="container">
   <div class="header">
     <div class="dropdown position-absolute top-0 end-0 m-3">
-      <button class="btn align-items-center d-flex" type="button" id="userDropdown" data-bs-toggle="dropdown"
-        aria-expanded="false">
-        <img src="user.svg" alt="User Icon" class="rounded-circle" style="width: 30px; height: 30px;">
+      <button
+        class="btn align-items-center d-flex"
+        type="button"
+        id="userDropdown"
+        data-bs-toggle="dropdown"
+        aria-expanded="false"
+      >
+        <img
+          src="user.svg"
+          alt="User Icon"
+          class="rounded-circle"
+          style="width: 30px; height: 30px;"
+        >
       </button>
       <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="userDropdown">
-        <li><a class="dropdown-item" href="/logout">Log out</a></li>
+        <li>
+          <a class="dropdown-item" href="/logout">Log out</a>
+        </li>
       </ul>
     </div>
     <h1>Employees</h1>
   </div>
-
   <div class="header-actions">
-    <form [formGroup]="searchForm">
-      <div class="search-bar">
-        <input type="text" placeholder="Search employee" formControlName="search">
-        <button (click)="submit()">Search</button>
-      </div>
-      <p class="text-body-tertiary">Search for a propertiy of an Employee. eg. First Name</p>
-    </form>
+    <div class="search-bar">
+      <input type="text" placeholder="Search employee">
+      <button>Search</button>
+    </div>
     <button class="add-button">Add employee</button>
   </div>
 
   <table class="employee-table">
     <thead>
-      <tr>
-        <th><span class="sortable">First Name</span></th>
-        <th><span class="sortable">Last Name</span></th>
-        <th>Street</th>
-        <th>Postcode</th>
-        <th>City</th>
-        <th>Phone</th>
-        <th>Actions</th>
-      </tr>
+    <tr>
+      <th><span class="sortable">First Name</span></th>
+      <th><span class="sortable">Last Name</span></th>
+      <th>Street</th>
+      <th>Postcode</th>
+      <th>City</th>
+      <th>Phone</th>
+      <th>Actions</th>
+    </tr>
     </thead>
     <tbody>
-      @if (employees) {
-      @for (employee of employees; track employee) {
-      <tr>
-        <td>{{ employee.firstName }}</td>
-        <td>{{ employee.lastName }}</td>
-        <td>{{ employee.street }}</td>
-        <td>{{ employee.postcode }}</td>
-        <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-danger" (click)="deleteEmployee(employee.id)">Delete</button>
-        </td>
-      </tr>
-      }
-      }
     </tbody>
   </table>
 </div>
diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts
index afcdff1..3a8f197 100644
--- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts
+++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts
@@ -1,60 +1,12 @@
-import { Component, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { Observable, of } from 'rxjs';
-import { EmployeeResponseDTO } from '../../models/mitarbeiter';
-import { EmployeeService } from '../../service/employee.service';
-import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-mitarbeiterverwaltung-view',
-  templateUrl: './mitarbeiterverwaltung-view.component.html',
-  styleUrls: ['./mitarbeiterverwaltung-view.component.css'],
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule]
+  imports: [],
+  templateUrl: './mitarbeiterverwaltung-view.component.html',
+  styleUrl: './mitarbeiterverwaltung-view.component.css'
 })
-export class MitarbeiterverwaltungViewComponent implements OnInit {
-  employees: Array<EmployeeResponseDTO> = [];
-  searchForm!: FormGroup;
+export class MitarbeiterverwaltungViewComponent {
 
-  constructor(private employeeService: EmployeeService, private router: Router) {}
-
-  submit() {
-    const searchTerm = this.searchForm.get("search")?.value || '';
-
-    this.employeeService.getAllEmployees().subscribe(employees => {
-      let foundEmployees: Array<EmployeeResponseDTO> = [];
-      for (const employee of employees) {
-        if (
-          employee.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          employee.lastName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          employee.street.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          employee.postcode.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          employee.city.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          employee.phone.toLowerCase().includes(searchTerm.toLowerCase()) ||
-          searchTerm == ''
-        ) {
-          foundEmployees.push(employee);
-        }
-      }
-
-      this.employees = foundEmployees;
-    });
-  }
-
-  editEmployee(id: number) {
-    this.router.navigate([`/mitarbeiterbearbeiten/${id}`]);
-  }
-
-  deleteEmployee(id: number) {
-    this.employeeService.deleteEmployee(id);
-    this.employees = this.employees.filter(employee => employee.id != id);
-  }
-
-  ngOnInit(): void {
-    this.searchForm = new FormGroup({
-      search: new FormControl(''),
-    });
-    this.employeeService.getAllEmployees().subscribe(employees => this.employees = employees);
-  }
 }
diff --git a/src/app/service/employee.service.ts b/src/app/service/employee.service.ts
index e87bcf5..a8a4d38 100644
--- a/src/app/service/employee.service.ts
+++ b/src/app/service/employee.service.ts
@@ -31,9 +31,6 @@ export class EmployeeService {
     return this.http.get<Array<EmployeeResponseDTO>>(`${SkillService.BASE_URL}/employees`);
   }
 
-  deleteEmployee(id: number) {
-    this.http.delete(`${SkillService.BASE_URL}/employees/${id}`).subscribe();
-  }
 
   getEmployeeById(id: number): Observable<EmployeeResponseDTO> {
     return this.http.get<EmployeeResponseDTO>(`${SkillService.BASE_URL}/employees/${id}`);
diff --git a/src/main.ts b/src/main.ts
index c684fa1..35b00f3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,6 @@
-import { HttpClientModule } from '@angular/common/http';
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent , appConfig,)
+bootstrapApplication(AppComponent, appConfig)
   .catch((err) => console.error(err));