diff --git a/src/main/webapp/src/app/component/abstract-list.component.ts b/src/main/webapp/src/app/component/abstract-list.component.ts
new file mode 100644
index 0000000..18739b1
--- /dev/null
+++ b/src/main/webapp/src/app/component/abstract-list.component.ts
@@ -0,0 +1,37 @@
+import {AfterViewInit, Component, OnInit} from '@angular/core';
+import {Subject, tap} from 'rxjs';
+import {BasicDataSource} from '../dataSource/basic-data-source';
+
+@Component({template: ''})
+export abstract class AbstractListComponent<T, ID> implements AfterViewInit, OnInit {
+
+  refreshSubject = new Subject();
+
+  abstract dataSource: BasicDataSource<T, ID>;
+
+  abstract displayedColumns: Map<string, boolean>;
+
+  getElementNumber(t: T): number {
+    return (this.dataSource.page?.indexOf(t) ?? 0)+1;
+  }
+
+  getDisplayedColumns(): string[] {
+    return [...this.displayedColumns.entries()]
+      .filter(column => column[1])
+      .map(column => column[0]);
+  }
+
+  getPage() {
+    this.dataSource.loadElements();
+  }
+
+  ngOnInit() {
+    this.getPage();
+  }
+
+  ngAfterViewInit(): void {
+    this.refreshSubject.pipe(
+      tap(() => this.getPage())
+    ).subscribe();
+  }
+}
diff --git a/src/main/webapp/src/app/component/person-list/person-list.component.html b/src/main/webapp/src/app/component/person-list/person-list.component.html
new file mode 100644
index 0000000..2b86a88
--- /dev/null
+++ b/src/main/webapp/src/app/component/person-list/person-list.component.html
@@ -0,0 +1,59 @@
+<div class="loadingWrapper">
+  <div class="loadingOverlay" *ngIf="dataSource.loading$ | async">
+    <mat-spinner class="loadingSpinner"></mat-spinner>
+  </div>
+  <button mat-button (click)="openFormDialog()">
+    <mat-icon>add</mat-icon>
+    Dodaj
+  </button>
+  <div class="mat-elevation-z2">
+    <table mat-table [dataSource]="dataSource">
+
+      <ng-container matColumnDef="lp">
+        <th mat-header-cell *matHeaderCellDef>L.p.</th>
+        <td mat-cell *matCellDef="let element" class="mat-cell">  {{getElementNumber(element)}}  </td>
+      </ng-container>
+
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef>Id</th>
+        <td mat-cell *matCellDef="let element" class="mat-cell">  {{element.id}}  </td>
+      </ng-container>
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef>Imię</th>
+        <td mat-cell *matCellDef="let element" class="mat-cell">  {{element.name}}  </td>
+      </ng-container>
+
+      <ng-container matColumnDef="surname">
+        <th mat-header-cell *matHeaderCellDef>Nazwisko</th>
+        <td mat-cell *matCellDef="let element" class="mat-cell">  {{element.surname}}  </td>
+      </ng-container>
+
+      <ng-container matColumnDef="index">
+        <th mat-header-cell *matHeaderCellDef>Indeks</th>
+        <td mat-cell *matCellDef="let element" class="mat-cell">  {{element?.student?.index}}  </td>
+      </ng-container>
+
+      <ng-container matColumnDef="edit">
+        <th mat-header-cell *matHeaderCellDef>Edytuj</th>
+        <td mat-cell *matCellDef="let element" class="mat-cell">
+          <button mat-icon-button (click)="openFormDialog(element)">
+            <mat-icon>edit</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="delete">
+        <th mat-header-cell *matHeaderCellDef>Usuń</th>
+        <td mat-cell *matCellDef="let element" class="mat-cell">
+          <button mat-icon-button (click)="deletePerson(element.id)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="getDisplayedColumns()"></tr>
+      <tr mat-row *matRowDef="let row; columns: getDisplayedColumns();"></tr>
+    </table>
+  </div>
+</div>
diff --git a/src/main/webapp/src/app/component/person-list/person-list.component.sass b/src/main/webapp/src/app/component/person-list/person-list.component.sass
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/webapp/src/app/component/person-list/person-list.component.spec.ts b/src/main/webapp/src/app/component/person-list/person-list.component.spec.ts
new file mode 100644
index 0000000..6584cc9
--- /dev/null
+++ b/src/main/webapp/src/app/component/person-list/person-list.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PersonListComponent } from './person-list.component';
+
+describe('PersonListComponent', () => {
+  let component: PersonListComponent;
+  let fixture: ComponentFixture<PersonListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PersonListComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PersonListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/main/webapp/src/app/component/person-list/person-list.component.ts b/src/main/webapp/src/app/component/person-list/person-list.component.ts
new file mode 100644
index 0000000..73a2471
--- /dev/null
+++ b/src/main/webapp/src/app/component/person-list/person-list.component.ts
@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+import {AbstractListComponent} from "../abstract-list.component";
+import {Person} from "../../model/person";
+import {BasicDataSource} from "../../dataSource/basic-data-source";
+import {PersonService} from "../../service/person.service";
+import {MatDialog} from "@angular/material/dialog";
+import {PersonFromComponent} from "../form/person-from/person-from.component";
+import {switchMap, tap} from "rxjs";
+
+@Component({
+  selector: 'app-person-list',
+  templateUrl: './person-list.component.html',
+  styleUrls: ['./person-list.component.sass']
+})
+export class PersonListComponent extends AbstractListComponent<Person, number>{
+  dataSource: BasicDataSource<Person, number>;
+  displayedColumns: Map<string, boolean> = new Map<string, boolean>([
+    ['lp', true],
+    ['id', true],
+    ['name', true],
+    ['surname', true],
+    ['index', true],
+    ['edit', true],
+    ['delete', true],
+  ]);
+
+  constructor(
+    private personService: PersonService,
+    private dialog: MatDialog
+  ) {
+    super();
+    this.dataSource = new BasicDataSource<Person, number>(personService);
+  }
+
+  openFormDialog(person: Person | null = null) {
+    const dialogRef = this.dialog.open(PersonFromComponent, {
+      data: { person: person }
+    });
+    dialogRef.afterClosed().pipe(
+      tap(() => this.getPage())
+    ).subscribe()
+  }
+
+  deletePerson(id: number) {
+    this.personService.delete(id).pipe(
+      tap(() => this.getPage())
+    ).subscribe()
+  }
+}
diff --git a/src/main/webapp/src/app/dataSource/abstract-data-source.spec.ts b/src/main/webapp/src/app/dataSource/abstract-data-source.spec.ts
new file mode 100644
index 0000000..952ad43
--- /dev/null
+++ b/src/main/webapp/src/app/dataSource/abstract-data-source.spec.ts
@@ -0,0 +1,7 @@
+import { BasicDataSource } from './basic-data-source';
+
+describe('AbstractDataSource', () => {
+  it('should create an instance', () => {
+    expect(new BasicDataSource()).toBeTruthy();
+  });
+});
diff --git a/src/main/webapp/src/app/dataSource/basic-data-source.ts b/src/main/webapp/src/app/dataSource/basic-data-source.ts
new file mode 100644
index 0000000..ec4ad43
--- /dev/null
+++ b/src/main/webapp/src/app/dataSource/basic-data-source.ts
@@ -0,0 +1,46 @@
+import {CollectionViewer, DataSource} from '@angular/cdk/collections';
+import {BehaviorSubject, finalize, Observable} from 'rxjs';
+import {BasicService} from '../service/basic-service';
+
+export class BasicDataSource<T, ID> implements DataSource<T> {
+  private elementsSubject = new BehaviorSubject<T[]>([]);
+  private loadingSubject = new BehaviorSubject<boolean>(false);
+
+  public loading$ = this.loadingSubject.asObservable();
+
+  public page: T[] | null = null;
+
+  constructor(private service: BasicService<T, ID>) {
+  }
+
+  connect(collectionViewer: CollectionViewer): Observable<T[]> {
+    return this.elementsSubject.asObservable();
+  }
+
+  disconnect(collectionViewer: CollectionViewer): void {
+    this.elementsSubject.complete();
+    this.loadingSubject.complete();
+  }
+
+  updateElement(newElement: T, comparator: (element: T, newElement: T) => boolean) {
+    const newList = this.elementsSubject.getValue().map(oldElement => {
+      if (comparator(oldElement, newElement)) {
+        return newElement;
+      }
+      return oldElement;
+    });
+    this.elementsSubject.next(newList);
+  }
+
+  filterElements(comparator: (element: T, index: number, array: T[]) => boolean) {
+    const newList = this.elementsSubject.getValue().filter(comparator);
+    this.elementsSubject.next(newList);
+  }
+
+  loadElements() {
+    this.loadingSubject.next(true);
+    this.service.findAll().pipe(
+      finalize(() => this.loadingSubject.next(false))
+    ).subscribe(elements => this.elementsSubject.next(elements));
+  }
+}