diff --git a/dist/index.js b/dist/index.js
index 869f0627..ed55a800 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -373,6 +373,7 @@
       exportHeadline: "Export Data",
       importHeadline: "Import Data",
       selectionDescription: "Select the data that you want to transfer.",
+      exportSelectionDescription: "Select the data that you want to export.",
       dataEntryDescription: "Enter this data on the other device.",
       dataEntryInputDescription: "Enter the data displayed on the other device.",
       notConnectedError: "You are not connected to any server.",
@@ -1843,11 +1844,14 @@
       this.showTransferDataInputModal = () => {
         this.presentedModal.value = 4 /* TransferDataInput */;
       };
+      this.showExportSelectionModal = () => {
+        this.presentedModal.value = 6 /* ExportFileSelection */;
+      };
       this.showExportModal = () => {
-        this.presentedModal.value = 6 /* ExportModal */;
+        this.presentedModal.value = 7 /* Export */;
       };
       this.showImportModal = () => {
-        this.presentedModal.value = 7 /* ImportModal */;
+        this.presentedModal.value = 8 /* Import */;
       };
       this.prepareReceivingData = () => {
         if (this.cannotPrepareToReceive.value == true) return;
@@ -6691,7 +6695,26 @@
       coreViewModel2,
       connectionViewModel2,
       fileTransferViewModel2
-    ), FileSelectionModal(coreViewModel2, fileTransferViewModel2), TransferDataDisplayModal(coreViewModel2, fileTransferViewModel2), TransferDisplayModal(coreViewModel2, fileTransferViewModel2), TransferDataInputModal(coreViewModel2, fileTransferViewModel2), DataReceptionModal(coreViewModel2, fileTransferViewModel2), ExportModal(coreViewModel2, fileTransferViewModel2), ImportModal(coreViewModel2, fileTransferViewModel2));
+    ), FileSelectionModal(coreViewModel2, fileTransferViewModel2), TransferDataDisplayModal(coreViewModel2, fileTransferViewModel2), TransferDisplayModal(coreViewModel2, fileTransferViewModel2), TransferDataInputModal(coreViewModel2, fileTransferViewModel2), DataReceptionModal(coreViewModel2, fileTransferViewModel2), ExportFileSelectionModal(coreViewModel2, fileTransferViewModel2), ExportModal(coreViewModel2, fileTransferViewModel2), ImportModal(coreViewModel2, fileTransferViewModel2));
+  }
+  function OptionEntry(fileOption, fileTransferViewModel2) {
+    const isSelected = new State(false);
+    if (fileTransferViewModel2.selectedPaths.value.has(fileOption.path)) {
+      isSelected.value = true;
+    }
+    isSelected.subscribeSilent((isSelected2) => {
+      if (isSelected2 == true) {
+        fileTransferViewModel2.selectedPaths.add(fileOption.path);
+      } else {
+        fileTransferViewModel2.selectedPaths.remove(fileOption.path);
+      }
+    });
+    function toggle() {
+      isSelected.value = !isSelected.value;
+    }
+    return /* @__PURE__ */ createElement("button", { class: "tile", "toggle:selected": isSelected, "on:click": toggle }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { class: "ellipsis" }, fileOption.label), /* @__PURE__ */ createElement("span", { class: "secondary ellipsis" }, StorageModel.pathComponentsToString(
+      ...fileOption.path
+    ))));
   }
   function DirectionSelectionModal(coreViewModel2, connectionViewModel2, fileTransferViewModel2) {
     const isPresented = createProxyState(
@@ -6740,7 +6763,7 @@
         "button",
         {
           class: "tile",
-          "on:click": fileTransferViewModel2.showExportModal
+          "on:click": fileTransferViewModel2.showExportSelectionModal
         },
         /* @__PURE__ */ createElement("span", { class: "icon" }, "file_save"),
         /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, coreViewModel2.translations.dataTransferModal.exportButton)),
@@ -6762,25 +6785,6 @@
     const OptionConverter = (fileOption) => {
       return OptionEntry(fileOption, fileTransferViewModel2);
     };
-    function OptionEntry(fileOption, fileTransferViewModel3) {
-      const isSelected = new State(false);
-      if (fileTransferViewModel3.selectedPaths.value.has(fileOption.path)) {
-        isSelected.value = true;
-      }
-      isSelected.subscribeSilent((isSelected2) => {
-        if (isSelected2 == true) {
-          fileTransferViewModel3.selectedPaths.add(fileOption.path);
-        } else {
-          fileTransferViewModel3.selectedPaths.remove(fileOption.path);
-        }
-      });
-      function toggle() {
-        isSelected.value = !isSelected.value;
-      }
-      return /* @__PURE__ */ createElement("button", { class: "tile", "toggle:selected": isSelected, "on:click": toggle }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { class: "ellipsis" }, fileOption.label), /* @__PURE__ */ createElement("span", { class: "secondary ellipsis" }, StorageModel.pathComponentsToString(
-        ...fileOption.path
-      ))));
-    }
     const isPresented = createProxyState(
       [fileTransferViewModel2.presentedModal],
       () => fileTransferViewModel2.presentedModal.value == 1 /* FileSelection */
@@ -6948,10 +6952,54 @@
       }
     )), /* @__PURE__ */ createElement("button", { "on:click": ViewController.reload }, coreViewModel2.translations.general.reloadAppButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "refresh"))));
   }
