diff --git a/src/renderer/components/Authorize.vue b/src/renderer/components/Authorize.vue
index 210f6862..be1cc12e 100644
--- a/src/renderer/components/Authorize.vue
+++ b/src/renderer/components/Authorize.vue
@@ -54,6 +54,7 @@ import { defineComponent, ref, reactive, toRefs, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18next } from 'vue3-i18next'
 import { ElMessage } from 'element-plus'
+import { useMagicKeys, whenever } from '@vueuse/core'
 import { useStore } from '@/store'
 import { ACTION_TYPES } from '@/store/Authorize'
 
@@ -74,6 +75,7 @@ export default defineComponent({
     const store = useStore()
     const router = useRouter()
     const i18n = useI18next()
+    const { escape } = useMagicKeys()
 
     const { url, sns } = toRefs(props)
 
@@ -86,6 +88,10 @@ export default defineComponent({
       console.log(url.value)
     })
 
+    whenever(escape, () => {
+      close()
+    })
+
     const authorizeSubmit = () => {
       submitting.value = true
       store
diff --git a/src/renderer/components/Login.vue b/src/renderer/components/Login.vue
index b4ff3cea..97ba0b27 100644
--- a/src/renderer/components/Login.vue
+++ b/src/renderer/components/Login.vue
@@ -20,6 +20,7 @@
 import { defineComponent } from 'vue'
 import { useRouter } from 'vue-router'
 import { useStore } from '@/store'
+import { useMagicKeys, whenever } from '@vueuse/core'
 import LoginForm from './Login/LoginForm.vue'
 import { ACTION_TYPES } from '@/store/Login'
 
@@ -30,6 +31,11 @@ export default defineComponent({
     const space = 'Login'
     const store = useStore()
     const router = useRouter()
+    const { escape } = useMagicKeys()
+
+    whenever(escape, () => {
+      close()
+    })
 
     const close = () => {
       store.dispatch(`${space}/${ACTION_TYPES.PAGE_BACK}`)