diff --git a/frontend/components/TaskCard.vue b/frontend/components/TaskCard.vue
new file mode 100644
index 0000000..e0ccdd2
--- /dev/null
+++ b/frontend/components/TaskCard.vue
@@ -0,0 +1,72 @@
+<template>
+    <div
+        class="cursor-pointer rounded-lg border border-neutral-200 bg-white p-3 shadow-sm transition hover:shadow-md"
+        draggable="true"
+        @dragstart="onDragStart"
+        @dragend="onDragEnd"
+        @click="emit('click')"
+    >
+        <div class="flex items-start justify-between gap-2">
+            <h4 class="text-sm font-semibold text-neutral-900">{{ task.title }}</h4>
+            <button
+                class="shrink-0 text-neutral-400 hover:text-primary-500"
+                @click.stop
+            >
+                <Icon name="mdi:play-circle-outline" size="20" />
+            </button>
+        </div>
+
+        <div class="mt-2 flex items-center gap-1.5">
+            <span
+                v-if="task.priority"
+                class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                :style="{ backgroundColor: task.priority.color }"
+            >
+                {{ task.priority.label }}
+            </span>
+            <span
+                v-for="type in task.types"
+                :key="type.id"
+                class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                :style="{ backgroundColor: type.color }"
+            >
+                {{ type.label }}
+            </span>
+            <span
+                v-if="task.assignee"
+                class="ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-primary-500 text-[10px] font-bold text-white"
+                :title="task.assignee.username"
+            >
+                {{ task.assignee.username.substring(0, 2).toUpperCase() }}
+            </span>
+            <span
+                v-else
+                class="ml-auto flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 text-neutral-400"
+            >
+                <Icon name="mdi:account-outline" size="14" />
+            </span>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Task } from '~/services/dto/task'
+
+const props = defineProps<{
+    task: Task
+}>()
+
+const emit = defineEmits<{
+    (e: 'click'): void
+}>()
+
+function onDragStart(event: DragEvent) {
+    event.dataTransfer!.effectAllowed = 'move'
+    event.dataTransfer!.setData('text/plain', String(props.task.id))
+    ;(event.target as HTMLElement).classList.add('opacity-50')
+}
+
+function onDragEnd(event: DragEvent) {
+    ;(event.target as HTMLElement).classList.remove('opacity-50')
+}
+</script>
diff --git a/frontend/components/TaskDrawer.vue b/frontend/components/TaskDrawer.vue
new file mode 100644
index 0000000..54f8637
--- /dev/null
+++ b/frontend/components/TaskDrawer.vue
@@ -0,0 +1,225 @@
+<template>
+    <AppDrawer v-model="isOpen" :title="isEditing ? 'Modifier un ticket' : 'Ajouter un ticket'">
+        <form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
+            <MalioInputText
+                v-model="form.title"
+                label="Titre"
+                input-class="w-full"
+                :error="touched.title && !form.title.trim() ? 'Le titre est requis' : ''"
+                @blur="touched.title = true"
+            />
+            <MalioInputTextArea
+                v-model="form.description"
+                label="Description"
+                :size="3"
+            />
+            <MalioSelect
+                v-model="form.statusId"
+                :options="statusOptions"
+                label="Statut"
+                empty-option-label="Aucun statut"
+                min-width="w-full"
+            />
+            <MalioSelect
+                v-model="form.effortId"
+                :options="effortOptions"
+                label="Effort"
+                empty-option-label="Aucun effort"
+                min-width="w-full"
+            />
+            <MalioSelect
+                v-model="form.priorityId"
+                :options="priorityOptions"
+                label="Priorité"
+                empty-option-label="Aucune priorité"
+                min-width="w-full"
+            />
+            <MalioSelect
+                v-model="form.assigneeId"
+                :options="userOptions"
+                label="User"
+                empty-option-label="Aucun utilisateur"
+                min-width="w-full"
+            />
+            <MalioSelect
+                v-model="form.groupId"
+                :options="groupOptions"
+                label="Groupe"
+                empty-option-label="Aucun groupe"
+                min-width="w-full"
+            />
+
+            <div class="mt-4">
+                <p class="mb-2 text-sm font-medium text-neutral-700">Types</p>
+                <div class="flex flex-wrap gap-2">
+                    <label
+                        v-for="type in types"
+                        :key="type.id"
+                        class="cursor-pointer rounded-full px-3 py-1 text-xs font-semibold transition"
+                        :class="form.typeIds.includes(type.id)
+                            ? 'text-white'
+                            : 'bg-neutral-100 text-neutral-600 hover:bg-neutral-200'"
+                        :style="form.typeIds.includes(type.id) ? { backgroundColor: type.color } : {}"
+                    >
+                        <input
+                            type="checkbox"
+                            class="hidden"
+                            :value="type.id"
+                            :checked="form.typeIds.includes(type.id)"
+                            @change="toggleType(type.id)"
+                        />
+                        {{ type.label }}
+                    </label>
+                </div>
+            </div>
+
+            <div class="mt-6 flex justify-end">
+                <button
+                    type="submit"
+                    class="rounded-md bg-primary-500 px-6 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                    :disabled="isSubmitting"
+                >
+                    Enregistrer
+                </button>
+            </div>
+        </form>
+    </AppDrawer>
+</template>
+
+<script setup lang="ts">
+import type { Task, TaskWrite } from '~/services/dto/task'
+import type { TaskStatus } from '~/services/dto/task-status'
+import type { TaskEffort } from '~/services/dto/task-effort'
+import type { TaskPriority } from '~/services/dto/task-priority'
+import type { TaskType } from '~/services/dto/task-type'
+import type { TaskGroup } from '~/services/dto/task-group'
+import type { UserData } from '~/services/dto/user-data'
+import { useTaskService } from '~/services/tasks'
+
+const props = defineProps<{
+    modelValue: boolean
+    task: Task | null
+    projectId: number
+    statuses: TaskStatus[]
+    efforts: TaskEffort[]
+    priorities: TaskPriority[]
+    types: TaskType[]
+    groups: TaskGroup[]
+    users: UserData[]
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'saved'): void
+}>()
+
+const isOpen = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v),
+})
+
+const isEditing = computed(() => !!props.task)
+const isSubmitting = ref(false)
+
+const form = reactive({
+    title: '',
+    description: '',
+    statusId: null as number | null,
+    effortId: null as number | null,
+    priorityId: null as number | null,
+    assigneeId: null as number | null,
+    groupId: null as number | null,
+    typeIds: [] as number[],
+})
+
+const touched = reactive({
+    title: false,
+})
+
+const statusOptions = computed(() =>
+    props.statuses.map(s => ({ label: s.label, value: s.id }))
+)
+
+const effortOptions = computed(() =>
+    props.efforts.map(e => ({ label: e.label, value: e.id }))
+)
+
+const priorityOptions = computed(() =>
+    props.priorities.map(p => ({ label: p.label, value: p.id }))
+)
+
+const userOptions = computed(() =>
+    props.users.map(u => ({ label: u.username, value: u.id }))
+)
+
+const groupOptions = computed(() =>
+    props.groups.map(g => ({ label: g.title, value: g.id }))
+)
+
+function toggleType(id: number) {
+    const idx = form.typeIds.indexOf(id)
+    if (idx >= 0) {
+        form.typeIds.splice(idx, 1)
+    } else {
+        form.typeIds.push(id)
+    }
+}
+
+watch(() => props.modelValue, (open) => {
+    if (open) {
+        if (props.task) {
+            form.title = props.task.title ?? ''
+            form.description = props.task.description ?? ''
+            form.statusId = props.task.status?.id ?? null
+            form.effortId = props.task.effort?.id ?? null
+            form.priorityId = props.task.priority?.id ?? null
+            form.assigneeId = props.task.assignee?.id ?? null
+            form.groupId = props.task.group?.id ?? null
+            form.typeIds = props.task.types.map(t => t.id)
+        } else {
+            form.title = ''
+            form.description = ''
+            form.statusId = null
+            form.effortId = null
+            form.priorityId = null
+            form.assigneeId = null
+            form.groupId = null
+            form.typeIds = []
+        }
+        touched.title = false
+    }
+})
+
+const { create, update } = useTaskService()
+
+async function handleSubmit() {
+    touched.title = true
+    if (!form.title.trim()) return
+
+    isSubmitting.value = true
+    try {
+        const payload: TaskWrite = {
+            title: form.title.trim(),
+            description: form.description.trim() || null,
+            status: form.statusId ? `/api/task_statuses/${form.statusId}` : null,
+            effort: form.effortId ? `/api/task_efforts/${form.effortId}` : null,
+            priority: form.priorityId ? `/api/task_priorities/${form.priorityId}` : null,
+            assignee: form.assigneeId ? `/api/users/${form.assigneeId}` : null,
+            group: form.groupId ? `/api/task_groups/${form.groupId}` : null,
+            project: `/api/projects/${props.projectId}`,
+            types: form.typeIds.map(id => `/api/task_types/${id}`),
+        }
+
+        if (isEditing.value && props.task) {
+            await update(props.task.id, payload)
+        } else {
+            await create(payload)
+        }
+
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+</script>
diff --git a/frontend/components/TaskGroupDrawer.vue b/frontend/components/TaskGroupDrawer.vue
new file mode 100644
index 0000000..a8714f2
--- /dev/null
+++ b/frontend/components/TaskGroupDrawer.vue
@@ -0,0 +1,108 @@
+<template>
+    <AppDrawer v-model="isOpen" :title="isEditing ? 'Modifier un groupe' : 'Ajouter un groupe'">
+        <form @submit.prevent="handleSubmit" class="flex flex-col gap-2">
+            <MalioInputText
+                v-model="form.title"
+                label="Titre"
+                input-class="w-full"
+                :error="touched.title && !form.title.trim() ? 'Le titre est requis' : ''"
+                @blur="touched.title = true"
+            />
+            <MalioInputTextArea
+                v-model="form.description"
+                label="Description"
+                :size="3"
+            />
+            <div class="mt-4">
+                <ColorPicker v-model="form.color" />
+            </div>
+
+            <div class="mt-6 flex justify-end">
+                <button
+                    type="submit"
+                    class="rounded-md bg-primary-500 px-6 py-2 text-sm font-semibold text-white hover:bg-secondary-500 disabled:cursor-not-allowed disabled:opacity-50"
+                    :disabled="isSubmitting"
+                >
+                    Enregistrer
+                </button>
+            </div>
+        </form>
+    </AppDrawer>
+</template>
+
+<script setup lang="ts">
+import type { TaskGroup, TaskGroupWrite } from '~/services/dto/task-group'
+import { useTaskGroupService } from '~/services/task-groups'
+
+const props = defineProps<{
+    modelValue: boolean
+    group: TaskGroup | null
+    projectId: number
+}>()
+
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'saved'): void
+}>()
+
+const isOpen = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v),
+})
+
+const isEditing = computed(() => !!props.group)
+const isSubmitting = ref(false)
+
+const form = reactive({
+    title: '',
+    description: '',
+    color: '#222783',
+})
+
+const touched = reactive({
+    title: false,
+})
+
+watch(() => props.modelValue, (open) => {
+    if (open) {
+        if (props.group) {
+            form.title = props.group.title ?? ''
+            form.description = props.group.description ?? ''
+            form.color = props.group.color ?? '#222783'
+        } else {
+            form.title = ''
+            form.description = ''
+            form.color = '#222783'
+        }
+        touched.title = false
+    }
+})
+
+const { create, update } = useTaskGroupService()
+
+async function handleSubmit() {
+    touched.title = true
+    if (!form.title.trim()) return
+
+    isSubmitting.value = true
+    try {
+        const payload: TaskGroupWrite = {
+            title: form.title.trim(),
+            description: form.description.trim() || null,
+            color: form.color,
+            project: `/api/projects/${props.projectId}`,
+        }
+
+        if (isEditing.value && props.group) {
+            await update(props.group.id, payload)
+        } else {
+            await create(payload)
+        }
+
+        emit('saved')
+        isOpen.value = false
+    } finally {
+        isSubmitting.value = false
+    }
+}
+</script>
diff --git a/frontend/i18n/locales/fr.json b/frontend/i18n/locales/fr.json
index 36a49aa..e7c2342 100644
--- a/frontend/i18n/locales/fr.json
+++ b/frontend/i18n/locales/fr.json
@@ -28,5 +28,40 @@
         "created": "Projet créé avec succès.",
         "updated": "Projet mis à jour avec succès.",
         "deleted": "Projet supprimé avec succès."
