diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.scss b/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.scss
index aef7594..a6ab160 100644
--- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.scss
+++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employees/components/employees-list/employees-list.component.scss
@@ -1,9 +1,9 @@
 @import 'variables/gutters';
 
 .employees-list {
-  &__column-head {
-    // padding: 0;
-  }
+  // &__column-head {
+  //   // padding: 0;
+  // }
 
   th,
   td {
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/components/reports/reports.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/components/reports/reports.component.html
new file mode 100644
index 0000000..abcb1b3
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/components/reports/reports.component.html
@@ -0,0 +1,33 @@
+<div class="reports">
+  <digi-table af-variation="secondary">
+    <table>
+      <thead>
+        <tr>
+          <th scope="col" *ngFor="let column of columnHeaders">{{column.label}}</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr *ngFor="let report of reports">
+          <th scope="row">
+            <a [routerLink]="report?.id">{{ report.type }}</a>
+          </th>
+          <td>{{ report.sendDate | localDate }}</td>
+          <td>{{ report.status }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </digi-table>
+
+  <digi-navigation-pagination
+    *ngIf="totalPage > 1"
+    class="reports__pagination"
+    [afTotalPages]="totalPage"
+    [afCurrentResultStart]="currentResultStart"
+    [afCurrentResultEnd]="currentResultEnd"
+    [afTotalResults]="count"
+    (afOnPageChange)="setNewPage($event.detail)"
+    af-result-name="reports"
+  >
+  </digi-navigation-pagination>
+</div>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/components/reports/reports.component.scss b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/components/reports/reports.component.scss
new file mode 100644
index 0000000..d14cd6f
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/components/reports/reports.component.scss
@@ -0,0 +1,8 @@
+@import 'variables/gutters';
+
+.reports {
+  &__pagination {
+    display: block;
+    margin-top: var(--digi--layout--gutter);
+  }
+}
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/components/reports/reports.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/components/reports/reports.component.spec.ts
new file mode 100644
index 0000000..2a02cc4
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/components/reports/reports.component.spec.ts
@@ -0,0 +1,28 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { ReportsComponent } from './reports.component';
+
+describe('ReportsComponent', () => {
+  let component: ReportsComponent;
+  let fixture: ComponentFixture<ReportsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [ReportsComponent],
+      imports: [RouterTestingModule]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReportsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/components/reports/reports.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/components/reports/reports.component.ts
new file mode 100644
index 0000000..b7bc2d2
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/components/reports/reports.component.ts
@@ -0,0 +1,55 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import { PaginationMeta } from '@msfa-models/pagination-meta.model';
+import { Report } from '@msfa-models/reports.model';
+
+@Component({
+  selector: 'msfa-reports',
+  templateUrl: './reports.component.html',
+  styleUrls: ['./reports.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ReportsComponent {
+  @Input() reports: Report[];
+  @Input() paginationMeta: PaginationMeta;
+  @Output() paginated = new EventEmitter<number>();
+
+  columnHeaders: { label: string; key: keyof Report }[] = [
+    {
+      label: 'Typ av rapport',
+      key: 'type'
+    },
+    {
+      label: 'Inskickad datum',
+      key: 'sendDate',
+    },
+    {
+      label: 'Status',
+      key: 'status',
+    }
+  ];
+
+  get currentPage(): number {
+    return this.paginationMeta.page;
+  }
+
+  get totalPage(): number {
+    return this.paginationMeta?.totalPage;
+  }
+
+  get count(): number {
+    return this.paginationMeta.count;
+  }
+
+  get currentResultStart(): number {
+    return (this.currentPage - 1) * this.paginationMeta.limit + 1;
+  }
+
+  get currentResultEnd(): number {
+    const end = this.currentResultStart + this.paginationMeta.limit - 1;
+    return end < this.count ? end : this.count;
+  }
+
+  setNewPage(page: number): void {
+    this.paginated.emit(page);
+  }
+}
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/components/reports/reports.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/components/reports/reports.module.ts
new file mode 100644
index 0000000..70717aa
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/components/reports/reports.module.ts
@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { LocalDatePipeModule } from '@msfa-shared/pipes/local-date/local-date.module';
+import { ReportsComponent } from './reports.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [ReportsComponent],
+  imports: [CommonModule, RouterModule, LocalDatePipeModule],
+  exports: [ReportsComponent]
+})
+export class ReportsModule { }
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.html
index a96c484..f1ba03b 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.html
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.html
@@ -188,6 +188,47 @@
               </div>
             </div>
           </digi-navigation-tab>
+
+          <digi-navigation-tab af-aria-label="Rapportering" af-id="deltagare-card-rapportering">
+            <div class="deltagare-card__select-report">
+              <h3>Skapa ny rapport</h3>
+              <p>Här kan du skicka rapporter om deltagaren till arbetsförmedlingen.</p>
+              <form [formGroup]="reportPickerFormGroup">
+                <digi-ng-form-select
+                  [formControlName]="avvikelseFormControlName"
+                  afLabel="Välj rapporttyp"
+                  afPlaceholder="Välj rapporttyp"
+                  [afSelectItems]="selectableReportTypes"
+                  [afDisableValidStyle]="true"
+                  [afRequired]="true"
+                  [afInvalid]="avvikelseFormControl.invalid && avvikelseFormControl.touched"
+                >
+                </digi-ng-form-select>
+                <digi-form-validation-message
+                  af-variation="error"
+                  *ngIf="avvikelseFormControl.invalid && avvikelseFormControl.touched"
+                >
+                  Du måste välja en rapporttyp
+                </digi-form-validation-message>
+              </form>
+            </div>
+            <div class="deltagare-card__cta-wrapper">
+              <digi-ng-link-button
+                afText="Skapa ny rapport"
+                [afRoute]="avvikelseFormControl.valid ? ['/deltagare/rapportera', deltagare.id] : null"
+                (click)="onFormSubmitted($event)"
+              ></digi-ng-link-button>
+            </div>
+            <div>
+              <h3>Inskickade rapporter</h3>
+              <msfa-reports
+                *ngIf="reportsData$ | async as reportsData, else loadingRef"
+                [reports]="reportsData.data"
+                [paginationMeta]="reportsData?.meta"
+                (paginated)="setNewPage($event)"
+              ></msfa-reports>
+            </div>
+          </digi-navigation-tab>
         </digi-navigation-tabs>
       </digi-typography>
     </div>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.scss b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.scss
index baa0e2b..b619f1e 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.scss
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.scss
@@ -14,6 +14,15 @@
     flex-basis: 0;
   }
 
+  &__select-report {
+    max-width: var(--digi--typography--text--max-width);
+  }
+
+  &__cta-wrapper {
+    margin-top: $digi--layout--gutter--l;
+    margin-bottom: $digi--layout--gutter--xl;
+  }
+
   dd {
     margin: 0 0 1rem;
   }
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.spec.ts
index 46a6554..8308801 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.spec.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.spec.ts
@@ -1,6 +1,7 @@
 import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
 import { RouterTestingModule } from '@angular/router/testing';
 import { LayoutComponent } from '@msfa-shared/components/layout/layout.component';
 import { DeltagareCardComponent } from './deltagare-card.component';
@@ -13,7 +14,7 @@ describe('DeltagareCardComponent', () => {
     waitForAsync(() => {
       void TestBed.configureTestingModule({
         declarations: [DeltagareCardComponent, LayoutComponent],
-        imports: [RouterTestingModule, HttpClientTestingModule, DigiNgSkeletonBaseModule],
+        imports: [RouterTestingModule, HttpClientTestingModule, DigiNgSkeletonBaseModule, ReactiveFormsModule],
       }).compileComponents();
     })
   );
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.ts
index a3825fb..c437044 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.ts
@@ -1,7 +1,10 @@
+import { FormSelectItem } from '@af/digi-ng/_form/form-select';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { IconType } from '@msfa-enums/icon-type.enum';
 import { Deltagare } from '@msfa-models/deltagare.model';
+import { ReportsData } from '@msfa-models/reports.model';
 import { WorkExperience } from '@msfa-models/work-experience.model';
 import { DeltagareService } from '@msfa-services/api/deltagare.service';
 import { Observable } from 'rxjs';
@@ -15,6 +18,18 @@ import { map } from 'rxjs/operators';
 })
 export class DeltagareCardComponent {
   deltagare$: Observable<Deltagare> = this.deltagareService.deltagare$;
+  reportsData$: Observable<ReportsData> = this.deltagareService.reportsData$;
+
+  readonly avvikelseFormControlName = 'avvikelse';
+
+  reportPickerFormGroup: FormGroup = this.formBuilder.group({
+      // eslint-disable-next-line  @typescript-eslint/unbound-method
+    avvikelse: this.formBuilder.control('', [Validators.required]),
+  });
+
+  selectableReportTypes: Array<FormSelectItem> = [{ name: 'Avvikelse', value: 'avvikelse' }];
+  selectedReportType: FormSelectItem;
+
   firstVisibleWorkExperiences$: Observable<WorkExperience[]> = this.deltagare$.pipe(
     map(deltagare => deltagare.workExperiences.slice(0, 2))
   );
@@ -25,11 +40,38 @@ export class DeltagareCardComponent {
   iconType = IconType;
   accordionExpanded = false;
 
-  constructor(private activatedRoute: ActivatedRoute, private deltagareService: DeltagareService) {
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    private deltagareService: DeltagareService,
+    private formBuilder: FormBuilder) {
     this.deltagareService.setCurrentDeltagareId(this.activatedRoute.snapshot.params.deltagareId);
   }
 
+  get avvikelseFormControl(): AbstractControl | null {
+    return this.reportPickerFormGroup?.get(this.avvikelseFormControlName);
+  }
+
   toggleAccordionExpanded(): void {
     this.accordionExpanded = !this.accordionExpanded;
   }
+
+  setNewPage(page: number): void {
+    this.deltagareService.setPage(page);
+  }
+
+  onFormSubmitted(event: Event): void {
+    event.preventDefault();
+
+    this.avvikelseFormControl.markAsTouched();
+
+    if (!this.selectableReportTypes || this.reportPickerFormGroup.invalid) {
+      return;
+    }
+
+    const selectedReportType = this.selectableReportTypes.find(report => {
+      return report.value === this.avvikelseFormControl.value;
+    })
+
+    this.deltagareService.setReportType(selectedReportType);
+  }
 }
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.module.ts
index 897a5c2..1b8faf8 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.module.ts
@@ -1,14 +1,18 @@
+import { DigiNgFormSelectModule } from '@af/digi-ng/_form/form-select';
 import { DigiNgLayoutExpansionPanelModule } from '@af/digi-ng/_layout/layout-expansion-panel';
+import { DigiNgLinkButtonModule } from '@af/digi-ng/_link/link-button';
 import { DigiNgLinkInternalModule } from '@af/digi-ng/_link/link-internal';
 import { DigiNgPopoverModule } from '@af/digi-ng/_popover/popover';
 import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
 import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
 import { IconModule } from '@msfa-shared/components/icon/icon.module';
 import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { ReportsModule } from './components/reports/reports.module';
 import { DeltagareCardComponent } from './deltagare-card.component';
 
 @NgModule({
@@ -17,6 +21,7 @@ import { DeltagareCardComponent } from './deltagare-card.component';
   imports: [
     CommonModule,
     RouterModule.forChild([{ path: '', component: DeltagareCardComponent }]),
+    ReportsModule,
     LayoutModule,
     DigiNgLinkInternalModule,
     IconModule,
@@ -25,7 +30,10 @@ import { DeltagareCardComponent } from './deltagare-card.component';
     HideTextModule,
     DigiNgSkeletonBaseModule,
     DigiNgPopoverModule,
+    DigiNgLinkButtonModule,
+    DigiNgFormSelectModule,
+    ReactiveFormsModule
   ],
   exports: [DeltagareCardComponent],
 })
-export class DeltagareCardModule {}
+export class DeltagareCardModule { }
diff --git a/apps/mina-sidor-fa/src/app/shared/enums/report-status.enum.ts b/apps/mina-sidor-fa/src/app/shared/enums/report-status.enum.ts
new file mode 100644
index 0000000..c5482b6
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/shared/enums/report-status.enum.ts
@@ -0,0 +1,4 @@
+export enum ReportStatus {
+  SKICKAD = 'Skickad',
+  OKAND = 'Okänd',
+}
diff --git a/apps/mina-sidor-fa/src/app/shared/enums/report-type.enum.ts b/apps/mina-sidor-fa/src/app/shared/enums/report-type.enum.ts
new file mode 100644
index 0000000..eaed2bd
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/shared/enums/report-type.enum.ts
@@ -0,0 +1,4 @@
+export enum ReportType {
+  AVVIKELSERAPPORT = 'Avvikelserapport',
+  OKAND = 'Okänd',
+}
diff --git a/apps/mina-sidor-fa/src/app/shared/models/api/report.response.model.ts b/apps/mina-sidor-fa/src/app/shared/models/api/report.response.model.ts
new file mode 100644
index 0000000..3d74e81
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/shared/models/api/report.response.model.ts
@@ -0,0 +1,13 @@
+import { PaginationMeta } from '@msfa-models/pagination-meta.model';
+import { Report } from '@msfa-models/reports.model';
+
+export interface ReportResponse {
+  data: Report[];
+  meta: PaginationMeta;
+}
+
+export interface ReportsApiResponseData {
+  type: string;
+  sendDate: Date;
+  status: string;
+}
diff --git a/apps/mina-sidor-fa/src/app/shared/models/reports.model.ts b/apps/mina-sidor-fa/src/app/shared/models/reports.model.ts
new file mode 100644
index 0000000..af6e1af
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/shared/models/reports.model.ts
@@ -0,0 +1,22 @@
+import { ReportsApiResponseData } from './api/report.response.model';
+import { PaginationMeta } from './pagination-meta.model';
+
+export interface Report {
+  type: string;
+  sendDate: Date;
+  status: string;
+}
+
+export interface ReportsData {
+  data: Report[];
+  meta: PaginationMeta;
+}
+
+export function mapReportsResponseToReport(data: ReportsApiResponseData): Report {
+  const { type, sendDate, status } = data;
+  return {
+    type,
+    sendDate,
+    status
+  }
+}
diff --git a/apps/mina-sidor-fa/src/app/shared/services/api/deltagare.service.ts b/apps/mina-sidor-fa/src/app/shared/services/api/deltagare.service.ts
index a53f7cf..ee971cf 100644
--- a/apps/mina-sidor-fa/src/app/shared/services/api/deltagare.service.ts
+++ b/apps/mina-sidor-fa/src/app/shared/services/api/deltagare.service.ts
@@ -1,3 +1,4 @@
+import { FormSelectItem } from '@af/digi-ng/_form/form-select';
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { UnsubscribeDirective } from '@msfa-directives/unsubscribe.directive';
@@ -10,6 +11,7 @@ import { DisabilityResponse } from '@msfa-models/api/disability.response.model';
 import { DriversLicenseResponse } from '@msfa-models/api/drivers-license.response.model';
 import { EducationsResponse } from '@msfa-models/api/educations.response.model';
 import { HighestEducationResponse } from '@msfa-models/api/highest-education.response.model';
+import { ReportResponse } from '@msfa-models/api/report.response.model';
 import { Params } from '@msfa-models/api/params.model';
 import { TranslatorResponse } from '@msfa-models/api/translator.response.model';
 import { WorkExperiencesResponse } from '@msfa-models/api/work-experiences.response.model';
@@ -20,13 +22,14 @@ import {
   Deltagare,
   DeltagareCompact,
   DeltagareCompactData,
-  mapResponseToDeltagareCompact,
+  mapResponseToDeltagareCompact
 } from '@msfa-models/deltagare.model';
 import { Disability, mapResponseToDisability } from '@msfa-models/disability.model';
 import { DriversLicense, mapResponseToDriversLicense } from '@msfa-models/drivers-license.model';
 import { Education, mapResponseToEducation } from '@msfa-models/education.model';
 import { errorToCustomError } from '@msfa-models/error/custom-error';
 import { HighestEducation, mapResponseToHighestEducation } from '@msfa-models/highest-education.model';
+import { mapReportsResponseToReport, ReportsData } from '@msfa-models/reports.model';
 import { Sort } from '@msfa-models/sort.model';
 import { mapResponseToWorkExperience, WorkExperience } from '@msfa-models/work-experience.model';
 import { ErrorService } from '@msfa-services/error.service';
@@ -44,6 +47,8 @@ export class DeltagareService extends UnsubscribeDirective {
   private _page$ = new BehaviorSubject<number>(1);
   private _sort$ = new BehaviorSubject<Sort<keyof DeltagareCompact>>({ key: 'fullName', order: SortOrder.ASC });
   public sort$: Observable<Sort<keyof DeltagareCompact>> = this._sort$.asObservable();
+  private _reportType$ = new BehaviorSubject<FormSelectItem>(null);
+  reportType$: Observable<FormSelectItem> = this._reportType$.asObservable();
   private _onlyMyDeltagare$ = new BehaviorSubject<boolean>(false);
   public onlyMyDeltagare$: Observable<boolean> = this._onlyMyDeltagare$.asObservable();
 
@@ -73,6 +78,11 @@ export class DeltagareService extends UnsubscribeDirective {
     switchMap(([limit, page, sort, onlyMyDeltagare]) => this._fetchAllDeltagare$(limit, page, sort, onlyMyDeltagare))
   );
 
+  public reportsData$: Observable<ReportsData> = combineLatest([
+    this._limit$,
+    this._page$
+  ]).pipe(switchMap(([limit, page]) => this._fetchReports$(limit, page)));
+
   public setSort(newSortKey: keyof DeltagareCompact): void {
     const currentSort = this._sort$.getValue();
     const order =
@@ -112,6 +122,32 @@ export class DeltagareService extends UnsubscribeDirective {
       );
   }
 
+  private _fetchReports$(
+    limit: number,
+    page: number
+  ): Observable<ReportsData> {
+    const params: { [param: string]: string | string[] } = {
+      limit: limit.toString(),
+      page: page.toString()
+    };
+
+    return this.httpClient
+      .get<ReportResponse>(`${this._apiBaseUrl}/report`, {
+        params
+      })
+      .pipe(
+        map(({ data, meta }) => {
+          data.sort((reportA, reportB) =>
+            +reportA.sendDate < +reportB.sendDate ? 1 : -1)
+          return { data: data.map(report => mapReportsResponseToReport(report)), meta };
+        })
+      );
+  }
+
+  public setReportType(reportType: FormSelectItem): void {
+    this._reportType$.next(reportType);
+  }
+
   public setCurrentDeltagareId(currentDeltagareId: string): void {
     this._deltagare$.next(null);
     this._currentDeltagareId$.next(currentDeltagareId);
@@ -158,8 +194,8 @@ export class DeltagareService extends UnsubscribeDirective {
       map(({ data }) =>
         data.utbildningar
           ? data.utbildningar.sort((a, b) =>
-              sortFromToDates({ from: a.period_from, to: a.period_tom }, { from: b.period_from, to: b.period_tom })
-            )
+            sortFromToDates({ from: a.period_from, to: a.period_tom }, { from: b.period_from, to: b.period_tom })
+          )
           : []
       ),
       map(educations => educations.map(utbildning => mapResponseToEducation(utbildning))),
@@ -253,27 +289,27 @@ export class DeltagareService extends UnsubscribeDirective {
           workExperiences,
           avropInformation,
         ]: [
-          ContactInformation,
-          DriversLicense,
-          HighestEducation,
-          Education[],
-          string,
-          string[],
-          Disability[],
-          WorkExperience[],
-          Avrop
-        ]) => ({
-          id,
-          ...contactInformation,
-          driversLicense,
-          highestEducation,
-          educations,
-          translator,
-          workLanguages,
-          disabilities,
-          workExperiences,
-          avropInformation,
-        })
+            ContactInformation,
+            DriversLicense,
+            HighestEducation,
+            Education[],
+            string,
+            string[],
+            Disability[],
+            WorkExperience[],
+            Avrop
+          ]) => ({
+            id,
+            ...contactInformation,
+            driversLicense,
+            highestEducation,
+            educations,
+            translator,
+            workLanguages,
+            disabilities,
+            workExperiences,
+            avropInformation,
+          })
       )
     );
   }