diff --git a/frontend/components/ui/UiAccordion.vue b/frontend/components/ui/UiAccordion.vue
new file mode 100644
index 0000000..1a118bb
--- /dev/null
+++ b/frontend/components/ui/UiAccordion.vue
@@ -0,0 +1,34 @@
+<template>
+    <div class="overflow-hidden">
+        <button
+            type="button"
+            class="flex w-full items-center justify-between gap-4 bg-slate-100 px-4 py-3 text-sm font-semibold uppercase tracking-wide text-left"
+            @click="toggle"
+        >
+            <span class="flex-1">
+                <slot name="header" />
+            </span>
+            <Icon
+                name="mdi:chevron-down"
+                size="24"
+                class="shrink-0 transition-transform"
+                :class="{ 'rotate-180': modelValue }"
+            />
+        </button>
+        <div v-if="modelValue" class="border border-t-0 border-slate-200 px-6 py-6">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: boolean]
+}>()
+
+const toggle = () => emit('update:modelValue', !props.modelValue)
+</script>