diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/deltagare-routing.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/deltagare-routing.module.ts
index 9531a07..56d2fef 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/deltagare-routing.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/deltagare-routing.module.ts
@@ -12,10 +12,17 @@ const routes: Routes = [
     loadChildren: () =>
       import('./pages/deltagare-details/deltagare-details.module').then(m => m.DeltagareDetailsModule),
   },
+  {
+    path: ':genomforandeReferens/signal',
+    data: { title: 'Skapa signal om arbete eller studier' },
+    loadChildren: () =>
+      import(
+        './pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/deltagare-signal-arbete-studier.module'
+      ).then(m => m.DeltagareSignalArbeteStudierModule),
+  },
 ];
-
 @NgModule({
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class DeltagareRoutingModule {}
+export class DeltagareRoutingModule { }
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.ts
index 125fc22..985cd1e 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/deltagare-tab-reports.component.ts
@@ -20,12 +20,14 @@ export class DeltagareTabReportsComponent {
   reportPickerFormGroup: FormGroup = this.formBuilder.group({
     reports: this.formBuilder.control('', [RequiredValidator('Rapporttyp')]),
   });
+
   selectableReportTypes: Array<FormSelectItem> = [
     { name: 'Avvikelse', value: 'avvikelse' },
     { name: 'Gemensam Planering', value: 'planering' },
+    // { name: 'Signal om arbete eller studier', value: 'signal' },
   ];
 
-  constructor(private formBuilder: FormBuilder, private router: Router) {}
+  constructor(private formBuilder: FormBuilder, private router: Router) { }
 
   get reportsFormControl(): AbstractControl | null {
     return this.reportPickerFormGroup?.get(this.reportsFormControlName);
@@ -46,6 +48,9 @@ export class DeltagareTabReportsComponent {
       case 'avvikelse':
         void this.router.navigateByUrl(`/deltagare/${this.genomforandeReferens}/avvikelserapport`);
         break;
+      case 'signal':
+        void this.router.navigate([`/deltagare/${this.genomforandeReferens}/signal`]);
+        break;
       default:
         return;
     }
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/components/report-layout/report-layout.component.scss b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/components/report-layout/report-layout.component.scss
index 58a0aa7..50fcefa 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/components/report-layout/report-layout.component.scss
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/components/report-layout/report-layout.component.scss
@@ -1,3 +1,4 @@
+@import 'variables/z-index';
 @import 'apps/mina-sidor-fa/src/styles/variables/gutters';
 
 .report-layout {
@@ -8,4 +9,8 @@
   &__progress-bar {
     margin: $digi--layout--gutter--xl 0;
   }
+
+  &__progress-bar {
+    z-index: $msfa__z-index-default;
+  }
 }
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/components/deltagare-confirm-signal-form/deltagare-confirm-signal-form.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/components/deltagare-confirm-signal-form/deltagare-confirm-signal-form.component.html
new file mode 100644
index 0000000..507ed7b
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/components/deltagare-confirm-signal-form/deltagare-confirm-signal-form.component.html
@@ -0,0 +1,12 @@
+<section class="deltagare-confirm">
+  <h3 class="deltagare-confirm__header">Ersättningsgrund sysselsättning</h3>
+  <p>{{ ersattningsgrundTypNamn }}</p>
+
+  <ng-container *ngIf="formGroup?.get('percent').value;">
+    <h3 class="deltagare-confirm__header">Antal procent vid deltid</h3>
+    <p>{{formGroup?.get('percent').value}} %</p>
+  </ng-container>
+
+  <h3 class="deltagare-confirm__header">Startdatum</h3>
+  <p>{{formGroup?.get('date').value}}</p>
+</section>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/components/deltagare-confirm-signal-form/deltagare-confirm-signal-form.component.scss b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/components/deltagare-confirm-signal-form/deltagare-confirm-signal-form.component.scss
new file mode 100644
index 0000000..81a85d5
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/components/deltagare-confirm-signal-form/deltagare-confirm-signal-form.component.scss
@@ -0,0 +1,14 @@
+@import 'variables/gutters';
+
+.deltagare-confirm {
+  margin-bottom: $digi--layout--gutter--xl;
+
+  p {
+    margin-top: 0;
+  }
+
+  &__header {
+    font-size: var(--digi--typography--font-size--l);
+    margin: 0;
+  }
+}
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/components/deltagare-confirm-signal-form/deltagare-confirm-signal-form.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/components/deltagare-confirm-signal-form/deltagare-confirm-signal-form.component.spec.ts
new file mode 100644
index 0000000..02631b9
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/components/deltagare-confirm-signal-form/deltagare-confirm-signal-form.component.spec.ts
@@ -0,0 +1,25 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DeltagareConfirmSignalFormComponent } from './deltagare-confirm-signal-form.component';
+
+describe('DeltagareConfirmSignalFormComponent', () => {
+  let component: DeltagareConfirmSignalFormComponent;
+  let fixture: ComponentFixture<DeltagareConfirmSignalFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [DeltagareConfirmSignalFormComponent]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeltagareConfirmSignalFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/components/deltagare-confirm-signal-form/deltagare-confirm-signal-form.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/components/deltagare-confirm-signal-form/deltagare-confirm-signal-form.component.ts
new file mode 100644
index 0000000..9abde47
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/components/deltagare-confirm-signal-form/deltagare-confirm-signal-form.component.ts
@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { getErsattningsGrundTyp } from '@msfa-enums/ersattning-grund-typ-kod.enum';
+
+@Component({
+  selector: 'msfa-deltagare-confirm-signal-form',
+  templateUrl: './deltagare-confirm-signal-form.component.html',
+  styleUrls: ['./deltagare-confirm-signal-form.component.scss'],
+  changeDetection: ChangeDetectionStrategy.Default,
+})
+export class DeltagareConfirmSignalFormComponent {
+  @Input() formGroup: FormGroup | null = null;
+
+  get ersattningsgrundTypNamn(): string {
+    return getErsattningsGrundTyp(this.formGroup?.get('ersattningsTyp').value);
+  }
+}
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/components/deltagare-confirm-signal-form/deltagare-confirm-signal-form.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/components/deltagare-confirm-signal-form/deltagare-confirm-signal-form.module.ts
new file mode 100644
index 0000000..9802612
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/components/deltagare-confirm-signal-form/deltagare-confirm-signal-form.module.ts
@@ -0,0 +1,11 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DeltagareConfirmSignalFormComponent } from './deltagare-confirm-signal-form.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [DeltagareConfirmSignalFormComponent],
+  imports: [CommonModule],
+  exports: [DeltagareConfirmSignalFormComponent],
+})
+export class DeltagareConfirmSignalFormModule {}
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/deltagare-signal-arbete-studier.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/deltagare-signal-arbete-studier.component.html
new file mode 100644
index 0000000..fc5c48e
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/deltagare-signal-arbete-studier.component.html
@@ -0,0 +1,117 @@
+<msfa-layout *ngIf="avrop$ | async as avrop, else skeletenRef">
+  <msfa-report-layout
+    [currentStep]="currentStep"
+    [totalAmountOfSteps]="totalAmountOfSteps"
+    description="Här skickar du signal om att deltagare har påbörjat anställning eller utbildning."
+    reportTitle="Signal om arbete eller studier"
+    reportSubTitle="Skicka signal"
+    reportName="Signal om arbete eller studier"
+    [avrop]="avrop"
+  >
+    <div *ngIf="submittedDate$ | async as submittedDate" class="deltagare-signal__confirmation">
+      <digi-notification-alert
+        af-heading="Allt gick bra"
+        af-heading-level="h3"
+        af-variation="success"
+        class="deltagare-signal__alert"
+      >
+        <p>
+          Signalrapport för deltagare {{avrop.fullName}} är nu inskickad till Arbetsförmedlingen och inväntar
+          godkännande.
+        </p>
+        <dl>
+          <dt>Datum</dt>
+          <dd>{{submittedDate | date:'longDate'}} kl {{submittedDate | date:'shortTime'}}</dd>
+        </dl>
+      </digi-notification-alert>
+      <msfa-back-link [route]="['../']">Tillbaka till deltagaren</msfa-back-link>
+    </div>
+
+    <div *ngIf="currentStep === 1">
+      <h3 class="deltagare-signal__ersattning-heading">Har den sökande fått arbete eller påbörjat studier?</h3>
+      <h4>Ange sysselsättning (obligatoriskt)</h4>
+      <form [formGroup]="signalArbeteStudierFormGroup">
+        <div class="deltagare-signal__ersattning">
+          <digi-ng-form-radiobutton-group
+            [afRadiobuttons]="ersattningsTypAlternatives"
+            [formControlName]="ersattningsTypFormControlName"
+            [afRequired]="true"
+          ></digi-ng-form-radiobutton-group>
+          <digi-form-validation-message
+            af-variation="error"
+            *ngIf="ersattningsTypFormControl.invalid && (ersattningsTypFormControl.dirty || ersattningsTypFormControl.touched)"
+          >
+            Typ av sysselsättning är obligatoriskt
+          </digi-form-validation-message>
+        </div>
+        <div class="deltagare-signal__input" *ngIf="partTimeIsSelected">
+          <digi-ng-form-input
+            afLabel="Antal procent vid deltid (valfritt)"
+            afDescription
+            [formControlName]="percentFormControlName"
+            [afInvalid]="percentFormControl.invalid && (percentFormControl.dirty || percentFormControl.touched)"
+            afType="number"
+            [afInvalidMessage]="'Ange procent från 1 till 99'"
+          ></digi-ng-form-input>
+        </div>
+
+        <div class="deltagare-signal__datepicker">
+          <digi-ng-form-datepicker
+            [formControlName]="dateFormControlName"
+            afLabel="Välj startdatum för anställning/utbildning"
+            [afDisableValidStyle]="true"
+            [afMinDate]="setMinDate(avrop.startDate)"
+            [afMaxDate]="setMaxDate(avrop.startDate)"
+          ></digi-ng-form-datepicker>
+        </div>
+      </form>
+    </div>
+
+    <msfa-deltagare-confirm-signal-form
+      *ngIf="currentStep === totalAmountOfSteps"
+      [formGroup]="signalArbeteStudierFormGroup"
+    ></msfa-deltagare-confirm-signal-form>
+
+    <div class="deltagare-signal__alert-wrapper">
+      <digi-notification-alert
+        *ngIf="error$ | async as error"
+        af-heading="Någonting gick fel"
+        af-variation="danger"
+        class="deltagare-signal__alert"
+      >
+        <p>Kunde inte spara signalrapporten. Ladda om sidan och försök igen.</p>
+        <p *ngIf="error.message" class="msfa__small-text">{{error.message}}</p>
+      </digi-notification-alert>
+    </div>
+
+    <div class="deltagare-signal__step-buttons-wrapper">
+      <ng-container *ngIf="(submittedDate$ | async) === null">
+        <digi-button
+          (afOnClick)="previousStep()"
+          *ngIf="currentStep > 1"
+          af-size="m"
+          af-variation="secondary"
+          class="deltagare-signal__step-buttons-wrapper--space-right"
+        >
+          Tillbaka
+        </digi-button>
+        <digi-button (afOnClick)="openConfirmDialog = true" *ngIf="currentStep === totalAmountOfSteps" af-size="m">
+          Skicka in
+        </digi-button>
+      </ng-container>
+      <digi-button (afOnClick)="nextStep" *ngIf="currentStep === (totalAmountOfSteps -1)" af-size="m">
+        Förhandsgranska
+      </digi-button>
+    </div>
+  </msfa-report-layout>
+
+  <msfa-confirm-dialog
+    [openConfirmDialog]="openConfirmDialog"
+    reportToConfirm="signal om arbete eller studier"
+    (confirmDialogChanged)="setConfirmDialogChanged($event)"
+  >
+  </msfa-confirm-dialog>
+</msfa-layout>
+<ng-template #skeletenRef>
+  <digi-ng-skeleton-base [afCount]="3" afText="Laddar data för signal om arbete eller studier"></digi-ng-skeleton-base>
+</ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/deltagare-signal-arbete-studier.component.scss b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/deltagare-signal-arbete-studier.component.scss
new file mode 100644
index 0000000..c849eb6
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/deltagare-signal-arbete-studier.component.scss
@@ -0,0 +1,39 @@
+@import 'variables/gutters';
+
+.deltagare-signal {
+  &__confirmation,
+  &__deltagare,
+  &__ersattning,
+  &__input,
+  &__alert-wrapper,
+  &__datepicker {
+    max-width: var(--digi--typography--text--max-width);
+    margin-bottom: $digi--layout--gutter--xl;
+  }
+
+  &__input {
+    width: 330px;
+  }
+
+  &__ersattning-heading {
+    font-size: var(--digi--typography--font-size--h3);
+  }
+
+  &__step-buttons-wrapper--space-right {
+    margin-right: var(--digi--layout--gutter--s);
+  }
+
+  &__go-back {
+    margin-right: $digi--layout--gutter;
+  }
+
+  &__step-buttons-wrapper--space-right {
+    margin-right: var(--digi--layout--gutter--s);
+  }
+
+  &__alert {
+    max-width: var(--digi--typography--text--max-width);
+    margin-bottom: $digi--layout--gutter--xl;
+
+  }
+}
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/deltagare-signal-arbete-studier.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/deltagare-signal-arbete-studier.component.spec.ts
new file mode 100644
index 0000000..a9c040a
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/deltagare-signal-arbete-studier.component.spec.ts
@@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DeltagareSignalArbeteStudierComponent } from './deltagare-signal-arbete-studier.component';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
+import { LayoutComponent } from '@msfa-shared/components/layout/layout.component';
+import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
+
+describe('DeltagareSignalArbeteStudierComponent', () => {
+  let component: DeltagareSignalArbeteStudierComponent;
+  let fixture: ComponentFixture<DeltagareSignalArbeteStudierComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [DeltagareSignalArbeteStudierComponent, LayoutComponent],
+      imports: [RouterTestingModule, HttpClientTestingModule, ReactiveFormsModule, DigiNgFormRadiobuttonGroupModule],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeltagareSignalArbeteStudierComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/deltagare-signal-arbete-studier.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/deltagare-signal-arbete-studier.component.ts
new file mode 100644
index 0000000..75f2460
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/deltagare-signal-arbete-studier.component.ts
@@ -0,0 +1,140 @@
+import { RadiobuttonModel } from '@af/digi-ng/_form/form-radiobutton-group';
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { AbstractControl, FormControl, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { ConfirmDialog } from '@msfa-enums/confirm-dialog.enum';
+import { ErrorType } from '@msfa-enums/error-type.enum';
+import { ErsattningsGrundTypKod, getErsattningsGrundTyp } from '@msfa-enums/ersattning-grund-typ-kod.enum';
+import { Avrop } from '@msfa-models/avrop.model';
+import { CustomError } from '@msfa-models/error/custom-error';
+import { SignalArbeteStudier } from '@msfa-models/signal-arbete-studier.model';
+import { DeltagareSignalArbeteStudierService } from '@msfa-services/api/deltagare-signal-arbete-studier.service';
+import { DeltagareApiService } from '@msfa-services/api/deltagare.api.service';
+import { RequiredValidator } from '@msfa-utils/validators/required.validator';
+import { add } from 'date-fns';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { switchMap } from 'rxjs/operators';
+
+@Component({
+  selector: 'msfa-deltagare-signal-arbete-studier',
+  templateUrl: './deltagare-signal-arbete-studier.component.html',
+  styleUrls: ['./deltagare-signal-arbete-studier.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DeltagareSignalArbeteStudierComponent implements OnInit {
+  readonly ersattningsTypFormControlName = 'ersattningsTyp';
+  readonly dateFormControlName = 'date';
+  readonly percentFormControlName = 'percent';
+
+  private _submittedDate$ = new BehaviorSubject<Date | null>(null);
+  private _error$ = new BehaviorSubject<CustomError>(null);
+
+  submittedDate$ = this._submittedDate$.asObservable();
+  error$ = this._error$.asObservable();
+  totalAmountOfSteps = 2;
+  currentStep = 1;
+  openConfirmDialog = false;
+  avrop$: Observable<Avrop>;
+  signalArbeteStudierFormGroup: FormGroup | null = null;
+  todayDate = new Date().toISOString().slice(0, 10);
+
+  ersattningsTypAlternatives: RadiobuttonModel[] = [
+    {
+      label: getErsattningsGrundTyp(ErsattningsGrundTypKod.ARBETE_HELTID),
+      value: ErsattningsGrundTypKod.ARBETE_HELTID,
+    },
+    {
+      label: getErsattningsGrundTyp(ErsattningsGrundTypKod.ARBETE_DELTID),
+      value: ErsattningsGrundTypKod.ARBETE_DELTID,
+    },
+    {
+      label: getErsattningsGrundTyp(ErsattningsGrundTypKod.UTBILDNING_HELTID),
+      value: ErsattningsGrundTypKod.UTBILDNING_HELTID,
+    },
+    {
+      label: getErsattningsGrundTyp(ErsattningsGrundTypKod.UTBILDNING_DELTID),
+      value: ErsattningsGrundTypKod.UTBILDNING_DELTID,
+    },
+  ];
+
+  constructor(
+    private deltagareSignalArbeteStudierService: DeltagareSignalArbeteStudierService,
+    private deltagareApiService: DeltagareApiService,
+    private activatedRoute: ActivatedRoute
+  ) { }
+
+  ngOnInit(): void {
+    this.avrop$ = this.activatedRoute.params.pipe(
+      switchMap(({ genomforandeReferens }) => this.deltagareApiService.fetchAvropInformation$(genomforandeReferens))
+    )
+
+    this.signalArbeteStudierFormGroup = new FormGroup({
+      ersattningsTyp: new FormControl(null, [RequiredValidator()]),
+      date: new FormControl(new Date().toLocaleDateString(), [Validators.required]),
+      percent: new FormControl('', [Validators.min(1), Validators.max(99)])
+    });
+  }
+
+  setConfirmDialogChanged(confirm: ConfirmDialog): void {
+    this.openConfirmDialog = false;
+    if (confirm === ConfirmDialog.ACCEPTED) {
+      const postSignalArbeteStudier: SignalArbeteStudier = {
+        sokandeId: +this.activatedRoute.snapshot.params['genomforandeReferens'],
+        ersattningsgrund: this.ersattningsTypFormControl.value as number,
+        startDatum: this.dateFormControl.value as Date,
+        antalProcent: +this.percentFormControl.value,
+      };
+
+      this.deltagareSignalArbeteStudierService.createSignalArbeteStudier$(postSignalArbeteStudier)
+        .then(() => {
+          this._submittedDate$.next(new Date());
+          this.signalArbeteStudierFormGroup.reset();
+          this.currentStep = 3;
+        })
+        .catch((error: Error) => {
+          this._error$.next(new CustomError({ error, message: error.message, type: ErrorType.API }));
+        })
+
+    }
+  }
+
+  get ersattningsTypFormControl(): AbstractControl | undefined {
+    return this.signalArbeteStudierFormGroup?.get(this.ersattningsTypFormControlName);
+  }
+  get dateFormControl(): AbstractControl | undefined {
+    return this.signalArbeteStudierFormGroup?.get(this.dateFormControlName);
+  }
+  get percentFormControl(): AbstractControl | undefined {
+    return this.signalArbeteStudierFormGroup?.get(this.percentFormControlName);
+  }
+
+  get nextStep(): number {
+    console.log(this.signalArbeteStudierFormGroup);
+
+    this.signalArbeteStudierFormGroup.markAllAsTouched();
+    if (this.signalArbeteStudierFormGroup.valid && this.currentStep < this.totalAmountOfSteps) {
+      return this.currentStep++;
+    }
+  }
+
+  get partTimeIsSelected(): boolean {
+    return +this.ersattningsTypFormControl.value === ErsattningsGrundTypKod.ARBETE_DELTID ||
+      +this.ersattningsTypFormControl.value === ErsattningsGrundTypKod.UTBILDNING_DELTID;
+  }
+
+  setMinDate(startdatumAvrop: Date): Date {
+    return new Date(startdatumAvrop);
+  }
+
+  setMaxDate(startdatumAvrop: Date): Date {
+    return add(new Date(startdatumAvrop), { months: 10, days: 1 });
+  }
+
+  previousStep(): void {
+    if (this.currentStep > 1) {
+      this.currentStep--;
+      this._submittedDate$.next(null);
+      this._error$.next(null);
+    }
+  }
+}
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/deltagare-signal-arbete-studier.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/deltagare-signal-arbete-studier.module.ts
new file mode 100644
index 0000000..c971b2e
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-reports/deltagare-signal-arbete-studier/deltagare-signal-arbete-studier.module.ts
@@ -0,0 +1,37 @@
+import { DigiNgFormDatepickerModule } from '@af/digi-ng/_form/form-datepicker';
+import { DigiNgFormInputModule } from '@af/digi-ng/_form/form-input';
+import { DigiNgFormRadiobuttonGroupModule } from '@af/digi-ng/_form/form-radiobutton-group';
+import { DigiNgFormTextareaModule } from '@af/digi-ng/_form/form-textarea';
+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 { ConfirmDialogModule } from '@msfa-shared/components/confirm-dialog/confirm-dialog.module';
+import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { ReportLayoutModule } from '../components/report-layout/report-layout.module';
+import { DeltagareConfirmSignalFormModule } from './components/deltagare-confirm-signal-form/deltagare-confirm-signal-form.module';
+import { DeltagareSignalArbeteStudierComponent } from './deltagare-signal-arbete-studier.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [DeltagareSignalArbeteStudierComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: DeltagareSignalArbeteStudierComponent }]),
+    LayoutModule,
+    ReactiveFormsModule,
+    DigiNgFormRadiobuttonGroupModule,
+    DigiNgFormDatepickerModule,
+    DigiNgFormTextareaModule,
+    DigiNgFormInputModule,
+    DeltagareConfirmSignalFormModule,
+    ReportLayoutModule,
+    ConfirmDialogModule,
+    DigiNgSkeletonBaseModule,
+    BackLinkModule
+  ],
+  exports: [DeltagareSignalArbeteStudierComponent],
+})
+export class DeltagareSignalArbeteStudierModule { }
diff --git a/apps/mina-sidor-fa/src/app/shared/enums/ersattning-grund-typ-kod.enum.ts b/apps/mina-sidor-fa/src/app/shared/enums/ersattning-grund-typ-kod.enum.ts
new file mode 100644
index 0000000..c6cc288
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/shared/enums/ersattning-grund-typ-kod.enum.ts
@@ -0,0 +1,19 @@
+export enum ErsattningsGrundTypKod {
+  ARBETE_HELTID = 1,
+  ARBETE_DELTID = 2,
+  UTBILDNING_HELTID = 3,
+  UTBILDNING_DELTID = 4,
+}
+
+export function getErsattningsGrundTyp(kod: number): string {
+  switch (kod) {
+    case 1:
+      return 'Arbete heltid';
+    case 2:
+      return 'Arbete deltid';
+    case 3:
+      return 'Utbildning heltid';
+    case 4:
+      return 'Utbildning deltid'
+  }
+}
diff --git a/apps/mina-sidor-fa/src/app/shared/models/signal-arbete-studier.model.ts b/apps/mina-sidor-fa/src/app/shared/models/signal-arbete-studier.model.ts
new file mode 100644
index 0000000..9cc5736
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/shared/models/signal-arbete-studier.model.ts
@@ -0,0 +1,26 @@
+import { ErsattningsGrundTypKod } from '../enums/ersattning-grund-typ-kod.enum';
+
+export interface SignalArbeteStudier {
+  sokandeId: number;
+  ersattningsgrund: ErsattningsGrundTypKod;
+  antalProcent?: number;
+  startDatum: Date;
+}
+
+export interface SignalArbeteStudierRequestData {
+  sokandeId: number;
+  ersattningsgrund: ErsattningsGrundTypKod;
+  antalProcent?: number;
+  startDatum: Date;
+}
+
+export function mapSignalArbeteStudierRequestDataToReport(data: SignalArbeteStudierRequestData): SignalArbeteStudier {
+  const { sokandeId, ersattningsgrund, antalProcent, startDatum } = data;
+
+  return {
+    sokandeId,
+    ersattningsgrund,
+    antalProcent,
+    startDatum,
+  };
+}
diff --git a/apps/mina-sidor-fa/src/app/shared/services/api/deltagare-signal-arbete-studier.service.ts b/apps/mina-sidor-fa/src/app/shared/services/api/deltagare-signal-arbete-studier.service.ts
new file mode 100644
index 0000000..488fea4
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/shared/services/api/deltagare-signal-arbete-studier.service.ts
@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+import { SignalArbeteStudier } from '@msfa-models/signal-arbete-studier.model';
+import { SignalArbeteStudierApiService } from '@msfa-services/api/signal-arbete-studier-api.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DeltagareSignalArbeteStudierService {
+  constructor(private signalArbeteStudierApiService: SignalArbeteStudierApiService) { }
+
+  public createSignalArbeteStudier$(signalArbeteStudier: SignalArbeteStudier): Promise<void> {
+    return this.signalArbeteStudierApiService.createSignalArbeteStudier$(signalArbeteStudier);
+  }
+}
diff --git a/apps/mina-sidor-fa/src/app/shared/services/api/signal-arbete-studier-api.service.ts b/apps/mina-sidor-fa/src/app/shared/services/api/signal-arbete-studier-api.service.ts
new file mode 100644
index 0000000..323bfe6
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/shared/services/api/signal-arbete-studier-api.service.ts
@@ -0,0 +1,18 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { environment } from '@msfa-environment';
+import { SignalArbeteStudier } from '@msfa-models/signal-arbete-studier.model';
+
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SignalArbeteStudierApiService {
+  private _apiBaseUrl = `${environment.api.url}`;
+
+  public createSignalArbeteStudier$(signalArbeteStudier: SignalArbeteStudier): Promise<void> {
+    return this.httpClient.post<void>(`${this._apiBaseUrl}/signal`, signalArbeteStudier).toPromise();
+  }
+
+  constructor(private httpClient: HttpClient) { }
+}