diff --git a/package.json b/package.json
index c865d63d0..a3be8fcea 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "classnames": "^2.3.1",
     "collect.js": "^4.31.3",
     "coloquent": "^2.4.1",
+    "deepmerge-ts": "^2.0.1",
     "include-media": "^1.4.10",
     "lit": "^2.1.1",
     "locale-code": "^2.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c1656fbbe..978e13374 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -43,6 +43,7 @@ specifiers:
   coloquent: ^2.4.1
   concurrently: ^7.0.0
   csstype: ^3.0.10
+  deepmerge-ts: ^2.0.1
   gulp: ^4.0.2
   include-media: ^1.4.10
   laravel-vite: ^0.0.24
@@ -101,6 +102,7 @@ dependencies:
   classnames: 2.3.1
   collect.js: 4.31.3
   coloquent: 2.4.1
+  deepmerge-ts: 2.0.1
   include-media: 1.4.10
   lit: 2.1.1
   locale-code: 2.0.2
@@ -3606,6 +3608,13 @@ packages:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
 
+  /deepmerge-ts/2.0.1:
+    resolution: {integrity: sha512-7xeG0xMleW+gyrtUsdOeR6tCLwkyYDh3koIuvc8TxBcDh3WlaBQiEbFwEzk8clKomJZMhmoyxo7Y9CRrrrLVlg==}
+    engines: {node: '>=12.4.0'}
+    dependencies:
+      is-plain-object: 5.0.0
+    dev: false
+
   /deepmerge/4.2.2:
     resolution: {integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==}
     engines: {node: '>=0.10.0'}
@@ -5260,7 +5269,6 @@ packages:
   /is-plain-object/5.0.0:
     resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /is-potential-custom-element-name/1.0.1:
     resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
diff --git a/resources/js/Components/extend.ts b/resources/js/Components/extend/extend.ts
similarity index 66%
rename from resources/js/Components/extend.ts
rename to resources/js/Components/extend/extend.ts
index 74ccff884..296d9e20e 100644
--- a/resources/js/Components/extend.ts
+++ b/resources/js/Components/extend/extend.ts
@@ -2,16 +2,6 @@
  * @source https://github.com/flarum/core/blob/master/js/src/common/extend.js
  */
 
-import {
-  SelectT,
-  TextAreaT,
-  TextFieldT
-} from '../typings';
-import {
-  ColumnT,
-  RecordsPage
-} from './Pages';
-
 /**
  * Type that returns an array of all keys of a provided object that are of
  * of the provided type, or a subtype of the type.
@@ -118,74 +108,3 @@ export function override<T extends Record<any, any>, K extends KeyOfType<T, Func
     Object.assign(object[method], original);
   }
 }
-
-// Additional extenders for RecordsPage
-
-/**
- * Adds or updates the columns of a RecordsPage
- *
- * @param page The page of the columns to add or update
- * @param columns An object containing the columns to add or update ({id: 'Heading' | {…}})
- */
-export function updateColumns(
-  page: RecordsPage & {prototype: RecordsPage},
-  columns: Record<string, string | ColumnT>
-) {
-  extend(page.prototype, 'oninit', function (this: RecordsPage) {
-    for (const [id, value] of Object.entries(columns)) {
-      this.columns[id] = value;
-    }
-  });
-}
-
-/**
- * Deletes the columns of a RecordsPage
- *
- * @param page The page of the columns to delete
- * @param ids The IDs of the columns to delete
- */
-export function deleteColumns(page: RecordsPage & {prototype: RecordsPage}, ids: string[]) {
-  extend(page.prototype, 'oninit', function (this: RecordsPage) {
-    for (const id of ids) {
-      delete this.columns[id];
-    }
-  });
-}
-
-/**
- * Adds or updates the fields of a RecordsPage record dialog
- *
- * @param page The page of the fields to add or update
- * @param section The dialog section of the fields to add or update
- * @param fields
- */
-export function updateFields(
-  page: RecordsPage & {prototype: RecordsPage},
-  section: string,
-  fields: Record<string, TextFieldT | TextAreaT | SelectT>
-) {
-  extend(page.prototype, 'oninit', function (this: RecordsPage) {
-    for (const [id, value] of Object.entries(fields)) {
-      this.sections[section].fields[id] = value;
-    }
-  });
-}
-
-/**
- * Delets the fields of a RecordsPage record dialog
- *
- * @param page The page of the fields to delete
- * @param section The dialog section to delete
- * @param fields The IDs of the fields to delete
- */
-export function deleteFields(
-  page: RecordsPage & {prototype: RecordsPage},
-  section: string,
-  fields: string[]
-) {
-  extend(page.prototype, 'oninit', function (this: RecordsPage) {
-    for (const id of fields) {
-      delete this.sections[section].fields[id];
-    }
-  });
-}
diff --git a/resources/js/Components/extend/recordsPage.ts b/resources/js/Components/extend/recordsPage.ts
new file mode 100644
index 000000000..b5914b56c
--- /dev/null
+++ b/resources/js/Components/extend/recordsPage.ts
@@ -0,0 +1,89 @@
+import {deepmerge} from 'deepmerge-ts';
+
+import {
+  ColumnT,
+  RecordsPage,
+  SectionsT
+} from '../Pages';
+import {extend} from './extend';
+
+/**
+ * Adds or updates the columns of a RecordsPage
+ *
+ * @param page The page of the columns to add or update
+ * @param columns An object containing the columns to add or update ({id: 'Heading' | {…}})
+ */
+export function updateColumns(
+  page: RecordsPage & {prototype: RecordsPage},
+  columns: Record<string, string | ColumnT>
+) {
+  extend(page.prototype, 'oninit', function (this: RecordsPage) {
+    this.columns = deepmerge(this.columns, columns);
+  });
+}
+
+/**
+ * Deletes the columns of a RecordsPage
+ *
+ * @param page The page of the columns to delete
+ * @param ids The IDs of the columns to delete
+ */
+export function deleteColumns(page: RecordsPage & {prototype: RecordsPage}, ids: string[]) {
+  extend(page.prototype, 'oninit', function (this: RecordsPage) {
+    for (const id of ids) {
+      delete this.columns[id];
+    }
+  });
+}
+
+/**
+ * Adds or updates the fields of a RecordsPage record dialog
+ *
+ * @param page The page of the fields to add or update
+ * @param sections The new section
+ */
+export function updateFieldsSection(
+  page: RecordsPage & {prototype: RecordsPage},
+  sections: SectionsT
+) {
+  extend(page.prototype, 'oninit', function (this: RecordsPage) {
+    this.sections = deepmerge(this.sections, sections);
+  });
+}
+
+/**
+ * Deletes the sections of a RecordsPage record dialog
+ *
+ * @param page The page of the sections to delete
+ * @param sections The IDs of the dialog sections to delete.
+ */
+export function deleteSections(
+  page: RecordsPage & {prototype: RecordsPage},
+  sections: string[]
+) {
+  extend(page.prototype, 'oninit', function (this: RecordsPage) {
+    for (const id of sections) {
+      delete this.sections[id];
+    }
+  });
+}
+
+
+/**
+ * Delets the fields of a RecordsPage record dialog
+ *
+ * @param page The page of the fields to delete
+ * @param section The dialog section to delete
+ * @param fields The IDs of the fields to delete
+ */
+export function deleteFields(
+  page: RecordsPage & {prototype: RecordsPage},
+  section: string,
+  fields: string[]
+) {
+  extend(page.prototype, 'oninit', function (this: RecordsPage) {
+    for (const id of fields) {
+      delete this.sections[section].fields[id];
+    }
+  });
+}