diff --git a/src/components/LeggTilKnapp.tsx b/src/components/LeggTilKnapp.tsx
deleted file mode 100644
index bc1efeb4d..000000000
--- a/src/components/LeggTilKnapp.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Knapp, KnappBaseProps } from "nav-frontend-knapper";
-import React from "react";
-import { PlusIcon } from "@navikt/aksel-icons";
-
-export const LeggTilKnapp = ({ children, ...rest }: KnappBaseProps) => (
-  <Knapp htmlType="button" {...rest}>
-    <PlusIcon title="Pluss ikon" />
-    <span>{children}</span>
-  </Knapp>
-);
diff --git a/src/components/SlettKnapp.tsx b/src/components/SlettKnapp.tsx
deleted file mode 100644
index 668b63b26..000000000
--- a/src/components/SlettKnapp.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-import { Flatknapp, KnappBaseProps } from "nav-frontend-knapper";
-import styled from "styled-components";
-import { TrashIcon } from "@navikt/aksel-icons";
-
-const DeleteButton = styled(Flatknapp)`
-  svg {
-    width: 1.25em;
-    height: 1.25em;
-  }
-`;
-
-export const SlettKnapp = (props: KnappBaseProps) => (
-  <DeleteButton htmlType="button" kompakt {...props}>
-    <TrashIcon fontSize="1.25em" title="Slett ikon" />
-  </DeleteButton>
-);
diff --git a/src/components/dialogmote/referat/AndreDeltakere.tsx b/src/components/dialogmote/referat/AndreDeltakere.tsx
index 089f32c83..8457561c8 100644
--- a/src/components/dialogmote/referat/AndreDeltakere.tsx
+++ b/src/components/dialogmote/referat/AndreDeltakere.tsx
@@ -1,13 +1,11 @@
 import React from "react";
-import { LeggTilKnapp } from "../../LeggTilKnapp";
 import { FieldArray } from "react-final-form-arrays";
 import { NewDialogmotedeltakerAnnenDTO } from "@/data/dialogmote/types/dialogmoteReferatTypes";
 import { Field, useFormState } from "react-final-form";
-import { Input } from "nav-frontend-skjema";
 import { FlexColumn, FlexRow, PaddingSize } from "../../Layout";
-import styled from "styled-components";
 import { ValidationErrors } from "final-form";
