diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/deltagare-details.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/deltagare-details.module.ts
index 3301e4e..ad3a38f 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/deltagare-details.module.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/deltagare-details.module.ts
@@ -84,11 +84,20 @@ activeFeatures.forEach(feature => {
       );
       break;
     case Feature.REPORTING_SIGNAL:
-      routes.push({
-        path: 'signal',
-        data: { title: 'Skapa signal om arbete eller studier' },
-        loadChildren: () => import('./pages/report-forms/signal-form/signal-form.module').then(m => m.SignalFormModule),
-      });
+      routes.push(
+        {
+          path: 'signal',
+          data: { title: 'Skapa signal om arbete eller studier' },
+          loadChildren: () =>
+            import('./pages/report-forms/signal-form/signal-form.module').then(m => m.SignalFormModule),
+        },
+        {
+          path: 'signal/:handlingId',
+          data: { title: 'Signal om arbete eller studier' },
+          loadChildren: () =>
+            import('./pages/report-views/signal-view/signal-view.module').then(m => m.SignalViewModule),
+        }
+      );
       break;
     case Feature.REPORTING_INFORMATIV_RAPPORT:
       routes.push(
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/components/reports-list/reports-list.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/components/reports-list/reports-list.component.ts
index b2462c1..d74d5e3 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/components/reports-list/reports-list.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/deltagare-card/components/deltagare-tab-reports/components/reports-list/reports-list.component.ts
@@ -62,6 +62,8 @@ export class ReportsListComponent {
         return `./periodisk-redovisning/${report.id}`;
       case ReportType.Slutredovisning:
         return `./slutredovisning/${report.id}`;
+      case ReportType.Signal:
+        return `./signal/${report.id}`;
       case ReportType.InformativRapport:
       case ReportType.InformativRedovisning:
         return `./informativ-rapport/${report.id}`;
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/signal-view/signal-view.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/signal-view/signal-view.component.html
new file mode 100644
index 0000000..eb8d79c
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/signal-view/signal-view.component.html
@@ -0,0 +1,32 @@
+<msfa-layout>
+  <msfa-report-layout
+    *ngIf="avrop$ | async as avrop; else skeletonRef"
+    reportTitle="Informativ rapport"
+    [avrop]="avrop"
+  >
+    <div class="signal-view" *ngIf="signal$ | async as signal; else loadingRef">
+      <dt>Typ av sysselsättning</dt>
+      <dd>{{typeToText(signal.type)}}</dd>
+      <dt>Omfattning</dt>
+      <dd>{{omfattningToText(signal.omfattning)}}</dd>
+      <ng-container *ngIf="signal.omfattning === 'deltid'">
+        <dt>Antal procent vid deltid</dt>
+        <dd>{{signal.percent}}%</dd>
+      </ng-container>
+      <dt>Startdatum</dt>
+      <dd><digi-typography-time [afDateTime]="signal.startDate"></digi-typography-time></dd>
+
+      <footer class="signal-view__footer">
+        <msfa-back-link route="../../">Tillbaka till deltagaren</msfa-back-link>
+      </footer>
+    </div>
+  </msfa-report-layout>
+</msfa-layout>
+
+<ng-template #skeletonRef>
+  <ui-skeleton [uiCount]="3" uiText="Laddar Informativ rapport"></ui-skeleton>
+</ng-template>
+
+<ng-template #loadingRef>
+  <ui-loader uiType="padded"></ui-loader>
+</ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/signal-view/signal-view.component.scss b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/signal-view/signal-view.component.scss
new file mode 100644
index 0000000..851bd0f
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/signal-view/signal-view.component.scss
@@ -0,0 +1,15 @@
+@import 'mixins/list';
+@import 'variables/gutters';
+
+.signal-view {
+  max-width: var(--digi--typography--text--max-width);
+  display: flex;
+  flex-direction: column;
+  gap: $digi--layout--gutter--l;
+
+  &__footer {
+    display: flex;
+    flex-direction: column;
+    gap: var(--digi--layout--gutter);
+  }
+}
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/signal-view/signal-view.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/signal-view/signal-view.component.spec.ts
new file mode 100644
index 0000000..688ba5e
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/signal-view/signal-view.component.spec.ts
@@ -0,0 +1,31 @@
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { LayoutComponent } from '@msfa-shared/components/layout/layout.component';
+import { SignalViewComponent } from './signal-view.component';
+import { SignalViewService } from './signal-view.service';
+
+describe('InformativRapportViewComponent', () => {
+  let component: SignalViewComponent;
+  let fixture: ComponentFixture<SignalViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [SignalViewComponent, LayoutComponent],
+      imports: [RouterTestingModule, HttpClientTestingModule],
+      providers: [SignalViewService],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SignalViewComponent);
+    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/report-views/signal-view/signal-view.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/signal-view/signal-view.component.ts
new file mode 100644
index 0000000..62d36bb
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/signal-view/signal-view.component.ts
@@ -0,0 +1,51 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Params } from '@msfa-models/api/params.model';
+import { DeltagareAvrop } from '@msfa-models/avrop.model';
+import { Signal } from '@msfa-models/signal.model';
+import { Observable } from 'rxjs';
+import { map, shareReplay, switchMap } from 'rxjs/operators';
+import { SignalViewService } from './signal-view.service';
+
+@Component({
+  selector: 'msfa-signal-view',
+  templateUrl: './signal-view.component.html',
+  styleUrls: ['./signal-view.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SignalViewComponent {
+  params$: Observable<Params> = this.activatedRoute.params.pipe(
+    map(params => ({
+      handlingId: params.handlingId as string,
+      genomforandeReferens: params.genomforandeReferens as string,
+    }))
+  );
+  avrop$: Observable<DeltagareAvrop> = this.params$.pipe(
+    switchMap(({ genomforandeReferens }) => this.signalViewService.fetchAvropInformation$(+genomforandeReferens)),
+    shareReplay(1)
+  );
+  signal$: Observable<Signal> = this.params$.pipe(
+    switchMap(({ handlingId }) => this.signalViewService.fetchSignal$(handlingId as string)),
+    shareReplay(1)
+  );
+  typeToText(type: string) {
+    if (type === 'arbete') {
+      return 'Arbete';
+    }
+    if (type === 'utbildning') {
+      return 'Utbildning';
+    }
+    return 'Okänd';
+  }
+  omfattningToText(omfattning: string) {
+    if (omfattning === 'heltid') {
+      return 'Heltid';
+    }
+    if (omfattning === 'deltid') {
+      return 'Deltid';
+    }
+    return 'Okänd';
+  }
+
+  constructor(private signalViewService: SignalViewService, private activatedRoute: ActivatedRoute) {}
+}
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/signal-view/signal-view.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/signal-view/signal-view.module.ts
new file mode 100644
index 0000000..a9c0e43
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/signal-view/signal-view.module.ts
@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { BackLinkModule } from '@msfa-shared/components/back-link/back-link.module';
+import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { UiLoaderModule } from '@ui/loader/loader.module';
+import { UiSkeletonModule } from '@ui/skeleton/skeleton.module';
+import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
+import { SignalViewComponent } from './signal-view.component';
+import { SignalViewService } from './signal-view.service';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [SignalViewComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: SignalViewComponent }]),
+    LayoutModule,
+    ReportLayoutModule,
+    BackLinkModule,
+    UiLoaderModule,
+    UiSkeletonModule,
+  ],
+  providers: [SignalViewService],
+  exports: [SignalViewComponent],
+})
+export class SignalViewModule {}
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/signal-view/signal-view.service.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/signal-view/signal-view.service.ts
new file mode 100644
index 0000000..d7bb51b
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/signal-view/signal-view.service.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { DeltagareAvrop } from '@msfa-models/avrop.model';
+import { DeltagareApiService } from '@msfa-services/api/deltagare.api.service';
+import { HandlingarApiService } from '@msfa-services/api/handlingar.api.service';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { mapResponseToSignal, Signal } from '@msfa-models/signal.model';
+
+@Injectable()
+export class SignalViewService {
+  constructor(private handlingarApiService: HandlingarApiService, private deltagareApiService: DeltagareApiService) {}
+
+  public fetchAvropInformation$(genomforandeReferens: number): Observable<DeltagareAvrop> {
+    return this.deltagareApiService.fetchAvropInformation$(genomforandeReferens);
+  }
+
+  public fetchSignal$(handlingId: string): Observable<Signal> {
+    return this.handlingarApiService.fetchSignal$(handlingId).pipe(map(({ data }) => mapResponseToSignal(data)));
+  }
+}
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
index 47b64d1..78bf301 100644
--- 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
@@ -8,4 +8,5 @@ export enum ReportType {
   Slutredovisning = 'Slutredovisning',
   InformativRapport = 'Informativ rapport',
   InformativRedovisning = 'Informativ rapport',
+  Signal = 'Signal om arbete eller studier',
 }