+    },
+    "taskStatuses": {
+        "created": "Statut créé avec succès.",
+        "updated": "Statut mis à jour avec succès.",
+        "deleted": "Statut supprimé avec succès."
+    },
+    "taskEfforts": {
+        "created": "Effort créé avec succès.",
+        "updated": "Effort mis à jour avec succès.",
+        "deleted": "Effort supprimé avec succès."
+    },
+    "taskPriorities": {
+        "created": "Priorité créée avec succès.",
+        "updated": "Priorité mise à jour avec succès.",
+        "deleted": "Priorité supprimée avec succès."
+    },
+    "taskTypes": {
+        "created": "Type créé avec succès.",
+        "updated": "Type mis à jour avec succès.",
+        "deleted": "Type supprimé avec succès."
+    },
+    "taskGroups": {
+        "created": "Groupe créé avec succès.",
+        "updated": "Groupe mis à jour avec succès.",
+        "deleted": "Groupe supprimé avec succès."
+    },
+    "tasks": {
+        "created": "Ticket créé avec succès.",
+        "updated": "Ticket mis à jour avec succès.",
+        "deleted": "Ticket supprimé avec succès."
+    },
+    "users": {
+        "created": "Utilisateur créé avec succès.",
+        "updated": "Utilisateur mis à jour avec succès.",
+        "deleted": "Utilisateur supprimé avec succès."
     }
 }
