diff --git a/apps/judicial-system/backend/src/app/formatters/confirmedIndictmentPdf.ts b/apps/judicial-system/backend/src/app/formatters/confirmedIndictmentPdf.ts
index 1c663df0edfd..f5798cf30849 100644
--- a/apps/judicial-system/backend/src/app/formatters/confirmedIndictmentPdf.ts
+++ b/apps/judicial-system/backend/src/app/formatters/confirmedIndictmentPdf.ts
@@ -4,14 +4,14 @@ import { formatDate, lowercase } from '@island.is/judicial-system/formatters'
 
 import {
   calculatePt,
+  Confirmation,
   drawTextWithEllipsisPDFKit,
-  IndictmentConfirmation,
   smallFontSize,
 } from './pdfHelpers'
 import { PDFKitCoatOfArms } from './PDFKitCoatOfArms'
 
 export const createConfirmedIndictment = async (
-  confirmation: IndictmentConfirmation,
+  confirmation: Confirmation,
   indictmentPDF: Buffer,
 ): Promise<Buffer> => {
   const pdfDoc = await PDFDocument.load(indictmentPDF)
diff --git a/apps/judicial-system/backend/src/app/formatters/index.ts b/apps/judicial-system/backend/src/app/formatters/index.ts
index 084da81ca6b5..120d7279c56e 100644
--- a/apps/judicial-system/backend/src/app/formatters/index.ts
+++ b/apps/judicial-system/backend/src/app/formatters/index.ts
@@ -29,7 +29,7 @@ export {
   formatPostponedCourtDateEmailNotification,
   stripHtmlTags,
 } from './formatters'
-export { IndictmentConfirmation } from './pdfHelpers'
+export { Confirmation } from './pdfHelpers'
 export { getRequestPdfAsBuffer, getRequestPdfAsString } from './requestPdf'
 export { getRulingPdfAsBuffer, getRulingPdfAsString } from './rulingPdf'
 export { createCaseFilesRecord } from './caseFilesRecordPdf'
diff --git a/apps/judicial-system/backend/src/app/formatters/indictmentPdf.ts b/apps/judicial-system/backend/src/app/formatters/indictmentPdf.ts
index c19da2711a7f..5ab70b81c81a 100644
--- a/apps/judicial-system/backend/src/app/formatters/indictmentPdf.ts
+++ b/apps/judicial-system/backend/src/app/formatters/indictmentPdf.ts
@@ -16,7 +16,7 @@ import {
   addNormalPlusJustifiedText,
   addNormalPlusText,
   addNormalText,
-  IndictmentConfirmation,
+  Confirmation,
   setTitle,
 } from './pdfHelpers'
 
@@ -52,7 +52,7 @@ const roman = (num: number) => {
 export const createIndictment = async (
   theCase: Case,
   formatMessage: FormatMessage,
-  confirmation?: IndictmentConfirmation,
+  confirmation?: Confirmation,
 ): Promise<Buffer> => {
   const doc = new PDFDocument({
     size: 'A4',
diff --git a/apps/judicial-system/backend/src/app/formatters/pdfHelpers.ts b/apps/judicial-system/backend/src/app/formatters/pdfHelpers.ts
index d348032ebc35..4f44aa249e93 100644
--- a/apps/judicial-system/backend/src/app/formatters/pdfHelpers.ts
+++ b/apps/judicial-system/backend/src/app/formatters/pdfHelpers.ts
@@ -5,7 +5,7 @@ import { formatDate, lowercase } from '@island.is/judicial-system/formatters'
 import { coatOfArms } from './coatOfArms'
 import { policeStar } from './policeStar'
 
-export interface IndictmentConfirmation {
+export interface Confirmation {
   actor: string
   title?: string
   institution: string
@@ -22,6 +22,10 @@ export const largeFontSize = 18
 export const hugeFontSize = 26
 export const giganticFontSize = 33
 
+const lightGray = '#FAFAFA'
+const darkGray = '#CBCBCB'
+const gold = '#ADA373'
+
 const setFont = (doc: PDFKit.PDFDocument, font?: string) => {
   if (font) {
     doc.font(font)
@@ -106,13 +110,105 @@ export const addPoliceStar = (doc: PDFKit.PDFDocument) => {
   doc.scale(25).translate(-270, -70)
 }
 
+export const addConfirmation = (
+  doc: PDFKit.PDFDocument,
+  confirmation: Confirmation,
+) => {
+  const pageMargin = calculatePt(18)
+  const shaddowHeight = calculatePt(70)
+  const coatOfArmsWidth = calculatePt(105)
+  const coatOfArmsX = pageMargin + calculatePt(8)
+  const titleHeight = calculatePt(24)
+  const titleX = coatOfArmsX + coatOfArmsWidth + calculatePt(8)
+  const institutionWidth = calculatePt(160)
+  const confirmedByWidth = institutionWidth + calculatePt(48)
+  const shaddowWidth = institutionWidth + confirmedByWidth + coatOfArmsWidth
+  const titleWidth = institutionWidth + confirmedByWidth
+
+  // Draw the shadow
+  doc
+    .rect(pageMargin, pageMargin + calculatePt(8), shaddowWidth, shaddowHeight)
+    .fill(lightGray)
+    .stroke()
+
+  // Draw the coat of arms
+  doc
+    .rect(coatOfArmsX, pageMargin, coatOfArmsWidth, shaddowHeight)
+    .fillAndStroke('white', darkGray)
+
+  addCoatOfArms(doc, calculatePt(49), calculatePt(24))
+
+  // Draw the title
+  doc
+    .rect(coatOfArmsX + coatOfArmsWidth, pageMargin, titleWidth, titleHeight)
+    .fillAndStroke(lightGray, darkGray)
+  doc.fill('black')
+  doc.font('Times-Bold')
+  doc
+    .fontSize(calculatePt(smallFontSize))
+    .text('Réttarvörslugátt', titleX, pageMargin + calculatePt(9))
+  doc.font('Times-Roman')
+  // The X value here is approx. 8px after the title
+  doc.text('Rafræn staðfesting', calculatePt(210), pageMargin + calculatePt(9))
+  doc.text(
+    formatDate(confirmation.date) || '',
+    shaddowWidth - calculatePt(24),
+    pageMargin + calculatePt(9),
+  )
+
+  // Draw the institution
+  doc
+    .rect(
+      coatOfArmsX + coatOfArmsWidth,
+      pageMargin + titleHeight,
+      institutionWidth,
+      shaddowHeight - titleHeight,
+    )
+    .fillAndStroke('white', darkGray)
+  doc.fill('black')
+  doc.font('Times-Bold')
+  doc.text('Dómstóll', titleX, pageMargin + titleHeight + calculatePt(10))
+  doc.font('Times-Roman')
+  drawTextWithEllipsis(
+    doc,
+    confirmation.institution,
+    titleX,
+    pageMargin + titleHeight + calculatePt(22),
+    institutionWidth - calculatePt(16),
+  )
+
+  // Draw the actor
+  doc
+    .rect(
+      coatOfArmsX + coatOfArmsWidth + institutionWidth,
+      pageMargin + titleHeight,
+      confirmedByWidth,
+      shaddowHeight - titleHeight,
+    )
+    .fillAndStroke('white', darkGray)
+  doc.fill('black')
+  doc.font('Times-Bold')
+  doc.text(
+    'Samþykktaraðili',
+    titleX + institutionWidth,
+    pageMargin + titleHeight + calculatePt(10),
+  )
+  doc.font('Times-Roman')
+  doc.text(
+    `${confirmation.actor}${
+      confirmation.title ? `, ${lowercase(confirmation.title)}` : ''
+    }`,
+    titleX + institutionWidth,
+    pageMargin + titleHeight + calculatePt(22),
+  )
+
+  doc.fillColor('black')
+}
+
 export const addIndictmentConfirmation = (
   doc: PDFKit.PDFDocument,
-  confirmation: IndictmentConfirmation,
+  confirmation: Confirmation,
 ) => {
-  const lightGray = '#FAFAFA'
-  const darkGray = '#CBCBCB'
-  const gold = '#ADA373'
   const pageMargin = calculatePt(18)
   const shaddowHeight = calculatePt(90)
   const coatOfArmsWidth = calculatePt(105)
diff --git a/apps/judicial-system/backend/src/app/formatters/subpoenaPdf.ts b/apps/judicial-system/backend/src/app/formatters/subpoenaPdf.ts
index 313088079040..4af8001053e8 100644
--- a/apps/judicial-system/backend/src/app/formatters/subpoenaPdf.ts
+++ b/apps/judicial-system/backend/src/app/formatters/subpoenaPdf.ts
@@ -13,6 +13,7 @@ import { subpoena as strings } from '../messages'
 import { Case } from '../modules/case'
 import { Defendant } from '../modules/defendant'
 import {
+  addConfirmation,
   addEmptyLines,
   addFooter,
   addHugeHeading,
@@ -49,6 +50,11 @@ export const createSubpoena = (
   doc.on('data', (chunk) => sinc.push(chunk))
 
   setTitle(doc, formatMessage(strings.title))
+
+  if (dateLog) {
+    addEmptyLines(doc, 5)
+  }
+
   addNormalText(doc, `${theCase.court?.name}`, 'Times-Bold', true)
 
   addNormalRightAlignedText(
@@ -148,6 +154,15 @@ export const createSubpoena = (
 
   addFooter(doc)
 
+  if (dateLog) {
+    addConfirmation(doc, {
+      actor: theCase.judge?.name || '',
+      title: theCase.judge?.title,
+      institution: theCase.judge?.institution?.name || '',
+      date: dateLog.created,
+    })
+  }
+
   doc.end()
 
   return new Promise<Buffer>((resolve) =>
diff --git a/apps/judicial-system/backend/src/app/modules/case/case.controller.ts b/apps/judicial-system/backend/src/app/modules/case/case.controller.ts
index cca384ac525a..7b0da96f91d1 100644
--- a/apps/judicial-system/backend/src/app/modules/case/case.controller.ts
+++ b/apps/judicial-system/backend/src/app/modules/case/case.controller.ts
@@ -68,7 +68,7 @@ import {
   prosecutorRule,
   publicProsecutorStaffRule,
 } from '../../guards'
-import { CaseEvent, EventService } from '../event'
+import { EventService } from '../event'
 import { UserService } from '../user'
 import { CreateCaseDto } from './dto/createCase.dto'
 import { TransitionCaseDto } from './dto/transitionCase.dto'
@@ -99,8 +99,8 @@ import {
   prosecutorUpdateRule,
   publicProsecutorStaffUpdateRule,
 } from './guards/rolesRules'
-import { CaseInterceptor } from './interceptors/case.interceptor'
 import { CaseListInterceptor } from './interceptors/caseList.interceptor'
+import { CompletedAppealAccessedInterceptor } from './interceptors/completedAppealAccessed.interceptor'
 import { Case } from './models/case.model'
 import { SignatureConfirmationResponse } from './models/signatureConfirmation.response'
 import { transitionCase } from './state/case.state'
@@ -465,7 +465,7 @@ export class CaseController {
   )
   @Get('case/:caseId')
   @ApiOkResponse({ type: Case, description: 'Gets an existing case' })
-  @UseInterceptors(CaseInterceptor)
+  @UseInterceptors(CompletedAppealAccessedInterceptor)
   getById(@Param('caseId') caseId: string, @CurrentCase() theCase: Case): Case {
     this.logger.debug(`Getting case ${caseId} by id`)
 
@@ -545,6 +545,7 @@ export class CaseController {
   @RolesRules(
     prosecutorRule,
     prosecutorRepresentativeRule,
+    publicProsecutorStaffRule,
     districtCourtJudgeRule,
     districtCourtRegistrarRule,
     districtCourtAssistantRule,
@@ -700,6 +701,7 @@ export class CaseController {
   @RolesRules(
     prosecutorRule,
     prosecutorRepresentativeRule,
+    publicProsecutorStaffRule,
     districtCourtJudgeRule,
     districtCourtRegistrarRule,
     districtCourtAssistantRule,
diff --git a/apps/judicial-system/backend/src/app/modules/case/case.service.ts b/apps/judicial-system/backend/src/app/modules/case/case.service.ts
index 65a7daca3a84..eabf3a6cee0b 100644
--- a/apps/judicial-system/backend/src/app/modules/case/case.service.ts
+++ b/apps/judicial-system/backend/src/app/modules/case/case.service.ts
@@ -56,7 +56,7 @@ import {
 import { AwsS3Service } from '../aws-s3'
 import { CourtService } from '../court'
 import { Defendant, DefendantService } from '../defendant'
-import { CaseEvent, EventService } from '../event'
+import { EventService } from '../event'
 import { EventLog, EventLogService } from '../event-log'
 import { CaseFile, FileService } from '../file'
 import { IndictmentCount } from '../indictment-count'
diff --git a/apps/judicial-system/backend/src/app/modules/case/guards/limitedAccessCaseExists.guard.ts b/apps/judicial-system/backend/src/app/modules/case/guards/limitedAccessCaseExists.guard.ts
index 460480edf5f8..f92e78361b74 100644
--- a/apps/judicial-system/backend/src/app/modules/case/guards/limitedAccessCaseExists.guard.ts
+++ b/apps/judicial-system/backend/src/app/modules/case/guards/limitedAccessCaseExists.guard.ts
@@ -14,7 +14,7 @@ export class LimitedAccessCaseExistsGuard implements CanActivate {
   async canActivate(context: ExecutionContext): Promise<boolean> {
     const request = context.switchToHttp().getRequest()
 
-    const caseId = request.params.caseId
+    const caseId: string = request.params.caseId
 
     if (!caseId) {
       throw new BadRequestException('Missing case id')
diff --git a/apps/judicial-system/backend/src/app/modules/case/interceptors/caseFile.interceptor.ts b/apps/judicial-system/backend/src/app/modules/case/interceptors/caseFile.interceptor.ts
new file mode 100644
index 000000000000..d7d74fb30a5c
--- /dev/null
+++ b/apps/judicial-system/backend/src/app/modules/case/interceptors/caseFile.interceptor.ts
@@ -0,0 +1,53 @@
+import { Observable } from 'rxjs'
+import { map } from 'rxjs/operators'
+
+import {
+  CallHandler,
+  ExecutionContext,
+  Injectable,
+  NestInterceptor,
+} from '@nestjs/common'
+
+import {
+  CaseAppealState,
+  CaseFileCategory,
+  isDefenceUser,
+  isPrisonStaffUser,
+  isPrisonSystemUser,
+  User,
+} from '@island.is/judicial-system/types'
+
+import { Case } from '../models/case.model'
+
+@Injectable()
+export class CaseFileInterceptor implements NestInterceptor {
+  intercept(context: ExecutionContext, next: CallHandler): Observable<Case> {
+    const request = context.switchToHttp().getRequest()
+    const user: User = request.user
+
+    return next.handle().pipe(
+      map((data: Case) => {
+        if (isDefenceUser(user)) {
+          return data
+        }
+
+        if (
+          isPrisonStaffUser(user) ||
+          data.appealState !== CaseAppealState.COMPLETED
+        ) {
+          data.caseFiles?.splice(0, data.caseFiles.length)
+        } else if (isPrisonSystemUser(user)) {
+          data.caseFiles?.splice(
+            0,
+            data.caseFiles.length,
+            ...data.caseFiles.filter(
+              (cf) => cf.category === CaseFileCategory.APPEAL_RULING,
+            ),
+          )
+        }
+
+        return data
+      }),
+    )
+  }
+}
diff --git a/apps/judicial-system/backend/src/app/modules/case/interceptors/case.interceptor.ts b/apps/judicial-system/backend/src/app/modules/case/interceptors/completedAppealAccessed.interceptor.ts
similarity index 94%
rename from apps/judicial-system/backend/src/app/modules/case/interceptors/case.interceptor.ts
rename to apps/judicial-system/backend/src/app/modules/case/interceptors/completedAppealAccessed.interceptor.ts
index 6beab2bc3915..5ff8d84bff3f 100644
--- a/apps/judicial-system/backend/src/app/modules/case/interceptors/case.interceptor.ts
+++ b/apps/judicial-system/backend/src/app/modules/case/interceptors/completedAppealAccessed.interceptor.ts
@@ -20,7 +20,7 @@ import { EventLogService } from '../../event-log'
 import { Case } from '../models/case.model'
 
 @Injectable()
-export class CaseInterceptor implements NestInterceptor {
+export class CompletedAppealAccessedInterceptor implements NestInterceptor {
   constructor(private readonly eventLogService: EventLogService) {}
 
   intercept(context: ExecutionContext, next: CallHandler): Observable<Case> {
diff --git a/apps/judicial-system/backend/src/app/modules/case/internalCase.controller.ts b/apps/judicial-system/backend/src/app/modules/case/internalCase.controller.ts
index 9149585ce497..0d73789d2686 100644
--- a/apps/judicial-system/backend/src/app/modules/case/internalCase.controller.ts
+++ b/apps/judicial-system/backend/src/app/modules/case/internalCase.controller.ts
@@ -23,7 +23,7 @@ import {
   restrictionCases,
 } from '@island.is/judicial-system/types'
 
-import { CaseEvent, EventService } from '../event'
+import { EventService } from '../event'
 import { DeliverDto } from './dto/deliver.dto'
 import { DeliverCancellationNoticeDto } from './dto/deliverCancellationNotice.dto'
 import { InternalCasesDto } from './dto/internalCases.dto'
diff --git a/apps/judicial-system/backend/src/app/modules/case/internalCase.service.ts b/apps/judicial-system/backend/src/app/modules/case/internalCase.service.ts
index ebee2422a741..235d74f860a0 100644
--- a/apps/judicial-system/backend/src/app/modules/case/internalCase.service.ts
+++ b/apps/judicial-system/backend/src/app/modules/case/internalCase.service.ts
@@ -53,7 +53,7 @@ import { AwsS3Service } from '../aws-s3'
 import { CourtDocumentFolder, CourtService } from '../court'
 import { courtSubtypes } from '../court/court.service'
 import { Defendant, DefendantService } from '../defendant'
-import { CaseEvent, EventService } from '../event'
+import { EventService } from '../event'
 import { CaseFile, FileService } from '../file'
 import { IndictmentCount, IndictmentCountService } from '../indictment-count'
 import { Institution } from '../institution'
diff --git a/apps/judicial-system/backend/src/app/modules/case/limitedAccessCase.controller.ts b/apps/judicial-system/backend/src/app/modules/case/limitedAccessCase.controller.ts
index 7e17c55bab85..42c90d58ec5e 100644
--- a/apps/judicial-system/backend/src/app/modules/case/limitedAccessCase.controller.ts
+++ b/apps/judicial-system/backend/src/app/modules/case/limitedAccessCase.controller.ts
@@ -40,7 +40,7 @@ import {
 
 import { nowFactory } from '../../factories'
 import { defenderRule, prisonSystemStaffRule } from '../../guards'
-import { CaseEvent, EventService } from '../event'
+import { EventService } from '../event'
 import { User } from '../user'
 import { TransitionCaseDto } from './dto/transitionCase.dto'
 import { UpdateCaseDto } from './dto/updateCase.dto'
@@ -53,7 +53,8 @@ import { CaseWriteGuard } from './guards/caseWrite.guard'
 import { LimitedAccessCaseExistsGuard } from './guards/limitedAccessCaseExists.guard'
 import { RequestSharedWithDefenderGuard } from './guards/requestSharedWithDefender.guard'
 import { defenderTransitionRule, defenderUpdateRule } from './guards/rolesRules'
-import { CaseInterceptor } from './interceptors/case.interceptor'
+import { CaseFileInterceptor } from './interceptors/caseFile.interceptor'
+import { CompletedAppealAccessedInterceptor } from './interceptors/completedAppealAccessed.interceptor'
 import { Case } from './models/case.model'
 import { transitionCase } from './state/case.state'
 import {
@@ -85,7 +86,7 @@ export class LimitedAccessCaseController {
     type: Case,
     description: 'Gets a limited set of properties of an existing case',
   })
-  @UseInterceptors(CaseInterceptor)
+  @UseInterceptors(CompletedAppealAccessedInterceptor, CaseFileInterceptor)
   async getById(
     @Param('caseId') caseId: string,
     @CurrentCase() theCase: Case,
diff --git a/apps/judicial-system/backend/src/app/modules/case/pdf.service.ts b/apps/judicial-system/backend/src/app/modules/case/pdf.service.ts
index 8289b8d636ec..6b956856ebb1 100644
--- a/apps/judicial-system/backend/src/app/modules/case/pdf.service.ts
+++ b/apps/judicial-system/backend/src/app/modules/case/pdf.service.ts
@@ -22,6 +22,7 @@ import {
 } from '@island.is/judicial-system/types'
 
 import {
+  Confirmation,
   createCaseFilesRecord,
   createIndictment,
   createSubpoena,
@@ -29,7 +30,6 @@ import {
   getCustodyNoticePdfAsBuffer,
   getRequestPdfAsBuffer,
   getRulingPdfAsBuffer,
-  IndictmentConfirmation,
 } from '../../formatters'
 import { AwsS3Service } from '../aws-s3'
 import { Defendant } from '../defendant'
@@ -206,7 +206,7 @@ export class PdfService {
       )
     }
 
-    let confirmation: IndictmentConfirmation | undefined = undefined
+    let confirmation: Confirmation | undefined = undefined
 
     if (hasIndictmentCaseBeenSubmittedToCourt(theCase.state)) {
       if (theCase.indictmentHash) {
diff --git a/apps/judicial-system/backend/src/app/modules/case/test/caseController/getCaseFilesRecordPdfRolesRules.spec.ts b/apps/judicial-system/backend/src/app/modules/case/test/caseController/getCaseFilesRecordPdfRolesRules.spec.ts
index 98e04d53d4f8..05822ae9a72c 100644
--- a/apps/judicial-system/backend/src/app/modules/case/test/caseController/getCaseFilesRecordPdfRolesRules.spec.ts
+++ b/apps/judicial-system/backend/src/app/modules/case/test/caseController/getCaseFilesRecordPdfRolesRules.spec.ts
@@ -4,6 +4,7 @@ import {
   districtCourtRegistrarRule,
   prosecutorRepresentativeRule,
   prosecutorRule,
+  publicProsecutorStaffRule,
 } from '../../../../guards'
 import { CaseController } from '../../case.controller'
 
@@ -19,9 +20,10 @@ describe('CaseController - Get case files record pdf rules', () => {
   })
 
   it('should give permission to roles', () => {
-    expect(rules).toHaveLength(5)
+    expect(rules).toHaveLength(6)
     expect(rules).toContain(prosecutorRule)
     expect(rules).toContain(prosecutorRepresentativeRule)
+    expect(rules).toContain(publicProsecutorStaffRule)
     expect(rules).toContain(districtCourtJudgeRule)
     expect(rules).toContain(districtCourtRegistrarRule)
     expect(rules).toContain(districtCourtAssistantRule)
diff --git a/apps/judicial-system/backend/src/app/modules/case/test/caseController/getIndictmentPdfRolesRules.spec.ts b/apps/judicial-system/backend/src/app/modules/case/test/caseController/getIndictmentPdfRolesRules.spec.ts
index 170857ab4dca..6fee0d26b903 100644
--- a/apps/judicial-system/backend/src/app/modules/case/test/caseController/getIndictmentPdfRolesRules.spec.ts
+++ b/apps/judicial-system/backend/src/app/modules/case/test/caseController/getIndictmentPdfRolesRules.spec.ts
@@ -4,6 +4,7 @@ import {
   districtCourtRegistrarRule,
   prosecutorRepresentativeRule,
   prosecutorRule,
+  publicProsecutorStaffRule,
 } from '../../../../guards'
 import { CaseController } from '../../case.controller'
 
@@ -19,9 +20,10 @@ describe('CaseController - Get indictment pdf rules', () => {
   })
 
   it('should give permission to roles', () => {
-    expect(rules).toHaveLength(5)
+    expect(rules).toHaveLength(6)
     expect(rules).toContain(prosecutorRule)
     expect(rules).toContain(prosecutorRepresentativeRule)
+    expect(rules).toContain(publicProsecutorStaffRule)
     expect(rules).toContain(districtCourtJudgeRule)
     expect(rules).toContain(districtCourtRegistrarRule)
     expect(rules).toContain(districtCourtAssistantRule)
diff --git a/apps/judicial-system/backend/src/app/modules/file/file.controller.ts b/apps/judicial-system/backend/src/app/modules/file/file.controller.ts
index f507d84863e2..340d782f767b 100644
--- a/apps/judicial-system/backend/src/app/modules/file/file.controller.ts
+++ b/apps/judicial-system/backend/src/app/modules/file/file.controller.ts
@@ -37,6 +37,7 @@ import {
   prisonSystemStaffRule,
   prosecutorRepresentativeRule,
   prosecutorRule,
+  publicProsecutorStaffRule,
 } from '../../guards'
 import {
   Case,
@@ -133,6 +134,7 @@ export class FileController {
   @RolesRules(
     prosecutorRule,
     prosecutorRepresentativeRule,
+    publicProsecutorStaffRule,
     districtCourtJudgeRule,
     districtCourtRegistrarRule,
     districtCourtAssistantRule,
diff --git a/apps/judicial-system/backend/src/app/modules/file/guards/caseFileCategory.ts b/apps/judicial-system/backend/src/app/modules/file/guards/caseFileCategory.ts
index 5455ad7976b0..2d8d88353f35 100644
--- a/apps/judicial-system/backend/src/app/modules/file/guards/caseFileCategory.ts
+++ b/apps/judicial-system/backend/src/app/modules/file/guards/caseFileCategory.ts
@@ -22,3 +22,5 @@ export const defenderCaseFileCategoriesForIndictmentCases = [
   CaseFileCategory.PROSECUTOR_CASE_FILE,
   CaseFileCategory.DEFENDANT_CASE_FILE,
 ]
+
+export const prisonAdminCaseFileCategories = [CaseFileCategory.APPEAL_RULING]
diff --git a/apps/judicial-system/backend/src/app/modules/file/guards/limitedAccessViewCaseFile.guard.ts b/apps/judicial-system/backend/src/app/modules/file/guards/limitedAccessViewCaseFile.guard.ts
index 3526675d6902..a8c2f8295ea7 100644
--- a/apps/judicial-system/backend/src/app/modules/file/guards/limitedAccessViewCaseFile.guard.ts
+++ b/apps/judicial-system/backend/src/app/modules/file/guards/limitedAccessViewCaseFile.guard.ts
@@ -7,11 +7,10 @@ import {
 } from '@nestjs/common'
 
 import {
-  CaseFileCategory,
   isCompletedCase,
   isDefenceUser,
   isIndictmentCase,
-  isPrisonSystemUser,
+  isPrisonAdminUser,
   isRequestCase,
   User,
 } from '@island.is/judicial-system/types'
@@ -21,6 +20,7 @@ import { CaseFile } from '../models/file.model'
 import {
   defenderCaseFileCategoriesForIndictmentCases,
   defenderCaseFileCategoriesForRestrictionAndInvestigationCases,
+  prisonAdminCaseFileCategories,
 } from './caseFileCategory'
 
 @Injectable()
@@ -65,14 +65,13 @@ export class LimitedAccessViewCaseFileGuard implements CanActivate {
       }
     }
 
-    if (isPrisonSystemUser(user)) {
-      if (
-        isCompletedCase(theCase.state) &&
-        caseFile.category &&
-        caseFile.category === CaseFileCategory.APPEAL_RULING
-      ) {
-        return true
-      }
+    if (
+      caseFile.category &&
+      isCompletedCase(theCase.state) &&
+      isPrisonAdminUser(user) &&
+      prisonAdminCaseFileCategories.includes(caseFile.category)
+    ) {
+      return true
     }
 
     throw new ForbiddenException(`Forbidden for ${user.role}`)
diff --git a/apps/judicial-system/backend/src/app/modules/file/guards/test/limitedAccessViewCaseFileGuard.spec.ts b/apps/judicial-system/backend/src/app/modules/file/guards/test/limitedAccessViewCaseFileGuard.spec.ts
index dd31ac1d7816..e4e7672dc2d6 100644
--- a/apps/judicial-system/backend/src/app/modules/file/guards/test/limitedAccessViewCaseFileGuard.spec.ts
+++ b/apps/judicial-system/backend/src/app/modules/file/guards/test/limitedAccessViewCaseFileGuard.spec.ts
@@ -229,27 +229,19 @@ describe('Limited Access View Case File Guard', () => {
         describe.each(allowedCaseFileCategories)(
           'prison system users can view %s',
           (category) => {
-            let thenPrison: Then
             let thenPrisonAdmin: Then
 
             beforeEach(() => {
-              mockRequest.mockImplementationOnce(() => ({
-                user: prisonUser,
-                case: { type, state },
-                caseFile: { category },
-              }))
               mockRequest.mockImplementationOnce(() => ({
                 user: prisonAdminUser,
                 case: { type, state },
                 caseFile: { category },
               }))
 
-              thenPrison = givenWhenThen()
               thenPrisonAdmin = givenWhenThen()
             })
 
             it('should activate', () => {
-              expect(thenPrison.result).toBe(true)
               expect(thenPrisonAdmin.result).toBe(true)
             })
           },
diff --git a/apps/judicial-system/backend/src/app/modules/file/guards/test/viewCaseFileGuard.spec.ts b/apps/judicial-system/backend/src/app/modules/file/guards/test/viewCaseFileGuard.spec.ts
index d27014f8a5d1..e29e254f3c2d 100644
--- a/apps/judicial-system/backend/src/app/modules/file/guards/test/viewCaseFileGuard.spec.ts
+++ b/apps/judicial-system/backend/src/app/modules/file/guards/test/viewCaseFileGuard.spec.ts
@@ -12,6 +12,7 @@ import {
   districtCourtRoles,
   InstitutionType,
   prosecutionRoles,
+  publicProsecutorRoles,
   User,
   UserRole,
 } from '@island.is/judicial-system/types'
@@ -210,6 +211,59 @@ describe('View Case File Guard', () => {
     })
   })
 
+  describe.each(publicProsecutorRoles)('role %s', (role) => {
+    describe.each(completedCaseStates)('%s cases', (state) => {
+      let then: Then
+
+      beforeEach(() => {
+        mockRequest.mockImplementationOnce(() => ({
+          user: {
+            role,
+            institution: {
+              type: InstitutionType.PROSECUTORS_OFFICE,
+              id: '8f9e2f6d-6a00-4a5e-b39b-95fd110d762e',
+            },
+          },
+          case: { state },
+        }))
+
+        then = givenWhenThen()
+      })
+
+      it('should activate', () => {
+        expect(then.result).toBe(true)
+      })
+    })
+
+    describe.each(
+      Object.values(CaseState).filter(
+        (state) => !completedCaseStates.includes(state),
+      ),
+    )('%s cases', (state) => {
+      let then: Then
+
+      beforeEach(() => {
+        mockRequest.mockImplementationOnce(() => ({
+          user: {
+            role,
+            institution: {
+              type: InstitutionType.PROSECUTORS_OFFICE,
+              id: '8f9e2f6d-6a00-4a5e-b39b-95fd110d762e',
+            },
+          },
+          case: { state },
+        }))
+
+        then = givenWhenThen()
+      })
+
+      it('should throw ForbiddenException', () => {
+        expect(then.error).toBeInstanceOf(ForbiddenException)
+        expect(then.error.message).toBe(`Forbidden for ${role}`)
+      })
+    })
+  })
+
   describe.each(Object.keys(CaseState))('in state %s', (state) => {
     describe.each(
       Object.keys(UserRole).filter(
diff --git a/apps/judicial-system/backend/src/app/modules/file/guards/viewCaseFile.guard.ts b/apps/judicial-system/backend/src/app/modules/file/guards/viewCaseFile.guard.ts
index 466cfb67357e..dd00dfcdcbaa 100644
--- a/apps/judicial-system/backend/src/app/modules/file/guards/viewCaseFile.guard.ts
+++ b/apps/judicial-system/backend/src/app/modules/file/guards/viewCaseFile.guard.ts
@@ -14,6 +14,7 @@ import {
   isDistrictCourtUser,
   isPrisonSystemUser,
   isProsecutionUser,
+  isPublicProsecutorUser,
   User,
 } from '@island.is/judicial-system/types'
 
@@ -44,6 +45,10 @@ export class ViewCaseFileGuard implements CanActivate {
       return true
     }
 
+    if (isPublicProsecutorUser(user) && isCompletedCase(theCase.state)) {
+      return true
+    }
+
     if (
       isDistrictCourtUser(user) &&
       ([CaseState.SUBMITTED, CaseState.RECEIVED].includes(theCase.state) ||
diff --git a/apps/judicial-system/backend/src/app/modules/file/test/fileController/getCaseFileSignedUrlRolesRules.spec.ts b/apps/judicial-system/backend/src/app/modules/file/test/fileController/getCaseFileSignedUrlRolesRules.spec.ts
index dd24bcd6d265..86d57470734e 100644
--- a/apps/judicial-system/backend/src/app/modules/file/test/fileController/getCaseFileSignedUrlRolesRules.spec.ts
+++ b/apps/judicial-system/backend/src/app/modules/file/test/fileController/getCaseFileSignedUrlRolesRules.spec.ts
@@ -8,6 +8,7 @@ import {
   prisonSystemStaffRule,
   prosecutorRepresentativeRule,
   prosecutorRule,
+  publicProsecutorStaffRule,
 } from '../../../../guards'
 import { FileController } from '../../file.controller'
 
@@ -23,9 +24,10 @@ describe('FileController - Get case file signed url rules', () => {
   })
 
   it('should give permission to roles', () => {
-    expect(rules).toHaveLength(9)
+    expect(rules).toHaveLength(10)
     expect(rules).toContain(prosecutorRule)
     expect(rules).toContain(prosecutorRepresentativeRule)
+    expect(rules).toContain(publicProsecutorStaffRule)
     expect(rules).toContain(districtCourtJudgeRule)
     expect(rules).toContain(districtCourtRegistrarRule)
     expect(rules).toContain(districtCourtAssistantRule)
diff --git a/apps/judicial-system/backend/src/app/modules/file/test/limitedAccessFileController/createPresignedPostGuards.spec.ts b/apps/judicial-system/backend/src/app/modules/file/test/limitedAccessFileController/createPresignedPostGuards.spec.ts
index 310e6b9f70c2..fcb2e12d9efd 100644
--- a/apps/judicial-system/backend/src/app/modules/file/test/limitedAccessFileController/createPresignedPostGuards.spec.ts
+++ b/apps/judicial-system/backend/src/app/modules/file/test/limitedAccessFileController/createPresignedPostGuards.spec.ts
@@ -4,11 +4,7 @@ import {
   restrictionCases,
 } from '@island.is/judicial-system/types'
 
-import {
-  CaseCompletedGuard,
-  CaseTypeGuard,
-  CaseWriteGuard,
-} from '../../../case'
+import { CaseTypeGuard, CaseWriteGuard } from '../../../case'
 import { LimitedAccessFileController } from '../../limitedAccessFile.controller'
 
 describe('LimitedAccessFileController - Create presigned post guards', () => {
diff --git a/apps/judicial-system/backend/src/app/modules/notification/internalNotification.service.ts b/apps/judicial-system/backend/src/app/modules/notification/internalNotification.service.ts
index 2c6aa5278d6d..ebce85337c80 100644
--- a/apps/judicial-system/backend/src/app/modules/notification/internalNotification.service.ts
+++ b/apps/judicial-system/backend/src/app/modules/notification/internalNotification.service.ts
@@ -73,10 +73,9 @@ import {
 } from '../../formatters'
 import { notifications } from '../../messages'
 import { type Case, DateLog } from '../case'
-import { ExplanatoryComment } from '../case/models/explanatoryComment.model'
 import { CourtService } from '../court'
 import { type Defendant, DefendantService } from '../defendant'
-import { CaseEvent, EventService } from '../event'
+import { EventService } from '../event'
 import { DeliverResponse } from './models/deliver.response'
 import { Notification, Recipient } from './models/notification.model'
 import { BaseNotificationService } from './baseNotification.service'
diff --git a/apps/judicial-system/backend/src/app/modules/notification/notification.service.ts b/apps/judicial-system/backend/src/app/modules/notification/notification.service.ts
index 8a9e78671c95..8103b1106f14 100644
--- a/apps/judicial-system/backend/src/app/modules/notification/notification.service.ts
+++ b/apps/judicial-system/backend/src/app/modules/notification/notification.service.ts
@@ -11,7 +11,7 @@ import { type User } from '@island.is/judicial-system/types'
 import { CaseState, NotificationType } from '@island.is/judicial-system/types'
 
 import { type Case } from '../case'
-import { CaseEvent, EventService } from '../event'
+import { EventService } from '../event'
 import { SendNotificationResponse } from './models/sendNotification.response'
 
 @Injectable()
diff --git a/apps/judicial-system/web/src/components/IndictmentCaseFilesList/IndictmentCaseFilesList.spec.tsx b/apps/judicial-system/web/src/components/IndictmentCaseFilesList/IndictmentCaseFilesList.spec.tsx
index fdb75baa1555..65ec62d224ed 100644
--- a/apps/judicial-system/web/src/components/IndictmentCaseFilesList/IndictmentCaseFilesList.spec.tsx
+++ b/apps/judicial-system/web/src/components/IndictmentCaseFilesList/IndictmentCaseFilesList.spec.tsx
@@ -1,7 +1,6 @@
 import { render, screen } from '@testing-library/react'
 
 import {
-  CaseDecision,
   CaseFileCategory,
   CaseType,
 } from '@island.is/judicial-system-web/src/graphql/schema'
diff --git a/apps/native/app/src/messages/en.ts b/apps/native/app/src/messages/en.ts
index 389df9de9346..57df2e066d8d 100644
--- a/apps/native/app/src/messages/en.ts
+++ b/apps/native/app/src/messages/en.ts
@@ -490,8 +490,8 @@ export const en: TranslatedMessages = {
   'edit.phone.inputlabel': 'Phone number',
   'edit.phone.button': 'Save',
   'edit.phone.button.empty': 'Save empty',
-  'edit.phone.button.error': 'Error',
-  'edit.phone.button.errorMessage': 'Could not send verification code',
+  'edit.phone.error': 'Error',
+  'edit.phone.errorMessage': 'Could not send verification code',
 
   // edit email
   'edit.email.screenTitle': 'Edit Email',
@@ -499,8 +499,8 @@ export const en: TranslatedMessages = {
   'edit.email.inputlabel': 'Email',
   'edit.email.button': 'Save',
   'edit.email.button.empty': 'Save empty',
-  'edit.email.button.error': 'Error',
-  'edit.email.button.errorMessage': 'Could not send verification code',
+  'edit.email.error': 'Error',
+  'edit.email.errorMessage': 'Could not send verification code',
 
   // edit bank info
   'edit.bankinfo.screenTitle': 'Edit Bank Info',
@@ -510,6 +510,8 @@ export const en: TranslatedMessages = {
   'edit.bankinfo.inputlabel.book': 'Hb.',
   'edit.bankinfo.inputlabel.number': 'Account number',
   'edit.bankinfo.button': 'Save',
+  'edit.bankinfo.error': 'Error',
+  'edit.bankinfo.errorMessage': 'Could not save bank info',
 
   // edit confirm
   'edit.confirm.screenTitle': 'Confirm edit',
@@ -523,6 +525,8 @@ export const en: TranslatedMessages = {
   'edit.confirm.inputlabel': 'Security number',
   'edit.cancel.button': 'Cancel',
   'edit.confirm.button': 'Confirm',
+  'edit.confirm.error': 'Error',
+  'edit.confirm.errorMessage': 'Could not update information',
 
   // air discount
   'airDiscount.screenTitle': 'Air discount scheme',
diff --git a/apps/native/app/src/messages/is.ts b/apps/native/app/src/messages/is.ts
index 502f6f0ebc57..3af0414f90f1 100644
--- a/apps/native/app/src/messages/is.ts
+++ b/apps/native/app/src/messages/is.ts
@@ -490,8 +490,8 @@ export const is = {
   'edit.phone.inputlabel': 'Símanúmer',
   'edit.phone.button': 'Vista',
   'edit.phone.button.empty': 'Vista tómt',
-  'edit.phone.button.error': 'Villa',
-  'edit.phone.button.errorMessage': 'Gat ekki sent staðfestingarkóða',
+  'edit.phone.error': 'Villa',
+  'edit.phone.errorMessage': 'Gat ekki sent staðfestingarkóða',
 
   // edit email
   'edit.email.screenTitle': 'Breyta Netfangi',
@@ -499,8 +499,8 @@ export const is = {
   'edit.email.inputlabel': 'Netfang',
   'edit.email.button': 'Vista',
   'edit.email.button.empty': 'Vista tómt',
-  'edit.email.button.error': 'Villa',
-  'edit.email.button.errorMessage': 'Gat ekki sent staðfestingarkóða',
+  'edit.email.error': 'Villa',
+  'edit.email.errorMessage': 'Gat ekki sent staðfestingarkóða',
 
   // edit bank info
   'edit.bankinfo.screenTitle': 'Breyta banka upplýsingum',
@@ -510,6 +510,8 @@ export const is = {
   'edit.bankinfo.inputlabel.book': 'Hb.',
   'edit.bankinfo.inputlabel.number': 'Reikningsnúmer',
   'edit.bankinfo.button': 'Vista',
+  'edit.bankinfo.error': 'Villa',
+  'edit.bankinfo.errorMessage': 'Gat ekki vistað reikningsupplýsingar',
 
   // edit confirm
   'edit.confirm.screenTitle': 'Staðfesta aðgerð',
@@ -523,6 +525,8 @@ export const is = {
   'edit.confirm.inputlabel': 'Öryggisnúmer',
   'edit.cancel.button': 'Hætta við',
   'edit.confirm.button': 'Staðfesta',
+  'edit.confirm.error': 'Villa',
+  'edit.confirm.errorMessage': 'Gat ekki uppfært upplýsingar',
 
   // air discount
   'airDiscount.screenTitle': 'Loftbrú',
diff --git a/apps/native/app/src/screens/inbox/inbox.tsx b/apps/native/app/src/screens/inbox/inbox.tsx
index 6b97574ba2cc..6356e3f4c626 100644
--- a/apps/native/app/src/screens/inbox/inbox.tsx
+++ b/apps/native/app/src/screens/inbox/inbox.tsx
@@ -8,7 +8,6 @@ import {
   TopLine,
   InboxCard,
 } from '@ui'
-import { setBadgeCountAsync } from 'expo-notifications'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useIntl } from 'react-intl'
 import {
@@ -371,7 +370,6 @@ export const InboxScreen: NavigationFunctionComponent<{
         badgeColor: theme.color.red400,
       },
     })
-    setBadgeCountAsync(unreadCount)
   }, [intl, theme, unreadCount])
 
   const keyExtractor = useCallback((item: ListItem) => {
diff --git a/apps/native/app/src/screens/settings/edit-bank-info.tsx b/apps/native/app/src/screens/settings/edit-bank-info.tsx
index ea92a495db8e..a6de5f0f03e8 100644
--- a/apps/native/app/src/screens/settings/edit-bank-info.tsx
+++ b/apps/native/app/src/screens/settings/edit-bank-info.tsx
@@ -119,7 +119,7 @@ export const EditBankInfoScreen: NavigationFunctionComponent<any> = ({
                   })
 
                   if (!res.data) {
-                    throw new Error('Faild to update')
+                    throw new Error('Failed to update')
                   }
 
                   Navigation.dismissModal(componentId)
@@ -128,7 +128,10 @@ export const EditBankInfoScreen: NavigationFunctionComponent<any> = ({
                   throw new Error('Failed to update')
                 }
               } catch (e) {
-                Alert.alert('Villa', 'Gat ekki vistað reikningsupplýsingar')
+                Alert.alert(
+                  intl.formatMessage({ id: 'edit.bankinfo.error' }),
+                  intl.formatMessage({ id: 'edit.bankinfo.errorMessage' }),
+                )
               }
             }}
           />
diff --git a/apps/native/app/src/screens/settings/edit-confirm.tsx b/apps/native/app/src/screens/settings/edit-confirm.tsx
index a7e3c22a3527..c624d83e259a 100644
--- a/apps/native/app/src/screens/settings/edit-confirm.tsx
+++ b/apps/native/app/src/screens/settings/edit-confirm.tsx
@@ -53,10 +53,13 @@ export const EditConfirmScreen: NavigationFunctionComponent<any> = ({
           Navigation.dismissModal(parentComponentId)
         }
       } else {
-        throw new Error('Failed')
+        throw new Error('Failed to update profile')
       }
     } catch (e) {
-      Alert.alert('Villa', 'Gat ekki uppfært upplýsingar')
+      Alert.alert(
+        intl.formatMessage({ id: 'edit.confirm.error' }),
+        intl.formatMessage({ id: 'edit.confirm.errorMessage' }),
+      )
     }
     setLoading(false)
   }
diff --git a/apps/native/app/src/screens/settings/edit-email.tsx b/apps/native/app/src/screens/settings/edit-email.tsx
index b2d5a0df0020..12994c6d11f9 100644
--- a/apps/native/app/src/screens/settings/edit-email.tsx
+++ b/apps/native/app/src/screens/settings/edit-email.tsx
@@ -100,7 +100,6 @@ export const EditEmailScreen: NavigationFunctionComponent<{
                   })
                   if (res.data) {
                     Navigation.dismissModal(componentId)
-                    console.log(res.data, 'Uppfærði tómt netfang')
                   } else {
                     throw new Error('Failed to delete email')
                   }
diff --git a/apps/native/app/src/stores/notifications-store.ts b/apps/native/app/src/stores/notifications-store.ts
index 768a537b1ab6..37c673adca2e 100644
--- a/apps/native/app/src/stores/notifications-store.ts
+++ b/apps/native/app/src/stores/notifications-store.ts
@@ -18,6 +18,7 @@ import {
 } from '../graphql/types/schema'
 import { ComponentRegistry } from '../utils/component-registry'
 import { getRightButtons } from '../utils/get-main-root'
+import { setBadgeCountAsync } from 'expo-notifications'
 
 export interface Notification {
   id: string
@@ -114,6 +115,7 @@ export const notificationsStore = create<NotificationsStore>(
       },
       updateNavigationUnseenCount(unseenCount: number) {
         set({ unseenCount })
+        setBadgeCountAsync(unseenCount)
 
         Navigation.mergeOptions(ComponentRegistry.HomeScreen, {
           topBar: {
diff --git a/apps/native/app/src/ui/lib/accordion/accordion-item.tsx b/apps/native/app/src/ui/lib/accordion/accordion-item.tsx
index a2792cdaa45f..4305671910e2 100644
--- a/apps/native/app/src/ui/lib/accordion/accordion-item.tsx
+++ b/apps/native/app/src/ui/lib/accordion/accordion-item.tsx
@@ -98,7 +98,7 @@ export function AccordionItem({
         >
           <View style={{ flexDirection: 'row', alignItems: 'center' }}>
             {icon && <Icon>{icon}</Icon>}
-            <Typography variant="heading5">{title}</Typography>
+            <Typography variant="heading4">{title}</Typography>
           </View>
           <PlusMinus
             style={{
diff --git a/apps/native/app/src/ui/lib/checkbox/checkbox.tsx b/apps/native/app/src/ui/lib/checkbox/checkbox.tsx
index 763983b57df2..1d06146165a4 100644
--- a/apps/native/app/src/ui/lib/checkbox/checkbox.tsx
+++ b/apps/native/app/src/ui/lib/checkbox/checkbox.tsx
@@ -32,7 +32,7 @@ interface CheckboxProps {
 export const Checkbox = ({ label, checked, onPress }: CheckboxProps) => {
   return (
     <Host onPress={onPress} accessibilityRole="checkbox" accessible>
-      <Typography style={{ fontWeight: checked ? '600' : '400' }}>
+      <Typography style={{ fontWeight: checked ? '600' : '300' }}>
         {label}
       </Typography>
       <Image source={checked ? checkedIcon : uncheckedIcon} />
diff --git a/apps/web/components/Organization/MarkdownText/MarkdownText.tsx b/apps/web/components/Organization/MarkdownText/MarkdownText.tsx
index d2266de2df6c..a28544a9f807 100644
--- a/apps/web/components/Organization/MarkdownText/MarkdownText.tsx
+++ b/apps/web/components/Organization/MarkdownText/MarkdownText.tsx
@@ -1,17 +1,29 @@
+import React from 'react'
 import Markdown from 'markdown-to-jsx'
+
 import { Bullet, BulletList, Text, TextProps } from '@island.is/island-ui/core'
-import React from 'react'
+
 import * as styles from './MarkdownText.css'
 
 interface MarkdownTextProps {
   children: string
   color?: TextProps['color']
   variant?: TextProps['variant']
+  replaceNewLinesWithBreaks?: boolean
 }
 
 export const MarkdownText: React.FC<
   React.PropsWithChildren<MarkdownTextProps>
-> = ({ children, color = null, variant = 'default' }) => {
+> = ({
+  children,
+  color = null,
+  variant = 'default',
+  replaceNewLinesWithBreaks = true,
+}) => {
+  const processedChildren = replaceNewLinesWithBreaks
+    ? (children as string).replace(/\n/gi, '<br>')
+    : children
+
   return (
     <div className={styles.markdownText}>
       <Markdown
@@ -59,7 +71,7 @@ export const MarkdownText: React.FC<
           },
         }}
       >
-        {(children as string).replace(/\n/gi, '<br>')}
+        {processedChildren}
       </Markdown>
     </div>
   )
diff --git a/apps/web/components/connected/ParentalLeaveCalculator/ParentalLeaveCalculator.css.ts b/apps/web/components/connected/ParentalLeaveCalculator/ParentalLeaveCalculator.css.ts
new file mode 100644
index 000000000000..e7006fe6fb85
--- /dev/null
+++ b/apps/web/components/connected/ParentalLeaveCalculator/ParentalLeaveCalculator.css.ts
@@ -0,0 +1,7 @@
+import { style } from '@vanilla-extract/css'
+
+import { theme } from '@island.is/island-ui/theme'
+
+export const resultBorder = style({
+  border: `1px dashed ${theme.color.blue300}`,
+})
diff --git a/apps/web/components/connected/ParentalLeaveCalculator/ParentalLeaveCalculator.tsx b/apps/web/components/connected/ParentalLeaveCalculator/ParentalLeaveCalculator.tsx
new file mode 100644
index 000000000000..9132ba9f85f6
--- /dev/null
+++ b/apps/web/components/connected/ParentalLeaveCalculator/ParentalLeaveCalculator.tsx
@@ -0,0 +1,1089 @@
+import { type PropsWithChildren, useMemo, useRef, useState } from 'react'
+import { useIntl } from 'react-intl'
+import NumberFormat from 'react-number-format'
+import {
+  parseAsInteger,
+  parseAsString,
+  parseAsStringEnum,
+  useQueryState,
+} from 'next-usequerystate'
+import { z } from 'zod'
+
+import {
+  AlertMessage,
+  Box,
+  Button,
+  GridColumn,
+  GridRow,
+  Inline,
+  Input,
+  type Option,
+  RadioButton,
+  Select,
+  Stack,
+  Table,
+  Text,
+  Tooltip,
+} from '@island.is/island-ui/core'
+import { sortAlpha } from '@island.is/shared/utils'
+import type { ConnectedComponent } from '@island.is/web/graphql/schema'
+import { formatCurrency as formatCurrencyUtil } from '@island.is/web/utils/currency'
+
+import { MarkdownText } from '../../Organization'
+import { translations as t } from './translations.strings'
+import * as styles from './ParentalLeaveCalculator.css'
+
+interface FieldProps {
+  heading: string
+  headingTooltip?: string
+  description?: string
+  tooltip?: string
+}
+
+const Field = ({
+  heading,
+  headingTooltip,
+  description,
+  tooltip,
+  children,
+}: PropsWithChildren<FieldProps>) => {
+  return (
+    <Stack space={2}>
+      <Inline flexWrap="nowrap" space={1} alignY="center">
+        <Text variant="h3">{heading}</Text>
+        {headingTooltip && <Tooltip text={headingTooltip} />}
+      </Inline>
+      {description && (
+        <Text variant="medium">
+          {description}
+          {tooltip && <Tooltip text={tooltip} />}
+        </Text>
+      )}
+      {children}
+    </Stack>
+  )
+}
+
+enum Status {
+  PARENTAL_LEAVE = 'parentalLeave',
+  STUDENT = 'student',
+  OUTSIDE_WORKFORCE = 'outsideWorkForce',
+}
+
+enum WorkPercentage {
+  OPTION_1 = 'option1',
+  OPTION_2 = 'option2',
+}
+
+enum ParentalLeavePeriod {
+  MONTH = 'month',
+  THREE_WEEKS = 'threeWeeks',
+  TWO_WEEKS = 'twoWeeks',
+}
+
+enum Screen {
+  FORM = 'form',
+  RESULTS = 'results',
+}
+
+enum LegalDomicileInIceland {
+  YES = 'y',
+  NO = 'n',
+}
+
+interface ParentalLeaveCalculatorProps {
+  slice: ConnectedComponent
+}
+
+interface ScreenProps extends ParentalLeaveCalculatorProps {
+  changeScreen: () => void
+}
+
+const FormScreen = ({ slice, changeScreen }: ScreenProps) => {
+  const { formatMessage } = useIntl()
+
+  const statusOptions = useMemo<Option<Status>[]>(() => {
+    return [
+      {
+        label: formatMessage(t.status.parentalLeaveOption),
+        value: Status.PARENTAL_LEAVE,
+      },
+      {
+        label: formatMessage(t.status.studentOption),
+        value: Status.STUDENT,
+      },
+      {
+        label: formatMessage(t.status.outsideWorkforceOption),
+        value: Status.OUTSIDE_WORKFORCE,
+      },
+    ]
+  }, [formatMessage])
+
+  const yearOptions = useMemo<Option<number>[]>(() => {
+    const keys = Object.keys(slice.configJson?.yearConfig || {}).map(Number)
+    keys.sort()
+    return keys.map((key) => ({
+      label: String(key),
+      value: key,
+    }))
+  }, [slice.configJson?.yearConfig])
+
+  const additionalPensionFundingOptions = useMemo<
+    Option<number | null>[]
+  >(() => {
+    const options: number[] = slice.configJson
+      ?.additionalPensionFundingOptions ?? [1, 2, 3, 4]
+
+    return [
+      { value: null, label: formatMessage(t.additionalPensionFunding.none) },
+      ...options.map((option) => ({
+        label: `${option} ${formatMessage(
+          t.additionalPensionFunding.optionSuffix,
+        )}`,
+        value: option,
+      })),
+    ]
+  }, [formatMessage, slice.configJson?.additionalPensionFundingOptions])
+
+  const unionOptions = useMemo<Option<string | null>[]>(() => {
+    const options: { label: string; percentage: number }[] = slice.configJson
+      ?.unionOptions
+      ? [...slice.configJson.unionOptions]
+      : []
+
+    options.sort(sortAlpha('label'))
+
+    return [
+      {
+        value: null,
+        label: formatMessage(t.union.none),
+      },
+      ...options.map((option) => ({
+        label: option.label,
+        value: option.label,
+      })),
+    ]
+  }, [formatMessage, slice.configJson?.unionOptions])
+
+  const parentalLeavePeriodOptions = useMemo<Option<string>[]>(() => {
+    return [
+      {
+        label: formatMessage(t.parentalLeavePeriod.monthOption),
+        value: ParentalLeavePeriod.MONTH,
+      },
+      {
+        label: formatMessage(t.parentalLeavePeriod.threeWeeksOption),
+        value: ParentalLeavePeriod.THREE_WEEKS,
+      },
+      {
+        label: formatMessage(t.parentalLeavePeriod.twoWeeksOption),
+        value: ParentalLeavePeriod.TWO_WEEKS,
+      },
+    ]
+  }, [formatMessage])
+
+  const [status, setStatus] = useQueryState<Status>(
+    'status',
+    parseAsStringEnum(Object.values(Status)).withDefault(Status.PARENTAL_LEAVE),
+  )
+  const [birthyear, setBirthyear] = useQueryState('birthyear', parseAsInteger)
+  const [workPercentage, setWorkPercentage] = useQueryState(
+    'workPercentage',
+    parseAsStringEnum(Object.values(WorkPercentage)),
+  )
+  const [income, setIncome] = useQueryState('income', parseAsInteger)
+  const [
+    additionalPensionFundingPercentage,
+    setAdditionalPensionFundingPercentage,
+  ] = useQueryState('additionalPensionFunding', parseAsInteger)
+  const [union, setUnion] = useQueryState('union', parseAsString)
+  const [personalDiscount, setPersonalDiscount] = useQueryState(
+    'personalDiscount',
+    parseAsInteger.withDefault(100),
+  )
+  const [parentalLeavePeriod, setParentalLeavePeriod] = useQueryState(
+    'parentalLeavePeriod',
+    parseAsStringEnum(Object.values(ParentalLeavePeriod)),
+  )
+  const [parentalLeaveRatio, setParentalLeaveRatio] = useQueryState(
+    'parentalLeaveRatio',
+    parseAsInteger.withDefault(100),
+  )
+  const [legalDomicileInIceland, setLegalDomicileInIceland] = useQueryState(
+    'legalDomicileInIceland',
+    parseAsStringEnum(Object.values(LegalDomicileInIceland)),
+  )
+
+  const canCalculate = () => {
+    let value =
+      Object.values(Status).includes(status) &&
+      yearOptions.some((year) => year.value === birthyear)
+
+    if (status === Status.OUTSIDE_WORKFORCE) {
+      value = value && legalDomicileInIceland === LegalDomicileInIceland.YES
+    }
+
+    if (status === Status.PARENTAL_LEAVE) {
+      value =
+        value &&
+        typeof income === 'number' &&
+        income > 0 &&
+        !!workPercentage &&
+        Object.values(WorkPercentage).includes(workPercentage) &&
+        parentalLeavePeriodOptions.some(
+          (option) => option.value === parentalLeavePeriod,
+        )
+    }
+
+    return value
+  }
+
+  return (
+    <Box background="blue100" paddingY={[3, 3, 5]} paddingX={[3, 3, 3, 3, 12]}>
+      <Stack space={5}>
+        <Field heading={formatMessage(t.status.heading)}>
+          <Select
+            onChange={(option) => {
+              setStatus((option?.value as Status) ?? null)
+            }}
+            value={statusOptions.find((option) => option.value === status)}
+            label={formatMessage(t.status.label)}
+            options={statusOptions}
+          />
+        </Field>
+
+        {status === Status.OUTSIDE_WORKFORCE && (
+          <Field
+            heading={formatMessage(t.legalDomicile.heading)}
+            headingTooltip={formatMessage(t.legalDomicile.tooltip)}
+          >
+            <GridRow rowGap={1}>
+              <GridColumn span={['1/1', '1/2']}>
+                <RadioButton
+                  hasError={
+                    legalDomicileInIceland === LegalDomicileInIceland.NO
+                  }
+                  id={LegalDomicileInIceland.YES}
+                  onChange={() => {
+                    setLegalDomicileInIceland(LegalDomicileInIceland.YES)
+                  }}
+                  checked={
+                    legalDomicileInIceland === LegalDomicileInIceland.YES
+                  }
+                  value={LegalDomicileInIceland.YES}
+                  backgroundColor="white"
+                  large={true}
+                  label={formatMessage(t.legalDomicile.yes)}
+                />
+              </GridColumn>
+              <GridColumn span={['1/1', '1/2']}>
+                <RadioButton
+                  hasError={
+                    legalDomicileInIceland === LegalDomicileInIceland.NO
+                  }
+                  id={LegalDomicileInIceland.NO}
+                  onChange={() => {
+                    setLegalDomicileInIceland(LegalDomicileInIceland.NO)
+                  }}
+                  checked={legalDomicileInIceland === LegalDomicileInIceland.NO}
+                  value={LegalDomicileInIceland.NO}
+                  backgroundColor="white"
+                  large={true}
+                  label={formatMessage(t.legalDomicile.no)}
+                />
+              </GridColumn>
+            </GridRow>
+            {legalDomicileInIceland === LegalDomicileInIceland.NO && (
+              <Text fontWeight="semiBold" color="red400">
+                {formatMessage(t.legalDomicile.dontHaveRight)}
+              </Text>
+            )}
+          </Field>
+        )}
+
+        <Field
+          heading={formatMessage(t.childBirthYear.heading)}
+          description={formatMessage(t.childBirthYear.description)}
+        >
+          <Select
+            onChange={(option) => {
+              setBirthyear(option?.value ?? null)
+            }}
+            value={yearOptions.find((option) => option.value === birthyear)}
+            label={formatMessage(t.childBirthYear.label)}
+            options={yearOptions}
+          />
+        </Field>
+
+        {status === Status.PARENTAL_LEAVE && (
+          <Field
+            heading={formatMessage(t.workPercentage.heading)}
+            description={formatMessage(t.workPercentage.description)}
+            tooltip={formatMessage(t.workPercentage.tooltip)}
+          >
+            <GridRow rowGap={1}>
+              <GridColumn span={['1/1', '1/2']}>
+                <RadioButton
+                  id={WorkPercentage.OPTION_1}
+                  onChange={() => {
+                    setWorkPercentage(WorkPercentage.OPTION_1)
+                  }}
+                  checked={workPercentage === WorkPercentage.OPTION_1}
+                  value={WorkPercentage.OPTION_1}
+                  backgroundColor="white"
+                  large={true}
+                  label={formatMessage(t.workPercentage.option1)}
+                />
+              </GridColumn>
+              <GridColumn span={['1/1', '1/2']}>
+                <RadioButton
+                  id={WorkPercentage.OPTION_2}
+                  onChange={() => {
+                    setWorkPercentage(WorkPercentage.OPTION_2)
+                  }}
+                  checked={workPercentage === WorkPercentage.OPTION_2}
+                  value={WorkPercentage.OPTION_2}
+                  backgroundColor="white"
+                  large={true}
+                  label={formatMessage(t.workPercentage.option2)}
+                />
+              </GridColumn>
+            </GridRow>
+          </Field>
+        )}
+
+        {status === Status.PARENTAL_LEAVE && (
+          <Field
+            heading={formatMessage(t.income.heading)}
+            description={formatMessage(t.income.description)}
+          >
+            <NumberFormat
+              onValueChange={({ value }) => {
+                setIncome(Number(value))
+              }}
+              label={formatMessage(t.income.label)}
+              tooltip={formatMessage(t.income.tooltip)}
+              value={String(income || '')}
+              customInput={Input}
+              name="income"
+              id="income"
+              type="text"
+              inputMode="numeric"
+              thousandSeparator="."
+              decimalSeparator=","
+              suffix={formatMessage(t.income.inputSuffix)}
+              placeholder={formatMessage(t.income.inputPlaceholder)}
+              maxLength={
+                formatMessage(t.income.inputSuffix).length +
+                (slice.configJson?.incomeInputMaxLength ?? 12)
+              }
+            />
+          </Field>
+        )}
+
+        {status === Status.PARENTAL_LEAVE && (
+          <Field
+            heading={formatMessage(t.additionalPensionFunding.heading)}
+            description={formatMessage(t.additionalPensionFunding.description)}
+          >
+            <Select
+              onChange={(option) => {
+                setAdditionalPensionFundingPercentage(option?.value ?? null)
+              }}
+              value={additionalPensionFundingOptions.find(
+                (option) => option.value === additionalPensionFundingPercentage,
+              )}
+              label={formatMessage(t.additionalPensionFunding.label)}
+              options={additionalPensionFundingOptions}
+            />
+          </Field>
+        )}
+
+        {status === Status.PARENTAL_LEAVE && (
+          <Field
+            heading={formatMessage(t.union.heading)}
+            description={formatMessage(t.union.description)}
+          >
+            <Select
+              onChange={(option) => {
+                setUnion(option?.value ?? null)
+              }}
+              value={unionOptions.find((option) => option.value === union)}
+              label={formatMessage(t.union.label)}
+              options={unionOptions}
+            />
+          </Field>
+        )}
+
+        <Field
+          heading={formatMessage(t.personalDiscount.heading)}
+          description={formatMessage(t.personalDiscount.description)}
+        >
+          <NumberFormat
+            onValueChange={({ value }) => {
+              setPersonalDiscount(Number(value))
+            }}
+            label={formatMessage(t.personalDiscount.label)}
+            value={String(personalDiscount || '')}
+            customInput={Input}
+            name="personalDiscount"
+            id="personalDiscount"
+            type="text"
+            inputMode="numeric"
+            suffix={formatMessage(t.personalDiscount.suffix)}
+            placeholder={formatMessage(t.personalDiscount.placeholder)}
+            format={(value) => {
+              const maxPersonalDiscount =
+                slice.configJson?.maxPersonalDiscount ?? 100
+              if (Number(value) > maxPersonalDiscount) {
+                value = String(maxPersonalDiscount)
+              }
+              return `${value}${formatMessage(t.personalDiscount.suffix)}`
+            }}
+          />
+        </Field>
+
+        {status === Status.PARENTAL_LEAVE && (
+          <Field
+            heading={formatMessage(t.parentalLeavePeriod.heading)}
+            description={formatMessage(t.parentalLeavePeriod.description)}
+          >
+            <Select
+              onChange={(option) => {
+                setParentalLeavePeriod(
+                  (option?.value as ParentalLeavePeriod) ?? null,
+                )
+              }}
+              value={parentalLeavePeriodOptions.find(
+                (option) => option.value === parentalLeavePeriod,
+              )}
+              label={formatMessage(t.parentalLeavePeriod.label)}
+              options={parentalLeavePeriodOptions}
+            />
+          </Field>
+        )}
+
+        {status === Status.PARENTAL_LEAVE && (
+          <Field
+            heading={formatMessage(t.parentalLeaveRatio.heading)}
+            description={formatMessage(t.parentalLeaveRatio.description)}
+          >
+            <NumberFormat
+              onValueChange={({ value }) => {
+                setParentalLeaveRatio(Number(value))
+              }}
+              label={formatMessage(t.parentalLeaveRatio.label)}
+              value={String(parentalLeaveRatio || '')}
+              customInput={Input}
+              name="parentalLeaveRatio"
+              id="parentalLeaveRatio"
+              type="text"
+              inputMode="numeric"
+              suffix={formatMessage(t.parentalLeaveRatio.suffix)}
+              placeholder={formatMessage(t.parentalLeaveRatio.placeholder)}
+              format={(value) => {
+                const maxParentalLeaveRatio =
+                  slice.configJson?.maxParentalLeaveRatio ?? 100
+                if (Number(value) > maxParentalLeaveRatio) {
+                  value = String(maxParentalLeaveRatio)
+                }
+                return `${value}${formatMessage(t.parentalLeaveRatio.suffix)}`
+              }}
+            />
+          </Field>
+        )}
+
+        <Button disabled={!canCalculate()} onClick={changeScreen}>
+          {formatMessage(t.calculate.buttonText)}
+        </Button>
+      </Stack>
+    </Box>
+  )
+}
+
+const yearConfigSchema = z.object({
+  Persónuafsláttur: z.number(),
+  'Skattmörk þrep 1': z.number(),
+  'Skattmörk þrep 2': z.number(),
+  'Skattprósenta þrep 1': z.number(),
+  'Skattprósenta þrep 2': z.number(),
+  'Skattprósenta þrep 3': z.number(),
+  'Fæðingarstyrkur hærri': z.number(),
+  'Fæðingarstyrkur lægri': z.number(),
+  'Hlutfall fæðingarorlofs': z.number(),
+  'Fæðingarstyrkur almennur': z.number(),
+  'Fæðingarstyrkur námsmanna': z.number(),
+  'Hámarks laun fyrir fæðingarorlof': z.number(),
+  'Skyldu lífeyrir': z.number(),
+})
+
+const calculateResults = (
+  input: {
+    status: Status | null
+    income: number | null
+    personalDiscount: number | null
+    additionalPensionFundingPercentage: number | null
+    union: string | null
+    parentalLeavePeriod: ParentalLeavePeriod | null
+    parentalLeaveRatio: number | null
+    birthyear: number | null
+    workPercentage: WorkPercentage | null
+    legalDomicileInIceland: LegalDomicileInIceland | null
+  },
+  slice: ParentalLeaveCalculatorProps['slice'],
+) => {
+  const yearConfig = slice.configJson?.yearConfig?.[String(input.birthyear)]
+  const parseResult = yearConfigSchema.safeParse(yearConfig)
+  if (!parseResult.success) {
+    return null
+  }
+
+  const constants = {
+    personalDiscount: parseResult.data['Persónuafsláttur'],
+    taxBracket1: parseResult.data['Skattmörk þrep 1'],
+    taxBracket2: parseResult.data['Skattmörk þrep 2'],
+    taxRate1: parseResult.data['Skattprósenta þrep 1'],
+    taxRate2: parseResult.data['Skattprósenta þrep 2'],
+    taxRate3: parseResult.data['Skattprósenta þrep 3'],
+    parentalLeaveHigh: parseResult.data['Fæðingarstyrkur hærri'],
+    parentalLeaveLow: parseResult.data['Fæðingarstyrkur lægri'],
+    parentalLeaveRatio: parseResult.data['Hlutfall fæðingarorlofs'],
+    parentalLeaveGeneral: parseResult.data['Fæðingarstyrkur almennur'],
+    parentalLeaveStudent: parseResult.data['Fæðingarstyrkur námsmanna'],
+    maxIncome: parseResult.data['Hámarks laun fyrir fæðingarorlof'],
+    pensionFundingRequiredPercentage: parseResult.data['Skyldu lífeyrir'],
+  }
+
+  let mainResultBeforeDeduction = 0
+  let mainResultAfterDeduction = 0
+  let unionFee = 0
+  let totalTax = 0
+  let usedPersonalDiscount = 0
+  let additionalPensionFunding = 0
+  let pensionFunding = 0
+
+  if (input.status === Status.STUDENT) {
+    mainResultBeforeDeduction = constants.parentalLeaveStudent
+
+    let taxStep = 1
+
+    if (mainResultBeforeDeduction > constants.taxBracket1) {
+      taxStep = 2
+    } else if (mainResultBeforeDeduction > constants.taxBracket2) {
+      taxStep = 3
+    }
+
+    if (taxStep === 1) {
+      totalTax = mainResultBeforeDeduction * (constants.taxRate1 / 100)
+    } else if (taxStep === 2) {
+      totalTax = mainResultBeforeDeduction * (constants.taxRate2 / 100)
+    } else if (taxStep === 3) {
+      totalTax = mainResultBeforeDeduction * (constants.taxRate3 / 100)
+    }
+
+    usedPersonalDiscount =
+      constants.personalDiscount * ((input.personalDiscount ?? 100) / 100)
+
+    if (usedPersonalDiscount > totalTax) {
+      usedPersonalDiscount = totalTax
+    }
+
+    mainResultAfterDeduction = mainResultBeforeDeduction
+
+    mainResultAfterDeduction =
+      mainResultAfterDeduction - (totalTax - usedPersonalDiscount)
+  }
+
+  if (input.status === Status.OUTSIDE_WORKFORCE) {
+    mainResultBeforeDeduction = constants.parentalLeaveGeneral
+
+    let taxStep = 1
+
+    if (mainResultBeforeDeduction > constants.taxBracket1) {
+      taxStep = 2
+    } else if (mainResultBeforeDeduction > constants.taxBracket2) {
+      taxStep = 3
+    }
+
+    if (taxStep === 1) {
+      totalTax = mainResultBeforeDeduction * (constants.taxRate1 / 100)
+    } else if (taxStep === 2) {
+      totalTax = mainResultBeforeDeduction * (constants.taxRate2 / 100)
+    } else if (taxStep === 3) {
+      totalTax = mainResultBeforeDeduction * (constants.taxRate3 / 100)
+    }
+
+    usedPersonalDiscount =
+      constants.personalDiscount * ((input.personalDiscount ?? 100) / 100)
+
+    if (usedPersonalDiscount > totalTax) {
+      usedPersonalDiscount = totalTax
+    }
+
+    mainResultAfterDeduction = mainResultBeforeDeduction
+
+    mainResultAfterDeduction =
+      mainResultAfterDeduction - (totalTax - usedPersonalDiscount)
+  }
+
+  if (input.status === Status.PARENTAL_LEAVE) {
+    if (
+      typeof input.income !== 'number' ||
+      typeof input.parentalLeaveRatio !== 'number'
+    ) {
+      return null
+    }
+
+    mainResultBeforeDeduction =
+      input.income * (constants.parentalLeaveRatio / 100)
+
+    if (
+      input.workPercentage === WorkPercentage.OPTION_1 &&
+      mainResultBeforeDeduction < constants.parentalLeaveLow
+    ) {
+      mainResultBeforeDeduction = constants.parentalLeaveLow
+    } else if (
+      input.workPercentage === WorkPercentage.OPTION_2 &&
+      mainResultBeforeDeduction < constants.parentalLeaveHigh
+    ) {
+      mainResultBeforeDeduction = constants.parentalLeaveHigh
+    }
+
+    if (mainResultBeforeDeduction > constants.maxIncome) {
+      mainResultBeforeDeduction = constants.maxIncome
+    }
+
+    mainResultBeforeDeduction *= input.parentalLeaveRatio / 100
+
+    let paternityLeavePeriodMultiplier = 1
+
+    if (input.parentalLeavePeriod === ParentalLeavePeriod.THREE_WEEKS) {
+      paternityLeavePeriodMultiplier = 3 / 4
+    } else if (input.parentalLeavePeriod === ParentalLeavePeriod.TWO_WEEKS) {
+      paternityLeavePeriodMultiplier = 1 / 2
+    }
+
+    mainResultBeforeDeduction *= paternityLeavePeriodMultiplier
+
+    let taxStep = 1
+
+    if (mainResultBeforeDeduction > constants.taxBracket1) {
+      taxStep = 2
+    } else if (mainResultBeforeDeduction > constants.taxBracket2) {
+      taxStep = 3
+    }
+
+    if (taxStep === 1) {
+      totalTax = mainResultBeforeDeduction * (constants.taxRate1 / 100)
+    } else if (taxStep === 2) {
+      totalTax = mainResultBeforeDeduction * (constants.taxRate2 / 100)
+    } else if (taxStep === 3) {
+      totalTax = mainResultBeforeDeduction * (constants.taxRate3 / 100)
+    }
+
+    usedPersonalDiscount =
+      constants.personalDiscount *
+      ((input.personalDiscount ?? 0) / 100) *
+      paternityLeavePeriodMultiplier
+
+    if (usedPersonalDiscount > totalTax) {
+      usedPersonalDiscount = totalTax
+    }
+
+    additionalPensionFunding =
+      mainResultBeforeDeduction *
+      ((input.additionalPensionFundingPercentage ?? 0) / 100)
+
+    pensionFunding =
+      mainResultBeforeDeduction *
+      (constants.pensionFundingRequiredPercentage / 100)
+
+    const unionOptions: { label: string; percentage: number }[] =
+      slice.configJson?.unionOptions ?? []
+
+    unionFee =
+      mainResultBeforeDeduction *
+      ((unionOptions.find((option) => option.label === input.union)
+        ?.percentage ?? 0) /
+        100)
+
+    /* --- After deduction --- */
+    mainResultAfterDeduction = mainResultBeforeDeduction
+    mainResultAfterDeduction -= unionFee
+    mainResultAfterDeduction =
+      mainResultAfterDeduction - (totalTax - usedPersonalDiscount)
+    mainResultAfterDeduction -= additionalPensionFunding
+    mainResultAfterDeduction -= pensionFunding
+  }
+
+  return {
+    results: {
+      mainResultBeforeDeduction,
+      mainResultAfterDeduction,
+      unionFee,
+      pensionFunding,
+      totalTax,
+      usedPersonalDiscount,
+      additionalPensionFunding,
+    },
+    constants,
+  }
+}
+
+const ResultsScreen = ({ slice, changeScreen }: ScreenProps) => {
+  const { formatMessage } = useIntl()
+
+  const [status] = useQueryState<Status>(
+    'status',
+    parseAsStringEnum(Object.values(Status)).withDefault(Status.PARENTAL_LEAVE),
+  )
+  const [birthyear] = useQueryState('birthyear', parseAsInteger)
+  const [workPercentage] = useQueryState(
+    'workPercentage',
+    parseAsStringEnum(Object.values(WorkPercentage)),
+  )
+  const [income] = useQueryState('income', parseAsInteger)
+  const [additionalPensionFundingPercentage] = useQueryState(
+    'additionalPensionFunding',
+    parseAsInteger,
+  )
+  const [union] = useQueryState('union', parseAsString)
+  const [personalDiscount] = useQueryState(
+    'personalDiscount',
+    parseAsInteger.withDefault(100),
+  )
+  const [parentalLeavePeriod] = useQueryState(
+    'parentalLeavePeriod',
+    parseAsStringEnum(Object.values(ParentalLeavePeriod)),
+  )
+  const [parentalLeaveRatio] = useQueryState(
+    'parentalLeaveRatio',
+    parseAsInteger.withDefault(100),
+  )
+  const [legalDomicileInIceland] = useQueryState(
+    'legalDomicileInIceland',
+    parseAsStringEnum(Object.values(LegalDomicileInIceland)),
+  )
+
+  const calculation = calculateResults(
+    {
+      status,
+      birthyear,
+      workPercentage,
+      income,
+      additionalPensionFundingPercentage,
+      union,
+      personalDiscount,
+      parentalLeavePeriod,
+      parentalLeaveRatio,
+      legalDomicileInIceland,
+    },
+    slice,
+  )
+
+  if (!calculation) {
+    return (
+      <Stack space={3}>
+        <AlertMessage
+          type="error"
+          title={formatMessage(t.error.title)}
+          message={formatMessage(t.error.message)}
+        />
+        <Button onClick={changeScreen} variant="text" preTextIcon="arrowBack">
+          {formatMessage(t.results.changeAssumptions)}
+        </Button>
+      </Stack>
+    )
+  }
+
+  const { results, constants } = calculation
+
+  const mainSectionKeys = {
+    [Status.PARENTAL_LEAVE]: {
+      [ParentalLeavePeriod.TWO_WEEKS]: {
+        heading: t.results.mainParentalLeaveHeadingTwoWeeks,
+        description: t.results.mainParentalLeaveDescriptionTwoWeeks,
+      },
+      [ParentalLeavePeriod.THREE_WEEKS]: {
+        heading: t.results.mainParentalLeaveHeadingThreeWeeks,
+        description: t.results.mainParentalLeaveDescriptionThreeWeeks,
+      },
+      [ParentalLeavePeriod.MONTH]: {
+        heading: t.results.mainParentalLeaveHeadingMonth,
+        description: t.results.mainParentalLeaveDescriptionMonth,
+      },
+    },
+    [Status.STUDENT]: {
+      heading: t.results.mainStudentHeading,
+      description: t.results.mainStudentDescription,
+    },
+    [Status.OUTSIDE_WORKFORCE]: {
+      heading: t.results.mainOutsideWorkforceHeading,
+      description: t.results.mainOutsideWorkforceDescription,
+    },
+  }
+
+  const ratio =
+    status === Status.PARENTAL_LEAVE && parentalLeaveRatio < 100
+      ? parentalLeaveRatio
+      : 100
+
+  const formatCurrency = (value: number | null | undefined) =>
+    formatCurrencyUtil(
+      value,
+      formatMessage(t.results.currencySuffix),
+      Math.ceil,
+    )
+
+  let mainResultBeforeDeductionPrefixKey =
+    t.results.mainResultBeforeDeductionDescriptionMonth
+
+  if (status === Status.PARENTAL_LEAVE) {
+    if (parentalLeavePeriod === ParentalLeavePeriod.THREE_WEEKS) {
+      mainResultBeforeDeductionPrefixKey =
+        t.results.mainResultBeforeDeductionDescriptionThreeWeeks
+    } else if (parentalLeavePeriod === ParentalLeavePeriod.TWO_WEEKS) {
+      mainResultBeforeDeductionPrefixKey =
+        t.results.mainResultBeforeDeductionDescriptionTwoWeeks
+    }
+  }
+
+  if (status === Status.STUDENT) {
+    mainResultBeforeDeductionPrefixKey =
+      t.results.mainResultBeforeDeductionDescriptionStudent
+  }
+
+  if (status === Status.OUTSIDE_WORKFORCE) {
+    mainResultBeforeDeductionPrefixKey =
+      t.results.mainResultBeforeDeductionDescriptionOutsideWorkforce
+  }
+
+  return (
+    <Stack space={5}>
+      <Stack space={3}>
+        <Box background="blue100" paddingY={3} paddingX={4}>
+          <Box className={styles.resultBorder} paddingY={2} paddingX={3}>
+            <Stack space={2}>
+              <Text variant="h3">
+                {status === Status.PARENTAL_LEAVE
+                  ? formatMessage(
+                      mainSectionKeys[status][
+                        parentalLeavePeriod ?? ParentalLeavePeriod.MONTH
+                      ].heading,
+                    )
+                  : formatMessage(mainSectionKeys[status].heading)}
+              </Text>
+              <Text>
+                {status === Status.PARENTAL_LEAVE
+                  ? formatMessage(
+                      mainSectionKeys[status][
+                        parentalLeavePeriod ?? ParentalLeavePeriod.MONTH
+                      ].description,
+                      {
+                        ratio,
+                      },
+                    )
+                  : formatMessage(mainSectionKeys[status].description, {
+                      ratio,
+                    })}
+              </Text>
+              <Text fontWeight="semiBold" variant="h3">
+                {formatCurrency(results.mainResultAfterDeduction)}
+              </Text>
+              <Text>{formatMessage(t.results.mainDisclaimer)}</Text>
+            </Stack>
+          </Box>
+        </Box>
+
+        <Button onClick={changeScreen} variant="text" preTextIcon="arrowBack">
+          {formatMessage(t.results.changeAssumptions)}
+        </Button>
+      </Stack>
+
+      <Stack space={6}>
+        {status === Status.PARENTAL_LEAVE && (
+          <Stack space={3}>
+            <MarkdownText replaceNewLinesWithBreaks={false}>
+              {formatMessage(t.results.incomePrerequisitesDescription, {
+                maxIncome: formatCurrencyUtil(
+                  constants.maxIncome,
+                  '',
+                  Math.ceil,
+                ),
+                parentalLeaveRatio: constants.parentalLeaveRatio,
+                parentalLeaveLow: formatCurrencyUtil(
+                  constants.parentalLeaveLow,
+                  '',
+                  Math.ceil,
+                ),
+                parentalLeaveHigh: formatCurrencyUtil(
+                  constants.parentalLeaveHigh,
+                  '',
+                  Math.ceil,
+                ),
+              })}
+            </MarkdownText>
+            <Table.Table>
+              <Table.Head>
+                <Table.HeadData>
+                  {formatMessage(t.results.incomePrerequisitesHeading)}
+                </Table.HeadData>
+                <Table.HeadData align="right">
+                  {formatMessage(t.results.perMonth)}
+                </Table.HeadData>
+              </Table.Head>
+              <Table.Body>
+                <Table.Row>
+                  <Table.Data>
+                    <Text fontWeight="semiBold">
+                      {formatMessage(t.results.incomePrerequisitesSubHeading)}
+                    </Text>
+                  </Table.Data>
+                  <Table.Data>
+                    <Text whiteSpace="nowrap">{formatCurrency(income)}</Text>
+                  </Table.Data>
+                </Table.Row>
+              </Table.Body>
+            </Table.Table>
+          </Stack>
+        )}
+
+        <Table.Table>
+          <Table.Head>
+            <Table.HeadData>
+              {formatMessage(t.results.mainResultBeforeDeductionHeading)}
+            </Table.HeadData>
+            <Table.HeadData align="right">
+              {formatMessage(t.results.perMonth)}
+            </Table.HeadData>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Data>
+                <Text fontWeight="semiBold">
+                  {formatMessage(mainResultBeforeDeductionPrefixKey, {
+                    ratio,
+                  })}
+                </Text>
+              </Table.Data>
+              <Table.Data align="right">
+                <Text whiteSpace="nowrap">
+                  {formatCurrency(results.mainResultBeforeDeduction)}
+                </Text>
+              </Table.Data>
+            </Table.Row>
+          </Table.Body>
+        </Table.Table>
+
+        <Table.Table>
+          <Table.Head>
+            <Table.HeadData>
+              {formatMessage(t.results.deductionHeading)}
+            </Table.HeadData>
+            <Table.HeadData align="right">
+              {formatMessage(t.results.amount)}
+            </Table.HeadData>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Data>
+                <Text fontWeight="semiBold">
+                  {formatMessage(t.results.pensionFunding)}
+                </Text>
+              </Table.Data>
+              <Table.Data align="right">
+                <Text whiteSpace="nowrap">
+                  {formatCurrency(results.pensionFunding)}
+                </Text>
+              </Table.Data>
+            </Table.Row>
+            <Table.Row>
+              <Table.Data>
+                <Text fontWeight="semiBold">
+                  {formatMessage(t.results.additionalPensionFunding)}
+                </Text>
+              </Table.Data>
+              <Table.Data align="right">
+                <Text whiteSpace="nowrap">
+                  {formatCurrency(results.additionalPensionFunding)}
+                </Text>
+              </Table.Data>
+            </Table.Row>
+            <Table.Row>
+              <Table.Data>
+                <Stack space={2}>
+                  <Text fontWeight="semiBold">
+                    {formatMessage(t.results.tax)}
+                  </Text>
+                  <Text>
+                    {formatMessage(t.results.totalTax)} -{' '}
+                    {formatCurrency(results.totalTax)}
+                  </Text>
+                  <Text>
+                    {formatMessage(t.results.usedPersonalDiscount)} -{' '}
+                    {formatCurrency(results.usedPersonalDiscount)}
+                  </Text>
+                </Stack>
+              </Table.Data>
+              <Table.Data align="right" style={{ verticalAlign: 'top' }}>
+                <Text whiteSpace="nowrap">
+                  {formatCurrency(
+                    results.totalTax - results.usedPersonalDiscount,
+                  )}
+                </Text>
+              </Table.Data>
+            </Table.Row>
+            <Table.Row>
+              <Table.Data>
+                <Text fontWeight="semiBold">
+                  {formatMessage(t.results.unionFee)}
+                </Text>
+              </Table.Data>
+              <Table.Data align="right">
+                <Text whiteSpace="nowrap">
+                  {formatCurrency(results.unionFee)}
+                </Text>
+              </Table.Data>
+            </Table.Row>
+          </Table.Body>
+        </Table.Table>
+      </Stack>
+    </Stack>
+  )
+}
+
+export const ParentalLeaveCalculator = ({
+  slice,
+}: ParentalLeaveCalculatorProps) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [activeScreen, setActiveScreen] = useState(Screen.FORM)
+
+  return (
+    <div ref={containerRef}>
+      {activeScreen !== Screen.RESULTS && (
+        <FormScreen
+          slice={slice}
+          changeScreen={() => {
+            setActiveScreen(Screen.RESULTS)
+            window.scrollTo({
+              behavior: 'smooth',
+              top: containerRef.current?.offsetTop ?? 0,
+            })
+          }}
+        />
+      )}
+      {activeScreen === Screen.RESULTS && (
+        <ResultsScreen
+          slice={slice}
+          changeScreen={() => {
+            setActiveScreen(Screen.FORM)
+            window.scrollTo({
+              behavior: 'smooth',
+              top: containerRef.current?.offsetTop ?? 0,
+            })
+          }}
+        />
+      )}
+    </div>
+  )
+}
diff --git a/apps/web/components/connected/ParentalLeaveCalculator/translations.strings.ts b/apps/web/components/connected/ParentalLeaveCalculator/translations.strings.ts
new file mode 100644
index 000000000000..2a5b163bc687
--- /dev/null
+++ b/apps/web/components/connected/ParentalLeaveCalculator/translations.strings.ts
@@ -0,0 +1,496 @@
+import { defineMessages } from 'react-intl'
+
+export const translations = {
+  status: defineMessages({
+    heading: {
+      id: 'web.parentalLeaveCalculator:status.heading',
+      defaultMessage: 'Veldu það sem á við þig',
+      description: 'Heading fyrir ofan "Val um stöðu" dropdown',
+    },
+    label: {
+      id: 'web.parentalLeaveCalculator:status.label',
+      defaultMessage: 'Val um stöðu',
+      description: 'Label fyrir "Val um stöðu" dropdown',
+    },
+    parentalLeaveOption: {
+      id: 'web.parentalLeaveCalculator:status.parentalLeaveOption',
+      defaultMessage: 'Fæðingarorlof',
+      description: 'Fæðingarorlofs - valmöguleiki í "Val um stöðu" dropdown',
+    },
+    studentOption: {
+      id: 'web.parentalLeaveCalculator:status.studentOption',
+      defaultMessage: 'Fæðingarstyrkur námsmanna',
+      description:
+        'Fæðingarstyrkur námsmanna -  valmöguleiki í "Val um stöðu" dropdown',
+    },
+    outsideWorkforceOption: {
+      id: 'web.parentalLeaveCalculator:status.outsideWorkforceOption',
+      defaultMessage: 'Fæðingarstyrkur utan vinnumarkaðs',
+      description:
+        'Fæðingarstyrkur utan vinnumarkaða -  valmöguleiki í "Val um stöðu" dropdown',
+    },
+  }),
+  legalDomicile: defineMessages({
+    heading: {
+      id: 'web.parentalLeaveCalculator:legalDomicile.heading',
+      defaultMessage: 'Átt þú lögheimili á Íslandi',
+      description:
+        'Heading fyrir ofan "Átt þú lögheimili á Íslandi" radio takka',
+    },
+    tooltip: {
+      id: 'web.parentalLeaveCalculator:legalDomicile.tooltip',
+      defaultMessage:
+        'Nánari upplýsingar um það hvað telst vera samfellt starf hjá starfsmönnum eða sjálfstætt starfandi einstaklingum og upplýsingar um önnur tilvik sem teljast jafnframt til þátttöku á innlendum vinnumarkaði má finna undir flipanum réttindi foreldra á innlendum vinnumarkaði á heimasíðu Fæðingarorlofssjóðs.',
+      description: 'Tooltip fyrir ofan "Lögheimli á íslandi" dropdown',
+    },
+    yes: {
+      id: 'web.parentalLeaveCalculator:legalDomicile.yes',
+      defaultMessage: 'Já',
+      description: 'Já',
+    },
+    no: {
+      id: 'web.parentalLeaveCalculator:legalDomicile.no',
+      defaultMessage: 'Nei',
+      description: 'Nei',
+    },
+    dontHaveRight: {
+      id: 'web.parentalLeaveCalculator:legalDomicile.dontHaveRight',
+      defaultMessage: 'Réttur ekki til staðar miðað við uppgefnar forsendur.',
+      description: 'Réttur ekki til staðar miðað við uppgefnar forsendur.',
+    },
+  }),
+  childBirthYear: defineMessages({
+    heading: {
+      id: 'web.parentalLeaveCalculator:childBirthYear.heading',
+      defaultMessage: 'Fæðingarár barns',
+      description: 'Heading fyrir ofan "Fæðingarár barns" dropdown',
+    },
+    description: {
+      id: 'web.parentalLeaveCalculator:childBirthYear.description',
+      defaultMessage:
+        'Miðað er við ár sem barn fæðist, kemur inn á heimili ef það er frumætleitt eða tekið í varanlegt fóstur.',
+      description: 'Lýsing fyrir ofan "Fæðingarár barns" dropdown',
+    },
+    label: {
+      id: 'web.parentalLeaveCalculator:childBirthYear.label',
+      defaultMessage: 'Veldu ár',
+      description: 'Label fyrir "Fæðingarár barns" dropdown',
+    },
+  }),
+  workPercentage: defineMessages({
+    heading: {
+      id: 'web.parentalLeaveCalculator:workPercentage.heading',
+      defaultMessage: 'Starfshlutfall',
+      description: 'Heading fyrir ofan "Starfshlutfall" reit',
+    },
+    description: {
+      id: 'web.parentalLeaveCalculator:workPercentage.description',
+      defaultMessage:
+        'Hlutfall vinnu á íslenskum vinnumarkaði síðustu 6 mánuði fyrir áætlaðan fæðingardag. Ef barn er frumættleitt eða tekið í varanlegt fóstur er miðað við daginn sem barnið kemur inn á heimilið.',
+      description: 'Lýsing fyrir ofan "Fæðingarár barns" dropdown',
+    },
+    tooltip: {
+      id: 'web.parentalLeaveCalculator:workPercentage.tooltip',
+      defaultMessage:
+        'Nánari upplýsingar um það hvernig starfshlutfall er fundið út má finna undir flipanum réttindi foreldra á innlendum vinnumarkaði á heimasíðu Fæðingarorlofssjóðs.',
+      description: 'Texti fyrir tooltip við "Starfshlutfall" reit',
+    },
+    option1: {
+      id: 'web.parentalLeaveCalculator:workPercentage.option1',
+      defaultMessage: '25% til 49%',
+      description: 'Valmöguleiki 1 fyrir starfshlutfall',
+    },
+    option2: {
+      id: 'web.parentalLeaveCalculator:workPercentage.option2',
+      defaultMessage: '50% til 100%',
+      description: 'Valmöguleiki 2 fyrir starfshlutfall',
+    },
+  }),
+  income: defineMessages({
+    heading: {
+      id: 'web.parentalLeaveCalculator:income.heading',
+      defaultMessage: 'Meðaltekjur á mánuði fyrir skatt',
+      description: 'Heading fyrir ofan "Meðaltekjur" reit',
+    },
+    description: {
+      id: 'web.parentalLeaveCalculator:income.description',
+      defaultMessage:
+        'Fyrir launafólk er miðað við 12 mánaða tímabil sem lýkur 6 mánuðum fyrir fæðingardag barns. Fyrir sjálfstætt starfandi er miðað við tekjuárið á undan fæðingarári barnsins.',
+      description: 'Lýsing fyrir ofan "Meðaltekjur" reit',
+    },
+    inputSuffix: {
+      id: 'web.parentalLeaveCalculator:income.inputSuffix',
+      defaultMessage: ' krónur',
+      description: 'Viðskeyti eftir tekjutöluna sem notandi hefur slegið inn',
+    },
+    inputPlaceholder: {
+      id: 'web.parentalLeaveCalculator:income.inputPlaceholder',
+      defaultMessage: 'krónur',
+      description: 'Placeholder texti fyrir meðaltekju innsláttarreit',
+    },
+    label: {
+      id: 'web.parentalLeaveCalculator:income.label',
+      defaultMessage: 'Meðaltekjur',
+      description: 'Label á meðaltekju innsláttarreit',
+    },
+    tooltip: {
+      id: 'web.parentalLeaveCalculator:income.tooltip',
+      defaultMessage:
+        'Miðað er við allar þær tekjur sem greitt er tryggingagjald af og greiðslur úr Fæðingarorlofssjóði, Atvinnuleysistryggingasjóði, Ábyrgðasjóði launa, sjúkra- og slysadagpeninga, greiðslur úr sjúkrasjóðum stéttarfélaga, bætur frá tryggingafélagi vegna tímabundins atvinnutjóns og tekjutengdar greiðslur samkvæmt III. kafla laga um greiðslur til foreldra langveikra eða alvarlegra fatlaðra barna.',
+      description: 'Tooltip á meðaltekju innsláttarreit',
+    },
+  }),
+  additionalPensionFunding: defineMessages({
+    heading: {
+      id: 'web.parentalLeaveCalculator:additionalPensionFunding.heading',
+      defaultMessage: 'Viðbótalífeyrissparnaður',
+      description: 'Heading fyrir ofan "Viðbótalífeyrissparnaður" dropdown',
+    },
+    label: {
+      id: 'web.parentalLeaveCalculator:additionalPensionFunding.label',
+      defaultMessage: 'Viðbótalífeyrissparnaður',
+      description: 'Label fyrir "Viðbótalífeyrissparnaður" dropdown',
+    },
+    description: {
+      id: 'web.parentalLeaveCalculator:additionalPensionFunding.description',
+      defaultMessage:
+        'Það er valkvætt að greiða viðbótarlífeyrissparnað. Fæðingarorlofssjóður greiðir ekki mótframlag.',
+      description: 'Lýsing fyrir ofan "Viðbótalífeyrissparnaður" dropdown',
+    },
+    optionSuffix: {
+      id: 'web.parentalLeaveCalculator:additionalPensionFunding.optionSuffix',
+      defaultMessage: ' prósent',
+      description:
+        'Viðskeyti eftir valmöguleika í Viðbótalífeyrissparnaðs dropdown, dæmi "1< prósent>"',
+    },
+    none: {
+      id: 'web.parentalLeaveCalculator:additionalPensionFunding.none',
+      defaultMessage: 'Enginn',
+      description:
+        'Valmöguleiki ef það er enginn viðbótalífeyrissparnaður til staðar hjá viðkomandi',
+    },
+  }),
+  union: defineMessages({
+    heading: {
+      id: 'web.parentalLeaveCalculator:union.heading',
+      defaultMessage: 'Stéttarfélagsgjöld',
+      description: 'Heading fyrir ofan "Stéttarfélagsgjöld" dropdown',
+    },
+    description: {
+      id: 'web.parentalLeaveCalculator:union.description',
+      defaultMessage:
+        'Það er valkvætt að greiða í stéttarfélag. Athugið að réttindi geta tapast hjá stéttarfélagi ef greiðslum þar er ekki viðhaldið meðan á fæðingarorlofi stendur.',
+      description: 'Lýsing fyrir ofan "Stéttarfélagsgjöld" dropdown',
+    },
+    label: {
+      id: 'web.parentalLeaveCalculator:union.label',
+      defaultMessage: 'Stéttarfélagsgjöld',
+      description: 'Label á "Stéttarfélagsgjöld" dropdown',
+    },
+    none: {
+      id: 'web.parentalLeaveCalculator:union.none',
+      defaultMessage: 'Engin',
+      description:
+        'Valmöguleiki ef það er engin stéttarfélagsgjöld til staðar hjá viðkomandi',
+    },
+  }),
+  error: defineMessages({
+    title: {
+      id: 'web.parentalLeaveCalculator:error.title',
+      defaultMessage: 'Villa',
+      description: 'Titill á villuskilaboðum ef ekki tekst að reikna',
+    },
+    message: {
+      id: 'web.parentalLeaveCalculator:error.message',
+      defaultMessage: 'Ekki tókst að reikna',
+      description:
+        'Villutexti ef ekki tekst að reikna (ef það t.d. vantar fasta í vefumsjónarkerfi)',
+    },
+  }),
+  personalDiscount: defineMessages({
+    heading: {
+      id: 'web.parentalLeaveCalculator:personalDiscount.heading',
+      defaultMessage: 'Hlutfall persónuafsláttar',
+      description: 'Heading fyrir ofan "Hlutfall persónuafsláttar" reit',
+    },
+    description: {
+      id: 'web.parentalLeaveCalculator:personalDiscount.description',
+      defaultMessage:
+        'Hægt er að velja hversu hátt hlutfall persónuafsláttar á að nýta hjá Fæðingarorlofssjóði.',
+      description: 'Lýsing fyrir ofan "Hlutfall persónuafsláttar" reit',
+    },
+    label: {
+      id: 'web.parentalLeaveCalculator:personalDiscount.label',
+      defaultMessage: 'Hlutfall persónuafsláttar',
+      description: 'Label á "Hlutfall persónuafsláttar" reit',
+    },
+    placeholder: {
+      id: 'web.parentalLeaveCalculator:personalDiscount.placeholder',
+      defaultMessage: '%',
+      description: 'Placeholder á "Hlutfall persónuafsláttar" reit',
+    },
+    suffix: {
+      id: 'web.parentalLeaveCalculator:personalDiscount.suffix',
+      defaultMessage: '%',
+      description:
+        'Viðskeyti á eftir því sem notandi slær inn í "Hlutfall persónuafsláttar" reit',
+    },
+  }),
+  parentalLeavePeriod: defineMessages({
+    heading: {
+      id: 'web.parentalLeaveCalculator:parentalLeavePeriod.heading',
+      defaultMessage: 'Tímabil fæðingarorlofs (Lágmark 2 vikur)',
+      description: 'Heading fyrir ofan "Tímabil fæðingarorlofs" dropdown',
+    },
+    description: {
+      id: 'web.parentalLeaveCalculator:parentalLeavePeriod.description',
+      defaultMessage:
+        'Útreikningar miðast við mánuð í fæðingarorlofi eða hluta úr mánuði.',
+      description: 'Lýsing fyrir ofan "Hlutfall persónuafsláttar" dropdown',
+    },
+    label: {
+      id: 'web.parentalLeaveCalculator:parentalLeavePeriod.label',
+      defaultMessage: 'Tímabil fæðingarorlofs',
+      description: 'Label á "Tímabil fæðingarorlofs" dropdown',
+    },
+    placeholder: {
+      id: 'web.parentalLeaveCalculator:parentalLeavePeriod.placeholder',
+      defaultMessage: 'Veldu',
+      description: 'Placeholder á "Hlutfall persónuafsláttar" dropdown',
+    },
+    twoWeeksOption: {
+      id: 'web.parentalLeaveCalculator:parentalLeavePeriod.twoWeeksOption',
+      defaultMessage: '2 vikur',
+      description: 'Valmöguleiki um 2 vikur í fæðingarorlofstímabili',
+    },
+    threeWeeksOption: {
+      id: 'web.parentalLeaveCalculator:parentalLeavePeriod.threeWeeksOption',
+      defaultMessage: '3 vikur',
+      description: 'Valmöguleiki um 3 vikur í fæðingarorlofstímabili',
+    },
+    monthOption: {
+      id: 'web.parentalLeaveCalculator:parentalLeavePeriod.monthOption',
+      defaultMessage: '1 mánuður',
+      description: 'Valmöguleiki um 1 mánuð í fæðingarorlofstímabili',
+    },
+  }),
+  parentalLeaveRatio: defineMessages({
+    heading: {
+      id: 'web.parentalLeaveCalculator:parentalLeaveRatio.heading',
+      defaultMessage: 'Hlutfall fæðingarorlofs',
+      description: 'Heading fyrir ofan "Hlutfall fæðingarorlofs" reit',
+    },
+    description: {
+      id: 'web.parentalLeaveCalculator:parentalLeaveRatio.description',
+      defaultMessage:
+        'Hægt er að velja lægra hlutfall fæðingarorlofs ef foreldri vill t.d. dreifa greiðslum yfir lengra tímabil eða vinna samhliða fæðingarorlofi.',
+      description: 'Lýsing fyrir ofan "Hlutfall fæðingarorlofs" reit',
+    },
+    tooltip: {
+      id: 'web.parentalLeaveCalculator:parentalLeaveRatio.tooltip',
+      defaultMessage:
+        'Dæmi um lægra hlutfall fæðingarorlofs: 3 mánuðir dreift á 4,5 mánuði = 66% hlutfall eða 6 mánuðir dreift á 9 mánuði = 66% hlutfall. 3 mánuðir dreift á 6 mánuði = 50% hlutfall eða 6 mánuðir dreift á 12 mánuði = 50% hlutfall. 3 mánuðir dreift á 9 mánuði = 33% hlutfall eða 6 mánuðir dreift á 18 mánuði = 33% hlutfall. 3 mánuðir dreift á 12 mánuði = 25% hlutfall eða 6 mánuðir dreift á 24 mánuði = 25% hlutfall.',
+      description: 'Tooltip fyrir ofan "Hlutfall fæðingarorlofs" reit',
+    },
+    label: {
+      id: 'web.parentalLeaveCalculator:parentalLeaveRatio.label',
+      defaultMessage: 'Hlutfall fæðingarorlofs',
+      description: 'Label á "Hlutfall fæðingarorlofs" reit',
+    },
+    placeholder: {
+      id: 'web.parentalLeaveCalculator:parentalLeaveRatio.placeholder',
+      defaultMessage: '%',
+      description: 'Placeholder á "Hlutfall fæðingarorlofs" reit',
+    },
+    suffix: {
+      id: 'web.parentalLeaveCalculator:parentalLeaveRatio.suffix',
+      defaultMessage: '%',
+      description:
+        'Viðskeyti á eftir því sem notandi slær inn í "Hlutfall fæðingarorlofs" reit',
+    },
+  }),
+  calculate: defineMessages({
+    buttonText: {
+      id: 'web.parentalLeaveCalculator:calculate',
+      defaultMessage: 'Reikna',
+      description: 'Texti á "Reikna" hnapp',
+    },
+  }),
+  results: defineMessages({
+    mainParentalLeaveHeadingMonth: {
+      id: 'web.parentalLeaveCalculator:results.mainParentalLeaveHeadingMonth',
+      defaultMessage: 'Fæðingarorlof á mánuði',
+      description:
+        'Niðurstöðuskjár - Aðal heading fyrir fæðingarorlof á mánuði',
+    },
+    mainParentalLeaveDescriptionMonth: {
+      id: 'web.parentalLeaveCalculator:results.mainParentalLeaveDescriptionMonth',
+      defaultMessage: '{ratio}% fæðingarorlof á mánuði (eftir frádrátt)',
+      description:
+        'Niðurstöðuskjár - Lýsing á prósentutölu fæðingarorlofs á mánuði sem notandi valdi',
+    },
+    mainParentalLeaveHeadingThreeWeeks: {
+      id: 'web.parentalLeaveCalculator:results.mainParentalLeaveHeadingThreeWeeks',
+      defaultMessage: 'Fæðingarorlof á 3 vikum',
+      description:
+        'Niðurstöðuskjár - Aðal heading fyrir fæðingarorlof á 3 vikum',
+    },
+    mainParentalLeaveDescriptionThreeWeeks: {
+      id: 'web.parentalLeaveCalculator:results.mainParentalLeaveDescriptionThreeWeeks',
+      defaultMessage: '{ratio}% fæðingarorlof á 3 vikum (eftir frádrátt)',
+      description:
+        'Niðurstöðuskjár - Lýsing á prósentutölu fæðingarorlofs á 3 vikum sem notandi valdi',
+    },
+    mainParentalLeaveHeadingTwoWeeks: {
+      id: 'web.parentalLeaveCalculator:results.mainParentalLeaveHeadingTwoWeeks',
+      defaultMessage: 'Fæðingarorlof á 2 vikum',
+      description:
+        'Niðurstöðuskjár - Aðal heading fyrir fæðingarorlof á 2 vikum',
+    },
+    mainParentalLeaveDescriptionTwoWeeks: {
+      id: 'web.parentalLeaveCalculator:results.mainParentalLeaveDescriptionTwoWeeks',
+      defaultMessage: '{ratio}% fæðingarorlof á 2 vikum (eftir frádrátt)',
+      description:
+        'Niðurstöðuskjár - Lýsing á prósentutölu fæðingarorlofs á 2 vikum sem notandi valdi',
+    },
+    mainStudentHeading: {
+      id: 'web.parentalLeaveCalculator:results.mainStudentHeading',
+      defaultMessage: 'Fæðingarstyrkur námsmanna á mánuði',
+      description:
+        'Niðurstöðuskjár - Aðal heading fyrir fæðingarstyrk námsmanna',
+    },
+    mainStudentDescription: {
+      id: 'web.parentalLeaveCalculator:results.mainStudentDescription',
+      defaultMessage:
+        '{ratio}% fæðingarstyrkur námsmanna á mánuði (eftir frádrátt)',
+      description:
+        'Niðurstöðuskjár - Lýsing á prósentutölu fæðingarstyrks á mánuði sem notandi valdi',
+    },
+    mainOutsideWorkforceHeading: {
+      id: 'web.parentalLeaveCalculator:results.mainOutsideWorkforceHeading',
+      defaultMessage: 'Fæðingarstyrkur á mánuði',
+      description:
+        'Niðurstöðuskjár - Aðal heading fyrir fæðingarstyrk utan vinnumarkaðs',
+    },
+    mainOutsideWorkforceDescription: {
+      id: 'web.parentalLeaveCalculator:results.mainOutsideWorkforceDescription',
+      defaultMessage: '{ratio}% fæðingarstyrkur á mánuði (eftir frádrátt)',
+      description:
+        'Niðurstöðuskjár - Lýsing á prósentutölu fæðingarstyrks á mánuði sem notandi valdi',
+    },
+    currencySuffix: {
+      id: 'web.parentalLeaveCalculator:results.currencySuffix',
+      defaultMessage: ' krónur',
+      description: 'Niðurstöðuskjár - Viðskeyti eftir krónutölu',
+    },
+    mainDisclaimer: {
+      id: 'web.parentalLeaveCalculator:results.mainDisclaimer',
+      defaultMessage:
+        'Vinsamlega hafðu í huga að reiknivélin reiknar greiðslur miðað við þær forsendur sem þú gefur upp. Líkanið er einungis til leiðbeiningar en veitir ekki bindandi upplýsingar um endanlega afgreiðslu máls eða greiðslufjárhæðir.',
+      description: 'Niðurstöðuskjár - Texti fyrir neðan aðalkrónutölu',
+    },
+    incomePrerequisitesHeading: {
+      id: 'web.parentalLeaveCalculator:results.incomePrerequisitesHeading',
+      defaultMessage: 'Launaforsendur',
+      description: 'Niðurstöðuskjár - Heading fyrir "Launaforsendur" lið',
+    },
+    incomePrerequisitesSubHeading: {
+      id: 'web.parentalLeaveCalculator:results.incomePrerequisitesSubHeading',
+      defaultMessage:
+        'Uppgefnar meðaltekjur innanlands á mánuði miðað við árið 2024',
+      description: 'Niðurstöðuskjár - Subheading fyrir "Launaforsendur" lið',
+    },
+    incomePrerequisitesDescription: {
+      id: 'web.parentalLeaveCalculator:results.incomePrerequisitesDescription#markdown',
+      defaultMessage: `Fæðingarorlof nemur aldrei meira en {parentalLeaveRatio}% af uppgefnum launum\nFæðingarorlof er aldrei hærra en {maxIncome} krónur á mánuði\nFæðingarorlof er aldrei lægra en {parentalLeaveLow} krónur fyrir 25-49% starfshlutfall og {parentalLeaveHigh} krónur fyrir 50-100% starfshlutfall`,
+      description: 'Niðurstöðuskjár - Lýsing fyrir "Launaforsendur" lið',
+    },
+    mainResultBeforeDeductionHeading: {
+      id: 'web.parentalLeaveCalculator:results.mainResultBeforeDeductionHeading',
+      defaultMessage: 'Niðurstaða',
+      description:
+        'Niðurstöðuskjár - Heading fyrir niðurstöðulið (fyrir frádrátt)',
+    },
+    mainResultBeforeDeductionDescriptionMonth: {
+      id: 'web.parentalLeaveCalculator:results.mainResultBeforeDeductionDescriptionMonth',
+      defaultMessage: '{ratio}% fæðingarorlof á mánuði (fyrir frádrátt)',
+      description:
+        'Niðurstöðuskjár - Lýsing á hve mikið fæðingarorlof á mánuði notandi fær (fyrir frádrátt)',
+    },
+    mainResultBeforeDeductionDescriptionThreeWeeks: {
+      id: 'web.parentalLeaveCalculator:results.mainResultBeforeDeductionDescriptionThreeWeeks',
+      defaultMessage: '{ratio}% fæðingarorlof á 3 vikum (fyrir frádrátt)',
+      description:
+        'Niðurstöðuskjár - Lýsing á hve mikið fæðingarorlof notandi fær á 3 vikum (fyrir frádrátt)',
+    },
+    mainResultBeforeDeductionDescriptionTwoWeeks: {
+      id: 'web.parentalLeaveCalculator:results.mainResultBeforeDeductionDescriptionTwoWeeks',
+      defaultMessage: '{ratio}% fæðingarorlof á 2 vikum (fyrir frádrátt)',
+      description:
+        'Niðurstöðuskjár - Lýsing á hve mikið fæðingarorlof á 2 vikum notandi fær (fyrir frádrátt)',
+    },
+    mainResultBeforeDeductionDescriptionStudent: {
+      id: 'web.parentalLeaveCalculator:results.mainResultBeforeDeductionDescriptionStudent',
+      defaultMessage:
+        '{ratio}% fæðingarstyrkur námsmanna á mánuði (fyrir frádrátt)',
+      description:
+        'Niðurstöðuskjár - Lýsing á hve mikið fæðingarstyrkur námsmanna er (fyrir frádrátt)',
+    },
+    mainResultBeforeDeductionDescriptionOutsideWorkforce: {
+      id: 'web.parentalLeaveCalculator:results.mainResultBeforeDeductionDescriptionOutsideWorkforce',
+      defaultMessage: '{ratio}% fæðingarstyrkur á mánuði (fyrir frádrátt)',
+      description:
+        'Niðurstöðuskjár - Lýsing á hve mikið fæðingarstyrkur utan vinnumarkaðar er (fyrir frádrátt)',
+    },
+    deductionHeading: {
+      id: 'web.parentalLeaveCalculator:results.deductionHeading',
+      defaultMessage: 'Frádreginn kostnaður',
+      description: 'Niðurstöðuskjár - Heading fyrir "Frádreginn kostnaður" lið',
+    },
+    amount: {
+      id: 'web.parentalLeaveCalculator:results.amount',
+      defaultMessage: 'Upphæð',
+      description: 'Niðurstöðuskjár - Upphæð',
+    },
+    perMonth: {
+      id: 'web.parentalLeaveCalculator:results.perMonth',
+      defaultMessage: 'Á mánuði',
+      description: 'Niðurstöðuskjár - Á mánuði',
+    },
+    pensionFunding: {
+      id: 'web.parentalLeaveCalculator:results.pensionFunding',
+      defaultMessage: 'Lífeyrissjóðir',
+      description: 'Niðurstöðuskjár - Lífeyrissjóðir',
+    },
+    additionalPensionFunding: {
+      id: 'web.parentalLeaveCalculator:results.additionalPensionFunding',
+      defaultMessage: 'Viðbótalífeyrissparnaður',
+      description: 'Niðurstöðuskjár - Viðbótalífeyrissparnaður',
+    },
+    tax: {
+      id: 'web.parentalLeaveCalculator:results.tax',
+      defaultMessage: 'Frádreginn skattur',
+      description: 'Niðurstöðuskjár - Frádreginn skattur',
+    },
+    totalTax: {
+      id: 'web.parentalLeaveCalculator:results.totalTax',
+      defaultMessage: 'Heildarskattur',
+      description: 'Niðurstöðuskjár - Heildarskattur',
+    },
+    usedPersonalDiscount: {
+      id: 'web.parentalLeaveCalculator:results.usedPersonalDiscount',
+      defaultMessage: 'Nýttur persónuafsláttur',
+      description: 'Niðurstöðuskjár - Nýttur persónuafsláttur',
+    },
+    unionFee: {
+      id: 'web.parentalLeaveCalculator:results.unionFee',
+      defaultMessage: 'Stéttarfélagsgjöld',
+      description: 'Niðurstöðuskjár - Stéttarfélagsgjöld',
+    },
+    changeAssumptions: {
+      id: 'web.parentalLeaveCalculator:results.changeAssumptions',
+      defaultMessage: 'Breyta forsendum',
+      description: 'Niðurstöðuskjár - Breyta forsendum',
+    },
+  }),
+}
diff --git a/apps/web/components/real.ts b/apps/web/components/real.ts
index 53c38bb58324..e6f84f68ca80 100644
--- a/apps/web/components/real.ts
+++ b/apps/web/components/real.ts
@@ -94,3 +94,4 @@ export * from './TableOfContents/TableOfContents'
 export * from './CardWithFeaturedItems/CardWithFeaturedItems'
 export * from './GenericList/GenericList'
 export * from './GenericList/LatestGenericListItems/LatestGenericListItems'
+export * from './connected/ParentalLeaveCalculator/ParentalLeaveCalculator'
diff --git a/apps/web/utils/currency.ts b/apps/web/utils/currency.ts
index 2184dba5282e..67871ef693d8 100644
--- a/apps/web/utils/currency.ts
+++ b/apps/web/utils/currency.ts
@@ -1,9 +1,11 @@
 export const formatCurrency = (
   answer: number | null | undefined,
   suffix = ' kr.',
+  numericFunction = Math.floor,
 ) => {
   if (typeof answer !== 'number') return answer
   return (
-    String(Math.floor(answer)).replace(/\B(?=(\d{3})+(?!\d))/g, '.') + suffix
+    String(numericFunction(answer)).replace(/\B(?=(\d{3})+(?!\d))/g, '.') +
+    suffix
   )
 }
diff --git a/apps/web/utils/richText.tsx b/apps/web/utils/richText.tsx
index 62f9e1bee9ca..837fffe1f256 100644
--- a/apps/web/utils/richText.tsx
+++ b/apps/web/utils/richText.tsx
@@ -35,6 +35,7 @@ import {
   MultipleStatistics,
   OneColumnTextSlice,
   OverviewLinksSlice,
+  ParentalLeaveCalculator,
   PlateAvailableSearch,
   PowerBiSlice,
   PublicShipSearch,
@@ -187,6 +188,9 @@ export const webRenderConnectedComponent = (
     case 'Ums/CostOfLivingCalculator':
       connectedComponent = <UmsCostOfLivingCalculator />
       break
+    case 'VMST/ParentalLeaveCalculator':
+      connectedComponent = <ParentalLeaveCalculator slice={slice} />
+      break
     default:
       connectedComponent = renderConnectedComponent(slice)
   }
diff --git a/libs/application/templates/inheritance-report/src/fields/CalculationsOfTotal/CalculateTotalAssets/index.tsx b/libs/application/templates/inheritance-report/src/fields/CalculationsOfTotal/CalculateTotalAssets/index.tsx
deleted file mode 100644
index 2ac38968b7fc..000000000000
--- a/libs/application/templates/inheritance-report/src/fields/CalculationsOfTotal/CalculateTotalAssets/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { FieldBaseProps } from '@island.is/application/types'
-import { formatCurrency } from '@island.is/application/ui-components'
-import { Box, Text } from '@island.is/island-ui/core'
-import { useLocale } from '@island.is/localization'
-import { FC, useEffect, useState } from 'react'
-import { useFormContext } from 'react-hook-form'
-import { m } from '../../../lib/messages'
-import { calculateTotalAssets } from '../../../lib/utils/calculateTotalAssets'
-
-export const CalculateTotalAssets: FC<
-  React.PropsWithChildren<FieldBaseProps>
-> = ({ application }) => {
-  const { answers } = application
-  const { formatMessage } = useLocale()
-  const { setValue } = useFormContext()
-
-  const acc = calculateTotalAssets(answers)
-
-  const [total] = useState(acc)
-
-  useEffect(() => {
-    setValue('assets.assetsTotal', total)
-  }, [total, setValue])
-
-  return (
-    <Box
-      display={['block', 'block', 'flex']}
-      justifyContent="spaceBetween"
-      marginTop={4}
-    >
-      <Text variant="h3">{formatMessage(m.overviewTotal)}</Text>
-      <Text variant="h3">{formatCurrency(String(total))}</Text>
-    </Box>
-  )
-}
-
-export default CalculateTotalAssets
diff --git a/libs/application/templates/inheritance-report/src/fields/CalculationsOfTotal/SetTotalAssets/index.tsx b/libs/application/templates/inheritance-report/src/fields/CalculationsOfTotal/SetTotalAssets/index.tsx
new file mode 100644
index 000000000000..6d77a6b27c85
--- /dev/null
+++ b/libs/application/templates/inheritance-report/src/fields/CalculationsOfTotal/SetTotalAssets/index.tsx
@@ -0,0 +1,21 @@
+import { FieldBaseProps } from '@island.is/application/types'
+import { FC, useEffect } from 'react'
+import { useFormContext } from 'react-hook-form'
+import { calculateTotalAssets } from '../../../lib/utils/calculateTotalAssets'
+
+export const SetTotalAssets: FC<React.PropsWithChildren<FieldBaseProps>> = ({
+  application,
+}) => {
+  const { answers } = application
+  const { setValue } = useFormContext()
+
+  const total = calculateTotalAssets(answers)
+
+  useEffect(() => {
+    setValue('assets.assetsTotal', total)
+  }, [total, setValue])
+
+  return null
+}
+
+export default SetTotalAssets
diff --git a/libs/application/templates/inheritance-report/src/fields/index.ts b/libs/application/templates/inheritance-report/src/fields/index.ts
index 29c879ebe87e..61b6498cd211 100644
--- a/libs/application/templates/inheritance-report/src/fields/index.ts
+++ b/libs/application/templates/inheritance-report/src/fields/index.ts
@@ -7,7 +7,7 @@ export { OverviewHeirs } from './Overview/OverviewHeirs'
 export { FuneralCost } from './FuneralCost'
 export { OtherAssetsRepeater } from './OtherAssetsRepeater'
 export { DeceasedShareField } from './DeceasedShareField'
-export { CalculateTotalAssets } from './CalculationsOfTotal/CalculateTotalAssets'
+export { SetTotalAssets } from './CalculationsOfTotal/SetTotalAssets'
 export { CalculateTotalDebts } from './CalculationsOfTotal/CalculateTotalDebts'
 export { CalculateTotalBusiness } from './CalculationsOfTotal/CalculateTotalBusiness'
 export { CalculateFuneralCost } from './CalculationsOfTotal/CalculateFuneralCost'
diff --git a/libs/application/templates/inheritance-report/src/forms/sections/assets.ts b/libs/application/templates/inheritance-report/src/forms/sections/assets.ts
index 623d6042f2db..7946cf6e67aa 100644
--- a/libs/application/templates/inheritance-report/src/forms/sections/assets.ts
+++ b/libs/application/templates/inheritance-report/src/forms/sections/assets.ts
@@ -99,7 +99,7 @@ export const assets = buildSection({
                   },
                 ],
                 assetKey: 'assets',
-                calcWithShareValue: true,
+                calcWithShareValue: false,
                 repeaterButtonText: m.addRealEstate,
                 sumField: 'propertyValuation',
               },
@@ -691,6 +691,11 @@ export const assets = buildSection({
               doesNotRequireAnswer: true,
               component: 'OverviewAssets',
             }),
+            buildCustomField({
+              title: '',
+              id: 'assets.assetsTotal',
+              component: 'SetTotalAssets',
+            }),
             buildDescriptionField({
               id: 'space',
               title: '',
diff --git a/libs/island-ui/core/src/lib/Filter/Filter.tsx b/libs/island-ui/core/src/lib/Filter/Filter.tsx
index ac7db7fba7bd..692b369ebabd 100644
--- a/libs/island-ui/core/src/lib/Filter/Filter.tsx
+++ b/libs/island-ui/core/src/lib/Filter/Filter.tsx
@@ -6,6 +6,8 @@ import { Button } from '../Button/Button'
 import { Inline } from '../Inline/Inline'
 import { Stack } from '../Stack/Stack'
 import { Text } from '../Text/Text'
+import { usePreventBodyScroll } from './usePreventBodyScroll'
+
 import * as styles from './Filter.css'
 
 export interface FilterProps {
@@ -52,7 +54,7 @@ export interface FilterProps {
 /**
  * Datatype to use for Filter context.
  * Provides the Filter's childs access to shared values,
- * like the `isDialog` state with out bloating the childs props.
+ * like the `isDialog` state without bloating the childs props.
  */
 interface FilterContextValue {
   variant?: FilterProps['variant']
@@ -78,7 +80,7 @@ export const Filter: FC<React.PropsWithChildren<FilterProps>> = ({
   children,
   popoverFlip = true,
 }) => {
-  const dialog = useDialogState()
+  const dialog = useDialogState({ modal: true })
   const popover = usePopoverState({
     placement: 'bottom-start',
     unstable_flip: popoverFlip,
@@ -87,6 +89,8 @@ export const Filter: FC<React.PropsWithChildren<FilterProps>> = ({
 
   const hasFilterInput = !!filterInput
 
+  usePreventBodyScroll(dialog.visible && variant === 'dialog')
+
   return (
     <FilterContext.Provider value={{ variant }}>
       {variant === 'popover' && (
@@ -171,7 +175,7 @@ export const Filter: FC<React.PropsWithChildren<FilterProps>> = ({
               />
             </Box>
           </DialogDisclosure>
-          <Dialog {...dialog}>
+          <Dialog {...dialog} preventBodyScroll={false}>
             <Box
               background="white"
               position="fixed"
diff --git a/libs/island-ui/core/src/lib/Filter/usePreventBodyScroll.ts b/libs/island-ui/core/src/lib/Filter/usePreventBodyScroll.ts
new file mode 100644
index 000000000000..ba31348e1040
--- /dev/null
+++ b/libs/island-ui/core/src/lib/Filter/usePreventBodyScroll.ts
@@ -0,0 +1,37 @@
+import { useEffect, useRef } from 'react'
+
+export const usePreventBodyScroll = (preventBodyScroll: boolean) => {
+  const initialBodyPosition = useRef<string | null>(null)
+  const initialScrollPosition = useRef<number | null>(null)
+
+  useEffect(() => {
+    const isBrowser = typeof window !== 'undefined'
+    if (!isBrowser || !preventBodyScroll) {
+      return
+    }
+
+    if (initialBodyPosition.current === null) {
+      initialBodyPosition.current =
+        window.document.body.style.position || 'static'
+    }
+    if (initialScrollPosition.current === null) {
+      initialScrollPosition.current = window.scrollY
+    }
+
+    // Prevent scrolling on the body element
+    window.document.body.style.position = 'fixed'
+
+    return () => {
+      if (initialBodyPosition.current !== null) {
+        window.document.body.style.position = initialBodyPosition.current
+        initialBodyPosition.current = null
+      }
+      if (initialScrollPosition.current !== null) {
+        // When setting the body position to fixed, the scroll position resets to 0
+        // Here we are restoring the scroll position
+        window.scrollTo(0, initialScrollPosition.current)
+        initialScrollPosition.current = null
+      }
+    }
+  }, [preventBodyScroll])
+}
diff --git a/libs/judicial-system/types/src/index.ts b/libs/judicial-system/types/src/index.ts
index edc2117dc9d3..772c1463302e 100644
--- a/libs/judicial-system/types/src/index.ts
+++ b/libs/judicial-system/types/src/index.ts
@@ -28,10 +28,12 @@ export {
   isCourtOfAppealsUser,
   prisonSystemRoles,
   isPrisonSystemUser,
+  isPrisonStaffUser,
   defenceRoles,
   isDefenceUser,
   isAdminUser,
   isCoreUser,
+  isPrisonAdminUser,
   isPublicProsecutor,
 } from './lib/user'
 export type { User } from './lib/user'
diff --git a/libs/judicial-system/types/src/lib/file.ts b/libs/judicial-system/types/src/lib/file.ts
index 44f65118a9a1..ae687d066896 100644
--- a/libs/judicial-system/types/src/lib/file.ts
+++ b/libs/judicial-system/types/src/lib/file.ts
@@ -15,16 +15,16 @@ export enum CaseFileCategory {
   CASE_FILE_RECORD = 'CASE_FILE_RECORD',
   PROSECUTOR_CASE_FILE = 'PROSECUTOR_CASE_FILE',
   DEFENDANT_CASE_FILE = 'DEFENDANT_CASE_FILE',
-  PROSECUTOR_APPEAL_BRIEF = 'PROSECUTOR_APPEAL_BRIEF',
-  DEFENDANT_APPEAL_BRIEF = 'DEFENDANT_APPEAL_BRIEF',
-  PROSECUTOR_APPEAL_BRIEF_CASE_FILE = 'PROSECUTOR_APPEAL_BRIEF_CASE_FILE',
-  DEFENDANT_APPEAL_BRIEF_CASE_FILE = 'DEFENDANT_APPEAL_BRIEF_CASE_FILE',
-  PROSECUTOR_APPEAL_STATEMENT = 'PROSECUTOR_APPEAL_STATEMENT',
-  DEFENDANT_APPEAL_STATEMENT = 'DEFENDANT_APPEAL_STATEMENT',
-  PROSECUTOR_APPEAL_STATEMENT_CASE_FILE = 'PROSECUTOR_APPEAL_STATEMENT_CASE_FILE',
-  DEFENDANT_APPEAL_STATEMENT_CASE_FILE = 'DEFENDANT_APPEAL_STATEMENT_CASE_FILE',
-  PROSECUTOR_APPEAL_CASE_FILE = 'PROSECUTOR_APPEAL_CASE_FILE',
-  DEFENDANT_APPEAL_CASE_FILE = 'DEFENDANT_APPEAL_CASE_FILE',
+  PROSECUTOR_APPEAL_BRIEF = 'PROSECUTOR_APPEAL_BRIEF', // Sækjandi:  Kæruskjal til Landsréttar
+  DEFENDANT_APPEAL_BRIEF = 'DEFENDANT_APPEAL_BRIEF', // Verjandi:  Kæruskjal til Landsréttar
+  PROSECUTOR_APPEAL_BRIEF_CASE_FILE = 'PROSECUTOR_APPEAL_BRIEF_CASE_FILE', // Sækjandi: Fylgigögn kæruskjals til Landsréttar
+  DEFENDANT_APPEAL_BRIEF_CASE_FILE = 'DEFENDANT_APPEAL_BRIEF_CASE_FILE', // Verjandi: Fylgigögn kæruskjals til Landsréttar
+  PROSECUTOR_APPEAL_STATEMENT = 'PROSECUTOR_APPEAL_STATEMENT', // Sækjandi: Greinargerð
+  DEFENDANT_APPEAL_STATEMENT = 'DEFENDANT_APPEAL_STATEMENT', // Verjandi: Greinargerð
+  PROSECUTOR_APPEAL_STATEMENT_CASE_FILE = 'PROSECUTOR_APPEAL_STATEMENT_CASE_FILE', // Sækjandi: Fylgigögn greinargerðar
+  DEFENDANT_APPEAL_STATEMENT_CASE_FILE = 'DEFENDANT_APPEAL_STATEMENT_CASE_FILE', // Verjandi: Fylgigögn greinargerðar
+  PROSECUTOR_APPEAL_CASE_FILE = 'PROSECUTOR_APPEAL_CASE_FILE', // Sækjandi: Viðbótargögn við kæru til Landsréttar
+  DEFENDANT_APPEAL_CASE_FILE = 'DEFENDANT_APPEAL_CASE_FILE', // Verjandi: Viðbótargögn við kæru til Landsréttar
   APPEAL_COURT_RECORD = 'APPEAL_COURT_RECORD',
   APPEAL_RULING = 'APPEAL_RULING',
 }
diff --git a/libs/judicial-system/types/src/lib/user.ts b/libs/judicial-system/types/src/lib/user.ts
index ba7a5a6ec417..8c0dcb478e20 100644
--- a/libs/judicial-system/types/src/lib/user.ts
+++ b/libs/judicial-system/types/src/lib/user.ts
@@ -114,6 +114,20 @@ export const isPrisonSystemUser = (user?: InstitutionUser): boolean => {
   )
 }
 
+export const isPrisonAdminUser = (user: InstitutionUser): boolean =>
+  Boolean(
+    user.role &&
+      prisonSystemRoles.includes(user.role) &&
+      user.institution?.type === InstitutionType.PRISON_ADMIN,
+  )
+
+export const isPrisonStaffUser = (user: InstitutionUser): boolean =>
+  Boolean(
+    user.role &&
+      prisonSystemRoles.includes(user.role) &&
+      user.institution?.type === InstitutionType.PRISON,
+  )
+
 export const defenceRoles: string[] = [UserRole.DEFENDER]
 
 export const isDefenceUser = (user?: InstitutionUser): boolean => {
diff --git a/libs/service-portal/core/src/components/Modal/Modal.css.ts b/libs/service-portal/core/src/components/Modal/Modal.css.ts
index 95d03a4cef5a..a471a7f93337 100644
--- a/libs/service-portal/core/src/components/Modal/Modal.css.ts
+++ b/libs/service-portal/core/src/components/Modal/Modal.css.ts
@@ -27,3 +27,13 @@ export const closeButton = style({
   right: theme.spacing['1'],
   zIndex: 2,
 })
+
+export const image = style({
+  display: 'none',
+  ...themeUtils.responsiveStyle({
+    lg: {
+      marginRight: `-${theme.spacing['2']}px`,
+      display: 'initial',
+    },
+  }),
+})
diff --git a/libs/service-portal/core/src/components/Modal/Modal.tsx b/libs/service-portal/core/src/components/Modal/Modal.tsx
index 51720105b1bb..d668ac6f0409 100644
--- a/libs/service-portal/core/src/components/Modal/Modal.tsx
+++ b/libs/service-portal/core/src/components/Modal/Modal.tsx
@@ -1,6 +1,14 @@
-import React, { FC, ReactElement } from 'react'
+import React, { FC, ReactElement, useEffect, useState } from 'react'
 import * as styles from './Modal.css'
-import { Box, ModalBase, Button } from '@island.is/island-ui/core'
+import {
+  Box,
+  Text,
+  ModalBase,
+  Button,
+  ButtonProps,
+  Inline,
+} from '@island.is/island-ui/core'
+import { useDebounce } from 'react-use'
 
 interface Props {
   id: string
@@ -10,6 +18,17 @@ interface Props {
   initialVisibility?: boolean
   disclosure?: ReactElement
   label?: string
+  title?: string
+  text?: string
+  buttons?: Array<{
+    id: ButtonProps['id']
+    type?: 'ghost' | 'primary' | 'utility'
+    onClick?: () => void
+    text?: string
+    loading?: boolean
+  }>
+  iconSrc?: string
+  iconAlt?: string
   /**
    * No styling. All callbacks available.
    */
@@ -24,12 +43,39 @@ export const Modal: FC<React.PropsWithChildren<Props>> = ({
   disclosure,
   isVisible,
   label,
+  title,
+  text,
+  buttons,
   initialVisibility = true,
   skeleton,
+  iconAlt,
+  iconSrc,
 }) => {
+  const [closing, setClosing] = useState(false)
+  const [startClosing, setStartClosing] = useState(false)
+
+  useEffect(() => {
+    if (closing) {
+      onCloseModal && onCloseModal()
+      setClosing(false)
+      setStartClosing(false)
+    }
+  }, [closing, onCloseModal])
+
+  useDebounce(
+    () => {
+      if (startClosing) {
+        setClosing(startClosing)
+      }
+    },
+    500,
+    [startClosing],
+  )
+
   const handleOnVisibilityChange = (isVisible: boolean) => {
-    !isVisible && onCloseModal && onCloseModal()
+    !isVisible && onCloseModal && setStartClosing(true)
   }
+
   return (
     <ModalBase
       baseId={id}
@@ -47,6 +93,10 @@ export const Modal: FC<React.PropsWithChildren<Props>> = ({
         ) : (
           <Box
             background="white"
+            display="flex"
+            flexDirection="row"
+            alignItems="center"
+            rowGap={2}
             paddingY={[3, 6, 12]}
             paddingX={[3, 6, 12, 15]}
           >
@@ -61,7 +111,37 @@ export const Modal: FC<React.PropsWithChildren<Props>> = ({
                 size="large"
               />
             </Box>
+            <Box>
+              <Box marginBottom={6}>
+                {title && (
+                  <Text variant="h3" marginBottom={'auto'}>
+                    {title}
+                  </Text>
+                )}
+                {text && <Text>{text}</Text>}
+              </Box>
+              {buttons && (
+                <Inline space={2}>
+                  {buttons.map((b) => (
+                    <Button
+                      key={b.id}
+                      variant={b.type ?? 'primary'}
+                      size="small"
+                      onClick={b.onClick}
+                      loading={b.loading}
+                    >
+                      {b.text}
+                    </Button>
+                  ))}
+                </Inline>
+              )}
+            </Box>
             {children}
+            {iconSrc && (
+              <Box marginLeft={6} className={styles.image}>
+                <img src={iconSrc} alt={iconAlt} />
+              </Box>
+            )}
           </Box>
         )
       }
diff --git a/libs/service-portal/health/src/components/RegisterModal/RegisterModal.css.ts b/libs/service-portal/health/src/components/RegisterModal/RegisterModal.css.ts
deleted file mode 100644
index 72713fc6fe52..000000000000
--- a/libs/service-portal/health/src/components/RegisterModal/RegisterModal.css.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { style } from '@vanilla-extract/css'
-
-export const modalBaseStyle = style({
-  maxWidth: '55.5rem',
-  position: 'absolute',
-  width: 'calc(100% - 2rem)',
-  inset: '1rem',
-  top: '50%',
-  left: '50%',
-  transform: 'translate(-50%, -50%)',
-})
-
-export const modalGridStyle = style({
-  display: 'grid',
-  gridTemplateColumns: '1fr 4fr 3fr',
-})
-
-export const modalGridContentStyle = style({
-  gridColumnStart: 2,
-})
-
-export const modalGridImageStyle = style({
-  placeSelf: 'center',
-})
-
-export const closeModalButtonStyle = style({
-  position: 'absolute',
-  top: '1rem',
-  right: '1rem',
-  cursor: 'pointer',
-})
-
-export const modalGridButtonGroup = style({
-  display: 'flex',
-  flexDirection: 'row',
-  gap: '1.5rem',
-})
diff --git a/libs/service-portal/health/src/components/RegisterModal/RegisterModal.tsx b/libs/service-portal/health/src/components/RegisterModal/RegisterModal.tsx
deleted file mode 100644
index 23b5f589dcbe..000000000000
--- a/libs/service-portal/health/src/components/RegisterModal/RegisterModal.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import {
-  ModalBase,
-  Icon,
-  Box,
-  Button,
-  Text,
-  Select,
-} from '@island.is/island-ui/core'
-import { messages } from '../../lib/messages'
-import * as styles from './RegisterModal.css'
-import { useLocale } from '@island.is/localization'
-import { useState } from 'react'
-import { HealthCenterDoctorOption } from '../../screens/HealthCenterRegistration/HealthCenterRegistration'
-
-type RegisterModalProps = {
-  onClose: () => void
-  onAccept: (doctorId?: number) => void
-  id: string
-  title: string
-  description: string
-  buttonLoading?: boolean
-  isVisible?: boolean
-  healthCenterDoctors?: HealthCenterDoctorOption[]
-}
-
-export const RegisterModal = ({
-  id,
-  onAccept,
-  onClose,
-  title,
-  description,
-  buttonLoading = false,
-  isVisible = false,
-  healthCenterDoctors,
-}: RegisterModalProps) => {
-  const { formatMessage } = useLocale()
-  const [doctorId, setDoctorId] = useState<number>()
-
-  return (
-    <ModalBase
-      isVisible={isVisible}
-      baseId={id}
-      className={styles.modalBaseStyle}
-    >
-      <Box paddingTop={10} paddingBottom={9} paddingX={3} background="white">
-        <Box className={styles.closeModalButtonStyle}>
-          <button
-            aria-label={formatMessage(messages.closeModal)}
-            onClick={onClose}
-          >
-            <Icon icon="close" size="large" />
-          </button>
-        </Box>
-        <Box className={styles.modalGridStyle}>
-          <Box className={styles.modalGridContentStyle}>
-            <Text variant="h2">{title}</Text>
-            {description ? (
-              <Text marginTop={2} marginBottom={3}>
-                {description}
-              </Text>
-            ) : (
-              // Temp fix - will refactor and use core model component
-              <Box marginY={15}></Box>
-            )}
-            {healthCenterDoctors?.length ? (
-              <Box marginBottom={3}>
-                <Select
-                  isClearable
-                  options={healthCenterDoctors}
-                  label={formatMessage(messages.chooseDoctorLabel)}
-                  placeholder={formatMessage(messages.chooseDoctorPlaceholder)}
-                  onChange={(val) => {
-                    setDoctorId(val?.value)
-                  }}
-                />
-              </Box>
-            ) : null}
-            <Box className={styles.modalGridButtonGroup}>
-              <Button size="small" variant="primary" onClick={onClose}>
-                {formatMessage(messages.healthRegisterModalDecline)}
-              </Button>
-              <Button
-                size="small"
-                variant="ghost"
-                onClick={() => onAccept(doctorId)}
-                loading={buttonLoading}
-              >
-                {formatMessage(messages.healthRegisterModalAccept)}
-              </Button>
-            </Box>
-          </Box>
-          <Box className={styles.modalGridImageStyle}>
-            <img src="./assets/images/hourglass.svg" alt="" />
-          </Box>
-        </Box>
-      </Box>
-    </ModalBase>
-  )
-}
diff --git a/libs/service-portal/health/src/components/RegisterModal/index.ts b/libs/service-portal/health/src/components/RegisterModal/index.ts
deleted file mode 100644
index 11dab747046f..000000000000
--- a/libs/service-portal/health/src/components/RegisterModal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { RegisterModal } from './RegisterModal'
diff --git a/libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx b/libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx
index 8fc188331fd3..bcb7e79f7ed5 100644
--- a/libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx
+++ b/libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx
@@ -13,7 +13,7 @@ import {
   useGetPaginatedDentistsQuery,
   useRegisterDentistMutation,
 } from './DentistRegistration.generated'
-import { m } from '@island.is/service-portal/core'
+import { Modal, m } from '@island.is/service-portal/core'
 import { IntroHeader } from '@island.is/portals/core'
 import { useLocale, useNamespaces } from '@island.is/localization'
 import { messages } from '../../lib/messages'
@@ -22,7 +22,6 @@ import { useDebounce } from 'react-use'
 import { useNavigate } from 'react-router-dom'
 import { HealthPaths } from '../../lib/paths'
 import { RightsPortalDentist } from '@island.is/api/schema'
-import { RegisterModal } from '../../components/RegisterModal'
 import * as styles from './DentistRegistration.css'
 import { Problem } from '@island.is/react-spa/shared'
 
@@ -40,6 +39,7 @@ export const DentistRegistration = () => {
   const [activeSearch, setActiveSearch] = useState('')
   const [selectedDentist, setSelectedDentist] =
     useState<SelectedDentist | null>(null)
+  const [modalVisible, setModalVisible] = useState<boolean>(false)
   const [hoverId, setHoverId] = useState(0)
   const [errorTransfering, setErrorTransfering] = useState(false)
   const errorBoxRef = useRef<HTMLDivElement>(null)
@@ -158,30 +158,6 @@ export const DentistRegistration = () => {
           backgroundColor="blue"
         />
       </Box>
-
-      <RegisterModal
-        onClose={() => setSelectedDentist(null)}
-        onAccept={() => {
-          setErrorTransfering(false)
-          if (selectedDentist && selectedDentist.id) {
-            registerDentist({
-              variables: {
-                input: {
-                  id: `${selectedDentist.id}`,
-                },
-              },
-            })
-          }
-        }}
-        id={'dentistRegisterModal'}
-        title={`${formatMessage(messages.dentistModalTitle)} ${
-          selectedDentist?.name
-        }`}
-        description=""
-        isVisible={!!selectedDentist}
-        buttonLoading={loadingTranser}
-      />
-
       {loading ? (
         <SkeletonLoader repeat={3} space={2} height={40} />
       ) : (
@@ -219,19 +195,69 @@ export const DentistRegistration = () => {
                               visible: dentist.id === hoverId,
                             })}
                           >
-                            <Button
-                              size="small"
-                              variant="text"
-                              icon="pencil"
-                              onClick={() => {
-                                setSelectedDentist({
-                                  id: dentist.id,
-                                  name: dentist.name,
-                                })
+                            <Modal
+                              id={'dentistRegisterModal'}
+                              initialVisibility={false}
+                              iconSrc="./assets/images/coffee.svg"
+                              iconAlt="coffee"
+                              toggleClose={!modalVisible}
+                              onCloseModal={() => {
+                                setSelectedDentist(null)
                               }}
-                            >
-                              {formatMessage(messages.healthRegistrationSave)}
-                            </Button>
+                              title={`${formatMessage(
+                                messages.dentistModalTitle,
+                              )} ${selectedDentist?.name}`}
+                              buttons={[
+                                {
+                                  id: 'RegisterModalAccept',
+                                  type: 'primary' as const,
+                                  text: formatMessage(
+                                    messages.healthRegisterModalAccept,
+                                  ),
+                                  onClick: () => {
+                                    setErrorTransfering(false)
+                                    setModalVisible(false)
+                                    if (selectedDentist && selectedDentist.id) {
+                                      registerDentist({
+                                        variables: {
+                                          input: {
+                                            id: `${selectedDentist.id}`,
+                                          },
+                                        },
+                                      })
+                                    }
+                                  },
+                                },
+                                {
+                                  id: 'RegisterModalDecline',
+                                  type: 'ghost' as const,
+                                  text: formatMessage(
+                                    messages.healthRegisterModalDecline,
+                                  ),
+                                  onClick: () => {
+                                    setModalVisible(false)
+                                  },
+                                },
+                              ]}
+                              disclosure={
+                                <Button
+                                  size="small"
+                                  variant="text"
+                                  icon="pencil"
+                                  onClick={() => {
+                                    setModalVisible(true)
+                                    setSelectedDentist({
+                                      id: dentist.id,
+                                      name: dentist.name,
+                                    })
+                                  }}
+                                >
+                                  {formatMessage(
+                                    messages.healthRegistrationSave,
+                                  )}
+                                </Button>
+                              }
+                            />
                           </Box>
                         ) : undefined}
                       </T.Data>
diff --git a/libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx b/libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx
index 7e84491a1e2d..432eddfdccf4 100644
--- a/libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx
+++ b/libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx
@@ -16,6 +16,7 @@ import {
   EmptyState,
   ErrorScreen,
   ExcludesFalse,
+  Modal,
 } from '@island.is/service-portal/core'
 import { messages } from '../../lib/messages'
 import * as styles from './HealthRegistration.css'
@@ -26,7 +27,6 @@ import { RightsPortalHealthCenter } from '@island.is/api/schema'
 import { useNavigate } from 'react-router-dom'
 import { HealthPaths } from '../../lib/paths'
 import { formatHealthCenterName } from '../../utils/format'
-import { RegisterModal } from '../../components/RegisterModal'
 import {
   useGetHealthCenterDoctorsLazyQuery,
   useGetHealthCenterQuery,
@@ -237,22 +237,6 @@ const HealthCenterRegistration = () => {
         </Box>
       )}
 
-      <RegisterModal
-        id="healthCenterDialog"
-        title={formatMessage(messages.healthCenterRegistrationModalTitle, {
-          healthCenter: selectedHealthCenter?.name,
-        })}
-        description={formatMessage(messages.healthCenterRegistrationModalInfo)}
-        onClose={() => {
-          setSelectedHealthCenter(null)
-          setHealthCenterDoctors([])
-        }}
-        onAccept={handleHealthCenterTransfer}
-        isVisible={!!selectedHealthCenter}
-        buttonLoading={loadingTransfer}
-        healthCenterDoctors={healthCenterDoctors}
-      />
-
       <Box className={styles.filterWrapperStyle} marginBottom={3}>
         <FilterInput
           onChange={(val) => setFilter(val)}
@@ -306,21 +290,61 @@ const HealthCenterRegistration = () => {
                                   visible: healthCenter.id === hoverId,
                                 })}
                               >
-                                <Button
-                                  size="small"
-                                  variant="text"
-                                  icon="pencil"
-                                  onClick={() => {
-                                    setSelectedHealthCenter({
-                                      id: healthCenter.id,
-                                      name: healthCenter.name,
-                                    })
+                                <Modal
+                                  id={'healthCenterRegisterModal'}
+                                  initialVisibility={false}
+                                  iconSrc="./assets/images/coffee.svg"
+                                  iconAlt="coffee"
+                                  toggleClose={!selectedHealthCenter}
+                                  onCloseModal={() => {
+                                    setSelectedHealthCenter(null)
+                                    setHealthCenterDoctors([])
                                   }}
-                                >
-                                  {formatMessage(
-                                    messages.healthRegistrationSave,
+                                  title={formatMessage(
+                                    messages.healthCenterRegistrationModalTitle,
+                                    {
+                                      healthCenter: selectedHealthCenter?.name,
+                                    },
                                   )}
-                                </Button>
+                                  buttons={[
+                                    {
+                                      id: 'RegisterHealthCenterModalAccept',
+                                      type: 'primary' as const,
+                                      text: formatMessage(
+                                        messages.healthRegisterModalAccept,
+                                      ),
+                                      onClick: handleHealthCenterTransfer,
+                                    },
+                                    {
+                                      id: 'RegisterHealthCenterModalDecline',
+                                      type: 'ghost' as const,
+                                      text: formatMessage(
+                                        messages.healthRegisterModalDecline,
+                                      ),
+                                      onClick: () => {
+                                        setSelectedHealthCenter(null)
+                                        setHealthCenterDoctors([])
+                                      },
+                                    },
+                                  ]}
+                                  disclosure={
+                                    <Button
+                                      size="small"
+                                      variant="text"
+                                      icon="pencil"
+                                      onClick={() => {
+                                        setSelectedHealthCenter({
+                                          id: healthCenter.id,
+                                          name: healthCenter.name,
+                                        })
+                                      }}
+                                    >
+                                      {formatMessage(
+                                        messages.healthRegistrationSave,
+                                      )}
+                                    </Button>
+                                  }
+                                />
                               </Box>
                             </T.Data>
                           </tr>