From 7573b2c5c8b33e5e3ae133ef38dc9cf325d37b15 Mon Sep 17 00:00:00 2001
From: Andre Groseth <andregroseth@hotmail.com>
Date: Thu, 12 Dec 2024 11:04:50 +0100
Subject: [PATCH] center: content

---
 ...entifiseringAvRisikoscenarioerOgTiltak.tsx | 136 ++++----
 .../InnvolveringAvEksterneView.tsx            | 298 +++++++++---------
 ...ummeringAvAlleRisikoscenarioerOgTiltak.tsx |  51 +--
 .../components/PvkDokument/OversiktView.tsx   | 174 +++++-----
 .../components/PvkDokument/SendInnView.tsx    |  60 ++--
 5 files changed, 369 insertions(+), 350 deletions(-)

diff --git a/apps/frontend/src/components/PvkDokument/IdentifiseringAvRisikoscenarioerOgTiltak.tsx b/apps/frontend/src/components/PvkDokument/IdentifiseringAvRisikoscenarioerOgTiltak.tsx
index b020a7543..cef07e85d 100644
--- a/apps/frontend/src/components/PvkDokument/IdentifiseringAvRisikoscenarioerOgTiltak.tsx
+++ b/apps/frontend/src/components/PvkDokument/IdentifiseringAvRisikoscenarioerOgTiltak.tsx
@@ -39,74 +39,76 @@ export const IdentifiseringAvRisikoscenarioerOgTiltak = (props: IProps) => {
   }, [])
 
   return (
-    <div>
-      <ReadMore header="Vis behandlingens livsløp">Her kommer Behandlingens livsløp.</ReadMore>
-
-      <Heading level="1" size="medium" className="my-5">
-        Identifisering av risikoscenarioer og tiltak
-      </Heading>
-
-      <BodyLong>
-        I en PVK må dere vurdere sannsynligheten for at personvern ikke ivaretas på tilstrekkelig
-        vis, og konsekvensene det vil føre til. Hvor dette risikoscenarioet er av betydning, må dere
-        identifisere forebyggende tiltak som reduserer risiko.
-      </BodyLong>
-
-      <Alert variant="info" inline className="mt-5">
-        <strong>Godt å vite:</strong> risikoscenarioer og tiltak som dere har dokumentert et sted,
-        kan dere finne og gjenbruke andre steder hvor det er aktuelt.
-      </Alert>
-
-      <Heading spacing size="small" level="2" className="my-5">
-        Legg til risikoscenarioer og tiltak med en tilknytning til etterlevelseskrav
-      </Heading>
-
-      <BodyLong className="mb-5">
-        Disse vil nok utgjøre hovedparten av deres PVK. Slike risikoscenarioer, samt motvirkende
-        tiltak, beskriver dere på den aktuelle kravsiden.
-      </BodyLong>
-
-      <Button variant="secondary" type="button">
-        Gå til liste over PVK-relaterte krav
-      </Button>
-
-      <Heading level="2" size="small" className="my-5">
-        Legg til øvrige risikoscenarioer
-      </Heading>
-
-      <BodyLong>
-        Noen risikoscenarioer vil ikke har en direkte tilknytning til etterlevelseskrav. Disse, samt
-        motvirkende tiltak, legger dere inn på denne siden. Vi anbefaler at dette gjøres etter at
-        dere har vurderert kravspesifikke risikoscenarioer.
-      </BodyLong>
-
-      {risikoscenarioList.length === 0 && (
-        <Alert variant="info" className="mt-10 w-fit">
-          Dere har ikke lagt inn noen øvrige risikoscenarioer.
+    <div className="flex justify-center">
+      <div>
+        <ReadMore header="Vis behandlingens livsløp">Her kommer Behandlingens livsløp.</ReadMore>
+
+        <Heading level="1" size="medium" className="my-5">
+          Identifisering av risikoscenarioer og tiltak
+        </Heading>
+
+        <BodyLong>
+          I en PVK må dere vurdere sannsynligheten for at personvern ikke ivaretas på tilstrekkelig
+          vis, og konsekvensene det vil føre til. Hvor dette risikoscenarioet er av betydning, må
+          dere identifisere forebyggende tiltak som reduserer risiko.
+        </BodyLong>
+
+        <Alert variant="info" inline className="mt-5">
+          <strong>Godt å vite:</strong> risikoscenarioer og tiltak som dere har dokumentert et sted,
+          kan dere finne og gjenbruke andre steder hvor det er aktuelt.
         </Alert>
-      )}
-
-      {risikoscenarioList.length > 0 && (
-        <div className="my-5">
-          <RisikoscenarioAccordianList
-            risikoscenarioList={risikoscenarioList}
-            defaultOpen={defaultOpen}
-          />
-        </div>
-      )}
-
-      <CreateRisikoscenarioModal
-        pvkDokument={pvkDokument}
-        onSubmitStateUpdate={(risikoscenario: IRisikoscenario) => {
-          setRisikoscenarioList([...risikoscenarioList, risikoscenario])
-        }}
-      />
-
-      <FormButtons
-        etterlevelseDokumentasjonId={etterlevelseDokumentasjonId}
-        activeStep={activeStep}
-        setActiveStep={setActiveStep}
-      />
+
+        <Heading spacing size="small" level="2" className="my-5">
+          Legg til risikoscenarioer og tiltak med en tilknytning til etterlevelseskrav
+        </Heading>
+
+        <BodyLong className="mb-5">
+          Disse vil nok utgjøre hovedparten av deres PVK. Slike risikoscenarioer, samt motvirkende
+          tiltak, beskriver dere på den aktuelle kravsiden.
+        </BodyLong>
+
+        <Button variant="secondary" type="button">
+          Gå til liste over PVK-relaterte krav
+        </Button>
+
+        <Heading level="2" size="small" className="my-5">
+          Legg til øvrige risikoscenarioer
+        </Heading>
+
+        <BodyLong>
+          Noen risikoscenarioer vil ikke har en direkte tilknytning til etterlevelseskrav. Disse,
+          samt motvirkende tiltak, legger dere inn på denne siden. Vi anbefaler at dette gjøres
+          etter at dere har vurderert kravspesifikke risikoscenarioer.
+        </BodyLong>
+
+        {risikoscenarioList.length === 0 && (
+          <Alert variant="info" className="mt-10 w-fit">
+            Dere har ikke lagt inn noen øvrige risikoscenarioer.
+          </Alert>
+        )}
+
+        {risikoscenarioList.length > 0 && (
+          <div className="my-5">
+            <RisikoscenarioAccordianList
+              risikoscenarioList={risikoscenarioList}
+              defaultOpen={defaultOpen}
+            />
+          </div>
+        )}
+
+        <CreateRisikoscenarioModal
+          pvkDokument={pvkDokument}
+          onSubmitStateUpdate={(risikoscenario: IRisikoscenario) => {
+            setRisikoscenarioList([...risikoscenarioList, risikoscenario])
+          }}
+        />
+
+        <FormButtons
+          etterlevelseDokumentasjonId={etterlevelseDokumentasjonId}
+          activeStep={activeStep}
+          setActiveStep={setActiveStep}
+        />
+      </div>
     </div>
   )
 }
