diff --git "a/client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseForh\303\245ndsvisningModal/Forh\303\245ndsvisning.tsx" "b/client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseForh\303\245ndsvisningModal/Forh\303\245ndsvisning.tsx"
new file mode 100644
index 000000000..1ffb9490a
--- /dev/null
+++ "b/client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseForh\303\245ndsvisningModal/Forh\303\245ndsvisning.tsx"
@@ -0,0 +1,261 @@
+import React from "react";
+import {
+	SpørsmålDto,
+	SvaralternativDto,
+	TemaDto,
+} from "../../../../domenetyper/spørreundersøkelseMedInnhold";
+import {
+	Accordion,
+	BodyShort,
+	Checkbox,
+	CheckboxGroup,
+	Heading,
+	Radio,
+	RadioGroup,
+} from "@navikt/ds-react";
+import { useHentSpørreundersøkelseMedInnhold } from "../../../../api/lydia-api/spørreundersøkelse";
+import { useSpørreundersøkelse } from "../../../../components/Spørreundersøkelse/SpørreundersøkelseContext";
+import { lokalDatoMedKlokkeslett } from "../../../../util/dato";
+import styled from "styled-components";
+
+export default function Forhåndsvisning({ spørreundersøkelseid, setModaltittel }: { spørreundersøkelseid: string, setModaltittel: (tittel: string) => void }) {
+	const { iaSak, samarbeid } =
+		useSpørreundersøkelse();
+	const { data: spørreundersøkelseForhåndsvisning } =
+		useHentSpørreundersøkelseMedInnhold(
+			iaSak.orgnr,
+			iaSak.saksnummer,
+			samarbeid.id,
+			"Evaluering",
+			spørreundersøkelseid,
+		);
+	React.useEffect(() => {
+		if (spørreundersøkelseForhåndsvisning) {
+			setModaltittel(`Evaluering opprettet ${lokalDatoMedKlokkeslett(spørreundersøkelseForhåndsvisning.opprettetTidspunkt)}`);
+		}
+	}, [spørreundersøkelseForhåndsvisning, setModaltittel]);
+
+	return (<>
+		{spørreundersøkelseForhåndsvisning?.temaer.map((tema) => (
+			<React.Fragment key={tema.temaId}>
+				<Tematittel level="3" size="large">
+					{tema.navn}
+				</Tematittel>
+				<GruppertSpørsmålRenderer tema={tema} />
+			</React.Fragment>
+		))}
+
+	</>);
+}
+
+const Tematittel = styled(Heading)`
+	margin-top: 1rem;
+`;
+
+const Spørsmålsgruppe = styled.div`
+	padding: 1rem;
+`;
+
+function GruppertSpørsmålRenderer({ tema }: { tema: TemaDto }) {
+	const grupperteSpørsmål = tema.spørsmålOgSvaralternativer.reduce(
+		(acc, spørsmål) => {
+			if (spørsmål.undertemanavn) {
+				acc[spørsmål.undertemanavn] = acc[spørsmål.undertemanavn] || [];
+				acc[spørsmål.undertemanavn].push(spørsmål);
+			} else {
+				acc["Uten gruppe"] = acc["Uten gruppe"] || [];
+				acc["Uten gruppe"].push(spørsmål);
+			}
+			return acc;
+		},
+		{} as { [key: string]: SpørsmålDto[] },
+	);
+
+	return (
+		<>
+			{Object.entries(grupperteSpørsmål).map(([kategori, spørsmål]) => (
+				<Spørsmålsgruppe key={kategori}>
+					<Kategori tittel={kategori} />
+					<SpørsmålRenderer
+						tema={{ ...tema, spørsmålOgSvaralternativer: spørsmål }}
+					/>
+				</Spørsmålsgruppe>
+			))}
+		</>
+	);
+}
+
+const KATEGORI_BESKRIVELSER: { [key: string]: string } = {
+	//Arbeidsmiljø
+	"Utvikle arbeidsmiljøet":
+		"Mål: Øke anvendelse og kompetanse innen verktøy og bransjerettet kunnskap for å jobbe målrettet og kunnskapsbasert med eget arbeidsmiljø.",
+	"Endring og omstilling":
+		"Mål: Øke kunnskap om hvordan ivareta arbeidsmiljø og forebygge sykefravær under endring og omstilling.",
+	"Oppfølging av arbeidsmiljøundersøkelser":
+		"Mål: Øke ferdigheter og gi støtte til hvordan man kan jobbe med forhold på arbeidsplassen som belyses i egne arbeidsmiljøundersøkelser.",
+	"Livsfaseorientert personalpolitikk":
+		"Mål: Utvikle kultur og personalpolitikk som ivaretar medarbeideres ulike behov, krav, begrensninger og muligheter i ulike livsfaser.",
+	"Psykisk helse":
+		"Mål: Gi innsikt i hvordan psykiske utfordringer kan komme til uttrykk i arbeidshverdagen og øke ferdigheter for hvordan man møter medarbeidere med psykiske helseutfordringer.",
+	HelseIArbeid:
+		"Mål: Øke kompetansen og få ansatte til å mestre jobb, selv med muskel/skjelett- og psykiske helseplager.",
+	//Sykefraværsarbeid
+	Sykefraværsrutiner:
+		"Mål: Jobbe systematisk og forebyggende med sykefravær, samt forbedre rutiner og oppfølging av ansatte som er sykmeldte eller står i fare for å bli det.",
+	Oppfølgingssamtaler:
+		"Mål:  Øke kompetanse og ferdigheter for hvordan man gjennomfører gode oppfølgingssamtaler, både gjennom teori og praksis.",
+	"Tilretteleggings- og medvirkningsplikt":
+		"Mål: Utvikle rutiner og kultur for tilrettelegging og medvirkning, samt kartlegging av tilretteleggingsmuligheter på arbeidsplassen.",
+	"Sykefravær - enkeltsaker":
+		"Mål: Øke kompetanse og ferdigheter for hvordan man tar tak i, følger opp og løser enkeltsaker.",
+	//Partssamarbeid
+	"Utvikle partssamarbeidet":
+		"Mål: Styrke og strukturere samarbeidet mellom leder, tillitsvalgt og verneombud, samt øke kunnskap og ferdigheter for å jobbe systematisk og forebyggende med sykefravær og arbeidsmiljø.",
+};
+
+const KategoriHeader = styled.div`
+	margin-bottom: 1rem;
+`;
+
+const Kategoritittel = styled(Heading)`
+  margin-bottom: 0.25rem;
+`;
+
+const Kategorimål = styled(BodyShort)`
+  color: var(--a-text-subtle);
+`;
+
+function Kategori({ tittel }: { tittel: string }) {
+	if (KATEGORI_BESKRIVELSER[tittel]) {
+		return (
+			<KategoriHeader>
+				<Kategoritittel
+					level="4"
+					size="xsmall"
+				>
+					{tittel}
+				</Kategoritittel>
+				<Kategorimål size="small">
+					{KATEGORI_BESKRIVELSER[tittel]}
+				</Kategorimål>
+			</KategoriHeader>
+		);
+	}
+
+	if (tittel === "Uten gruppe") {
+		return null;
+	}
+
+	return (
+		<KategoriHeader>
+			<Kategoritittel
+				level="4"
+				size="xsmall"
+			>
+				{tittel}
+			</Kategoritittel>
+		</KategoriHeader>
+	);
+}
+
+
+function SpørsmålRenderer({ tema }: { tema: TemaDto }) {
+	const boxRef = React.useRef<HTMLDivElement>(null);
+	React.useEffect(() => {
+		if (boxRef !== null) {
+			boxRef?.current?.scrollIntoView({
+				block: "end",
+				inline: "center",
+			});
+		}
+	}, []);
+
+	return (
+		<Accordion>
+			{tema.spørsmålOgSvaralternativer.map((spørsmål) => (
+				<SpørsmålAccordionItem
+					key={spørsmål.id}
+					spørsmål={spørsmål}
+				/>
+			))}
+		</Accordion>
+	);
+}
+
+const StyledAccordionHeader = styled(Accordion.Header)`
+	color: var(--a-blue-500);
+	--a-font-weight-bold: 400;
+`;
+
+
+function SpørsmålAccordionItem({
+	spørsmål,
+}: {
+	spørsmål: SpørsmålDto;
+}) {
+	return (
+		<Accordion.Item>
+			<StyledAccordionHeader>
+				{spørsmål.spørsmål}
+			</StyledAccordionHeader>
+			<Accordion.Content>
+				<Svaralternativer
+					svaralternativer={spørsmål.svaralternativer}
+					flervalg={spørsmål.flervalg}
+				/>
+			</Accordion.Content>
+		</Accordion.Item>
+	);
+}
+
+const DisabletCheckbox = styled(Checkbox)`
+	pointer-events: none;
+
+	label::before {
+		opacity: 0.5;
+	}
+`;
+
+const DisabletRadio = styled(Radio)`
+	pointer-events: none;
+
+	label::before {
+		opacity: 0.5;
+	}
+`;
+
+function Svaralternativer({
+	svaralternativer,
+	flervalg,
+}: {
+	svaralternativer: SvaralternativDto[];
+	flervalg: boolean;
+}) {
+	const OptionGroup = flervalg ? CheckboxGroup : RadioGroup;
+
+	return (
+		<OptionGroup hideLegend legend={""}>
+			{svaralternativer.map((svaralternativ) => {
+				if (flervalg) {
+					return (
+						<DisabletCheckbox
+							key={svaralternativ.svarId}
+							value={svaralternativ.svarId}
+							disabled
+						>
+							{svaralternativ.svartekst}
+						</DisabletCheckbox>
+					);
+				}
+				return (
+					<DisabletRadio
+						key={svaralternativ.svarId}
+						value={svaralternativ.svarId}
+					>
+						{svaralternativ.svartekst}
+					</DisabletRadio>
+				)
+			})}
+		</OptionGroup>
+	);
+}
diff --git "a/client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseForh\303\245ndsvisningModal/index.tsx" "b/client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseForh\303\245ndsvisningModal/index.tsx"
new file mode 100644
index 000000000..c9134c632
--- /dev/null
+++ "b/client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseForh\303\245ndsvisningModal/index.tsx"
@@ -0,0 +1,34 @@
+import React from "react";
+import {
+    BodyShort,
+    Modal,
+} from "@navikt/ds-react";
+import Forhåndsvisning from "./Forhåndsvisning";
+
+interface SpørreundersøkelseMedInnholdVisningProps {
+    erModalÅpen: boolean;
+    lukkModal: () => void;
+    spørreundersøkelseid: string;
+}
+
+export const SpørreundersøkelseMedInnholdVisning = ({
+    erModalÅpen,
+    lukkModal,
+    spørreundersøkelseid
+}: SpørreundersøkelseMedInnholdVisningProps) => {
+    const [modaltittel, setModaltittel] = React.useState<string>("Forhåndsvisning laster...");
+    return (
+        <Modal
+            open={erModalÅpen}
+            onClose={lukkModal}
+            header={{ heading: modaltittel, size: "small" }}
+            width="70rem"
+        >
+            <Modal.Body>
+                <BodyShort>Spørsmålene er basert på innholdet i samarbeidsplanen ved opprettelse</BodyShort>
+                <Forhåndsvisning spørreundersøkelseid={spørreundersøkelseid} setModaltittel={setModaltittel} />
+            </Modal.Body>
+        </Modal>
+    );
+};
+
diff --git "a/client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseMedInnholdVisning.tsx" "b/client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseMedInnholdVisning.tsx"
deleted file mode 100644
index 2d3c57e63..000000000
--- "a/client/src/Pages/Virksomhet/Kartlegging/Sp\303\270rreunders\303\270kelseMedInnholdVisning.tsx"
+++ /dev/null
@@ -1,225 +0,0 @@
-import React from "react";
-import {
-    SpørsmålDto,
-    SvaralternativDto,
-    TemaDto,
-} from "../../../domenetyper/spørreundersøkelseMedInnhold";
-import {
-    Accordion,
-    BodyShort,
-    Box,
-    Checkbox,
-    CheckboxGroup,
-    Heading,
-    Radio,
-    RadioGroup,
-} from "@navikt/ds-react";
-
-interface SpørreundersøkelseMedInnholdVisningProps {
-    erModalÅpen: boolean;
-    lukkModal: () => void;
-}
-
-export const SpørreundersøkelseMedInnholdVisning = ({
-    erModalÅpen,
-    lukkModal,
-}: SpørreundersøkelseMedInnholdVisningProps) => {
-    return <></>;
-};
-
-function GruppertSpørsmålRenderer({ tema }: { tema: TemaDto }) {
-    const grupperteSpørsmål = tema.spørsmålOgSvaralternativer.reduce(
-        (acc, spørsmål) => {
-            if (spørsmål.undertemanavn) {
-                acc[spørsmål.undertemanavn] = acc[spørsmål.undertemanavn] || [];
-                acc[spørsmål.undertemanavn].push(spørsmål);
-            } else {
-                acc["Uten gruppe"] = acc["Uten gruppe"] || [];
-                acc["Uten gruppe"].push(spørsmål);
-            }
-            return acc;
-        },
-        {} as { [key: string]: SpørsmålDto[] },
-    );
-
-    return (
-        <>
-            {Object.entries(grupperteSpørsmål).map(([kategori, spørsmål]) => (
-                <React.Fragment key={kategori}>
-                    <Kategori tittel={kategori} />
-                    <SpørsmålRenderer
-                        tema={{ ...tema, spørsmålOgSvaralternativer: spørsmål }}
-                    />
-                </React.Fragment>
-            ))}
-        </>
-    );
-}
-
-const KATEGORI_BESKRIVELSER: { [key: string]: string } = {
-    //Arbeidsmiljø
-    "Utvikle arbeidsmiljøet":
-        "Mål: Øke anvendelse og kompetanse innen verktøy og bransjerettet kunnskap for å jobbe målrettet og kunnskapsbasert med eget arbeidsmiljø.",
-    "Endring og omstilling":
-        "Mål: Øke kunnskap om hvordan ivareta arbeidsmiljø og forebygge sykefravær under endring og omstilling.",
-    "Oppfølging av arbeidsmiljøundersøkelser":
-        "Mål: Øke ferdigheter og gi støtte til hvordan man kan jobbe med forhold på arbeidsplassen som belyses i egne arbeidsmiljøundersøkelser.",
-    "Livsfaseorientert personalpolitikk":
-        "Mål: Utvikle kultur og personalpolitikk som ivaretar medarbeideres ulike behov, krav, begrensninger og muligheter i ulike livsfaser.",
-    "Psykisk helse":
-        "Mål: Gi innsikt i hvordan psykiske utfordringer kan komme til uttrykk i arbeidshverdagen og øke ferdigheter for hvordan man møter medarbeidere med psykiske helseutfordringer.",
-    HelseIArbeid:
-        "Mål: Øke kompetansen og få ansatte til å mestre jobb, selv med muskel/skjelett- og psykiske helseplager.",
-    //Sykefraværsarbeid
-    Sykefraværsrutiner:
-        "Mål: Jobbe systematisk og forebyggende med sykefravær, samt forbedre rutiner og oppfølging av ansatte som er sykmeldte eller står i fare for å bli det.",
-    Oppfølgingssamtaler:
-        "Mål:  Øke kompetanse og ferdigheter for hvordan man gjennomfører gode oppfølgingssamtaler, både gjennom teori og praksis.",
-    "Tilretteleggings- og medvirkningsplikt":
-        "Mål: Utvikle rutiner og kultur for tilrettelegging og medvirkning, samt kartlegging av tilretteleggingsmuligheter på arbeidsplassen.",
-    "Sykefravær - enkeltsaker":
-        "Mål: Øke kompetanse og ferdigheter for hvordan man tar tak i, følger opp og løser enkeltsaker.",
-    //Partssamarbeid
-    "Utvikle partssamarbeidet":
-        "Mål: Styrke og strukturere samarbeidet mellom leder, tillitsvalgt og verneombud, samt øke kunnskap og ferdigheter for å jobbe systematisk og forebyggende med sykefravær og arbeidsmiljø.",
-};
-
-function Kategori({ tittel }: { tittel: string }) {
-    if (KATEGORI_BESKRIVELSER[tittel]) {
-        return (
-            <div className={introsideStyles.kategoriHeader}>
-                <Heading
-                    level="4"
-                    size="xsmall"
-                    className={introsideStyles.kategoriTittel}
-                >
-                    {tittel}
-                </Heading>
-                <BodyShort size="small" className={introsideStyles.kategoriMål}>
-                    {KATEGORI_BESKRIVELSER[tittel]}
-                </BodyShort>
-            </div>
-        );
-    }
-
-    if (tittel === "Uten gruppe") {
-        return null;
-    }
-
-    return (
-        <div className={introsideStyles.kategoriHeader}>
-            <Heading
-                level="4"
-                size="xsmall"
-                className={introsideStyles.kategoriTittel}
-            >
-                {tittel}
-            </Heading>
-        </div>
-    );
-}
-
-function SpørsmålRenderer({ tema }: { tema: TemaDto }) {
-    const boxRef = React.useRef<HTMLDivElement>(null);
-    React.useEffect(() => {
-        if (boxRef !== null) {
-            boxRef?.current?.scrollIntoView({
-                block: "end",
-                inline: "center",
-            });
-        }
-    }, []);
-
-    return (
-        <Accordion className={introsideStyles.spørsmålsAccordion}>
-            {tema.spørsmålOgSvaralternativer.map((spørsmål, index) => (
-                <SpørsmålAccordion
-                    key={index}
-                    spørsmål={spørsmål}
-                    index={index}
-                />
-            ))}
-        </Accordion>
-    );
-}
-
-function SpørsmålAccordion({
-    spørsmål,
-    index,
-}: {
-    spørsmål: SpørsmålDto;
-    index: number;
-}) {
-    return (
-        <Accordion.Item className={introsideStyles.accordionItem}>
-            <Accordion.Header
-                className={`${index === 0 ? introsideStyles.førstespørsmåltittel : ""} ${introsideStyles.spørsmåltittel}`}
-            >
-                {spørsmål.tekst}
-            </Accordion.Header>
-            <Accordion.Content>
-                <Svaralternativer
-                    svaralternativer={spørsmål.svaralternativer}
-                    flervalg={spørsmål.flervalg}
-                />
-            </Accordion.Content>
-        </Accordion.Item>
-    );
-}
-
-function Svaralternativer({
-    svaralternativer,
-    flervalg,
-}: {
-    svaralternativer: SvaralternativDto[];
-    flervalg: boolean;
-}) {
-    const OptionGroup = flervalg ? CheckboxGroup : RadioGroup;
-    const Option = flervalg ? Checkbox : Radio;
-
-    return (
-        <OptionGroup hideLegend legend={""}>
-            {svaralternativer.map((svaralternativ) => (
-                <Option
-                    key={svaralternativ.svarId}
-                    value={svaralternativ.svarId}
-                    className={introsideStyles.disabletOption}
-                >
-                    {svaralternativ.svartekst}
-                </Option>
-            ))}
-        </OptionGroup>
-    );
-}
-
-function SvarRenderer({ tema }: { tema: TemaDto }) {
-    const boxRef = React.useRef<HTMLDivElement>(null);
-    React.useEffect(() => {
-        if (boxRef !== null) {
-            boxRef?.current?.scrollIntoView({
-                block: "end",
-                inline: "center",
-            });
-        }
-    }, []);
-
-    const erGruppert = tema.spørsmålOgSvaralternativer.some(
-        (spørsmål) => spørsmål.undertemanavn,
-    );
-
-    return (
-        <Box
-            borderRadius="xlarge"
-            padding="12"
-            background="surface-default"
-            className={introsideStyles.spørsmålsseksjon}
-            ref={boxRef}
-        >
-            {erGruppert ? (
-                <GruppertSpørsmålRenderer tema={tema} />
-            ) : (
-                <SpørsmålRenderer tema={tema} />
-            )}
-        </Box>
-    );
-}
diff --git a/client/src/Pages/Virksomhet/Samarbeid/Evaluering/EvalueringCardHeaderInnhold.tsx b/client/src/Pages/Virksomhet/Samarbeid/Evaluering/EvalueringCardHeaderInnhold.tsx
index dc6049737..8c46e3e69 100644
--- a/client/src/Pages/Virksomhet/Samarbeid/Evaluering/EvalueringCardHeaderInnhold.tsx
+++ b/client/src/Pages/Virksomhet/Samarbeid/Evaluering/EvalueringCardHeaderInnhold.tsx
@@ -17,9 +17,9 @@ import {
     avsluttSpørreundersøkelse,
     slettSpørreundersøkelse,
     startSpørreundersøkelse,
-    useHentSpørreundersøkelseMedInnhold,
     useHentSpørreundersøkelser,
 } from "../../../../api/lydia-api/spørreundersøkelse";
