diff --git a/i18n/en.json b/i18n/en.json
index 8bdd34c9..e3b955f4 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -1,5 +1,12 @@
 {
   "export": "Export",
   "exporting": "Exporting",
-  "exportModalDescription": "You've selected {{ count }} {{ type }} for export"
+  "exportModalDescription": "You've selected {{ count }} {{ type }} for export",
+  "exportModalRelatedDocumentDescription": "Include the following document types where applicable",
+  "exportModalSettingsLabel": "Export Settings",
+  "exportModalDocumentFormat": "Document Format",
+  "exportModalIncludeRelated": "Include related documents",
+  "exportModalIncludeChildren": "Include children of this page",
+  "exportModalIncludeRelatedSettings": "Related Documents Settings",
+  "exportModalNoRelatedTypes": "No Related Types"
 }
diff --git a/index.js b/index.js
index d08bf2bd..76753abe 100644
--- a/index.js
+++ b/index.js
@@ -13,6 +13,45 @@ module.exports = {
       ns: 'aposImportExport',
       browser: true
     }
+  },
+
+  init(self) {
+    self.apos.asset.iconMap['apos-import-export-download-icon'] = 'Download';
+  },
+
+  apiRoutes(self) {
+    return {
+      get: {
+        async related(req) {
+          if (!req.user) {
+            throw self.apos.error('forbidden');
+          }
+
+          const type = self.apos.launder.string(req.query.type);
+          if (!type) {
+            throw self.apos.error('invalid');
+          }
+
+          const { schema = [] } = self.apos.modules[type];
+          const relatedTypes = schema.flatMap(searchRelationships).filter(Boolean);
+
+          return [ ...new Set(relatedTypes) ];
+
+          function searchRelationships(obj) {
+            if (obj.type === 'relationship') {
+              return obj.withType;
+            } else if (obj.type === 'array' || obj.type === 'object') {
+              return obj.schema.flatMap(searchRelationships);
+            } else if (obj.type === 'area') {
+              return Object.keys(obj.options.widgets).flatMap(widget => {
+                const { schema = [] } = self.apos.modules[`${widget}-widget`];
+                return schema.map(searchRelationships);
+              });
+            }
+          }
+        }
+      }
+    };
   }
 };
 
