diff --git a/src/app/(minCV)/_components/MinCVPage.jsx b/src/app/(minCV)/_components/MinCVPage.jsx
index 0e10b17c..573a0323 100644
--- a/src/app/(minCV)/_components/MinCVPage.jsx
+++ b/src/app/(minCV)/_components/MinCVPage.jsx
@@ -25,6 +25,9 @@ export default function MinCVPage() {
 
     function onStepChange(x) {
         setActiveStep(x);
+
+        const element = document.getElementById(x);
+        element.scrollIntoView({ behavior: "smooth" });
     }
 
     return (
@@ -60,20 +63,20 @@ export default function MinCVPage() {
                         <Box className={styles.main}>
                             <HStack gap="4">
                                 <VStack>
-                                    {activeStep === 1 && <DelingAvCV />}
-                                    {activeStep === 2 && <Personalia />}
-                                    {activeStep === 3 && <Jobbonsker />}
-                                    {activeStep === 4 && <Utdanninger />}
-                                    {activeStep === 5 && <Fagbrev />}
-                                    {activeStep === 6 && <Arbeidsforhold />}
-                                    {activeStep === 7 && <AndreErfaringer />}
-                                    {activeStep === 8 && <Kompetanser />}
-                                    {activeStep === 9 && <OffentligeGodkjenninger />}
-                                    {activeStep === 10 && <AndreGodkjenninger />}
-                                    {activeStep === 11 && <Sprak />}
-                                    {activeStep === 12 && <Forerkort />}
-                                    {activeStep === 13 && <Kurs />}
-                                    {activeStep === 14 && <Sammendrag />}
+                                    <DelingAvCV />
+                                    <Personalia />
+                                    <Jobbonsker />
+                                    <Utdanninger />
+                                    <Fagbrev />
+                                    <Arbeidsforhold />
+                                    <AndreErfaringer />
+                                    <Kompetanser />
+                                    <OffentligeGodkjenninger />
+                                    <AndreGodkjenninger />
+                                    <Sprak />
+                                    <Forerkort />
+                                    <Kurs />
+                                    <Sammendrag />
                                 </VStack>
                             </HStack>
                         </Box>
diff --git a/src/app/(minCV)/_components/andreErfaringer/AndreErfaringer.jsx b/src/app/(minCV)/_components/andreErfaringer/AndreErfaringer.jsx
index c9bcf72f..ccb5c136 100644
--- a/src/app/(minCV)/_components/andreErfaringer/AndreErfaringer.jsx
+++ b/src/app/(minCV)/_components/andreErfaringer/AndreErfaringer.jsx
@@ -4,8 +4,8 @@ import { PlusIcon } from "@navikt/aksel-icons";
 
 export default function AndreErfaringer() {
     return (
-        <div>
-            <Box id="7" background="surface-default" padding="10" className={styles.box}>
+        <div id="7">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Andre erfaringer
                 </Heading>
diff --git a/src/app/(minCV)/_components/andreGodkjenninger/AndreGodkjenninger.jsx b/src/app/(minCV)/_components/andreGodkjenninger/AndreGodkjenninger.jsx
index fb5328a6..cfa969bc 100644
--- a/src/app/(minCV)/_components/andreGodkjenninger/AndreGodkjenninger.jsx
+++ b/src/app/(minCV)/_components/andreGodkjenninger/AndreGodkjenninger.jsx
@@ -4,8 +4,8 @@ import { PlusIcon } from "@navikt/aksel-icons";
 
 export default function AndreGodkjenninger() {
     return (
-        <div>
-            <Box id="10" background="surface-default" padding="10" className={styles.box}>
+        <div id="10">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Andre godkjenninger
                 </Heading>
diff --git a/src/app/(minCV)/_components/arbeidsforhold/Arbeidsforhold.jsx b/src/app/(minCV)/_components/arbeidsforhold/Arbeidsforhold.jsx
index 28115764..8c0659fd 100644
--- a/src/app/(minCV)/_components/arbeidsforhold/Arbeidsforhold.jsx
+++ b/src/app/(minCV)/_components/arbeidsforhold/Arbeidsforhold.jsx
@@ -26,8 +26,8 @@ export default function Arbeidsforhold() {
     const [bekreftJobbJegHarNa, setBekreftJobbJegHarNa] = useState(false);
 
     return (
-        <div>
-            <Box id="6" background="surface-default" padding="10" className={styles.box}>
+        <div id="6">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Arbeidsforhold
                 </Heading>
diff --git a/src/app/(minCV)/_components/delingAvCV/DelingAvCV.jsx b/src/app/(minCV)/_components/delingAvCV/DelingAvCV.jsx
index 68831988..7f5de265 100644
--- a/src/app/(minCV)/_components/delingAvCV/DelingAvCV.jsx
+++ b/src/app/(minCV)/_components/delingAvCV/DelingAvCV.jsx
@@ -160,8 +160,8 @@ function EuresLogoIcon() {
 
 export default function DelingAvCV() {
     return (
-        <div>
-            <Box id="1" background="surface-default" padding="10" className={styles.box}>
+        <div id="1">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <HStack justify="center">
                     <StarsEUIcon />
                 </HStack>
diff --git a/src/app/(minCV)/_components/fagbrev/Fagbrev.jsx b/src/app/(minCV)/_components/fagbrev/Fagbrev.jsx
index 219b63fb..6c9b41b9 100644
--- a/src/app/(minCV)/_components/fagbrev/Fagbrev.jsx
+++ b/src/app/(minCV)/_components/fagbrev/Fagbrev.jsx
@@ -9,8 +9,8 @@ export default function Fagbrev() {
     const [fagdokumentasjon, setFagdokumentasjon] = useState();
 
     return (
-        <div>
-            <Box id="5" background="surface-default" padding="10" className={styles.box}>
+        <div id="5">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading className={styles.mb6} level="2" size="large" align="start" spacing>
                     Fagbrev
                 </Heading>
diff --git a/src/app/(minCV)/_components/forerkort/Forerkort.jsx b/src/app/(minCV)/_components/forerkort/Forerkort.jsx
index e7600969..f4eb7546 100644
--- a/src/app/(minCV)/_components/forerkort/Forerkort.jsx
+++ b/src/app/(minCV)/_components/forerkort/Forerkort.jsx
@@ -4,8 +4,8 @@ import { PlusIcon } from "@navikt/aksel-icons";
 
 export default function Forerkort() {
     return (
-        <div>
-            <Box id="12" background="surface-default" padding="10" className={styles.box}>
+        <div id="12">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Førerkort
                 </Heading>
diff --git a/src/app/(minCV)/_components/jobbonsker/Jobbonsker.jsx b/src/app/(minCV)/_components/jobbonsker/Jobbonsker.jsx
index 751bef8c..443b7cdd 100644
--- a/src/app/(minCV)/_components/jobbonsker/Jobbonsker.jsx
+++ b/src/app/(minCV)/_components/jobbonsker/Jobbonsker.jsx
@@ -20,8 +20,8 @@ export default function Jobbonsker() {
     const [hvorKanDuJobbe, setHvorKanDuJobbe] = useState();
 
     return (
-        <div>
-            <Box id="3" background="surface-default" padding="10" className={styles.box}>
+        <div id="3">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Jobbønsker
                 </Heading>
diff --git a/src/app/(minCV)/_components/kompetanser/Kompetanser.jsx b/src/app/(minCV)/_components/kompetanser/Kompetanser.jsx
index 9c2e4a0c..bd931026 100644
--- a/src/app/(minCV)/_components/kompetanser/Kompetanser.jsx
+++ b/src/app/(minCV)/_components/kompetanser/Kompetanser.jsx
@@ -4,8 +4,8 @@ import { PlusIcon } from "@navikt/aksel-icons";
 
 export default function Fagbrev() {
     return (
-        <div>
-            <Box id="8" background="surface-default" padding="10" className={styles.box}>
+        <div id="8">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Kompetanser
                 </Heading>
diff --git a/src/app/(minCV)/_components/kurs/Kurs.jsx b/src/app/(minCV)/_components/kurs/Kurs.jsx
index 5fffd2bc..7d492659 100644
--- a/src/app/(minCV)/_components/kurs/Kurs.jsx
+++ b/src/app/(minCV)/_components/kurs/Kurs.jsx
@@ -4,8 +4,8 @@ import { PlusIcon } from "@navikt/aksel-icons";
 
 export default function Kurs() {
     return (
-        <div>
-            <Box id="13" background="surface-default" padding="10" className={styles.box}>
+        <div id="13">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Kurs
                 </Heading>
diff --git a/src/app/(minCV)/_components/offentligeGodkjenninger/OffentligeGodkjenninger.jsx b/src/app/(minCV)/_components/offentligeGodkjenninger/OffentligeGodkjenninger.jsx
index 3d8fe8b9..6284a369 100644
--- a/src/app/(minCV)/_components/offentligeGodkjenninger/OffentligeGodkjenninger.jsx
+++ b/src/app/(minCV)/_components/offentligeGodkjenninger/OffentligeGodkjenninger.jsx
@@ -4,8 +4,8 @@ import { PlusIcon } from "@navikt/aksel-icons";
 
 export default function OffentligeGodkjenninger() {
     return (
-        <div>
-            <Box id="9" background="surface-default" padding="10" className={styles.box}>
+        <div id="9">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Offentlige godkjenninger
                 </Heading>
diff --git a/src/app/(minCV)/_components/personalia/Personalia.jsx b/src/app/(minCV)/_components/personalia/Personalia.jsx
index 1036b8c4..d998e14d 100644
--- a/src/app/(minCV)/_components/personalia/Personalia.jsx
+++ b/src/app/(minCV)/_components/personalia/Personalia.jsx
@@ -35,8 +35,8 @@ export default function Personalia() {
     const [sted, setSted] = useState("Oslo");
 
     return (
-        <div>
-            <Box id="2" background="surface-default" padding="10" className={styles.box}>
+        <div id="2">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <HStack justify="center">
                     <PersonaliaIcon />
                 </HStack>
diff --git a/src/app/(minCV)/_components/sammendrag/Sammendrag.jsx b/src/app/(minCV)/_components/sammendrag/Sammendrag.jsx
index 855978e3..f19194f8 100644
--- a/src/app/(minCV)/_components/sammendrag/Sammendrag.jsx
+++ b/src/app/(minCV)/_components/sammendrag/Sammendrag.jsx
@@ -4,8 +4,8 @@ import { PlusIcon } from "@navikt/aksel-icons";
 
 export default function Sammendrag() {
     return (
-        <div>
-            <Box id="14" background="surface-default" padding="10" className={styles.box}>
+        <div id="14">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Om meg
                 </Heading>
diff --git a/src/app/(minCV)/_components/sprak/Sprak.jsx b/src/app/(minCV)/_components/sprak/Sprak.jsx
index 5f4ab846..faa15130 100644
--- a/src/app/(minCV)/_components/sprak/Sprak.jsx
+++ b/src/app/(minCV)/_components/sprak/Sprak.jsx
@@ -4,8 +4,8 @@ import { PlusIcon } from "@navikt/aksel-icons";
 
 export default function Sprak() {
     return (
-        <div>
-            <Box id="11" background="surface-default" padding="10" className={styles.box}>
+        <div id="11">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Språk
                 </Heading>
diff --git a/src/app/(minCV)/_components/utdanninger/Utdanninger.jsx b/src/app/(minCV)/_components/utdanninger/Utdanninger.jsx
index 942206a1..ff9de0b7 100644
--- a/src/app/(minCV)/_components/utdanninger/Utdanninger.jsx
+++ b/src/app/(minCV)/_components/utdanninger/Utdanninger.jsx
@@ -20,8 +20,8 @@ export default function Utdanninger() {
     const [leggTilUtdanning, setLeggTilUtdanning] = useState(false);
 
     return (
-        <div>
-            <Box id="4" background="surface-default" padding="10" className={styles.box}>
+        <div id="4">
+            <Box background="surface-default" padding="10" className={styles.box}>
                 <Heading level="2" size="large" align="start" spacing>
                     Utdanninger
                 </Heading>