diff --git a/frontend/pages/mail.vue b/frontend/pages/mail.vue
new file mode 100644
index 0000000..b3bc125
--- /dev/null
+++ b/frontend/pages/mail.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import { useMailStore } from '~/stores/mail'
+import { useAuthStore } from '~/stores/auth'
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const auth = useAuthStore()
+
+useHead({ title: t('mail.title') })
+
+// ─── Contrôle d'accès ROLE_CLIENT ─────────────────────────────────────────
+// Le middleware global gère auth + ROLE_CLIENT → /portal. Ici : double check
+// en SPA car la session peut être hydratée après le rendu initial.
+
+const isClientOnly = computed(() =>
+    auth.user?.roles?.includes('ROLE_CLIENT') === true
+    && auth.user?.roles?.includes('ROLE_ADMIN') !== true,
+)
+
+if (isClientOnly.value) {
+    await navigateTo('/portal')
+}
+
+// ─── Store ────────────────────────────────────────────────────────────────
+
+const store = useMailStore()
+const {
+    folderTree,
+    selectedFolderPath,
+    messages,
+    messagesLoading,
+    hasMoreMessages,
+    selectedMessageId,
+    selectedMessageDetail,
+    detailLoading,
+} = storeToRefs(store)
+
+// ─── Init : charge les dossiers + deep-link ───────────────────────────────
+
+onMounted(async () => {
+    if (isClientOnly.value) {
+        router.replace('/portal')
+        return
+    }
+
+    if (folderTree.value.length === 0) {
+        await store.fetchFolders()
+    }
+
+    if (!selectedFolderPath.value && folderTree.value.length > 0) {
+        const inbox = folderTree.value.find((f) => f.path.toUpperCase() === 'INBOX')
+        const first = folderTree.value[0]
+        const target = inbox?.path ?? first?.path
+        if (target) {
+            await store.selectFolder(target)
+        }
+    }
+
+    const messageIdParam = route.query.messageId
+    if (messageIdParam) {
+        const id = parseInt(String(messageIdParam), 10)
+        if (!isNaN(id)) {
+            await store.selectMessage(id)
+        }
+    }
+})
+
+// ─── Handlers ─────────────────────────────────────────────────────────────
+
+async function handleFolderSelect(path: string): Promise<void> {
+    await store.selectFolder(path)
+    if (route.query.messageId) {
+        const nextQuery = { ...route.query }
+        delete nextQuery.messageId
+        router.replace({ query: nextQuery })
+    }
+}
+
+async function handleMessageSelect(id: number): Promise<void> {
+    await store.selectMessage(id)
+}
+
+function handleLoadMore(): void {
+    store.fetchMessages(true)
+}
+
+// Phase 6 : ces handlers seront branchés sur les modals MailCreateTaskModal / MailLinkTaskModal
+function handleCreateTask(mailId: number): void {
+    console.warn('[mail] handleCreateTask mailId=', mailId, '— modal à implémenter en Phase 6')
+}
+
+function handleLinkTask(mailId: number): void {
+    console.warn('[mail] handleLinkTask mailId=', mailId, '— modal à implémenter en Phase 6')
+}
+</script>
+
+<template>
+    <div class="flex h-full flex-col overflow-hidden">
+        <div class="flex flex-shrink-0 items-center justify-between border-b border-neutral-200 bg-white px-4 py-3">
+            <h1 class="text-lg font-semibold text-neutral-900">
+                {{ t('mail.title') }}
+            </h1>
+            <MailRefreshButton />
+        </div>
+
+        <div class="flex flex-1 overflow-hidden">
+            <aside class="w-[220px] flex-shrink-0 overflow-y-auto border-r border-neutral-200 bg-neutral-50 py-2">
+                <p class="mb-1 px-3 text-xs font-semibold uppercase tracking-wide text-neutral-400">
+                    {{ t('mail.folders') }}
+                </p>
+                <MailFolderTree
+                    :folders="folderTree"
+                    :selected-path="selectedFolderPath"
+                    @select="handleFolderSelect"
+                />
+            </aside>
+
+            <div class="flex w-[320px] flex-shrink-0 flex-col overflow-hidden border-r border-neutral-200 bg-white">
+                <div class="flex flex-shrink-0 items-center justify-between border-b border-neutral-100 px-3 py-2">
+                    <p class="text-xs font-semibold uppercase tracking-wide text-neutral-400">
+                        {{ t('mail.messages') }}
+                    </p>
+                </div>
+                <div class="flex-1 overflow-hidden">
+                    <MailMessageList
+                        :messages="messages"
+                        :selected-id="selectedMessageId"
+                        :loading="messagesLoading"
+                        :has-more="hasMoreMessages"
+                        @select="handleMessageSelect"
+                        @load-more="handleLoadMore"
+                    />
+                </div>
+            </div>
+
+            <div class="flex-1 overflow-hidden bg-white">
+                <MailMessageViewer
+                    :detail="selectedMessageDetail"
+                    :loading="detailLoading"
+                    @create-task="handleCreateTask"
+                    @link-task="handleLinkTask"
+                />
+            </div>
+        </div>
+    </div>
+</template>