-import { SlettKnapp } from "../../SlettKnapp";
+import { Button, TextField } from "@navikt/ds-react";
+import { PlusIcon, TrashIcon } from "@navikt/aksel-icons";
 
 const texts = {
   buttonText: "Legg til en deltaker",
@@ -15,17 +13,6 @@ const texts = {
   navnLabel: "Navn",
 };
 
-const FunksjonColumn = styled(FlexColumn)`
-  margin-right: 1em;
-`;
-const NavnColumn = styled(FlexColumn)`
-  margin-right: 0.25em;
-`;
-
-const SlettColumn = styled(FlexColumn)`
-  margin-top: 1.85em;
-`;
-
 interface DeltakerFieldProps {
   fieldName: string;
   label: string;
@@ -48,57 +35,66 @@ const DeltakerField = ({
 }: DeltakerFieldProps) => (
   <Field<string> name={fieldName} parse={identityFunction}>
     {({ input }) => (
-      <Input
+      <TextField
         {...input}
         id={fieldName}
         label={label}
-        feil={submitFailed && errors && errors[fieldName]}
+        error={submitFailed && errors && errors[fieldName]}
+        type="text"
+        size="small"
       />
     )}
   </Field>
 );
 
-const AndreDeltakereBoks = styled.div`
-  margin-top: 2em;
-`;
-
 export const AndreDeltakere = () => {
   const { submitFailed, errors } = useFormState();
 
   return (
-    <AndreDeltakereBoks>
+    <div className="mt-4">
       <FieldArray<NewDialogmotedeltakerAnnenDTO> name={"andreDeltakere"}>
         {({ fields }) => (
           <>
             {fields.map((field, index) => (
               <FlexRow key={field} bottomPadding={PaddingSize.SM}>
-                <FunksjonColumn flex={0.3}>
+                <FlexColumn className="mr-4" flex={0.3}>
                   <DeltakerField
                     fieldName={`${field}.funksjon`}
                     label={texts.funksjonLabel}
                     submitFailed={submitFailed}
                     errors={errors}
                   />
-                </FunksjonColumn>
-                <NavnColumn flex={0.3}>
+                </FlexColumn>
+                <FlexColumn className="mr-1" flex={0.3}>
                   <DeltakerField
                     fieldName={`${field}.navn`}
                     label={texts.navnLabel}
                     submitFailed={submitFailed}
                     errors={errors}
                   />
-                </NavnColumn>
-                <SlettColumn>
-                  <SlettKnapp onClick={() => fields.remove(index)} />
-                </SlettColumn>
+                </FlexColumn>
+                <FlexColumn className="mt-7">
+                  <Button
+                    type="button"
+                    variant="tertiary"
+                    size="small"
+                    icon={<TrashIcon title="Slett ikon" />}
+                    onClick={() => fields.remove(index)}
+                  />
+                </FlexColumn>
               </FlexRow>
             ))}
-            <LeggTilKnapp onClick={() => fields.push(initialDeltaker)}>
+            <Button
+              type="button"
+              variant="secondary"
+              icon={<PlusIcon title="Pluss ikon" />}
+              onClick={() => fields.push(initialDeltaker)}
+            >
               {texts.buttonText}
-            </LeggTilKnapp>
+            </Button>
           </>
         )}
       </FieldArray>
-    </AndreDeltakereBoks>
+    </div>
   );
 };
diff --git a/src/components/dialogmote/referat/Deltakere.tsx b/src/components/dialogmote/referat/Deltakere.tsx
index 126754de7..72ea0214a 100644
--- a/src/components/dialogmote/referat/Deltakere.tsx
+++ b/src/components/dialogmote/referat/Deltakere.tsx
@@ -1,16 +1,12 @@
 import React, { ReactElement, ReactNode, useEffect, useState } from "react";
 import { useNavBrukerData } from "@/data/navbruker/navbruker_hooks";
-import { Normaltekst, Systemtittel, Undertittel } from "nav-frontend-typografi";
 import { Field, useFormState } from "react-final-form";
 import styled from "styled-components";
-import { Checkbox, Input } from "nav-frontend-skjema";
 import { FlexColumn, FlexRow, PaddingSize } from "../../Layout";
 import { AndreDeltakere } from "./AndreDeltakere";
 import { useAktivVeilederinfoQuery } from "@/data/veilederinfo/veilederinfoQueryHooks";
 import { DialogmotedeltakerBehandlerDTO } from "@/data/dialogmote/types/dialogmoteTypes";
 import { behandlerDeltokTekst } from "@/utils/behandlerUtils";
-import { EkspanderbartpanelBase } from "nav-frontend-ekspanderbartpanel";
-import navFarger from "nav-frontend-core";
 import { ReferatSkjemaValues } from "@/components/dialogmote/referat/Referat";
 import {
   PersonIcon,
@@ -18,6 +14,7 @@ import {
   PersonSuitIcon,
 } from "@navikt/aksel-icons";
 import { MedisinskrinImage } from "../../../../img/ImageComponents";
+import { Checkbox, ExpansionCard, Heading, TextField } from "@navikt/ds-react";
 
 export const texts = {
   title: "Deltakere i møtet",
@@ -32,14 +29,6 @@ export const texts = {
     "Dersom behandleren ikke deltok i møtet, men likevel ønsker å motta referat, krever det et samtykke fra arbeidstakeren.",
 };
 
-const DeltakereBoks = styled.div`
-  margin-bottom: 4em;
-`;
-
-const Header = styled(Systemtittel)`
-  margin-bottom: 1.5em;
-`;
-
 const deltakerIconProps = {
   role: "img",
   focusable: false,
@@ -47,18 +36,15 @@ const deltakerIconProps = {
   height: 24,
 };
 
-const StyledEkspanderbartpanel = styled(EkspanderbartpanelBase)`
-  margin-bottom: 0.5em;
-  border: 1px solid ${navFarger.navGra60};
-`;
-
 interface DeltakerEkspanderbartPanelProps {
+  ariaLabel: string;
   tittel: ReactNode;
   children: ReactNode;
   harValideringsfeil?: boolean;
 }
 
 const DeltakerEkspanderbartPanel = ({
+  ariaLabel,
   tittel,
   children,
   harValideringsfeil,
@@ -71,14 +57,16 @@ const DeltakerEkspanderbartPanel = ({
   }, [harValideringsfeil]);
 
   return (
-    <StyledEkspanderbartpanel
-      renderContentWhenClosed
-      apen={open}
-      onClick={() => setOpen(!open)}
-      tittel={tittel}
+    <ExpansionCard
+      className="mb-2"
+      size="small"
+      open={open}
+      onToggle={() => setOpen(!open)}
+      aria-label={ariaLabel}
     >
-      {children}
-    </StyledEkspanderbartpanel>
+      <ExpansionCard.Header>{tittel}</ExpansionCard.Header>
+      <ExpansionCard.Content>{children}</ExpansionCard.Content>
+    </ExpansionCard>
   );
 };
 
@@ -86,7 +74,7 @@ interface DeltakerTekstProps {
   color?: string;
 }
 
-const DeltakerTekst = styled(Undertittel)<DeltakerTekstProps>`
+const DeltakerTekst = styled(Heading)<DeltakerTekstProps>`
   margin-left: 0.5em;
   ${(props) =>
     props.color && {
@@ -102,9 +90,11 @@ const DeltakerBehandler = ({ behandler }: DeltakerBehandlerProps) => {
   const {
     values: { behandlerDeltatt },
   } = useFormState<ReferatSkjemaValues>();
+  const tittelTekst = behandlerDeltokTekst(behandler, behandlerDeltatt);
 
   return (
     <DeltakerEkspanderbartPanel
+      ariaLabel={tittelTekst}
       tittel={
         <FlexRow>
           <img
@@ -112,31 +102,31 @@ const DeltakerBehandler = ({ behandler }: DeltakerBehandlerProps) => {
             alt="Medisinskrin-ikon"
             {...deltakerIconProps}
           />
-          <DeltakerTekst>
-            {behandlerDeltokTekst(behandler, behandlerDeltatt)}
-          </DeltakerTekst>
+          <DeltakerTekst size="small">{tittelTekst}</DeltakerTekst>
         </FlexRow>
       }
     >
-      <FlexRow topPadding={PaddingSize.SM}>
-        <Normaltekst>{texts.behandlerTekst}</Normaltekst>
-      </FlexRow>
+      <FlexRow topPadding={PaddingSize.SM}>{texts.behandlerTekst}</FlexRow>
       <FlexRow topPadding={PaddingSize.MD}>
         <Field name="behandlerDeltatt" type="checkbox">
           {({ input }) => (
-            <Checkbox {...input} label={texts.behandlerDeltokLabel} />
+            <Checkbox size="small" {...input}>
+              {texts.behandlerDeltokLabel}
+            </Checkbox>
           )}
         </Field>
       </FlexRow>
       <FlexRow topPadding={PaddingSize.MD}>
         <Field name="behandlerMottarReferat" type="checkbox">
           {({ input }) => (
-            <Checkbox {...input} label={texts.behandlerMottaReferatLabel} />
+            <Checkbox size="small" {...input}>
+              {texts.behandlerMottaReferatLabel}
+            </Checkbox>
           )}
         </Field>
       </FlexRow>
       <FlexRow topPadding={PaddingSize.MD}>
-        <Normaltekst>{texts.behandlerReferatSamtykke}</Normaltekst>
+        {texts.behandlerReferatSamtykke}
       </FlexRow>
     </DeltakerEkspanderbartPanel>
   );
@@ -147,32 +137,38 @@ const DeltakerArbeidsgiver = () => {
     <Field<string> name="naermesteLeder">
       {({ input, meta }) => {
         const harValideringsfeil = meta.submitFailed && !!meta.error;
-        const tittelFarge = harValideringsfeil ? navFarger.redError : undefined;
+        const tittelFarge = harValideringsfeil
+          ? "var(--a-text-danger)"
+          : undefined;
+        const tittelTekst = `Fra arbeidsgiver: ${input.value || ""}`;
 
         return (
           <DeltakerEkspanderbartPanel
+            ariaLabel={tittelTekst}
             harValideringsfeil={harValideringsfeil}
             tittel={
               <FlexRow>
                 <PersonSuitIcon {...deltakerIconProps} color={tittelFarge} />
-                <DeltakerTekst color={tittelFarge}>{`Fra arbeidsgiver: ${
-                  input.value || ""
-                }`}</DeltakerTekst>
+                <DeltakerTekst size="small" color={tittelFarge}>
+                  {tittelTekst}
+                </DeltakerTekst>
               </FlexRow>
             }
           >
             <FlexRow topPadding={PaddingSize.SM}>
               <FlexColumn flex={0.5}>
-                <Input
+                <TextField
                   {...input}
                   id="naermesteLeder"
                   label={texts.arbeidsgiverLabel}
-                  feil={meta.submitFailed && meta.error}
+                  error={meta.submitFailed && meta.error}
+                  type="text"
+                  size="small"
                 />
               </FlexColumn>
             </FlexRow>
             <FlexRow topPadding={PaddingSize.MD}>
-              <Normaltekst>{texts.arbeidsgiverTekst}</Normaltekst>
+              {texts.arbeidsgiverTekst}
             </FlexRow>
           </DeltakerEkspanderbartPanel>
         );
@@ -190,20 +186,22 @@ const Deltakere = ({ behandler }: DeltakereProps): ReactElement => {
   const { data: veilederinfo } = useAktivVeilederinfoQuery();
 
   return (
-    <DeltakereBoks>
-      <Header>{texts.title}</Header>
+    <div className="mb-16">
+      <Heading size="medium" className="mb-4">
+        {texts.title}
+      </Heading>
       <FlexRow leftPadding={PaddingSize.SM} bottomPadding={PaddingSize.MD}>
         <PersonIcon {...deltakerIconProps} />
-        <DeltakerTekst>{`Arbeidstaker: ${navbruker?.navn}`}</DeltakerTekst>
+        <DeltakerTekst size="small">{`Arbeidstaker: ${navbruker?.navn}`}</DeltakerTekst>
       </FlexRow>
       <FlexRow leftPadding={PaddingSize.SM} bottomPadding={PaddingSize.MD}>
         <PersonPencilIcon {...deltakerIconProps} />
-        <DeltakerTekst>{`Fra NAV: ${veilederinfo?.navn}`}</DeltakerTekst>
+        <DeltakerTekst size="small">{`Fra NAV: ${veilederinfo?.navn}`}</DeltakerTekst>
       </FlexRow>
       <DeltakerArbeidsgiver />
       {behandler && <DeltakerBehandler behandler={behandler} />}
       <AndreDeltakere />
-    </DeltakereBoks>
+    </div>
   );
 };
 
diff --git a/test/dialogmote/ReferatMellomlagreTest.tsx b/test/dialogmote/ReferatMellomlagreTest.tsx
index 01cc49e7a..f42eb45ea 100644
--- a/test/dialogmote/ReferatMellomlagreTest.tsx
+++ b/test/dialogmote/ReferatMellomlagreTest.tsx
@@ -4,18 +4,12 @@ import Referat, {
 } from "../../src/components/dialogmote/referat/Referat";
 import { DialogmoteDTO } from "@/data/dialogmote/types/dialogmoteTypes";
 import { expect } from "chai";
-import {
-  changeTextInput,
-  clickButton,
-  getCheckbox,
-  getTextInput,
-} from "../testUtils";
+import { changeTextInput, clickButton, getTextInput } from "../testUtils";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { dialogmoteRoutePath } from "@/routers/AppRouter";
 import {
   annenDeltakerFunksjon,
   annenDeltakerNavn,
-  behandlerDeltakerTekst,
   dialogmoteMedBehandler,
   dialogmoteMedMellomlagretReferat,
   dialogmoteMedMellomlagretReferatBehandlerIkkeDeltatt,
@@ -82,19 +76,24 @@ describe("ReferatMellomlagreTest", () => {
     expect(screen.getByDisplayValue(moteTekster.konklusjonTekst)).to.exist;
     expect(screen.getByDisplayValue(annenDeltakerNavn)).to.exist;
     expect(screen.getByDisplayValue(annenDeltakerFunksjon)).to.exist;
-    const checkedStandardtekst = getCheckbox(referatStandardTekst.label, true);
+    const checkedStandardtekst = screen.getByRole("checkbox", {
+      checked: true,
+      name: referatStandardTekst.label,
+    });
     expect(checkedStandardtekst).to.exist;
   });
 
   it("preutfyller referat-skjema behandler-deltakelse fra dialogmote", () => {
     renderReferat(dialogmoteMedMellomlagretReferatBehandlerIkkeDeltatt);
 
-    clickButton(`Medisinskrin-ikon ${behandlerDeltakerTekst}, deltok ikke`);
-
-    expect(getCheckbox(deltakereSkjemaTexts.behandlerDeltokLabel, false)).to
-      .exist;
-    expect(getCheckbox(deltakereSkjemaTexts.behandlerMottaReferatLabel, false))
-      .to.exist;
+    const behandlerDeltokInput: HTMLInputElement = screen.getByLabelText(
+      deltakereSkjemaTexts.behandlerDeltokLabel
+    );
+    expect(behandlerDeltokInput.checked).to.be.false;
+    const behandlerMottarReferatInput: HTMLInputElement = screen.getByLabelText(
+      deltakereSkjemaTexts.behandlerMottaReferatLabel
+    );
+    expect(behandlerMottarReferatInput.checked).to.be.false;
   });
 });
 
diff --git a/test/dialogmote/ReferatTest.tsx b/test/dialogmote/ReferatTest.tsx
index 87c3176c0..5fcd06706 100644
--- a/test/dialogmote/ReferatTest.tsx
+++ b/test/dialogmote/ReferatTest.tsx
@@ -11,7 +11,6 @@ import { texts as valideringsTexts } from "../../src/utils/valideringUtils";
 import {
   changeTextInput,
   clickButton,
-  getCheckbox,
   getFeilmeldingLink,
   getTextInput,
   getTooLongText,
@@ -89,8 +88,13 @@ describe("ReferatTest", () => {
       })
     ).to.exist;
 
-    clickButton("Fra arbeidsgiver: Tatten Tattover");
-    const getFraArbeidsgiverInput = () => getTextInput("Navn");
+    expect(
+      screen.getByRole("region", {
+        name: "Fra arbeidsgiver: Tatten Tattover",
+      })
+    ).to.exist;
+
+    const getFraArbeidsgiverInput = () => screen.getByLabelText("Navn");
 
     // Sjekk at 'Fra arbeidsgiver' valideres
     changeTextInput(getFraArbeidsgiverInput(), "");
@@ -112,30 +116,34 @@ describe("ReferatTest", () => {
     expect(screen.getByRole("heading", { name: behandlerDeltakerTekst })).to
       .exist;
 
-    clickButton(`Medisinskrin-ikon ${behandlerDeltakerTekst}`);
+    expect(
+      screen.getByRole("region", {
+        name: behandlerDeltakerTekst,
+      })
+    ).to.exist;
 
-    expect(getCheckbox(deltakereSkjemaTexts.behandlerDeltokLabel, true)).to
-      .exist;
-    expect(getCheckbox(deltakereSkjemaTexts.behandlerMottaReferatLabel, true))
-      .to.exist;
+    const behandlerDeltokInput: HTMLInputElement = screen.getByLabelText(
+      deltakereSkjemaTexts.behandlerDeltokLabel
+    );
+    expect(behandlerDeltokInput.checked).to.be.true;
+    const behandlerMottarReferatInput: HTMLInputElement = screen.getByLabelText(
+      deltakereSkjemaTexts.behandlerMottaReferatLabel
+    );
+    expect(behandlerMottarReferatInput.checked).to.be.true;
   });
 
   it("kan endre behandlers deltakelse", () => {
     stubFerdigstillApi(apiMock(), dialogmoteMedBehandler.uuid);
     renderReferat(dialogmoteMedBehandler);
     passSkjemaTekstInput();
-    clickButton(`Medisinskrin-ikon ${behandlerDeltakerTekst}`);
 
     // Fjern avkrysning på deltakelse og motta referat
-    const behandlerDeltokCheckbox = getCheckbox(
-      deltakereSkjemaTexts.behandlerDeltokLabel,
-      true
+    const behandlerDeltokCheckbox: HTMLInputElement = screen.getByLabelText(
+      deltakereSkjemaTexts.behandlerDeltokLabel
     );
     userEvent.click(behandlerDeltokCheckbox);
-    const behandlerMottaReferatCheckbox = getCheckbox(
-      deltakereSkjemaTexts.behandlerMottaReferatLabel,
-      true
-    );
+    const behandlerMottaReferatCheckbox: HTMLInputElement =
+      screen.getByLabelText(deltakereSkjemaTexts.behandlerMottaReferatLabel);
     userEvent.click(behandlerMottaReferatCheckbox);
 
     clickButton("Lagre og send");
diff --git a/test/testUtils.ts b/test/testUtils.ts
index ab62c88b5..d15c2d117 100644
--- a/test/testUtils.ts
+++ b/test/testUtils.ts
@@ -31,12 +31,6 @@ export const changeTextInput = (input: HTMLElement, value: string) =>
     target: { value },
   });
 
-export const getCheckbox = (name: string, checked: boolean) =>
-  screen.getByRole("checkbox", {
-    checked,
-    name,
-  });
-
 export const maxLengthErrorMessage = (max: number) =>
   `Maks ${max} tegn tillatt`;