diff --git a/frontend/components/hours/HoursDayExportDrawer.vue b/frontend/components/hours/HoursDayExportDrawer.vue
new file mode 100644
index 0000000..a7d9b61
--- /dev/null
+++ b/frontend/components/hours/HoursDayExportDrawer.vue
@@ -0,0 +1,87 @@
+<template>
+    <AppDrawer v-model="drawerOpen" title="Export des heures (par jour)">
+        <form class="space-y-4" @submit.prevent="handleSubmit">
+            <div>
+                <label class="text-md font-semibold text-neutral-700" for="hours-export-date">
+                    Date <span class="text-red-600">*</span>
+                </label>
+                <input
+                    id="hours-export-date"
+                    v-model="selectedDate"
+                    type="date"
+                    class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
+                >
+            </div>
+
+            <div>
+                <label class="text-md font-semibold text-neutral-700">
+                    Sites <span class="text-red-600">*</span>
+                </label>
+                <MalioSelectCheckbox
+                    v-model="selectedSites"
+                    :options="siteOptions"
+                    groupClass="w-full mt-2"
+                    label="Sites"
+                    display-select-all
+                />
+            </div>
+
+            <div class="flex justify-center pt-2">
+                <button
+                    type="submit"
+                    class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:opacity-50 disabled:cursor-not-allowed"
+                    :disabled="isLoading || !selectedDate || selectedSites.length === 0"
+                >
+                    <template v-if="isLoading">Génération en cours...</template>
+                    <template v-else>Exporter</template>
+                </button>
+            </div>
+        </form>
+    </AppDrawer>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import AppDrawer from '~/components/AppDrawer.vue'
+import type { Site } from '~/services/dto/site'
+
+const props = defineProps<{
+    modelValue: boolean
+    sites: Site[]
+    initialDate: string
+    initialSiteIds: number[]
+    isLoading?: boolean
+}>()
+
+const emit = defineEmits<{
+    (event: 'update:modelValue', value: boolean): void
+    (event: 'submit', payload: { date: string; siteIds: number[] }): void
+}>()
+
+const drawerOpen = computed({
+    get: () => props.modelValue,
+    set: (value: boolean) => emit('update:modelValue', value)
+})
+
+const selectedDate = ref(props.initialDate)
+const selectedSites = ref<number[]>([...props.initialSiteIds])
+
+const siteOptions = computed(() =>
+    props.sites.map((site) => ({ label: site.name, value: site.id }))
+)
+
+const handleSubmit = () => {
+    if (!selectedDate.value || selectedSites.value.length === 0) return
+    emit('submit', { date: selectedDate.value, siteIds: [...selectedSites.value] })
+}
+
+watch(
+    () => props.modelValue,
+    (isOpen) => {
+        if (isOpen) {
+            selectedDate.value = props.initialDate
+            selectedSites.value = [...props.initialSiteIds]
+        }
+    }
+)
+</script>