+  function ExportFileSelectionModal(coreViewModel2, fileTransferViewModel2) {
+    const OptionConverter = (fileOption) => {
+      return OptionEntry(fileOption, fileTransferViewModel2);
+    };
+    const isPresented = createProxyState(
+      [fileTransferViewModel2.presentedModal],
+      () => fileTransferViewModel2.presentedModal.value == 6 /* ExportFileSelection */
+    );
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.exportHeadline), /* @__PURE__ */ createElement("span", { class: "secondary" }, coreViewModel2.translations.dataTransferModal.exportSelectionDescription), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("h3", null, coreViewModel2.translations.dataTransferModal.generalHeadline), /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "flex-column gap content-margin-bottom",
+        "children:append": [
+          fileTransferViewModel2.generalFileOptions,
+          OptionConverter
+        ]
+      }
+    ), /* @__PURE__ */ createElement("h3", null, coreViewModel2.translations.dataTransferModal.chatsHeadline), /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "flex-column gap",
+        "children:append": [
+          fileTransferViewModel2.chatFileOptions,
+          OptionConverter
+        ]
+      }
+    )), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "flex",
+        "on:click": fileTransferViewModel2.showDirectionSelectionModal
+      },
+      coreViewModel2.translations.general.backButton
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "primary flex",
+        "on:click": fileTransferViewModel2.showExportModal,
+        "toggle:disabled": fileTransferViewModel2.hasNoPathsSelected
+      },
+      coreViewModel2.translations.general.continueButton,
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_forward")
+    ))));
+  }
   function ExportModal(coreViewModel2, fileTransferViewModel2) {
     const isPresented = createProxyState(
       [fileTransferViewModel2.presentedModal],
-      () => fileTransferViewModel2.presentedModal.value == 6 /* ExportModal */
+      () => fileTransferViewModel2.presentedModal.value == 7 /* Export */
     );
     return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.exportHeadline), /* @__PURE__ */ createElement("label", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "key"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", { class: "secondary" }, coreViewModel2.translations.dataTransferModal.exportKey), /* @__PURE__ */ createElement(
       "input",
@@ -6969,7 +7017,7 @@
       "button",
       {
         class: "flex",
-        "on:click": fileTransferViewModel2.showDirectionSelectionModal
+        "on:click": fileTransferViewModel2.showExportSelectionModal
       },
       coreViewModel2.translations.general.backButton
     ), /* @__PURE__ */ createElement(
@@ -6986,7 +7034,7 @@
   function ImportModal(coreViewModel2, fileTransferViewModel2) {
     const isPresented = createProxyState(
       [fileTransferViewModel2.presentedModal],
-      () => fileTransferViewModel2.presentedModal.value == 7 /* ImportModal */
+      () => fileTransferViewModel2.presentedModal.value == 8 /* Import */
     );
     return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresented }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, coreViewModel2.translations.dataTransferModal.importHeadline), /* @__PURE__ */ createElement(
       "p",
diff --git a/src/View/Modals/dataTransferModal.tsx b/src/View/Modals/dataTransferModal.tsx
index c15cdf86..c4a9e9b6 100644
--- a/src/View/Modals/dataTransferModal.tsx
+++ b/src/View/Modals/dataTransferModal.tsx
@@ -9,6 +9,7 @@ import CoreViewModel from "../../ViewModel/Global/coreViewModel";
 import ConnectionViewModel from "../../ViewModel/Global/connectionViewModel";
 import StorageModel from "../../Model/Global/storageModel";
 
+// MAIN
 export function DataTransferModalWrapper(
     coreViewModel: CoreViewModel,
     connectionViewModel: ConnectionViewModel,
@@ -23,134 +24,170 @@ export function DataTransferModalWrapper(
             )}
             {FileSelectionModal(coreViewModel, fileTransferViewModel)}
             {TransferDataDisplayModal(coreViewModel, fileTransferViewModel)}
-            {TransferDisplayModal(coreViewModel, fileTransferViewModel)}
-            {TransferDataInputModal(coreViewModel, fileTransferViewModel)}
-            {DataReceptionModal(coreViewModel, fileTransferViewModel)}
-            {ExportModal(coreViewModel, fileTransferViewModel)}
-            {ImportModal(coreViewModel, fileTransferViewModel)}
-        </div>
+    {TransferDisplayModal(coreViewModel, fileTransferViewModel)}
+    {TransferDataInputModal(coreViewModel, fileTransferViewModel)}
+    {DataReceptionModal(coreViewModel, fileTransferViewModel)}
+    {ExportFileSelectionModal(coreViewModel, fileTransferViewModel)}
+    {ExportModal(coreViewModel, fileTransferViewModel)}
+    {ImportModal(coreViewModel, fileTransferViewModel)}
+</div>
     );
 }
 
+// COMPONENTS
+function OptionEntry(
+    fileOption: FileTransferOption,
+    fileTransferViewModel: FileTransferViewModel,
+) {
+    const isSelected = new React.State(false);
+    if (fileTransferViewModel.selectedPaths.value.has(fileOption.path)) {
+	isSelected.value = true;
+    }
+    isSelected.subscribeSilent((isSelected) => {
+	if (isSelected == true) {
+	    fileTransferViewModel.selectedPaths.add(fileOption.path);
+	} else {
+	    fileTransferViewModel.selectedPaths.remove(fileOption.path);
+	}
+    });
+    function toggle() {
+	isSelected.value = !isSelected.value;
+    }
+
+    return (
+	<button class="tile" toggle:selected={isSelected} on:click={toggle}>
+	    <div>
+		<b class="ellipsis">{fileOption.label}</b>
+		<span class="secondary ellipsis">
+		    {StorageModel.pathComponentsToString(
+			...fileOption.path,
+		    )}
+		</span>
+	    </div>
+	</button>
+    );
+}
+
+// MODALS
 function DirectionSelectionModal(
     coreViewModel: CoreViewModel,
     connectionViewModel: ConnectionViewModel,
     fileTransferViewModel: FileTransferViewModel,
 ) {
     const isPresented = React.createProxyState(
-        [fileTransferViewModel.presentedModal],
-        () =>
-            fileTransferViewModel.presentedModal.value ==
-            FileTransferModals.DirectionSelection,
+	[fileTransferViewModel.presentedModal],
+	() =>
+	fileTransferViewModel.presentedModal.value ==
+	FileTransferModals.DirectionSelection,
     );
 
     const isDisconnected = React.createProxyState(
-        [connectionViewModel.isConnected],
-        () => connectionViewModel.isConnected.value == false,
+	[connectionViewModel.isConnected],
+	() => connectionViewModel.isConnected.value == false,
     );
 
     return (
-        <div class="modal" toggle:open={isPresented}>
-            <div>
-                <main>
-                    <h2>
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .transferDataHeadline
-                        }
-                    </h2>
+	<div class="modal" toggle:open={isPresented}>
+	    <div>
+		<main>
+		    <h2>
+			{
+			    coreViewModel.translations.dataTransferModal
+			    .transferDataHeadline
+			}
+		    </h2>
 
-                    <p
-                        class="error"
-                        toggle:hidden={connectionViewModel.isConnected}
-                    >
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .notConnectedError
-                        }
-                    </p>
+		    <p
+			class="error"
+			toggle:hidden={connectionViewModel.isConnected}
+		    >
+			{
+			    coreViewModel.translations.dataTransferModal
+			    .notConnectedError
+			}
+		    </p>
 
