diff --git a/apps/main/src/components/gantt/GanttChart.tsx b/apps/main/src/components/gantt/GanttChart.tsx
new file mode 100644
index 0000000..f778e4a
--- /dev/null
+++ b/apps/main/src/components/gantt/GanttChart.tsx
@@ -0,0 +1,420 @@
+import { LoadingSpinner } from "@ui/components/LoadingSpinner";
+import type { KanbanTask } from "@xtablo/shared-types";
+import { Button } from "@xtablo/ui/components/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@xtablo/ui/components/dropdown-menu";
+import {
+  CalendarIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  Compass,
+  Flame,
+  FolderIcon,
+  Gem,
+  Heart,
+  Leaf,
+  MapIcon,
+  Sparkles,
+  Star,
+  Sun,
+  Waves,
+  Zap,
+} from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+type GanttTask = KanbanTask & {
+  tablos?: { id: string; name: string; color: string | null } | null;
+};
+
+interface GanttChartProps {
+  tasks: GanttTask[];
+  isLoading: boolean;
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+const STATUS_STYLES: Record<string, { bg: string; border: string; dot: string; label: string }> = {
+  todo: {
+    bg: "bg-[#EFF8FF]",
+    border: "border-l-[#3B82F6]",
+    dot: "bg-[#1570EF]",
+    label: "À faire",
+  },
+  in_progress: {
+    bg: "bg-[#FFF4E2]",
+    border: "border-l-[#F1A62D]",
+    dot: "bg-[#DB9729]",
+    label: "En cours",
+  },
+  in_review: {
+    bg: "bg-[#F4F3FF]",
+    border: "border-l-[#804EEC]",
+    dot: "bg-[#804EEC]",
+    label: "Vérification",
+  },
+  done: {
+    bg: "bg-[#EDFCF2]",
+    border: "border-l-[#16B364]",
+    dot: "bg-[#16B364]",
+    label: "Terminé",
+  },
+};
+
+const STATUS_TEXT_COLORS: Record<string, string> = {
+  todo: "text-[#1570EF]",
+  in_progress: "text-[#DB9729]",
+  in_review: "text-[#804EEC]",
+  done: "text-[#16B364]",
+};
+
+function getTabloIcon(color: string | null | undefined) {
+  switch (color) {
+    case "bg-blue-500":
+      return Zap;
+    case "bg-green-500":
+      return Leaf;
+    case "bg-purple-500":
+      return Gem;
+    case "bg-red-500":
+      return Flame;
+    case "bg-yellow-500":
+      return Star;
+    case "bg-indigo-500":
+      return Compass;
+    case "bg-pink-500":
+      return Heart;
+    case "bg-teal-500":
+      return Waves;
+    case "bg-orange-500":
+      return Sun;
+    case "bg-cyan-500":
+      return Sparkles;
+    default:
+      return FolderIcon;
+  }
+}
+
+function getMonday(date: Date): Date {
+  const d = new Date(date);
+  const day = d.getDay();
+  const diff = d.getDate() - day + (day === 0 ? -6 : 1);
+  d.setDate(diff);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+
+function addDays(date: Date, n: number): Date {
+  const d = new Date(date);
+  d.setDate(d.getDate() + n);
+  return d;
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  );
+}
+
+function formatShortDay(date: Date): string {
+  return date.toLocaleDateString("fr-FR", { weekday: "short" }).replace(".", "");
+}
+
+function formatDateRange(start: Date, end: Date): string {
+  const opts: Intl.DateTimeFormatOptions = { month: "long", day: "numeric" };
+  const startStr = start.toLocaleDateString("fr-FR", opts);
+  const endStr = end.toLocaleDateString("fr-FR", opts);
+  return `${startStr} - ${endStr}`;
+}
+
+const CARD_HEIGHT = 130;
+const CARD_GAP = 10;
+const CARD_TOP_OFFSET = 20;
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export function GanttChart({ tasks, isLoading }: GanttChartProps) {
+  const [weekOffset, setWeekOffset] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(992);
+
+  // Measure container width
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setContainerWidth(Math.max(entry.contentRect.width, 992));
+      }
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const colWidth = containerWidth / 7;
+
+  // Compute week days
+  const today = useMemo(() => {
+    const d = new Date();
+    d.setHours(0, 0, 0, 0);
+    return d;
+  }, []);
+
+  const weekStart = useMemo(() => addDays(getMonday(today), weekOffset * 7), [today, weekOffset]);
+  const weekEnd = useMemo(() => addDays(weekStart, 6), [weekStart]);
+
+  const days = useMemo(
+    () => Array.from({ length: 7 }, (_, i) => addDays(weekStart, i)),
+    [weekStart]
+  );
+
+  // Filter tasks with due_date in this week
+  const visibleTasks = useMemo(() => {
+    const start = weekStart.getTime();
+    const end = addDays(weekStart, 7).getTime();
+    return tasks.filter((t) => {
+      if (!t.due_date) return false;
+      const d = new Date(t.due_date).getTime();
+      return d >= start && d < end;
+    });
+  }, [tasks, weekStart]);
+
+  // Position tasks: group by day column, stack vertically
+  const positionedTasks = useMemo(() => {
+    const columnSlots: number[][] = Array.from({ length: 7 }, () => []);
+
+    return visibleTasks
+      .map((task) => {
+        const dueDate = new Date(task.due_date!);
+        const dayIndex = days.findIndex((d) => isSameDay(d, dueDate));
+        if (dayIndex === -1) return null;
+
+        // Find first available row in this column
+        const slots = columnSlots[dayIndex];
+        let row = 0;
+        while (slots.includes(row)) row++;
+        slots.push(row);
+
+        return {
+          task,
+          dayIndex,
+          row,
+          left: dayIndex * colWidth + 8,
+          top: CARD_TOP_OFFSET + row * (CARD_HEIGHT + CARD_GAP),
+          width: colWidth - 16,
+        };
+      })
+      .filter(Boolean) as Array<{
+      task: GanttTask;
+      dayIndex: number;
+      row: number;
+      left: number;
+      top: number;
+      width: number;
+    }>;
+  }, [visibleTasks, days, colWidth]);
+
+  // Compute chart height
+  const maxRow = positionedTasks.reduce((max, pt) => Math.max(max, pt.row), 0);
+  const chartHeight = Math.max(400, (maxRow + 1) * (CARD_HEIGHT + CARD_GAP) + CARD_TOP_OFFSET + 20);
+
+  // Today indicator position
+  const todayIndex = days.findIndex((d) => isSameDay(d, today));
+  const todayInRange = todayIndex >= 0;
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full">
+      {/* Navigation bar */}
+      <div className="flex items-center justify-between mb-6">
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            className="rounded-lg"
+            onClick={() => setWeekOffset((w) => w - 1)}
+          >
+            <ChevronLeftIcon className="h-4 w-4" />
+          </Button>
+          <div className="px-4 py-2 bg-card border border-border rounded-lg min-w-[200px] text-center">
+            <span className="text-sm font-medium text-foreground">
+              {formatDateRange(weekStart, weekEnd)}
+            </span>
+          </div>
+          <Button
+            variant="outline"
+            size="icon"
+            className="rounded-lg"
+            onClick={() => setWeekOffset((w) => w + 1)}
+          >
+            <ChevronRightIcon className="h-4 w-4" />
+          </Button>
+        </div>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="gap-2 rounded-lg">
+              <CalendarIcon className="h-4 w-4" />
+              <span>Semaine</span>
+              <ChevronRightIcon className="h-4 w-4 rotate-90" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={() => setWeekOffset(0)}>
+              Aller à aujourd'hui
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* Gantt chart */}
+      <div
+        className="bg-card rounded-xl border border-border overflow-hidden shadow-sm"
+        ref={containerRef}
+      >
+        <div className="overflow-x-auto">
+          <div style={{ minWidth: 992 }}>
+            {/* Day headers */}
+            <div className="flex border-b border-border">
+              {days.map((day, i) => {
+                const isToday = isSameDay(day, today);
+                return (
+                  <div
+                    key={i}
+                    className="flex flex-col items-center py-3 relative"
+                    style={{ width: colWidth }}
+                  >
+                    <span
+                      className={twMerge(
+                        "text-sm font-medium",
+                        isToday ? "text-primary" : "text-muted-foreground"
+                      )}
+                    >
+                      {formatShortDay(day)} {day.getDate()}
+                    </span>
+                  </div>
+                );
+              })}
+            </div>
+
+            {/* Grid body */}
+            <div className="relative" style={{ height: chartHeight }}>
+              {/* Vertical grid lines */}
+              <div className="absolute inset-0 flex">
+                {days.map((_, i) => (
+                  <div
+                    key={i}
+                    className={twMerge("border-border", i < 6 ? "border-r" : "")}
+                    style={{ width: colWidth }}
+                  />
+                ))}
+              </div>
+
+              {/* Today indicator */}
+              {todayInRange && (
+                <div
+                  className="absolute z-10 pointer-events-none"
+                  style={{ left: (todayIndex + 0.5) * colWidth, top: 0, height: chartHeight }}
+                >
+                  <div className="absolute -top-1 left-1/2 -translate-x-1/2">
+                    <div className="w-0 h-0 border-l-[8px] border-r-[8px] border-t-[10px] border-l-transparent border-r-transparent border-t-primary" />
+                  </div>
+                  <div className="w-0.5 h-full bg-primary mx-auto opacity-60" />
+                </div>
+              )}
+
+              {/* Task cards */}
+              {positionedTasks.map((pt) => {
+                const status = STATUS_STYLES[pt.task.status ?? "todo"] ?? STATUS_STYLES.todo;
+                const textColor =
+                  STATUS_TEXT_COLORS[pt.task.status ?? "todo"] ?? STATUS_TEXT_COLORS.todo;
+                const TabloIcon = pt.task.tablos ? getTabloIcon(pt.task.tablos.color) : null;
+
+                return (
+                  <div
+                    key={pt.task.id}
+                    className={twMerge(
+                      "absolute rounded-lg p-3 border-l-4 shadow-sm transition-all hover:shadow-md cursor-pointer",
+                      status.bg,
+                      status.border
+                    )}
+                    style={{
+                      left: pt.left,
+                      width: pt.width,
+                      top: pt.top,
+                      minWidth: 160,
+                    }}
+                  >
+                    {/* Status badge */}
+                    <div className="flex items-center gap-1.5 bg-white w-fit px-2.5 py-1 rounded-full shadow-sm">
+                      <span className={twMerge("w-2 h-2 rounded-full", status.dot)} />
+                      <span className={twMerge("text-xs font-medium", textColor)}>
+                        {status.label}
+                      </span>
+                    </div>
+
+                    {/* Title */}
+                    <h3 className="font-semibold text-foreground mt-2 text-sm leading-tight line-clamp-1">
+                      {pt.task.title}
+                    </h3>
+
+                    {/* Due date */}
+                    <p className="text-xs text-muted-foreground mt-1">
+                      {new Date(pt.task.due_date!).toLocaleDateString("fr-FR", {
+                        weekday: "short",
+                        day: "numeric",
+                        month: "short",
+                      })}
+                    </p>
+
+                    {/* Tablo badge */}
+                    {pt.task.tablos && TabloIcon && (
+                      <div className="flex items-center gap-2 mt-2">
+                        <div
+                          className={twMerge(
+                            "w-5 h-5 rounded-md flex items-center justify-center",
+                            pt.task.tablos.color || "bg-gray-400"
+                          )}
+                        >
+                          <TabloIcon className="w-3 h-3 text-white" />
+                        </div>
+                        <span className="text-xs text-muted-foreground truncate">
+                          {pt.task.tablos.name}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+
+              {/* Empty state within chart */}
+              {positionedTasks.length === 0 && (
+                <div className="absolute inset-0 flex flex-col items-center justify-center">
+                  <MapIcon className="w-10 h-10 text-muted-foreground/30 mb-2" />
+                  <p className="text-sm text-muted-foreground">
+                    Aucune tâche avec échéance cette semaine
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/main/src/pages/tablo-details.tsx b/apps/main/src/pages/tablo-details.tsx
index 1694bf0..4f3997f 100644
--- a/apps/main/src/pages/tablo-details.tsx
+++ b/apps/main/src/pages/tablo-details.tsx
@@ -40,6 +40,7 @@ import {
 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { GanttChart } from "../components/gantt/GanttChart";
 import { TaskModal } from "../components/kanban/TaskModal";
 import { TabloDiscussionSection } from "../components/TabloDiscussionSection";
 import { TabloEventsSection } from "../components/TabloEventsSection";
@@ -921,268 +922,6 @@ function EtapesSection({
 
 // ─── Roadmap Section ─────────────────────────────────────────────────────────
 
-function RoadmapSection({ etapes, tabloTasks }: { etapes: Etape[]; tabloTasks: KanbanTask[] }) {
-  const statusConfig: Record<string, { label: string; color: string }> = {
-    todo: {
-      label: "À faire",
-      color: "bg-blue-100 text-blue-700 dark:bg-blue-950/30 dark:text-blue-400",
-    },
-    in_progress: {
-      label: "En cours",
-      color: "bg-yellow-100 text-yellow-700 dark:bg-yellow-950/30 dark:text-yellow-400",
-    },
-    in_review: {
-      label: "Vérification",
-      color: "bg-purple-100 text-purple-700 dark:bg-purple-950/30 dark:text-purple-400",
-    },
-    done: {
-      label: "Terminé",
-      color: "bg-green-100 text-green-700 dark:bg-green-950/30 dark:text-green-400",
-    },
-  };
-
-  // Sort etapes by due_date (earliest first), then by position
-  const sortedEtapes = [...etapes].sort((a, b) => {
-    if (a.due_date && b.due_date) return a.due_date.localeCompare(b.due_date);
-    if (a.due_date) return -1;
-    if (b.due_date) return 1;
-    return a.position - b.position;
-  });
-
-  // Tasks without an etape
-  const orphanTasks = tabloTasks.filter((t) => !t.parent_task_id);
-
-  // Sort tasks by due_date
-  const sortTasks = (tasks: KanbanTask[]) =>
-    [...tasks].sort((a, b) => {
-      if (a.due_date && b.due_date) return a.due_date.localeCompare(b.due_date);
-      if (a.due_date) return -1;
-      if (b.due_date) return 1;
-      return 0;
-    });
-
-  const isOverdue = (dateStr: string) => {
-    const today = new Date();
-    today.setHours(0, 0, 0, 0);
-    return new Date(dateStr) < today;
-  };
-
-  const formatDate = (dateStr: string) =>
-    new Intl.DateTimeFormat("fr-FR", { day: "2-digit", month: "short", year: "numeric" }).format(
-      new Date(dateStr)
-    );
-
-  if (etapes.length === 0 && orphanTasks.length === 0) {
-    return (
-      <div className="flex flex-col items-center justify-center py-24 text-center">
-        <MapIcon className="w-12 h-12 text-gray-300 dark:text-gray-600 mb-4" />
-        <p className="text-gray-500 dark:text-gray-400 text-lg font-medium">Aucune roadmap</p>
-        <p className="text-gray-400 dark:text-gray-500 text-sm mt-1">
-          Ajoutez des étapes et des échéances pour visualiser la roadmap du projet
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      {sortedEtapes.map((etape, index) => {
-        const childTasks = sortTasks(tabloTasks.filter((t) => t.parent_task_id === etape.id));
-        const doneCount = childTasks.filter((t) => t.status === "done").length;
-        const totalCount = childTasks.length;
-        const progressPct = totalCount > 0 ? Math.round((doneCount / totalCount) * 100) : 0;
-
-        const derivedStatus =
-          totalCount === 0
-            ? "todo"
-            : doneCount === totalCount
-              ? "done"
-              : doneCount > 0
-                ? "in_progress"
-                : "todo";
-        const status = statusConfig[derivedStatus] ?? statusConfig.todo;
-
-        return (
-          <div
-            key={etape.id}
-            className="bg-white dark:bg-card rounded-xl border border-gray-100 dark:border-gray-700 shadow-sm overflow-hidden"
-          >
-            {/* Etape header */}
-            <div className="flex items-center gap-4 px-5 py-4">
-              <div className="w-8 h-8 rounded-lg bg-[#F4F3FF] dark:bg-purple-900/20 flex items-center justify-center shrink-0">
-                <span className="text-sm font-bold text-[#7F56D9] dark:text-purple-400">
-                  {index + 1}
-                </span>
-              </div>
-
-              <div className="flex-1 min-w-0">
-                <h3 className="font-semibold text-gray-900 dark:text-gray-100 truncate">
-                  {etape.title}
-                </h3>
-                {etape.description && (
-                  <p className="text-sm text-muted-foreground truncate mt-0.5">
-                    {etape.description}
-                  </p>
-                )}
-              </div>
-
-              {etape.due_date && (
-                <div
-                  className={cn(
-                    "flex items-center gap-1 text-xs shrink-0",
-                    derivedStatus !== "done" && isOverdue(etape.due_date)
-                      ? "text-red-500"
-                      : "text-muted-foreground"
-                  )}
-                >
-                  <CalendarIcon className="w-3.5 h-3.5" />
-                  <span>{formatDate(etape.due_date)}</span>
-                </div>
-              )}
-
-              <span
-                className={cn(
-                  "px-2.5 py-1 rounded-full text-xs font-medium shrink-0",
-                  status.color
-                )}
-              >
-                {status.label}
-              </span>
-
-              {totalCount > 0 && (
-                <div className="flex items-center gap-2 shrink-0">
-                  <div className="w-16 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
-                    <div
-                      className="h-full bg-green-500 rounded-full transition-all"
-                      style={{ width: `${progressPct}%` }}
-                    />
-                  </div>
-                  <span className="text-xs text-muted-foreground whitespace-nowrap">
-                    {doneCount}/{totalCount}
-                  </span>
-                </div>
-              )}
-            </div>
-
-            {/* Child tasks */}
-            {childTasks.length > 0 && (
-              <div className="border-t border-gray-100 dark:border-gray-700 divide-y divide-gray-100 dark:divide-gray-700">
-                {childTasks.map((task) => {
-                  const taskStatus = statusConfig[task.status ?? "todo"] ?? statusConfig.todo;
-                  const taskOverdue =
-                    task.due_date && task.status !== "done" && isOverdue(task.due_date);
-
-                  return (
-                    <div
-                      key={task.id}
-                      className="flex items-center gap-3 px-5 py-3 pl-16 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-                    >
-                      {task.status === "done" ? (
-                        <CircleCheckIcon className="w-4 h-4 text-green-500 shrink-0" />
-                      ) : (
-                        <div className="w-4 h-4 rounded-full border-2 border-gray-300 dark:border-gray-600 shrink-0" />
-                      )}
-                      <span
-                        className={cn(
-                          "text-sm flex-1 truncate",
-                          task.status === "done"
-                            ? "line-through text-gray-400"
-                            : "text-gray-900 dark:text-gray-100"
-                        )}
-                      >
-                        {task.title}
-                      </span>
-                      {task.due_date && (
-                        <div
-                          className={cn(
-                            "flex items-center gap-1 text-xs shrink-0",
-                            taskOverdue ? "text-red-500" : "text-muted-foreground"
-                          )}
-                        >
-                          <CalendarIcon className="w-3 h-3" />
-                          <span>{formatDate(task.due_date)}</span>
-                        </div>
-                      )}
-                      <span
-                        className={cn(
-                          "px-2 py-0.5 rounded-full text-[10px] font-medium shrink-0",
-                          taskStatus.color
-                        )}
-                      >
-                        {taskStatus.label}
-                      </span>
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-        );
-      })}
-
-      {/* Orphan tasks (without Etape) */}
-      {orphanTasks.length > 0 && (
-        <div className="bg-white dark:bg-card rounded-xl border border-gray-100 dark:border-gray-700 shadow-sm overflow-hidden">
-          <div className="flex items-center gap-4 px-5 py-4">
-            <div className="w-8 h-8 rounded-lg bg-gray-100 dark:bg-gray-800 flex items-center justify-center shrink-0">
-              <ListChecksIcon className="w-4 h-4 text-gray-400" />
-            </div>
-            <h3 className="font-semibold text-gray-900 dark:text-gray-100 flex-1">Sans Étape</h3>
-            <span className="text-xs text-muted-foreground">
-              {orphanTasks.length} tâche{orphanTasks.length > 1 ? "s" : ""}
-            </span>
-          </div>
-          <div className="border-t border-gray-100 dark:border-gray-700 divide-y divide-gray-100 dark:divide-gray-700">
-            {sortTasks(orphanTasks).map((task) => {
-              const taskStatus = statusConfig[task.status ?? "todo"] ?? statusConfig.todo;
-              const taskOverdue =
-                task.due_date && task.status !== "done" && isOverdue(task.due_date);
-
-              return (
-                <div
-                  key={task.id}
-                  className="flex items-center gap-3 px-5 py-3 pl-16 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-                >
-                  {task.status === "done" ? (
-                    <CircleCheckIcon className="w-4 h-4 text-green-500 shrink-0" />
-                  ) : (
-                    <div className="w-4 h-4 rounded-full border-2 border-gray-300 dark:border-gray-600 shrink-0" />
-                  )}
-                  <span
-                    className={cn(
-                      "text-sm flex-1 truncate",
-                      task.status === "done"
-                        ? "line-through text-gray-400"
-                        : "text-gray-900 dark:text-gray-100"
-                    )}
-                  >
-                    {task.title}
-                  </span>
-                  {task.due_date && (
-                    <div
-                      className={cn(
-                        "flex items-center gap-1 text-xs shrink-0",
-                        taskOverdue ? "text-red-500" : "text-muted-foreground"
-                      )}
-                    >
-                      <CalendarIcon className="w-3 h-3" />
-                      <span>{formatDate(task.due_date)}</span>
-                    </div>
-                  )}
-                  <span
-                    className={cn(
-                      "px-2 py-0.5 rounded-full text-[10px] font-medium shrink-0",
-                      taskStatus.color
-                    )}
-                  >
-                    {taskStatus.label}
-                  </span>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </div>
-  );
+function RoadmapSection({ tabloTasks }: { etapes: Etape[]; tabloTasks: KanbanTask[] }) {
+  return <GanttChart tasks={tabloTasks} isLoading={false} />;
 }
diff --git a/apps/main/src/pages/tasks.tsx b/apps/main/src/pages/tasks.tsx
index 1434b0f..26bbb28 100644
--- a/apps/main/src/pages/tasks.tsx
+++ b/apps/main/src/pages/tasks.tsx
@@ -12,8 +12,6 @@ import {
 } from "@xtablo/ui/components/dropdown-menu";
 import {
   CalendarIcon,
-  ChevronDownIcon,
-  ChevronRightIcon,
   CircleCheckIcon,
   CircleIcon,
   Compass,
@@ -24,7 +22,6 @@ import {
   Heart,
   KanbanIcon,
   Leaf,
-  ListChecksIcon,
   ListIcon,
   ListTodo,
   MapIcon,
@@ -43,6 +40,7 @@ import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
+import { GanttChart } from "../components/gantt/GanttChart";
 import { TaskModal } from "../components/kanban/TaskModal";
 import { useTablosList } from "../hooks/tablos";
 import { useAllTasks, useUpdateTask } from "../hooks/tasks";
@@ -888,280 +886,10 @@ export function TasksPage() {
 
 // ─── Roadmap View ────────────────────────────────────────────────────────────
 
-function formatRoadmapDate(dateStr: string): string {
-  return new Intl.DateTimeFormat("fr-FR", {
-    day: "2-digit",
-    month: "short",
-    year: "numeric",
-  }).format(new Date(dateStr));
-}
-
-function isDateOverdue(dateStr: string): boolean {
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  return new Date(dateStr) < today;
-}
-
 type RoadmapTaskWithTablo = KanbanTask & {
   tablos: { id: string; name: string; color: string | null } | null;
 };
 
 function RoadmapView({ tasks, isLoading }: { tasks: RoadmapTaskWithTablo[]; isLoading: boolean }) {
-  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
-  const { t } = useTranslation(["pages"]);
-
-  // Group tasks: tasks with parent_task_id grouped under their Etape, others under "Sans Étape"
-  const groups = useMemo(() => {
-    const groupMap = new Map<
-      string,
-      { id: string; title: string; due_date: string | null; tasks: RoadmapTaskWithTablo[] }
-    >();
-
-    // Group tasks by parent_task_id
-    for (const task of tasks) {
-      const groupId = task.parent_task_id || "__no_etape__";
-      if (!groupMap.has(groupId)) {
-        groupMap.set(groupId, {
-          id: groupId,
-          title: groupId === "__no_etape__" ? "Sans Étape" : `Étape`,
-          due_date: null,
-          tasks: [],
-        });
-      }
-      groupMap.get(groupId)!.tasks.push(task);
-    }
-
-    // Sort groups: those with due dates first (earliest), then those without
-    const sorted = Array.from(groupMap.values()).sort((a, b) => {
-      // Earliest task due date in each group as a proxy for the group due date
-      const aDue = a.tasks.reduce<string | null>((min, t) => {
-        if (!t.due_date) return min;
-        if (!min) return t.due_date;
-        return t.due_date < min ? t.due_date : min;
-      }, null);
-      const bDue = b.tasks.reduce<string | null>((min, t) => {
-        if (!t.due_date) return min;
-        if (!min) return t.due_date;
-        return t.due_date < min ? t.due_date : min;
-      }, null);
-
-      if (aDue && bDue) return aDue.localeCompare(bDue);
-      if (aDue) return -1;
-      if (bDue) return 1;
-      return 0;
-    });
-
-    return sorted;
-  }, [tasks]);
-
-  // Initialize expanded groups
-  useMemo(() => {
-    if (expandedGroups.size === 0 && groups.length > 0) {
-      setExpandedGroups(new Set(groups.map((g) => g.id)));
-    }
-  }, [groups, expandedGroups.size]);
-
-  const toggleGroup = (id: string) => {
-    setExpandedGroups((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center h-64">
-        <LoadingSpinner />
-      </div>
-    );
-  }
-
-  if (tasks.length === 0) {
-    return (
-      <div className="p-12 text-center">
-        <MapIcon className="mx-auto h-12 w-12 text-muted-foreground" />
-        <h3 className="mt-2 text-sm font-medium text-foreground">
-          {t("pages:tasks.emptyState.title")}
-        </h3>
-        <p className="mt-1 text-sm text-muted-foreground">
-          Ajoutez des échéances à vos tâches pour visualiser la roadmap
-        </p>
-      </div>
-    );
-  }
-
-  const statusConfig: Record<string, { label: string; color: string }> = {
-    todo: {
-      label: "À faire",
-      color: "bg-blue-100 text-blue-700 dark:bg-blue-950/30 dark:text-blue-400",
-    },
-    in_progress: {
-      label: "En cours",
-      color: "bg-yellow-100 text-yellow-700 dark:bg-yellow-950/30 dark:text-yellow-400",
-    },
-    in_review: {
-      label: "Vérification",
-      color: "bg-purple-100 text-purple-700 dark:bg-purple-950/30 dark:text-purple-400",
-    },
-    done: {
-      label: "Terminé",
-      color: "bg-green-100 text-green-700 dark:bg-green-950/30 dark:text-green-400",
-    },
-  };
-
-  return (
-    <div className="space-y-4">
-      {groups.map((group) => {
-        const isExpanded = expandedGroups.has(group.id);
-        const doneCount = group.tasks.filter((t) => t.status === "done").length;
-        const totalCount = group.tasks.length;
-        const progressPct = totalCount > 0 ? Math.round((doneCount / totalCount) * 100) : 0;
-
-        // Sort tasks within group by due_date (earliest first), then tasks without dates
-        const sortedTasks = [...group.tasks].sort((a, b) => {
-          if (a.due_date && b.due_date) return a.due_date.localeCompare(b.due_date);
-          if (a.due_date) return -1;
-          if (b.due_date) return 1;
-          return 0;
-        });
-
-        // Earliest due date in this group
-        const earliestDue = sortedTasks.find((t) => t.due_date)?.due_date;
-
-        return (
-          <div
-            key={group.id}
-            className="bg-white dark:bg-card rounded-xl border border-gray-100 dark:border-gray-700 shadow-sm overflow-hidden"
-          >
-            {/* Group header */}
-            <button
-              type="button"
-              onClick={() => toggleGroup(group.id)}
-              className="w-full flex items-center gap-4 px-5 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors text-left"
-            >
-              {isExpanded ? (
-                <ChevronDownIcon className="w-5 h-5 text-gray-400 shrink-0" />
-              ) : (
-                <ChevronRightIcon className="w-5 h-5 text-gray-400 shrink-0" />
-              )}
-
-              <div className="w-8 h-8 rounded-lg bg-[#F4F3FF] dark:bg-purple-900/20 flex items-center justify-center shrink-0">
-                <ListChecksIcon className="w-4 h-4 text-[#7F56D9] dark:text-purple-400" />
-              </div>
-
-              <div className="flex-1 min-w-0">
-                <h3 className="font-semibold text-gray-900 dark:text-gray-100 truncate">
-                  {group.title}
-                </h3>
-              </div>
-
-              {earliestDue && (
-                <div
-                  className={twMerge(
-                    "flex items-center gap-1 text-xs shrink-0",
-                    isDateOverdue(earliestDue) ? "text-red-500" : "text-muted-foreground"
-                  )}
-                >
-                  <CalendarIcon className="w-3.5 h-3.5" />
-                  <span>{formatRoadmapDate(earliestDue)}</span>
-                </div>
-              )}
-
-              {totalCount > 0 && (
-                <div className="flex items-center gap-2 shrink-0">
-                  <div className="w-16 h-1.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
-                    <div
-                      className="h-full bg-green-500 rounded-full transition-all"
-                      style={{ width: `${progressPct}%` }}
-                    />
-                  </div>
-                  <span className="text-xs text-muted-foreground whitespace-nowrap">
-                    {doneCount}/{totalCount}
-                  </span>
-                </div>
-              )}
-            </button>
-
-            {/* Tasks */}
-            {isExpanded && (
-              <div className="border-t border-gray-100 dark:border-gray-700 divide-y divide-gray-100 dark:divide-gray-700">
-                {sortedTasks.map((task) => {
-                  const status = statusConfig[task.status ?? "todo"] ?? statusConfig.todo;
-                  const overdue =
-                    task.due_date && task.status !== "done" && isDateOverdue(task.due_date);
-                  const TabloIcon = task.tablos ? getTabloIcon(task.tablos.color) : null;
-                  const iconColor = task.tablos ? getTabloIconColor(task.tablos.color) : "";
-
-                  return (
-                    <div
-                      key={task.id}
-                      className="flex items-center gap-3 px-5 py-3 pl-16 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
-                    >
-                      {task.status === "done" ? (
-                        <CircleCheckIcon className="w-4 h-4 text-green-500 shrink-0" />
-                      ) : (
-                        <div className="w-4 h-4 rounded-full border-2 border-gray-300 dark:border-gray-600 shrink-0" />
-                      )}
-                      <span
-                        className={twMerge(
-                          "text-sm flex-1 truncate",
-                          task.status === "done"
-                            ? "line-through text-gray-400"
-                            : "text-gray-900 dark:text-gray-100"
-                        )}
-                      >
-                        {task.title}
-                      </span>
-
-                      {/* Tablo badge */}
-                      {task.tablos && TabloIcon && (
-                        <div className="flex items-center gap-1.5 shrink-0">
-                          <div
-                            className={twMerge(
-                              "w-4 h-4 rounded-[3px] flex items-center justify-center",
-                              task.tablos.color || "bg-gray-400"
-                            )}
-                          >
-                            <TabloIcon className={twMerge("w-2.5 h-2.5", iconColor)} />
-                          </div>
-                          <span className="text-xs text-gray-500 dark:text-gray-400 max-w-[100px] truncate">
-                            {task.tablos.name}
-                          </span>
-                        </div>
-                      )}
-
-                      {/* Due date */}
-                      {task.due_date && (
-                        <div
-                          className={twMerge(
-                            "flex items-center gap-1 text-xs shrink-0",
-                            overdue ? "text-red-500" : "text-muted-foreground"
-                          )}
-                        >
-                          <CalendarIcon className="w-3.5 h-3.5" />
-                          <span>{formatRoadmapDate(task.due_date)}</span>
-                        </div>
-                      )}
-
-                      {/* Status */}
-                      <span
-                        className={twMerge(
-                          "px-2 py-0.5 rounded-full text-[10px] font-medium shrink-0",
-                          status.color
-                        )}
-                      >
-                        {status.label}
-                      </span>
-                    </div>
-                  );
-                })}
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
+  return <GanttChart tasks={tasks} isLoading={isLoading} />;
 }