diff --git a/package.json b/package.json
index b7be7df0b6..424b2988e4 100644
--- a/package.json
+++ b/package.json
@@ -140,4 +140,4 @@
     ]
   },
   "packageManager": "yarn@3.4.1"
-}
\ No newline at end of file
+}
diff --git a/packages/behandling-felles/src/util/prosessSteg/ProsessStegOverstyringPanelDef.tsx b/packages/behandling-felles/src/util/prosessSteg/ProsessStegOverstyringPanelDef.tsx
index 268c8d49aa..368d818884 100644
--- a/packages/behandling-felles/src/util/prosessSteg/ProsessStegOverstyringPanelDef.tsx
+++ b/packages/behandling-felles/src/util/prosessSteg/ProsessStegOverstyringPanelDef.tsx
@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import kodeverkTyper from '@fpsak-frontend/kodeverk/src/kodeverkTyper';
 import VilkarresultatMedOverstyringProsessIndex from '@fpsak-frontend/prosess-vilkar-overstyring';
-
+import { VilkarresultatMedOverstyringProsessIndex as VilkarresultatMedOverstyringProsessIndexV2 } from '@k9-sak-web/gui/prosess/vilkar-overstyring/VilkarresultatMedOverstyringProsessIndex.js';
 import { ProsessStegPanelDef } from './ProsessStegDef';
 
 const harVilkarresultatMedOverstyring = (aksjonspunkterForSteg, aksjonspunktDefKoderForSteg) => {
@@ -34,7 +34,12 @@ class ProsessStegOverstyringPanelDef extends ProsessStegPanelDef {
   getOverstyrVisningAvKomponent = ({ vilkarForSteg, aksjonspunkterForSteg, aksjonspunktDefKoderForSteg }): boolean =>
     vilkarForSteg.length > 0 && harVilkarresultatMedOverstyring(aksjonspunkterForSteg, aksjonspunktDefKoderForSteg);
 
-  getKomponent = (props): ReactNode => <VilkarresultatMedOverstyringProsessIndex {...props} />;
+  getKomponent = (props): ReactNode => {
+    if (props.usev2Panel) {
+      return <VilkarresultatMedOverstyringProsessIndexV2 {...props} />;
+    }
+    return <VilkarresultatMedOverstyringProsessIndex {...props} />;
+  };
 
   getData = ({
     vilkarForSteg,
@@ -45,17 +50,17 @@ class ProsessStegOverstyringPanelDef extends ProsessStegPanelDef {
     kanOverstyreAccess,
     toggleOverstyring,
   }): any => ({
-      avslagsarsaker: alleKodeverk[kodeverkTyper.AVSLAGSARSAK][vilkarForSteg[0].vilkarType.kode],
-      erOverstyrt: overstyrteAksjonspunktKoder.some(o => this.getAksjonspunktKoder().some(a => a === o)),
-      overstyringApKode: this.getAksjonspunktKoder()[0],
-      panelTittelKode: this.getTekstKode() ? this.getTekstKode() : prosessStegTekstKode,
-      erMedlemskapsPanel: this.getId() === 'MEDLEMSKAP',
-      visPeriodisering: this.getId() === 'OMSORGENFOR',
-      lovReferanse: vilkarForSteg.length > 0 ? vilkarForSteg[0].lovReferanse : undefined,
-      overrideReadOnly,
-      kanOverstyreAccess,
-      toggleOverstyring,
-    });
+    avslagsarsaker: alleKodeverk[kodeverkTyper.AVSLAGSARSAK][vilkarForSteg[0].vilkarType.kode],
+    erOverstyrt: overstyrteAksjonspunktKoder.some(o => this.getAksjonspunktKoder().some(a => a === o)),
+    overstyringApKode: this.getAksjonspunktKoder()[0],
+    panelTittelKode: this.getTekstKode() ? this.getTekstKode() : prosessStegTekstKode,
+    erMedlemskapsPanel: this.getId() === 'MEDLEMSKAP',
+    visPeriodisering: this.getId() === 'OMSORGENFOR',
+    lovReferanse: vilkarForSteg.length > 0 ? vilkarForSteg[0].lovReferanse : undefined,
+    overrideReadOnly,
+    kanOverstyreAccess,
+    toggleOverstyring,
+  });
 }
 
 export default ProsessStegOverstyringPanelDef;
diff --git a/packages/behandling-frisinn/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx b/packages/behandling-frisinn/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx
index 738832d1ee..2c6577d750 100644
--- a/packages/behandling-frisinn/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx
+++ b/packages/behandling-frisinn/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx
@@ -16,7 +16,7 @@ class BeregningFaktaPanelDef extends FaktaPanelDef {
   getAksjonspunktKoder = () => [aksjonspunktCodes.VURDER_FAKTA_FOR_ATFL_SN];
 
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps);
     const bgVilkaret = deepCopyProps.vilkar.find(v => v.vilkarType === vilkarType.BEREGNINGSGRUNNLAGVILKARET);
 
diff --git a/packages/behandling-frisinn/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx b/packages/behandling-frisinn/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx
index 286324b54a..37a33ced3d 100644
--- a/packages/behandling-frisinn/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx
+++ b/packages/behandling-frisinn/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx
@@ -1,10 +1,8 @@
-import React from 'react';
-
-import vilkarType from '@fpsak-frontend/kodeverk/src/vilkarType';
-import { prosessStegCodes } from '@k9-sak-web/konstanter';
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
-import { ProsessStegDef, ProsessStegPanelDef } from '@k9-sak-web/behandling-felles';
+import vilkarType from '@fpsak-frontend/kodeverk/src/vilkarType';
 import { konverterKodeverkTilKode, mapVilkar, transformBeregningValues } from '@fpsak-frontend/utils';
+import { ProsessStegDef, ProsessStegPanelDef } from '@k9-sak-web/behandling-felles';
+import { prosessStegCodes } from '@k9-sak-web/konstanter';
 import { BeregningsgrunnlagProsessIndex } from '@navikt/ft-prosess-beregningsgrunnlag';
 
 const mapYtelsesSpesifiktGrunnlagForFrisinn = (beregningsgrunnlag, behandling) =>
@@ -19,7 +17,7 @@ const mapYtelsesSpesifiktGrunnlagForFrisinn = (beregningsgrunnlag, behandling) =
 class PanelDef extends ProsessStegPanelDef {
   // eslint-disable-next-line class-methods-use-this
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps);
     const bgVilkaret = deepCopyProps.vilkar.find(v => v.vilkarType === vilkarType.BEREGNINGSGRUNNLAGVILKARET);
     return (
diff --git a/packages/behandling-frisinn/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx b/packages/behandling-frisinn/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
index 7c168d0d42..55451ee873 100644
--- a/packages/behandling-frisinn/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
+++ b/packages/behandling-frisinn/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
@@ -15,7 +15,7 @@ const harKunAvslåtteUttak = beregningsresultatUtbetaling => {
 
 class PanelDef extends ProsessStegPanelDef {
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps, false);
     return <TilkjentYtelseProsessIndex {...props} {...deepCopyProps} />;
   };
diff --git a/packages/behandling-omsorgspenger/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx b/packages/behandling-omsorgspenger/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx
index dd38f8bea8..cc4cc19bb8 100644
--- a/packages/behandling-omsorgspenger/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx
+++ b/packages/behandling-omsorgspenger/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx
@@ -21,7 +21,7 @@ class BeregningFaktaPanelDef extends FaktaPanelDef {
   ];
 
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps);
     const bgVilkaret = deepCopyProps.vilkar.find(v => v.vilkarType === vilkarType.BEREGNINGSGRUNNLAGVILKARET);
 
diff --git a/packages/behandling-omsorgspenger/src/panelDefinisjoner/faktaPaneler/FordelBeregningPanelDef.tsx b/packages/behandling-omsorgspenger/src/panelDefinisjoner/faktaPaneler/FordelBeregningPanelDef.tsx
index fff4aa165b..b12e2c3819 100644
--- a/packages/behandling-omsorgspenger/src/panelDefinisjoner/faktaPaneler/FordelBeregningPanelDef.tsx
+++ b/packages/behandling-omsorgspenger/src/panelDefinisjoner/faktaPaneler/FordelBeregningPanelDef.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import vilkarType from '@fpsak-frontend/kodeverk/src/vilkarType';
 import { konverterKodeverkTilKode, transformBeregningValues } from '@fpsak-frontend/utils';
