diff --git a/doc/functional-rules.md b/doc/functional-rules.md
index bd6fb3c..f407e7b 100644
--- a/doc/functional-rules.md
+++ b/doc/functional-rules.md
@@ -131,6 +131,9 @@ Tous les filtres checkbox sont cochés par défaut à l'ouverture du drawer.
 - Modification employé:
   - uniquement prénom, nom, site
   - pas de modification de contrat depuis ce drawer
+- Détail employé:
+  - onglet `Suivi contrat` avec affichage de l'historique des périodes de contrat
+  - chaque ligne expose: nature (`CDI`/`CDD`/`INTERIM`), contrat/temps de travail, date de début, date de fin (ou "En cours")
 
 ## 10) Notifications
 
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index bc96701..aca253c 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -62,13 +62,6 @@
                 </nav>
 
                 <div class="flex flex-col gap-2 items-center p-4">
-                    <button
-                        type="button"
-                        class="w-full rounded-lg px-4 py-2 text-md font-semibold text-white bg-primary-500"
-                        @click="handleLogout"
-                    >
-                        Déconnexion
-                    </button>
                     <p class="font-bold">v{{ version }}</p>
                 </div>
             </aside>
diff --git a/frontend/pages/employees/[id].vue b/frontend/pages/employees/[id].vue
index d88e610..fd8530c 100644
--- a/frontend/pages/employees/[id].vue
+++ b/frontend/pages/employees/[id].vue
@@ -13,34 +13,96 @@
         <div v-else>
             <div class="flex items-center justify-between">
                 <h1 class="text-4xl font-bold text-primary-500">{{ employee.firstName }} {{ employee.lastName }}</h1>
-                <NuxtLink
-                    to="/employees"
-                    class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
-                >
-                    Retour
-                </NuxtLink>
+                <div class="text-right">
+                    <p class="font-bold text-[20px]">{{ contractNatureLabel(employee.currentContractNature) }} {{ employee.contract?.weeklyHours ?? '-' }} heures</p>
+                    <p class="text-[18px]">{{ employee.site?.name ?? '-' }}</p>
+                </div>
+            </div>
+            <div class="mt-12 border-b border-primary-500">
+                <div class="flex justify-center gap-16 text-2xl font-bold">
+                    <button
+                        class="pb-2 border-b-2 flex items-center gap-3"
+                        :class="activeTab === 'contract'
+                            ? 'border-primary-500 text-primary-500'
+                            : 'border-transparent text-primary-500/50 hover:text-primary-500'"
+                        @click="activeTab = 'contract'"
+                    >
+                        <Icon name="mdi:magnify" size="24" class="align-self"/>
+                        Suivi contrat
+                    </button>
+                    <button
+                        class="pb-2 border-b-2 flex items-center gap-3"
+                        :class="activeTab === 'leave'
+                            ? 'border-primary-500 text-primary-500'
+                            : 'border-transparent text-primary-500/50 hover:text-primary-500'"
+                        @click="activeTab = 'leave'"
+                    >
+                        <Icon name="mdi:magnify" size="24" class="align-self"/>
+                        Congé
+                    </button>
+                    <button
+                        class="pb-2 border-b-2 flex items-center gap-3"
+                        :class="activeTab === 'rtt'
+                            ? 'border-primary-500 text-primary-500'
+                            : 'border-transparent text-primary-500/50 hover:text-primary-500'"
+                        @click="activeTab = 'rtt'"
+                    >
+                        <Icon name="mdi:magnify" size="24" class="align-self"/>
+                        RTT
+                    </button>
+                </div>
             </div>
 
-            <div class="mt-6 rounded-lg border border-neutral-200 bg-white p-6">
-                <p class="text-xl font-semibold text-neutral-900">{{ employee.firstName }} {{ employee.lastName }}</p>
-                <p class="mt-2 text-md text-neutral-700">Site: {{ employee.site?.name ?? '-' }}</p>
-                <p class="text-md text-neutral-700">Type de contrat: {{
-                        contractNatureLabel(employee.currentContractNature)
-                    }}</p>
-                <p class="text-md text-neutral-700">Temps de travail: {{ employee.contract?.name ?? '-' }}</p>
-            </div>
+            <section v-if="activeTab === 'contract'" class="mt-8">
+                <div class="overflow-hidden rounded-lg border border-neutral-200 bg-white">
+                    <div class="grid grid-cols-4 border-b border-neutral-200 bg-neutral-50 px-6 py-3 text-md font-semibold text-neutral-700">
+                        <p>Contrat</p>
+                        <p>Heures</p>
+                        <p>Date de début</p>
+                        <p>Date de fin</p>
+                    </div>
+                    <div v-if="contractHistory.length === 0" class="px-6 py-4 text-md text-neutral-600">
+                        Aucun historique de contrat.
+                    </div>
+                    <div v-else>
+                        <div
+                            v-for="item in contractHistory"
+                            :key="`${item.startDate}-${item.endDate ?? 'open'}-${item.contractId ?? item.contractName}`"
+                            class="grid grid-cols-4 border-b border-neutral-100 px-6 py-3 text-md text-primary-500 last:border-b-0"
+                        >
+                            <p>{{ contractNatureLabel(item.contractNature) }}</p>
+                            <p>{{ contractHistoryLabel(item) }}</p>
+                            <p>{{ formatDate(item.startDate) }}</p>
+                            <p>{{ formatDate(item.endDate) }}</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex justify-center mt-8 gap-12">
+                    <button class="bg-blue-500 text-white rounded-md w-[200px]">Modifier</button>
+                    <button class="bg-primary-500 px-4 py-2 text-white text-md rounded-md flex justify-center items-center gap-2 w-[200px]">
+                        <Icon name="mdi:plus-thick" size="16" />
+                        Ajouter
+                    </button>
+                </div>
+            </section>
+            <section v-else-if="activeTab === 'leave'" class="mt-8">
+                <!-- Bloc Congé -->
+            </section>
+            <section v-else class="mt-8">
+                <!-- Bloc RTT -->
+            </section>
         </div>
