diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout-module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout-module.ts
new file mode 100644
index 0000000..5d34f04
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout-module.ts
@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { ReportLayoutComponent } from './report-layout.component';
+import { DigiNgProgressProgressbarModule } from '@af/digi-ng/_progress/progressbar';
+import { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
+
+@NgModule({
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    declarations: [ReportLayoutComponent],
+    imports: [CommonModule, LayoutModule, DigiNgProgressProgressbarModule, HideTextModule],
+    exports: [ReportLayoutComponent]
+  })
+  export class ReportLayoutModule {}
\ No newline at end of file
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.html
new file mode 100644
index 0000000..d43c72c
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.html
@@ -0,0 +1,56 @@
+<section class="report-layout" *ngIf="contactInformation$ | async as contactInformation">
+    <digi-typography>
+        <div class="report-layout__deltagare-info">
+            <h1>{{ reportTitle }}</h1>
+            <h3 class="report-layout__sub-heading-h3">{{contactInformation.fornamn + ' ' + contactInformation.efternamn}}</h3>
+            <div class="report-layout__personnummer">
+                <span>Personnummer:</span>
+                <msfa-hide-text
+                    symbols="********-****"
+                    [changingText]="contactInformation.personnummer"
+                    ariaLabelType="Personnumer"
+                ></msfa-hide-text>
+            </div>
+            <span *ngIf="service">Tjänst: KROM</span>
+            <ng-container *ngIf="startDate && endDate && !isPeriodDate">
+                <span>Startdatum: {{startDate}}</span>
+                <span>Slutdatum: {{endDate}}</span>
+            </ng-container>
+            <span *ngIf="startDate && endDate && isPeriodDate">Avser period: {{startDate}} - {{endDate}}</span>
+        </div>
+
+        <digi-ng-progress-progressbar
+            [afSteps]="totalAmountOfSteps"
+            [afActiveStep]="currentStep"
+        ></digi-ng-progress-progressbar>
+
+        <div class="report-layout__main-content">
+            <ng-content></ng-content>
+        </div>
+
+        <div class="report-layout__step-buttons-wrapper">
+            <ng-container *ngIf="currentStep > 1">
+                <digi-button class="report-layout__step-buttons-wrapper--space-right" 
+                        af-variation="secondary" af-size="m" (afOnClick)="previousStep()">
+                    Tillbaka
+                </digi-button>
+            </ng-container>
+            <ng-container *ngIf="currentStep < (totalAmountOfSteps -1)">
+                <digi-button class="report-layout__step-buttons-wrapper"
+                        af-size="m" (afOnClick)="nextStep()">
+                    Nästa
+                </digi-button>
+            </ng-container>
+            <ng-container *ngIf="currentStep === (totalAmountOfSteps -1)">
+                <digi-button af-size="m" (afOnClick)="nextStep()">
+                    Förhandsgranska
+                </digi-button>
+            </ng-container>
+            <ng-container *ngIf="currentStep === totalAmountOfSteps">
+                <digi-button af-size="m" (afOnClick)="sendRequest()">
+                    Skicka in
+                </digi-button>
+            </ng-container>
+        </div>
+    </digi-typography>
+</section>
\ No newline at end of file
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.scss b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.scss
new file mode 100644
index 0000000..890b99c
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.scss
@@ -0,0 +1,31 @@
+@import 'variables/gutters';
+.report-layout {
+  font-weight: var(--digi--typography--font-weight--semibold);
+  font-size: var(--digi--typography--font-size--s);
+
+  &__sub-heading-h3 {
+    margin-top: 0;
+  }
+
+  &__deltagare-info {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: $digi--layout--gutter--xl;
+  }
+
+  &__personnummer {
+    display: flex;
+  }
+
+  &__personnummer msfa-hide-text {
+    margin-left: var(--digi--layout--gutter--s);
+  }
+
+  &__main-content {
+    margin: $digi--layout--gutter--xl 0;
+  }
+
+  &__step-buttons-wrapper--space-right {
+    margin-right: var(--digi--layout--gutter--s);
+  }
+}
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.spec.ts
new file mode 100644
index 0000000..b2809a2
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ReportLayoutComponent } from './report-layout.component';
+
+describe('ReportLayoutComponent', () => {
+  let component: ReportLayoutComponent;
+  let fixture: ComponentFixture<ReportLayoutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ReportLayoutComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ReportLayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.ts
new file mode 100644
index 0000000..5e93a2a
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/shared/report-layout/report-layout.component.ts
@@ -0,0 +1,54 @@
+import { Component, ChangeDetectionStrategy, Input, EventEmitter, Output } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ContactInformationCompact } from '@msfa-models/api/contact-information.response.model';
+import { Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+import { DeltagareAvvikelseService } from '../../pages/deltagare-report/services/deltagare-avvikelse.service';
+
+
+@Component({
+  selector: 'msfa-report-layout',
+  templateUrl: './report-layout.component.html',
+  styleUrls: ['./report-layout.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ReportLayoutComponent {
+  @Input() reportTitle = 'Report Title';
+  @Input() startDate: string;
+  @Input() endDate: string;
+  @Input() service: string;
+  @Input() isPeriodDate = false;
+  @Input() totalAmountOfSteps = 3;
+  @Input() currentStep = 1;
+  @Output() currentStepEvent = new EventEmitter<number>();
+  @Output() sendRequestEvent = new EventEmitter<boolean>();
+
+  contactInformation$: Observable<ContactInformationCompact> = this.activatedRoute.params
+  .pipe(
+    switchMap(({ deltagareId }) => this.deltagareAvvikelseService.getContactInformationCompact$(deltagareId))
+  );
+
+  constructor(
+    private deltagareAvvikelseService: DeltagareAvvikelseService,
+    private activatedRoute: ActivatedRoute,
+  ) { }
+
+  nextStep():void {
+    if(this.currentStep < this.totalAmountOfSteps) {
+      this.currentStep++;
+      this.currentStepEvent.emit(this.currentStep);
+    }
+  }
+
+  previousStep():void {
+    if(this.currentStep > 1) {
+      this.currentStep--;
+      this.currentStepEvent.emit(this.currentStep);
+    }
+  }
+
+  sendRequest():void {
+    this.sendRequestEvent.emit(true);
+  }
+
+}