diff --git a/apps/frontend/src/components/PvkDokument/InnvolveringAvEksterneView.tsx b/apps/frontend/src/components/PvkDokument/InnvolveringAvEksterneView.tsx
index b00ec2ec0..1be6463ca 100644
--- a/apps/frontend/src/components/PvkDokument/InnvolveringAvEksterneView.tsx
+++ b/apps/frontend/src/components/PvkDokument/InnvolveringAvEksterneView.tsx
@@ -57,159 +57,163 @@ export const InnvolveringAvEksterneView = (props: IProps) => {
     >
       {({ submitForm }) => (
         <Form>
-          <Heading level="1" size="medium" className="mb-5">
-            Innvolvering av eksterne deltakere
-          </Heading>
-
-          <Heading level="2" size="small" className="mb-3">
-            Representanter for de registrerte
-          </Heading>
-
-          <List
-            size="small"
-            className="mt-5"
-            title="I Behandlingskatalogen står det at dere behandler personopplysninger om:"
-          >
-            {personkategorier.length === 0 && <List.Item>Ingen</List.Item>}
-            {personkategorier.length > 0 &&
-              personkategorier.map((personkategori) => (
-                <List.Item key={personkategori}>{personkategori}</List.Item>
-              ))}
-          </List>
-
-          {/* <Alert inline variant="info" className="my-5">
+          <div className="flex justify-center">
+            <div>
+              <Heading level="1" size="medium" className="mb-5">
+                Innvolvering av eksterne deltakere
+              </Heading>
+
+              <Heading level="2" size="small" className="mb-3">
+                Representanter for de registrerte
+              </Heading>
+
+              <List
+                size="small"
+                className="mt-5"
+                title="I Behandlingskatalogen står det at dere behandler personopplysninger om:"
+              >
+                {personkategorier.length === 0 && <List.Item>Ingen</List.Item>}
+                {personkategorier.length > 0 &&
+                  personkategorier.map((personkategori) => (
+                    <List.Item key={personkategori}>{personkategori}</List.Item>
+                  ))}
+              </List>
+
+              {/* <Alert inline variant="info" className="my-5">
             Dersom disse typer personopplysninger ikke stemmer, må dere oppdatere
             Behandlingskatalogen.
           </Alert> */}
 
-          <BodyLong className="my-5">
-            Dersom disse typer personopplysninger ikke stemmer, må dere oppdatere
-            Behandlingskatalogen.
-          </BodyLong>
-
-          <BodyLong>
-            Representanter for disse gruppene vil kunne bidra til å belyse hvilke konsekvenser en
-            behandling av personopplysninger kan ha for den enkelte. Når vi gjennomfører en
-            personvernkonsekvensvurdering (PVK), må vi derfor alltid vurdere om det er behov for å
-            involvere en representant for de registrerte.
-          </BodyLong>
-
-          <BodyLong className="mt-3">
-            Hvis dere er usikre på om behandlingene treffer flere eller færre personkategorier, kan
-            det være til hjelp å se på behandlingens livsløp.
-          </BodyLong>
-
-          <ReadMore
-            className="my-8 max-w-[75ch]"
-            header="Slik kan dere involvere de forskjellige gruppene"
-          >
-            Et eller annet fornuftig råd her om f. eks. høre med Sentral brukerutvalg … osv. [Lenke
-            til brosjyre på Navet]
-          </ReadMore>
-
-          <div className="mt-3">
-            <BoolField
-              label="Har dere involvert en representant for de registrerte?"
-              name="harInvolvertRepresentant"
-              horizontal
-            />
-          </div>
-
-          <div className="mt-5 max-w-[75ch]">
-            <TextAreaField
-              rows={3}
-              noPlaceholder
-              label="Utdyp hvordan dere har involvert representant(er) for de registrerte"
-              name="representantInvolveringsBeskrivelse"
-            />
-          </div>
-
-          <List className="mt-10" title="Representanter for databehandlere">
-            <BodyLong>
-              I Behandlingskatalogen står det at følgende databehandlere benyttes:
-            </BodyLong>
-            {databehandlere.length === 0 && <List.Item>Ingen</List.Item>}
-            {databehandlere.length > 0 &&
-              databehandlere.map((databehandler) => (
-                <List.Item key={databehandler}>{databehandler}</List.Item>
-              ))}
-          </List>
-
-          <BodyLong>
-            Hvis dere er usikker på om behandlingene benytter flere eller færre databehandlere, kan
-            det være til hjelp å se på behandlingens livsløp.
-          </BodyLong>
-
-          <div className="mt-7">
-            <BoolField
-              label="Stemmer denne lista over databehandlere?"
-              name="stemmerDatabehandlere"
-              horizontal
-            />
-          </div>
-
-          <Field>
-            {(fieldProps: FieldProps) => (
-              <>
-                {fieldProps.form.values.stemmerDatabehandlere === false && (
-                  <Alert inline variant="warning" className="my-5">
-                    Dere må oppdatere databehandlere i Behandlingskatalogen
-                  </Alert>
+              <BodyLong className="my-5">
+                Dersom disse typer personopplysninger ikke stemmer, må dere oppdatere
+                Behandlingskatalogen.
+              </BodyLong>
+
+              <BodyLong>
+                Representanter for disse gruppene vil kunne bidra til å belyse hvilke konsekvenser
+                en behandling av personopplysninger kan ha for den enkelte. Når vi gjennomfører en
+                personvernkonsekvensvurdering (PVK), må vi derfor alltid vurdere om det er behov for
+                å involvere en representant for de registrerte.
+              </BodyLong>
+
+              <BodyLong className="mt-3">
+                Hvis dere er usikre på om behandlingene treffer flere eller færre personkategorier,
+                kan det være til hjelp å se på behandlingens livsløp.
+              </BodyLong>
+
+              <ReadMore
+                className="my-8 max-w-[75ch]"
+                header="Slik kan dere involvere de forskjellige gruppene"
+              >
+                Et eller annet fornuftig råd her om f. eks. høre med Sentral brukerutvalg … osv.
+                [Lenke til brosjyre på Navet]
+              </ReadMore>
+
+              <div className="mt-3">
+                <BoolField
+                  label="Har dere involvert en representant for de registrerte?"
+                  name="harInvolvertRepresentant"
+                  horizontal
+                />
+              </div>
+
+              <div className="mt-5 max-w-[75ch]">
+                <TextAreaField
+                  rows={3}
+                  noPlaceholder
+                  label="Utdyp hvordan dere har involvert representant(er) for de registrerte"
+                  name="representantInvolveringsBeskrivelse"
+                />
+              </div>
+
+              <List className="mt-10" title="Representanter for databehandlere">
+                <BodyLong>
+                  I Behandlingskatalogen står det at følgende databehandlere benyttes:
+                </BodyLong>
+                {databehandlere.length === 0 && <List.Item>Ingen</List.Item>}
+                {databehandlere.length > 0 &&
+                  databehandlere.map((databehandler) => (
+                    <List.Item key={databehandler}>{databehandler}</List.Item>
+                  ))}
+              </List>
+
+              <BodyLong>
+                Hvis dere er usikker på om behandlingene benytter flere eller færre databehandlere,
+                kan det være til hjelp å se på behandlingens livsløp.
+              </BodyLong>
+
+              <div className="mt-7">
+                <BoolField
+                  label="Stemmer denne lista over databehandlere?"
+                  name="stemmerDatabehandlere"
+                  horizontal
+                />
+              </div>
+
+              <Field>
+                {(fieldProps: FieldProps) => (
+                  <>
+                    {fieldProps.form.values.stemmerDatabehandlere === false && (
+                      <Alert inline variant="warning" className="my-5">
+                        Dere må oppdatere databehandlere i Behandlingskatalogen
+                      </Alert>
+                    )}
+                  </>
                 )}
-              </>
-            )}
-          </Field>
-
-          <BodyLong className="mt-5">
-            Dersom det skal benyttes en databehandler i hele eller deler av behandlingen, skal dere
-            som hovedregel inkludere en representant for databehandler i vurderingen av
-            personvernkonsekvenser (PVK).
-          </BodyLong>
-
-          <ReadMore
-            className="mt-3 max-w-[75ch]"
-            header="Trenger vi å snakke direkte med databehandlere?"
-          >
-            Noe her om hvor grensa går, særlig mtp avtaler som NAV kan ha med store aktører — IT og
-            Anskaffelse har egne sider som vi ev. kunne lenke til.
-          </ReadMore>
-
-          <div className="mt-5">
-            <BoolField
-              label="Har dere involvert en representant for databehandlere?"
-              name="harDatabehandlerRepresentantInvolvering"
-              horizontal
-            />
-          </div>
-
-          <div className="mt-3 max-w-[75ch]">
-            <TextAreaField
-              rows={3}
-              noPlaceholder
-              label="Utdyp hvordan dere har involvert representant(er) for databehandler(e)"
-              name="dataBehandlerRepresentantInvolveringBeskrivelse"
-            />
+              </Field>
+
+              <BodyLong className="mt-5">
+                Dersom det skal benyttes en databehandler i hele eller deler av behandlingen, skal
+                dere som hovedregel inkludere en representant for databehandler i vurderingen av
+                personvernkonsekvenser (PVK).
+              </BodyLong>
+
+              <ReadMore
+                className="mt-3 max-w-[75ch]"
+                header="Trenger vi å snakke direkte med databehandlere?"
+              >
+                Noe her om hvor grensa går, særlig mtp avtaler som NAV kan ha med store aktører — IT
+                og Anskaffelse har egne sider som vi ev. kunne lenke til.
+              </ReadMore>
+
+              <div className="mt-5">
+                <BoolField
+                  label="Har dere involvert en representant for databehandlere?"
+                  name="harDatabehandlerRepresentantInvolvering"
+                  horizontal
+                />
+              </div>
+
+              <div className="mt-3 max-w-[75ch]">
+                <TextAreaField
+                  rows={3}
+                  noPlaceholder
+                  label="Utdyp hvordan dere har involvert representant(er) for databehandler(e)"
+                  name="dataBehandlerRepresentantInvolveringBeskrivelse"
+                />
+              </div>
+
+              <div className="mt-5">
+                <Button
+                  type="button"
+                  onClick={() => {
+                    if (submitForm) {
+                      submitForm()
+                    }
+                  }}
+                >
+                  Lagre
+                </Button>
+              </div>
+
+              <FormButtons
+                etterlevelseDokumentasjonId={etterlevelseDokumentasjon.id}
+                activeStep={activeStep}
+                setActiveStep={setActiveStep}
+                submitForm={submitForm}
+              />
+            </div>
           </div>
-
-          <div className="mt-5">
-            <Button
-              type="button"
-              onClick={() => {
-                if (submitForm) {
-                  submitForm()
-                }
-              }}
-            >
-              Lagre
-            </Button>
-          </div>
-
-          <FormButtons
-            etterlevelseDokumentasjonId={etterlevelseDokumentasjon.id}
-            activeStep={activeStep}
-            setActiveStep={setActiveStep}
-            submitForm={submitForm}
-          />
         </Form>
       )}
     </Formik>
diff --git a/apps/frontend/src/components/PvkDokument/OppsummeringAvAlleRisikoscenarioerOgTiltak.tsx b/apps/frontend/src/components/PvkDokument/OppsummeringAvAlleRisikoscenarioerOgTiltak.tsx
index 1ec2e015f..ae13c6ebf 100644
--- a/apps/frontend/src/components/PvkDokument/OppsummeringAvAlleRisikoscenarioerOgTiltak.tsx
+++ b/apps/frontend/src/components/PvkDokument/OppsummeringAvAlleRisikoscenarioerOgTiltak.tsx
@@ -11,24 +11,28 @@ export const OppsummeringAvAlleRisikoscenarioerOgTiltak = (props: IProps) => {
   const { etterlevelseDokumentasjonId, activeStep, setActiveStep } = props
   return (
     <div>
-      <Heading level="1" size="medium" className="mb-5">
-        Oppsummering av alle risikoscenarioer og tiltak
-      </Heading>
+      <div className="flex justify-center">
+        <div>
+          <Heading level="1" size="medium" className="mb-5">
+            Oppsummering av alle risikoscenarioer og tiltak
+          </Heading>
 
-      <BodyShort className="mt-5">
-        Her får dere oversikt over alle risikoscenarioer og tiltak som er lagt inn. Dere kan velge å
-        se på:
-      </BodyShort>
+          <BodyShort className="mt-5">
+            Her får dere oversikt over alle risikoscenarioer og tiltak som er lagt inn. Dere kan
+            velge å se på:
+          </BodyShort>
 
-      <List>
-        <List.Item>
-          Etterlevelseskrav, og hvilke risikoscenarioer og tiltak som finnes ved hvert krav
-        </List.Item>
-        <List.Item>
-          Etterlevelseskrav, og hvilke risikoscenarioer og tiltak som finnes ved hvert krav
-        </List.Item>
-        <List.Item>Tiltak, inkludert hvilke tiltak som savner ansvarlig eller frist.</List.Item>
-      </List>
+          <List>
+            <List.Item>
+              Etterlevelseskrav, og hvilke risikoscenarioer og tiltak som finnes ved hvert krav
+            </List.Item>
+            <List.Item>
+              Etterlevelseskrav, og hvilke risikoscenarioer og tiltak som finnes ved hvert krav
+            </List.Item>
+            <List.Item>Tiltak, inkludert hvilke tiltak som savner ansvarlig eller frist.</List.Item>
+          </List>
+        </div>
+      </div>
 
       <Tabs defaultValue="etterlevelseskrav" fill>
         <Tabs.List>
@@ -46,12 +50,15 @@ export const OppsummeringAvAlleRisikoscenarioerOgTiltak = (props: IProps) => {
           Her skal tiltak vises
         </Tabs.Panel>
       </Tabs>
-
-      <FormButtons
-        etterlevelseDokumentasjonId={etterlevelseDokumentasjonId}
-        activeStep={activeStep}
-        setActiveStep={setActiveStep}
-      />
+      <div className="flex justify-center">
+        <div>
+          <FormButtons
+            etterlevelseDokumentasjonId={etterlevelseDokumentasjonId}
+            activeStep={activeStep}
+            setActiveStep={setActiveStep}
+          />
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/apps/frontend/src/components/PvkDokument/OversiktView.tsx b/apps/frontend/src/components/PvkDokument/OversiktView.tsx
index e72d72607..3e1f17e7d 100644
--- a/apps/frontend/src/components/PvkDokument/OversiktView.tsx
+++ b/apps/frontend/src/components/PvkDokument/OversiktView.tsx
@@ -51,101 +51,103 @@ export const OversiktView = (props: IProps) => {
   }
 
   return (
-    <div>
-      <Heading level="1" size="medium" className="mb-5">
-        Oversikt over PVK-prosessen
-      </Heading>
-      <ReadMore header="Hvordan skal vi jobbe med PVK?">
-        <BodyShort>
-          I PVK-en skal dere beskrive deres behandling av personopplysninger, og gjøre en
-          risikoanalyse. Prosessen inkluderer:
-        </BodyShort>
-        <List as="ol">
+    <div className="flex justify-center">
+      <div>
+        <Heading level="1" size="medium" className="mb-5">
+          Oversikt over PVK-prosessen
+        </Heading>
+        <ReadMore header="Hvordan skal vi jobbe med PVK?">
+          <BodyShort>
+            I PVK-en skal dere beskrive deres behandling av personopplysninger, og gjøre en
+            risikoanalyse. Prosessen inkluderer:
+          </BodyShort>
+          <List as="ol">
+            <List.Item>
+              Dere beskriver behandlingen slik at det er enklere å identifisere risikoer.
+            </List.Item>
+            <List.Item>Dere gjør risikoanalyse og setter tiltak.</List.Item>
+            <List.Item>Dere sender inn PVK til vurdering av Personvernombudet (PVO).</List.Item>
+            <List.Item>
+              Dere gjør eventuelle endringer, og sender til risikoeier for beslutning om
+              risikonivået er akseptabelt.
+            </List.Item>
+            <List.Item>
+              Hvis dere senere endrer hvordan dere behandler personopplysninger, skal dere vurdere
+              risikobildet på nytt.
+            </List.Item>
+          </List>
+        </ReadMore>
+
+        <FormSummary className="my-3">
+          <FormSummary.Header>
+            <FormSummary.Heading level="2">Status</FormSummary.Heading>
+          </FormSummary.Header>
+          <FormSummary.Answers>
+            {StepTitle.slice(1).map((title, index) => (
+              <FormSummaryPanel
+                key={title}
+                title={title}
+                onClick={() => updateTitleUrlAndStep(index + 2)}
+                status={index === 4 ? undefined : formStatus[index] ? 'Påbegynt' : 'Ikke påbegynt'}
+              />
+            ))}
+          </FormSummary.Answers>
+        </FormSummary>
+
+        <List title="Deltaker og ansvarlige" className="w-full">
           <List.Item>
-            Dere beskriver behandlingen slik at det er enklere å identifisere risikoer.
+            <BodyShort>
+              <strong>Risikoeier:</strong>{' '}
+              {etterlevelseDokumentasjon.risikoeiereData &&
+                getMemberListToString(etterlevelseDokumentasjon.risikoeiereData)}
+              {!etterlevelseDokumentasjon.risikoeiereData && 'Ingen risikoeier angitt'}
+            </BodyShort>
           </List.Item>
-          <List.Item>Dere gjør risikoanalyse og setter tiltak.</List.Item>
-          <List.Item>Dere sender inn PVK til vurdering av Personvernombudet (PVO).</List.Item>
           <List.Item>
-            Dere gjør eventuelle endringer, og sender til risikoeier for beslutning om risikonivået
-            er akseptabelt.
+            <BodyShort>
+              <strong>Avdeling:</strong>{' '}
+              {etterlevelseDokumentasjon.avdeling && etterlevelseDokumentasjon.avdeling.shortName}
+              {!etterlevelseDokumentasjon.avdeling && 'Avdeling er ikke angitt'}
+            </BodyShort>
           </List.Item>
           <List.Item>
-            Hvis dere senere endrer hvordan dere behandler personopplysninger, skal dere vurdere
-            risikobildet på nytt.
+            <BodyShort>
+              <strong>Team eller personer:</strong>{' '}
+              {etterlevelseDokumentasjon.teamsData &&
+                getTeamsNameToString(etterlevelseDokumentasjon.teamsData)}
+              {etterlevelseDokumentasjon.teamsData && ', '}
+              {etterlevelseDokumentasjon.resourcesData &&
+                getMemberListToString(etterlevelseDokumentasjon.resourcesData)}
+              {!etterlevelseDokumentasjon.teamsData &&
+                !etterlevelseDokumentasjon.resourcesData &&
+                'Avdeling er ikke angitt'}
+            </BodyShort>
           </List.Item>
         </List>
-      </ReadMore>
 
-      <FormSummary className="my-3">
-        <FormSummary.Header>
-          <FormSummary.Heading level="2">Status</FormSummary.Heading>
-        </FormSummary.Header>
-        <FormSummary.Answers>
-          {StepTitle.slice(1).map((title, index) => (
-            <FormSummaryPanel
-              key={title}
-              title={title}
-              onClick={() => updateTitleUrlAndStep(index + 2)}
-              status={index === 4 ? undefined : formStatus[index] ? 'Påbegynt' : 'Ikke påbegynt'}
-            />
-          ))}
-        </FormSummary.Answers>
-      </FormSummary>
-
-      <List title="Deltaker og ansvarlige" className="w-full">
-        <List.Item>
-          <BodyShort>
-            <strong>Risikoeier:</strong>{' '}
-            {etterlevelseDokumentasjon.risikoeiereData &&
-              getMemberListToString(etterlevelseDokumentasjon.risikoeiereData)}
-            {!etterlevelseDokumentasjon.risikoeiereData && 'Ingen risikoeier angitt'}
-          </BodyShort>
-        </List.Item>
-        <List.Item>
-          <BodyShort>
-            <strong>Avdeling:</strong>{' '}
-            {etterlevelseDokumentasjon.avdeling && etterlevelseDokumentasjon.avdeling.shortName}
-            {!etterlevelseDokumentasjon.avdeling && 'Avdeling er ikke angitt'}
-          </BodyShort>
-        </List.Item>
-        <List.Item>
-          <BodyShort>
-            <strong>Team eller personer:</strong>{' '}
-            {etterlevelseDokumentasjon.teamsData &&
-              getTeamsNameToString(etterlevelseDokumentasjon.teamsData)}
-            {etterlevelseDokumentasjon.teamsData && ', '}
-            {etterlevelseDokumentasjon.resourcesData &&
-              getMemberListToString(etterlevelseDokumentasjon.resourcesData)}
-            {!etterlevelseDokumentasjon.teamsData &&
-              !etterlevelseDokumentasjon.resourcesData &&
-              'Avdeling er ikke angitt'}
-          </BodyShort>
-        </List.Item>
-      </List>
-
-      {!etterlevelseDokumentasjon.risikoeiereData && (
-        <div className="w-fit">
-          <Alert variant="warning">
-            Dere har ikke lagt inn en risikoeier. Dere må gjøre dette før dere sender PVK-en til
-            Personvernombudet. Dere kan redigere deltakere og ansvarlige under
-            <Link
-              href={'/dokumentasjon/edit/' + etterlevelseDokumentasjon.id}
-              target="_blank"
-              rel="noopener noreferrer"
-              aria-label="redigere etterlevelsesdokumentasjon"
-            >
-              Dokumentegenskaper (åpnes i nytt vindu).
-            </Link>
-          </Alert>
-        </div>
-      )}
+        {!etterlevelseDokumentasjon.risikoeiereData && (
+          <div className="w-fit">
+            <Alert variant="warning">
+              Dere har ikke lagt inn en risikoeier. Dere må gjøre dette før dere sender PVK-en til
+              Personvernombudet. Dere kan redigere deltakere og ansvarlige under
+              <Link
+                href={'/dokumentasjon/edit/' + etterlevelseDokumentasjon.id}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="redigere etterlevelsesdokumentasjon"
+              >
+                Dokumentegenskaper (åpnes i nytt vindu).
+              </Link>
+            </Alert>
+          </div>
+        )}
 
-      <FormButtons
-        etterlevelseDokumentasjonId={etterlevelseDokumentasjon.id}
-        activeStep={activeStep}
-        setActiveStep={updateTitleUrlAndStep}
-      />
+        <FormButtons
+          etterlevelseDokumentasjonId={etterlevelseDokumentasjon.id}
+          activeStep={activeStep}
+          setActiveStep={updateTitleUrlAndStep}
+        />
+      </div>
     </div>
   )
 }
diff --git a/apps/frontend/src/components/PvkDokument/SendInnView.tsx b/apps/frontend/src/components/PvkDokument/SendInnView.tsx
index 3dfbd7e20..6282b1d2d 100644
--- a/apps/frontend/src/components/PvkDokument/SendInnView.tsx
+++ b/apps/frontend/src/components/PvkDokument/SendInnView.tsx
@@ -39,38 +39,42 @@ export const SendInnView = (props: IProps) => {
     >
       {({ submitForm }) => (
         <Form>
-          <Heading level="1" size="medium" className="mb-5">
-            Les og send inn
-          </Heading>
-          <BodyLong>
-            Her kan dere lese over det som er lagt inn i PVK-en. Hvis dere oppdager feil eller
-            mangel, er det mulig å gå tilbake og endre svar. Til slutt er det plass til å legge til
-            ytterligere informasjon dersom det er aktuelt.
-          </BodyLong>
+          <div className="flex justify-center">
+            <div>
+              <Heading level="1" size="medium" className="mb-5">
+                Les og send inn
+              </Heading>
+              <BodyLong>
+                Her kan dere lese over det som er lagt inn i PVK-en. Hvis dere oppdager feil eller
+                mangel, er det mulig å gå tilbake og endre svar. Til slutt er det plass til å legge
+                til ytterligere informasjon dersom det er aktuelt.
+              </BodyLong>
 
-          <ArtOgOmFangSummary
-            personkategorier={personkategorier}
-            updateTitleUrlAndStep={updateTitleUrlAndStep}
-          />
+              <ArtOgOmFangSummary
+                personkategorier={personkategorier}
+                updateTitleUrlAndStep={updateTitleUrlAndStep}
+              />
 
-          <InnvolveringSummary
-            databehandlere={databehandlere}
-            personkategorier={personkategorier}
-            updateTitleUrlAndStep={updateTitleUrlAndStep}
-          />
+              <InnvolveringSummary
+                databehandlere={databehandlere}
+                personkategorier={personkategorier}
+                updateTitleUrlAndStep={updateTitleUrlAndStep}
+              />
 
-          <div className="mt-5">
-            <Button type="button" onClick={() => {}}>
-              Send til PVO
-            </Button>
-          </div>
+              <div className="mt-5">
+                <Button type="button" onClick={() => {}}>
+                  Send til PVO
+                </Button>
+              </div>
 
-          <FormButtons
-            etterlevelseDokumentasjonId={etterlevelseDokumentasjonId}
-            activeStep={activeStep}
-            setActiveStep={setActiveStep}
-            submitForm={submitForm}
-          />
+              <FormButtons
+                etterlevelseDokumentasjonId={etterlevelseDokumentasjonId}
+                activeStep={activeStep}
+                setActiveStep={setActiveStep}
+                submitForm={submitForm}
+              />
+            </div>
+          </div>
         </Form>
       )}
     </Formik>