diff --git a/frontend/pages/infrastructure/batiment.vue b/frontend/pages/infrastructure/batiment.vue
deleted file mode 100644
index 2b1a424..0000000
--- a/frontend/pages/infrastructure/batiment.vue
+++ /dev/null
@@ -1,274 +0,0 @@
-<template>
-    <div class="min-h-screen">
-        <div class="flex items-center justify-between">
-            <div class="flex items-center gap-10">
-                <Icon
-                    @click="router.push('/')"
-                    name="gg:arrow-left-o"
-                    size="44"
-                    class="cursor-pointer text-primary-500"
-                />
-                <h1 class="text-3xl font-bold uppercase text-primary-500">bâtiments</h1>
-            </div>
-        </div>
-
-        <div class="px-[86px]">
-            <div class="mt-6 border border-slate-200 mb-16">
-                <div
-                    v-for="entry in buildingLayouts"
-                    :key="entry.building.id"
-                    class="border-t border-slate-200 first:border-t-0"
-                >
-                    <div class="bg-slate-100 px-4 py-3 font-semibold tracking-wide">
-                        {{ entry.building.label || `Bâtiment ${entry.building.id}` }}
-                    </div>
-
-                    <div class="px-4 py-4">
-                        <div v-if="!entry.layout" class="text-sm text-slate-400">
-                            Aucun plan de bâtiment.
-                        </div>
-
-                        <div v-else>
-                            <div class="overflow-auto">
-                                <div class="grid" :style="entry.gridStyle">
-                                    <template v-for="cell in entry.cells" :key="cell.key">
-                                        <div
-                                            v-if="cell.isEmpty"
-                                            class="h-[50px] border-l-[2.5px] border-r-[2.5px] border-slate-300 [border-left-style:dotted] [border-right-style:dotted]"
-                                            :style="cell.spanStyle"
-                                        ></div>
-                                        <NuxtLink
-                                            v-else
-                                            class="flex items-center justify-center border border-slate-200 border-y-black hover:bg-primary-500/15 h-[50px]"
-                                            :class="[
-                                                !cell.caseId ? 'border-l-[2.5px] border-r-[2.5px] border-slate-300 [border-left-style:dotted] [border-right-style:dotted]' : '',
-                                                cell.hasGapLeft ? 'border-l-0' : '',
-                                                cell.hasGapRight ? 'border-r-0' : '',
-                                                cell.isOuterLeft ? '[border-left-style:dotted] border-l-[2.5px] border-l-slate-300' : '',
-                                                cell.isOuterRight ? '[border-right-style:dotted] border-r-[2.5px] border-r-slate-300' : ''
-                                            ]"
-                                            :style="[cell.spanStyle, cell.caseStyle]"
-                                            :to="cell.caseId ? `/infrastructure/case?id=${cell.caseId}` : '/infrastructure/case'"
-                                            :title="cell.caseStatusLabel ?? undefined"
-                                        >
-                                            {{ cell.display }}
-                                        </NuxtLink>
-                                    </template>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <div class="mb-16 border border-slate-200">
-                <div class="bg-slate-100 px-4 py-3 font-semibold tracking-wide uppercase">
-                    legendes
-                </div>
-                <div class="px-4 py-4">
-                    <div v-if="statutLegend.length === 0" class="text-sm text-slate-400">
-                        Aucun statut disponible.
-                    </div>
-                    <div v-else class="flex flex-wrap gap-3">
-                        <div
-                            v-for="statut in statutLegend"
-                            :key="statut.id"
-                            class="inline-flex items-center gap-2 rounded border border-slate-200 bg-white px-3 py-2"
-                        >
-                            <span
-                                class="h-4 w-4 rounded border border-slate-300"
-                                :style="statut.couleur ? { backgroundColor: statut.couleur } : {}"
-                            ></span>
-                            <span class="text-sm uppercase text-slate-700">
-                                {{ statut.label || "Sans libellé" }}
-                            </span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import type { BuildingData } from "~/services/dto/building-data"
-import type { BuildingLayoutData } from "~/services/dto/building-layout-data"
-import type { BuildingCasePositionData } from "~/services/dto/building-case-position-data"
-import type { BuildingCaseStatusData } from "~/services/dto/building-case-status-data"
-import { getBuildingList } from "~/services/building"
-import { getStatutList } from "~/services/statut"
-
-definePageMeta({ layout: "default" })
-
-const router = useRouter()
-const buildingList = ref<BuildingData[]>([])
-const statutLegend = ref<BuildingCaseStatusData[]>([])
-const buildingLayouts = computed(() => {
-    return buildingList.value.map((building) => {
-        const layout = building.layouts?.[0] ?? null
-        const view = layout ? buildLayoutView(layout) : null
-        return {
-            building,
-            layout,
-            cells: view?.cells ?? [],
-            columnsTemplate: view?.columnsTemplate,
-            gridStyle: view?.gridStyle ?? {}
-        }
-    })
-})
-
-type LayoutCell = {
-    key: string
-    x: number
-    y: number
-    w: number
-    h: number
-    isEmpty: boolean
-    caseNumber: number | null
-    caseId: number | null
-    display: string
-    rawId?: number | string
-    hasGapLeft: boolean
-    hasGapRight: boolean
-    isOuterLeft: boolean
-    isOuterRight: boolean
-    caseStatusLabel: string | null
-    caseStyle?: Record<string, string>
-    spanStyle: Record<string, string>
-}
-const normalizeCaseStatusColor = (value: string | null | undefined): string | null => {
-    const color = (value ?? "").trim()
-    return color.length > 0 ? color : null
-}
-const buildLayoutView = (
-    layout: BuildingLayoutData
-): { cells: LayoutCell[]; columnsTemplate: string; gridStyle: Record<string, string> } | null => {
-    const totalRows = layout.rows ?? 0
-    const totalCols = layout.columns ?? 0
-    if (totalRows <= 0 || totalCols <= 0) return null
-    const positions = (layout.casePositions ?? []).filter(Boolean) as BuildingCasePositionData[]
-
-    // éviter des doublons/chevauchements dans la grille pour les spans.
-    const covered = Array.from({ length: totalRows }, () => Array.from({ length: totalCols }, () => false))
-
-    // map positions by (x,y)
-    const map = new Map<string, BuildingCasePositionData>()
-    const occupiedColumns = new Set<number>()
-
-    for (const p of positions) {
-        const rawX = p.x ?? 1
-        const rawY = p.y ?? 1
-        const key = `${rawX}-${rawY}`
-        if (!map.has(key)) map.set(key, p)
-        occupiedColumns.add(rawX)
-    }
-    const cells: LayoutCell[] = []
-    const gapColumns: number[] = []
-    for (let x = 1; x <= totalCols; x++) {
-        if (!occupiedColumns.has(x)) gapColumns.push(x)
-    }
-    const gapColumnsSet = new Set(gapColumns)
-
-    for (let y = 1; y <= totalRows; y++) {
-        for (let x = 1; x <= totalCols; x++) {
-            if (covered[y - 1][x - 1]) continue
-            const p = map.get(`${x}-${y}`)
-            if (!p) continue
-            const w = p.w ?? 1
-            const h = p.h ?? 1
-            for (let dy = 0; dy < h; dy++) {
-                for (let dx = 0; dx < w; dx++) {
-                    const ty = y - 1 + dy
-                    const tx = x - 1 + dx
-                    if (ty < totalRows && tx < totalCols) covered[ty][tx] = true
-                }
-            }
-            const caseNumber = (p.buildingCase?.caseNumber ?? null) as number | null
-            const caseId = (p.buildingCase?.id ?? null) as number | null
-            const statusLabel = p.buildingCase?.statut?.label ?? null
-            const statusColor = normalizeCaseStatusColor(p.buildingCase?.statut?.couleur)
-            const caseStatusLabel = statusLabel
-            const caseStyle = statusColor
-                ? { backgroundColor: statusColor }
-                : undefined
-            const spanStyle = {
-                gridColumn: `${x} / span ${w}`,
-                gridRow: `${y} / span ${h}`
-            }
-            const hasGapLeft = gapColumnsSet.has(x - 1)
-            const hasGapRight = gapColumnsSet.has(x + w)
-            const isOuterLeft = x === 1
-            const isOuterRight = x + w - 1 === totalCols
-            cells.push({
-                key: `case-${layout.id}-${p.id}`,
-                x,
-                y,
-                w,
-                h,
-                isEmpty: false,
-                caseNumber,
-                caseId,
-                display: caseNumber !== null ? String(caseNumber) : "Case",
-                rawId: p.id,
-                hasGapLeft,
-                hasGapRight,
-                isOuterLeft,
-                isOuterRight,
-                caseStatusLabel,
-                caseStyle,
-                spanStyle
-            })
-        }
-
-        for (const gapX of gapColumns) {
-            const spanStyle = {
-                gridColumn: `${gapX} / span 1`,
-                gridRow: `${y} / span 1`
-            }
-            cells.push({
-                key: `gap-${layout.id}-${y}-${gapX}`,
-                x: gapX,
-                y,
-                w: 1,
-                h: 1,
-                isEmpty: true,
-                caseNumber: null,
-                caseId: null,
-                display: "",
-                rawId: undefined,
-                hasGapLeft: false,
-                hasGapRight: false,
-                isOuterLeft: gapX === 1,
-                isOuterRight: gapX === totalCols,
-                caseStatusLabel: null,
-                caseStyle: undefined,
-                spanStyle
-            })
-        }
-    }
-    const columnsTemplate = Array.from({ length: totalCols }, (_, idx) =>
-        gapColumnsSet.has(idx + 1) ? "24px" : "minmax(0, 1fr)"
-    ).join(" ")
-    const cols = Math.max(0, layout.columns ?? 0)
-    const gridStyle = {
-        gridTemplateColumns: columnsTemplate ?? `repeat(${cols}, minmax(0, 1fr))`,
-        gridAutoRows: "1fr",
-        rowGap: "18px",
-        columnGap: "0px",
-        width: "100%"
-    }
-
-    return { cells, columnsTemplate, gridStyle }
-}
-
-onMounted(async () => {
-    const buildingsPromise = getBuildingList()
-    const statutsPromise = getStatutList()
-    const buildings = await buildingsPromise
-    const statuts = await statutsPromise
-    buildingList.value = buildings
-    statutLegend.value = [...statuts].sort((a, b) =>
-        (a.label ?? "").localeCompare(b.label ?? "", "fr", { sensitivity: "base" })
-    )
-})
-</script>
diff --git a/frontend/pages/infrastructure/building.vue b/frontend/pages/infrastructure/building.vue
new file mode 100644
index 0000000..503b50d
--- /dev/null
+++ b/frontend/pages/infrastructure/building.vue
@@ -0,0 +1,194 @@
+<template>
+    <div class="min-h-screen">
+        <div class="flex items-center justify-between">
+            <div class="flex items-center gap-10">
+                <Icon
+                    @click="router.push('/')"
+                    name="gg:arrow-left-o"
+                    size="44"
+                    class="cursor-pointer text-primary-500"
+                />
+                <h1 class="text-3xl font-bold uppercase text-primary-500">bâtiments</h1>
+            </div>
+        </div>
+
+        <div class="px-[86px]">
+            <div class="border border-slate-200">
+                <div
+                    v-for="entry in buildingLayouts"
+                    :key="entry.building.id"
+                    class="border-t border-slate-200"
+                >
+                    <div class="bg-slate-100 px-4 py-3 font-semibold tracking-wide">
+                        {{ entry.building.label || `Bâtiment ${entry.building.id}` }}
+                    </div>
+
+                    <div class="px-4 py-4">
+                        <div v-if="!entry.layout" class="text-sm text-slate-400">
+                            Aucun plan de bâtiment.
+                        </div>
+
+                        <div v-else>
+                            <div class="overflow-auto">
+                                <div class="grid" :style="entry.gridStyle">
+                                    <template v-for="cell in entry.cells" :key="cell.key">
+                                        <div
+                                            v-if="cell.isEmpty"
+                                            class="h-[50px] border-x-[2.5px] border-slate-300 [border-left-style:dotted] [border-right-style:dotted]"
+                                            :style="cell.spanStyle"
+                                        ></div>
+                                        <NuxtLink
+                                            v-else
+                                            class="relative flex items-center justify-center border-2 border-x-white border-y-black h-[50px]"
+                                            :class="cell.baseClass + (activeLegendStatutId !== null && cell.caseStatusId !== activeLegendStatutId ? ' opacity-35 hover:opacity-70' : '')"
+                                            :style="[cell.spanStyle, cell.caseStyle]"
+                                            :to="cell.caseId ? `/infrastructure/case?id=${cell.caseId}` : '/infrastructure/case'"
+                                            :title="cell.caseStatusLabel ?? undefined"
+                                        >
+                                            {{ cell.display }}
+                                        </NuxtLink>
+                                    </template>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="mb-16 border border-slate-200">
+                <div class="bg-slate-100 px-4 py-3 font-semibold tracking-wide ">
+                    Légende
+                </div>
+                <div class="px-4 py-4">
+                    <div class="flex flex-wrap gap-3">
+                        <div
+                            v-for="statut in statutLegend"
+                            :key="statut.id"
+                            class="inline-flex cursor-pointer items-center gap-2 rounded border border-slate-200 px-2 py-1"
+                            @mouseenter="activeLegendStatutId = statut.id"
+                            @mouseleave="activeLegendStatutId = null"
+                        >
+                            <span
+                                class="h-4 w-4 rounded border border-slate-300"
+                                :style="statut.couleur ? { backgroundColor: statut.couleur } : {}"
+                            ></span>
+                            <span class="text-sm uppercase text-slate-700">
+                                {{ statut.label}}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { BuildingData } from "~/services/dto/building-data"
+import type { BuildingLayoutData, LayoutCell } from "~/services/dto/building-layout-data"
+import type { BuildingCasePositionData } from "~/services/dto/building-case-position-data"
+import type { BuildingCaseStatusData } from "~/services/dto/building-case-status-data"
+import { getBuildingList } from "~/services/building"
+import { getStatutList } from "~/services/statut"
+
+
+definePageMeta({ layout: "default" })
+
+const router = useRouter()
+const buildingList = ref<BuildingData[]>([])
+const statutLegend = ref<BuildingCaseStatusData[]>([])
+const activeLegendStatutId = ref<number | null>(null)
+const buildingLayouts = computed(() =>
+    buildingList.value.map((building) => {
+        const layout = building.layouts?.[0] ?? null
+        const view = layout ? buildLayoutView(layout) : null
+        return { building, layout, cells: view?.cells ?? [], gridStyle: view?.gridStyle ?? {} }
+    })
+)
+
+const normalizeCaseStatusColor = (value: string | null | undefined): string | null => {
+    const color = (value ?? "").trim()
+    return color.length > 0 ? color : null
+}
+const BASE_GRID_STYLE = { gridAutoRows: "1fr", rowGap: "18px", columnGap: "0px", width: "100%" } as const
+const createEmptyCell = (key: string, spanStyle: Record<string, string>): LayoutCell => ({
+    key,
+    isEmpty: true,
+    caseId: null,
+    display: "",
+    caseStatusId: null,
+    caseStatusLabel: null,
+    caseStyle: undefined,
+    spanStyle,
+    baseClass: ""
+})
+const buildLayoutView = (layout: BuildingLayoutData): { cells: LayoutCell[]; gridStyle: Record<string, string> } | null => {
+    const rows = layout.rows ?? 0, cols = layout.columns ?? 0
+    if (rows <= 0 || cols <= 0) return null
+    const positions = (layout.casePositions ?? []).filter(Boolean) as BuildingCasePositionData[]
+    const covered = Array.from({ length: rows }, () => Array.from({ length: cols }, () => false))
+    const map = new Map<string, BuildingCasePositionData>()
+    const occupied = new Set<number>()
+    for (const position of positions) {
+        const x = position.x ?? 1, y = position.y ?? 1
+        const key = `${x}-${y}`
+        if (!map.has(key)) map.set(key, position)
+        occupied.add(x)
+    }
+    const gapColumns = Array.from({ length: cols }, (_, i) => i + 1).filter((x) => !occupied.has(x))
+    const gapSet = new Set(gapColumns)
+    const cells: LayoutCell[] = []
+    for (let y = 1; y <= rows; y++) {
+        for (let x = 1; x <= cols; x++) {
+            if (covered[y - 1][x - 1]) continue
+            const position = map.get(`${x}-${y}`)
+            if (!position) continue
+            const columnSpan = position.w ?? 1, rowSpan = position.h ?? 1
+            for (let row = y - 1; row < y - 1 + rowSpan; row++) {
+                for (let col = x - 1; col < x - 1 + columnSpan; col++) {
+                    if (row < rows && col < cols) covered[row][col] = true
+                }
+            }
+            const caseId = (position.buildingCase?.id ?? null) as number | null
+            const caseNumber = (position.buildingCase?.caseNumber ?? null) as number | null
+            const caseStatusId = position.buildingCase?.statut?.id ?? null
+            const caseStatusLabel = position.buildingCase?.statut?.label ?? null
+            const statusColor = normalizeCaseStatusColor(position.buildingCase?.statut?.couleur)
+            const caseStyle = statusColor ? { backgroundColor: statusColor } : undefined
+            const baseClass = [
+                !caseId ? "border-x-[3px] [border-left-style:dotted] [border-right-style:dotted]" : "",
+                caseId ? "hover:opacity-85 focus-visible:outline-none" : "hover:opacity-85",
+                gapSet.has(x - 1) ? "border-l-0" : "",
+                gapSet.has(x + columnSpan) ? "border-r-0" : "",
+                x === 1 ? "[border-left-style:dotted] border-l-[3px]" : "",
+                x + columnSpan - 1 === cols ? "[border-right-style:dotted] border-r-[3px]" : ""
+            ].filter(Boolean).join(" ")
+            cells.push({
+                key: `case-${layout.id}-${position.id}`,
+                isEmpty: false,
+                caseId,
+                display: caseNumber !== null ? String(caseNumber) : "Case",
+                caseStatusId,
+                caseStatusLabel,
+                caseStyle,
+                spanStyle: { gridColumn: `${x} / span ${columnSpan}`, gridRow: `${y} / span ${rowSpan}` },
+                baseClass
+            })
+        }
+        for (const gapX of gapColumns) {
+            cells.push(createEmptyCell(`gap-${layout.id}-${y}-${gapX}`, { gridColumn: `${gapX} / span 1`, gridRow: `${y} / span 1` }))
+        }
+    }
+    const columnsTemplate = Array.from({ length: cols }, (_, i) => (gapSet.has(i + 1) ? "24px" : "minmax(0, 1fr)")).join(" ")
+    return { cells, gridStyle: { gridTemplateColumns: columnsTemplate, ...BASE_GRID_STYLE } }
+}
+
+onMounted(async () => {
+    const buildings = await getBuildingList()
+    const statuts = await getStatutList()
+    buildingList.value = buildings
+    statutLegend.value = [...statuts].sort((a, b) =>
+        (a.label ?? "").localeCompare(b.label ?? "", "fr", { sensitivity: "base" })
+    )
+})
+</script>
diff --git a/frontend/services/dto/building-layout-data.ts b/frontend/services/dto/building-layout-data.ts
index f9a2661..73e9de4 100644
--- a/frontend/services/dto/building-layout-data.ts
+++ b/frontend/services/dto/building-layout-data.ts
@@ -7,3 +7,14 @@ export interface BuildingLayoutData {
     rows: number | null
     casePositions?: BuildingCasePositionData[] | null
 }
+export type LayoutCell = {
+    key: string
+    isEmpty: boolean
+    caseId: number | null
+    display: string
+    caseStatusId: number | null
+    caseStatusLabel: string | null
+    caseStyle?: Record<string, string>
+    spanStyle: Record<string, string>
+    baseClass: string
+}