From 15ac054c6ed080b83f1ac069bc4440f999195f0c Mon Sep 17 00:00:00 2001
From: Hallvard Andreas Stark
 <57254397+hallvardastark@users.noreply.github.com>
Date: Thu, 7 Dec 2023 15:34:12 +0100
Subject: [PATCH 1/9] Bytter ut gammel komponent med problemer til ny (#5402)

---
 .../TilbakekrevingVedtakForm.spec.tsx         |  2 +-
 ...bakekrevingEditerVedtaksbrevPanel.spec.tsx | 30 +++----
 .../TilbakekrevingEditerVedtaksbrevPanel.tsx  | 78 ++++++++++---------
 ...kekrevingEditerVedtaksbrevPanel.module.css | 10 +--
 4 files changed, 56 insertions(+), 64 deletions(-)

diff --git a/packages/prosess-vedtak-tilbakekreving/src/components/TilbakekrevingVedtakForm.spec.tsx b/packages/prosess-vedtak-tilbakekreving/src/components/TilbakekrevingVedtakForm.spec.tsx
index e470076ce5..a8e981a584 100644
--- a/packages/prosess-vedtak-tilbakekreving/src/components/TilbakekrevingVedtakForm.spec.tsx
+++ b/packages/prosess-vedtak-tilbakekreving/src/components/TilbakekrevingVedtakForm.spec.tsx
@@ -41,7 +41,7 @@ test('<TilbakekrevingVedtakForm> skal vise tekstfelt for begrunnelse og godkjenn
     { messages },
   );
 
-  expect(screen.getByRole('heading')).toHaveTextContent('Vedtaksbrev');
+  expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent('Vedtaksbrev');
   expect(screen.getByText('Til godkjenning')).not.toBeDisabled();
   expect(screen.getByRole('link')).toHaveTextContent('Forhåndsvis brev');
 });
