diff --git "a/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/Skole\303\245rsperiode.tsx" "b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/Skole\303\245rsperiode.tsx"
new file mode 100644
index 000000000..b833a272f
--- /dev/null
+++ "b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/Skole\303\245rsperiode.tsx"
@@ -0,0 +1,30 @@
+import React from 'react';
+import { FormErrors, Valideringsfunksjon } from '../../../../../App/hooks/felles/useFormState';
+import {
+    IPeriodeSkolepenger,
+    ISkoleårsperiodeSkolepenger,
+    SkolepengerUtgift,
+} from '../../../../../App/typer/vedtak';
+import { InnvilgeVedtakForm } from './Vedtaksform';
+
+interface Props {
+    customValidate: (fn: Valideringsfunksjon<InnvilgeVedtakForm>) => boolean;
+    fjernSkoleårsperiode: () => void;
+    låsteUtgiftIder: string[];
+    oppdaterSkoleårsperiode: (
+        property: keyof ISkoleårsperiodeSkolepenger,
+        value: ISkoleårsperiodeSkolepenger[keyof ISkoleårsperiodeSkolepenger]
+    ) => void;
+    oppdaterValideringsfeil: (
+        property: keyof ISkoleårsperiodeSkolepenger,
+        oppdaterteFeil: FormErrors<SkolepengerUtgift | IPeriodeSkolepenger>[]
+    ) => void;
+    skoleårsperiode: ISkoleårsperiodeSkolepenger;
+    valideringsfeil: FormErrors<ISkoleårsperiodeSkolepenger> | undefined;
+}
+
+const Skoleårsperiode: React.FC<Props> = () => {
+    return <div></div>;
+};
+
+export default Skoleårsperiode;
diff --git "a/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/Skole\303\245rsperioder.tsx" "b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/Skole\303\245rsperioder.tsx"
index f7604a1cd..18c825949 100644
--- "a/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/Skole\303\245rsperioder.tsx"
+++ "b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/Skole\303\245rsperioder.tsx"
@@ -1,7 +1,100 @@
-import React from 'react';
+import { ISkoleårsperiodeSkolepenger } from '../../../../../App/typer/vedtak';
+import React, { Dispatch, SetStateAction } from 'react';
+import { useBehandling } from '../../../../../App/context/BehandlingContext';
+import { ListState } from '../../../../../App/hooks/felles/useListState';
+import { FormErrors, Valideringsfunksjon } from '../../../../../App/hooks/felles/useFormState';
+import { InnvilgeVedtakForm } from './VedtaksformSkolepenger';
+import { useApp } from '../../../../../App/context/AppContext';
+import { VEDTAK_OG_BEREGNING } from '../../Felles/konstanter';
+import { tomSkoleårsperiodeSkolepenger } from '../typer';
+import { oppdaterValideringsfeil } from '../utils';
+import LeggTilKnapp from '../../../../../Felles/Knapper/LeggTilKnapp';
+import Skoleårsperiode from './Skoleårsperiode';
 