-                    <div
-                        class="flex-column gap content-margin-bottom"
-                        toggle:hidden={isDisconnected}
-                    >
-                        <button
-                            class="tile"
-                            on:click={
-                                fileTransferViewModel.showFileSelectionModal
-                            }
-                        >
-                            <span class="icon">share_windows</span>
-                            <div>
-                                <b>
-                                    {
-                                        coreViewModel.translations
-                                            .dataTransferModal
-                                            .fromThisDeviceButton
-                                    }
-                                </b>
-                            </div>
-                            <span class="icon">arrow_forward</span>
-                        </button>
-                        <button
-                            class="tile"
-                            on:click={
-                                fileTransferViewModel.showTransferDataInputModal
-                            }
-                        >
-                            <span class="icon">cloud_download</span>
-                            <div>
-                                <b>
-                                    {
-                                        coreViewModel.translations
-                                            .dataTransferModal
-                                            .toThisDeviceButton
-                                    }
-                                </b>
-                            </div>
-                            <span class="icon">arrow_forward</span>
-                        </button>
+		    <div
+			class="flex-column gap content-margin-bottom"
+			toggle:hidden={isDisconnected}
+		    >
+			<button
+			    class="tile"
+			    on:click={
+				fileTransferViewModel.showFileSelectionModal
+			    }
+			>
+			    <span class="icon">share_windows</span>
+			    <div>
+				<b>
+				    {
+					coreViewModel.translations
+					.dataTransferModal
+					.fromThisDeviceButton
+				    }
+				</b>
+			    </div>
+			    <span class="icon">arrow_forward</span>
+			</button>
+			<button
+			    class="tile"
+			    on:click={
+				fileTransferViewModel.showTransferDataInputModal
+			    }
+			>
+			    <span class="icon">cloud_download</span>
+			    <div>
+				<b>
+				    {
+					coreViewModel.translations
+					.dataTransferModal
+					.toThisDeviceButton
+				    }
+				</b>
+			    </div>
+			    <span class="icon">arrow_forward</span>
+			</button>
 
-                        <hr></hr>
+			<hr></hr>
 
-                        <button
-                            class="tile"
-                            on:click={fileTransferViewModel.showExportModal}
-                        >
-                            <span class="icon">file_save</span>
-                            <div>
-                                <b>
-                                    {
-                                        coreViewModel.translations
-                                            .dataTransferModal.exportButton
-                                    }
-                                </b>
-                            </div>
-                            <span class="icon">arrow_forward</span>
-                        </button>
-                        <button
-                            class="tile"
-                            on:click={fileTransferViewModel.showImportModal}
-                        >
-                            <span class="icon">upload_file</span>
-                            <div>
-                                <b>
-                                    {
-                                        coreViewModel.translations
-                                            .dataTransferModal.importButton
-                                    }
-                                </b>
-                            </div>
-                            <span class="icon">arrow_forward</span>
-                        </button>
-                    </div>
-                </main>
-                <button on:click={fileTransferViewModel.close}>
-                    {coreViewModel.translations.general.closeButton}
-                    <span class="icon">close</span>
-                </button>
-            </div>
-        </div>
+			<button
+			    class="tile"
+			    on:click={fileTransferViewModel.showExportSelectionModal}
+			>
+			    <span class="icon">file_save</span>
+			    <div>
+				<b>
+				    {
+					coreViewModel.translations
+					.dataTransferModal.exportButton
+				    }
+				</b>
+			    </div>
+			    <span class="icon">arrow_forward</span>
+			</button>
+			<button
+			    class="tile"
+			    on:click={fileTransferViewModel.showImportModal}
+			>
+			    <span class="icon">upload_file</span>
+			    <div>
+				<b>
+				    {
+					coreViewModel.translations
+					.dataTransferModal.importButton
+				    }
+				</b>
+			    </div>
+			    <span class="icon">arrow_forward</span>
+			</button>
+		    </div>
+		</main>
+		<button on:click={fileTransferViewModel.close}>
+		    {coreViewModel.translations.general.closeButton}
+		    <span class="icon">close</span>
+		</button>
+	    </div>
+	</div>
     );
 }
 
