diff --git a/src/components/projekti/suunnitteluvaihe/EsitettavatYhteystiedot.tsx b/src/components/projekti/suunnitteluvaihe/EsitettavatYhteystiedot.tsx
index 1cf5b68da..00f7a95f3 100644
--- a/src/components/projekti/suunnitteluvaihe/EsitettavatYhteystiedot.tsx
+++ b/src/components/projekti/suunnitteluvaihe/EsitettavatYhteystiedot.tsx
@@ -88,7 +88,7 @@ export default function EsitettavatYhteystiedot({ vuorovaikutusnro }: Props): Re
   }
 
   return (
-    <Section>
+    <Section className="mt-8">
       <SectionContent>
         <h4 className="vayla-small-title">Vuorovaikuttamisen yhteyshenkilöt</h4>
         <p>
diff --git a/src/components/projekti/suunnitteluvaihe/IlmoituksenVastaanottajat.tsx b/src/components/projekti/suunnitteluvaihe/IlmoituksenVastaanottajat.tsx
index 83a7ff26a..856b1f609 100644
--- a/src/components/projekti/suunnitteluvaihe/IlmoituksenVastaanottajat.tsx
+++ b/src/components/projekti/suunnitteluvaihe/IlmoituksenVastaanottajat.tsx
@@ -11,6 +11,7 @@ import Section from "@components/layout/Section";
 import SectionContent from "@components/layout/SectionContent";
 import HassuGrid from "@components/HassuGrid";
 import dayjs from "dayjs";
+import { useProjekti } from "src/hooks/useProjekti";
 
 interface HelperType {
   kunnat?: FieldError | { nimi?: FieldError | undefined; sahkoposti?: FieldError | undefined }[] | undefined;
@@ -34,6 +35,7 @@ type FormFields = {
 
 export default function IlmoituksenVastaanottajat({ kirjaamoOsoitteet, vuorovaikutus }: Props): ReactElement {
   const { t } = useTranslation("commonFI");
+  const { data: projekti } = useProjekti();
 
   const julkinen = !!vuorovaikutus?.julkinen;
 
@@ -42,11 +44,8 @@ export default function IlmoituksenVastaanottajat({ kirjaamoOsoitteet, vuorovaik
     control,
     formState: { errors },
     setValue,
-    watch,
   } = useFormContext<FormFields>();
 
-  const ilmoituksenVastaanottajat = watch("suunnitteluVaihe.vuorovaikutus.ilmoituksenVastaanottajat");
-
   const { fields: kuntaFields } = useFieldArray({
     control,
     name: "suunnitteluVaihe.vuorovaikutus.ilmoituksenVastaanottajat.kunnat",
@@ -61,15 +60,6 @@ export default function IlmoituksenVastaanottajat({ kirjaamoOsoitteet, vuorovaik
     name: "suunnitteluVaihe.vuorovaikutus.ilmoituksenVastaanottajat.viranomaiset",
   });
 
-  const getKuntanimi = (index: number) => {
-    const nimi = ilmoituksenVastaanottajat?.kunnat?.[index].nimi;
-    if (!nimi) {
-      return;
-    }
-
-    return formatProperNoun(nimi);
-  };
-
   if (!kirjaamoOsoitteet) {
     return <></>;
   }
@@ -233,7 +223,11 @@ export default function IlmoituksenVastaanottajat({ kirjaamoOsoitteet, vuorovaik
                   {...register(`suunnitteluVaihe.vuorovaikutus.ilmoituksenVastaanottajat.kunnat.${index}.nimi`)}
                   readOnly
                 />
-                <TextInput label="Kunta *" value={getKuntanimi(index)} disabled />
+                <TextInput
+                  label="Kunta *"
+                  value={formatProperNoun((projekti?.velho?.kunnat || [])[index] || "")}
+                  disabled
+                />
                 <TextInput
                   label="Sähköpostiosoite *"
                   error={
diff --git a/src/components/projekti/suunnitteluvaihe/LuonnoksetJaAineistot.tsx b/src/components/projekti/suunnitteluvaihe/LuonnoksetJaAineistot.tsx
deleted file mode 100644
index 23a8ca763..000000000
--- a/src/components/projekti/suunnitteluvaihe/LuonnoksetJaAineistot.tsx
+++ /dev/null
@@ -1,545 +0,0 @@
-import SectionContent from "@components/layout/SectionContent";
-import Section from "@components/layout/Section";
-import { Key, useMemo, useState } from "react";
-import Button from "@components/button/Button";
-import ButtonFlat from "@components/button/ButtonFlat";
-import TextInput from "@components/form/TextInput";
-import Notification, { NotificationType } from "@components/notification/Notification";
-import IconButton from "@components/button/IconButton";
-import HassuStack from "@components/layout/HassuStack";
-import {
-  FieldArrayWithId,
-  FormState,
-  useFieldArray,
-  UseFieldArrayReturn,
-  useFormContext,
-  UseFormRegister,
-  UseFormWatch,
-} from "react-hook-form";
-import AineistojenValitseminenDialog from "../common/AineistojenValitseminenDialog";
-import { Link } from "@mui/material";
-import { VuorovaikutusFormValues } from "./SuunnitteluvaiheenVuorovaikuttaminen";
-import HassuAineistoNimiExtLink from "../HassuAineistoNimiExtLink";
-import { useProjekti } from "src/hooks/useProjekti";
-import { Aineisto, Vuorovaikutus } from "@services/api";
-import HassuTable from "@components/HassuTable";
-import { useHassuTable } from "src/hooks/useHassuTable";
-import { Column } from "react-table";
-import HassuAccordion from "@components/HassuAccordion";
-import Select from "@components/form/Select";
-import { formatDateTime } from "src/util/dateUtils";
-import { find } from "lodash";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-interface Props {
-  vuorovaikutus: Vuorovaikutus | undefined;
-  muokkaustila: boolean;
-  setMuokkaustila: React.Dispatch<React.SetStateAction<boolean>>;
-  saveForm: (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>;
-  updateFormContext: () => void;
-}
-
-export default function LuonnoksetJaAineistot({
-  saveForm,
-  vuorovaikutus,
-  muokkaustila,
-  setMuokkaustila,
-  updateFormContext,
-}: Props) {
-  const { data: projekti } = useProjekti();
-  const [esittelyAineistoDialogOpen, setEsittelyAineistoDialogOpen] = useState(false);
-  const [suunnitelmaLuonnoksetDialogOpen, setSuunnitelmaLuonnoksetDialogOpen] = useState(false);
-  const [expandedEsittelyAineisto, setExpandedEsittelyAineisto] = useState<Key[]>([]);
-  const [expandedSuunnitelmaLuonnokset, setExpandedSuunnitelmaLuonnokset] = useState<Key[]>([]);
-
-  const julkinen = vuorovaikutus?.julkinen;
-
-  const { control, register, formState, reset, setValue, watch } = useFormContext<VuorovaikutusFormValues>();
-
-  const esittelyAineistotFieldArray = useFieldArray({
-    control,
-    name: "suunnitteluVaihe.vuorovaikutus.esittelyaineistot",
-  });
-
-  const suunnitelmaLuonnoksetFieldArray = useFieldArray({
-    control,
-    name: "suunnitteluVaihe.vuorovaikutus.suunnitelmaluonnokset",
-  });
-
-  const {
-    fields: videotFields,
-    append: appendVideot,
-    remove: removeVideot,
-  } = useFieldArray({
-    control,
-    name: "suunnitteluVaihe.vuorovaikutus.videot",
-  });
-
-  const esittelyaineistot = watch("suunnitteluVaihe.vuorovaikutus.esittelyaineistot");
-  const suunnitelmaluonnokset = watch("suunnitteluVaihe.vuorovaikutus.suunnitelmaluonnokset");
-
-  const areAineistoKategoriesExpanded = !!expandedEsittelyAineisto.length || !!expandedSuunnitelmaLuonnokset.length;
-
-  return (
-    <>
-      {!muokkaustila && julkinen && (
-        <Section>
-          <Button style={{ float: "right" }} type="button" onClick={() => setMuokkaustila(true)}>
-            Muokkaa
-          </Button>
-          <p className="vayla-label mb-5">Suunnitelmaluonnokset ja esittelyaineistot</p>
-          {!!vuorovaikutus?.videot?.length && (
-            <SectionContent>
-              <div>Videoesittely</div>
-              {vuorovaikutus.videot.map((video) => (
-                <div key={video.url} style={{ marginTop: "0.4rem" }}>
-                  <Link underline="none" href={video.url}>
-                    {video.url}
-                  </Link>
-                </div>
-              ))}
-            </SectionContent>
-          )}
-          {!vuorovaikutus?.suunnitelmaluonnokset?.length && !vuorovaikutus?.esittelyaineistot?.length && (
-            <SectionContent>
-              <p>Lisää suunnitelmalle luonnokset ja esittelyaineistot Muokkaa-painikkeesta.</p>
-            </SectionContent>
-          )}
-          {!!vuorovaikutus?.esittelyaineistot?.length && (
-            <SectionContent>
-              <div>Esittelyaineistot</div>
-              {vuorovaikutus.esittelyaineistot.map((aineisto) => (
-                <div key={aineisto.dokumenttiOid} style={{ marginTop: "0.4rem" }}>
-                  <Link underline="none" href={aineisto.tiedosto || "#"}>
-                    {aineisto.nimi}
-                  </Link>
-                </div>
-              ))}
-            </SectionContent>
-          )}
-          {!!vuorovaikutus?.suunnitelmaluonnokset?.length && (
-            <SectionContent>
-              <div>Suunnitelmaluonnokset</div>
-              {vuorovaikutus.suunnitelmaluonnokset.map((aineisto) => (
-                <div key={aineisto.dokumenttiOid} style={{ marginTop: "0.4rem" }}>
-                  <Link underline="none" href={aineisto.tiedosto || "#"}>
-                    {aineisto.nimi}
-                  </Link>
-                </div>
-              ))}
-            </SectionContent>
-          )}
-          {vuorovaikutus?.suunnittelumateriaali?.nimi && (
-            <SectionContent>
-              <div>Muu esittelymateriaali</div>
-              <div style={{ marginTop: "0.4rem" }}>{vuorovaikutus.suunnittelumateriaali.nimi}</div>
-              <div style={{ marginTop: "0.4rem" }}>
-                <Link underline="none" href={vuorovaikutus.suunnittelumateriaali.url}>
-                  {vuorovaikutus.suunnittelumateriaali.url}
-                </Link>
-              </div>
-            </SectionContent>
-          )}
-        </Section>
-      )}
-      <Section className={muokkaustila || !julkinen ? "" : "hidden"}>
-        <SectionContent>
-          {julkinen ? (
-            <HassuStack className="mt-12" direction={["column", "column", "row"]} justifyContent="space-between">
-              <h4 style={{ display: "inline" }} className="vayla-small-title">
-                Suunnitelmaluonnokset ja esittelyaineistot
-              </h4>
-              <HassuStack direction={["column", "column", "row"]}>
-                <Button
-                  primary
-                  type="submit"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    saveForm();
-                  }}
-                >
-                  Päivitä
-                </Button>
-                <Button
-                  onClick={(e) => {
-                    e.preventDefault();
-                    if (formState.isDirty) reset();
-                    setMuokkaustila(false);
-                  }}
-                >
-                  Peruuta
-                </Button>
-              </HassuStack>
-            </HassuStack>
-          ) : (
-            <h4 className="vayla-small-title">Suunnitelmaluonnokset ja esittelyaineistot</h4>
-          )}
-          <p>
-            Esittelyvideo tulee olla ladattuna erilliseen videojulkaisupalveluun (esim. Youtube) ja videon katselulinkki
-            tuodaan sille tarkoitettuun kenttään. Luonnokset ja muut materiaalit tuodaan Projektivelhosta.
-            Suunnitelmaluonnokset ja esittelyaineistot on mahdollista. Suunnitelmaluonnokset ja aineistot julkaistaan
-            palvelun julkisella puolella vuorovaikutuksen julkaisupäivänä.
-          </p>
-          <Notification type={NotificationType.INFO_GRAY}>
-            Huomioithan, että suunnitelmaluonnoksien ja esittelyaineistojen tulee täyttää saavutettavuusvaatimukset.
-          </Notification>
-        </SectionContent>
-        <SectionContent>
-          <h5 className="vayla-smallest-title">Suunnitelmaluonnokset ja esittelyaineistot</h5>
-          <p>Aineistoille tulee valita kategoria / otsikko, jonka alla ne esitetään palvelun julkisella puolella.</p>
-          <p>
-            Aineistojen järjestys kunkin otsikon alla määräytyy listan järjestyksen mukaan. Voit vaihtaa järjestystä
-            tarttumalla hiirellä raahaus-ikonista ja siirtämällä rivin paikkaa.
-          </p>
-          <ButtonFlat
-            type="button"
-            onClick={() => {
-              if (areAineistoKategoriesExpanded) {
-                setExpandedEsittelyAineisto([]);
-                setExpandedSuunnitelmaLuonnokset([]);
-              } else {
-                setExpandedEsittelyAineisto([0]);
-                setExpandedSuunnitelmaLuonnokset([0]);
-              }
-            }}
-            iconComponent={
-              <span className="fa-layers">
-                <FontAwesomeIcon
-                  icon="chevron-down"
-                  transform={`down-6`}
-                  flip={areAineistoKategoriesExpanded ? "vertical" : undefined}
-                />
-                <FontAwesomeIcon
-                  icon="chevron-up"
-                  transform={`up-6`}
-                  flip={areAineistoKategoriesExpanded ? "vertical" : undefined}
-                />
-              </span>
-            }
-          >
-            {areAineistoKategoriesExpanded ? "Sulje" : "Avaa"} kaikki kategoriat
-          </ButtonFlat>
-          <HassuAccordion
-            expandedState={[expandedEsittelyAineisto, setExpandedEsittelyAineisto]}
-            items={[
-              {
-                title: `Esittelyaineisto (${esittelyaineistot?.length || 0})`,
-                content: (
-                  <>
-                    {projekti?.oid && vuorovaikutus && !!esittelyaineistot?.length ? (
-                      <AineistoTable
-                        aineistoTyyppi={SuunnitteluVaiheAineistoTyyppi.ESITTELYAINEISTOT}
-                        esittelyAineistotFieldArray={esittelyAineistotFieldArray}
-                        suunnitelmaLuonnoksetFieldArray={suunnitelmaLuonnoksetFieldArray}
-                        register={register}
-                        watch={watch}
-                        formState={formState}
-                        vuorovaikutus={vuorovaikutus}
-                      />
-                    ) : (
-                      <p>Ei esittelyaineistoa. Aloita aineistojen tuonti painamalla Tuo Aineistoja -painiketta.</p>
-                    )}
-                  </>
-                ),
-              },
-            ]}
-          />
-          <Button
-            type="button"
-            id="select_esittelyaineistot_button"
-            onClick={() => setEsittelyAineistoDialogOpen(true)}
-          >
-            Tuo Aineistoja
-          </Button>
-          <AineistojenValitseminenDialog
-            open={esittelyAineistoDialogOpen}
-            onClose={() => setEsittelyAineistoDialogOpen(false)}
-            onSubmit={(aineistot) => {
-              const value = esittelyaineistot || [];
-              aineistot.forEach((aineisto) => {
-                if (!find(value, { dokumenttiOid: aineisto.dokumenttiOid })) {
-                  value.push(aineisto);
-                }
-              });
-              updateFormContext();
-              setValue("suunnitteluVaihe.vuorovaikutus.esittelyaineistot", value);
-            }}
-          />
-          <HassuAccordion
-            expandedState={[expandedSuunnitelmaLuonnokset, setExpandedSuunnitelmaLuonnokset]}
-            items={[
-              {
-                title: `Suunnitelmaluonnokset (${suunnitelmaluonnokset?.length || 0})`,
-                content: (
-                  <>
-                    {vuorovaikutus && !!suunnitelmaluonnokset?.length ? (
-                      <AineistoTable
-                        aineistoTyyppi={SuunnitteluVaiheAineistoTyyppi.SUUNNITELMALUONNOKSET}
-                        esittelyAineistotFieldArray={esittelyAineistotFieldArray}
-                        suunnitelmaLuonnoksetFieldArray={suunnitelmaLuonnoksetFieldArray}
-                        register={register}
-                        watch={watch}
-                        formState={formState}
-                        vuorovaikutus={vuorovaikutus}
-                      />
-                    ) : (
-                      <p>Ei esittelyaineistoa. Aloita aineistojen tuonti painamalla Tuo Aineistoja -painiketta.</p>
-                    )}
-                  </>
-                ),
-              },
-            ]}
-          />
-          <Button
-            type="button"
-            id="select_suunnitelmaluonnokset_button"
-            onClick={() => setSuunnitelmaLuonnoksetDialogOpen(true)}
-          >
-            Tuo Aineistoja
-          </Button>
-          <AineistojenValitseminenDialog
-            open={suunnitelmaLuonnoksetDialogOpen}
-            onClose={() => setSuunnitelmaLuonnoksetDialogOpen(false)}
-            onSubmit={(aineistot) => {
-              const value = suunnitelmaluonnokset || [];
-              aineistot.forEach((aineisto) => {
-                if (!find(value, { dokumenttiOid: aineisto.dokumenttiOid })) {
-                  value.push(aineisto);
-                }
-              });
-              updateFormContext();
-              setValue("suunnitteluVaihe.vuorovaikutus.suunnitelmaluonnokset", value);
-            }}
-          />
-        </SectionContent>
-        <SectionContent>
-          <h5 className="vayla-smallest-title">Ennalta kuvattu videoesittely</h5>
-          {videotFields.map((field, index) => (
-            <HassuStack key={field.id} direction={"row"}>
-              <TextInput
-                style={{ width: "100%" }}
-                key={field.id}
-                {...register(`suunnitteluVaihe.vuorovaikutus.videot.${index}.url`)}
-                label="Linkki videoon"
-                error={(formState.errors as any)?.suunnitteluVaihe?.vuorovaikutus?.videot?.[index]?.url}
-              />
-              {!!index && (
-                <div>
-                  <div className="hidden lg:block lg:mt-8">
-                    <IconButton
-                      icon="trash"
-                      onClick={(event) => {
-                        event.preventDefault();
-                        removeVideot(index);
-                      }}
-                    />
-                  </div>
-                  <div className="block lg:hidden">
-                    <Button
-                      onClick={(event) => {
-                        event.preventDefault();
-                        removeVideot(index);
-                      }}
-                      endIcon="trash"
-                    >
-                      Poista
-                    </Button>
-                  </div>
-                </div>
-              )}
-            </HassuStack>
-          ))}
-          <Button
-            id="append_videoesittelyt_button"
-            onClick={(event) => {
-              event.preventDefault();
-              appendVideot({ nimi: "", url: "" });
-            }}
-          >
-            Lisää uusi +
-          </Button>
-        </SectionContent>
-        <SectionContent>
-          <h5 className="vayla-smallest-title">Muut esittelymateriaalit</h5>
-          <p>
-            Muu esittelymateraali on järjestelmän ulkopuolelle julkaistua suunnitelmaan liittyvää materiaalia. Muun
-            esittelymateriaalin lisääminen on vapaaehtoista.{" "}
-          </p>
-          <TextInput
-            style={{ width: "100%" }}
-            label="Linkin kuvaus"
-            {...register(`suunnitteluVaihe.vuorovaikutus.suunnittelumateriaali.nimi`)}
-            error={(formState.errors as any)?.suunnitteluVaihe?.vuorovaikutus?.suunnittelumateriaali?.nimi}
-          />
-          <TextInput
-            style={{ width: "100%" }}
-            label="Linkki muihin esittelyaineistoihin"
-            {...register(`suunnitteluVaihe.vuorovaikutus.suunnittelumateriaali.url`)}
-            error={(formState.errors as any)?.suunnitteluVaihe?.vuorovaikutus?.suunnittelumateriaali?.url}
-          />
-        </SectionContent>
-      </Section>
-    </>
-  );
-}
-
-enum SuunnitteluVaiheAineistoTyyppi {
-  ESITTELYAINEISTOT = "ESITTELYAINEISTOT",
-  SUUNNITELMALUONNOKSET = "SUUNNITELMALUONNOKSET",
-}
-
-type FormAineisto = FieldArrayWithId<
-  VuorovaikutusFormValues,
-  "suunnitteluVaihe.vuorovaikutus.esittelyaineistot",
-  "id"
-> &
-  Pick<Aineisto, "tila" | "tuotu" | "tiedosto">;
-
-interface AineistoTableProps {
-  aineistoTyyppi: SuunnitteluVaiheAineistoTyyppi;
-  esittelyAineistotFieldArray: UseFieldArrayReturn<
-    VuorovaikutusFormValues,
-    "suunnitteluVaihe.vuorovaikutus.esittelyaineistot",
-    "id"
-  >;
-  suunnitelmaLuonnoksetFieldArray: UseFieldArrayReturn<
-    VuorovaikutusFormValues,
-    "suunnitteluVaihe.vuorovaikutus.suunnitelmaluonnokset",
-    "id"
-  >;
-  register: UseFormRegister<VuorovaikutusFormValues>;
-  watch: UseFormWatch<VuorovaikutusFormValues>;
-  vuorovaikutus: Vuorovaikutus;
-  formState: FormState<VuorovaikutusFormValues>;
-}
-
-const AineistoTable = ({
-  aineistoTyyppi,
-  suunnitelmaLuonnoksetFieldArray,
-  esittelyAineistotFieldArray,
-  register,
-  watch,
-  vuorovaikutus,
-  formState,
-}: AineistoTableProps) => {
-  const { append: appendToOtherArray } =
-    aineistoTyyppi === SuunnitteluVaiheAineistoTyyppi.ESITTELYAINEISTOT
-      ? suunnitelmaLuonnoksetFieldArray
-      : esittelyAineistotFieldArray;
-
-  const { fields, remove } =
-    aineistoTyyppi === SuunnitteluVaiheAineistoTyyppi.ESITTELYAINEISTOT
-      ? esittelyAineistotFieldArray
-      : suunnitelmaLuonnoksetFieldArray;
-
-  const fieldArrayName =
-    aineistoTyyppi === SuunnitteluVaiheAineistoTyyppi.ESITTELYAINEISTOT
-      ? "suunnitteluVaihe.vuorovaikutus.esittelyaineistot"
-      : "suunnitteluVaihe.vuorovaikutus.suunnitelmaluonnokset";
-
-  const otherFieldArrayName =
-    aineistoTyyppi === SuunnitteluVaiheAineistoTyyppi.ESITTELYAINEISTOT
-      ? "suunnitteluVaihe.vuorovaikutus.suunnitelmaluonnokset"
-      : "suunnitteluVaihe.vuorovaikutus.esittelyaineistot";
-
-  const enrichedFields = useMemo(
-    () =>
-      fields.map((field) => {
-        const aineistoData = [
-          ...(vuorovaikutus.esittelyaineistot || []),
-          ...(vuorovaikutus.suunnitelmaluonnokset || []),
-        ];
-        const { tila, tuotu, tiedosto } =
-          aineistoData.find(({ dokumenttiOid }) => dokumenttiOid === field.dokumenttiOid) || {};
-
-        return { tila, tuotu, tiedosto, ...field };
-      }),
-    [fields, vuorovaikutus]
-  );
-
-  const otherAineistoWatch = watch(otherFieldArrayName);
-
-  const columns = useMemo<Column<FormAineisto>[]>(
-    () => [
-      {
-        Header: "Aineisto",
-        width: 250,
-        accessor: (aineisto) => {
-          const index = enrichedFields.findIndex((row) => row.dokumenttiOid === aineisto.dokumenttiOid);
-          const errorpath =
-            aineistoTyyppi === SuunnitteluVaiheAineistoTyyppi.ESITTELYAINEISTOT
-              ? "esittelyaineistot"
-              : "suunnitelmaluonnokset";
-          const errorMessage = (formState.errors as any).suunnitteluVaihe?.vuorovaikutus?.[errorpath]?.[index]?.message;
-          return (
-            <>
-              <HassuAineistoNimiExtLink aineistoNimi={aineisto.nimi} tiedostoPolku={aineisto.tiedosto} />
-              {errorMessage && <p className="text-red">{errorMessage}</p>}
-              <input type="hidden" {...register(`${fieldArrayName}.${index}.dokumenttiOid`)} />
-              <input type="hidden" {...register(`${fieldArrayName}.${index}.nimi`)} />
-            </>
-          );
-        },
-      },
-      {
-        Header: "Tuotu",
-        accessor: (aineisto) => (aineisto.tuotu ? formatDateTime(aineisto.tuotu) : undefined),
-      },
-      {
-        Header: "Kategoria",
-        accessor: (aineisto) => {
-          const index = enrichedFields.findIndex((row) => row.dokumenttiOid === aineisto.dokumenttiOid);
-          return (
-            <Select
-              defaultValue={aineistoTyyppi}
-              onChange={(event) => {
-                const tyyppi = event.target.value as SuunnitteluVaiheAineistoTyyppi;
-                if (tyyppi !== aineistoTyyppi) {
-                  if (!find(otherAineistoWatch, { dokumenttiOid: aineisto.dokumenttiOid })) {
-                    appendToOtherArray({ dokumenttiOid: aineisto.dokumenttiOid, nimi: aineisto.nimi });
-                  }
-                  remove(index);
-                }
-              }}
-              options={[
-                { label: "Esittelyaineistot", value: SuunnitteluVaiheAineistoTyyppi.ESITTELYAINEISTOT },
-                { label: "Suunnitelmaluonnokset", value: SuunnitteluVaiheAineistoTyyppi.SUUNNITELMALUONNOKSET },
-              ]}
-            />
-          );
-        },
-      },
-      {
-        Header: "Poista",
-        accessor: (aineisto) => (
-          <IconButton
-            type="button"
-            onClick={() => {
-              const index = enrichedFields.findIndex((row) => row.dokumenttiOid === aineisto.dokumenttiOid);
-              if (index >= 0) {
-                remove(index);
-              }
-            }}
-            icon="trash"
-          />
-        ),
-      },
-      { Header: "id", accessor: "id" },
-      { Header: "dokumenttiOid", accessor: "dokumenttiOid" },
-    ],
-    [
-      aineistoTyyppi,
-      fieldArrayName,
-      enrichedFields,
-      register,
-      remove,
-      appendToOtherArray,
-      otherAineistoWatch,
-      formState,
-    ]
-  );
-  const tableProps = useHassuTable<FormAineisto>({
-    tableOptions: { columns, data: enrichedFields, initialState: { hiddenColumns: ["dokumenttiOid", "id"] } },
-  });
-  return <HassuTable {...tableProps} />;
-};
diff --git a/src/components/projekti/suunnitteluvaihe/LuonnoksetJaAineistot/EiJulkinen.tsx b/src/components/projekti/suunnitteluvaihe/LuonnoksetJaAineistot/EiJulkinen.tsx
new file mode 100644
index 000000000..ecd94b2dc
--- /dev/null
+++ b/src/components/projekti/suunnitteluvaihe/LuonnoksetJaAineistot/EiJulkinen.tsx
@@ -0,0 +1,29 @@
+import SectionContent from "@components/layout/SectionContent";
+import Notification, { NotificationType } from "@components/notification/Notification";
+import { Vuorovaikutus } from "@services/api";
+import MuokkaustilainenLomake from "./MuokkaustilainenLomake";
+
+interface Props {
+  vuorovaikutus: Vuorovaikutus | undefined;
+  updateFormContext: () => void;
+}
+
+export default function EiJulkinenLuonnoksetJaAineistotLomake({ vuorovaikutus, updateFormContext }: Props) {
+  return (
+    <>
+      <SectionContent className="mt-8">
+        <h4 className="vayla-small-title">Suunnitelmaluonnokset ja esittelyaineistot</h4>
+        <p>
+          Esittelyvideo tulee olla ladattuna erilliseen videojulkaisupalveluun (esim. Youtube) ja videon katselulinkki
+          tuodaan sille tarkoitettuun kenttään. Luonnokset ja muut materiaalit tuodaan Projektivelhosta.
+          Suunnitelmaluonnokset ja esittelyaineistot on mahdollista. Suunnitelmaluonnokset ja aineistot julkaistaan
+          palvelun julkisella puolella vuorovaikutuksen julkaisupäivänä.
+        </p>
+        <Notification type={NotificationType.INFO_GRAY}>
+          Huomioithan, että suunnitelmaluonnoksien ja esittelyaineistojen tulee täyttää saavutettavuusvaatimukset.
+        </Notification>
+      </SectionContent>
+      <MuokkaustilainenLomake vuorovaikutus={vuorovaikutus} hidden={false} updateFormContext={updateFormContext} />
+    </>
+  );
+}
diff --git a/src/components/projekti/suunnitteluvaihe/LuonnoksetJaAineistot/Julkinen.tsx b/src/components/projekti/suunnitteluvaihe/LuonnoksetJaAineistot/Julkinen.tsx
new file mode 100644
index 000000000..482641671
--- /dev/null
+++ b/src/components/projekti/suunnitteluvaihe/LuonnoksetJaAineistot/Julkinen.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+import Section from "@components/layout/Section";
+import Button from "@components/button/Button";
+import { Vuorovaikutus } from "@services/api";
+import HassuStack from "@components/layout/HassuStack";
+import { VuorovaikutusFormValues } from "../SuunnitteluvaiheenVuorovaikuttaminen";
+import { useFormContext } from "react-hook-form";
+import Lukutila from "./Lukutila";
+import MuokkaustilainenLomake from "./MuokkaustilainenLomake";
+import Notification, { NotificationType } from "@components/notification/Notification";
+
+interface Props {
+  saveForm: (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>;
+  vuorovaikutus: Vuorovaikutus;
+  updateFormContext: () => void;
+  muokkaustila: boolean;
+  setMuokkaustila: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export default function JulkinenLuonnoksetJaAineistotLomake({
+  saveForm,
+  vuorovaikutus,
+  updateFormContext,
+  muokkaustila,
+  setMuokkaustila,
+}: Props) {
+  const { formState, reset } = useFormContext<VuorovaikutusFormValues>();
+
+  return (
+    <>
+      <Section>
+        {muokkaustila ? (
+          <HassuStack className="mt-12" direction={["column", "column", "row"]} justifyContent="space-between">
+            <h4 style={{ display: "inline" }} className="vayla-small-title">
+              Suunnitelmaluonnokset ja esittelyaineistot
+            </h4>
+            <HassuStack direction={["column", "column", "row"]}>
+              <Button
+                primary
+                type="submit"
+                onClick={(e) => {
+                  e.preventDefault();
+                  saveForm();
+                }}
+              >
+                Päivitä
+              </Button>
+              <Button
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (formState.isDirty) reset();
+                  setMuokkaustila(false);
+                }}
+              >
+                Peruuta
+              </Button>
+            </HassuStack>
+          </HassuStack>
+        ) : (
+          <>
+            <Button className="mb-5" style={{ float: "right" }} type="button" onClick={() => setMuokkaustila(true)}>
+              Muokkaa
+            </Button>
+            <p className="vayla-label mb-5">Suunnitelmaluonnokset ja esittelyaineistot</p>
+          </>
+        )}
+        <p>
+          Esittelyvideo tulee olla ladattuna erilliseen videojulkaisupalveluun (esim. Youtube) ja videon katselulinkki
+          tuodaan sille tarkoitettuun kenttään. Luonnokset ja muut materiaalit tuodaan Projektivelhosta.
+          Suunnitelmaluonnokset ja esittelyaineistot on mahdollista. Suunnitelmaluonnokset ja aineistot julkaistaan
+          palvelun julkisella puolella vuorovaikutuksen julkaisupäivänä.
+        </p>
+        <Notification type={NotificationType.INFO_GRAY}>
+          Huomioithan, että suunnitelmaluonnoksien ja esittelyaineistojen tulee täyttää saavutettavuusvaatimukset.
+        </Notification>
+      </Section>
+      <Section>
+        <MuokkaustilainenLomake
+          hidden={!muokkaustila}
+          vuorovaikutus={vuorovaikutus}
+          updateFormContext={updateFormContext}
+        />
+        {!muokkaustila && <Lukutila vuorovaikutus={vuorovaikutus} />}
+      </Section>
+    </>
+  );
+}
diff --git a/src/components/projekti/suunnitteluvaihe/LuonnoksetJaAineistot/Lukutila.tsx b/src/components/projekti/suunnitteluvaihe/LuonnoksetJaAineistot/Lukutila.tsx
new file mode 100644
index 000000000..296839e1b
--- /dev/null
+++ b/src/components/projekti/suunnitteluvaihe/LuonnoksetJaAineistot/Lukutila.tsx
@@ -0,0 +1,67 @@
+import SectionContent from "@components/layout/SectionContent";
+import Section from "@components/layout/Section";
+import { Link } from "@mui/material";
+import { Vuorovaikutus } from "@services/api";
+
+interface Props {
+  vuorovaikutus: Vuorovaikutus | undefined;
+}
+
+export default function LukutilaLuonnoksetJaAineistot({ vuorovaikutus }: Props) {
+  return (
+    <Section>
+      {!!vuorovaikutus?.videot?.length && (
+        <SectionContent>
+          <div>Videoesittely</div>
+          {vuorovaikutus.videot.map((video) => (
+            <div key={video.url} style={{ marginTop: "0.4rem" }}>
+              <Link underline="none" href={video.url}>
+                {video.url}
+              </Link>
+            </div>
+          ))}
+        </SectionContent>
+      )}
+      {!vuorovaikutus?.suunnitelmaluonnokset?.length && !vuorovaikutus?.esittelyaineistot?.length && (
+        <SectionContent>
+          <p>Lisää suunnitelmalle luonnokset ja esittelyaineistot Muokkaa-painikkeesta.</p>
+        </SectionContent>
+      )}
+      {!!vuorovaikutus?.esittelyaineistot?.length && (
+        <SectionContent>
+          <div>Esittelyaineistot</div>
+          {vuorovaikutus.esittelyaineistot.map((aineisto) => (
+            <div key={aineisto.dokumenttiOid} style={{ marginTop: "0.4rem" }}>
+              <Link underline="none" href={aineisto.tiedosto || "#"}>
+                {aineisto.nimi}
+              </Link>
+            </div>
+          ))}
+        </SectionContent>
+      )}
+      {!!vuorovaikutus?.suunnitelmaluonnokset?.length && (
+        <SectionContent>
+          <div>Suunnitelmaluonnokset</div>
+          {vuorovaikutus.suunnitelmaluonnokset.map((aineisto) => (
+            <div key={aineisto.dokumenttiOid} style={{ marginTop: "0.4rem" }}>
+              <Link underline="none" href={aineisto.tiedosto || "#"}>
+                {aineisto.nimi}
+              </Link>
+            </div>
+          ))}
+        </SectionContent>
+      )}
+      {vuorovaikutus?.suunnittelumateriaali?.nimi && (
+        <SectionContent>
+          <div>Muu esittelymateriaali</div>
+          <div style={{ marginTop: "0.4rem" }}>{vuorovaikutus.suunnittelumateriaali.nimi}</div>
+          <div style={{ marginTop: "0.4rem" }}>
+            <Link underline="none" href={vuorovaikutus.suunnittelumateriaali.url}>
+              {vuorovaikutus.suunnittelumateriaali.url}
+            </Link>
+          </div>
+        </SectionContent>
+      )}
+    </Section>
+  );
+}
diff --git a/src/components/projekti/suunnitteluvaihe/LuonnoksetJaAineistot/LuonnoksetJaAineistot.tsx b/src/components/projekti/suunnitteluvaihe/LuonnoksetJaAineistot/LuonnoksetJaAineistot.tsx
new file mode 100644
index 000000000..d2f6e7c30
--- /dev/null
+++ b/src/components/projekti/suunnitteluvaihe/LuonnoksetJaAineistot/LuonnoksetJaAineistot.tsx
@@ -0,0 +1,35 @@
+import { Vuorovaikutus } from "@services/api";
+import Julkinen from "./Julkinen";
+import EiJulkinen from "./EiJulkinen";
+
+interface Props {
+  vuorovaikutus: Vuorovaikutus | undefined;
+  muokkaustila: boolean;
+  setMuokkaustila: React.Dispatch<React.SetStateAction<boolean>>;
+  saveForm: (e?: React.BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>;
+  updateFormContext: () => void;
+}
+
+export default function LuonnoksetJaAineistot({
+  saveForm,
+  vuorovaikutus,
+  updateFormContext,
+  muokkaustila,
+  setMuokkaustila,
+}: Props) {
+  const julkinen = vuorovaikutus?.julkinen;
+
+  if (julkinen) {
+    return (
+      <Julkinen
+        muokkaustila={muokkaustila}
+        setMuokkaustila={setMuokkaustila}
+        saveForm={saveForm}
+        vuorovaikutus={vuorovaikutus}
+        updateFormContext={updateFormContext}
+      />
+    );
+  }
+
+  return <EiJulkinen vuorovaikutus={vuorovaikutus} updateFormContext={updateFormContext} />;
+}
diff --git a/src/components/projekti/suunnitteluvaihe/LuonnoksetJaAineistot/MuokkaustilainenLomake.tsx b/src/components/projekti/suunnitteluvaihe/LuonnoksetJaAineistot/MuokkaustilainenLomake.tsx
new file mode 100644
index 000000000..1e3f0f973
--- /dev/null
+++ b/src/components/projekti/suunnitteluvaihe/LuonnoksetJaAineistot/MuokkaustilainenLomake.tsx
@@ -0,0 +1,425 @@
+import SectionContent from "@components/layout/SectionContent";
+import { Key, useMemo, useState } from "react";
+import Button from "@components/button/Button";
+import ButtonFlat from "@components/button/ButtonFlat";
+import TextInput from "@components/form/TextInput";
+import AineistojenValitseminenDialog from "../../common/AineistojenValitseminenDialog";
+import IconButton from "@components/button/IconButton";
+import HassuStack from "@components/layout/HassuStack";
+import {
+  FieldArrayWithId,
+  FormState,
+  useFieldArray,
+  UseFieldArrayReturn,
+  useFormContext,
+  UseFormRegister,
+  UseFormWatch,
+} from "react-hook-form";
+import { VuorovaikutusFormValues } from "../SuunnitteluvaiheenVuorovaikuttaminen";
+import HassuAineistoNimiExtLink from "../../HassuAineistoNimiExtLink";
+import { useProjekti } from "src/hooks/useProjekti";
+import { Aineisto, Vuorovaikutus } from "@services/api";
+import HassuTable from "@components/HassuTable";
+import { useHassuTable } from "src/hooks/useHassuTable";
+import { Column } from "react-table";
+import HassuAccordion from "@components/HassuAccordion";
+import Select from "@components/form/Select";
+import { formatDateTime } from "src/util/dateUtils";
+import { find } from "lodash";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+interface Props {
+  vuorovaikutus: Vuorovaikutus | undefined;
+  hidden: boolean;
+  updateFormContext: () => void;
+}
+
+export default function MuokkaustilainenLomake({ vuorovaikutus, hidden, updateFormContext }: Props) {
+  const { data: projekti } = useProjekti();
+  const [expandedEsittelyAineisto, setExpandedEsittelyAineisto] = useState<Key[]>([]);
+  const [expandedSuunnitelmaLuonnokset, setExpandedSuunnitelmaLuonnokset] = useState<Key[]>([]);
+  const [esittelyAineistoDialogOpen, setEsittelyAineistoDialogOpen] = useState(false);
+  const [suunnitelmaLuonnoksetDialogOpen, setSuunnitelmaLuonnoksetDialogOpen] = useState(false);
+
+  const { control, register, formState, watch, setValue } = useFormContext<VuorovaikutusFormValues>();
+
+  const esittelyAineistotFieldArray = useFieldArray({
+    control,
+    name: "suunnitteluVaihe.vuorovaikutus.esittelyaineistot",
+  });
+
+  const suunnitelmaLuonnoksetFieldArray = useFieldArray({
+    control,
+    name: "suunnitteluVaihe.vuorovaikutus.suunnitelmaluonnokset",
+  });
+
+  const {
+    fields: videotFields,
+    append: appendVideot,
+    remove: removeVideot,
+  } = useFieldArray({
+    control,
+    name: "suunnitteluVaihe.vuorovaikutus.videot",
+  });
+
+  const esittelyaineistot = watch("suunnitteluVaihe.vuorovaikutus.esittelyaineistot");
+  const suunnitelmaluonnokset = watch("suunnitteluVaihe.vuorovaikutus.suunnitelmaluonnokset");
+
+  const areAineistoKategoriesExpanded = !!expandedEsittelyAineisto.length || !!expandedSuunnitelmaLuonnokset.length;
+
+  return (
+    <SectionContent className={hidden ? "hidden" : ""}>
+      <SectionContent className="mt-8">
+        <h5 className="vayla-smallest-title">Suunnitelmaluonnokset ja esittelyaineistot</h5>
+        <p>Aineistoille tulee valita kategoria / otsikko, jonka alla ne esitetään palvelun julkisella puolella.</p>
+        <p>
+          Aineistojen järjestys kunkin otsikon alla määräytyy listan järjestyksen mukaan. Voit vaihtaa järjestystä
+          tarttumalla hiirellä raahaus-ikonista ja siirtämällä rivin paikkaa.
+        </p>
+        <ButtonFlat
+          type="button"
+          onClick={() => {
+            if (areAineistoKategoriesExpanded) {
+              setExpandedEsittelyAineisto([]);
+              setExpandedSuunnitelmaLuonnokset([]);
+            } else {
+              setExpandedEsittelyAineisto([0]);
+              setExpandedSuunnitelmaLuonnokset([0]);
+            }
+          }}
+          iconComponent={
+            <span className="fa-layers">
+              <FontAwesomeIcon
+                icon="chevron-down"
+                transform={`down-6`}
+                flip={areAineistoKategoriesExpanded ? "vertical" : undefined}
+              />
+              <FontAwesomeIcon
+                icon="chevron-up"
+                transform={`up-6`}
+                flip={areAineistoKategoriesExpanded ? "vertical" : undefined}
+              />
+            </span>
+          }
+        >
+          {areAineistoKategoriesExpanded ? "Sulje" : "Avaa"} kaikki kategoriat
+        </ButtonFlat>
+        <HassuAccordion
+          expandedState={[expandedEsittelyAineisto, setExpandedEsittelyAineisto]}
+          items={[
+            {
+              title: `Esittelyaineisto (${esittelyaineistot?.length || 0})`,
+              content: (
+                <>
+                  {projekti?.oid && vuorovaikutus && !!esittelyaineistot?.length ? (
+                    <AineistoTable
+                      aineistoTyyppi={SuunnitteluVaiheAineistoTyyppi.ESITTELYAINEISTOT}
+                      esittelyAineistotFieldArray={esittelyAineistotFieldArray}
+                      suunnitelmaLuonnoksetFieldArray={suunnitelmaLuonnoksetFieldArray}
+                      register={register}
+                      watch={watch}
+                      formState={formState}
+                      vuorovaikutus={vuorovaikutus}
+                    />
+                  ) : (
+                    <p>Ei esittelyaineistoa. Aloita aineistojen tuonti painamalla Tuo Aineistoja -painiketta.</p>
+                  )}
+                </>
+              ),
+            },
+          ]}
+        />
+        <Button type="button" id="select_esittelyaineistot_button" onClick={() => setEsittelyAineistoDialogOpen(true)}>
+          Tuo Aineistoja
+        </Button>
+        <HassuAccordion
+          expandedState={[expandedSuunnitelmaLuonnokset, setExpandedSuunnitelmaLuonnokset]}
+          items={[
+            {
+              title: `Suunnitelmaluonnokset (${suunnitelmaluonnokset?.length || 0})`,
+              content: (
+                <>
+                  {vuorovaikutus && !!suunnitelmaluonnokset?.length ? (
+                    <AineistoTable
+                      aineistoTyyppi={SuunnitteluVaiheAineistoTyyppi.SUUNNITELMALUONNOKSET}
+                      esittelyAineistotFieldArray={esittelyAineistotFieldArray}
+                      suunnitelmaLuonnoksetFieldArray={suunnitelmaLuonnoksetFieldArray}
+                      register={register}
+                      watch={watch}
+                      formState={formState}
+                      vuorovaikutus={vuorovaikutus}
+                    />
+                  ) : (
+                    <p>Ei esittelyaineistoa. Aloita aineistojen tuonti painamalla Tuo Aineistoja -painiketta.</p>
+                  )}
+                </>
+              ),
+            },
+          ]}
+        />
+        <Button
+          type="button"
+          id="select_suunnitelmaluonnokset_button"
+          onClick={() => setSuunnitelmaLuonnoksetDialogOpen(true)}
+        >
+          Tuo Aineistoja
+        </Button>
+      </SectionContent>
+      <SectionContent className="mt-8">
+        <h5 className="vayla-smallest-title">Ennalta kuvattu videoesittely</h5>
+        {videotFields.map((field, index) => (
+          <HassuStack key={field.id} direction={"row"}>
+            <TextInput
+              style={{ width: "100%" }}
+              key={field.id}
+              {...register(`suunnitteluVaihe.vuorovaikutus.videot.${index}.url`)}
+              label="Linkki videoon"
+              error={(formState.errors as any)?.suunnitteluVaihe?.vuorovaikutus?.videot?.[index]?.url}
+            />
+            {!!index && (
+              <div>
+                <div className="hidden lg:block lg:mt-8">
+                  <IconButton
+                    icon="trash"
+                    onClick={(event) => {
+                      event.preventDefault();
+                      removeVideot(index);
+                    }}
+                  />
+                </div>
+                <div className="block lg:hidden">
+                  <Button
+                    onClick={(event) => {
+                      event.preventDefault();
+                      removeVideot(index);
+                    }}
+                    endIcon="trash"
+                  >
+                    Poista
+                  </Button>
+                </div>
+              </div>
+            )}
+          </HassuStack>
+        ))}
+        <Button
+          id="append_videoesittelyt_button"
+          onClick={(event) => {
+            event.preventDefault();
+            appendVideot({ nimi: "", url: "" });
+          }}
+        >
+          Lisää uusi +
+        </Button>
+      </SectionContent>
+      <SectionContent className="mt-8">
+        <h5 className="vayla-smallest-title">Muut esittelymateriaalit</h5>
+        <p>
+          Muu esittelymateraali on järjestelmän ulkopuolelle julkaistua suunnitelmaan liittyvää materiaalia. Muun
+          esittelymateriaalin lisääminen on vapaaehtoista.{" "}
+        </p>
+        <TextInput
+          style={{ width: "100%" }}
+          label="Linkin kuvaus"
+          {...register(`suunnitteluVaihe.vuorovaikutus.suunnittelumateriaali.nimi`)}
+          error={(formState.errors as any)?.suunnitteluVaihe?.vuorovaikutus?.suunnittelumateriaali?.nimi}
+        />
+        <TextInput
+          style={{ width: "100%" }}
+          label="Linkki muihin esittelyaineistoihin"
+          {...register(`suunnitteluVaihe.vuorovaikutus.suunnittelumateriaali.url`)}
+          error={(formState.errors as any)?.suunnitteluVaihe?.vuorovaikutus?.suunnittelumateriaali?.url}
+        />
+      </SectionContent>
+      <AineistojenValitseminenDialog
+        open={esittelyAineistoDialogOpen}
+        onClose={() => setEsittelyAineistoDialogOpen(false)}
+        onSubmit={(aineistot) => {
+          const value = esittelyaineistot || [];
+          aineistot.forEach((aineisto) => {
+            if (!find(value, { dokumenttiOid: aineisto.dokumenttiOid })) {
+              value.push(aineisto);
+            }
+          });
+          updateFormContext();
+          setValue("suunnitteluVaihe.vuorovaikutus.esittelyaineistot", value);
+        }}
+      />
+      <AineistojenValitseminenDialog
+        open={suunnitelmaLuonnoksetDialogOpen}
+        onClose={() => setSuunnitelmaLuonnoksetDialogOpen(false)}
+        onSubmit={(aineistot) => {
+          const value = suunnitelmaluonnokset || [];
+          aineistot.forEach((aineisto) => {
+            if (!find(value, { dokumenttiOid: aineisto.dokumenttiOid })) {
+              value.push(aineisto);
+            }
+          });
+          updateFormContext();
+          setValue("suunnitteluVaihe.vuorovaikutus.suunnitelmaluonnokset", value);
+        }}
+      />
+    </SectionContent>
+  );
+}
+
+enum SuunnitteluVaiheAineistoTyyppi {
+  ESITTELYAINEISTOT = "ESITTELYAINEISTOT",
+  SUUNNITELMALUONNOKSET = "SUUNNITELMALUONNOKSET",
+}
+
+type FormAineisto = FieldArrayWithId<
+  VuorovaikutusFormValues,
+  "suunnitteluVaihe.vuorovaikutus.esittelyaineistot",
+  "id"
+> &
+  Pick<Aineisto, "tila" | "tuotu" | "tiedosto">;
+
+interface AineistoTableProps {
+  aineistoTyyppi: SuunnitteluVaiheAineistoTyyppi;
+  esittelyAineistotFieldArray: UseFieldArrayReturn<
+    VuorovaikutusFormValues,
+    "suunnitteluVaihe.vuorovaikutus.esittelyaineistot",
+    "id"
+  >;
+  suunnitelmaLuonnoksetFieldArray: UseFieldArrayReturn<
+    VuorovaikutusFormValues,
+    "suunnitteluVaihe.vuorovaikutus.suunnitelmaluonnokset",
+    "id"
+  >;
+  register: UseFormRegister<VuorovaikutusFormValues>;
+  watch: UseFormWatch<VuorovaikutusFormValues>;
+  vuorovaikutus: Vuorovaikutus;
+  formState: FormState<VuorovaikutusFormValues>;
+}
+
+const AineistoTable = ({
+  aineistoTyyppi,
+  suunnitelmaLuonnoksetFieldArray,
+  esittelyAineistotFieldArray,
+  register,
+  watch,
+  vuorovaikutus,
+  formState,
+}: AineistoTableProps) => {
+  const { append: appendToOtherArray } =
+    aineistoTyyppi === SuunnitteluVaiheAineistoTyyppi.ESITTELYAINEISTOT
+      ? suunnitelmaLuonnoksetFieldArray
+      : esittelyAineistotFieldArray;
+
+  const { fields, remove } =
+    aineistoTyyppi === SuunnitteluVaiheAineistoTyyppi.ESITTELYAINEISTOT
+      ? esittelyAineistotFieldArray
+      : suunnitelmaLuonnoksetFieldArray;
+
+  const fieldArrayName =
+    aineistoTyyppi === SuunnitteluVaiheAineistoTyyppi.ESITTELYAINEISTOT
+      ? "suunnitteluVaihe.vuorovaikutus.esittelyaineistot"
+      : "suunnitteluVaihe.vuorovaikutus.suunnitelmaluonnokset";
+
+  const otherFieldArrayName =
+    aineistoTyyppi === SuunnitteluVaiheAineistoTyyppi.ESITTELYAINEISTOT
+      ? "suunnitteluVaihe.vuorovaikutus.suunnitelmaluonnokset"
+      : "suunnitteluVaihe.vuorovaikutus.esittelyaineistot";
+
+  const enrichedFields = useMemo(
+    () =>
+      fields.map((field) => {
+        const aineistoData = [
+          ...(vuorovaikutus.esittelyaineistot || []),
+          ...(vuorovaikutus.suunnitelmaluonnokset || []),
+        ];
+        const { tila, tuotu, tiedosto } =
+          aineistoData.find(({ dokumenttiOid }) => dokumenttiOid === field.dokumenttiOid) || {};
+
+        return { tila, tuotu, tiedosto, ...field };
+      }),
+    [fields, vuorovaikutus]
+  );
+
+  const otherAineistoWatch = watch(otherFieldArrayName);
+
+  const columns = useMemo<Column<FormAineisto>[]>(
+    () => [
+      {
+        Header: "Aineisto",
+        width: 250,
+        accessor: (aineisto) => {
+          const index = enrichedFields.findIndex((row) => row.dokumenttiOid === aineisto.dokumenttiOid);
+          const errorpath =
+            aineistoTyyppi === SuunnitteluVaiheAineistoTyyppi.ESITTELYAINEISTOT
+              ? "esittelyaineistot"
+              : "suunnitelmaluonnokset";
+          const errorMessage = (formState.errors as any).suunnitteluVaihe?.vuorovaikutus?.[errorpath]?.[index]?.message;
+          return (
+            <>
+              <HassuAineistoNimiExtLink aineistoNimi={aineisto.nimi} tiedostoPolku={aineisto.tiedosto} />
+              {errorMessage && <p className="text-red">{errorMessage}</p>}
+              <input type="hidden" {...register(`${fieldArrayName}.${index}.dokumenttiOid`)} />
+              <input type="hidden" {...register(`${fieldArrayName}.${index}.nimi`)} />
+            </>
+          );
+        },
+      },
+      {
+        Header: "Tuotu",
+        accessor: (aineisto) => (aineisto.tuotu ? formatDateTime(aineisto.tuotu) : undefined),
+      },
+      {
+        Header: "Kategoria",
+        accessor: (aineisto) => {
+          const index = enrichedFields.findIndex((row) => row.dokumenttiOid === aineisto.dokumenttiOid);
+          return (
+            <Select
+              defaultValue={aineistoTyyppi}
+              onChange={(event) => {
+                const tyyppi = event.target.value as SuunnitteluVaiheAineistoTyyppi;
+                if (tyyppi !== aineistoTyyppi) {
+                  if (!find(otherAineistoWatch, { dokumenttiOid: aineisto.dokumenttiOid })) {
+                    appendToOtherArray({ dokumenttiOid: aineisto.dokumenttiOid, nimi: aineisto.nimi });
+                  }
+                  remove(index);
+                }
+              }}
+              options={[
+                { label: "Esittelyaineistot", value: SuunnitteluVaiheAineistoTyyppi.ESITTELYAINEISTOT },
+                { label: "Suunnitelmaluonnokset", value: SuunnitteluVaiheAineistoTyyppi.SUUNNITELMALUONNOKSET },
+              ]}
+            />
+          );
+        },
+      },
+      {
+        Header: "Poista",
+        accessor: (aineisto) => (
+          <IconButton
+            type="button"
+            onClick={() => {
+              const index = enrichedFields.findIndex((row) => row.dokumenttiOid === aineisto.dokumenttiOid);
+              if (index >= 0) {
+                remove(index);
+              }
+            }}
+            icon="trash"
+          />
+        ),
+      },
+      { Header: "id", accessor: "id" },
+      { Header: "dokumenttiOid", accessor: "dokumenttiOid" },
+    ],
+    [
+      aineistoTyyppi,
+      fieldArrayName,
+      enrichedFields,
+      register,
+      remove,
+      appendToOtherArray,
+      otherAineistoWatch,
+      formState,
+    ]
+  );
+  const tableProps = useHassuTable<FormAineisto>({
+    tableOptions: { columns, data: enrichedFields, initialState: { hiddenColumns: ["dokumenttiOid", "id"] } },
+  });
+  return <HassuTable {...tableProps} />;
+};
diff --git a/src/components/projekti/suunnitteluvaihe/SuunnitteluvaiheenVuorovaikuttaminen.tsx b/src/components/projekti/suunnitteluvaihe/SuunnitteluvaiheenVuorovaikuttaminen.tsx
index 522a61d9b..6f843a519 100644
--- a/src/components/projekti/suunnitteluvaihe/SuunnitteluvaiheenVuorovaikuttaminen.tsx
+++ b/src/components/projekti/suunnitteluvaihe/SuunnitteluvaiheenVuorovaikuttaminen.tsx
@@ -20,7 +20,7 @@ import HassuStack from "@components/layout/HassuStack";
 import { Stack } from "@mui/material";
 import HyvaksymisDialogi from "./HyvaksymisDialogi";
 import EsitettavatYhteystiedot from "./EsitettavatYhteystiedot";
-import LuonnoksetJaAineistot from "./LuonnoksetJaAineistot";
+import LuonnoksetJaAineistot from "./LuonnoksetJaAineistot/LuonnoksetJaAineistot";
 import IlmoituksenVastaanottajat from "./IlmoituksenVastaanottajat";
 import { removeTypeName } from "src/util/removeTypeName";
 import defaultVastaanottajat from "src/util/defaultVastaanottajat";
@@ -343,13 +343,15 @@ export default function SuunnitteluvaiheenVuorovaikuttaminen({
         </form>
       </FormProvider>
       <PdfPreviewForm ref={pdfFormRef} />
-      <HyvaksymisDialogi
-        ilmoituksenVastaanottajat={ilmoituksenVastaanottajat}
-        dialogiOnAuki={openHyvaksy}
-        onClose={handleClickCloseHyvaksy}
-        tallenna={saveForm}
-        julkinen={!!vuorovaikutus?.julkinen}
-      />
+      {openHyvaksy && (
+        <HyvaksymisDialogi
+          ilmoituksenVastaanottajat={ilmoituksenVastaanottajat}
+          dialogiOnAuki={openHyvaksy}
+          onClose={handleClickCloseHyvaksy}
+          tallenna={saveForm}
+          julkinen={!!vuorovaikutus?.julkinen}
+        />
+      )}
       <HassuSpinner open={isFormSubmitting} />
     </>
   );
diff --git a/src/components/projekti/suunnitteluvaihe/VuorovaikutusMahdollisuudet.tsx b/src/components/projekti/suunnitteluvaihe/VuorovaikutusMahdollisuudet.tsx
index 124b36649..0051e80cb 100644
--- a/src/components/projekti/suunnitteluvaihe/VuorovaikutusMahdollisuudet.tsx
+++ b/src/components/projekti/suunnitteluvaihe/VuorovaikutusMahdollisuudet.tsx
@@ -72,7 +72,7 @@ export default function SuunnitteluvaiheenVuorovaikuttaminen({
             >
               Muokkaa
             </Button>
-            <div className="pt-10">
+            <div className="pt-6">
               <p className="vayla-label">Vuorovaikutusmahdollisuudet palautteiden ja kysymyksien lisäksi</p>
               <p>
                 Verkossa jaettavien tilaisuuksien liittymislinkit julkaistaan palvelun julkisella puolella kaksi (2)