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 9a3c856..e334a2c 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
@@ -91,14 +91,24 @@ activeFeatures.forEach(feature => {
       });
       break;
     case Feature.REPORTING_INFORMATIV_RAPPORT:
-      routes.push({
-        path: 'informativ-rapport',
-        data: { title: 'Skapa Informativ rapport' },
-        loadChildren: () =>
-          import('./pages/report-forms/informativ-rapport-form/informativ-rapport-form.module').then(
-            m => m.InformativRapportFormModule
-          ),
-      });
+      routes.push(
+        {
+          path: 'informativ-rapport',
+          data: { title: 'Skapa Informativ rapport' },
+          loadChildren: () =>
+            import('./pages/report-forms/informativ-rapport-form/informativ-rapport-form.module').then(
+              m => m.InformativRapportFormModule
+            ),
+        },
+        {
+          path: 'informativ-rapport/:handlingId',
+          data: { title: 'Informativ rapport' },
+          loadChildren: () =>
+            import('./pages/report-views/informativ-rapport-view/informativ-rapport-view.module').then(
+              m => m.InformativRapportViewModule
+            ),
+        }
+      );
       break;
     default:
       break;
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 3bcce80..dae9404 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
@@ -60,6 +60,9 @@ export class ReportsListComponent {
         return `./avvikelserapport/${report.id}`;
       case ReportType.PeriodiskRedovisning:
         return `./periodisk-redovisning/${report.id}`;
+      case ReportType.InformativRapport:
+      case ReportType.InformativRedovisning:
+        return `./informativ-rapport/${report.id}`;
       default:
         return null;
     }
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/informativ-rapport-view/informativ-rapport-view.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/informativ-rapport-view/informativ-rapport-view.component.html
new file mode 100644
index 0000000..3bb230a
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/informativ-rapport-view/informativ-rapport-view.component.html
@@ -0,0 +1,27 @@
+<msfa-layout>
+  <msfa-report-layout
+    *ngIf="avrop$ | async as avrop; else skeletonRef"
+    reportTitle="Informativ rapport"
+    [avrop]="avrop"
+  >
+    <div class="informativ-rapport-view" *ngIf="informativRapport$ | async as report; else loadingRef">
+      <dl>
+        <dt>Vad gäller ärendet</dt>
+        <dd>{{report.category}}</dd>
+        <dt>Kompletterande information</dt>
+        <dd>{{report.comment}}</dd>
+      </dl>
+      <footer class="informativ-rapport-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/informativ-rapport-view/informativ-rapport-view.component.scss b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/informativ-rapport-view/informativ-rapport-view.component.scss
new file mode 100644
index 0000000..ba30d9d
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/informativ-rapport-view/informativ-rapport-view.component.scss
@@ -0,0 +1,15 @@
+@import 'mixins/list';
+@import 'variables/gutters';
+
+.informativ-rapport-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/informativ-rapport-view/informativ-rapport-view.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/informativ-rapport-view/informativ-rapport-view.component.spec.ts
new file mode 100644
index 0000000..f5e122b
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/informativ-rapport-view/informativ-rapport-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 { InformativRapportViewComponent } from './informativ-rapport-view.component';
+import { InformativRapportViewService } from './informativ-rapport-view.service';
+
+describe('InformativRapportViewComponent', () => {
+  let component: InformativRapportViewComponent;
+  let fixture: ComponentFixture<InformativRapportViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [InformativRapportViewComponent, LayoutComponent],
+      imports: [RouterTestingModule, HttpClientTestingModule],
+      providers: [InformativRapportViewService],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InformativRapportViewComponent);
+    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/informativ-rapport-view/informativ-rapport-view.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/informativ-rapport-view/informativ-rapport-view.component.ts
new file mode 100644
index 0000000..69a8b07
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/informativ-rapport-view/informativ-rapport-view.component.ts
@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Params } from '@msfa-models/api/params.model';
+import { Avrop } from '@msfa-models/avrop.model';
+import { InformativRapport } from '@msfa-models/informativ-rapport.model';
+import { Observable } from 'rxjs';
+import { map, shareReplay, switchMap } from 'rxjs/operators';
+import { InformativRapportViewService } from './informativ-rapport-view.service';
+
+@Component({
+  selector: 'msfa-informativ-rapport-view',
+  templateUrl: './informativ-rapport-view.component.html',
+  styleUrls: ['./informativ-rapport-view.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InformativRapportViewComponent {
+  params$: Observable<Params> = this.activatedRoute.params.pipe(
+    map(params => ({
+      handlingId: params.handlingId as string,
+      genomforandeReferens: params.genomforandeReferens as string,
+    }))
+  );
+  avrop$: Observable<Avrop> = this.params$.pipe(
+    switchMap(({ genomforandeReferens }) =>
+      this.informativRapportViewService.fetchAvropInformation$(+genomforandeReferens)
+    ),
+    shareReplay(1)
+  );
+  informativRapport$: Observable<InformativRapport> = this.params$.pipe(
+    switchMap(({ handlingId }) => this.informativRapportViewService.fetchInformativRapport$(handlingId as string)),
+    shareReplay(1)
+  );
+
+  constructor(
+    private informativRapportViewService: InformativRapportViewService,
+    private activatedRoute: ActivatedRoute
+  ) {}
+}
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/informativ-rapport-view/informativ-rapport-view.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/informativ-rapport-view/informativ-rapport-view.module.ts
new file mode 100644
index 0000000..4100c0c
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/informativ-rapport-view/informativ-rapport-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 { InformativRapportViewComponent } from './informativ-rapport-view.component';
+import { InformativRapportViewService } from './informativ-rapport-view.service';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [InformativRapportViewComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: InformativRapportViewComponent }]),
+    LayoutModule,
+    ReportLayoutModule,
+    BackLinkModule,
+    UiLoaderModule,
+    UiSkeletonModule,
+  ],
+  providers: [InformativRapportViewService],
+  exports: [InformativRapportViewComponent],
+})
+export class InformativRapportViewModule {}
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/informativ-rapport-view/informativ-rapport-view.service.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/informativ-rapport-view/informativ-rapport-view.service.ts
new file mode 100644
index 0000000..7f9da02
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/informativ-rapport-view/informativ-rapport-view.service.ts
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { Avrop } from '@msfa-models/avrop.model';
+import { InformativRapport, mapResponseToInformativRapport } from '@msfa-models/informativ-rapport.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';
+
+@Injectable()
+export class InformativRapportViewService {
+  constructor(private handlingarApiService: HandlingarApiService, private deltagareApiService: DeltagareApiService) {}
+
+  public fetchAvropInformation$(genomforandeReferens: number): Observable<Avrop> {
+    return this.deltagareApiService.fetchAvropInformation$(genomforandeReferens);
+  }
+
+  public fetchInformativRapport$(handlingId: string): Observable<InformativRapport> {
+    return this.handlingarApiService
+      .fetchInformativRapport$(handlingId)
+      .pipe(map(({ data }) => mapResponseToInformativRapport(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 dc2723e..de7c1ef 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
@@ -5,4 +5,6 @@ export enum ReportType {
   Avvikelse = 'Avvikelserapport (avvikelse)',
   Franvaro = 'Avvikelserapport (frånvaro)',
   PeriodiskRedovisning = 'Periodisk redovisning',
+  InformativRapport = 'Informativ rapport',
+  InformativRedovisning = 'Informativ rapport',
 }
diff --git a/apps/mina-sidor-fa/src/app/shared/models/api/informativ-rapport.response.model.ts b/apps/mina-sidor-fa/src/app/shared/models/api/informativ-rapport.response.model.ts
index 40abf2c..31c146c 100644
--- a/apps/mina-sidor-fa/src/app/shared/models/api/informativ-rapport.response.model.ts
+++ b/apps/mina-sidor-fa/src/app/shared/models/api/informativ-rapport.response.model.ts
@@ -1,6 +1,7 @@
 import { InformativRapportCategoryKey } from '@msfa-enums/informativ-rapport-category.enum';
 
 export interface InformativRapportResponse {
+  genomforandeReferens: number;
   category: InformativRapportCategoryKey;
   comment: string;
 }
diff --git a/apps/mina-sidor-fa/src/app/shared/models/informativ-rapport.model.ts b/apps/mina-sidor-fa/src/app/shared/models/informativ-rapport.model.ts
index bc1269e..94ef1aa 100644
--- a/apps/mina-sidor-fa/src/app/shared/models/informativ-rapport.model.ts
+++ b/apps/mina-sidor-fa/src/app/shared/models/informativ-rapport.model.ts
@@ -2,14 +2,16 @@ import { InformativRapportCategory } from '@msfa-enums/informativ-rapport-catego
 import { InformativRapportResponse } from './api/informativ-rapport.response.model';
 
 export interface InformativRapport {
+  genomforandeReferens: number;
   category: InformativRapportCategory;
   comment: string;
 }
 
 export function mapResponseToInformativRapport(data: InformativRapportResponse): InformativRapport {
-  const { category, comment } = data;
+  const { genomforandeReferens, category, comment } = data;
 
   return {
+    genomforandeReferens,
     category: InformativRapportCategory[category] as InformativRapportCategory,
     comment: comment,
   };
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 0215a6c..d477a82 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
@@ -4,6 +4,7 @@ import { environment } from '@msfa-environment';
 import { AvvikelseReportResponse } from '@msfa-models/api/avvikelse-response.model';
 import { FranvaroReportResponse } from '@msfa-models/api/franvaro-response.model';
 import { GemensamPlaneringResponse } from '@msfa-models/api/gemensam-planering.response.model';
+import { InformativRapportResponse } from '@msfa-models/api/informativ-rapport.response.model';
 import { Observable } from 'rxjs';
 
 @Injectable({
@@ -20,6 +21,12 @@ export class HandlingarApiService {
     );
   }
 
+  public fetchInformativRapport$(handlingId: string): Observable<{ data: InformativRapportResponse }> {
+    return this.httpClient.get<{ data: InformativRapportResponse }>(
+      `${this._apiBaseUrl}/informativ-rapport/${handlingId}`
+    );
+  }
+
   public fetchFranvaroReport$(handlingId: string): Observable<{ data: FranvaroReportResponse }> {
     return this.httpClient.get<{ data: FranvaroReportResponse }>(`${this._apiBaseUrl}/franvaro/${handlingId}`);
   }