diff --git a/src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabellVtao.tsx b/src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabellVtao.tsx
index cedb5fb7..a37320e2 100644
--- a/src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabellVtao.tsx
+++ b/src/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/VisningTilskuddsperioderTabellVtao.tsx
@@ -1,14 +1,14 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { BodyShort, Label } from '@navikt/ds-react';
 import { TilskuddsPeriode } from '@/types/avtale';
-import { formatterDato, NORSK_DATO_FORMAT } from '@/utils/datoUtils';
+import { formaterDatoNy, formaterPeriodeNy, NORSK_DATO_FORMAT_NY } from '@/utils/datoUtils';
 import EtikettStatus from '@/BeslutterSide/EtikettStatus';
 import { formaterPenger } from '@/utils/PengeUtils';
 import InfoRundtTilskuddsperioder from '@/AvtaleSide/steg/BeregningTilskudd/visningTilskuddsperioder/InfoRundtTilskuddsperioder';
 import BEMHelper from '@/utils/bem';
 import { InnloggetBrukerContext } from '@/InnloggingBoundary/InnloggingBoundary';
 import { AvtaleContext } from '@/AvtaleProvider';
-import moment from 'moment';
+import { getYear, addDays } from 'date-fns';
 import {
     antallAktiveTilskuddsperioder,
     getIndexVisningForTilskuddsperiode,
@@ -18,17 +18,62 @@ interface Properties {
     className: string;
 }
 
+const tilskuddsperiodeRad = ({
+    key,
+    cls,
+    avtaleOpprettet,
+    erNavAnsatt,
+    periode,
+}: {
+    key?: number;
+    cls: any;
+    avtaleOpprettet: Date;
+    erNavAnsatt: boolean;
+    periode: TilskuddsPeriode;
+}) => {
+    const periodeAar = getYear(new Date(periode.startDato));
+    // Hvis tilskuddsperioden gjelder for et tidligere år enn når avtalen er opprettet,
+    // så vil vi vise en liten notis om at VTAO-satsen er basert på et lavere beløp
+    const erITidligereAar = periodeAar < getYear(avtaleOpprettet);
+    return (
+        <div key={key} className={cls.element('tabell-innslag')}>
+            <div>
+                <BodyShort size="small">
+                    {formaterPeriodeNy(periode.startDato, periode.sluttDato, NORSK_DATO_FORMAT_NY)}
+                </BodyShort>
+                {erITidligereAar && (
+                    <BodyShort size="small" textColor="subtle">
+                        Sats for {periodeAar}
+                    </BodyShort>
+                )}
+            </div>
+            {erNavAnsatt && (
+                <BodyShort>
+                    <EtikettStatus tilskuddsperiodestatus={periode.status} size="small" />
+                </BodyShort>
+            )}
+            <BodyShort size="small" style={{ minWidth: '4rem' }}>
+                {periode.beløp !== null ? formaterPenger(periode.beløp) : '-'}
+            </BodyShort>
+            <BodyShort size="small" style={{ minWidth: '4rem' }}>
+                {formaterDatoNy(addDays(new Date(periode.sluttDato), 3).toString(), 'dd MMM yyyy')}
+            </BodyShort>
+        </div>
+    );
+};
+
 const VisningTilskuddsperioderTabellVtao: React.FC<Properties> = ({ className }: Properties) => {
     const [visAllePerioder, setVisAllePerioder] = useState(false);
     const innloggetBruker = useContext(InnloggetBrukerContext);
     const { avtale } = useContext(AvtaleContext);
     const { startIndexVisning, sluttIndexVisning } = getIndexVisningForTilskuddsperiode(avtale, visAllePerioder);
     const cls = BEMHelper(className);
-    const sistePeriode = avtale.tilskuddPeriode.at(antallAktiveTilskuddsperioder(avtale) - 1);
-    const sistePeriodeAar = sistePeriode ? moment(sistePeriode?.startDato).year() : undefined;
-    const sistePeriodeErITidligereAar = sistePeriodeAar
-        ? sistePeriodeAar < moment(avtale.opprettetTidspunkt).year()
-        : false;
+    const sistePeriode =
+        antallAktiveTilskuddsperioder(avtale) - 1 > sluttIndexVisning
+            ? avtale.tilskuddPeriode.at(antallAktiveTilskuddsperioder(avtale) - 1)
+            : undefined;
+    const avtaleOpprettet = new Date(avtale.opprettetTidspunkt);
+    const erNavAnsatt = innloggetBruker.erNavAnsatt;
 
     return (
         <div className={cls.element('tabell')}>
@@ -41,67 +86,21 @@ const VisningTilskuddsperioderTabellVtao: React.FC<Properties> = ({ className }:
             {avtale.tilskuddPeriode
                 .filter((p: TilskuddsPeriode) => p.aktiv)
                 .slice(startIndexVisning, sluttIndexVisning)
-                .map((periode: TilskuddsPeriode, index: number) => {
-                    const periodeAar = moment(periode.startDato).year();
-                    const erITidligereAar = periodeAar < moment(avtale.opprettetTidspunkt).year();
-                    return (
-                        <div>
-                            <div key={index} className={cls.element('tabell-innslag')}>
-                                <div>
-                                    <BodyShort size="small">
-                                        {formatterDato(periode.startDato, NORSK_DATO_FORMAT)} -{' '}
-                                        {formatterDato(periode.sluttDato, NORSK_DATO_FORMAT)}
-                                    </BodyShort>
-                                    {erITidligereAar && (
-                                        <BodyShort size="small" textColor="subtle">
-                                            Sats for {periodeAar}
-                                        </BodyShort>
-                                    )}
-                                </div>
-                                {innloggetBruker.erNavAnsatt && (
-                                    <BodyShort>
-                                        <EtikettStatus tilskuddsperiodestatus={periode.status} size="small" />
-                                    </BodyShort>
-                                )}
-                                <BodyShort size="small" style={{ minWidth: '4rem' }}>
-                                    {periode.beløp !== null ? formaterPenger(periode.beløp) : '-'}
-                                </BodyShort>
-                                <BodyShort size="small" style={{ minWidth: '4rem' }}>
-                                    {formatterDato(moment(periode.sluttDato).add(3, 'days').toString(), 'DD MMM YYYY')}
-                                </BodyShort>
-                            </div>
-                        </div>
-                    );
+                .map((periode: TilskuddsPeriode, key: number) => {
+                    return tilskuddsperiodeRad({
+                        key,
+                        periode,
+                        avtaleOpprettet,
+                        cls,
+                        erNavAnsatt,
+                    });
                 })}
             {!visAllePerioder && sistePeriode && (
                 <div>
                     <div key={1} className={cls.element('tabell-innslag')}>
                         ...
                     </div>
-                    <div className={cls.element('tabell-innslag')}>
-                        <div>
-                            <BodyShort size="small">
-                                {formatterDato(sistePeriode.startDato, NORSK_DATO_FORMAT)} -{' '}
-                                {formatterDato(sistePeriode.sluttDato, NORSK_DATO_FORMAT)}
-                            </BodyShort>
-                            {sistePeriodeErITidligereAar && (
-                                <BodyShort size="small" textColor="subtle">
-                                    Sats for {sistePeriodeAar}
-                                </BodyShort>
-                            )}
-                        </div>
-                        {innloggetBruker.erNavAnsatt && (
-                            <BodyShort>
-                                <EtikettStatus tilskuddsperiodestatus={sistePeriode.status} size="small" />
-                            </BodyShort>
-                        )}
-                        <BodyShort size="small" style={{ minWidth: '4rem' }}>
-                            {sistePeriode.beløp !== null ? formaterPenger(sistePeriode.beløp) : '-'}
-                        </BodyShort>
-                        <BodyShort size="small" style={{ minWidth: '4rem' }}>
-                            {formatterDato(moment(sistePeriode.sluttDato).add(3, 'days').toString(), 'DD MMM YYYY')}
-                        </BodyShort>
-                    </div>
+                    {tilskuddsperiodeRad({ cls, erNavAnsatt, avtaleOpprettet, periode: sistePeriode })}
                 </div>
             )}
             <InfoRundtTilskuddsperioder
diff --git a/src/utils/datoUtils.ts b/src/utils/datoUtils.ts
index 32f17a3e..c4124112 100644
--- a/src/utils/datoUtils.ts
+++ b/src/utils/datoUtils.ts
@@ -1,6 +1,8 @@
 import moment from 'moment';
 import 'moment/dist/locale/nb';
 moment.locale('nb');
+import { format } from 'date-fns';
+import { nb } from 'date-fns/locale';
 
 export const datoIkkeTilbakeITid = (dato: Date) => {
     return moment().isSameOrBefore(dato, 'date');
@@ -31,9 +33,26 @@ export const accurateHumanize = (duration: moment.Duration, accuracy: number = 2
         .join(', ');
 };
 
+/**
+ * @deprecated
+ */
 export const NORSK_DATO_OG_TID_FORMAT = 'DD.MM.YYYY HH:mm';
+/**
+ * @deprecated
+ */
 export const NORSK_DATO_FORMAT = 'DD.MM.YYYY';
+/**
+ * For bruk når man formaterer med date-fns (ikke moment)
+ */
+export const NORSK_DATO_FORMAT_NY = 'dd.MM.yyyy';
 
+/**
+ * Formater en dato gitt en formateringsstring.
+ *
+ * Bør fases ut til fordel for `formaterDatoNy`
+ *
+ * @deprecated
+ */
 export const formatterDato = (dato: string, format: string = NORSK_DATO_OG_TID_FORMAT) => {
     try {
         if (dato === '-999999999-01-01') return '';
@@ -44,6 +63,37 @@ export const formatterDato = (dato: string, format: string = NORSK_DATO_OG_TID_F
     }
 };
 
+/**
+ * Formater en dato gitt en formateringsstring.
+ *
+ * Bruker date-fns, og ikke moment.
+ */
+export const formaterDatoNy = (dato: string, formatString: string = NORSK_DATO_OG_TID_FORMAT) => {
+    try {
+        if (dato === '-999999999-01-01') return '';
+        const formatertDato = format(dato, formatString, { locale: nb });
+        return !formatertDato.includes('NaN') ? formatertDato : dato;
+    } catch (e) {
+        return dato;
+    }
+};
+
+/**
+ * Formater en (tilskudds)periode gitt en formateringsstring.
+ *
+ * Bruker date-fns, og ikke moment.
+ */
+export const formaterPeriodeNy = (fra: string, til: string, format: string = NORSK_DATO_FORMAT) => {
+    return formaterDatoNy(fra, format) + ' – ' + formaterDatoNy(til, format);
+};
+
+/**
+ * Formater en (tilskudds)periode gitt en formateringsstring.
+ *
+ * Bør fases ut til fordel for `formaterPeriodeNy`.
+ *
+ * @deprecated
+ */
 export const formatterPeriode = (fra: string, til: string, format: string = NORSK_DATO_FORMAT) => {
     return formatterDato(fra, format) + ' – ' + formatterDato(til, format);
 };