diff --git a/src/RootView.ts b/src/RootView.ts
index 2e68d181519d..a0317cdd4eaa 100644
--- a/src/RootView.ts
+++ b/src/RootView.ts
@@ -76,7 +76,7 @@ export class RootView implements ClassComponent {
 					height: "100%",
 				},
 			},
-			[m(".fill-absolute.noprint", { inert: modal.visible }, m(overlay)), m(modal), m(".main-view", { inert: modal.visible }, vnode.children)],
+			[m(overlay), m(modal), vnode.children],
 		)
 	}
 
diff --git a/src/common/gui/base/Modal.ts b/src/common/gui/base/Modal.ts
index 33452de7b6f1..a5780018828c 100644
--- a/src/common/gui/base/Modal.ts
+++ b/src/common/gui/base/Modal.ts
@@ -4,7 +4,7 @@ import { theme } from "../theme"
 import type { Shortcut } from "../../misc/KeyManager"
 import { keyManager } from "../../misc/KeyManager"
 import { windowFacade } from "../../misc/WindowFacade"
-import { insideRect, lastIndex, remove } from "@tutao/tutanota-utils"
+import { insideRect, remove } from "@tutao/tutanota-utils"
 import { LayerType } from "../../../RootView"
 import { assertMainOrNodeBoot } from "../../api/common/Env"
 
@@ -36,8 +36,12 @@ class Modal implements Component {
 			return m(
 				"#modal.fill-absolute",
 				{
-					"aria-modal": true,
-					inert: !this.visible,
+					oncreate: (_) => {
+						// const lastComponent = last(this.components)
+						// if (lastComponent) {
+						// 	lastComponent.component.backgroundClick(e)
+						// }
+					},
 					style: {
 						"z-index": LayerType.Modal,
 						display: this.visible ? "" : "none",
@@ -48,7 +52,6 @@ class Modal implements Component {
 						".fill-absolute",
 						{
 							key: wrapper.key,
-							inert: i !== lastIndex(array),
 							oncreate: (vnode) => {
 								// do not set visible=true already in display() because it leads to modal staying open in a second window in Chrome
 								// because onbeforeremove is not called in that case to set visible=false. this is probably an optimization in Chrome to reduce
@@ -74,11 +77,11 @@ class Modal implements Component {
 							style: {
 								zIndex: LayerType.Modal + 1 + i,
 							},
-							onbeforeremove: async (vnode) => {
+							onbeforeremove: (vnode) => {
 								if (wrapper.needsBg) {
 									this.closingComponents.push(wrapper.component)
 
-									await Promise.all([
+									return Promise.all([
 										this.addAnimation(vnode.dom as HTMLElement, false).then(() => {
 											remove(this.closingComponents, wrapper.component)
 
@@ -87,22 +90,16 @@ class Modal implements Component {
 											}
 										}),
 										wrapper.component.hideAnimation(),
-									])
+									]).then(() => {
+										m.redraw()
+									})
 								} else {
 									if (this.components.length === 0 && this.closingComponents.length === 0) {
 										this.visible = false
 									}
 
-									await wrapper.component.hideAnimation()
+									return wrapper.component.hideAnimation().then(() => m.redraw())
 								}
-
-								m.redraw()
-
-								// Return the focus back to it's calling element.
-								// We focus callingElement onbeforeremove with requestAnimationFrame because
-								// focus can't happen if callingElement is inert. And when returning
-								// focus to main view, focus must happen after redraw that removes inert
-								requestAnimationFrame(() => wrapper.component.callingElement()?.focus())
 							},
 						},
 						m(wrapper.component),
@@ -219,6 +216,9 @@ class Modal implements Component {
 			// the removed component was the last component, so we can now register the shortcuts of the now last component
 			keyManager.registerModalShortcuts(this.components[this.components.length - 1].component.shortcuts())
 		}
+
+		// Return the focus back to it's calling element.
+		component.callingElement()?.focus()
 	}
 
 	/**