diff --git a/frontend/pages/projects/[id].vue b/frontend/pages/projects/[id].vue
new file mode 100644
index 0000000..6f63992
--- /dev/null
+++ b/frontend/pages/projects/[id].vue
@@ -0,0 +1,308 @@
+<template>
+    <div>
+        <div class="flex items-center justify-between">
+            <h1 class="text-2xl font-bold text-neutral-900">{{ project?.name ?? '' }}</h1>
+            <div class="flex gap-3">
+                <button
+                    class="rounded-md bg-secondary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-600"
+                    @click="openGroupCreate"
+                >
+                    + Ajouter un groupe
+                </button>
+                <button
+                    class="rounded-md bg-primary-500 px-4 py-2 text-sm font-semibold text-white hover:bg-secondary-500"
+                    @click="openTaskCreate"
+                >
+                    + Ajouter un ticket
+                </button>
+            </div>
+        </div>
+
+        <div class="mt-4">
+            <MalioSelect
+                v-model="selectedGroupId"
+                :options="groupFilterOptions"
+                label="Groupe"
+                empty-option-label="Tous les groupes"
+                min-width="w-64"
+            />
+        </div>
+
+        <!-- Kanban -->
+        <div class="mt-6 flex gap-4 overflow-x-auto pb-4">
+            <div
+                v-for="status in statuses"
+                :key="status.id"
+                class="flex w-72 shrink-0 flex-col rounded-lg transition-colors"
+                :class="dragOverStatusId === status.id ? 'bg-neutral-200' : 'bg-neutral-50'"
+                @dragover.prevent
+                @dragenter.prevent="onDragEnter(status.id)"
+                @dragleave="onDragLeave"
+                @drop.prevent="onDropStatus($event, status)"
+            >
+                <div
+                    class="rounded-t-lg px-4 py-3 text-sm font-bold text-white"
+                    :style="{ backgroundColor: status.color }"
+                >
+                    {{ status.label }} ({{ tasksByStatus(status.id).length }})
+                </div>
+                <div class="flex flex-col gap-3 p-3">
+                    <TaskCard
+                        v-for="task in tasksByStatus(status.id)"
+                        :key="task.id"
+                        :task="task"
+                        @click="openTaskEdit(task)"
+                    />
+                    <p
+                        v-if="tasksByStatus(status.id).length === 0"
+                        class="py-4 text-center text-xs text-neutral-400"
+                    >
+                        Aucun ticket
+                    </p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Backlog -->
+        <div
+            class="mt-8 rounded-lg p-4 transition-colors"
+            :class="dragOverStatusId === 0 ? 'bg-tertiary-600' : 'bg-tertiary-500'"
+            @dragover.prevent
+            @dragenter.prevent="onDragEnter(0)"
+            @dragleave="onDragLeave"
+            @drop.prevent="onDropBacklog($event)"
+        >
+            <h2 class="text-lg font-bold text-neutral-900">Backlog</h2>
+            <div class="mt-4 grid grid-cols-1 gap-3 md:grid-cols-2">
+                <div
+                    v-for="task in backlogTasks"
+                    :key="task.id"
+                    class="flex cursor-pointer items-center justify-between rounded-lg border border-neutral-200 bg-white px-4 py-3 hover:shadow-sm"
+                    draggable="true"
+                    @dragstart="onBacklogDragStart($event, task)"
+                    @dragend="onBacklogDragEnd"
+                    @click="openTaskEdit(task)"
+                >
+                    <span class="text-sm font-semibold text-neutral-900">{{ task.title }}</span>
+                    <div class="flex items-center gap-2">
+                        <span
+                            v-for="type in task.types"
+                            :key="type.id"
+                            class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                            :style="{ backgroundColor: type.color }"
+                        >
+                            {{ type.label }}
+                        </span>
+                        <span
+                            v-if="task.priority"
+                            class="rounded-full px-2 py-0.5 text-xs font-semibold text-white"
+                            :style="{ backgroundColor: task.priority.color }"
+                        >
+                            {{ task.priority.label }}
+                        </span>
+                        <span
+                            v-if="task.effort"
+                            class="text-sm font-bold text-neutral-700"
+                        >
+                            {{ task.effort.label }}
+                        </span>
+                        <span
+                            v-if="task.assignee"
+                            class="flex h-5 w-5 items-center justify-center rounded-full bg-primary-500 text-[10px] font-bold text-white"
+                            :title="task.assignee.username"
+                        >
+                            {{ task.assignee.username.substring(0, 2).toUpperCase() }}
+                        </span>
+                        <span
+                            v-else
+                            class="flex h-5 w-5 items-center justify-center rounded-full bg-neutral-200 text-neutral-400"
+                        >
+                            <Icon name="mdi:account-outline" size="14" />
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <TaskDrawer
+            v-model="taskDrawerOpen"
+            :task="selectedTask"
+            :project-id="projectId"
+            :statuses="statuses"
+            :efforts="efforts"
+            :priorities="priorities"
+            :types="types"
+            :groups="groups"
+            :users="users"
+            @saved="onSaved"
+        />
+
+        <TaskGroupDrawer
+            v-model="groupDrawerOpen"
+            :group="selectedGroup"
+            :project-id="projectId"
+            @saved="onSaved"
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { Project } from '~/services/dto/project'
+import type { Task } from '~/services/dto/task'
+import type { TaskStatus } from '~/services/dto/task-status'
+import type { TaskEffort } from '~/services/dto/task-effort'
+import type { TaskPriority } from '~/services/dto/task-priority'
+import type { TaskType } from '~/services/dto/task-type'
+import type { TaskGroup } from '~/services/dto/task-group'
+import type { UserData } from '~/services/dto/user-data'
+import { useProjectService } from '~/services/projects'
+import { useTaskService } from '~/services/tasks'
+import { useTaskStatusService } from '~/services/task-statuses'
+import { useTaskEffortService } from '~/services/task-efforts'
+import { useTaskPriorityService } from '~/services/task-priorities'
+import { useTaskTypeService } from '~/services/task-types'
+import { useTaskGroupService } from '~/services/task-groups'
+import { useUserService } from '~/services/users'
+
+const route = useRoute()
+const projectId = computed(() => Number(route.params.id))
+
+useHead({ title: 'Projet' })
+
+const projectService = useProjectService()
+const taskService = useTaskService()
+const statusService = useTaskStatusService()
+const effortService = useTaskEffortService()
+const priorityService = useTaskPriorityService()
+const typeService = useTaskTypeService()
+const groupService = useTaskGroupService()
+const userService = useUserService()
+
+const project = ref<Project | null>(null)
+const tasks = ref<Task[]>([])
+const statuses = ref<TaskStatus[]>([])
+const efforts = ref<TaskEffort[]>([])
+const priorities = ref<TaskPriority[]>([])
+const types = ref<TaskType[]>([])
+const groups = ref<TaskGroup[]>([])
+const users = ref<UserData[]>([])
+const isLoading = ref(true)
+
+const selectedGroupId = ref<number | null>(null)
+const dragOverStatusId = ref<number | null>(null)
+const dragCounter = ref(0)
+const taskDrawerOpen = ref(false)
+const selectedTask = ref<Task | null>(null)
+const groupDrawerOpen = ref(false)
+const selectedGroup = ref<TaskGroup | null>(null)
+
+const groupFilterOptions = computed(() =>
+    groups.value.map(g => ({ label: g.title, value: g.id }))
+)
+
+const filteredTasks = computed(() => {
+    if (!selectedGroupId.value) return tasks.value
+    return tasks.value.filter(t => t.group?.id === selectedGroupId.value)
+})
+
+function tasksByStatus(statusId: number): Task[] {
+    return filteredTasks.value.filter(t => t.status?.id === statusId)
+}
+
+const backlogTasks = computed(() =>
+    filteredTasks.value.filter(t => !t.status)
+)
+
+async function loadData() {
+    isLoading.value = true
+    try {
+        const [p, t, s, e, pr, ty, g, u] = await Promise.all([
+            projectService.getById(projectId.value),
+            taskService.getByProject(projectId.value),
+            statusService.getAll(),
+            effortService.getAll(),
+            priorityService.getAll(),
+            typeService.getAll(),
+            groupService.getByProject(projectId.value),
+            userService.getAll(),
+        ])
+        project.value = p
+        tasks.value = t
+        statuses.value = s
+        efforts.value = e
+        priorities.value = pr
+        types.value = ty
+        groups.value = g
+        users.value = u
+    } finally {
+        isLoading.value = false
+    }
+}
+
+function openTaskCreate() {
+    selectedTask.value = null
+    taskDrawerOpen.value = true
+}
+
+function openTaskEdit(task: Task) {
+    selectedTask.value = task
+    taskDrawerOpen.value = true
+}
+
+function openGroupCreate() {
+    selectedGroup.value = null
+    groupDrawerOpen.value = true
+}
+
+function onDragEnter(id: number) {
+    dragCounter.value++
+    dragOverStatusId.value = id
+}
+
+function onDragLeave() {
+    dragCounter.value--
+    if (dragCounter.value === 0) {
+        dragOverStatusId.value = null
+    }
+}
+
+function onDrop(event: DragEvent) {
+    dragCounter.value = 0
+    dragOverStatusId.value = null
+    return Number(event.dataTransfer!.getData('text/plain'))
+}
+
+function onBacklogDragStart(event: DragEvent, task: Task) {
+    event.dataTransfer!.effectAllowed = 'move'
+    event.dataTransfer!.setData('text/plain', String(task.id))
+    ;(event.target as HTMLElement).classList.add('opacity-50')
+}
+
+function onBacklogDragEnd(event: DragEvent) {
+    ;(event.target as HTMLElement).classList.remove('opacity-50')
+}
+
+async function onDropStatus(event: DragEvent, status: TaskStatus) {
+    const taskId = onDrop(event)
+    const task = tasks.value.find(t => t.id === taskId)
+    if (!task || task.status?.id === status.id) return
+    task.status = status
+    await taskService.update(taskId, { status: `/api/task_statuses/${status.id}` })
+}
+
+async function onDropBacklog(event: DragEvent) {
+    const taskId = onDrop(event)
+    const task = tasks.value.find(t => t.id === taskId)
+    if (!task || !task.status) return
+    task.status = null
+    await taskService.update(taskId, { status: null })
+}
+
+async function onSaved() {
+    await loadData()
+}
+
+onMounted(() => {
+    loadData()
+})
+</script>
diff --git a/frontend/pages/projects.vue b/frontend/pages/projects/index.vue
similarity index 83%
rename from frontend/pages/projects.vue
rename to frontend/pages/projects/index.vue
index d18b067..8ffd5d0 100644
--- a/frontend/pages/projects.vue
+++ b/frontend/pages/projects/index.vue
@@ -15,9 +15,17 @@
                 v-for="project in projects"
                 :key="project.id"
                 class="cursor-pointer rounded-lg border border-neutral-200 bg-tertiary-500 shadow-sm transition hover:shadow-md"
