diff --git a/src/app/app.component.html b/src/app/app.component.html
index 473c2c363fef276b26182be77d03e2f16cc0ade8..1e157542a676000642a2a0d17eda16eb0c85cc41 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,29 +1,2 @@
-<nav>
-  <a aria-current="page" class="headline" routerLink="/">
-    <mat-icon>home</mat-icon>
-    <h1>Kletterhalle</h1>
-  </a>
-  <div>
-    <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>
+<app-header></app-header>
 <router-outlet></router-outlet>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index a524df549117f147e42287d920db3b3d0562c437..d86e055b44d84a5673fa48acefe80aa6ffa74e7f 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -27,6 +27,7 @@ import { MemberDetailsComponent } from './components/members/member-table/member
 import { AddMemberFormComponent } from './components/members/member-table/add-member-form/add-member-form.component';
 import {MatDialogModule} from "@angular/material/dialog";
 import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import { HeaderComponent } from './header/header.component';
 
 @NgModule({
   declarations: [
@@ -38,6 +39,7 @@ import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
     RouteDetailPageComponent,
     MemberDetailsComponent,
     AddMemberFormComponent,
+    HeaderComponent,
   ],
     imports: [
         BrowserModule,
diff --git a/src/app/components/members/member-table/add-member-form/add-member-form.component.html b/src/app/components/members/member-table/add-member-form/add-member-form.component.html
index 2358d5c0e5bd93409d00d6f7d77e4691e308c418..b6f55101e1e89e8e797120b600d1e991468f6047 100644
--- a/src/app/components/members/member-table/add-member-form/add-member-form.component.html
+++ b/src/app/components/members/member-table/add-member-form/add-member-form.component.html
@@ -1,6 +1,6 @@
 <h2 mat-dialog-title>Add Member Form</h2>
 <ng-container class="add-member-form">
-  <form class="example-container" [formGroup]="addMemberForm" (ngSubmit)="onSubmit()">
+  <form novalidate class="example-container" [formGroup]="addMemberForm" (ngSubmit)="onSubmit()">
     <mat-form-field class="example-full-width" appearance="fill">
       <mat-label>Firstname</mat-label>
       <input matInput class="form-control" placeholder="Firstname" formControlName="firstName">
@@ -10,6 +10,7 @@
       <mat-label>Lastname</mat-label>
       <input matInput class="form-control" placeholder="Lastname" formControlName="lastName">
     </mat-form-field>
+      <br>
 
     <div formGroupName="addressDto">
       <mat-form-field class="example-full-width" appearance="fill">
@@ -33,3 +34,27 @@
 </ng-container>
 
 
+<!--<form [formGroup]="addMemberForm" >-->
+<!--  <div class="form-group">-->
+<!--    <label for="Firstname">Firstname</label>-->
+<!--    <input type="text" id="Firstname" formControlName="firstName" class="form-control">-->
+<!--  </div>-->
+<!--  <div class="form-group">-->
+<!--    <label for="Lastname">Firstname</label>-->
+<!--    <input type="text" id="Lastname" formControlName="lastName" class="form-control">-->
+<!--  </div>-->
+<!--  <div formGroupName="addressDto">-->
+<!--    <div class="form-group">-->
+<!--      <label for="street">Username</label>-->
+<!--      <input type="text" id="street" value="street" formControlName="street" class="form-control">-->
+<!--    </div>-->
+<!--    <div class="form-group">-->
+<!--      <label for="HouseNumber">Username</label>-->
+<!--      <input type="text" id="Housenumber" value="houseNumber" formControlName="houseNumber" class="form-control">-->
+<!--    </div>-->
+<!--    <div class="form-group">-->
+<!--      <label for="Postcode">Username</label>-->
+<!--      <input type="text" id="Postcode" value="postCode" formControlName="postCode" class="form-control">-->
+<!--    </div>-->
+<!--  </div>-->
+<!--</form>-->
diff --git a/src/app/components/members/member-table/add-member-form/add-member-form.component.ts b/src/app/components/members/member-table/add-member-form/add-member-form.component.ts
index 0ed443ac216da6625e7b72a9c1ee58c22e686d6f..6e6928331e3d94a6c771631455beec1da749abf5 100644
--- a/src/app/components/members/member-table/add-member-form/add-member-form.component.ts
+++ b/src/app/components/members/member-table/add-member-form/add-member-form.component.ts
@@ -14,6 +14,7 @@ import {Member} from "../../../../models/member";
 })
 export class AddMemberFormComponent implements OnInit {
 
+  member!: Member;
   addMemberForm!: FormGroup;
   member!: Member;
   constructor(private formBuilder: FormBuilder, private memberService: MemberService, private router: Router) { }
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..6666f6d3aa26ceec094f68937b1c6ee74d1c28e0
--- /dev/null
+++ b/src/app/header/header.component.html
@@ -0,0 +1,28 @@
+<nav>
+  <a aria-current="page" class="headline" routerLink="/">
+    <mat-icon>home</mat-icon>
+    <h1>Kletterhalle</h1>
+  </a>
+  <div>
+    <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>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0ca85dc69e11c871bdbcec8bb6ba213e86b98865
--- /dev/null
+++ b/src/app/header/header.component.scss
@@ -0,0 +1,70 @@
+nav {
+  height: 60px;
+  width: 100%;
+  background-color: rgba(40, 42, 53, 1);
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 25px;
+  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,
+  rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
+
+  .headline {
+    width: 20%;
+    padding-left: 15px;
+    padding-top: 15px;
+    display: flex;
+    justify-content: left;
+    text-decoration: none;
+
+    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: white;
+    }
+
+    mat-icon {
+      color: darkred;
+    }
+  }
+
+  ul {
+    display: flex;
+    width: 600px;
+    height: 100%;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      width: 50%;
+      height: 100%;
+      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%;
+      }
+    }
+  }
+}
diff --git a/src/app/header/header.component.spec.ts b/src/app/header/header.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1fd30b4db7460c2fcf4cffbeffc548c83d0569ca
--- /dev/null
+++ b/src/app/header/header.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7ab4cf73d9601a2aab1d522f8483b357ebea0624
--- /dev/null
+++ b/src/app/header/header.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss']
+})
+export class HeaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}