diff --git a/frontend/components/project/ProjectGroupTab.vue b/frontend/components/project/ProjectGroupTab.vue
index d267bb8..cab52be 100644
--- a/frontend/components/project/ProjectGroupTab.vue
+++ b/frontend/components/project/ProjectGroupTab.vue
@@ -2,12 +2,22 @@
     <div>
         <div class="flex items-center justify-between">
             <h2 class="text-lg font-bold text-neutral-900">Groupes</h2>
-            <button
-                class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
-                @click="openCreate"
-            >
-                + Ajouter un groupe
-            </button>
+            <div class="flex items-center gap-3">
+                <button
+                    type="button"
+                    class="text-sm font-medium text-neutral-500 hover:text-neutral-700"
+                    @click="showArchived = !showArchived"
+                >
+                    {{ showArchived ? $t('archive.hideArchived') : $t('archive.showArchived') }}
+                </button>
+                <button
+                    v-if="!showArchived"
+                    class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
+                    @click="openCreate"
+                >
+                    + Ajouter un groupe
+                </button>
+            </div>
         </div>
 
         <DataTable
@@ -15,7 +25,7 @@
             :items="items"
             :loading="isLoading"
             empty-message="Aucun groupe trouvé."
-            deletable
+            :deletable="!showArchived"
             @row-click="openEdit"
             @delete="(item) => handleDelete(item.id)"
         >
@@ -28,6 +38,24 @@
             <template #cell-description="{ item }">
                 {{ item.description ?? '—' }}
             </template>
+            <template #actions="{ item }">
+                <button
+                    v-if="!showArchived && canArchiveGroup(item)"
+                    type="button"
+                    class="rounded-md bg-neutral-500 px-3 py-1 text-xs font-semibold text-white hover:bg-neutral-600"
+                    @click.stop="handleArchive(item)"
+                >
+                    {{ $t('archive.archiveButton') }}
+                </button>
+                <button
+                    v-if="showArchived"
+                    type="button"
+                    class="rounded-md bg-neutral-500 px-3 py-1 text-xs font-semibold text-white hover:bg-neutral-600"
+                    @click.stop="handleUnarchive(item)"
+                >
+                    {{ $t('archive.unarchiveButton') }}
+                </button>
+            </template>
         </DataTable>
 
         <TaskGroupDrawer
@@ -41,7 +69,9 @@
 
 <script setup lang="ts">
 import type { TaskGroup } from '~/services/dto/task-group'
+import type { Task } from '~/services/dto/task'
 import { useTaskGroupService } from '~/services/task-groups'
+import { useTaskService } from '~/services/tasks'
 
 const props = defineProps<{
     projectId: number
@@ -59,16 +89,38 @@ const columns: DataTableColumn[] = [
     { key: 'description', label: 'Description', class: 'max-w-xs truncate text-neutral-700' },
 ]
 
-const { getByProject, remove } = useTaskGroupService()
-const items = ref<TaskGroup[]>([])
+const groupService = useTaskGroupService()
+const taskService = useTaskService()
+
+const allGroups = ref<TaskGroup[]>([])
+const activeTasks = ref<Task[]>([])
+const archivedTasks = ref<Task[]>([])
 const isLoading = ref(true)
 const drawerOpen = ref(false)
 const selectedItem = ref<TaskGroup | null>(null)
+const showArchived = ref(false)
+
+const items = computed(() =>
+    allGroups.value.filter(g => showArchived.value ? g.archived : !g.archived)
+)
+
+function canArchiveGroup(group: TaskGroup): boolean {
+    const groupTasks = activeTasks.value.filter(t => t.group?.id === group.id)
+    if (groupTasks.length === 0) return false
+    return groupTasks.every(t => t.status?.isFinal === true)
+}
 
 async function loadItems() {
     isLoading.value = true
     try {
-        items.value = await getByProject(props.projectId)
+        const [g, t, at] = await Promise.all([
+            groupService.getByProject(props.projectId),
+            taskService.getByProject(props.projectId),
+            taskService.getByProjectArchived(props.projectId),
+        ])
+        allGroups.value = g
+        activeTasks.value = t
+        archivedTasks.value = at
     } finally {
         isLoading.value = false
     }
@@ -85,7 +137,23 @@ function openEdit(item: TaskGroup) {
 }
 
 async function handleDelete(id: number) {
-    await remove(id)
+    await groupService.remove(id)
+    await loadItems()
+    emit('updated')
+}
+
+async function handleArchive(group: TaskGroup) {
+    const groupTasks = activeTasks.value.filter(t => t.group?.id === group.id)
+    await Promise.all(groupTasks.map(t => taskService.update(t.id, { archived: true })))
+    await groupService.update(group.id, { archived: true })
+    await loadItems()
+    emit('updated')
+}
+
+async function handleUnarchive(group: TaskGroup) {
+    const groupTasks = archivedTasks.value.filter(t => t.group?.id === group.id)
+    await Promise.all(groupTasks.map(t => taskService.update(t.id, { archived: false })))
+    await groupService.update(group.id, { archived: false })
     await loadItems()
     emit('updated')
 }