diff --git a/src/App.svelte b/src/App.svelte
index 314c726..9ce248d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -9,7 +9,7 @@
   import NewChat from './lib/NewChat.svelte'
   import { chatsStorage, apiKeyStorage } from './lib/Storage.svelte'
   import { Modals, closeModal } from 'svelte-modals'
-  import { triggerModalEsc } from './lib/Util.svelte'
+  import { dispatchModalEsc, checkModalEsc } from './lib/Util.svelte'
 
   // The definition of the routes with some conditions
   const routes = {
@@ -31,6 +31,14 @@
 
     '*': Home
   }
+
+  const onLocationChange = (...args:any) => {
+    // close all modals on route change
+    dispatchModalEsc()
+  }
+
+  $: onLocationChange($location)
+
 </script>
 
 <Navbar />
@@ -53,7 +61,7 @@
 </Modals>
 
 <svelte:window
-  on:keydown={(e) => triggerModalEsc(e)}
+  on:keydown={(e) => checkModalEsc(e)}
 />
 
 <style>
diff --git a/src/lib/Util.svelte b/src/lib/Util.svelte
index c429c73..89d13dd 100644
--- a/src/lib/Util.svelte
+++ b/src/lib/Util.svelte
@@ -29,8 +29,12 @@
     })
   }
 
-  export const triggerModalEsc = (event:KeyboardEvent|undefined):boolean|void => {
+  export const checkModalEsc = (event:KeyboardEvent|undefined):boolean|void => {
     if (!event || event.key !== 'Escape') return
+    dispatchModalEsc()
+  }
+
+  export const dispatchModalEsc = ():boolean|void => {
     const stack = Array.from(document.querySelectorAll('.modal')).filter(s =>
       window.getComputedStyle(s).getPropertyValue('display') !== 'none'
     )