diff --git "a/src/frontend/App/hooks/useJournalf\303\270ringState.ts" "b/src/frontend/App/hooks/useJournalf\303\270ringState.ts"
index 2f244bb6b..05e045e7c 100644
--- "a/src/frontend/App/hooks/useJournalf\303\270ringState.ts"
+++ "b/src/frontend/App/hooks/useJournalf\303\270ringState.ts"
@@ -4,9 +4,15 @@ import { useApp } from '../context/AppContext';
 import { Behandlingstype } from '../typer/behandlingstype';
 import { UstrukturertDokumentasjonType } from '../../Komponenter/Journalføring/Standard/VelgUstrukturertDokumentasjonType';
 import { EVilkårsbehandleBarnValg } from '../typer/vilkårsbehandleBarnValg';
-import { DokumentTitler, IJournalpostResponse } from '../typer/journalføring';
+import {
+    LogiskeVedleggPåDokument,
+    DokumentTitler,
+    IJournalpostResponse,
+    DokumentInfo,
+} from '../typer/journalføring';
 import { Journalføringsårsak } from '../../Komponenter/Journalføring/Felles/utils';
 import { behandlingstemaTilStønadstype, Stønadstype } from '../typer/behandlingstema';
+import { HentDokumentResponse, useHentDokument } from './useHentDokument';
 
 export interface BehandlingRequest {
     behandlingsId?: string;
@@ -36,6 +42,8 @@ export interface JournalføringStateRequest {
     settBehandling: Dispatch<SetStateAction<BehandlingRequest | undefined>>;
     dokumentTitler?: DokumentTitler;
     settDokumentTitler: Dispatch<SetStateAction<DokumentTitler | undefined>>;
+    logiskeVedleggPåDokument?: LogiskeVedleggPåDokument;
+    settLogiskeVedleggPåDokument: Dispatch<SetStateAction<LogiskeVedleggPåDokument | undefined>>;
     innsending: Ressurs<string>;
     settInnsending: Dispatch<SetStateAction<Ressurs<string>>>;
     fullførJournalføring: () => void;
@@ -51,12 +59,14 @@ export interface JournalføringStateRequest {
     settJournalføringsårsak: Dispatch<SetStateAction<Journalføringsårsak>>;
     stønadstype: Stønadstype | undefined;
     settStønadstype: Dispatch<SetStateAction<Stønadstype | undefined>>;
+    valgtDokumentPanel: string;
+    settValgtDokumentPanel: Dispatch<SetStateAction<string>>;
+    hentDokumentResponse: HentDokumentResponse;
 }
 
 export const useJournalføringState = (
     journalResponse: IJournalpostResponse,
-    oppgaveId: string,
-    journalpostId: string
+    oppgaveId: string
 ): JournalføringStateRequest => {
     const utledJournalføringsårsak = () => {
         if (journalResponse.harStrukturertSøknad) {
@@ -68,10 +78,17 @@ export const useJournalføringState = (
         }
     };
 
+    const utledFørsteDokument = (dokumenter: DokumentInfo[]) =>
+        dokumenter.length > 0 ? dokumenter[0].dokumentInfoId : '';
+
     const { axiosRequest, innloggetSaksbehandler } = useApp();
+    const hentDokumentResponse = useHentDokument(journalResponse.journalpost);
+
     const [fagsakId, settFagsakId] = useState<string>('');
     const [behandling, settBehandling] = useState<BehandlingRequest>();
     const [dokumentTitler, settDokumentTitler] = useState<DokumentTitler>();
+    const [logiskeVedleggPåDokument, settLogiskeVedleggPåDokument] =
+        useState<LogiskeVedleggPåDokument>(); // TODO: Disse må sendes med til backend for å bli satt
     const [innsending, settInnsending] = useState<Ressurs<string>>(byggTomRessurs());
     const [visBekreftelsesModal, settVisBekreftelsesModal] = useState<boolean>(false);
     const [barnSomSkalFødes, settBarnSomSkalFødes] = useState<BarnSomSkalFødes[]>([]);
@@ -86,6 +103,9 @@ export const useJournalføringState = (
     const [stønadstype, settStønadstype] = useState<Stønadstype | undefined>(
         behandlingstemaTilStønadstype(journalResponse.journalpost.behandlingstema)
     );
+    const [valgtDokumentPanel, settValgtDokumentPanel] = useState<string>(
+        utledFørsteDokument(journalResponse.journalpost.dokumenter)
+    );
 
     useEffect(() => {
         settBehandling(undefined);
@@ -113,7 +133,7 @@ export const useJournalføringState = (
         settInnsending(byggHenterRessurs());
         axiosRequest<string, JournalføringRequest>({
             method: 'POST',
-            url: `/familie-ef-sak/api/journalpost/${journalpostId}/fullfor`,
+            url: `/familie-ef-sak/api/journalpost/${journalResponse.journalpost.journalpostId}/fullfor`,
             data,
         }).then((resp) => settInnsending(resp));
     };
@@ -125,6 +145,8 @@ export const useJournalføringState = (
         settBehandling,
         dokumentTitler,
         settDokumentTitler,
+        logiskeVedleggPåDokument,
+        settLogiskeVedleggPåDokument,
         innsending,
         settInnsending,
         fullførJournalføring,
@@ -140,5 +162,8 @@ export const useJournalføringState = (
         settJournalføringsårsak,
         stønadstype,
         settStønadstype,
+        valgtDokumentPanel,
+        settValgtDokumentPanel,
+        hentDokumentResponse,
     };
 };
diff --git "a/src/frontend/App/typer/journalf\303\270ring.ts" "b/src/frontend/App/typer/journalf\303\270ring.ts"
index 1007d1397..aa2b44203 100644
--- "a/src/frontend/App/typer/journalf\303\270ring.ts"
+++ "b/src/frontend/App/typer/journalf\303\270ring.ts"
@@ -116,3 +116,4 @@ export interface BrukerInfo {
 }
 
 export type DokumentTitler = Record<string, string>;
+export type LogiskeVedleggPåDokument = Record<string, string[]>;
diff --git "a/src/frontend/Komponenter/Journalf\303\270ring/Felles/EndreDokumentTittel.tsx" "b/src/frontend/Komponenter/Journalf\303\270ring/Felles/EndreDokumentTittel.tsx"
index c8b39dcfe..d1290e215 100644
--- "a/src/frontend/Komponenter/Journalf\303\270ring/Felles/EndreDokumentTittel.tsx"
+++ "b/src/frontend/Komponenter/Journalf\303\270ring/Felles/EndreDokumentTittel.tsx"
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import CreatableSelect from 'react-select/creatable';
-import { dokumentTitler } from './utils';
+import { dokumentTitlerMultiSelect } from './utils';
 import { CSSObjectWithLabel, StylesConfig } from 'react-select';
 import { Button } from '@navikt/ds-react';
 import { ABlue500, ABlue800, ABorderStrong } from '@navikt/ds-tokens/dist/tokens';
@@ -58,7 +58,7 @@ const EndreDokumentTittel: React.FC<{
             <CreatableSelect
                 styles={customStyles}
                 placeholder="Velg tittel"
-                options={dokumentTitler}
+                options={dokumentTitlerMultiSelect}
                 formatCreateLabel={(val: string) => `Opprett "${val}"`}
                 onChange={(value: unknown) => {
                     settNyttDokumentNavn((value as OptionType).value);
diff --git "a/src/frontend/Komponenter/Journalf\303\270ring/Felles/utils.ts" "b/src/frontend/Komponenter/Journalf\303\270ring/Felles/utils.ts"
index 4461e0338..8dff44b64 100644
--- "a/src/frontend/Komponenter/Journalf\303\270ring/Felles/utils.ts"
+++ "b/src/frontend/Komponenter/Journalf\303\270ring/Felles/utils.ts"
@@ -4,9 +4,11 @@ import { Behandling, BehandlingResultat } from '../../../App/typer/fagsak';
 import { Behandlingstype } from '../../../App/typer/behandlingstype';
 import { BehandlingRequest } from '../../../App/hooks/useJournalføringState';
 import { BehandlingKlageRequest } from '../../../App/hooks/useJournalføringKlageState';
+import { ISelectOption, MultiValue, SingleValue } from '@navikt/familie-form-elements';
 
 export const JOURNALPOST_QUERY_STRING = 'journalpostId';
 export const OPPGAVEID_QUERY_STRING = 'oppgaveId';
+export type MultiSelectValue = { label: string; value: string };
 
 export const lagJournalføringKlageUrl = (
     journalpostId: string,
@@ -37,55 +39,6 @@ export const utledKolonneTittel = (
     return `${prefix}${type}${stønadstype}`;
 };
 
-export const dokumentTitler: { value: string; label: string }[] = [
-    { value: 'Uttalelse tilbakekreving', label: 'Uttalelse tilbakekreving' },
-    { value: 'Uttalelse', label: 'Uttalelse' },
-    {
-        value: 'Tilmelding til NAV som reell arbeidssøker ved krav om overgangsstønad',
-        label: "Tilmelding til NAV som reell arbeidssøker ved krav om overgangsstønad'",
-    },
-    {
-        value: 'Søknad om stønad til skolepenger - enslig mor eller far',
-        label: 'Søknad om stønad til skolepenger - enslig mor eller far',
-    },
-    {
-        value: 'Søknad om stønad til barnetilsyn - enslig mor eller far i arbeid',
-        label: 'Søknad om stønad til skolepenger - enslig mor eller far',
-    },
-    {
-        value: 'Søknad om overgangsstønad - enslig mor eller far',
-        label: 'Søknad om overgangsstønad - enslig mor eller far',
-    },
-    { value: 'Stevning', label: 'Stevning' },
-    { value: 'Skatteopplysninger', label: 'Skatteopplysninger' },
-    { value: 'Rettsavgjørelse', label: 'Rettsavgjørelse' },
-    { value: 'Refusjonskrav/faktura', label: 'Refusjonskrav/faktura' },
-    { value: 'Oppholdstillatelse', label: 'Oppholdstillatelse' },
-    { value: 'Merknader i ankesak', label: 'Merknader i ankesak' },
-    { value: 'Medisinsk dokumentasjon', label: 'Medisinsk dokumentasjon' },
-    { value: 'Krav om gjenopptak av ankesak', label: 'Krav om gjenopptak av ankesak' },
-    { value: 'Klage/Anke', label: 'Klage/Anke' },
-    { value: 'Klage på tilbakekreving', label: 'Klage på tilbakekreving' },
-    { value: 'Inntektsopplysninger', label: 'Inntektsopplysninger' },
-    { value: 'Grunnblankett', label: 'Grunnblankett' },
-    { value: 'Fødselsmelding/Fødselsattest', label: 'Fødselsmelding/Fødselsattest' },
-    { value: 'Forespørsel', label: 'Forespørsel' },
-    { value: 'EØS-dokument', label: 'EØS-dokument' },
-    { value: 'Erklæring samlivsbrudd', label: 'Erklæring samlivsbrudd' },
-    {
-        value: 'Enslig mor eller far som er arbeidssøker',
-        label: 'nslig mor eller far som er arbeidssøker',
-    },
-    { value: 'Endring i sivilstand', label: 'Endring i sivilstand' },
-    { value: 'Bekreftelse på utdanning / utgifter', label: 'Bekreftelse på utdanning / utgifter' },
-    { value: 'Bekreftelse på tilsynsutgifter', label: 'Bekreftelse på tilsynsutgifter' },
-    { value: 'Bekreftelse på termindato', label: 'Bekreftelse på termindato' },
-    { value: 'Bekreftelse fra barnevernet', label: 'Bekreftelse fra barnevernet' },
-    { value: 'Avtale / avgjørelse om samvær', label: 'Avtale / avgjørelse om samvær' },
-    { value: 'Arbeidsforhold', label: 'Arbeidsforhold' },
-    { value: 'Anke på tilbakekreving', label: 'Anke på tilbakekreving' },
-];
-
 export const utledRiktigBehandlingstype = (
     tidligereBehandlinger: Behandling[]
 ): Behandlingstype => {
@@ -105,6 +58,65 @@ export const harValgtNyKlageBehandling = (
     behandling: BehandlingKlageRequest | undefined
 ): boolean => behandling !== undefined && behandling.behandlingId === undefined;
 
+const dokumentTitler: string[] = [
+    'Anke på tilbakekreving',
+    'Arbeidsforhold',
+    'Avtale / Avgjørelse om samvær',
+    'Bekreftelse fra barnevernet',
+    'Bekreftelse på termindato',
+    'Bekreftelse på tilsynsutgifter',
+    'Bekreftelse på utdanning / utgifter',
+    'Endring i sivilstand',
+    'Enslig mor eller far som er arbeidssøker',
+    'Eklæring om samlivsbrudd',
+    'EØS dokument',
+    'Forespørsel',
+    'Fødselsmelding/Fødselsattest',
+    'Grunnblankett',
+    'Inntektsopplysninger',
+    'Klage på tilbakekreving',
+    'Klage/Anke',
+    'Krav om gjenopptak av ankesak',
+    'Medisinsk dokumentasjon',
+    'Merknader i ankesak',
+    'Oppholdstillatelse',
+    'Refusjonskrav/faktura',
+    'Rettsavgjørelse',
+    'Skatteopplysninger',
+    'Stevning',
+    'Søknad om overgangsstønad',
+    'Søknad om skolepenger',
+    'Søknad om barnetilsyn',
+    'Tilmelding til NAV som reell arbeidssøker ved krav om overgangsstønad',
+    'Uttalelse',
+    'Uttalelse tilbakekreving',
+];
+
+export const dokumentTitlerMultiSelect: ISelectOption[] = dokumentTitler.map((tittel) => {
+    return { value: tittel, label: tittel };
+});
+
+export const mapDokumentTittelTilMultiselectValue = (tittel: string) => {
+    return { value: tittel, label: tittel };
+};
+
+export const mapLogiskeVedleggTilMultiselectValue = (logiskeVedlegg: string[]) => {
+    return logiskeVedlegg.map((vedlegg) => {
+        return { label: vedlegg, value: vedlegg };
+    });
+};
+
+export const mapMultiselectValueTilLogiskeVedlegg = (
+    values: MultiValue<MultiSelectValue> | SingleValue<MultiSelectValue>
+) => {
+    if ((values as MultiValue<MultiSelectValue>).length !== undefined) {
+        return (values as MultiValue<MultiSelectValue>).map((value) => value.value);
+    } else {
+        const value = values as SingleValue<MultiSelectValue>;
+        return [value === null ? '' : value.value];
+    }
+};
+
 export enum Journalføringsårsak {
     PAPIRSØKNAD = 'PAPIRSØKNAD',
     ETTERSENDING = 'ETTERSENDING',
diff --git "a/src/frontend/Komponenter/Journalf\303\270ring/Standard/DokumentPanel.tsx" "b/src/frontend/Komponenter/Journalf\303\270ring/Standard/DokumentPanel.tsx"
new file mode 100644
index 000000000..8fdf08b83
--- /dev/null
+++ "b/src/frontend/Komponenter/Journalf\303\270ring/Standard/DokumentPanel.tsx"
@@ -0,0 +1,160 @@
+import React from 'react';
+import { Button, ExpansionCard } from '@navikt/ds-react';
+import styled from 'styled-components';
+import { DokumentInfo, IJournalpost } from '../../../App/typer/journalføring';
+import { DokumentPanelHeader } from './DokumentPanelHeader';
+import { FamilieReactSelect, ISelectOption } from '@navikt/familie-form-elements';
+import {
+    dokumentTitlerMultiSelect,
+    mapLogiskeVedleggTilMultiselectValue,
+    mapDokumentTittelTilMultiselectValue,
+    mapMultiselectValueTilLogiskeVedlegg,
+} from '../Felles/utils';
+import { ExternalLinkIcon } from '@navikt/aksel-icons';
+import { åpneFilIEgenTab } from '../../../App/utils/utils';
+import { JournalføringStateRequest } from '../../../App/hooks/useJournalføringState';
+
+const ExpansionCardHeader = styled(ExpansionCard.Header)`
+    padding-bottom: 0.35rem;
+`;
+
+const ExpansionCardContent = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding-bottom: 1rem;
+`;
+
+const EksternLenkeKnapp = styled(Button)`
+    width: fit-content;
+`;
+
+const MultiSelect = styled(FamilieReactSelect)`
+    margin-bottom: -1rem;
+`;
+
+interface Props {
+    journalpost: IJournalpost;
+    journalpostState: JournalføringStateRequest;
+    dokument: DokumentInfo;
+    hentDokument: (dokumentInfoId: string) => void;
+}
+
+const DokumentPanel: React.FC<Props> = ({ journalpost, journalpostState, dokument }) => {
+    const {
+        dokumentTitler,
+        hentDokumentResponse,
+        logiskeVedleggPåDokument,
+        settDokumentTitler,
+        settLogiskeVedleggPåDokument,
+        settValgtDokumentPanel,
+        valgtDokumentPanel,
+    } = journalpostState;
+
+    const { hentDokument } = hentDokumentResponse;
+
+    const endreDokumentNavn = (dokumentInfoId: string, nyttDokumentNavn: string) => {
+        settDokumentTitler((prevState: Record<string, string> | undefined) => ({
+            ...prevState,
+            [dokumentInfoId]: nyttDokumentNavn,
+        }));
+    };
+
+    const endreLogiskeVedlegg = (dokumentInfoId: string, nyeLogiskeVedlegg: string[]) => {
+        settLogiskeVedleggPåDokument((prevState: Record<string, string[]> | undefined) => ({
+            ...prevState,
+            [dokumentInfoId]: nyeLogiskeVedlegg,
+        }));
+    };
+
+    const dokumentPanelErValgt = valgtDokumentPanel === dokument.dokumentInfoId;
+    const dokumentTittel =
+        (dokumentTitler && dokumentTitler[dokument.dokumentInfoId]) || dokument.tittel || 'Ukjent';
+    const defaultTittelValue = dokumentTittel
+        ? mapDokumentTittelTilMultiselectValue(dokumentTittel)
+        : undefined;
+
+    const logiskeVedlegg = logiskeVedleggPåDokument
+        ? logiskeVedleggPåDokument[dokument.dokumentInfoId]
+        : undefined;
+    const defaultLogiskeVedleggValue = logiskeVedlegg
+        ? mapLogiskeVedleggTilMultiselectValue(logiskeVedlegg)
+        : undefined;
+
+    return (
+        <ExpansionCard
+            id={dokument.dokumentInfoId}
+            size="small"
+            aria-label="journalpost"
+            onToggle={() => {
+                if (!dokumentPanelErValgt) {
+                    hentDokument(dokument.dokumentInfoId);
+                    settValgtDokumentPanel(dokument.dokumentInfoId);
+                }
+            }}
+        >
+            <ExpansionCardHeader>
+                <DokumentPanelHeader
+                    dokument={dokument}
+                    dokumentTittel={dokumentTittel}
+                    erValgt={dokumentPanelErValgt}
+                />
+            </ExpansionCardHeader>
+            <ExpansionCard.Content>
+                <ExpansionCardContent>
+                    <MultiSelect
+                        placeholder={'Velg tittel'}
+                        label={'Dokumenttittel'}
+                        options={dokumentTitlerMultiSelect}
+                        creatable={true}
+                        menuPortalTarget={document.querySelector('body')}
+                        isMulti={false}
+                        isDisabled={false}
+                        defaultValue={defaultTittelValue}
+                        feil={null}
+                        onChange={(value) => {
+                            endreDokumentNavn(
+                                dokument.dokumentInfoId,
+                                value ? (value as ISelectOption).value : ''
+                            );
+                        }}
+                    />
+                    <MultiSelect
+                        placeholder={'Velg innhold'}
+                        label={'Annet innhold'}
+                        creatable={true}
+                        menuPortalTarget={document.querySelector('body')}
+                        isMulti={true}
+                        isDisabled={false}
+                        defaultValue={defaultLogiskeVedleggValue}
+                        feil={null}
+                        onChange={(values) => {
+                            endreLogiskeVedlegg(
+                                dokument.dokumentInfoId,
+                                mapMultiselectValueTilLogiskeVedlegg(values)
+                            );
+                        }}
+                    />
+                    <EksternLenkeKnapp
+                        type={'button'}
+                        variant={'tertiary'}
+                        size={'small'}
+                        icon={<ExternalLinkIcon aria-hidden />}
+                        iconPosition={'right'}
+                        onClick={() =>
+                            åpneFilIEgenTab(
+                                journalpost.journalpostId,
+                                dokument.dokumentInfoId,
+                                dokumentTittel
+                            )
+                        }
+                    >
+                        Åpne i ny fane
+                    </EksternLenkeKnapp>
+                </ExpansionCardContent>
+            </ExpansionCard.Content>
+        </ExpansionCard>
+    );
+};
+
+export default DokumentPanel;
diff --git "a/src/frontend/Komponenter/Journalf\303\270ring/Standard/DokumentPanelHeader.tsx" "b/src/frontend/Komponenter/Journalf\303\270ring/Standard/DokumentPanelHeader.tsx"
new file mode 100644
index 000000000..8cdfa4de9
--- /dev/null
+++ "b/src/frontend/Komponenter/Journalf\303\270ring/Standard/DokumentPanelHeader.tsx"
@@ -0,0 +1,48 @@
+import React from 'react';
+import styled from 'styled-components';
+import { BodyShort, Label } from '@navikt/ds-react';
+import { FileTextFillIcon, FileTextIcon } from '@navikt/aksel-icons';
+import { DokumentInfo } from '../../../App/typer/journalføring';
+import { ABlue500 } from '@navikt/ds-tokens/dist/tokens';
+
+const Container = styled.div`
+    display: flex;
+    gap: 1rem;
+`;
+
+const DokumentTitler = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    justify-content: center;
+`;
+
+const IkonContainer = styled.div`
+    color: ${ABlue500};
+`;
+
+interface Props {
+    dokument: DokumentInfo;
+    dokumentTittel: string;
+    erValgt: boolean;
+}
+
+export const DokumentPanelHeader: React.FC<Props> = ({ dokument, dokumentTittel, erValgt }) => {
+    return (
+        <Container>
+            <IkonContainer>
+                {erValgt ? (
+                    <FileTextFillIcon fontSize={'3.5rem'} />
+                ) : (
+                    <FileTextIcon fontSize={'3.5rem'} />
+                )}
+            </IkonContainer>
+            <DokumentTitler>
+                <Label as={'p'}>{dokumentTittel}</Label>
+                {dokument.logiskeVedlegg.map((it) => (
+                    <BodyShort key={it.logiskVedleggId}>{it.tittel}</BodyShort>
+                ))}
+            </DokumentTitler>
+        </Container>
+    );
+};
diff --git "a/src/frontend/Komponenter/Journalf\303\270ring/Standard/Dokumenter.tsx" "b/src/frontend/Komponenter/Journalf\303\270ring/Standard/Dokumenter.tsx"
new file mode 100644
index 000000000..71230532c
--- /dev/null
+++ "b/src/frontend/Komponenter/Journalf\303\270ring/Standard/Dokumenter.tsx"
@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+import { IJournalpost } from '../../../App/typer/journalføring';
+import DokumentPanel from './DokumentPanel';
+import { JournalføringStateRequest } from '../../../App/hooks/useJournalføringState';
+
+const Liste = styled.ul`
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+`;
+
+interface Props {
+    journalpost: IJournalpost;
+    journalpostState: JournalføringStateRequest;
+}
+
+const Dokumenter: React.FC<Props> = ({ journalpost, journalpostState }) => {
+    return (
+        <Liste>
+            {journalpost.dokumenter.map((dokument) => (
+                <li key={dokument.dokumentInfoId}>
+                    <DokumentPanel
+                        dokument={dokument}
+                        hentDokument={journalpostState.hentDokumentResponse.hentDokument}
+                        journalpost={journalpost}
+                        journalpostState={journalpostState}
+                    />
+                </li>
+            ))}
+        </Liste>
+    );
+};
+
+export default Dokumenter;
diff --git "a/src/frontend/Komponenter/Journalf\303\270ring/Standard/Journalf\303\270ringApp.tsx" "b/src/frontend/Komponenter/Journalf\303\270ring/Standard/Journalf\303\270ringApp.tsx"
index 8e3c0cdf2..bd6d488a1 100644
--- "a/src/frontend/Komponenter/Journalf\303\270ring/Standard/Journalf\303\270ringApp.tsx"
+++ "b/src/frontend/Komponenter/Journalf\303\270ring/Standard/Journalf\303\270ringApp.tsx"
@@ -55,13 +55,9 @@ const JournalføringAppContent: React.FC<JournalføringAppProps> = ({
 }) => {
     const { innloggetSaksbehandler } = useApp();
     const navigate = useNavigate();
-
-    const journalpostId = journalResponse.journalpost.journalpostId;
-
     const journalpostState: JournalføringStateRequest = useJournalføringState(
         journalResponse,
-        oppgaveId,
-        journalpostId
+        oppgaveId
     );
     const hentDokumentResponse = useHentDokument(journalResponse.journalpost);
 
diff --git "a/src/frontend/Komponenter/Journalf\303\270ring/Standard/Journalf\303\270ringAppNy.tsx" "b/src/frontend/Komponenter/Journalf\303\270ring/Standard/Journalf\303\270ringAppNy.tsx"
index b97e97000..7d257d7f2 100644
--- "a/src/frontend/Komponenter/Journalf\303\270ring/Standard/Journalf\303\270ringAppNy.tsx"
+++ "b/src/frontend/Komponenter/Journalf\303\270ring/Standard/Journalf\303\270ringAppNy.tsx"
@@ -6,7 +6,6 @@ import {
     JournalføringStateRequest,
     useJournalføringState,
 } from '../../../App/hooks/useJournalføringState';
-import { useHentDokument } from '../../../App/hooks/useHentDokument';
 import { useHentFagsak } from '../../../App/hooks/useHentFagsak';
 import { useApp } from '../../../App/context/AppContext';
 import {
@@ -23,6 +22,7 @@ import JournalføringWrapper, {
 } from '../Felles/JournalføringWrapper';
 import JournalføringPdfVisning from '../Felles/JournalføringPdfVisning';
 import JournalpostPanel from './JournalpostPanel';
+import Dokumenter from './Dokumenter';
 
 const InnerContainer = styled.div`
     display: flex;
@@ -41,15 +41,10 @@ export const JournalføringAppNy: React.FC = () => {
 const JournalføringSide: React.FC<JournalføringAppProps> = ({ oppgaveId, journalResponse }) => {
     const { innloggetSaksbehandler } = useApp();
     const navigate = useNavigate();
-
-    const journalpostId = journalResponse.journalpost.journalpostId;
-
     const journalpostState: JournalføringStateRequest = useJournalføringState(
         journalResponse,
-        oppgaveId,
-        journalpostId
+        oppgaveId
     );
-    const hentDokumentResponse = useHentDokument(journalResponse.journalpost);
 
     const { fagsak } = useHentFagsak();
 
@@ -88,10 +83,21 @@ const JournalføringSide: React.FC<JournalføringAppProps> = ({ oppgaveId, journ
                             journalpostState={journalpostState}
                         />
                     </section>
+                    <section>
+                        <Tittel size={'small'} level={'2'}>
+                            Dokumenter
+                        </Tittel>
+                        <Dokumenter
+                            journalpost={journalResponse.journalpost}
+                            journalpostState={journalpostState}
+                        />
+                    </section>
                 </InnerContainer>
             </Venstrekolonne>
             <Høyrekolonne>
-                <JournalføringPdfVisning hentDokumentResponse={hentDokumentResponse} />
+                <JournalføringPdfVisning
+                    hentDokumentResponse={journalpostState.hentDokumentResponse}
+                />
             </Høyrekolonne>
         </Kolonner>
     );
diff --git "a/src/frontend/Komponenter/Journalf\303\270ring/Standard/JournalpostPanel.tsx" "b/src/frontend/Komponenter/Journalf\303\270ring/Standard/JournalpostPanel.tsx"
index 4f8ff6d46..985d99f72 100644
--- "a/src/frontend/Komponenter/Journalf\303\270ring/Standard/JournalpostPanel.tsx"
+++ "b/src/frontend/Komponenter/Journalf\303\270ring/Standard/JournalpostPanel.tsx"
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { BodyShort, ExpansionCard, Heading, Select } from '@navikt/ds-react';
 import styled from 'styled-components';
-import { FolderFileFillIcon } from '@navikt/aksel-icons';
+import { FolderFileFillIcon, FolderFileIcon } from '@navikt/aksel-icons';
 import { ABlue500 } from '@navikt/ds-tokens/dist/tokens';
 import {
     behandlingstemaTilTemaTekst,
@@ -53,10 +53,13 @@ interface Props {
 }
 
 const JournalpostPanel: React.FC<Props> = ({ journalpost, journalpostState }) => {
-    const tema = behandlingstemaTilTemaTekst(journalpost.behandlingstema);
-    const datoMottatt = formaterIsoDato(journalpost.datoMottatt);
     const { journalføringsårsak, settJournalføringsårsak, stønadstype, settStønadstype } =
         journalpostState;
+
+    const [erPanelEkspandert, settErPanelEkspandert] = useState<boolean>(false);
+
+    const tema = behandlingstemaTilTemaTekst(journalpost.behandlingstema);
+    const datoMottatt = formaterIsoDato(journalpost.datoMottatt);
     const kanRedigere = journalføringsårsak !== Journalføringsårsak.DIGITAL_SØKNAD;
     const valgbareStønadstyper = [
         Stønadstype.OVERGANGSSTØNAD,
@@ -65,11 +68,20 @@ const JournalpostPanel: React.FC<Props> = ({ journalpost, journalpostState }) =>
     ];
 
     return (
-        <ExpansionCard id={journalpost.journalpostId} size="small" aria-label="journalpost">
+        <ExpansionCard
+            id={journalpost.journalpostId}
+            size="small"
+            aria-label="journalpost"
+            onToggle={() => settErPanelEkspandert((prevState) => !prevState)}
+        >
             <ExpansionCardHeader>
                 <FlexRow>
                     <IconContainer>
-                        <FolderFileFillIcon fontSize={'3.5rem'} />
+                        {erPanelEkspandert ? (
+                            <FolderFileFillIcon fontSize={'3.5rem'} />
+                        ) : (
+                            <FolderFileIcon fontSize={'3.5rem'} />
+                        )}
                     </IconContainer>
                     <Grid>
                         <Heading size={'small'} level={'2'}>