diff --git a/src/ui/menu-ui-handler.ts b/src/ui/menu-ui-handler.ts
index 9d56549fa0a..7055143c5bd 100644
--- a/src/ui/menu-ui-handler.ts
+++ b/src/ui/menu-ui-handler.ts
@@ -441,19 +441,28 @@ export default class MenuUiHandler extends MessageUiHandler {
       case MenuOptions.SAVE_AND_QUIT:
         if (this.scene.currentBattle) {
           success = true;
+          const doSaveQuit = () => {
+            ui.setMode(Mode.LOADING, {
+              buttonActions: [], fadeOut: () =>
+                this.scene.gameData.saveAll(this.scene, true, true, true, true).then(() => {
+
+                  this.scene.reset(true);
+                })
+            });
+          };
           if (this.scene.currentBattle.turn > 1) {
             ui.showText(i18next.t("menuUiHandler:losingProgressionWarning"), null, () => {
               if (!this.active) {
                 this.showText("", 0);
                 return;
               }
-              ui.setOverlayMode(Mode.CONFIRM, () => this.scene.gameData.saveAll(this.scene, true, true, true, true).then(() => this.scene.reset(true)), () => {
+              ui.setOverlayMode(Mode.CONFIRM, doSaveQuit, () => {
                 ui.revertMode();
                 this.showText("", 0);
               }, false, -98);
             });
           } else {
-            this.scene.gameData.saveAll(this.scene, true, true, true, true).then(() => this.scene.reset(true));
+            doSaveQuit();
           }
         } else {
           error = true;
@@ -462,12 +471,14 @@ export default class MenuUiHandler extends MessageUiHandler {
       case MenuOptions.LOG_OUT:
         success = true;
         const doLogout = () => {
-          Utils.apiFetch("account/logout", true).then(res => {
-            if (!res.ok) {
-              console.error(`Log out failed (${res.status}: ${res.statusText})`);
-            }
-            Utils.removeCookie(Utils.sessionIdKey);
-            updateUserInfo().then(() => this.scene.reset(true, true));
+          ui.setMode(Mode.LOADING, {
+            buttonActions: [], fadeOut: () => Utils.apiFetch("account/logout", true).then(res => {
+              if (!res.ok) {
+                console.error(`Log out failed (${res.status}: ${res.statusText})`);
+              }
+              Utils.removeCookie(Utils.sessionIdKey);
+              updateUserInfo().then(() => this.scene.reset(true, true));
+            })
           });
         };
         if (this.scene.currentBattle) {
diff --git a/src/ui/modal-ui-handler.ts b/src/ui/modal-ui-handler.ts
index cecdacc1eb9..9340e1c17ed 100644
--- a/src/ui/modal-ui-handler.ts
+++ b/src/ui/modal-ui-handler.ts
@@ -83,6 +83,20 @@ export abstract class ModalUiHandler extends UiHandler {
   show(args: any[]): boolean {
     if (args.length >= 1 && "buttonActions" in args[0]) {
       super.show(args);
+      if ("fadeOut" in args[0]) {
+        const overlay = this.scene.add.rectangle((( (this.getWidth() + (this.getMargin()[0] - this.getMargin()[3]))) / 2), ((this.getHeight() + (this.getMargin()[1] - this.getMargin()[2])) / 2),this.scene.game.canvas.width ,this.scene.game.canvas.height , 0);
+        overlay.setName("rect-ui-overlay-modal");
+        overlay.setAlpha(0);
+        this.modalContainer.add(overlay);
+        this.modalContainer.moveTo(overlay,0);
+        this.scene.tweens.add({
+          targets: overlay,
+          alpha: 1,
+          duration: 250,
+          ease: "Sine.easeOut",
+          onComplete: args[0].fadeOut
+        });
+      }
 
       const config = args[0] as ModalConfig;