diff --git a/lib/components/base/Modal.vue b/lib/components/base/Modal.vue
index 1961c9ec..305ab7c8 100644
--- a/lib/components/base/Modal.vue
+++ b/lib/components/base/Modal.vue
@@ -1,12 +1,17 @@
 <template>
   <div v-if="shown">
+    <div
+      :class="{ shown: actuallyShown }"
+      class="tauri-overlay"
+      data-tauri-drag-region
+      @click="() => (closable ? hide() : {})"
+    />
     <div
       :class="{
         shown: actuallyShown,
         noblur: props.noblur,
       }"
       class="modal-overlay"
-      data-tauri-drag-region
       @click="() => (closable ? hide() : {})"
     />
     <div class="modal-container" :class="{ shown: actuallyShown }">
@@ -69,6 +74,21 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
+.tauri-overlay {
+  position: fixed;
+  visibility: hidden;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100px;
+  z-index: 20;
+
+  &.shown {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
 .modal-overlay {
   visibility: hidden;
   position: fixed;
@@ -76,7 +96,7 @@ defineExpose({
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: 20;
+  z-index: 19;
   transition: all 0.3s ease-in-out;
 
   &.shown {
diff --git a/package.json b/package.json
index 0ab1a270..21943854 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.4.30",
+  "version": "0.4.31",
   "files": [
     "dist",
     "lib"