diff --git a/components/HomePageClient.tsx b/components/HomePageClient.tsx
new file mode 100644
index 0000000..126275d
--- /dev/null
+++ b/components/HomePageClient.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { KanbanBoardContainer } from '@/components/kanban/BoardContainer';
+import { Header } from '@/components/ui/Header';
+import { TasksProvider, useTasksContext } from '@/contexts/TasksContext';
+import { Task } from '@/lib/types';
+
+interface HomePageClientProps {
+  initialTasks: Task[];
+  initialStats: {
+    total: number;
+    completed: number;
+    inProgress: number;
+    todo: number;
+    completionRate: number;
+  };
+}
+
+function HomePageContent() {
+  const { stats, syncing } = useTasksContext();
+
+  return (
+    <div className="min-h-screen bg-slate-950">
+      <Header 
+        title="TowerControl" 
+        subtitle="Gestionnaire de tâches moderne"
+        stats={stats}
+        syncing={syncing}
+      />
+      
+      <main className="h-[calc(100vh-120px)]">
+        <KanbanBoardContainer />
+      </main>
+    </div>
+  );
+}
+
+export function HomePageClient({ initialTasks, initialStats }: HomePageClientProps) {
+  return (
+    <TasksProvider initialTasks={initialTasks} initialStats={initialStats}>
+      <HomePageContent />
+    </TasksProvider>
+  );
+}
diff --git a/components/kanban/BoardContainer.tsx b/components/kanban/BoardContainer.tsx
index 1aa9252..b8ef329 100644
--- a/components/kanban/BoardContainer.tsx
+++ b/components/kanban/BoardContainer.tsx
@@ -3,26 +3,12 @@
 import { useState } from 'react';
 import { KanbanBoard } from './Board';
 import { EditTaskForm } from '@/components/forms/EditTaskForm';
-import { useTasks } from '@/hooks/useTasks';
+import { useTasksContext } from '@/contexts/TasksContext';
 import { Task, TaskStatus } from '@/lib/types';
 import { UpdateTaskData } from '@/clients/tasks-client';
 
-interface BoardContainerProps {
-  initialTasks: Task[];
-  initialStats: {
-    total: number;
-    completed: number;
-    inProgress: number;
-    todo: number;
-    completionRate: number;
-  };
-}
-
-export function KanbanBoardContainer({ initialTasks, initialStats }: BoardContainerProps) {
-  const { tasks, loading, syncing, createTask, deleteTask, updateTask, updateTaskOptimistic } = useTasks(
-    { limit: 20 }, 
-    { tasks: initialTasks, stats: initialStats }
-  );
+export function KanbanBoardContainer() {
+  const { tasks, loading, createTask, deleteTask, updateTask, updateTaskOptimistic } = useTasksContext();
 
   const [editingTask, setEditingTask] = useState<Task | null>(null);
 
diff --git a/hooks/useTasks.ts b/hooks/useTasks.ts
index cefc23c..6e793d6 100644
--- a/hooks/useTasks.ts
+++ b/hooks/useTasks.ts
@@ -162,6 +162,9 @@ export function useTasks(
 
     // 3. Appel API en arrière-plan
     try {
+      // Délai artificiel pour voir l'indicateur de sync (à supprimer en prod)
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      
       const response = await tasksClient.updateTask(data);
       
       // Si l'API retourne des données différentes, on met à jour
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5b6a6b2..14ecebd 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,5 @@
 import { tasksService } from '@/services/tasks';
-import { KanbanBoardContainer } from '@/components/kanban/BoardContainer';
-import { HeaderContainer } from '@/components/ui/HeaderContainer';
+import { HomePageClient } from '@/components/HomePageClient';
 
 export default async function HomePage() {
   // SSR - Récupération des données côté serveur
@@ -10,19 +9,9 @@ export default async function HomePage() {
   ]);
 
   return (
-    <div className="min-h-screen bg-slate-950">
-      <HeaderContainer 
-        title="TowerControl" 
-        subtitle="Gestionnaire de tâches moderne"
-        initialStats={initialStats}
-      />
-      
-      <main className="h-[calc(100vh-120px)]">
-        <KanbanBoardContainer 
-          initialTasks={initialTasks}
-          initialStats={initialStats}
-        />
-      </main>
-    </div>
+    <HomePageClient 
+      initialTasks={initialTasks}
+      initialStats={initialStats}
+    />
   );
 }
diff --git a/src/contexts/TasksContext.tsx b/src/contexts/TasksContext.tsx
new file mode 100644
index 0000000..711e180
--- /dev/null
+++ b/src/contexts/TasksContext.tsx
@@ -0,0 +1,55 @@
+'use client';
+
+import { createContext, useContext, ReactNode } from 'react';
+import { useTasks } from '@/hooks/useTasks';
+import { Task } from '@/lib/types';
+import { CreateTaskData, UpdateTaskData, TaskFilters } from '@/clients/tasks-client';
+
+interface TasksContextType {
+  tasks: Task[];
+  stats: {
+    total: number;
+    completed: number;
+    inProgress: number;
+    todo: number;
+    completionRate: number;
+  };
+  loading: boolean;
+  syncing: boolean;
+  error: string | null;
+  createTask: (data: CreateTaskData) => Promise<Task | null>;
+  updateTask: (data: UpdateTaskData) => Promise<Task | null>;
+  updateTaskOptimistic: (data: UpdateTaskData) => Promise<Task | null>;
+  deleteTask: (taskId: string) => Promise<void>;
+  refreshTasks: () => Promise<void>;
+  setFilters: (filters: TaskFilters) => void;
+}
+
+const TasksContext = createContext<TasksContextType | null>(null);
+
+interface TasksProviderProps {
+  children: ReactNode;
+  initialTasks: Task[];
+  initialStats: TasksContextType['stats'];
+}
+
+export function TasksProvider({ children, initialTasks, initialStats }: TasksProviderProps) {
+  const tasksState = useTasks(
+    { limit: 20 },
+    { tasks: initialTasks, stats: initialStats }
+  );
+
+  return (
+    <TasksContext.Provider value={tasksState}>
+      {children}
+    </TasksContext.Provider>
+  );
+}
+
+export function useTasksContext() {
+  const context = useContext(TasksContext);
+  if (!context) {
+    throw new Error('useTasksContext must be used within a TasksProvider');
+  }
+  return context;
+}