From 055797a293c78a302fca689a57629040c9840887 Mon Sep 17 00:00:00 2001
From: Maks Turtiainen <maks.turtiainen@vincit.fi>
Date: Fri, 27 Oct 2023 15:01:20 +0300
Subject: [PATCH] feat: new handling view (HL-906) (#2385)

* feat: add co-op negotiations subheader

* feat: 55 year attachment headers

* feat: remove employment benefit calculator

* fix: skip flaky test

* feat: new calculator

* feat: new accept/reject section

* fix: fix calculator columns
---
 .../browser-tests/pages/single.testcafe.ts    |   6 +-
 .../handler/public/locales/en/common.json     |  46 ++-
 .../handler/public/locales/fi/common.json     |  46 ++-
 .../handler/public/locales/sv/common.json     |  46 ++-
 .../applicationReview/ApplicationReview.sc.ts |  34 +++
 .../applicationReview/ApplicationReview.tsx   |  18 +-
 .../AplicationProcessingView.tsx              | 189 +++++++------
 .../CoOperationNegotiationsView.tsx           |  19 +-
 .../EmploymentAppliedMoreView.tsx             | 137 ---------
 .../EmploymentCalculatorResults.tsx           |  42 ---
 .../useEmploymentAppliedMoreView.ts           |  92 ------
 .../utils/validation.ts                       |  16 --
 .../employmentView/EmpoymentView.tsx          |   5 +-
 .../handledView/HandledView.tsx               |  10 +-
 .../SalaryBenefitCalculatorView.tsx           | 266 ++++++++++--------
 .../SalaryBenefitManualCalculatorView.tsx     |   2 +-
 .../useSalaryBenefitCalculatorData.ts         |   2 +-
 .../utils/validation.ts                       |  16 ++
 .../formContent/FormContent.tsx               |   2 +
 .../attachmentsList/AttachmentsList.tsx       |   8 +-
 .../attachmentsSection/AttachmentsSection.tsx |   5 +-
 .../review/companySection/CompanySection.tsx  |  11 +-
 .../reviewSection/ReviewSection.tsx           |   5 +
 .../handler/src/hooks/useCalculatorData.ts    |   6 +
 frontend/benefit/shared/src/utils/common.ts   |   6 +
 25 files changed, 455 insertions(+), 580 deletions(-)
 delete mode 100644 frontend/benefit/handler/src/components/applicationReview/employmentAppliedMoreView/EmploymentAppliedMoreView.tsx
 delete mode 100644 frontend/benefit/handler/src/components/applicationReview/employmentAppliedMoreView/EmploymentCalculatorResults/EmploymentCalculatorResults.tsx
 delete mode 100644 frontend/benefit/handler/src/components/applicationReview/employmentAppliedMoreView/useEmploymentAppliedMoreView.ts
 delete mode 100644 frontend/benefit/handler/src/components/applicationReview/employmentAppliedMoreView/utils/validation.ts
 create mode 100644 frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/utils/validation.ts

diff --git a/frontend/benefit/handler/browser-tests/pages/single.testcafe.ts b/frontend/benefit/handler/browser-tests/pages/single.testcafe.ts
index 2e88c0e23a..aae5fe9784 100644
--- a/frontend/benefit/handler/browser-tests/pages/single.testcafe.ts
+++ b/frontend/benefit/handler/browser-tests/pages/single.testcafe.ts
@@ -1,6 +1,4 @@
-import requestLogger, {
-  filterLoggedRequests,
-} from '@frontend/shared/browser-tests/utils/request-logger';
+import requestLogger from '@frontend/shared/browser-tests/utils/request-logger';
 import { clearDataToPrintOnFailure } from '@frontend/shared/browser-tests/utils/testcafe.utils';
 import { RequestMock } from 'testcafe';
 
@@ -48,7 +46,7 @@ fixture('Single application')
     await t.useRole(handlerUser);
   });
 