@@ -158,124 +195,90 @@ function FileSelectionModal(
     coreViewModel: CoreViewModel,
     fileTransferViewModel: FileTransferViewModel,
 ) {
-    // option
     const OptionConverter: React.StateItemConverter<FileTransferOption> = (
-        fileOption: FileTransferOption,
+	fileOption: FileTransferOption,
     ) => {
-        return OptionEntry(fileOption, fileTransferViewModel);
+	return OptionEntry(fileOption, fileTransferViewModel);
     };
 
-    function OptionEntry(
-        fileOption: FileTransferOption,
-        fileTransferViewModel: FileTransferViewModel,
-    ) {
-        const isSelected = new React.State(false);
-        if (fileTransferViewModel.selectedPaths.value.has(fileOption.path)) {
-            isSelected.value = true;
-        }
-        isSelected.subscribeSilent((isSelected) => {
-            if (isSelected == true) {
-                fileTransferViewModel.selectedPaths.add(fileOption.path);
-            } else {
-                fileTransferViewModel.selectedPaths.remove(fileOption.path);
-            }
-        });
-        function toggle() {
-            isSelected.value = !isSelected.value;
-        }
-
-        return (
-            <button class="tile" toggle:selected={isSelected} on:click={toggle}>
-                <div>
-                    <b class="ellipsis">{fileOption.label}</b>
-                    <span class="secondary ellipsis">
-                        {StorageModel.pathComponentsToString(
-                            ...fileOption.path,
-                        )}
-                    </span>
-                </div>
-            </button>
-        );
-    }
-
     // state
     const isPresented = React.createProxyState(
-        [fileTransferViewModel.presentedModal],
-        () =>
-            fileTransferViewModel.presentedModal.value ==
-            FileTransferModals.FileSelection,
+	[fileTransferViewModel.presentedModal],
+	() =>
+	fileTransferViewModel.presentedModal.value ==
+	FileTransferModals.FileSelection,
     );
 
     return (
-        <div class="modal" toggle:open={isPresented}>
-            <div>
-                <main>
-                    <h2>
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .sendHeadline
-                        }
-                    </h2>
-                    <span class="secondary">
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .selectionDescription
-                        }
-                    </span>
+	<div class="modal" toggle:open={isPresented}>
+	    <div>
+		<main>
+		    <h2>
+			{
+			    coreViewModel.translations.dataTransferModal
+			    .sendHeadline
+			}
+		    </h2>
+		    <span class="secondary">
+			{
+			    coreViewModel.translations.dataTransferModal
+			    .selectionDescription
+			}
+		    </span>
 
-                    <hr></hr>
+		    <hr></hr>
 
-                    <h3>
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .generalHeadline
-                        }
-                    </h3>
-                    <div
-                        class="flex-column gap content-margin-bottom"
-                        children:append={[
-                            fileTransferViewModel.generalFileOptions,
-                            OptionConverter,
-                        ]}
-                    ></div>
+		    <h3>
+			{
+			    coreViewModel.translations.dataTransferModal
+			    .generalHeadline
+			}
+		    </h3>
+		    <div
+			class="flex-column gap content-margin-bottom"
+			children:append={[
+			    fileTransferViewModel.generalFileOptions,
+			    OptionConverter,
+			]}
+		    ></div>
 
-                    <h3>
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .chatsHeadline
-                        }
-                    </h3>
-                    <div
-                        class="flex-column gap"
-                        children:append={[
-                            fileTransferViewModel.chatFileOptions,
-                            OptionConverter,
-                        ]}
-                    ></div>
-                </main>
-                <div class="flex-row width-100">
-                    <button
-                        class="flex"
-                        on:click={
-                            fileTransferViewModel.showDirectionSelectionModal
-                        }
-                    >
-                        {coreViewModel.translations.general.backButton}
-                    </button>
-                    <button
-                        class="primary flex"
-                        on:click={fileTransferViewModel.showTransferDataModal}
-                        toggle:disabled={
-                            fileTransferViewModel.hasNoPathsSelected
-                        }
-                    >
-                        {coreViewModel.translations.general.continueButton}
-                        <span class="icon">arrow_forward</span>
-                    </button>
-                </div>
-            </div>
-        </div>
-    );
+		<h3>
+		    {
+			coreViewModel.translations.dataTransferModal
+			.chatsHeadline
+		    }
+		</h3>
+		<div
+		    class="flex-column gap"
+		    children:append={[
+			fileTransferViewModel.chatFileOptions,
+			OptionConverter,
+		    ]}
+		></div>
+	    </main>
+	    <div class="flex-row width-100">
+		<button
+		    class="flex"
+		    on:click={
+			fileTransferViewModel.showDirectionSelectionModal
+		    }
+		>
+		    {coreViewModel.translations.general.backButton}
+		</button>
+		<button
+		    class="primary flex"
+		    on:click={fileTransferViewModel.showTransferDataModal}
+		    toggle:disabled={
+			fileTransferViewModel.hasNoPathsSelected
+		    }
+		>
+		    {coreViewModel.translations.general.continueButton}
+		    <span class="icon">arrow_forward</span>
+		</button>
+	    </div>
+	</div>
+    </div>
+);
 }
 
 function TransferDataDisplayModal(
@@ -283,82 +286,82 @@ function TransferDataDisplayModal(
     fileTransferViewModel: FileTransferViewModel,
 ) {
     const isPresented = React.createProxyState(
-        [fileTransferViewModel.presentedModal],
-        () =>
-            fileTransferViewModel.presentedModal.value ==
-            FileTransferModals.TransferDataDisplay,
+	[fileTransferViewModel.presentedModal],
+	() =>
+	fileTransferViewModel.presentedModal.value ==
+	FileTransferModals.TransferDataDisplay,
     );
 
     return (
-        <div class="modal" toggle:open={isPresented}>
-            <div>
-                <main>
-                    <h2>
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .sendHeadline
-                        }
-                    </h2>
+	<div class="modal" toggle:open={isPresented}>
+	    <div>
+		<main>
+		    <h2>
+			{
+			    coreViewModel.translations.dataTransferModal
+			    .sendHeadline
+			}
+		    </h2>
 
-                    <span class="secondary">
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .dataEntryDescription
-                        }
-                    </span>
+		    <span class="secondary">
+			{
+			    coreViewModel.translations.dataTransferModal
+			    .dataEntryDescription
+			}
+		    </span>
 
-                    <hr></hr>
+		    <hr></hr>
 
-                    <div class="flex-column gap content-margin-bottom">
-                        <div class="tile">
-                            <span class="icon">forum</span>
-                            <div>
-                                <span class="secondary">
-                                    {
-                                        coreViewModel.translations
-                                            .dataTransferModal
-                                            .transferChannelHeadline
-                                    }
-                                </span>
-                                <b
-                                    subscribe:innerText={
-                                        fileTransferViewModel.transferChannel
-                                    }
-                                ></b>
-                            </div>
-                        </div>
-                        <div class="tile">
-                            <span class="icon">key</span>
-                            <div>
-                                <span class="secondary">
-                                    {
-                                        coreViewModel.translations
-                                            .dataTransferModal
-                                            .transferKeyHeadline
-                                    }
-                                </span>
-                                <b
-                                    subscribe:innerText={
-                                        fileTransferViewModel.transferKey
-                                    }
-                                ></b>
-                            </div>
-                        </div>
-                    </div>
-                </main>
-                <div class="flex-row width-100">
-                    <button
-                        class="flex"
-                        on:click={fileTransferViewModel.showFileSelectionModal}
-                    >
-                        {coreViewModel.translations.general.backButton}
-                    </button>
-                    <button disabled class="flex">
-                        {coreViewModel.translations.general.waitingLabel}
-                    </button>
-                </div>
-            </div>
-        </div>
+		    <div class="flex-column gap content-margin-bottom">
+			<div class="tile">
+			    <span class="icon">forum</span>
+			    <div>
+				<span class="secondary">
+				    {
+					coreViewModel.translations
+					.dataTransferModal
+					.transferChannelHeadline
+				    }
+				</span>
+				<b
+				    subscribe:innerText={
+					fileTransferViewModel.transferChannel
+				    }
+				></b>
+			    </div>
+			</div>
+			<div class="tile">
+			    <span class="icon">key</span>
+			    <div>
+				<span class="secondary">
+				    {
+					coreViewModel.translations
+					.dataTransferModal
+					.transferKeyHeadline
+				    }
+				</span>
+				<b
+				    subscribe:innerText={
+					fileTransferViewModel.transferKey
+				    }
+				></b>
+			    </div>
+			</div>
+		    </div>
+		</main>
+		<div class="flex-row width-100">
+		    <button
+			class="flex"
+			on:click={fileTransferViewModel.showFileSelectionModal}
+		    >
+			{coreViewModel.translations.general.backButton}
+		    </button>
+		    <button disabled class="flex">
+			{coreViewModel.translations.general.waitingLabel}
+		    </button>
+		</div>
+	    </div>
+	</div>
     );
 }
 
