diff --git a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html
index 4bc03b5..f3d0e7d 100644
--- a/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html
+++ b/src/app/components/mitarbeiter-bearbeiten-view/mitarbeiter-bearbeiten-view.component.html
@@ -32,7 +32,7 @@
     <ul class="skill-list">
       <li>
         <span class="skill-name">Skill 1</span>
-          <button class="delete-skill-button">
+          <button class="delete-skill-button" (click)="deleteEmployee(employees.id)">>
             <img src="Delete-button.svg" alt="Delete">
           </button>
       </li>
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 ccf171e..3c0bdcd 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,4 +1,5 @@
 import { Component } from '@angular/core';
+import {EmployeeService} from "../../service/employee.service";
 
 @Component({
   selector: 'app-mitarbeiter-bearbeiten-view',
@@ -9,4 +10,23 @@ import { Component } from '@angular/core';
 })
 export class MitarbeiterBearbeitenViewComponent {
 
+  employees: any[] = [];
+
+  constructor(private employeeService: EmployeeService) {}
+
+  deleteEmployee(id: number): void {
+    if (confirm('Are you sure you want to delete this employee?')) {
+      this.employeeService.deleteEmployee(id).subscribe({
+        next: () => {
+          alert('Employee deleted successfully!');
+          // Optionally, reload or refresh the employee list here
+        },
+        error: (err) => {
+          console.error('Error deleting employee:', err);
+          alert('An error occurred while deleting the employee.');
+        },
+      });
+    }
+  }
+
 }
diff --git a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts
index 3a8f197..0312822 100644
--- a/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts
+++ b/src/app/components/mitarbeiterverwaltung-view/mitarbeiterverwaltung-view.component.ts
@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import {EmployeeService} from "../../service/employee.service";
 
 @Component({
   selector: 'app-mitarbeiterverwaltung-view',
diff --git a/src/app/service/employee.service.ts b/src/app/service/employee.service.ts
new file mode 100644
index 0000000..b0e10bc
--- /dev/null
+++ b/src/app/service/employee.service.ts
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class EmployeeService {
+  private baseUrl = 'http://examplewebsite.com'; // Replace with your actual API base URL
+
+  constructor(private http: HttpClient) {}
+
+  /**
+   * Deletes an employee by ID.
+   * @param id - The ID of the employee to delete.
+   * @returns An Observable for the delete operation.
+   */
+  deleteEmployee(id: number): Observable<void> {
+    const url = `${this.baseUrl}/employees/${id}`;
+    return this.http.delete<void>(url);
+  }
+}