diff --git a/web/src/components/dialog/DialogContainer.svelte b/web/src/components/dialog/DialogContainer.svelte
index 0827bc19..3bb682e6 100644
--- a/web/src/components/dialog/DialogContainer.svelte
+++ b/web/src/components/dialog/DialogContainer.svelte
@@ -2,6 +2,8 @@
     import { tick } from "svelte";
     import { killDialog } from "$lib/dialogs";
 
+    import DialogBackdropClose from "$components/dialog/DialogBackdropClose.svelte";
+
     export let id: string;
 
     let dialogParent: HTMLDialogElement;
@@ -30,4 +32,5 @@
 
 <dialog id="dialog-{id}" bind:this={dialogParent} class:closing class:open>
     <slot></slot>
+    <DialogBackdropClose closeFunc={close} />
 </dialog>
diff --git a/web/src/components/dialog/PickerDialog.svelte b/web/src/components/dialog/PickerDialog.svelte
index ce7b55f5..0f75f989 100644
--- a/web/src/components/dialog/PickerDialog.svelte
+++ b/web/src/components/dialog/PickerDialog.svelte
@@ -10,7 +10,6 @@
 
     import PickerItem from "$components/dialog/PickerItem.svelte";
     import DialogButtons from "$components/dialog/DialogButtons.svelte";
-    import DialogBackdropClose from "$components/dialog/DialogBackdropClose.svelte";
 
     import IconBoxMultiple from "@tabler/icons-svelte/IconBoxMultiple.svelte";
 
@@ -58,8 +57,6 @@
             <DialogButtons {buttons} closeFunc={close} />
         {/if}
     </div>
-
-    <DialogBackdropClose closeFunc={close} />
 </DialogContainer>
 
 <style>
diff --git a/web/src/components/dialog/SavingDialog.svelte b/web/src/components/dialog/SavingDialog.svelte
index 6e039df8..97ee1381 100644
--- a/web/src/components/dialog/SavingDialog.svelte
+++ b/web/src/components/dialog/SavingDialog.svelte
@@ -7,7 +7,6 @@
 
     import Meowbalt from "$components/misc/Meowbalt.svelte";
     import DialogButtons from "$components/dialog/DialogButtons.svelte";
-    import DialogBackdropClose from "$components/dialog/DialogBackdropClose.svelte";
     import VerticalActionButton from "$components/buttons/VerticalActionButton.svelte";
 
     import IconCopy from "@tabler/icons-svelte/IconCopy.svelte";
@@ -74,8 +73,6 @@
             closeFunc={close}
         />
     </div>
-
-    <DialogBackdropClose closeFunc={close} />
 </DialogContainer>
 
 <style>
diff --git a/web/src/components/dialog/SmallDialog.svelte b/web/src/components/dialog/SmallDialog.svelte
index e6771132..b62e4d6f 100644
--- a/web/src/components/dialog/SmallDialog.svelte
+++ b/web/src/components/dialog/SmallDialog.svelte
@@ -7,7 +7,6 @@
 
     import Meowbalt from "$components/misc/Meowbalt.svelte";
     import DialogButtons from "$components/dialog/DialogButtons.svelte";
-    import DialogBackdropClose from "$components/dialog/DialogBackdropClose.svelte";
 
     import IconAlertTriangle from "@tabler/icons-svelte/IconAlertTriangle.svelte";
 
@@ -53,8 +52,6 @@
             <DialogButtons {buttons} closeFunc={close} />
         {/if}
     </div>
-
-    <DialogBackdropClose closeFunc={close} />
 </DialogContainer>
 
 <style>