-                @click="openEdit(project)"
+                @click="navigateTo(`/projects/${project.id}`)"
             >
-                <div class="h-2 rounded-t-lg" :style="{ backgroundColor: project.color }" />
+                <div class="flex items-center justify-between rounded-t-lg px-2" :style="{ backgroundColor: project.color }">
+                    <div class="h-2 flex-1" />
+                    <button
+                        class="p-1 text-white hover:text-neutral-200"
+                        @click.stop="openEdit(project)"
+                    >
+                        <Icon name="mdi:pencil-outline" size="16" />
+                    </button>
+                </div>
                 <div class="p-4">
                     <h3 class="text-md font-bold text-primary-500">{{ project.name }}</h3>
                     <p class="mt-2 text-sm text-neutral-600 line-clamp-4">
diff --git a/frontend/services/dto/task-effort.ts b/frontend/services/dto/task-effort.ts
new file mode 100644
index 0000000..9d3e3e2
--- /dev/null
+++ b/frontend/services/dto/task-effort.ts
@@ -0,0 +1,9 @@
+export type TaskEffort = {
+    id: number
+    '@id'?: string
+    label: string
+}
+
+export type TaskEffortWrite = {
+    label: string
+}
diff --git a/frontend/services/dto/task-group.ts b/frontend/services/dto/task-group.ts
new file mode 100644
index 0000000..52bd804
--- /dev/null
+++ b/frontend/services/dto/task-group.ts
@@ -0,0 +1,17 @@
+import type { Project } from './project'
+
+export type TaskGroup = {
+    id: number
+    '@id'?: string
+    title: string
+    description: string | null
+    color: string
+    project: Project | null
+}
+
+export type TaskGroupWrite = {
+    title: string
+    description: string | null
+    color: string
+    project: string
+}
diff --git a/frontend/services/dto/task-priority.ts b/frontend/services/dto/task-priority.ts
new file mode 100644
index 0000000..2b71e6c
--- /dev/null
+++ b/frontend/services/dto/task-priority.ts
@@ -0,0 +1,11 @@
+export type TaskPriority = {
+    id: number
+    '@id'?: string
+    label: string
+    color: string
+}
+
+export type TaskPriorityWrite = {
+    label: string
+    color: string
+}
diff --git a/frontend/services/dto/task-status.ts b/frontend/services/dto/task-status.ts
new file mode 100644
index 0000000..073c1ec
--- /dev/null
+++ b/frontend/services/dto/task-status.ts
@@ -0,0 +1,13 @@
+export type TaskStatus = {
+    id: number
+    '@id'?: string
+    label: string
+    color: string
+    position: number
+}
+
+export type TaskStatusWrite = {
+    label: string
+    color: string
+    position: number
+}
diff --git a/frontend/services/dto/task-type.ts b/frontend/services/dto/task-type.ts
new file mode 100644
index 0000000..3153ab1
--- /dev/null
+++ b/frontend/services/dto/task-type.ts
@@ -0,0 +1,11 @@
+export type TaskType = {
+    id: number
+    '@id'?: string
+    label: string
+    color: string
+}
+
+export type TaskTypeWrite = {
+    label: string
+    color: string
+}
diff --git a/frontend/services/dto/task.ts b/frontend/services/dto/task.ts
new file mode 100644
index 0000000..8b103b4
--- /dev/null
+++ b/frontend/services/dto/task.ts
@@ -0,0 +1,31 @@
+import type { TaskStatus } from './task-status'
+import type { TaskEffort } from './task-effort'
+import type { TaskPriority } from './task-priority'
+import type { TaskType } from './task-type'
+import type { TaskGroup } from './task-group'
+import type { UserData } from './user-data'
+
+export type Task = {
+    id: number
+    '@id'?: string
+    title: string
+    description: string | null
+    status: TaskStatus | null
+    effort: TaskEffort | null
+    priority: TaskPriority | null
+    assignee: UserData | null
+    group: TaskGroup | null
+    types: TaskType[]
+}
+
+export type TaskWrite = {
+    title: string
+    description: string | null
+    status: string | null
+    effort: string | null
+    priority: string | null
+    assignee: string | null
+    group: string | null
+    project: string
+    types: string[]
+}
diff --git a/frontend/services/projects.ts b/frontend/services/projects.ts
index 852824c..a61d98a 100644
--- a/frontend/services/projects.ts
+++ b/frontend/services/projects.ts
@@ -10,6 +10,10 @@ export function useProjectService() {
         return extractHydraMembers(data)
     }
 