-const Skoleårsperioder: React.FC = () => {
-    return <></>;
+interface Props {
+    customValidate: (fn: Valideringsfunksjon<InnvilgeVedtakForm>) => boolean;
+    skoleårsperioder: ListState<ISkoleårsperiodeSkolepenger>;
+    låsteUtgiftIder: string[];
+    valideringsfeil?: FormErrors<InnvilgeVedtakForm>['skoleårsperioder'];
+    settValideringsFeil: Dispatch<SetStateAction<FormErrors<InnvilgeVedtakForm>>>;
+    oppdaterHarUtførtBeregning: (beregningUtført: boolean) => void;
+}
+
+const Skoleårsperioder: React.FC<Props> = ({
+    customValidate,
+    skoleårsperioder,
+    valideringsfeil,
+    settValideringsFeil,
+    oppdaterHarUtførtBeregning,
+    låsteUtgiftIder,
+}) => {
+    const { behandlingErRedigerbar } = useBehandling();
+    const { settIkkePersistertKomponent } = useApp();
+
+    const fjernSkoleårsperiode = (index: number) => {
+        skoleårsperioder.remove(index);
+        settValideringsFeil((prevState: FormErrors<InnvilgeVedtakForm>) => ({
+            ...prevState,
+            skoleårsperioder: (prevState.skoleårsperioder || []).filter((_, i) => index !== i),
+        }));
+        settIkkePersistertKomponent(VEDTAK_OG_BEREGNING);
+        oppdaterHarUtførtBeregning(false);
+    };
+
+    const oppdaterSkoleårsperiode = <T extends ISkoleårsperiodeSkolepenger>(
+        index: number,
+        property: keyof T,
+        value: T[keyof T]
+    ) => {
+        const skoleårsperiode = skoleårsperioder.value[index];
+        skoleårsperioder.update({ ...skoleårsperiode, [property]: value }, index);
+        settIkkePersistertKomponent(VEDTAK_OG_BEREGNING);
+        oppdaterHarUtførtBeregning(false);
+    };
+
+    return (
+        <>
+            {skoleårsperioder.value.map((skoleårsperiode, index) => {
+                // const inneholderLåsteUtgifter = skoleårsperiode.utgiftsperioder.some(
+                //     (utgift) => låsteUtgiftIder.indexOf(utgift.id) > -1
+                // );
+                // const skalViseFjernKnapp =
+                //     behandlingErRedigerbar && index !== 0 && !inneholderLåsteUtgifter;
+                return (
+                    <Skoleårsperiode
+                        låsteUtgiftIder={låsteUtgiftIder}
+                        customValidate={customValidate}
+                        fjernSkoleårsperiode={() => fjernSkoleårsperiode(index)}
+                        key={index}
+                        skoleårsperiode={skoleårsperiode}
+                        oppdaterSkoleårsperiode={(
+                            property: keyof ISkoleårsperiodeSkolepenger,
+                            value: ISkoleårsperiodeSkolepenger[keyof ISkoleårsperiodeSkolepenger]
+                        ) => oppdaterSkoleårsperiode(index, property, value)}
+                        oppdaterValideringsfeil={(
+                            property: keyof ISkoleårsperiodeSkolepenger,
+                            oppdaterteFeil
+                        ) =>
+                            oppdaterValideringsfeil(
+                                settValideringsFeil,
+                                index,
+                                property,
+                                oppdaterteFeil
+                            )
+                        }
+                        valideringsfeil={valideringsfeil && valideringsfeil[index]}
+                    />
+                );
+            })}
+            {behandlingErRedigerbar && (
+                <LeggTilKnapp
+                    onClick={() => skoleårsperioder.push(tomSkoleårsperiodeSkolepenger())}
+                    knappetekst="Legg til nytt skoleår"
+                    variant="tertiary"
+                />
+            )}
+        </>
+    );
 };
 
 export default Skoleårsperioder;
diff --git "a/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/VisEllerEndreSkole\303\245rsperioder.tsx" "b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/VisEllerEndreSkole\303\245rsperioder.tsx"
index 09edc2437..1d1af5dfe 100644
--- "a/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/VisEllerEndreSkole\303\245rsperioder.tsx"
+++ "b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/InnvilgetSkolepenger/VisEllerEndreSkole\303\245rsperioder.tsx"
@@ -35,7 +35,14 @@ interface Props {
     oppdaterHarUtførtBeregning: (beregningUtført: boolean) => void;
 }
 
-const VisEllerEndreSkoleårsperioder: React.FC<Props> = ({ skoleårsperioder }) => {
+const VisEllerEndreSkoleårsperioder: React.FC<Props> = ({
+    customValidate,
+    skoleårsperioder,
+    låsteUtgiftIder,
+    valideringsfeil,
+    settValideringsFeil,
+    oppdaterHarUtførtBeregning,
+}) => {
     const { behandlingErRedigerbar } = useBehandling();
     const antallSkoleår = skoleårsperioder.value.length;
 
@@ -60,7 +67,16 @@ const VisEllerEndreSkoleårsperioder: React.FC<Props> = ({ skoleårsperioder })
                 </Container>
             );
         case Visningsmodus.VISNING:
-            return <Skoleårsperioder />;
+            return (
+                <Skoleårsperioder
+                    customValidate={customValidate}
+                    skoleårsperioder={skoleårsperioder}
+                    låsteUtgiftIder={låsteUtgiftIder}
+                    valideringsfeil={valideringsfeil}
+                    settValideringsFeil={settValideringsFeil}
+                    oppdaterHarUtførtBeregning={oppdaterHarUtførtBeregning}
+                />
+            );
     }
 };
 
diff --git a/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/utils.ts b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/utils.ts
index fc7dcbb97..008485ed1 100644
--- a/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/utils.ts
+++ b/src/frontend/Komponenter/Behandling/VedtakOgBeregning/Skolepenger/utils.ts
@@ -37,7 +37,7 @@ export const oppdaterValideringsfeil = <
     index: number,
     property: keyof T,
     // @ts-ignore
-    formErrors: FormErrors<T2 extends Array<infer U> ? U[] : T2>
+    formErrors: T2 extends Array<infer U> ? FormErrors<U>[] : FormErrors<T2>
 ) => {
     settValideringsFeil((prevState: FormErrors<InnvilgeVedtakForm>) => {
         const skoleårsperioder = (prevState.skoleårsperioder ?? []).map((p, i) =>