diff --git a/modules/@apostrophecms/import-export-doc-type/index.js b/modules/@apostrophecms/import-export-doc-type/index.js
index 4dcc0c45..bd465a1f 100644
--- a/modules/@apostrophecms/import-export-doc-type/index.js
+++ b/modules/@apostrophecms/import-export-doc-type/index.js
@@ -8,7 +8,7 @@ module.exports = {
       action: 'export',
       context: 'update',
       label: 'aposImportExport:export',
-      modal: 'AposExportPiecesModal'
+      modal: 'AposExportModal'
     };
 
     if (self.options.export === false) {
diff --git a/modules/@apostrophecms/import-export-piece-type/index.js b/modules/@apostrophecms/import-export-piece-type/index.js
index f1863255..8e533f6f 100644
--- a/modules/@apostrophecms/import-export-piece-type/index.js
+++ b/modules/@apostrophecms/import-export-piece-type/index.js
@@ -15,7 +15,7 @@ module.exports = {
           messages: {
             progress: 'aposImportExport:exporting'
           },
-          modal: 'AposExportPiecesModal'
+          modal: 'AposExportModal'
         }
       },
       group: {
diff --git a/ui/apos/components/AposExportModal.vue b/ui/apos/components/AposExportModal.vue
new file mode 100644
index 00000000..eaa4067b
--- /dev/null
+++ b/ui/apos/components/AposExportModal.vue
@@ -0,0 +1,339 @@
+<template>
+  <AposModal
+    :modal="modal"
+    class="apos-export"
+    @esc="cancel"
+    @no-modal="$emit('safe-close')"
+    @inactive="modal.active = false"
+    @show-modal="modal.showModal = true"
+    @ready="ready"
+  >
+    <template #main>
+      <AposModalBody>
+        <template #bodyMain>
+          <h2 class="apos-export__heading">
+            {{ $t('aposImportExport:export') }} {{ moduleLabel }}
+          </h2>
+          <p
+            class="apos-export__description"
+          >
+            {{ $t('aposImportExport:exportModalDescription', { count, type: moduleLabel }) }}
+          </p>
+
+          <div class="apos-export__section">
+            <div class="apos-export__settings">
+              {{ $t('aposImportExport:exportModalSettingsLabel') }}
+            </div>
+            <div class="apos-export__separator" />
+
+            <div class="apos-export__settings-row">
+              <div>{{ $t('aposImportExport:exportModalDocumentFormat') }}</div>
+              <AposContextMenu
+                disabled
+                :button="{
+                  label: 'ZIP',
+                  icon: 'chevron-down-icon',
+                  modifiers: ['icon-right', 'disabled']
+                }"
+              />
+            </div>
+
+            <div
+              v-if="moduleName === '@apostrophecms/page'"
+              class="apos-export__settings-row"
+            >
+              <div>{{ $t('aposImportExport:exportModalIncludeChildren') }}</div>
+              <AposToggle
+                v-model="relatedChildrenDisabled"
+                class="apos-export__toggle"
+                @toggle="toggleRelatedChildren"
+              />
+            </div>
+
+            <div class="apos-export__settings-row">
+              <div>{{ $t('aposImportExport:exportModalIncludeRelated') }}</div>
+              <AposToggle
+                v-model="relatedDocumentsDisabled"
+                class="apos-export__toggle"
+                @toggle="toggleRelatedDocuments"
+              />
+            </div>
+          </div>
+
+          <div
+            v-show="!relatedDocumentsDisabled"
+            class="apos-export__section"
+          >
+            <div class="apos-export__settings">
+              {{ $t('aposImportExport:exportModalIncludeRelatedSettings') }}
+            </div>
+            <div class="apos-export__separator" />
+            <div class="apos-export__settings-row apos-export__settings-row--column">
+              <div class="apos-export__related-description">
+                {{ $t('aposImportExport:exportModalRelatedDocumentDescription') }}
+              </div>
+              <div v-if="relatedTypes && relatedTypes.length">
+                <AposCheckbox
+                  v-for="relatedType in relatedTypes"
+                  :key="relatedType"
+                  v-model="checkedProxy"
+                  tabindex="-1"
+                  :choice="{
+                    value: relatedType,
+                    label: getRelatedTypeLabel(relatedType)
+                  }"
+                  :field="{
+                    label: getRelatedTypeLabel(relatedType),
+                    name: relatedType
+                  }"
+                  @updated="checkRelatedTypes"
+                />
+              </div>
+              <div v-else>
+                {{ $t('aposImportExport:exportModalNoRelatedTypes') }}
+              </div>
+            </div>
+          </div>
+
+          <div class="apos-export__separator apos-export__separator--full-width" />
+
+          <div class="apos-export__btns">
+            <AposButton
+              class="apos-export__btn"
+              label="apostrophe:cancel"
+              @click="cancel"
+            />
+            <AposButton
+              ref="exportDocs"
+              icon="apos-import-export-download-icon"
+              class="apos-export__btn"
+              label="aposImportExport:export"
+              type="primary"
+              @click="exportDocs"
+            />
+          </div>
+        </template>
+      </AposModalBody>
+    </template>
+  </AposModal>
+</template>
+
+<script>
+export default {
+  props: {
+    moduleName: {
+      type: String,
+      default: ''
+    },
+    count: {
+      type: Number,
+      default: 1
+    }
+  },
+
+  emits: [ 'change', 'safe-close', 'modal-result' ],
+
+  data() {
+    return {
+      modal: {
+        active: false,
+        showModal: false,
+        disableHeader: true
+      },
+      formValues: null,
+      relatedDocumentsDisabled: true,
+      relatedChildrenDisabled: true,
+      relatedTypes: null,
+      checkedRelatedTypes: [],
+      type: this.moduleName
+    };
+  },
+
+  computed: {
+    moduleLabel() {
+      const moduleOptions = window.apos.modules[this.moduleName];
+      const label = this.count > 1 ? moduleOptions.pluralLabel : moduleOptions.label;
+      return this.$t(label).toLowerCase();
+    },
+
+    checkedProxy: {
+      get() {
+        return this.checkedRelatedTypes;
+      },
+      set(val) {
+        this.$emit('change', val);
+      }
+    }
+  },
+
+  async mounted() {
+    this.modal.active = true;
+
+    if (this.type === '@apostrophecms/page') {
+      this.type = this.$attrs.doc?.type;
+    }
+  },
+
+  methods: {
+    ready() {
+      this.$refs.exportDocs.$el.querySelector('button').focus();
+    },
+    exportDocs() {
+      this.modal.showModal = false;
+      const result = true;
+      this.$emit('modal-result', result);
+    },
+    async cancel() {
+      this.modal.showModal = false;
+      this.$emit('modal-result', false);
+    },
+    async toggleRelatedDocuments() {
+      this.relatedDocumentsDisabled = !this.relatedDocumentsDisabled;
+
+      if (!this.relatedDocumentsDisabled && this.relatedTypes === null) {
+        this.relatedTypes = await window.apos.http.get('/api/v1/@apostrophecms/import-export/related', {
+          busy: true,
+          qs: {
+            type: this.type
+          }
+        });
+      }
+    },
+    toggleRelatedChildren() {
+      this.relatedChildrenDisabled = !this.relatedChildrenDisabled;
+    },
+    checkRelatedTypes(evt) {
+      if (evt.target.checked) {
+        this.checkedRelatedTypes.push(evt.target.value);
+      } else {
+        this.checkedRelatedTypes = this.checkedRelatedTypes.filter(relatedType => relatedType !== evt.target.value);
+      }
+    },
+    getRelatedTypeLabel(moduleName) {
+      const moduleOptions = window.apos.modules[moduleName];
+      return this.$t(moduleOptions.label);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.apos-export {
+  z-index: $z-index-modal;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+::v-deep .apos-modal__inner {
+  top: auto;
+  right: auto;
+  bottom: auto;
+  left: auto;
+  height: auto;
+  text-align: left;
+}
+
+::v-deep .apos-modal__overlay {
+  .apos-modal+.apos-export & {
+    display: block;
+  }
+}
+
+::v-deep .apos-modal__body {
+  padding: 20px 30px;
+  width: 335px;
+}
+
+::v-deep .apos-modal__body-main {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+}
+
+::v-deep .apos-toggle__slider {
+  display: flex;
+}
+
+.apos-export__heading {
+  @include type-title;
+  line-height: var(--a-line-tall);
+  margin: 0;
+  text-transform: capitalize;
+}
+
+.apos-export__description {
+  @include type-base;
+  font-size: var(--a-type-large);
+  text-align: left;
+  line-height: var(--a-line-tallest);
+}
+
+.apos-export__section {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  min-width: 100%;
+  font-size: var(--a-type-large);
+}
+
+.apos-export__settings {
+  font-size: var(--a-type-large);
+  font-weight: 600;
+  color: var(--a-base-3);
+  margin-top: 20px;
+}
+
+.apos-export__settings-row {
+  font-size: var(--a-type-large);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 70px;
+  height: 43px;
+  width: 100%;
+}
+
+.apos-export__settings-row--column {
+  flex-direction: column;
+  gap: 20px;
+  align-items: baseline;
+  height: auto;
+  margin-bottom: 20px;
+}
+
+.apos-export__separator {
+  background-color: var(--a-base-8);
+  position: relative;
+  height: 1px;
+  width: 100%;
+  margin: 10px 0;
+}
+
+.apos-export__separator--full-width::before {
+  content: "";
+  background-color: var(--a-base-8);
+  position: absolute;
+  height: 100%;
+  width: calc(100% + 60px);
+  left: -30px;
+  right: 0;
+}
+
+::v-deep .apos-schema .apos-field {
+  margin-bottom: $spacing-base;
+}
+
+.apos-export__btns {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 10px;
+  width: 100%;
+  gap: 20px;
+}
+</style>
diff --git a/ui/apos/components/AposExportPiecesModal.vue b/ui/apos/components/AposExportPiecesModal.vue
deleted file mode 100644
index 2ad9d571..00000000
--- a/ui/apos/components/AposExportPiecesModal.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<template>
-  <AposModal
-    :modal="modal"
-    class="apos-export-pieces"
-    v-on="{ esc: cancel }"
-    @no-modal="$emit('safe-close')"
-    @inactive="modal.active = false"
-    @show-modal="modal.showModal = true"
-    @ready="ready"
-  >
-    <template #main>
-      <AposModalBody>
-        <template #bodyMain>
-          <h2 class="apos-export-pieces__heading">
-            {{ $t('aposImportExport:export') }} {{ moduleLabel }}
-          </h2>
-          <p
-            class="apos-export-pieces__description"
-          >
-            {{ $t('aposImportExport:exportModalDescription', { count, type: moduleLabel }) }}
-          </p>
-          <div class="apos-export-pieces__btns">
-            <AposButton
-              class="apos-export-pieces__btn"
-              label="apostrophe:cancel"
-              @click="cancel"
-            />
-            <AposButton
-              ref="exportPieces"
-              class="apos-export-pieces__btn"
-              label="aposImportExport:export"
-              type="primary"
-              @click="exportPieces"
-            />
-          </div>
-        </template>
-      </AposModalBody>
-    </template>
-  </AposModal>
-</template>
-
-<script>
-export default {
-  props: {
-    moduleName: {
-      type: String,
-      default: ''
-    },
-    count: {
-      type: Number,
-      default: 1
-    }
-  },
-
-  emits: [ 'safe-close', 'modal-result' ],
-
-  data() {
-    return {
-      modal: {
-        active: false,
-        showModal: false,
-        disableHeader: true
-      },
-      formValues: null
-    };
-  },
-
-  computed: {
-    moduleLabel() {
-      const moduleOptions = window.apos.modules[this.moduleName];
-      const label = this.count > 1 ? moduleOptions.pluralLabel : moduleOptions.label;
-      return this.$t(label).toLowerCase();
-    }
-  },
-
-  async mounted() {
-    this.modal.active = true;
-  },
-
-  methods: {
-    ready() {
-      this.$refs.exportPieces.$el.querySelector('button').focus();
-    },
-    exportPieces() {
-      this.modal.showModal = false;
-      const result = true;
-      this.$emit('modal-result', result);
-    },
-    async cancel() {
-      this.modal.showModal = false;
-      this.$emit('modal-result', false);
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.apos-export-pieces {
-  z-index: $z-index-modal;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-::v-deep .apos-modal__inner {
-  top: auto;
-  right: auto;
-  bottom: auto;
-  left: auto;
-  max-width: 700px;
-  height: auto;
-  text-align: center;
-}
-
-::v-deep .apos-modal__overlay {
-  .apos-modal+.apos-export-pieces & {
-    display: block;
-  }
-}
-
-::v-deep .apos-modal__body {
-  padding: 60px;
-}
-
-::v-deep .apos-modal__body-main {
-  display: flex;
-  flex-direction: column;
-  align-items: baseline;
-}
-
-.apos-export-pieces__heading {
-  @include type-title;
-  line-height: var(--a-line-tall);
-  margin: 0;
-  text-transform: capitalize;
-}
-
-.apos-export-pieces__description {
-  @include type-base;
-  max-width: 370px;
-  line-height: var(--a-line-tallest);
-}
-
-::v-deep .apos-schema .apos-field {
-  margin-bottom: $spacing-base;
-}
-
-.apos-export-pieces__btns {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 10px;
-  width: 100%;
-  gap: 20px;
-}
-</style>