diff --git a/frontend/components/AppDrawer.vue b/frontend/components/AppDrawer.vue
new file mode 100644
index 0000000..46ffe7b
--- /dev/null
+++ b/frontend/components/AppDrawer.vue
@@ -0,0 +1,69 @@
+<template>
+    <Teleport to="body">
+        <Transition name="drawer">
+            <div
+                v-if="modelValue"
+                class="fixed inset-0 z-40 flex justify-end"
+            >
+                <div
+                    class="absolute inset-0 bg-black/30"
+                    @click="close"
+                />
+                <div
+                    class="relative z-50 flex h-full w-full max-w-md flex-col bg-white shadow-xl"
+                >
+                    <div class="flex items-center justify-between border-b border-neutral-200 px-6 py-4">
+                        <h2 class="text-lg font-bold text-neutral-900">{{ title }}</h2>
+                        <button
+                            type="button"
+                            class="rounded p-1 text-neutral-400 hover:text-neutral-600"
+                            @click="close"
+                        >
+                            <Icon name="mdi:close" size="24" />
+                        </button>
+                    </div>
+                    <div class="flex-1 overflow-y-auto px-6 py-4">
+                        <slot />
+                    </div>
+                </div>
+            </div>
+        </Transition>
+    </Teleport>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+    modelValue: boolean
+    title: string
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+}>()
+
+function close() {
+    emit('update:modelValue', false)
+}
+</script>
+
+<style scoped>
+.drawer-enter-active,
+.drawer-leave-active {
+    transition: opacity 0.2s ease;
+}
+
+.drawer-enter-active > div:last-child,
+.drawer-leave-active > div:last-child {
+    transition: transform 0.3s ease;
+}
+
+.drawer-enter-from,
+.drawer-leave-to {
+    opacity: 0;
+}
+
+.drawer-enter-from > div:last-child,
+.drawer-leave-to > div:last-child {
+    transform: translateX(100%);
+}
+</style>