@@ -367,77 +370,77 @@ function TransferDisplayModal(
     fileTransferViewModel: FileTransferViewModel,
 ) {
     const isPresented = React.createProxyState(
-        [fileTransferViewModel.presentedModal],
-        () =>
-            fileTransferViewModel.presentedModal.value ==
-            FileTransferModals.TransferDisplay,
+	[fileTransferViewModel.presentedModal],
+	() =>
+	fileTransferViewModel.presentedModal.value ==
+	FileTransferModals.TransferDisplay,
     );
 
     return (
-        <div class="modal" toggle:open={isPresented}>
-            <div>
-                <main>
-                    <h2>
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .transferDataHeadline
-                        }
-                    </h2>
+	<div class="modal" toggle:open={isPresented}>
+	    <div>
+		<main>
+		    <h2>
+			{
+			    coreViewModel.translations.dataTransferModal
+			    .transferDataHeadline
+			}
+		    </h2>
 
-                    <p
-                        class="secondary"
-                        subscribe:innerText={
-                            fileTransferViewModel.filesSentText
-                        }
-                    ></p>
+		    <p
+			class="secondary"
+			subscribe:innerText={
+			    fileTransferViewModel.filesSentText
+			}
+		    ></p>
 
-                    <p
-                        class="secondary"
-                        toggle:hidden={
-                            fileTransferViewModel.didNotFinishSending
-                        }
-                    >
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .allFilesSent
-                        }
-                    </p>
+		<p
+		    class="secondary"
+		    toggle:hidden={
+			fileTransferViewModel.didNotFinishSending
+		    }
+		>
+		    {
+			coreViewModel.translations.dataTransferModal
+			.allFilesSent
+		    }
+		</p>
 
-                    <hr></hr>
+		<hr></hr>
 
