diff --git a/frontend/src/components/NestedPopover.vue b/frontend/src/components/NestedPopover.vue
new file mode 100644
index 00000000..48e5b3d5
--- /dev/null
+++ b/frontend/src/components/NestedPopover.vue
@@ -0,0 +1,60 @@
+<template>
+  <Popover v-slot="{ open }">
+    <PopoverButton
+      as="div"
+      ref="reference"
+      @click="updatePosition"
+      @focusin="updatePosition"
+      @keydown="updatePosition"
+      v-slot="{ open }"
+    >
+      <slot name="target" v-bind="{ open }" />
+    </PopoverButton>
+    <div v-show="open">
+      <PopoverPanel
+        v-slot="{ open, close }"
+        ref="popover"
+        static
+        class="z-[100]"
+      >
+        <slot name="body" v-bind="{ open, close }" />
+      </PopoverPanel>
+    </div>
+  </Popover>
+</template>
+
+<script setup>
+import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'
+import { createPopper } from '@popperjs/core'
+import { nextTick, ref, onBeforeUnmount } from 'vue'
+
+const props = defineProps({
+  placement: {
+    type: String,
+    default: 'bottom-start',
+  },
+})
+
+const reference = ref(null)
+const popover = ref(null)
+
+let popper = ref(null)
+
+function setupPopper() {
+  if (!popper.value) {
+    popper.value = createPopper(reference.value.el, popover.value.el, {
+      placement: props.placement,
+    })
+  } else {
+    popper.value.update()
+  }
+}
+
+function updatePosition() {
+  nextTick(() => setupPopper())
+}
+
+onBeforeUnmount(() => {
+  popper.value?.destroy()
+})
+</script>