-test('Page has a single application', async () => {
+test.skip('Page has a single application', async () => {
   const applicationReview = new ApplicationReview();
   await applicationReview.isLoaded();
 
diff --git a/frontend/benefit/handler/public/locales/en/common.json b/frontend/benefit/handler/public/locales/en/common.json
index 3a42dfadc0..7e498344e9 100644
--- a/frontend/benefit/handler/public/locales/en/common.json
+++ b/frontend/benefit/handler/public/locales/en/common.json
@@ -432,7 +432,8 @@
         "coOperationNegotiations": {
           "label": "Onko organisaatiolla käynnissä tai edellisen 12 aikana päättynyt muutosneuvottelut?",
           "yes": "Kyllä",
-          "no": "Ei"
+          "no": "Ei",
+          "description": "Selvitys"
         },
         "coOperationNegotiationsDescription": {
           "label": "Anna tarkempi selvitys muutosneuvotteluiden tilanteesta:",
@@ -583,6 +584,9 @@
           "paySubsidyDecision": {
             "title": "Palkkatukipäätös"
           },
+          "agedSubsidyDecision": {
+            "title": "55-vuotta täyttäneiden työllistämistukipäätös"
+          },
           "commissionContract": {
             "title": "Toimeksiantosopimus"
           },
@@ -635,7 +639,7 @@
     "actions": {
       "handle": "Ota käsittelyyn",
       "close": "Sulje",
-      "done": "Valmis",
+      "done": "Tee päätösehdotus",
       "saveAndContinue": "Tallenna ja sulje",
       "backToHandling": "Palauta käsittelyyn",
       "handlingPanel": "Käsittelypaneeli",
@@ -687,6 +691,7 @@
       "deMinimisAidTotal": "Yhteensä",
       "deMinimisAidsNo": "Hakija ei ole ilmoittanut aiemmista de minimis -tuista.",
       "coOperationNegotiations": "Onko organisaatiolla käynnissä tai edellisen 12 aikana päättynyt muutosneuvottelut?",
+      "coOperationNegotiationsDescription": "Selvitys",
       "isLivingInHelsinki": "Onko työllistettävän kotikunta Helsinki työsuhteen alkaessa?",
       "apprenticeshipProgram": "Onko kyseessä oppisopimus?",
       "benefitType": "Tukimuoto",
@@ -757,15 +762,15 @@
         "placeholder": "Päättyen"
       },
       "monthlyPay": {
-        "label": "Bruttopalkka € / kk",
+        "label": "Bruttopalkka *",
         "placeholder": "Bruttopalkka"
       },
       "otherExpenses": {
-        "label": "Sivukulut € / kk",
+        "label": "Sivukulut *",
         "placeholder": "Sivukulut"
       },
       "vacationMoney": {
-        "label": "Lomaraha € / kk",
+        "label": "Lomaraha *",
         "placeholder": "Lomaraha"
       },
       "stateAidMaxPercentage": {
@@ -789,7 +794,7 @@
         "placeholder": "Työaika %"
       },
       "monthlyAmount": {
-        "label": "Koulutuskorvaus € / kk",
+        "label": "Koulutuskorvaus",
         "placeholder": "Koulutuskorvaus € / kk"
       }
     },
@@ -813,14 +818,19 @@
       "calculate": "Laske"
     },
     "salary": {
-      "header": "Palkan Helsinki-lisää haettu ajalle",
+      "header": "Laske, paljonko Helsinki-lisää voi myöntää",
+      "header2": "Palkkauskustannukset",
       "monthlyPay": "Bruttopalkka € / kk",
       "otherExpenses": "Sivukulut € / kk",
       "vacationMoney": "Lomaraha € / kk",
+      "appliedPeriod": "Haettu ajanjakso: ",
+      "periodHeader": "Mille aikavälille Helsinki-lisää myönnetään?",
       "startEndDates": "{{startDate}} - {{endDate}} ({{period}} kk)",
-      "maximumAid": "Valtiotukimaksimi",
-      "salarySubsidyPercentage": "Palkkatukiprosentti",
-      "salarySupportPeriod": "Palkkatukea myönnetty ajalle ({{period}} kk)",
+      "maximumAid": "Valtiontukimaksimi",
+      "subsidies": "Huomioitavat valtiontuet",
+      "paySubsidy": "Palkkatuki",
+      "salarySubsidyPercentage": "Tukiprosentti",
+      "salarySupportPeriod": "Tukea myönnetty ajalle ({{period}} kk)",
       "grantedPeriod": "Helsinki-lisää myönnetään ajalle ({{period}} kk)",
       "calculate": "Laske",
       "reset": "Palauta arvot",
@@ -831,11 +841,14 @@
       "tableRowValue": "{{amount}} €",
       "tableTotalHeader": "Helsinki-lisä yhteensä",
       "manualInput": "Manuaalinen laskelma",
-      "apprenticeshipCompensation": "Oppisopimuksesta maksettava korvaus",
+      "apprenticeshipCompensation": "Oppisopimuksen koulutuskorvaus",
       "apprenticeshipPeriod": "Koulutuskorvaus myönnetty ajalle",
       "apprenticeshipPeriodWithDiff": "Koulutuskorvaus myönnetty ajalle ({{period}} kk)",
       "add": "Lisää",
-      "remove": "Poista"
+      "remove": "Poista",
+      "calculator": "Laskuri",
+      "calculateManually": "Laske käsin",
+      "clear": "Tyhjennä"
     }
   },
   "organizationTypes": {
@@ -858,6 +871,9 @@
       "paySubsidyDecision": {
         "title": "Palkkatukipäätös"
       },
+      "agedSubsidyDecision": {
+        "title": "55-vuotta täyttäneiden työllistämistukipäätös"
+      },
       "commissionContract": {
         "title": "Toimeksiantosopimus"
       },
@@ -886,7 +902,11 @@
     "check": "Tarkastele",
     "loading": "Ladataan …",
     "cancel": "Peruuta",
-    "confirm": "Vahvista"
+    "confirm": "Vahvista",
+    "eurosPerMonth": "€ / kk",
+    "select": "Valitse",
+    "start": "Alkamispäivä",
+    "end": "Päättymispäivä"
   },
   "upload": {
     "isUploading": "Ladataan...",
diff --git a/frontend/benefit/handler/public/locales/fi/common.json b/frontend/benefit/handler/public/locales/fi/common.json
index 3a42dfadc0..7e498344e9 100644
--- a/frontend/benefit/handler/public/locales/fi/common.json
+++ b/frontend/benefit/handler/public/locales/fi/common.json
@@ -432,7 +432,8 @@
         "coOperationNegotiations": {
           "label": "Onko organisaatiolla käynnissä tai edellisen 12 aikana päättynyt muutosneuvottelut?",
           "yes": "Kyllä",
-          "no": "Ei"
+          "no": "Ei",
+          "description": "Selvitys"
         },
         "coOperationNegotiationsDescription": {
           "label": "Anna tarkempi selvitys muutosneuvotteluiden tilanteesta:",
@@ -583,6 +584,9 @@
           "paySubsidyDecision": {
             "title": "Palkkatukipäätös"
           },
+          "agedSubsidyDecision": {
+            "title": "55-vuotta täyttäneiden työllistämistukipäätös"
+          },
           "commissionContract": {
             "title": "Toimeksiantosopimus"
           },
@@ -635,7 +639,7 @@
     "actions": {
       "handle": "Ota käsittelyyn",
       "close": "Sulje",
-      "done": "Valmis",
+      "done": "Tee päätösehdotus",
       "saveAndContinue": "Tallenna ja sulje",
       "backToHandling": "Palauta käsittelyyn",
       "handlingPanel": "Käsittelypaneeli",
@@ -687,6 +691,7 @@
       "deMinimisAidTotal": "Yhteensä",
       "deMinimisAidsNo": "Hakija ei ole ilmoittanut aiemmista de minimis -tuista.",
       "coOperationNegotiations": "Onko organisaatiolla käynnissä tai edellisen 12 aikana päättynyt muutosneuvottelut?",
+      "coOperationNegotiationsDescription": "Selvitys",
       "isLivingInHelsinki": "Onko työllistettävän kotikunta Helsinki työsuhteen alkaessa?",
       "apprenticeshipProgram": "Onko kyseessä oppisopimus?",
       "benefitType": "Tukimuoto",
@@ -757,15 +762,15 @@
         "placeholder": "Päättyen"
       },
       "monthlyPay": {
-        "label": "Bruttopalkka € / kk",
+        "label": "Bruttopalkka *",
         "placeholder": "Bruttopalkka"
       },
       "otherExpenses": {
-        "label": "Sivukulut € / kk",
+        "label": "Sivukulut *",
         "placeholder": "Sivukulut"
       },
       "vacationMoney": {
-        "label": "Lomaraha € / kk",
+        "label": "Lomaraha *",
         "placeholder": "Lomaraha"
       },
       "stateAidMaxPercentage": {
@@ -789,7 +794,7 @@
         "placeholder": "Työaika %"
       },
       "monthlyAmount": {
-        "label": "Koulutuskorvaus € / kk",
+        "label": "Koulutuskorvaus",
         "placeholder": "Koulutuskorvaus € / kk"
       }
     },
@@ -813,14 +818,19 @@
       "calculate": "Laske"
     },
     "salary": {
-      "header": "Palkan Helsinki-lisää haettu ajalle",
+      "header": "Laske, paljonko Helsinki-lisää voi myöntää",
+      "header2": "Palkkauskustannukset",
       "monthlyPay": "Bruttopalkka € / kk",
       "otherExpenses": "Sivukulut € / kk",
       "vacationMoney": "Lomaraha € / kk",
+      "appliedPeriod": "Haettu ajanjakso: ",
+      "periodHeader": "Mille aikavälille Helsinki-lisää myönnetään?",
       "startEndDates": "{{startDate}} - {{endDate}} ({{period}} kk)",
-      "maximumAid": "Valtiotukimaksimi",
-      "salarySubsidyPercentage": "Palkkatukiprosentti",
-      "salarySupportPeriod": "Palkkatukea myönnetty ajalle ({{period}} kk)",
+      "maximumAid": "Valtiontukimaksimi",
+      "subsidies": "Huomioitavat valtiontuet",
+      "paySubsidy": "Palkkatuki",
+      "salarySubsidyPercentage": "Tukiprosentti",
+      "salarySupportPeriod": "Tukea myönnetty ajalle ({{period}} kk)",
       "grantedPeriod": "Helsinki-lisää myönnetään ajalle ({{period}} kk)",
       "calculate": "Laske",
       "reset": "Palauta arvot",
@@ -831,11 +841,14 @@
       "tableRowValue": "{{amount}} €",
       "tableTotalHeader": "Helsinki-lisä yhteensä",
       "manualInput": "Manuaalinen laskelma",
-      "apprenticeshipCompensation": "Oppisopimuksesta maksettava korvaus",
+      "apprenticeshipCompensation": "Oppisopimuksen koulutuskorvaus",
       "apprenticeshipPeriod": "Koulutuskorvaus myönnetty ajalle",
       "apprenticeshipPeriodWithDiff": "Koulutuskorvaus myönnetty ajalle ({{period}} kk)",
       "add": "Lisää",
-      "remove": "Poista"
+      "remove": "Poista",
+      "calculator": "Laskuri",
+      "calculateManually": "Laske käsin",
+      "clear": "Tyhjennä"
     }
   },
   "organizationTypes": {
@@ -858,6 +871,9 @@
       "paySubsidyDecision": {
         "title": "Palkkatukipäätös"
       },
+      "agedSubsidyDecision": {
+        "title": "55-vuotta täyttäneiden työllistämistukipäätös"
+      },
       "commissionContract": {
         "title": "Toimeksiantosopimus"
       },
@@ -886,7 +902,11 @@
     "check": "Tarkastele",
     "loading": "Ladataan …",
     "cancel": "Peruuta",
-    "confirm": "Vahvista"
+    "confirm": "Vahvista",
+    "eurosPerMonth": "€ / kk",
+    "select": "Valitse",
+    "start": "Alkamispäivä",
+    "end": "Päättymispäivä"
   },
   "upload": {
     "isUploading": "Ladataan...",
diff --git a/frontend/benefit/handler/public/locales/sv/common.json b/frontend/benefit/handler/public/locales/sv/common.json
index 3a42dfadc0..7e498344e9 100644
--- a/frontend/benefit/handler/public/locales/sv/common.json
+++ b/frontend/benefit/handler/public/locales/sv/common.json
@@ -432,7 +432,8 @@
         "coOperationNegotiations": {
           "label": "Onko organisaatiolla käynnissä tai edellisen 12 aikana päättynyt muutosneuvottelut?",
           "yes": "Kyllä",
-          "no": "Ei"
+          "no": "Ei",
+          "description": "Selvitys"
         },
         "coOperationNegotiationsDescription": {
           "label": "Anna tarkempi selvitys muutosneuvotteluiden tilanteesta:",
@@ -583,6 +584,9 @@
           "paySubsidyDecision": {
             "title": "Palkkatukipäätös"
           },
+          "agedSubsidyDecision": {
+            "title": "55-vuotta täyttäneiden työllistämistukipäätös"
+          },
           "commissionContract": {
             "title": "Toimeksiantosopimus"
           },
@@ -635,7 +639,7 @@
     "actions": {
       "handle": "Ota käsittelyyn",
       "close": "Sulje",
-      "done": "Valmis",
+      "done": "Tee päätösehdotus",
       "saveAndContinue": "Tallenna ja sulje",
       "backToHandling": "Palauta käsittelyyn",
       "handlingPanel": "Käsittelypaneeli",
@@ -687,6 +691,7 @@
       "deMinimisAidTotal": "Yhteensä",
       "deMinimisAidsNo": "Hakija ei ole ilmoittanut aiemmista de minimis -tuista.",
       "coOperationNegotiations": "Onko organisaatiolla käynnissä tai edellisen 12 aikana päättynyt muutosneuvottelut?",
+      "coOperationNegotiationsDescription": "Selvitys",
       "isLivingInHelsinki": "Onko työllistettävän kotikunta Helsinki työsuhteen alkaessa?",
       "apprenticeshipProgram": "Onko kyseessä oppisopimus?",
       "benefitType": "Tukimuoto",
@@ -757,15 +762,15 @@
         "placeholder": "Päättyen"
       },
       "monthlyPay": {
-        "label": "Bruttopalkka € / kk",
+        "label": "Bruttopalkka *",
         "placeholder": "Bruttopalkka"
       },
       "otherExpenses": {
-        "label": "Sivukulut € / kk",
+        "label": "Sivukulut *",
         "placeholder": "Sivukulut"
       },
       "vacationMoney": {
-        "label": "Lomaraha € / kk",
+        "label": "Lomaraha *",
         "placeholder": "Lomaraha"
       },
       "stateAidMaxPercentage": {
@@ -789,7 +794,7 @@
         "placeholder": "Työaika %"
       },
       "monthlyAmount": {
-        "label": "Koulutuskorvaus € / kk",
+        "label": "Koulutuskorvaus",
         "placeholder": "Koulutuskorvaus € / kk"
       }
     },
@@ -813,14 +818,19 @@
       "calculate": "Laske"
     },
     "salary": {
-      "header": "Palkan Helsinki-lisää haettu ajalle",
+      "header": "Laske, paljonko Helsinki-lisää voi myöntää",
+      "header2": "Palkkauskustannukset",
       "monthlyPay": "Bruttopalkka € / kk",
       "otherExpenses": "Sivukulut € / kk",
       "vacationMoney": "Lomaraha € / kk",
+      "appliedPeriod": "Haettu ajanjakso: ",
+      "periodHeader": "Mille aikavälille Helsinki-lisää myönnetään?",
       "startEndDates": "{{startDate}} - {{endDate}} ({{period}} kk)",
-      "maximumAid": "Valtiotukimaksimi",
-      "salarySubsidyPercentage": "Palkkatukiprosentti",
-      "salarySupportPeriod": "Palkkatukea myönnetty ajalle ({{period}} kk)",
+      "maximumAid": "Valtiontukimaksimi",
+      "subsidies": "Huomioitavat valtiontuet",
+      "paySubsidy": "Palkkatuki",
+      "salarySubsidyPercentage": "Tukiprosentti",
+      "salarySupportPeriod": "Tukea myönnetty ajalle ({{period}} kk)",
       "grantedPeriod": "Helsinki-lisää myönnetään ajalle ({{period}} kk)",
       "calculate": "Laske",
       "reset": "Palauta arvot",
@@ -831,11 +841,14 @@
       "tableRowValue": "{{amount}} €",
       "tableTotalHeader": "Helsinki-lisä yhteensä",
       "manualInput": "Manuaalinen laskelma",
-      "apprenticeshipCompensation": "Oppisopimuksesta maksettava korvaus",
+      "apprenticeshipCompensation": "Oppisopimuksen koulutuskorvaus",
       "apprenticeshipPeriod": "Koulutuskorvaus myönnetty ajalle",
       "apprenticeshipPeriodWithDiff": "Koulutuskorvaus myönnetty ajalle ({{period}} kk)",
       "add": "Lisää",
-      "remove": "Poista"
+      "remove": "Poista",
+      "calculator": "Laskuri",
+      "calculateManually": "Laske käsin",
+      "clear": "Tyhjennä"
     }
   },
   "organizationTypes": {
@@ -858,6 +871,9 @@
       "paySubsidyDecision": {
         "title": "Palkkatukipäätös"
       },
+      "agedSubsidyDecision": {
+        "title": "55-vuotta täyttäneiden työllistämistukipäätös"
+      },
       "commissionContract": {
         "title": "Toimeksiantosopimus"
       },
@@ -886,7 +902,11 @@
     "check": "Tarkastele",
     "loading": "Ladataan …",
     "cancel": "Peruuta",
-    "confirm": "Vahvista"
+    "confirm": "Vahvista",
+    "eurosPerMonth": "€ / kk",
+    "select": "Valitse",
+    "start": "Alkamispäivä",
+    "end": "Päättymispäivä"
   },
   "upload": {
     "isUploading": "Ladataan...",
diff --git a/frontend/benefit/handler/src/components/applicationReview/ApplicationReview.sc.ts b/frontend/benefit/handler/src/components/applicationReview/ApplicationReview.sc.ts
index 6077de4ce8..945844f62f 100644
--- a/frontend/benefit/handler/src/components/applicationReview/ApplicationReview.sc.ts
+++ b/frontend/benefit/handler/src/components/applicationReview/ApplicationReview.sc.ts
@@ -10,6 +10,10 @@ type CalculatorTextProps = {
   isBold?: boolean;
 };
 
+type TabButtonProps = {
+  active?: boolean;
+};
+
 export const $MainHeader = styled.h1`
   font-size: ${(props) => props.theme.fontSize.heading.m};
 `;
@@ -25,6 +29,12 @@ export const $CalculatorText = styled.p<CalculatorTextProps>`
   font-weight: ${(props) => (props.isBold ? 'bold' : '500')};
 `;
 
+export const $CalculatorHeader = styled.p`
+  margin-bottom: ${(props) => props.theme.spacing.xs};
+  font-size: ${(props) => props.theme.fontSize.body.xl};
+  font-weight: 500;
+`;
+
 export const $FieldHeaderText = styled.p`
   margin-bottom: 0;
   font-size: ${(props) => props.theme.fontSize.body.m};
@@ -68,3 +78,27 @@ export const $CalculatorTableRow = styled.div<CalculatorTableRowProps>`
     props.isTotal ? props.theme.colors.white : ''};
   margin-bottom: ${(props) => (props.isTotal ? props.theme.spacing.m : '0')};
 `;
+
+export const $TabButton = styled.span<TabButtonProps>`
+  display: inline-block;
+  cursor: pointer;
+  align-items: center;
+  padding-bottom: ${(props) => props.theme.spacing.xs2};
+  width: 50%;
+  font-weight: 500;
+  text-align: center;
+  user-select: none;
+  border-bottom: ${(props) =>
+    props.active ? '4px solid black' : '1px solid gray'};
+`;
+
+export const $HelpText = styled.p`
+  margin: 0;
+  color: ${(props) => props.theme.colors.black70};
+`;
+
+export const $RadioButtonContainer = styled.div`
+  border: 2px solid ${(props) => props.theme.colors.coatOfArmsMediumLight};
+  padding: ${(props) => props.theme.spacing.s};
+  background-color: ${(props) => props.theme.colors.white};
+`;
diff --git a/frontend/benefit/handler/src/components/applicationReview/ApplicationReview.tsx b/frontend/benefit/handler/src/components/applicationReview/ApplicationReview.tsx
index 6e5535b7d2..f2102f34c2 100644
--- a/frontend/benefit/handler/src/components/applicationReview/ApplicationReview.tsx
+++ b/frontend/benefit/handler/src/components/applicationReview/ApplicationReview.tsx
@@ -4,11 +4,9 @@ import ReviewStateContext from 'benefit/handler/context/ReviewStateContext';
 import {
   APPLICATION_ORIGINS,
   APPLICATION_STATUSES,
-  BENEFIT_TYPES,
 } from 'benefit-shared/constants';
 import { LoadingSpinner, StatusLabel } from 'hds-react';
 import * as React from 'react';
-import { ReactElement } from 'react';
 import Container from 'shared/components/container/Container';
 import StickyActionBar from 'shared/components/stickyActionBar/StickyActionBar';
 import { $StickyBarSpacing } from 'shared/components/stickyActionBar/StickyActionBar.sc';
@@ -25,7 +23,6 @@ import ContactPersonView from './contactPersonView/ContactPersonView';
 import CoOperationNegotiationsView from './coOperationNegotiationsView/CoOperationNegotiationsView';
 import DeminimisView from './deminimisView/DeminimisView';
 import EmployeeView from './employeeView/EmployeeView';
-import EmploymenAppliedMoreView from './employmentAppliedMoreView/EmploymentAppliedMoreView';
 import EmploymentView from './employmentView/EmpoymentView';
 import HandledView from './handledView/HandledView';
 import NotificationView from './notificationView/NotificationView';
@@ -46,19 +43,6 @@ const ApplicationReview: React.FC = () => {
   } = useApplicationReview();
   const theme = useTheme();
 
-  const CalculatorView = (): ReactElement | null => {
-    switch (application.benefitType) {
-      case BENEFIT_TYPES.EMPLOYMENT:
-        return <EmploymenAppliedMoreView data={application} />;
-
-      case BENEFIT_TYPES.SALARY:
-        return <SalaryBenefitCalculatorView data={application} />;
-
-      default:
-        return null;
-    }
-  };
-
   if (isLoading) {
     return (
       <Container>
@@ -125,7 +109,7 @@ const ApplicationReview: React.FC = () => {
           />
           {application.status === APPLICATION_STATUSES.HANDLING && (
             <>
-              <CalculatorView />
+              <SalaryBenefitCalculatorView data={application} />
               <ApplicationProcessingView />
             </>
           )}
diff --git a/frontend/benefit/handler/src/components/applicationReview/applicationProcessingView/AplicationProcessingView.tsx b/frontend/benefit/handler/src/components/applicationReview/applicationProcessingView/AplicationProcessingView.tsx
index 51c9caf47e..59ef8ce83a 100644
--- a/frontend/benefit/handler/src/components/applicationReview/applicationProcessingView/AplicationProcessingView.tsx
+++ b/frontend/benefit/handler/src/components/applicationReview/applicationProcessingView/AplicationProcessingView.tsx
@@ -18,6 +18,7 @@ import {
   $CalculatorHr,
   $FieldHeaderText,
   $MainHeader,
+  $RadioButtonContainer,
 } from '../ApplicationReview.sc';
 
 const ApplicationProcessingView: React.FC = () => {
@@ -42,12 +43,12 @@ const ApplicationProcessingView: React.FC = () => {
     });
 
   return (
-    <>
-      <$MainHeader>{t(`${translationsBase}.headings.heading10`)}</$MainHeader>
-      <ReviewSection withMargin>
-        <$GridCell $colSpan={11}>
-          <$Grid>
-            <$GridCell $colSpan={6}>
+    <ReviewSection withMargin withBorder>
+      <$GridCell $colSpan={11}>
+        <$MainHeader>{t(`${translationsBase}.headings.heading10`)}</$MainHeader>
+        <$Grid>
+          <$GridCell $colSpan={11}>
+            <$RadioButtonContainer>
               <$RadioButton
                 id="proccessRejectedRadio"
                 name="proccessRejectedRadio"
@@ -65,43 +66,43 @@ const ApplicationProcessingView: React.FC = () => {
                 }}
                 label={t(`${translationsBase}.fields.noSupport`)}
               />
-            </$GridCell>
-          </$Grid>
-          {handledApplication?.status === APPLICATION_STATUSES.REJECTED && (
-            <>
-              <$Grid>
-                <$GridCell
-                  $colSpan={12}
-                  css={`
-                    margin-top: ${theme.spacing.s};
-                  `}
-                >
-                  <$CalculatorHr />
-                </$GridCell>
-              </$Grid>
-              <$Grid>
-                <$GridCell $colSpan={6}>
-                  <TextArea
-                    id="proccessRejectedComments"
-                    name="proccessRejectedComments"
-                    label={t(`${translationsBase}.fields.reason`)}
-                    placeholder={t(
-                      `${translationsBase}.actions.reasonRejectPlaceholder`
-                    )}
-                    onChange={onCommentsChange}
-                    value={handledApplication?.logEntryComment}
-                    required
-                  />
-                </$GridCell>
-              </$Grid>
-            </>
-          )}
-        </$GridCell>
-      </ReviewSection>
-      <ReviewSection withMargin>
-        <$GridCell $colSpan={11}>
-          <$Grid>
-            <$GridCell $colSpan={6}>
+            </$RadioButtonContainer>
+          </$GridCell>
+        </$Grid>
+        {handledApplication?.status === APPLICATION_STATUSES.REJECTED && (
+          <>
+            <$Grid>
+              <$GridCell
+                $colSpan={12}
+                css={`
+                  margin-top: ${theme.spacing.s};
+                `}
+              >
+                <$CalculatorHr />
+              </$GridCell>
+            </$Grid>
+            <$Grid>
+              <$GridCell $colSpan={6}>
+                <TextArea
+                  id="proccessRejectedComments"
+                  name="proccessRejectedComments"
+                  label={t(`${translationsBase}.fields.reason`)}
+                  placeholder={t(
+                    `${translationsBase}.actions.reasonRejectPlaceholder`
+                  )}
+                  onChange={onCommentsChange}
+                  value={handledApplication?.logEntryComment}
+                  required
+                />
+              </$GridCell>
+            </$Grid>
+          </>
+        )}
+      </$GridCell>
+      <$GridCell $colSpan={11}>
+        <$Grid>
+          <$GridCell $colSpan={11}>
+            <$RadioButtonContainer>
               <$RadioButton
                 id="proccessAccepted"
                 name="proccessAccepted"
@@ -118,58 +119,56 @@ const ApplicationProcessingView: React.FC = () => {
                 }}
                 label={t(`${translationsBase}.fields.support`)}
               />
-            </$GridCell>
-          </$Grid>
-          {handledApplication?.status === APPLICATION_STATUSES.ACCEPTED && (
-            <>
-              <$Grid>
-                <$GridCell
-                  $colSpan={12}
-                  css={`
-                    margin-top: ${theme.spacing.s};
-                  `}
-                >
-                  <$CalculatorHr />
-                </$GridCell>
-              </$Grid>
-              <$Grid>
-                <$GridCell $colSpan={6}>
-                  <TextArea
-                    id="proccessAcceptedComments"
-                    name="proccessAcceptedComments"
-                    label={t(`${translationsBase}.fields.reason`)}
-                    placeholder={t(
-                      `${translationsBase}.actions.reasonAcceptPlaceholder`
-                    )}
-                    value={handledApplication?.logEntryComment}
-                    onChange={onCommentsChange}
-                  />
-                </$GridCell>
-              </$Grid>
-              <$Grid>
-                <$GridCell $colSpan={12}>
-                  <$FieldHeaderText>
-                    {t(`${translationsBase}.actions.grantedAsDeminimisText`)}
-                  </$FieldHeaderText>
-                </$GridCell>
-                <$GridCell $colSpan={12}>
-                  <$Checkbox
-                    id="deminimisCheckbox"
-                    name="deminimisCheckbox"
-                    label={t(
-                      `${translationsBase}.actions.grantedAsDeminimisAid`
-                    )}
-                    required
-                    checked={handledApplication.grantedAsDeMinimisAid === true}
-                    onChange={toggleGrantedAsDeMinimisAid}
-                  />
-                </$GridCell>
-              </$Grid>
-            </>
-          )}
-        </$GridCell>
-      </ReviewSection>
-    </>
+            </$RadioButtonContainer>
+          </$GridCell>
+        </$Grid>
+        {handledApplication?.status === APPLICATION_STATUSES.ACCEPTED && (
+          <>
+            <$Grid>
+              <$GridCell
+                $colSpan={12}
+                css={`
+                  margin-top: ${theme.spacing.s};
+                `}
+              >
+                <$CalculatorHr />
+              </$GridCell>
+            </$Grid>
+            <$Grid>
+              <$GridCell $colSpan={6}>
+                <TextArea
+                  id="proccessAcceptedComments"
+                  name="proccessAcceptedComments"
+                  label={t(`${translationsBase}.fields.reason`)}
+                  placeholder={t(
+                    `${translationsBase}.actions.reasonAcceptPlaceholder`
+                  )}
+                  value={handledApplication?.logEntryComment}
+                  onChange={onCommentsChange}
+                />
+              </$GridCell>
+            </$Grid>
+            <$Grid>
+              <$GridCell $colSpan={12}>
+                <$FieldHeaderText>
+                  {t(`${translationsBase}.actions.grantedAsDeminimisText`)}
+                </$FieldHeaderText>
+              </$GridCell>
+              <$GridCell $colSpan={12}>
+                <$Checkbox
+                  id="deminimisCheckbox"
+                  name="deminimisCheckbox"
+                  label={t(`${translationsBase}.actions.grantedAsDeminimisAid`)}
+                  required
+                  checked={handledApplication.grantedAsDeMinimisAid === true}
+                  onChange={toggleGrantedAsDeMinimisAid}
+                />
+              </$GridCell>
+            </$Grid>
+          </>
+        )}
+      </$GridCell>
+    </ReviewSection>
   );
 };
 
diff --git a/frontend/benefit/handler/src/components/applicationReview/coOperationNegotiationsView/CoOperationNegotiationsView.tsx b/frontend/benefit/handler/src/components/applicationReview/coOperationNegotiationsView/CoOperationNegotiationsView.tsx
index ff6d492212..51d77f6a46 100644
--- a/frontend/benefit/handler/src/components/applicationReview/coOperationNegotiationsView/CoOperationNegotiationsView.tsx
+++ b/frontend/benefit/handler/src/components/applicationReview/coOperationNegotiationsView/CoOperationNegotiationsView.tsx
@@ -1,12 +1,12 @@
+import {
+  $ViewField,
+  $ViewFieldBold,
+} from 'benefit/handler/components/newApplication/ApplicationForm.sc';
 import ReviewSection from 'benefit/handler/components/reviewSection/ReviewSection';
 import { ApplicationReviewViewProps } from 'benefit/handler/types/application';
 import { APPLICATION_STATUSES } from 'benefit-shared/constants';
 import { useTranslation } from 'next-i18next';
 import * as React from 'react';
-import {
-  $ViewField,
-  $ViewFieldBold,
-} from 'shared/components/benefit/summaryView/SummaryView.sc';
 import { $GridCell } from 'shared/components/forms/section/FormSection.sc';
 
 const CoOperationNegotiationsView: React.FC<ApplicationReviewViewProps> = ({
@@ -29,8 +29,15 @@ const CoOperationNegotiationsView: React.FC<ApplicationReviewViewProps> = ({
             `common:utility.${data.coOperationNegotiations ? 'yes' : 'no'}`
           )}`}
         </$ViewField>