-                    <div
-                        class="tile flex-column align-start"
-                        children:append={[
-                            fileTransferViewModel.filePathsSent,
-                            StringToTextSpan,
-                        ]}
-                    ></div>
-                </main>
-                <div class="flex-row width-100">
-                    <button
-                        class="flex"
-                        on:click={fileTransferViewModel.initiateTransfer}
-                    >
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .sendAgainButton
-                        }
-                        <span class="icon">restart_alt</span>
-                    </button>
-                    <button
-                        class="flex"
-                        on:click={fileTransferViewModel.close}
-                        toggle:disabled={
-                            fileTransferViewModel.didNotFinishSending
-                        }
-                    >
-                        {coreViewModel.translations.general.closeButton}
-                        <span class="icon">close</span>
-                    </button>
-                </div>
-            </div>
-        </div>
-    );
+		<div
+		    class="tile flex-column align-start"
+		    children:append={[
+			fileTransferViewModel.filePathsSent,
+			StringToTextSpan,
+		    ]}
+		></div>
+	    </main>
+	    <div class="flex-row width-100">
+		<button
+		    class="flex"
+		    on:click={fileTransferViewModel.initiateTransfer}
+		>
+		    {
+			coreViewModel.translations.dataTransferModal
+			.sendAgainButton
+		    }
+		    <span class="icon">restart_alt</span>
+		</button>
+		<button
+		    class="flex"
+		    on:click={fileTransferViewModel.close}
+		    toggle:disabled={
+			fileTransferViewModel.didNotFinishSending
+		    }
+		>
+		    {coreViewModel.translations.general.closeButton}
+		    <span class="icon">close</span>
+		</button>
+	    </div>
+	</div>
+    </div>
+);
 }
 
 function TransferDataInputModal(
@@ -445,97 +448,97 @@ function TransferDataInputModal(
     fileTransferViewModel: FileTransferViewModel,
 ) {
     const isPresented = React.createProxyState(
-        [fileTransferViewModel.presentedModal],
-        () =>
-            fileTransferViewModel.presentedModal.value ==
-            FileTransferModals.TransferDataInput,
+	[fileTransferViewModel.presentedModal],
+	() =>
+	fileTransferViewModel.presentedModal.value ==
+	FileTransferModals.TransferDataInput,
     );
 
     return (
-        <div class="modal" toggle:open={isPresented}>
-            <div>
-                <main>
-                    <h2>
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .receiveHeadline
-                        }
-                    </h2>
+	<div class="modal" toggle:open={isPresented}>
+	    <div>
+		<main>
+		    <h2>
+			{
+			    coreViewModel.translations.dataTransferModal
+			    .receiveHeadline
+			}
+		    </h2>
 
-                    <span class="secondary">
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .dataEntryInputDescription
-                        }
-                    </span>
+		    <span class="secondary">
+			{
+			    coreViewModel.translations.dataTransferModal
+			    .dataEntryInputDescription
+			}
+		    </span>
 
-                    <hr></hr>
+		    <hr></hr>
 
-                    <div class="flex-column gap content-margin-bottom">
-                        <label class="tile">
-                            <span class="icon">forum</span>
-                            <div>
-                                <span class="secondary">
-                                    {
-                                        coreViewModel.translations
-                                            .dataTransferModal
-                                            .transferChannelHeadline
-                                    }
-                                </span>
-                                <input
-                                    on:enter={
-                                        fileTransferViewModel.prepareReceivingData
-                                    }
-                                    bind:value={
-                                        fileTransferViewModel.receivingTransferChannel
-                                    }
-                                ></input>
-                            </div>
-                        </label>
-                        <label class="tile">
-                            <span class="icon">key</span>
-                            <div>
-                                <span class="secondary">
-                                    {
-                                        coreViewModel.translations
-                                            .dataTransferModal
-                                            .transferKeyHeadline
-                                    }
-                                </span>
-                                <input
-                                    on:enter={
-                                        fileTransferViewModel.prepareReceivingData
-                                    }
-                                    bind:value={
-                                        fileTransferViewModel.receivingTransferKey
-                                    }
-                                ></input>
-                            </div>
-                        </label>
-                    </div>
-                </main>
-                <div class="flex-row width-100">
-                    <button
-                        class="flex"
-                        on:click={
-                            fileTransferViewModel.showDirectionSelectionModal
-                        }
-                    >
-                        {coreViewModel.translations.general.backButton}
-                    </button>
-                    <button
-                        class="primary flex"
-                        on:click={fileTransferViewModel.prepareReceivingData}
-                        toggle:disabled={
-                            fileTransferViewModel.cannotPrepareToReceive
-                        }
-                    >
-                        {coreViewModel.translations.general.continueButton}
-                        <span class="icon">arrow_forward</span>
-                    </button>
-                </div>
-            </div>
-        </div>
+		    <div class="flex-column gap content-margin-bottom">
+			<label class="tile">
+			    <span class="icon">forum</span>
+			    <div>
+				<span class="secondary">
+				    {
+					coreViewModel.translations
+					.dataTransferModal
+					.transferChannelHeadline
+				    }
+				</span>
+				<input
+				    on:enter={
+					fileTransferViewModel.prepareReceivingData
+				    }
+				    bind:value={
+					fileTransferViewModel.receivingTransferChannel
+				    }
+				></input>
+			    </div>
+			</label>
+			<label class="tile">
+			    <span class="icon">key</span>
+			    <div>
+				<span class="secondary">
+				    {
+					coreViewModel.translations
+					.dataTransferModal
+					.transferKeyHeadline
+				    }
+				</span>
+				<input
+				    on:enter={
+					fileTransferViewModel.prepareReceivingData
+				    }
+				    bind:value={
+					fileTransferViewModel.receivingTransferKey
+				    }
+				></input>
+			    </div>
+			</label>
+		    </div>
+		</main>
+		<div class="flex-row width-100">
+		    <button
+			class="flex"
+			on:click={
+			    fileTransferViewModel.showDirectionSelectionModal
+			}
+		    >
+			{coreViewModel.translations.general.backButton}
+		    </button>
+		    <button
+			class="primary flex"
+			on:click={fileTransferViewModel.prepareReceivingData}
+			toggle:disabled={
+			    fileTransferViewModel.cannotPrepareToReceive
+			}
+		    >
+			{coreViewModel.translations.general.continueButton}
+			<span class="icon">arrow_forward</span>
+		    </button>
+		</div>
+	    </div>
+	</div>
     );
 }
 
