diff --git a/frontend/src/components/common/BaseDialog.vue b/frontend/src/components/common/BaseDialog.vue
new file mode 100644
index 00000000..73374ac4
--- /dev/null
+++ b/frontend/src/components/common/BaseDialog.vue
@@ -0,0 +1,118 @@
+<template>
+  <Teleport to="body">
+    <div
+      v-if="show"
+      class="modal-overlay"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true"
+      @click.self="handleClose"
+    >
+      <!-- Modal panel -->
+      <div :class="['modal-content', widthClasses]" @click.stop>
+        <!-- Header -->
+        <div class="modal-header">
+          <h3 id="modal-title" class="modal-title">
+            {{ title }}
+          </h3>
+          <button
+            @click="emit('close')"
+            class="-mr-2 rounded-xl p-2 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600 dark:text-dark-500 dark:hover:bg-dark-700 dark:hover:text-dark-300"
+            aria-label="Close modal"
+          >
+            <svg
+              class="h-5 w-5"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+            >
+              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        <!-- Body -->
+        <div class="modal-body">
+          <slot></slot>
+        </div>
+
+        <!-- Footer -->
+        <div v-if="$slots.footer" class="modal-footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, watch, onMounted, onUnmounted } from 'vue'
+
+type DialogWidth = 'narrow' | 'normal' | 'wide' | 'extra-wide' | 'full'
+
+interface Props {
+  show: boolean
+  title: string
+  width?: DialogWidth
+  closeOnEscape?: boolean
+  closeOnClickOutside?: boolean
+}
+
+interface Emits {
+  (e: 'close'): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: 'normal',
+  closeOnEscape: true,
+  closeOnClickOutside: false
+})
+
+const emit = defineEmits<Emits>()
+
+const widthClasses = computed(() => {
+  const widths: Record<DialogWidth, string> = {
+    narrow: 'max-w-md',
+    normal: 'max-w-lg',
+    wide: 'max-w-4xl',
+    'extra-wide': 'max-w-6xl',
+    full: 'max-w-7xl'
+  }
+  return widths[props.width]
+})
+
+const handleClose = () => {
+  if (props.closeOnClickOutside) {
+    emit('close')
+  }
+}
+
+const handleEscape = (event: KeyboardEvent) => {
+  if (props.show && props.closeOnEscape && event.key === 'Escape') {
+    emit('close')
+  }
+}
+
+// Prevent body scroll when modal is open
+watch(
+  () => props.show,
+  (isOpen) => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden'
+    } else {
+      document.body.style.overflow = ''
+    }
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  document.addEventListener('keydown', handleEscape)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', handleEscape)
+  document.body.style.overflow = ''
+})
+</script>