diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 430f91727d26d40ea6dd5bde4a96108e3c7a4939..b8a570112ee26b5efa047359bdc547710d5fb7d0 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -6,6 +6,7 @@ import {RouteComponent} from "./components/routes/route/route.component";
 import {RouteDetailPageComponent} from "./components/routes/route/route-detail-page/route-detail-page.component";
 import {AddRouteFormComponent} from "./components/routes/route/add-route-form/add-route-form.component";
 import {MemberDetailsComponent} from "./components/members/member-table/member-details/member-details.component";
+import {AddMemberFormComponent} from "./components/members/member-table/add-member-form/add-member-form.component";
 
 const routes: Routes = [
   {
@@ -17,6 +18,9 @@ const routes: Routes = [
   {
     path:'member/:id', component:MemberDetailsComponent
   },
+  {
+    path:'addMember', component:AddMemberFormComponent
+  },
   {
     path: 'routes',
     component: RoutesComponent,
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e3f89cab7737268e9ffb14d274d846be49216256..a524df549117f147e42287d920db3b3d0562c437 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -24,6 +24,9 @@ import {RouteComponent} from "./components/routes/route/route.component";
 import {AddRouteFormComponent} from "./components/routes/route/add-route-form/add-route-form.component";
 import {RouteDetailPageComponent} from "./components/routes/route/route-detail-page/route-detail-page.component";
 import { MemberDetailsComponent } from './components/members/member-table/member-details/member-details.component';
+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";
 
 @NgModule({
   declarations: [
@@ -34,28 +37,31 @@ import { MemberDetailsComponent } from './components/members/member-table/member
     AddRouteFormComponent,
     RouteDetailPageComponent,
     MemberDetailsComponent,
+    AddMemberFormComponent,
   ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    MatMenuModule,
-    MatPaginatorModule,
-    MatSortModule,
-    MatFormFieldModule,
-    MatInputModule,
-    FormsModule,
-    MatTableModule,
-    HttpClientModule,
-    MatSliderModule,
-    MatButtonModule,
-    MatIconModule,
-    MatListModule,
-    MatCardModule,
-    MatDividerModule,
-    ReactiveFormsModule,
-    MatSelectModule,
-  ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        BrowserAnimationsModule,
+        MatMenuModule,
+        MatPaginatorModule,
+        MatSortModule,
+        MatFormFieldModule,
+        MatInputModule,
+        FormsModule,
+        MatTableModule,
+        HttpClientModule,
+        MatSliderModule,
+        MatButtonModule,
+        MatIconModule,
+        MatListModule,
+        MatCardModule,
+        MatDividerModule,
+        ReactiveFormsModule,
+        MatSelectModule,
+        MatDialogModule,
+        MatProgressSpinnerModule
+    ],
   providers: [],
   bootstrap: [AppComponent],
 })
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
new file mode 100644
index 0000000000000000000000000000000000000000..eab0a71ef9a3d345893fc524358a0a9b50e93649
--- /dev/null
+++ b/src/app/components/members/member-table/add-member-form/add-member-form.component.html
@@ -0,0 +1,43 @@
+<h2 mat-dialog-title>Add Member Form</h2>
+<ng-container class="add-member-form">
+  <form class="example-container" [formGroup]="addMemberForm" (ngSubmit)="onSubmit()">
+    <mat-form-field class="example-full-width" appearance="fill">
+      <mat-label>Firstname</mat-label>
+      <input matInput placeholder="Firstname" formControlName="firstName">
+    </mat-form-field>
+    <br>
+    <mat-form-field class="example-full-width" appearance="fill">
+      <mat-label>Lastname</mat-label>
+      <input matInput placeholder="Lastname" formControlName="lastName">
+    </mat-form-field>
+
+
+      <ng-container formArrayName="addressDto">
+        <ng-container  *ngFor="let addressForm of addressDto.controls; let i = index;">
+
+            <mat-form-field class="example-full-width" appearance="fill">
+              <mat-label>Street</mat-label>
+              <input matInput placeholder="Street" formControlName="street">
+            </mat-form-field>
+            <mat-form-field class="example-full-width" appearance="fill">
+              <mat-label>No.</mat-label>
+              <input matInput placeholder="HouseNo." formControlName="houseNumber">
+            </mat-form-field>
+            <mat-form-field class="example-full-width" appearance="fill">
+              <mat-label>Post Code</mat-label>
+              <input matInput placeholder="Post Code" formControlName="postCode">
+            </mat-form-field>
+
+
+        </ng-container>
+      </ng-container>
+
+
+    <div class="button-row">
+      <button mat-raised-button color="primary" type="submit">Submit</button> |
+      <a mat-raised-button color="accent" mat-dialog-close="true">Cancel</a>
+    </div>
+  </form>
+</ng-container>
+
+
diff --git a/src/app/components/members/member-table/add-member-form/add-member-form.component.scss b/src/app/components/members/member-table/add-member-form/add-member-form.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2d145b29fca874ad9ed9ff089804a0cf581f3e26
--- /dev/null
+++ b/src/app/components/members/member-table/add-member-form/add-member-form.component.scss
@@ -0,0 +1,7 @@
+.mat-form-field {
+  width: 100%;
+  padding: 1%;
+}
+ .button-row {
+   text-align: center;
+ }
diff --git a/src/app/components/members/member-table/add-member-form/add-member-form.component.spec.ts b/src/app/components/members/member-table/add-member-form/add-member-form.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6019a055d184021d7a1242e3f32cad347da64aa6
--- /dev/null
+++ b/src/app/components/members/member-table/add-member-form/add-member-form.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddMemberFormComponent } from './add-member-form.component';
+
+describe('AddMemberFormComponent', () => {
+  let component: AddMemberFormComponent;
+  let fixture: ComponentFixture<AddMemberFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AddMemberFormComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AddMemberFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 0000000000000000000000000000000000000000..022941e02a0a019a844e593e0524e49c721223cd
--- /dev/null
+++ b/src/app/components/members/member-table/add-member-form/add-member-form.component.ts
@@ -0,0 +1,55 @@
+import { Component, OnInit } from '@angular/core';
+import {FormGroup, FormBuilder, Validators, FormArray, AbstractControl} from "@angular/forms";
+import {MemberService} from "../../../../services/member.service";
+import {Router} from "@angular/router";
+import {Address} from "../../../../models/address";
+
+
+@Component({
+  selector: 'app-add-member-form',
+  templateUrl: './add-member-form.component.html',
+  styleUrls: ['./add-member-form.component.scss']
+})
+export class AddMemberFormComponent implements OnInit {
+
+  addMemberForm!: FormGroup;
+
+  constructor(private formBuilder: FormBuilder, private memberService: MemberService, private router: Router) { }
+
+  ngOnInit(): void {
+    this.addMemberForm = this.formBuilder.group({
+      firstName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]],
+      lastName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]],
+      addressDto: this.formBuilder.array([this.formBuilder.group({
+        street: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]],
+        houseNumber:['', [Validators.required, Validators.minLength(1), Validators.maxLength(5)]],
+        postCode:['', [Validators.required, Validators.minLength(1), Validators.maxLength(5)]]
+      })]
+      )})
+  }
+
+  get addressDto() {
+    return this.addMemberForm.controls["addressDto"] as FormArray;
+  }
+
+  // addAddress() {
+  //   const addressForm = this.formBuilder.group({
+  //     street: ['', Validators.required],
+  //     houseNumber: ['', Validators.required],
+  //     postCode: ['', Validators.required]
+  //   });
+  //   this.addressDto.push(addressForm);
+  // }
+  //
+  // deleteAddress(addressIndex: number) {
+  //   this.addressDto.removeAt(addressIndex);
+  // }
+
+  onSubmit() {
+      console.log("submitted")
+      console.log(this.addMemberForm.value)
+
+
+    }
+
+}
diff --git a/src/app/components/members/member-table/member-details/member-details.component.html b/src/app/components/members/member-table/member-details/member-details.component.html
index 48f402eea1bb498d4e979767d18bd1b03770687a..63bb2aba7a091e9dddc54de7c4b58424df69f51a 100644
--- a/src/app/components/members/member-table/member-details/member-details.component.html
+++ b/src/app/components/members/member-table/member-details/member-details.component.html
@@ -1,5 +1,19 @@
-<div *ngIf="member !== undefined">
-  <div>
-      <h2>{{member.firstName}}</h2>
-  </div>
-</div>
+
+
+  <mat-card class="example-card" *ngIf="member !== undefined && member.addressDto !== undefined"  class="mat-elevation-z10">
+    <mat-card-subtitle>Id: {{member.id}}</mat-card-subtitle>
+    <mat-card-title>{{member.firstName}} {{member.lastName}}</mat-card-title>
+    <mat-card-content>
+      <p>{{member.addressDto.street}} {{member.addressDto.houseNumber}}, {{member.addressDto.postCode}}</p>
+    </mat-card-content>
+    <mat-divider inset></mat-divider>
+    <br>
+    <mat-card-title>Favourite Routes</mat-card-title>
+    <br>
+      <div class="mat-card-content" *ngFor="let route of member.favouriteRoutes">
+        <p>- {{route.name}}, {{route.difficultyLevelEnum}}</p>
+      </div>
+  </mat-card>
+
+
+
diff --git a/src/app/components/members/member-table/member-details/member-details.component.scss b/src/app/components/members/member-table/member-details/member-details.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..b53c82ba18338e7a73baa43d90dff91e16584c9e 100644
--- a/src/app/components/members/member-table/member-details/member-details.component.scss
+++ b/src/app/components/members/member-table/member-details/member-details.component.scss
@@ -0,0 +1,15 @@
+.example-card {
+  max-width: 25px;
+}
+
+.mat-card-subtitle{
+  text-align: center;
+}
+
+.mat-card-title{
+  text-align: center;
+}
+
+.mat-card-content{
+  text-align: center;
+}
diff --git a/src/app/components/members/member-table/member-details/member-details.component.ts b/src/app/components/members/member-table/member-details/member-details.component.ts
index 0884c3df6f69fbb375de191b9a510f90ca521b05..52f3447bd32227a0b8833a7016e550d02d130b50 100644
--- a/src/app/components/members/member-table/member-details/member-details.component.ts
+++ b/src/app/components/members/member-table/member-details/member-details.component.ts
@@ -11,15 +11,16 @@ import {Member} from "../../../../models/member";
 export class MemberDetailsComponent implements OnInit {
 
   member!: Member;
+  displayedColumns: string[] = ['id', 'firstName', 'lastName', 'address', 'favouriteRoutes'];
 
-  constructor(private memberService: MemberService, private route: ActivatedRoute) { }
+  constructor(private memberService: MemberService, private activatedRoute: ActivatedRoute) { }
 
   ngOnInit(): void {
-    this.route.params.subscribe(params => this.getMemberById(params['id']));
+    this.activatedRoute.params.subscribe(params => this.getMemberById(parseInt(params['id'])));
   }
 
-  getMemberById(id: number) {
-    this.memberService.getMemberById(id).subscribe((data: Member) => this.member = data);
+  getMemberById(memberId: number) {
+    this.memberService.getMemberById(memberId).subscribe((data: Member) => this.member = data);
   }
 
 }
diff --git a/src/app/components/members/member-table/member-table.component.html b/src/app/components/members/member-table/member-table.component.html
index f4ec68e089b94bb67ce7b7dd88690c19355e6c1d..61b7286b3abcd0408810fb3cd90ff905d479415b 100644
--- a/src/app/components/members/member-table/member-table.component.html
+++ b/src/app/components/members/member-table/member-table.component.html
@@ -1,9 +1,21 @@
 <div>
+  <div class="example-button-container">
+    <button mat-mini-fab color="primary" aria-label="Example icon button with a plus one icon"
+    (click)="openAddFormDialog('1000ms')">
+      <mat-icon>add</mat-icon>
+    </button>
+  </div>
+  <br>
 <mat-form-field appearance="standard">
   <mat-label>Filter Table</mat-label>
   <input #input matInput placeholder="Search" (keyup)="applyFilter($event)"/>
 </mat-form-field>
+<!--  <div class="spinner-container" *ngIf="loading">-->
+<!--    <mat-spinner></mat-spinner>-->
+<!--  </div>-->
+
 </div>
+
 <div class="mat-elevation-z10">
   <table mat-table [dataSource]="dataSource"  matSort>
     <ng-container matColumnDef="id">
@@ -29,7 +41,7 @@
    <ng-container matColumnDef="delete">
      <th mat-header-cell *matHeaderCellDef> Delete </th>
      <td mat-cell *matCellDef="let member">
-       <button mat-icon-button color="warn" (click)="redirectToDelete(member.id)">
+       <button mat-icon-button color="warn" (click)="onDeleteMember(member.id)">
          <mat-icon class="mat-18">delete</mat-icon>
        </button>
      </td>
@@ -48,29 +60,7 @@
                  showFirstLastButtons>
   </mat-paginator>
 </div>
-<!--<div>
-  <div *ngFor="let member of members">
-    <br>
-    <ul>
-      <li>
-        <div>Id: {{member.id}}</div>
-
-        <div>Firstname: {{member.firstName}}</div>
-
-        <div>Lastname: {{member.lastName}}</div>
-
-        <div>Address: {{member.addressDto.street}}</div>
 
-        <div *ngFor="let route of member.favouriteRoutes">Favourite Routes: {{route.name}}</div>
-
-        <br>
-
-
-      </li>
-    </ul>
-  </div>
-</div>
--->
 
 
 
diff --git a/src/app/components/members/member-table/member-table.component.ts b/src/app/components/members/member-table/member-table.component.ts
index 0f17aaeff2e2d0ed6400b9a481d30e33e9ce1aa2..f8e9301256ec7571ee4934de75561503bda25d60 100644
--- a/src/app/components/members/member-table/member-table.component.ts
+++ b/src/app/components/members/member-table/member-table.component.ts
@@ -5,6 +5,8 @@ import {HttpErrorResponse} from "@angular/common/http";
 import {MatPaginator} from "@angular/material/paginator";
 import {MatSort} from "@angular/material/sort";
 import {MatTableDataSource} from "@angular/material/table";
+import {MatDialog} from "@angular/material/dialog";
+import {AddMemberFormComponent} from "./add-member-form/add-member-form.component";
 
 @Component({
   selector: 'app-members',
@@ -17,11 +19,12 @@ export class MemberTableComponent implements OnInit{
   dataSource!: MatTableDataSource<Member>;
   @ViewChild(MatPaginator) paginator!: MatPaginator;
   @ViewChild(MatSort) sort!: MatSort;
-  posts: any;
+  members: Member[] = [];
+  // loading = false;
   displayedColumns: string[] = ['id', 'firstName', 'lastName', 'details', 'delete'];
 
 
-  constructor(private memberService: MemberService) {}
+  constructor(private memberService: MemberService, private dialog: MatDialog) {}
 
   ngOnInit(): void {
     this.getMembers();
@@ -31,8 +34,8 @@ export class MemberTableComponent implements OnInit{
     this.memberService.getMembers().subscribe(
       (data: Member[]) => {
         console.log(data);
-        this.posts = data;
-        this.dataSource = new MatTableDataSource(this.posts);
+        this.members = data;
+        this.dataSource = new MatTableDataSource(this.members);
         this.dataSource.paginator = this.paginator;
         this.dataSource.sort = this.sort;
 
@@ -52,13 +55,17 @@ export class MemberTableComponent implements OnInit{
     }
   }
 
-  redirectToDetails(id: number) {
-
+  onDeleteMember(memberId: number) {
+    console.log(memberId);
+    this.memberService.deleteMember(memberId).subscribe( (result) => {
+      this.ngOnInit();
+    });
   }
 
-  redirectToDelete(id: number) {
-
+  openAddFormDialog(enteranimation: any) {
+   this.dialog.open(AddMemberFormComponent,{
+     enterAnimationDuration:enteranimation,
+     width:"50%"
+   })
   }
-
-
 }
diff --git a/src/app/components/routes/route/route-detail-page/route-detail-page.component.ts b/src/app/components/routes/route/route-detail-page/route-detail-page.component.ts
index ee62c9d2f35d409afaa92a2ccc64347f2b33ca58..1c1ddec71803f4b26abc8590cd31ca61ce791bf6 100644
--- a/src/app/components/routes/route/route-detail-page/route-detail-page.component.ts
+++ b/src/app/components/routes/route/route-detail-page/route-detail-page.component.ts
@@ -9,7 +9,7 @@ import {RouteService} from "../../../../services/route.service";
   styleUrls: ['./route-detail-page.component.scss'],
 })
 export class RouteDetailPageComponent implements OnInit {
-  @Input() route?: Route;
+  route!: Route;
 
   constructor(
     private activatedRoute: ActivatedRoute,
diff --git a/src/app/models/member.ts b/src/app/models/member.ts
index 89fa0a7a0d838ba35cb4e12818a142decc5418bc..c792f690b702d4d38a2a37a77cc3ed79d3cb53e6 100644
--- a/src/app/models/member.ts
+++ b/src/app/models/member.ts
@@ -3,8 +3,8 @@ import {FavouriteRoute} from "./favouriteRoutes";
 
 export interface Member {
   id: number;
-  firstName: string;
-  lastName: string;
-  addressDto: Address;
-  favouriteRoutes: FavouriteRoute[];
+  firstName?: string;
+  lastName?: string;
+  addressDto?: Address;
+  favouriteRoutes?: FavouriteRoute[];
 }
diff --git a/src/app/services/member.service.ts b/src/app/services/member.service.ts
index 35cb082b8029d0180e6cf24084b375a5c9e01e24..c543a432765c5a7d5198b61c0bf42f6a38a49628 100644
--- a/src/app/services/member.service.ts
+++ b/src/app/services/member.service.ts
@@ -16,8 +16,8 @@ export class MemberService {
   return this.http.get<Member[]>(`${this.apiServerUrl}/members/all`);
   }
 
-  public getMemberById(id: number): Observable<Member> {
-    return this.http.get<Member>(`${this.apiServerUrl}/member/{id}`);
+  public getMemberById(memberId: number): Observable<Member> {
+    return this.http.get<Member>(`${this.apiServerUrl}/member/${memberId}`);
   }
 
   public addMember(member: Member): Observable<Member> {