@@ -544,47 +547,137 @@ function DataReceptionModal(
     fileTransferViewModel: FileTransferViewModel,
 ) {
     const isPresented = React.createProxyState(
-        [fileTransferViewModel.presentedModal],
-        () =>
-            fileTransferViewModel.presentedModal.value ==
-            FileTransferModals.ReceptionDisplay,
+	[fileTransferViewModel.presentedModal],
+	() =>
+	fileTransferViewModel.presentedModal.value ==
+	FileTransferModals.ReceptionDisplay,
     );
 
     return (
-        <div class="modal" toggle:open={isPresented}>
-            <div>
-                <main>
-                    <h2>
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .receiveHeadline
-                        }
-                    </h2>
+	<div class="modal" toggle:open={isPresented}>
+	    <div>
+		<main>
+		    <h2>
+			{
+			    coreViewModel.translations.dataTransferModal
+			    .receiveHeadline
+			}
+		    </h2>
 
-                    <p
-                        class="secondary"
-                        subscribe:innerText={
-                            fileTransferViewModel.filesReceivedText
-                        }
-                    ></p>
+		    <p
+			class="secondary"
+			subscribe:innerText={
+			    fileTransferViewModel.filesReceivedText
+			}
+		    ></p>
 
-                    <hr></hr>
+		<hr></hr>
 
-                    <div
-                        class="tile flex-column align-start"
-                        children:append={[
-                            fileTransferViewModel.filePathsReceived,
-                            StringToTextSpan,
-                        ]}
-                    ></div>
-                </main>
-                <button on:click={ViewController.reload}>
-                    {coreViewModel.translations.general.reloadAppButton}
-                    <span class="icon">refresh</span>
-                </button>
-            </div>
-        </div>
+		<div
+		    class="tile flex-column align-start"
+		    children:append={[
+			fileTransferViewModel.filePathsReceived,
+			StringToTextSpan,
+		    ]}
+		></div>
+	    </main>
+	    <button on:click={ViewController.reload}>
+		{coreViewModel.translations.general.reloadAppButton}
+		<span class="icon">refresh</span>
+	    </button>
+	</div>
+    </div>
+);
+}
+
+function ExportFileSelectionModal(
+    coreViewModel: CoreViewModel,
+    fileTransferViewModel: FileTransferViewModel,
+) {
+    const OptionConverter: React.StateItemConverter<FileTransferOption> = (
+	fileOption: FileTransferOption,
+    ) => {
+	return OptionEntry(fileOption, fileTransferViewModel);
+    };
+
+    // state
+    const isPresented = React.createProxyState(
+	[fileTransferViewModel.presentedModal],
+	() =>
+	fileTransferViewModel.presentedModal.value ==
+	FileTransferModals.ExportFileSelection,
     );
+
+    return (
+	<div class="modal" toggle:open={isPresented}>
+	    <div>
+		<main>
+		    <h2>
+			{
+			    coreViewModel.translations.dataTransferModal
+			    .exportHeadline
+			}
+		    </h2>
+		    <span class="secondary">
+			{
+			    coreViewModel.translations.dataTransferModal
+			    .exportSelectionDescription
+			}
+		    </span>
+
+		    <hr></hr>
+
+		    <h3>
+			{
+			    coreViewModel.translations.dataTransferModal
+			    .generalHeadline
+			}
+		    </h3>
+		    <div
+			class="flex-column gap content-margin-bottom"
+			children:append={[
+			    fileTransferViewModel.generalFileOptions,
+			    OptionConverter,
+			]}
+		    ></div>
+
+		<h3>
+		    {
+			coreViewModel.translations.dataTransferModal
+			.chatsHeadline
+		    }
+		</h3>
+		<div
+		    class="flex-column gap"
+		    children:append={[
+			fileTransferViewModel.chatFileOptions,
+			OptionConverter,
+		    ]}
+		></div>
+	    </main>
+	    <div class="flex-row width-100">
+		<button
+		    class="flex"
+		    on:click={
+			fileTransferViewModel.showDirectionSelectionModal
+		    }
+		>
+		    {coreViewModel.translations.general.backButton}
+		</button>
+		<button
+		    class="primary flex"
+		    on:click={fileTransferViewModel.showExportModal}
+		    toggle:disabled={
+			fileTransferViewModel.hasNoPathsSelected
+		    }
+		>
+		    {coreViewModel.translations.general.continueButton}
+		    <span class="icon">arrow_forward</span>
+		</button>
+	    </div>
+	</div>
+    </div>
+);
 }
 
 function ExportModal(
@@ -592,82 +685,82 @@ function ExportModal(
     fileTransferViewModel: FileTransferViewModel,
 ) {
     const isPresented = React.createProxyState(
-        [fileTransferViewModel.presentedModal],
-        () =>
-            fileTransferViewModel.presentedModal.value ==
-            FileTransferModals.ExportModal,
+	[fileTransferViewModel.presentedModal],
+	() =>
+	fileTransferViewModel.presentedModal.value ==
+	FileTransferModals.Export,
     );
 
     return (
-        <div class="modal" toggle:open={isPresented}>
-            <div>
-                <main>
-                    <h2>
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .exportHeadline
-                        }
+	<div class="modal" toggle:open={isPresented}>
+	    <div>
+		<main>
+		    <h2>
+			{
+			    coreViewModel.translations.dataTransferModal
+			    .exportHeadline
+			}
 		    </h2>
 
-                        <label class="tile">
-                            <span class="icon">key</span>
-                            <div>
-                                <span class="secondary">
-                                    {
-                                        coreViewModel.translations
-                                            .dataTransferModal
-                                            .exportKey
-                                    }
-                                </span>
-                                <input
-                                    bind:value={
-                                        fileTransferViewModel.exportKey
-                                    }
-				    type="password"
-                                ></input>
-                            </div>
-                        </label>
-                        <label class="tile">
-                            <span class="icon">check_circle</span>
-                            <div>
-                                <span class="secondary">
-                                    {
-                                        coreViewModel.translations
-                                            .dataTransferModal
-                                            .exportKeyConfirmation
-                                    }
-                                </span>
-                                <input
-                                    bind:value={
-                                        fileTransferViewModel.exportKeyConfirmation
-				    }
-				    type="password"
-                                ></input>
-                            </div>
-                        </label>
-                </main>
-                <div class="flex-row width-100">
-                    <button
-                        class="flex"
-                        on:click={
-                            fileTransferViewModel.showDirectionSelectionModal
-                        }
-                    >
-                        {coreViewModel.translations.general.backButton}
-                    </button>
-                    <button
-                        class="primary flex"
-                        on:click={fileTransferViewModel}
-                        toggle:disabled={
-                            fileTransferViewModel.cannotExport
-                        }
-                    >
-                        {coreViewModel.translations.dataTransferModal.downloadFileButton}
-                        <span class="icon">download</span>
-                    </button>
-                </div>
-            </div>
-        </div>
+		    <label class="tile">
+			<span class="icon">key</span>
+			<div>
+			    <span class="secondary">
+				{
+				    coreViewModel.translations
+				    .dataTransferModal
+				    .exportKey
+				}
+			    </span>
+			    <input
+				bind:value={
+				    fileTransferViewModel.exportKey
+				}
+				type="password"
+			    ></input>
+			</div>
+		    </label>
+		    <label class="tile">
+			<span class="icon">check_circle</span>
+			<div>
+			    <span class="secondary">
+				{
+				    coreViewModel.translations
+				    .dataTransferModal
+				    .exportKeyConfirmation
+				}
+			    </span>
+			    <input
+				bind:value={
+				    fileTransferViewModel.exportKeyConfirmation
+				}
+				type="password"
+			    ></input>
+			</div>
+		    </label>
+		</main>
+		<div class="flex-row width-100">
+		    <button
+			class="flex"
+			on:click={
+			    fileTransferViewModel.showExportSelectionModal
+			}
+		    >
+			{coreViewModel.translations.general.backButton}
+		    </button>
+		    <button
+			class="primary flex"
+			on:click={fileTransferViewModel}
+			toggle:disabled={
+			    fileTransferViewModel.cannotExport
+			}
+		    >
+			{coreViewModel.translations.dataTransferModal.downloadFileButton}
+			<span class="icon">download</span>
+		    </button>
+		</div>
+	    </div>
+	</div>
     );
 }
 
