diff --git a/src/demo/demo-dashboard.tsx b/src/demo/demo-dashboard.tsx
index 58f80e30..87fcc36e 100644
--- a/src/demo/demo-dashboard.tsx
+++ b/src/demo/demo-dashboard.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import {
     Accordion,
+    Box,
     Cell,
     Checkbox,
     CheckboxGroup,
     Grid,
     Heading,
-    Panel,
     Radio,
     RadioGroup,
     Select,
@@ -348,9 +348,9 @@ const DemoDashboard = () => {
             <Heading size="xlarge" className={styles.demoHeading}>
                 Demo av Veien til arbeid
             </Heading>
-            <Panel className={styles.demodashboardInnhold}>
+            <Box padding="4" className={styles.demodashboardInnhold}>
                 <div className={`${spacingStyles.mb2} ${flexStyles.flex} ${flexStyles.wrap}`}>
-                    <Panel className={styles.demoCheckboxpanel}>
+                    <Box padding="4" className={styles.demoCheckboxpanel}>
                         <Select
                             label={'Velg arbeidssøkerperiode'}
                             onChange={handleChangeArbeidssokerPeriode}
@@ -438,8 +438,8 @@ const DemoDashboard = () => {
                                 Mangler registreringsdata
                             </Checkbox>
                         </CheckboxGroup>
-                    </Panel>
-                    <Panel className={styles.demoCheckboxpanel}>
+                    </Box>
+                    <Box padding="4" className={styles.demoCheckboxpanel}>
                         <Select
                             label={'Velg 14a vedtak'}
                             onChange={handleChangeServicegruppe}
@@ -465,7 +465,7 @@ const DemoDashboard = () => {
                             ))}
                         </Select>
 
-                        <Panel className={styles.demoCheckboxpanel}>
+                        <Box padding="4" className={styles.demoCheckboxpanel}>
                             <RadioGroup
                                 legend="Velg brukers valg"
                                 defaultValue={behovForVeiledningState?.oppfolging}
@@ -474,9 +474,9 @@ const DemoDashboard = () => {
                                 <Radio value={ForeslattInnsatsgruppe.STANDARD_INNSATS}>Klare seg selv</Radio>
                                 <Radio value={ForeslattInnsatsgruppe.SITUASJONSBESTEMT_INNSATS}>Ønsker hjelp</Radio>
                             </RadioGroup>
-                        </Panel>
+                        </Box>
 
-                        <Panel className={styles.demoCheckboxpanel}>
+                        <Box padding="4" className={styles.demoCheckboxpanel}>
                             <RadioGroup
                                 legend="Vil være arbeidssøker neste periode"
                                 defaultValue={hentDemoState(DemoData.ARBEIDSSOKER_NESTE_PERIODE) || 'Ja'}
@@ -485,9 +485,9 @@ const DemoDashboard = () => {
                                 <Radio value={'Ja'}>Ja</Radio>
                                 <Radio value={'Nei'}>Nei</Radio>
                             </RadioGroup>
-                        </Panel>
-                    </Panel>
-                    <Panel className={styles.demoFeaturetoggles}>
+                        </Box>
+                    </Box>
+                    <Box padding="4" className={styles.demoFeaturetoggles}>
                         <CheckboxGroup legend={'Featuretoggles'} value={getFeatureToggleCheckboxGroupValue()}>
                             {Object.values(FeatureToggles).map((toggle) => {
                                 return (
@@ -497,7 +497,7 @@ const DemoDashboard = () => {
                                 );
                             })}
                         </CheckboxGroup>
-                    </Panel>
+                    </Box>
                 </div>
 
                 <Accordion>
@@ -593,7 +593,7 @@ const DemoDashboard = () => {
                                     </Select>
                                 </Cell>
                                 <Cell xs={6} md={6} lg={3}>
-                                    <Panel className={styles.demoCheckboxpanel}>
+                                    <Box padding="4" className={styles.demoCheckboxpanel}>
                                         <CheckboxGroup
                                             legend=""
                                             value={[
@@ -641,10 +641,10 @@ const DemoDashboard = () => {
                                                 Vis gjelder fra dato-velger
                                             </Checkbox>
                                         </CheckboxGroup>
-                                    </Panel>
+                                    </Box>
                                 </Cell>
                                 <Cell xs={6} md={6} lg={3}>
-                                    <Panel className={styles.demoFeaturetoggles}>
+                                    <Box padding="4" className={styles.demoFeaturetoggles}>
                                         <CheckboxGroup
                                             legend={'Featuretoggles'}
                                             value={getFeatureToggleCheckboxGroupValue()}
@@ -662,13 +662,13 @@ const DemoDashboard = () => {
                                                 );
                                             })}
                                         </CheckboxGroup>
-                                    </Panel>
+                                    </Box>
                                 </Cell>
                             </Grid>
                         </Accordion.Content>
                     </Accordion.Item>
                 </Accordion>
-            </Panel>
+            </Box>
         </section>
     );
 };
diff --git a/src/innhold/innhold.module.css b/src/innhold/innhold.module.css
index 333bc763..7e40cc17 100644
--- a/src/innhold/innhold.module.css
+++ b/src/innhold/innhold.module.css
@@ -35,6 +35,12 @@
     margin: 0;
 }
 
+.tabsPanel {
+    background-color: var(--a-surface-default)!important;
+    border-radius: var(--a-border-radius-large)!important;
+    border: none!important;
+}
+
 .header {
     color: #262626;
     width: 100%;
diff --git a/src/komponenter/aktivitetsplan/aktivitetsplan.tsx b/src/komponenter/aktivitetsplan/aktivitetsplan.tsx
index 60af1476..2e427ca0 100644
--- a/src/komponenter/aktivitetsplan/aktivitetsplan.tsx
+++ b/src/komponenter/aktivitetsplan/aktivitetsplan.tsx
@@ -1,4 +1,4 @@
-import { BodyLong, Heading, Link, Panel } from '@navikt/ds-react';
+import { BodyLong, Heading, Link, Box } from '@navikt/ds-react';
 import { TasklistIcon } from '@navikt/aksel-icons';
 import spacingStyles from '../../spacing.module.css';
 import flexStyles from '../../flex.module.css';
@@ -33,7 +33,7 @@ const Aktivitetsplan = () => {
     };
 
     return (
-        <Panel className={`${flexStyles.flex} ${spacingStyles.pb2}`}>
+        <Box padding="4" className={`${flexStyles.flex} ${spacingStyles.pb2}`}>
             <span
                 style={{
                     marginRight: '0.5em',
@@ -54,7 +54,7 @@ const Aktivitetsplan = () => {
                     {tekst('aktivitetsplan.holde-orden')}
                 </BodyLong>
             </div>
-        </Panel>
+        </Box>
     );
 };
 
diff --git a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-avklart-situasjonsbestemt.tsx b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-avklart-situasjonsbestemt.tsx
index ba343049..3341d063 100644
--- a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-avklart-situasjonsbestemt.tsx
+++ b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-avklart-situasjonsbestemt.tsx
@@ -1,4 +1,4 @@
-import { BodyLong, Detail, Heading, Panel } from '@navikt/ds-react';
+import { BodyLong, Box, Detail, Heading } from '@navikt/ds-react';
 
 import { useSprakValg } from '../../contexts/sprak';
 
@@ -40,7 +40,7 @@ function BehovsavklaringAvklartSituasjonsbestemt() {
     const tekst = lagHentTekstForSprak(TEKSTER, sprak);
     const brukTabsDemo = useSkalBrukeTabs();
     return (
-        <Panel>
+        <Box padding="4">
             <ErRendret loggTekst="Rendrer behovsavklaringkomponent - avklart - situasjonsbestemt" />
             {!brukTabsDemo && (
                 <Detail uppercase style={{ marginTop: '-1rem' }}>
@@ -61,7 +61,7 @@ function BehovsavklaringAvklartSituasjonsbestemt() {
                 />
             </BodyLong>
             <InViewport loggTekst="Viser behovsavklaringkomponent - avklart - situasjonsbestemt i viewport" />
-        </Panel>
+        </Box>
     );
 }
 
diff --git a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-avklart-standard.tsx b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-avklart-standard.tsx
index 9a6cc3e1..7ffbdbd8 100644
--- a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-avklart-standard.tsx
+++ b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-avklart-standard.tsx
@@ -1,4 +1,4 @@
-import { BodyLong, Detail, Heading, Panel } from '@navikt/ds-react';
+import { BodyLong, Box, Detail, Heading } from '@navikt/ds-react';
 
 import { useSprakValg } from '../../contexts/sprak';
 
@@ -34,7 +34,7 @@ function BehovsavklaringAvklartStandard() {
     const brukTabsDemo = useSkalBrukeTabs();
 
     return (
-        <Panel>
+        <Box padding="4">
             <ErRendret loggTekst="Rendrer behovsavklaringkomponent - avklart - standard" />
             {!brukTabsDemo && (
                 <Detail uppercase style={{ marginTop: '-1rem' }}>
@@ -54,7 +54,7 @@ function BehovsavklaringAvklartStandard() {
                 <AktivitetsplanLenke aktivitet={'Behovsavklaring - avklart - standard - går til aktivitetsplanen'} />
             </BodyLong>
             <InViewport loggTekst="Viser behovsavklaringkomponent - avklart - standard i viewport" />
-        </Panel>
+        </Box>
     );
 }
 
diff --git a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-ikke-svart-situasjonsbestemt.tsx b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-ikke-svart-situasjonsbestemt.tsx
index d78ee31e..0fb72a94 100644
--- a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-ikke-svart-situasjonsbestemt.tsx
+++ b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-ikke-svart-situasjonsbestemt.tsx
@@ -1,4 +1,4 @@
-import { BodyLong, BodyShort, Button, Detail, Heading, Panel } from '@navikt/ds-react';
+import { BodyLong, BodyShort, Box, Button, Detail, Heading } from '@navikt/ds-react';
 
 import { useSprakValg } from '../../contexts/sprak';
 import { useBehovForVeiledning } from '../../contexts/behov-for-veiledning';
@@ -65,7 +65,7 @@ function IkkeSvartPaaBehovsavklaringSituasjonsbestemt() {
     }
 
     return (
-        <Panel>
+        <Box padding="4">
             <ErRendret loggTekst="Rendrer behovsavklaringkomponent - ikke svart - situasjonsbestemt" />{' '}
             {!brukTabsDemo && (
                 <Detail uppercase style={{ marginTop: '-1rem' }}>
@@ -99,7 +99,7 @@ function IkkeSvartPaaBehovsavklaringSituasjonsbestemt() {
             <ReadMoreVeileder />
             <ReadMoreVurdering />
             <InViewport loggTekst="Viser behovsavklaringkomponent - ikke svart - situasjonsbestemt i viewport" />
-        </Panel>
+        </Box>
     );
 }
 
diff --git a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-ikke-svart-standard.tsx b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-ikke-svart-standard.tsx
index 18f92860..4f1c0d7e 100644
--- a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-ikke-svart-standard.tsx
+++ b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-ikke-svart-standard.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { BodyLong, Button, Detail, Heading, Panel } from '@navikt/ds-react';
+import { BodyLong, Box, Button, Detail, Heading } from '@navikt/ds-react';
 
 import { useSprakValg } from '../../contexts/sprak';
 import { useBehovForVeiledning } from '../../contexts/behov-for-veiledning';
@@ -80,7 +80,7 @@ function IkkeSvartPaaBehovsavklaringStandardInnsats() {
     }
 
     return (
-        <Panel>
+        <Box padding="4">
             <ErRendret loggTekst="Rendrer behovsavklaringkomponent - ikke svart - standard" />
             {!brukTabsDemo && (
                 <Detail uppercase style={{ marginTop: '-1rem' }}>
@@ -113,7 +113,7 @@ function IkkeSvartPaaBehovsavklaringStandardInnsats() {
             <ReadMoreVeileder />
             <ReadMoreVurdering />
             <InViewport loggTekst="Viser behovsavklaringkomponent - ikke svart - standard i viewport" />
-        </Panel>
+        </Box>
     );
 }
 
diff --git a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-svart-situasjonsbestemt.tsx b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-svart-situasjonsbestemt.tsx
index 7b6573a5..fce8b430 100644
--- a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-svart-situasjonsbestemt.tsx
+++ b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-svart-situasjonsbestemt.tsx
@@ -1,4 +1,4 @@
-import { BodyLong, Heading, Panel } from '@navikt/ds-react';
+import { BodyLong, Box, Heading } from '@navikt/ds-react';
 
 import { useSprakValg } from '../../contexts/sprak';
 import { useBehovForVeiledning } from '../../contexts/behov-for-veiledning';
@@ -41,7 +41,7 @@ function EnigMedProfilering() {
     const tekst = lagHentTekstForSprak(TEKSTER, sprak);
 
     return (
-        <Panel>
+        <Box padding="4">
             <ErRendret loggTekst="Rendrer behovsavklaringkomponent - svart - enig - situasjonsbestemt" />
             <Heading size="small" className={spacingStyles.mb1}>
                 {tekst('headingEnig')}
@@ -57,7 +57,7 @@ function EnigMedProfilering() {
                 />
             </BodyLong>
             <InViewport loggTekst="Viser behovsavklaringkomponent - svart - enig - situasjonsbestemt i viewport" />
-        </Panel>
+        </Box>
     );
 }
 
@@ -66,7 +66,7 @@ function UenigMedProfilering() {
     const tekst = lagHentTekstForSprak(TEKSTER, sprak);
 
     return (
-        <Panel>
+        <Box padding="4">
             <ErRendret loggTekst="Rendrer behovsavklaringkomponent - svart - uenig - situasjonsbestemt" />
             <Heading size="small" className={spacingStyles.mb1}>
                 {tekst('headingUenig')}
@@ -86,7 +86,7 @@ function UenigMedProfilering() {
                 />
             </BodyLong>
             <InViewport loggTekst="Viser behovsavklaringkomponent - svart - uenig - situasjonsbestemt i viewport" />
-        </Panel>
+        </Box>
     );
 }
 
diff --git a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-svart-standard.tsx b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-svart-standard.tsx
index 0b2bf92a..6f298cc3 100644
--- a/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-svart-standard.tsx
+++ b/src/komponenter/behovsavklaring-oppfolging/behovsavklaring-svart-standard.tsx
@@ -1,4 +1,4 @@
-import { BodyLong, Detail, Heading, Panel } from '@navikt/ds-react';
+import { BodyLong, Box, Detail, Heading } from '@navikt/ds-react';
 
 import { useSprakValg } from '../../contexts/sprak';
 import { useBehovForVeiledning } from '../../contexts/behov-for-veiledning';
@@ -35,7 +35,7 @@ function EnigMedProfilering() {
     const brukTabsDemo = useSkalBrukeTabs();
 
     return (
-        <Panel>
+        <Box padding="4">
             <ErRendret loggTekst="Rendrer behovsavklaringkomponent - svart - enig - standard" />
             {!brukTabsDemo && (
                 <Detail uppercase style={{ marginTop: '-1rem' }}>
@@ -57,7 +57,7 @@ function EnigMedProfilering() {
                 />
             </BodyLong>
             <InViewport loggTekst="Viser behovsavklaringkomponent - svart - enig - standard i viewport" />
-        </Panel>
+        </Box>
     );
 }
 
@@ -66,7 +66,7 @@ function UenigMedProfilering() {
     const tekst = lagHentTekstForSprak(TEKSTER, sprak);
     const brukTabsDemo = useSkalBrukeTabs();
     return (
-        <Panel>
+        <Box padding="4">
             <ErRendret loggTekst="Rendrer behovsavklaringkomponent - svart - uenig - standard" />
             {!brukTabsDemo && (
                 <Detail uppercase style={{ marginTop: '-1rem' }}>
@@ -88,7 +88,7 @@ function UenigMedProfilering() {
                 />
             </BodyLong>
             <InViewport loggTekst="Viser behovsavklaringkomponent - svart - uenig - standard i viewport" />
-        </Panel>
+        </Box>
     );
 }
 
diff --git a/src/komponenter/dagpenger/dagpenger-og-ytelser-innhold.tsx b/src/komponenter/dagpenger/dagpenger-og-ytelser-innhold.tsx
index 13f8579e..7cf8897e 100644
--- a/src/komponenter/dagpenger/dagpenger-og-ytelser-innhold.tsx
+++ b/src/komponenter/dagpenger/dagpenger-og-ytelser-innhold.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { BodyShort, Detail, Panel } from '@navikt/ds-react';
+import { BodyShort, Box, Detail } from '@navikt/ds-react';
 
 import { useSprakValg } from '../../contexts/sprak';
 import HarIkkeSokt from './dagpenger-har-ikke-sokt';
@@ -62,7 +62,7 @@ function DagpengerOgYtelserInnhold(props: Props) {
     const tekst = lagHentTekstForSprak(TEKSTER, useSprakValg().sprak);
 
     return (
-        <Panel>
+        <Box padding="4">
             {!brukTabsDemo && (
                 <Detail uppercase style={{ marginTop: '-1rem' }}>
                     {tekst('tittel')}
@@ -85,7 +85,7 @@ function DagpengerOgYtelserInnhold(props: Props) {
                 handleByttVisningKlikk={props.handleByttVisningKlikk}
                 valgtYtelserVisning={props.valgtVisning}
             />
-        </Panel>
+        </Box>
     );
 }
 
diff --git a/src/komponenter/endre-situasjon/min-situasjon.tsx b/src/komponenter/endre-situasjon/min-situasjon.tsx
index 5799764f..676d06e1 100644
--- a/src/komponenter/endre-situasjon/min-situasjon.tsx
+++ b/src/komponenter/endre-situasjon/min-situasjon.tsx
@@ -1,5 +1,3 @@
-import { Panel } from '@navikt/ds-react';
-
 import { useAmplitudeData } from '../hent-initial-data/amplitude-provider';
 import { useArbeidssokerPerioder } from '../../contexts/arbeidssoker';
 import { useBesvarelse } from '../../contexts/besvarelse';
@@ -10,6 +8,7 @@ import beregnArbeidssokerperioder from '../../lib/beregn-arbeidssokerperioder';
 import AiAInViewport from '../aia-in-viewport/aia-in-viewport';
 import ErRendret from '../er-rendret/er-rendret';
 import { useBrukerregistreringData } from '../../hooks/use-brukerregistrering-data';
+import { Box } from '@navikt/ds-react';
 
 function MinSituasjon() {
     const brukerregistreringData = useBrukerregistreringData();
@@ -27,9 +26,9 @@ function MinSituasjon() {
     if (!kanViseKomponent) return null;
 
     return (
-        <Panel style={{ paddingLeft: 0, paddingTop: 0, paddingRight: 0 }}>
+        <Box padding="4" style={{ paddingLeft: 0, paddingTop: 0, paddingRight: 0 }}>
             <ErRendret loggTekst="Rendrer endring av situasjon" />
-            <Panel>
+            <Box padding="4">
                 <Sammendrag
                     startDato={opprettetDato || aktivPeriodeStart}
                     manueltRegistrertAv={manueltRegistrertAv}
@@ -39,9 +38,9 @@ function MinSituasjon() {
                     endretAv={endretAv}
                     erBesvarelsenEndret={erBesvarelsenEndret}
                 />
-            </Panel>
+            </Box>
             <AiAInViewport loggTekst="Viser endring av situasjon" />
-        </Panel>
+        </Box>
     );
 }
 
diff --git a/src/komponenter/hjelp-og-stotte/hjelp-og-stotte.tsx b/src/komponenter/hjelp-og-stotte/hjelp-og-stotte.tsx
index dea3d1d9..77504836 100644
--- a/src/komponenter/hjelp-og-stotte/hjelp-og-stotte.tsx
+++ b/src/komponenter/hjelp-og-stotte/hjelp-og-stotte.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Detail, Heading, Panel, ReadMore } from '@navikt/ds-react';
+import { Box, Detail, Heading, ReadMore } from '@navikt/ds-react';
 
 import { useAmplitudeData } from '../hent-initial-data/amplitude-provider';
 import { useSprakValg } from '../../contexts/sprak';
@@ -60,7 +60,7 @@ function HjelpOgStotte() {
     };
 
     return (
-        <Panel>
+        <Box padding="4">
             <Detail uppercase style={{ marginTop: '-1rem' }}>
                 Hjelp og støtte
             </Detail>
@@ -69,7 +69,7 @@ function HjelpOgStotte() {
                 <Forklaring />
             </ReadMore>
             <InViewport loggTekst="Viser hjelp og støtte-komponent i viewport" />
-        </Panel>
+        </Box>
     );
 }
 
diff --git a/src/komponenter/ikke-registrert/ikke-registrert.tsx b/src/komponenter/ikke-registrert/ikke-registrert.tsx
index b1ca6bb9..5ac6abfb 100644
--- a/src/komponenter/ikke-registrert/ikke-registrert.tsx
+++ b/src/komponenter/ikke-registrert/ikke-registrert.tsx
@@ -1,4 +1,4 @@
-import { Button, Heading, BodyShort, Panel } from '@navikt/ds-react';
+import { Button, Heading, BodyShort, Box } from '@navikt/ds-react';
 import spacingStyles from '../../spacing.module.css';
 
 import { loggAktivitet } from '../../metrics/metrics';
@@ -47,7 +47,7 @@ const IkkeRegistrert = () => {
 
     return (
         <Rad>
-            <Panel border className={spacingStyles.blokkS} ref={infoBoksRef}>
+            <Box padding="4" className={spacingStyles.blokkS} ref={infoBoksRef} borderWidth="1">
                 <ErRendret loggTekst="Rendrer IkkeRegistrert" />
                 <Heading size="small" level="2" className={spacingStyles.blokkXs}>
                     {tekst('header')}
@@ -57,7 +57,7 @@ const IkkeRegistrert = () => {
                     {tekst('button')}
                 </Button>
                 <InViewport loggTekst="Viser IkkeRegistrert i viewport" />
-            </Panel>
+            </Box>
         </Rad>
     );
 };
diff --git a/src/komponenter/ikke-standard/forenklet-innhold.tsx b/src/komponenter/ikke-standard/forenklet-innhold.tsx
index 1869cc29..0c3955a5 100644
--- a/src/komponenter/ikke-standard/forenklet-innhold.tsx
+++ b/src/komponenter/ikke-standard/forenklet-innhold.tsx
@@ -1,4 +1,4 @@
-import { BodyLong, Heading, Link, Panel } from '@navikt/ds-react';
+import { BodyLong, Heading, Link, Box } from '@navikt/ds-react';
 import { BandageIcon, ChatIcon, LaptopIcon, ClipboardIcon, TasklistIcon } from '@navikt/aksel-icons';
 
 import { useSprakValg } from '../../contexts/sprak';
@@ -104,7 +104,7 @@ function ForenkletInnhold() {
     };
 
     return (
-        <Panel className={`${styles.mtn1} ${spacingStyles.mb1}`}>
+        <Box padding="4" className={`${styles.mtn1} ${spacingStyles.mb1}`}>
             <ul className={styles.ikkeStandardListe}>
                 {ListeElement(
                     <TasklistIcon aria-hidden="true" />,
@@ -172,7 +172,7 @@ function ForenkletInnhold() {
                     </div>,
                 )}
             </ul>
-        </Panel>
+        </Box>
     );
 }
 
diff --git a/src/komponenter/ikke-standard/motestotte.tsx b/src/komponenter/ikke-standard/motestotte.tsx
index 5168190a..75fccb51 100644
--- a/src/komponenter/ikke-standard/motestotte.tsx
+++ b/src/komponenter/ikke-standard/motestotte.tsx
@@ -1,4 +1,4 @@
-import { BodyShort, Button, Heading, Panel } from '@navikt/ds-react';
+import { BodyShort, Button, Heading, Box } from '@navikt/ds-react';
 import spacingStyles from '../../spacing.module.css';
 
 import { useAmplitudeData } from '../hent-initial-data/amplitude-provider';
@@ -108,7 +108,7 @@ const Motestotte = ({ state }: Props) => {
     if (!kanViseKomponent) return null;
 
     return (
-        <Panel border className={spacingStyles.blokkS}>
+        <Box padding="4" className={spacingStyles.blokkS} borderWidth="1">
             <Heading size="small" level="1" className={spacingStyles.blokkXs}>
                 {tekst(`${sykmeldtStatus}-tittel`)}
             </Heading>
@@ -117,7 +117,7 @@ const Motestotte = ({ state }: Props) => {
             <Button variant="primary" onClick={handleClick}>
                 Start
             </Button>
-        </Panel>
+        </Box>
     );
 };
 
diff --git a/src/komponenter/meldekort-mikrofrontend/LinkCard.tsx b/src/komponenter/meldekort-mikrofrontend/LinkCard.tsx
index 8a489569..5add76d9 100644
--- a/src/komponenter/meldekort-mikrofrontend/LinkCard.tsx
+++ b/src/komponenter/meldekort-mikrofrontend/LinkCard.tsx
@@ -9,7 +9,7 @@ interface Props {
 
 const LinkCard = ({ href, children }: Props) => {
     return (
-        <a id={styles.linkcard} className={`navds-panel navds-link-panel`} href={href}>
+        <a id={styles.linkcard} className={`tabsPanel navds-link-panel`} href={href}>
             <div className="navds-link-panel__content">{children}</div>
             <ChevronRightIcon id={styles.linkcardChevron} className="navds-link-panel__chevron" />
         </a>
diff --git a/src/komponenter/meldekort/meldekort.tsx b/src/komponenter/meldekort/meldekort.tsx
index dc50d6de..97065d2a 100644
--- a/src/komponenter/meldekort/meldekort.tsx
+++ b/src/komponenter/meldekort/meldekort.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Detail, Panel, ReadMore } from '@navikt/ds-react';
+import { Detail, Box, ReadMore } from '@navikt/ds-react';
 
 import { useSprakValg } from '../../contexts/sprak';
 import { useAmplitudeData } from '../hent-initial-data/amplitude-provider';
@@ -38,7 +38,7 @@ function Meldekort() {
     };
 
     return (
-        <Panel>
+        <Box padding="4">
             {!brukTabsDemo && (
                 <Detail uppercase style={{ marginTop: '-1rem' }}>
                     Meldekort og meldeplikt
@@ -48,7 +48,7 @@ function Meldekort() {
             <ReadMore size="small" header={tekst('overskrift')} onClick={handleClickLesMer}>
                 <MeldekortForklaring />
             </ReadMore>
-        </Panel>
+        </Box>
     );
 }
 
diff --git a/src/komponenter/min-situasjon/min-situasjon.tsx b/src/komponenter/min-situasjon/min-situasjon.tsx
index 68710267..3cd524d0 100644
--- a/src/komponenter/min-situasjon/min-situasjon.tsx
+++ b/src/komponenter/min-situasjon/min-situasjon.tsx
@@ -1,4 +1,4 @@
-import { BodyShort, Detail, Heading, Panel } from '@navikt/ds-react';
+import { BodyShort, Box, Detail, Heading } from '@navikt/ds-react';
 
 import { useFeatureToggleData } from '../../contexts/feature-toggles';
 import { useAmplitudeData } from '../hent-initial-data/amplitude-provider';
@@ -64,7 +64,7 @@ function MinSituasjon() {
         : 'Min jobbsituasjon: ukjent';
 
     return (
-        <Panel>
+        <Box padding="4">
             <Detail uppercase>Min situasjon</Detail>
             <Heading className={spacingStyles.mb1} size="small">
                 {heading}
@@ -80,7 +80,7 @@ function MinSituasjon() {
                 amplitudeData={amplitudeData}
             />
             <InnsynLesMer />
-        </Panel>
+        </Box>
     );
 }
 
diff --git a/src/komponenter/reaktivering/automatisk-reaktivert.tsx b/src/komponenter/reaktivering/automatisk-reaktivert.tsx
index 15dd0553..fd328dbf 100644
--- a/src/komponenter/reaktivering/automatisk-reaktivert.tsx
+++ b/src/komponenter/reaktivering/automatisk-reaktivert.tsx
@@ -1,4 +1,4 @@
-import { BodyLong, Button, Heading, Panel } from '@navikt/ds-react';
+import { BodyLong, Box, Button, Heading } from '@navikt/ds-react';
 import { InformationIcon } from '@navikt/aksel-icons';
 import { useEffect, useRef, useState } from 'react';
 
@@ -78,7 +78,7 @@ function AutomatiskReaktivert() {
     if (!kanViseKomponent) return null;
 
     return (
-        <Panel className={spacingStyles.px1_5} ref={panelRef}>
+        <Box padding="4" className={spacingStyles.px1_5} ref={panelRef}>
             <ErRendret loggTekst="Rendrer automatisk reaktivert" />
             {visSprakvelger && (
                 <Button variant="tertiary" size="xsmall" className={spacingStyles.ml1_75} onClick={toggleByttSprak}>
@@ -122,7 +122,7 @@ function AutomatiskReaktivert() {
                 </div>
             </div>
             <AiAInViewport loggTekst="Automatisk reaktivert" />
-        </Panel>
+        </Box>
     );
 }
 
diff --git a/src/komponenter/reaktivering/reaktivering-kvittering.tsx b/src/komponenter/reaktivering/reaktivering-kvittering.tsx
index 9cb3cf04..3dc94899 100644
--- a/src/komponenter/reaktivering/reaktivering-kvittering.tsx
+++ b/src/komponenter/reaktivering/reaktivering-kvittering.tsx
@@ -1,4 +1,4 @@
-import { BodyShort, Button, Detail, Heading, Link, Panel } from '@navikt/ds-react';
+import { BodyShort, Box, Button, Detail, Heading, Link } from '@navikt/ds-react';
 import { XMarkIcon } from '@navikt/aksel-icons';
 import React, { useEffect, useState } from 'react';
 import spacingStyles from '../../spacing.module.css';
@@ -86,7 +86,7 @@ const ReaktiveringKvittering = () => {
 
     return (
         <>
-            <Panel className={spacingStyles.mt1} style={{ background: 'var(--a-surface-warning-subtle)' }}>
+            <Box padding="4" className={spacingStyles.mt1} style={{ background: 'var(--a-surface-warning-subtle)' }}>
                 <div className={`${flexStyles.flex} ${flexStyles.spaceBetween} ${spacingStyles.blokkS}`}>
                     <div>
                         <Detail uppercase>{tekst('tittel')}</Detail>
@@ -108,7 +108,7 @@ const ReaktiveringKvittering = () => {
                         </Link>
                     </BodyShort>
                 </div>
-            </Panel>
+            </Box>
             <ErRendret loggTekst="Rendrer kvittering etter reaktivering" />
             <InViewport loggTekst="Viser kvittering etter reaktivering i viewport" />
         </>
diff --git a/src/komponenter/registrert-tittel/registrert-tittel.tsx b/src/komponenter/registrert-tittel/registrert-tittel.tsx
index e96de706..23d6cde6 100644
--- a/src/komponenter/registrert-tittel/registrert-tittel.tsx
+++ b/src/komponenter/registrert-tittel/registrert-tittel.tsx
@@ -1,5 +1,5 @@
 import { createRef, useCallback, useEffect, useState } from 'react';
-import { BodyShort, Heading, Panel } from '@navikt/ds-react';
+import { BodyShort, Box, Heading } from '@navikt/ds-react';
 
 import { useSprakValg } from '../../contexts/sprak';
 import { useArbeidssokerPerioder } from '../../contexts/arbeidssoker';
@@ -73,9 +73,9 @@ const RegistrertTittel = ({ standard }: Props) => {
 
     function getStandardPanel() {
         return (
-            <Panel className={`${spacingStyles.mb075} ${spacingStyles.pa0}`}>
+            <Box padding="4" className={`${spacingStyles.mb075} ${spacingStyles.pa0}`}>
                 <BodyShort className={styles.header}>{tekst(hentTekstNokkel(erNyRegistrert, erPermittert))}</BodyShort>
-            </Panel>
+            </Box>
         );
     }
 
@@ -86,14 +86,14 @@ const RegistrertTittel = ({ standard }: Props) => {
             {standard ? (
                 getStandardPanel()
             ) : (
-                <Panel className={spacingStyles.pbn}>
+                <Box padding="4" className={spacingStyles.pbn}>
                     <Heading size="small">{tekst(hentTekstNokkel(erNyRegistrert, erPermittert))}</Heading>
                     {registrertDato && (
                         <BodyShort>
                             {tekst('registreringsDato')}: {prettyPrintDato(registrertDato)}
                         </BodyShort>
                     )}
-                </Panel>
+                </Box>
             )}
         </div>
     );
diff --git a/src/komponenter/situasjonsbestemt/situasjonsbestemt.tsx b/src/komponenter/situasjonsbestemt/situasjonsbestemt.tsx
index 731241f8..2c985100 100644
--- a/src/komponenter/situasjonsbestemt/situasjonsbestemt.tsx
+++ b/src/komponenter/situasjonsbestemt/situasjonsbestemt.tsx
@@ -1,4 +1,4 @@
-import { BodyLong, Heading, Link, Panel } from '@navikt/ds-react';
+import { BodyLong, Heading, Link, Box } from '@navikt/ds-react';
 import { BandageIcon, ChatIcon, LaptopIcon, ClipboardIcon, TasklistIcon } from '@navikt/aksel-icons';
 
 import { useAmplitudeData } from '../hent-initial-data/amplitude-provider';
@@ -128,7 +128,7 @@ function Situasjonsbestemt() {
     };
 
     return (
-        <Panel className={`${styles.mtn1} ${spacingStyles.mb1}`}>
+        <Box padding="4" className={`${styles.mtn1} ${spacingStyles.mb1}`}>
             <ul className={styles.ikkeStandardListe}>
                 {harGyldigBehovsvurdering ? <DialogPanel /> : <Behovsavklaring />}
                 {harGyldigBehovsvurdering &&
@@ -189,7 +189,7 @@ function Situasjonsbestemt() {
                     </div>,
                 )}
             </ul>
-        </Panel>
+        </Box>
     );
 }
 
diff --git a/src/tabs/aia-tabs.tsx b/src/tabs/aia-tabs.tsx
index a688d0e6..3070279e 100644
--- a/src/tabs/aia-tabs.tsx
+++ b/src/tabs/aia-tabs.tsx
@@ -74,7 +74,7 @@ const YtelseTab = () => {
 
 const MeldekortTab = () => {
     return (
-        <Tabs.Panel value="meldekort">
+        <Tabs.Panel value="meldekort" className={styles.tabsPanel}>
             <Meldekort />
         </Tabs.Panel>
     );