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 ca2445e..eaecb2c 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
@@ -64,14 +64,24 @@ const routes: Routes = [
 activeFeatures.forEach(feature => {
   switch (feature) {
     case Feature.REPORTING_PERIODISK_REDOVISNING:
-      routes.push({
-        path: 'periodisk-redovisning',
-        data: { title: 'Skapa Periodisk redovisning' },
-        loadChildren: () =>
-          import('./pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module').then(
-            m => m.PeriodiskRedovisningFormModule
-          ),
-      });
+      routes.push(
+        {
+          path: 'periodisk-redovisning',
+          data: { title: 'Skapa Periodisk redovisning' },
+          loadChildren: () =>
+            import('./pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.module').then(
+              m => m.PeriodiskRedovisningFormModule
+            ),
+        },
+        {
+          path: 'periodisk-redovisning/:handlingId',
+          data: { title: 'Periodisk redovisning' },
+          loadChildren: () =>
+            import('./pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.module').then(
+              m => m.PeriodiskRedovisningViewModule
+            ),
+        }
+      );
       break;
     case Feature.REPORTING_SIGNAL:
       routes.push({
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.service.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.service.ts
index b2bc273..c1f1247 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.service.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-forms/periodisk-redovisning-form/periodisk-redovisning-form.service.ts
@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
 import { Avrop } from '@msfa-models/avrop.model';
-import { PeriodiskRedovisning } from '@msfa-models/periodisk-redovisning.model';
 import { DeltagareApiService } from '@msfa-services/api/deltagare.api.service';
 import { PeriodiskRedovisningApiService } from '@msfa-services/api/periodisk-redovisning.api.service';
 import { Observable } from 'rxjs';
@@ -13,14 +12,6 @@ export class PeriodiskRedovisningFormService {
     private deltagareApiService: DeltagareApiService
   ) {}
 
-  fetchPeriodiskRedovisning$(
-    periodStart: string,
-    periodEnd: string,
-    genomforandeReferens: number
-  ): Observable<PeriodiskRedovisning> {
-    return this.periodiskRedovisningApiService.fetchPeriodiskRedovisning$(periodStart, periodEnd, genomforandeReferens);
-  }
-
   fetchAvropInformation$(genomforandeReferens: number): Observable<Avrop> {
     return this.deltagareApiService.fetchAvropInformation$(genomforandeReferens);
   }
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/avvikelse-report-view/avvikelse-report-view.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/avvikelse-report-view/avvikelse-report-view.component.ts
index 7172e21..d0bb49e 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/avvikelse-report-view/avvikelse-report-view.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/avvikelse-report-view/avvikelse-report-view.component.ts
@@ -16,7 +16,7 @@ import { AvvikelseReportViewService } from './avvikelse-report-view.service';
 export class AvvikelseReportViewComponent {
   params$: Observable<Params> = this.activatedRoute.params.pipe(
     map(params => ({
-      reportId: params.reportId as string,
+      handlingId: params.handlingId as string,
       genomforandeReferens: params.genomforandeReferens as string,
     }))
   );
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/franvaro-report-view/franvaro-report-view.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/franvaro-report-view/franvaro-report-view.component.ts
index 60a9d3c..8829baf 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/franvaro-report-view/franvaro-report-view.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/franvaro-report-view/franvaro-report-view.component.ts
@@ -16,7 +16,7 @@ import { FranvaroReportViewService } from './franvaro-report-view.service';
 export class FranvaroReportViewComponent {
   params$: Observable<Params> = this.activatedRoute.params.pipe(
     map(params => ({
-      reportId: params.reportId as string,
+      handlingId: params.handlingId as string,
       genomforandeReferens: params.genomforandeReferens as string,
     }))
   );
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/gemensam-planering-view/gemensam-planering-view.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/gemensam-planering-view/gemensam-planering-view.component.ts
index 2196fb2..484168e 100644
--- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/gemensam-planering-view/gemensam-planering-view.component.ts
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/gemensam-planering-view/gemensam-planering-view.component.ts
@@ -16,7 +16,7 @@ import { GemensamPlaneringViewService } from './gemensam-planering-view.service'
 export class GemensamPlaneringViewComponent {
   params$: Observable<Params> = this.activatedRoute.params.pipe(
     map(params => ({
-      reportId: params.reportId as string,
+      handlingId: params.handlingId as string,
       genomforandeReferens: params.genomforandeReferens as string,
     }))
   );
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.html b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.html
new file mode 100644
index 0000000..da752db
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.html
@@ -0,0 +1,42 @@
+<msfa-layout>
+  <msfa-report-layout
+    *ngIf="avrop$ | async as avrop; else skeletonRef"
+    reportTitle="Periodisk redovisning"
+    [avrop]="avrop"
+  >
+    <div class="periodisk-redovisning-view" *ngIf="periodiskRedovisning$ | async as report; else loadingRef">
+      <dl>
+        <dt>Har ni under perioden tillhandahållit språkstöd till deltagaren?</dt>
+        <dd>{{report.hasOfferedLanguageSupport ? 'Ja' : 'Nej' }}</dd>
+
+        <dt>Har ni lämnat individuella förslag på lämpliga arbeten att söka till deltagaren?</dt>
+        <dd>{{report.hasOfferedJob ? 'Ja' : 'Nej' }}</dd>
+
+        <dt>Aktiviteter</dt>
+        <dd>
+          <ul class="periodisk-redovisning-view__activity-list">
+            <li class="periodisk-redovisning-view__activity-item" *ngFor="let activity of report.activities">
+              <digi-icon-check-circle
+                class="msfa__digi-icon periodisk-redovisning-view__activity-check"
+                aria-hidden="true"
+              ></digi-icon-check-circle>
+              {{activity.name}}: {{ activity.performedRemotely && activity.performedPhysically ? 'På distans och på
+              plats' : activity.performedRemotely ? 'På distans' : 'På plats'}}
+            </li>
+          </ul>
+        </dd>
+      </dl>
+      <footer class="periodisk-redovisning-view__footer">
+        <msfa-back-link route="../../">Tillbaka till deltagaren</msfa-back-link>
+      </footer>
+    </div>
+  </msfa-report-layout>
+</msfa-layout>
+
+<ng-template #skeletonRef>
+  <digi-ng-skeleton-base [afCount]="3" afText="Laddar Gemensam planering"></digi-ng-skeleton-base>
+</ng-template>
+
+<ng-template #loadingRef>
+  <msfa-loader type="padded"></msfa-loader>
+</ng-template>
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.scss b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.scss
new file mode 100644
index 0000000..c513080
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.scss
@@ -0,0 +1,31 @@
+@import 'mixins/list';
+@import 'variables/gutters';
+
+.periodisk-redovisning-view {
+  max-width: var(--digi--typography--text--max-width);
+  display: flex;
+  flex-direction: column;
+  gap: $digi--layout--gutter--l;
+
+  &__activity-list {
+    @include msfa__reset-list;
+    margin-bottom: var(--digi--layout--gutter--s);
+  }
+
+  &__activity-item {
+    display: flex;
+    align-items: center;
+    gap: var(--digi--layout--gutter--s);
+    margin-top: var(--digi--layout--gutter--s);
+  }
+
+  &__activity-check {
+    color: var(--digi--ui--color--border--success);
+  }
+
+  &__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/periodisk-redovisning-view/periodisk-redovisning-view.component.spec.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.spec.ts
new file mode 100644
index 0000000..3a9775d
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-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 { PeriodiskRedovisningViewComponent } from './periodisk-redovisning-view.component';
+import { PeriodiskRedovisningViewService } from './periodisk-redovisning-view.service';
+
+describe('GemensamPlaneringViewComponent', () => {
+  let component: PeriodiskRedovisningViewComponent;
+  let fixture: ComponentFixture<PeriodiskRedovisningViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [PeriodiskRedovisningViewComponent, LayoutComponent],
+      imports: [RouterTestingModule, HttpClientTestingModule],
+      providers: [PeriodiskRedovisningViewService],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PeriodiskRedovisningViewComponent);
+    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/periodisk-redovisning-view/periodisk-redovisning-view.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.ts
new file mode 100644
index 0000000..ce26b0d
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.component.ts
@@ -0,0 +1,41 @@
+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 { Observable } from 'rxjs';
+import { map, shareReplay, switchMap } from 'rxjs/operators';
+import { PeriodiskRedovisningViewService } from './periodisk-redovisning-view.service';
+import { PeriodiskRedovisning } from '@msfa-models/periodisk-redovisning.model';
+
+@Component({
+  selector: 'msfa-periodisk-redovisning-view',
+  templateUrl: './periodisk-redovisning-view.component.html',
+  styleUrls: ['./periodisk-redovisning-view.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PeriodiskRedovisningViewComponent {
+  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.periodiskRedovisningViewService.fetchAvropInformation$(+genomforandeReferens)
+    ),
+    shareReplay(1)
+  );
+
+  periodiskRedovisning$: Observable<PeriodiskRedovisning> = this.params$.pipe(
+    switchMap(({ handlingId }) =>
+      this.periodiskRedovisningViewService.fetchPeriodiskRedovisning$(handlingId as string)
+    ),
+    shareReplay(1)
+  );
+
+  constructor(
+    private periodiskRedovisningViewService: PeriodiskRedovisningViewService,
+    private activatedRoute: ActivatedRoute
+  ) {}
+}
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.module.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.module.ts
new file mode 100644
index 0000000..9ec3930
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.module.ts
@@ -0,0 +1,29 @@
+import { DigiNgSkeletonBaseModule } from '@af/digi-ng/_skeleton/skeleton-base';
+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 { HideTextModule } from '@msfa-shared/components/hide-text/hide-text.module';
+import { LayoutModule } from '@msfa-shared/components/layout/layout.module';
+import { LoaderModule } from '@msfa-shared/components/loader/loader.module';
+import { ReportLayoutModule } from '../../../components/report-layout/report-layout.module';
+import { PeriodiskRedovisningViewComponent } from './periodisk-redovisning-view.component';
+import { PeriodiskRedovisningViewService } from './periodisk-redovisning-view.service';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  declarations: [PeriodiskRedovisningViewComponent],
+  imports: [
+    CommonModule,
+    RouterModule.forChild([{ path: '', component: PeriodiskRedovisningViewComponent }]),
+    LayoutModule,
+    ReportLayoutModule,
+    BackLinkModule,
+    LoaderModule,
+    HideTextModule,
+    DigiNgSkeletonBaseModule,
+  ],
+  providers: [PeriodiskRedovisningViewService],
+  exports: [PeriodiskRedovisningViewComponent],
+})
+export class PeriodiskRedovisningViewModule {}
diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.service.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.service.ts
new file mode 100644
index 0000000..537e496
--- /dev/null
+++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-details/pages/report-views/periodisk-redovisning-view/periodisk-redovisning-view.service.ts
@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import { Avrop } from '@msfa-models/avrop.model';
+import { Observable } from 'rxjs';
+import { PeriodiskRedovisning } from '@msfa-models/periodisk-redovisning.model';
+import { PeriodiskRedovisningApiService } from '@msfa-services/api/periodisk-redovisning.api.service';
+import { DeltagareApiService } from '@msfa-services/api/deltagare.api.service';
+
+@Injectable()
+export class PeriodiskRedovisningViewService {
+  constructor(
+    private periodiskRedovisningApiService: PeriodiskRedovisningApiService,
+    private deltagareApiService: DeltagareApiService
+  ) {}
+
+  public fetchAvropInformation$(genomforandeReferens: number): Observable<Avrop> {
+    return this.deltagareApiService.fetchAvropInformation$(genomforandeReferens);
+  }
+
+  public fetchPeriodiskRedovisning$(handlingId: string): Observable<PeriodiskRedovisning> {
+    return this.periodiskRedovisningApiService.fetchPeriodiskRedovisning$(handlingId);
+  }
+}
diff --git a/apps/mina-sidor-fa/src/app/shared/models/api/periodisk-redovisning.response.model.ts b/apps/mina-sidor-fa/src/app/shared/models/api/periodisk-redovisning.response.model.ts
index 0807691..36d0206 100644
--- a/apps/mina-sidor-fa/src/app/shared/models/api/periodisk-redovisning.response.model.ts
+++ b/apps/mina-sidor-fa/src/app/shared/models/api/periodisk-redovisning.response.model.ts
@@ -1,7 +1,8 @@
 export interface PeriodiskRedovisningActivityResponse {
-  activityId: number;
-  activityName: string;
+  id: number;
+  name: string;
   performedRemotely: boolean;
+  performedPhysically: boolean;
 }
 
 export interface PeriodiskRedovisningResponse {
@@ -20,19 +21,22 @@ export function mockOnePeriodiskRedovisningResponse(): PeriodiskRedovisningRespo
     period: '2021-10',
     activities: [
       {
-        activityId: 24,
-        activityName: 'Aktivitet 1',
+        id: 24,
+        name: 'Aktivitet 1',
         performedRemotely: false,
+        performedPhysically: true,
       },
       {
-        activityId: 19,
-        activityName: 'Aktivitet 5',
+        id: 19,
+        name: 'Aktivitet 2',
         performedRemotely: true,
+        performedPhysically: false,
       },
       {
-        activityId: 31,
-        activityName: 'Aktivitet 5',
+        id: 31,
+        name: 'Aktivitet 3',
         performedRemotely: true,
+        performedPhysically: true,
       },
     ],
   };
diff --git a/apps/mina-sidor-fa/src/app/shared/models/periodisk-redovisning.model.ts b/apps/mina-sidor-fa/src/app/shared/models/periodisk-redovisning.model.ts
index d0a18b2..17e7b14 100644
--- a/apps/mina-sidor-fa/src/app/shared/models/periodisk-redovisning.model.ts
+++ b/apps/mina-sidor-fa/src/app/shared/models/periodisk-redovisning.model.ts
@@ -1,9 +1,10 @@
 import { PeriodiskRedovisningResponse } from './api/periodisk-redovisning.response.model';
 
 export interface PeriodiskRedovisningActivity {
-  activityId: number;
-  activityName: string;
+  id: number;
+  name: string;
   performedRemotely: boolean;
+  performedPhysically: boolean;
 }
 
 export interface PeriodiskRedovisning {
diff --git a/apps/mina-sidor-fa/src/app/shared/services/api/periodisk-redovisning.api.service.ts b/apps/mina-sidor-fa/src/app/shared/services/api/periodisk-redovisning.api.service.ts
index 22e2a14..9fb70f4 100644
--- a/apps/mina-sidor-fa/src/app/shared/services/api/periodisk-redovisning.api.service.ts
+++ b/apps/mina-sidor-fa/src/app/shared/services/api/periodisk-redovisning.api.service.ts
@@ -2,7 +2,6 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { ErrorType } from '@msfa-enums/error-type.enum';
 import { environment } from '@msfa-environment';
-import { Params } from '@msfa-models/api/params.model';
 import { PeriodiskRedovisningRequest } from '@msfa-models/api/periodisk-redovisning.request.model';
 import {
   mockOnePeriodiskRedovisningResponse,
@@ -11,7 +10,7 @@ import {
 import { CustomError } from '@msfa-models/error/custom-error';
 import { mapResponseToPeriodiskRedovisning, PeriodiskRedovisning } from '@msfa-models/periodisk-redovisning.model';
 import { Observable, of } from 'rxjs';
-import { catchError, map } from 'rxjs/operators';
+import { catchError, delay, map } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root',
@@ -21,17 +20,8 @@ export class PeriodiskRedovisningApiService {
 
   constructor(private httpClient: HttpClient) {}
 
-  public fetchPeriodiskRedovisning$(
-    periodStart: string,
-    periodEnd: string,
-    genomforandeReferens: number
-  ): Observable<PeriodiskRedovisning> {
-    const params: Params = {
-      genomforandeReferens: genomforandeReferens.toString(),
-      periodStart,
-      periodEnd,
-    };
-    return of(mapResponseToPeriodiskRedovisning(mockOnePeriodiskRedovisningResponse()));
+  public fetchPeriodiskRedovisning$(handlingId: string): Observable<PeriodiskRedovisning> {
+    return of(mapResponseToPeriodiskRedovisning(mockOnePeriodiskRedovisningResponse())).pipe(delay(59));
     // return this.httpClient
     //   .get<{ data: PeriodiskRedovisningResponse }>(`${this._apiBaseUrl}`, { params })
     //   .pipe(map(({ data }) => (data ? mapResponseToPeriodiskRedovisning(data) : null)));