@@ -676,45 +769,45 @@ function ImportModal(
     fileTransferViewModel: FileTransferViewModel,
 ) {
     const isPresented = React.createProxyState(
-        [fileTransferViewModel.presentedModal],
-        () =>
-            fileTransferViewModel.presentedModal.value ==
-            FileTransferModals.ImportModal,
+	[fileTransferViewModel.presentedModal],
+	() =>
+	fileTransferViewModel.presentedModal.value ==
+	FileTransferModals.Import,
     );
 
     return (
-        <div class="modal" toggle:open={isPresented}>
-            <div>
-                <main>
-                    <h2>
-                        {
-                            coreViewModel.translations.dataTransferModal
-                                .importHeadline
-                        }
-                    </h2>
+	<div class="modal" toggle:open={isPresented}>
+	    <div>
+		<main>
+		    <h2>
+			{
+			    coreViewModel.translations.dataTransferModal
+			    .importHeadline
+			}
+		    </h2>
 
-                    <p
-                        class="secondary"
-                        subscribe:innerText={
-                            fileTransferViewModel.filesReceivedText
-                        }
-                    ></p>
+		    <p
+			class="secondary"
+			subscribe:innerText={
+			    fileTransferViewModel.filesReceivedText
+			}
+		    ></p>
 
-                    <hr></hr>
+		<hr></hr>
 
-                    <div
-                        class="tile flex-column align-start"
-                        children:append={[
-                            fileTransferViewModel.filePathsReceived,
-                            StringToTextSpan,
-                        ]}
-                    ></div>
-                </main>
-                <button on:click={ViewController.reload}>
-                    {coreViewModel.translations.general.reloadAppButton}
-                    <span class="icon">refresh</span>
-                </button>
-            </div>
-        </div>
-    );
+		<div
+		    class="tile flex-column align-start"
+		    children:append={[
+			fileTransferViewModel.filePathsReceived,
+			StringToTextSpan,
+		    ]}
+		></div>
+	    </main>
+	    <button on:click={ViewController.reload}>
+		{coreViewModel.translations.general.reloadAppButton}
+		<span class="icon">refresh</span>
+	    </button>
+	</div>
+    </div>
+);
 }
diff --git a/src/View/translations.ts b/src/View/translations.ts
index 185183e1..57acb83c 100644
--- a/src/View/translations.ts
+++ b/src/View/translations.ts
@@ -109,6 +109,7 @@ const englishTranslations = {
         exportHeadline: "Export Data",
         importHeadline: "Import Data",
         selectionDescription: "Select the data that you want to transfer.",
+        exportSelectionDescription: "Select the data that you want to export.",
         dataEntryDescription: "Enter this data on the other device.",
         dataEntryInputDescription:
             "Enter the data displayed on the other device.",
diff --git a/src/ViewModel/Global/fileTransferViewModel.ts b/src/ViewModel/Global/fileTransferViewModel.ts
index f8c8427b..b046a455 100644
--- a/src/ViewModel/Global/fileTransferViewModel.ts
+++ b/src/ViewModel/Global/fileTransferViewModel.ts
@@ -157,12 +157,16 @@ export default class FileTransferViewModel extends Context {
         this.presentedModal.value = FileTransferModals.TransferDataInput;
     };
 
+    showExportSelectionModal = (): void => {
+        this.presentedModal.value = FileTransferModals.ExportFileSelection;
+    };
+
     showExportModal = (): void => {
-        this.presentedModal.value = FileTransferModals.ExportModal;
+        this.presentedModal.value = FileTransferModals.Export;
     };
 
     showImportModal = (): void => {
-        this.presentedModal.value = FileTransferModals.ImportModal;
+        this.presentedModal.value = FileTransferModals.Import;
     };
 
     prepareReceivingData = (): void => {
@@ -223,6 +227,7 @@ export enum FileTransferModals {
     ReceptionDisplay,
 
     // export
-    ExportModal,
-    ImportModal,
+    ExportFileSelection,
+    Export,
+    Import,
 }