diff --git a/src/frontend/komponenter/Fagsak/Fakta/FaktaRevurdering.tsx b/src/frontend/komponenter/Fagsak/Fakta/FaktaRevurdering.tsx
index e2c970e8..43174e6f 100644
--- a/src/frontend/komponenter/Fagsak/Fakta/FaktaRevurdering.tsx
+++ b/src/frontend/komponenter/Fagsak/Fakta/FaktaRevurdering.tsx
@@ -1,19 +1,10 @@
 import * as React from 'react';
 
-import { styled } from 'styled-components';
-
-import { Column, Row } from 'nav-frontend-grid';
-
-import { BodyShort, Heading } from '@navikt/ds-react';
-import { ASpacing4 } from '@navikt/ds-tokens/dist/tokens';
+import { BodyShort, Heading, HGrid, VStack } from '@navikt/ds-react';
 
 import { IFeilutbetalingFakta, tilbakekrevingsvalg } from '../../../typer/feilutbetalingtyper';
 import { formatterDatostring } from '../../../utils';
-import { DetailBold, Spacer20 } from '../../Felleskomponenter/Flytelementer';
-
-export const RadMedMargin = styled(Row)`
-    margin-bottom: ${ASpacing4};
-`;
+import { DetailBold } from '../../Felleskomponenter/Flytelementer';
 
 interface IProps {
     feilutbetalingFakta: IFeilutbetalingFakta;
@@ -21,60 +12,55 @@ interface IProps {
 
 const FaktaRevurdering: React.FC<IProps> = ({ feilutbetalingFakta }) => {
     return feilutbetalingFakta ? (
-        <>
-            <Row>
-                <Column xs="12">
-                    <Heading level="2" size="small">
-                        Revurdering
-                    </Heading>
-                </Column>
-            </Row>
-            <Spacer20 />
-            <RadMedMargin>
-                <Column xs="6">
-                    <DetailBold>Årsak(er) til revurdering</DetailBold>
-                    {feilutbetalingFakta.faktainfo?.revurderingsårsak && (
-                        <BodyShort size="small">
-                            {feilutbetalingFakta.faktainfo.revurderingsårsak}
-                        </BodyShort>
-                    )}
-                </Column>
-                <Column xs="6">
-                    <DetailBold>Dato for revurderingsvedtak</DetailBold>
-                    <BodyShort size="small">
-                        {formatterDatostring(feilutbetalingFakta.revurderingsvedtaksdato)}
-                    </BodyShort>
-                </Column>
-            </RadMedMargin>
-            <RadMedMargin>
-                <Column xs="6">
-                    <DetailBold>Resultat</DetailBold>
-                    {feilutbetalingFakta.faktainfo?.revurderingsresultat && (
+        <VStack gap="5">
+            <Heading level="2" size="small">
+                Revurdering
+            </Heading>
+            <VStack gap="4">
+                <HGrid columns={2}>
+                    <div>
+                        <DetailBold>Årsak(er) til revurdering</DetailBold>
+                        {feilutbetalingFakta.faktainfo?.revurderingsårsak && (
+                            <BodyShort size="small">
+                                {feilutbetalingFakta.faktainfo.revurderingsårsak}
+                            </BodyShort>
+                        )}
+                    </div>
+                    <div>
+                        <DetailBold>Dato for revurderingsvedtak</DetailBold>
                         <BodyShort size="small">
-                            {feilutbetalingFakta.faktainfo.revurderingsresultat}
+                            {formatterDatostring(feilutbetalingFakta.revurderingsvedtaksdato)}
                         </BodyShort>
-                    )}
-                </Column>
-                <Column xs="6">
-                    <DetailBold>Konsekvens</DetailBold>
-                    {feilutbetalingFakta.faktainfo?.konsekvensForYtelser && (
-                        <BodyShort size="small">
-                            {feilutbetalingFakta.faktainfo.konsekvensForYtelser?.join(', ')}
-                        </BodyShort>
-                    )}
-                </Column>
-            </RadMedMargin>
-            <Row>
-                <Column xs="6">
+                    </div>
+                </HGrid>
+                <HGrid columns={2}>
+                    <div>
+                        <DetailBold>Resultat</DetailBold>
+                        {feilutbetalingFakta.faktainfo?.revurderingsresultat && (
+                            <BodyShort size="small">
+                                {feilutbetalingFakta.faktainfo.revurderingsresultat}
+                            </BodyShort>
+                        )}
+                    </div>
+                    <div>
+                        <DetailBold>Konsekvens</DetailBold>
+                        {feilutbetalingFakta.faktainfo?.konsekvensForYtelser && (
+                            <BodyShort size="small">
+                                {feilutbetalingFakta.faktainfo.konsekvensForYtelser?.join(', ')}
+                            </BodyShort>
+                        )}
+                    </div>
+                </HGrid>
+                <div>
                     <DetailBold>Tilbakekrevingsvalg</DetailBold>
                     {feilutbetalingFakta.faktainfo?.tilbakekrevingsvalg && (
                         <BodyShort size="small">
                             {tilbakekrevingsvalg[feilutbetalingFakta.faktainfo.tilbakekrevingsvalg]}
                         </BodyShort>
                     )}
-                </Column>
-            </Row>
-        </>
+                </div>
+            </VStack>
+        </VStack>
     ) : null;
 };
 
diff --git a/src/frontend/komponenter/Fagsak/Fakta/FaktaSkjema.tsx b/src/frontend/komponenter/Fagsak/Fakta/FaktaSkjema.tsx
index 0682240d..8e295bef 100644
--- a/src/frontend/komponenter/Fagsak/Fakta/FaktaSkjema.tsx
+++ b/src/frontend/komponenter/Fagsak/Fakta/FaktaSkjema.tsx
@@ -1,19 +1,11 @@
 import * as React from 'react';
 
-import { Column, Row } from 'nav-frontend-grid';
-
-import { BodyShort, Checkbox, Heading, Textarea } from '@navikt/ds-react';
+import { BodyShort, Checkbox, Heading, HGrid, Textarea, VStack } from '@navikt/ds-react';
 
 import { Ytelsetype } from '../../../kodeverk';
 import { IFeilutbetalingFakta } from '../../../typer/feilutbetalingtyper';
 import { formatterDatostring, formatCurrencyNoKr } from '../../../utils';
-import {
-    DetailBold,
-    FTButton,
-    Navigering,
-    Spacer20,
-    Spacer8,
-} from '../../Felleskomponenter/Flytelementer';
+import { DetailBold, FTButton, Navigering } from '../../Felleskomponenter/Flytelementer';
 import FeilutbetalingFaktaPerioder from './FaktaPeriode/FeilutbetalingFaktaPerioder';
 import FaktaRevurdering from './FaktaRevurdering';
 import { useFeilutbetalingFakta } from './FeilutbetalingFaktaContext';
@@ -51,124 +43,88 @@ const FaktaSkjema: React.FC<IProps> = ({
     };
 
     return (
-        <>
-            <Row>
-                <Column sm="12" md="6">
-                    <Row>
-                        <Column xs="12">
-                            <Heading level="2" size="small">
-                                Feilutbetaling
-                            </Heading>
-                        </Column>
-                    </Row>
-                    <Spacer20 />
-                    <Row>
-                        <Column xs="12" md="4">
-                            <DetailBold>Periode med feilutbetaling</DetailBold>
-                            <BodyShort size="small">
-                                {`${formatterDatostring(
-                                    feilutbetalingFakta.totalFeilutbetaltPeriode.fom
-                                )} - ${formatterDatostring(
-                                    feilutbetalingFakta.totalFeilutbetaltPeriode.tom
-                                )}`}
-                            </BodyShort>
-                        </Column>
-                        <Column xs="12" md="4">
-                            <DetailBold>Feilutbetalt beløp totalt</DetailBold>
-                            <BodyShort size="small" className={'redText'}>
-                                {`${formatCurrencyNoKr(
-                                    feilutbetalingFakta.totaltFeilutbetaltBeløp
-                                )}`}
-                            </BodyShort>
-                        </Column>
-                        <Column xs="12" md="4">
-                            <DetailBold>Tidligere varslet beløp</DetailBold>
-                            <BodyShort size="small">
-                                {feilutbetalingFakta.varsletBeløp
-                                    ? `${formatCurrencyNoKr(feilutbetalingFakta.varsletBeløp)}`
-                                    : ''}
-                            </BodyShort>
-                        </Column>
-                    </Row>
-                    <Spacer20 />
+        <HGrid columns={2} gap="10">
+            <VStack gap="5">
+                <Heading level="2" size="small">
+                    Feilutbetaling
+                </Heading>
+                <HGrid columns={3} gap="1">
+                    <div>
+                        <DetailBold>Periode med feilutbetaling</DetailBold>
+                        <BodyShort size="small">
+                            {`${formatterDatostring(
+                                feilutbetalingFakta.totalFeilutbetaltPeriode.fom
+                            )} - ${formatterDatostring(
+                                feilutbetalingFakta.totalFeilutbetaltPeriode.tom
+                            )}`}
+                        </BodyShort>
+                    </div>
+                    <div>
+                        <DetailBold>Feilutbetalt beløp totalt</DetailBold>
+                        <BodyShort size="small" className={'redText'}>
+                            {`${formatCurrencyNoKr(feilutbetalingFakta.totaltFeilutbetaltBeløp)}`}
+                        </BodyShort>
+                    </div>
+                    <div>
+                        <DetailBold>Tidligere varslet beløp</DetailBold>
+                        <BodyShort size="small">
+                            {feilutbetalingFakta.varsletBeløp
+                                ? `${formatCurrencyNoKr(feilutbetalingFakta.varsletBeløp)}`
+                                : ''}
+                        </BodyShort>
+                    </div>
+                </HGrid>
+                <VStack gap="2">
                     {!erLesevisning && (
-                        <>
-                            <Row>
-                                <Column xs="11">
-                                    <Checkbox
-                                        size="small"
-                                        disabled={erLesevisning}
-                                        checked={behandlePerioderSamlet === true}
-                                        onChange={() =>
-                                            settBehandlePerioderSamlet(!behandlePerioderSamlet)
-                                        }
-                                    >
-                                        Behandle alle perioder samlet
-                                    </Checkbox>
-                                </Column>
-                            </Row>
-                            <Spacer8 />
-                        </>
+                        <Checkbox
+                            size="small"
+                            checked={behandlePerioderSamlet === true}
+                            onChange={() => settBehandlePerioderSamlet(!behandlePerioderSamlet)}
+                        >
+                            Behandle alle perioder samlet
+                        </Checkbox>
+                    )}
+                    {skjemaData.perioder && (
+                        <FeilutbetalingFaktaPerioder
+                            ytelse={ytelse}
+                            erLesevisning={erLesevisning}
+                            perioder={skjemaData.perioder}
+                        />
                     )}
-                    <Row>
-                        <Column xs="11">
-                            {skjemaData.perioder && (
-                                <FeilutbetalingFaktaPerioder
-                                    ytelse={ytelse}
-                                    erLesevisning={erLesevisning}
-                                    perioder={skjemaData.perioder}
-                                />
-                            )}
-                        </Column>
-                    </Row>
-                </Column>
-                <Column sm="12" md="6">
-                    <FaktaRevurdering feilutbetalingFakta={feilutbetalingFakta} />
-                </Column>
-            </Row>
-            <Spacer20 />
-            <Row>
-                <Column sm="12" md="6">
-                    <Textarea
-                        name={'begrunnelse'}
-                        label={'Forklar årsaken(e) til feilutbetalingen'}
-                        readOnly={erLesevisning}
-                        value={skjemaData.begrunnelse ? skjemaData.begrunnelse : ''}
-                        onChange={event => onChangeBegrunnelse(event)}
-                        maxLength={3000}
-                        className={erLesevisning ? 'lesevisning' : ''}
-                        error={
-                            visFeilmeldinger &&
-                            feilmeldinger?.find(meld => meld.gjelderBegrunnelse)?.melding
-                        }
-                    />
-                </Column>
-            </Row>
-            <Spacer20 />
-            <Row>
-                <Column xs="12" md="6">
-                    <Navigering>
-                        <div>
-                            <FTButton
-                                variant="primary"
-                                onClick={sendInnSkjema}
-                                loading={senderInn}
-                                disabled={erLesevisning && !stegErBehandlet}
-                            >
-                                {stegErBehandlet ? 'Neste' : 'Bekreft og fortsett'}
-                            </FTButton>
-                        </div>
-                        {behandling.harVerge && (
-                            <div>
-                                <FTButton variant="secondary" onClick={gåTilForrige}>
-                                    Forrige
-                                </FTButton>
-                            </div>
-                        )}
-                    </Navigering>
-                </Column>
-            </Row>
-        </>
+                </VStack>
+                <Textarea
+                    name={'begrunnelse'}
+                    label={'Forklar årsaken(e) til feilutbetalingen'}
+                    readOnly={erLesevisning}
+                    value={skjemaData.begrunnelse ? skjemaData.begrunnelse : ''}
+                    onChange={event => onChangeBegrunnelse(event)}
+                    maxLength={3000}
+                    className={erLesevisning ? 'lesevisning' : ''}
+                    error={
+                        visFeilmeldinger &&
+                        feilmeldinger?.find(meld => meld.gjelderBegrunnelse)?.melding
+                    }
+                />
+
+                <Navigering>
+                    <FTButton
+                        variant="primary"
+                        onClick={sendInnSkjema}
+                        loading={senderInn}
+                        disabled={erLesevisning && !stegErBehandlet}
+                    >
+                        {stegErBehandlet ? 'Neste' : 'Bekreft og fortsett'}
+                    </FTButton>
+                    {behandling.harVerge && (
+                        <FTButton variant="secondary" onClick={gåTilForrige}>
+                            Forrige
+                        </FTButton>
+                    )}
+                </Navigering>
+            </VStack>
+
+            <FaktaRevurdering feilutbetalingFakta={feilutbetalingFakta} />
+        </HGrid>
     );
 };
 
diff --git a/src/frontend/komponenter/Fagsak/Foreldelse/ForeldelseContainer.tsx b/src/frontend/komponenter/Fagsak/Foreldelse/ForeldelseContainer.tsx
index 4c578f77..28ea99bd 100644
--- a/src/frontend/komponenter/Fagsak/Foreldelse/ForeldelseContainer.tsx
+++ b/src/frontend/komponenter/Fagsak/Foreldelse/ForeldelseContainer.tsx
@@ -2,8 +2,6 @@ import * as React from 'react';
 
 import { styled } from 'styled-components';
 
-import { Column, Row } from 'nav-frontend-grid';
-
 import { Alert, BodyLong, BodyShort, Heading, Loader } from '@navikt/ds-react';
 import { RessursStatus } from '@navikt/familie-typer';
 
@@ -14,13 +12,20 @@ import { FTButton, Navigering, Spacer20 } from '../../Felleskomponenter/Flytelem
 import Steginformasjon from '../../Felleskomponenter/Steginformasjon/StegInformasjon';
 import { useFeilutbetalingForeldelse } from './FeilutbetalingForeldelseContext';
 import FeilutbetalingForeldelsePerioder from './ForeldelsePeriode/FeilutbetalingForeldelsePerioder';
+import { ASpacing3 } from '@navikt/ds-tokens/dist/tokens';
 
 export const getDate = (): string => {
     return finnDatoRelativtTilNå({ months: -30 });
 };
 
 const StyledForeldelse = styled.div`
-    padding: 10px;
+    padding: ${ASpacing3};
+`;
+
+const StyledAutomatiskForeldelse = styled.div`
+    padding: ${ASpacing3};
+    min-width: 15rem;
+    max-width: 30rem;
 `;
 
 const HenterContainer = styled(StyledForeldelse)`
@@ -45,7 +50,7 @@ const ForeldelseContainer: React.FC<IProps> = ({ behandling }) => {
 
     if (erAutoutført) {
         return (
-            <StyledForeldelse>
+            <StyledAutomatiskForeldelse>
                 <Heading spacing size="small" level="2">
                     Foreldelse
                 </Heading>
@@ -55,23 +60,15 @@ const ForeldelseContainer: React.FC<IProps> = ({ behandling }) => {
                 <BodyLong size="small" spacing>
                     Automatisk vurdert
                 </BodyLong>
-                <Row>
-                    <Column xs="10" md="4">
-                        <Navigering>
-                            <div>
-                                <FTButton variant="primary" onClick={gåTilNeste}>
-                                    Neste
-                                </FTButton>
-                            </div>
-                            <div>
-                                <FTButton variant="secondary" onClick={gåTilForrige}>
-                                    Forrige
-                                </FTButton>
-                            </div>
-                        </Navigering>
-                    </Column>
-                </Row>
-            </StyledForeldelse>
+                <Navigering>
+                    <FTButton variant="primary" onClick={gåTilNeste}>
+                        Neste
+                    </FTButton>
+                    <FTButton variant="secondary" onClick={gåTilForrige}>
+                        Forrige
+                    </FTButton>
+                </Navigering>
+            </StyledAutomatiskForeldelse>
         );
     }
 
@@ -92,17 +89,13 @@ const ForeldelseContainer: React.FC<IProps> = ({ behandling }) => {
                             <Spacer20 />
                         </>
                     )}
-                    <Row>
-                        <Column xs="12">
-                            {skjemaData.length > 0 && (
-                                <FeilutbetalingForeldelsePerioder
-                                    behandling={behandling}
-                                    perioder={skjemaData}
-                                    erLesevisning={erLesevisning}
-                                />
-                            )}
-                        </Column>
-                    </Row>
+                    {skjemaData.length > 0 && (
+                        <FeilutbetalingForeldelsePerioder
+                            behandling={behandling}
+                            perioder={skjemaData}
+                            erLesevisning={erLesevisning}
+                        />
+                    )}
                 </StyledForeldelse>
             );
         case RessursStatus.HENTER:
diff --git a/src/frontend/komponenter/Fagsak/Foreldelse/ForeldelsePeriode/FeilutbetalingForeldelsePeriodeSkjema.tsx b/src/frontend/komponenter/Fagsak/Foreldelse/ForeldelsePeriode/FeilutbetalingForeldelsePeriodeSkjema.tsx
index f7ce75de..40d32b5f 100644
--- a/src/frontend/komponenter/Fagsak/Foreldelse/ForeldelsePeriode/FeilutbetalingForeldelsePeriodeSkjema.tsx
+++ b/src/frontend/komponenter/Fagsak/Foreldelse/ForeldelsePeriode/FeilutbetalingForeldelsePeriodeSkjema.tsx
@@ -1,12 +1,19 @@
 import * as React from 'react';
 
-import { styled } from 'styled-components';
-
-import { Column, Row } from 'nav-frontend-grid';
-
 import { ExternalLinkIcon } from '@navikt/aksel-icons';
-import { BodyLong, Heading, Link, Radio, RadioGroup, ReadMore, Textarea } from '@navikt/ds-react';
-import { ABorderStrong, ASpacing3 } from '@navikt/ds-tokens/dist/tokens';
+import {
+    BodyLong,
+    Box,
+    Heading,
+    HGrid,
+    Link,
+    Radio,
+    RadioGroup,
+    ReadMore,
+    Stack,
+    Textarea,
+    VStack,
+} from '@navikt/ds-react';
 import { Valideringsstatus } from '@navikt/familie-skjema';
 
 import {
@@ -15,7 +22,7 @@ import {
     foreldelseVurderingTyper,
 } from '../../../../kodeverk';
 import { IBehandling } from '../../../../typer/behandling';
-import { FTButton, Navigering, Spacer20, Spacer8 } from '../../../Felleskomponenter/Flytelementer';
+import { FTButton, Navigering } from '../../../Felleskomponenter/Flytelementer';
 import PeriodeOppsummering from '../../../Felleskomponenter/Periodeinformasjon/PeriodeOppsummering';
 import PeriodeController from '../../../Felleskomponenter/TilbakeTidslinje/PeriodeController/PeriodeController';
 import { useFeilutbetalingForeldelse } from '../FeilutbetalingForeldelseContext';
@@ -24,10 +31,28 @@ import { useForeldelsePeriodeSkjema } from './ForeldelsePeriodeSkjemaContext';
 import SplittPeriode from './SplittPeriode/SplittPeriode';
 import { isoStringTilDate } from '../../../../utils/dato';
 import Datovelger from '../../../Felleskomponenter/Datovelger/Datovelger';
+import { css, styled } from 'styled-components';
+
+const StyledVStack = styled(VStack)`
+    max-width: 50rem;
+    width: 100%;
+`;
+
+const stylingBredde30rem = css`
+    max-width: 30rem;
+    width: 100%;
+`;
+
+const StyledStack = styled(Stack)`
+    ${stylingBredde30rem}
+`;
 
-const StyledContainer = styled.div`
-    border: 1px solid ${ABorderStrong};
-    padding: ${ASpacing3};
+const DivMedMaksbredde = styled.div`
+    ${stylingBredde30rem}
+`;
+
+const StyledBox = styled(Box)`
+    min-width: 20rem;
 `;
 
 interface IProps {
@@ -121,14 +146,17 @@ const FeilutbetalingForeldelsePeriodeSkjema: React.FC<IProps> = ({
     };
 
     return (
-        <StyledContainer>
-            <Row>
-                <Column lg="4" md="7" sm="12">
+        <StyledBox padding="4" borderColor="border-strong" borderWidth="1">
+            <HGrid columns={'1fr 4rem'}>
+                <StyledStack
+                    justify="space-between"
+                    align={{ md: 'start', lg: 'center' }}
+                    direction={{ md: 'column', lg: 'row' }}
+                >
                     <Heading size="small" level="2">
                         Detaljer for valgt periode
                     </Heading>
-                </Column>
-                <Column lg="2" md="2" sm="6">
+
                     {!erLesevisning && (
                         <SplittPeriode
                             behandling={behandling}
@@ -136,43 +164,33 @@ const FeilutbetalingForeldelsePeriodeSkjema: React.FC<IProps> = ({
                             onBekreft={onSplitPeriode}
                         />
                     )}
-                </Column>
-                <Column lg="6" md="3" sm="6">
-                    <PeriodeController
-                        nestePeriode={() => nestePeriode(periode)}
-                        forrigePeriode={() => forrigePeriode(periode)}
-                    />
-                </Column>
-            </Row>
-            <Row>
-                <Column lg="6" md="9" sm="12">
+                </StyledStack>
+                <PeriodeController
+                    nestePeriode={() => nestePeriode(periode)}
+                    forrigePeriode={() => forrigePeriode(periode)}
+                />
+            </HGrid>
+            <StyledVStack gap="4">
+                <DivMedMaksbredde>
                     <PeriodeOppsummering
                         fom={periode.periode.fom}
                         tom={periode.periode.tom}
                         beløp={periode.feilutbetaltBeløp}
                     />
-                </Column>
-            </Row>
-            <Spacer20 />
-            <Row>
-                <Column md="8">
-                    <Textarea
-                        {...skjema.felter.begrunnelse.hentNavInputProps(skjema.visFeilmeldinger)}
-                        id={'begrunnelse'}
-                        name="begrunnelse"
-                        label={'Vurdering'}
-                        maxLength={3000}
-                        readOnly={erLesevisning}
-                        value={skjema.felter.begrunnelse.verdi}
-                        onChange={event =>
-                            skjema.felter.begrunnelse.validerOgSettFelt(event.target.value)
-                        }
-                    />
-                </Column>
-            </Row>
-            <Spacer20 />
-            <Row>
-                <Column md="5">
+                </DivMedMaksbredde>
+                <Textarea
+                    {...skjema.felter.begrunnelse.hentNavInputProps(skjema.visFeilmeldinger)}
+                    id={'begrunnelse'}
+                    name="begrunnelse"
+                    label={'Vurdering'}
+                    maxLength={3000}
+                    readOnly={erLesevisning}
+                    value={skjema.felter.begrunnelse.verdi}
+                    onChange={event =>
+                        skjema.felter.begrunnelse.validerOgSettFelt(event.target.value)
+                    }
+                />
+                <HGrid columns={{ md: 1, lg: 2 }} gap="4">
                     <RadioGroup
                         id="foreldet"
                         readOnly={erLesevisning}
@@ -193,10 +211,8 @@ const FeilutbetalingForeldelsePeriodeSkjema: React.FC<IProps> = ({
                             </Radio>
                         ))}
                     </RadioGroup>
-                </Column>
-                <Column md="5">
-                    {erMedTilleggsfrist && (
-                        <>
+                    <VStack gap="5">
+                        {erMedTilleggsfrist && (
                             <Datovelger
                                 felt={skjema.felter.oppdagelsesdato}
                                 label="Dato for når feilutbetaling ble oppdaget"
@@ -205,50 +221,40 @@ const FeilutbetalingForeldelsePeriodeSkjema: React.FC<IProps> = ({
                                 readOnly={erLesevisning}
                                 kanKunVelgeFortid
                             />
-                            <Spacer20 />
-                        </>
-                    )}
-                    {(erForeldet || erMedTilleggsfrist) && (
-                        <>
-                            <Datovelger
-                                felt={skjema.felter.foreldelsesfrist}
-                                label="Foreldelsesfrist"
-                                description={!erMedTilleggsfrist && 'Datoen kommer i vedtaksbrevet'}
-                                visFeilmeldinger={ugyldigForeldelsesfristValgt}
-                                readOnly={erLesevisning}
-                            />
-                            <Spacer8 />
-                            {!erLesevisning && (
-                                <ReadMore header="Hvordan sette foreldelsesfrist">
-                                    {lagForeldelsesfristHjelpetekst()}
-                                </ReadMore>
-                            )}
-                        </>
-                    )}
-                </Column>
-            </Row>
-            <Spacer20 />
-            {!erLesevisning && (
-                <>
-                    <Row>
-                        <Column md="8">
-                            <Navigering>
-                                <div>
-                                    <FTButton variant="primary" onClick={() => onBekreft(periode)}>
-                                        Bekreft
-                                    </FTButton>
-                                </div>
-                                <div>
-                                    <FTButton variant="secondary" onClick={lukkValgtPeriode}>
-                                        Lukk
-                                    </FTButton>
-                                </div>
-                            </Navigering>
-                        </Column>
-                    </Row>
-                </>
-            )}
-        </StyledContainer>
+                        )}
+                        {(erForeldet || erMedTilleggsfrist) && (
+                            <VStack gap="2">
+                                <Datovelger
+                                    felt={skjema.felter.foreldelsesfrist}
+                                    label="Foreldelsesfrist"
+                                    description={
+                                        !erMedTilleggsfrist && 'Datoen kommer i vedtaksbrevet'
+                                    }
+                                    visFeilmeldinger={ugyldigForeldelsesfristValgt}
+                                    readOnly={erLesevisning}
+                                />
+                                {!erLesevisning && (
+                                    <ReadMore header="Hvordan sette foreldelsesfrist">
+                                        {lagForeldelsesfristHjelpetekst()}
+                                    </ReadMore>
+                                )}
+                            </VStack>
+                        )}
+                    </VStack>
+                </HGrid>
+
+                {!erLesevisning && (
+                    <Navigering>
+                        <FTButton variant="primary" onClick={() => onBekreft(periode)}>
+                            Bekreft
+                        </FTButton>
+                        <FTButton variant="secondary" onClick={lukkValgtPeriode}>
+                            Lukk
+                        </FTButton>
+                    </Navigering>
+                )}
+            </StyledVStack>
+        </StyledBox>
     );
 };
 
diff --git a/src/frontend/komponenter/Fagsak/Foreldelse/ForeldelsePeriode/FeilutbetalingForeldelsePerioder.tsx b/src/frontend/komponenter/Fagsak/Foreldelse/ForeldelsePeriode/FeilutbetalingForeldelsePerioder.tsx
index 7d012a35..ecde4ef8 100644
--- a/src/frontend/komponenter/Fagsak/Foreldelse/ForeldelsePeriode/FeilutbetalingForeldelsePerioder.tsx
+++ b/src/frontend/komponenter/Fagsak/Foreldelse/ForeldelsePeriode/FeilutbetalingForeldelsePerioder.tsx
@@ -2,18 +2,17 @@ import * as React from 'react';
 
 import classNames from 'classnames';
 
-import { Column, Row } from 'nav-frontend-grid';
-
+import { VStack } from '@navikt/ds-react';
 import { type Periode } from '@navikt/familie-tidslinje';
 
+import FeilutbetalingForeldelsePeriodeSkjema from './FeilutbetalingForeldelsePeriodeSkjema';
 import { Foreldelsevurdering } from '../../../../kodeverk';
 import { IBehandling } from '../../../../typer/behandling';
 import { ForeldelsePeriode } from '../../../../typer/feilutbetalingtyper';
-import { FTButton, Navigering, Spacer20 } from '../../../Felleskomponenter/Flytelementer';
+import { FTButton, Navigering } from '../../../Felleskomponenter/Flytelementer';
 import TilbakeTidslinje from '../../../Felleskomponenter/TilbakeTidslinje/TilbakeTidslinje';
 import { useFeilutbetalingForeldelse } from '../FeilutbetalingForeldelseContext';
 import { ForeldelsePeriodeSkjemeData } from '../typer/feilutbetalingForeldelse';
-import FeilutbetalingForeldelsePeriodeSkjema from './FeilutbetalingForeldelsePeriodeSkjema';
 
 const finnClassNamePeriode = (periode: ForeldelsePeriode, aktivPeriode: boolean) => {
     const aktivPeriodeCss = aktivPeriode ? 'aktivPeriode' : '';
@@ -99,55 +98,36 @@ const FeilutbetalingForeldelsePerioder: React.FC<IProps> = ({
     };
 
     return perioder && tidslinjeRader ? (
-        <>
-            <Row>
-                <Column xs="12">
-                    <TilbakeTidslinje rader={tidslinjeRader} onSelectPeriode={onSelectPeriode} />
-                </Column>
-            </Row>
+        <VStack gap="5">
+            <TilbakeTidslinje rader={tidslinjeRader} onSelectPeriode={onSelectPeriode} />
+
             {!!valgtPeriode && (
-                <>
-                    <Spacer20 />
-                    <Row>
-                        <Column xs="12">
-                            <FeilutbetalingForeldelsePeriodeSkjema
-                                behandling={behandling}
-                                periode={valgtPeriode}
-                                erLesevisning={erLesevisning}
-                            />
-                        </Column>
-                    </Row>
-                </>
+                <FeilutbetalingForeldelsePeriodeSkjema
+                    behandling={behandling}
+                    periode={valgtPeriode}
+                    erLesevisning={erLesevisning}
+                />
             )}
-            <Spacer20 />
-            <Row>
-                <Column md="12">
-                    <Navigering>
-                        <div>
-                            {erAutoutført || (stegErBehandlet && erLesevisning) ? (
-                                <FTButton variant="primary" onClick={gåTilNeste}>
-                                    Neste
-                                </FTButton>
-                            ) : (
-                                <FTButton
-                                    variant="primary"
-                                    onClick={sendInnSkjema}
-                                    loading={senderInn}
-                                    disabled={disableBekreft}
-                                >
-                                    {stegErBehandlet ? 'Neste' : 'Bekreft og fortsett'}
-                                </FTButton>
-                            )}
-                        </div>
-                        <div>
-                            <FTButton variant="secondary" onClick={gåTilForrige}>
-                                Forrige
-                            </FTButton>
-                        </div>
-                    </Navigering>
-                </Column>
-            </Row>
-        </>
+            <Navigering>
+                {erAutoutført || (stegErBehandlet && erLesevisning) ? (
+                    <FTButton variant="primary" onClick={gåTilNeste}>
+                        Neste
+                    </FTButton>
+                ) : (
+                    <FTButton
+                        variant="primary"
+                        onClick={sendInnSkjema}
+                        loading={senderInn}
+                        disabled={disableBekreft}
+                    >
+                        {stegErBehandlet ? 'Neste' : 'Bekreft og fortsett'}
+                    </FTButton>
+                )}
+                <FTButton variant="secondary" onClick={gåTilForrige}>
+                    Forrige
+                </FTButton>
+            </Navigering>
+        </VStack>
     ) : null;
 };
 
diff --git a/src/frontend/komponenter/Fagsak/Verge/VergeContainer.tsx b/src/frontend/komponenter/Fagsak/Verge/VergeContainer.tsx
index 69cf1bd0..e7f3a562 100644
--- a/src/frontend/komponenter/Fagsak/Verge/VergeContainer.tsx
+++ b/src/frontend/komponenter/Fagsak/Verge/VergeContainer.tsx
@@ -2,27 +2,32 @@ import * as React from 'react';
 
 import { styled } from 'styled-components';
 
-import { Column, Row } from 'nav-frontend-grid';
-
 import {
     BodyLong,
     ErrorMessage,
     Heading,
+    HGrid,
     Loader,
     Select,
     Textarea,
     TextField,
+    VStack,
 } from '@navikt/ds-react';
 
 import { useBehandling } from '../../../context/BehandlingContext';
 import { Vergetype, vergetyper } from '../../../kodeverk/verge';
 import { hentFrontendFeilmelding } from '../../../utils';
-import { FTButton, Navigering, Spacer20, Spacer8 } from '../../Felleskomponenter/Flytelementer';
+import { FTButton, Navigering } from '../../Felleskomponenter/Flytelementer';
 import Steginformasjon from '../../Felleskomponenter/Steginformasjon/StegInformasjon';
 import { useVerge } from './VergeContext';
+import { ASpacing3 } from '@navikt/ds-tokens/dist/tokens';
 
 const StyledVerge = styled.div`
-    padding: 10px;
+    padding: ${ASpacing3};
+`;
+
+const StyledVStack = styled(VStack)`
+    max-width: 30rem;
 `;
 
 const VergeContainer: React.FC = () => {
@@ -55,9 +60,9 @@ const VergeContainer: React.FC = () => {
                     />
                 </div>
             ) : (
-                <>
+                <StyledVStack gap="5">
                     {erAutoutført && (
-                        <BodyLong size="small" spacing>
+                        <BodyLong size="small">
                             Automatisk vurdert. Verge er kopiert fra fagsystemet.
                         </BodyLong>
                     )}
@@ -65,125 +70,88 @@ const VergeContainer: React.FC = () => {
                         behandletSteg={stegErBehandlet}
                         infotekst={'Fyll ut og kontroller vergeopplysninger'}
                     />
-                    <Spacer20 />
-                    <Row>
-                        <Column sm="12" md="6" lg="3">
-                            <Select
-                                {...skjema.felter.vergetype.hentNavInputProps(
-                                    skjema.visFeilmeldinger
-                                )}
-                                id="vergeType"
-                                label={'Vergetype'}
-                                readOnly={erLesevisning}
-                                value={skjema.felter.vergetype.verdi}
-                                onChange={event => onChangeVergeType(event)}
-                            >
-                                <option disabled={true} value={''}>
-                                    Velg vergetype
+                    <Select
+                        {...skjema.felter.vergetype.hentNavInputProps(skjema.visFeilmeldinger)}
+                        id="vergeType"
+                        label={'Vergetype'}
+                        readOnly={erLesevisning}
+                        value={skjema.felter.vergetype.verdi}
+                        onChange={event => onChangeVergeType(event)}
+                    >
+                        <option disabled={true} value={''}>
+                            Velg vergetype
+                        </option>
+                        {Object.values(Vergetype)
+                            .filter(type => type !== Vergetype.UDEFINERT)
+                            .map(opt => (
+                                <option key={opt} value={opt}>
+                                    {vergetyper[opt]}
                                 </option>
-                                {Object.values(Vergetype)
-                                    .filter(type => type !== Vergetype.UDEFINERT)
-                                    .map(opt => (
-                                        <option key={opt} value={opt}>
-                                            {vergetyper[opt]}
-                                        </option>
-                                    ))}
-                            </Select>
-                        </Column>
-                    </Row>
+                            ))}
+                    </Select>
                     {vergetypeValgt && (
-                        <>
-                            <Spacer8 />
-                            <Row>
-                                <Column sm="12" md="6" lg="3">
-                                    <TextField
-                                        {...skjema.felter.navn.hentNavInputProps(
-                                            skjema.visFeilmeldinger
-                                        )}
-                                        label={'Navn'}
-                                        readOnly={erLesevisning}
-                                        value={skjema.felter.navn.verdi}
-                                        onChange={event =>
-                                            skjema.felter.navn.validerOgSettFelt(event.target.value)
-                                        }
-                                    />
-                                </Column>
-                                <Column sm="12" md="6" lg="3">
-                                    {skjema.felter.vergetype.verdi === Vergetype.ADVOKAT ? (
-                                        <TextField
-                                            {...skjema.felter.organisasjonsnummer.hentNavInputProps(
-                                                skjema.visFeilmeldinger
-                                            )}
-                                            label={'Organisasjonsnummer'}
-                                            readOnly={erLesevisning}
-                                            value={skjema.felter.organisasjonsnummer.verdi}
-                                            onChange={event =>
-                                                skjema.felter.organisasjonsnummer.validerOgSettFelt(
-                                                    event.target.value
-                                                )
-                                            }
-                                        />
-                                    ) : (
-                                        <TextField
-                                            {...skjema.felter.fødselsnummer.hentNavInputProps(
-                                                skjema.visFeilmeldinger
-                                            )}
-                                            label={'Fødselsnummer'}
-                                            readOnly={erLesevisning}
-                                            value={skjema.felter.fødselsnummer.verdi}
-                                            onChange={event =>
-                                                skjema.felter.fødselsnummer.validerOgSettFelt(
-                                                    event.target.value
-                                                )
-                                            }
-                                        />
-                                    )}
-                                </Column>
-                            </Row>
-                        </>
-                    )}
-                    <Spacer20 />
-                    <Row>
-                        <Column md="12" lg="6">
-                            <Textarea
-                                {...skjema.felter.begrunnelse.hentNavInputProps(
-                                    skjema.visFeilmeldinger
-                                )}
-                                label={'Begrunn endringene'}
-                                value={skjema.felter.begrunnelse.verdi}
+                        <HGrid columns={{ lg: 2, md: 1 }} gap="4" align="start">
+                            <TextField
+                                {...skjema.felter.navn.hentNavInputProps(skjema.visFeilmeldinger)}
+                                label={'Navn'}
                                 readOnly={erLesevisning}
+                                value={skjema.felter.navn.verdi}
                                 onChange={event =>
-                                    skjema.felter.begrunnelse.validerOgSettFelt(event.target.value)
+                                    skjema.felter.navn.validerOgSettFelt(event.target.value)
                                 }
-                                maxLength={400}
                             />
-                        </Column>
-                    </Row>
-                    {feilmelding && (
-                        <>
-                            <Spacer8 />
-                            <div className="skjemaelement__feilmelding">
-                                <ErrorMessage size="small">{feilmelding}</ErrorMessage>
-                            </div>
-                        </>
+                            {skjema.felter.vergetype.verdi === Vergetype.ADVOKAT ? (
+                                <TextField
+                                    {...skjema.felter.organisasjonsnummer.hentNavInputProps(
+                                        skjema.visFeilmeldinger
+                                    )}
+                                    label={'Organisasjonsnummer'}
+                                    readOnly={erLesevisning}
+                                    value={skjema.felter.organisasjonsnummer.verdi}
+                                    onChange={event =>
+                                        skjema.felter.organisasjonsnummer.validerOgSettFelt(
+                                            event.target.value
+                                        )
+                                    }
+                                />
+                            ) : (
+                                <TextField
+                                    {...skjema.felter.fødselsnummer.hentNavInputProps(
+                                        skjema.visFeilmeldinger
+                                    )}
+                                    label={'Fødselsnummer'}
+                                    readOnly={erLesevisning}
+                                    value={skjema.felter.fødselsnummer.verdi}
+                                    onChange={event =>
+                                        skjema.felter.fødselsnummer.validerOgSettFelt(
+                                            event.target.value
+                                        )
+                                    }
+                                />
+                            )}
+                        </HGrid>
                     )}
-                    <Spacer20 />
-                    <Row>
-                        <Column xs="12" md="6">
-                            <Navigering>
-                                <div>
-                                    <FTButton
-                                        variant="primary"
-                                        onClick={sendInn}
-                                        disabled={erLesevisning && !stegErBehandlet}
-                                    >
-                                        {stegErBehandlet ? 'Neste' : 'Bekreft og fortsett'}
-                                    </FTButton>
-                                </div>
-                            </Navigering>
-                        </Column>
-                    </Row>
-                </>
+                    <Textarea
+                        {...skjema.felter.begrunnelse.hentNavInputProps(skjema.visFeilmeldinger)}
+                        label={'Begrunn endringene'}
+                        value={skjema.felter.begrunnelse.verdi}
+                        readOnly={erLesevisning}
+                        onChange={event =>
+                            skjema.felter.begrunnelse.validerOgSettFelt(event.target.value)
+                        }
+                        maxLength={400}
+                    />
+                    {feilmelding && <ErrorMessage size="small">{feilmelding}</ErrorMessage>}
+                    <Navigering>
+                        <FTButton
+                            variant="primary"
+                            onClick={sendInn}
+                            disabled={erLesevisning && !stegErBehandlet}
+                        >
+                            {stegErBehandlet ? 'Neste' : 'Bekreft og fortsett'}
+                        </FTButton>
+                    </Navigering>
+                </StyledVStack>
             )}
         </StyledVerge>
     );
diff --git "a/src/frontend/komponenter/Fagsak/Vilk\303\245rsvurdering/Vilk\303\245rsvurderingContainer.tsx" "b/src/frontend/komponenter/Fagsak/Vilk\303\245rsvurdering/Vilk\303\245rsvurderingContainer.tsx"
index 4a06c293..bb95b5e2 100644
--- "a/src/frontend/komponenter/Fagsak/Vilk\303\245rsvurdering/Vilk\303\245rsvurderingContainer.tsx"
+++ "b/src/frontend/komponenter/Fagsak/Vilk\303\245rsvurdering/Vilk\303\245rsvurderingContainer.tsx"
@@ -23,9 +23,10 @@ import {
     useFeilutbetalingVilkårsvurdering,
 } from './FeilutbetalingVilkårsvurderingContext';
 import VilkårsvurderingPerioder from './VilkårsvurderingPerioder';
+import { ASpacing3 } from '@navikt/ds-tokens/dist/tokens';
 
 const StyledVilkårsvurdering = styled.div`
-    padding: 10px;
+    padding: ${ASpacing3};
 `;
 
 const HenterContainer = styled(StyledVilkårsvurdering)`
diff --git a/src/frontend/komponenter/Felleskomponenter/Periodeinformasjon/PeriodeOppsummering.tsx b/src/frontend/komponenter/Felleskomponenter/Periodeinformasjon/PeriodeOppsummering.tsx
index 2e04d57d..77615e0e 100644
--- a/src/frontend/komponenter/Felleskomponenter/Periodeinformasjon/PeriodeOppsummering.tsx
+++ b/src/frontend/komponenter/Felleskomponenter/Periodeinformasjon/PeriodeOppsummering.tsx
@@ -3,9 +3,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { styled } from 'styled-components';
 
-import { Column, Row } from 'nav-frontend-grid';
-
-import { BodyShort, Label } from '@navikt/ds-react';
+import { BodyShort, HGrid, Label } from '@navikt/ds-react';
 import {
     AFontWeightBold,
     AOrange100,
@@ -26,7 +24,7 @@ const StyledContainer = styled.div`
     margin-top: ${ASpacing3};
 `;
 
-const SumRad = styled(Row)`
+const RadTotaltFeilutbetalt = styled(HGrid)`
     margin-top: ${ASpacing5};
 
     .redNumber {
@@ -46,29 +44,19 @@ interface IProps {
 const PeriodeOppsummering: React.FC<IProps> = ({ fom, tom, beløp, hendelsetype }) => {
     return (
         <StyledContainer>
-            <Row>
-                <Column xs="7">
-                    <Label size="small">{`${formatterDatostring(fom)} - ${formatterDatostring(
-                        tom
-                    )}`}</Label>
-                </Column>
-                <Column xs="5">
-                    <BodyShort size="small">{hentPeriodelengde(fom, tom)}</BodyShort>
-                </Column>
-            </Row>
-            <SumRad>
-                <Column xs="7">
-                    <BodyShort size="small">
-                        Feilutbetaling:
-                        <span className={classNames('redNumber')}>{formatCurrencyNoKr(beløp)}</span>
-                    </BodyShort>
-                </Column>
-                <Column xs="5">
-                    {hendelsetype && (
-                        <BodyShort size="small">{hendelsetyper[hendelsetype]}</BodyShort>
-                    )}
-                </Column>
-            </SumRad>
+            <HGrid columns={2} gap="4">
+                <Label size="small">{`${formatterDatostring(fom)} - ${formatterDatostring(
+                    tom
+                )}`}</Label>
+                <BodyShort size="small">{hentPeriodelengde(fom, tom)}</BodyShort>
+            </HGrid>
+            <RadTotaltFeilutbetalt columns={2} gap="4">
+                <BodyShort size="small">
+                    Feilutbetaling:
+                    <span className={classNames('redNumber')}>{formatCurrencyNoKr(beløp)}</span>
+                </BodyShort>
+                {hendelsetype && <BodyShort size="small">{hendelsetyper[hendelsetype]}</BodyShort>}
+            </RadTotaltFeilutbetalt>
         </StyledContainer>
     );
 };