diff --git a/apps/backend/pom.xml b/apps/backend/pom.xml
index 8b78b084f..b63968052 100644
--- a/apps/backend/pom.xml
+++ b/apps/backend/pom.xml
@@ -21,7 +21,7 @@
         <hypersistence-utils-hibernate-60.version>3.6.0</hypersistence-utils-hibernate-60.version>
         <simpleclient.version>0.16.0</simpleclient.version>
         <logstash-logback-encoder.version>7.4</logstash-logback-encoder.version>
-        <shedlock.version>5.9.1</shedlock.version>
+        <shedlock.version>5.10.0</shedlock.version>
         <commons-collections4.version>4.4</commons-collections4.version>
         <graphql-spring-boot-starter.version>15.0.0</graphql-spring-boot-starter.version>
         <graphql.version>21.0</graphql.version>
diff --git a/apps/frontend/src/components/DeleteItem.tsx b/apps/frontend/src/components/DeleteItem.tsx
index f2d71617b..506b581f4 100644
--- a/apps/frontend/src/components/DeleteItem.tsx
+++ b/apps/frontend/src/components/DeleteItem.tsx
@@ -9,7 +9,7 @@ export const DeleteItem = (props: { fun: () => Promise<any>; redirect: string; b
 
   return (
     <>
-      <Button variant="danger" onClick={() => setOpen(true)} icon={<TrashIcon aria-label="" aria-hidden />} size={props.buttonSize ? props.buttonSize : undefined}>
+      <Button variant="danger" onClick={() => setOpen(true)} size={props.buttonSize ? props.buttonSize : undefined}>
         {props.buttonLabel ? props.buttonLabel : 'Slett'}
       </Button>
       <Modal open={open} onClose={() => setOpen(false)} header={{ heading: 'Bekreft slett' }}>
diff --git a/apps/frontend/src/components/common/TeamName.tsx b/apps/frontend/src/components/common/TeamName.tsx
index eb185e92b..b99629d31 100644
--- a/apps/frontend/src/components/common/TeamName.tsx
+++ b/apps/frontend/src/components/common/TeamName.tsx
@@ -1,14 +1,12 @@
 import { useTeam } from '../../api/TeamApi'
 import { teamKatTeamLink } from '../../util/config'
-import { Block } from 'baseui/block'
-import { theme } from '../../util'
-import { Link } from '@navikt/ds-react'
+import { Detail, Link } from '@navikt/ds-react'
 
 export const TeamName = (props: { id: string; link?: boolean }) => {
   const [name] = useTeam()(props.id)
 
   return props.link ? (
-    <Link rel="noopener noreferrer" target={'_blank'} href={teamKatTeamLink(props.id)}>
+    <Link className="text-sm" rel="noopener noreferrer" target={'_blank'} href={teamKatTeamLink(props.id)}>
       {name} (åpnes i ny fane)
     </Link>
   ) : (
@@ -17,11 +15,10 @@ export const TeamName = (props: { id: string; link?: boolean }) => {
 }
 
 export const Teams = (props: { teams: string[]; link?: boolean; list?: boolean }) => (
-  <Block display={props.list ? 'block' : 'flex'} flexWrap>
-    {props.teams.map((t) => (
-      <Block key={t} marginRight={props.list ? 'none' : theme.sizing.scale600} marginBottom={props.list ? theme.sizing.scale600 : 'none'}>
-        <TeamName id={t} link={props.link} />
-      </Block>
+  <div className="flex flex-wrap gap-2 items-center">
+    <Detail className="font-bold">Team:</Detail>
+    {props.teams.map((t, idx) => (
+      <TeamName key={`team_${idx}`} id={t} link={props.link} />
     ))}
-  </Block>
+  </div>
 )
diff --git a/apps/frontend/src/components/etterlevelse/EtterlevelseSecondaryHeader.tsx b/apps/frontend/src/components/etterlevelse/EtterlevelseSecondaryHeader.tsx
index c30fc2c71..21eea485c 100644
--- a/apps/frontend/src/components/etterlevelse/EtterlevelseSecondaryHeader.tsx
+++ b/apps/frontend/src/components/etterlevelse/EtterlevelseSecondaryHeader.tsx
@@ -59,7 +59,7 @@ export const EtterlevelseSecondaryHeader = ({ tab, setTab, setNavigatePath, ette
               },
             }}
           >
-            Tema for dokumentasjon
+            Temaoversikt
           </LabelSmall>
         </Button>
       </Block>
diff --git a/apps/frontend/src/components/etterlevelseDokumentasjon/ArkiveringModal.tsx b/apps/frontend/src/components/etterlevelseDokumentasjon/ArkiveringModal.tsx
index 2acabaa99..9a7c75018 100644
--- a/apps/frontend/src/components/etterlevelseDokumentasjon/ArkiveringModal.tsx
+++ b/apps/frontend/src/components/etterlevelseDokumentasjon/ArkiveringModal.tsx
@@ -4,10 +4,7 @@ import { EtterlevelseArkiv, EtterlevelseArkivStatus } from '../../constants'
 import { createEtterlevelseArkiv, updateEtterlevelseArkiv } from '../../api/ArkiveringApi'
 import React, { useState } from 'react'
 import moment from 'moment'
-import CustomizedModal from '../common/CustomizedModal'
-import { borderRadius } from '../common/Style'
-import Button from '../common/Button'
-import { BodyLong } from '@navikt/ds-react'
+import { BodyLong, Button, Modal } from '@navikt/ds-react'
 import { user } from '../../services/User'
 
 type ArkiveringModalProps = {
@@ -48,22 +45,12 @@ export const ArkiveringModal = ({ arkivModal, setArkivModal, etterlevelseDokumen
   }
 
   return (
-    <CustomizedModal
-      isOpen={arkivModal}
+    <Modal
+      open={arkivModal}
       onClose={() => {
         setIsArchivingCancelled(false)
         setArkivModal(false)
       }}
-      size="default"
-      overrides={{
-        Dialog: {
-          style: {
-            width: '375px',
-            boxShadow: '0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12)',
-            ...borderRadius('4px'),
-          },
-        },
-      }}
     >
       <ModalHeader>{etterlevelseArkiv && etterlevelseArkiv.status === EtterlevelseArkivStatus.TIL_ARKIVERING ? 'Arkivering bestilt' : 'Arkivér i Websak'}</ModalHeader>
       <ModalBody>
@@ -111,12 +98,7 @@ export const ArkiveringModal = ({ arkivModal, setArkivModal, etterlevelseDokumen
                   setIsArchivingCancelled(false)
                 }
               }}
-              kind={etterlevelseArkiv.status !== EtterlevelseArkivStatus.TIL_ARKIVERING ? 'primary' : 'secondary'}
-              $style={{
-                borderWidth: '2px',
-                marginRight: '16px',
-                padding: '14px 16px',
-              }}
+              variant={etterlevelseArkiv.status !== EtterlevelseArkivStatus.TIL_ARKIVERING ? 'primary' : 'secondary'}
             >
               {etterlevelseArkiv && etterlevelseArkiv.status === EtterlevelseArkivStatus.TIL_ARKIVERING ? 'Avbryt arkivering i WebSak' : 'Arkivér i WebSak'}
             </Button>
@@ -127,16 +109,13 @@ export const ArkiveringModal = ({ arkivModal, setArkivModal, etterlevelseDokumen
                 setIsArchivingCancelled(false)
                 setArkivModal(false)
               }}
-              kind="primary"
-              $style={{
-                padding: '14px 16px',
-              }}
+              variant="primary"
             >
               Lukk
             </Button>
           )}
         </Block>
       </ModalBody>
-    </CustomizedModal>
+    </Modal>
   )
 }
diff --git a/apps/frontend/src/components/etterlevelseDokumentasjon/edit/EditEtterlevelseDokumentasjonModal.tsx b/apps/frontend/src/components/etterlevelseDokumentasjon/edit/EditEtterlevelseDokumentasjonModal.tsx
index 053a538ea..594455449 100644
--- a/apps/frontend/src/components/etterlevelseDokumentasjon/edit/EditEtterlevelseDokumentasjonModal.tsx
+++ b/apps/frontend/src/components/etterlevelseDokumentasjon/edit/EditEtterlevelseDokumentasjonModal.tsx
@@ -10,8 +10,6 @@ import {
 } from '../../../api/EtterlevelseDokumentasjonApi'
 import { Behandling, EtterlevelseDokumentasjonQL, Team, Virkemiddel } from '../../../constants'
 import { Code, codelist, ListName } from '../../../services/Codelist'
-import Button, { buttonContentStyle } from '../../common/Button'
-import CustomizedModal from '../../common/CustomizedModal'
 import { Button as BaseUIButton, KIND } from 'baseui/button'
 import { FieldArray, FieldArrayRenderProps, FieldProps, Form, Formik } from 'formik'
 import { FormControl } from 'baseui/form-control'
@@ -33,7 +31,8 @@ import { useSearchTeam } from '../../../api/TeamApi'
 import { RenderTagList } from '../../common/TagList'
 import { useNavigate } from 'react-router-dom'
 import { updateBehandlingNameWithNumber } from '../common/utils'
-import { Modal } from '@navikt/ds-react'
+import { Button, Modal } from '@navikt/ds-react'
+import { buttonContentStyle } from '../../common/Button'
 
 type EditEtterlevelseDokumentasjonModalProps = {
   etterlevelseDokumentasjon?: EtterlevelseDokumentasjonQL
@@ -130,12 +129,8 @@ export const EditEtterlevelseDokumentasjonModal = (props: EditEtterlevelseDokume
   }
 
   return (
-    <Block>
-      <Button
-        onClick={() => setIsEtterlevelseDokumntasjonerModalOpen(true)}
-        startEnhancer={props.isEditButton ? <img src={editIcon} alt="edit icon" /> : <img src={plusIcon} alt="plus icon" />}
-        size="compact"
-      >
+    <div>
+      <Button onClick={() => setIsEtterlevelseDokumntasjonerModalOpen(true)} size="small" variant="secondary" className="whitespace-nowrap">
         {props.isEditButton ? 'Rediger etterlevelsesdokumentet' : 'Nytt etterlevelsesdokument'}
       </Button>
 
@@ -425,11 +420,10 @@ export const EditEtterlevelseDokumentasjonModal = (props: EditEtterlevelseDokume
                   )}
 
                   <Block display="flex" justifyContent="flex-end">
-                    <Button kind="secondary" type="button" onClick={() => setIsEtterlevelseDokumntasjonerModalOpen(false)}>
+                    <Button variant="secondary" onClick={() => setIsEtterlevelseDokumntasjonerModalOpen(false)}>
                       Avbryt
                     </Button>
                     <Button
-                      marginLeft={true}
                       type="button"
                       onClick={() => {
                         submitForm()
@@ -444,7 +438,7 @@ export const EditEtterlevelseDokumentasjonModal = (props: EditEtterlevelseDokume
           </Formik>
         </ModalBody>
       </Modal>
-    </Block>
+    </div>
   )
 }
 export default EditEtterlevelseDokumentasjonModal
diff --git a/apps/frontend/src/components/export/ExportEtterlevelseModal.tsx b/apps/frontend/src/components/export/ExportEtterlevelseModal.tsx
index abee6c145..c3b446519 100644
--- a/apps/frontend/src/components/export/ExportEtterlevelseModal.tsx
+++ b/apps/frontend/src/components/export/ExportEtterlevelseModal.tsx
@@ -1,22 +1,14 @@
-import { faFileWord } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { Block } from 'baseui/block'
-import { Button, KIND } from 'baseui/button'
-import { SIZE } from 'baseui/input'
 import React, { useState } from 'react'
 import { env } from '../../util/env'
-import CustomizedModal from '../common/CustomizedModal'
 import { borderColor, borderRadius, borderStyle, borderWidth, marginZero } from '../common/Style'
 import { ModalBody, ModalHeader } from 'baseui/modal'
-import { Select, Value } from 'baseui/select'
-import { customSelectOverrides } from '../krav/Edit/RegelverkEdit'
 import { codelist, ListName } from '../../services/Codelist'
 import axios from 'axios'
-import { theme } from '../../util'
 import { ettlevColors } from '../../util/theme'
 import { KIND as NKIND, Notification } from 'baseui/notification'
 import { ParagraphMedium } from 'baseui/typography'
-import { Loader } from '@navikt/ds-react'
+import { Button, Loader, Modal, Select } from '@navikt/ds-react'
 
 type ExportEtterlevelseModalProps = {
   etterlevelseDokumentasjonId: String
@@ -24,53 +16,41 @@ type ExportEtterlevelseModalProps = {
 
 export const ExportEtterlevelseModal = (props: ExportEtterlevelseModalProps) => {
   const [isExportModalOpen, setIsExportModalOpen] = useState<boolean>(false)
-  const [selectedTema, setSelectedTema] = useState<Value>([])
   const [isLoading, setIsLoading] = useState<boolean>(false)
   const [errorMessage, setErrorMessage] = useState<String>('')
+  const [valgtTema, setValgtTema] = useState<string>('')
 
   return (
-    <Block display="flex" alignItems="center" marginRight="12px">
-      <Button kind={KIND.tertiary} size={SIZE.compact} onClick={() => setIsExportModalOpen(true)}>
-        <Block marginRight="6px">
-          <FontAwesomeIcon icon={faFileWord} />
-        </Block>
-        <Block>Eksporter</Block>
+    <div>
+      <Button variant="tertiary" size="small" onClick={() => setIsExportModalOpen(true)}>
+        Eksporter til Word
       </Button>
 
-      <CustomizedModal
-        isOpen={isExportModalOpen}
+      <Modal
+        open={isExportModalOpen}
         onClose={() => {
+          setValgtTema('')
           setIsExportModalOpen(false)
         }}
-        size="default"
-        overrides={{
-          Dialog: {
-            style: {
-              width: '375px',
-              boxShadow: '0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 3px 0 rgba(0, 0, 0, .12)',
-              ...borderRadius('4px'),
-            },
-          },
-        }}
+        header={{ heading: 'Eksporter etterlevelse' }}
       >
-        <ModalHeader>Eksporter etterlevelse</ModalHeader>
-        <ModalBody>
+        <Modal.Body>
           {isLoading ? (
             <Block display="flex" justifyContent="center" width="100%">
               <Loader size="large" />
             </Block>
           ) : (
-            <Block>
-              <Select
-                placeholder="Velg et tema for eksportering"
-                options={codelist.getParsedOptions(ListName.TEMA)}
-                value={selectedTema}
-                onChange={({ value }) => {
-                  setErrorMessage('')
-                  setSelectedTema(value)
-                }}
-                overrides={customSelectOverrides}
-              />
+            <div className="flex flex-col gap-4">
+              <Select label="Velg et tema for eksportering" onChange={(ev) => setValgtTema(ev.currentTarget.value)} value={valgtTema}>
+                <option key="" value="">
+                  Velg tema
+                </option>
+                {codelist.getParsedOptions(ListName.TEMA).map((opt) => (
+                  <option key={`option_${opt.id}`} value={opt.id}>
+                    {opt.label}
+                  </option>
+                ))}
+              </Select>
               {errorMessage && (
                 <Block width="100%" marginTop="16px">
                   <Notification
@@ -96,18 +76,23 @@ export const ExportEtterlevelseModal = (props: ExportEtterlevelseModalProps) =>
                   </Notification>
                 </Block>
               )}
-              <Block marginTop="16px" display="flex" $style={{ justifyContent: 'flex-end', paddingTop: '16px' }}>
+              <div className="flex gap-2">
                 <Button
-                  kind={KIND.primary}
-                  size={SIZE.compact}
+                  variant="tertiary"
+                  onClick={() => {
+                    setValgtTema('')
+                    setIsExportModalOpen(false)
+                  }}
+                >
+                  Avbryt
+                </Button>
+                <Button
+                  variant="secondary"
                   onClick={() => {
                     ;(async () => {
                       setIsLoading(true)
                       setErrorMessage('')
-                      const exportUrl =
-                        selectedTema.length > 0
-                          ? `${env.backendBaseUrl}/export/etterlevelsedokumentasjon?etterlevelseDokumentasjonId=${props.etterlevelseDokumentasjonId}&temakode=${selectedTema[0].id}`
-                          : `${env.backendBaseUrl}/export/etterlevelsedokumentasjon?etterlevelseDokumentasjonId=${props.etterlevelseDokumentasjonId}`
+                      const exportUrl = `${env.backendBaseUrl}/export/etterlevelsedokumentasjon?etterlevelseDokumentasjonId=${props.etterlevelseDokumentasjonId}`
 
                       axios
                         .get(exportUrl)
@@ -122,17 +107,39 @@ export const ExportEtterlevelseModal = (props: ExportEtterlevelseModalProps) =>
                     })()
                   }}
                 >
-                  <Block marginRight="6px">
-                    <FontAwesomeIcon icon={faFileWord} />
-                  </Block>
-                  <Block>{selectedTema.length > 0 ? 'Eksporter med valgt tema' : 'Eksporter alle tema'}</Block>
+                  Eksporter alle tema
                 </Button>
-              </Block>
-            </Block>
+                <Button
+                  variant="primary"
+                  disabled={valgtTema == ''}
+                  onClick={() => {
+                    ;(async () => {
+                      setIsLoading(true)
+                      setErrorMessage('')
+                      const exportUrl = `${env.backendBaseUrl}/export/etterlevelsedokumentasjon?etterlevelseDokumentasjonId=${props.etterlevelseDokumentasjonId}&temakode=${valgtTema}`
+
+                      axios
+                        .get(exportUrl)
+                        .then(() => {
+                          window.location.href = exportUrl
+                          setIsLoading(false)
+                          setIsExportModalOpen(false)
+                        })
+                        .catch((e) => {
+                          setErrorMessage(e.response.data.message)
+                          setIsLoading(false)
+                        })
+                    })()
+                  }}
+                >
+                  Eksporter valgt tema
+                </Button>
+              </div>
+            </div>
           )}
-        </ModalBody>
-      </CustomizedModal>
-    </Block>
+        </Modal.Body>
+      </Modal>
+    </div>
   )
 }
 
diff --git a/apps/frontend/src/pages/DokumentasjonPage.tsx b/apps/frontend/src/pages/DokumentasjonPage.tsx
index 4d672518b..517a39f10 100644
--- a/apps/frontend/src/pages/DokumentasjonPage.tsx
+++ b/apps/frontend/src/pages/DokumentasjonPage.tsx
@@ -9,8 +9,8 @@ import { ellipse80, saveArchiveIcon } from '../components/Images'
 import { EtterlevelseDokumentasjonQL, EtterlevelseDokumentasjonStats, EtterlevelseStatus, KRAV_FILTER_TYPE, KravPrioritering, KravQL, KravStatus, PageResponse } from '../constants'
 import { gql, useQuery } from '@apollo/client'
 import { Code, codelist, ListName, TemaCode } from '../services/Codelist'
-import { Button, KIND, SIZE } from 'baseui/button'
-import { breadcrumbPaths } from '../components/common/CustomizedBreadcrumbs'
+import { KIND, SIZE } from 'baseui/button'
+import CustomizedBreadcrumbs, { breadcrumbPaths } from '../components/common/CustomizedBreadcrumbs'
 
 import { ampli } from '../services/Amplitude'
 import { getMainHeader, getNewestKravVersjon } from '../components/etterlevelseDokumentasjon/common/utils'
@@ -20,14 +20,18 @@ import { useEtterlevelseDokumentasjon } from '../api/EtterlevelseDokumentasjonAp
 import { ArkiveringModal } from '../components/etterlevelseDokumentasjon/ArkiveringModal'
 import { isFerdigUtfylt } from './EtterlevelseDokumentasjonTemaPage'
 import { ExclamationmarkTriangleFillIcon } from '@navikt/aksel-icons'
-import { BodyShort, Label, Loader, Accordion, Link, Alert, Tag } from '@navikt/ds-react'
+import { BodyShort, Label, Loader, Accordion, Link, Alert, Tag, Heading, Detail, Button } from '@navikt/ds-react'
 import ExportEtterlevelseModal from '../components/export/ExportEtterlevelseModal'
 import { KravCard } from '../components/etterlevelseDokumentasjonTema/KravCard'
 import { getAllKravPriority } from '../api/KravPriorityApi'
 import { filterKrav } from '../components/etterlevelseDokumentasjonTema/common/utils'
 import { getNumberOfDaysBetween } from '../util/checkAge'
 import moment from 'moment'
-import { getEtterlevelserByEtterlevelseDokumentasjonIdKravNumber } from '../api/EtterlevelseApi'
+import EditEtterlevelseDokumentasjonModal from '../components/etterlevelseDokumentasjon/edit/EditEtterlevelseDokumentasjonModal'
+import { ExternalLink } from '../components/common/RouteLink'
+import { env } from '../util/env'
+import { Teams } from '../components/common/TeamName'
+import { Helmet } from 'react-helmet'
 
 export const DokumentasjonPage = () => {
   const params = useParams<{ id?: string }>()
@@ -120,73 +124,6 @@ export const DokumentasjonPage = () => {
     }
   })
 
-  const getRelevansContent = (etterlevelseDokumentasjon: EtterlevelseDokumentasjonQL) => {
-    const emptyRelevans = etterlevelseDokumentasjon.irrelevansFor.length === options.length ? true : false
-
-    return (
-      <div className="flex items-center gap-2">
-        {emptyRelevans ? (
-          <div className="flex items-center gap-1">
-            <ExclamationmarkTriangleFillIcon area-label="" aria-hidden className="text-2xl text-icon-warning" />
-            <Label size="small">Ingen egenskaper er oppgitt</Label>
-          </div>
-        ) : (
-          <Label size="small">Aktive egenskaper:</Label>
-        )}
-        {!etterlevelseDokumentasjon.irrelevansFor.length ? getRelevans() : getRelevans(etterlevelseDokumentasjon.irrelevansFor)}
-      </div>
-    )
-  }
-
-  const getSecondaryHeader = (etterlevelseDokumentasjon: EtterlevelseDokumentasjonQL) => (
-    <Block width="100%" display="flex" alignItems="center" justifyContent="space-between" marginTop={'8px'} marginBottom={'8px'}>
-      <Block display="flex" alignItems="center">
-        <Block>
-          <HeadingXLarge marginTop="0px" marginBottom="0px">
-            Tema for dokumentasjon
-          </HeadingXLarge>
-          {
-            // TODO: overskriften er kjip, tenk på det
-          }
-        </Block>
-      </Block>
-
-      <Block display="flex" alignItems="center">
-        {user.isAdmin() && (
-          <Button kind={KIND.tertiary} size={SIZE.compact} onClick={() => setArkivModal(true)} startEnhancer={<img src={saveArchiveIcon} alt="arkiv ikon" />}>
-            Arkivér i WebSak
-          </Button>
-        )}
-
-        <ExportEtterlevelseModal etterlevelseDokumentasjonId={etterlevelseDokumentasjon.id} />
-
-        <Block display="flex" alignItems="baseline" marginRight="30px">
-          <ParagraphMedium $style={{ fontWeight: 900, fontSize: '32px', marginTop: 0, marginBottom: 0 }} color={ettlevColors.navOransje} marginRight={theme.sizing.scale300}>
-            {getNewestKravVersjon(relevanteStats).length}
-          </ParagraphMedium>
-          <ParagraphMedium>krav</ParagraphMedium>
-        </Block>
-
-        <Block $style={{ border: '1px solid ' + ettlevColors.green50, background: '#102723' }} height="40px" />
-
-        <ArkiveringModal
-          arkivModal={arkivModal}
-          setArkivModal={setArkivModal}
-          etterlevelseDokumentasjonId={etterlevelseDokumentasjon.id}
-          etterlevelseArkiv={etterlevelseArkiv}
-          setEtterlevelseArkiv={setEtterlevelseArkiv}
-        />
-
-        <Block display="flex" alignItems="baseline" marginLeft="30px">
-          <ParagraphMedium $style={{ fontWeight: 900, fontSize: '32px', marginTop: 0, marginBottom: 0 }} color={ettlevColors.navOransje} marginRight={theme.sizing.scale300}>
-            {antallFylttKrav}
-          </ParagraphMedium>
-          <ParagraphMedium>ferdig utfylt</ParagraphMedium>
-        </Block>
-      </Block>
-    </Block>
-  )
-
   const getRelevans = (irrelevans?: Code[]) => {
     if (irrelevans?.length === options.length) {
       return <BodyShort size="small">For å filtrere bort krav som ikke er relevante, må dere oppgi egenskaper ved dokumentasjonen.</BodyShort>
@@ -196,22 +133,22 @@ export const DokumentasjonPage = () => {
       const relevans = options.filter((n) => !irrelevans.map((ir: Code) => ir.code).includes(n.id))
 
       return (
-        <div className="flex flex-wrap gap-1">
+        <div className="flex flex-wrap gap-2">
           {relevans.map((r, index) => (
             <div key={r.id} className="flex items-center gap-1">
-              <BodyShort size="small">{r.label}</BodyShort>
-              {index < relevans.length - 1 && <img alt="dot" src={ellipse80} />}
+              <Tag variant="info" size="small">{r.label}</Tag>
             </div>
           ))}
         </div>
       )
     }
     return (
-      <div className="flex flex-wrap gap-1">
+      <div className="flex flex-wrap gap-2">
         {options.map((o, index) => (
           <div key={o.id} className="flex items-center gap-1">
-            <BodyShort size="small">{o.label}</BodyShort>
-            {index < options.length - 1 && <img alt="dot" src={ellipse80} />}
+            <Tag variant="info" size="small">
+              {o.label}
+            </Tag>
           </div>
         ))}
       </div>
@@ -235,84 +172,139 @@ export const DokumentasjonPage = () => {
   }
 
   return (
-    <Block width="100%">
-      <Layout2
-        headerBackgroundColor={ettlevColors.grey50}
-        mainHeader={getMainHeader(etterlevelseDokumentasjon, setEtterlevelseDokumentasjon)}
-        secondaryHeaderBackgroundColor={ettlevColors.white}
-        secondaryHeader={getSecondaryHeader(etterlevelseDokumentasjon)}
-        childrenBackgroundColor={ettlevColors.grey25}
-        currentPage={'Tema for dokumentasjon'}
-        breadcrumbPaths={breadcrumbPaths}
-      >
-        <div className="pt-4 flex flex-col gap-4">
-          {getRelevansContent(etterlevelseDokumentasjon)}
-          <div className="navds-alert navds-alert--info navds-alert--medium">
-            <div className="flex flex-col gap-2">
-              <p>Vi tester nytt oppsett med at tema og krav vises nå på samme side, slik at det forhåpentligvis blir lettere å navigere seg i.</p>
-              <p>Kravene er vist i anbefalt rekkefølge hvis man leser de fra venstre til høyre.</p>
-              <p>
-                Vi vil gjerne ha tilbakemeldinger på hvordan det fungerer.{' '}
-                <Link target="_blank" href="https://nav-it.slack.com/archives/C01V697SSR2">
-                  Skriv til oss i #etterlevelse på Slack (åpnes i ny fane)
-                </Link>
-                .
-              </p>
-            </div>
+    <div role="main" id="content">
+      <Helmet>
+        <meta charSet="utf-8" />
+        <title>
+          E{etterlevelseDokumentasjon.etterlevelseNummer.toString()} {etterlevelseDokumentasjon.title}
+        </title>
+      </Helmet>
+      <CustomizedBreadcrumbs currentPage={'Temaoversikt'} paths={breadcrumbPaths} />
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-2">
+          <Heading level="1" size="medium">
+            Temaoversikt
+          </Heading>
+          <div className="flex gap-2 items-center">
+            <Heading level="2" size="small">
+              E{etterlevelseDokumentasjon.etterlevelseNummer.toString()} {etterlevelseDokumentasjon.title}
+            </Heading>
           </div>
-          {loading ? (
-            <Block display="flex" width="100%" justifyContent="center" marginTop={theme.sizing.scale550}>
-              <Loader size={'large'} />
-            </Block>
-          ) : (
-            <Accordion indent={false}>
-              {temaListe
-                .filter((tema) => getKravForTema(tema).length > 0)
-                .map((tema) => {
-                  const kravliste = getKravForTema(tema)
-                  const utfylteKrav = kravliste.filter(
-                    (krav) => krav.etterlevelseStatus === EtterlevelseStatus.FERDIG_DOKUMENTERT || krav.etterlevelseStatus === EtterlevelseStatus.IKKE_RELEVANT_FERDIG_DOKUMENTERT,
-                  )
+          {etterlevelseDokumentasjon.behandlerPersonopplysninger && (
+            <div className="flex gap-2 flex-wrap items-center">
+              <Detail className="font-bold">Behandling:</Detail>
+              {etterlevelseDokumentasjon.behandlingIds && etterlevelseDokumentasjon.behandlingIds.length >= 1 && etterlevelseDokumentasjon.behandlerPersonopplysninger ? (
+                etterlevelseDokumentasjon.behandlingIds.map((behandlingId, index) => {
                   return (
-                    <Accordion.Item key={`${tema.shortName}_panel`} className="flex flex-col gap-2">
-                      <Accordion.Header id={tema.code}>
-                        <div className="flex gap-4">
-                          <span>
-                            {tema.shortName} ({utfylteKrav.length} av {kravliste.length} krav er utfylt{utfylteKrav.length === 1 ? '' : 'e'})
-                          </span>
-                          {kravliste.find(
-                            (krav) =>
-                              krav.kravVersjon === 1 && krav.etterlevelseStatus === undefined && getNumberOfDaysBetween(moment(krav.aktivertDato).toDate(), new Date()) < 30,
-                          ) && <Tag variant="warning">Nytt krav</Tag>}
-                          {kravliste.find(
-                            (krav) =>
-                              krav.kravVersjon > 1 &&
-                              krav.etterlevelseStatus === undefined &&
-                              utgaattStats.filter((kl) => kl.kravNummer === krav.kravNummer && kl.etterlevelser.length > 0).length > 0 &&
-                              getNumberOfDaysBetween(moment(krav.aktivertDato).toDate(), new Date()) < 30,
-                          ) && <Tag variant="warning">Ny versjon</Tag>}
-                        </div>
-                      </Accordion.Header>
-                      <Accordion.Content>
-                        <div className="flex flex-col gap-6">
-                          <div>
-                            <Link href={`/tema/${tema.code}`} target="_blank">
-                              Lær mer om {tema.shortName}, og ansvarlig for tema (åpnes i ny fane)
-                            </Link>
-                          </div>
-                          <div className="grid grid-cols-2 gap-2">
-                            {kravliste.map((krav) => (
-                              <KravCard krav={krav} kravFilter={KRAV_FILTER_TYPE.RELEVANTE_KRAV} etterlevelseDokumentasjonId={etterlevelseDokumentasjon.id} temaCode={tema.code} />
-                            ))}
-                          </div>
-                        </div>
-                      </Accordion.Content>
-                    </Accordion.Item>
+                    <div key={'behandling_link_' + index}>
+                      {etterlevelseDokumentasjon.behandlinger && etterlevelseDokumentasjon.behandlinger[index].navn ? (
+                        <ExternalLink className="text-sm" href={`${env.pollyBaseUrl}process/${behandlingId}`}>
+                          {etterlevelseDokumentasjon.behandlinger && etterlevelseDokumentasjon.behandlinger.length > 0
+                            ? `${etterlevelseDokumentasjon.behandlinger[index].navn}`
+                            : 'Ingen data'}
+                        </ExternalLink>
+                      ) : (
+                        <BodyShort>{etterlevelseDokumentasjon.behandlinger ? etterlevelseDokumentasjon.behandlinger[index].navn : 'Ingen data'}</BodyShort>
+                      )}
+                    </div>
                   )
-                })}
-            </Accordion>
+                })
+              ) : (
+                <BodyShort>Husk å legge til behandling fra behandlingskatalogen</BodyShort>
+              )}
+            </div>
           )}
-          {/*
+          {etterlevelseDokumentasjon.teams.length > 0 ? <Teams teams={etterlevelseDokumentasjon.teams} link /> : <Detail>Team er ikke angitt</Detail>}
+          <div className="flex items-center gap-2">
+            <Detail className="font-bold">Egenskaper:</Detail>
+            {etterlevelseDokumentasjon.irrelevansFor.length === options.length && (
+              <div className="flex items-center gap-1">
+                <ExclamationmarkTriangleFillIcon area-label="" aria-hidden className="text-2xl text-icon-warning" />
+                <Label size="small">Ingen egenskaper er oppgitt</Label>
+              </div>
+            )}
+            {!etterlevelseDokumentasjon.irrelevansFor.length ? getRelevans() : getRelevans(etterlevelseDokumentasjon.irrelevansFor)}
+          </div>
+        </div>
+        <EditEtterlevelseDokumentasjonModal etterlevelseDokumentasjon={etterlevelseDokumentasjon} setEtterlevelseDokumentasjon={setEtterlevelseDokumentasjon} isEditButton />
+        <div className="flex justify-between w-full items-center">
+          <BodyShort size="small">
+            Totalt {getNewestKravVersjon(relevanteStats).length} krav, {antallFylttKrav} ferdig utfylt
+          </BodyShort>
+        </div>
+      </div>
+      <div className="pt-4 flex flex-col gap-4">
+        <div className="navds-alert navds-alert--info navds-alert--medium">
+          <div className="flex flex-col gap-2">
+            <p>Vi tester nytt oppsett med at tema og krav vises nå på samme side, slik at det forhåpentligvis blir lettere å navigere seg i.</p>
+            <p>Kravene under hvert tema er vist i anbefalt rekkefølge hvis man leser de fra venstre til høyre.</p>
+            <p>
+              Vi vil gjerne ha tilbakemeldinger på hvordan det fungerer.{' '}
+              <Link target="_blank" href="https://nav-it.slack.com/archives/C01V697SSR2">
+                Skriv til oss i #etterlevelse på Slack (åpnes i ny fane)
+              </Link>
+              .
+            </p>
+          </div>
+        </div>
+        {loading ? (
+          <Block display="flex" width="100%" justifyContent="center" marginTop={theme.sizing.scale550}>
+            <Loader size={'large'} />
+          </Block>
+        ) : (
+          <Accordion indent={false}>
+            {temaListe
+              .filter((tema) => getKravForTema(tema).length > 0)
+              .map((tema) => {
+                const kravliste = getKravForTema(tema)
+                const utfylteKrav = kravliste.filter(
+                  (krav) => krav.etterlevelseStatus === EtterlevelseStatus.FERDIG_DOKUMENTERT || krav.etterlevelseStatus === EtterlevelseStatus.IKKE_RELEVANT_FERDIG_DOKUMENTERT,
+                )
+                return (
+                  <Accordion.Item key={`${tema.shortName}_panel`} className="flex flex-col gap-2">
+                    <Accordion.Header id={tema.code}>
+                      <div className="flex gap-4">
+                        <span>
+                          {tema.shortName} ({utfylteKrav.length} av {kravliste.length} krav er ferdig utfylt)
+                        </span>
+                        {kravliste.find(
+                          (krav) => krav.kravVersjon === 1 && krav.etterlevelseStatus === undefined && getNumberOfDaysBetween(moment(krav.aktivertDato).toDate(), new Date()) < 30,
+                        ) && <Tag variant="warning">Nytt krav</Tag>}
+                        {kravliste.find(
+                          (krav) =>
+                            krav.kravVersjon > 1 &&
+                            krav.etterlevelseStatus === undefined &&
+                            utgaattStats.filter((kl) => kl.kravNummer === krav.kravNummer && kl.etterlevelser.length > 0).length > 0 &&
+                            getNumberOfDaysBetween(moment(krav.aktivertDato).toDate(), new Date()) < 30,
+                        ) && <Tag variant="warning">Ny versjon</Tag>}
+                      </div>
+                    </Accordion.Header>
+                    <Accordion.Content>
+                      <div className="flex flex-col gap-6">
+                        <div>
+                          <Link href={`/tema/${tema.code}`} target="_blank">
+                            Lær mer om {tema.shortName} (åpnes i ny fane)
+                          </Link>
+                        </div>
+                        <div className="grid grid-cols-2 gap-2">
+                          {kravliste.map((krav, idx) => (
+                            <KravCard
+                              key={`krav_${idx}`}
+                              krav={krav}
+                              kravFilter={KRAV_FILTER_TYPE.RELEVANTE_KRAV}
+                              etterlevelseDokumentasjonId={etterlevelseDokumentasjon.id}
+                              temaCode={tema.code}
+                            />
+                          ))}
+                        </div>
+                      </div>
+                    </Accordion.Content>
+                  </Accordion.Item>
+                )
+              })}
+          </Accordion>
+        )}
+        {/*
         DISABLED TEMPORARY
         {irrelevanteStats.length > 0 && (
           <>
@@ -327,9 +319,23 @@ export const DokumentasjonPage = () => {
             </Block>
           </>
         )} */}
+        <div className="w-full flex justify-end items-center">
+          <ExportEtterlevelseModal etterlevelseDokumentasjonId={etterlevelseDokumentasjon.id} />
+          {user.isAdmin() && (
+            <Button variant="tertiary" size="small" onClick={() => setArkivModal(true)}>
+              Arkivér i WebSak
+            </Button>
+          )}
+          <ArkiveringModal
+            arkivModal={arkivModal}
+            setArkivModal={setArkivModal}
+            etterlevelseDokumentasjonId={etterlevelseDokumentasjon.id}
+            etterlevelseArkiv={etterlevelseArkiv}
+            setEtterlevelseArkiv={setEtterlevelseArkiv}
+          />
         </div>
-      </Layout2>
-    </Block>
+      </div>
+    </div>
   )
 }
 
diff --git a/apps/frontend/src/pages/EtterlevelseDokumentasjonPage.tsx b/apps/frontend/src/pages/EtterlevelseDokumentasjonPage.tsx
index 66517a902..1966a2019 100644
--- a/apps/frontend/src/pages/EtterlevelseDokumentasjonPage.tsx
+++ b/apps/frontend/src/pages/EtterlevelseDokumentasjonPage.tsx
@@ -59,7 +59,7 @@ export const EtterlevelseDokumentasjonPage = () => {
       href: '/dokumentasjoner',
     },
     {
-      pathName: 'Tema for dokumentasjon',
+      pathName: 'Temaoversikt',
       href: '/dokumentasjon/' + etterlevelseDokumentasjon?.id,
     },
   ]
diff --git a/apps/frontend/src/pages/EtterlevelseDokumentasjonTemaPage.tsx b/apps/frontend/src/pages/EtterlevelseDokumentasjonTemaPage.tsx
index a2e5dc031..aa0c9992e 100644
--- a/apps/frontend/src/pages/EtterlevelseDokumentasjonTemaPage.tsx
+++ b/apps/frontend/src/pages/EtterlevelseDokumentasjonTemaPage.tsx
@@ -153,7 +153,7 @@ export const EtterlevelseDokumentasjonTemaPage = () => {
       href: '/dokumentasjoner',
     },
     {
-      pathName: 'Tema for dokumentasjon',
+      pathName: 'Temaoversikt',
       href: '/dokumentasjon/' + etterlevelseDokumentasjon?.id,
     },
   ]
diff --git a/apps/frontend/src/pages/KravPage.tsx b/apps/frontend/src/pages/KravPage.tsx
index 3b2c11dce..6c4d7284a 100644
--- a/apps/frontend/src/pages/KravPage.tsx
+++ b/apps/frontend/src/pages/KravPage.tsx
@@ -244,12 +244,12 @@ export const KravPage = () => {
               {krav?.id && ((user.isKraveier() && !hasKravExpired()) || user.isAdmin()) && (
                 <div>
                   <div className="flex flex-1">
-                    <Button size="small" variant="tertiary" onClick={() => setEdit(!edit)}>
+                    <Button size="small" variant="primary" onClick={() => setEdit(!edit)}>
                       Rediger krav
                     </Button>
 
                     {krav.status === KravStatus.AKTIV && (
-                      <Button className="ml-2.5" size="small" onClick={newVersion} variant="tertiary">
+                      <Button className="ml-4" size="small" onClick={newVersion} variant="secondary">
                         Ny versjon av krav
                       </Button>
                     )}
@@ -257,9 +257,7 @@ export const KravPage = () => {
                   </div>
                   {(user.isAdmin() || krav.status !== KravStatus.AKTIV) && (
                     <div className="mt-2.5 flex">
-                      <Spacer />
                       <DeleteItem buttonLabel="Slett krav" buttonSize="small" fun={() => deleteKrav(krav.id)} redirect={'/kravliste'} />
-                      <Spacer />
                     </div>
                   )}
                 </div>