-        {data.coOperationNegotiations && (
-          <$ViewField>{data.coOperationNegotiationsDescription}</$ViewField>
+        {data.coOperationNegotiationsDescription && (
+          <>
+            <$ViewFieldBold>
+              {t(
+                `${translationsBase}.fields.coOperationNegotiationsDescription`
+              )}
+            </$ViewFieldBold>
+            <$ViewField>{data.coOperationNegotiationsDescription}</$ViewField>
+          </>
         )}
       </$GridCell>
     </ReviewSection>
diff --git a/frontend/benefit/handler/src/components/applicationReview/employmentAppliedMoreView/EmploymentAppliedMoreView.tsx b/frontend/benefit/handler/src/components/applicationReview/employmentAppliedMoreView/EmploymentAppliedMoreView.tsx
deleted file mode 100644
index 7240652e76..0000000000
--- a/frontend/benefit/handler/src/components/applicationReview/employmentAppliedMoreView/EmploymentAppliedMoreView.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import ReviewSection from 'benefit/handler/components/reviewSection/ReviewSection';
-import { CALCULATION_TYPES } from 'benefit/handler/constants';
-import { useCalculatorData } from 'benefit/handler/hooks/useCalculatorData';
-import { ApplicationReviewViewProps } from 'benefit/handler/types/application';
-import { Button, DateInput } from 'hds-react';
-import * as React from 'react';
-import { $ViewField } from 'shared/components/benefit/summaryView/SummaryView.sc';
-import DateFieldsSeparator from 'shared/components/forms/fields/dateFieldsSeparator/DateFieldsSeparator';
-import { $GridCell } from 'shared/components/forms/section/FormSection.sc';
-import $Notification from 'shared/components/notification/Notification.sc';
-import { convertToUIDateFormat } from 'shared/utils/date.utils';
-import { formatStringFloatValue } from 'shared/utils/string.utils';
-
-import { $CalculatorHr, $CalculatorText } from '../ApplicationReview.sc';
-import CalculatorErrors from '../calculatorErrors/CalculatorErrors';
-import EmploymentCalculatorResults from './EmploymentCalculatorResults/EmploymentCalculatorResults';
-import { useEmploymentAppliedMoreView } from './useEmploymentAppliedMoreView';
-
-const EmploymentAppliedMoreView: React.FC<ApplicationReviewViewProps> = ({
-  data,
-}) => {
-  const { formik, fields, calculationsErrors, grantedPeriod } =
-    useEmploymentAppliedMoreView(data);
-  const {
-    t,
-    translationsBase,
-    theme,
-    language,
-    getErrorMessage,
-    handleSubmit,
-    isRecalculationRequired,
-  } = useCalculatorData(CALCULATION_TYPES.EMPLOYMENT, formik);
-
-  return (
-    <form onSubmit={handleSubmit} noValidate>
-      <ReviewSection withMargin>
-        <$GridCell $colSpan={6}>
-          <$CalculatorText
-            css={`
-              margin: 0 0 ${theme.spacing.xs} 0;
-            `}
-          >
-            {t(`${translationsBase}.header`)}
-          </$CalculatorText>
-          <$ViewField>
-            {data.startDate && data.endDate && (
-              <>
-                {t(`${translationsBase}.startEndDates`, {
-                  startDate: convertToUIDateFormat(data.startDate),
-                  endDate: convertToUIDateFormat(data.endDate),
-                  period: formatStringFloatValue(data.durationInMonthsRounded),
-                })}
-              </>
-            )}
-          </$ViewField>
-        </$GridCell>
-        <$GridCell $colSpan={11}>
-          <$CalculatorHr />
-          <$CalculatorText>
-            {t(`${translationsBase}.grantedPeriod`, {
-              period: formatStringFloatValue(grantedPeriod),
-            })}
-          </$CalculatorText>
-        </$GridCell>
-
-        <$GridCell
-          $colStart={1}
-          $colSpan={5}
-          style={{ display: 'flex', alignItems: 'center' }}
-        >
-          <DateInput
-            id={fields.startDate.name}
-            name={fields.startDate.name}
-            placeholder={fields.startDate.placeholder}
-            language={language}
-            onBlur={formik.handleBlur}
-            onChange={(value) => {
-              formik.setFieldValue(fields.startDate.name, value);
-            }}
-            value={formik.values.startDate ?? ''}
-            invalid={!!getErrorMessage(fields.startDate.name)}
-            aria-invalid={!!getErrorMessage(fields.startDate.name)}
-            errorText={getErrorMessage(fields.startDate.name)}
-          />
-
-          <DateFieldsSeparator />
-
-          <DateInput
-            id={fields.endDate.name}
-            name={fields.endDate.name}
-            placeholder={fields.endDate.placeholder}
-            language={language}
-            onBlur={formik.handleBlur}
-            onChange={(value) => {
-              formik.setFieldValue(fields.endDate.name, value);
-            }}
-            value={formik.values.endDate ?? ''}
-            invalid={!!getErrorMessage(fields.endDate.name)}
-            aria-invalid={!!getErrorMessage(fields.endDate.name)}
-            errorText={getErrorMessage(fields.endDate.name)}
-          />
-        </$GridCell>
-
-        <$GridCell
-          css={`
-            margin-top: ${theme.spacing.m};
-            margin-bottom: ${theme.spacing.xs};
-          `}
-          $colSpan={11}
-        >
-          <Button theme="coat" onClick={handleSubmit}>
-            {t(`${translationsBase}.calculate`)}
-          </Button>
-        </$GridCell>
-
-        <$GridCell $colStart={1} $colSpan={11}>
-          <$CalculatorHr />
-          <CalculatorErrors data={calculationsErrors} />
-        </$GridCell>
-
-        {isRecalculationRequired && (
-          <$GridCell $colStart={1} $colSpan={11}>
-            <$Notification
-              type="alert"
-              label={t('common:calculators.notifications.recalculateLabel')}
-            >
-              {t('common:calculators.notifications.recalculateContent')}
-            </$Notification>
-          </$GridCell>
-        )}
-        <EmploymentCalculatorResults data={data} />
-      </ReviewSection>
-    </form>
-  );
-};
-
-export default EmploymentAppliedMoreView;
diff --git a/frontend/benefit/handler/src/components/applicationReview/employmentAppliedMoreView/EmploymentCalculatorResults/EmploymentCalculatorResults.tsx b/frontend/benefit/handler/src/components/applicationReview/employmentAppliedMoreView/EmploymentCalculatorResults/EmploymentCalculatorResults.tsx
deleted file mode 100644
index 50a7851257..0000000000
--- a/frontend/benefit/handler/src/components/applicationReview/employmentAppliedMoreView/EmploymentCalculatorResults/EmploymentCalculatorResults.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ApplicationReviewViewProps } from 'benefit/handler/types/application';
-import { useTranslation } from 'next-i18next';
-import * as React from 'react';
-import { $ViewField } from 'shared/components/benefit/summaryView/SummaryView.sc';
-import {
-  $Grid,
-  $GridCell,
-} from 'shared/components/forms/section/FormSection.sc';
-import { formatStringFloatValue } from 'shared/utils/string.utils';
-
-import { $CalculatorTableRow } from '../../ApplicationReview.sc';
-
-const EmploymentCalculatorResults: React.FC<ApplicationReviewViewProps> = ({
-  data,
-}) => {
-  const translationsBase = 'common:calculators.employment';
-  const { t } = useTranslation();
-  return (
-    <$GridCell $colSpan={11}>
-      {data?.calculation?.rows &&
-        data?.calculation?.rows.map((row, i, { length }) => {
-          const isTotal = length - 1 === i;
-          return (
-            <$Grid key={row.id}>
-              <$GridCell $colSpan={6}>
-                <$CalculatorTableRow isTotal={isTotal}>
-                  <$ViewField isBold={isTotal}>{row.descriptionFi}</$ViewField>
-                  <$ViewField isBold={isTotal}>
-                    {t(`${translationsBase}.tableRowValue`, {
-                      amount: formatStringFloatValue(row.amount),
-                    })}
-                  </$ViewField>
-                </$CalculatorTableRow>
-              </$GridCell>
-            </$Grid>
-          );
-        })}
-    </$GridCell>
-  );
-};
-
-export default EmploymentCalculatorResults;
diff --git a/frontend/benefit/handler/src/components/applicationReview/employmentAppliedMoreView/useEmploymentAppliedMoreView.ts b/frontend/benefit/handler/src/components/applicationReview/employmentAppliedMoreView/useEmploymentAppliedMoreView.ts
deleted file mode 100644
index 458c54e954..0000000000
--- a/frontend/benefit/handler/src/components/applicationReview/employmentAppliedMoreView/useEmploymentAppliedMoreView.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import useHandlerReviewActions from 'benefit/handler/hooks/useHandlerReviewActions';
-import { CalculationFormProps } from 'benefit/handler/types/application';
-import { ErrorData } from 'benefit/handler/types/common';
-import { CALCULATION_EMPLOYMENT_KEYS } from 'benefit-shared/constants';
-import { Application } from 'benefit-shared/types/application';
-import { FormikProps, useFormik } from 'formik';
-import fromPairs from 'lodash/fromPairs';
-import { useTranslation } from 'next-i18next';
-import React, { useEffect } from 'react';
-import { Field } from 'shared/components/forms/fields/types';
-import {
-  convertToUIDateFormat,
-  diffMonths,
-  parseDate,
-} from 'shared/utils/date.utils';
-
-import { getValidationSchema } from './utils/validation';
-
-type ExtendedComponentProps = {
-  formik: FormikProps<CalculationFormProps>;
-  fields: {
-    [key in CALCULATION_EMPLOYMENT_KEYS]: Field<CALCULATION_EMPLOYMENT_KEYS>;
-  };
-  grantedPeriod: number;
-  calculationsErrors: ErrorData | undefined | null;
-};
-
-const useEmploymentAppliedMoreView = (
-  application: Application
-): ExtendedComponentProps => {
-  const { t } = useTranslation();
-
-  const { onCalculateEmployment, calculationsErrors } =
-    useHandlerReviewActions(application);
-
-  const formik = useFormik<CalculationFormProps>({
-    initialValues: {
-      [CALCULATION_EMPLOYMENT_KEYS.START_DATE]: convertToUIDateFormat(
-        application?.calculation?.startDate
-      ),
-      [CALCULATION_EMPLOYMENT_KEYS.END_DATE]: convertToUIDateFormat(
-        application?.calculation?.endDate
-      ),
-    },
-    validationSchema: getValidationSchema(),
-    validateOnChange: true,
-    validateOnBlur: true,
-    enableReinitialize: true,
-    onSubmit: onCalculateEmployment,
-  });
-  const { setFieldValue, values } = formik;
-
-  const { startDate, endDate } = values;
-
-  const grantedPeriod = React.useMemo(
-    () => diffMonths(parseDate(endDate), parseDate(startDate)),
-    [endDate, startDate]
-  );
-
-  const fields: ExtendedComponentProps['fields'] = React.useMemo(() => {
-    const pairs = Object.values(CALCULATION_EMPLOYMENT_KEYS).map<
-      [CALCULATION_EMPLOYMENT_KEYS, Field<CALCULATION_EMPLOYMENT_KEYS>]
-    >((fieldName) => [
-      fieldName,
-      {
-        name: fieldName,
-        label: t(`common:calculators.fields.${fieldName}.label`),
-        placeholder: t(`common:calculators.fields.${fieldName}.placeholder`),
-      },
-    ]);
-
-    return fromPairs<Field<CALCULATION_EMPLOYMENT_KEYS>>(pairs) as Record<
-      CALCULATION_EMPLOYMENT_KEYS,
-      Field<CALCULATION_EMPLOYMENT_KEYS>
-    >;
-  }, [t]);
-
-  useEffect(() => {
-    if (grantedPeriod < 0) {
-      void setFieldValue(fields.endDate.name, startDate);
-    }
-  }, [grantedPeriod, startDate, fields.endDate.name, setFieldValue]);
-
-  return {
-    formik,
-    fields,
-    grantedPeriod,
-    calculationsErrors,
-  };
-};
-
-export { useEmploymentAppliedMoreView };
diff --git a/frontend/benefit/handler/src/components/applicationReview/employmentAppliedMoreView/utils/validation.ts b/frontend/benefit/handler/src/components/applicationReview/employmentAppliedMoreView/utils/validation.ts
deleted file mode 100644
index 7c50be7441..0000000000
--- a/frontend/benefit/handler/src/components/applicationReview/employmentAppliedMoreView/utils/validation.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import {
-  CALCULATION_EMPLOYMENT_KEYS,
-  VALIDATION_MESSAGE_KEYS,
-} from 'benefit-shared/constants';
-import { CalculationCommon } from 'benefit-shared/types/application';
-import * as Yup from 'yup';
-
-export const getValidationSchema = (): Yup.SchemaOf<CalculationCommon> =>
-  Yup.object().shape({
-    [CALCULATION_EMPLOYMENT_KEYS.START_DATE]: Yup.string().typeError(
-      VALIDATION_MESSAGE_KEYS.DATE_FORMAT
-    ).required(VALIDATION_MESSAGE_KEYS.REQUIRED),
-    [CALCULATION_EMPLOYMENT_KEYS.END_DATE]: Yup.string().typeError(
-      VALIDATION_MESSAGE_KEYS.DATE_FORMAT
-    ).required(VALIDATION_MESSAGE_KEYS.REQUIRED),
-  });
diff --git a/frontend/benefit/handler/src/components/applicationReview/employmentView/EmpoymentView.tsx b/frontend/benefit/handler/src/components/applicationReview/employmentView/EmpoymentView.tsx
index c455d7cb5c..251bc26f82 100644
--- a/frontend/benefit/handler/src/components/applicationReview/employmentView/EmpoymentView.tsx
+++ b/frontend/benefit/handler/src/components/applicationReview/employmentView/EmpoymentView.tsx
@@ -8,6 +8,7 @@ import {
   APPLICATION_STATUSES,
   ATTACHMENT_TYPES,
 } from 'benefit-shared/constants';
+import { paySubsidyTitle } from 'benefit-shared/utils/common';
 import camelCase from 'lodash/camelCase';
 import { useTranslation } from 'next-i18next';
 import * as React from 'react';
@@ -137,9 +138,7 @@ const EmploymentView: React.FC<ApplicationReviewViewProps> = ({
       </$GridCell>
       <$GridCell $colSpan={6}>
         <AttachmentsListView
-          title={t(
-            'common:applications.sections.attachments.types.paySubsidyDecision.title'
-          )}
+          title={t(paySubsidyTitle(data.paySubsidyGranted))}
           type={ATTACHMENT_TYPES.PAY_SUBSIDY_CONTRACT}
           attachments={data.attachments || []}
         />
diff --git a/frontend/benefit/handler/src/components/applicationReview/handledView/HandledView.tsx b/frontend/benefit/handler/src/components/applicationReview/handledView/HandledView.tsx
index d7c1337c01..117ff91b0e 100644
--- a/frontend/benefit/handler/src/components/applicationReview/handledView/HandledView.tsx
+++ b/frontend/benefit/handler/src/components/applicationReview/handledView/HandledView.tsx
@@ -1,6 +1,6 @@
 import ReviewSection from 'benefit/handler/components/reviewSection/ReviewSection';
 import { ApplicationReviewViewProps } from 'benefit/handler/types/application';
-import { APPLICATION_STATUSES, BENEFIT_TYPES } from 'benefit-shared/constants';
+import { APPLICATION_STATUSES } from 'benefit-shared/constants';
 import { useTranslation } from 'next-i18next';
 import * as React from 'react';
 import {
@@ -16,7 +16,6 @@ import {
 } from 'shared/utils/date.utils';
 import { useTheme } from 'styled-components';
 
-import EmploymentCalculatorResults from '../employmentAppliedMoreView/EmploymentCalculatorResults/EmploymentCalculatorResults';
 import SalaryCalculatorResults from '../salaryBenefitCalculatorView/SalaryCalculatorResults/SalaryCalculatorResults';
 
 const HandledView: React.FC<ApplicationReviewViewProps> = ({ data }) => {
@@ -56,12 +55,7 @@ const HandledView: React.FC<ApplicationReviewViewProps> = ({ data }) => {
               margin: ${theme.spacing.s} 0;
             `}
           >
-            {data.benefitType === BENEFIT_TYPES.EMPLOYMENT && (
-              <EmploymentCalculatorResults data={data} />
-            )}
-            {data.benefitType === BENEFIT_TYPES.SALARY && (
-              <SalaryCalculatorResults data={data} />
-            )}
+            <SalaryCalculatorResults data={data} />
           </$GridCell>
           <$GridCell $colSpan={12}>
             <$ViewField>
diff --git a/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/SalaryBenefitCalculatorView.tsx b/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/SalaryBenefitCalculatorView.tsx
index 4080a95fea..d23d5caf4a 100644
--- a/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/SalaryBenefitCalculatorView.tsx
+++ b/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/SalaryBenefitCalculatorView.tsx
@@ -13,7 +13,6 @@ import {
 } from 'hds-react';
 import * as React from 'react';
 import { $ViewField } from 'shared/components/benefit/summaryView/SummaryView.sc';
-import { $Checkbox } from 'shared/components/forms/fields/Fields.sc';
 import { Option } from 'shared/components/forms/fields/types';
 import { $GridCell } from 'shared/components/forms/section/FormSection.sc';
 import $Notification from 'shared/components/notification/Notification.sc';
@@ -26,9 +25,13 @@ import {
 import { formatStringFloatValue } from 'shared/utils/string.utils';
 
 import {
+  $CalculatorHeader,
   $CalculatorHr,
   $CalculatorTableRow,
   $CalculatorText,
+  $HelpText,
+  $MainHeader,
+  $TabButton,
 } from '../ApplicationReview.sc';
 import CalculatorErrors from '../calculatorErrors/CalculatorErrors';
 import SalaryBenefitManualCalculatorView from './SalaryBenefitManualCalculatorView';
@@ -62,34 +65,39 @@ const SalaryBenefitCalculatorView: React.FC<
     language,
     getErrorMessage,
     handleSubmit,
+    handleClear,
     isRecalculationRequired,
   } = useCalculatorData(CALCULATION_TYPES.SALARY, formik);
 
+  const eurosPerMonth = 'common:utility.eurosPerMonth';
   return (
-    <ReviewSection withMargin>
-      <$GridCell $colSpan={5}>
-        <$CalculatorText
-          css={`
-            margin: 0 0 ${theme.spacing.xs2} 0;
-          `}
+    <ReviewSection withMargin withBorder>
+      <$GridCell $colSpan={11}>
+        <$MainHeader>{t(`${translationsBase}.header`)}</$MainHeader>
+      </$GridCell>
+
+      <$GridCell $colStart={1} $colSpan={11}>
+        <$TabButton
+          active={!isManualCalculator}
+          onClick={() => isManualCalculator && changeCalculatorMode()}
         >
-          {t(`${translationsBase}.header`)}
-        </$CalculatorText>
+          {t(`${translationsBase}.calculator`)}
+        </$TabButton>
+        <$TabButton
+          active={isManualCalculator}
+          onClick={() => !isManualCalculator && changeCalculatorMode()}
+        >
+          {t(`${translationsBase}.calculateManually`)}
+        </$TabButton>
       </$GridCell>
 
-      {data.startDate && data.endDate && (
-        <$GridCell $colStart={1} $colSpan={3} style={{ alignSelf: 'center' }}>
-          <$ViewField>
-            {t(`${translationsBase}.startEndDates`, {
-              startDate: convertToUIDateFormat(data.startDate),
-              endDate: convertToUIDateFormat(data.endDate),
-              period: formatStringFloatValue(data.durationInMonthsRounded),
-            })}
-          </$ViewField>
-        </$GridCell>
-      )}
+      <$GridCell $colSpan={11}>
+        <$CalculatorHeader>
+          {t(`${translationsBase}.header2`)}
+        </$CalculatorHeader>
+      </$GridCell>
 
-      <$GridCell $colStart={4} $colSpan={2}>
+      <$GridCell $colSpan={3}>
         <TextInput
           id={fields.monthlyPay.name}
           name={fields.monthlyPay.name}
@@ -102,9 +110,10 @@ const SalaryBenefitCalculatorView: React.FC<
           aria-invalid={!!getErrorMessage(fields.monthlyPay.name)}
           errorText={getErrorMessage(fields.monthlyPay.name)}
         />
+        <$HelpText>{t(eurosPerMonth)}</$HelpText>
       </$GridCell>
 
-      <$GridCell $colStart={6} $colSpan={2}>
+      <$GridCell $colSpan={3}>
         <TextInput
           id={fields.otherExpenses.name}
           name={fields.otherExpenses.name}
@@ -117,9 +126,10 @@ const SalaryBenefitCalculatorView: React.FC<
           aria-invalid={!!getErrorMessage(fields.otherExpenses.name)}
           errorText={getErrorMessage(fields.otherExpenses.name)}
         />
+        <$HelpText>{t(eurosPerMonth)}</$HelpText>
       </$GridCell>
 
-      <$GridCell $colStart={8} $colSpan={2}>
+      <$GridCell $colSpan={3}>
         <TextInput
           id={fields.vacationMoney.name}
           name={fields.vacationMoney.name}
@@ -132,32 +142,17 @@ const SalaryBenefitCalculatorView: React.FC<
           aria-invalid={!!getErrorMessage(fields.vacationMoney.name)}
           errorText={getErrorMessage(fields.vacationMoney.name)}
         />
-      </$GridCell>
-
-      <$GridCell $colSpan={11}>
-        <$CalculatorHr />
-        <$Checkbox
-          css={`
-            input {
-              background-color: ${theme.colors.white};
-            }
-          `}
-          id="manualInputCheckbox"
-          name="manualInputCheckbox"
-          label={t(`${translationsBase}.manualInput`)}
-          checked={isManualCalculator}
-          onChange={changeCalculatorMode}
-        />
-        <$CalculatorHr
-          css={`
-            margin-top: ${theme.spacing.m};
-          `}
-        />
+        <$HelpText>{t(eurosPerMonth)}</$HelpText>
       </$GridCell>
 
       {!isManualCalculator && (
         <>
-          <$GridCell $colStart={1}>
+          <$GridCell $colSpan={11}>
+            <$CalculatorHeader>
+              {t(`${translationsBase}.maximumAid`)}
+            </$CalculatorHeader>
+          </$GridCell>
+          <$GridCell $colStart={1} $colSpan={3}>
             <Select
               value={getStateAidMaxPercentageSelectValue()}
               helper=""
@@ -180,13 +175,25 @@ const SalaryBenefitCalculatorView: React.FC<
             />
           </$GridCell>
 
+          <$GridCell $colStart={1} $colSpan={11}>
+            <$CalculatorHeader>
+              {t(`${translationsBase}.subsidies`)}
+            </$CalculatorHeader>
+          </$GridCell>
+          {formik.values.paySubsidies && (
+            <$GridCell $colStart={1} $colSpan={11}>
+              <h3 style={{ fontSize: theme.fontSize.heading.xs, margin: 0 }}>
+                {t(`${translationsBase}.paySubsidy`)}
+              </h3>
+            </$GridCell>
+          )}
           {formik.values.paySubsidies?.map(
             // eslint-disable-next-line sonarjs/cognitive-complexity
             (item: PaySubsidy, index: number) => (
               <>
                 <$GridCell $colStart={1}>
                   <$CalculatorText>
-                    {fields.paySubsidyPercent.label}
+                    {t(`${translationsBase}.salarySubsidyPercentage`)}
                   </$CalculatorText>
                 </$GridCell>
                 {item.paySubsidyPercent === 100 && (
@@ -345,58 +352,16 @@ const SalaryBenefitCalculatorView: React.FC<
         </>
       )}
 
-      <$GridCell $colStart={1} $colSpan={5}>
-        <$CalculatorText>
-          {t(`${translationsBase}.grantedPeriod`, {
-            period: formatStringFloatValue(grantedPeriod),
-          })}
-        </$CalculatorText>
-      </$GridCell>
-
-      <$GridCell $colStart={1} $colSpan={2}>
-        <DateInput
-          id={fields.startDate.name}
-          name={fields.startDate.name}
-          placeholder={fields.startDate.placeholder}
-          language={language}
-          onChange={(value) => {
-            formik.setFieldValue(fields.startDate.name, value);
-          }}
-          value={formik.values.startDate ?? ''}
-          invalid={!!getErrorMessage(fields.startDate.name)}
-          aria-invalid={!!getErrorMessage(fields.startDate.name)}
-          errorText={getErrorMessage(fields.startDate.name)}
-        />
-      </$GridCell>
-
-      <$GridCell $colStart={3} $colSpan={3}>
-        <DateInput
-          id={fields.endDate.name}
-          name={fields.endDate.name}
-          placeholder={fields.endDate.placeholder}
-          language={language}
-          onChange={(value) => {
-            formik.setFieldValue(fields.endDate.name, value);
-          }}
-          value={formik.values.endDate ?? ''}
-          invalid={!!getErrorMessage(fields.endDate.name)}
-          aria-invalid={!!getErrorMessage(fields.endDate.name)}
-          errorText={getErrorMessage(fields.endDate.name)}
-          style={{ paddingRight: `${theme.spacing.s}` }}
-        />
-      </$GridCell>
-
       {!isManualCalculator && data.apprenticeshipProgram && (
         <>
           <$GridCell $colStart={1} $colSpan={11}>
-            <$CalculatorText
-              isBold
+            <$CalculatorHeader
               css={`
                 margin-top: ${theme.spacing.m};
               `}
             >
               {t(`${translationsBase}.apprenticeshipCompensation`)}
-            </$CalculatorText>
+            </$CalculatorHeader>
           </$GridCell>
 
           {formik.values.trainingCompensations &&
@@ -472,24 +437,11 @@ const SalaryBenefitCalculatorView: React.FC<
             </React.Fragment>
           ))}
 
-          <$GridCell $colStart={1} $colSpan={2}>
-            <$CalculatorText>{fields.monthlyAmount.label}</$CalculatorText>
-          </$GridCell>
-
-          <$GridCell $colStart={3} $colSpan={5}>
-            <$CalculatorText>
-              {t(`${translationsBase}.apprenticeshipPeriodWithDiff`, {
-                period: diffMonths(
-                  parseDate(newTrainingCompensation.endDate),
-                  parseDate(newTrainingCompensation.startDate)
-                ),
-              })}
-            </$CalculatorText>
-          </$GridCell>
           <$GridCell $colStart={1} $colSpan={1}>
             <TextInput
               id={fields.monthlyAmount.name}
               name={fields.monthlyAmount.name}
+              label={fields.monthlyAmount.label}
               onChange={(e) =>
                 setNewTrainingCompensation((prevValue) => ({
                   ...prevValue,
@@ -503,13 +455,15 @@ const SalaryBenefitCalculatorView: React.FC<
               aria-invalid={!!getErrorMessage(fields.monthlyAmount.name)}
               errorText={getErrorMessage(fields.monthlyAmount.name)}
             />
+            <$HelpText>{t(eurosPerMonth)}</$HelpText>
           </$GridCell>
 
           <$GridCell $colStart={3} $colSpan={3}>
             <DateInput
               id={fields.trainingCompensationStartDate.name}
               name={fields.trainingCompensationStartDate.name}
-              placeholder={fields.startDate.placeholder}
+              placeholder={t('common:utility.select')}
+              label={t('common:utility.start')}
               language={language}
               onChange={(value) =>
                 setNewTrainingCompensation((prevValue) => ({
@@ -518,9 +472,15 @@ const SalaryBenefitCalculatorView: React.FC<
                 }))
               }
               value={convertToUIDateFormat(newTrainingCompensation.startDate)}
-              invalid={!!getErrorMessage(fields.trainingCompensationStartDate.name)}
-              aria-invalid={!!getErrorMessage(fields.trainingCompensationStartDate.name)}
-              errorText={getErrorMessage(fields.trainingCompensationStartDate.name)}
+              invalid={
+                !!getErrorMessage(fields.trainingCompensationStartDate.name)
+              }
+              aria-invalid={
+                !!getErrorMessage(fields.trainingCompensationStartDate.name)
+              }
+              errorText={getErrorMessage(
+                fields.trainingCompensationStartDate.name
+              )}
             />
           </$GridCell>
 
@@ -528,7 +488,8 @@ const SalaryBenefitCalculatorView: React.FC<
             <DateInput
               id={fields.trainingCompensationEndDate.name}
               name={fields.trainingCompensationEndDate.name}
-              placeholder={fields.endDate.placeholder}
+              placeholder={t('common:utility.select')}
+              label={t('common:utility.end')}
               language={language}
               onChange={(value) =>
                 setNewTrainingCompensation((prevValue) => ({
@@ -539,9 +500,16 @@ const SalaryBenefitCalculatorView: React.FC<
                 }))
               }
               value={convertToUIDateFormat(newTrainingCompensation.endDate)}
-              invalid={fields.trainingCompensationEndDate && !!getErrorMessage(fields.trainingCompensationEndDate.name)}
-              aria-invalid={!!getErrorMessage(fields.trainingCompensationEndDate.name)}
-              errorText={getErrorMessage(fields.trainingCompensationEndDate.name)}
+              invalid={
+                fields.trainingCompensationEndDate &&
+                !!getErrorMessage(fields.trainingCompensationEndDate.name)
+              }
+              aria-invalid={
+                !!getErrorMessage(fields.trainingCompensationEndDate.name)
+              }
+              errorText={getErrorMessage(
+                fields.trainingCompensationEndDate.name
+              )}
               style={{ paddingRight: `${theme.spacing.s}` }}
             />
           </$GridCell>
@@ -552,6 +520,7 @@ const SalaryBenefitCalculatorView: React.FC<
               theme="coat"
               disabled={isDisabledAddTrainingCompensationButton}
               iconLeft={<IconPlusCircle />}
+              style={{ marginTop: 'var(--spacing-m)' }}
             >
               {t(`${translationsBase}.add`)}
             </Button>
@@ -559,6 +528,68 @@ const SalaryBenefitCalculatorView: React.FC<
         </>
       )}
 
+      <$GridCell $colSpan={11}>
+        <$CalculatorHeader>
+          {t(`${translationsBase}.periodHeader`)}
+        </$CalculatorHeader>
+      </$GridCell>
+
+      {data.startDate && data.endDate && (
+        <$GridCell $colStart={1} $colSpan={11} style={{ alignSelf: 'center' }}>
+          <$ViewField style={{ marginBottom: theme.spacing.xs }}>
+            {t(`${translationsBase}.appliedPeriod`)}
+            <b>
+              {t(`${translationsBase}.startEndDates`, {
+                startDate: convertToUIDateFormat(data.startDate),
+                endDate: convertToUIDateFormat(data.endDate),
+                period: formatStringFloatValue(data.durationInMonthsRounded),
+              })}
+            </b>
+          </$ViewField>
+        </$GridCell>
+      )}
+
+      <$GridCell $colStart={1} $colSpan={5}>
+        <$CalculatorText>
+          {t(`${translationsBase}.grantedPeriod`, {
+            period: formatStringFloatValue(grantedPeriod),
+          })}
+        </$CalculatorText>
+      </$GridCell>
+
+      <$GridCell $colStart={1} $colSpan={2}>
+        <DateInput
+          id={fields.startDate.name}
+          name={fields.startDate.name}
+          placeholder={fields.startDate.placeholder}
+          language={language}
+          onChange={(value) => {
+            formik.setFieldValue(fields.startDate.name, value);
+          }}
+          value={formik.values.startDate ?? ''}
+          invalid={!!getErrorMessage(fields.startDate.name)}
+          aria-invalid={!!getErrorMessage(fields.startDate.name)}
+          errorText={getErrorMessage(fields.startDate.name)}
+        />
+      </$GridCell>
+
+      <$GridCell $colStart={3} $colSpan={3}>
+        <DateInput
+          id={fields.endDate.name}
+          name={fields.endDate.name}
+          placeholder={fields.endDate.placeholder}
+          language={language}
+          onChange={(value) => {
+            formik.setFieldValue(fields.endDate.name, value);
+          }}
+          value={formik.values.endDate ?? ''}
+          invalid={!!getErrorMessage(fields.endDate.name)}
+          aria-invalid={!!getErrorMessage(fields.endDate.name)}
+          errorText={getErrorMessage(fields.endDate.name)}
+          style={{ paddingRight: `${theme.spacing.s}` }}
+        />
+      </$GridCell>
+
       {isManualCalculator && (
         <SalaryBenefitManualCalculatorView
           formik={formik}
@@ -567,14 +598,21 @@ const SalaryBenefitCalculatorView: React.FC<
         />
       )}
 
-      <$GridCell $colStart={1}>
+      <$GridCell
+        $colStart={1}
+        $colSpan={11}
+        style={{ marginTop: 'var(--spacing-xs)' }}
+      >
         <Button
           onClick={handleSubmit}
           theme="coat"
-          style={{ marginTop: 'var(--spacing-xs)' }}
+          style={{ marginRight: 'var(--spacing-xs)' }}
         >
           {t(`${translationsBase}.calculate`)}
         </Button>
+        <Button onClick={handleClear} theme="coat" variant="secondary">
+          {t(`${translationsBase}.clear`)}
+        </Button>
       </$GridCell>
 
       <$GridCell $colStart={1} $colSpan={11}>
diff --git a/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/SalaryBenefitManualCalculatorView.tsx b/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/SalaryBenefitManualCalculatorView.tsx
index dbaee71a75..3acf840434 100644
--- a/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/SalaryBenefitManualCalculatorView.tsx
+++ b/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/SalaryBenefitManualCalculatorView.tsx
@@ -21,7 +21,7 @@ const SalaryBenefitManualCalculatorView: React.FC<
       <$GridCell $colStart={1} $colSpan={2}>
         <$CalculatorText>{overrideMonthlyBenefitAmount?.label}</$CalculatorText>
       </$GridCell>
-      <$GridCell $colStart={1} $colSpan={1}>
+      <$GridCell $colStart={1} $colSpan={2}>
         <TextInput
           id={overrideMonthlyBenefitAmount?.name}
           name={overrideMonthlyBenefitAmount?.name}
diff --git a/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/useSalaryBenefitCalculatorData.ts b/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/useSalaryBenefitCalculatorData.ts
index 651be84086..b997da1b26 100644
--- a/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/useSalaryBenefitCalculatorData.ts
+++ b/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/useSalaryBenefitCalculatorData.ts
@@ -24,7 +24,7 @@ import {
 } from 'shared/utils/date.utils';
 import { v4 as uuidv4 } from 'uuid';
 
-import { getValidationSchema } from '../employmentAppliedMoreView/utils/validation';
+import { getValidationSchema } from './utils/validation';
 
 type ExtendedComponentProps = {
   formik: FormikProps<CalculationFormProps>;
diff --git a/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/utils/validation.ts b/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/utils/validation.ts
new file mode 100644
index 0000000000..df70f5f574
--- /dev/null
+++ b/frontend/benefit/handler/src/components/applicationReview/salaryBenefitCalculatorView/utils/validation.ts
@@ -0,0 +1,16 @@
+import {
+  CALCULATION_EMPLOYMENT_KEYS,
+  VALIDATION_MESSAGE_KEYS,
+} from 'benefit-shared/constants';
+import { CalculationCommon } from 'benefit-shared/types/application';
+import * as Yup from 'yup';
+
+export const getValidationSchema = (): Yup.SchemaOf<CalculationCommon> =>
+  Yup.object().shape({
+    [CALCULATION_EMPLOYMENT_KEYS.START_DATE]: Yup.string()
+      .typeError(VALIDATION_MESSAGE_KEYS.DATE_FORMAT)
+      .required(VALIDATION_MESSAGE_KEYS.REQUIRED),
+    [CALCULATION_EMPLOYMENT_KEYS.END_DATE]: Yup.string()
+      .typeError(VALIDATION_MESSAGE_KEYS.DATE_FORMAT)
+      .required(VALIDATION_MESSAGE_KEYS.REQUIRED),
+  });
diff --git a/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx b/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx
index 20d8329591..f0511a3647 100644
--- a/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx
+++ b/frontend/benefit/handler/src/components/newApplication/formContent/FormContent.tsx
@@ -17,6 +17,7 @@ import {
   DeMinimisAid,
   TextProp,
 } from 'benefit-shared/types/application';
+import { paySubsidyTitle } from 'benefit-shared/utils/common';
 import { FormikProps } from 'formik';
 import { DateInput, SelectionGroup, TextInput } from 'hds-react';
 import React from 'react';
@@ -662,6 +663,7 @@ const FormContent: React.FC<Props> = ({
               attachments={attachments}
               attachmentType={ATTACHMENT_TYPES.PAY_SUBSIDY_CONTRACT}
               handleQuietSave={handleQuietSave}
+              title={t(paySubsidyTitle(formik.values.paySubsidyGranted))}
               required
             />
           </$GridCell>
diff --git a/frontend/benefit/handler/src/components/newApplication/formContent/attachmentsList/AttachmentsList.tsx b/frontend/benefit/handler/src/components/newApplication/formContent/attachmentsList/AttachmentsList.tsx
index 6e99d51883..cbdbac0887 100644
--- a/frontend/benefit/handler/src/components/newApplication/formContent/attachmentsList/AttachmentsList.tsx
+++ b/frontend/benefit/handler/src/components/newApplication/formContent/attachmentsList/AttachmentsList.tsx
@@ -13,6 +13,7 @@ export type AttachmentsListProps = {
   handleQuietSave?: () => Promise<ApplicationData | void>;
   required?: boolean;
   as?: 'div' | 'li';
+  title?: string;
 };
 
 const AttachmentsList: React.FC<AttachmentsListProps> = ({
@@ -21,6 +22,7 @@ const AttachmentsList: React.FC<AttachmentsListProps> = ({
   handleQuietSave,
   required,
   as,
+  title,
 }) => {
   const {
     t,
@@ -35,7 +37,11 @@ const AttachmentsList: React.FC<AttachmentsListProps> = ({
   return (
     <AttachmentsListBase
       as={as}
-      title={t(`${translationsBase}.types.${camelCase(attachmentType)}.title`)}
+      title={
+        title !== undefined
+          ? title
+          : t(`${translationsBase}.types.${camelCase(attachmentType)}.title`)
+      }
       attachmentType={attachmentType}
       name={attachmentType}
       attachments={attachments}
diff --git a/frontend/benefit/handler/src/components/newApplication/review/attachmentsSection/AttachmentsSection.tsx b/frontend/benefit/handler/src/components/newApplication/review/attachmentsSection/AttachmentsSection.tsx
index efe1e1633c..1aa04f6e15 100644
--- a/frontend/benefit/handler/src/components/newApplication/review/attachmentsSection/AttachmentsSection.tsx
+++ b/frontend/benefit/handler/src/components/newApplication/review/attachmentsSection/AttachmentsSection.tsx
@@ -1,6 +1,7 @@
 import AttachmentsListView from 'benefit/handler/components/attachmentsListView/AttachmentsListView';
 import { ReviewChildProps } from 'benefit/handler/types/common';
 import { ATTACHMENT_TYPES } from 'benefit-shared/constants';
+import { paySubsidyTitle } from 'benefit-shared/utils/common';
 import { useTranslation } from 'next-i18next';
 import React from 'react';
 import { $GridCell } from 'shared/components/forms/section/FormSection.sc';
@@ -43,9 +44,7 @@ const AttachmentsSection: React.FC<ReviewChildProps> = ({
       <$GridCell $colStart={1} $colSpan={6}>
         <AttachmentsListView
           type={ATTACHMENT_TYPES.PAY_SUBSIDY_CONTRACT}
-          title={t(
-            `${translationsBase}.attachments.types.paySubsidyDecision.title`
-          )}
+          title={t(paySubsidyTitle(data.paySubsidyGranted))}
           attachments={data.attachments || []}
         />
       </$GridCell>
diff --git a/frontend/benefit/handler/src/components/newApplication/review/companySection/CompanySection.tsx b/frontend/benefit/handler/src/components/newApplication/review/companySection/CompanySection.tsx
index 000faf0a0a..53460b18ed 100644
--- a/frontend/benefit/handler/src/components/newApplication/review/companySection/CompanySection.tsx
+++ b/frontend/benefit/handler/src/components/newApplication/review/companySection/CompanySection.tsx
@@ -224,7 +224,16 @@ const CompanySection: React.FC<ReviewChildProps> = ({
               }`
             )}
           </$ViewField>
-          <$ViewField>{data.coOperationNegotiationsDescription}</$ViewField>
+          {data.coOperationNegotiationsDescription && (
+            <>
+              <$ViewFieldBold>
+                {t(
+                  `${translationsBase}.fields.coOperationNegotiations.description`
+                )}
+              </$ViewFieldBold>
+              <$ViewField>{data.coOperationNegotiationsDescription}</$ViewField>
+            </>
+          )}
         </$GridCell>
       </SummarySection>
     </>
diff --git a/frontend/benefit/handler/src/components/reviewSection/ReviewSection.tsx b/frontend/benefit/handler/src/components/reviewSection/ReviewSection.tsx
index 63e47ac6cf..b4c3928968 100644
--- a/frontend/benefit/handler/src/components/reviewSection/ReviewSection.tsx
+++ b/frontend/benefit/handler/src/components/reviewSection/ReviewSection.tsx
@@ -18,6 +18,7 @@ export type ReviewSectionProps = {
   children?: React.ReactNode;
   action?: React.ReactNode;
   withMargin?: boolean;
+  withBorder?: boolean;
   withoutDivider?: boolean;
   header?: string;
   section?: keyof ReviewState;
@@ -29,6 +30,7 @@ const ReviewSection: React.FC<ReviewSectionProps> = ({
   header,
   action,
   withMargin,
+  withBorder,
   withoutDivider,
   role,
   loading,
@@ -69,6 +71,9 @@ const ReviewSection: React.FC<ReviewSectionProps> = ({
         background-color: ${bgColor};
         margin-bottom: ${theme.spacing.s};
         gap: 0;
+        border: ${withBorder
+          ? `2px solid ${theme.colors.coatOfArmsMediumLight}`
+          : 'none'};
       `}
     >
       {withAction && (
diff --git a/frontend/benefit/handler/src/hooks/useCalculatorData.ts b/frontend/benefit/handler/src/hooks/useCalculatorData.ts
index 6ac1384bcf..603483a22c 100644
--- a/frontend/benefit/handler/src/hooks/useCalculatorData.ts
+++ b/frontend/benefit/handler/src/hooks/useCalculatorData.ts
@@ -15,6 +15,7 @@ type ExtendedComponentProps = {
   theme: DefaultTheme;
   language: Language;
   handleSubmit: () => void;
+  handleClear: () => void;
   getErrorMessage: (fieldName: string) => string | undefined;
   isRecalculationRequired: boolean;
 };
@@ -50,6 +51,10 @@ const useCalculatorData = (
     });
   };
 
+  const handleClear = (): void => {
+    formik.resetForm();
+  };
+
   useEffect(() => {
     if (didMount.current && !isRecalculationRequired)
       setIsRecalculationRequired(true);
@@ -63,6 +68,7 @@ const useCalculatorData = (
     language,
     getErrorMessage,
     handleSubmit,
+    handleClear,
     isRecalculationRequired,
   };
 };
diff --git a/frontend/benefit/shared/src/utils/common.ts b/frontend/benefit/shared/src/utils/common.ts
index 6057810d71..4d0b0e08b8 100644
--- a/frontend/benefit/shared/src/utils/common.ts
+++ b/frontend/benefit/shared/src/utils/common.ts
@@ -1,3 +1,4 @@
+import { PAY_SUBSIDY_GRANTED } from 'benefit-shared/constants';
 import { Message, MessageData } from 'benefit-shared/types/application';
 import camelcaseKeys from 'camelcase-keys';
 import { friendlyFormatIBAN } from 'ibantools';
@@ -30,3 +31,8 @@ export const isTruthy = (value: string | boolean): boolean =>
 
 export const formatIBAN = (ibanNumber: string): string =>
   friendlyFormatIBAN(ibanNumber);
+
+export const paySubsidyTitle = (paySubsidy: PAY_SUBSIDY_GRANTED): string =>
+  paySubsidy === PAY_SUBSIDY_GRANTED.GRANTED_AGED
+    ? 'common:applications.sections.attachments.types.agedSubsidyDecision.title'
+    : 'common:applications.sections.attachments.types.paySubsidyDecision.title';