diff --git a/apps/mina-sidor-fa/src/app/shared/services/api/handlingar.api.service.ts b/apps/mina-sidor-fa/src/app/shared/services/api/handlingar.api.service.ts
index 1e4d9e4..15e141d 100644
--- a/apps/mina-sidor-fa/src/app/shared/services/api/handlingar.api.service.ts
+++ b/apps/mina-sidor-fa/src/app/shared/services/api/handlingar.api.service.ts
@@ -7,6 +7,7 @@ import { GemensamPlaneringResponse } from '@msfa-models/api/gemensam-planering.r
 import { InformativRapportResponse } from '@msfa-models/api/informativ-rapport.response.model';
 import { SlutredovisningResponse } from '@msfa-models/api/slutredovisning.response.model';
 import { Observable } from 'rxjs';
+import { SignalResponse } from '@msfa-models/api/signal.response.model';
 
 @Injectable({
   providedIn: 'root',
@@ -27,6 +28,9 @@ export class HandlingarApiService {
       `${this._apiBaseUrl}/informativ-rapport/${handlingId}`
     );
   }
+  public fetchSignal$(handlingId: string): Observable<{ data: SignalResponse }> {
+    return this.httpClient.get<{ data: SignalResponse }>(`${this._apiBaseUrl}/signal/${handlingId}`);
+  }
 
   public fetchFranvaroReport$(handlingId: string): Observable<{ data: FranvaroReportResponse }> {
     return this.httpClient.get<{ data: FranvaroReportResponse }>(`${this._apiBaseUrl}/franvaro/${handlingId}`);