+import { SpørreundersøkelseMedInnholdVisning } from "../../Kartlegging/SpørreundersøkelseForhåndsvisningModal";
 
 const ActionButtonContainer = styled.div`
     display: flex;
@@ -88,6 +88,7 @@ export const EvalueringCardHeaderInnhold = ({
         bekreftFullførKartleggingModalÅpen,
         setBekreftFullførKartleggingModalÅpen,
     ] = useState(false);
+    const [forhåndsvisModalÅpen, setForhåndsvisModalÅpen] = useState(false);
     const [
         slettSpørreundersøkelseModalÅpen,
         setSlettSpørreundersøkelseModalÅpen,
@@ -113,15 +114,6 @@ export const EvalueringCardHeaderInnhold = ({
         "Evaluering",
     );
 
-    const { data: spørreundersøkelseForhåndsvisning } =
-        useHentSpørreundersøkelseMedInnhold(
-            iaSak.orgnr,
-            iaSak.saksnummer,
-            samarbeid.id,
-            "Evaluering",
-            spørreundersøkelse.id,
-        );
-
     const { mutate: oppdaterSaksStatus } = useHentIASaksStatus(
         iaSak.orgnr,
         iaSak.saksnummer,
@@ -209,9 +201,7 @@ export const EvalueringCardHeaderInnhold = ({
                                     <StyledActionButton
                                         variant="secondary"
                                         onClick={() =>
-                                            console.log(
-                                                spørreundersøkelseForhåndsvisning,
-                                            )
+                                            setForhåndsvisModalÅpen(true)
                                         }
                                     >
                                         Forhåndsvis
@@ -237,6 +227,10 @@ export const EvalueringCardHeaderInnhold = ({
                             }
                             startSpørreundersøkelsen={startEvaluering}
                         />
+                        <SpørreundersøkelseMedInnholdVisning
+                            erModalÅpen={forhåndsvisModalÅpen}
+                            spørreundersøkelseid={spørreundersøkelse.id}
+                            lukkModal={() => setForhåndsvisModalÅpen(false)} />
                         {brukerRolle && (
                             <SlettSpørreundersøkelseModal
                                 spørreundersøkelse={spørreundersøkelse}