diff --git a/frontend/modules/directory/components/ReportDocumentList.vue b/frontend/modules/directory/components/ReportDocumentList.vue
new file mode 100644
index 0000000..705f9dd
--- /dev/null
+++ b/frontend/modules/directory/components/ReportDocumentList.vue
@@ -0,0 +1,42 @@
+<template>
+    <ul v-if="documents.length" class="flex flex-col gap-2">
+        <li
+            v-for="doc in documents"
+            :key="doc.id"
+            class="flex items-center justify-between rounded border border-neutral-200 px-3 py-2"
+        >
+            <a
+                :href="downloadUrl(doc.id)"
+                target="_blank"
+                rel="noopener"
+                class="flex items-center gap-2 text-sm text-blue-700 hover:underline"
+            >
+                <Icon name="mdi:file-document-outline" />
+                {{ doc.originalName }}
+            </a>
+            <MalioButtonIcon
+                v-if="isAdmin"
+                icon="mdi:trash-can-outline"
+                button-class="!text-red-600"
+                :aria-label="$t('common.delete')"
+                @click="$emit('delete', doc.id)"
+            />
+        </li>
+    </ul>
+    <p v-else class="text-sm text-neutral-400">
+        {{ $t('directory.documents.empty') }}
+    </p>
+</template>
+
+<script setup lang="ts">
+import type { ReportDocument } from '~/modules/directory/services/dto/report-document'
+import { useReportDocumentService } from '~/modules/directory/services/report-documents'
+
+defineProps<{ documents: ReportDocument[], isAdmin: boolean }>()
+defineEmits<{ delete: [id: number] }>()
+
+const { getDownloadUrl } = useReportDocumentService()
+function downloadUrl(id: number): string {
+    return getDownloadUrl(id)
+}
+</script>
diff --git a/frontend/modules/directory/components/ReportDocumentUpload.vue b/frontend/modules/directory/components/ReportDocumentUpload.vue
new file mode 100644
index 0000000..14625bc
--- /dev/null
+++ b/frontend/modules/directory/components/ReportDocumentUpload.vue
@@ -0,0 +1,45 @@
+<template>
+    <div class="flex items-center gap-3">
+        <input
+            ref="fileInput"
+            type="file"
+            class="hidden"
+            @change="onFileSelected"
+        >
+        <MalioButton
+            icon-name="mdi:paperclip"
+            icon-position="left"
+            button-class="w-auto px-4"
+            :label="$t('directory.documents.add')"
+            :disabled="uploading"
+            @click="fileInput?.click()"
+        />
+        <span v-if="uploading" class="text-sm text-neutral-500">{{ $t('directory.documents.uploading') }}</span>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useReportDocumentService } from '~/modules/directory/services/report-documents'
+
+const props = defineProps<{ reportId: number }>()
+const emit = defineEmits<{ uploaded: [] }>()
+
+const service = useReportDocumentService()
+const fileInput = ref<HTMLInputElement | null>(null)
+const uploading = ref(false)
+
+async function onFileSelected(event: Event): Promise<void> {
+    const input = event.target as HTMLInputElement
+    const file = input.files?.[0]
+    if (!file) return
+
+    uploading.value = true
+    try {
+        await service.upload(props.reportId, file)
+        emit('uploaded')
+    } finally {
+        uploading.value = false
+        input.value = ''
+    }
+}
+</script>