diff --git a/src/modals/ImportExportModal.js b/src/modals/ImportExportModal.js
index cb134d2..b6e083c 100644
--- a/src/modals/ImportExportModal.js
+++ b/src/modals/ImportExportModal.js
@@ -263,11 +263,13 @@ function ImportExportModal({ isOpen, onRequestClose }) {
               left: 0,
             }}
           >
-            <LoadingOverlay />
-            <LoadingBar
-              isLoading={isLoading}
-              loadingProgressRef={loadingProgressRef}
-            />
+            <LoadingOverlay bg="overlay" />
+            <Box sx={{ zIndex: 3, position: "absolute", width: "100%" }}>
+              <LoadingBar
+                isLoading={isLoading}
+                loadingProgressRef={loadingProgressRef}
+              />
+            </Box>
           </Box>
         )}
         <ErrorBanner error={error} onRequestClose={() => setError()} />
diff --git a/src/modals/SelectDataModal.js b/src/modals/SelectDataModal.js
index e716eb8..5cd94ff 100644
--- a/src/modals/SelectDataModal.js
+++ b/src/modals/SelectDataModal.js
@@ -276,7 +276,7 @@ function SelectDataModal({
             {confirmText}
           </Button>
         </Flex>
-        {isLoading && <LoadingOverlay />}
+        {isLoading && <LoadingOverlay bg="overlay" />}
       </Box>
     </Modal>
   );
diff --git a/src/modals/SettingsModal.js b/src/modals/SettingsModal.js
index 4572b12..1cc3db8 100644
--- a/src/modals/SettingsModal.js
+++ b/src/modals/SettingsModal.js
@@ -198,7 +198,7 @@ function SettingsModal({ isOpen, onRequestClose }) {
               </Text>
             </Flex>
           )}
-          {isLoading && <LoadingOverlay />}
+          {isLoading && <LoadingOverlay bg="overlay" />}
         </Flex>
       </Modal>
       <ConfirmModal