diff --git a/packages/prosess-vedtak-tilbakekreving/src/components/brev/TilbakekrevingEditerVedtaksbrevPanel.spec.tsx b/packages/prosess-vedtak-tilbakekreving/src/components/brev/TilbakekrevingEditerVedtaksbrevPanel.spec.tsx
index 46fbed4bf4..1897fcedae 100644
--- a/packages/prosess-vedtak-tilbakekreving/src/components/brev/TilbakekrevingEditerVedtaksbrevPanel.spec.tsx
+++ b/packages/prosess-vedtak-tilbakekreving/src/components/brev/TilbakekrevingEditerVedtaksbrevPanel.spec.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import Ekspanderbartpanel from 'nav-frontend-ekspanderbartpanel';
-
+import { renderWithIntlAndReduxForm } from '@fpsak-frontend/utils-test/src/test-utils';
+import { screen } from '@testing-library/react';
 import TilbakekrevingEditerVedtaksbrevPanel from './TilbakekrevingEditerVedtaksbrevPanel';
 
 describe('<TilbakekrevingEditerVedtaksbrevPanel>', () => {
@@ -74,7 +73,7 @@ describe('<TilbakekrevingEditerVedtaksbrevPanel>', () => {
   ];
 
   it('skal vise tekstfelt for begrunnelse og godkjenningsknapp', () => {
-    const wrapper = shallow(
+    renderWithIntlAndReduxForm(
       <TilbakekrevingEditerVedtaksbrevPanel
         vedtaksbrevAvsnitt={vedtaksbrevAvsnitt}
         formName="testForm"
@@ -86,18 +85,16 @@ describe('<TilbakekrevingEditerVedtaksbrevPanel>', () => {
       />,
     );
 
-    const paneler = wrapper.find(Ekspanderbartpanel);
-    expect(paneler).toHaveLength(3);
-    expect(paneler.first().prop('tittel')).toEqual('Du må betale tilbake foreldrepenger');
-    expect(paneler.first().prop('apen')).toBe(false);
-    expect(paneler.at(1).prop('tittel')).toEqual('Perioden fra og med 10. april 2019 til og med 14. april 2019');
-    expect(paneler.at(1).prop('apen')).toBe(false);
-    expect(paneler.last().prop('tittel')).toEqual('Hvordan betale tilbake pengene du skylder');
-    expect(paneler.last().prop('apen')).toBe(false);
+    expect(screen.getByText('Du må betale tilbake foreldrepenger', { selector: 'h3' })).toBeInTheDocument();
+    expect(
+      screen.getByText('Perioden fra og med 10. april 2019 til og med 14. april 2019', { selector: 'h3' }),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Hvordan betale tilbake pengene du skylder', { selector: 'h3' })).toBeInTheDocument();
+    expect(screen.getAllByRole('button', { expanded: false })).toHaveLength(3);
   });
 
   it('skal automatisk åpne panel som ikke har obligatorisk verdi utfylt', () => {
-    const wrapper = shallow(
+    renderWithIntlAndReduxForm(
       <TilbakekrevingEditerVedtaksbrevPanel
         vedtaksbrevAvsnitt={vedtaksbrevAvsnitt}
         formName="testForm"
@@ -109,11 +106,8 @@ describe('<TilbakekrevingEditerVedtaksbrevPanel>', () => {
       />,
     );
 
-    const paneler = wrapper.find(Ekspanderbartpanel);
-    expect(paneler).toHaveLength(3);
-    expect(paneler.at(0).prop('apen')).toBe(true);
-    expect(paneler.at(1).prop('apen')).toBe(true);
-    expect(paneler.at(2).prop('apen')).toBe(false);
+    expect(screen.getAllByRole('button', { expanded: false })).toHaveLength(1);
+    expect(screen.getAllByRole('button', { expanded: true })).toHaveLength(2);
   });
 
   it('skal sette opp initial values for form', () => {
diff --git a/packages/prosess-vedtak-tilbakekreving/src/components/brev/TilbakekrevingEditerVedtaksbrevPanel.tsx b/packages/prosess-vedtak-tilbakekreving/src/components/brev/TilbakekrevingEditerVedtaksbrevPanel.tsx
index c3952ccc8f..8d19e5da9a 100644
--- a/packages/prosess-vedtak-tilbakekreving/src/components/brev/TilbakekrevingEditerVedtaksbrevPanel.tsx
+++ b/packages/prosess-vedtak-tilbakekreving/src/components/brev/TilbakekrevingEditerVedtaksbrevPanel.tsx
@@ -1,4 +1,4 @@
-import Ekspanderbartpanel from 'nav-frontend-ekspanderbartpanel';
+import { ExpansionCard } from '@navikt/ds-react';
 import { Element, Normaltekst, Undertittel } from 'nav-frontend-typografi';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -47,43 +47,49 @@ const TilbakekrevingEditerVedtaksbrevPanel = ({
         avsnitt.avsnittstype === underavsnittType.OPPSUMMERING && fritekstOppsummeringPakrevdMenIkkeUtfylt;
       return (
         <React.Fragment key={avsnitt.avsnittstype + avsnitt.fom}>
-          <Ekspanderbartpanel
-            className={harPeriodeSomManglerObligatoriskVerdi || visApen ? styles.panelMedGulmarkering : styles.panel}
-            tittel={
-              avsnitt.overskrift ? (
-                avsnitt.overskrift
-              ) : (
-                <FormattedMessage id="TilbakekrevingEditerVedtaksbrevPanel.LovhjemlerOgKlagerettOverskrift" />
-              )
-            }
-            apen={harPeriodeSomManglerObligatoriskVerdi || visApen}
+          <ExpansionCard
+            size="small"
+            aria-label={avsnitt.overskrift}
+            className={harPeriodeSomManglerObligatoriskVerdi || visApen ? styles.panelMedGulmarkering : ''}
+            defaultOpen={harPeriodeSomManglerObligatoriskVerdi || visApen}
           >
-            {underavsnitter.map((underavsnitt: any) => (
-              <React.Fragment key={underavsnitt.underavsnittstype + underavsnitt.overskrift + underavsnitt.brødtekst}>
-                {underavsnitt.overskrift && <Element>{underavsnitt.overskrift}</Element>}
-                {underavsnitt.brødtekst && <Normaltekst>{underavsnitt.brødtekst}</Normaltekst>}
-                {underavsnitt.fritekstTillatt && (
-                  <>
-                    <VerticalSpacer eightPx />
-                    <TilbakekrevingVedtakUtdypendeTekstPanel
-                      type={
-                        underavsnitt.underavsnittstype
-                          ? `${periode}.${underavsnitt.underavsnittstype}`
-                          : avsnitt.avsnittstype
-                      }
-                      formName={formName}
-                      readOnly={readOnly}
-                      behandlingId={behandlingId}
-                      behandlingVersjon={behandlingVersjon}
-                      fritekstPakrevet={underavsnitt.fritekstPåkrevet}
-                      maximumLength={erRevurderingTilbakekrevingFeilBeløpBortfalt ? 10000 : null}
-                    />
-                  </>
+            <ExpansionCard.Header>
+              <ExpansionCard.Title size="small">
+                {avsnitt.overskrift ? (
+                  avsnitt.overskrift
+                ) : (
+                  <FormattedMessage id="TilbakekrevingEditerVedtaksbrevPanel.LovhjemlerOgKlagerettOverskrift" />
                 )}
-                <VerticalSpacer eightPx />
-              </React.Fragment>
-            ))}
-          </Ekspanderbartpanel>
+              </ExpansionCard.Title>
+            </ExpansionCard.Header>
+            <ExpansionCard.Content>
+              {underavsnitter.map((underavsnitt: any) => (
+                <React.Fragment key={underavsnitt.underavsnittstype + underavsnitt.overskrift + underavsnitt.brødtekst}>
+                  {underavsnitt.overskrift && <Element>{underavsnitt.overskrift}</Element>}
+                  {underavsnitt.brødtekst && <Normaltekst>{underavsnitt.brødtekst}</Normaltekst>}
+                  {underavsnitt.fritekstTillatt && (
+                    <>
+                      <VerticalSpacer eightPx />
+                      <TilbakekrevingVedtakUtdypendeTekstPanel
+                        type={
+                          underavsnitt.underavsnittstype
+                            ? `${periode}.${underavsnitt.underavsnittstype}`
+                            : avsnitt.avsnittstype
+                        }
+                        formName={formName}
+                        readOnly={readOnly}
+                        behandlingId={behandlingId}
+                        behandlingVersjon={behandlingVersjon}
+                        fritekstPakrevet={underavsnitt.fritekstPåkrevet}
+                        maximumLength={erRevurderingTilbakekrevingFeilBeløpBortfalt ? 10000 : null}
+                      />
+                    </>
+                  )}
+                  <VerticalSpacer eightPx />
+                </React.Fragment>
+              ))}
+            </ExpansionCard.Content>
+          </ExpansionCard>
           <VerticalSpacer eightPx />
         </React.Fragment>
       );
diff --git a/packages/prosess-vedtak-tilbakekreving/src/components/brev/tilbakekrevingEditerVedtaksbrevPanel.module.css b/packages/prosess-vedtak-tilbakekreving/src/components/brev/tilbakekrevingEditerVedtaksbrevPanel.module.css
index d75632a5ee..fe1fb6651f 100644
--- a/packages/prosess-vedtak-tilbakekreving/src/components/brev/tilbakekrevingEditerVedtaksbrevPanel.module.css
+++ b/packages/prosess-vedtak-tilbakekreving/src/components/brev/tilbakekrevingEditerVedtaksbrevPanel.module.css
@@ -2,14 +2,6 @@
   max-width: 1000px;
 }
 
-.panel {
-  border: 1px solid black;
-  padding: 1px 1px 1px 1px;
-}
-
 .panelMedGulmarkering {
-  border: 1px solid black;
-  border-left-color: #fa3;
-  border-left-width: 5px;
-  padding: 1px 1px 1px 1px;
+  border-left: 5px solid #fa3;
 }

From ca33fc155fd8c92e1fa1e1c5a19f0424833b444a Mon Sep 17 00:00:00 2001
From: Hallvard Andreas Stark
 <57254397+hallvardastark@users.noreply.github.com>
Date: Thu, 7 Dec 2023 20:06:50 +0100
Subject: [PATCH 2/9] Bytter fra anchor til knapp i historikkinnslag (#5403)

* Bytter fra anchor til knapp i historikkinnslag

* Fikser test
---
 .../src/components/maler/felles/bubbleText.module.css    | 4 ++++
 .../src/components/maler/felles/bubbleText.spec.tsx      | 2 +-
 .../src/components/maler/felles/bubbleText.tsx           | 9 +++++----
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/sak-historikk/src/components/maler/felles/bubbleText.module.css b/packages/sak-historikk/src/components/maler/felles/bubbleText.module.css
index 2132dbae4e..116888af35 100644
--- a/packages/sak-historikk/src/components/maler/felles/bubbleText.module.css
+++ b/packages/sak-historikk/src/components/maler/felles/bubbleText.module.css
@@ -1,4 +1,8 @@
 .clickableArea {
+  background: none;
+  border: none;
+  color: rgb(0, 103, 197);
+  cursor: pointer;
   float: right;
   margin-bottom: 4px;
   margin-top: 4px;
diff --git a/packages/sak-historikk/src/components/maler/felles/bubbleText.spec.tsx b/packages/sak-historikk/src/components/maler/felles/bubbleText.spec.tsx
index a708b7a5ab..4b4cb9243b 100644
--- a/packages/sak-historikk/src/components/maler/felles/bubbleText.spec.tsx
+++ b/packages/sak-historikk/src/components/maler/felles/bubbleText.spec.tsx
@@ -31,7 +31,7 @@ describe('<BubbleText>', () => {
     const wrapper = shallowWithIntl(
       <BubbleText.WrappedComponent intl={intlMock} bodyText={bodyText} cutOffLength={cutOffLength} />,
     );
-    const x = wrapper.find('a');
+    const x = wrapper.find('button');
     x.simulate('click');
     const oppChevron = wrapper.find(OppChevron);
     expect(oppChevron).toHaveLength(1);
diff --git a/packages/sak-historikk/src/components/maler/felles/bubbleText.tsx b/packages/sak-historikk/src/components/maler/felles/bubbleText.tsx
index e2c7f6ae2d..679a43fb40 100644
--- a/packages/sak-historikk/src/components/maler/felles/bubbleText.tsx
+++ b/packages/sak-historikk/src/components/maler/felles/bubbleText.tsx
@@ -39,15 +39,16 @@ const BubbleText = ({ intl, cutOffLength = 83, bodyText = '' }: OwnProps & Wrapp
     <>
       {expanded && <div>{bodyText}</div>}
       {!expanded && <div className={styles.breakWord}>{truncateText(bodyText, cutOffLength)}</div>}
-      <a
-        href="#"
+      <button
+        type="button"
         onClick={handleOnClick}
         onKeyDown={handleKeyDown}
         className={styles.clickableArea}
-        title={intl.formatMessage({ id: expanded ? 'BubbleText.LukkeTekstfelt' : 'BubbleText.ApneTekstfelt' })}
+        aria-label={intl.formatMessage({ id: expanded ? 'BubbleText.LukkeTekstfelt' : 'BubbleText.ApneTekstfelt' })}
+        aria-expanded={expanded}
       >
         {expanded ? <OppChevron /> : <NedChevron />}
-      </a>
+      </button>
     </>
   );
 };

From 38e373e6e7bc074fd1c5d44fdc98b2671b4189e7 Mon Sep 17 00:00:00 2001
From: Hallvard Andreas Stark
 <57254397+hallvardastark@users.noreply.github.com>
Date: Mon, 11 Dec 2023 13:46:34 +0100
Subject: [PATCH 3/9] Tar bort spesifikke lodash-pakker (#5409)

---
 .../behandling-opplaeringspenger/package.json |  10 +-
 .../package.json                              |   4 +-
 packages/behandling-pleiepenger/package.json  |  10 +-
 packages/fakta-etablert-tilsyn/package.json   |   1 -
 .../EtablertTilsynMedSmoring.tsx              |   2 +-
 packages/fakta-inntektsmelding/package.json   |   4 +-
 packages/fakta-institusjon/package.json       |   2 +-
 .../package.json"                             |   2 +-
 packages/fakta-om-barnet/package.json         |   2 +-
 packages/fakta-omsorgen-for/package.json      |   2 +-
 packages/fakta-omsorgsdager/package.json      |   1 -
 .../src/util/useFormSessionStorageUtils.ts    |   2 +-
 packages/fakta-opplaering/package.json        |   2 +-
 packages/form/package.json                    |   2 +-
 packages/prosess-aarskvantum-oms/package.json |   2 +-
 packages/prosess-uttak/package.json           |   2 +-
 .../package.json                              |   2 +-
 .../src/OpptjeningVilkarProsessIndex.tsx      |   2 +-
 packages/prosess-vilkar-sykdom/package.json   |   2 +-
 .../src/SykdomProsessIndex.tsx                |   2 +-
 packages/sak-app/package.json                 |  12 +-
 yarn.lock                                     | 131 +++++++++---------
 22 files changed, 97 insertions(+), 104 deletions(-)

diff --git a/packages/behandling-opplaeringspenger/package.json b/packages/behandling-opplaeringspenger/package.json
index 4a3fdbee3b..14f5ec064e 100644
--- a/packages/behandling-opplaeringspenger/package.json
+++ b/packages/behandling-opplaeringspenger/package.json
@@ -43,12 +43,12 @@
     "@navikt/ft-fakta-beregning-redesign": "1.0.17",
     "@navikt/ft-fakta-fordel-beregningsgrunnlag": "7.3.20",
     "@navikt/ft-prosess-beregningsgrunnlag": "6.3.20",
-    "@navikt/k9-fe-etablert-tilsyn": "1.0.3",
+    "@navikt/k9-fe-etablert-tilsyn": "1.0.4",
     "@navikt/k9-fe-http-utils": "1.0.8",
-    "@navikt/k9-fe-inntektsmelding": "1.0.4",
-    "@navikt/k9-fe-medisinsk-vilkar": "1.0.3",
-    "@navikt/k9-fe-om-barnet": "1.0.3",
-    "@navikt/k9-fe-omsorgen-for": "1.0.3",
+    "@navikt/k9-fe-inntektsmelding": "1.0.5",
+    "@navikt/k9-fe-medisinsk-vilkar": "1.0.4",
+    "@navikt/k9-fe-om-barnet": "1.0.4",
+    "@navikt/k9-fe-omsorgen-for": "1.0.4",
     "axios": "1.6.2",
     "nav-frontend-alertstriper": "4.0.2",
     "react": "18.2.0",
diff --git a/packages/behandling-pleiepenger-sluttfase/package.json b/packages/behandling-pleiepenger-sluttfase/package.json
index 48b29007af..349ff40996 100644
--- a/packages/behandling-pleiepenger-sluttfase/package.json
+++ b/packages/behandling-pleiepenger-sluttfase/package.json
@@ -40,8 +40,8 @@
     "@navikt/ft-fakta-fordel-beregningsgrunnlag": "7.3.20",
     "@navikt/ft-prosess-beregningsgrunnlag": "6.3.20",
     "@navikt/k9-fe-http-utils": "1.0.8",
-    "@navikt/k9-fe-inntektsmelding": "1.0.4",
-    "@navikt/k9-fe-medisinsk-vilkar": "1.0.3",
+    "@navikt/k9-fe-inntektsmelding": "1.0.5",
+    "@navikt/k9-fe-medisinsk-vilkar": "1.0.4",
     "axios": "1.6.2",
     "nav-frontend-alertstriper": "4.0.2",
     "react": "18.2.0",
diff --git a/packages/behandling-pleiepenger/package.json b/packages/behandling-pleiepenger/package.json
index e8d90a4c17..aa8c211f8c 100644
--- a/packages/behandling-pleiepenger/package.json
+++ b/packages/behandling-pleiepenger/package.json
@@ -44,12 +44,12 @@
     "@navikt/ft-fakta-beregning-redesign": "1.0.17",
     "@navikt/ft-fakta-fordel-beregningsgrunnlag": "7.3.20",
     "@navikt/ft-prosess-beregningsgrunnlag": "6.3.20",
-    "@navikt/k9-fe-etablert-tilsyn": "1.0.3",
+    "@navikt/k9-fe-etablert-tilsyn": "1.0.4",
     "@navikt/k9-fe-http-utils": "1.0.8",
-    "@navikt/k9-fe-inntektsmelding": "1.0.4",
-    "@navikt/k9-fe-medisinsk-vilkar": "1.0.3",
-    "@navikt/k9-fe-om-barnet": "1.0.3",
-    "@navikt/k9-fe-omsorgen-for": "1.0.3",
+    "@navikt/k9-fe-inntektsmelding": "1.0.5",
+    "@navikt/k9-fe-medisinsk-vilkar": "1.0.4",
+    "@navikt/k9-fe-om-barnet": "1.0.4",
+    "@navikt/k9-fe-omsorgen-for": "1.0.4",
     "axios": "1.6.2",
     "nav-frontend-alertstriper": "4.0.2",
     "react": "18.2.0",
diff --git a/packages/fakta-etablert-tilsyn/package.json b/packages/fakta-etablert-tilsyn/package.json
index abef2d138b..19a19b77c0 100644
--- a/packages/fakta-etablert-tilsyn/package.json
+++ b/packages/fakta-etablert-tilsyn/package.json
@@ -20,7 +20,6 @@
     "classnames": "2.3.2",
     "dayjs": "1.11.10",
     "lodash": "4.17.21",
-    "lodash.throttle": "4.1.1",
     "nav-frontend-alertstriper": "4.0.2",
     "nav-frontend-alertstriper-style": "3.0.2",
     "nav-frontend-chevron": "1.0.30",
diff --git a/packages/fakta-etablert-tilsyn/src/ui/components/etablertTilsyn/EtablertTilsynMedSmoring.tsx b/packages/fakta-etablert-tilsyn/src/ui/components/etablertTilsyn/EtablertTilsynMedSmoring.tsx
index ef51573e91..b01523f24f 100644
--- a/packages/fakta-etablert-tilsyn/src/ui/components/etablertTilsyn/EtablertTilsynMedSmoring.tsx
+++ b/packages/fakta-etablert-tilsyn/src/ui/components/etablertTilsyn/EtablertTilsynMedSmoring.tsx
@@ -1,7 +1,7 @@
 import { isDayAfter, Period } from '@fpsak-frontend/utils';
 import { Table } from '@navikt/ds-react';
 import dayjs from 'dayjs';
-import { uniq } from 'lodash';
+import uniq from 'lodash/uniq';
 import React from 'react';
 import EtablertTilsynType from '../../../types/EtablertTilsynType';
 import EtablertTilsynRowContent from './EtablertTilsynRowContent';
diff --git a/packages/fakta-inntektsmelding/package.json b/packages/fakta-inntektsmelding/package.json
index 08b8bc0885..723acb793e 100644
--- a/packages/fakta-inntektsmelding/package.json
+++ b/packages/fakta-inntektsmelding/package.json
@@ -31,7 +31,7 @@
     "date-fns": "2.30.0",
     "dayjs": "1.11.10",
     "express": "4.18.2",
-    "lodash.throttle": "4.1.1",
+    "lodash": "4.17.21",
     "msw": "1.3.2",
     "msw-storybook-addon": "1.10.0",
     "nav-frontend-alertstriper": "4.0.2",
@@ -77,7 +77,7 @@
     "classnames": "2.3.2",
     "date-fns": "2.30.0",
     "dayjs": "1.11.10",
-    "lodash.throttle": "4.1.1",
+    "lodash": "4.17.21",
     "msw-storybook-addon": "1.10.0",
     "nav-frontend-alertstriper": "4.0.2",
     "nav-frontend-alertstriper-style": "3.0.2",
diff --git a/packages/fakta-institusjon/package.json b/packages/fakta-institusjon/package.json
index 156d5ed4ea..0d5a574e0a 100644
--- a/packages/fakta-institusjon/package.json
+++ b/packages/fakta-institusjon/package.json
@@ -8,7 +8,7 @@
     "@fpsak-frontend/form": "*",
     "@k9-sak-web/types": "*",
     "@navikt/ft-plattform-komponenter": "2.3.14",
-    "@navikt/k9-fe-form-utils": "1.0.17",
+    "@navikt/k9-fe-form-utils": "1.0.18",
     "@navikt/k9-fe-period-utils": "1.0.12",
     "formik": "2.4.5",
     "yup": "0.32.11"
diff --git "a/packages/fakta-medisinsk-vilk\303\245r/package.json" "b/packages/fakta-medisinsk-vilk\303\245r/package.json"
index 3f329fce78..adc41dcbaf 100644
--- "a/packages/fakta-medisinsk-vilk\303\245r/package.json"
+++ "b/packages/fakta-medisinsk-vilk\303\245r/package.json"
@@ -21,7 +21,7 @@
     "axios": "1.6.2",
     "classnames": "2.3.2",
     "dayjs": "1.11.10",
-    "lodash.throttle": "4.1.1",
+    "lodash": "4.17.21",
     "react": "18.2.0",
     "react-collapse": "5.1.1",
     "react-dom": "18.2.0",
diff --git a/packages/fakta-om-barnet/package.json b/packages/fakta-om-barnet/package.json
index d86247a8e9..28ec9ff9b1 100644
--- a/packages/fakta-om-barnet/package.json
+++ b/packages/fakta-om-barnet/package.json
@@ -18,7 +18,7 @@
     "axios": "1.6.2",
     "classnames": "2.3.2",
     "dayjs": "1.11.10",
-    "lodash.throttle": "4.1.1",
+    "lodash": "4.17.21",
     "react": "18.2.0",
     "react-collapse": "5.1.1",
     "react-dom": "18.2.0",
diff --git a/packages/fakta-omsorgen-for/package.json b/packages/fakta-omsorgen-for/package.json
index ba5eabca9c..9edec2f320 100644
--- a/packages/fakta-omsorgen-for/package.json
+++ b/packages/fakta-omsorgen-for/package.json
@@ -19,7 +19,7 @@
     "axios": "1.6.2",
     "classnames": "2.3.2",
     "dayjs": "1.11.10",
-    "lodash.throttle": "4.1.1",
+    "lodash": "4.17.21",
     "nav-frontend-alertstriper": "4.0.2",
     "nav-frontend-alertstriper-style": "3.0.2",
     "nav-frontend-chevron": "1.0.30",
diff --git a/packages/fakta-omsorgsdager/package.json b/packages/fakta-omsorgsdager/package.json
index ccbd9108b3..7f63ccce7b 100644
--- a/packages/fakta-omsorgsdager/package.json
+++ b/packages/fakta-omsorgsdager/package.json
@@ -19,7 +19,6 @@
     "classnames": "2.3.2",
     "dayjs": "1.11.10",
     "lodash": "4.17.21",
-    "lodash.throttle": "4.1.1",
     "nav-datovelger": "12.6.0",
     "nav-frontend-alertstriper": "4.0.2",
     "nav-frontend-alertstriper-style": "3.0.2",
diff --git a/packages/fakta-omsorgsdager/src/util/useFormSessionStorageUtils.ts b/packages/fakta-omsorgsdager/src/util/useFormSessionStorageUtils.ts
index efa43d8b02..34721639aa 100644
--- a/packages/fakta-omsorgsdager/src/util/useFormSessionStorageUtils.ts
+++ b/packages/fakta-omsorgsdager/src/util/useFormSessionStorageUtils.ts
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef } from 'react';
-import throttle from 'lodash.throttle';
+import throttle from 'lodash/throttle';
 
 // Brukes for midlertidig mellomlagring av input fra saksbehandlare som ett global objekt i k9-sak-web.
 export const BrukFormSesjonslagring = (
diff --git a/packages/fakta-opplaering/package.json b/packages/fakta-opplaering/package.json
index b6cd32fae8..e50ec242a0 100644
--- a/packages/fakta-opplaering/package.json
+++ b/packages/fakta-opplaering/package.json
@@ -12,7 +12,7 @@
     "@navikt/ds-react": "5.11.2",
     "@navikt/ft-plattform-komponenter": "2.3.14",
     "@navikt/k9-fe-date-utils": "1.0.9",
-    "@navikt/k9-fe-form-utils": "1.0.17",
+    "@navikt/k9-fe-form-utils": "1.0.18",
     "@navikt/k9-fe-period-utils": "1.0.12",
     "classnames": "2.3.2",
     "dayjs": "1.11.10",
diff --git a/packages/form/package.json b/packages/form/package.json
index ac36fb2037..5f55b0f0dc 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -11,7 +11,7 @@
     "@navikt/ft-plattform-komponenter": "2.3.14",
     "classnames": "2.3.2",
     "formik": "2.4.5",
-    "lodash.throttle": "4.1.1",
+    "lodash": "4.17.21",
     "moment": "2.29.4",
     "nav-frontend-core": "6.0.1",
     "nav-frontend-etiketter": "3.0.3",
diff --git a/packages/prosess-aarskvantum-oms/package.json b/packages/prosess-aarskvantum-oms/package.json
index db7214b5bd..99ebd36dd8 100644
--- a/packages/prosess-aarskvantum-oms/package.json
+++ b/packages/prosess-aarskvantum-oms/package.json
@@ -14,7 +14,7 @@
     "@k9-sak-web/konstanter": "1.0.0",
     "@k9-sak-web/types": "1.0.0",
     "classnames": "2.3.2",
-    "lodash.throttle": "4.1.1",
+    "lodash": "4.17.21",
     "moment": "2.29.4",
     "nav-frontend-alertstriper": "4.0.2",
     "nav-frontend-alertstriper-style": "3.0.2",
diff --git a/packages/prosess-uttak/package.json b/packages/prosess-uttak/package.json
index e33ceb8aea..f4e74587c8 100644
--- a/packages/prosess-uttak/package.json
+++ b/packages/prosess-uttak/package.json
@@ -38,7 +38,7 @@
     "cors": "2.8.5",
     "dayjs": "1.11.10",
     "express": "4.18.2",
-    "lodash.throttle": "4.1.1",
+    "lodash": "4.17.21",
     "nav-frontend-alertstriper": "4.0.2",
     "nav-frontend-alertstriper-style": "3.0.2",
     "nav-frontend-chevron": "1.0.30",
diff --git a/packages/prosess-vilkar-opptjening-oms/package.json b/packages/prosess-vilkar-opptjening-oms/package.json
index 3369cc493b..45daf60815 100644
--- a/packages/prosess-vilkar-opptjening-oms/package.json
+++ b/packages/prosess-vilkar-opptjening-oms/package.json
@@ -15,7 +15,7 @@
     "@navikt/ft-plattform-komponenter": "2.3.14",
     "classnames": "2.3.2",
     "dayjs": "1.11.10",
-    "lodash.isequal": "4.5.0",
+    "lodash": "4.17.21",
     "moment": "2.29.4",
     "nav-frontend-core": "6.0.1",
     "nav-frontend-grid": "2.0.2",
diff --git a/packages/prosess-vilkar-opptjening-oms/src/OpptjeningVilkarProsessIndex.tsx b/packages/prosess-vilkar-opptjening-oms/src/OpptjeningVilkarProsessIndex.tsx
index b130300c60..148ebaa308 100644
--- a/packages/prosess-vilkar-opptjening-oms/src/OpptjeningVilkarProsessIndex.tsx
+++ b/packages/prosess-vilkar-opptjening-oms/src/OpptjeningVilkarProsessIndex.tsx
@@ -5,7 +5,7 @@ import { dateFormat } from '@fpsak-frontend/utils';
 import { Aksjonspunkt, Fagsak, Opptjening, OpptjeningBehandling, SubmitCallback, Vilkar } from '@k9-sak-web/types';
 import { SideMenu } from '@navikt/ft-plattform-komponenter';
 import classNames from 'classnames/bind';
-import isEqual from 'lodash.isequal';
+import isEqual from 'lodash/isEqual';
 import React, { useEffect, useState } from 'react';
 import { RawIntlProvider, createIntl, createIntlCache } from 'react-intl';
 
diff --git a/packages/prosess-vilkar-sykdom/package.json b/packages/prosess-vilkar-sykdom/package.json
index f388af7dd6..c695347b53 100644
--- a/packages/prosess-vilkar-sykdom/package.json
+++ b/packages/prosess-vilkar-sykdom/package.json
@@ -11,7 +11,7 @@
     "@fpsak-frontend/utils": "1.0.0",
     "@navikt/ft-plattform-komponenter": "2.3.14",
     "classnames": "2.3.2",
-    "lodash.isequal": "4.5.0",
+    "lodash": "4.17.21",
     "nav-frontend-core": "6.0.1",
     "nav-frontend-spinner": "3.0.1",
     "nav-frontend-spinner-style": "1.0.2",
diff --git a/packages/prosess-vilkar-sykdom/src/SykdomProsessIndex.tsx b/packages/prosess-vilkar-sykdom/src/SykdomProsessIndex.tsx
index 767887707a..73e5469507 100644
--- a/packages/prosess-vilkar-sykdom/src/SykdomProsessIndex.tsx
+++ b/packages/prosess-vilkar-sykdom/src/SykdomProsessIndex.tsx
@@ -9,7 +9,7 @@ import { dateFormat } from '@fpsak-frontend/utils';
 import Vilkarperiode from '@k9-sak-web/types/src/vilkarperiode';
 import { SideMenu } from '@navikt/ft-plattform-komponenter';
 import classNames from 'classnames/bind';
-import isEqual from 'lodash.isequal';
+import isEqual from 'lodash/isEqual';
 import { Element, Undertekst, Undertittel } from 'nav-frontend-typografi';
 import React from 'react';
 import { FormattedMessage, RawIntlProvider, createIntl, createIntlCache } from 'react-intl';
diff --git a/packages/sak-app/package.json b/packages/sak-app/package.json
index af32564d6e..624545bd07 100644
--- a/packages/sak-app/package.json
+++ b/packages/sak-app/package.json
@@ -63,13 +63,13 @@
     "@navikt/ft-plattform-komponenter": "2.3.14",
     "@navikt/ft-prosess-beregningsgrunnlag": "6.3.20",
     "@navikt/ft-ui-komponenter": "2.1.17",
-    "@navikt/k9-fe-etablert-tilsyn": "1.0.3",
+    "@navikt/k9-fe-etablert-tilsyn": "1.0.4",
     "@navikt/k9-fe-http-utils": "1.0.8",
-    "@navikt/k9-fe-inntektsmelding": "1.0.4",
-    "@navikt/k9-fe-medisinsk-vilkar": "1.0.3",
-    "@navikt/k9-fe-om-barnet": "1.0.3",
-    "@navikt/k9-fe-omsorgen-for": "1.0.3",
-    "@navikt/k9-fe-omsorgsdager": "1.0.2",
+    "@navikt/k9-fe-inntektsmelding": "1.0.5",
+    "@navikt/k9-fe-medisinsk-vilkar": "1.0.4",
+    "@navikt/k9-fe-om-barnet": "1.0.4",
+    "@navikt/k9-fe-omsorgen-for": "1.0.4",
+    "@navikt/k9-fe-omsorgsdager": "1.0.3",
     "@sentry/browser": "7.84.0",
     "axios": "1.6.2",
     "classnames": "2.3.2",
diff --git a/yarn.lock b/yarn.lock
index fb2326f3d6..dd2bfcd977 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2591,7 +2591,7 @@ __metadata:
     "@navikt/ft-plattform-komponenter": 2.3.14
     classnames: 2.3.2
     formik: 2.4.5
-    lodash.throttle: 4.1.1
+    lodash: 4.17.21
     moment: 2.29.4
     nav-frontend-core: 6.0.1
     nav-frontend-etiketter: 3.0.3
@@ -3198,7 +3198,7 @@ __metadata:
     classnames: 2.3.2
     dayjs: 1.11.10
     enzyme: 3.11.0
-    lodash.isequal: 4.5.0
+    lodash: 4.17.21
     moment: 2.29.4
     nav-frontend-core: 6.0.1
     nav-frontend-grid: 2.0.2
@@ -4442,12 +4442,12 @@ __metadata:
     "@navikt/ft-fakta-beregning-redesign": 1.0.17
     "@navikt/ft-fakta-fordel-beregningsgrunnlag": 7.3.20
     "@navikt/ft-prosess-beregningsgrunnlag": 6.3.20
-    "@navikt/k9-fe-etablert-tilsyn": 1.0.3
+    "@navikt/k9-fe-etablert-tilsyn": 1.0.4
     "@navikt/k9-fe-http-utils": 1.0.8
-    "@navikt/k9-fe-inntektsmelding": 1.0.4
-    "@navikt/k9-fe-medisinsk-vilkar": 1.0.3
-    "@navikt/k9-fe-om-barnet": 1.0.3
-    "@navikt/k9-fe-omsorgen-for": 1.0.3
+    "@navikt/k9-fe-inntektsmelding": 1.0.5
+    "@navikt/k9-fe-medisinsk-vilkar": 1.0.4
+    "@navikt/k9-fe-om-barnet": 1.0.4
+    "@navikt/k9-fe-omsorgen-for": 1.0.4
     axios: 1.6.2
     axios-mock-adapter: 1.22.0
     enzyme: 3.11.0
@@ -4502,8 +4502,8 @@ __metadata:
     "@navikt/ft-fakta-fordel-beregningsgrunnlag": 7.3.20
     "@navikt/ft-prosess-beregningsgrunnlag": 6.3.20
     "@navikt/k9-fe-http-utils": 1.0.8
-    "@navikt/k9-fe-inntektsmelding": 1.0.4
-    "@navikt/k9-fe-medisinsk-vilkar": 1.0.3
+    "@navikt/k9-fe-inntektsmelding": 1.0.5
+    "@navikt/k9-fe-medisinsk-vilkar": 1.0.4
     axios: 1.6.2
     axios-mock-adapter: 1.22.0
     enzyme: 3.11.0
@@ -4563,12 +4563,12 @@ __metadata:
     "@navikt/ft-fakta-beregning-redesign": 1.0.17
     "@navikt/ft-fakta-fordel-beregningsgrunnlag": 7.3.20
     "@navikt/ft-prosess-beregningsgrunnlag": 6.3.20
-    "@navikt/k9-fe-etablert-tilsyn": 1.0.3
+    "@navikt/k9-fe-etablert-tilsyn": 1.0.4
     "@navikt/k9-fe-http-utils": 1.0.8
-    "@navikt/k9-fe-inntektsmelding": 1.0.4
-    "@navikt/k9-fe-medisinsk-vilkar": 1.0.3
-    "@navikt/k9-fe-om-barnet": 1.0.3
-    "@navikt/k9-fe-omsorgen-for": 1.0.3
+    "@navikt/k9-fe-inntektsmelding": 1.0.5
+    "@navikt/k9-fe-medisinsk-vilkar": 1.0.4
+    "@navikt/k9-fe-om-barnet": 1.0.4
+    "@navikt/k9-fe-omsorgen-for": 1.0.4
     axios: 1.6.2
     axios-mock-adapter: 1.22.0
     enzyme: 3.11.0
@@ -4783,7 +4783,6 @@ __metadata:
     classnames: 2.3.2
     dayjs: 1.11.10
     lodash: 4.17.21
-    lodash.throttle: 4.1.1
     nav-frontend-alertstriper: 4.0.2
     nav-frontend-alertstriper-style: 3.0.2
     nav-frontend-chevron: 1.0.30
@@ -4868,7 +4867,7 @@ __metadata:
     date-fns: 2.30.0
     dayjs: 1.11.10
     express: 4.18.2
-    lodash.throttle: 4.1.1
+    lodash: 4.17.21
     msw: 1.3.2
     msw-storybook-addon: 1.10.0
     nav-frontend-alertstriper: 4.0.2
@@ -4913,7 +4912,7 @@ __metadata:
     classnames: 2.3.2
     date-fns: 2.30.0
     dayjs: 1.11.10
-    lodash.throttle: 4.1.1
+    lodash: 4.17.21
     msw-storybook-addon: 1.10.0
     nav-frontend-alertstriper: 4.0.2
     nav-frontend-alertstriper-style: 3.0.2
@@ -4953,7 +4952,7 @@ __metadata:
     "@fpsak-frontend/form": "*"
     "@k9-sak-web/types": "*"
     "@navikt/ft-plattform-komponenter": 2.3.14
-    "@navikt/k9-fe-form-utils": 1.0.17
+    "@navikt/k9-fe-form-utils": 1.0.18
     "@navikt/k9-fe-period-utils": 1.0.12
     formik: 2.4.5
     yup: 0.32.11
@@ -4975,7 +4974,7 @@ __metadata:
     axios: 1.6.2
     classnames: 2.3.2
     dayjs: 1.11.10
-    lodash.throttle: 4.1.1
+    lodash: 4.17.21
     react: 18.2.0
     react-collapse: 5.1.1
     react-dom: 18.2.0
@@ -4999,7 +4998,7 @@ __metadata:
     axios: 1.6.2
     classnames: 2.3.2
     dayjs: 1.11.10
-    lodash.throttle: 4.1.1
+    lodash: 4.17.21
     react: 18.2.0
     react-collapse: 5.1.1
     react-dom: 18.2.0
@@ -5022,7 +5021,7 @@ __metadata:
     axios: 1.6.2
     classnames: 2.3.2
     dayjs: 1.11.10
-    lodash.throttle: 4.1.1
+    lodash: 4.17.21
     nav-frontend-alertstriper: 4.0.2
     nav-frontend-alertstriper-style: 3.0.2
     nav-frontend-chevron: 1.0.30
@@ -5064,7 +5063,6 @@ __metadata:
     dayjs: 1.11.10
     jest-axe: ^8.0.0
     lodash: 4.17.21
-    lodash.throttle: 4.1.1
     nav-datovelger: 12.6.0
     nav-frontend-alertstriper: 4.0.2
     nav-frontend-alertstriper-style: 3.0.2
@@ -5100,7 +5098,7 @@ __metadata:
     "@navikt/ds-react": 5.11.2
     "@navikt/ft-plattform-komponenter": 2.3.14
     "@navikt/k9-fe-date-utils": 1.0.9
-    "@navikt/k9-fe-form-utils": 1.0.17
+    "@navikt/k9-fe-form-utils": 1.0.18
     "@navikt/k9-fe-period-utils": 1.0.12
     classnames: 2.3.2
     dayjs: 1.11.10
@@ -5205,7 +5203,7 @@ __metadata:
     "@k9-sak-web/types": 1.0.0
     classnames: 2.3.2
     enzyme: 3.11.0
-    lodash.throttle: 4.1.1
+    lodash: 4.17.21
     moment: 2.29.4
     nav-frontend-alertstriper: 4.0.2
     nav-frontend-alertstriper-style: 3.0.2
@@ -5328,7 +5326,7 @@ __metadata:
     cors: 2.8.5
     dayjs: 1.11.10
     express: 4.18.2
-    lodash.throttle: 4.1.1
+    lodash: 4.17.21
     nav-frontend-alertstriper: 4.0.2
     nav-frontend-alertstriper-style: 3.0.2
     nav-frontend-chevron: 1.0.30
@@ -5432,7 +5430,7 @@ __metadata:
     "@navikt/ft-plattform-komponenter": 2.3.14
     classnames: 2.3.2
     enzyme: 3.11.0
-    lodash.isequal: 4.5.0
+    lodash: 4.17.21
     nav-frontend-core: 6.0.1
     nav-frontend-spinner: 3.0.1
     nav-frontend-spinner-style: 1.0.2
@@ -5542,13 +5540,13 @@ __metadata:
     "@navikt/ft-plattform-komponenter": 2.3.14
     "@navikt/ft-prosess-beregningsgrunnlag": 6.3.20
     "@navikt/ft-ui-komponenter": 2.1.17
-    "@navikt/k9-fe-etablert-tilsyn": 1.0.3
+    "@navikt/k9-fe-etablert-tilsyn": 1.0.4
     "@navikt/k9-fe-http-utils": 1.0.8
-    "@navikt/k9-fe-inntektsmelding": 1.0.4
-    "@navikt/k9-fe-medisinsk-vilkar": 1.0.3
-    "@navikt/k9-fe-om-barnet": 1.0.3
-    "@navikt/k9-fe-omsorgen-for": 1.0.3
-    "@navikt/k9-fe-omsorgsdager": 1.0.2
+    "@navikt/k9-fe-inntektsmelding": 1.0.5
+    "@navikt/k9-fe-medisinsk-vilkar": 1.0.4
+    "@navikt/k9-fe-om-barnet": 1.0.4
+    "@navikt/k9-fe-omsorgen-for": 1.0.4
+    "@navikt/k9-fe-omsorgsdager": 1.0.3
     "@sentry/browser": 7.84.0
     axios: 1.6.2
     classnames: 2.3.2
@@ -6318,9 +6316,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/k9-fe-etablert-tilsyn@npm:1.0.3":
-  version: 1.0.3
-  resolution: "@navikt/k9-fe-etablert-tilsyn@npm:1.0.3::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fk9-fe-etablert-tilsyn%2F1.0.3%2Fabbdb795b1c59dfb435bcf53962165f5b1c28258"
+"@navikt/k9-fe-etablert-tilsyn@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@navikt/k9-fe-etablert-tilsyn@npm:1.0.4::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fk9-fe-etablert-tilsyn%2F1.0.4%2Fbbe13706187128f565f1815a36c4de238e22ee99"
   peerDependencies:
     "@navikt/ds-css": 5.11.2
     "@navikt/ds-icons": 3.4.3
@@ -6336,7 +6334,6 @@ __metadata:
     classnames: 2.x
     dayjs: 1.x
     lodash: 4.x
-    lodash.throttle: 4.x
     nav-frontend-alertstriper: 4.x
     nav-frontend-alertstriper-style: 3.x
     nav-frontend-chevron: 1.x
@@ -6366,13 +6363,13 @@ __metadata:
     react-dom: 18.x
     react-hook-form: 7.48.2
     react-popper: 2.x
-  checksum: 48c73f94433450b73766b39c55dcceb7599330f79d857a4534a431db24e5f76f65a987aafc4b89a529d8d9eb08f675c56cf6b97ee8ae4aceb92866c0e8ce432a
+  checksum: 5a3d6a9d4675227b3ef699144bc80b4799b1dc1b482b93f6d30bb300bcb3c9671e6d8ef8a65e38f94266c7cf7d85050ad26e9180bc3a4aa90db83061c7cab14e
   languageName: node
   linkType: hard
 
-"@navikt/k9-fe-form-utils@npm:1.0.17":
-  version: 1.0.17
-  resolution: "@navikt/k9-fe-form-utils@npm:1.0.17::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fk9-fe-form-utils%2F1.0.17%2Ff1b4c0a3390242f8ef7ccdc5795e46518e822f5a"
+"@navikt/k9-fe-form-utils@npm:1.0.18":
+  version: 1.0.18
+  resolution: "@navikt/k9-fe-form-utils@npm:1.0.18::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fk9-fe-form-utils%2F1.0.18%2Fb792b0de3d6ca82b165fc958e574e6918b552818"
   dependencies:
     "@navikt/k9-fe-bem-utils": ^1.0.4
     "@navikt/k9-fe-period-utils": ^1.0.12
@@ -6386,13 +6383,12 @@ __metadata:
     "@storybook/react": 6.5.15
     classnames: 2.3.2
     dayjs: 1.11.7
-    lodash.throttle: 4.1.1
     react: 18.2.0
     react-collapse: 5.1.1
     react-dom: 18.2.0
     react-hook-form: 7.43.0
     react-popper: 2.3.0
-  checksum: 5ad423a7dd42745824d23bd5728d8c56770b5b79e53b388832c0690f74f31d54824d4577951e71cf407e421d66937d211abab3fbd3ab1935606b1f8cbe973235
+  checksum: c45bdbcf0a181ce858ea580fbc1d42f40abc8bddca13209e0f7c7c4c16ee3f6c46fdcbbd3e6c3338e23789ccab3c504f5b2667e3aa1ece12173e477c4c2703eb
   languageName: node
   linkType: hard
 
@@ -6405,9 +6401,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/k9-fe-inntektsmelding@npm:1.0.4":
-  version: 1.0.4
-  resolution: "@navikt/k9-fe-inntektsmelding@npm:1.0.4::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fk9-fe-inntektsmelding%2F1.0.4%2F429ee5d9b3fc2490254c2e89464a2571e8bd306b"
+"@navikt/k9-fe-inntektsmelding@npm:1.0.5":
+  version: 1.0.5
+  resolution: "@navikt/k9-fe-inntektsmelding@npm:1.0.5::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fk9-fe-inntektsmelding%2F1.0.5%2F6f3417210edad43cac3f025a40a9ab253ba1d929"
   peerDependencies:
     "@navikt/ds-css": 5.11.2
     "@navikt/ds-icons": 3.4.3
@@ -6424,7 +6420,7 @@ __metadata:
     classnames: 2.x
     date-fns: 2.x
     dayjs: 1.x
-    lodash.throttle: 4.x
+    lodash: 4.x
     nav-frontend-alertstriper: 4.x
     nav-frontend-alertstriper-style: 3.x
     nav-frontend-chevron: 1.x
@@ -6454,13 +6450,13 @@ __metadata:
     react-popper: 2.x
     tsconfig-paths-webpack-plugin: 4.x
     uuid: 9.x
-  checksum: fbfe16bc7b7795013229808760e30bca2374f26cfca1e449e325958edaef990b079ba0e669702d49aef79cb8b9a34c3bbacc43788a6b24e04d8ad094accfe32c
+  checksum: 9f27f017e39e0a35e985981ad48116021576f7e1e3dc2d01ac924c695d30dc852ee67b1532b7df39d98ded9cad016f954e7d815546b82c70a398007ce725c00b
   languageName: node
   linkType: hard
 
-"@navikt/k9-fe-medisinsk-vilkar@npm:1.0.3":
-  version: 1.0.3
-  resolution: "@navikt/k9-fe-medisinsk-vilkar@npm:1.0.3::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fk9-fe-medisinsk-vilkar%2F1.0.3%2Ff1f90595f9786210868c578773de5558daf36f04"
+"@navikt/k9-fe-medisinsk-vilkar@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@navikt/k9-fe-medisinsk-vilkar@npm:1.0.4::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fk9-fe-medisinsk-vilkar%2F1.0.4%2Ff062b6590bf2ba6130c369e8ce85d04e4eebfc09"
   peerDependencies:
     "@navikt/diagnosekoder": ^1.2023.0
     "@navikt/ds-css": 5.11.2
@@ -6477,7 +6473,7 @@ __metadata:
     axios: 1.x
     classnames: 2.x
     dayjs: 1.x
-    lodash.throttle: 4.x
+    lodash: 4.x
     react: 18.x
     react-collapse: 5.x
     react-dom: 18.x
@@ -6486,13 +6482,13 @@ __metadata:
     react-outside-click-handler: 1.x
     react-popper: 2.x
     react-query: 3.x
-  checksum: cc0df8a1f1dee58eb8395515f7579e89657791eaec110707bdf2a3f67f94b11e83a125961381fd88ecbfb6995eb377bea7c975258c178f93adb575028eb4c7d8
+  checksum: 2f6e6120f9266de663b96d83e9d92581ee1e5a825c031bad192df5d8cb7abb0a21f3dfb6ac73073ea7d4a2f8e4cca3f70402e0172d1dad078ae7d3136cea8506
   languageName: node
   linkType: hard
 
-"@navikt/k9-fe-om-barnet@npm:1.0.3":
-  version: 1.0.3
-  resolution: "@navikt/k9-fe-om-barnet@npm:1.0.3::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fk9-fe-om-barnet%2F1.0.3%2F86226a2426286355ccbd0395b71ea84ade1c4dbd"
+"@navikt/k9-fe-om-barnet@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@navikt/k9-fe-om-barnet@npm:1.0.4::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fk9-fe-om-barnet%2F1.0.4%2F46f770892332b9d849a35a13e054b244df46b545"
   peerDependencies:
     "@hookform/error-message": 2.x
     "@navikt/ds-css": 5.11.2
@@ -6508,20 +6504,20 @@ __metadata:
     axios: 1.x
     classnames: 2.x
     dayjs: 1.x
-    lodash.throttle: 4.x
+    lodash: 4.x
     react: 18.x
     react-collapse: 5.x
     react-dom: 18.x
     react-hook-form: 7.48.2
     react-popper: 2.x
     tailwindcss: 3.x
-  checksum: d8e41ffb6bee94c10f647a1c1f7fe1a7553d55be3bbca72ab6a0a35ffe1d7cf82a628a7880a206d8f1078405882cf23f70bd178dbee30af8f61a93bfca276887
+  checksum: c5e68982891a4aeb160d9e2f643d8486eb909692e0461875e3c3dd2988f8599bf0c19f09bf0e06d883943b21b2cc0b14591f7da5619101b16663b6e072ceb0c5
   languageName: node
   linkType: hard
 
-"@navikt/k9-fe-omsorgen-for@npm:1.0.3":
-  version: 1.0.3
-  resolution: "@navikt/k9-fe-omsorgen-for@npm:1.0.3::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fk9-fe-omsorgen-for%2F1.0.3%2F2adf9c9e015587c32ba8b63e5a77b5ee571425ca"
+"@navikt/k9-fe-omsorgen-for@npm:1.0.4":
+  version: 1.0.4
+  resolution: "@navikt/k9-fe-omsorgen-for@npm:1.0.4::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fk9-fe-omsorgen-for%2F1.0.4%2Fecb77870e3f9a448b87c7844258170c1dfd860c6"
   peerDependencies:
     "@hookform/error-message": 2.x
     "@navikt/ds-css": 5.11.2
@@ -6538,7 +6534,7 @@ __metadata:
     axios: 1.x
     classnames: 2.x
     dayjs: 1.x
-    lodash.throttle: 4.x
+    lodash: 4.x
     nav-frontend-alertstriper: 4.x
     nav-frontend-alertstriper-style: 3.x
     nav-frontend-chevron: 1.x
@@ -6566,13 +6562,13 @@ __metadata:
     react-hook-form: 7.48.2
     react-intl: 6.5.5
     react-popper: 2.x
-  checksum: 7848f3d1ddaae7b008de6f8e824b6a1aeed1cf2b1d3090fe7be05a89b454bb350908a0b609c511d3517df030f60120b6e4131f937eeab50bf7426dd6424f9443
+  checksum: 835eef42e253bad2deb3772b0ed6c78bf654a889715af2dcede66c1acbf20b819737a38d22e8b533d4c7bdb7dea327e8e2f03c9151fbdc10438141953bc6a545
   languageName: node
   linkType: hard
 
-"@navikt/k9-fe-omsorgsdager@npm:1.0.2":
-  version: 1.0.2
-  resolution: "@navikt/k9-fe-omsorgsdager@npm:1.0.2::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fk9-fe-omsorgsdager%2F1.0.2%2Fe9f000689d2226dd93dccb99b90704a86f29e729"
+"@navikt/k9-fe-omsorgsdager@npm:1.0.3":
+  version: 1.0.3
+  resolution: "@navikt/k9-fe-omsorgsdager@npm:1.0.3::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fk9-fe-omsorgsdager%2F1.0.3%2F5167a934b035b71b85f49ee874ac981fa9526940"
   peerDependencies:
     "@navikt/ds-css": 5.11.2
     "@navikt/ds-react": 5.11.2
@@ -6580,7 +6576,6 @@ __metadata:
     classnames: 2.x
     dayjs: 1.x
     lodash: 4.x
-    lodash.throttle: 4.x
     nav-datovelger: 12.x
     nav-frontend-alertstriper: 4.x
     nav-frontend-alertstriper-style: 3.x
@@ -6602,7 +6597,7 @@ __metadata:
     react-day-picker: 7.x
     react-dom: 18.x
     react-hook-form: 7.47.0
-  checksum: 694c23e2088be22d018273249c0e46a1310ac98853b9c01c960422f3dc404a4a5eb1fd2528746c8203dd61f4dfbcba60282a4ad690bf9eaaa73a9253fb39ff78
+  checksum: 7dd989fa9ef936bb03569aff2801e236af4e6ccb12024829469cc86de264334d50916ca6170d911811bd4c92daafb496740078262c4c8c4700c72a3b35ad1e67
   languageName: node
   linkType: hard
 
@@ -19853,7 +19848,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash.isequal@npm:4.5.0, lodash.isequal@npm:^4.5.0":
+"lodash.isequal@npm:^4.5.0":
   version: 4.5.0
   resolution: "lodash.isequal@npm:4.5.0"
   checksum: da27515dc5230eb1140ba65ff8de3613649620e8656b19a6270afe4866b7bd461d9ba2ac8a48dcc57f7adac4ee80e1de9f965d89d4d81a0ad52bb3eec2609644

From 46877b02996fd566930ec3706657bbdfb91dc231 Mon Sep 17 00:00:00 2001
From: Hallvard Andreas Stark
 <57254397+hallvardastark@users.noreply.github.com>
Date: Mon, 11 Dec 2023 16:21:30 +0100
Subject: [PATCH 4/9] Bedre lesbarhet i behandlingsvelgeren (#5414)

* Bedre lesbarhet i behandlingsvelgeren

* fiks test

* fix test
---
 .../fagsakprofile/FagsakProfileIndex.spec.tsx |  4 +-
 .../src/components/BehandlingPicker.tsx       | 75 ++++++++++---------
 .../BehandlingPickerItemContent.spec.tsx      | 39 +++-------
 .../BehandlingPickerItemContent.tsx           | 18 ++++-
 .../behandlingPickerItemContent.module.css    | 10 +++
 5 files changed, 80 insertions(+), 66 deletions(-)

diff --git a/packages/sak-app/src/fagsakprofile/FagsakProfileIndex.spec.tsx b/packages/sak-app/src/fagsakprofile/FagsakProfileIndex.spec.tsx
index dc2d072ccd..fa12bd11d9 100644
--- a/packages/sak-app/src/fagsakprofile/FagsakProfileIndex.spec.tsx
+++ b/packages/sak-app/src/fagsakprofile/FagsakProfileIndex.spec.tsx
@@ -191,8 +191,8 @@ describe('<FagsakProfileIndex>', () => {
     expect(screen.queryAllByTestId('BehandlingPickerItem').length).toBe(2);
     expect(screen.getByTestId('BehandlingPicker')).toBeInTheDocument();
     expect(screen.getByText('123 - Opprettet')).toBeInTheDocument();
-    expect(screen.getByText('Førstegangsbehandling')).toBeInTheDocument();
-    expect(screen.getByText('Viderebehandling')).toBeInTheDocument();
+    expect(screen.getByText('1. Førstegangsbehandling')).toBeInTheDocument();
+    expect(screen.getByText('2. Viderebehandling')).toBeInTheDocument();
   });
 
   it('skal ikke vise alle behandlinger når behandling er valgt', async () => {
diff --git a/packages/sak-behandling-velger/src/components/BehandlingPicker.tsx b/packages/sak-behandling-velger/src/components/BehandlingPicker.tsx
index bc6d5b80af..42e6dc0c40 100644
--- a/packages/sak-behandling-velger/src/components/BehandlingPicker.tsx
+++ b/packages/sak-behandling-velger/src/components/BehandlingPicker.tsx
@@ -54,42 +54,45 @@ const renderListItems = ({
   intl: IntlShape;
   alleSøknadsperioder: UseQueryResult<PerioderMedBehandlingsId, unknown>[];
   activeFilters: string[];
-}): ReactElement[] =>
-  sortBehandlinger(behandlinger)
-    .filter(behandling => {
-      if (activeFilters.length === 0) {
-        return true;
-      }
-      if (activeFilters.includes(automatiskBehandling)) {
-        return erAutomatiskBehandlet(behandling);
-      }
-      return activeFilters.includes(behandling.type.kode);
-    })
-    .map(behandling => (
-      <li data-testid="BehandlingPickerItem" key={behandling.id}>
-        <NavLink
-          onClick={() => setValgtBehandlingId(behandling.id)}
-          className={styles.linkToBehandling}
-          to={getBehandlingLocation(behandling.id)}
-        >
-          <BehandlingPickerItemContent
-            behandlingTypeNavn={getBehandlingNavn(behandling, getKodeverkFn, intl)}
-            behandlingsresultatTypeNavn={
-              behandling.behandlingsresultat
-                ? getKodeverkFn(behandling.behandlingsresultat.type, behandling.type).navn
-                : undefined
-            }
-            behandlingsresultatTypeKode={
-              behandling.behandlingsresultat ? behandling.behandlingsresultat.type.kode : undefined
-            }
-            erAutomatiskRevurdering={erAutomatiskBehandlet(behandling)}
-            søknadsperioder={alleSøknadsperioder.find(periode => periode.data?.id === behandling.id)?.data?.perioder}
-            erFerdigstilt={!!behandling.avsluttet}
-            erUnntaksløype={behandling.type.kode === behandlingType.UNNTAK}
-          />
-        </NavLink>
-      </li>
-    ));
+}): ReactElement[] => {
+  const sorterteOgFiltrerteBehandlinger = sortBehandlinger(behandlinger).filter(behandling => {
+    if (activeFilters.length === 0) {
+      return true;
+    }
+    if (activeFilters.includes(automatiskBehandling)) {
+      return erAutomatiskBehandlet(behandling);
+    }
+    return activeFilters.includes(behandling.type.kode);
+  });
+
+  return sorterteOgFiltrerteBehandlinger.map((behandling, index) => (
+    <li data-testid="BehandlingPickerItem" key={behandling.id}>
+      <NavLink
+        onClick={() => setValgtBehandlingId(behandling.id)}
+        className={styles.linkToBehandling}
+        to={getBehandlingLocation(behandling.id)}
+      >
+        <BehandlingPickerItemContent
+          behandlingTypeNavn={getBehandlingNavn(behandling, getKodeverkFn, intl)}
+          behandlingsresultatTypeNavn={
+            behandling.behandlingsresultat
+              ? getKodeverkFn(behandling.behandlingsresultat.type, behandling.type).navn
+              : undefined
+          }
+          behandlingsresultatTypeKode={
+            behandling.behandlingsresultat ? behandling.behandlingsresultat.type.kode : undefined
+          }
+          erAutomatiskRevurdering={erAutomatiskBehandlet(behandling)}
+          søknadsperioder={alleSøknadsperioder.find(periode => periode.data?.id === behandling.id)?.data?.perioder}
+          erFerdigstilt={!!behandling.avsluttet}
+          erUnntaksløype={behandling.type.kode === behandlingType.UNNTAK}
+          index={sorterteOgFiltrerteBehandlinger.length - index}
+          opprettet={behandling.opprettet}
+        />
+      </NavLink>
+    </li>
+  ));
+};
 
 const usePrevious = (value: number): number => {
   const ref = useRef<number>();
diff --git a/packages/sak-behandling-velger/src/components/BehandlingPickerItemContent.spec.tsx b/packages/sak-behandling-velger/src/components/BehandlingPickerItemContent.spec.tsx
index 2ca2f9e53a..e6f6312968 100644
--- a/packages/sak-behandling-velger/src/components/BehandlingPickerItemContent.spec.tsx
+++ b/packages/sak-behandling-velger/src/components/BehandlingPickerItemContent.spec.tsx
@@ -1,14 +1,12 @@
+import { renderWithIntl } from '@fpsak-frontend/utils-test/src/test-utils';
+import { screen } from '@testing-library/react';
 import React from 'react';
-import { shallow } from 'enzyme';
-import Panel from 'nav-frontend-paneler';
-
-import { DateLabel } from '@fpsak-frontend/shared-components';
-
+import messages from '../../i18n/nb_NO.json';
 import BehandlingPickerItemContent from './BehandlingPickerItemContent';
 
 describe('<BehandlingPickerItemContent>', () => {
   it('skal rendre komponent', () => {
-    const wrapper = shallow(
+    renderWithIntl(
       <BehandlingPickerItemContent
         behandlingTypeNavn="Viderebehandling"
         behandlingsresultatTypeNavn="Innvilget"
@@ -17,28 +15,15 @@ describe('<BehandlingPickerItemContent>', () => {
         søknadsperioder={[{ fom: '2022-01-01', tom: '2022-01-18' }]}
         erFerdigstilt
         erUnntaksløype={false}
+        index={1}
+        opprettet="2021-12-20T09:21:41"
       />,
+      {
+        locale: 'nb-NO',
+        messages,
+      },
     );
-    expect(wrapper.find(Panel)).toHaveLength(1);
-    expect(wrapper.find(DateLabel)).toHaveLength(2);
-  });
-
-  it('skal vise avsluttet dato når denne finnes', () => {
-    const wrapper = shallow(
-      <BehandlingPickerItemContent
-        behandlingTypeNavn="Viderebehandling"
-        behandlingsresultatTypeNavn="Innvilget"
-        behandlingsresultatTypeKode="INNVILGET"
-        erAutomatiskRevurdering={false}
-        søknadsperioder={[{ fom: '2022-01-01', tom: '2022-01-18' }]}
-        erFerdigstilt
-        erUnntaksløype={false}
-      />,
-    );
-
-    const labels = wrapper.find(DateLabel);
-    expect(labels).toHaveLength(2);
-    expect(labels.first().prop('dateString')).toEqual('2022-01-01');
-    expect(labels.last().prop('dateString')).toEqual('2022-01-18');
+    expect(screen.getByText('1. Viderebehandling')).toBeInTheDocument();
+    expect(screen.getByText('20.12.2021')).toBeInTheDocument();
   });
 });
diff --git a/packages/sak-behandling-velger/src/components/BehandlingPickerItemContent.tsx b/packages/sak-behandling-velger/src/components/BehandlingPickerItemContent.tsx
index 34c3f485a8..37990e798c 100644
--- a/packages/sak-behandling-velger/src/components/BehandlingPickerItemContent.tsx
+++ b/packages/sak-behandling-velger/src/components/BehandlingPickerItemContent.tsx
@@ -1,11 +1,12 @@
 import calendarImg from '@fpsak-frontend/assets/images/calendar-2.svg';
 import chevronBlueRightImg from '@fpsak-frontend/assets/images/chevron_blue_right.svg';
-import { Image } from '@fpsak-frontend/shared-components';
+import { DateLabel, Image } from '@fpsak-frontend/shared-components';
 import { Periode } from '@k9-sak-web/types';
 import Panel from 'nav-frontend-paneler';
 import { Normaltekst, Undertittel } from 'nav-frontend-typografi';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
+import { BodyShort } from '@navikt/ds-react';
 import styles from './behandlingPickerItemContent.module.css';
 import { getFormattedSøknadserioder, getStatusIcon, getStatusText } from './behandlingVelgerUtils';
 
@@ -28,6 +29,8 @@ interface OwnProps {
   søknadsperioder: Periode[];
   erFerdigstilt: boolean;
   erUnntaksløype: boolean;
+  index: number;
+  opprettet: string;
 }
 
 /**
@@ -43,11 +46,14 @@ const BehandlingPickerItemContent: React.FC<OwnProps> = ({
   søknadsperioder,
   erFerdigstilt,
   erUnntaksløype,
+  index,
+  opprettet,
 }) => (
   <Panel className={erAutomatiskRevurdering ? styles.indent : ''} border>
     <div className={styles.behandlingPicker}>
       <div>
         <Undertittel>
+          {`${index}. `}
           {behandlingTypeNavn}
           {erAutomatiskRevurdering ? getAutomatiskRevurderingText() : ''}
           {erUnntaksløype ? getUnntaksløypeText() : ''}
@@ -69,6 +75,16 @@ const BehandlingPickerItemContent: React.FC<OwnProps> = ({
             {getStatusText(behandlingsresultatTypeKode, behandlingsresultatTypeNavn, erFerdigstilt)}
           </Normaltekst>
         </div>
+        {opprettet && (
+          <div className={styles.opprettetDatoContainer}>
+            <BodyShort weight="semibold" size="small">
+              Opprettet:
+            </BodyShort>
+            <BodyShort size="small">
+              <DateLabel dateString={opprettet} />
+            </BodyShort>
+          </div>
+        )}
       </div>
       <div className={styles.åpneText}>
         <Normaltekst>
diff --git a/packages/sak-behandling-velger/src/components/behandlingPickerItemContent.module.css b/packages/sak-behandling-velger/src/components/behandlingPickerItemContent.module.css
index 225bf1bf51..d898e9595b 100644
--- a/packages/sak-behandling-velger/src/components/behandlingPickerItemContent.module.css
+++ b/packages/sak-behandling-velger/src/components/behandlingPickerItemContent.module.css
@@ -98,3 +98,13 @@
   margin-left: 10%;
   width: 90%;
 }
+
+.opprettetDatoContainer {
+  align-items: center;
+  display: flex;
+  margin-top: 0.5rem;
+
+  p:first-of-type {
+    margin-right: 0.25rem;
+  }
+}

From b646ac700362c2a2918c13e812569d0b0acbe414 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vebj=C3=B8rn=20Nordby?= <vebjorn.nordby@nav.no>
Date: Mon, 11 Dec 2023 16:34:56 +0100
Subject: [PATCH 5/9] =?UTF-8?q?M=C3=A5=20oppgi=20=C3=A5ret=20barnet=20blir?=
 =?UTF-8?q?=2018=20dersom=20aksjonspunkt=20er=20avsl=C3=A5tt=20tidligere,?=
 =?UTF-8?q?=20for=20da=20vil=20periode.tom=20v=C3=A6re=209999-12-31=20og?=
 =?UTF-8?q?=20utenfor=20s=C3=B8knadsperioden=20(#5415)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Hallvard Andreas Stark <57254397+hallvardastark@users.noreply.github.com>
---
 .../KroniskSykObjektTilMikrofrontend.ts                | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/behandling-utvidet-rett/src/panelDefinisjoner/prosessStegPaneler/utvidetRettPanel/utvidetRettMikrofrontend/formateringAvDataTilMikrofrontend/KroniskSykObjektTilMikrofrontend.ts b/packages/behandling-utvidet-rett/src/panelDefinisjoner/prosessStegPaneler/utvidetRettPanel/utvidetRettMikrofrontend/formateringAvDataTilMikrofrontend/KroniskSykObjektTilMikrofrontend.ts
index f95bd4be08..af0cdbed98 100644
--- a/packages/behandling-utvidet-rett/src/panelDefinisjoner/prosessStegPaneler/utvidetRettPanel/utvidetRettMikrofrontend/formateringAvDataTilMikrofrontend/KroniskSykObjektTilMikrofrontend.ts
+++ b/packages/behandling-utvidet-rett/src/panelDefinisjoner/prosessStegPaneler/utvidetRettPanel/utvidetRettMikrofrontend/formateringAvDataTilMikrofrontend/KroniskSykObjektTilMikrofrontend.ts
@@ -27,7 +27,12 @@ const formatereLosAksjonspunktObjektForKroniskSyk = (
   fraDato: string,
   vilkar: Vilkar,
   avslagsårsakKode: string,
+  soknad: UtvidetRettSoknad,
 ) => {
+  const angittBarn = soknad.angittePersoner.find(person => person.rolle === 'BARN');
+  const barnetsFodselsdato = new Date(angittBarn.fødselsdato);
+  const åretBarnetFyller18 = `${barnetsFodselsdato.getFullYear() + 18}-12-31`;
+
   const losAksjonspunktObjekt = {
     kode: aksjonspunktKode,
     begrunnelse,
@@ -36,9 +41,9 @@ const formatereLosAksjonspunktObjektForKroniskSyk = (
     periode: {
       fom: fraDato,
       tom:
-        typeof vilkar.perioder[0]?.periode.tom !== 'undefined' && vilkar.perioder[0]?.periode.tom !== null
+        typeof vilkar.perioder[0]?.periode.tom && vilkar.perioder[0]?.periode.tom !== '9999-12-31'
           ? vilkar.perioder[0]?.periode.tom
-          : '',
+          : åretBarnetFyller18,
     },
   };
 
@@ -98,6 +103,7 @@ const KroniskSykObjektTilMikrofrontend = ({
           fraDato || soknad.soknadsdato,
           vilkar,
           avslagsårsakKode,
+          soknad,
         ),
       ]);
     },

From dd025ddf7d8390d03fac09a79eb23c9a2aad7a94 Mon Sep 17 00:00:00 2001
From: "Thomas H. Wiberg" <thomas@thawi.no>
Date: Tue, 12 Dec 2023 08:56:57 +0100
Subject: [PATCH 6/9] Overstyring uttak overforing (#5408)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Bruk relevanteAksjonspunkter fra ProsessStegPanelDef

* Relevante aksjonspunkter (#5383)

* Unngå doble serverkall pga <LoadingPanel /> (#5380)

Fikser nokon stader der sidekomponenter som laster data frå server vart rendra eit lite øyeblikk, før dei vart erstatta med visning av LoadingPanel pga datalasting frå server lenger ute i komponenthierarkiet. Slik rendering medføre at serverkall for datalasting frå komponenter lenger nede i hierarkiet skjer fleire ganger uten nokon god grunn.

Det er sannsynlegvis fleire stader i koden der dette er eit problem. Sjå etter kode som sjekker på xxx === RestApiState.LOADING uten å sjekke xxx === RestApiState.NOT_STARTED.

* relevanteAksjonspunkter

---------

Co-authored-by: Jostein Stuhaug <135307852+josstn@users.noreply.github.com>

* Klargjøring for overstyring i uttak

* Omstrukturering av types og constants, og nye types og constants

* Nye Utils

* Create OverstyrUttakContext.tsx

* Oppdater ContainerContract

* Legg til OverstyrUttakForm

* Feature toggle overstyring uttak

* Overstyring oiverført

* Rydde

* Overflødig komponent

* Ikke påkrevde props

* Button istedenfor lenke

* Forhindre potensiell visning av spinner før kall er initiert

* Rydde i types

* Rydde opp

* Import type

* erOverstyrer fra rettigheter

* erOVerstyrer

* Update PleiepengerProsess.spec.tsx

* CSS-lint

---------

Co-authored-by: Jostein Stuhaug <135307852+josstn@users.noreply.github.com>
---
 deploy/dev-fss-k9saksbehandling.yml           |   2 +
 deploy/prod-fss-k9saksbehandling.yml          |   2 +
 feature-toggles.json                          |   4 +
 package.json                                  |   4 +-
 .../src/components/ProsessStegPanel.tsx       |   6 +
 .../src/components/Uttak.tsx                  |   7 +-
 .../src/components/Uttak.tsx                  |   7 +-
 .../src/BehandlingPleiepengerIndex.tsx        |  18 +-
 .../ArbeidsgiverMedManglendePerioderListe.tsx |   2 +-
 .../src/components/PleiepengerFakta.spec.tsx  |   4 +-
 .../src/components/PleiepengerFakta.tsx       |   2 +-
 .../src/components/PleiepengerPaneler.tsx     |   8 +-
 .../components/PleiepengerProsess.spec.tsx    |  10 +-
 .../src/components/PleiepengerProsess.tsx     | 157 +++++++++---------
 .../src/components/Uttak.tsx                  |  42 ++++-
 .../UttakProsessStegPanelDef.tsx              |  21 ++-
 .../{fetchedDataTsType.ts => FetchedData.ts}  |   2 +-
 .../src/types/OverstyringUttakRequest.ts      |  32 ++++
 .../behandling-pleiepenger/src/types/index.ts |   3 +
 packages/kodeverk/src/aksjonspunktCodes.ts    |   1 +
 .../prosess-uttak/src/constants/AnnenPart.ts  |   2 +-
 .../src/constants/Arbeidstype.ts              |   2 +-
 .../IkkeOppfylte\303\205rsakerMedTekst.ts"    |   2 +-
 .../OverseEtablertTilsyn\303\205rsak.ts"      |   2 +-
 .../constants/OverstyrUttakFormFieldName.ts   |  17 ++
 .../prosess-uttak/src/constants/Parter.ts     |   2 +-
 .../prosess-uttak/src/constants/Utfall.ts     |   2 +-
 packages/prosess-uttak/src/constants/index.ts |   8 +
 .../src/constants/\303\205rsaker.ts"          |   2 +-
 .../prosess-uttak/src/types/Arbeidsforhold.ts |   3 +-
 .../src/types/ArbeidsgiverOpplysninger.ts     |   2 +-
 .../src/types/ContainerContract.ts            |  26 ++-
 .../prosess-uttak/src/types/Endringsstatus.ts |   2 +-
 .../src/types/FormatertOverstyring.ts         |  18 ++
 .../src/types/OverstyrUttakFormData.ts        |  10 ++
 .../OverstyrUttakFormDataUtbetalingsgrad.ts   |  11 ++
 .../types/OverstyrbareAktiviteterRequest.ts   |   6 +
 .../types/OverstyrbareAktiviteterResponse.ts  |   5 +
 .../src/types/OverstyringUttak.ts             |  18 ++
 .../src/types/OverstyrtUttakResponse.ts       |  19 +++
 .../src/types/Utbetalingsgrad.ts              |   2 +-
 .../src/types/UttakOverstyring.ts             |   8 +
 .../prosess-uttak/src/types/Uttaksperioder.ts |   2 +-
 packages/prosess-uttak/src/types/index.ts     |  21 +++
 .../prosess-uttak/src/ui/MainComponent.tsx    |  27 ++-
 .../components/icons/key-1-rotert-utgraet.svg |  12 ++
 .../src/ui/components/icons/key-1-rotert.svg  |  12 ++
 .../overstyrUttakForm/AktivitetRad.tsx        |  76 +++++++++
 .../OverstyrAktivitetListe.css                |  26 +++
 .../OverstyrAktivitetListe.tsx                |  69 ++++++++
 .../overstyrUttakForm/OverstyrUttakForm.tsx   | 145 ++++++++++++++++
 .../OverstyringUttakForm.css                  |  48 ++++++
 .../OverstyringUttakForm.tsx                  | 156 +++++++++++++++++
 .../overstyrUttakForm/aktivitetRad.css        |   3 +
 .../components/AddButton.tsx                  |  26 +++
 .../components/BegrunnelseBoks.tsx            |  32 ++++
 .../components/OverstyringIkon.tsx            |  24 +++
 .../components/addButton.css                  |  15 ++
 .../components/begrunnelseBoks.css            |  26 +++
 .../components/overstyringIkon.css            |  13 ++
 .../components/overstyrUttakForm/overstyr.css |   3 +
 .../overstyrUttakForm/overstyrUttakForm.css   |  20 +++
 .../src/ui/context/OverstyrUttakContext.tsx   |  80 +++++++++
 packages/prosess-uttak/src/util/dateUtils.ts  |  12 ++
 .../src/util/overstyringUtils.ts              |  51 ++++++
 packages/rest-api-hooks/src/RestApiState.ts   |   3 +
 .../historikk/HistorikkIndex.tsx              |   8 +-
 packages/sak-app/src/fagsak/FagsakIndex.tsx   |  11 +-
 webpack/mocks/feature-toggles.js              |   4 +
 69 files changed, 1292 insertions(+), 136 deletions(-)
 rename packages/behandling-pleiepenger/src/types/{fetchedDataTsType.ts => FetchedData.ts} (93%)
 create mode 100644 packages/behandling-pleiepenger/src/types/OverstyringUttakRequest.ts
 create mode 100644 packages/behandling-pleiepenger/src/types/index.ts
 create mode 100644 packages/prosess-uttak/src/constants/OverstyrUttakFormFieldName.ts
 create mode 100644 packages/prosess-uttak/src/constants/index.ts
 create mode 100644 packages/prosess-uttak/src/types/FormatertOverstyring.ts
 create mode 100644 packages/prosess-uttak/src/types/OverstyrUttakFormData.ts
 create mode 100644 packages/prosess-uttak/src/types/OverstyrUttakFormDataUtbetalingsgrad.ts
 create mode 100644 packages/prosess-uttak/src/types/OverstyrbareAktiviteterRequest.ts
 create mode 100644 packages/prosess-uttak/src/types/OverstyrbareAktiviteterResponse.ts
 create mode 100644 packages/prosess-uttak/src/types/OverstyringUttak.ts
 create mode 100644 packages/prosess-uttak/src/types/OverstyrtUttakResponse.ts
 create mode 100644 packages/prosess-uttak/src/types/UttakOverstyring.ts
 create mode 100644 packages/prosess-uttak/src/types/index.ts
 create mode 100644 packages/prosess-uttak/src/ui/components/icons/key-1-rotert-utgraet.svg
 create mode 100644 packages/prosess-uttak/src/ui/components/icons/key-1-rotert.svg
 create mode 100644 packages/prosess-uttak/src/ui/components/overstyrUttakForm/AktivitetRad.tsx
 create mode 100644 packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyrAktivitetListe.css
 create mode 100644 packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyrAktivitetListe.tsx
 create mode 100644 packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyrUttakForm.tsx
 create mode 100644 packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyringUttakForm.css
 create mode 100644 packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyringUttakForm.tsx
 create mode 100644 packages/prosess-uttak/src/ui/components/overstyrUttakForm/aktivitetRad.css
 create mode 100644 packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/AddButton.tsx
 create mode 100644 packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/BegrunnelseBoks.tsx
 create mode 100644 packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/OverstyringIkon.tsx
 create mode 100644 packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/addButton.css
 create mode 100644 packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/begrunnelseBoks.css
 create mode 100644 packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/overstyringIkon.css
 create mode 100644 packages/prosess-uttak/src/ui/components/overstyrUttakForm/overstyr.css
 create mode 100644 packages/prosess-uttak/src/ui/components/overstyrUttakForm/overstyrUttakForm.css
 create mode 100644 packages/prosess-uttak/src/ui/context/OverstyrUttakContext.tsx
 create mode 100644 packages/prosess-uttak/src/util/overstyringUtils.ts

diff --git a/deploy/dev-fss-k9saksbehandling.yml b/deploy/dev-fss-k9saksbehandling.yml
index fdee5a7e8e..88d918e3fd 100644
--- a/deploy/dev-fss-k9saksbehandling.yml
+++ b/deploy/dev-fss-k9saksbehandling.yml
@@ -101,3 +101,5 @@ spec:
       value: "true"
     - name: LOKALE_PAKKER
       value: "true"
+    - name: "OVERSTYRING_UTTAK"
+      value: "true"
diff --git a/deploy/prod-fss-k9saksbehandling.yml b/deploy/prod-fss-k9saksbehandling.yml
index a9e66fb953..8bde4761fb 100644
--- a/deploy/prod-fss-k9saksbehandling.yml
+++ b/deploy/prod-fss-k9saksbehandling.yml
@@ -101,3 +101,5 @@ spec:
       value: "true"
     - name: LOKALE_PAKKER
       value: "false"
+    - name: "OVERSTYRING_UTTAK"
+      value: "false"
diff --git a/feature-toggles.json b/feature-toggles.json
index 592deff7fa..0f7a800095 100644
--- a/feature-toggles.json
+++ b/feature-toggles.json
@@ -74,5 +74,9 @@
   {
     "key": "LOKALE_PAKKER",
     "value": "${LOKALE_PAKKER}"
+  },
+  {
+    "key": "OVERSTYRING_UTTAK",
+    "value": "${OVERSTYRING_UTTAK}"
   }
 ]
diff --git a/package.json b/package.json
index d09f27ba4f..a02a7f3652 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,9 @@
     "lint:fix": "eslint --fix --cache packages --ext .ts,.tsx,.js,.jsx",
     "css:lint": "stylelint \"packages/**/*.css\"",
     "dev": "yarn dev-env-variables cross-env NODE_ENV=development APP_URL_K9FORMIDLING=http://localhost:8060/rest/dummy webpack serve --config webpack/webpack.dev.ts",
-    "dev-env-variables": "cross-env KLAGE_KABAL=true VARSELTEKST=true DOKUMENTDATA=true UNNTAKSBEHANDLING=true UTENLANDSOPPHOLD=true SOKNADPERIODESTRIPE=false TYPE_MEDISINSKE_OPPLYSNINGER_BREV=true LOS_MARKER_BEHANDLING=true LOS_MARKER_BEHANDLING_SUBMIT=true AKSJONSPUNKT_9014=true AKSJONSPUNKT_9015=true FRITEKST_REDIGERING=true FIX_SOKNADSFRIST_KALENDER_OG_READONLY=true INKLUDER_KALENDER_PILS=true FAKTA_BEREGNING_REDESIGN=true LOKALE_PAKKER=true",
+    "dev-env-variables": "cross-env OVERSTYRING_UTTAK=true KLAGE_KABAL=true VARSELTEKST=true DOKUMENTDATA=true UNNTAKSBEHANDLING=true UTENLANDSOPPHOLD=true SOKNADPERIODESTRIPE=false TYPE_MEDISINSKE_OPPLYSNINGER_BREV=true LOS_MARKER_BEHANDLING=true LOS_MARKER_BEHANDLING_SUBMIT=true AKSJONSPUNKT_9014=true AKSJONSPUNKT_9015=true FRITEKST_REDIGERING=true FIX_SOKNADSFRIST_KALENDER_OG_READONLY=true INKLUDER_KALENDER_PILS=true FAKTA_BEREGNING_REDESIGN=true LOKALE_PAKKER=true",
     "dev-lokal": "cross-env NODE_ENV=development APP_URL_SAK=http://k9-sak:8080 APP_URL_K9OPPDRAG=http://k9-oppdrag:8070 APP_URL_K9FORMIDLING_DD=http://k9-formidling-dokumentdata:8294 APP_URL_K9FORMIDLING=http://k9-formidling:8290 SPLITTET_SAMMENLINGNING_BEREGNING=true webpack serve --config webpack/webpack.dev.ts",
-    "dev-med-formidling": "cross-env NODE_ENV=development webpack serve --config webpack/webpack.dev.ts",
+    "dev-med-formidling": "yarn dev-env-variables cross-env NODE_ENV=development webpack serve --config webpack/webpack.dev.ts",
     "build": "cross-env NODE_ENV=production SENTRY_RELEASE=$(git rev-parse --short HEAD) webpack --config webpack/webpack.prod.ts",
     "build-ci": "cross-env NODE_ENV=development webpack --env ci='true' --config webpack/webpack.dev.ts",
     "lerna": "lerna",
diff --git a/packages/behandling-felles/src/components/ProsessStegPanel.tsx b/packages/behandling-felles/src/components/ProsessStegPanel.tsx
index 412cefba28..a8b3ceb909 100644
--- a/packages/behandling-felles/src/components/ProsessStegPanel.tsx
+++ b/packages/behandling-felles/src/components/ProsessStegPanel.tsx
@@ -28,6 +28,8 @@ interface OwnProps {
   lagreOverstyrteAksjonspunkter?: (params: any, keepData?: boolean) => Promise<any>;
   useMultipleRestApi: (endpoints: EndpointData[], options: Options) => RestApiData<any>;
   featureToggles?: FeatureToggles;
+  lagreOverstyringUttak?: (params: any) => void;
+  erOverstyrer?: boolean;
 }
 
 const ProsessStegPanel = ({
@@ -42,6 +44,8 @@ const ProsessStegPanel = ({
   lagreOverstyrteAksjonspunkter,
   useMultipleRestApi,
   featureToggles,
+  lagreOverstyringUttak,
+  erOverstyrer = false,
 }: OwnProps) => {
   const erHenlagtOgVedtakStegValgt =
     behandling.behandlingHenlagt && valgtProsessSteg && valgtProsessSteg.getUrlKode() === prosessStegCodes.VEDTAK;
@@ -119,6 +123,8 @@ const ProsessStegPanel = ({
                     formData,
                     setFormData,
                     submitCallback: bekreftAksjonspunktCallback,
+                    lagreOverstyringUttak,
+                    erOverstyrer,
                     ...delPaneler[0].getKomponentData(),
                     ...data,
                   })}
diff --git a/packages/behandling-opplaeringspenger/src/components/Uttak.tsx b/packages/behandling-opplaeringspenger/src/components/Uttak.tsx
index bf17d574a3..23a16e1ea2 100644
--- a/packages/behandling-opplaeringspenger/src/components/Uttak.tsx
+++ b/packages/behandling-opplaeringspenger/src/components/Uttak.tsx
@@ -1,8 +1,10 @@
+import React from 'react';
+
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import aksjonspunktStatus from '@fpsak-frontend/kodeverk/src/aksjonspunktStatus';
 import { Aksjonspunkt, AlleKodeverk, ArbeidsgiverOpplysningerPerId } from '@k9-sak-web/types';
 import { Uttak } from '@k9-sak-web/prosess-uttak';
-import React from 'react';
+import { useFeatureToggles } from '@fpsak-frontend/shared-components';
 
 interface UttakProps {
   uuid: string;
@@ -25,6 +27,7 @@ export default ({
   submitCallback,
   virkningsdatoUttakNyeRegler,
 }: UttakProps) => {
+  const [featureToggles] = useFeatureToggles();
   const relevanteAksjonspunkter = [aksjonspunktCodes.VENT_ANNEN_PSB_SAK, aksjonspunktCodes.VURDER_DATO_NY_REGEL_UTTAK];
   const funnedeRelevanteAksjonspunkter = aksjonspunkter.filter(aksjonspunkt =>
     relevanteAksjonspunkter.some(relevantAksjonspunkt => relevantAksjonspunkt === aksjonspunkt.definisjon.kode),
@@ -48,6 +51,8 @@ export default ({
         kodeverkUtenlandsoppholdÅrsak: alleKodeverk?.UtenlandsoppholdÅrsak,
         løsAksjonspunktVurderDatoNyRegelUttak,
         virkningsdatoUttakNyeRegler,
+        featureToggles,
+        erOverstyrer: false, // Overstyring er ikke implementert for Pleiepenger
       }}
     />
   );
diff --git a/packages/behandling-pleiepenger-sluttfase/src/components/Uttak.tsx b/packages/behandling-pleiepenger-sluttfase/src/components/Uttak.tsx
index c5ebb0fa91..c58e06789e 100644
--- a/packages/behandling-pleiepenger-sluttfase/src/components/Uttak.tsx
+++ b/packages/behandling-pleiepenger-sluttfase/src/components/Uttak.tsx
@@ -1,8 +1,10 @@
+import React from 'react';
+
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import aksjonspunktStatus from '@fpsak-frontend/kodeverk/src/aksjonspunktStatus';
 import { Aksjonspunkt, AlleKodeverk, ArbeidsgiverOpplysningerPerId } from '@k9-sak-web/types';
 import { Uttak } from '@k9-sak-web/prosess-uttak';
-import React from 'react';
+import { useFeatureToggles } from '@fpsak-frontend/shared-components';
 
 interface UttakProps {
   uuid: string;
@@ -27,6 +29,7 @@ export default ({
   submitCallback,
   virkningsdatoUttakNyeRegler,
 }: UttakProps) => {
+  const [featureToggles] = useFeatureToggles();
   const relevanteAksjonspunkter = [aksjonspunktCodes.VENT_ANNEN_PSB_SAK, aksjonspunktCodes.VURDER_DATO_NY_REGEL_UTTAK];
   const funnedeRelevanteAksjonspunkter = aksjonspunkter.filter(aksjonspunkt =>
     relevanteAksjonspunkter.some(relevantAksjonspunkt => relevantAksjonspunkt === aksjonspunkt.definisjon.kode),
@@ -51,6 +54,8 @@ export default ({
         løsAksjonspunktVurderDatoNyRegelUttak,
         virkningsdatoUttakNyeRegler,
         aksjonspunkter: funnedeRelevanteAksjonspunkter,
+        featureToggles,
+        erOverstyrer: false, // Overstyring er ikke implementert for PILS
       }}
     />
   );
diff --git a/packages/behandling-pleiepenger/src/BehandlingPleiepengerIndex.tsx b/packages/behandling-pleiepenger/src/BehandlingPleiepengerIndex.tsx
index 7c703b3431..4fb193aca8 100644
--- a/packages/behandling-pleiepenger/src/BehandlingPleiepengerIndex.tsx
+++ b/packages/behandling-pleiepenger/src/BehandlingPleiepengerIndex.tsx
@@ -21,7 +21,7 @@ import {
   requestPleiepengerApi,
   restApiPleiepengerHooks,
 } from './data/pleiepengerBehandlingApi';
-import FetchedData from './types/fetchedDataTsType';
+import { OverstyringUttakRequest, FetchedData } from './types';
 
 const pleiepengerData = [
   { key: PleiepengerBehandlingApiKeys.AKSJONSPUNKTER },
@@ -133,6 +133,21 @@ const BehandlingPleiepengerIndex = ({
     PleiepengerBehandlingApiKeys.SAVE_AKSJONSPUNKT,
   );
 
+  const { startRequest: lagreOverstyringUttakRequest } = restApiPleiepengerHooks.useRestApiRunner(
+    PleiepengerBehandlingApiKeys.SAVE_OVERSTYRT_AKSJONSPUNKT,
+  );
+
+  const lagreOverstyringUttak = async (values: OverstyringUttakRequest): Promise<void> => {
+    lagreOverstyringUttakRequest({
+      saksnummer: fagsak.saksnummer,
+      behandlingId: behandling.id,
+      behandlingVersjon: behandling.versjon,
+      overstyrteAksjonspunktDtoer: [values],
+    })
+      .then(() => hentBehandling({ behandlingId }, true))
+      .then(() => window.scroll(0, 0));
+  };
+
   useEffect(() => {
     behandlingEventHandler.setHandler({
       endreBehandlendeEnhet: params => nyBehandlendeEnhet(params).then(() => hentBehandling({ behandlingId }, true)),
@@ -191,6 +206,7 @@ const BehandlingPleiepengerIndex = ({
         arbeidsgiverOpplysningerPerId={arbeidsgiverOpplysninger ? arbeidsgiverOpplysninger.arbeidsgivere : {}}
         featureToggles={featureToggles}
         dokumenter={alleDokumenter}
+        lagreOverstyringUttak={lagreOverstyringUttak}
       />
     </>
   );
diff --git a/packages/behandling-pleiepenger/src/components/ArbeidsgiverMedManglendePerioderListe.tsx b/packages/behandling-pleiepenger/src/components/ArbeidsgiverMedManglendePerioderListe.tsx
index 74c16f209e..4d1f619e53 100644
--- a/packages/behandling-pleiepenger/src/components/ArbeidsgiverMedManglendePerioderListe.tsx
+++ b/packages/behandling-pleiepenger/src/components/ArbeidsgiverMedManglendePerioderListe.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { arbeidstypeTilVisning, Arbeidstype } from '../types/Arbeidstype';
+import { arbeidstypeTilVisning, Arbeidstype } from '../types';
 
 interface ArbeidsgiverMedPerioder {
   arbeidsgiverNavn: string;
diff --git a/packages/behandling-pleiepenger/src/components/PleiepengerFakta.spec.tsx b/packages/behandling-pleiepenger/src/components/PleiepengerFakta.spec.tsx
index 6e9d4e3ed1..a89640cc8e 100644
--- a/packages/behandling-pleiepenger/src/components/PleiepengerFakta.spec.tsx
+++ b/packages/behandling-pleiepenger/src/components/PleiepengerFakta.spec.tsx
@@ -16,7 +16,7 @@ import { Behandling, Fagsak } from '@k9-sak-web/types';
 import sivilstandType from '@fpsak-frontend/kodeverk/src/sivilstandType';
 import opplysningAdresseType from '@fpsak-frontend/kodeverk/src/opplysningAdresseType';
 import ForeldrepengerFakta from './PleiepengerFakta';
-import FetchedData from '../types/fetchedDataTsType';
+import FetchedData from '../types/FetchedData';
 import { PleiepengerBehandlingApiKeys, requestPleiepengerApi } from '../data/pleiepengerBehandlingApi';
 
 describe('<PleiepengerFakta>', () => {
@@ -99,7 +99,7 @@ describe('<PleiepengerFakta>', () => {
     statsborgerskap: {
       kode: '',
       kodeverk: '',
-      navn: ''
+      navn: '',
     },
     diskresjonskode: {
       kode: '',
diff --git a/packages/behandling-pleiepenger/src/components/PleiepengerFakta.tsx b/packages/behandling-pleiepenger/src/components/PleiepengerFakta.tsx
index d50f56533f..ddb676413b 100644
--- a/packages/behandling-pleiepenger/src/components/PleiepengerFakta.tsx
+++ b/packages/behandling-pleiepenger/src/components/PleiepengerFakta.tsx
@@ -16,7 +16,7 @@ import { LoadingPanel } from '@fpsak-frontend/shared-components';
 import { RestApiState, useRestApiErrorDispatcher } from '@k9-sak-web/rest-api-hooks';
 
 import faktaPanelDefinisjoner from '../panelDefinisjoner/faktaPleiepengerPanelDefinisjoner';
-import FetchedData from '../types/fetchedDataTsType';
+import FetchedData from '../types/FetchedData';
 import { restApiPleiepengerHooks, PleiepengerBehandlingApiKeys } from '../data/pleiepengerBehandlingApi';
 
 const overstyringApCodes = [ac.OVERSTYRING_AV_BEREGNINGSAKTIVITETER, ac.OVERSTYRING_AV_BEREGNINGSGRUNNLAG];
diff --git a/packages/behandling-pleiepenger/src/components/PleiepengerPaneler.tsx b/packages/behandling-pleiepenger/src/components/PleiepengerPaneler.tsx
index c97d673f85..6aad908326 100644
--- a/packages/behandling-pleiepenger/src/components/PleiepengerPaneler.tsx
+++ b/packages/behandling-pleiepenger/src/components/PleiepengerPaneler.tsx
@@ -18,12 +18,13 @@ import {
 } from '@k9-sak-web/types';
 import moment from 'moment';
 import React, { useState } from 'react';
-import { Arbeidstype } from '../types/Arbeidstype';
-import FetchedData from '../types/fetchedDataTsType';
+import { Arbeidstype } from '../types';
+import FetchedData from '../types/FetchedData';
 import ArbeidsgiverMedManglendePerioderListe from './ArbeidsgiverMedManglendePerioderListe';
 import DataFetcher from './DataFetcher';
 import PleiepengerFakta from './PleiepengerFakta';
 import PleiepengerProsess from './PleiepengerProsess';
+import { OverstyringUttakRequest } from '../types/OverstyringUttakRequest';
 
 interface OwnProps {
   fetchedData: FetchedData;
@@ -43,6 +44,7 @@ interface OwnProps {
   arbeidsgiverOpplysningerPerId: ArbeidsgiverOpplysningerPerId;
   featureToggles: FeatureToggles;
   dokumenter: Dokument[];
+  lagreOverstyringUttak: (values: OverstyringUttakRequest) => void;
 }
 
 interface FaktaPanelInfo {
@@ -79,6 +81,7 @@ const PleiepengerPaneler = ({
   arbeidsgiverOpplysningerPerId,
   featureToggles,
   dokumenter,
+  lagreOverstyringUttak,
 }: OwnProps) => {
   const [apentFaktaPanelInfo, setApentFaktaPanel] = useState<FaktaPanelInfo>();
   const [beregningErBehandlet, setBeregningErBehandlet] = useState<boolean>(false);
@@ -152,6 +155,7 @@ const PleiepengerPaneler = ({
         arbeidsgiverOpplysningerPerId={arbeidsgiverOpplysningerPerId}
         featureToggles={featureToggles}
         setBeregningErBehandlet={setBeregningErBehandlet}
+        lagreOverstyringUttak={lagreOverstyringUttak}
       />
       <PleiepengerFakta
         behandling={behandling}
diff --git a/packages/behandling-pleiepenger/src/components/PleiepengerProsess.spec.tsx b/packages/behandling-pleiepenger/src/components/PleiepengerProsess.spec.tsx
index fefc3da33c..890f2c1ae4 100644
--- a/packages/behandling-pleiepenger/src/components/PleiepengerProsess.spec.tsx
+++ b/packages/behandling-pleiepenger/src/components/PleiepengerProsess.spec.tsx
@@ -23,7 +23,7 @@ import { Behandling, Fagsak, Soknad } from '@k9-sak-web/types';
 
 import { K9sakApiKeys, requestApi } from '@k9-sak-web/sak-app/src/data/k9sakApi';
 import { PleiepengerBehandlingApiKeys, requestPleiepengerApi } from '../data/pleiepengerBehandlingApi';
-import FetchedData from '../types/fetchedDataTsType';
+import FetchedData from '../types/FetchedData';
 import PleiepengerProsess from './PleiepengerProsess';
 
 describe('<PleiepengerProsess>', () => {
@@ -199,6 +199,7 @@ describe('<PleiepengerProsess>', () => {
         arbeidsgiverOpplysningerPerId={arbeidsgiverOpplysningerPerId}
         featureToggles={{}}
         setBeregningErBehandlet={() => {}}
+        lagreOverstyringUttak={sinon.spy()}
       />,
     );
 
@@ -294,6 +295,7 @@ describe('<PleiepengerProsess>', () => {
         arbeidsgiverOpplysningerPerId={arbeidsgiverOpplysningerPerId}
         featureToggles={{}}
         setBeregningErBehandlet={() => {}}
+        lagreOverstyringUttak={sinon.spy()}
       />,
     );
 
@@ -353,6 +355,7 @@ describe('<PleiepengerProsess>', () => {
         arbeidsgiverOpplysningerPerId={arbeidsgiverOpplysningerPerId}
         featureToggles={{}}
         setBeregningErBehandlet={() => {}}
+        lagreOverstyringUttak={sinon.spy()}
       />,
     );
 
@@ -416,6 +419,7 @@ describe('<PleiepengerProsess>', () => {
         arbeidsgiverOpplysningerPerId={arbeidsgiverOpplysningerPerId}
         featureToggles={{}}
         setBeregningErBehandlet={() => {}}
+        lagreOverstyringUttak={sinon.spy()}
       />,
     );
 
@@ -477,6 +481,7 @@ describe('<PleiepengerProsess>', () => {
         arbeidsgiverOpplysningerPerId={arbeidsgiverOpplysningerPerId}
         featureToggles={{}}
         setBeregningErBehandlet={() => {}}
+        lagreOverstyringUttak={sinon.spy()}
       />,
     );
 
@@ -514,6 +519,7 @@ describe('<PleiepengerProsess>', () => {
         arbeidsgiverOpplysningerPerId={arbeidsgiverOpplysningerPerId}
         featureToggles={{}}
         setBeregningErBehandlet={() => {}}
+        lagreOverstyringUttak={sinon.spy()}
       />,
     );
 
@@ -554,6 +560,7 @@ describe('<PleiepengerProsess>', () => {
         arbeidsgiverOpplysningerPerId={arbeidsgiverOpplysningerPerId}
         featureToggles={{}}
         setBeregningErBehandlet={() => {}}
+        lagreOverstyringUttak={sinon.spy()}
       />,
     );
 
@@ -599,6 +606,7 @@ describe('<PleiepengerProsess>', () => {
         arbeidsgiverOpplysningerPerId={arbeidsgiverOpplysningerPerId}
         featureToggles={{}}
         setBeregningErBehandlet={() => {}}
+        lagreOverstyringUttak={sinon.spy()}
       />,
     );
 
diff --git a/packages/behandling-pleiepenger/src/components/PleiepengerProsess.tsx b/packages/behandling-pleiepenger/src/components/PleiepengerProsess.tsx
index 67c7faf6ab..8be02907b0 100644
--- a/packages/behandling-pleiepenger/src/components/PleiepengerProsess.tsx
+++ b/packages/behandling-pleiepenger/src/components/PleiepengerProsess.tsx
@@ -24,7 +24,7 @@ import {
 
 import { PleiepengerBehandlingApiKeys, restApiPleiepengerHooks } from '../data/pleiepengerBehandlingApi';
 import prosessStegPanelDefinisjoner from '../panelDefinisjoner/prosessStegPleiepengerPanelDefinisjoner';
-import FetchedData from '../types/fetchedDataTsType';
+import FetchedData from '../types/FetchedData';
 
 interface OwnProps {
   data: FetchedData;
@@ -44,84 +44,87 @@ interface OwnProps {
   arbeidsgiverOpplysningerPerId: ArbeidsgiverOpplysningerPerId;
   featureToggles: FeatureToggles;
   setBeregningErBehandlet: (value: boolean) => void;
+  lagreOverstyringUttak: (values: any) => void;
 }
 
-const getForhandsvisFptilbakeCallback = (
-  forhandsvisTilbakekrevingMelding: (data: any) => Promise<any>,
-  fagsak: Fagsak,
-  behandling: Behandling,
-) => (mottaker: string, brevmalkode: string, fritekst: string, saksnummer: string) => {
-  const data = {
-    behandlingUuid: behandling.uuid,
-    fagsakYtelseType: fagsak.sakstype,
-    varseltekst: fritekst || '',
-    mottaker,
-    brevmalkode,
-    saksnummer,
+const getForhandsvisFptilbakeCallback =
+  (forhandsvisTilbakekrevingMelding: (data: any) => Promise<any>, fagsak: Fagsak, behandling: Behandling) =>
+  (mottaker: string, brevmalkode: string, fritekst: string, saksnummer: string) => {
+    const data = {
+      behandlingUuid: behandling.uuid,
+      fagsakYtelseType: fagsak.sakstype,
+      varseltekst: fritekst || '',
+      mottaker,
+      brevmalkode,
+      saksnummer,
+    };
+    return forhandsvisTilbakekrevingMelding(data).then(response => forhandsvis(response));
   };
-  return forhandsvisTilbakekrevingMelding(data).then(response => forhandsvis(response));
-};
-
-const getLagringSideeffekter = (
-  toggleIverksetterVedtakModal,
-  toggleFatterVedtakModal,
-  oppdaterProsessStegOgFaktaPanelIUrl,
-  opneSokeside,
-  lagreDokumentdata,
-) => async aksjonspunktModels => {
-  const erRevurderingsaksjonspunkt = aksjonspunktModels.some(
-    apModel =>
-      (apModel.kode === aksjonspunktCodes.VARSEL_REVURDERING_MANUELL ||
-        apModel.kode === aksjonspunktCodes.VARSEL_REVURDERING_ETTERKONTROLL) &&
-      apModel.sendVarsel,
-  );
 
-  const visIverksetterVedtakModal = aksjonspunktModels.some(
-    aksjonspunkt =>
-      aksjonspunkt.isVedtakSubmission &&
-      [
-        aksjonspunktCodes.VEDTAK_UTEN_TOTRINNSKONTROLL,
-        aksjonspunktCodes.FATTER_VEDTAK,
-        aksjonspunktCodes.FORESLA_VEDTAK_MANUELT,
-      ].includes(aksjonspunkt.kode),
-  );
+const getLagringSideeffekter =
+  (
+    toggleIverksetterVedtakModal,
+    toggleFatterVedtakModal,
+    oppdaterProsessStegOgFaktaPanelIUrl,
+    opneSokeside,
+    lagreDokumentdata,
+  ) =>
+  async aksjonspunktModels => {
+    const erRevurderingsaksjonspunkt = aksjonspunktModels.some(
+      apModel =>
+        (apModel.kode === aksjonspunktCodes.VARSEL_REVURDERING_MANUELL ||
+          apModel.kode === aksjonspunktCodes.VARSEL_REVURDERING_ETTERKONTROLL) &&
+        apModel.sendVarsel,
+    );
 
-  const visFatterVedtakModal =
-    aksjonspunktModels[0].isVedtakSubmission && aksjonspunktModels[0].kode === aksjonspunktCodes.FORESLA_VEDTAK;
+    const visIverksetterVedtakModal = aksjonspunktModels.some(
+      aksjonspunkt =>
+        aksjonspunkt.isVedtakSubmission &&
+        [
+          aksjonspunktCodes.VEDTAK_UTEN_TOTRINNSKONTROLL,
+          aksjonspunktCodes.FATTER_VEDTAK,
+          aksjonspunktCodes.FORESLA_VEDTAK_MANUELT,
+        ].includes(aksjonspunkt.kode),
+    );
 
-  if (aksjonspunktModels[0].isVedtakSubmission) {
-    const dokumentdata = lagDokumentdata(aksjonspunktModels[0]);
-    if (dokumentdata) await lagreDokumentdata(dokumentdata);
-  }
+    const visFatterVedtakModal =
+      aksjonspunktModels[0].isVedtakSubmission && aksjonspunktModels[0].kode === aksjonspunktCodes.FORESLA_VEDTAK;
 
-  // Returner funksjon som blir kjørt etter lagring av aksjonspunkt(er)
-  return () => {
-    if (visFatterVedtakModal) {
-      toggleFatterVedtakModal(true);
-    } else if (visIverksetterVedtakModal) {
-      toggleIverksetterVedtakModal(true);
-    } else if (erRevurderingsaksjonspunkt) {
-      opneSokeside();
-    } else {
-      oppdaterProsessStegOgFaktaPanelIUrl('default', 'default');
+    if (aksjonspunktModels[0].isVedtakSubmission) {
+      const dokumentdata = lagDokumentdata(aksjonspunktModels[0]);
+      if (dokumentdata) await lagreDokumentdata(dokumentdata);
     }
+
+    // Returner funksjon som blir kjørt etter lagring av aksjonspunkt(er)
+    return () => {
+      if (visFatterVedtakModal) {
+        toggleFatterVedtakModal(true);
+      } else if (visIverksetterVedtakModal) {
+        toggleIverksetterVedtakModal(true);
+      } else if (erRevurderingsaksjonspunkt) {
+        opneSokeside();
+      } else {
+        oppdaterProsessStegOgFaktaPanelIUrl('default', 'default');
+      }
+    };
   };
-};
 
-const getHentFritekstbrevHtmlCallback = (
-  hentFriteksbrevHtml: (data: any) => Promise<any>,
-  behandling: Behandling,
-  fagsak: Fagsak,
-  fagsakPerson: FagsakPerson,
-) => (parameters: any) =>
-  hentFriteksbrevHtml({
-    ...parameters,
-    eksternReferanse: behandling.uuid,
-    ytelseType: fagsak.sakstype,
-    saksnummer: fagsak.saksnummer,
-    aktørId: fagsakPerson.aktørId,
-    avsenderApplikasjon: bestemAvsenderApp(behandling.type.kode),
-  });
+const getHentFritekstbrevHtmlCallback =
+  (
+    hentFriteksbrevHtml: (data: any) => Promise<any>,
+    behandling: Behandling,
+    fagsak: Fagsak,
+    fagsakPerson: FagsakPerson,
+  ) =>
+  (parameters: any) =>
+    hentFriteksbrevHtml({
+      ...parameters,
+      eksternReferanse: behandling.uuid,
+      ytelseType: fagsak.sakstype,
+      saksnummer: fagsak.saksnummer,
+      aktørId: fagsakPerson.aktørId,
+      avsenderApplikasjon: bestemAvsenderApp(behandling.type.kode),
+    });
 
 const PleiepengerProsess = ({
   data,
@@ -141,16 +144,16 @@ const PleiepengerProsess = ({
   arbeidsgiverOpplysningerPerId,
   featureToggles,
   setBeregningErBehandlet,
+  lagreOverstyringUttak,
 }: OwnProps) => {
   prosessStegHooks.useOppdateringAvBehandlingsversjon(behandling.versjon, oppdaterBehandlingVersjon);
 
-  const { startRequest: lagreAksjonspunkter, data: apBehandlingRes } = restApiPleiepengerHooks.useRestApiRunner<
-    Behandling
-  >(PleiepengerBehandlingApiKeys.SAVE_AKSJONSPUNKT);
-  const {
-    startRequest: lagreOverstyrteAksjonspunkter,
-    data: apOverstyrtBehandlingRes,
-  } = restApiPleiepengerHooks.useRestApiRunner<Behandling>(PleiepengerBehandlingApiKeys.SAVE_OVERSTYRT_AKSJONSPUNKT);
+  const { startRequest: lagreAksjonspunkter, data: apBehandlingRes } =
+    restApiPleiepengerHooks.useRestApiRunner<Behandling>(PleiepengerBehandlingApiKeys.SAVE_AKSJONSPUNKT);
+
+  const { startRequest: lagreOverstyrteAksjonspunkter, data: apOverstyrtBehandlingRes } =
+    restApiPleiepengerHooks.useRestApiRunner<Behandling>(PleiepengerBehandlingApiKeys.SAVE_OVERSTYRT_AKSJONSPUNKT);
+
   const { startRequest: forhandsvisMelding } = restApiPleiepengerHooks.useRestApiRunner(
     PleiepengerBehandlingApiKeys.PREVIEW_MESSAGE,
   );
@@ -257,6 +260,8 @@ const PleiepengerProsess = ({
           lagreOverstyrteAksjonspunkter={lagreOverstyrteAksjonspunkter}
           useMultipleRestApi={restApiPleiepengerHooks.useMultipleRestApi}
           featureToggles={featureToggles}
+          lagreOverstyringUttak={lagreOverstyringUttak}
+          erOverstyrer={rettigheter.kanOverstyreAccess.isEnabled}
         />
       </ProsessStegContainer>
     </>
diff --git a/packages/behandling-pleiepenger/src/components/Uttak.tsx b/packages/behandling-pleiepenger/src/components/Uttak.tsx
index 5ef8d9e4a3..6c8ff8658e 100644
--- a/packages/behandling-pleiepenger/src/components/Uttak.tsx
+++ b/packages/behandling-pleiepenger/src/components/Uttak.tsx
@@ -1,11 +1,17 @@
+import React from 'react';
+
+import { useFeatureToggles } from '@fpsak-frontend/shared-components';
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import aksjonspunktStatus from '@fpsak-frontend/kodeverk/src/aksjonspunktStatus';
-import { Aksjonspunkt, AlleKodeverk, ArbeidsgiverOpplysningerPerId } from '@k9-sak-web/types';
+import { Aksjonspunkt, AlleKodeverk, ArbeidsgiverOpplysningerPerId, Behandling } from '@k9-sak-web/types';
 import { Uttak } from '@k9-sak-web/prosess-uttak';
-import React from 'react';
+import { useRestApiErrorDispatcher } from '@k9-sak-web/rest-api-hooks';
+import { findEndpointsForMicrofrontend, httpErrorHandler } from '@fpsak-frontend/utils';
+import { VilkarResultPicker } from '@k9-sak-web/prosess-felles';
 
 interface UttakProps {
   uuid: string;
+  behandling: Behandling;
   uttaksperioder: any;
   utsattePerioder: string[];
   virkningsdatoUttakNyeRegler?: string;
@@ -13,9 +19,14 @@ interface UttakProps {
   aksjonspunkter: Aksjonspunkt[];
   alleKodeverk: AlleKodeverk;
   submitCallback: (data: { kode: string; begrunnelse: string; virkningsdato: string }[]) => void;
+  lagreOverstyringUttak: (values: any) => void;
+  relevanteAksjonspunkter: string[];
+  erOverstyrer: boolean;
 }
+
 export default ({
   uuid,
+  behandling,
   uttaksperioder,
   utsattePerioder,
   arbeidsgiverOpplysningerPerId,
@@ -23,8 +34,16 @@ export default ({
   alleKodeverk,
   submitCallback,
   virkningsdatoUttakNyeRegler,
+  lagreOverstyringUttak,
+  relevanteAksjonspunkter,
+  erOverstyrer,
 }: UttakProps) => {
-  const relevanteAksjonspunkter = [aksjonspunktCodes.VENT_ANNEN_PSB_SAK, aksjonspunktCodes.VURDER_DATO_NY_REGEL_UTTAK];
+  const [featureToggles] = useFeatureToggles();
+  const { versjon, links } = behandling;
+  const { addErrorMessage } = useRestApiErrorDispatcher();
+  const httpErrorHandlerCaller = (status: number, locationHeader?: string) =>
+    httpErrorHandler(status, addErrorMessage, locationHeader);
+
   const funnedeRelevanteAksjonspunkter = aksjonspunkter.filter(aksjonspunkt =>
     relevanteAksjonspunkter.some(relevantAksjonspunkt => relevantAksjonspunkt === aksjonspunkt.definisjon.kode),
   );
@@ -35,9 +54,22 @@ export default ({
   const løsAksjonspunktVurderDatoNyRegelUttak = ({ begrunnelse, virkningsdato }) =>
     submitCallback([{ kode: aksjonspunktCodes.VURDER_DATO_NY_REGEL_UTTAK, begrunnelse, virkningsdato }]);
 
+  const handleOverstyringAksjonspunkt = async values => {
+    lagreOverstyringUttak({
+      '@type': aksjonspunktCodes.OVERSTYRING_AV_UTTAK_KODE,
+      ...VilkarResultPicker.transformValues(values),
+      ...values,
+    });
+  };
+
   return (
     <Uttak
       containerData={{
+        httpErrorHandler: httpErrorHandlerCaller,
+        endpoints: findEndpointsForMicrofrontend(links, [
+          { rel: 'pleiepenger-overstyrtbare-aktiviteter', desiredName: 'behandlingUttakOverstyrbareAktiviteter' },
+          { rel: 'pleiepenger-overstyrt-uttak', desiredName: 'behandlingUttakOverstyrt' },
+        ]),
         uttaksperioder,
         utsattePerioder,
         aktivBehandlingUuid: uuid,
@@ -48,6 +80,10 @@ export default ({
         løsAksjonspunktVurderDatoNyRegelUttak,
         virkningsdatoUttakNyeRegler,
         aksjonspunkter: funnedeRelevanteAksjonspunkter,
+        handleOverstyringAksjonspunkt,
+        versjon,
+        featureToggles,
+        erOverstyrer,
       }}
     />
   );
diff --git a/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx b/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx
index e10c723d50..04a99b395c 100644
--- a/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx
+++ b/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/UttakProsessStegPanelDef.tsx
@@ -15,21 +15,32 @@ class PanelDef extends ProsessStegPanelDef {
     aksjonspunkter,
     alleKodeverk,
     submitCallback,
-    virkningsdatoUttakNyeRegler,
+    lagreOverstyringUttak,
+    virkningsDatoUttakNyeRegler,
+    relevanteAksjonspunkter,
+    erOverstyrer,
   }) => (
     <Uttak
       uuid={behandling.uuid}
+      behandling={behandling}
       uttaksperioder={uttaksperioder}
       utsattePerioder={utsattePerioder}
       arbeidsgiverOpplysningerPerId={arbeidsgiverOpplysningerPerId}
       aksjonspunkter={aksjonspunkter}
       alleKodeverk={alleKodeverk}
       submitCallback={submitCallback}
-      virkningsdatoUttakNyeRegler={virkningsdatoUttakNyeRegler}
+      lagreOverstyringUttak={lagreOverstyringUttak}
+      virkningsdatoUttakNyeRegler={virkningsDatoUttakNyeRegler}
+      relevanteAksjonspunkter={relevanteAksjonspunkter}
+      erOverstyrer={erOverstyrer}
     />
   );
 
-  getAksjonspunktKoder = () => [aksjonspunktCodes.VENT_ANNEN_PSB_SAK, aksjonspunktCodes.VURDER_DATO_NY_REGEL_UTTAK];
+  getAksjonspunktKoder = () => [
+    aksjonspunktCodes.VENT_ANNEN_PSB_SAK,
+    aksjonspunktCodes.VURDER_DATO_NY_REGEL_UTTAK,
+    aksjonspunktCodes.OVERSTYRING_AV_UTTAK_KODE,
+  ];
 
   getOverstyrVisningAvKomponent = () => true;
 
@@ -55,12 +66,12 @@ class PanelDef extends ProsessStegPanelDef {
   getEndepunkter = () => [PleiepengerBehandlingApiKeys.ARBEIDSFORHOLD];
 
   getData = ({ uttak, arbeidsgiverOpplysningerPerId, alleKodeverk }) => ({
-    uttaksperioder:
-      uttak?.uttaksplan != null ? uttak?.uttaksplan?.perioder : uttak?.simulertUttaksplan?.perioder,
+    uttaksperioder: uttak?.uttaksplan != null ? uttak?.uttaksplan?.perioder : uttak?.simulertUttaksplan?.perioder,
     utsattePerioder: uttak?.utsattePerioder,
     virkningsdatoUttakNyeRegler: uttak?.virkningsdatoUttakNyeRegler,
     arbeidsgiverOpplysningerPerId,
     alleKodeverk,
+    relevanteAksjonspunkter: this.getAksjonspunktKoder(),
   });
 }
 
diff --git a/packages/behandling-pleiepenger/src/types/fetchedDataTsType.ts b/packages/behandling-pleiepenger/src/types/FetchedData.ts
similarity index 93%
rename from packages/behandling-pleiepenger/src/types/fetchedDataTsType.ts
rename to packages/behandling-pleiepenger/src/types/FetchedData.ts
index f9f2704ec3..5de619b41b 100644
--- a/packages/behandling-pleiepenger/src/types/fetchedDataTsType.ts
+++ b/packages/behandling-pleiepenger/src/types/FetchedData.ts
@@ -8,7 +8,7 @@ import {
   BeregningsresultatUtbetalt,
 } from '@k9-sak-web/types';
 
-interface FetchedData {
+export interface FetchedData {
   aksjonspunkter: Aksjonspunkt[];
   vilkar: Vilkar[];
   personopplysninger: Personopplysninger;
diff --git a/packages/behandling-pleiepenger/src/types/OverstyringUttakRequest.ts b/packages/behandling-pleiepenger/src/types/OverstyringUttakRequest.ts
new file mode 100644
index 0000000000..8fc2dffb9c
--- /dev/null
+++ b/packages/behandling-pleiepenger/src/types/OverstyringUttakRequest.ts
@@ -0,0 +1,32 @@
+export type OverstyringUttakArbeidsforhold = {
+  type: string | null;
+  organisasjonsnummer: string | null;
+  aktørId: string | null;
+  arbeidsforholdId: string | null;
+};
+
+export type OverstyringUttakUtbetalingsgrad = {
+  arbeidsforhold: OverstyringUttakArbeidsforhold;
+  utbetalingsgrad: string;
+};
+
+export type EnkeltOverstyringUttak = {
+  periode: { fom: string; tom: string };
+  lagreEllerOppdater: {
+    erVilkarOk: boolean;
+    begrunnelse: string;
+    periode: { fom: string; tom: string };
+    søkersUttaksgrad: string;
+    utbetalingsgrader: OverstyringUttakUtbetalingsgrad[];
+  };
+};
+
+export type OverstyringUttakRequest = {
+  '@type@': string;
+  periode: { fom?: string; tom?: string };
+  erVilkarOk: boolean | undefined;
+  avslagsDato: string | undefined;
+  avslagskode: string | undefined;
+  lagreEllerOppdater: EnkeltOverstyringUttak[];
+  slett: [{ id: number | string }][];
+};
diff --git a/packages/behandling-pleiepenger/src/types/index.ts b/packages/behandling-pleiepenger/src/types/index.ts
new file mode 100644
index 0000000000..6beb0494e4
--- /dev/null
+++ b/packages/behandling-pleiepenger/src/types/index.ts
@@ -0,0 +1,3 @@
+export * from './Arbeidstype';
+export * from './FetchedData';
+export * from './OverstyringUttakRequest';
diff --git a/packages/kodeverk/src/aksjonspunktCodes.ts b/packages/kodeverk/src/aksjonspunktCodes.ts
index 65b3d862f8..90c026279a 100644
--- a/packages/kodeverk/src/aksjonspunktCodes.ts
+++ b/packages/kodeverk/src/aksjonspunktCodes.ts
@@ -62,6 +62,7 @@ const aksjonspunktCodes = {
   OVERSTYR_BEREGNING: '6007',
   OVERSTYRING_AV_UTTAKPERIODER: '6008',
   OVERSTYRING_AV_OPPTJENINGSVILKARET: '6011',
+  OVERSTYRING_AV_UTTAK_KODE: '6017',
   VURDER_OPPTJENINGSVILKARET: '5089',
   OVERSTYR_LØPENDE_MEDLEMSKAPSVILKAR: '6012',
   OVERSTYRING_AV_BEREGNINGSAKTIVITETER: '6014',
diff --git a/packages/prosess-uttak/src/constants/AnnenPart.ts b/packages/prosess-uttak/src/constants/AnnenPart.ts
index accbce7932..9c738b85b4 100644
--- a/packages/prosess-uttak/src/constants/AnnenPart.ts
+++ b/packages/prosess-uttak/src/constants/AnnenPart.ts
@@ -1,4 +1,4 @@
-enum AnnenPart {
+export enum AnnenPart {
   ALENE = 'ALENE',
   MED_ANDRE = 'MED_ANDRE',
   VENTER_ANDRE = 'VENTER_ANDRE',
diff --git a/packages/prosess-uttak/src/constants/Arbeidstype.ts b/packages/prosess-uttak/src/constants/Arbeidstype.ts
index 6d07102eeb..0b4c2c33ea 100644
--- a/packages/prosess-uttak/src/constants/Arbeidstype.ts
+++ b/packages/prosess-uttak/src/constants/Arbeidstype.ts
@@ -1,4 +1,4 @@
-enum Arbeidstype {
+export enum Arbeidstype {
   AT = 'ARBEIDSTAKER',
   FL = 'FRILANSER',
   DP = 'DAGPENGER',
diff --git "a/packages/prosess-uttak/src/constants/IkkeOppfylte\303\205rsakerMedTekst.ts" "b/packages/prosess-uttak/src/constants/IkkeOppfylte\303\205rsakerMedTekst.ts"
index a70bd77463..9a998ac643 100644
--- "a/packages/prosess-uttak/src/constants/IkkeOppfylte\303\205rsakerMedTekst.ts"
+++ "b/packages/prosess-uttak/src/constants/IkkeOppfylte\303\205rsakerMedTekst.ts"
@@ -1,6 +1,6 @@
 import Årsaker from './Årsaker';
 
-const IkkeOppfylteÅrsakerMedTekst = [
+export const IkkeOppfylteÅrsakerMedTekst = [
   {
     årsak: Årsaker.LOVBESTEMT_FERIE,
     tekst: 'Årsak for 0 % uttak: Søker avvikler lovbestemt ferie',
diff --git "a/packages/prosess-uttak/src/constants/OverseEtablertTilsyn\303\205rsak.ts" "b/packages/prosess-uttak/src/constants/OverseEtablertTilsyn\303\205rsak.ts"
index d9960c4df2..8ce49e77a8 100644
--- "a/packages/prosess-uttak/src/constants/OverseEtablertTilsyn\303\205rsak.ts"
+++ "b/packages/prosess-uttak/src/constants/OverseEtablertTilsyn\303\205rsak.ts"
@@ -1,4 +1,4 @@
-enum OverseEtablertTilsynÅrsak {
+export enum OverseEtablertTilsynÅrsak {
   FOR_LAVT = 'FOR_LAVT',
   NATTEVÅK = 'NATTEVÅK',
   BEREDSKAP = 'BEREDSKAP',
diff --git a/packages/prosess-uttak/src/constants/OverstyrUttakFormFieldName.ts b/packages/prosess-uttak/src/constants/OverstyrUttakFormFieldName.ts
new file mode 100644
index 0000000000..d25827a300
--- /dev/null
+++ b/packages/prosess-uttak/src/constants/OverstyrUttakFormFieldName.ts
@@ -0,0 +1,17 @@
+export enum OverstyrUttakFormFieldName {
+  FOM = 'fom',
+  TOM = 'tom',
+  UTTAKSGRAD = 'søkersUttaksgrad',
+  OVERSTYRING = 'overstyring',
+  BEGRUNNELSE = 'begrunnelse',
+  UTBETALINGSGRADER = 'utbetalingsgrader',
+  UTBETALINGSGRAD = 'utbetalingsgrad',
+  AKTIVITET_ID = 'aktivitetId',
+  AKTIVITET_NAVN = 'aktivitetNavn',
+  AKTIVITET_UTBETALINGSGRAD = 'aktivitetUtbetalingsgrad',
+  ARBEIDSFORHOLD = 'arbeidsforhold',
+  TYPE = 'type',
+  ORGANISASJONSNUMMER = 'organisasjonsnummer',
+  AKTØR_ID = 'aktørId',
+  ARBEIDSFORHOLD_ID = 'arbeidsforholdId',
+}
diff --git a/packages/prosess-uttak/src/constants/Parter.ts b/packages/prosess-uttak/src/constants/Parter.ts
index 09396337a3..ce3fa64e83 100644
--- a/packages/prosess-uttak/src/constants/Parter.ts
+++ b/packages/prosess-uttak/src/constants/Parter.ts
@@ -1,4 +1,4 @@
-enum Parter {
+export enum Parter {
   SØKER = 'Søker',
 }
 
diff --git a/packages/prosess-uttak/src/constants/Utfall.ts b/packages/prosess-uttak/src/constants/Utfall.ts
index 2606a69692..a5d293c032 100644
--- a/packages/prosess-uttak/src/constants/Utfall.ts
+++ b/packages/prosess-uttak/src/constants/Utfall.ts
@@ -1,4 +1,4 @@
-enum Utfall {
+export enum Utfall {
   OPPFYLT = 'OPPFYLT',
   IKKE_OPPFYLT = 'IKKE_OPPFYLT',
 }
diff --git a/packages/prosess-uttak/src/constants/index.ts b/packages/prosess-uttak/src/constants/index.ts
new file mode 100644
index 0000000000..fcbc782c6a
--- /dev/null
+++ b/packages/prosess-uttak/src/constants/index.ts
@@ -0,0 +1,8 @@
+export * from './AnnenPart';
+export * from './Arbeidstype';
+export * from './BarnetsDødsfallÅrsakerMedTekst';
+export * from './IkkeOppfylteÅrsakerMedTekst';
+export * from './OverseEtablertTilsynÅrsak';
+export * from './OverstyrUttakFormFieldName';
+export * from './Parter';
+export * from './Utfall';
diff --git "a/packages/prosess-uttak/src/constants/\303\205rsaker.ts" "b/packages/prosess-uttak/src/constants/\303\205rsaker.ts"
index 59fb0b8bda..a143838743 100644
--- "a/packages/prosess-uttak/src/constants/\303\205rsaker.ts"
+++ "b/packages/prosess-uttak/src/constants/\303\205rsaker.ts"
@@ -1,4 +1,4 @@
-enum Årsaker {
+export enum Årsaker {
   // Oppfylt årsaker
   GRADERT_MOT_TILSYN = 'GRADERT_MOT_TILSYN',
   AVKORTET_MOT_INNTEKT = 'AVKORTET_MOT_INNTEKT',
diff --git a/packages/prosess-uttak/src/types/Arbeidsforhold.ts b/packages/prosess-uttak/src/types/Arbeidsforhold.ts
index 7f3150eddf..7e0551fbf7 100644
--- a/packages/prosess-uttak/src/types/Arbeidsforhold.ts
+++ b/packages/prosess-uttak/src/types/Arbeidsforhold.ts
@@ -1,6 +1,7 @@
 export interface Arbeidsforhold {
   type: string;
-  organisasjonsnummer: string;
+  organisasjonsnummer?: string;
+  orgnr?: string;
   aktørId?: string;
   arbeidsforholdId?: string;
 }
diff --git a/packages/prosess-uttak/src/types/ArbeidsgiverOpplysninger.ts b/packages/prosess-uttak/src/types/ArbeidsgiverOpplysninger.ts
index 9f7fed270d..2af25079a5 100644
--- a/packages/prosess-uttak/src/types/ArbeidsgiverOpplysninger.ts
+++ b/packages/prosess-uttak/src/types/ArbeidsgiverOpplysninger.ts
@@ -1,4 +1,4 @@
-type ArbeidsgiverOpplysninger = Readonly<{
+export type ArbeidsgiverOpplysninger = Readonly<{
   navn: string;
   fødselsdato?: string;
   identifikator?: string;
diff --git a/packages/prosess-uttak/src/types/ContainerContract.ts b/packages/prosess-uttak/src/types/ContainerContract.ts
index 05f29fab28..1feecf69a8 100644
--- a/packages/prosess-uttak/src/types/ContainerContract.ts
+++ b/packages/prosess-uttak/src/types/ContainerContract.ts
@@ -1,24 +1,14 @@
+import { Aksjonspunkt } from '@k9-sak-web/types';
 import Uttaksperioder from './Uttaksperioder';
 import ArbeidsgiverOpplysninger from './ArbeidsgiverOpplysninger';
 import KodeverkMedNavn from './kodeverkMedNavnTsType';
-import Kodeverk from './kodeverkTsType';
-
-export type Aksjonspunkt = Readonly<{
-  definisjon: Kodeverk;
-  status: Kodeverk;
-  begrunnelse?: string;
-  vilkarType?: Kodeverk;
-  toTrinnsBehandling?: boolean;
-  toTrinnsBehandlingGodkjent?: boolean;
-  vurderPaNyttArsaker?: Kodeverk[];
-  besluttersBegrunnelse?: string;
-  aksjonspunktType?: Kodeverk;
-  kanLoses: boolean;
-  erAktivt: boolean;
-  venteårsakVariant?: string;
-}>;
 
 interface ContainerContract {
+  httpErrorHandler?: (status: number, locationHeader?: string) => void;
+  endpoints?: {
+    behandlingUttakOverstyrbareAktiviteter: string;
+    behandlingUttakOverstyrt: string;
+  };
   uttaksperioder: Uttaksperioder;
   utsattePerioder: string[];
   aktivBehandlingUuid: string;
@@ -26,6 +16,7 @@ interface ContainerContract {
   aksjonspunktkoder: string[];
   erFagytelsetypeLivetsSluttfase: boolean;
   kodeverkUtenlandsoppholdÅrsak: KodeverkMedNavn[];
+  handleOverstyringAksjonspunkt?: (data: any) => Promise<any>;
   løsAksjonspunktVurderDatoNyRegelUttak: ({
     begrunnelse,
     virkningsdato,
@@ -35,6 +26,9 @@ interface ContainerContract {
   }) => void;
   virkningsdatoUttakNyeRegler: string;
   aksjonspunkter?: Aksjonspunkt[];
+  versjon?: number;
+  featureToggles: { [key: string]: boolean };
+  erOverstyrer?: boolean;
 }
 
 export default ContainerContract;
diff --git a/packages/prosess-uttak/src/types/Endringsstatus.ts b/packages/prosess-uttak/src/types/Endringsstatus.ts
index 98450b8100..dd38836f1a 100644
--- a/packages/prosess-uttak/src/types/Endringsstatus.ts
+++ b/packages/prosess-uttak/src/types/Endringsstatus.ts
@@ -1,3 +1,3 @@
-type Endringsstatus = 'NY' | 'ENDRET' | 'UENDRET' | 'UENDRET_RESULTAT' | null;
+export type Endringsstatus = 'NY' | 'ENDRET' | 'UENDRET' | 'UENDRET_RESULTAT' | null;
 
 export default Endringsstatus;
diff --git a/packages/prosess-uttak/src/types/FormatertOverstyring.ts b/packages/prosess-uttak/src/types/FormatertOverstyring.ts
new file mode 100644
index 0000000000..40908d8e7f
--- /dev/null
+++ b/packages/prosess-uttak/src/types/FormatertOverstyring.ts
@@ -0,0 +1,18 @@
+export type FormatertOverstyring = {
+  id?: string;
+  begrunnelse?: string;
+  periode: {
+    fom: string;
+    tom: string;
+  };
+  søkersUttaksgrad: number;
+  utbetalingsgrader: {
+    arbeidsforhold: {
+      type: string;
+      organisasjonsnummer: string;
+      aktørId: string;
+      arbeidsforholdId: string;
+    };
+    utbetalingsgrad: number;
+  }[];
+};
diff --git a/packages/prosess-uttak/src/types/OverstyrUttakFormData.ts b/packages/prosess-uttak/src/types/OverstyrUttakFormData.ts
new file mode 100644
index 0000000000..9df1a9e16f
--- /dev/null
+++ b/packages/prosess-uttak/src/types/OverstyrUttakFormData.ts
@@ -0,0 +1,10 @@
+import { OverstyrUttakFormFieldName } from '../constants/OverstyrUttakFormFieldName';
+import { OverstyrUttakFormDataUtbetalingsgrad } from '.';
+
+export type OverstyrUttakFormData = {
+  [OverstyrUttakFormFieldName.FOM]: Date | undefined;
+  [OverstyrUttakFormFieldName.TOM]: Date | undefined;
+  [OverstyrUttakFormFieldName.UTTAKSGRAD]: number;
+  [OverstyrUttakFormFieldName.BEGRUNNELSE]: string;
+  [OverstyrUttakFormFieldName.UTBETALINGSGRADER]: OverstyrUttakFormDataUtbetalingsgrad[];
+};
diff --git a/packages/prosess-uttak/src/types/OverstyrUttakFormDataUtbetalingsgrad.ts b/packages/prosess-uttak/src/types/OverstyrUttakFormDataUtbetalingsgrad.ts
new file mode 100644
index 0000000000..5ffacbae1a
--- /dev/null
+++ b/packages/prosess-uttak/src/types/OverstyrUttakFormDataUtbetalingsgrad.ts
@@ -0,0 +1,11 @@
+import { OverstyrUttakFormFieldName } from '../constants/OverstyrUttakFormFieldName';
+
+export type OverstyrUttakFormDataUtbetalingsgrad = {
+  [OverstyrUttakFormFieldName.ARBEIDSFORHOLD]: {
+    [OverstyrUttakFormFieldName.TYPE]: string;
+    [OverstyrUttakFormFieldName.ORGANISASJONSNUMMER]: string;
+    [OverstyrUttakFormFieldName.AKTØR_ID]: string;
+    [OverstyrUttakFormFieldName.ARBEIDSFORHOLD_ID]: string;
+  };
+  [OverstyrUttakFormFieldName.AKTIVITET_UTBETALINGSGRAD]: number;
+};
diff --git a/packages/prosess-uttak/src/types/OverstyrbareAktiviteterRequest.ts b/packages/prosess-uttak/src/types/OverstyrbareAktiviteterRequest.ts
new file mode 100644
index 0000000000..ea5717b30a
--- /dev/null
+++ b/packages/prosess-uttak/src/types/OverstyrbareAktiviteterRequest.ts
@@ -0,0 +1,6 @@
+export interface OverstyrbareAktiviteterRequest {
+  behandlingIdDto: string;
+  fom: string;
+  tom: string;
+}
+export default OverstyrbareAktiviteterRequest;
diff --git a/packages/prosess-uttak/src/types/OverstyrbareAktiviteterResponse.ts b/packages/prosess-uttak/src/types/OverstyrbareAktiviteterResponse.ts
new file mode 100644
index 0000000000..03912fe0e4
--- /dev/null
+++ b/packages/prosess-uttak/src/types/OverstyrbareAktiviteterResponse.ts
@@ -0,0 +1,5 @@
+import { Arbeidsforhold } from './Arbeidsforhold';
+
+export interface OverstyrbareAktiviteterResponse {
+  arbeidsforholdsperioder: Arbeidsforhold[];
+}
diff --git a/packages/prosess-uttak/src/types/OverstyringUttak.ts b/packages/prosess-uttak/src/types/OverstyringUttak.ts
new file mode 100644
index 0000000000..93d8d99fe2
--- /dev/null
+++ b/packages/prosess-uttak/src/types/OverstyringUttak.ts
@@ -0,0 +1,18 @@
+export type OverstyringUttak = {
+  id: string;
+  periode: {
+    fom: Date;
+    tom: Date;
+  };
+  søkersUttaksgrad: number;
+  utbetalingsgrader: {
+    arbeidsforhold: {
+      type: string;
+      organisasjonsnummer: string | null;
+      aktørId: string | null;
+      arbeidsforholdId: string | null;
+    };
+    utbetalingsgrad: number;
+  }[];
+  begrunnelse: string;
+};
diff --git a/packages/prosess-uttak/src/types/OverstyrtUttakResponse.ts b/packages/prosess-uttak/src/types/OverstyrtUttakResponse.ts
new file mode 100644
index 0000000000..0bda54b742
--- /dev/null
+++ b/packages/prosess-uttak/src/types/OverstyrtUttakResponse.ts
@@ -0,0 +1,19 @@
+import { OverstyringUttak } from './OverstyringUttak';
+
+export interface OverstyrtUttakResponse {
+  overstyringer: OverstyringUttak[];
+  arbeidsgiverOversikt: {
+    arbeidsgivere: {
+      [key: string]: {
+        identifikator: string;
+        personIdentifikator: string;
+        navn: string;
+        fødselsdato: string;
+        arbeidsforholdreferanser: {
+          internArbeidsforholdId: string;
+          eksternArbeidsforholdId: string;
+        }[];
+      };
+    };
+  };
+}
diff --git a/packages/prosess-uttak/src/types/Utbetalingsgrad.ts b/packages/prosess-uttak/src/types/Utbetalingsgrad.ts
index 8c0f4bdaf8..a311fcbb6c 100644
--- a/packages/prosess-uttak/src/types/Utbetalingsgrad.ts
+++ b/packages/prosess-uttak/src/types/Utbetalingsgrad.ts
@@ -1,6 +1,6 @@
 import { Arbeidsforhold } from './Arbeidsforhold';
 
-interface Utbetalingsgrad {
+export interface Utbetalingsgrad {
   arbeidsforhold: Arbeidsforhold;
   normalArbeidstid: string;
   faktiskArbeidstid: string;
diff --git a/packages/prosess-uttak/src/types/UttakOverstyring.ts b/packages/prosess-uttak/src/types/UttakOverstyring.ts
new file mode 100644
index 0000000000..4805daa7a3
--- /dev/null
+++ b/packages/prosess-uttak/src/types/UttakOverstyring.ts
@@ -0,0 +1,8 @@
+export type UttakOverstyring = {
+  id: string;
+  navn: string;
+  fraDato: string;
+  tilDato: string;
+  uttaksgrad: number;
+  begrunnelse: string;
+};
diff --git a/packages/prosess-uttak/src/types/Uttaksperioder.ts b/packages/prosess-uttak/src/types/Uttaksperioder.ts
index 4dccc9b7a8..a9a7ad0594 100644
--- a/packages/prosess-uttak/src/types/Uttaksperioder.ts
+++ b/packages/prosess-uttak/src/types/Uttaksperioder.ts
@@ -1,6 +1,6 @@
 import { Uttaksperiodeelement } from './Uttaksperiode';
 
-interface Uttaksperioder {
+export interface Uttaksperioder {
   [key: string]: Uttaksperiodeelement;
 }
 
diff --git a/packages/prosess-uttak/src/types/index.ts b/packages/prosess-uttak/src/types/index.ts
new file mode 100644
index 0000000000..42a556087e
--- /dev/null
+++ b/packages/prosess-uttak/src/types/index.ts
@@ -0,0 +1,21 @@
+export * from './Arbeidsforhold';
+export * from './ArbeidsgiverOpplysninger';
+export * from './ContainerContract';
+export * from './Endringsstatus';
+export * from './FormatertOverstyring';
+export * from './GraderingMotTilsyn';
+export * from './HttpErrorHandler';
+export * from './Inngangsvilkår';
+export * from './kodeverkMedNavnTsType';
+export * from './kodeverkTsType';
+export * from './OverstyrbareAktiviteterRequest';
+export * from './OverstyrbareAktiviteterResponse';
+export * from './OverstyringUttak';
+export * from './OverstyrtUttakResponse';
+export * from './OverstyrUttakFormData';
+export * from './OverstyrUttakFormDataUtbetalingsgrad';
+export * from './Period';
+export * from './Utbetalingsgrad';
+export * from './UttakOverstyring';
+export * from './Uttaksperiode';
+export * from './Uttaksperioder';
diff --git a/packages/prosess-uttak/src/ui/MainComponent.tsx b/packages/prosess-uttak/src/ui/MainComponent.tsx
index f0806d15d2..a65833011a 100644
--- a/packages/prosess-uttak/src/ui/MainComponent.tsx
+++ b/packages/prosess-uttak/src/ui/MainComponent.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
+
 import { Heading } from '@navikt/ds-react';
+
 import ContainerContract from '../types/ContainerContract';
 import lagUttaksperiodeliste from '../util/uttaksperioder';
 import UttaksperiodeListe from './components/uttaksperiode-liste/UttaksperiodeListe';
@@ -8,28 +10,51 @@ import Infostripe from './components/infostripe/Infostripe';
 import UtsattePerioderStripe from './components/utsattePerioderStripe/UtsattePerioderStripe';
 import VurderDato from './components/vurderDato/VurderDato';
 import { aksjonspunktVurderDatoKode, aksjonspunktkodeVentAnnenPSBSakKode } from '../constants/Aksjonspunkter';
+import OverstyringIkon from './components/overstyrUttakForm/components/OverstyringIkon';
+import { OverstyrUttakContextProvider } from './context/OverstyrUttakContext';
+import OverstyrUttakForm from './components/overstyrUttakForm/OverstyrUttakForm';
 
 interface MainComponentProps {
   containerData: ContainerContract;
 }
 
 const MainComponent = ({ containerData }: MainComponentProps): JSX.Element => {
-  const { uttaksperioder, aksjonspunktkoder, aksjonspunkter, virkningsdatoUttakNyeRegler } = containerData;
+  const {
+    featureToggles,
+    uttaksperioder,
+    aksjonspunktkoder,
+    aksjonspunkter,
+    virkningsdatoUttakNyeRegler,
+    erOverstyrer,
+  } = containerData;
   const [redigerVirkningsdato, setRedigervirkningsdato] = React.useState<boolean>(false);
   const aksjonspunktVurderDato = aksjonspunkter?.find(ap => ap.definisjon.kode === aksjonspunktVurderDatoKode);
 
+  const [overstyringAktiv, setOverstyringAktiv] = React.useState<boolean>(aksjonspunktkoder.includes('6017'));
+  const toggleOverstyring = () => setOverstyringAktiv(!overstyringAktiv);
+
   const harVentAnnenPSBSakAksjonspunkt = aksjonspunktkoder?.some(
     aksjonspunktkode => aksjonspunktkode === aksjonspunktkodeVentAnnenPSBSakKode,
   );
   const harAksjonspunktVurderDatoMedStatusOpprettet = aksjonspunktkoder?.some(
     aksjonspunktkode => aksjonspunktkode === aksjonspunktVurderDatoKode,
   );
+
   return (
     <ContainerContext.Provider value={containerData}>
       <Heading size="small" level="1">
         Uttak
+        {featureToggles?.OVERSTYRING_UTTAK && (
+          <OverstyringIkon erOverstyrer={erOverstyrer} aktiv={overstyringAktiv} toggleOverstyring={toggleOverstyring} />
+        )}
       </Heading>
+
       <Infostripe harVentAnnenPSBSakAksjonspunkt={harVentAnnenPSBSakAksjonspunkt} />
+
+      <OverstyrUttakContextProvider>
+        {erOverstyrer && overstyringAktiv && <OverstyrUttakForm />}
+      </OverstyrUttakContextProvider>
+
       <UtsattePerioderStripe />
       {harAksjonspunktVurderDatoMedStatusOpprettet && <VurderDato />}
       {virkningsdatoUttakNyeRegler && redigerVirkningsdato && (
diff --git a/packages/prosess-uttak/src/ui/components/icons/key-1-rotert-utgraet.svg b/packages/prosess-uttak/src/ui/components/icons/key-1-rotert-utgraet.svg
new file mode 100644
index 0000000000..da254eeb6a
--- /dev/null
+++ b/packages/prosess-uttak/src/ui/components/icons/key-1-rotert-utgraet.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path d="M22.57536,0.479999952 C22.84032,0.479999952 23.05536,0.695039953 23.05536,0.959039954 L23.05536,0.959039954 L23.05536,3.83903997 C23.05536,3.96671997 23.00544,4.08863997 22.9152,4.17887997 L22.9152,4.17887997 L22.09536,4.99871997 L22.09536,6.23999998 C22.09536,6.50495998 21.88032,6.71999998 21.61536,6.71999998 L21.61536,6.71999998 L20.37408,6.71999998 L20.17536,6.91871998 L20.17536,8.15999998 C20.17536,8.42495999 19.96032,8.63999999 19.69536,8.63999999 L19.69536,8.63999999 L18.45408,8.63999999 L18.25536,8.83871999 L18.25536,10.08 C18.25536,10.34496 18.04032,10.56 17.77536,10.56 L17.77536,10.56 L16.53408,10.56 L13.76256,13.33248 C14.19552,14.27424 14.41536,15.2784 14.41536,16.32 C14.41536,20.29056 11.18592,23.52 7.21535998,23.52 C3.24479996,23.52 0.0153599501,20.29056 0.0153599501,16.32 C0.0153599501,12.34944 3.24479996,9.11999999 7.21535998,9.11999999 C8.25695998,9.11999999 9.26015999,9.33983999 10.20288,9.77279999 L10.20288,9.77279999 L19.35552,0.620159953 C19.44576,0.530879952 19.56768,0.479999952 19.69536,0.479999952 L19.69536,0.479999952 Z M22.09536,1.43999996 L19.89408,1.43999996 L10.63968,10.69344 C10.49088,10.84032 10.26336,10.8768 10.07904,10.77984 C9.18239999,10.3152 8.21951998,10.07904 7.21535998,10.07904 C3.77471997,10.07904 0.975359954,12.8784 0.975359954,16.31904 C0.975359954,19.75968 3.77471997,22.55904 7.21535998,22.55904 C10.656,22.55904 13.45536,19.75968 13.45536,16.31904 C13.45536,15.31488 13.2192,14.352 12.75456,13.45632 C12.6576,13.27104 12.69312,13.04352 12.84096,12.89568 L12.84096,12.89568 L15.99552,9.74015999 C16.08576,9.65087999 16.20768,9.59999999 16.33536,9.59999999 L16.33536,9.59999999 L17.29536,9.59999999 L17.29536,8.63999999 C17.29536,8.51231999 17.34528,8.39039998 17.43552,8.30015998 L17.43552,8.30015998 L17.91552,7.82015998 C18.00576,7.73087998 18.12768,7.67999998 18.25536,7.67999998 L18.25536,7.67999998 L19.21536,7.67999998 L19.21536,6.71999998 C19.21536,6.59231998 19.26528,6.47039998 19.35552,6.38015998 L19.35552,6.38015998 L19.83552,5.90015997 C19.92576,5.81087997 20.04768,5.75999997 20.17536,5.75999997 L20.17536,5.75999997 L21.13536,5.75999997 L21.13536,4.79999997 C21.13536,4.67231997 21.18528,4.55039997 21.27552,4.46111997 L21.27552,4.46111997 L22.09536,3.64127997 L22.09536,1.43999996 Z M5.29535997,16.32 C6.35423998,16.32 7.21535998,17.18112 7.21535998,18.24 C7.21535998,19.29888 6.35423998,20.16 5.29535997,20.16 C4.23647997,20.16 3.37535996,19.29888 3.37535996,18.24 C3.37535996,17.18112 4.23647997,16.32 5.29535997,16.32 Z M5.29535997,17.28 C4.76639997,17.28 4.33535997,17.71008 4.33535997,18.24 C4.33535997,18.76992 4.76639997,19.2 5.29535997,19.2 C5.82431997,19.2 6.25535998,18.76992 6.25535998,18.24 C6.25535998,17.71008 5.82431997,17.28 5.29535997,17.28 Z" id="path-1"></path>
+    </defs>
+      <g stroke="#b7b1a9" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none">
+        <g id="Outline/01-Edition/key-1" transform="translate(12.000000, 12.000000) scale(1, -1) rotate(-90.000000) translate(-12.000000, -12.000000) ">
+           <path d="M20.516.5l-9.786 9.787c-.963-.5-2.055-.787-3.214-.787-3.866 0-7 3.133-7 7s3.134 7 7 7c3.865 0 7-3.133 7-7 0-1.16-.287-2.252-.786-3.213l3.286-3.287h1.5v-1.5l.5-.5h1.5v-1.5l.5-.5h1.5v-1.5l1-1v-3h-3z"/>
+           <circle cx="5.516" cy="18.5" r="1.5"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/prosess-uttak/src/ui/components/icons/key-1-rotert.svg b/packages/prosess-uttak/src/ui/components/icons/key-1-rotert.svg
new file mode 100644
index 0000000000..82aed8ce87
--- /dev/null
+++ b/packages/prosess-uttak/src/ui/components/icons/key-1-rotert.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <path d="M22.57536,0.479999952 C22.84032,0.479999952 23.05536,0.695039953 23.05536,0.959039954 L23.05536,0.959039954 L23.05536,3.83903997 C23.05536,3.96671997 23.00544,4.08863997 22.9152,4.17887997 L22.9152,4.17887997 L22.09536,4.99871997 L22.09536,6.23999998 C22.09536,6.50495998 21.88032,6.71999998 21.61536,6.71999998 L21.61536,6.71999998 L20.37408,6.71999998 L20.17536,6.91871998 L20.17536,8.15999998 C20.17536,8.42495999 19.96032,8.63999999 19.69536,8.63999999 L19.69536,8.63999999 L18.45408,8.63999999 L18.25536,8.83871999 L18.25536,10.08 C18.25536,10.34496 18.04032,10.56 17.77536,10.56 L17.77536,10.56 L16.53408,10.56 L13.76256,13.33248 C14.19552,14.27424 14.41536,15.2784 14.41536,16.32 C14.41536,20.29056 11.18592,23.52 7.21535998,23.52 C3.24479996,23.52 0.0153599501,20.29056 0.0153599501,16.32 C0.0153599501,12.34944 3.24479996,9.11999999 7.21535998,9.11999999 C8.25695998,9.11999999 9.26015999,9.33983999 10.20288,9.77279999 L10.20288,9.77279999 L19.35552,0.620159953 C19.44576,0.530879952 19.56768,0.479999952 19.69536,0.479999952 L19.69536,0.479999952 Z M22.09536,1.43999996 L19.89408,1.43999996 L10.63968,10.69344 C10.49088,10.84032 10.26336,10.8768 10.07904,10.77984 C9.18239999,10.3152 8.21951998,10.07904 7.21535998,10.07904 C3.77471997,10.07904 0.975359954,12.8784 0.975359954,16.31904 C0.975359954,19.75968 3.77471997,22.55904 7.21535998,22.55904 C10.656,22.55904 13.45536,19.75968 13.45536,16.31904 C13.45536,15.31488 13.2192,14.352 12.75456,13.45632 C12.6576,13.27104 12.69312,13.04352 12.84096,12.89568 L12.84096,12.89568 L15.99552,9.74015999 C16.08576,9.65087999 16.20768,9.59999999 16.33536,9.59999999 L16.33536,9.59999999 L17.29536,9.59999999 L17.29536,8.63999999 C17.29536,8.51231999 17.34528,8.39039998 17.43552,8.30015998 L17.43552,8.30015998 L17.91552,7.82015998 C18.00576,7.73087998 18.12768,7.67999998 18.25536,7.67999998 L18.25536,7.67999998 L19.21536,7.67999998 L19.21536,6.71999998 C19.21536,6.59231998 19.26528,6.47039998 19.35552,6.38015998 L19.35552,6.38015998 L19.83552,5.90015997 C19.92576,5.81087997 20.04768,5.75999997 20.17536,5.75999997 L20.17536,5.75999997 L21.13536,5.75999997 L21.13536,4.79999997 C21.13536,4.67231997 21.18528,4.55039997 21.27552,4.46111997 L21.27552,4.46111997 L22.09536,3.64127997 L22.09536,1.43999996 Z M5.29535997,16.32 C6.35423998,16.32 7.21535998,17.18112 7.21535998,18.24 C7.21535998,19.29888 6.35423998,20.16 5.29535997,20.16 C4.23647997,20.16 3.37535996,19.29888 3.37535996,18.24 C3.37535996,17.18112 4.23647997,16.32 5.29535997,16.32 Z M5.29535997,17.28 C4.76639997,17.28 4.33535997,17.71008 4.33535997,18.24 C4.33535997,18.76992 4.76639997,19.2 5.29535997,19.2 C5.82431997,19.2 6.25535998,18.76992 6.25535998,18.24 C6.25535998,17.71008 5.82431997,17.28 5.29535997,17.28 Z" id="path-1"></path>
+    </defs>
+      <g stroke="#0067C5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" fill="none">
+        <g id="Outline/01-Edition/key-1" transform="translate(12.000000, 12.000000) scale(1, -1) rotate(-90.000000) translate(-12.000000, -12.000000) ">
+           <path d="M20.516.5l-9.786 9.787c-.963-.5-2.055-.787-3.214-.787-3.866 0-7 3.133-7 7s3.134 7 7 7c3.865 0 7-3.133 7-7 0-1.16-.287-2.252-.786-3.213l3.286-3.287h1.5v-1.5l.5-.5h1.5v-1.5l.5-.5h1.5v-1.5l1-1v-3h-3z"/>
+           <circle cx="5.516" cy="18.5" r="1.5"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/prosess-uttak/src/ui/components/overstyrUttakForm/AktivitetRad.tsx b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/AktivitetRad.tsx
new file mode 100644
index 0000000000..6f6dc563c2
--- /dev/null
+++ b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/AktivitetRad.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+
+import { Table, Button } from '@navikt/ds-react';
+import { Edit, Delete } from '@navikt/ds-icons';
+
+import dayjs from 'dayjs';
+
+import styles from './aktivitetRad.css';
+import BegrunnelseBoks from './components/BegrunnelseBoks';
+import { OverstyringUttak } from '../../../types';
+
+interface ownProps {
+  index: number;
+  overstyring: OverstyringUttak;
+  handleRediger: (index: number) => void;
+  visOverstyringSkjema: boolean;
+  handleSlett: (id: string) => void;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+}
+
+const AktivitetRad: React.FC<ownProps> = ({
+  overstyring,
+  index,
+  handleRediger,
+  visOverstyringSkjema,
+  handleSlett,
+  loading,
+}) => {
+  const [ekspandert, setEkspandert] = React.useState<boolean>(false);
+  const { id, periode, søkersUttaksgrad, begrunnelse } = overstyring;
+  const { fom, tom } = periode;
+
+  return (
+    <Table.ExpandableRow
+      key={`aktivitet-rad-${index}`}
+      content={
+        <div className={styles.begrunnelseWrapper}>
+          <BegrunnelseBoks begrunnelse={begrunnelse} saksbehandler={undefined} dato={undefined} />
+        </div>
+      }
+      open={ekspandert}
+    >
+      <Table.DataCell onClick={() => setEkspandert(!ekspandert)}>{dayjs(fom).format('DD.MM.YYYY')}</Table.DataCell>
+      <Table.DataCell onClick={() => setEkspandert(!ekspandert)}>{dayjs(tom).format('DD.MM.YYYY')}</Table.DataCell>
+      <Table.DataCell onClick={() => setEkspandert(!ekspandert)}>{søkersUttaksgrad}</Table.DataCell>
+      <Table.DataCell>
+        <Button
+          size="xsmall"
+          variant="tertiary"
+          icon={<Edit aria-hidden />}
+          onClick={() => {
+            handleRediger(index);
+          }}
+          disabled={visOverstyringSkjema}
+          loading={loading}
+        >
+          Endre
+        </Button>
+
+        <Button
+          size="xsmall"
+          variant="tertiary"
+          icon={<Delete aria-hidden />}
+          onClick={() => handleSlett(id)}
+          disabled={visOverstyringSkjema}
+          loading={loading}
+        >
+          Slett
+        </Button>
+      </Table.DataCell>
+    </Table.ExpandableRow>
+  );
+};
+
+export default AktivitetRad;
diff --git a/packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyrAktivitetListe.css b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyrAktivitetListe.css
new file mode 100644
index 0000000000..24940d76fd
--- /dev/null
+++ b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyrAktivitetListe.css
@@ -0,0 +1,26 @@
+.overstyringSkjemaAktiviteter {
+  display: table;
+  margin-top: var(--a-spacing-4);
+}
+
+.overstyringSkjemaAktivitet {
+  display: table-row;
+}
+
+.overstyringSkjemaAktivitet > div {
+  display: table-cell;
+  padding: var(--a-spacing-2) var(--a-spacing-8);
+}
+
+.overstyringSkjemaAktivitet > div:first-child {
+  padding-left: 0;
+}
+
+.overstyringSkjemaAktivitet > div:last-child {
+  padding-right: 0;
+}
+
+.overstyringSkjemaAktivitet > div > div {
+  display: inline-block;
+  margin-right: var(--a-spacing-2);
+}
diff --git a/packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyrAktivitetListe.tsx b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyrAktivitetListe.tsx
new file mode 100644
index 0000000000..49ab822bac
--- /dev/null
+++ b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyrAktivitetListe.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { useFormContext, FieldArrayWithId } from 'react-hook-form';
+
+import { Label, TextField } from '@navikt/ds-react';
+import { OverstyrUttakFormFieldName } from '../../../constants';
+
+import styles from './OverstyrAktivitetListe.css';
+import { OverstyrUttakFormData } from '../../../types';
+
+type ownProps = {
+  fields: FieldArrayWithId<OverstyrUttakFormData, OverstyrUttakFormFieldName.UTBETALINGSGRADER, 'id'>[];
+  loading: boolean;
+};
+
+const OverstyrAktivitetListe: React.FC<ownProps> = ({ fields, loading }) => {
+  const { register } = useFormContext();
+
+  const utledAtkivitetNavn = (
+    field: FieldArrayWithId<OverstyrUttakFormData, OverstyrUttakFormFieldName.UTBETALINGSGRADER, 'id'>,
+  ): string => {
+    const arbeidsforhold = field[OverstyrUttakFormFieldName.ARBEIDSFORHOLD];
+    if (arbeidsforhold[OverstyrUttakFormFieldName.AKTØR_ID])
+      return `${arbeidsforhold[OverstyrUttakFormFieldName.TYPE]} ${
+        arbeidsforhold[OverstyrUttakFormFieldName.AKTØR_ID]
+      }`;
+    if (arbeidsforhold[OverstyrUttakFormFieldName.ORGANISASJONSNUMMER])
+      return `${arbeidsforhold[OverstyrUttakFormFieldName.TYPE]} ${
+        arbeidsforhold[OverstyrUttakFormFieldName.ORGANISASJONSNUMMER]
+      }`;
+    if (arbeidsforhold[OverstyrUttakFormFieldName.ARBEIDSFORHOLD_ID])
+      return `${arbeidsforhold[OverstyrUttakFormFieldName.TYPE]} ${
+        arbeidsforhold[OverstyrUttakFormFieldName.ARBEIDSFORHOLD_ID]
+      }`;
+
+    return `${arbeidsforhold[OverstyrUttakFormFieldName.TYPE]}`;
+  };
+
+  return (
+    <>
+      <Label size="small">Ny utbetalingsgrad per aktivitet</Label>
+      <div className={styles.overstyringSkjemaAktiviteter}>
+        {fields.map((field, index) => (
+          <div key={field.id} className={styles.overstyringSkjemaAktivitet}>
+            <div>{utledAtkivitetNavn(field)}</div>
+            <div>
+              <TextField
+                {...register(
+                  `${OverstyrUttakFormFieldName.UTBETALINGSGRADER}.${index}.${OverstyrUttakFormFieldName.AKTIVITET_UTBETALINGSGRAD}`,
+                )}
+                label="Ny utbetalingsgrad (%)"
+                hideLabel
+                size="small"
+                htmlSize={3}
+                maxLength={3}
+                min={0}
+                max={100}
+                type="number"
+                disabled={loading}
+              />
+              %
+            </div>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default OverstyrAktivitetListe;
diff --git a/packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyrUttakForm.tsx b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyrUttakForm.tsx
new file mode 100644
index 0000000000..d91a3f87a3
--- /dev/null
+++ b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyrUttakForm.tsx
@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+
+import { Button, Heading, Table } from '@navikt/ds-react';
+import { PlusIcon } from '@navikt/ft-plattform-komponenter';
+
+import NavFrontendSpinner from 'nav-frontend-spinner';
+import ContainerContext from '../../context/ContainerContext';
+import OverstyringUttakForm from './OverstyringUttakForm';
+import AktivitetRad from './AktivitetRad';
+
+import styles from './overstyrUttakForm.css';
+import { useOverstyrUttak } from '../../context/OverstyrUttakContext';
+import { UttakOverstyring } from '../../../types/UttakOverstyring';
+import { formaterOverstyringTilFormData } from '../../../util/overstyringUtils';
+
+const tableHeaders = (
+  <Table.Header>
+    <Table.Row>
+      <Table.HeaderCell />
+      <Table.HeaderCell>Fra og med</Table.HeaderCell>
+      <Table.HeaderCell>Til og med</Table.HeaderCell>
+      <Table.HeaderCell>Ny uttaksgrad</Table.HeaderCell>
+      <Table.HeaderCell>Valg for overstyring</Table.HeaderCell>
+    </Table.Row>
+  </Table.Header>
+);
+
+const nyOverstyring: UttakOverstyring = {
+  id: '',
+  navn: '',
+  fraDato: '',
+  tilDato: '',
+  uttaksgrad: 0,
+  begrunnelse: '',
+};
+
+const OverstyrUttakForm: React.FC = () => {
+  const [loading, setLoading] = useState<boolean>(false);
+  const { handleOverstyringAksjonspunkt } = React.useContext(ContainerContext);
+  const [visOverstyringSkjema, setVisOverstyringSkjema] = React.useState<boolean>(false);
+  const { lasterOverstyringer, overstyrte } = useOverstyrUttak();
+  const [redigerOverstyring, setRedigerOverstyring] = React.useState<number | boolean>(false);
+  const handleSubmit = () => {
+    setLoading(true);
+    handleOverstyringAksjonspunkt({
+      gåVidere: true,
+      lagreEllerOppdater: [],
+      slett: [],
+      periode: {},
+    });
+  };
+
+  const handleSlett = (id: string): void => {
+    setLoading(true);
+    handleOverstyringAksjonspunkt({
+      gåVidere: false,
+      lagreEllerOppdater: [],
+      slett: [{ id }],
+      periode: {},
+    });
+  };
+
+  const handleAvbrytOverstyringForm = () => {
+    setVisOverstyringSkjema(false);
+    setRedigerOverstyring(false);
+  };
+
+  const handleRediger = (index: number) => {
+    setRedigerOverstyring(index);
+    setVisOverstyringSkjema(true);
+  };
+
+  return (
+    <div className={styles.overstyrUttakForm}>
+      {lasterOverstyringer && <NavFrontendSpinner />}
+      {!lasterOverstyringer && (
+        <>
+          {overstyrte?.length === 0 && !visOverstyringSkjema && <>Det er ingen overstyrte aktiviteter i denne saken</>}
+          {overstyrte?.length > 0 && (
+            <>
+              <Heading size="xsmall">Overstyrte perioder</Heading>
+              <Table size="small" className={styles.overstyringUttakTabell}>
+                {tableHeaders}
+                <Table.Body>
+                  {overstyrte.map((overstyring, index) => (
+                    <AktivitetRad
+                      key={overstyring.id}
+                      overstyring={overstyring}
+                      index={index}
+                      handleRediger={handleRediger}
+                      visOverstyringSkjema={visOverstyringSkjema}
+                      handleSlett={handleSlett}
+                      loading={loading}
+                      setLoading={setLoading}
+                    />
+                  ))}
+                </Table.Body>
+              </Table>
+            </>
+          )}
+        </>
+      )}
+
+      {!visOverstyringSkjema && (
+        <div className={styles.leggTilOverstyringKnapp}>
+          <Button
+            variant="secondary"
+            size="small"
+            disabled={loading}
+            onClick={() => setVisOverstyringSkjema(true)}
+            icon={<PlusIcon />}
+            loading={loading}
+          >
+            Legg til ny overstyring
+          </Button>
+        </div>
+      )}
+
+      {!visOverstyringSkjema && overstyrte?.length > 0 && (
+        <div className={styles.overstyrUttakFormFooter}>
+          <Button variant="primary" size="small" type="submit" onClick={handleSubmit} loading={loading}>
+            Bekreft og fortsett
+          </Button>
+        </div>
+      )}
+      {visOverstyringSkjema && redigerOverstyring === false && (
+        <OverstyringUttakForm
+          handleAvbrytOverstyringForm={handleAvbrytOverstyringForm}
+          loading={loading}
+          setLoading={setLoading}
+        />
+      )}
+      {visOverstyringSkjema && typeof redigerOverstyring === 'number' && (
+        <OverstyringUttakForm
+          handleAvbrytOverstyringForm={handleAvbrytOverstyringForm}
+          overstyring={formaterOverstyringTilFormData(overstyrte[redigerOverstyring])}
+          loading={loading}
+          setLoading={setLoading}
+        />
+      )}
+    </div>
+  );
+};
+
+export default OverstyrUttakForm;
diff --git a/packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyringUttakForm.css b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyringUttakForm.css
new file mode 100644
index 0000000000..b90ff4c31d
--- /dev/null
+++ b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyringUttakForm.css
@@ -0,0 +1,48 @@
+@import '@navikt/ds-tokens';
+
+.overstyringSkjemaWrapper {
+  border: 1px solid var(--a-border-divider);
+  background-color: var(--a-deepblue-50);
+  padding: var(--a-spacing-6);
+  border-radius: 3px;
+  max-width: 800px;
+  margin-top: var(--a-spacing-8);
+  margin-bottom: var(--a-spacing-8);
+}
+
+.overstyringDatoOgUttaksgrad {
+  display: flex;
+  justify-content: left;
+  flex-wrap: wrap;
+  gap: var(--a-spacing-4);
+  margin-bottom: var(--a-spacing-4);
+  margin-top: var(--a-spacing-4);
+}
+
+.overstyringDatoVelger {
+  display: flex;
+  justify-content: left;
+  flex-wrap: wrap;
+  gap: var(--a-spacing-4);
+}
+
+.overstyringDatoVelger > div {
+  justify-items: start;
+  display: grid;
+}
+
+.overstyringKnapperad {
+  margin-top: var(--a-spacing-4);
+  display: flex;
+  justify-content: left;
+  flex-wrap: wrap;
+  gap: var(--a-spacing-4);
+}
+
+.overstyringBegrunnelse > div {
+  margin-top: var(--a-spacing-4);
+}
+
+.overstyringAktivitetListe {
+  margin-top: var(--a-spacing-4);
+}
diff --git a/packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyringUttakForm.tsx b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyringUttakForm.tsx
new file mode 100644
index 0000000000..17390ae8a7
--- /dev/null
+++ b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/OverstyringUttakForm.tsx
@@ -0,0 +1,156 @@
+import React, { useContext, useState } from 'react';
+import { FormProvider, useForm, useFieldArray } from 'react-hook-form';
+import dayjs from 'dayjs';
+
+import DatePicker from '@navikt/ds-react/esm/date/datepicker/DatePicker';
+import { useRangeDatepicker } from '@navikt/ds-react/esm/date/hooks/useRangeDatepicker';
+import { Alert, Button, Heading, Loader, TextField, Textarea } from '@navikt/ds-react';
+import { Form } from '@navikt/ft-form-hooks';
+
+import OverstyrAktivitetListe from './OverstyrAktivitetListe';
+import ContainerContext from '../../context/ContainerContext';
+import { useOverstyrUttak } from '../../context/OverstyrUttakContext';
+import { formaterOverstyring, formaterOverstyringAktiviteter } from '../../../util/overstyringUtils';
+import { OverstyrUttakFormFieldName } from '../../../constants/OverstyrUttakFormFieldName';
+import { OverstyrUttakFormData } from '../../../types';
+import { finnSisteSluttDatoFraUttaksperioder, finnTidligsteStartDatoFraUttaksperioder } from '../../../util/dateUtils';
+
+import styles from './OverstyringUttakForm.css';
+
+type OwnProps = {
+  handleAvbrytOverstyringForm: () => void;
+  overstyring?: OverstyrUttakFormData;
+  loading: boolean;
+  setLoading: (loading: boolean) => void;
+};
+
+const OverstyringUttakForm: React.FC<OwnProps> = ({
+  handleAvbrytOverstyringForm,
+  overstyring,
+  loading,
+  setLoading,
+}) => {
+  const erNyOverstyring = overstyring === undefined;
+  const { handleOverstyringAksjonspunkt, uttaksperioder } = useContext(ContainerContext);
+  const { lasterAktiviteter, hentAktuelleAktiviteter } = useOverstyrUttak();
+  const [deaktiverLeggTil, setDeaktiverLeggTil] = useState<boolean>(true);
+
+  const formMethods = useForm<OverstyrUttakFormData>({
+    reValidateMode: 'onSubmit',
+    defaultValues: overstyring || {
+      [OverstyrUttakFormFieldName.FOM]: undefined,
+      [OverstyrUttakFormFieldName.TOM]: undefined,
+      [OverstyrUttakFormFieldName.UTTAKSGRAD]: 0,
+      [OverstyrUttakFormFieldName.BEGRUNNELSE]: '',
+      [OverstyrUttakFormFieldName.UTBETALINGSGRADER]: [],
+    },
+    mode: 'onChange',
+  });
+
+  const tidligesteStartDato = finnTidligsteStartDatoFraUttaksperioder(uttaksperioder);
+  const { control, setValue, watch, register } = formMethods;
+
+  const { fields, replace: replaceAktiviteter } = useFieldArray({
+    control,
+    name: OverstyrUttakFormFieldName.UTBETALINGSGRADER,
+  });
+
+  const { datepickerProps, toInputProps, fromInputProps } = useRangeDatepicker({
+    onRangeChange: values => {
+      setValue(OverstyrUttakFormFieldName.FOM, values.from);
+      setValue(OverstyrUttakFormFieldName.TOM, values.to);
+    },
+    defaultSelected: erNyOverstyring
+      ? undefined
+      : { from: dayjs(overstyring.fom).toDate(), to: dayjs(overstyring.tom).toDate() },
+    defaultMonth: dayjs(tidligesteStartDato).toDate(),
+  });
+
+  const watchFraDato = watch(OverstyrUttakFormFieldName.FOM, undefined);
+  const watchTilDato = watch(OverstyrUttakFormFieldName.TOM, undefined);
+
+  React.useEffect(() => {
+    const handleHentAktuelleAktiviteter = async (fom: Date, tom: Date) => {
+      const aktiviteter = await hentAktuelleAktiviteter(fom, tom);
+      replaceAktiviteter(formaterOverstyringAktiviteter(aktiviteter));
+    };
+
+    if (watchFraDato && watchTilDato) {
+      handleHentAktuelleAktiviteter(watchFraDato, watchTilDato);
+      setDeaktiverLeggTil(false);
+    }
+  }, [watchFraDato, watchTilDato]);
+
+  const disabledDays = [
+    date => dayjs(date).isBefore(tidligesteStartDato),
+    date => dayjs(date).isAfter(finnSisteSluttDatoFraUttaksperioder(uttaksperioder)),
+  ];
+
+  const handleSubmit = (values: OverstyrUttakFormData) => {
+    setLoading(true);
+    handleOverstyringAksjonspunkt({
+      periode: {}, // MÅ legge til denne inntill videre, hack, for å komme rundt validering i backen
+      lagreEllerOppdater: [{ erVilkarOk: false, ...formaterOverstyring(values) }],
+      slett: [],
+    });
+  };
+
+  return (
+    <div className={styles.overstyringSkjemaWrapper}>
+      <Heading size="xsmall">Overstyr periode</Heading>
+      <FormProvider {...formMethods}>
+        <Form onSubmit={handleSubmit} formMethods={formMethods}>
+          <div className={styles.overstyringDatoOgUttaksgrad}>
+            <DatePicker {...datepickerProps} disabled={disabledDays}>
+              <div className={styles.overstyringDatoVelger}>
+                <DatePicker.Input {...fromInputProps} label="Fra og med" size="small" disabled={loading} />
+                <DatePicker.Input {...toInputProps} label="Til og med" size="small" disabled={loading} />
+              </div>
+            </DatePicker>
+            <TextField
+              {...register(OverstyrUttakFormFieldName.UTTAKSGRAD)}
+              label="Ny uttaksgrad (%)"
+              size="small"
+              htmlSize={3}
+              maxLength={3}
+              min={0}
+              max={100}
+              type="number"
+              disabled={loading}
+            />
+          </div>
+
+          {lasterAktiviteter !== null && (
+            <div className={styles.overstyringAktivitetListe}>
+              {lasterAktiviteter && <Loader />}
+              {!lasterAktiviteter && (
+                <>
+                  {fields.length > 0 && <OverstyrAktivitetListe fields={fields} loading={loading} />}
+                  {fields.length === 0 && <>Kunne ikke finne noen aktiviteter i den angitte perioden</>}
+                </>
+              )}
+            </div>
+          )}
+
+          <div className={styles.overstyringBegrunnelse}>
+            <Textarea label="Begrunnelse" {...register(OverstyrUttakFormFieldName.BEGRUNNELSE)} disabled={loading} />
+            <Alert inline variant="info">
+              Overstyringen vil ikke være synlig i uttak før du har bekreftet overstyringen.
+            </Alert>
+          </div>
+          <div className={styles.overstyringKnapperad}>
+            <Button variant="primary" size="small" disabled={deaktiverLeggTil} loading={loading}>
+              {erNyOverstyring && <>Legg til overstyring</>}
+              {!erNyOverstyring && <>Endre overstyring</>}
+            </Button>
+            <Button variant="secondary" size="small" onClick={handleAvbrytOverstyringForm} loading={loading}>
+              Avbryt
+            </Button>
+          </div>
+        </Form>
+      </FormProvider>
+    </div>
+  );
+};
+
+export default OverstyringUttakForm;
diff --git a/packages/prosess-uttak/src/ui/components/overstyrUttakForm/aktivitetRad.css b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/aktivitetRad.css
new file mode 100644
index 0000000000..2468d79e3d
--- /dev/null
+++ b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/aktivitetRad.css
@@ -0,0 +1,3 @@
+.begrunnelseWrapper {
+  max-width: 40em;
+}
diff --git a/packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/AddButton.tsx b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/AddButton.tsx
new file mode 100644
index 0000000000..ca41b26c31
--- /dev/null
+++ b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/AddButton.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { PlusIcon } from '@navikt/ft-plattform-komponenter';
+import styles from './addButton.css';
+
+interface AddButtonProps {
+  onClick: () => void;
+  label: string;
+  id?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+const AddButton = ({ className, label, onClick, id, disabled = false }: AddButtonProps): JSX.Element => (
+  <button
+    disabled={disabled}
+    className={`${styles.addButton} ${className || ''}`}
+    type="button"
+    onClick={onClick}
+    id={id || ''}
+  >
+    <PlusIcon />
+    <span className={styles.addButton__text}>{label}</span>
+  </button>
+);
+
+export default AddButton;
diff --git a/packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/BegrunnelseBoks.tsx b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/BegrunnelseBoks.tsx
new file mode 100644
index 0000000000..24f93fcdb2
--- /dev/null
+++ b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/BegrunnelseBoks.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Heading, BodyShort } from '@navikt/ds-react';
+import { PersonPencilFillIcon } from '@navikt/aksel-icons';
+
+import styles from './begrunnelseBoks.css';
+
+interface BegrunnelseBoksProps {
+  begrunnelse: string;
+  saksbehandler: string | undefined;
+  dato: string | undefined;
+}
+
+const BegrunnelseBoks: React.FC<BegrunnelseBoksProps> = ({ begrunnelse, saksbehandler, dato }) => (
+  <div className={styles.begrunnelseBoks}>
+    <Heading size="xsmall">Begrunnelse</Heading>
+    <BodyShort size="small" className={styles.begrunnelseTekst}>
+      {begrunnelse}
+    </BodyShort>
+
+    {saksbehandler && dato && (
+      <div className={styles.begrunnelseFooter}>
+        <PersonPencilFillIcon title="Saksbehandlerikon" fontSize="1.5rem" />
+        <span>
+          Vurdering av {saksbehandler}, {dato}
+        </span>
+      </div>
+    )}
+  </div>
+);
+
+export default BegrunnelseBoks;
diff --git a/packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/OverstyringIkon.tsx b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/OverstyringIkon.tsx
new file mode 100644
index 0000000000..fa7de55c53
--- /dev/null
+++ b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/OverstyringIkon.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { KeyHorizontalIcon } from '@navikt/aksel-icons';
+
+import styles from './overstyringIkon.css';
+
+interface OverstyringIkonProps {
+  erOverstyrer: boolean;
+  aktiv: boolean;
+  toggleOverstyring: () => void;
+}
+
+const OverstyringIkon: React.FC<OverstyringIkonProps> = ({ erOverstyrer, toggleOverstyring }) => {
+  if (erOverstyrer) {
+    return (
+      <button type="button" title="Overstyr" onClick={() => toggleOverstyring()} className={styles.overstyringNokkel}>
+        <KeyHorizontalIcon title="Overstyr uttak" />
+      </button>
+    );
+  }
+  return <KeyHorizontalIcon title="Overstyr uttak" className={styles.overstyringNokkelInaktiv} />;
+};
+
+export default OverstyringIkon;
diff --git a/packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/addButton.css b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/addButton.css
new file mode 100644
index 0000000000..8eb836880f
--- /dev/null
+++ b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/addButton.css
@@ -0,0 +1,15 @@
+.addButton {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  color: #0067c5;
+  border: none;
+  background: none;
+  height: 23px;
+  position: relative;
+  cursor: pointer;
+}
+
+.addButton__text {
+  margin-left: 0.5rem;
+}
diff --git a/packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/begrunnelseBoks.css b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/begrunnelseBoks.css
new file mode 100644
index 0000000000..f550a0d168
--- /dev/null
+++ b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/begrunnelseBoks.css
@@ -0,0 +1,26 @@
+.begrunnelseBoks {
+  background: #f1f1f1;
+  border-radius: 5px;
+  padding: 1.5rem;
+}
+
+.begrunnelseTekst {
+  border-left: 4px solid #c6c2bf;
+  padding-left: 1rem;
+  margin-top: 0.75rem;
+  margin-left: 0.75rem;
+}
+
+.begrunnelseFooter {
+  margin-top: 0.75rem;
+}
+
+.begrunnelseFooter svg {
+  margin-bottom: -5px;
+}
+
+.begrunnelseFooter span {
+  font-size: 14px;
+  font-weight: 600;
+  margin-left: 0.75rem;
+}
diff --git a/packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/overstyringIkon.css b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/overstyringIkon.css
new file mode 100644
index 0000000000..52a5f2ac05
--- /dev/null
+++ b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/components/overstyringIkon.css
@@ -0,0 +1,13 @@
+@import '@navikt/ds-tokens';
+
+.overstyringNokkel {
+  margin-left: 10px;
+  color: var(--a-icon-action);
+  border: none;
+  background: none;
+}
+
+.overstyringNokkelInaktiv {
+  margin-left: 10px;
+  color: var(--a-icon-subtle);
+}
diff --git a/packages/prosess-uttak/src/ui/components/overstyrUttakForm/overstyr.css b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/overstyr.css
new file mode 100644
index 0000000000..6c7469e6a1
--- /dev/null
+++ b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/overstyr.css
@@ -0,0 +1,3 @@
+.infostripe {
+  margin-bottom: 1rem;
+}
diff --git a/packages/prosess-uttak/src/ui/components/overstyrUttakForm/overstyrUttakForm.css b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/overstyrUttakForm.css
new file mode 100644
index 0000000000..1412f06069
--- /dev/null
+++ b/packages/prosess-uttak/src/ui/components/overstyrUttakForm/overstyrUttakForm.css
@@ -0,0 +1,20 @@
+@import '@navikt/ds-tokens';
+
+.overstyrUttakForm {
+  margin-top: var(--a-spacing-4);
+}
+
+.leggTilOverstyringKnapp {
+  margin-top: var(--a-spacing-5);
+  margin-bottom: var(--a-spacing-5);
+}
+
+.overstyrUttakFormFooter {
+  margin-top: var(--a-spacing-5);
+  margin-bottom: var(--a-spacing-5);
+}
+
+.overstyringUttakTabell {
+  width: auto;
+  margin-top: var(--a-spacing-4);
+}
diff --git a/packages/prosess-uttak/src/ui/context/OverstyrUttakContext.tsx b/packages/prosess-uttak/src/ui/context/OverstyrUttakContext.tsx
new file mode 100644
index 0000000000..1e5925812a
--- /dev/null
+++ b/packages/prosess-uttak/src/ui/context/OverstyrUttakContext.tsx
@@ -0,0 +1,80 @@
+import React, { createContext } from 'react';
+
+import { get, post } from '@navikt/k9-fe-http-utils';
+
+import dayjs from 'dayjs';
+import ContainerContext from './ContainerContext';
+import { Arbeidsforhold, OverstyrbareAktiviteterResponse, OverstyringUttak, OverstyrtUttakResponse } from '../../types';
+
+type OverstyrUttakContextType = {
+  lasterOverstyringer: boolean;
+  lasterAktiviteter: boolean;
+  overstyrte: null | OverstyringUttak[];
+  arbeidsgivere: null | OverstyrtUttakResponse['arbeidsgiverOversikt']['arbeidsgivere'];
+  hentAktuelleAktiviteter: (fom: Date, tom: Date) => Promise<Arbeidsforhold[]>;
+  hentOverstyrte: () => void;
+};
+
+const OverstyrUttakContext = createContext<OverstyrUttakContextType | null>(null);
+
+export const OverstyrUttakContextProvider = ({ children }) => {
+  const { httpErrorHandler, endpoints, aktivBehandlingUuid, versjon } = React.useContext(ContainerContext);
+  const [lasterOverstyringer, setLasterOverstyringer] = React.useState<boolean>(false);
+  const [lasterAktiviteter, setLasterAktiviteter] = React.useState<boolean | null>(null);
+  const [overstyrte, setOverstyrte] = React.useState<OverstyringUttak[] | null>(null);
+  const [arbeidsgivere, setArbeidsgivere] = React.useState<
+    OverstyrtUttakResponse['arbeidsgiverOversikt']['arbeidsgivere'] | null
+  >(null);
+
+  const hentOverstyrte = async () => {
+    setLasterOverstyringer(true);
+    const apiResult: OverstyrtUttakResponse = await get(endpoints.behandlingUttakOverstyrt, httpErrorHandler).then(
+      (response: OverstyrtUttakResponse) => response,
+    );
+    setOverstyrte(apiResult?.overstyringer || []);
+    setArbeidsgivere(apiResult?.arbeidsgiverOversikt?.arbeidsgivere || {});
+    setLasterOverstyringer(false);
+  };
+
+  const hentAktuelleAktiviteter = async (fom: Date, tom: Date): Promise<Arbeidsforhold[]> => {
+    setLasterAktiviteter(true);
+    const apiResult = await post(
+      endpoints.behandlingUttakOverstyrbareAktiviteter,
+      {
+        behandlingIdDto: aktivBehandlingUuid,
+        fom: dayjs(fom).format('YYYY-MM-DD'),
+        tom: dayjs(tom).format('YYYY-MM-DD'),
+      },
+      httpErrorHandler,
+    ).then((response: OverstyrbareAktiviteterResponse) => response);
+
+    setLasterAktiviteter(false);
+    return apiResult.arbeidsforholdsperioder;
+  };
+
+  React.useEffect(() => {
+    hentOverstyrte();
+  }, [versjon]);
+
+  const value = React.useMemo(
+    () => ({
+      lasterOverstyringer,
+      lasterAktiviteter,
+      hentAktuelleAktiviteter,
+      overstyrte,
+      arbeidsgivere,
+      hentOverstyrte,
+    }),
+    [lasterOverstyringer, lasterAktiviteter, hentAktuelleAktiviteter, overstyrte, arbeidsgivere, hentOverstyrte],
+  );
+
+  return <OverstyrUttakContext.Provider value={value}>{children}</OverstyrUttakContext.Provider>;
+};
+
+export const useOverstyrUttak = () => {
+  const context = React.useContext(OverstyrUttakContext);
+  if (!context) {
+    throw new Error('useOverstyrUttakContext må brukes innenfor en OverstyrUttakContextProvider');
+  }
+  return { ...context };
+};
diff --git a/packages/prosess-uttak/src/util/dateUtils.ts b/packages/prosess-uttak/src/util/dateUtils.ts
index 3e3156aa7e..ae46cc074e 100644
--- a/packages/prosess-uttak/src/util/dateUtils.ts
+++ b/packages/prosess-uttak/src/util/dateUtils.ts
@@ -3,6 +3,8 @@ import utc from 'dayjs/plugin/utc';
 import duration from 'dayjs/plugin/duration';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 
+import { Uttaksperioder } from '../types';
+
 const dateFormats = ['YYYY-MM-DD', 'DD.MM.YYYY'];
 
 dayjs.extend(utc);
@@ -16,3 +18,13 @@ export const beregnDagerTimer = (dur: string): number => Math.round(dayjs.durati
 export function dateFromString(dateString: string): dayjs.Dayjs {
   return dayjs(dateString, dateFormats).utc(true);
 }
+
+export const finnTidligsteStartDatoFraUttaksperioder = (uttaksperioder: Uttaksperioder): Date => {
+  const startDatoer = Object.keys(uttaksperioder).map(key => dayjs(key.split('/')[0]));
+  return new Date(Math.min(...startDatoer.map(date => date.valueOf())));
+};
+
+export const finnSisteSluttDatoFraUttaksperioder = (uttaksperioder: Uttaksperioder): Date => {
+  const startDatoer = Object.keys(uttaksperioder).map(key => dayjs(key.split('/')[0]));
+  return new Date(Math.max(...startDatoer.map(date => date.valueOf())));
+};
diff --git a/packages/prosess-uttak/src/util/overstyringUtils.ts b/packages/prosess-uttak/src/util/overstyringUtils.ts
new file mode 100644
index 0000000000..9f13fc37de
--- /dev/null
+++ b/packages/prosess-uttak/src/util/overstyringUtils.ts
@@ -0,0 +1,51 @@
+import dayjs from 'dayjs';
+import { OverstyrUttakFormFieldName } from '../constants/OverstyrUttakFormFieldName';
+import {
+  Arbeidsforhold,
+  OverstyrUttakFormData,
+  OverstyrUttakFormDataUtbetalingsgrad,
+  OverstyringUttak,
+} from '../types';
+import { FormatertOverstyring } from '../types/FormatertOverstyring';
+
+export const formaterOverstyringTilFormData = (overstyring: OverstyringUttak): OverstyrUttakFormData => ({
+  [OverstyrUttakFormFieldName.FOM]: overstyring.periode.fom,
+  [OverstyrUttakFormFieldName.TOM]: overstyring.periode.tom,
+  [OverstyrUttakFormFieldName.UTTAKSGRAD]: overstyring.søkersUttaksgrad,
+  [OverstyrUttakFormFieldName.BEGRUNNELSE]: overstyring.begrunnelse,
+  [OverstyrUttakFormFieldName.UTBETALINGSGRADER]: overstyring.utbetalingsgrader.map(utbetalingsgrad => ({
+    [OverstyrUttakFormFieldName.ARBEIDSFORHOLD]: utbetalingsgrad.arbeidsforhold,
+    [OverstyrUttakFormFieldName.AKTIVITET_UTBETALINGSGRAD]: utbetalingsgrad.utbetalingsgrad,
+  })),
+});
+
+export const formaterOverstyring = (values: OverstyrUttakFormData): FormatertOverstyring => ({
+  begrunnelse: values[OverstyrUttakFormFieldName.BEGRUNNELSE],
+  periode: {
+    fom: dayjs(values[OverstyrUttakFormFieldName.FOM]).format('YYYY-MM-DD'),
+    tom: dayjs(values[OverstyrUttakFormFieldName.TOM]).format('YYYY-MM-DD'),
+  },
+  søkersUttaksgrad: values[OverstyrUttakFormFieldName.UTTAKSGRAD],
+  utbetalingsgrader: values[OverstyrUttakFormFieldName.UTBETALINGSGRADER].map(aktivitet => ({
+    arbeidsforhold: {
+      type: aktivitet[OverstyrUttakFormFieldName.ARBEIDSFORHOLD][OverstyrUttakFormFieldName.TYPE],
+      organisasjonsnummer:
+        aktivitet[OverstyrUttakFormFieldName.ARBEIDSFORHOLD][OverstyrUttakFormFieldName.ORGANISASJONSNUMMER],
+      aktørId: aktivitet[OverstyrUttakFormFieldName.ARBEIDSFORHOLD][OverstyrUttakFormFieldName.AKTØR_ID],
+      arbeidsforholdId:
+        aktivitet[OverstyrUttakFormFieldName.ARBEIDSFORHOLD][OverstyrUttakFormFieldName.ARBEIDSFORHOLD_ID],
+    },
+    utbetalingsgrad: aktivitet[OverstyrUttakFormFieldName.AKTIVITET_UTBETALINGSGRAD],
+  })),
+});
+
+export const formaterOverstyringAktiviteter = (aktiviteter: Arbeidsforhold[]): OverstyrUttakFormDataUtbetalingsgrad[] =>
+  aktiviteter.map(aktivitet => ({
+    arbeidsforhold: {
+      type: aktivitet.type,
+      organisasjonsnummer: aktivitet.orgnr,
+      aktørId: aktivitet.aktørId,
+      arbeidsforholdId: aktivitet.arbeidsforholdId,
+    },
+    aktivitetUtbetalingsgrad: undefined,
+  }));
diff --git a/packages/rest-api-hooks/src/RestApiState.ts b/packages/rest-api-hooks/src/RestApiState.ts
index 0e09c6e795..0565114761 100644
--- a/packages/rest-api-hooks/src/RestApiState.ts
+++ b/packages/rest-api-hooks/src/RestApiState.ts
@@ -6,3 +6,6 @@ enum RestApiState {
 }
 
 export default RestApiState;
+
+export const isRequestNotDone = (state: RestApiState): boolean =>
+  state === RestApiState.NOT_STARTED || state === RestApiState.LOADING;
diff --git a/packages/sak-app/src/behandlingsupport/historikk/HistorikkIndex.tsx b/packages/sak-app/src/behandlingsupport/historikk/HistorikkIndex.tsx
index ee567c9446..e860439a4f 100644
--- a/packages/sak-app/src/behandlingsupport/historikk/HistorikkIndex.tsx
+++ b/packages/sak-app/src/behandlingsupport/historikk/HistorikkIndex.tsx
@@ -2,11 +2,11 @@ import React, { useCallback, useMemo } from 'react';
 import { useLocation } from 'react-router-dom';
 import moment from 'moment';
 
-import { RestApiState } from '@k9-sak-web/rest-api-hooks';
 import HistorikkSakIndex from '@fpsak-frontend/sak-historikk';
 import { KodeverkMedNavn, Historikkinnslag } from '@k9-sak-web/types';
 import { LoadingPanel, usePrevious } from '@fpsak-frontend/shared-components';
 
+import { isRequestNotDone } from "@k9-sak-web/rest-api-hooks/src/RestApiState";
 import useBehandlingEndret from '../../behandling/useBehandlingEndret';
 import { K9sakApiKeys, restApiHooks } from '../../data/k9sakApi';
 import { pathToBehandling, createLocationForSkjermlenke } from '../../app/paths';
@@ -109,9 +109,9 @@ const HistorikkIndex = ({ saksnummer, behandlingId, behandlingVersjon }: OwnProp
   );
 
   if (
-    historikkK9SakState === RestApiState.LOADING ||
-    (skalBrukeFpTilbakeHistorikk && historikkTilbakeState === RestApiState.LOADING) ||
-    (skalBrukeKlageHistorikk && historikkKlageState === RestApiState.LOADING)
+    isRequestNotDone(historikkK9SakState) ||
+    (skalBrukeFpTilbakeHistorikk && isRequestNotDone(historikkTilbakeState)) ||
+    (skalBrukeKlageHistorikk && isRequestNotDone(historikkKlageState))
   ) {
     return <LoadingPanel />;
   }
diff --git a/packages/sak-app/src/fagsak/FagsakIndex.tsx b/packages/sak-app/src/fagsak/FagsakIndex.tsx
index ea4873ee42..30efded398 100644
--- a/packages/sak-app/src/fagsak/FagsakIndex.tsx
+++ b/packages/sak-app/src/fagsak/FagsakIndex.tsx
@@ -7,7 +7,6 @@ import {
   LoadingPanel,
   Punsjstripe,
 } from '@fpsak-frontend/shared-components';
-import { RestApiState } from '@k9-sak-web/rest-api-hooks';
 import { Merknadkode } from '@k9-sak-web/sak-meny-marker-behandling';
 import Soknadsperiodestripe from '@k9-sak-web/sak-soknadsperiodestripe';
 import {
@@ -28,6 +27,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { isRequestNotDone } from "@k9-sak-web/rest-api-hooks/src/RestApiState";
 import {
   behandlingerRoutePath,
   erBehandlingValgt,
@@ -216,14 +216,13 @@ const FagsakIndex = () => {
   const erHastesak = merknaderFraLos && merknaderFraLos.merknadKoder?.includes(Merknadkode.HASTESAK);
 
   if (!fagsak) {
-    if (fagsakState === RestApiState.NOT_STARTED || fagsakState === RestApiState.LOADING) {
+    if (isRequestNotDone(fagsakState)) {
       return <LoadingPanel />;
     }
     return <Navigate to={pathToMissingPage()} />;
   }
 
-  const harIkkeHentetfagsakPersonData =
-    fagsakPersonState === RestApiState.LOADING || fagsakPersonState === RestApiState.NOT_STARTED;
+  const harIkkeHentetfagsakPersonData = isRequestNotDone(fagsakPersonState);
 
   if (harIkkeHentetfagsakPersonData || !harFerdighentetfagsakRettigheter) {
     return <LoadingPanel />;
@@ -274,7 +273,7 @@ const FagsakIndex = () => {
           />
         }
         supportContent={() => {
-          if (personopplysningerState === RestApiState.LOADING) {
+          if (isRequestNotDone(personopplysningerState)) {
             return <LoadingPanel />;
           }
 
@@ -299,7 +298,7 @@ const FagsakIndex = () => {
             return null;
           }
 
-          if (personopplysningerState === RestApiState.LOADING) {
+          if (isRequestNotDone(personopplysningerState)) {
             return <LoadingPanel />;
           }
 
diff --git a/webpack/mocks/feature-toggles.js b/webpack/mocks/feature-toggles.js
index d9e37729eb..f79ebaf092 100644
--- a/webpack/mocks/feature-toggles.js
+++ b/webpack/mocks/feature-toggles.js
@@ -69,6 +69,10 @@ const featureToggles = [
     key: 'LOKALE_PAKKER',
     value: process.env.LOKALE_PAKKER,
   },
+  {
+    key: 'OVERSTYRING_UTTAK',
+    value: process.env.OVERSTYRING_UTTAK,
+  },
 ];
 
 module.exports = function (app) {

From 4f86849a49a5defcfbf1f3f437d3a3703298600c Mon Sep 17 00:00:00 2001
From: "Thomas H. Wiberg" <thomas@thawi.no>
Date: Tue, 12 Dec 2023 09:38:42 +0100
Subject: [PATCH 7/9] Infostripe ved ap 6017 (#5421)

---
 packages/prosess-uttak/src/ui/MainComponent.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/prosess-uttak/src/ui/MainComponent.tsx b/packages/prosess-uttak/src/ui/MainComponent.tsx
index a65833011a..6003439dd3 100644
--- a/packages/prosess-uttak/src/ui/MainComponent.tsx
+++ b/packages/prosess-uttak/src/ui/MainComponent.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Heading } from '@navikt/ds-react';
+import { Alert, BodyShort, Heading } from '@navikt/ds-react';
 
 import ContainerContract from '../types/ContainerContract';
 import lagUttaksperiodeliste from '../util/uttaksperioder';
@@ -50,6 +50,17 @@ const MainComponent = ({ containerData }: MainComponentProps): JSX.Element => {
       </Heading>
 
       <Infostripe harVentAnnenPSBSakAksjonspunkt={harVentAnnenPSBSakAksjonspunkt} />
+      {overstyringAktiv && (
+        <Alert variant="warning">
+          <Heading spacing size="xsmall" level="3">
+            Vurder overstrying av uttaksgrad
+          </Heading>
+          <BodyShort>
+            Det er lagt til overstyring av uttaksgrad i en tidligere periode. Vurder om det skal legges til overstyring
+            for nye perioder i uttak.
+          </BodyShort>
+        </Alert>
+      )}
 
       <OverstyrUttakContextProvider>
         {erOverstyrer && overstyringAktiv && <OverstyrUttakForm />}

From 69e7e67cf008a3319d0eccb54fb06f7ed615f912 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 12 Dec 2023 08:53:21 +0000
Subject: [PATCH 8/9] Bump @navikt/ds-tailwind from 5.11.3 to 5.11.4 (#5386)

Bumps [@navikt/ds-tailwind](https://github.com/navikt/aksel/tree/HEAD/git) from 5.11.3 to 5.11.4.
- [Release notes](https://github.com/navikt/aksel/releases)
- [Commits](https://github.com/navikt/aksel/commits/@navikt/ds-tailwind@5.11.4/git)

---
updated-dependencies:
- dependency-name: "@navikt/ds-tailwind"
  dependency-type: direct:production
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Thomas H. Wiberg <thomas@thawi.no>
---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index dd2bfcd977..3886903f60 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5915,9 +5915,9 @@ __metadata:
   linkType: hard
 
 "@navikt/ds-tailwind@npm:^5.10.0":
-  version: 5.11.3
-  resolution: "@navikt/ds-tailwind@npm:5.11.3::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-tailwind%2F5.11.3%2F818624802714e06c4c9a616b359dbe630271ff82"
-  checksum: f9ed2d1355572cf90a106081c1c47b8a6af210778e9fe0359c2b9586813242af1f046919b522202ad95cdd57eab67ee150077011937aa95b1ce970def1bfb521
+  version: 5.11.4
+  resolution: "@navikt/ds-tailwind@npm:5.11.4::__archiveUrl=https%3A%2F%2Fnpm.pkg.github.com%2Fdownload%2F%40navikt%2Fds-tailwind%2F5.11.4%2F2253605e313def356b860869bcc4216555ebcc23"
+  checksum: 4219dc51f16f5b4ff883b9ea5c5bb449da166a5647bf3265b51a8227b6215012f77b2931bf39ec8d426919d7f13bd7179794c218818a34097095e81478b6c20b
   languageName: node
   linkType: hard
 

From 12b83ddb25d7ba0edd4334b3a36388bb9ce4866d Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 12 Dec 2023 09:03:36 +0000
Subject: [PATCH 9/9] Bump the babel group with 3 updates (#5412)

Bumps the babel group with 3 updates: [@babel/runtime](https://github.com/babel/babel/tree/HEAD/packages/babel-runtime), [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) and [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env).


Updates `@babel/runtime` from 7.23.5 to 7.23.6
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.23.6/packages/babel-runtime)

Updates `@babel/core` from 7.23.5 to 7.23.6
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.23.6/packages/babel-core)

Updates `@babel/preset-env` from 7.23.5 to 7.23.6
- [Release notes](https://github.com/babel/babel/releases)
- [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md)
- [Commits](https://github.com/babel/babel/commits/v7.23.6/packages/babel-preset-env)

---
updated-dependencies:
- dependency-name: "@babel/runtime"
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: babel
- dependency-name: "@babel/core"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: babel
- dependency-name: "@babel/preset-env"
  dependency-type: direct:development
  update-type: version-update:semver-patch
  dependency-group: babel
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Thomas H. Wiberg <thomas@thawi.no>
---
 package.json |   6 +-
 yarn.lock    | 257 +++++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 253 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index a02a7f3652..d9c9b7b5f0 100644
--- a/package.json
+++ b/package.json
@@ -41,7 +41,7 @@
     "packages/*"
   ],
   "dependencies": {
-    "@babel/runtime": "7.23.5",
+    "@babel/runtime": "7.23.6",
     "@formatjs/intl-datetimeformat": "6.11.1",
     "@formatjs/intl-numberformat": "8.8.0",
     "@hookform/error-message": "^2.0.1",
@@ -73,10 +73,10 @@
     "react-router-dom": "6.18.0"
   },
   "devDependencies": {
-    "@babel/core": "7.23.5",
+    "@babel/core": "7.23.6",
     "@babel/eslint-parser": "7.23.3",
     "@babel/helper-regex": "7.10.5",
-    "@babel/preset-env": "7.23.5",
+    "@babel/preset-env": "7.23.6",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
     "@babel/register": "7.22.15",
diff --git a/yarn.lock b/yarn.lock
index 3886903f60..42633182f2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -64,7 +64,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:7.23.5, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.21.3, @babel/core@npm:^7.22.0, @babel/core@npm:^7.22.9, @babel/core@npm:^7.7.5":
+"@babel/core@npm:7.23.6":
+  version: 7.23.6
+  resolution: "@babel/core@npm:7.23.6"
+  dependencies:
+    "@ampproject/remapping": ^2.2.0
+    "@babel/code-frame": ^7.23.5
+    "@babel/generator": ^7.23.6
+    "@babel/helper-compilation-targets": ^7.23.6
+    "@babel/helper-module-transforms": ^7.23.3
+    "@babel/helpers": ^7.23.6
+    "@babel/parser": ^7.23.6
+    "@babel/template": ^7.22.15
+    "@babel/traverse": ^7.23.6
+    "@babel/types": ^7.23.6
+    convert-source-map: ^2.0.0
+    debug: ^4.1.0
+    gensync: ^1.0.0-beta.2
+    json5: ^2.2.3
+    semver: ^6.3.1
+  checksum: 4bddd1b80394a64b2ee33eeb216e8a2a49ad3d74f0ca9ba678c84a37f4502b2540662d72530d78228a2a349fda837fa852eea5cd3ae28465d1188acc6055868e
+  languageName: node
+  linkType: hard
+
+"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.21.3, @babel/core@npm:^7.22.0, @babel/core@npm:^7.22.9, @babel/core@npm:^7.7.5":
   version: 7.23.5
   resolution: "@babel/core@npm:7.23.5"
   dependencies:
@@ -113,6 +136,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.23.6":
+  version: 7.23.6
+  resolution: "@babel/generator@npm:7.23.6"
+  dependencies:
+    "@babel/types": ^7.23.6
+    "@jridgewell/gen-mapping": ^0.3.2
+    "@jridgewell/trace-mapping": ^0.3.17
+    jsesc: ^2.5.1
+  checksum: 1a1a1c4eac210f174cd108d479464d053930a812798e09fee069377de39a893422df5b5b146199ead7239ae6d3a04697b45fc9ac6e38e0f6b76374390f91fc6c
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-annotate-as-pure@npm:7.22.5"
@@ -144,6 +179,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-compilation-targets@npm:^7.23.6":
+  version: 7.23.6
+  resolution: "@babel/helper-compilation-targets@npm:7.23.6"
+  dependencies:
+    "@babel/compat-data": ^7.23.5
+    "@babel/helper-validator-option": ^7.23.5
+    browserslist: ^4.22.2
+    lru-cache: ^5.1.1
+    semver: ^6.3.1
+  checksum: c630b98d4527ac8fe2c58d9a06e785dfb2b73ec71b7c4f2ddf90f814b5f75b547f3c015f110a010fd31f76e3864daaf09f3adcd2f6acdbfb18a8de3a48717590
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.23.5":
   version: 7.23.5
   resolution: "@babel/helper-create-class-features-plugin@npm:7.23.5"
@@ -371,6 +419,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.23.6":
+  version: 7.23.6
+  resolution: "@babel/helpers@npm:7.23.6"
+  dependencies:
+    "@babel/template": ^7.22.15
+    "@babel/traverse": ^7.23.6
+    "@babel/types": ^7.23.6
+  checksum: c5ba62497e1d717161d107c4b3de727565c68b6b9f50f59d6298e613afeca8895799b227c256e06d362e565aec34e26fb5c675b9c3d25055c52b945a21c21e21
+  languageName: node
+  linkType: hard
+
 "@babel/highlight@npm:^7.23.4":
   version: 7.23.4
   resolution: "@babel/highlight@npm:7.23.4"
@@ -391,6 +450,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.23.6":
+  version: 7.23.6
+  resolution: "@babel/parser@npm:7.23.6"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 140801c43731a6c41fd193f5c02bc71fd647a0360ca616b23d2db8be4b9739b9f951a03fc7c2db4f9b9214f4b27c1074db0f18bc3fa653783082d5af7c8860d5
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3"
@@ -925,6 +993,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-for-of@npm:^7.23.6":
+  version: 7.23.6
+  resolution: "@babel/plugin-transform-for-of@npm:7.23.6"
+  dependencies:
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/helper-skip-transparent-expression-wrappers": ^7.22.5
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 228c060aa61f6aa89dc447170075f8214863b94f830624e74ade99c1a09316897c12d76e848460b0b506593e58dbc42739af6dc4cb0fe9b84dffe4a596050a36
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-function-name@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-function-name@npm:7.23.3"
@@ -1382,7 +1462,97 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:7.23.5, @babel/preset-env@npm:^7.20.2, @babel/preset-env@npm:^7.22.9":
+"@babel/preset-env@npm:7.23.6":
+  version: 7.23.6
+  resolution: "@babel/preset-env@npm:7.23.6"
+  dependencies:
+    "@babel/compat-data": ^7.23.5
+    "@babel/helper-compilation-targets": ^7.23.6
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/helper-validator-option": ^7.23.5
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": ^7.23.3
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": ^7.23.3
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": ^7.23.3
+    "@babel/plugin-proposal-private-property-in-object": 7.21.0-placeholder-for-preset-env.2
+    "@babel/plugin-syntax-async-generators": ^7.8.4
+    "@babel/plugin-syntax-class-properties": ^7.12.13
+    "@babel/plugin-syntax-class-static-block": ^7.14.5
+    "@babel/plugin-syntax-dynamic-import": ^7.8.3
+    "@babel/plugin-syntax-export-namespace-from": ^7.8.3
+    "@babel/plugin-syntax-import-assertions": ^7.23.3
+    "@babel/plugin-syntax-import-attributes": ^7.23.3
+    "@babel/plugin-syntax-import-meta": ^7.10.4
+    "@babel/plugin-syntax-json-strings": ^7.8.3
+    "@babel/plugin-syntax-logical-assignment-operators": ^7.10.4
+    "@babel/plugin-syntax-nullish-coalescing-operator": ^7.8.3
+    "@babel/plugin-syntax-numeric-separator": ^7.10.4
+    "@babel/plugin-syntax-object-rest-spread": ^7.8.3
+    "@babel/plugin-syntax-optional-catch-binding": ^7.8.3
+    "@babel/plugin-syntax-optional-chaining": ^7.8.3
+    "@babel/plugin-syntax-private-property-in-object": ^7.14.5
+    "@babel/plugin-syntax-top-level-await": ^7.14.5
+    "@babel/plugin-syntax-unicode-sets-regex": ^7.18.6
+    "@babel/plugin-transform-arrow-functions": ^7.23.3
+    "@babel/plugin-transform-async-generator-functions": ^7.23.4
+    "@babel/plugin-transform-async-to-generator": ^7.23.3
+    "@babel/plugin-transform-block-scoped-functions": ^7.23.3
+    "@babel/plugin-transform-block-scoping": ^7.23.4
+    "@babel/plugin-transform-class-properties": ^7.23.3
+    "@babel/plugin-transform-class-static-block": ^7.23.4
+    "@babel/plugin-transform-classes": ^7.23.5
+    "@babel/plugin-transform-computed-properties": ^7.23.3
+    "@babel/plugin-transform-destructuring": ^7.23.3
+    "@babel/plugin-transform-dotall-regex": ^7.23.3
+    "@babel/plugin-transform-duplicate-keys": ^7.23.3
+    "@babel/plugin-transform-dynamic-import": ^7.23.4
+    "@babel/plugin-transform-exponentiation-operator": ^7.23.3
+    "@babel/plugin-transform-export-namespace-from": ^7.23.4
+    "@babel/plugin-transform-for-of": ^7.23.6
+    "@babel/plugin-transform-function-name": ^7.23.3
+    "@babel/plugin-transform-json-strings": ^7.23.4
+    "@babel/plugin-transform-literals": ^7.23.3
+    "@babel/plugin-transform-logical-assignment-operators": ^7.23.4
+    "@babel/plugin-transform-member-expression-literals": ^7.23.3
+    "@babel/plugin-transform-modules-amd": ^7.23.3
+    "@babel/plugin-transform-modules-commonjs": ^7.23.3
+    "@babel/plugin-transform-modules-systemjs": ^7.23.3
+    "@babel/plugin-transform-modules-umd": ^7.23.3
+    "@babel/plugin-transform-named-capturing-groups-regex": ^7.22.5
+    "@babel/plugin-transform-new-target": ^7.23.3
+    "@babel/plugin-transform-nullish-coalescing-operator": ^7.23.4
+    "@babel/plugin-transform-numeric-separator": ^7.23.4
+    "@babel/plugin-transform-object-rest-spread": ^7.23.4
+    "@babel/plugin-transform-object-super": ^7.23.3
+    "@babel/plugin-transform-optional-catch-binding": ^7.23.4
+    "@babel/plugin-transform-optional-chaining": ^7.23.4
+    "@babel/plugin-transform-parameters": ^7.23.3
+    "@babel/plugin-transform-private-methods": ^7.23.3
+    "@babel/plugin-transform-private-property-in-object": ^7.23.4
+    "@babel/plugin-transform-property-literals": ^7.23.3
+    "@babel/plugin-transform-regenerator": ^7.23.3
+    "@babel/plugin-transform-reserved-words": ^7.23.3
+    "@babel/plugin-transform-shorthand-properties": ^7.23.3
+    "@babel/plugin-transform-spread": ^7.23.3
+    "@babel/plugin-transform-sticky-regex": ^7.23.3
+    "@babel/plugin-transform-template-literals": ^7.23.3
+    "@babel/plugin-transform-typeof-symbol": ^7.23.3
+    "@babel/plugin-transform-unicode-escapes": ^7.23.3
+    "@babel/plugin-transform-unicode-property-regex": ^7.23.3
+    "@babel/plugin-transform-unicode-regex": ^7.23.3
+    "@babel/plugin-transform-unicode-sets-regex": ^7.23.3
+    "@babel/preset-modules": 0.1.6-no-external-plugins
+    babel-plugin-polyfill-corejs2: ^0.4.6
+    babel-plugin-polyfill-corejs3: ^0.8.5
+    babel-plugin-polyfill-regenerator: ^0.5.3
+    core-js-compat: ^3.31.0
+    semver: ^6.3.1
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 130262f263c8a76915ff5361f78afa9e63b4ecbf3ade8e833dc7546db7b9552ab507835bdea0feb5e70861345ca128a31327fd2e187084a215fc9dd1cc0ed38e
+  languageName: node
+  linkType: hard
+
+"@babel/preset-env@npm:^7.20.2, @babel/preset-env@npm:^7.22.9":
   version: 7.23.5
   resolution: "@babel/preset-env@npm:7.23.5"
   dependencies:
@@ -1551,7 +1721,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:7.23.5, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:7.23.6":
+  version: 7.23.6
+  resolution: "@babel/runtime@npm:7.23.6"
+  dependencies:
+    regenerator-runtime: ^0.14.0
+  checksum: 1a8eaf3d3a103ef5227b60ca7ab5c589118c36ca65ef2d64e65380b32a98a3f3b5b3ef96660fa0471b079a18b619a8317f3e7f03ab2b930c45282a8b69ed9a16
+  languageName: node
+  linkType: hard
+
+"@babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.1, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
   version: 7.23.5
   resolution: "@babel/runtime@npm:7.23.5"
   dependencies:
@@ -1589,6 +1768,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:^7.23.6":
+  version: 7.23.6
+  resolution: "@babel/traverse@npm:7.23.6"
+  dependencies:
+    "@babel/code-frame": ^7.23.5
+    "@babel/generator": ^7.23.6
+    "@babel/helper-environment-visitor": ^7.22.20
+    "@babel/helper-function-name": ^7.23.0
+    "@babel/helper-hoist-variables": ^7.22.5
+    "@babel/helper-split-export-declaration": ^7.22.6
+    "@babel/parser": ^7.23.6
+    "@babel/types": ^7.23.6
+    debug: ^4.3.1
+    globals: ^11.1.0
+  checksum: 48f2eac0e86b6cb60dab13a5ea6a26ba45c450262fccdffc334c01089e75935f7546be195e260e97f6e43cea419862eda095018531a2718fef8189153d479f88
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.0.0, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.3, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.5, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.8.3":
   version: 7.23.5
   resolution: "@babel/types@npm:7.23.5"
@@ -1600,6 +1797,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.23.6":
+  version: 7.23.6
+  resolution: "@babel/types@npm:7.23.6"
+  dependencies:
+    "@babel/helper-string-parser": ^7.23.4
+    "@babel/helper-validator-identifier": ^7.22.20
+    to-fast-properties: ^2.0.0
+  checksum: 68187dbec0d637f79bc96263ac95ec8b06d424396678e7e225492be866414ce28ebc918a75354d4c28659be6efe30020b4f0f6df81cc418a2d30645b690a8de0
+  languageName: node
+  linkType: hard
+
 "@base2/pretty-print-object@npm:1.0.1":
   version: 1.0.1
   resolution: "@base2/pretty-print-object@npm:1.0.1"
@@ -12400,6 +12608,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"browserslist@npm:^4.22.2":
+  version: 4.22.2
+  resolution: "browserslist@npm:4.22.2"
+  dependencies:
+    caniuse-lite: ^1.0.30001565
+    electron-to-chromium: ^1.4.601
+    node-releases: ^2.0.14
+    update-browserslist-db: ^1.0.13
+  bin:
+    browserslist: cli.js
+  checksum: 33ddfcd9145220099a7a1ac533cecfe5b7548ffeb29b313e1b57be6459000a1f8fa67e781cf4abee97268ac594d44134fcc4a6b2b4750ceddc9796e3a22076d9
+  languageName: node
+  linkType: hard
+
 "bser@npm:2.1.1":
   version: 2.1.1
   resolution: "bser@npm:2.1.1"
@@ -12679,6 +12901,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"caniuse-lite@npm:^1.0.30001565":
+  version: 1.0.30001568
+  resolution: "caniuse-lite@npm:1.0.30001568"
+  checksum: 7092aaa246dc8531fbca5b47be91e92065db7e5c04cc9e3d864e848f8f1be769ac6754429e843a5e939f7331a771e8b0a1bc3b13495c66b748c65e2f5bdb1220
+  languageName: node
+  linkType: hard
+
 "case-sensitive-paths-webpack-plugin@npm:^2.4.0":
   version: 2.4.0
   resolution: "case-sensitive-paths-webpack-plugin@npm:2.4.0"
@@ -14040,7 +14269,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:4.3.4, debug@npm:^4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4":
+"debug@npm:4, debug@npm:4.3.4, debug@npm:^4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.3, debug@npm:^4.3.4":
   version: 4.3.4
   resolution: "debug@npm:4.3.4"
   dependencies:
@@ -14685,6 +14914,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"electron-to-chromium@npm:^1.4.601":
+  version: 1.4.610
+  resolution: "electron-to-chromium@npm:1.4.610"
+  checksum: 30e57a1483717e6e27882e7e35b167258b669f44a4e66f4f40460825b77c12646140d220f5e1f95668890fc76dd511c93fa73c6374cbf443fc78077d9634864d
+  languageName: node
+  linkType: hard
+
 "emittery@npm:^0.13.1":
   version: 0.13.1
   resolution: "emittery@npm:0.13.1"
@@ -19244,14 +19480,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "k9-sak-web@workspace:."
   dependencies:
-    "@babel/core": 7.23.5
+    "@babel/core": 7.23.6
     "@babel/eslint-parser": 7.23.3
     "@babel/helper-regex": 7.10.5
-    "@babel/preset-env": 7.23.5
+    "@babel/preset-env": 7.23.6
     "@babel/preset-react": 7.23.3
     "@babel/preset-typescript": 7.23.3
     "@babel/register": 7.22.15
-    "@babel/runtime": 7.23.5
+    "@babel/runtime": 7.23.6
     "@cfaester/enzyme-adapter-react-18": ^0.7.1
     "@commercetools/enzyme-extensions": 5.0.0
     "@formatjs/intl-datetimeformat": 6.11.1
@@ -21504,6 +21740,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-releases@npm:^2.0.14":
+  version: 2.0.14
+  resolution: "node-releases@npm:2.0.14"
+  checksum: 59443a2f77acac854c42d321bf1b43dea0aef55cd544c6a686e9816a697300458d4e82239e2d794ea05f7bbbc8a94500332e2d3ac3f11f52e4b16cbe638b3c41
+  languageName: node
+  linkType: hard
+
 "nodemon@npm:3.0.2":
   version: 3.0.2
   resolution: "nodemon@npm:3.0.2"