diff --git a/webui/src/App.svelte b/webui/src/App.svelte
index 8fc9bc2..90abdb0 100644
--- a/webui/src/App.svelte
+++ b/webui/src/App.svelte
@@ -33,10 +33,11 @@
   </Route>
 
   <Footer on:resize={setBottomMargin} />
+
+  <AddModal />
 </Router>
 
 <DropAdd />
-<AddModal />
 
 <style global lang="scss">
   @use "normalize.css/normalize.css";
diff --git a/webui/src/components/AddModal.svelte b/webui/src/components/AddModal.svelte
index f1a5fca..e274a5d 100644
--- a/webui/src/components/AddModal.svelte
+++ b/webui/src/components/AddModal.svelte
@@ -8,10 +8,11 @@
 
 <script lang="ts">
   import mitt from "mitt";
-  import { navigate } from "svelte-navigator";
+  import { useNavigate } from "svelte-navigator";
   import type { ListingResult } from "upend/types";
   import Icon from "./utils/Icon.svelte";
   import IconButton from "./utils/IconButton.svelte";
+  const navigate = useNavigate();
 
   let files: File[] = [];
   let URLs: string[] = [];