diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 0b4edbe1855183c663de67780466b97af8de02df..f50910789d13ac3cd7230decbc6c7713f2c88f03 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { MembersListComponent } from './components/members/members-list.component'
+import { MemberListComponent } from './components/members/member-list.component'
 import {RoutesComponent} from "./components/routes/routes.component";
 import {RouteComponent} from "./components/routes/route/route.component";
 import {RouteDetailPageComponent} from "./components/routes/route/route-detail-page/route-detail-page.component";
@@ -8,7 +8,7 @@ import {AddRouteFormComponent} from "./components/routes/route/add-route-form/ad
 
 const routes: Routes = [
   {
-    path:'members', component:MembersListComponent
+    path:'members', component:MemberListComponent
   },
   {
     path: 'routes',
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e194dbf21481f413fe3c99bad7d1d3f0d8d6448f..fa5f2f4f4730a1c73a6c4c4fbe895ade5ffdd539 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,7 +4,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatMenuModule} from '@angular/material/menu';
-import { MembersListComponent } from './components/members/members-list.component';
+import { MemberListComponent } from './components/members/member-list.component';
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {MatTableModule} from "@angular/material/table";
 import {HttpClientModule} from "@angular/common/http";
@@ -27,7 +27,7 @@ import {RouteDetailPageComponent} from "./components/routes/route/route-detail-p
 @NgModule({
   declarations: [
     AppComponent,
-    MembersListComponent,
+    MemberListComponent,
     RoutesComponent,
     RouteComponent,
     AddRouteFormComponent,
diff --git a/src/app/components/members/members-list.component.html b/src/app/components/members/member-list.component.html
similarity index 84%
rename from src/app/components/members/members-list.component.html
rename to src/app/components/members/member-list.component.html
index 06aa41fcc462d11f665eed10d9f32af7a4e7c777..2aeb5b36d494c3d6253f6dc1dd20ccb96c4cdddb 100644
--- a/src/app/components/members/members-list.component.html
+++ b/src/app/components/members/member-list.component.html
@@ -1,14 +1,11 @@
 <div>
 <mat-form-field appearance="standard">
-  <mat-label>Member Table</mat-label>
-  <input matInput [(ngModel)]="filter" placeholder="Filter"/>
+  <mat-label>Filter Table</mat-label>
+  <input #input matInput placeholder="Search" (keyup)="applyFilter($event)"/>
 </mat-form-field>
 </div>
-<div class="mat-elevation-z8">
-
-  <!-- Filter works, as the dataSource is changed to filteredMembers -->
-
- <table mat-table [dataSource]="dataSource"  matSort (matSortChange)="announceSortChange($event)" class="mat-elevation-z8" >
+<div class="mat-elevation-z10">
+  <table mat-table [dataSource]="dataSource"  matSort>
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by id"> No. </th>
       <td mat-cell *matCellDef="let member"> {{member.id}}</td>
@@ -40,6 +37,12 @@
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+   <!-- SHOWS WHEN DATA DOES NOT EXIST -->
+   <tr *matNoDataRow>
+     <td class="mat-cell" colspan="4"> There is no
+     member with the lastname: {{input.value}}</td>
+   </tr>
   </table>
   <mat-paginator [pageSizeOptions]="[5, 10, 20]"
                  showFirstLastButtons>
diff --git a/src/app/components/members/members-list.component.scss b/src/app/components/members/member-list.component.scss
similarity index 100%
rename from src/app/components/members/members-list.component.scss
rename to src/app/components/members/member-list.component.scss
diff --git a/src/app/components/members/members-list.component.spec.ts b/src/app/components/members/member-list.component.spec.ts
similarity index 58%
rename from src/app/components/members/members-list.component.spec.ts
rename to src/app/components/members/member-list.component.spec.ts
index 63ccbbabcef003d8372f5307b89c1108e4a01814..5b518d3b8747ff2a7ec264832a72820456c6cdd1 100644
--- a/src/app/components/members/members-list.component.spec.ts
+++ b/src/app/components/members/member-list.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MembersListComponent } from './members-list.component';
+import { MemberListComponent } from './member-list.component';
 
 describe('MembersComponent', () => {
-  let component: MembersListComponent;
-  let fixture: ComponentFixture<MembersListComponent>;
+  let component: MemberListComponent;
+  let fixture: ComponentFixture<MemberListComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ MembersListComponent ]
+      declarations: [ MemberListComponent ]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(MembersListComponent);
+    fixture = TestBed.createComponent(MemberListComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/src/app/components/members/member-list.component.ts b/src/app/components/members/member-list.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..576d574f2ed176aa27a4f0494f3fb0cbfa9d4d60
--- /dev/null
+++ b/src/app/components/members/member-list.component.ts
@@ -0,0 +1,61 @@
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {MemberService} from "../../services/member.service";
+import {Member} from "../../models/member";
+import {HttpErrorResponse} from "@angular/common/http";
+import {MatPaginator} from "@angular/material/paginator";
+import {MatSort} from "@angular/material/sort";
+import {MatTableDataSource} from "@angular/material/table";
+
+@Component({
+  selector: 'app-members',
+  templateUrl: './member-list.component.html',
+  styleUrls: ['./member-list.component.scss']
+})
+export class MemberListComponent implements OnInit{
+
+  title = 'Member-Table'
+  dataSource!: MatTableDataSource<Member>;
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
+  posts: any;
+  displayedColumns: string[] = ['id', 'firstName', 'lastName', 'details', 'delete'];
+
+  constructor(private memberService: MemberService) {}
+
+  ngOnInit(): void {
+    this.getMembers();
+  }
+
+  public getMembers(): void {
+    this.memberService.getMembers().subscribe(
+      (data: Member[]) => {
+        console.log(data);
+        this.posts = data;
+        this.dataSource = new MatTableDataSource(this.posts);
+        this.dataSource.paginator = this.paginator;
+        this.dataSource.sort = this.sort;
+
+      },
+      (error: HttpErrorResponse) => {
+        alert(error.message);
+      }
+    )
+  }
+
+  applyFilter(event:Event){
+    const filterValue = (event.target as HTMLInputElement).value;
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+
+    if (this.dataSource.paginator) {
+      this.dataSource.paginator.firstPage();
+    }
+  }
+
+  redirectToDetails(id: number) {
+
+  }
+
+  redirectToDelete(id: number) {
+
+  }
+}
diff --git a/src/app/components/members/members-list.component.ts b/src/app/components/members/members-list.component.ts
deleted file mode 100644
index 50494473c1f0412ba03c7f5076328ffb5ee2c89f..0000000000000000000000000000000000000000
--- a/src/app/components/members/members-list.component.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
-import {MemberService} from "../../services/member.service";
-import {Member} from "../../models/member";
-import {HttpErrorResponse} from "@angular/common/http";
-import {MatPaginator} from "@angular/material/paginator";
-import {MatSort, Sort} from "@angular/material/sort";
-import {LiveAnnouncer} from "@angular/cdk/a11y";
-import {MatTableDataSource} from "@angular/material/table";
-
-
-
-
-
-@Component({
-  selector: 'app-members',
-  templateUrl: './members-list.component.html',
-  styleUrls: ['./members-list.component.scss']
-})
-export class MembersListComponent implements OnInit, AfterViewInit {
-
-  private _filter!: string;
-  members: Member[] = [];
-  filteredMembers!: Member[];
-  dataSource = new MatTableDataSource(this.members);
-  displayedColumns: string[] = ['id', 'firstName', 'lastName', 'details', 'delete'];
-
-  constructor(private memberService: MemberService, private _liveAnnouncer: LiveAnnouncer) {}
-
-  @ViewChild(MatPaginator) paginator!: MatPaginator;
-  @ViewChild(MatSort) sort!: MatSort;
-
-
-  ngOnInit(): void {
-    this.getMembers();
-  }
-
-  ngAfterViewInit(): void {
-    //this.dataSource.paginator = this.paginator;
-    //this.dataSource.sort = this.sort;
-
-  }
-
-  public getMembers(): void {
-    this.memberService.getMembers().subscribe(
-      (response:Member[]) => {
-        console.log(response);
-        this.members = response;
-        this.filteredMembers = response;
-        this.dataSource = new MatTableDataSource<Member>(response);
-        this.dataSource.paginator = this.paginator;
-        this.dataSource.sort = this.sort;
-
-      },
-      (error: HttpErrorResponse) => {
-        alert(error.message);
-      }
-    )
-  }
-
-  get filter(){
-    return this._filter;
-  }
-
-  set filter(value: string){
-    this._filter = value;
-    this.filteredMembers = this.filterMembers(value);
-    this.writeLog(value);
-    this.writeLog(this.filteredMembers)
-  }
-
-  writeLog(log: any){
-    console.log(log);
-  }
-
-  filterMembers(filter: string){
-    return this.filteredMembers.filter((member: Member) => member.lastName.includes(filter));
-
-  }
-
-  public deleteMember() {
-
-  }
-
-  public redirectToDetails = (id: number) => {
-
-  }
-
-  public redirectToUpdate = (id: string) => {
-
-  }
-
-  public redirectToDelete = (id: string) => {
-
-  }
-
-  announceSortChange(sortState: Sort) {
-    if (sortState.direction) {
-      this._liveAnnouncer.announce(`Sorted ${sortState.direction}ending`);
-    } else {
-      this._liveAnnouncer.announce('Sorting cleared');
-    }
-  }
-}