diff --git a/frontend/.storybook/mockData.ts b/frontend/.storybook/mockData.ts
index 3fcae104..6da5d5eb 100644
--- a/frontend/.storybook/mockData.ts
+++ b/frontend/.storybook/mockData.ts
@@ -1,17 +1,15 @@
-import { auditLogFactory } from "../src/fixtures/auditLog";
-import { coReviewsFactory } from "../src/fixtures/coReview";
 import {
   FIXTURE_DESTRUCTION_LIST,
+  FIXTURE_SELECTIELIJSTKLASSE_CHOICES,
+  auditLogFactory,
+  coReviewsFactory,
   destructionListAssigneesFactory,
   destructionListFactory,
-} from "../src/fixtures/destructionList";
-import { FIXTURE_SELECTIELIJSTKLASSE_CHOICES } from "../src/fixtures/selectieLijstKlasseChoices";
-import {
   recordManagerFactory,
   userFactory,
   usersFactory,
-} from "../src/fixtures/user";
-import { zaaktypeChoicesFactory } from "../src/fixtures/zaaktypeChoices";
+  zaaktypeChoicesFactory,
+} from "../src/fixtures";
 
 export const MOCKS = {
   // READS
diff --git a/frontend/.storybook/playFunctions.ts b/frontend/.storybook/playFunctions.ts
index 1bde8713..9103c466 100644
--- a/frontend/.storybook/playFunctions.ts
+++ b/frontend/.storybook/playFunctions.ts
@@ -218,8 +218,9 @@ export const fillForm: PlayFunction<ReactRenderer> = async (context) => {
   const canvas = within(context.canvasElement);
 
   const {
-    form = (await canvas.queryByRole("form")) ||
-      (await canvas.findByRole("dialog")), // Fixme
+    form = await canvas
+      .findByRole("form")
+      .catch(async () => await canvas.findByRole("dialog")), // FIXME
     formValues = {},
     submitForm = true,
   } = context.parameters.fillForm as FillFormParameters;
@@ -251,6 +252,7 @@ export const fillForm: PlayFunction<ReactRenderer> = async (context) => {
           await userEvent.click(option, { delay: 100 });
         } else {
           const input = field as HTMLInputElement;
+          await userEvent.clear(input);
           await userEvent.type(input, value, { delay: 10, skipClick: false });
         }
     }
diff --git a/frontend/src/fixtures/index.ts b/frontend/src/fixtures/index.ts
new file mode 100644
index 00000000..6aee30d0
--- /dev/null
+++ b/frontend/src/fixtures/index.ts
@@ -0,0 +1,17 @@
+export * from "./auditLog";
+export * from "./coReview";
+export * from "./destructionList";
+export * from "./destructionListItem";
+export * from "./factory";
+export * from "./informatieObjectTypeChoices";
+export * from "./paginatedZaken";
+export * from "./response";
+export * from "./resultaatTypeChoices";
+export * from "./review";
+export * from "./reviewItem";
+export * from "./reviewers";
+export * from "./selectieLijstKlasseChoices";
+export * from "./statusTypeChoices";
+export * from "./user";
+export * from "./zaak";
+export * from "./zaaktypeChoices";
diff --git a/frontend/src/fixtures/informatieObjectTypeChoices.ts b/frontend/src/fixtures/informatieObjectTypeChoices.ts
new file mode 100644
index 00000000..65c40c7a
--- /dev/null
+++ b/frontend/src/fixtures/informatieObjectTypeChoices.ts
@@ -0,0 +1,64 @@
+import { Option } from "@maykin-ui/admin-ui";
+
+import { createArrayFactory, createObjectFactory } from "./factory";
+
+export const FIXTURE_INFORMATIE_OBJECTTYPE_CHOICES = [
+  {
+    label: "Informatie object type 1",
+    value:
+      "http://zaken.nl/catalogi/api/v1/informatieobjecttypen/b0b28783-052d-414a-867d-81cf52725506",
+  },
+  {
+    label: "Informatie object type 2",
+    value:
+      "http://zaken.nl/catalogi/api/v1/informatieobjecttypen/3007e984-c529-4a07-b32e-555b4c882ce5",
+  },
+  {
+    label: "Informatie object type 3",
+    value:
+      "http://zaken.nl/catalogi/api/v1/informatieobjecttypen/b25201a6-2d1e-42ca-bff6-417ce5b4cb4a",
+  },
+  {
+    label: "Informatie object type 4",
+    value:
+      "http://zaken.nl/catalogi/api/v1/informatieobjecttypen/4ff5a190-8dc8-4ee7-b018-92ae90f564bf",
+  },
+  {
+    label: "Informatie object type 5",
+    value:
+      "http://zaken.nl/catalogi/api/v1/informatieobjecttypen/d2dc7b42-a3d6-42b8-90c5-d54342c02357",
+  },
+  {
+    label: "Informatie object type 6",
+    value:
+      "http://zaken.nl/catalogi/api/v1/informatieobjecttypen/c91c1e80-78e9-417a-b828-4f5dbcfd12a7",
+  },
+  {
+    label: "Informatie object type 7",
+    value:
+      "http://zaken.nl/catalogi/api/v1/informatieobjecttypen/5cff5507-bf01-4d02-9a60-292b254974f6",
+  },
+  {
+    label: "Informatie object type 8",
+    value:
+      "http://zaken.nl/catalogi/api/v1/informatieobjecttypen/4616eb79-112f-4575-bd3a-2faa5fef31ab",
+  },
+  {
+    label: "Informatie object type 9",
+    value:
+      "http://zaken.nl/catalogi/api/v1/informatieobjecttypen/bece20a5-8e01-4bc5-9ba0-7c853cff46a0",
+  },
+  {
+    label: "Informatie object type 10",
+    value:
+      "http://zaken.nl/catalogi/api/v1/informatieobjecttypen/09428c24-12e5-4c3a-a75c-e9e0d448a93b",
+  },
+];
+
+export const informatieObjectTypeChoiceFactory = createObjectFactory<
+  Option<string, string>
+>(FIXTURE_INFORMATIE_OBJECTTYPE_CHOICES[0]);
+
+export const informatieObjectTypeChoicesFactory = createArrayFactory<
+  Option<string, string>
+>(FIXTURE_INFORMATIE_OBJECTTYPE_CHOICES);
diff --git a/frontend/src/fixtures/resultaatTypeChoices.ts b/frontend/src/fixtures/resultaatTypeChoices.ts
new file mode 100644
index 00000000..0136b069
--- /dev/null
+++ b/frontend/src/fixtures/resultaatTypeChoices.ts
@@ -0,0 +1,64 @@
+import { Option } from "@maykin-ui/admin-ui";
+
+import { createArrayFactory, createObjectFactory } from "./factory";
+
+export const FIXTURE_RESULTAATTYPE_CHOICES = [
+  {
+    label: "resultaattype 1",
+    value:
+      "http://zaken.nl/catalogi/api/v1/resultaattypen/73c8a575-c75c-4c97-ba1f-42c3180ced04",
+  },
+  {
+    label: "resultaattype 2",
+    value:
+      "http://zaken.nl/catalogi/api/v1/resultaattypen/2af00ef7-d865-4166-9efc-19ab95fed618",
+  },
+  {
+    label: "resultaattype 3",
+    value:
+      "http://zaken.nl/catalogi/api/v1/resultaattypen/6436c0b9-156a-4e71-8aab-0e03cca85cc6",
+  },
+  {
+    label: "resultaattype 4",
+    value:
+      "http://zaken.nl/catalogi/api/v1/resultaattypen/ecf89355-866d-4d26-983d-48b9d3883441",
+  },
+  {
+    label: "resultaattype 5",
+    value:
+      "http://zaken.nl/catalogi/api/v1/resultaattypen/95ffea1c-0e11-4484-9352-cc60bf8c0ae1",
+  },
+  {
+    label: "resultaattype 6",
+    value:
+      "http://zaken.nl/catalogi/api/v1/resultaattypen/ee3f3076-c818-4176-ba5f-8e1a02cd5eaf",
+  },
+  {
+    label: "resultaattype 7",
+    value:
+      "http://zaken.nl/catalogi/api/v1/resultaattypen/36367e96-bfb0-4765-a4ef-735da326a9fc",
+  },
+  {
+    label: "resultaattype 8",
+    value:
+      "http://zaken.nl/catalogi/api/v1/resultaattypen/1a810166-a7cd-421d-b3b8-52e59d6b5957",
+  },
+  {
+    label: "resultaattype 9",
+    value:
+      "http://zaken.nl/catalogi/api/v1/resultaattypen/1ac42262-dbb8-49bd-a059-3e54752bdb74",
+  },
+  {
+    label: "resultaattype 10",
+    value:
+      "http://zaken.nl/catalogi/api/v1/resultaattypen/4d453f16-04e7-4832-9e90-e59fda7e198d",
+  },
+];
+
+export const resultaatTypeChoiceFactory = createObjectFactory<
+  Option<string, string>
+>(FIXTURE_RESULTAATTYPE_CHOICES[0]);
+
+export const resultaatTypeChoicesFactory = createArrayFactory<
+  Option<string, string>
+>(FIXTURE_RESULTAATTYPE_CHOICES);
diff --git a/frontend/src/fixtures/statusTypeChoices.ts b/frontend/src/fixtures/statusTypeChoices.ts
new file mode 100644
index 00000000..64db54df
--- /dev/null
+++ b/frontend/src/fixtures/statusTypeChoices.ts
@@ -0,0 +1,64 @@
+import { Option } from "@maykin-ui/admin-ui";
+
+import { createArrayFactory, createObjectFactory } from "./factory";
+
+export const FIXTURE_STATUSTYPE_CHOICES = [
+  {
+    label: "Statustype 1",
+    value:
+      "http://zaken.nl/catalogi/api/v1/statustypen/feedf256-ef74-4d5f-8fc9-6891f58a0d1e",
+  },
+  {
+    label: "Statustype 2",
+    value:
+      "http://zaken.nl/catalogi/api/v1/statustypen/0b016f1a-e10a-4dad-9090-c06bac6ef7e7",
+  },
+  {
+    label: "Statustype 3",
+    value:
+      "http://zaken.nl/catalogi/api/v1/statustypen/155d0b58-c97d-4451-ab0c-a1fdbe65317c",
+  },
+  {
+    label: "Statustype 4",
+    value:
+      "http://zaken.nl/catalogi/api/v1/statustypen/2621072e-3d25-49fa-8e4c-e0797b1bebe9",
+  },
+  {
+    label: "Statustype 5",
+    value:
+      "http://zaken.nl/catalogi/api/v1/statustypen/e8f32e98-802b-4370-9f6b-dffbec588bb8",
+  },
+  {
+    label: "Statustype 6",
+    value:
+      "http://zaken.nl/catalogi/api/v1/statustypen/86f5402e-1b5b-4470-9d95-ed2f798deb03",
+  },
+  {
+    label: "Statustype 7",
+    value:
+      "http://zaken.nl/catalogi/api/v1/statustypen/6c875571-6ef1-4307-a1b6-c5a455fe647a",
+  },
+  {
+    label: "Statustype 8",
+    value:
+      "http://zaken.nl/catalogi/api/v1/statustypen/a318ed24-80ad-4da0-b95f-69913aef994f",
+  },
+  {
+    label: "Statustype 9",
+    value:
+      "http://zaken.nl/catalogi/api/v1/statustypen/56df165f-c657-44b1-a498-ea440e749b05",
+  },
+  {
+    label: "Statustype 10",
+    value:
+      "http://zaken.nl/catalogi/api/v1/statustypen/03003779-800e-4951-844d-7478691cfd13",
+  },
+];
+
+export const statusTypeChoiceFactory = createObjectFactory<
+  Option<string, string>
+>(FIXTURE_STATUSTYPE_CHOICES[0]);
+
+export const statusTypeChoicesFactory = createArrayFactory<
+  Option<string, string>
+>(FIXTURE_STATUSTYPE_CHOICES);
diff --git a/frontend/src/fixtures/zaaktypeChoices.ts b/frontend/src/fixtures/zaakTypeChoices.ts
similarity index 84%
rename from frontend/src/fixtures/zaaktypeChoices.ts
rename to frontend/src/fixtures/zaakTypeChoices.ts
index 2b6d0e59..35f9904f 100644
--- a/frontend/src/fixtures/zaaktypeChoices.ts
+++ b/frontend/src/fixtures/zaakTypeChoices.ts
@@ -1,5 +1,6 @@
 import { Option } from "@maykin-ui/admin-ui";
 
+import { ZaaktypeChoice } from "../lib/api/private";
 import { createArrayFactory } from "./factory";
 
 const FIXTURE_ZAAKTYPE_CHOICE: Option = {
@@ -8,36 +9,42 @@ const FIXTURE_ZAAKTYPE_CHOICE: Option = {
     "http://localhost:8000/catalogi/api/v1/zaaktypen/64c98539-076e-4fbf-8fec-fa86c560fb24",
 };
 
-const FIXTURE_ZAAKTYPE_CHOICES: Option[] = [
+const FIXTURE_ZAAKTYPE_CHOICES: ZaaktypeChoice[] = [
   {
     label: "Aangifte behandelen 1",
     value:
       "http://localhost:8000/catalogi/api/v1/zaaktypen/64c98539-076e-4fbf-8fec-fa86c560fb24",
+    extra: "",
   },
   {
     label: "Aangifte behandelen 2",
     value:
       "http://localhost:8000/catalogi/api/v1/zaaktypen/927eb71c-d99b-4c5d-b3e2-94a07ce85923",
+    extra: "",
   },
   {
     label: "Aangifte behandelen 3",
     value:
       "http://localhost:8000/catalogi/api/v1/zaaktypen/684b9c68-a36f-4c72-b044-fa9cdcb17ec9",
+    extra: "",
   },
   {
     label: "Aangifte behandelen 4",
     value:
       "http://localhost:8000/catalogi/api/v1/zaaktypen/e4f2a6b0-9377-400a-b0ce-ed66c0a315da",
+    extra: "",
   },
   {
     label: "Aangifte behandelen 5",
     value:
       "http://localhost:8000/catalogi/api/v1/zaaktypen/3206d651-d0f2-4690-933d-cc690444184f",
+    extra: "",
   },
   {
     label: "Aangifte behandelen 6",
     value:
       "http://localhost:8000/catalogi/api/v1/zaaktypen/773b6b77-486a-4b6c-be3e-cf13f4387cf3",
+    extra: "",
   },
 ];
 
@@ -45,7 +52,7 @@ const zaaktypeChoiceFactory = createArrayFactory<Option>(
   FIXTURE_ZAAKTYPE_CHOICES,
 );
 
-const zaaktypeChoicesFactory = createArrayFactory<Option>(
+const zaaktypeChoicesFactory = createArrayFactory<ZaaktypeChoice>(
   FIXTURE_ZAAKTYPE_CHOICES,
 );
 
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 46b9031d..395ee022 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -31,7 +31,7 @@ import {
   landingLoader,
   loginAction,
   logoutLoader,
-  shortProcedureSettingsPageAction,
+  settingsAction,
   shortProcedureSettingsPageLoader,
 } from "./pages";
 import { SettingsPage } from "./pages/settings/Settings";
@@ -157,13 +157,13 @@ const router = createBrowserRouter([
             path: "short-procedure",
             element: <ShortProcedureSettingsPage />,
             loader: shortProcedureSettingsPageLoader,
-            action: shortProcedureSettingsPageAction,
+            action: settingsAction,
           },
           {
             path: "destruction-report",
             element: <DestructionReportSettingsPage />,
             loader: destructionReportSettingsPageLoader,
-            action: shortProcedureSettingsPageAction,
+            action: settingsAction,
           },
         ],
       },
diff --git a/frontend/src/lib/api/config.ts b/frontend/src/lib/api/config.ts
index 1b07edf0..1a36a073 100644
--- a/frontend/src/lib/api/config.ts
+++ b/frontend/src/lib/api/config.ts
@@ -1,8 +1,47 @@
 import { request } from "./request";
 
 export type ArchiveConfiguration = {
+  /**
+   *  If a destruction list only contains cases with types present in this
+   * field, this list will have a shortened review process. This means that no
+   * archivist will have to approve this list before it is deleted.
+   */
   zaaktypesShortProcess: string[]; // List of zaaktypes that should use the short process
+
+  /** Source organisation RSIN */
+  bronorganisatie: string;
+
+  /**
+   * The case type URL to use when creating the case for the destruction list
+   * deletion.
+   */
+  zaaktype: string;
+
+  /**
+   * The status type URL to use when creating the case for the destruction list
+   * deletion.
+   */
+  statustype: string;
+
+  /**
+   * The result type URL to use when creating the case for the destruction list
+   * deletion.
+   */
+  resultaattype: string;
+
+  /**
+   * The selectielijstklasse URL to use when creating the case for the
+   * destruction list deletion.
+   */
+  informatieobjecttype: string;
+
+  /**
+   * The selectielijstklasse URL to use when creating the case for the
+   * destruction list deletion.
+   */
+  selectielijstklasse: string;
 };
+
 /**
  * API call to get the archive configuration
  * @returns {Promise<ArchiveConfiguration>} The archive configuration
diff --git a/frontend/src/lib/api/private.ts b/frontend/src/lib/api/private.ts
index 863d65a1..4f614095 100644
--- a/frontend/src/lib/api/private.ts
+++ b/frontend/src/lib/api/private.ts
@@ -6,11 +6,62 @@ import { DestructionList } from "./destructionLists";
 import { request } from "./request";
 import { Review } from "./review";
 
-export type ZaaktypeChoice = Option & {
+export type ZaaktypeChoice = Option<string, string> & {
   /** A combination of the identification and the date on which the zaaktype will no longer be valid (if present). */
   extra: string;
 };
 
+/**
+ * Retrieve informatieobjecttypen from Open Zaak and return a value and a label per informatieobjecttype. The label is
+ * the field 'omschrijving'.
+ */
+export async function listInformatieObjectTypeChoices() {
+  return cacheMemo(
+    "listInformatieObjectTypeChoices",
+    async () => {
+      const response = await request("GET", "/_informatieobjecttype-choices/");
+      const promise: Promise<Option[]> = response.json();
+
+      return promise;
+    },
+    [],
+  );
+}
+
+/**
+ * Retrieve statustypen from Open Zaak and return a value and a label per statustype. The label is the field
+ * 'omschrijving'.
+ */
+export async function listStatusTypeChoices() {
+  return cacheMemo(
+    "listStatusTypeChoices",
+    async () => {
+      const response = await request("GET", "/_statustype-choices/");
+      const promise: Promise<Option[]> = response.json();
+
+      return promise;
+    },
+    [],
+  );
+}
+
+/**
+ * Retrieve resultaattypen from Open Zaak and return a value and a label per
+ * resultaattype. The label is the field 'omschrijving'.
+ */
+export async function listResultaatTypeChoices() {
+  return cacheMemo(
+    "listResultaatTypeChoices",
+    async () => {
+      const response = await request("GET", "/_resultaattype-choices/");
+      const promise: Promise<Option[]> = response.json();
+
+      return promise;
+    },
+    [],
+  );
+}
+
 /**
  * This takes the 'selectielijstprocestype' from the 'zaaktype', then retrieves all the 'resultaten' possible for this
  * 'procestype' from the selectielijst API.
diff --git a/frontend/src/pages/settings/short-procedure/ShortProcedureSettingsPage.action.ts b/frontend/src/pages/settings/Settings.action.ts
similarity index 82%
rename from frontend/src/pages/settings/short-procedure/ShortProcedureSettingsPage.action.ts
rename to frontend/src/pages/settings/Settings.action.ts
index 4016992d..f58583eb 100644
--- a/frontend/src/pages/settings/short-procedure/ShortProcedureSettingsPage.action.ts
+++ b/frontend/src/pages/settings/Settings.action.ts
@@ -1,10 +1,10 @@
 import { ActionFunctionArgs } from "react-router-dom";
 
-import { JsonValue, TypedAction } from "../../../hooks";
+import { JsonValue, TypedAction } from "../../hooks";
 import {
   ArchiveConfiguration,
   patchArchiveConfiguration,
-} from "../../../lib/api/config";
+} from "../../lib/api/config";
 
 export type UpdateSettingsAction<T = JsonValue> = TypedAction<
   "PATCH-ARCHIVE-CONFIG",
@@ -14,10 +14,7 @@ export type UpdateSettingsAction<T = JsonValue> = TypedAction<
 /**
  * React Router action.
  */
-export async function shortProcedureSettingsPageAction({
-  request,
-  params,
-}: ActionFunctionArgs) {
+export async function settingsAction({ request, params }: ActionFunctionArgs) {
   const data = await request.clone().json();
   const action = data as UpdateSettingsAction<unknown>;
 
diff --git a/frontend/src/pages/settings/abstract/BaseSettingsView.tsx b/frontend/src/pages/settings/abstract/BaseSettingsView.tsx
index 514e37fd..598176f3 100644
--- a/frontend/src/pages/settings/abstract/BaseSettingsView.tsx
+++ b/frontend/src/pages/settings/abstract/BaseSettingsView.tsx
@@ -1,10 +1,15 @@
-import { DataGridProps, ListTemplate, ToolbarItem } from "@maykin-ui/admin-ui";
+import {
+  CardBaseTemplate,
+  DataGridProps,
+  ListTemplate,
+  ToolbarItem,
+} from "@maykin-ui/admin-ui";
 import React from "react";
 import { useMatches, useNavigate } from "react-router-dom";
 
 export type BaseSettingsPageProps<T extends object> = React.PropsWithChildren<{
-  dataGridProps: DataGridProps<T>;
-  secondaryNavigationItems: ToolbarItem[];
+  dataGridProps?: DataGridProps<T>;
+  secondaryNavigationItems?: ToolbarItem[];
 }>;
 
 /**
@@ -19,26 +24,39 @@ export function BaseSettingsView<T extends object>({
   const currentMatch = [...useMatches()].pop(); // Explicit clone.
   const currentPathName = currentMatch?.pathname;
 
+  const SIDEBAR_ITEMS: ToolbarItem[] = [
+    {
+      children: "Verkorte procedure",
+      align: "start",
+      onClick: () => navigate("/settings/short-procedure"),
+      active: currentPathName === "/settings/short-procedure",
+    },
+    {
+      children: "Vernietigingsrapport",
+      align: "start",
+      onClick: () => navigate("/settings/destruction-report"),
+      active: currentPathName === "/settings/destruction-report",
+    },
+  ];
+
+  if (dataGridProps) {
+    return (
+      <ListTemplate
+        secondaryNavigationItems={secondaryNavigationItems}
+        sidebarItems={SIDEBAR_ITEMS}
+        dataGridProps={dataGridProps}
+      >
+        {children}
+      </ListTemplate>
+    );
+  }
+
   return (
-    <ListTemplate<T>
+    <CardBaseTemplate
       secondaryNavigationItems={secondaryNavigationItems}
-      sidebarItems={[
-        {
-          children: "Verkorte procedure",
-          align: "start",
-          onClick: () => navigate("/settings/short-procedure"),
-          active: currentPathName === "/settings/short-procedure",
-        },
-        {
-          children: "Vernietigingsrapport",
-          align: "start",
-          onClick: () => navigate("/settings/destruction-report"),
-          active: currentPathName === "/settings/destruction-report",
-        },
-      ]}
-      dataGridProps={dataGridProps}
+      sidebarItems={SIDEBAR_ITEMS}
     >
       {children}
-    </ListTemplate>
+    </CardBaseTemplate>
   );
 }
diff --git a/frontend/src/pages/settings/destruction-report/DestructionReportSettingsPage.loader.ts b/frontend/src/pages/settings/destruction-report/DestructionReportSettingsPage.loader.ts
deleted file mode 100644
index ee328b3f..00000000
--- a/frontend/src/pages/settings/destruction-report/DestructionReportSettingsPage.loader.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { loginRequired } from "../../../lib/auth/loaders";
-
-export type DestructionReportSettingsPageContext = object;
-
-export const destructionReportSettingsPageLoader = loginRequired(
-  async (): Promise<DestructionReportSettingsPageContext> => {
-    return {};
-  },
-);
diff --git a/frontend/src/pages/settings/destruction-report/DestructionReportSettingsPage.stories.tsx b/frontend/src/pages/settings/destruction-report/DestructionReportSettingsPage.stories.tsx
deleted file mode 100644
index 79e87943..00000000
--- a/frontend/src/pages/settings/destruction-report/DestructionReportSettingsPage.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { DestructionReportSettingsPage } from "./DestructionReportSettingsPage";
-
-const meta: Meta<typeof DestructionReportSettingsPage> = {
-  title: "Pages/Settings",
-  component: DestructionReportSettingsPage,
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const SettingsPageStory: Story = {};
diff --git a/frontend/src/pages/settings/destruction-report/DestructionReportSettingsPage.tsx b/frontend/src/pages/settings/destruction-report/DestructionReportSettingsPage.tsx
deleted file mode 100644
index afa8b3c4..00000000
--- a/frontend/src/pages/settings/destruction-report/DestructionReportSettingsPage.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useMemo } from "react";
-
-import { BaseSettingsView } from "../abstract/BaseSettingsView";
-
-interface DestructionReportSetting {
-  zaaktype: string;
-  value: string | number;
-  verkorteProcedure: boolean;
-}
-
-/**
- * Allows for configuring zaaktype eligible for the short procedure.
- */
-export function DestructionReportSettingsPage() {
-  const objectList = useMemo(() => [], []);
-
-  return (
-    <BaseSettingsView<DestructionReportSetting>
-      secondaryNavigationItems={[]}
-      dataGridProps={{
-        objectList,
-      }}
-    ></BaseSettingsView>
-  );
-}
diff --git a/frontend/src/pages/settings/index.ts b/frontend/src/pages/settings/index.ts
index 7b33a0bd..c6c9fba3 100644
--- a/frontend/src/pages/settings/index.ts
+++ b/frontend/src/pages/settings/index.ts
@@ -1,2 +1,2 @@
-export * from "./destruction-report";
-export * from "./short-procedure";
+export * from "./pages";
+export * from "./Settings.action";
diff --git a/frontend/src/pages/settings/pages/destruction-report/DestructionReportSettingsPage.loader.ts b/frontend/src/pages/settings/pages/destruction-report/DestructionReportSettingsPage.loader.ts
new file mode 100644
index 00000000..9f0c9f93
--- /dev/null
+++ b/frontend/src/pages/settings/pages/destruction-report/DestructionReportSettingsPage.loader.ts
@@ -0,0 +1,58 @@
+import { Option } from "@maykin-ui/admin-ui";
+
+import {
+  ArchiveConfiguration,
+  getArchiveConfiguration,
+} from "../../../../lib/api/config";
+import {
+  ZaaktypeChoice,
+  listInformatieObjectTypeChoices,
+  listResultaatTypeChoices,
+  listSelectielijstKlasseChoices,
+  listStatusTypeChoices,
+  listZaaktypeChoices,
+} from "../../../../lib/api/private";
+import {
+  canViewAndEditSettingsRequired,
+  loginRequired,
+} from "../../../../lib/auth/loaders";
+
+export type DestructionReportSettingsPageContext = {
+  archiveConfiguration: ArchiveConfiguration;
+  informatieObjectTypeChoices: Option[];
+  resultaatTypeChoices: Option[];
+  selectieLijstKlasseChoices: Option[];
+  statusTypeChoices: Option[];
+  zaaktypeChoices: ZaaktypeChoice[];
+};
+
+export const destructionReportSettingsPageLoader = loginRequired(
+  canViewAndEditSettingsRequired(
+    async (): Promise<DestructionReportSettingsPageContext> => {
+      const [
+        archiveConfiguration,
+        informatieObjectTypeChoices,
+        resultaatTypeChoices,
+        selectieLijstKlasseChoices,
+        statusTypeChoices,
+        zaaktypeChoices,
+      ] = await Promise.all([
+        getArchiveConfiguration(),
+        listInformatieObjectTypeChoices(),
+        listResultaatTypeChoices(),
+        listSelectielijstKlasseChoices(),
+        listStatusTypeChoices(),
+        listZaaktypeChoices(),
+      ]);
+
+      return {
+        archiveConfiguration,
+        informatieObjectTypeChoices,
+        resultaatTypeChoices,
+        selectieLijstKlasseChoices,
+        statusTypeChoices,
+        zaaktypeChoices,
+      };
+    },
+  ),
+);
diff --git a/frontend/src/pages/settings/pages/destruction-report/DestructionReportSettingsPage.stories.tsx b/frontend/src/pages/settings/pages/destruction-report/DestructionReportSettingsPage.stories.tsx
new file mode 100644
index 00000000..1d5d9783
--- /dev/null
+++ b/frontend/src/pages/settings/pages/destruction-report/DestructionReportSettingsPage.stories.tsx
@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { ReactRouterDecorator } from "../../../../../.storybook/decorators";
+import { fillForm } from "../../../../../.storybook/playFunctions";
+import {
+  FIXTURE_INFORMATIE_OBJECTTYPE_CHOICES,
+  FIXTURE_RESULTAATTYPE_CHOICES,
+  FIXTURE_SELECTIELIJSTKLASSE_CHOICES,
+  FIXTURE_STATUSTYPE_CHOICES,
+  FIXTURE_ZAAKTYPE_CHOICES,
+  informatieObjectTypeChoicesFactory,
+  resultaatTypeChoicesFactory,
+  selectieLijstKlasseFactory,
+  statusTypeChoicesFactory,
+  zaaktypeChoicesFactory,
+} from "../../../../fixtures";
+import { DestructionReportSettingsPage } from "./DestructionReportSettingsPage";
+import { DestructionReportSettingsPageContext } from "./DestructionReportSettingsPage.loader";
+
+const meta: Meta<typeof DestructionReportSettingsPage> = {
+  title: "Pages/Settings",
+  component: DestructionReportSettingsPage,
+  decorators: [ReactRouterDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const FIXTURE: DestructionReportSettingsPageContext = {
+  archiveConfiguration: {
+    bronorganisatie: "000000000",
+    informatieobjecttype: FIXTURE_INFORMATIE_OBJECTTYPE_CHOICES[0].value,
+    resultaattype: FIXTURE_RESULTAATTYPE_CHOICES[0].value,
+    selectielijstklasse: FIXTURE_SELECTIELIJSTKLASSE_CHOICES[0].value,
+    statustype: FIXTURE_STATUSTYPE_CHOICES[0].value,
+    zaaktype: FIXTURE_ZAAKTYPE_CHOICES[0].value as string,
+    zaaktypesShortProcess: [],
+  },
+  informatieObjectTypeChoices: informatieObjectTypeChoicesFactory(),
+  resultaatTypeChoices: resultaatTypeChoicesFactory(),
+  selectieLijstKlasseChoices: selectieLijstKlasseFactory(),
+  statusTypeChoices: statusTypeChoicesFactory(),
+  zaaktypeChoices: zaaktypeChoicesFactory(),
+};
+
+export const UpdateDestructionReportSettings: Story = {
+  parameters: {
+    fillForm: {
+      formValues: {
+        Bronorganisatie: "000000001",
+        Zaaktype: FIXTURE_ZAAKTYPE_CHOICES[1].label,
+        Statustype: FIXTURE_STATUSTYPE_CHOICES[1].label,
+        Resultaattype: FIXTURE_RESULTAATTYPE_CHOICES[1].label,
+        Informatieobjecttype: FIXTURE_INFORMATIE_OBJECTTYPE_CHOICES[1].label,
+        Selectielijstklasse: FIXTURE_SELECTIELIJSTKLASSE_CHOICES[1].label,
+      },
+      submitForm: false,
+    },
+    reactRouterDecorator: {
+      route: {
+        loader: async () => FIXTURE,
+      },
+    },
+  },
+  play: async (context) => {
+    await fillForm(context);
+  },
+};
diff --git a/frontend/src/pages/settings/pages/destruction-report/DestructionReportSettingsPage.tsx b/frontend/src/pages/settings/pages/destruction-report/DestructionReportSettingsPage.tsx
new file mode 100644
index 00000000..b13dc236
--- /dev/null
+++ b/frontend/src/pages/settings/pages/destruction-report/DestructionReportSettingsPage.tsx
@@ -0,0 +1,149 @@
+import {
+  Body,
+  Form,
+  FormField,
+  H2,
+  P,
+  SerializedFormData,
+  Solid,
+  useAlert,
+  validateForm,
+} from "@maykin-ui/admin-ui";
+import { useCallback, useState } from "react";
+import { useLoaderData } from "react-router-dom";
+
+import { JsonValue, useSubmitAction } from "../../../../hooks";
+import { UpdateSettingsAction } from "../../Settings.action";
+import { BaseSettingsView } from "../../abstract/BaseSettingsView";
+import { DestructionReportSettingsPageContext } from "./DestructionReportSettingsPage.loader";
+
+interface DestructionReportSetting {
+  zaaktype: string;
+  value: string | number;
+  verkorteProcedure: boolean;
+}
+
+/**
+ * Allows for configuring zaaktype eligible for the short procedure.
+ */
+export function DestructionReportSettingsPage() {
+  const submit = useSubmitAction<UpdateSettingsAction>();
+  const {
+    archiveConfiguration,
+    informatieObjectTypeChoices,
+    resultaatTypeChoices,
+    selectieLijstKlasseChoices,
+    statusTypeChoices,
+    zaaktypeChoices,
+  } = useLoaderData() as DestructionReportSettingsPageContext;
+  const [valuesState, setValuesState] = useState<SerializedFormData | null>(
+    archiveConfiguration,
+  );
+  const alert = useAlert();
+
+  const fields: FormField[] = [
+    {
+      label: "Bronorganisatie",
+      name: "bronorganisatie",
+      value: archiveConfiguration.bronorganisatie,
+      required: true,
+      maxLength: 9,
+    },
+    {
+      label: "Zaaktype",
+      name: "zaaktype",
+      required: true,
+      options: zaaktypeChoices,
+      value: archiveConfiguration.zaaktype,
+    },
+    {
+      label: "Statustype",
+      name: "statustype",
+      required: true,
+      options: statusTypeChoices,
+      value: archiveConfiguration.statustype,
+    },
+    {
+      label: "Resultaattype",
+      name: "resultaattype",
+      required: true,
+      options: resultaatTypeChoices,
+      value: archiveConfiguration.resultaattype,
+    },
+    {
+      label: "Informatieobjecttype",
+      name: "informatieobjecttype",
+      required: true,
+      options: informatieObjectTypeChoices,
+      value: archiveConfiguration.informatieobjecttype,
+    },
+    {
+      label: "Selectielijstklasse",
+      name: "selectielijstklasse",
+      required: true,
+      options: selectieLijstKlasseChoices,
+      value: archiveConfiguration.selectielijstklasse,
+    },
+  ];
+
+  const handleValidate = useCallback(
+    (values: SerializedFormData, fields: FormField[]) => {
+      const errors = validateForm(values, fields);
+      const isValid = Object.keys(errors).length === 0;
+      if (!isValid) {
+        setValuesState(null);
+      } else {
+        setValuesState(values);
+      }
+      return errors;
+    },
+    [],
+  );
+
+  const handleSave = useCallback(() => {
+    submit({
+      type: "PATCH-ARCHIVE-CONFIG",
+      payload: valuesState as JsonValue,
+    });
+    alert(
+      "Instellingen opgeslagen",
+      "De instellingen zijn succesvol opgeslagen",
+      "Ok",
+    );
+  }, [valuesState]);
+
+  return (
+    <BaseSettingsView<DestructionReportSetting>
+      secondaryNavigationItems={[
+        {
+          children: (
+            <>
+              <Solid.DocumentArrowUpIcon />
+              Opslaan
+            </>
+          ),
+          disabled: !valuesState,
+          pad: "h",
+          variant: "primary",
+          onClick: handleSave,
+        },
+      ]}
+    >
+      <Body>
+        <H2>Vernietigingsrapport</H2>
+        <P>
+          Configureer de eigenschappen voor de aangemaakte zaak van
+          vernietigingsrapport.
+        </P>
+
+        <Form
+          aria-label="Vernietigingsrapport instellingen"
+          fields={fields}
+          validateOnChange
+          showActions={false}
+          validate={handleValidate}
+        />
+      </Body>
+    </BaseSettingsView>
+  );
+}
diff --git a/frontend/src/pages/settings/destruction-report/index.ts b/frontend/src/pages/settings/pages/destruction-report/index.ts
similarity index 100%
rename from frontend/src/pages/settings/destruction-report/index.ts
rename to frontend/src/pages/settings/pages/destruction-report/index.ts
diff --git a/frontend/src/pages/settings/pages/index.ts b/frontend/src/pages/settings/pages/index.ts
new file mode 100644
index 00000000..7b33a0bd
--- /dev/null
+++ b/frontend/src/pages/settings/pages/index.ts
@@ -0,0 +1,2 @@
+export * from "./destruction-report";
+export * from "./short-procedure";
diff --git a/frontend/src/pages/settings/short-procedure/ShortProcedureSettingsPage.loader.ts b/frontend/src/pages/settings/pages/short-procedure/ShortProcedureSettingsPage.loader.ts
similarity index 83%
rename from frontend/src/pages/settings/short-procedure/ShortProcedureSettingsPage.loader.ts
rename to frontend/src/pages/settings/pages/short-procedure/ShortProcedureSettingsPage.loader.ts
index 6b47cacf..0e774523 100644
--- a/frontend/src/pages/settings/short-procedure/ShortProcedureSettingsPage.loader.ts
+++ b/frontend/src/pages/settings/pages/short-procedure/ShortProcedureSettingsPage.loader.ts
@@ -1,12 +1,15 @@
 import {
   ArchiveConfiguration,
   getArchiveConfiguration,
-} from "../../../lib/api/config";
-import { ZaaktypeChoice, listZaaktypeChoices } from "../../../lib/api/private";
+} from "../../../../lib/api/config";
+import {
+  ZaaktypeChoice,
+  listZaaktypeChoices,
+} from "../../../../lib/api/private";
 import {
   canViewAndEditSettingsRequired,
   loginRequired,
-} from "../../../lib/auth/loaders";
+} from "../../../../lib/auth/loaders";
 
 export type ShortProcedureSettingsPageContext = {
   zaaktypesShortProcess: ArchiveConfiguration["zaaktypesShortProcess"];
diff --git a/frontend/src/pages/settings/short-procedure/ShortProcedureSettingsPage.stories.tsx b/frontend/src/pages/settings/pages/short-procedure/ShortProcedureSettingsPage.stories.tsx
similarity index 77%
rename from frontend/src/pages/settings/short-procedure/ShortProcedureSettingsPage.stories.tsx
rename to frontend/src/pages/settings/pages/short-procedure/ShortProcedureSettingsPage.stories.tsx
index f42602b3..ea6672a2 100644
--- a/frontend/src/pages/settings/short-procedure/ShortProcedureSettingsPage.stories.tsx
+++ b/frontend/src/pages/settings/pages/short-procedure/ShortProcedureSettingsPage.stories.tsx
@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { ReactRouterDecorator } from "../../../../.storybook/decorators";
-import { assertCheckboxSelection } from "../../../../.storybook/playFunctions";
+import { ReactRouterDecorator } from "../../../../../.storybook/decorators";
+import { assertCheckboxSelection } from "../../../../../.storybook/playFunctions";
 import { ShortProcedureSettingsPage } from "./ShortProcedureSettingsPage";
 
 const meta: Meta<typeof ShortProcedureSettingsPage> = {
@@ -21,7 +21,7 @@ const FIXTURE = {
   })),
 };
 
-export const SettingsPageStory: Story = {
+export const UpdateShortProcedureSettings: Story = {
   parameters: {
     reactRouterDecorator: {
       route: {
diff --git a/frontend/src/pages/settings/short-procedure/ShortProcedureSettingsPage.tsx b/frontend/src/pages/settings/pages/short-procedure/ShortProcedureSettingsPage.tsx
similarity index 94%
rename from frontend/src/pages/settings/short-procedure/ShortProcedureSettingsPage.tsx
rename to frontend/src/pages/settings/pages/short-procedure/ShortProcedureSettingsPage.tsx
index 0acbcb3f..2a5a8d95 100644
--- a/frontend/src/pages/settings/short-procedure/ShortProcedureSettingsPage.tsx
+++ b/frontend/src/pages/settings/pages/short-procedure/ShortProcedureSettingsPage.tsx
@@ -2,9 +2,9 @@ import { Body, H2, P, Solid, useAlert } from "@maykin-ui/admin-ui";
 import { useCallback, useMemo, useState } from "react";
 import { useLoaderData } from "react-router-dom";
 
-import { useSubmitAction } from "../../../hooks";
-import { BaseSettingsView } from "../abstract/BaseSettingsView";
-import { UpdateSettingsAction } from "./ShortProcedureSettingsPage.action";
+import { useSubmitAction } from "../../../../hooks";
+import { UpdateSettingsAction } from "../../Settings.action";
+import { BaseSettingsView } from "../../abstract/BaseSettingsView";
 import { ShortProcedureSettingsPageContext } from "./ShortProcedureSettingsPage.loader";
 
 interface ShortProcedureSetting {
@@ -133,7 +133,8 @@ export function ShortProcedureSettingsPage() {
       <Body>
         <H2>Verkorte procedure</H2>
         <P>
-          Selecteer zaaktypen die in aanmerking komen voor de verkorte procedure
+          Selecteer zaaktypen die in aanmerking komen voor de verkorte
+          procedure.
         </P>
       </Body>
     </BaseSettingsView>
diff --git a/frontend/src/pages/settings/short-procedure/index.ts b/frontend/src/pages/settings/pages/short-procedure/index.ts
similarity index 65%
rename from frontend/src/pages/settings/short-procedure/index.ts
rename to frontend/src/pages/settings/pages/short-procedure/index.ts
index 7a2cf6e0..1f715e3e 100644
--- a/frontend/src/pages/settings/short-procedure/index.ts
+++ b/frontend/src/pages/settings/pages/short-procedure/index.ts
@@ -1,3 +1,2 @@
 export * from "./ShortProcedureSettingsPage";
-export * from "./ShortProcedureSettingsPage.action";
 export * from "./ShortProcedureSettingsPage.loader";