diff --git a/src/main/webapp/src/app/app.module.ts b/src/main/webapp/src/app/app.module.ts
index 6a2b6a9..ca10b74 100644
--- a/src/main/webapp/src/app/app.module.ts
+++ b/src/main/webapp/src/app/app.module.ts
@@ -17,6 +17,9 @@ import {ReactiveFormsModule} from "@angular/forms";
 import {MatInputModule} from "@angular/material/input";
 import {MatDialog, MatDialogModule} from "@angular/material/dialog";
 import { GroupFormComponent } from './component/form/group-form/group-form.component';
+import { PersonSelectorComponent } from './component/selector/person-selector/person-selector.component';
+import { PersonListControlValueAccessorComponent } from './component/controlValueAccessor/person-list-control-value-accessor/person-list-control-value-accessor.component';
+import { ImportExportComponent } from './component/import-export/import-export.component';
 
 @NgModule({
   declarations: [
@@ -24,7 +27,10 @@ import { GroupFormComponent } from './component/form/group-form/group-form.compo
     PersonListComponent,
     GroupListComponent,
     PersonFromComponent,
-    GroupFormComponent
+    GroupFormComponent,
+    PersonSelectorComponent,
+    PersonListControlValueAccessorComponent,
+    ImportExportComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/main/webapp/src/app/component/controlValueAccessor/person-list-control-value-accessor/person-list-control-value-accessor.component.html b/src/main/webapp/src/app/component/controlValueAccessor/person-list-control-value-accessor/person-list-control-value-accessor.component.html
new file mode 100644
index 0000000..1ffa13d
--- /dev/null
+++ b/src/main/webapp/src/app/component/controlValueAccessor/person-list-control-value-accessor/person-list-control-value-accessor.component.html
@@ -0,0 +1,45 @@
+<button type="button" mat-button (click)="openSelectorDialog()">
+  <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="delete">
+      <th mat-header-cell *matHeaderCellDef>Usuń</th>
+      <td mat-cell *matCellDef="let element" class="mat-cell">
+        <button type="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>
diff --git a/src/main/webapp/src/app/component/controlValueAccessor/person-list-control-value-accessor/person-list-control-value-accessor.component.sass b/src/main/webapp/src/app/component/controlValueAccessor/person-list-control-value-accessor/person-list-control-value-accessor.component.sass
new file mode 100644
index 0000000..e69de29
diff --git a/src/main/webapp/src/app/component/controlValueAccessor/person-list-control-value-accessor/person-list-control-value-accessor.component.spec.ts b/src/main/webapp/src/app/component/controlValueAccessor/person-list-control-value-accessor/person-list-control-value-accessor.component.spec.ts
new file mode 100644
index 0000000..ee2e313
--- /dev/null
+++ b/src/main/webapp/src/app/component/controlValueAccessor/person-list-control-value-accessor/person-list-control-value-accessor.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PersonListControlValueAccessorComponent } from './person-list-control-value-accessor.component';
+
+describe('PersonListControlValueAccessorComponent', () => {
+  let component: PersonListControlValueAccessorComponent;
+  let fixture: ComponentFixture<PersonListControlValueAccessorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PersonListControlValueAccessorComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PersonListControlValueAccessorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/main/webapp/src/app/component/controlValueAccessor/person-list-control-value-accessor/person-list-control-value-accessor.component.ts b/src/main/webapp/src/app/component/controlValueAccessor/person-list-control-value-accessor/person-list-control-value-accessor.component.ts
new file mode 100644
index 0000000..c4b829e
--- /dev/null
+++ b/src/main/webapp/src/app/component/controlValueAccessor/person-list-control-value-accessor/person-list-control-value-accessor.component.ts
@@ -0,0 +1,85 @@
+import { Component } from '@angular/core';
+import {Person} from "../../../model/person";
+import {MatDialog} from "@angular/material/dialog";
+import {tap} from "rxjs";
+import {MatTableDataSource} from "@angular/material/table";
+import {PersonSelectorComponent} from "../../selector/person-selector/person-selector.component";
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
+
+@Component({
+  selector: 'app-person-list-control-value-accessor',
+  templateUrl: './person-list-control-value-accessor.component.html',
+  styleUrls: ['./person-list-control-value-accessor.component.sass'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: PersonListControlValueAccessorComponent
+    }
+  ]
+})
+export class PersonListControlValueAccessorComponent implements ControlValueAccessor{
+
+  disabled = false;
+  dataSource: MatTableDataSource<Person>;
+  displayedColumns: Map<string, boolean> = new Map<string, boolean>([
+    ['lp', true],
+    ['id', true],
+    ['name', true],
+    ['surname', true],
+    ['index', true],
+    ['delete', true],
+  ]);
+
+  constructor(
+    private dialog: MatDialog
+  ) {
+    this.dataSource = new MatTableDataSource<Person>()
+  }
+
+  writeValue(people: Person[]): void {
+    this.dataSource.data = people;
+  }
+  registerOnChange(fn: (people: Person[] | null) => void): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  onChange = (people: Person[] | null) => {
+  }
+
+  onTouched = () => {
+  }
+
+  openSelectorDialog() {
+    const dialogRef = this.dialog.open(PersonSelectorComponent);
+    dialogRef.afterClosed().pipe(
+      tap(person => {
+        if (person != null) {
+          this.dataSource.data = [...this.dataSource.data, person];
+          this.onChange(this.dataSource.data);
+        }
+      })
+    ).subscribe()
+  }
+
+  deletePerson(id: number) {
+    this.dataSource.data = this.dataSource.data.filter(person => person.id !== id);
+    this.onChange(this.dataSource.data);
+  }
+
+  getDisplayedColumns(): string[] {
+    return [...this.displayedColumns.entries()]
+      .filter(column => column[1])
+      .map(column => column[0]);
+  }
+
+  getElementNumber(t: Person): number {
+    return (this.dataSource.data?.indexOf(t) ?? 0)+1;
+  }
+}