diff --git a/frontend/composable/useApi.ts b/frontend/composable/useApi.ts
deleted file mode 100644
index 0d5b79a..0000000
--- a/frontend/composable/useApi.ts
+++ /dev/null
@@ -1,183 +0,0 @@
-import type { FetchOptions } from 'ofetch'
-import { $fetch, FetchError } from 'ofetch'
-import { useAuthStore } from '~/stores/auth'
-
-export type AnyObject = Record<string, unknown>
-
-export type ApiClient = {
-  get<T>(url: string, query?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
-  getBlob(url: string, query?: AnyObject, options?: ApiFetchOptions<'blob'>): Promise<Blob>
-  post<T>(url: string, body?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
-  put<T>(url: string, body?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
-  patch<T>(url: string, body?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
-  delete<T>(url: string, query?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
-}
-
-export type ApiFetchOptions<ResponseType extends 'json' | 'blob'> =
-  FetchOptions<ResponseType> & {
-    toast?: boolean
-    toastTitle?: string
-    toastErrorMessage?: string
-    toastSuccessMessage?: string
-    toastErrorKey?: string
-    toastSuccessKey?: string
-  }
-
-export const useApi = (): ApiClient => {
-  const config = useRuntimeConfig()
-  const baseURL = config.public.apiBase ?? '/api'
-  const toast = useToast()
-  const auth = useAuthStore()
-  const nuxtApp = useNuxtApp()
-  let isHandlingUnauthorized = false
-  const i18n = nuxtApp.$i18n as
-    | {
-        t: (key: string) => string
-        te?: (key: string) => boolean
-      }
-    | undefined
-  const t = (key: string) => (i18n?.t ? String(i18n.t(key)) : key)
-  const te = (key: string) => (i18n?.te ? i18n.te(key) : false)
-
-  const extractErrorMessage = (error: unknown, responseData?: unknown): string => {
-    const data = responseData ?? (error as FetchError)?.data
-
-    if (typeof data === 'string') {
-      return data
-    }
-
-    if (data && typeof data === 'object') {
-      const record = data as Record<string, unknown>
-      return (
-        (record['hydra:description'] as string) ||
-        (record.detail as string) ||
-        (record.message as string) ||
-        (record.error as string) ||
-        (record.title as string) ||
-        (record['hydra:title'] as string) ||
-        ''
-      )
-    }
-
-    return (error as FetchError)?.message ?? 'Erreur inconnue.'
-  }
-
-  const methodErrorKeys: Record<string, string> = {
-    GET: 'errors.http.get',
-    POST: 'errors.http.post',
-    PUT: 'errors.http.put',
-    PATCH: 'errors.http.patch',
-    DELETE: 'errors.http.delete'
-  }
-
-  const client = $fetch.create({
-    baseURL,
-    retry: 0,
-    credentials: 'include',
-    onResponse({ options, response }) {
-      const apiOptions = options as ApiFetchOptions<'json'>
-      if (apiOptions?.toast === false) {
-        return
-      }
-
-      if (response?.status && response.status >= 400) {
-        return
-      }
-
-      const successKey = apiOptions?.toastSuccessKey
-      const successMessage =
-        apiOptions?.toastSuccessMessage ||
-        (successKey ? (te(successKey) ? t(successKey) : successKey) : '')
-
-      if (successMessage) {
-        toast.success({
-          title: 'Succès',
-          message: successMessage
-        })
-      }
-    },
-    async onResponseError({ response, error, options }) {
-      if (response?.status === 401) {
-        const requestUrl = typeof options?.url === 'string' ? options.url : ''
-        if (!requestUrl.includes('login_check') && !requestUrl.includes('logout')) {
-          if (!isHandlingUnauthorized) {
-            isHandlingUnauthorized = true
-            auth.clearSession()
-            const route = useRoute()
-            if (route.path !== '/login') {
-              await navigateTo('/login')
-            }
-            isHandlingUnauthorized = false
-          }
-        }
-        return
-      }
-
-      const apiOptions = options as ApiFetchOptions<'json'>
-      if (apiOptions?.toast === false) {
-        return
-      }
-
-      const method =
-        typeof options?.method === 'string' ? options.method.toUpperCase() : 'GET'
-      const defaultKey = methodErrorKeys[method]
-      const defaultMessage =
-        defaultKey && te(defaultKey) ? t(defaultKey) : ''
-      const errorKey = apiOptions?.toastErrorKey
-      const errorMessage =
-        errorKey ? (te(errorKey) ? t(errorKey) : errorKey) : ''
-      const extractedMessage = extractErrorMessage(error, response?._data)
-      const message =
-        apiOptions?.toastErrorMessage ||
-        errorMessage ||
-        defaultMessage ||
-        extractedMessage ||
-        'Une erreur est survenue.'
-
-      toast.error({
-        title: apiOptions?.toastTitle ?? 'Erreur',
-        message
-      })
-    }
-  })
-
-  const request = <T>(
-    method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',
-    url: string,
-    options: ApiFetchOptions<'json'> = {}
-  ) => {
-    const needsJsonBody = method === 'POST' || method === 'PUT'
-    const needsMergePatch = method === 'PATCH'
-
-    const headers = new Headers(options.headers as HeadersInit | undefined)
-
-    if (needsMergePatch && !headers.has('Content-Type')) {
-      headers.set('Content-Type', 'application/merge-patch+json')
-    } else if (needsJsonBody && !headers.has('Content-Type')) {
-      headers.set('Content-Type', 'application/json')
-    }
-
-    return client<T>(url, { ...options, method, headers })
-  }
-
-  return {
-    get<T>(url: string, query: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
-      return request<T>('GET', url, { ...options, query })
-    },
-    getBlob(url: string, query: AnyObject = {}, options: ApiFetchOptions<'blob'> = {}) {
-      return client<Blob>(url, { ...options, method: 'GET', query, responseType: 'blob' })
-    },
-    post<T>(url: string, body: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
-      return request<T>('POST', url, { ...options, body })
-    },
-    put<T>(url: string, body: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
-      return request<T>('PUT', url, { ...options, body })
-    },
-    patch<T>(url: string, body: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
-      return request<T>('PATCH', url, { ...options, body })
-    },
-    delete<T>(url: string, query: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
-      return request<T>('DELETE', url, { ...options, query })
-    }
-  }
-}
diff --git a/frontend/i18n/locales/fr.json b/frontend/i18n/locales/fr.json
index 4942fcb..22845f6 100644
--- a/frontend/i18n/locales/fr.json
+++ b/frontend/i18n/locales/fr.json
@@ -11,12 +11,52 @@
             "login": "Identifiants invalides.",
             "logout": "Impossible de se déconnecter.",
             "session": "Session expirée"
+        },
+        "employee": {
+            "create": "Impossible de créer l'employé.",
+            "update": "Impossible de mettre à jour l'employé.",
+            "delete": "Impossible de supprimer l'employé."
+        },
+        "site": {
+            "create": "Impossible de créer le site.",
+            "update": "Impossible de mettre à jour le site.",
+            "delete": "Impossible de supprimer le site."
+        },
+        "absenceType": {
+            "create": "Impossible de créer le type d'absence.",
+            "update": "Impossible de mettre à jour le type d'absence.",
+            "delete": "Impossible de supprimer le type d'absence."
+        },
+        "absence": {
+            "create": "Impossible de créer l'absence.",
+            "update": "Impossible de mettre à jour l'absence.",
+            "delete": "Impossible de supprimer l'absence."
         }
     },
     "success": {
         "auth": {
             "login": "Connexion réussie.",
             "logout": "Déconnexion réussie."
+        },
+        "employee": {
+            "create": "Employé créé.",
+            "update": "Employé mis à jour.",
+            "delete": "Employé supprimé."
+        },
+        "site": {
+            "create": "Site créé.",
+            "update": "Site mis à jour.",
+            "delete": "Site supprimé."
+        },
+        "absenceType": {
+            "create": "Type d'absence créé.",
+            "update": "Type d'absence mis à jour.",
+            "delete": "Type d'absence supprimé."
+        },
+        "absence": {
+            "create": "Absence créée.",
+            "update": "Absence mise à jour.",
+            "delete": "Absence supprimée."
         }
     }
 }
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 7075ed1..9dcb4ea 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="min-h-screen">
         <div class="flex min-h-screen">
-      <aside class="flex w-64 flex-col border-r border-neutral-200 bg-tertiary-500 no-print">
+      <aside class="flex w-64 flex-col border-r border-neutral-200 bg-tertiary-500">
                 <div>
                     <img src="/malio.png" alt="Logo" class="w-auto"/>
                 </div>
@@ -27,6 +27,13 @@
                     >
                         Employés
                     </NuxtLink>
+                    <NuxtLink
+                        to="/sites"
+                        class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
+                        active-class="bg-primary-50 text-primary-600"
+                    >
+                        Sites
+                    </NuxtLink>
                     <NuxtLink
                         to="/absence-types"
                         class="flex items-center gap-3 px-4 py-3 text-md font-semibold text-neutral-700 hover:bg-primary-50 hover:text-primary-600"
diff --git a/frontend/locales/fr.json b/frontend/locales/fr.json
deleted file mode 100644
index 0967ef4..0000000
--- a/frontend/locales/fr.json
+++ /dev/null
@@ -1 +0,0 @@
-{}
diff --git a/frontend/pages/calendar.vue b/frontend/pages/calendar.vue
index 0e8b3df..18a224e 100644
--- a/frontend/pages/calendar.vue
+++ b/frontend/pages/calendar.vue
@@ -1,237 +1,231 @@
 <template>
-  <div>
-    <div class="flex flex-wrap items-center justify-between gap-4 pb-10 no-print">
-      <h1 class="text-4xl font-bold text-primary-500">Calendrier des absences</h1>
-      <div class="flex items-center gap-3">
-        <select
-          v-model="selectedMonth"
-          class="rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
-        >
-          <option v-for="month in months" :key="month.value" :value="month.value">
-            {{ month.label }}
-          </option>
-        </select>
-        <select
-          v-model="selectedYear"
-          class="rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
-        >
-          <option v-for="year in years" :key="year" :value="year">
-            {{ year }}
-          </option>
-        </select>
-        <button
-          type="button"
-          class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-          @click="openCreateFromToday"
-        >
-          Ajouter une absence
-        </button>
-        <button
-          type="button"
-          class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-          @click="printMonth('1')"
-        >
-          Imprimer 1 mois
-        </button>
-        <button
-          type="button"
-          class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-          @click="printMonth('3')"
-        >
-          Imprimer 3 mois
-        </button>
-      </div>
-    </div>
-
-    <div class="max-h-[80vh] overflow-auto rounded-lg border border-neutral-200 bg-white no-print">
-      <div class="min-w-[900px]">
-        <div class="grid" :style="gridStyle">
-          <div class="sticky left-0 z-10 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-md font-semibold text-neutral-700">
-            Employés
-          </div>
-          <div
-            v-for="day in daysInMonth"
-            :key="day.date"
-            class="border-b border-neutral-200 bg-tertiary-500 px-2 py-3 text-center text-xs font-semibold text-neutral-700"
-          >
-            <div>{{ day.label }}</div>
-            <div class="text-[10px] text-neutral-500">{{ day.weekday }}</div>
-          </div>
-
-          <template v-for="employee in employees" :key="employee.id">
-            <div class="sticky left-0 z-10 border-b border-neutral-100 bg-white px-4 py-3 text-md font-semibold text-neutral-800">
-              {{ employee.firstName }} {{ employee.lastName }}
+    <div>
+        <div class="flex flex-wrap items-center justify-between gap-4 pb-10">
+            <h1 class="text-4xl font-bold text-primary-500">Calendrier des absences</h1>
+            <div class="flex items-center gap-3">
+                <div class="flex flex-wrap items-center gap-4 rounded-md border border-neutral-300 px-3 py-2">
+                    <div v-for="site in sites" :key="site.id" class="flex items-center gap-2">
+                        <div :style="{ backgroundColor: site.color }" class="h-4 w-4 rounded"></div>
+                        <label class="text-md" :for="`site-${site.id}`">{{ site.name }}</label>
+                        <input
+                            :id="`site-${site.id}`"
+                            v-model="selectedSiteIds"
+                            :value="site.id"
+                            type="checkbox"
+                            class="h-4 w-4"
+                        />
+                    </div>
+                </div>
+                <select
+                    v-model="selectedMonth"
+                    class="rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+                >
+                    <option v-for="month in months" :key="month.value" :value="month.value">
+                        {{ month.label }}
+                    </option>
+                </select>
+                <select
+                    v-model="selectedYear"
+                    class="rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+                >
+                    <option v-for="year in years" :key="year" :value="year">
+                        {{ year }}
+                    </option>
+                </select>
+                <button
+                    type="button"
+                    class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                    @click="openCreateFromToday"
+                >
+                    Ajouter une absence
+                </button>
             </div>
-            <div
-              v-for="day in daysInMonth"
-              :key="employee.id + '-' + day.date"
-              class="border-b border-neutral-100 px-2 py-2 text-center text-xs text-neutral-800"
-            >
-              <button
-                type="button"
-                class="flex h-8 w-full items-center justify-center rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800 hover:border-primary-500/40"
-                :style="getCellStyle(employee.id, day.date)"
-                @click="openCreate(employee, day.date)"
-              >
+        </div>
+
+        <div class="max-h-[80vh] overflow-auto rounded-lg border border-neutral-200 bg-white">
+            <div class="min-w-[900px]">
+                <div class="grid" :style="gridStyle">
+                    <div
+                        class="sticky left-0 z-20 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-md font-semibold text-neutral-700">
+                        Employés
+                    </div>
+                    <div
+                        v-for="day in daysInMonth"
+                        :key="day.date"
+                        class="border-b border-neutral-200 bg-tertiary-500 px-2 py-3 text-center text-xs font-semibold text-neutral-700"
+                    >
+                        <div>{{ day.label }}</div>
+                        <div class="text-[10px] text-neutral-500">{{ day.weekday }}</div>
+                    </div>
+
+                    <template v-for="employee in visibleEmployees" :key="employee.id">
+                        <div
+                            class="sticky left-0 z-10 border-b border-neutral-100 px-4 py-3 text-md font-semibold text-black"
+                            :style="{ backgroundColor: employee.site?.color ?? '#304998' }"
+                        >
+                            {{ formatEmployeeName(employee) }}
+                        </div>
+                        <div
+                            v-for="day in daysInMonth"
+                            :key="employee.id + '-' + day.date"
+                            class="border-b border-neutral-100 px-2 py-2 text-center text-xs text-neutral-800"
+                        >
+                            <button
+                                type="button"
+                                class="flex h-8 w-full items-center justify-center rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800 hover:border-primary-500/40"
+                                :style="getCellStyle(employee.id, day.date)"
+                                @click="openCreate(employee, day.date)"
+                            >
                 <span v-if="getCellCode(employee.id, day.date)">
                   {{ getCellCode(employee.id, day.date) }}
                 </span>
-              </button>
-            </div>
-          </template>
-        </div>
-      </div>
-    </div>
-
-    <div v-if="printMode" class="print-only space-y-8">
-      <div
-        v-for="month in printMonths"
-        :key="`${month.year}-${month.month}`"
-        class="overflow-hidden rounded-lg border border-neutral-200 bg-white"
-      >
-        <div class="flex items-center justify-between border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-lg font-bold text-neutral-700">
-          <span>Calendrier {{ month.label }} {{ month.year }}</span>
-        </div>
-        <div class="overflow-auto">
-          <div class="min-w-[900px]">
-            <div class="grid" :style="getGridStyle(month.days.length)">
-              <div class="sticky left-0 z-10 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-md font-semibold text-neutral-700">
-                Employé
-              </div>
-              <div
-                v-for="day in month.days"
-                :key="day.date"
-                class="border-b border-neutral-200 bg-tertiary-500 px-2 py-3 text-center text-xs font-semibold text-neutral-700"
-              >
-                <div>{{ day.label }}</div>
-                <div class="text-[10px] text-neutral-500">{{ day.weekday }}</div>
-              </div>
-
-              <template v-for="employee in employees" :key="employee.id">
-                <div class="sticky left-0 z-10 border-b border-neutral-100 bg-white px-4 py-3 text-md font-semibold text-neutral-800">
-                  {{ employee.firstName }} {{ employee.lastName }}
+                            </button>
+                        </div>
+                    </template>
                 </div>
-                <div
-                  v-for="day in month.days"
-                  :key="employee.id + '-' + day.date"
-                  class="border-b border-neutral-100 px-2 py-2 text-center text-xs text-neutral-800"
-                >
-                  <div
-                    class="flex h-8 w-full items-center justify-center rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800"
-                    :style="getCellStyle(employee.id, day.date)"
-                  >
-                    <span v-if="getCellCode(employee.id, day.date)">
-                      {{ getCellCode(employee.id, day.date) }}
-                    </span>
-                  </div>
-                </div>
-              </template>
             </div>
-          </div>
         </div>
-      </div>
+
+
+        <AppDrawer v-model="isDrawerOpen" title="Nouvelle absence">
+            <form class="space-y-4" @submit.prevent="handleSubmit">
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="employee">Employé</label>
+                    <select
+                        id="employee"
+                        v-model="form.employeeId"
+                        class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+                    >
+                        <option value="" disabled>Choisir un employé</option>
+                        <option v-for="employee in employees" :key="employee.id" :value="employee.id">
+                            {{ employee.firstName }} {{ employee.lastName }}
+                        </option>
+                    </select>
+                </div>
+
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="type">Type d'absence</label>
+                    <select
+                        id="type"
+                        v-model="form.typeId"
+                        class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+                    >
+                        <option value="" disabled>Choisir un type</option>
+                        <option v-for="type in absenceTypes" :key="type.id" :value="type.id">
+                            {{ type.label }} ({{ type.code }})
+                        </option>
+                    </select>
+                </div>
+
+                <div class="grid grid-cols-2 gap-4">
+                    <div>
+                        <label class="text-md font-semibold text-neutral-700" for="start-date">Date de début</label>
+                        <input
+                            id="start-date"
+                            v-model="form.startDate"
+                            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" for="end-date">Date de fin</label>
+                        <input
+                            id="end-date"
+                            v-model="form.endDate"
+                            type="date"
+                            class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
+                        />
+                    </div>
+                </div>
+
+                <div>
+                    <label class="text-md font-semibold text-neutral-700" for="comment">Commentaire</label>
+                    <textarea
+                        id="comment"
+                        v-model="form.comment"
+                        rows="3"
+                        class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
+                    />
+                </div>
+
+                <div class="flex justify-end gap-3 pt-2">
+                    <button
+                        v-if="editingAbsence"
+                        type="button"
+                        class="rounded-lg border border-red-200 px-4 py-2 text-md font-semibold text-red-600 hover:bg-red-50"
+                        @click="handleDelete"
+                    >
+                        Supprimer
+                    </button>
+                    <button
+                        type="button"
+                        class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
+                        @click="closeDrawer"
+                    >
+                        Annuler
+                    </button>
+                    <button
+                        type="submit"
+                        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+                        :disabled="isSubmitting"
+                    >
+                        Enregistrer
+                    </button>
+                </div>
+            </form>
+        </AppDrawer>
     </div>
-
-    <AppDrawer v-model="isDrawerOpen" title="Nouvelle absence">
-      <form class="space-y-4" @submit.prevent="handleSubmit">
-        <div>
-          <label class="text-md font-semibold text-neutral-700" for="employee">Employé</label>
-          <select
-            id="employee"
-            v-model="form.employeeId"
-            class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
-          >
-            <option value="" disabled>Choisir un employé</option>
-            <option v-for="employee in employees" :key="employee.id" :value="employee.id">
-              {{ employee.firstName }} {{ employee.lastName }}
-            </option>
-          </select>
-        </div>
-
-        <div>
-          <label class="text-md font-semibold text-neutral-700" for="type">Type d'absence</label>
-          <select
-            id="type"
-            v-model="form.typeId"
-            class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
-          >
-            <option value="" disabled>Choisir un type</option>
-            <option v-for="type in absenceTypes" :key="type.id" :value="type.id">
-              {{ type.label }} ({{ type.code }})
-            </option>
-          </select>
-        </div>
-
-        <div class="grid grid-cols-2 gap-4">
-          <div>
-            <label class="text-md font-semibold text-neutral-700" for="start-date">Date de début</label>
-            <input
-              id="start-date"
-              v-model="form.startDate"
-              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" for="end-date">Date de fin</label>
-            <input
-              id="end-date"
-              v-model="form.endDate"
-              type="date"
-              class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
-            />
-          </div>
-        </div>
-
-        <div>
-          <label class="text-md font-semibold text-neutral-700" for="comment">Commentaire</label>
-          <textarea
-            id="comment"
-            v-model="form.comment"
-            rows="3"
-            class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-md text-neutral-900"
-          />
-        </div>
-
-        <div class="flex justify-end gap-3 pt-2">
-          <button
-            v-if="editingAbsence"
-            type="button"
-            class="rounded-lg border border-red-200 px-4 py-2 text-md font-semibold text-red-600 hover:bg-red-50"
-            @click="handleDelete"
-          >
-            Supprimer
-          </button>
-          <button
-            type="button"
-            class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-            @click="closeDrawer"
-          >
-            Annuler
-          </button>
-          <button
-            type="submit"
-            class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
-            :disabled="isSubmitting"
-          >
-            Enregistrer
-          </button>
-        </div>
-      </form>
-    </AppDrawer>
-  </div>
 </template>
 
 <script setup lang="ts">
-import type { Employee } from '~/services/dto/employee'
-import type { AbsenceType } from '~/services/dto/absence-type'
-import type { Absence } from '~/services/dto/absence'
-import { listEmployees } from '~/services/employees'
-import { listAbsenceTypes } from '~/services/absence-types'
-import { createAbsence, deleteAbsence, listAbsences, updateAbsence } from '~/services/absences'
-import { getDaysInMonth, normalizeDate, toYmd } from '~/utils/date'
+import type {Employee} from '~/services/dto/employee'
+import type {AbsenceType} from '~/services/dto/absence-type'
+import type {Absence} from '~/services/dto/absence'
+import {listEmployees} from '~/services/employees'
+import {listAbsenceTypes} from '~/services/absence-types'
+import {createAbsence, deleteAbsence, listAbsences, updateAbsence} from '~/services/absences'
+import {getDaysInMonth, normalizeDate, toYmd} from '~/utils/date'
 
 const employees = ref<Employee[]>([])
+const sites = computed(() => {
+    const map = new Map<number, { id: number; name: string; color: string }>()
+    for (const employee of employees.value) {
+        if (employee.site) {
+            map.set(employee.site.id, employee.site)
+        }
+    }
+    return Array.from(map.values()).sort((a, b) => a.name.localeCompare(b.name, 'fr'))
+})
+
+const selectedSiteIds = ref<number[]>([])
+const sitesInitialized = ref(false)
+
+watch(sites, (next) => {
+    if (sitesInitialized.value || next.length === 0) return
+    selectedSiteIds.value = next.map((site) => site.id)
+    sitesInitialized.value = true
+}, { immediate: true })
+
+const sortedEmployees = computed(() => {
+  return [...employees.value].sort((a, b) => {
+    const siteA = a.site?.name ?? ''
+    const siteB = b.site?.name ?? ''
+    if (siteA !== siteB) return siteA.localeCompare(siteB, 'fr')
+        const lastA = a.lastName ?? ''
+        const lastB = b.lastName ?? ''
+        if (lastA !== lastB) return lastA.localeCompare(lastB, 'fr')
+        const firstA = a.firstName ?? ''
+        const firstB = b.firstName ?? ''
+    return firstA.localeCompare(firstB, 'fr')
+  })
+})
+
+const visibleEmployees = computed(() => {
+    if (selectedSiteIds.value.length === 0) return []
+    return sortedEmployees.value.filter((employee) => {
+        return employee.site?.id && selectedSiteIds.value.includes(employee.site.id)
+    })
+})
 const absenceTypes = ref<AbsenceType[]>([])
 const absences = ref<Absence[]>([])
 
@@ -244,267 +238,200 @@ const selectedMonth = ref(now.getMonth())
 const selectedYear = ref(now.getFullYear())
 
 const months = [
-  { value: 0, label: 'Janvier' },
-  { value: 1, label: 'Février' },
-  { value: 2, label: 'Mars' },
-  { value: 3, label: 'Avril' },
-  { value: 4, label: 'Mai' },
-  { value: 5, label: 'Juin' },
-  { value: 6, label: 'Juillet' },
-  { value: 7, label: 'Août' },
-  { value: 8, label: 'Septembre' },
-  { value: 9, label: 'Octobre' },
-  { value: 10, label: 'Novembre' },
-  { value: 11, label: 'Décembre' }
+    {value: 0, label: 'Janvier'},
+    {value: 1, label: 'Février'},
+    {value: 2, label: 'Mars'},
+    {value: 3, label: 'Avril'},
+    {value: 4, label: 'Mai'},
+    {value: 5, label: 'Juin'},
+    {value: 6, label: 'Juillet'},
+    {value: 7, label: 'Août'},
+    {value: 8, label: 'Septembre'},
+    {value: 9, label: 'Octobre'},
+    {value: 10, label: 'Novembre'},
+    {value: 11, label: 'Décembre'}
 ]
 
-const years = Array.from({ length: 5 }, (_, i) => now.getFullYear() - 2 + i)
+const years = Array.from({length: 5}, (_, i) => now.getFullYear() - 2 + i)
 
 
 const daysInMonth = computed(() => getDaysInMonth(selectedYear.value, selectedMonth.value))
 
-const getGridStyle = (daysCount: number) => {
-  return {
-    gridTemplateColumns: `220px repeat(${daysCount}, minmax(44px, 1fr))`
-  }
-}
-
-const gridStyle = computed(() => getGridStyle(daysInMonth.value.length))
+const gridStyle = computed(() => ({
+    gridTemplateColumns: `220px repeat(${daysInMonth.value.length}, minmax(44px, 1fr))`
+}))
 
 const form = reactive({
-  employeeId: '' as number | '',
-  typeId: '' as number | '',
-  startDate: '',
-  endDate: '',
-  comment: ''
+    employeeId: '' as number | '',
+    typeId: '' as number | '',
+    startDate: '',
+    endDate: '',
+    comment: ''
 })
 
-const printMode = ref<'1' | '3' | null>(null)
-
-const monthLabel = (monthIndex: number) => months.find((m) => m.value === monthIndex)?.label ?? ''
-
-const printMonths = computed(() => {
-  if (!printMode.value) return []
-
-  const startYear = selectedYear.value
-  const startMonth = selectedMonth.value
-  const count = printMode.value === '3' ? 3 : 1
-
-  return Array.from({ length: count }, (_, offset) => {
-    const date = new Date(startYear, startMonth + offset, 1)
-    const year = date.getFullYear()
-    const month = date.getMonth()
-    return {
-      year,
-      month,
-      label: monthLabel(month),
-      days: getDaysInMonth(year, month)
-    }
-  })
-})
 
 const resetForm = () => {
-  form.employeeId = ''
-  form.typeId = ''
-  form.startDate = ''
-  form.endDate = ''
-  form.comment = ''
+    form.employeeId = ''
+    form.typeId = ''
+    form.startDate = ''
+    form.endDate = ''
+    form.comment = ''
 }
 
 const closeDrawer = () => {
-  isDrawerOpen.value = false
-  editingAbsence.value = null
-  resetForm()
+    isDrawerOpen.value = false
+    editingAbsence.value = null
+    resetForm()
 }
 
 const loadEmployees = async () => {
-  employees.value = await listEmployees()
+    employees.value = await listEmployees()
 }
 
 const loadAbsenceTypes = async () => {
-  absenceTypes.value = await listAbsenceTypes()
+    absenceTypes.value = await listAbsenceTypes()
 }
 
 const loadAbsences = async () => {
-  absences.value = await listAbsences()
+    absences.value = await listAbsences()
 }
 
 onMounted(async () => {
-  await Promise.all([loadEmployees(), loadAbsenceTypes(), loadAbsences()])
+    await Promise.all([loadEmployees(), loadAbsenceTypes(), loadAbsences()])
 })
 
 watch([selectedMonth, selectedYear], async () => {
-  await loadAbsences()
+    await loadAbsences()
 })
 
 const getCellAbsence = (employeeId: number, date: string) => {
-  const match = absences.value.find((absence) => {
-    const employee = absence.employee?.id
-    const start = normalizeDate(absence.startDate)
-    const end = normalizeDate(absence.endDate)
-    return Number(employee) === employeeId && date >= start && date <= end
-  })
+    const match = absences.value.find((absence) => {
+        const employee = absence.employee?.id
+        const start = normalizeDate(absence.startDate)
+        const end = normalizeDate(absence.endDate)
+        return Number(employee) === employeeId && date >= start && date <= end
+    })
 
-  if (!match) return null
+    if (!match) return null
 
-  return {
-    id: match.id,
-    code: match.type?.code ?? '',
-    color: match.type?.color ?? '#222783'
-  }
+    return {
+        id: match.id,
+        code: match.type?.code ?? '',
+        color: match.type?.color ?? '#222783'
+    }
 }
 
 const getCellStyle = (employeeId: number, date: string) => {
-  const absence = getCellAbsence(employeeId, date)
-  if (!absence) return undefined
+    const absence = getCellAbsence(employeeId, date)
+    if (!absence) return undefined
 
-  return {
-    backgroundColor: absence.color,
-    color: '#fff'
-  }
+    return {
+        backgroundColor: absence.color,
+        color: '#fff'
+    }
 }
 
 const getCellCode = (employeeId: number, date: string) => {
-  return getCellAbsence(employeeId, date)?.code ?? ''
+    return getCellAbsence(employeeId, date)?.code ?? ''
 }
 
 const openCreate = (employee: Employee, date: string) => {
-  const existing = absences.value.find((absence) => {
-    const start = normalizeDate(absence.startDate)
-    const end = normalizeDate(absence.endDate)
-    return absence.employee?.id === employee.id && date >= start && date <= end
-  })
+    const existing = absences.value.find((absence) => {
+        const start = normalizeDate(absence.startDate)
+        const end = normalizeDate(absence.endDate)
+        return absence.employee?.id === employee.id && date >= start && date <= end
+    })
 
-  if (existing) {
-    editingAbsence.value = existing
-    form.employeeId = existing.employee.id
-    form.typeId = existing.type.id
-    form.startDate = normalizeDate(existing.startDate)
-    form.endDate = normalizeDate(existing.endDate)
-    form.comment = existing.comment ?? ''
-  } else {
-    editingAbsence.value = null
-    form.employeeId = employee.id
-    form.startDate = date
-    form.endDate = date
-    form.typeId = ''
-    form.comment = ''
-  }
+    if (existing) {
+        editingAbsence.value = existing
+        form.employeeId = existing.employee.id
+        form.typeId = existing.type.id
+        form.startDate = normalizeDate(existing.startDate)
+        form.endDate = normalizeDate(existing.endDate)
+        form.comment = existing.comment ?? ''
+    } else {
+        editingAbsence.value = null
+        form.employeeId = employee.id
+        form.startDate = date
+        form.endDate = date
+        form.typeId = ''
+        form.comment = ''
+    }
 
-  isDrawerOpen.value = true
+    isDrawerOpen.value = true
 }
 
 const openCreateFromToday = () => {
-  editingAbsence.value = null
-  form.employeeId = ''
-  form.typeId = ''
-  const now = new Date()
-  const today = toYmd(now.getFullYear(), now.getMonth(), now.getDate())
-  form.startDate = today
-  form.endDate = today
-  form.comment = ''
-  isDrawerOpen.value = true
+    editingAbsence.value = null
+    form.employeeId = ''
+    form.typeId = ''
+    const now = new Date()
+    const today = toYmd(now.getFullYear(), now.getMonth(), now.getDate())
+    form.startDate = today
+    form.endDate = today
+    form.comment = ''
+    isDrawerOpen.value = true
 }
 
 const handleSubmit = async () => {
-  if (isSubmitting.value) return
+    if (isSubmitting.value) return
 
-  isSubmitting.value = true
-  try {
-    const start = normalizeDate(form.startDate)
-    const end = normalizeDate(form.endDate)
-    const overlaps = absences.value.filter((absence) => {
-      if (absence.employee?.id !== Number(form.employeeId)) return false
-      if (editingAbsence.value && absence.id === editingAbsence.value.id) return false
-      const aStart = normalizeDate(absence.startDate)
-      const aEnd = normalizeDate(absence.endDate)
-      return start <= aEnd && end >= aStart
-    })
+    isSubmitting.value = true
+    try {
+        const start = normalizeDate(form.startDate)
+        const end = normalizeDate(form.endDate)
+        const overlaps = absences.value.filter((absence) => {
+            if (absence.employee?.id !== Number(form.employeeId)) return false
+            if (editingAbsence.value && absence.id === editingAbsence.value.id) return false
+            const aStart = normalizeDate(absence.startDate)
+            const aEnd = normalizeDate(absence.endDate)
+            return start <= aEnd && end >= aStart
+        })
 
-    for (const overlap of overlaps) {
-      await deleteAbsence(overlap.id)
+        for (const overlap of overlaps) {
+            await deleteAbsence(overlap.id)
+        }
+
+        if (editingAbsence.value) {
+            await updateAbsence({
+                id: editingAbsence.value.id,
+                employeeId: Number(form.employeeId),
+                typeId: Number(form.typeId),
+                startDate: form.startDate,
+                endDate: form.endDate,
+                comment: form.comment
+            })
+        } else {
+            await createAbsence({
+                employeeId: Number(form.employeeId),
+                typeId: Number(form.typeId),
+                startDate: form.startDate,
+                endDate: form.endDate,
+                comment: form.comment
+            })
+        }
+
+        closeDrawer()
+        await loadAbsences()
+    } finally {
+        isSubmitting.value = false
     }
-
-    if (editingAbsence.value) {
-      await updateAbsence({
-        id: editingAbsence.value.id,
-        employeeId: Number(form.employeeId),
-        typeId: Number(form.typeId),
-        startDate: form.startDate,
-        endDate: form.endDate,
-        comment: form.comment
-      })
-    } else {
-      await createAbsence({
-        employeeId: Number(form.employeeId),
-        typeId: Number(form.typeId),
-        startDate: form.startDate,
-        endDate: form.endDate,
-        comment: form.comment
-      })
-    }
-
-    closeDrawer()
-    await loadAbsences()
-  } finally {
-    isSubmitting.value = false
-  }
 }
 
 const handleDelete = async () => {
-  if (!editingAbsence.value) return
+    if (!editingAbsence.value) return
 
-  const ok = window.confirm('Supprimer cette absence ?')
-  if (!ok) return
+    const ok = window.confirm('Supprimer cette absence ?')
+    if (!ok) return
 
-  await deleteAbsence(editingAbsence.value.id)
-  closeDrawer()
-  await loadAbsences()
+    await deleteAbsence(editingAbsence.value.id)
+    closeDrawer()
+    await loadAbsences()
 }
 
-const printMonth = async (mode: '1' | '3') => {
-  printMode.value = mode
-  await nextTick()
-  window.print()
-  printMode.value = null
+const formatEmployeeName = (employee: Employee) => {
+    const initial = employee.lastName ? `${employee.lastName[0].toUpperCase()}.` : ''
+    return `${employee.firstName} ${initial}`.trim()
 }
+
 </script>
-
-<style>
-.print-only {
-  display: none;
-}
-
-@media print {
-  .no-print {
-    display: none !important;
-  }
-
-  .print-only {
-    display: block;
-  }
-
-  * {
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
-  }
-
-  .print-only .border-neutral-200,
-  .print-only .border-neutral-100 {
-    border-color: #d1d5db !important;
-  }
-
-  .print-only .bg-tertiary-500 {
-    background-color: #f3f4f8 !important;
-  }
-
-  .print-only .rounded-lg,
-  .print-only .rounded-md {
-    border-radius: 0 !important;
-  }
-
-  body {
-    background: #fff;
-  }
-}
-</style>
diff --git a/frontend/pages/employees.vue b/frontend/pages/employees.vue
index 4d41474..3f208e3 100644
--- a/frontend/pages/employees.vue
+++ b/frontend/pages/employees.vue
@@ -19,9 +19,10 @@
     </div>
 
     <div v-else class="max-h-[80vh] overflow-auto rounded-lg border border-neutral-200 bg-white">
-      <div class="grid grid-cols-[120px_1fr_200px] gap-4 border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-md font-semibold text-neutral-700">
+      <div class="grid grid-cols-[120px_1fr_1fr_200px] gap-4 border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-md font-semibold text-neutral-700">
         <span class="text-left">Prénom</span>
         <span class="text-left">Nom</span>
+        <span class="text-left">Site</span>
         <span class="text-right">Actions</span>
       </div>
       <div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500">
@@ -31,10 +32,11 @@
         <div
           v-for="employee in employees"
           :key="employee.id"
-          class="grid grid-cols-[120px_1fr_200px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
+          class="grid grid-cols-[120px_1fr_1fr_200px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
         >
           <span>{{ employee.firstName }}</span>
           <span>{{ employee.lastName }}</span>
+          <span>{{ employee.site?.name ?? '-' }}</span>
           <div class="flex items-center justify-end gap-2">
             <button
               type="button"
@@ -75,6 +77,19 @@
             class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200"
           />
         </div>
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="site">Site</label>
+          <select
+            id="site"
+            v-model="form.siteId"
+            class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
+          >
+            <option value="">Aucun site</option>
+            <option v-for="site in sites" :key="site.id" :value="site.id">
+              {{ site.name }}
+            </option>
+          </select>
+        </div>
         <div class="flex justify-end gap-3 pt-2">
           <button
             type="button"
@@ -98,7 +113,9 @@
 
 <script setup lang="ts">
 import type { Employee } from '~/services/dto/employee'
+import type { Site } from '~/services/dto/site'
 import { createEmployee, deleteEmployee, listEmployees, updateEmployee } from '~/services/employees'
+import { listSites } from '~/services/sites'
 
 const isDrawerOpen = ref(false)
 const isSubmitting = ref(false)
@@ -109,10 +126,12 @@ const drawerTitle = computed(() =>
 )
 
 const employees = ref<Employee[]>([])
+const sites = ref<Site[]>([])
 
 const form = reactive({
   firstName: '',
-  lastName: ''
+  lastName: '',
+  siteId: '' as number | ''
 })
 
 const loadEmployees = async () => {
@@ -124,7 +143,13 @@ const loadEmployees = async () => {
   }
 }
 
-onMounted(loadEmployees)
+const loadSites = async () => {
+  sites.value = await listSites()
+}
+
+onMounted(async () => {
+  await Promise.all([loadEmployees(), loadSites()])
+})
 
 const handleSubmit = async () => {
   if (isSubmitting.value) return
@@ -134,17 +159,20 @@ const handleSubmit = async () => {
     if (editingEmployee.value) {
       await updateEmployee(editingEmployee.value.id, {
         firstName: form.firstName,
-        lastName: form.lastName
+        lastName: form.lastName,
+        siteId: form.siteId === '' ? null : Number(form.siteId)
       })
     } else {
       await createEmployee({
         firstName: form.firstName,
-        lastName: form.lastName
+        lastName: form.lastName,
+        siteId: form.siteId === '' ? null : Number(form.siteId)
       })
     }
 
     form.firstName = ''
     form.lastName = ''
+    form.siteId = ''
     editingEmployee.value = null
     isDrawerOpen.value = false
     await loadEmployees()
@@ -157,6 +185,7 @@ const openEdit = (employee: Employee) => {
   editingEmployee.value = employee
   form.firstName = employee.firstName
   form.lastName = employee.lastName
+  form.siteId = employee.site?.id ?? ''
   isDrawerOpen.value = true
 }
 
diff --git a/frontend/pages/sites.vue b/frontend/pages/sites.vue
new file mode 100644
index 0000000..396af31
--- /dev/null
+++ b/frontend/pages/sites.vue
@@ -0,0 +1,194 @@
+<template>
+  <div>
+    <div class="flex items-center justify-between pb-12">
+      <h1 class="text-4xl font-bold text-primary-500">Sites</h1>
+      <button
+        type="button"
+        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+        @click="openCreate"
+      >
+        Ajouter un site
+      </button>
+    </div>
+
+    <div
+      v-if="!isLoading && sites.length === 0"
+      class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600"
+    >
+      Aucun site pour le moment.
+    </div>
+
+    <div v-else class="max-h-[80vh] overflow-auto rounded-lg border border-neutral-200 bg-white">
+      <div class="grid grid-cols-[1fr_140px_160px] gap-4 border-b border-neutral-200 bg-tertiary-500 px-6 py-3 text-md font-semibold text-neutral-700">
+        <span class="text-left">Nom</span>
+        <span class="text-left">Couleur</span>
+        <span class="text-right">Actions</span>
+      </div>
+      <div v-if="isLoading" class="px-6 py-4 text-md text-neutral-500">
+        Chargement...
+      </div>
+      <div v-else>
+        <div
+          v-for="site in sites"
+          :key="site.id"
+          class="grid grid-cols-[1fr_140px_160px] items-center gap-4 border-b border-neutral-100 px-6 py-3 text-md text-neutral-800 last:border-b-0"
+        >
+          <span class="text-left">{{ site.name }}</span>
+          <div class="flex items-center gap-2 justify-start">
+            <span
+              class="inline-block h-3 w-3 rounded-full"
+              :style="{ backgroundColor: site.color }"
+            />
+            <span class="text-md uppercase text-neutral-500">{{ site.color }}</span>
+          </div>
+          <div class="flex items-center justify-end gap-2">
+            <button
+              type="button"
+              class="rounded-md border border-neutral-200 px-2 py-1 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
+              @click="openEdit(site)"
+            >
+              Modifier
+            </button>
+            <button
+              type="button"
+              class="rounded-md border border-red-200 px-2 py-1 text-md font-semibold text-red-600 hover:bg-red-50"
+              @click="confirmDelete(site)"
+            >
+              Supprimer
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
+      <form class="space-y-4" @submit.prevent="handleSubmit">
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="name">Nom</label>
+          <input
+            id="name"
+            v-model="form.name"
+            type="text"
+            class="mt-2 w-full rounded-md border border-neutral-300 px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-200"
+          />
+        </div>
+        <div>
+          <label class="text-md font-semibold text-neutral-700" for="color">Couleur</label>
+          <div class="mt-2 flex items-center gap-3">
+            <input
+              id="color"
+              v-model="form.color"
+              type="color"
+              class="h-10 w-16 cursor-pointer rounded-md border border-neutral-300 bg-white p-1"
+            />
+            <span class="text-md font-semibold text-neutral-600">{{ form.color }}</span>
+          </div>
+        </div>
+        <div class="flex justify-end gap-3 pt-2">
+          <button
+            type="button"
+            class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
+            @click="closeDrawer"
+          >
+            Annuler
+          </button>
+          <button
+            type="submit"
+            class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
+            :disabled="isSubmitting"
+          >
+            Enregistrer
+          </button>
+        </div>
+      </form>
+    </AppDrawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Site } from '~/services/dto/site'
+import { createSite, deleteSite, listSites, updateSite } from '~/services/sites'
+
+const isDrawerOpen = ref(false)
+const isSubmitting = ref(false)
+const isLoading = ref(false)
+
+const sites = ref<Site[]>([])
+const editingSite = ref<Site | null>(null)
+
+const drawerTitle = computed(() =>
+  editingSite.value ? 'Modifier un site' : 'Ajouter un site'
+)
+
+const form = reactive({
+  name: '',
+  color: '#222783'
+})
+
+const loadSites = async () => {
+  isLoading.value = true
+  try {
+    sites.value = await listSites()
+  } finally {
+    isLoading.value = false
+  }
+}
+
+onMounted(loadSites)
+
+const resetForm = () => {
+  form.name = ''
+  form.color = '#222783'
+}
+
+const openCreate = () => {
+  editingSite.value = null
+  resetForm()
+  isDrawerOpen.value = true
+}
+
+const openEdit = (site: Site) => {
+  editingSite.value = site
+  form.name = site.name
+  form.color = site.color
+  isDrawerOpen.value = true
+}
+
+const closeDrawer = () => {
+  isDrawerOpen.value = false
+  editingSite.value = null
+  resetForm()
+}
+
+const handleSubmit = async () => {
+  if (isSubmitting.value) return
+
+  isSubmitting.value = true
+  try {
+    if (editingSite.value) {
+      await updateSite(editingSite.value.id, {
+        name: form.name,
+        color: form.color
+      })
+    } else {
+      await createSite({
+        name: form.name,
+        color: form.color
+      })
+    }
+
+    closeDrawer()
+    await loadSites()
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+const confirmDelete = async (site: Site) => {
+  const ok = window.confirm(`Supprimer le site ${site.name} ?`)
+  if (!ok) return
+
+  await deleteSite(site.id)
+  await loadSites()
+}
+</script>
diff --git a/frontend/services/absence-types.ts b/frontend/services/absence-types.ts
index 8d4b6ac..90a767e 100644
--- a/frontend/services/absence-types.ts
+++ b/frontend/services/absence-types.ts
@@ -16,7 +16,8 @@ export const createAbsenceType = async (
 ) => {
   const api = useApi()
   return api.post<AbsenceType>('/absence_types', payload, {
-    toastSuccessMessage: 'Type créé.'
+    toastSuccessKey: 'success.absenceType.create',
+    toastErrorKey: 'errors.absenceType.create'
   })
 }
 
@@ -26,13 +27,15 @@ export const updateAbsenceType = async (
 ) => {
   const api = useApi()
   return api.patch<AbsenceType>(`/absence_types/${id}`, payload, {
-    toastSuccessMessage: 'Type mis à jour.'
+    toastSuccessKey: 'success.absenceType.update',
+    toastErrorKey: 'errors.absenceType.update'
   })
 }
 
 export const deleteAbsenceType = async (id: number) => {
   const api = useApi()
   return api.delete(`/absence_types/${id}`, {}, {
-    toastSuccessMessage: 'Type supprimé.'
+    toastSuccessKey: 'success.absenceType.delete',
+    toastErrorKey: 'errors.absenceType.delete'
   })
 }
diff --git a/frontend/services/absences.ts b/frontend/services/absences.ts
index fc2229d..d416249 100644
--- a/frontend/services/absences.ts
+++ b/frontend/services/absences.ts
@@ -26,7 +26,8 @@ export const createAbsence = async (payload: {
     endDate: payload.endDate,
     comment: payload.comment
   }, {
-    toastSuccessMessage: 'Absence créée.'
+    toastSuccessKey: 'success.absence.create',
+    toastErrorKey: 'errors.absence.create'
   })
 }
 
@@ -46,13 +47,15 @@ export const updateAbsence = async (payload: {
     endDate: payload.endDate,
     comment: payload.comment
   }, {
-    toastSuccessMessage: 'Absence mise à jour.'
+    toastSuccessKey: 'success.absence.update',
+    toastErrorKey: 'errors.absence.update'
   })
 }
 
 export const deleteAbsence = async (id: number) => {
   const api = useApi()
   return api.delete(`/absences/${id}`, {}, {
-    toastSuccessMessage: 'Absence supprimée.'
+    toastSuccessKey: 'success.absence.delete',
+    toastErrorKey: 'errors.absence.delete'
   })
 }
diff --git a/frontend/services/dto/employee.ts b/frontend/services/dto/employee.ts
index e72dced..31be8c5 100644
--- a/frontend/services/dto/employee.ts
+++ b/frontend/services/dto/employee.ts
@@ -1,5 +1,8 @@
+import type { Site } from './site'
+
 export type Employee = {
   id: number
   firstName: string
   lastName: string
+  site?: Site | null
 }
diff --git a/frontend/services/dto/site.ts b/frontend/services/dto/site.ts
new file mode 100644
index 0000000..037ac1a
--- /dev/null
+++ b/frontend/services/dto/site.ts
@@ -0,0 +1,5 @@
+export type Site = {
+  id: number
+  name: string
+  color: string
+}
diff --git a/frontend/services/employees.ts b/frontend/services/employees.ts
index 1b50792..fa5898c 100644
--- a/frontend/services/employees.ts
+++ b/frontend/services/employees.ts
@@ -11,26 +11,45 @@ export const listEmployees = async () => {
   return extractItems<Employee>(data)
 }
 
-export const createEmployee = async (payload: Pick<Employee, 'firstName' | 'lastName'>) => {
+export const createEmployee = async (payload: {
+  firstName: string
+  lastName: string
+  siteId?: number | null
+}) => {
   const api = useApi()
-  return api.post<Employee>('/employees', payload, {
-    toastSuccessMessage: 'Employé créé.'
+  return api.post<Employee>('/employees', {
+    firstName: payload.firstName,
+    lastName: payload.lastName,
+    site: payload.siteId ? `/api/sites/${payload.siteId}` : null
+  }, {
+    toastSuccessKey: 'success.employee.create',
+    toastErrorKey: 'errors.employee.create'
   })
 }
 
 export const updateEmployee = async (
   id: number,
-  payload: Pick<Employee, 'firstName' | 'lastName'>
+  payload: {
+    firstName: string
+    lastName: string
+    siteId?: number | null
+  }
 ) => {
   const api = useApi()
-  return api.patch<Employee>(`/employees/${id}`, payload, {
-    toastSuccessMessage: 'Employé mis à jour.'
+  return api.patch<Employee>(`/employees/${id}`, {
+    firstName: payload.firstName,
+    lastName: payload.lastName,
+    site: payload.siteId ? `/api/sites/${payload.siteId}` : null
+  }, {
+    toastSuccessKey: 'success.employee.update',
+    toastErrorKey: 'errors.employee.update'
   })
 }
 
 export const deleteEmployee = async (id: number) => {
   const api = useApi()
   return api.delete(`/employees/${id}`, {}, {
-    toastSuccessMessage: 'Employé supprimé.'
+    toastSuccessKey: 'success.employee.delete',
+    toastErrorKey: 'errors.employee.delete'
   })
 }
diff --git a/frontend/services/sites.ts b/frontend/services/sites.ts
new file mode 100644
index 0000000..50e87dd
--- /dev/null
+++ b/frontend/services/sites.ts
@@ -0,0 +1,36 @@
+import type { Site } from './dto/site'
+import { extractItems } from '~/utils/api'
+
+export const listSites = async () => {
+  const api = useApi()
+  const data = await api.get<Site[] | { 'hydra:member'?: Site[] }>(
+    '/sites',
+    {},
+    { toast: false }
+  )
+  return extractItems<Site>(data)
+}
+
+export const createSite = async (payload: Pick<Site, 'name' | 'color'>) => {
+  const api = useApi()
+  return api.post<Site>('/sites', payload, {
+    toastSuccessKey: 'success.site.create',
+    toastErrorKey: 'errors.site.create'
+  })
+}
+
+export const updateSite = async (id: number, payload: Pick<Site, 'name' | 'color'>) => {
+  const api = useApi()
+  return api.patch<Site>(`/sites/${id}`, payload, {
+    toastSuccessKey: 'success.site.update',
+    toastErrorKey: 'errors.site.update'
+  })
+}
+
+export const deleteSite = async (id: number) => {
+  const api = useApi()
+  return api.delete(`/sites/${id}`, {}, {
+    toastSuccessKey: 'success.site.delete',
+    toastErrorKey: 'errors.site.delete'
+  })
+}
diff --git a/migrations/Version20260203123000.php b/migrations/Version20260203123000.php
new file mode 100644
index 0000000..3d599be
--- /dev/null
+++ b/migrations/Version20260203123000.php
@@ -0,0 +1,32 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+final class Version20260203123000 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Create sites table and link employees to site';
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('CREATE TABLE sites (id SERIAL NOT NULL, name VARCHAR(150) NOT NULL, color VARCHAR(20) NOT NULL, PRIMARY KEY(id))');
+        $this->addSql('ALTER TABLE employees ADD site_id INT DEFAULT NULL');
+        $this->addSql('CREATE INDEX IDX_EMPLOYEES_SITE ON employees (site_id)');
+        $this->addSql('ALTER TABLE employees ADD CONSTRAINT FK_EMPLOYEES_SITE FOREIGN KEY (site_id) REFERENCES sites (id) NOT DEFERRABLE INITIALLY IMMEDIATE');
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql('ALTER TABLE employees DROP CONSTRAINT FK_EMPLOYEES_SITE');
+        $this->addSql('DROP INDEX IDX_EMPLOYEES_SITE');
+        $this->addSql('ALTER TABLE employees DROP COLUMN site_id');
+        $this->addSql('DROP TABLE sites');
+    }
+}
diff --git a/src/Entity/Employee.php b/src/Entity/Employee.php
index 04478b5..ee8153d 100644
--- a/src/Entity/Employee.php
+++ b/src/Entity/Employee.php
@@ -9,7 +9,10 @@ use DateTimeImmutable;
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Component\Serializer\Attribute\Groups;
 
-#[ApiResource(normalizationContext: ['groups' => ['employee:read']])]
+#[ApiResource(
+    normalizationContext: ['groups' => ['employee:read', 'site:read']],
+    denormalizationContext: ['groups' => ['employee:write']]
+)]
 #[ORM\Entity]
 #[ORM\Table(name: 'employees')]
 class Employee
@@ -21,13 +24,19 @@ class Employee
     private ?int $id = null;
 
     #[ORM\Column(type: 'string', length: 100)]
-    #[Groups(['absence:read', 'employee:read'])]
+    #[Groups(['absence:read', 'employee:read', 'employee:write'])]
     private string $firstName = '';
 
     #[ORM\Column(type: 'string', length: 100)]
-    #[Groups(['absence:read', 'employee:read'])]
+    #[Groups(['absence:read', 'employee:read', 'employee:write'])]
     private string $lastName = '';
 
+    #[ApiPlatform\Metadata\ApiProperty(readableLink: true)]
+    #[ORM\ManyToOne(targetEntity: Site::class)]
+    #[ORM\JoinColumn(nullable: true)]
+    #[Groups(['employee:read', 'employee:write'])]
+    private ?Site $site = null;
+
     #[ORM\Column(type: 'datetime_immutable')]
     private DateTimeImmutable $createdAt;
 
@@ -65,6 +74,18 @@ class Employee
         return $this;
     }
 
+    public function getSite(): ?Site
+    {
+        return $this->site;
+    }
+
+    public function setSite(?Site $site): self
+    {
+        $this->site = $site;
+
+        return $this;
+    }
+
     public function getCreatedAt(): DateTimeImmutable
     {
         return $this->createdAt;
diff --git a/src/Entity/Site.php b/src/Entity/Site.php
new file mode 100644
index 0000000..7b4f584
--- /dev/null
+++ b/src/Entity/Site.php
@@ -0,0 +1,58 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Entity;
+
+use ApiPlatform\Metadata\ApiResource;
+use Doctrine\ORM\Mapping as ORM;
+use Symfony\Component\Serializer\Attribute\Groups;
+
+#[ApiResource(normalizationContext: ['groups' => ['site:read']])]
+#[ORM\Entity]
+#[ORM\Table(name: 'sites')]
+class Site
+{
+    #[ORM\Id]
+    #[ORM\GeneratedValue]
+    #[ORM\Column(type: 'integer')]
+    #[Groups(['site:read', 'employee:read'])]
+    private ?int $id = null;
+
+    #[ORM\Column(type: 'string', length: 150)]
+    #[Groups(['site:read', 'employee:read'])]
+    private string $name = '';
+
+    #[ORM\Column(type: 'string', length: 20)]
+    #[Groups(['site:read', 'employee:read'])]
+    private string $color = '';
+
+    public function getId(): ?int
+    {
+        return $this->id;
+    }
+
+    public function getName(): string
+    {
+        return $this->name;
+    }
+
+    public function setName(string $name): self
+    {
+        $this->name = $name;
+
+        return $this;
+    }
+
+    public function getColor(): string
+    {
+        return $this->color;
+    }
+
+    public function setColor(string $color): self
+    {
+        $this->color = $color;
+
+        return $this;
+    }
+}