diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index af2613b8c..f22f0f9ca 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -1,6 +1,6 @@
 <template>
 	<FocusTrap v-bind:active="isActive">
-	<div tabindex="-1" v-focus>
+		<div tabindex="-1" v-focus>
 			<div
 				ref="itemsEl"
 				class="rrevdjwt _popup _shadow"
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index ff001f869..c47cd47b3 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -14,45 +14,46 @@
 		:duration="transitionDuration"
 		appear
 		@after-leave="emit('closed')"
+		@keyup.esc="emit('click')"
 		@enter="emit('opening')"
 		@after-enter="onOpened"
 	>
-		<div
-			v-show="manualShowing != null ? manualShowing : showing"
-			v-hotkey.global="keymap"
-			:class="[
-				$style.root,
-				{
-					[$style.drawer]: type === 'drawer',
-					[$style.dialog]: type === 'dialog' || type === 'dialog:top',
-					[$style.popup]: type === 'popup',
-				},
-			]"
-			:style="{
-				zIndex,
-				pointerEvents: (manualShowing != null ? manualShowing : showing)
-					? 'auto'
-					: 'none',
-				'--transformOrigin': transformOrigin,
-			}"
-			tabindex="-1"
-			v-focus
-		>
+		<focus-trap v-model:active="isActive">
 			<div
-				class="_modalBg data-cy-bg"
+				v-show="manualShowing != null ? manualShowing : showing"
+				v-hotkey.global="keymap"
 				:class="[
-					$style.bg,
+					$style.root,
 					{
-						[$style.bgTransparent]: isEnableBgTransparent,
-						'data-cy-transparent': isEnableBgTransparent,
+						[$style.drawer]: type === 'drawer',
+						[$style.dialog]: type === 'dialog' || type === 'dialog:top',
+						[$style.popup]: type === 'popup',
 					},
 				]"
-				:style="{ zIndex }"
-				@click="onBgClick"
-				@mousedown="onBgClick"
-				@contextmenu.prevent.stop="() => {}"
-			></div>
-			<focus-trap v-model:active="isActive">
+				:style="{
+					zIndex,
+					pointerEvents: (manualShowing != null ? manualShowing : showing)
+						? 'auto'
+						: 'none',
+					'--transformOrigin': transformOrigin,
+				}"
+				tabindex="-1"
+				v-focus
+			>
+				<div
+					class="_modalBg data-cy-bg"
+					:class="[
+						$style.bg,
+						{
+							[$style.bgTransparent]: isEnableBgTransparent,
+							'data-cy-transparent': isEnableBgTransparent,
+						},
+					]"
+					:style="{ zIndex }"
+					@click="onBgClick"
+					@mousedown="onBgClick"
+					@contextmenu.prevent.stop="() => {}"
+				></div>
 				<div
 					ref="content"
 					:class="[
@@ -64,8 +65,8 @@
 				>
 					<slot :max-height="maxHeight" :type="type"></slot>
 				</div>
-			</focus-trap>
-		</div>
+			</div>
+		</focus-trap>
 	</Transition>
 </template>