@@ -20,7 +18,7 @@ class FordelBeregningPanelDef extends FaktaPanelDef {
   ];
 
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps);
     const bgVilkaret = deepCopyProps.vilkar.find(v => v.vilkarType === vilkarType.BEREGNINGSGRUNNLAGVILKARET);
     return (
diff --git a/packages/behandling-omsorgspenger/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx b/packages/behandling-omsorgspenger/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx
index 9c514352da..9547d18ad1 100644
--- a/packages/behandling-omsorgspenger/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx
+++ b/packages/behandling-omsorgspenger/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import vilkarType from '@fpsak-frontend/kodeverk/src/vilkarType';
 import { konverterKodeverkTilKode, mapVilkar, transformBeregningValues } from '@fpsak-frontend/utils';
@@ -11,7 +9,7 @@ import '@navikt/ft-prosess-beregningsgrunnlag/dist/style.css';
 class PanelDef extends ProsessStegPanelDef {
   // eslint-disable-next-line class-methods-use-this
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps);
     const bgVilkaret = deepCopyProps.vilkar.find(v => v.vilkarType === vilkarType.BEREGNINGSGRUNNLAGVILKARET);
     return (
diff --git a/packages/behandling-omsorgspenger/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx b/packages/behandling-omsorgspenger/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
index e485bd0a41..b89df5d36b 100644
--- a/packages/behandling-omsorgspenger/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
+++ b/packages/behandling-omsorgspenger/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
@@ -20,7 +20,7 @@ const harKunAvslåtteUttak = beregningsresultatUtbetaling => {
 
 class PanelDef extends ProsessStegPanelDef {
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps, false);
     return <TilkjentYtelseProsessIndex {...props} {...deepCopyProps} />;
   };
diff --git a/packages/behandling-omsorgspenger/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx b/packages/behandling-omsorgspenger/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx
index b342b7f918..e9fe42f284 100644
--- a/packages/behandling-omsorgspenger/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx
+++ b/packages/behandling-omsorgspenger/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx
@@ -14,7 +14,7 @@ class SoknadsfristPanelDef extends ProsessStegPanelDef {
   getTekstKode = () => 'Søknadsfrist';
 
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps, false);
     if (props.featureToggles?.PROSESS_VILKAR_SOKNADSFRIST) {
       return <SoknadsfristVilkarProsessIndexV2 {...props} {...deepCopyProps} />;
diff --git a/packages/behandling-opplaeringspenger/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx b/packages/behandling-opplaeringspenger/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx
index 75b4453faa..2f2d370054 100644
--- a/packages/behandling-opplaeringspenger/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx
+++ b/packages/behandling-opplaeringspenger/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx
@@ -25,7 +25,7 @@ class BeregningFaktaPanelDef extends FaktaPanelDef {
 
   // eslint-disable-next-line class-methods-use-this
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps);
     const bgVilkaret = deepCopyProps.vilkar.find(v => v.vilkarType === vilkarType.BEREGNINGSGRUNNLAGVILKARET);
 
diff --git a/packages/behandling-opplaeringspenger/src/panelDefinisjoner/faktaPaneler/FordelBeregningPanelDef.tsx b/packages/behandling-opplaeringspenger/src/panelDefinisjoner/faktaPaneler/FordelBeregningPanelDef.tsx
index 774c583531..45d8650c38 100644
--- a/packages/behandling-opplaeringspenger/src/panelDefinisjoner/faktaPaneler/FordelBeregningPanelDef.tsx
+++ b/packages/behandling-opplaeringspenger/src/panelDefinisjoner/faktaPaneler/FordelBeregningPanelDef.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import vilkarType from '@fpsak-frontend/kodeverk/src/vilkarType';
 import { konverterKodeverkTilKode, transformBeregningValues } from '@fpsak-frontend/utils';
@@ -20,7 +18,7 @@ class FordelBeregningPanelDef extends FaktaPanelDef {
   ];
 
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps);
     const bgVilkaret = deepCopyProps.vilkar.find(v => v.vilkarType === vilkarType.BEREGNINGSGRUNNLAGVILKARET);
     return (
diff --git a/packages/behandling-opplaeringspenger/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx b/packages/behandling-opplaeringspenger/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx
index 9c514352da..9547d18ad1 100644
--- a/packages/behandling-opplaeringspenger/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx
+++ b/packages/behandling-opplaeringspenger/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import vilkarType from '@fpsak-frontend/kodeverk/src/vilkarType';
 import { konverterKodeverkTilKode, mapVilkar, transformBeregningValues } from '@fpsak-frontend/utils';
@@ -11,7 +9,7 @@ import '@navikt/ft-prosess-beregningsgrunnlag/dist/style.css';
 class PanelDef extends ProsessStegPanelDef {
   // eslint-disable-next-line class-methods-use-this
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps);
     const bgVilkaret = deepCopyProps.vilkar.find(v => v.vilkarType === vilkarType.BEREGNINGSGRUNNLAGVILKARET);
     return (
diff --git a/packages/behandling-opplaeringspenger/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx b/packages/behandling-opplaeringspenger/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
index 98b57dc9e6..31251699ac 100644
--- a/packages/behandling-opplaeringspenger/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
+++ b/packages/behandling-opplaeringspenger/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
@@ -15,7 +15,7 @@ const harKunAvslåtteUttak = beregningsresultatUtbetaling => {
 
 class PanelDef extends ProsessStegPanelDef {
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps, false);
     return <TilkjentYtelseProsessIndex {...props} {...deepCopyProps} />;
   };
diff --git a/packages/behandling-opplaeringspenger/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx b/packages/behandling-opplaeringspenger/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx
index cc4d2f3ff7..740887a617 100644
--- a/packages/behandling-opplaeringspenger/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx
+++ b/packages/behandling-opplaeringspenger/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx
@@ -14,7 +14,7 @@ class SoknadsfristPanelDef extends ProsessStegPanelDef {
   getTekstKode = () => 'Søknadsfrist';
 
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps, false);
     if (props.featureToggles?.PROSESS_VILKAR_SOKNADSFRIST) {
       return <SoknadsfristVilkarProsessIndexV2 {...props} {...deepCopyProps} />;
diff --git a/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx b/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx
index fd9a0369f0..34433d1d65 100644
--- a/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx
+++ b/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx
@@ -21,7 +21,7 @@ class BeregningFaktaPanelDef extends FaktaPanelDef {
   ];
 
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps);
     const bgVilkaret = deepCopyProps.vilkar.find(v => v.vilkarType === vilkarType.BEREGNINGSGRUNNLAGVILKARET);
 
diff --git a/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/faktaPaneler/FordelBeregningPanelDef.tsx b/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/faktaPaneler/FordelBeregningPanelDef.tsx
index fff4aa165b..b12e2c3819 100644
--- a/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/faktaPaneler/FordelBeregningPanelDef.tsx
+++ b/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/faktaPaneler/FordelBeregningPanelDef.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import vilkarType from '@fpsak-frontend/kodeverk/src/vilkarType';
 import { konverterKodeverkTilKode, transformBeregningValues } from '@fpsak-frontend/utils';
@@ -20,7 +18,7 @@ class FordelBeregningPanelDef extends FaktaPanelDef {
   ];
 
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps);
     const bgVilkaret = deepCopyProps.vilkar.find(v => v.vilkarType === vilkarType.BEREGNINGSGRUNNLAGVILKARET);
     return (
diff --git a/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx b/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx
index 9c514352da..9547d18ad1 100644
--- a/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx
+++ b/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import vilkarType from '@fpsak-frontend/kodeverk/src/vilkarType';
 import { konverterKodeverkTilKode, mapVilkar, transformBeregningValues } from '@fpsak-frontend/utils';
@@ -11,7 +9,7 @@ import '@navikt/ft-prosess-beregningsgrunnlag/dist/style.css';
 class PanelDef extends ProsessStegPanelDef {
   // eslint-disable-next-line class-methods-use-this
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps);
     const bgVilkaret = deepCopyProps.vilkar.find(v => v.vilkarType === vilkarType.BEREGNINGSGRUNNLAGVILKARET);
     return (
diff --git a/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx b/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
index 98b57dc9e6..31251699ac 100644
--- a/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
+++ b/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
@@ -15,7 +15,7 @@ const harKunAvslåtteUttak = beregningsresultatUtbetaling => {
 
 class PanelDef extends ProsessStegPanelDef {
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps, false);
     return <TilkjentYtelseProsessIndex {...props} {...deepCopyProps} />;
   };
diff --git a/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx b/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx
index 08cd60380b..af997b6018 100644
--- a/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx
+++ b/packages/behandling-pleiepenger-sluttfase/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx
@@ -14,7 +14,7 @@ class SoknadsfristPanelDef extends ProsessStegPanelDef {
   getTekstKode = () => 'Søknadsfrist';
 
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps, false);
     if (props.featureToggles?.PROSESS_VILKAR_SOKNADSFRIST) {
       return <SoknadsfristVilkarProsessIndexV2 {...props} {...deepCopyProps} />;
diff --git a/packages/behandling-pleiepenger/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx b/packages/behandling-pleiepenger/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx
index 79f48a5901..6abab43d49 100644
--- a/packages/behandling-pleiepenger/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx
+++ b/packages/behandling-pleiepenger/src/panelDefinisjoner/faktaPaneler/BeregningFaktaPanelDef.tsx
@@ -25,7 +25,7 @@ class BeregningFaktaPanelDef extends FaktaPanelDef {
 
   // eslint-disable-next-line class-methods-use-this
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps);
     const bgVilkaret = deepCopyProps.vilkar.find(v => v.vilkarType === vilkarType.BEREGNINGSGRUNNLAGVILKARET);
 
diff --git a/packages/behandling-pleiepenger/src/panelDefinisjoner/faktaPaneler/FordelBeregningPanelDef.tsx b/packages/behandling-pleiepenger/src/panelDefinisjoner/faktaPaneler/FordelBeregningPanelDef.tsx
index 03a7097edc..45d8650c38 100644
--- a/packages/behandling-pleiepenger/src/panelDefinisjoner/faktaPaneler/FordelBeregningPanelDef.tsx
+++ b/packages/behandling-pleiepenger/src/panelDefinisjoner/faktaPaneler/FordelBeregningPanelDef.tsx
@@ -18,7 +18,7 @@ class FordelBeregningPanelDef extends FaktaPanelDef {
   ];
 
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps);
     const bgVilkaret = deepCopyProps.vilkar.find(v => v.vilkarType === vilkarType.BEREGNINGSGRUNNLAGVILKARET);
     return (
diff --git a/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx b/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx
index 31a6e05ac6..c943da5016 100644
--- a/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx
+++ b/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/BeregningsgrunnlagProsessStegPanelDef.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
 import vilkarType from '@fpsak-frontend/kodeverk/src/vilkarType';
 import { konverterKodeverkTilKode, mapVilkar, transformBeregningValues } from '@fpsak-frontend/utils';
@@ -11,7 +9,7 @@ import '@navikt/ft-prosess-beregningsgrunnlag/dist/style.css';
 class PanelDef extends ProsessStegPanelDef {
   // eslint-disable-next-line class-methods-use-this
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps);
     const bgVilkaret = deepCopyProps.vilkar.find(v => v.vilkarType === vilkarType.BEREGNINGSGRUNNLAGVILKARET);
     return (
diff --git a/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx b/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
index 98b57dc9e6..31251699ac 100644
--- a/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
+++ b/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
@@ -15,7 +15,7 @@ const harKunAvslåtteUttak = beregningsresultatUtbetaling => {
 
 class PanelDef extends ProsessStegPanelDef {
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps, false);
     return <TilkjentYtelseProsessIndex {...props} {...deepCopyProps} />;
   };
diff --git a/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx b/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx
index 860637a99c..554d65995e 100644
--- a/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx
+++ b/packages/behandling-pleiepenger/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx
@@ -14,7 +14,7 @@ class SoknadsfristPanelDef extends ProsessStegPanelDef {
   getTekstKode = () => 'Søknadsfrist';
 
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps, false);
     if (props.featureToggles?.PROSESS_VILKAR_SOKNADSFRIST) {
       return <SoknadsfristVilkarProsessIndexV2 {...props} {...deepCopyProps} />;
diff --git a/packages/behandling-tilbakekreving/src/panelDefinisjoner/prosessStegPaneler/ForeldelseProsessStegPanelDef.tsx b/packages/behandling-tilbakekreving/src/panelDefinisjoner/prosessStegPaneler/ForeldelseProsessStegPanelDef.tsx
index e2139403e4..d9593731f6 100644
--- a/packages/behandling-tilbakekreving/src/panelDefinisjoner/prosessStegPaneler/ForeldelseProsessStegPanelDef.tsx
+++ b/packages/behandling-tilbakekreving/src/panelDefinisjoner/prosessStegPaneler/ForeldelseProsessStegPanelDef.tsx
@@ -1,16 +1,14 @@
-import React from 'react';
-
-import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType';
-import navBrukerKjonn from '@fpsak-frontend/kodeverk/src/navBrukerKjonn';
-import { prosessStegCodes } from '@k9-sak-web/konstanter';
 import aksjonspunktCodesTilbakekreving from '@fpsak-frontend/kodeverk/src/aksjonspunktCodesTilbakekreving';
-import { getAlleMerknaderFraBeslutter, ProsessStegDef, ProsessStegPanelDef } from '@k9-sak-web/behandling-felles';
+import navBrukerKjonn from '@fpsak-frontend/kodeverk/src/navBrukerKjonn';
+import vilkarUtfallType from '@fpsak-frontend/kodeverk/src/vilkarUtfallType';
 import { konverterKodeverkTilKode } from '@fpsak-frontend/utils';
+import { getAlleMerknaderFraBeslutter, ProsessStegDef, ProsessStegPanelDef } from '@k9-sak-web/behandling-felles';
+import { prosessStegCodes } from '@k9-sak-web/konstanter';
 import ForeldelseProsessIndexWrapper from '../../components/ForeldelseProsessIndexWrapper';
 
 class PanelDef extends ProsessStegPanelDef {
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps, true);
     return (
       <ForeldelseProsessIndexWrapper
diff --git a/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx b/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
index 443388d353..8e3fa8ea2f 100644
--- a/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
+++ b/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
@@ -15,7 +15,7 @@ const harKunAvslåtteUttak = beregningsresultatUtbetaling => {
 
 class PanelDef extends ProsessStegPanelDef {
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps, false);
     return <TilkjentYtelseProsessIndex {...props} {...deepCopyProps} />;
   };
diff --git a/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/AlderPanelDef.tsx b/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/AlderPanelDef.tsx
index a2f72cd999..fa3c6820f9 100644
--- a/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/AlderPanelDef.tsx
+++ b/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/AlderPanelDef.tsx
@@ -1,14 +1,19 @@
 import vilkarType from '@fpsak-frontend/kodeverk/src/vilkarType';
-import { ProsessStegPanelDef, ProsessStegOverstyringPanelDef } from '@k9-sak-web/behandling-felles';
+import { ProsessStegOverstyringPanelDef, ProsessStegPanelDef } from '@k9-sak-web/behandling-felles';
+import { konverterKodeverkTilKode } from '@k9-sak-web/lib/kodeverk/konverterKodeverkTilKode.js';
 
 class AlderPanelDef extends ProsessStegPanelDef {
   overstyringDef = new ProsessStegOverstyringPanelDef(this);
 
   getId = () => 'ALDER';
 
-  getTekstKode = () => 'Inngangsvilkar.Alder';
+  getTekstKode = () => 'Alder';
 
-  getKomponent = props => this.overstyringDef.getKomponent(props);
+  getKomponent = props => {
+    const deepCopyProps = structuredClone(props);
+    konverterKodeverkTilKode(deepCopyProps, false);
+    return this.overstyringDef.getKomponent({ ...props, ...deepCopyProps, usev2Panel: true });
+  };
 
   getAksjonspunktKoder = () => [];
 
diff --git a/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/OmsorgenForPanelDef.tsx b/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/OmsorgenForPanelDef.tsx
index 0227942ae4..480d4afbab 100644
--- a/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/OmsorgenForPanelDef.tsx
+++ b/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/OmsorgenForPanelDef.tsx
@@ -1,16 +1,21 @@
 /* eslint-disable class-methods-use-this */
-import vilkarType from '@fpsak-frontend/kodeverk/src/vilkarType';
 import aksjonspunktCodes from '@fpsak-frontend/kodeverk/src/aksjonspunktCodes';
-import { ProsessStegPanelDef, ProsessStegOverstyringPanelDef } from '@k9-sak-web/behandling-felles';
+import vilkarType from '@fpsak-frontend/kodeverk/src/vilkarType';
+import { ProsessStegOverstyringPanelDef, ProsessStegPanelDef } from '@k9-sak-web/behandling-felles';
+import { konverterKodeverkTilKode } from '@k9-sak-web/lib/kodeverk/konverterKodeverkTilKode.js';
 
 class OmsorgenForPanelDef extends ProsessStegPanelDef {
   overstyringDef = new ProsessStegOverstyringPanelDef(this);
 
   getId = () => 'OMSORGENFOR';
 
-  getTekstKode = () => 'Inngangsvilkar.OmsorgenFor';
+  getTekstKode = () => 'Omsorg';
 
-  getKomponent = props => this.overstyringDef.getKomponent(props);
+  getKomponent = props => {
+    const deepCopyProps = structuredClone(props);
+    konverterKodeverkTilKode(deepCopyProps, false);
+    return this.overstyringDef.getKomponent({ ...props, ...deepCopyProps, usev2Panel: true });
+  };
 
   getAksjonspunktKoder = () => [aksjonspunktCodes.OVERSTYR_OMSORGEN_FOR];
 
diff --git a/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx b/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx
index 04605db802..26f5c87cb8 100644
--- a/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx
+++ b/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/SoknadsfristPanelDef.tsx
@@ -13,7 +13,7 @@ class SoknadsfristPanelDef extends ProsessStegPanelDef {
   getTekstKode = () => 'Søknadsfrist';
 
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps, false);
     return <SoknadsfristVilkarProsessIndex {...props} {...deepCopyProps} />;
   };
diff --git a/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/UngdomsprogramPanelDef.tsx b/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/UngdomsprogramPanelDef.tsx
index cfb52aa702..7dc3397d55 100644
--- a/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/UngdomsprogramPanelDef.tsx
+++ b/packages/behandling-ungdomsytelse/src/panelDefinisjoner/prosessStegPaneler/inngangsvilkarPaneler/UngdomsprogramPanelDef.tsx
@@ -1,14 +1,19 @@
 import vilkarType from '@fpsak-frontend/kodeverk/src/vilkarType';
 import { ProsessStegOverstyringPanelDef, ProsessStegPanelDef } from '@k9-sak-web/behandling-felles';
+import { konverterKodeverkTilKode } from '@k9-sak-web/lib/kodeverk/konverterKodeverkTilKode.js';
 
 class UngdomsprogramPanelDef extends ProsessStegPanelDef {
   overstyringDef = new ProsessStegOverstyringPanelDef(this);
 
   getId = () => 'UNGDOMSPROGRAM';
 
-  getTekstKode = () => 'Inngangsvilkar.Ungdomsprogram';
+  getTekstKode = () => 'Ungdomsprogram';
 
-  getKomponent = props => this.overstyringDef.getKomponent(props);
+  getKomponent = props => {
+    const deepCopyProps = structuredClone(props);
+    konverterKodeverkTilKode(deepCopyProps, false);
+    return this.overstyringDef.getKomponent({ ...props, ...deepCopyProps, usev2Panel: true });
+  };
 
   getAksjonspunktKoder = () => [];
 
diff --git a/packages/behandling-unntak/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx b/packages/behandling-unntak/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
index ead80b8f80..45c2efdd80 100644
--- a/packages/behandling-unntak/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
+++ b/packages/behandling-unntak/src/panelDefinisjoner/prosessStegPaneler/TilkjentYtelseProsessStegPanelDef.tsx
@@ -22,7 +22,7 @@ const harKunAvslåtteUttak = beregningsresultatUtbetaling => {
 
 class PanelDef extends ProsessStegPanelDef {
   getKomponent = props => {
-    const deepCopyProps = JSON.parse(JSON.stringify(props));
+    const deepCopyProps = structuredClone(props);
     konverterKodeverkTilKode(deepCopyProps, false);
     return <TilkjentYtelseProsessIndex {...props} {...deepCopyProps} />;
   };
diff --git a/packages/prosess-vilkar-overstyring/src/components-periodisert/OverstyrBekreftKnappPanel.spec.tsx b/packages/prosess-vilkar-overstyring/src/components-periodisert/OverstyrBekreftKnappPanel.spec.tsx
deleted file mode 100644
index cb58fc893e..0000000000
--- a/packages/prosess-vilkar-overstyring/src/components-periodisert/OverstyrBekreftKnappPanel.spec.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { renderWithIntl } from '@fpsak-frontend/utils-test/test-utils';
-import { screen } from '@testing-library/react';
-import React from 'react';
-import messages from '../../i18n/nb_NO.json';
-import OverstyrBekreftKnappPanel from './OverstyrBekreftKnappPanel';
-
-describe('<OverstyrBekreftKnappPanel>', () => {
-  it('skal rendre submit-knapp når en ikke er i readonly-modus', () => {
-    renderWithIntl(<OverstyrBekreftKnappPanel submitting={false} pristine={false} overrideReadOnly={false} />, {
-      messages,
-    });
-
-    expect(screen.getByRole('button', { name: 'Bekreft overstyring' })).toBeInTheDocument();
-  });
-
-  it('skal ikke vise submit-knapp når en er i readonly-modus', () => {
-    renderWithIntl(<OverstyrBekreftKnappPanel submitting={false} pristine={false} overrideReadOnly />, {
-      messages,
-    });
-    expect(screen.queryByRole('button', { name: 'Bekreft overstyring' })).not.toBeInTheDocument();
-  });
-});
diff --git a/packages/prosess-vilkar-overstyring/src/components-periodisert/OverstyrBekreftKnappPanel.tsx b/packages/prosess-vilkar-overstyring/src/components-periodisert/OverstyrBekreftKnappPanel.tsx
deleted file mode 100644
index c5225d1dca..0000000000
--- a/packages/prosess-vilkar-overstyring/src/components-periodisert/OverstyrBekreftKnappPanel.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Button } from '@navikt/ds-react';
-
-interface OwnProps {
-  submitting: boolean;
-  pristine: boolean;
-  overrideReadOnly: boolean;
-}
-
-const OverstyrBekreftKnappPanel = ({ submitting, pristine, overrideReadOnly }: OwnProps) => {
-  if (overrideReadOnly) {
-    return null;
-  }
-  return (
-    <Button variant="primary" size="small" loading={submitting} disabled={submitting || pristine}>
-      Bekreft overstyring
-    </Button>
-  );
-};
-
-export default OverstyrBekreftKnappPanel;
diff --git a/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.tsx b/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.tsx
index 7422a83340..9954104f7a 100644
--- a/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.tsx
+++ b/packages/prosess-vilkar-overstyring/src/components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.tsx
@@ -10,6 +10,7 @@ import {
   Image,
   VerticalSpacer,
 } from '@fpsak-frontend/shared-components';
+import OverstyrBekreftKnappPanel from '@k9-sak-web/gui/shared/overstyrBekreftKnappPanel/OverstyrBekreftKnappPanel.js';
 import { DDMMYYYY_DATE_FORMAT } from '@k9-sak-web/lib/dateUtils/formats.js';
 import { VilkarResultPickerPeriodisertRHF } from '@k9-sak-web/prosess-felles';
 import { Aksjonspunkt, Kodeverk, KodeverkMedNavn, SubmitCallback } from '@k9-sak-web/types';
@@ -21,7 +22,6 @@ import { FunctionComponent, SetStateAction, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { FormattedMessage } from 'react-intl';
 import { VilkarresultatMedOverstyringFormState } from './FormState';
-import OverstyrBekreftKnappPanel from './OverstyrBekreftKnappPanel';
 import { VilkarresultatMedBegrunnelse } from './VilkarresultatMedBegrunnelse';
 import styles from './vilkarresultatMedOverstyringFormPeriodisert.module.css';
 
diff --git a/packages/prosess-vilkar-overstyring/src/components/OverstyrBekreftKnappPanel.spec.tsx b/packages/prosess-vilkar-overstyring/src/components/OverstyrBekreftKnappPanel.spec.tsx
deleted file mode 100644
index b76a985805..0000000000
--- a/packages/prosess-vilkar-overstyring/src/components/OverstyrBekreftKnappPanel.spec.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { renderWithIntl } from '@fpsak-frontend/utils-test/test-utils';
-import { screen } from '@testing-library/react';
-import React from 'react';
-import OverstyrBekreftKnappPanel from './OverstyrBekreftKnappPanel';
-
-describe('<OverstyrBekreftKnappPanel>', () => {
-  it('skal rendre submit-knapp når en ikke er i readonly-modus', () => {
-    renderWithIntl(<OverstyrBekreftKnappPanel submitting={false} pristine={false} overrideReadOnly={false} />);
-
-    expect(screen.getByRole('button')).toBeInTheDocument();
-    expect(screen.getByRole('button')).not.toBeDisabled();
-  });
-
-  it('skal ikke vise submit-knapp når en er i readonly-modus', () => {
-    renderWithIntl(<OverstyrBekreftKnappPanel submitting={false} pristine={false} overrideReadOnly />);
-    expect(screen.queryByRole('button')).not.toBeInTheDocument();
-  });
-});
diff --git a/packages/prosess-vilkar-overstyring/src/components/OverstyrBekreftKnappPanel.tsx b/packages/prosess-vilkar-overstyring/src/components/OverstyrBekreftKnappPanel.tsx
deleted file mode 100644
index fad86d34eb..0000000000
--- a/packages/prosess-vilkar-overstyring/src/components/OverstyrBekreftKnappPanel.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Button } from '@navikt/ds-react';
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-interface OwnProps {
-  submitting: boolean;
-  pristine: boolean;
-  overrideReadOnly: boolean;
-}
-
-const OverstyrBekreftKnappPanel = ({ submitting, pristine, overrideReadOnly }: OwnProps) => {
-  if (overrideReadOnly) {
-    return null;
-  }
-  return (
-    <Button variant="primary" size="small" loading={submitting} disabled={submitting || pristine}>
-      <FormattedMessage id="OverstyrBekreftKnappPanel.ConfirmInformation" />
-    </Button>
-  );
-};
-
-export default OverstyrBekreftKnappPanel;
diff --git a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringForm.tsx b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringForm.tsx
index 368ad9f09e..09b6b16db2 100644
--- a/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringForm.tsx
+++ b/packages/prosess-vilkar-overstyring/src/components/VilkarresultatMedOverstyringForm.tsx
@@ -10,6 +10,7 @@ import {
   Image,
   VerticalSpacer,
 } from '@fpsak-frontend/shared-components';
+import OverstyrBekreftKnappPanel from '@k9-sak-web/gui/shared/overstyrBekreftKnappPanel/OverstyrBekreftKnappPanel.js';
 import { DDMMYYYY_DATE_FORMAT } from '@k9-sak-web/lib/dateUtils/formats.js';
 import { VilkarResultPickerRHF } from '@k9-sak-web/prosess-felles';
 import { Aksjonspunkt, Kodeverk, KodeverkMedNavn, SubmitCallback } from '@k9-sak-web/types';
@@ -21,7 +22,6 @@ import { SetStateAction, useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import { FormattedMessage } from 'react-intl';
 import { VilkarresultatMedOverstyringFormState } from './FormState';
-import OverstyrBekreftKnappPanel from './OverstyrBekreftKnappPanel';
 import VilkarresultatMedBegrunnelse from './VilkarresultatMedBegrunnelse';
 import styles from './vilkarresultatMedOverstyringForm.module.css';
 
diff --git a/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarForm.tsx b/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarForm.tsx
index 979eaa949f..8060c4599e 100644
--- a/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarForm.tsx
+++ b/packages/prosess-vilkar-soknadsfrist-v2/src/components/SoknadsfristVilkarForm.tsx
@@ -14,11 +14,11 @@ import { useForm } from 'react-hook-form';
 
 import aksjonspunktType from '@fpsak-frontend/kodeverk/src/aksjonspunktType';
 import { aksjonspunktStatus } from '@k9-sak-web/backend/k9sak/kodeverk/AksjonspunktStatus.js';
+import OverstyrBekreftKnappPanel from '@k9-sak-web/gui/shared/overstyrBekreftKnappPanel/OverstyrBekreftKnappPanel.js';
 import { initializeDate } from '@k9-sak-web/lib/dateUtils/initializeDate.js';
 import { VilkårPeriodeDto } from '@navikt/k9-sak-typescript-client';
 import { utledInnsendtSoknadsfrist } from '../utils';
 import { FormState } from './FormState';
-import OverstyrBekreftKnappPanel from './OverstyrBekreftKnappPanel';
 import SoknadsfristVilkarDokument, { DELVIS_OPPFYLT } from './SoknadsfristVilkarDokument';
 import styles from './SoknadsfristVilkarForm.module.css';
 
diff --git a/packages/prosess-vilkar-soknadsfrist/src/components/OverstyrBekreftKnappPanel.spec.tsx b/packages/prosess-vilkar-soknadsfrist/src/components/OverstyrBekreftKnappPanel.spec.tsx
deleted file mode 100644
index 3af8dd39da..0000000000
--- a/packages/prosess-vilkar-soknadsfrist/src/components/OverstyrBekreftKnappPanel.spec.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { renderWithIntl } from '@fpsak-frontend/utils-test/test-utils';
-import { screen } from '@testing-library/react';
-import React from 'react';
-import messages from '../../i18n/nb_NO.json';
-import OverstyrBekreftKnappPanel from './OverstyrBekreftKnappPanel';
-
-describe('<OverstyrBekreftKnappPanel>', () => {
-  it('skal rendre submit-knapp når en ikke er i readonly-modus', () => {
-    renderWithIntl(<OverstyrBekreftKnappPanel submitting={false} pristine={false} overrideReadOnly={false} />, {
-      messages,
-    });
-
-    expect(screen.getByRole('button', { name: 'Bekreft overstyring' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Bekreft overstyring' })).not.toBeDisabled();
-  });
-
-  it('skal ikke vise submit-knapp når en er i readonly-modus', () => {
-    renderWithIntl(<OverstyrBekreftKnappPanel submitting={false} pristine={false} overrideReadOnly />, { messages });
-
-    expect(screen.queryByRole('button', { name: 'Bekreft overstyring' })).not.toBeInTheDocument();
-  });
-});
diff --git a/packages/prosess-vilkar-soknadsfrist/src/components/OverstyrBekreftKnappPanel.tsx b/packages/prosess-vilkar-soknadsfrist/src/components/OverstyrBekreftKnappPanel.tsx
deleted file mode 100644
index 46a9ead264..0000000000
--- a/packages/prosess-vilkar-soknadsfrist/src/components/OverstyrBekreftKnappPanel.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Button } from '@navikt/ds-react';
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-interface OwnProps {
-  disabled?: boolean;
-  submitting: boolean;
-  pristine: boolean;
-  overrideReadOnly: boolean;
-}
-
-const OverstyrBekreftKnappPanel = ({ disabled = false, submitting, pristine, overrideReadOnly }: OwnProps) => {
-  if (overrideReadOnly) {
-    return null;
-  }
-  return (
-    <Button variant="primary" size="small" loading={submitting} disabled={disabled || submitting || pristine}>
-      <FormattedMessage id="OverstyrBekreftKnappPanel.ConfirmInformation" />
-    </Button>
-  );
-};
-
-export default OverstyrBekreftKnappPanel;
diff --git a/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarForm.tsx b/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarForm.tsx
index 1084e7353e..8c26589a99 100644
--- a/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarForm.tsx
+++ b/packages/prosess-vilkar-soknadsfrist/src/components/SoknadsfristVilkarForm.tsx
@@ -14,6 +14,7 @@ import {
   VerticalSpacer,
 } from '@fpsak-frontend/shared-components';
 import { decodeHtmlEntity } from '@fpsak-frontend/utils';
+import OverstyrBekreftKnappPanel from '@k9-sak-web/gui/shared/overstyrBekreftKnappPanel/OverstyrBekreftKnappPanel.js';
 import { Aksjonspunkt, DokumentStatus, SubmitCallback } from '@k9-sak-web/types';
 import Vilkarperiode from '@k9-sak-web/types/src/vilkarperiode';
 import { BodyShort, Button, Label } from '@navikt/ds-react';
@@ -25,7 +26,6 @@ import { connect } from 'react-redux';
 import { InjectedFormProps } from 'redux-form';
 import { createSelector } from 'reselect';
 import { utledInnsendtSoknadsfrist } from '../utils';
-import OverstyrBekreftKnappPanel from './OverstyrBekreftKnappPanel';
 import SoknadsfristVilkarDokument, { DELVIS_OPPFYLT } from './SoknadsfristVilkarDokument';
 import styles from './SoknadsfristVilkarForm.module.css';
 
diff --git a/packages/sak-meny-ny-behandling/src/components/NyBehandlingModal.tsx b/packages/sak-meny-ny-behandling/src/components/NyBehandlingModal.tsx
index 2c2451b693..8aa9d3692b 100644
--- a/packages/sak-meny-ny-behandling/src/components/NyBehandlingModal.tsx
+++ b/packages/sak-meny-ny-behandling/src/components/NyBehandlingModal.tsx
@@ -108,8 +108,7 @@ export const NyBehandlingModal = ({
   }, []);
   const erFørstegangsbehandling = valgtBehandlingTypeKode === bType.FORSTEGANGSSOKNAD;
   const erRevurdering = valgtBehandlingTypeKode === bType.REVURDERING;
-  const visÅrsak =
-    (erRevurdering && steg === 'inngangsvilkår') || (!erRevurdering && behandlingArsakTyper.length > 0);
+  const visÅrsak = (erRevurdering && steg === 'inngangsvilkår') || (!erRevurdering && behandlingArsakTyper.length > 0);
   return (
     <Modal
       className={styles.modal}
diff --git a/packages/v2/backend/src/k9sak/kodeverk/AksjonspunktCodes.ts b/packages/v2/backend/src/k9sak/kodeverk/AksjonspunktCodes.ts
new file mode 100644
index 0000000000..9cf0cd9d7e
--- /dev/null
+++ b/packages/v2/backend/src/k9sak/kodeverk/AksjonspunktCodes.ts
@@ -0,0 +1,3 @@
+import { type definisjon as generatedAksjonspunktCodeEnumUnion } from '../generated';
+
+export type AksjonspunktCodes = generatedAksjonspunktCodeEnumUnion;
diff --git "a/packages/v2/backend/src/k9sak/kodeverk/behandling/Vilk\303\245rStatus.ts" "b/packages/v2/backend/src/k9sak/kodeverk/behandling/Vilk\303\245rStatus.ts"
index 9085472554..72d93bc75c 100644
--- "a/packages/v2/backend/src/k9sak/kodeverk/behandling/Vilk\303\245rStatus.ts"
+++ "b/packages/v2/backend/src/k9sak/kodeverk/behandling/Vilk\303\245rStatus.ts"
@@ -1,14 +1,11 @@
-import type { VilkårDto } from '@navikt/k9-sak-typescript-client';
 import type { Kodeverk } from '../../../shared/Kodeverk.ts';
+import {
+  type vilkarStatus as generatedVilkarStatusEnumUnion,
+  vilkarStatus as generatedVilkarStatusType,
+} from '../../generated';
 
-export type VilkårStatus = Exclude<VilkårDto['vilkarStatus'], undefined>;
+export type VilkårStatus = generatedVilkarStatusEnumUnion;
 
 export type VilkårStatusKodeverk = Kodeverk<VilkårStatus, 'VILKAR_STATUS'>;
 
-export const vilkårStatus: Readonly<Record<VilkårStatus, VilkårStatus>> = {
-  OPPFYLT: 'OPPFYLT',
-  IKKE_OPPFYLT: 'IKKE_OPPFYLT',
-  IKKE_VURDERT: 'IKKE_VURDERT',
-  IKKE_RELEVANT: 'IKKE_RELEVANT',
-  UDEFINERT: 'UDEFINERT',
-};
+export const vilkårStatus = generatedVilkarStatusType;
diff --git "a/packages/v2/backend/src/k9sak/kodeverk/behandling/Vilk\303\245rStatusPeriodisert.ts" "b/packages/v2/backend/src/k9sak/kodeverk/behandling/Vilk\303\245rStatusPeriodisert.ts"
new file mode 100644
index 0000000000..c2be3f6386
--- /dev/null
+++ "b/packages/v2/backend/src/k9sak/kodeverk/behandling/Vilk\303\245rStatusPeriodisert.ts"
@@ -0,0 +1,7 @@
+import { vilkårStatus } from './VilkårStatus';
+
+export const vilkårStatusPeriodisert = {
+  ...vilkårStatus,
+  DELVIS_IKKE_OPPFYLT: 'DELVIS_IKKE_OPPFYLT',
+  DELVIS_OPPFYLT: 'DELVIS_OPPFYLT',
+};
diff --git "a/packages/v2/backend/src/k9sak/kodeverk/behandling/Vilk\303\245rType.ts" "b/packages/v2/backend/src/k9sak/kodeverk/behandling/Vilk\303\245rType.ts"
index a6412e1185..e7d36b0a63 100644
--- "a/packages/v2/backend/src/k9sak/kodeverk/behandling/Vilk\303\245rType.ts"
+++ "b/packages/v2/backend/src/k9sak/kodeverk/behandling/Vilk\303\245rType.ts"
@@ -1,42 +1,24 @@
-type VilkarTypeName =
-  | 'OMSORGENFORVILKARET'
-  | 'MEDLEMSKAPSVILKARET'
-  | 'MEDISINSKEVILKÅR_UNDER_18_ÅR'
-  | 'MEDISINSKEVILKÅR_18_ÅR'
-  | 'ALDERSVILKARET'
-  | 'SOKNADSFRISTVILKARET'
-  | 'OPPTJENINGSVILKARET'
-  | 'SOKERSOPPLYSNINGSPLIKT'
-  | 'BEREGNINGSGRUNNLAGVILKARET'
-  | 'UNNTAKSVILKARET'
-  | 'UTVIDETRETTVILKARET'
-  | 'OMP_OMSORGENFORVILKARET'
-  | 'PLEIEPENGER_LIVETS_SLUTTFASE'
-  | 'ALDERSVILKAR_BARN'
-  | 'LANGVARIG_SYKDOM'
-  | 'NØDVENDIG_OPPLÆRING'
-  | 'GODKJENT_OPPLÆRINGSINSTITUSJON'
-  | 'GJENNOMGÅ_OPPLÆRING'
-  | 'UNGDOMSPROGRAMVILKARET';
+import { vilkarType as GeneratedVilkarType } from '../../generated';
 
-export const vilkarType: Readonly<Record<VilkarTypeName, string>> = {
-  OMSORGENFORVILKARET: 'K9_VK_1',
-  MEDLEMSKAPSVILKARET: 'FP_VK_2',
-  MEDISINSKEVILKÅR_UNDER_18_ÅR: 'K9_VK_2_a',
-  MEDISINSKEVILKÅR_18_ÅR: 'K9_VK_2_b',
-  ALDERSVILKARET: 'K9_VK_3',
-  SOKNADSFRISTVILKARET: 'FP_VK_3',
-  OPPTJENINGSVILKARET: 'FP_VK_23',
-  SOKERSOPPLYSNINGSPLIKT: 'FP_VK_34',
-  BEREGNINGSGRUNNLAGVILKARET: 'FP_VK_41',
-  UNNTAKSVILKARET: 'K9_VILKÅRET',
-  UTVIDETRETTVILKARET: 'K9_VK_9_6',
-  OMP_OMSORGENFORVILKARET: 'K9_VK_1',
-  PLEIEPENGER_LIVETS_SLUTTFASE: 'K9_VK_16',
-  ALDERSVILKAR_BARN: 'K9_VK_5_3',
+export const vilkarType: Readonly<Record<GeneratedVilkarType, string>> = {
+  ALDERSVILKÅR_BARN: 'K9_VK_5_3',
+  ALDERSVILKÅR: 'K9_VK_3',
+  BEREGNINGSGRUNNLAGVILKÅR: 'FP_VK_41',
+  GJENNOMGÅ_OPPLÆRING: 'K9_VK_22',
+  GODKJENT_OPPLÆRINGSINSTITUSJON: 'K9_VK_21',
+  I_LIVETS_SLUTTFASE: 'K9_VK_16',
+  K9_VILKÅRET: 'K9_VILKÅRET',
   LANGVARIG_SYKDOM: 'K9_VK_17',
+  MEDISINSKEVILKÅR_18_ÅR: 'K9_VK_2_b',
+  MEDISINSKEVILKÅR_UNDER_18_ÅR: 'K9_VK_2_a',
+  MEDLEMSKAPSVILKÅRET: 'FP_VK_2',
   NØDVENDIG_OPPLÆRING: 'K9_VK_20',
-  GODKJENT_OPPLÆRINGSINSTITUSJON: 'K9_VK_21',
-  GJENNOMGÅ_OPPLÆRING: 'K9_VK_22',
-  UNGDOMSPROGRAMVILKARET: 'UNG_VK_XXX',
+  OMSORGEN_FOR: 'K9_VK_1',
+  OPPTJENINGSPERIODEVILKÅR: 'FP_VK_21',
+  OPPTJENINGSVILKÅRET: 'FP_VK_23',
+  SØKERSOPPLYSNINGSPLIKT: 'FP_VK_34',
+  SØKNADSFRIST: 'FP_VK_3',
+  UDEFINERT: '-',
+  UNGDOMSPROGRAMVILKÅRET: 'UNG_VK_XXX',
+  UTVIDETRETT: 'K9_VK_9_6',
 };
diff --git a/packages/v2/gui/src/prosess/vilkar-overstyring/VilkarresultatMedOverstyringProsessIndex.stories.tsx b/packages/v2/gui/src/prosess/vilkar-overstyring/VilkarresultatMedOverstyringProsessIndex.stories.tsx
new file mode 100644
index 0000000000..38de63c0df
--- /dev/null
+++ b/packages/v2/gui/src/prosess/vilkar-overstyring/VilkarresultatMedOverstyringProsessIndex.stories.tsx
@@ -0,0 +1,229 @@
+import { behandlingStatus, merknad, sakstype, vilkarType } from '@k9-sak-web/backend/k9sak/generated';
+import { aksjonspunktkodeDefinisjonType } from '@k9-sak-web/backend/k9sak/kodeverk/AksjonspunktkodeDefinisjon.js';
+import { aksjonspunktStatus } from '@k9-sak-web/backend/k9sak/kodeverk/AksjonspunktStatus.js';
+import { behandlingType } from '@k9-sak-web/backend/k9sak/kodeverk/behandling/BehandlingType.js';
+import { vilkårStatus } from '@k9-sak-web/backend/k9sak/kodeverk/behandling/VilkårStatus.js';
+import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect } from '@storybook/test';
+import React from 'react';
+import VilkarresultatMedOverstyringProsessIndex, {
+  type VilkarresultatMedOverstyringProsessIndexProps,
+} from './VilkarresultatMedOverstyringProsessIndex';
+
+const vilkarOpptjening = [
+  {
+    vilkarType: vilkarType.OPPTJENINGSVILKÅRET,
+    overstyrbar: true,
+    perioder: [
+      {
+        vilkarStatus: vilkårStatus.OPPFYLT,
+        merknad: merknad['VM_7847_B'],
+        periode: {
+          fom: '2020-01-30',
+          tom: '2020-02-29',
+        },
+      },
+      {
+        vilkarStatus: vilkårStatus.OPPFYLT,
+        merknad: merknad['UDEFINERT'],
+        periode: {
+          fom: '2020-03-01',
+          tom: '2020-03-31',
+        },
+      },
+    ],
+  },
+];
+
+const vilkarMedlemskap = [
+  {
+    vilkarType: vilkarType.MEDLEMSKAPSVILKÅRET,
+    overstyrbar: true,
+    perioder: [
+      {
+        vilkarStatus: vilkårStatus.OPPFYLT,
+        periode: {
+          fom: '2020-01-30',
+          tom: '2020-02-29',
+        },
+      },
+    ],
+  },
+];
+
+const meta = {
+  title: 'gui/prosess/prosess-vilkar-overstyring/VilkarresultatMedOverstyringProsessIndex.tsx',
+  component: VilkarresultatMedOverstyringProsessIndex,
+} satisfies Meta<typeof VilkarresultatMedOverstyringProsessIndex>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const behandling = {
+  id: 1,
+  versjon: 1,
+  type: behandlingType.FØRSTEGANGSSØKNAD,
+  opprettet: '2020-01-01',
+  sakstype: sakstype['_'],
+  status: behandlingStatus['OPPRE'],
+  uuid: 'testUuid',
+};
+
+const defaultArgs = {
+  behandling,
+  medlemskap: {
+    fom: '2019-01-01',
+  },
+  aksjonspunkter: [],
+  submitCallback: action('button-click'),
+  lovReferanse: '§§ Dette er en lovreferanse',
+  visPeriodisering: true,
+  overrideReadOnly: false,
+  kanOverstyreAccess: {
+    isEnabled: true,
+  },
+  featureToggles: {},
+  erOverstyrt: false,
+  toggleOverstyring: action('button-click'),
+  visAllePerioder: true,
+};
+
+export const VisOverstyringspanelForOpptjening: Story = {
+  args: {
+    ...defaultArgs,
+    panelTittelKode: 'Opptjening',
+    overstyringApKode: aksjonspunktkodeDefinisjonType.OVERSTYRING_AV_OPPTJENINGSVILKARET,
+    vilkar: vilkarOpptjening,
+    erMedlemskapsPanel: false,
+  },
+  play: async ({ canvas, step }) => {
+    await step('Vis tabs med valgbare perioder', async () => {
+      expect(canvas.getByText('Perioder')).toBeInTheDocument();
+      expect(canvas.getByRole('button', { name: '30.01.2020 - 29.02.2020' })).toBeInTheDocument();
+    });
+    await step('Ikke vis submit-knapp når en er i readonly-modus', async () => {
+      expect(canvas.queryByRole('button', { name: 'Bekreft overstyring' })).not.toBeInTheDocument();
+    });
+  },
+  render: (args: VilkarresultatMedOverstyringProsessIndexProps) => {
+    const [erOverstyrt, toggleOverstyring] = React.useState(false);
+    return (
+      <VilkarresultatMedOverstyringProsessIndex
+        {...args}
+        erOverstyrt={erOverstyrt}
+        toggleOverstyring={() => toggleOverstyring(!erOverstyrt)}
+      />
+    );
+  },
+};
+
+export const VisOverstyringspanelForMedlemskap: Story = {
+  args: {
+    ...defaultArgs,
+    panelTittelKode: 'Medlemskap',
+    overstyringApKode: aksjonspunktkodeDefinisjonType.OVERSTYR_MEDLEMSKAPSVILKAR,
+    vilkar: vilkarMedlemskap,
+    erMedlemskapsPanel: true,
+    lovReferanse: 'lovreferanse',
+  },
+  play: async ({ canvas, step }) => {
+    await step('Vis overskrift og lovparagraf', async () => {
+      expect(canvas.getByRole('heading', { name: 'Medlemskap' })).toBeInTheDocument();
+      expect(canvas.getByText('lovreferanse')).toBeInTheDocument();
+    });
+  },
+  render: (args: VilkarresultatMedOverstyringProsessIndexProps) => {
+    const [erOverstyrt, toggleOverstyring] = React.useState(false);
+    return (
+      <VilkarresultatMedOverstyringProsessIndex
+        {...args}
+        erOverstyrt={erOverstyrt}
+        toggleOverstyring={() => toggleOverstyring(!erOverstyrt)}
+      />
+    );
+  },
+};
+
+export const VisOverstyrtAksjonspunktSomErBekreftet: Story = {
+  args: {
+    ...defaultArgs,
+    aksjonspunkter: [
+      {
+        definisjon: aksjonspunktkodeDefinisjonType.OVERSTYRING_AV_OPPTJENINGSVILKARET,
+        status: aksjonspunktStatus.UTFORT,
+        kanLoses: false,
+        begrunnelse: 'Dette er en begrunnelse',
+      },
+    ],
+    panelTittelKode: 'Opptjening',
+    overstyringApKode: aksjonspunktkodeDefinisjonType.OVERSTYRING_AV_OPPTJENINGSVILKARET,
+    vilkar: vilkarOpptjening,
+    erMedlemskapsPanel: false,
+  },
+  render: (args: VilkarresultatMedOverstyringProsessIndexProps) => {
+    const [erOverstyrt, toggleOverstyring] = React.useState(false);
+    return (
+      <VilkarresultatMedOverstyringProsessIndex
+        {...args}
+        erOverstyrt={erOverstyrt}
+        toggleOverstyring={() => toggleOverstyring(!erOverstyrt)}
+      />
+    );
+  },
+};
+
+export const VisOverstyrtAksjonspunktSomIkkeErBekreftet: Story = {
+  args: {
+    ...defaultArgs,
+    aksjonspunkter: [
+      {
+        definisjon: aksjonspunktkodeDefinisjonType.OVERSTYRING_AV_OPPTJENINGSVILKARET,
+        status: aksjonspunktStatus.OPPRETTET,
+        kanLoses: true,
+        begrunnelse: '',
+      },
+    ],
+    panelTittelKode: 'Opptjening',
+    overstyringApKode: aksjonspunktkodeDefinisjonType.OVERSTYRING_AV_OPPTJENINGSVILKARET,
+    vilkar: [
+      {
+        vilkarType: vilkarType.OPPTJENINGSVILKÅRET,
+        overstyrbar: true,
+        perioder: [
+          {
+            vilkarStatus: vilkårStatus.IKKE_VURDERT,
+            merknad: merknad['VM_7847_B'],
+            periode: {
+              fom: '2020-01-30',
+              tom: '2020-02-29',
+            },
+            vurderesIBehandlingen: true,
+          },
+        ],
+      },
+    ],
+    erMedlemskapsPanel: false,
+    erOverstyrt: true,
+    featureToggles: { OMSORGEN_FOR_PERIODISERT: true },
+    visAllePerioder: false,
+  },
+  play: async ({ canvas, step }) => {
+    await step('Vis skjema ved overstyring', async () => {
+      expect(canvas.getByText('Manuell overstyring av automatisk vurdering')).toBeInTheDocument();
+      expect(canvas.getByTestId('overstyringform')).toBeInTheDocument();
+      expect(canvas.getByRole('button', { name: 'Bekreft overstyring' })).toBeInTheDocument();
+    });
+  },
+  render: (args: VilkarresultatMedOverstyringProsessIndexProps) => {
+    const [erOverstyrt, toggleOverstyring] = React.useState(true);
+    return (
+      <VilkarresultatMedOverstyringProsessIndex
+        {...args}
+        erOverstyrt={erOverstyrt}
+        toggleOverstyring={() => toggleOverstyring(!erOverstyrt)}
+      />
+    );
+  },
+};
diff --git a/packages/v2/gui/src/prosess/vilkar-overstyring/VilkarresultatMedOverstyringProsessIndex.tsx b/packages/v2/gui/src/prosess/vilkar-overstyring/VilkarresultatMedOverstyringProsessIndex.tsx
new file mode 100644
index 0000000000..9989c6fd9c
--- /dev/null
+++ b/packages/v2/gui/src/prosess/vilkar-overstyring/VilkarresultatMedOverstyringProsessIndex.tsx
@@ -0,0 +1,171 @@
+import type {
+  AksjonspunktDto,
+  BehandlingDto,
+  VilkårMedPerioderDto,
+  VilkårPeriodeDto,
+} from '@k9-sak-web/backend/k9sak/generated';
+import { vilkårStatus } from '@k9-sak-web/backend/k9sak/kodeverk/behandling/VilkårStatus.js';
+import { dateStringSorter, formatDate } from '@k9-sak-web/lib/dateUtils/dateUtils.js';
+import type { FeatureToggles } from '@k9-sak-web/lib/kodeverk/types/FeatureTogglesType.js';
+import { SideMenu } from '@navikt/ft-plattform-komponenter';
+import { useEffect, useState, type SetStateAction } from 'react';
+import VilkarresultatMedOverstyringFormPeriodisert from './components-periodisert/VilkarresultatMedOverstyringFormPeriodisert';
+import VilkarresultatMedOverstyringForm from './components/VilkarresultatMedOverstyringForm';
+import VilkarresultatMedOverstyringHeader from './components/VilkarresultatMedOverstyringHeader';
+import styles from './vilkarresultatMedOverstyringProsessIndex.module.css';
+
+const hentAktivePerioderFraVilkar = (vilkar: VilkårMedPerioderDto[], visAllePerioder: boolean): VilkårPeriodeDto[] => {
+  const [activeVilkår] = vilkar;
+
+  if (!activeVilkår?.perioder) {
+    return [];
+  }
+
+  return activeVilkår.perioder
+    .filter(
+      periode =>
+        (visAllePerioder && !periode.vurderesIBehandlingen) || (periode.vurderesIBehandlingen && !visAllePerioder),
+    )
+    .sort((a, b) => (a.periode.fom && b.periode.fom ? dateStringSorter(a.periode.fom, b.periode.fom) : 0))
+    .reverse();
+};
+
+export interface VilkarresultatMedOverstyringProsessIndexProps {
+  behandling: BehandlingDto;
+  medlemskap?: {
+    fom: string;
+  };
+  aksjonspunkter: AksjonspunktDto[];
+  submitCallback: (props: any[]) => void;
+  overrideReadOnly: boolean;
+  kanOverstyreAccess: {
+    isEnabled: boolean;
+  };
+  toggleOverstyring: (overstyrtPanel: SetStateAction<string[]>) => void;
+  lovReferanse?: string;
+  erOverstyrt: boolean;
+  /** Skal være den faktiske teksten og ikke en id til react-intl */
+  panelTittelKode: string;
+  overstyringApKode: string;
+  erMedlemskapsPanel: boolean;
+  visPeriodisering: boolean;
+  vilkar: VilkårMedPerioderDto[];
+  visAllePerioder: boolean;
+  featureToggles: FeatureToggles;
+}
+
+export const VilkarresultatMedOverstyringProsessIndex = ({
+  behandling,
+  medlemskap = { fom: '' },
+  aksjonspunkter,
+  submitCallback,
+  overrideReadOnly,
+  kanOverstyreAccess,
+  toggleOverstyring,
+  erOverstyrt,
+  panelTittelKode,
+  overstyringApKode,
+  lovReferanse = '',
+  erMedlemskapsPanel,
+  visPeriodisering,
+  vilkar,
+  visAllePerioder,
+  featureToggles,
+}: VilkarresultatMedOverstyringProsessIndexProps) => {
+  const [activeTab, setActiveTab] = useState(0);
+
+  const [activeVilkår] = vilkar;
+  const perioder = hentAktivePerioderFraVilkar(vilkar, visAllePerioder);
+
+  useEffect(() => {
+    if (!visAllePerioder && activeTab >= perioder.length) {
+      setActiveTab(0);
+    }
+  }, [activeTab, visAllePerioder]);
+
+  useEffect(() => {
+    if (perioder.length > 1) {
+      const førsteIkkeVurdertPeriodeIndex = perioder.findIndex(
+        periode => periode.vurderesIBehandlingen && periode.vilkarStatus === vilkårStatus.IKKE_VURDERT,
+      );
+      if (førsteIkkeVurdertPeriodeIndex > 0) {
+        setActiveTab(førsteIkkeVurdertPeriodeIndex);
+      }
+    }
+  }, []);
+
+  const activePeriode = perioder.length === 1 ? perioder[0] : perioder[activeTab];
+
+  if (!activePeriode || !activeVilkår) {
+    return null;
+  }
+
+  return (
+    <div className={styles.mainContainerWithSideMenu}>
+      <div className={styles.sideMenuContainer}>
+        <SideMenu
+          links={perioder.map((periode, index) => ({
+            active: activeTab === index,
+            label: `${periode.periode.fom && formatDate(periode.periode.fom)} - ${periode.periode.tom && formatDate(periode.periode.tom)}`,
+          }))}
+          onClick={setActiveTab}
+          theme="arrow"
+          heading="Perioder"
+        />
+      </div>
+      <div className={styles.contentContainer}>
+        <VilkarresultatMedOverstyringHeader
+          aksjonspunkter={aksjonspunkter}
+          erOverstyrt={erOverstyrt}
+          kanOverstyreAccess={kanOverstyreAccess}
+          lovReferanse={activeVilkår.lovReferanse ?? lovReferanse}
+          overrideReadOnly={overrideReadOnly}
+          overstyringApKode={overstyringApKode}
+          panelTittelKode={panelTittelKode}
+          periode={activePeriode}
+          toggleOverstyring={toggleOverstyring}
+        />
+        {featureToggles?.['OMSORGEN_FOR_PERIODISERT'] && (
+          <VilkarresultatMedOverstyringFormPeriodisert
+            key={`${activePeriode?.periode?.fom}-${activePeriode?.periode?.tom}`}
+            behandlingType={behandling.type}
+            medlemskapFom={medlemskap?.fom}
+            aksjonspunkter={aksjonspunkter}
+            submitCallback={submitCallback}
+            overrideReadOnly={overrideReadOnly}
+            toggleOverstyring={toggleOverstyring}
+            status={activePeriode?.vilkarStatus ?? ''}
+            erOverstyrt={erOverstyrt}
+            overstyringApKode={overstyringApKode}
+            erMedlemskapsPanel={erMedlemskapsPanel}
+            visPeriodisering={visPeriodisering}
+            avslagKode={activePeriode?.avslagKode ?? ''}
+            periode={activePeriode}
+            vilkarType={activeVilkår.vilkarType}
+          />
+        )}
+
+        {!featureToggles?.['OMSORGEN_FOR_PERIODISERT'] && (
+          <VilkarresultatMedOverstyringForm
+            key={`${activePeriode?.periode?.fom}-${activePeriode?.periode?.tom}`}
+            behandlingType={behandling.type}
+            medlemskapFom={medlemskap?.fom}
+            aksjonspunkter={aksjonspunkter}
+            submitCallback={submitCallback}
+            overrideReadOnly={overrideReadOnly}
+            toggleOverstyring={toggleOverstyring}
+            status={activePeriode.vilkarStatus}
+            erOverstyrt={erOverstyrt}
+            overstyringApKode={overstyringApKode}
+            erMedlemskapsPanel={erMedlemskapsPanel}
+            avslagKode={activePeriode.avslagKode ?? ''}
+            periode={activePeriode}
+            vilkarType={activeVilkår.vilkarType}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default VilkarresultatMedOverstyringProsessIndex;
diff --git a/packages/v2/gui/src/prosess/vilkar-overstyring/components-periodisert/FormState.ts b/packages/v2/gui/src/prosess/vilkar-overstyring/components-periodisert/FormState.ts
new file mode 100644
index 0000000000..79b195d276
--- /dev/null
+++ b/packages/v2/gui/src/prosess/vilkar-overstyring/components-periodisert/FormState.ts
@@ -0,0 +1,11 @@
+import type { VilkarResultPickerFormState } from './VilkarResultPickerPeriodisertRHF';
+
+export type VilkarBegrunnelseFormState = {
+  begrunnelse: string;
+};
+
+export type VilkarresultatMedBegrunnelseState = VilkarBegrunnelseFormState & VilkarResultPickerFormState;
+
+export type VilkarresultatMedOverstyringFormState = VilkarresultatMedBegrunnelseState & {
+  isOverstyrt: boolean;
+};
diff --git a/packages/v2/gui/src/prosess/vilkar-overstyring/components-periodisert/VilkarResultPickerPeriodisertRHF.tsx b/packages/v2/gui/src/prosess/vilkar-overstyring/components-periodisert/VilkarResultPickerPeriodisertRHF.tsx
new file mode 100644
index 0000000000..ffd7e2488d
--- /dev/null
+++ b/packages/v2/gui/src/prosess/vilkar-overstyring/components-periodisert/VilkarResultPickerPeriodisertRHF.tsx
@@ -0,0 +1,273 @@
+import type { AksjonspunktDto, VilkårPeriodeDto } from '@k9-sak-web/backend/k9sak/generated';
+import { vilkårStatusPeriodisert } from '@k9-sak-web/backend/k9sak/kodeverk/behandling/VilkårStatusPeriodisert.js';
+import { useKodeverkContext } from '@k9-sak-web/gui/kodeverk/index.js';
+import { type KodeverkMedUndertype, KodeverkType, type Periode } from '@k9-sak-web/lib/kodeverk/types.js';
+import { Alert, BodyShort, Box } from '@navikt/ds-react';
+import { Datepicker, RadioGroupPanel, SelectField } from '@navikt/ft-form-hooks';
+import { hasValidDate, required } from '@navikt/ft-form-validators';
+import { isAfter, isBefore, parse } from 'date-fns';
+import type { FunctionComponent, ReactNode } from 'react';
+import { isAksjonspunktOpen } from '../../../utils/aksjonspunktUtils';
+
+export type VilkarResultPickerFormState = {
+  erVilkarOk: string;
+  periodeVilkarStatus: boolean;
+  avslagCode?: string;
+  avslagDato?: string;
+  valgtPeriodeFom: string;
+  valgtPeriodeTom: string;
+};
+
+type TransformedValues = {
+  erVilkarOk: boolean;
+  periode: Periode | null | undefined;
+  avslagskode?: string;
+  avslagDato?: string;
+};
+
+interface OwnProps {
+  erVilkarOk?: string;
+  periodeVilkarStatus?: boolean;
+  customVilkarIkkeOppfyltText: string | ReactNode;
+  customVilkarOppfyltText: string | ReactNode;
+  readOnly: boolean;
+  erMedlemskapsPanel?: boolean;
+  visPeriodisering: boolean;
+  fieldNamePrefix?: string;
+  periodeFom: string;
+  periodeTom: string;
+  valgtPeriodeFom: string;
+  valgtPeriodeTom: string;
+  vilkarType: string;
+}
+
+interface StaticFunctions {
+  transformValues: (values: VilkarResultPickerFormState, periodeFom?: string, periodeTom?: string) => TransformedValues;
+  buildInitialValues: (
+    aksjonspunkter: AksjonspunktDto[],
+    status: string,
+    periode: VilkårPeriodeDto,
+    avslagKode?: string,
+  ) => VilkarResultPickerFormState;
+}
+
+/**
+ * VilkarResultPicker
+ *
+ * Presentasjonskomponent. Lar NAV-ansatt velge om vilkåret skal oppfylles eller avvises.
+ */
+const VilkarResultPickerPeriodisertRHF: FunctionComponent<OwnProps> & StaticFunctions = ({
+  erVilkarOk,
+  periodeVilkarStatus,
+  customVilkarIkkeOppfyltText,
+  customVilkarOppfyltText,
+  readOnly,
+  erMedlemskapsPanel = false,
+  visPeriodisering,
+  fieldNamePrefix,
+  periodeFom,
+  periodeTom,
+  valgtPeriodeFom,
+  valgtPeriodeTom,
+  vilkarType,
+}) => {
+  const { hentKodeverkForKode } = useKodeverkContext();
+  const avslagsarsaker = hentKodeverkForKode(KodeverkType.AVSLAGSARSAK) as KodeverkMedUndertype;
+  const avslagsårsakerForVilkar = avslagsarsaker[vilkarType];
+  const ugyldigeFomDatoer = () => [
+    (date: Date) => isBefore(date, parse(periodeFom, 'yyyy-MM-dd', new Date())),
+    (date: Date) => isAfter(date, parse(valgtPeriodeTom, 'yyyy-MM-dd', new Date())),
+  ];
+
+  const ugyldigeTomDatoer = () => [
+    (date: Date) => isBefore(date, parse(valgtPeriodeFom, 'yyyy-MM-dd', new Date())),
+    (date: Date) => isAfter(date, parse(periodeTom, 'yyyy-MM-dd', new Date())),
+  ];
+
+  return (
+    <Box paddingBlock={'4 0'} paddingInline={'4 0'}>
+      {readOnly && erVilkarOk !== undefined && (
+        <Alert variant={erVilkarOk === vilkårStatusPeriodisert.OPPFYLT ? 'success' : 'error'} inline>
+          {erVilkarOk === vilkårStatusPeriodisert.OPPFYLT && (
+            <BodyShort size="small">{customVilkarOppfyltText}</BodyShort>
+          )}
+          {erVilkarOk === vilkårStatusPeriodisert.IKKE_OPPFYLT && (
+            <BodyShort size="small">{customVilkarIkkeOppfyltText}</BodyShort>
+          )}
+        </Alert>
+      )}
+
+      {(!readOnly || erVilkarOk === undefined) && (
+        <RadioGroupPanel
+          name={`${fieldNamePrefix ? `${fieldNamePrefix}.` : ''}erVilkarOk`}
+          validate={[required]}
+          isReadOnly={readOnly}
+          radios={[
+            {
+              value: vilkårStatusPeriodisert.OPPFYLT,
+              label: customVilkarOppfyltText,
+            },
+            ...(visPeriodisering
+              ? [
+                  {
+                    value: periodeVilkarStatus
+                      ? vilkårStatusPeriodisert.DELVIS_IKKE_OPPFYLT
+                      : vilkårStatusPeriodisert.DELVIS_OPPFYLT,
+                    label: periodeVilkarStatus ? (
+                      <>
+                        Vilkåret er <b>delvis ikke</b> oppfylt
+                      </>
+                    ) : (
+                      'Vilkåret er delvis oppfylt'
+                    ),
+                  },
+                ]
+              : []),
+            {
+              value: vilkårStatusPeriodisert.IKKE_OPPFYLT,
+              label: customVilkarIkkeOppfyltText,
+            },
+          ]}
+        />
+      )}
+
+      {erVilkarOk !== undefined && (
+        <>
+          {erVilkarOk === vilkårStatusPeriodisert.DELVIS_IKKE_OPPFYLT && avslagsårsakerForVilkar && (
+            <SelectField
+              name={`${fieldNamePrefix ? `${fieldNamePrefix}.` : ''}avslagCode`}
+              label="Avslagsårsak"
+              selectValues={avslagsårsakerForVilkar
+                .filter((avslagsårsak): avslagsårsak is string => typeof avslagsårsak === 'string')
+                .map(avslagsårsak => (
+                  <option key={avslagsårsak} value={avslagsårsak}>
+                    {avslagsårsak}
+                  </option>
+                ))}
+              readOnly={readOnly}
+              validate={[required]}
+            />
+          )}
+          {(erVilkarOk === vilkårStatusPeriodisert.DELVIS_OPPFYLT ||
+            erVilkarOk === vilkårStatusPeriodisert.DELVIS_IKKE_OPPFYLT) && (
+            <Box marginBlock={'2 0'}>
+              <Datepicker
+                name={`${fieldNamePrefix ? `${fieldNamePrefix}.` : ''}valgtPeriodeFom`}
+                label="Fra dato"
+                isReadOnly={readOnly}
+                validate={[required, hasValidDate]}
+                disabledDays={ugyldigeFomDatoer()}
+              />
+              <Datepicker
+                name={`${fieldNamePrefix ? `${fieldNamePrefix}.` : ''}valgtPeriodeTom`}
+                label="Til dato"
+                disabledDays={ugyldigeTomDatoer()}
+                isReadOnly={readOnly}
+                validate={[required, hasValidDate]}
+              />
+            </Box>
+          )}
+
+          {erVilkarOk === vilkårStatusPeriodisert.IKKE_OPPFYLT && avslagsårsakerForVilkar && (
+            <Box marginBlock={'2 0'}>
+              <SelectField
+                name={`${fieldNamePrefix ? `${fieldNamePrefix}.` : ''}avslagCode`}
+                label="Avslagsårsak"
+                selectValues={avslagsårsakerForVilkar
+                  .filter((avslagsårsak): avslagsårsak is string => typeof avslagsårsak === 'string')
+                  .map(avslagsårsak => (
+                    <option key={avslagsårsak} value={avslagsårsak}>
+                      {avslagsårsak}
+                    </option>
+                  ))}
+                readOnly={readOnly}
+                validate={[required]}
+              />
+              {erMedlemskapsPanel && (
+                <Datepicker
+                  name={`${fieldNamePrefix ? `${fieldNamePrefix}.` : ''}avslagDato`}
+                  label="Dato"
+                  isReadOnly={readOnly}
+                  validate={[required, hasValidDate]}
+                />
+              )}
+            </Box>
+          )}
+        </>
+      )}
+    </Box>
+  );
+};
+
+VilkarResultPickerPeriodisertRHF.buildInitialValues = (
+  aksjonspunkter: AksjonspunktDto[],
+  status: string,
+  periode: VilkårPeriodeDto,
+  avslagKode?: string,
+): VilkarResultPickerFormState => {
+  const isOpenAksjonspunkt = aksjonspunkter.some(ap => ap.status && isAksjonspunktOpen(ap.status));
+  let erVilkarOk = '';
+
+  if (status === vilkårStatusPeriodisert.OPPFYLT) {
+    erVilkarOk = vilkårStatusPeriodisert.OPPFYLT;
+  } else if (status === vilkårStatusPeriodisert.IKKE_OPPFYLT) {
+    erVilkarOk = vilkårStatusPeriodisert.IKKE_OPPFYLT;
+  }
+
+  return {
+    erVilkarOk,
+    periodeVilkarStatus: !isOpenAksjonspunkt && status === vilkårStatusPeriodisert.OPPFYLT,
+    avslagCode: erVilkarOk === vilkårStatusPeriodisert.IKKE_OPPFYLT && avslagKode ? avslagKode : undefined,
+    valgtPeriodeFom: periode.periode.fom ?? '',
+    valgtPeriodeTom: periode.periode.tom ?? '',
+  };
+};
+
+VilkarResultPickerPeriodisertRHF.transformValues = (
+  values: VilkarResultPickerFormState,
+  periodeFom?: string,
+  periodeTom?: string,
+) => {
+  switch (values.erVilkarOk) {
+    case vilkårStatusPeriodisert.OPPFYLT:
+      return {
+        erVilkarOk: true,
+        periode: periodeFom && periodeTom ? { fom: periodeFom, tom: periodeTom } : undefined,
+      };
+
+    case vilkårStatusPeriodisert.DELVIS_OPPFYLT:
+      return {
+        erVilkarOk: true,
+        periode: {
+          fom: values.valgtPeriodeFom,
+          tom: values.valgtPeriodeTom,
+        },
+      };
+
+    case vilkårStatusPeriodisert.IKKE_OPPFYLT:
+      return {
+        erVilkarOk: false,
+        avslagskode: values.avslagCode,
+        avslagsDato: values.avslagDato,
+        periode: periodeFom && periodeTom ? { fom: periodeFom, tom: periodeTom } : undefined,
+      };
+
+    case vilkårStatusPeriodisert.DELVIS_IKKE_OPPFYLT:
+      return {
+        erVilkarOk: false,
+        avslagskode: values.avslagCode,
+        periode: {
+          fom: values.valgtPeriodeFom,
+          tom: values.valgtPeriodeTom,
+        },
+      };
+    default:
+      return {
+        erVilkarOk: false,
+        avslagskode: undefined,
+        periode: { fom: '', tom: '' },
+      };
+  }
+};
+
+export default VilkarResultPickerPeriodisertRHF;
diff --git a/packages/v2/gui/src/prosess/vilkar-overstyring/components-periodisert/VilkarresultatMedBegrunnelse.tsx b/packages/v2/gui/src/prosess/vilkar-overstyring/components-periodisert/VilkarresultatMedBegrunnelse.tsx
new file mode 100644
index 0000000000..365539d328
--- /dev/null
+++ b/packages/v2/gui/src/prosess/vilkar-overstyring/components-periodisert/VilkarresultatMedBegrunnelse.tsx
@@ -0,0 +1,102 @@
+import type { AksjonspunktDto, VilkårPeriodeDto } from '@k9-sak-web/backend/k9sak/generated';
+import { Box } from '@navikt/ds-react';
+import { AssessedBy } from '@navikt/ft-plattform-komponenter';
+import { type FunctionComponent } from 'react';
+import VilkarBegrunnelse from '../components/VilkarBegrunnelse';
+import { type VilkarresultatMedBegrunnelseState } from './FormState';
+import VilkarResultPickerPeriodisertRHF from './VilkarResultPickerPeriodisertRHF';
+
+interface VilkarresultatMedBegrunnelseProps {
+  erVilkarOk?: string;
+  periodeVilkarStatus?: boolean;
+  readOnly: boolean;
+  erMedlemskapsPanel: boolean;
+  visPeriodisering: boolean;
+  customVilkarIkkeOppfyltText?: string | React.ReactElement;
+  customVilkarOppfyltText?: string | React.ReactElement;
+  skalViseBegrunnelse?: boolean;
+  periodeFom: string;
+  periodeTom: string;
+  valgtPeriodeFom: string;
+  valgtPeriodeTom: string;
+  opprettetAv?: string;
+  vilkarType: string;
+}
+
+interface StaticFunctions {
+  transformValues: (values: VilkarresultatMedBegrunnelseState) => { begrunnelse: string };
+  buildInitialValues: (
+    aksjonspunkter: AksjonspunktDto[],
+    status: string,
+    periode: VilkårPeriodeDto,
+    avslagKode?: string,
+  ) => VilkarresultatMedBegrunnelseState;
+}
+
+/**
+ * VIlkarresultatMedBegrunnelse
+ *
+ * Presentasjonskomponent. Viser resultat av vilkårskjøring når det ikke finnes tilknyttede aksjonspunkter.
+ * Resultatet kan overstyres av Nav-ansatt med overstyr-rettighet.
+ */
+export const VilkarresultatMedBegrunnelse: FunctionComponent<VilkarresultatMedBegrunnelseProps> & StaticFunctions = ({
+  erVilkarOk,
+  periodeVilkarStatus,
+  readOnly,
+  erMedlemskapsPanel,
+  visPeriodisering,
+  skalViseBegrunnelse = true,
+  customVilkarIkkeOppfyltText,
+  customVilkarOppfyltText,
+  periodeFom,
+  periodeTom,
+  valgtPeriodeFom,
+  valgtPeriodeTom,
+  opprettetAv,
+  vilkarType,
+}: VilkarresultatMedBegrunnelseProps) => {
+  return (
+    <>
+      {skalViseBegrunnelse && (
+        <Box marginBlock={'0 2'}>
+          <VilkarBegrunnelse isReadOnly={readOnly} />
+          <AssessedBy ident={opprettetAv} />
+        </Box>
+      )}
+      <VilkarResultPickerPeriodisertRHF
+        customVilkarOppfyltText={customVilkarOppfyltText ?? 'Vilkåret er oppfylt'}
+        customVilkarIkkeOppfyltText={
+          customVilkarIkkeOppfyltText ?? (
+            <>
+              Vilkåret er <b>ikke</b> oppfylt
+            </>
+          )
+        }
+        erVilkarOk={erVilkarOk}
+        readOnly={readOnly}
+        erMedlemskapsPanel={erMedlemskapsPanel}
+        visPeriodisering={visPeriodisering}
+        periodeFom={periodeFom}
+        periodeTom={periodeTom}
+        valgtPeriodeFom={valgtPeriodeFom}
+        valgtPeriodeTom={valgtPeriodeTom}
+        periodeVilkarStatus={periodeVilkarStatus}
+        vilkarType={vilkarType}
+      />
+    </>
+  );
+};
+
+VilkarresultatMedBegrunnelse.buildInitialValues = (
+  aksjonspunkter: AksjonspunktDto[],
+  status: string,
+  periode: VilkårPeriodeDto,
+  avslagKode?: string,
+) => ({
+  ...VilkarResultPickerPeriodisertRHF.buildInitialValues(aksjonspunkter, status, periode, avslagKode),
+  ...VilkarBegrunnelse.buildInitialValues(periode),
+});
+
+VilkarresultatMedBegrunnelse.transformValues = (values: VilkarresultatMedBegrunnelseState) => ({
+  begrunnelse: values.begrunnelse,
+});
diff --git a/packages/v2/gui/src/prosess/vilkar-overstyring/components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.tsx b/packages/v2/gui/src/prosess/vilkar-overstyring/components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.tsx
new file mode 100644
index 0000000000..bcc28e94f9
--- /dev/null
+++ b/packages/v2/gui/src/prosess/vilkar-overstyring/components-periodisert/VilkarresultatMedOverstyringFormPeriodisert.tsx
@@ -0,0 +1,198 @@
+import type { AksjonspunktDto, VilkårPeriodeDto } from '@k9-sak-web/backend/k9sak/generated';
+import { aksjonspunktStatus } from '@k9-sak-web/backend/k9sak/kodeverk/AksjonspunktStatus.js';
+import { behandlingType as BehandlingType } from '@k9-sak-web/backend/k9sak/kodeverk/behandling/BehandlingType.js';
+import OverstyrBekreftKnappPanel from '@k9-sak-web/gui/shared/overstyrBekreftKnappPanel/OverstyrBekreftKnappPanel.js';
+import { DDMMYYYY_DATE_FORMAT } from '@k9-sak-web/lib/dateUtils/formats.js';
+import { initializeDate } from '@k9-sak-web/lib/dateUtils/initializeDate.js';
+import { Alert, BodyShort, Box, Button, HStack, Label, VStack } from '@navikt/ds-react';
+import { Form } from '@navikt/ft-form-hooks';
+import { type FunctionComponent, type SetStateAction, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { EditedIcon } from '../../../shared/EditedIcon';
+import { type VilkarresultatMedOverstyringFormState } from './FormState';
+import { VilkarresultatMedBegrunnelse } from './VilkarresultatMedBegrunnelse';
+import styles from './vilkarresultatMedOverstyringFormPeriodisert.module.css';
+import VilkarResultPickerPeriodisertRHF from './VilkarResultPickerPeriodisertRHF';
+
+interface VilkarresultatMedOverstyringFormProps {
+  aksjonspunkter: AksjonspunktDto[];
+  behandlingType: string;
+  erMedlemskapsPanel: boolean;
+  visPeriodisering: boolean;
+  erOverstyrt?: boolean;
+  medlemskapFom: string;
+  overrideReadOnly: boolean;
+  overstyringApKode: string;
+  status: string;
+  submitCallback: (props: any[]) => void;
+  toggleOverstyring: (overstyrtPanel: SetStateAction<string[]>) => void;
+  avslagKode?: string;
+  periode: VilkårPeriodeDto;
+  vilkarType: string;
+}
+
+/**
+ * VilkarresultatForm
+ *
+ * Presentasjonskomponent. Viser resultat av vilkårskjøring når det ikke finnes tilknyttede aksjonspunkter.
+ * Resultatet kan overstyres av Nav-ansatt med overstyr-rettighet.
+ */
+export const VilkarresultatMedOverstyringFormPeriodisert: FunctionComponent<VilkarresultatMedOverstyringFormProps> = ({
+  aksjonspunkter,
+  avslagKode,
+  behandlingType,
+  erMedlemskapsPanel,
+  erOverstyrt,
+  medlemskapFom,
+  overrideReadOnly,
+  overstyringApKode,
+  periode,
+  status,
+  submitCallback,
+  toggleOverstyring,
+  visPeriodisering,
+  vilkarType,
+}) => {
+  const periodeFom = periode?.periode?.fom ?? '';
+  const periodeTom = periode?.periode?.tom ?? '';
+
+  const buildInitialValues = (): VilkarresultatMedOverstyringFormState => {
+    const aksjonspunkt = aksjonspunkter.find(ap => ap.definisjon === overstyringApKode);
+    return {
+      isOverstyrt: aksjonspunkt !== undefined,
+      ...VilkarresultatMedBegrunnelse.buildInitialValues(aksjonspunkter, status, periode, avslagKode),
+    };
+  };
+  const onSubmit = (values: VilkarresultatMedOverstyringFormState) =>
+    submitCallback([transformValues(values, overstyringApKode, periodeFom, periodeTom)]);
+  const formMethods = useForm<VilkarresultatMedOverstyringFormState>({
+    defaultValues: buildInitialValues(),
+  });
+
+  const toggleAv = () => {
+    formMethods.reset(buildInitialValues());
+    toggleOverstyring(oldArray => oldArray.filter(code => code !== overstyringApKode));
+  };
+
+  useEffect(
+    () => () => {
+      formMethods.reset(buildInitialValues());
+    },
+    [periodeFom, periodeTom],
+  );
+
+  const valgtPeriodeFom = formMethods.watch('valgtPeriodeFom');
+  const valgtPeriodeTom = formMethods.watch('valgtPeriodeTom');
+  const erVilkarOk = formMethods.watch('erVilkarOk');
+  const periodeVilkarStatus = formMethods.watch('periodeVilkarStatus');
+
+  const customVilkarOppfyltText = getCustomVilkarTextForOppfylt(medlemskapFom, behandlingType);
+  const customVilkarIkkeOppfyltText = getCustomVilkarTextForIkkeOppfylt(medlemskapFom, behandlingType);
+  const overstyringAksjonspunkt = aksjonspunkter.find(ap => ap.definisjon === overstyringApKode);
+  const isSolvable =
+    erOverstyrt ||
+    (overstyringAksjonspunkt !== undefined
+      ? !(overstyringAksjonspunkt.status === aksjonspunktStatus.OPPRETTET && !overstyringAksjonspunkt.kanLoses)
+      : false);
+
+  const isReadOnly = overrideReadOnly || !periode?.vurderesIBehandlingen;
+  const hasAksjonspunkt = overstyringAksjonspunkt !== undefined;
+  const opprettetAv = overstyringAksjonspunkt?.opprettetAv ? overstyringAksjonspunkt.opprettetAv : '';
+
+  return (
+    <Form formMethods={formMethods} onSubmit={onSubmit}>
+      {(erOverstyrt || hasAksjonspunkt) && (
+        <div className={`${styles.aksjonspunktBox} ${erOverstyrt ? styles.aksjonspunktBoxOpen : ''}`}>
+          <Label data-testid="overstyringform" size="small" as="p">
+            Manuell overstyring av automatisk vurdering
+          </Label>
+          <Box marginBlock={'2 0'}>
+            <VilkarresultatMedBegrunnelse
+              skalViseBegrunnelse={erOverstyrt || hasAksjonspunkt}
+              readOnly={isReadOnly || !erOverstyrt}
+              erVilkarOk={erVilkarOk}
+              customVilkarIkkeOppfyltText={customVilkarIkkeOppfyltText}
+              customVilkarOppfyltText={customVilkarOppfyltText}
+              erMedlemskapsPanel={erMedlemskapsPanel}
+              visPeriodisering={visPeriodisering}
+              periodeFom={periodeFom}
+              periodeTom={periodeTom}
+              valgtPeriodeFom={valgtPeriodeFom}
+              valgtPeriodeTom={valgtPeriodeTom}
+              periodeVilkarStatus={periodeVilkarStatus}
+              opprettetAv={opprettetAv}
+              vilkarType={vilkarType}
+            />
+          </Box>
+          <Box marginBlock={'4 0'}>
+            {!erOverstyrt && erVilkarOk !== undefined && (
+              <Box marginBlock={'1 0'}>
+                <HStack gap="4" align="center">
+                  <EditedIcon />
+                  <BodyShort size="small">Endret av saksbehandler</BodyShort>
+                </HStack>
+              </Box>
+            )}
+            {erOverstyrt && (
+              <VStack gap="4">
+                <Alert size="small" inline variant="warning">
+                  Overstyring skal kun gjøres i unntakstilfeller
+                </Alert>
+                <HStack gap="4">
+                  <OverstyrBekreftKnappPanel
+                    submitting={formMethods.formState.isSubmitting}
+                    pristine={!isSolvable || !formMethods.formState.isDirty}
+                    overrideReadOnly={overrideReadOnly}
+                  />
+                  <Button
+                    size="small"
+                    variant="secondary"
+                    type="button"
+                    loading={formMethods.formState.isSubmitting}
+                    disabled={formMethods.formState.isSubmitting}
+                    onClick={toggleAv}
+                  >
+                    Avbryt
+                  </Button>
+                </HStack>
+              </VStack>
+            )}
+          </Box>
+        </div>
+      )}
+    </Form>
+  );
+};
+
+const getCustomVilkarText = (medlemskapFom: string, behandlingType: string, erOppfylt: boolean) => {
+  const isBehandlingRevurderingFortsattMedlemskap = behandlingType === BehandlingType.REVURDERING && !!medlemskapFom;
+  if (isBehandlingRevurderingFortsattMedlemskap) {
+    return erOppfylt ? (
+      `Vilkåret er oppfylt f.o.m. ${initializeDate(medlemskapFom).format(DDMMYYYY_DATE_FORMAT)}`
+    ) : (
+      <>
+        Vilkåret er <b>ikke</b> oppfylt f.o.m. {`${initializeDate(medlemskapFom).format(DDMMYYYY_DATE_FORMAT)}`}
+      </>
+    );
+  }
+  return undefined;
+};
+
+const getCustomVilkarTextForOppfylt = (medlemskapFom: string, behandlingType: string) =>
+  getCustomVilkarText(medlemskapFom, behandlingType, true);
+
+const getCustomVilkarTextForIkkeOppfylt = (medlemskapFom: string, behandlingType: string) =>
+  getCustomVilkarText(medlemskapFom, behandlingType, false);
+
+const transformValues = (
+  values: VilkarresultatMedOverstyringFormState,
+  overstyringApKode: string,
+  periodeFom: string,
+  periodeTom: string,
+) => ({
+  kode: overstyringApKode,
+  ...VilkarResultPickerPeriodisertRHF.transformValues(values, periodeFom, periodeTom),
+  ...VilkarresultatMedBegrunnelse.transformValues(values),
+});
+
+export default VilkarresultatMedOverstyringFormPeriodisert;
diff --git a/packages/v2/gui/src/prosess/vilkar-overstyring/components-periodisert/vilkarresultatMedOverstyringFormPeriodisert.module.css b/packages/v2/gui/src/prosess/vilkar-overstyring/components-periodisert/vilkarresultatMedOverstyringFormPeriodisert.module.css
new file mode 100644
index 0000000000..861ddb4093
--- /dev/null
+++ b/packages/v2/gui/src/prosess/vilkar-overstyring/components-periodisert/vilkarresultatMedOverstyringFormPeriodisert.module.css
@@ -0,0 +1,31 @@
+.status {
+  height: 20px;
+  width: 20px;
+}
+
+.key {
+  cursor: pointer;
+  height: 20px;
+  width: 20px;
+}
+
+.keyWithoutCursor {
+  height: 20px;
+  width: 20px;
+}
+
+.vilkar {
+  margin-top: 3px;
+}
+
+.aksjonspunktBox {
+  padding: 0 20px 20px;
+  margin-left: -20px;
+  min-width: 400px;
+}
+
+.aksjonspunktBoxOpen {
+  padding-top: 20px;
+  border: 3px solid #fa3;
+  border-radius: 4px;
+}
diff --git a/packages/v2/gui/src/prosess/vilkar-overstyring/components-periodisert/vilkarresultatMedOverstyringFormPeriodisert.module.d.css.ts b/packages/v2/gui/src/prosess/vilkar-overstyring/components-periodisert/vilkarresultatMedOverstyringFormPeriodisert.module.d.css.ts
new file mode 100644
index 0000000000..d56ccc8aa4
--- /dev/null
+++ b/packages/v2/gui/src/prosess/vilkar-overstyring/components-periodisert/vilkarresultatMedOverstyringFormPeriodisert.module.d.css.ts
@@ -0,0 +1,10 @@
+declare const styles: {
+  readonly "aksjonspunktBox": string;
+  readonly "aksjonspunktBoxOpen": string;
+  readonly "key": string;
+  readonly "keyWithoutCursor": string;
+  readonly "status": string;
+  readonly "vilkar": string;
+};
+export = styles;
+
diff --git a/packages/v2/gui/src/prosess/vilkar-overstyring/components/FormState.ts b/packages/v2/gui/src/prosess/vilkar-overstyring/components/FormState.ts
new file mode 100644
index 0000000000..5284f4fc3b
--- /dev/null
+++ b/packages/v2/gui/src/prosess/vilkar-overstyring/components/FormState.ts
@@ -0,0 +1,11 @@
+import type { VilkarResultPickerFormState } from './VilkarResultPickerRHF';
+
+export type VilkarBegrunnelseFormState = {
+  begrunnelse: string;
+};
+
+export type VilkarresultatMedBegrunnelseState = VilkarBegrunnelseFormState & VilkarResultPickerFormState;
+
+export type VilkarresultatMedOverstyringFormState = VilkarresultatMedBegrunnelseState & {
+  isOverstyrt: boolean;
+};
diff --git a/packages/v2/gui/src/prosess/vilkar-overstyring/components/VilkarBegrunnelse.tsx b/packages/v2/gui/src/prosess/vilkar-overstyring/components/VilkarBegrunnelse.tsx
new file mode 100644
index 0000000000..fde3ff0686
--- /dev/null
+++ b/packages/v2/gui/src/prosess/vilkar-overstyring/components/VilkarBegrunnelse.tsx
@@ -0,0 +1,43 @@
+import type { VilkårPeriodeDto } from '@k9-sak-web/backend/k9sak/generated';
+import { TextAreaField } from '@navikt/ft-form-hooks';
+import { hasValidText, maxLength, minLength, required } from '@navikt/ft-form-validators';
+import { type FunctionComponent } from 'react';
+import { type VilkarBegrunnelseFormState } from './FormState';
+
+const minLength3 = minLength(3);
+const maxLength1500 = maxLength(1500);
+
+interface OwnProps {
+  isReadOnly: boolean;
+}
+
+interface StaticFunctions {
+  transformValues: (values: VilkarBegrunnelseFormState) => VilkarBegrunnelseFormState;
+  buildInitialValues: (periode: VilkårPeriodeDto) => VilkarBegrunnelseFormState;
+}
+
+/**
+ * VilkarBegrunnelse
+ *
+ * Presentasjonskomponent. Lar den NAV-ansatte skrive inn en begrunnelse før overstyring av vilkår eller beregning.
+ */
+const VilkarBegrunnelse: FunctionComponent<OwnProps> & StaticFunctions = ({ isReadOnly }) => (
+  <TextAreaField
+    name="begrunnelse"
+    label="Vurdering"
+    validate={[required, minLength3, maxLength1500, hasValidText]}
+    maxLength={1500}
+    readOnly={isReadOnly}
+    placeholder="Begrunn vurderingen din"
+  />
+);
+
+VilkarBegrunnelse.buildInitialValues = (periode: VilkårPeriodeDto) => ({
+  begrunnelse: periode && periode.begrunnelse ? periode.begrunnelse : '',
+});
+
+VilkarBegrunnelse.transformValues = (values: VilkarBegrunnelseFormState) => ({
+  begrunnelse: values.begrunnelse,
+});
+
+export default VilkarBegrunnelse;
diff --git a/packages/v2/gui/src/prosess/vilkar-overstyring/components/VilkarResultPickerRHF.tsx b/packages/v2/gui/src/prosess/vilkar-overstyring/components/VilkarResultPickerRHF.tsx
new file mode 100644
index 0000000000..8ec932a9e8
--- /dev/null
+++ b/packages/v2/gui/src/prosess/vilkar-overstyring/components/VilkarResultPickerRHF.tsx
@@ -0,0 +1,142 @@
+import { vilkårStatus } from '@k9-sak-web/backend/k9sak/kodeverk/behandling/VilkårStatus.js';
+import { KodeverkType, type KodeverkMedUndertype, type KodeverkObject } from '@k9-sak-web/lib/kodeverk/types.js';
+import { Alert, BodyShort, Box } from '@navikt/ds-react';
+import { Datepicker, RadioGroupPanel, SelectField } from '@navikt/ft-form-hooks';
+import { hasValidDate, required } from '@navikt/ft-form-validators';
+import { type AksjonspunktDto } from '@navikt/k9-sak-typescript-client';
+import { type FunctionComponent, type ReactNode } from 'react';
+import { useKodeverkContext } from '../../../kodeverk';
+import { isAksjonspunktOpen } from '../../../utils/aksjonspunktUtils';
+
+export type VilkarResultPickerFormState = {
+  erVilkarOk?: boolean;
+  avslagCode?: string;
+  avslagDato?: string;
+};
+
+type TransformedValues = {
+  erVilkarOk: boolean;
+  avslagskode?: string;
+  avslagDato?: string;
+};
+
+interface OwnProps {
+  erVilkarOk?: boolean;
+  customVilkarIkkeOppfyltText: string | ReactNode;
+  customVilkarOppfyltText: string | ReactNode;
+  readOnly: boolean;
+  erMedlemskapsPanel?: boolean;
+  fieldNamePrefix?: string;
+  vilkarType: string;
+}
+
+interface StaticFunctions {
+  transformValues: (values: VilkarResultPickerFormState, periodeFom?: string, periodeTom?: string) => TransformedValues;
+  buildInitialValues: (
+    aksjonspunkter: AksjonspunktDto[],
+    status: string,
+    avslagKode?: string,
+  ) => VilkarResultPickerFormState;
+}
+
+/**
+ * VilkarResultPicker
+ *
+ * Presentasjonskomponent. Lar NAV-ansatt velge om vilkåret skal oppfylles eller avvises.
+ */
+const VilkarResultPickerRHF: FunctionComponent<OwnProps> & StaticFunctions = ({
+  erVilkarOk,
+  customVilkarIkkeOppfyltText,
+  customVilkarOppfyltText,
+  readOnly,
+  erMedlemskapsPanel = false,
+  fieldNamePrefix,
+  vilkarType,
+}) => {
+  const { hentKodeverkForKode } = useKodeverkContext();
+  const avslagsarsaker = hentKodeverkForKode(KodeverkType.AVSLAGSARSAK) as KodeverkMedUndertype;
+  const avslagsårsakerForVilkar = avslagsarsaker[vilkarType];
+
+  return (
+    <Box paddingBlock={'4 0'} paddingInline={'0 4'}>
+      {readOnly && erVilkarOk !== undefined && (
+        <Alert variant={erVilkarOk ? 'success' : 'error'} inline>
+          <BodyShort size="small">{erVilkarOk ? customVilkarOppfyltText : customVilkarIkkeOppfyltText}</BodyShort>
+        </Alert>
+      )}
+      {(!readOnly || erVilkarOk === undefined) && (
+        <RadioGroupPanel
+          name={`${fieldNamePrefix ? `${fieldNamePrefix}.` : ''}erVilkarOk`}
+          validate={[required]}
+          isReadOnly={readOnly}
+          isTrueOrFalseSelection
+          radios={[
+            {
+              value: 'true',
+              label: customVilkarOppfyltText,
+            },
+            {
+              value: 'false',
+              label: customVilkarIkkeOppfyltText,
+            },
+          ]}
+        />
+      )}
+      {erVilkarOk !== undefined && !erVilkarOk && avslagsårsakerForVilkar && (
+        <>
+          <Box marginBlock={'4 0'}>
+            <SelectField
+              name={`${fieldNamePrefix ? `${fieldNamePrefix}.` : ''}avslagCode`}
+              label="Avslagsårsak"
+              selectValues={avslagsårsakerForVilkar
+                .filter(
+                  (avslagsårsak): avslagsårsak is KodeverkObject => (avslagsårsak as KodeverkObject).kode !== undefined,
+                )
+                .map(avslagsårsak => (
+                  <option key={avslagsårsak.kode} value={avslagsårsak.kode}>
+                    {avslagsårsak.navn}
+                  </option>
+                ))}
+              readOnly={readOnly}
+              validate={[required]}
+            />
+          </Box>
+          {erMedlemskapsPanel && (
+            <Box marginBlock={'2 0'}>
+              <Datepicker
+                name={`${fieldNamePrefix ? `${fieldNamePrefix}.` : ''}avslagDato`}
+                label="Dato"
+                isReadOnly={readOnly}
+                validate={[required, hasValidDate]}
+              />
+            </Box>
+          )}
+        </>
+      )}
+    </Box>
+  );
+};
+
+VilkarResultPickerRHF.buildInitialValues = (
+  aksjonspunkter: AksjonspunktDto[],
+  status: string,
+  avslagKode?: string,
+): VilkarResultPickerFormState => {
+  const isOpenAksjonspunkt = aksjonspunkter.some(ap => ap.status && isAksjonspunktOpen(ap.status));
+  const erVilkarOk = isOpenAksjonspunkt ? undefined : vilkårStatus.OPPFYLT === status;
+  return {
+    erVilkarOk,
+    avslagCode: erVilkarOk === false && avslagKode ? avslagKode : undefined,
+  };
+};
+
+VilkarResultPickerRHF.transformValues = (values: VilkarResultPickerFormState) =>
+  values.erVilkarOk
+    ? { erVilkarOk: true }
+    : {
+        erVilkarOk: false,
+        avslagskode: values.avslagCode,
+        avslagDato: values.avslagDato,
+      };
+
+export default VilkarResultPickerRHF;
diff --git a/packages/v2/gui/src/prosess/vilkar-overstyring/components/VilkarresultatMedBegrunnelse.tsx b/packages/v2/gui/src/prosess/vilkar-overstyring/components/VilkarresultatMedBegrunnelse.tsx
new file mode 100644
index 0000000000..08dcb028dd
--- /dev/null
+++ b/packages/v2/gui/src/prosess/vilkar-overstyring/components/VilkarresultatMedBegrunnelse.tsx
@@ -0,0 +1,86 @@
+import type { AksjonspunktDto, VilkårPeriodeDto } from '@k9-sak-web/backend/k9sak/generated';
+import { Box } from '@navikt/ds-react';
+import { AssessedBy } from '@navikt/ft-plattform-komponenter';
+import { type FunctionComponent } from 'react';
+import { type VilkarresultatMedBegrunnelseState } from './FormState';
+import VilkarBegrunnelse from './VilkarBegrunnelse';
+import VilkarResultPickerRHF from './VilkarResultPickerRHF';
+
+interface VilkarresultatMedBegrunnelseProps {
+  erVilkarOk?: boolean;
+  readOnly: boolean;
+  erMedlemskapsPanel: boolean;
+  customVilkarIkkeOppfyltText?: string | React.ReactElement;
+  customVilkarOppfyltText?: string | React.ReactElement;
+  skalViseBegrunnelse?: boolean;
+  opprettetAv?: string;
+  vilkarType: string;
+}
+
+interface StaticFunctions {
+  transformValues: (values: VilkarresultatMedBegrunnelseState) => { begrunnelse: string };
+  buildInitialValues: (
+    aksjonspunkter: AksjonspunktDto[],
+    status: string,
+    periode: VilkårPeriodeDto,
+    avslagKode?: string,
+  ) => VilkarresultatMedBegrunnelseState;
+}
+
+/**
+ * VilkarresultatMedBegrunnelse
+ *
+ * Presentasjonskomponent. Viser resultat av vilkårskjøring når det ikke finnes tilknyttede aksjonspunkter.
+ * Resultatet kan overstyres av Nav-ansatt med overstyr-rettighet.
+ */
+export const VilkarresultatMedBegrunnelse: FunctionComponent<VilkarresultatMedBegrunnelseProps> & StaticFunctions = ({
+  erVilkarOk,
+  readOnly,
+  erMedlemskapsPanel,
+  skalViseBegrunnelse = true,
+  customVilkarIkkeOppfyltText,
+  customVilkarOppfyltText,
+  opprettetAv,
+  vilkarType,
+}) => {
+  return (
+    <>
+      {skalViseBegrunnelse && (
+        <Box marginBlock={'0 2'}>
+          <VilkarBegrunnelse isReadOnly={readOnly} />
+          <AssessedBy ident={opprettetAv} />
+        </Box>
+      )}
+      <VilkarResultPickerRHF
+        customVilkarOppfyltText={customVilkarOppfyltText ?? 'Vilkåret er oppfylt'}
+        customVilkarIkkeOppfyltText={
+          customVilkarIkkeOppfyltText ?? (
+            <>
+              Vilkåret er <b>ikke</b> oppfylt
+            </>
+          )
+        }
+        erVilkarOk={erVilkarOk}
+        readOnly={readOnly}
+        erMedlemskapsPanel={erMedlemskapsPanel}
+        vilkarType={vilkarType}
+      />
+    </>
+  );
+};
+
+VilkarresultatMedBegrunnelse.buildInitialValues = (
+  aksjonspunkter: AksjonspunktDto[],
+  status: string,
+  periode: VilkårPeriodeDto,
+  avslagKode?: string,
+) => ({
+  ...VilkarResultPickerRHF.buildInitialValues(aksjonspunkter, status, avslagKode),
+  ...VilkarBegrunnelse.buildInitialValues(periode),
+});
+
+VilkarresultatMedBegrunnelse.transformValues = (values: VilkarresultatMedBegrunnelseState) => ({
+  begrunnelse: values.begrunnelse,
+});
+
+export default VilkarresultatMedBegrunnelse;
diff --git a/packages/v2/gui/src/prosess/vilkar-overstyring/components/VilkarresultatMedOverstyringForm.tsx b/packages/v2/gui/src/prosess/vilkar-overstyring/components/VilkarresultatMedOverstyringForm.tsx
new file mode 100644
index 0000000000..bc8ad0f65c
--- /dev/null
+++ b/packages/v2/gui/src/prosess/vilkar-overstyring/components/VilkarresultatMedOverstyringForm.tsx
@@ -0,0 +1,195 @@
+import type { AksjonspunktDto, VilkårPeriodeDto } from '@k9-sak-web/backend/k9sak/generated';
+import { aksjonspunktStatus } from '@k9-sak-web/backend/k9sak/kodeverk/AksjonspunktStatus.js';
+import { behandlingType as BehandlingType } from '@k9-sak-web/backend/k9sak/kodeverk/behandling/BehandlingType.js';
+import OverstyrBekreftKnappPanel from '@k9-sak-web/gui/shared/overstyrBekreftKnappPanel/OverstyrBekreftKnappPanel.js';
+import { DDMMYYYY_DATE_FORMAT } from '@k9-sak-web/lib/dateUtils/formats.js';
+import { initializeDate } from '@k9-sak-web/lib/dateUtils/initializeDate.js';
+import { Alert, BodyShort, Box, Button, HStack, Label, VStack } from '@navikt/ds-react';
+import { Form } from '@navikt/ft-form-hooks';
+import { type SetStateAction, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { EditedIcon } from '../../../shared/EditedIcon';
+import { type VilkarresultatMedOverstyringFormState } from './FormState';
+import VilkarresultatMedBegrunnelse from './VilkarresultatMedBegrunnelse';
+import styles from './vilkarresultatMedOverstyringForm.module.css';
+import VilkarResultPickerRHF from './VilkarResultPickerRHF';
+
+export type SubmitData = Readonly<{
+  begrunnelse: string;
+  avslagskode?: string;
+  avslagDato?: string;
+  kode: string;
+  erVilkarOk: boolean;
+  periode: { tom: string; fom: string } | undefined;
+}>;
+
+interface VilkarresultatMedOverstyringFormProps {
+  aksjonspunkter: AksjonspunktDto[];
+  behandlingType: string;
+  erMedlemskapsPanel: boolean;
+  erOverstyrt?: boolean;
+  medlemskapFom: string;
+  overrideReadOnly: boolean;
+  overstyringApKode: string;
+  status: string;
+  submitCallback: (props: SubmitData[]) => void;
+  toggleOverstyring: (overstyrtPanel: SetStateAction<string[]>) => void;
+  avslagKode?: string;
+  periode: VilkårPeriodeDto;
+  vilkarType: string;
+}
+
+/**
+ * VilkarresultatForm
+ *
+ * Presentasjonskomponent. Viser resultat av vilkårskjøring når det ikke finnes tilknyttede aksjonspunkter.
+ * Resultatet kan overstyres av Nav-ansatt med overstyr-rettighet.
+ */
+export const VilkarresultatMedOverstyringForm = ({
+  aksjonspunkter,
+  avslagKode,
+  behandlingType,
+  erMedlemskapsPanel,
+  erOverstyrt,
+  medlemskapFom,
+  overrideReadOnly,
+  overstyringApKode,
+  periode,
+  submitCallback,
+  status,
+  toggleOverstyring,
+  vilkarType,
+}: VilkarresultatMedOverstyringFormProps) => {
+  const buildInitialValues = (): VilkarresultatMedOverstyringFormState => {
+    const aksjonspunkt = aksjonspunkter.find(ap => ap.definisjon === overstyringApKode);
+    return {
+      isOverstyrt: aksjonspunkt !== undefined,
+      ...VilkarresultatMedBegrunnelse.buildInitialValues(aksjonspunkter, status, periode, avslagKode),
+    };
+  };
+  const formMethods = useForm<VilkarresultatMedOverstyringFormState>({
+    defaultValues: buildInitialValues(),
+  });
+  const toggleAv = () => {
+    formMethods.reset(buildInitialValues());
+    toggleOverstyring(oldArray => oldArray.filter(code => code !== overstyringApKode));
+  };
+
+  const periodeFom = periode?.periode?.fom ?? '';
+  const periodeTom = periode?.periode?.tom ?? '';
+
+  const onSubmit = (values: VilkarresultatMedOverstyringFormState) =>
+    submitCallback([transformValues(values, overstyringApKode, periodeFom, periodeTom)]);
+
+  useEffect(
+    () => () => {
+      formMethods.reset(buildInitialValues());
+    },
+    [periodeFom, periodeTom],
+  );
+
+  const erVilkarOk = formMethods.watch('erVilkarOk');
+
+  const customVilkarOppfyltText = getCustomVilkarTextForOppfylt(medlemskapFom, behandlingType);
+  const customVilkarIkkeOppfyltText = getCustomVilkarTextForIkkeOppfylt(medlemskapFom, behandlingType);
+  const overstyringAksjonspunkt = aksjonspunkter.find(ap => ap.definisjon === overstyringApKode);
+  const isReadOnly = overrideReadOnly || !periode?.vurderesIBehandlingen;
+  const opprettetAv = overstyringAksjonspunkt ? overstyringAksjonspunkt.opprettetAv : '';
+  const isSolvable =
+    erOverstyrt ||
+    (overstyringAksjonspunkt !== undefined
+      ? !(overstyringAksjonspunkt.status === aksjonspunktStatus.OPPRETTET && !overstyringAksjonspunkt.kanLoses)
+      : false);
+
+  return (
+    <Form formMethods={formMethods} onSubmit={onSubmit}>
+      {(erOverstyrt || !!overstyringAksjonspunkt) && (
+        <div className={`${styles.aksjonspunktBox} ${erOverstyrt ? styles.aksjonspunktBoxOpen : ''}`}>
+          <Label data-testid="overstyringform" size="small" as="p">
+            Manuell overstyring av automatisk vurdering
+          </Label>
+          <Box marginBlock={'2 0'}>
+            <VilkarresultatMedBegrunnelse
+              skalViseBegrunnelse={erOverstyrt || !!overstyringAksjonspunkt}
+              readOnly={isReadOnly || !erOverstyrt}
+              erVilkarOk={erVilkarOk}
+              customVilkarIkkeOppfyltText={customVilkarIkkeOppfyltText}
+              customVilkarOppfyltText={customVilkarOppfyltText}
+              erMedlemskapsPanel={erMedlemskapsPanel}
+              opprettetAv={opprettetAv ?? ''}
+              vilkarType={vilkarType}
+            />
+          </Box>
+          <Box marginBlock={'4 0'}>
+            {!erOverstyrt && erVilkarOk !== undefined && (
+              <Box marginBlock={'1 0'}>
+                <HStack gap="4" align="center">
+                  <EditedIcon />
+                  <BodyShort size="small">Endret av saksbehandler</BodyShort>
+                </HStack>
+              </Box>
+            )}
+            {erOverstyrt && (
+              <VStack gap="4">
+                <Alert size="small" inline variant="warning">
+                  Overstyring skal kun gjøres i unntakstilfeller
+                </Alert>
+                <HStack gap="4">
+                  <OverstyrBekreftKnappPanel
+                    submitting={formMethods.formState.isSubmitting}
+                    pristine={!isSolvable || !formMethods.formState.isDirty}
+                    overrideReadOnly={overrideReadOnly}
+                  />
+                  <Button
+                    size="small"
+                    variant="secondary"
+                    type="button"
+                    loading={formMethods.formState.isSubmitting}
+                    disabled={formMethods.formState.isSubmitting}
+                    onClick={toggleAv}
+                  >
+                    Avbryt
+                  </Button>
+                </HStack>
+              </VStack>
+            )}
+          </Box>
+        </div>
+      )}
+    </Form>
+  );
+};
+
+const getCustomVilkarText = (medlemskapFom: string, behandlingType: string, erOppfylt: boolean) => {
+  const isBehandlingRevurderingFortsattMedlemskap = behandlingType === BehandlingType.REVURDERING && !!medlemskapFom;
+  if (isBehandlingRevurderingFortsattMedlemskap) {
+    return erOppfylt ? (
+      `Vilkåret er oppfylt f.o.m. ${initializeDate(medlemskapFom).format(DDMMYYYY_DATE_FORMAT)}`
+    ) : (
+      <>
+        Vilkåret er <b>ikke</b> oppfylt f.o.m. {`${initializeDate(medlemskapFom).format(DDMMYYYY_DATE_FORMAT)}`}
+      </>
+    );
+  }
+  return undefined;
+};
+
+const getCustomVilkarTextForOppfylt = (medlemskapFom: string, behandlingType: string) =>
+  getCustomVilkarText(medlemskapFom, behandlingType, true);
+
+const getCustomVilkarTextForIkkeOppfylt = (medlemskapFom: string, behandlingType: string) =>
+  getCustomVilkarText(medlemskapFom, behandlingType, false);
+
+const transformValues = (
+  values: VilkarresultatMedOverstyringFormState,
+  overstyringApKode: string,
+  periodeFom: string,
+  periodeTom: string,
+): SubmitData => ({
+  kode: overstyringApKode,
+  ...VilkarResultPickerRHF.transformValues(values),
+  ...VilkarresultatMedBegrunnelse.transformValues(values),
+  periode: periodeFom && periodeTom ? { fom: periodeFom, tom: periodeTom } : undefined,
+});
+
+export default VilkarresultatMedOverstyringForm;
diff --git a/packages/v2/gui/src/prosess/vilkar-overstyring/components/VilkarresultatMedOverstyringHeader.tsx b/packages/v2/gui/src/prosess/vilkar-overstyring/components/VilkarresultatMedOverstyringHeader.tsx
new file mode 100644
index 0000000000..4fb1593084
--- /dev/null
+++ b/packages/v2/gui/src/prosess/vilkar-overstyring/components/VilkarresultatMedOverstyringHeader.tsx
@@ -0,0 +1,136 @@
+import type { AksjonspunktDto, VilkårPeriodeDto } from '@k9-sak-web/backend/k9sak/generated';
+import type { AksjonspunktCodes } from '@k9-sak-web/backend/k9sak/kodeverk/AksjonspunktCodes.js';
+import { vilkårStatus } from '@k9-sak-web/backend/k9sak/kodeverk/behandling/VilkårStatus.js';
+import { Lovreferanse } from '@k9-sak-web/gui/shared/lovreferanse/Lovreferanse.js';
+import { CheckmarkCircleFillIcon, KeyHorizontalIcon, XMarkOctagonFillIcon } from '@navikt/aksel-icons';
+import { Box, Button, Detail, Heading, HStack, Label, VStack } from '@navikt/ds-react';
+import { type SetStateAction } from 'react';
+import styles from './vilkarresultatMedOverstyringForm.module.css';
+
+const opptjeningMidlertidigInaktivKoder = {
+  TYPE_A: '7847A',
+  TYPE_A_NEW: 'VM_7847_A',
+  TYPE_B: '7847B',
+  TYPE_B_NEW: 'VM_7847_B',
+};
+
+const hent847Text = (kode: string) => {
+  const kodeTekster: { [key: string]: string } = {
+    [opptjeningMidlertidigInaktivKoder.TYPE_A]: 'Vilkåret beregnes jf § 8-47 bokstav A',
+    [opptjeningMidlertidigInaktivKoder.TYPE_A_NEW]: 'Vilkåret beregnes jf § 8-47 bokstav A',
+    [opptjeningMidlertidigInaktivKoder.TYPE_B]: 'Vilkåret beregnes jf § 8-47 bokstav B',
+    [opptjeningMidlertidigInaktivKoder.TYPE_B_NEW]: 'Vilkåret beregnes jf § 8-47 bokstav B',
+  };
+
+  return kodeTekster[kode] || '';
+};
+
+const isOverridden = (aksjonspunktCodes: AksjonspunktCodes[], aksjonspunktCode: string) =>
+  aksjonspunktCodes.some(code => code === aksjonspunktCode);
+const isHidden = (
+  kanOverstyre: boolean,
+  aksjonspunktCodes: AksjonspunktCodes[],
+  aksjonspunktCode: string,
+  vurderesIBehandlingen: boolean,
+) => (!isOverridden(aksjonspunktCodes, aksjonspunktCode) && !kanOverstyre) || !vurderesIBehandlingen;
+
+const vilkårResultatText = (originalErVilkarOk?: boolean, periode?: VilkårPeriodeDto) => {
+  let text = 'Ikke behandlet';
+  if (originalErVilkarOk) {
+    text = 'Vilkåret er oppfylt';
+  }
+  if (originalErVilkarOk === false) {
+    text = 'Vilkåret er avslått';
+  }
+  if (periode?.merknad && Object.values(opptjeningMidlertidigInaktivKoder).includes(periode?.merknad)) {
+    text = hent847Text(periode.merknad);
+  }
+  return (
+    <Label size="small" as="p">
+      {text}
+    </Label>
+  );
+};
+
+interface VilkarresultatMedOverstyringHeaderProps {
+  aksjonspunkter: AksjonspunktDto[];
+  erOverstyrt?: boolean;
+  kanOverstyreAccess?: {
+    isEnabled: boolean;
+  };
+  lovReferanse?: string;
+  overrideReadOnly: boolean;
+  overstyringApKode: string;
+  panelTittelKode: string;
+  toggleOverstyring: (overstyrtPanel: SetStateAction<string[]>) => void;
+  periode?: VilkårPeriodeDto;
+}
+
+const VilkarresultatMedOverstyringHeader = ({
+  panelTittelKode,
+  erOverstyrt,
+  overstyringApKode,
+  lovReferanse,
+  overrideReadOnly,
+  kanOverstyreAccess,
+  toggleOverstyring,
+  aksjonspunkter,
+  periode,
+}: VilkarresultatMedOverstyringHeaderProps) => {
+  const aksjonspunktCodes = aksjonspunkter
+    .filter((a): a is { definisjon: AksjonspunktCodes } => a.definisjon !== undefined)
+    .map(a => a.definisjon);
+  const status = periode?.vilkarStatus;
+  const erOppfylt = vilkårStatus.OPPFYLT === status;
+  const erVilkarOk = vilkårStatus.IKKE_VURDERT !== status ? erOppfylt : undefined;
+  const togglePa = () => {
+    toggleOverstyring(oldArray => [...oldArray, overstyringApKode]);
+  };
+  return (
+    <Box marginBlock={'0 2'}>
+      <VStack gap="2">
+        <HStack gap="4">
+          {!erOverstyrt && erVilkarOk !== undefined && (
+            <>
+              {erVilkarOk ? (
+                <CheckmarkCircleFillIcon fontSize={24} style={{ color: 'var(--a-surface-success)' }} />
+              ) : (
+                <XMarkOctagonFillIcon fontSize={24} style={{ color: 'var(--a-surface-danger)' }} />
+              )}
+            </>
+          )}
+          <Heading size="small" level="2">
+            {panelTittelKode}
+          </Heading>
+          {lovReferanse && (
+            <Detail className={styles.vilkar}>
+              <Lovreferanse>{lovReferanse}</Lovreferanse>
+            </Detail>
+          )}
+        </HStack>
+        <HStack gap="4">
+          <Box marginBlock={'2 0'}>{vilkårResultatText(erVilkarOk, periode)}</Box>
+          {erVilkarOk !== undefined &&
+            !isHidden(
+              !!kanOverstyreAccess?.isEnabled,
+              aksjonspunktCodes,
+              overstyringApKode,
+              !!periode?.vurderesIBehandlingen,
+            ) && (
+              <Box marginBlock={'1 0'}>
+                <Button
+                  variant="tertiary"
+                  size="xsmall"
+                  onClick={togglePa}
+                  icon={<KeyHorizontalIcon className="-rotate-45 text-3xl" />}
+                  disabled={erOverstyrt || overrideReadOnly}
+                />
+              </Box>
+            )}
+        </HStack>
+      </VStack>
+    </Box>
+  );
+};
+
+export default VilkarresultatMedOverstyringHeader;
diff --git a/packages/v2/gui/src/prosess/vilkar-overstyring/components/vilkarresultatMedOverstyringForm.module.css b/packages/v2/gui/src/prosess/vilkar-overstyring/components/vilkarresultatMedOverstyringForm.module.css
new file mode 100644
index 0000000000..c8b17ba356
--- /dev/null
+++ b/packages/v2/gui/src/prosess/vilkar-overstyring/components/vilkarresultatMedOverstyringForm.module.css
@@ -0,0 +1,25 @@
+.status {
+  height: 20px;
+  width: 20px;
+}
+
+.key {
+  height: 20px;
+  width: 20px;
+}
+
+.vilkar:global(.navds-detail) {
+  margin-top: 3px;
+}
+
+.aksjonspunktBox {
+  padding: 0 20px 20px;
+  margin-left: -20px;
+  min-width: 400px;
+}
+
+.aksjonspunktBoxOpen {
+  padding-top: 20px;
+  border: 3px solid #fa3;
+  border-radius: 4px;
+}
diff --git a/packages/v2/gui/src/prosess/vilkar-overstyring/components/vilkarresultatMedOverstyringForm.module.d.css.ts b/packages/v2/gui/src/prosess/vilkar-overstyring/components/vilkarresultatMedOverstyringForm.module.d.css.ts
new file mode 100644
index 0000000000..dd9b6c69c4
--- /dev/null
+++ b/packages/v2/gui/src/prosess/vilkar-overstyring/components/vilkarresultatMedOverstyringForm.module.d.css.ts
@@ -0,0 +1,9 @@
+declare const styles: {
+  readonly "aksjonspunktBox": string;
+  readonly "aksjonspunktBoxOpen": string;
+  readonly "key": string;
+  readonly "status": string;
+  readonly "vilkar": string;
+};
+export = styles;
+
diff --git a/packages/v2/gui/src/prosess/vilkar-overstyring/vilkarresultatMedOverstyringProsessIndex.module.css b/packages/v2/gui/src/prosess/vilkar-overstyring/vilkarresultatMedOverstyringProsessIndex.module.css
new file mode 100644
index 0000000000..445e23e644
--- /dev/null
+++ b/packages/v2/gui/src/prosess/vilkar-overstyring/vilkarresultatMedOverstyringProsessIndex.module.css
@@ -0,0 +1,16 @@
+.contentContainer {
+  flex: 1;
+}
+
+.sideMenuContainer {
+  margin: 0 32px 0 0;
+}
+
+.sideMenuContainer > div {
+  height: auto;
+}
+
+.mainContainerWithSideMenu {
+  display: flex;
+  margin-left: -32px;
+}
diff --git a/packages/v2/gui/src/prosess/vilkar-overstyring/vilkarresultatMedOverstyringProsessIndex.module.d.css.ts b/packages/v2/gui/src/prosess/vilkar-overstyring/vilkarresultatMedOverstyringProsessIndex.module.d.css.ts
new file mode 100644
index 0000000000..9be0e10679
--- /dev/null
+++ b/packages/v2/gui/src/prosess/vilkar-overstyring/vilkarresultatMedOverstyringProsessIndex.module.d.css.ts
@@ -0,0 +1,7 @@
+declare const styles: {
+  readonly "contentContainer": string;
+  readonly "mainContainerWithSideMenu": string;
+  readonly "sideMenuContainer": string;
+};
+export = styles;
+
diff --git a/packages/v2/gui/src/prosess/vilkar-soknadsfrist/SoknadsfristVilkarProsessIndex.stories.tsx b/packages/v2/gui/src/prosess/vilkar-soknadsfrist/SoknadsfristVilkarProsessIndex.stories.tsx
index a253eba4c0..3c4b2abc89 100644
--- a/packages/v2/gui/src/prosess/vilkar-soknadsfrist/SoknadsfristVilkarProsessIndex.stories.tsx
+++ b/packages/v2/gui/src/prosess/vilkar-soknadsfrist/SoknadsfristVilkarProsessIndex.stories.tsx
@@ -12,7 +12,7 @@ import SoknadsfristVilkarProsessIndex from './SoknadsfristVilkarProsessIndex';
 
 const vilkarSoknadsfrist = [
   {
-    vilkarType: vilkarType.SOKNADSFRISTVILKARET, // kodeverk: 'test'
+    vilkarType: vilkarType.SØKNADSFRIST, // kodeverk: 'test'
     overstyrbar: true,
     perioder: [
       {
diff --git a/packages/v2/gui/src/prosess/vilkar-soknadsfrist/components/OverstyrBekreftKnappPanel.tsx b/packages/v2/gui/src/prosess/vilkar-soknadsfrist/components/OverstyrBekreftKnappPanel.tsx
deleted file mode 100644
index 00984c4c91..0000000000
--- a/packages/v2/gui/src/prosess/vilkar-soknadsfrist/components/OverstyrBekreftKnappPanel.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Button } from '@navikt/ds-react';
-
-interface OwnProps {
-  disabled?: boolean;
-  submitting: boolean;
-  pristine: boolean;
-  overrideReadOnly: boolean;
-}
-
-const OverstyrBekreftKnappPanel = ({ disabled = false, submitting, pristine, overrideReadOnly }: OwnProps) => {
-  if (overrideReadOnly) {
-    return null;
-  }
-  return (
-    <Button variant="primary" size="small" loading={submitting} disabled={disabled || submitting || pristine}>
-      Bekreft overstyring
-    </Button>
-  );
-};
-
-export default OverstyrBekreftKnappPanel;
diff --git a/packages/v2/gui/src/prosess/vilkar-soknadsfrist/components/SoknadsfristVilkarForm.tsx b/packages/v2/gui/src/prosess/vilkar-soknadsfrist/components/SoknadsfristVilkarForm.tsx
index a754ce53a5..9f7d37e0ee 100644
--- a/packages/v2/gui/src/prosess/vilkar-soknadsfrist/components/SoknadsfristVilkarForm.tsx
+++ b/packages/v2/gui/src/prosess/vilkar-soknadsfrist/components/SoknadsfristVilkarForm.tsx
@@ -13,12 +13,12 @@ import hash from 'object-hash';
 import { useState, type SetStateAction } from 'react';
 import { useForm } from 'react-hook-form';
 
+import OverstyrBekreftKnappPanel from '@k9-sak-web/gui/shared/overstyrBekreftKnappPanel/OverstyrBekreftKnappPanel.js';
 import type { KravDokument } from '../types/KravDokumentStatus';
 import type { SoknadsfristAksjonspunktType } from '../types/SoknadsfristAksjonspunktType';
 import type { SubmitData } from '../types/submitCallback';
 import { utledInnsendtSoknadsfrist } from '../utils';
 import type { FormState } from './FormState';
-import OverstyrBekreftKnappPanel from './OverstyrBekreftKnappPanel';
 import SoknadsfristVilkarDokument, { DELVIS_OPPFYLT } from './SoknadsfristVilkarDokument';
 import styles from './SoknadsfristVilkarForm.module.css';
 
diff --git a/packages/v2/gui/src/shared/EditedIcon.tsx b/packages/v2/gui/src/shared/EditedIcon.tsx
new file mode 100644
index 0000000000..29b619562b
--- /dev/null
+++ b/packages/v2/gui/src/shared/EditedIcon.tsx
@@ -0,0 +1,5 @@
+import { PersonPencilFillIcon } from '@navikt/aksel-icons';
+
+export const EditedIcon = () => (
+  <PersonPencilFillIcon title="Saksbehandler har endret feltets verdi" fontSize="1.5rem" color="var(--a-orange-600)" />
+);
diff --git a/packages/prosess-vilkar-soknadsfrist-v2/src/components/OverstyrBekreftKnappPanel.spec.tsx b/packages/v2/gui/src/shared/overstyrBekreftKnappPanel/OverstyrBekreftKnappPanel.spec.tsx
similarity index 96%
rename from packages/prosess-vilkar-soknadsfrist-v2/src/components/OverstyrBekreftKnappPanel.spec.tsx
rename to packages/v2/gui/src/shared/overstyrBekreftKnappPanel/OverstyrBekreftKnappPanel.spec.tsx
index 7c1c06be9f..15e8f4d47c 100644
--- a/packages/prosess-vilkar-soknadsfrist-v2/src/components/OverstyrBekreftKnappPanel.spec.tsx
+++ b/packages/v2/gui/src/shared/overstyrBekreftKnappPanel/OverstyrBekreftKnappPanel.spec.tsx
@@ -1,5 +1,4 @@
 import { render, screen } from '@testing-library/react';
-import React from 'react';
 import OverstyrBekreftKnappPanel from './OverstyrBekreftKnappPanel';
 
 describe('<OverstyrBekreftKnappPanel>', () => {
diff --git a/packages/prosess-vilkar-soknadsfrist-v2/src/components/OverstyrBekreftKnappPanel.tsx b/packages/v2/gui/src/shared/overstyrBekreftKnappPanel/OverstyrBekreftKnappPanel.tsx
similarity index 100%
rename from packages/prosess-vilkar-soknadsfrist-v2/src/components/OverstyrBekreftKnappPanel.tsx
rename to packages/v2/gui/src/shared/overstyrBekreftKnappPanel/OverstyrBekreftKnappPanel.tsx
diff --git a/packages/v2/gui/src/utils/aksjonspunktUtils.ts b/packages/v2/gui/src/utils/aksjonspunktUtils.ts
new file mode 100644
index 0000000000..c67c04ac2e
--- /dev/null
+++ b/packages/v2/gui/src/utils/aksjonspunktUtils.ts
@@ -0,0 +1,3 @@
+import { aksjonspunktStatus } from '@k9-sak-web/backend/k9sak/kodeverk/AksjonspunktStatus.js';
+
+export const isAksjonspunktOpen = (statusKode: string): boolean => statusKode === aksjonspunktStatus.OPPRETTET;
diff --git a/packages/v2/lib/src/dateUtils/dateUtils.ts b/packages/v2/lib/src/dateUtils/dateUtils.ts
index 42a2f8d3e4..93bae34261 100644
--- a/packages/v2/lib/src/dateUtils/dateUtils.ts
+++ b/packages/v2/lib/src/dateUtils/dateUtils.ts
@@ -99,6 +99,21 @@ export const calcDaysAndWeeks = (fraDatoPeriode?: string, tilDatoPeriode?: strin
 export const formatPeriod = (fomDate: string, tomDate: string): string =>
   `${formatDate(fomDate)} - ${formatDate(tomDate)}`;
 
+export default function dateSorter(date1: Dayjs, date2: Dayjs) {
+  if (date1.isBefore(date2)) {
+    return -1;
+  }
+  if (date2.isBefore(date1)) {
+    return 1;
+  }
+  return 0;
+}
+
+export function dateStringSorter(date1: string, date2: string) {
+  const date1AsDayjs = initializeDate(date1);
+  const date2AsDayjs = initializeDate(date2);
+  return dateSorter(date1AsDayjs, date2AsDayjs);
+}
 export const convertHoursToDays = (hoursToConvert: number) => {
   const days = Math.floor(hoursToConvert / TIMER_PER_DAG);
   const hours = hoursToConvert % TIMER_PER_DAG;
diff --git a/packages/v2/lib/src/kodeverk/types.ts b/packages/v2/lib/src/kodeverk/types.ts
index e416b1b350..0ef2cb86d1 100644
--- a/packages/v2/lib/src/kodeverk/types.ts
+++ b/packages/v2/lib/src/kodeverk/types.ts
@@ -1,5 +1,6 @@
 export * from './types/AksjonspunktCodes';
 export * from './types/AlleKodeverk';
+export * from './types/FeatureTogglesType';
 export * from './types/GetKodeverkNavnFraKodeFnType';
 export * from './types/HentKodeverkForKodeType';
 export * from './types/KodeverkKlageType';
@@ -9,3 +10,4 @@ export * from './types/KodeverkResponse';
 export * from './types/KodeverkTilbakeType';
 export * from './types/KodeverkType';
 export * from './types/KodeverkV2';
+export * from './types/Periode';
diff --git a/packages/v2/lib/src/kodeverk/types/FeatureTogglesType.ts b/packages/v2/lib/src/kodeverk/types/FeatureTogglesType.ts
new file mode 100644
index 0000000000..3f63929f37
--- /dev/null
+++ b/packages/v2/lib/src/kodeverk/types/FeatureTogglesType.ts
@@ -0,0 +1,3 @@
+export interface FeatureToggles {
+  [index: string]: boolean;
+}
diff --git a/packages/v2/lib/src/kodeverk/types/Periode.ts b/packages/v2/lib/src/kodeverk/types/Periode.ts
new file mode 100644
index 0000000000..3dc829952d
--- /dev/null
+++ b/packages/v2/lib/src/kodeverk/types/Periode.ts
@@ -0,0 +1 @@
+export type Periode = { fom?: string; tom?: string };