diff --git a/src/app/Interfaces/qualifications.ts b/src/app/Interfaces/qualifications.ts
new file mode 100644
index 0000000..f6d89c5
--- /dev/null
+++ b/src/app/Interfaces/qualifications.ts
@@ -0,0 +1,4 @@
+export interface Qualifications {
+    id: number;
+    title: string;
+}
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 087641c..dc02991 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,4 +1,8 @@
 import {Routes} from '@angular/router';
 import {DashboardComponent} from '@app/views/dashboard/dashboard.component';
+import {QualificationsComponent} from "@app/qualifications/qualifications.component";
 
-export const routes: Routes = [{path: '', component: DashboardComponent, title: 'Home'}];
+export const routes: Routes = [
+    {path: 'qualifications', component: QualificationsComponent, title: "qualifications"},
+    {path: '', component: DashboardComponent, title: 'Home'}
+];
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 3e08782..5fc8908 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -19,6 +19,7 @@ import {AuthService} from '@core/auth/auth.service';
         TitleCasePipe,
     ],
     templateUrl: './header.component.html',
+    standalone: true,
     styleUrl: './header.component.scss'
 })
 export class HeaderComponent implements OnInit {
diff --git a/src/app/qualifications/qualifications.component.html b/src/app/qualifications/qualifications.component.html
new file mode 100644
index 0000000..a4aa577
--- /dev/null
+++ b/src/app/qualifications/qualifications.component.html
@@ -0,0 +1,74 @@
+<div class="headbar">
+    <h1>
+        Qualification-List
+    </h1>
+    <form>
+        <div class="search-container">
+            <i class="material-icons searchIcon">search</i>
+            <input type="text" placeholder="Search..." class="search-input" />
+        </div>
+    </form>
+</div>
+
+
+
+
+<table class="table table-striped table-hover">
+    <thead>
+    <tr>
+        <th>Id</th>
+        <th>Bezeichnung</th>
+    </tr>
+    </thead>
+    <tbody>
+        @for(qualification of qualificationModel; track qualificationModel){
+            <tr>
+                <td>
+                    <input type="checkbox">
+                </td>
+                <td>{{qualification.id}}</td>
+                <td>{{qualification.title}}</td>
+                <td>
+                    <button class="material-icons" (click)="delete(qualification)">
+                        delete
+                    </button>
+                </td>
+            </tr>
+        }
+    </tbody>
+</table>
+
+
+<div>
+    <h3>Qualification hinzufügen</h3>
+
+    <form name="newTodoForm" #newTodoForm="ngForm">
+
+        <div class="mb-2">
+            <label for="newTodoTitle"></label>
+            Todo Name:
+            <input class="formControl"
+                   id="newTodoTitle"
+                   name="newTodoTitle"
+                   type="text"
+                   required
+            >
+        </div>
+
+        <div class="mb-2">
+            <label for="newTodoCategory"></label>
+            Kategorie:
+            <input class="formControl"
+                   id="newTodoCategory"
+                   name="newTodoCategory"
+                   type="text"
+                   required
+            >
+        </div>
+
+        <button type="submit"
+                class="btn btn-primary"
+                (click)="save(); newTodoForm.resetForm()"
+                [disabled]="!newTodoForm.valid">absenden</button>
+    </form>
+</div>
diff --git a/src/app/qualifications/qualifications.component.scss b/src/app/qualifications/qualifications.component.scss
new file mode 100644
index 0000000..32d556d
--- /dev/null
+++ b/src/app/qualifications/qualifications.component.scss
@@ -0,0 +1,25 @@
+.search-container{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1.5px solid black;
+  background: lightgray;
+  margin-top: 0.5rem;
+
+}
+.headbar{
+  display: flex;
+  justify-content: space-between;
+  margin-left: 7rem;
+  margin-right: 3rem;
+  margin-top: 1rem;
+}
+.search-input{
+  border: none;
+  padding: 6px;
+  font-size: 17px;
+}
+.searchIcon{
+  margin-right: 0.5rem;
+  margin-left: 0.5rem;
+}
diff --git a/src/app/qualifications/qualifications.component.spec.ts b/src/app/qualifications/qualifications.component.spec.ts
new file mode 100644
index 0000000..1808d67
--- /dev/null
+++ b/src/app/qualifications/qualifications.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { QualificationsComponent } from './qualifications.component';
+
+describe('QualificationsComponent', () => {
+  let component: QualificationsComponent;
+  let fixture: ComponentFixture<QualificationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [QualificationsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(QualificationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/qualifications/qualifications.component.ts b/src/app/qualifications/qualifications.component.ts
new file mode 100644
index 0000000..cfc334d
--- /dev/null
+++ b/src/app/qualifications/qualifications.component.ts
@@ -0,0 +1,34 @@
+import {Component, Input} from '@angular/core';
+import {FormsModule} from "@angular/forms";
+import {Qualifications} from "@app/Interfaces/qualifications";
+import {QualificationService} from "@app/services/qualification.service";
+
+@Component({
+  selector: 'app-qualifications',
+  imports: [
+    FormsModule
+  ],
+  templateUrl: './qualifications.component.html',
+  standalone: true,
+  styleUrl: './qualifications.component.scss'
+})
+export class QualificationsComponent {
+  qualificationModel: Qualifications[] | undefined;
+  options: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  }
+
+  constructor(private qualificationService: QualificationService) {
+    this.qualificationModel=this.qualificationService.qualifications
+  }
+  save() {
+
+  }
+
+  delete(qualification: Qualifications) {
+    this.qualificationService.deleteQualification(qualification)
+
+  }
+}
diff --git a/src/app/services/qualification.service.spec.ts b/src/app/services/qualification.service.spec.ts
new file mode 100644
index 0000000..2a878e3
--- /dev/null
+++ b/src/app/services/qualification.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { QualificationService } from './qualification.service';
+
+describe('QualificationService', () => {
+  let service: QualificationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(QualificationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/services/qualification.service.ts b/src/app/services/qualification.service.ts
new file mode 100644
index 0000000..6d31274
--- /dev/null
+++ b/src/app/services/qualification.service.ts
@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import {Qualifications} from "@app/Interfaces/qualifications";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class QualificationService {
+  qualifications = [
+    {
+      id: 15,
+      title: 'Java'},
+    {
+      id: 16,
+      title: 'Angular'},
+    {
+      id: 17,
+      title: 'CSS'},
+    {
+      id: 18,
+      title: 'Windows'},
+    {
+      id: 19,
+      title: 'Linux'},
+    {
+      id: 20,
+      title: 'Yes'},
+  ]
+
+  constructor() { }
+  deleteQualification(qualifications: Qualifications){
+    this.qualifications = this.qualifications.filter(t => t!== qualifications)
+  }
+}