+    async function getById(id: number): Promise<Project> {
+        return api.get<Project>(`/projects/${id}`)
+    }
+
     async function create(payload: ProjectWrite): Promise<Project> {
         return api.post<Project>('/projects', payload as Record<string, unknown>, {
             toastSuccessKey: 'projects.created',
@@ -28,5 +32,5 @@ export function useProjectService() {
         })
     }
 
-    return { getAll, create, update, remove }
+    return { getAll, getById, create, update, remove }
 }
diff --git a/frontend/services/task-efforts.ts b/frontend/services/task-efforts.ts
new file mode 100644
index 0000000..4f80833
--- /dev/null
+++ b/frontend/services/task-efforts.ts
@@ -0,0 +1,32 @@
+import type { TaskEffort, TaskEffortWrite } from './dto/task-effort'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+export function useTaskEffortService() {
+    const api = useApi()
+
+    async function getAll(): Promise<TaskEffort[]> {
+        const data = await api.get<HydraCollection<TaskEffort>>('/task_efforts')
+        return extractHydraMembers(data)
+    }
+
+    async function create(payload: TaskEffortWrite): Promise<TaskEffort> {
+        return api.post<TaskEffort>('/task_efforts', payload as Record<string, unknown>, {
+            toastSuccessKey: 'taskEfforts.created',
+        })
+    }
+
+    async function update(id: number, payload: Partial<TaskEffortWrite>): Promise<TaskEffort> {
+        return api.patch<TaskEffort>(`/task_efforts/${id}`, payload as Record<string, unknown>, {
+            toastSuccessKey: 'taskEfforts.updated',
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/task_efforts/${id}`, {}, {
+            toastSuccessKey: 'taskEfforts.deleted',
+        })
+    }
+
+    return { getAll, create, update, remove }
+}
diff --git a/frontend/services/task-groups.ts b/frontend/services/task-groups.ts
new file mode 100644
index 0000000..6866d77
--- /dev/null
+++ b/frontend/services/task-groups.ts
@@ -0,0 +1,39 @@
+import type { TaskGroup, TaskGroupWrite } from './dto/task-group'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+export function useTaskGroupService() {
+    const api = useApi()
+
+    async function getAll(): Promise<TaskGroup[]> {
+        const data = await api.get<HydraCollection<TaskGroup>>('/task_groups')
+        return extractHydraMembers(data)
+    }
+
+    async function getByProject(projectId: number): Promise<TaskGroup[]> {
+        const data = await api.get<HydraCollection<TaskGroup>>('/task_groups', {
+            project: `/api/projects/${projectId}`,
+        })
+        return extractHydraMembers(data)
+    }
+
+    async function create(payload: TaskGroupWrite): Promise<TaskGroup> {
+        return api.post<TaskGroup>('/task_groups', payload as Record<string, unknown>, {
+            toastSuccessKey: 'taskGroups.created',
+        })
+    }
+
+    async function update(id: number, payload: Partial<TaskGroupWrite>): Promise<TaskGroup> {
+        return api.patch<TaskGroup>(`/task_groups/${id}`, payload as Record<string, unknown>, {
+            toastSuccessKey: 'taskGroups.updated',
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/task_groups/${id}`, {}, {
+            toastSuccessKey: 'taskGroups.deleted',
+        })
+    }
+
+    return { getAll, getByProject, create, update, remove }
+}
diff --git a/frontend/services/task-priorities.ts b/frontend/services/task-priorities.ts
new file mode 100644
index 0000000..963afbc
--- /dev/null
+++ b/frontend/services/task-priorities.ts
@@ -0,0 +1,32 @@
+import type { TaskPriority, TaskPriorityWrite } from './dto/task-priority'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+export function useTaskPriorityService() {
+    const api = useApi()
+
+    async function getAll(): Promise<TaskPriority[]> {
+        const data = await api.get<HydraCollection<TaskPriority>>('/task_priorities')
+        return extractHydraMembers(data)
+    }
+
+    async function create(payload: TaskPriorityWrite): Promise<TaskPriority> {
+        return api.post<TaskPriority>('/task_priorities', payload as Record<string, unknown>, {
+            toastSuccessKey: 'taskPriorities.created',
+        })
+    }
+
+    async function update(id: number, payload: Partial<TaskPriorityWrite>): Promise<TaskPriority> {
+        return api.patch<TaskPriority>(`/task_priorities/${id}`, payload as Record<string, unknown>, {
+            toastSuccessKey: 'taskPriorities.updated',
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/task_priorities/${id}`, {}, {
+            toastSuccessKey: 'taskPriorities.deleted',
+        })
+    }
+
+    return { getAll, create, update, remove }
+}
diff --git a/frontend/services/task-statuses.ts b/frontend/services/task-statuses.ts
new file mode 100644
index 0000000..28c4e06
--- /dev/null
+++ b/frontend/services/task-statuses.ts
@@ -0,0 +1,32 @@
+import type { TaskStatus, TaskStatusWrite } from './dto/task-status'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+export function useTaskStatusService() {
+    const api = useApi()
+
+    async function getAll(): Promise<TaskStatus[]> {
+        const data = await api.get<HydraCollection<TaskStatus>>('/task_statuses')
+        return extractHydraMembers(data)
+    }
+
+    async function create(payload: TaskStatusWrite): Promise<TaskStatus> {
+        return api.post<TaskStatus>('/task_statuses', payload as Record<string, unknown>, {
+            toastSuccessKey: 'taskStatuses.created',
+        })
+    }
+
+    async function update(id: number, payload: Partial<TaskStatusWrite>): Promise<TaskStatus> {
+        return api.patch<TaskStatus>(`/task_statuses/${id}`, payload as Record<string, unknown>, {
+            toastSuccessKey: 'taskStatuses.updated',
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/task_statuses/${id}`, {}, {
+            toastSuccessKey: 'taskStatuses.deleted',
+        })
+    }
+
+    return { getAll, create, update, remove }
+}
diff --git a/frontend/services/task-types.ts b/frontend/services/task-types.ts
new file mode 100644
index 0000000..22341be
--- /dev/null
+++ b/frontend/services/task-types.ts
@@ -0,0 +1,32 @@
+import type { TaskType, TaskTypeWrite } from './dto/task-type'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+export function useTaskTypeService() {
+    const api = useApi()
+
+    async function getAll(): Promise<TaskType[]> {
+        const data = await api.get<HydraCollection<TaskType>>('/task_types')
+        return extractHydraMembers(data)
+    }
+
+    async function create(payload: TaskTypeWrite): Promise<TaskType> {
+        return api.post<TaskType>('/task_types', payload as Record<string, unknown>, {
+            toastSuccessKey: 'taskTypes.created',
+        })
+    }
+
+    async function update(id: number, payload: Partial<TaskTypeWrite>): Promise<TaskType> {
+        return api.patch<TaskType>(`/task_types/${id}`, payload as Record<string, unknown>, {
+            toastSuccessKey: 'taskTypes.updated',
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/task_types/${id}`, {}, {
+            toastSuccessKey: 'taskTypes.deleted',
+        })
+    }
+
+    return { getAll, create, update, remove }
+}
diff --git a/frontend/services/tasks.ts b/frontend/services/tasks.ts
new file mode 100644
index 0000000..6d9e1f6
--- /dev/null
+++ b/frontend/services/tasks.ts
@@ -0,0 +1,34 @@
+import type { Task, TaskWrite } from './dto/task'
+import type { HydraCollection } from '~/utils/api'
+import { extractHydraMembers } from '~/utils/api'
+
+export function useTaskService() {
+    const api = useApi()
+
+    async function getByProject(projectId: number): Promise<Task[]> {
+        const data = await api.get<HydraCollection<Task>>('/tasks', {
+            project: `/api/projects/${projectId}`,
+        })
+        return extractHydraMembers(data)
+    }
+
+    async function create(payload: TaskWrite): Promise<Task> {
+        return api.post<Task>('/tasks', payload as Record<string, unknown>, {
+            toastSuccessKey: 'tasks.created',
+        })
+    }
+
+    async function update(id: number, payload: Partial<TaskWrite>): Promise<Task> {
+        return api.patch<Task>(`/tasks/${id}`, payload as Record<string, unknown>, {
+            toastSuccessKey: 'tasks.updated',
+        })
+    }
+
+    async function remove(id: number): Promise<void> {
+        await api.delete(`/tasks/${id}`, {}, {
+            toastSuccessKey: 'tasks.deleted',
+        })
+    }
+
+    return { getByProject, create, update, remove }
+}