-
     </div>
 </template>
 
 <script setup lang="ts">
-import type {Employee} from '~/services/dto/employee'
+import type {ContractHistoryItem, Employee} from '~/services/dto/employee'
 import {getEmployee} from '~/services/employees'
 
 const route = useRoute()
 const employee = ref<Employee | null>(null)
 const isLoading = ref(false)
+const activeTab = ref<'contract' | 'leave' | 'rtt'>('contract')
 
 useHead(() => ({
     title: employee.value
@@ -54,6 +116,22 @@ const contractNatureLabel = (value?: 'CDI' | 'CDD' | 'INTERIM') => {
     return 'CDI'
 }
 
+const contractHistory = computed(() => employee.value?.contractHistory ?? [])
+
+const formatDate = (value?: string | null) => {
+    if (!value) return 'En cours'
+    const [year, month, day] = value.split('-')
+    if (!year || !month || !day) return value
+    return `${day}/${month}/${year}`
+}
+
+const contractHistoryLabel = (item: ContractHistoryItem) => {
+    if (item.weeklyHours !== null && item.weeklyHours !== undefined) {
+        return `${item.weeklyHours} heures`
+    }
+    return item.contractName ?? '-'
+}
+
 onMounted(async () => {
     const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
     const employeeId = Number(idParam)
diff --git a/frontend/services/dto/employee.ts b/frontend/services/dto/employee.ts
index 8f8c5a8..d1b1056 100644
--- a/frontend/services/dto/employee.ts
+++ b/frontend/services/dto/employee.ts
@@ -1,6 +1,15 @@
 import type { Site } from './site'
 import type { Contract } from './contract'
 
+export type ContractHistoryItem = {
+  contractId?: number | null
+  contractName?: string | null
+  weeklyHours?: number | null
+  contractNature: 'CDI' | 'CDD' | 'INTERIM'
+  startDate: string
+  endDate?: string | null
+}
+
 export type Employee = {
   id: number
   firstName: string
@@ -10,5 +19,6 @@ export type Employee = {
   currentContractNature?: 'CDI' | 'CDD' | 'INTERIM'
   currentContractStartDate?: string | null
   currentContractEndDate?: string | null
+  contractHistory?: ContractHistoryItem[]
   displayOrder?: number
 }
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 3e176c4..691f3ae 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -15,6 +15,9 @@ export default <Partial<Config>>{
                 },
                 tertiary: {
                     500: '#F3F4F8'
+                },
+                blue: {
+                    500: '#056CF2'
                 }
             }
         }
diff --git a/src/Dto/Employees/ContractHistoryItem.php b/src/Dto/Employees/ContractHistoryItem.php
new file mode 100644
index 0000000..0a7d485
--- /dev/null
+++ b/src/Dto/Employees/ContractHistoryItem.php
@@ -0,0 +1,25 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Dto\Employees;
+
+use Symfony\Component\Serializer\Attribute\Groups;
+
+final class ContractHistoryItem
+{
+    public function __construct(
+        #[Groups(['employee:read'])]
+        public ?int $contractId,
+        #[Groups(['employee:read'])]
+        public ?string $contractName,
+        #[Groups(['employee:read'])]
+        public ?float $weeklyHours,
+        #[Groups(['employee:read'])]
+        public string $contractNature,
+        #[Groups(['employee:read'])]
+        public string $startDate,
+        #[Groups(['employee:read'])]
+        public ?string $endDate,
+    ) {}
+}
diff --git a/src/Entity/Employee.php b/src/Entity/Employee.php
index 92aaa15..b8ce235 100644
--- a/src/Entity/Employee.php
+++ b/src/Entity/Employee.php
@@ -6,6 +6,7 @@ namespace App\Entity;
 
 use ApiPlatform\Metadata\ApiProperty;
 use ApiPlatform\Metadata\ApiResource;
+use App\Dto\Employees\ContractHistoryItem;
 use App\Enum\ContractNature;
 use App\Repository\EmployeeRepository;
 use App\State\EmployeeWriteProcessor;
@@ -204,6 +205,35 @@ class Employee
         return $this->resolveCurrentContractPeriod()?->getEndDate()?->format('Y-m-d');
     }
 
+    /**
+     * @return list<ContractHistoryItem>
+     */
+    #[Groups(['employee:read'])]
+    public function getContractHistory(): array
+    {
+        $periods = $this->contractPeriods->toArray();
+        usort(
+            $periods,
+            static fn (EmployeeContractPeriod $a, EmployeeContractPeriod $b): int => $b->getStartDate() <=> $a->getStartDate()
+        );
+
+        return array_map(
+            static function (EmployeeContractPeriod $period): ContractHistoryItem {
+                $contract = $period->getContract();
+
+                return new ContractHistoryItem(
+                    contractId: $contract?->getId(),
+                    contractName: $contract?->getName(),
+                    weeklyHours: $contract?->getWeeklyHours(),
+                    contractNature: $period->getContractNatureEnum()->value,
+                    startDate: $period->getStartDate()->format('Y-m-d'),
+                    endDate: $period->getEndDate()?->format('Y-m-d'),
+                );
+            },
+            $periods
+        );
+    }
+
     private function resolveCurrentContractPeriod(): ?EmployeeContractPeriod
     {
         $today   = new DateTimeImmutable('today');