diff --git a/frontend/components/hours/HoursWeekView.vue b/frontend/components/hours/HoursWeekView.vue
index 688045a..32ffdc3 100644
--- a/frontend/components/hours/HoursWeekView.vue
+++ b/frontend/components/hours/HoursWeekView.vue
@@ -96,7 +96,7 @@
           </p>
           <p class="text-[11px] text-neutral-500 truncate inline-flex items-center gap-2">
             <span>{{ row.siteName ?? 'Sans site' }}<span v-if="row.contractNature"> — {{ contractNatureLabel(row.contractNature) }}</span></span>
-            <button v-if="isAdmin" type="button" class="inline-flex items-center justify-center rounded-md p-1 text-white transition-colors" :class="row.comment ? 'bg-red-500 hover:bg-red-600' : 'bg-primary-500 hover:bg-secondary-500'" :title="row.comment ?? 'Ajouter un commentaire'" @click="$emit('open-comment', row)">
+            <button v-if="isAdmin" type="button" class="flex items-center text-white p-1" :class="row.comment ? 'bg-red-500 hover:bg-red-600' : 'bg-primary-500 hover:bg-secondary-500'" :title="row.comment ?? 'Ajouter un commentaire'" @click="$emit('open-comment', row)">
               <Icon name="mdi:comment-text-outline" size="12"/>
             </button>
           </p>
diff --git a/frontend/components/hours/WeekCommentDrawer.vue b/frontend/components/hours/WeekCommentDrawer.vue
index 3fb4563..c9adedf 100644
--- a/frontend/components/hours/WeekCommentDrawer.vue
+++ b/frontend/components/hours/WeekCommentDrawer.vue
@@ -1,27 +1,39 @@
 <template>
-  <AppDrawer v-model="drawerOpen" :title="`Commentaire — ${formatWeekRange}`">
+  <MalioDrawer v-model="drawerOpen" title="Commentaire">
     <form class="space-y-4" @submit.prevent="onSave">
       <div v-if="employeeLabel" class="text-md font-semibold text-neutral-700">{{ employeeLabel }}</div>
-      <div>
-        <label class="text-md font-semibold text-neutral-700" for="week-comment-content">Commentaire</label>
-        <textarea id="week-comment-content" v-model="content" rows="8" maxlength="5000" class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20" placeholder="Ex. Arrêt maladie lundi, reprise jeudi..." />
-        <p class="mt-1 text-xs text-neutral-400">{{ content.length }} / 5000</p>
-      </div>
+      <div class="text-md font-semibold text-neutral-700">{{ formatWeekRange }}</div>
+      <MalioInputTextArea
+        v-model="content"
+        label="Commentaire"
+        :size="8"
+        :max-length="5000"
+        :show-counter="true"
+        resize="vertical"
+      />
       <div class="sticky bottom-0 -mx-[20px] bg-white px-[20px] py-3 flex justify-between gap-3">
-        <button v-if="commentId" type="button" class="rounded-lg bg-red-500 px-4 py-2 text-md font-semibold text-white hover:bg-red-600 disabled:opacity-50" :disabled="isSubmitting" @click="onDelete">Supprimer</button>
-        <div class="flex gap-3 ml-auto">
-          <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="drawerOpen = false">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:opacity-50" :disabled="isSubmitting || !canSubmit">Enregistrer</button>
-        </div>
+        <MalioButton
+          v-if="commentId"
+          label="Supprimer"
+          variant="danger"
+          :disabled="isSubmitting"
+          @click="onDelete"
+        />
+        <MalioButton
+          label="Enregistrer"
+          button-class="ml-auto"
+          :disabled="isSubmitting || !canSubmit"
+          @click="onSave"
+        />
       </div>
     </form>
-  </AppDrawer>
+  </MalioDrawer>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
-import AppDrawer from '~/components/AppDrawer.vue'
 import { createWeekComment, deleteWeekComment, updateWeekComment } from '~/services/employee-week-comments'
+import { getIsoWeekNumber, parseYmd } from '~/utils/date'
 
 const props = defineProps<{
   modelValue: boolean
@@ -42,7 +54,9 @@ watch(() => [props.modelValue, props.initialContent] as const, ([open, init]) =>
 
 const formatWeekRange = computed(() => {
   const fmt = (ymd: string) => { const p = ymd.split('-'); return p.length === 3 ? `${p[2]}/${p[1]}/${p[0]}` : ymd }
-  return `${fmt(props.weekStart)} → ${fmt(props.weekEnd)}`
+  const start = parseYmd(props.weekStart)
+  const weekLabel = start ? `S${getIsoWeekNumber(start)}` : ''
+  return weekLabel ? `${weekLabel} du ${fmt(props.weekStart)} au ${fmt(props.weekEnd)}` : `${fmt(props.weekStart)} → ${fmt(props.weekEnd)}`
 })
 
 const canSubmit = computed(() => content.value.trim().length > 0 || props.commentId !== null)
diff --git a/frontend/i18n/locales/fr.json b/frontend/i18n/locales/fr.json
index 75abe0e..4d2fb3e 100644
--- a/frontend/i18n/locales/fr.json
+++ b/frontend/i18n/locales/fr.json
@@ -59,6 +59,10 @@
         },
         "leaveRecap": {
             "load": "Impossible de charger le récap des congés."
+        },
+        "weekComment": {
+            "save": "Impossible d'enregistrer le commentaire de semaine.",
+            "delete": "Impossible de supprimer le commentaire de semaine."
         }
     },
     "success": {
@@ -110,6 +114,10 @@
             "create": "Observation créée.",
             "update": "Observation mise à jour.",
             "delete": "Observation supprimée."
+        },
+        "weekComment": {
+            "save": "Commentaire enregistré.",
+            "delete": "Commentaire supprimé."
         }
     }
 }
diff --git a/frontend/services/employee-week-comments.ts b/frontend/services/employee-week-comments.ts
index d93fc4a..dd1e745 100644
--- a/frontend/services/employee-week-comments.ts
+++ b/frontend/services/employee-week-comments.ts
@@ -10,15 +10,15 @@ export const createWeekComment = async (payload: { employeeId: number; weekStart
     employee: `/api/employees/${payload.employeeId}`,
     weekStartDate: payload.weekStartDate,
     content: payload.content
-  }, { toastSuccessKey: 'success.week-comment.save', toastErrorKey: 'errors.week-comment.save' })
+  }, { toastSuccessKey: 'success.weekComment.save', toastErrorKey: 'errors.weekComment.save' })
 }
 
 export const updateWeekComment = async (id: number, content: string) => {
   const api = useApi()
-  return api.patch<EmployeeWeekComment>(`/employee_week_comments/${id}`, { content }, { toastSuccessKey: 'success.week-comment.save', toastErrorKey: 'errors.week-comment.save' })
+  return api.patch<EmployeeWeekComment>(`/employee_week_comments/${id}`, { content }, { toastSuccessKey: 'success.weekComment.save', toastErrorKey: 'errors.weekComment.save' })
 }
 
 export const deleteWeekComment = async (id: number) => {
   const api = useApi()
-  await api.delete(`/employee_week_comments/${id}`, {}, { toastSuccessKey: 'success.week-comment.delete', toastErrorKey: 'errors.week-comment.delete' })
+  await api.delete(`/employee_week_comments/${id}`, {}, { toastSuccessKey: 'success.weekComment.delete', toastErrorKey: 'errors.weekComment.delete' })
 }