diff --git a/src/lib/components/DateTimeInput.svelte b/src/lib/components/DateTimeInput.svelte
index 210ecbac..3f181272 100644
--- a/src/lib/components/DateTimeInput.svelte
+++ b/src/lib/components/DateTimeInput.svelte
@@ -68,8 +68,8 @@
   })
 </script>
 
-<div class="relative focus-within:z-50 grid grid-cols-2 gap-2" bind:this={element}>
-  <div class="relative group z-20">
+<div class="relative focus-within:z-modal grid grid-cols-2 gap-2" bind:this={element}>
+  <div class="relative group z-popover">
     <DateInput format="yyyy-MM-dd" placeholder="" bind:value={date} />
     <div
       class="absolute right-2 top-0 flex h-12 cursor-pointer items-center gap-2 opacity-100 group-focus-within:opacity-0 group-focus-within:pointer-events-none transition-opacity pointer-events-none">