diff --git a/src/components/deadline/CriticalDeadlinesCard.tsx b/src/components/deadline/CriticalDeadlinesCard.tsx
index 1a29a32..96538ff 100644
--- a/src/components/deadline/CriticalDeadlinesCard.tsx
+++ b/src/components/deadline/CriticalDeadlinesCard.tsx
@@ -2,14 +2,18 @@
 
 import { DeadlineTask } from '@/services/analytics/deadline-analytics';
 import { Card } from '@/components/ui/Card';
+import { TaskCard } from '@/components/ui/TaskCard';
+import { useTasksContext } from '@/contexts/TasksContext';
 
 interface CriticalDeadlinesCardProps {
   overdue: DeadlineTask[];
   critical: DeadlineTask[];
   warning: DeadlineTask[];
+  disableHover?: boolean;
 }
 
-export function CriticalDeadlinesCard({ overdue, critical, warning }: CriticalDeadlinesCardProps) {
+export function CriticalDeadlinesCard({ overdue, critical, warning, disableHover = false }: CriticalDeadlinesCardProps) {
+  const { tags: availableTags } = useTasksContext();
   // Combiner toutes les tâches urgentes et trier par urgence
   const urgentTasks = [...overdue, ...critical, ...warning]
     .sort((a, b) => {
@@ -46,24 +50,6 @@ export function CriticalDeadlinesCard({ overdue, critical, warning }: CriticalDe
     }
   };
 
-  const getPriorityIcon = (priority: string) => {
-    switch (priority) {
-      case 'urgent': return '🔥';
-      case 'high': return '⬆️';
-      case 'medium': return '➡️';
-      case 'low': return '⬇️';
-      default: return '❓';
-    }
-  };
-
-  const getSourceIcon = (source: string) => {
-    switch (source.toLowerCase()) {
-      case 'jira': return '🔵';
-      case 'tfs': return '🟣';
-      case 'manual': return '✏️';
-      default: return '📋';
-    }
-  };
 
   if (urgentTasks.length === 0) {
     return (
@@ -93,62 +79,37 @@ export function CriticalDeadlinesCard({ overdue, critical, warning }: CriticalDe
         {urgentTasks.map((task) => {
           const urgencyStyle = getUrgencyStyle(task);
           
-          const getStyleClass = (urgencyLevel: string) => {
+          const getCardClassName = (urgencyLevel: string) => {
+            let baseClass = '';
             if (urgencyLevel === 'overdue') {
-              return 'outline-card-red';
+              baseClass = 'border-[var(--destructive)]/60 shadow-[var(--destructive)]/20';
             } else if (urgencyLevel === 'critical') {
-              return 'outline-card-orange';
+              baseClass = 'border-[var(--accent)]/60 shadow-[var(--accent)]/20';
             } else {
-              return 'outline-card-yellow';
+              baseClass = 'border-[var(--yellow)]/60 shadow-[var(--yellow)]/20';
             }
+            
+            if (disableHover) {
+              baseClass += ' hover:scale-100 hover:shadow-none hover:border-current hover:-translate-y-0';
+            }
+            
+            return baseClass;
           };
 
           return (
-            <div 
-              key={task.id} 
-              className={getStyleClass(task.urgencyLevel)}
-            >
-              <div className="flex items-start justify-between gap-2">
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2 mb-1">
-                    <span className="text-sm">{urgencyStyle.icon}</span>
-                    <span className="text-sm">{getSourceIcon(task.source)}</span>
-                    <span className="text-sm">{getPriorityIcon(task.priority)}</span>
-                    {task.jiraKey && (
-                      <span className="text-xs px-1.5 py-0.5 bg-[var(--border)] rounded font-mono">
-                        {task.jiraKey}
-                      </span>
-                    )}
-                  </div>
-                  
-                  <h4 className="font-medium text-sm leading-tight mb-0.5 truncate" title={task.title}>
-                    {task.title}
-                  </h4>
-                  
-                  <div className="text-xs opacity-75">
-                    {urgencyStyle.text}
-                  </div>
-                  
-                  {task.tags.length > 0 && (
-                    <div className="flex gap-1 mt-1.5 flex-wrap">
-                      {task.tags.slice(0, 2).map((tag, index) => (
-                        <span 
-                          key={index}
-                          className="text-xs px-1.5 py-0.5 bg-[var(--accent)]/60 text-[var(--accent-foreground)] rounded"
-                        >
-                          {tag}
-                        </span>
-                      ))}
-                      {task.tags.length > 2 && (
-                        <span className="text-xs text-[var(--muted-foreground)] opacity-70">
-                          +{task.tags.length - 2}
-                        </span>
-                      )}
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
+            <TaskCard
+              key={task.id}
+              variant="detailed"
+              source={task.source as 'manual' | 'jira' | 'tfs' | 'reminders'}
+              title={`${urgencyStyle.icon} ${task.title}`}
+              tags={task.tags}
+              priority={task.priority as 'low' | 'medium' | 'high' | 'urgent'}
+              dueDate={task.dueDate}
+              jiraKey={task.jiraKey}
+              fontSize="small"
+              availableTags={availableTags}
+              className={getCardClassName(task.urgencyLevel)}
+            />
           );
         })}
       </div>
diff --git a/src/components/deadline/DeadlineOverview.tsx b/src/components/deadline/DeadlineOverview.tsx
index 963f414..2410884 100644
--- a/src/components/deadline/DeadlineOverview.tsx
+++ b/src/components/deadline/DeadlineOverview.tsx
@@ -27,6 +27,7 @@ export function DeadlineOverview({ metrics }: DeadlineOverviewProps) {
           overdue={metrics.overdue} 
           critical={metrics.critical}
           warning={metrics.warning}
+          disableHover={true}
         />
       </div>
     </div>