diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 1f718bf..9cc1d1d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,4 @@
 import { BrowserRouter, Routes, Route, Link, useLocation } from 'react-router-dom';
-import { useMetrics } from './hooks/useMetrics';
 import { DetectionsList } from './components/DetectionsList';
 import { DetailsView } from './components/DetailsView';
 import { InvestigationView } from './components/InvestigationView';
@@ -11,221 +10,20 @@ import { ThreatIntelView } from './components/ThreatIntelView';
 import { CorrelationGraph } from './components/CorrelationGraph';
 import { InteractiveTimeline } from './components/InteractiveTimeline';
 
-// Composant Dashboard
-function Dashboard() {
-  const { data, loading, error } = useMetrics();
-
-  if (loading) {
-    return (
-      <div className="flex items-center justify-center h-64">
-        <div className="text-text-secondary">Chargement...</div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="bg-threat-critical_bg border border-threat-critical rounded-lg p-4">
-        <p className="text-threat-critical">Erreur: {error.message}</p>
-      </div>
-    );
-  }
-
-  if (!data) return null;
-
-  const { summary } = data;
-
-  return (
-    <div className="space-y-6 animate-fade-in">
-      {/* Métriques */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        <MetricCard
-          title="Total Détections"
-          value={summary.total_detections.toLocaleString()}
-          subtitle="24 heures"
-          color="bg-background-card"
-        />
-        <MetricCard
-          title="Menaces"
-          value={summary.critical_count + summary.high_count}
-          subtitle={`${summary.critical_count} critiques, ${summary.high_count} hautes`}
-          color="bg-threat-critical_bg"
-        />
-        <MetricCard
-          title="Bots Connus"
-          value={summary.known_bots_count.toLocaleString()}
-          subtitle={`${((summary.known_bots_count / summary.total_detections) * 100).toFixed(1)}% du trafic`}
-          color="bg-accent-primary/20"
-        />
-        <MetricCard
-          title="IPs Uniques"
-          value={summary.unique_ips.toLocaleString()}
-          subtitle="Entités distinctes"
-          color="bg-background-card"
-        />
-      </div>
-
-      {/* Répartition par menace */}
-      <div className="bg-background-secondary rounded-lg p-6">
-        <h2 className="text-xl font-semibold text-text-primary mb-4">Répartition par Menace</h2>
-        <div className="space-y-3">
-          <ThreatBar
-            level="CRITICAL"
-            count={summary.critical_count}
-            total={summary.total_detections}
-            color="bg-threat-critical"
-          />
-          <ThreatBar
-            level="HIGH"
-            count={summary.high_count}
-            total={summary.total_detections}
-            color="bg-threat-high"
-          />
-          <ThreatBar
-            level="MEDIUM"
-            count={summary.medium_count}
-            total={summary.total_detections}
-            color="bg-threat-medium"
-          />
-          <ThreatBar
-            level="LOW"
-            count={summary.low_count}
-            total={summary.total_detections}
-            color="bg-threat-low"
-          />
-        </div>
-      </div>
-
-      {/* Série temporelle */}
-      <div className="bg-background-secondary rounded-lg p-6">
-        <h2 className="text-xl font-semibold text-text-primary mb-4">Évolution (24h)</h2>
-        <TimeSeriesChart data={data.timeseries} />
-      </div>
-
-      {/* Accès rapide */}
-      <div className="bg-background-secondary rounded-lg p-6">
-        <h2 className="text-xl font-semibold text-text-primary mb-4">Accès Rapide</h2>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <Link
-            to="/detections"
-            className="bg-background-card hover:bg-background-card/80 rounded-lg p-4 transition-colors"
-          >
-            <h3 className="text-text-primary font-medium">Voir les détections</h3>
-            <p className="text-text-secondary text-sm mt-1">Explorer toutes les détections</p>
-          </Link>
-          <Link
-            to="/detections?threat_level=CRITICAL"
-            className="bg-threat-critical_bg hover:bg-threat-critical_bg/80 rounded-lg p-4 transition-colors"
-          >
-            <h3 className="text-text-primary font-medium">Menaces Critiques</h3>
-            <p className="text-text-secondary text-sm mt-1">{summary.critical_count} détections</p>
-          </Link>
-          <Link
-            to="/detections?model_name=Complet"
-            className="bg-accent-primary/20 hover:bg-accent-primary/30 rounded-lg p-4 transition-colors"
-          >
-            <h3 className="text-text-primary font-medium">Modèle Complet</h3>
-            <p className="text-text-secondary text-sm mt-1">Avec données TCP/TLS</p>
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// Composant MetricCard
-function MetricCard({ title, value, subtitle, color }: {
-  title: string;
-  value: string | number;
-  subtitle: string;
-  color: string;
-}) {
-  return (
-    <div className={`${color} rounded-lg p-6`}>
-      <h3 className="text-text-secondary text-sm font-medium">{title}</h3>
-      <p className="text-3xl font-bold text-text-primary mt-2">{value}</p>
-      <p className="text-text-disabled text-xs mt-2">{subtitle}</p>
-    </div>
-  );
-}
-
-// Composant ThreatBar
-function ThreatBar({ level, count, total, color }: {
-  level: string;
-  count: number;
-  total: number;
-  color: string;
-}) {
-  const percentage = total > 0 ? ((count / total) * 100).toFixed(1) : '0';
-
-  const colors: Record<string, string> = {
-    CRITICAL: 'bg-threat-critical',
-    HIGH: 'bg-threat-high',
-    MEDIUM: 'bg-threat-medium',
-    LOW: 'bg-threat-low',
-  };
-
-  return (
-    <div>
-      <div className="flex justify-between text-sm mb-1">
-        <span className="text-text-primary font-medium">{level}</span>
-        <span className="text-text-secondary">{count} ({percentage}%)</span>
-      </div>
-      <div className="w-full bg-background-card rounded-full h-2">
-        <div
-          className={`${colors[level] || color} h-2 rounded-full transition-all`}
-          style={{ width: `${percentage}%` }}
-        />
-      </div>
-    </div>
-  );
-}
-
-// Composant TimeSeriesChart (simplifié)
-function TimeSeriesChart({ data }: { data: { hour: string; total: number }[] }) {
-  if (!data || data.length === 0) return null;
-
-  const maxVal = Math.max(...data.map(d => d.total), 1);
-  
-  return (
-    <div className="h-48 flex items-end justify-between gap-1">
-      {data.map((point, i) => {
-        const height = (point.total / maxVal) * 100;
-        const hour = new Date(point.hour).getHours();
-        
-        return (
-          <div key={i} className="flex-1 flex flex-col items-center gap-1">
-            <div
-              className="w-full bg-accent-primary/60 rounded-t transition-all hover:bg-accent-primary"
-              style={{ height: `${height}%` }}
-              title={`${point.total} détections`}
-            />
-            {i % 4 === 0 && (
-              <span className="text-xs text-text-disabled">{hour}h</span>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
 // Navigation
 function Navigation() {
   const location = useLocation();
 
   const links = [
-    { path: '/incidents', label: '🚨 Incidents' },
-    { path: '/', label: '📊 Dashboard' },
-    { path: '/detections', label: '📋 Détections' },
-    { path: '/threat-intel', label: '📚 Threat Intel' },
+    { path: '/', label: 'Incidents' },
+    { path: '/threat-intel', label: 'Threat Intel' },
   ];
 
   return (
     <nav className="bg-background-secondary border-b border-background-card">
       <div className="max-w-7xl mx-auto px-4">
         <div className="flex items-center h-16 gap-4">
-          <h1 className="text-xl font-bold text-text-primary">🛡️ Bot Detector SOC</h1>
+          <h1 className="text-xl font-bold text-text-primary">SOC Dashboard</h1>
           <div className="flex gap-2">
             {links.map(link => (
               <Link
@@ -258,9 +56,8 @@ export default function App() {
         <Navigation />
         <main className="max-w-7xl mx-auto px-4 py-6">
           <Routes>
-            <Route path="/incidents" element={<IncidentsView />} />
+            <Route path="/" element={<IncidentsView />} />
             <Route path="/threat-intel" element={<ThreatIntelView />} />
-            <Route path="/" element={<Dashboard />} />
             <Route path="/detections" element={<DetectionsList />} />
             <Route path="/detections/:type/:value" element={<DetailsView />} />
             <Route path="/investigation/:ip" element={<InvestigationView />} />
diff --git a/frontend/src/components/IncidentsView.tsx b/frontend/src/components/IncidentsView.tsx
index bcbeb1f..83eb2b1 100644
--- a/frontend/src/components/IncidentsView.tsx
+++ b/frontend/src/components/IncidentsView.tsx
@@ -18,6 +18,7 @@ interface IncidentCluster {
   last_seen: string;
   trend: 'up' | 'down' | 'stable';
   trend_percentage: number;
+  hits_per_second?: number;
 }
 
 interface MetricsSummary {
@@ -34,31 +35,22 @@ export function IncidentsView() {
   const [clusters, setClusters] = useState<IncidentCluster[]>([]);
   const [metrics, setMetrics] = useState<MetricsSummary | null>(null);
   const [loading, setLoading] = useState(true);
+  const [selectedClusters, setSelectedClusters] = useState<Set<string>>(new Set());
 
   useEffect(() => {
     const fetchIncidents = async () => {
       setLoading(true);
       try {
-        // Fetch metrics
         const metricsResponse = await fetch('/api/metrics');
         if (metricsResponse.ok) {
           const metricsData = await metricsResponse.json();
           setMetrics(metricsData.summary);
         }
 
-        // Fetch clusters (fallback to detections if endpoint doesn't exist yet)
         const clustersResponse = await fetch('/api/incidents/clusters');
         if (clustersResponse.ok) {
           const clustersData = await clustersResponse.json();
           setClusters(clustersData.items || []);
-        } else {
-          // Fallback: create pseudo-clusters from detections
-          const detectionsResponse = await fetch('/api/detections?page_size=100&sort_by=anomaly_score&sort_order=asc');
-          if (detectionsResponse.ok) {
-            const detectionsData = await detectionsResponse.json();
-            const pseudoClusters = createPseudoClusters(detectionsData.items);
-            setClusters(pseudoClusters);
-          }
         }
       } catch (error) {
         console.error('Error fetching incidents:', error);
@@ -68,87 +60,45 @@ export function IncidentsView() {
     };
 
     fetchIncidents();
-    // Refresh every 60 seconds
     const interval = setInterval(fetchIncidents, 60000);
     return () => clearInterval(interval);
   }, []);
 
-  // Create pseudo-clusters from detections (temporary until backend clustering is implemented)
-  const createPseudoClusters = (detections: any[]): IncidentCluster[] => {
-    const ipGroups = new Map<string, any[]>();
-    
-    detections.forEach((d: any) => {
-      const subnet = d.src_ip.split('.').slice(0, 3).join('.') + '.0/24';
-      if (!ipGroups.has(subnet)) {
-        ipGroups.set(subnet, []);
-      }
-      ipGroups.get(subnet)!.push(d);
-    });
-
-    return Array.from(ipGroups.entries())
-      .filter(([_, items]) => items.length >= 2)
-      .map(([subnet, items], index) => {
-        const uniqueIps = new Set(items.map((d: any) => d.src_ip));
-        const criticalCount = items.filter((d: any) => d.threat_level === 'CRITICAL').length;
-        const highCount = items.filter((d: any) => d.threat_level === 'HIGH').length;
-        
-        let severity: 'CRITICAL' | 'HIGH' | 'MEDIUM' | 'LOW' = 'LOW';
-        if (criticalCount > 0) severity = 'CRITICAL';
-        else if (highCount > items.length * 0.3) severity = 'HIGH';
-        else if (highCount > 0) severity = 'MEDIUM';
-
-        const score = Math.min(100, Math.round(
-          (criticalCount * 30 + highCount * 20 + (items.length * 2) + (uniqueIps.size * 5))
-        ));
-
-        return {
-          id: `INC-${new Date().toISOString().slice(0, 10).replace(/-/g, '')}-${String(index + 1).padStart(3, '0')}`,
-          score,
-          severity,
-          total_detections: items.length,
-          unique_ips: uniqueIps.size,
-          subnet,
-          ja4: items[0]?.ja4 || '',
-          primary_ua: 'python-requests',
-          primary_target: items[0]?.host || 'Unknown',
-          countries: [{ code: items[0]?.country_code || 'XX', percentage: 100 }],
-          asn: items[0]?.asn_number,
-          first_seen: items[0]?.detected_at,
-          last_seen: items[items.length - 1]?.detected_at,
-          trend: 'up' as const,
-          trend_percentage: 23
-        };
-      })
-      .sort((a, b) => b.score - a.score)
-      .slice(0, 10);
+  const toggleCluster = (id: string) => {
+    const newSelected = new Set(selectedClusters);
+    if (newSelected.has(id)) {
+      newSelected.delete(id);
+    } else {
+      newSelected.add(id);
+    }
+    setSelectedClusters(newSelected);
   };
 
-  const getSeverityIcon = (severity: string) => {
-    switch (severity) {
-      case 'CRITICAL': return '🔴';
-      case 'HIGH': return '🟠';
-      case 'MEDIUM': return '🟡';
-      case 'LOW': return '🟢';
-      default: return '⚪';
+  const selectAll = () => {
+    if (selectedClusters.size === clusters.length) {
+      setSelectedClusters(new Set());
+    } else {
+      setSelectedClusters(new Set(clusters.map(c => c.id)));
     }
   };
 
   const getSeverityColor = (severity: string) => {
     switch (severity) {
-      case 'CRITICAL': return 'border-threat-critical bg-threat-critical_bg';
-      case 'HIGH': return 'border-threat-high bg-threat-high/10';
-      case 'MEDIUM': return 'border-threat-medium bg-threat-medium/10';
-      case 'LOW': return 'border-threat-low bg-threat-low/10';
-      default: return 'border-background-card bg-background-card';
+      case 'CRITICAL': return 'border-red-500 bg-red-500/10';
+      case 'HIGH': return 'border-orange-500 bg-orange-500/10';
+      case 'MEDIUM': return 'border-yellow-500 bg-yellow-500/10';
+      case 'LOW': return 'border-green-500 bg-green-500/10';
+      default: return 'border-gray-500 bg-gray-500/10';
     }
   };
 
-  const getTrendIcon = (trend: string) => {
-    switch (trend) {
-      case 'up': return '📈';
-      case 'down': return '📉';
-      case 'stable': return '➡️';
-      default: return '📊';
+  const getSeverityBadgeColor = (severity: string) => {
+    switch (severity) {
+      case 'CRITICAL': return 'bg-red-500 text-white';
+      case 'HIGH': return 'bg-orange-500 text-white';
+      case 'MEDIUM': return 'bg-yellow-500 text-white';
+      case 'LOW': return 'bg-green-500 text-white';
+      default: return 'bg-gray-500 text-white';
     }
   };
 
@@ -159,7 +109,7 @@ export function IncidentsView() {
   if (loading) {
     return (
       <div className="flex items-center justify-center h-64">
-        <div className="text-text-secondary">Chargement des incidents...</div>
+        <div className="text-text-secondary">Chargement...</div>
       </div>
     );
   }
@@ -169,45 +119,95 @@ export function IncidentsView() {
       {/* Header with Quick Search */}
       <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
         <div>
-          <h1 className="text-2xl font-bold text-text-primary">🚨 Incidents Actifs</h1>
+          <h1 className="text-2xl font-bold text-text-primary">SOC Dashboard</h1>
           <p className="text-text-secondary text-sm mt-1">
             Surveillance en temps réel - 24 dernières heures
           </p>
         </div>
-        <QuickSearch />
+        <div className="w-full md:w-auto">
+          <QuickSearch />
+        </div>
       </div>
 
       {/* Critical Metrics */}
       {metrics && (
         <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
           <MetricCard
-            title="🔴 Critiques"
+            title="CRITICAL"
             value={metrics.critical_count.toLocaleString()}
-            subtitle={`+${Math.round(metrics.critical_count * 0.1)} depuis 1h`}
-            color="bg-threat-critical_bg"
-            trend="up"
+            subtitle={metrics.critical_count > 0 ? 'Requiert action immédiate' : 'Aucune'}
+            color="bg-red-500/20"
+            trend={metrics.critical_count > 10 ? 'up' : 'stable'}
           />
           <MetricCard
-            title="🟠 Hautes"
+            title="HIGH"
             value={metrics.high_count.toLocaleString()}
-            subtitle={`+${Math.round(metrics.high_count * 0.05)} depuis 1h`}
-            color="bg-threat-high/20"
-            trend="up"
-          />
-          <MetricCard
-            title="🟡 Moyennes"
-            value={metrics.medium_count.toLocaleString()}
-            subtitle={`${Math.round(metrics.medium_count * 0.8)} stables`}
-            color="bg-threat-medium/20"
+            subtitle="Menaces élevées"
+            color="bg-orange-500/20"
             trend="stable"
           />
           <MetricCard
-            title="📈 Tendance"
-            value="+23%"
-            subtitle="vs 24h précédentes"
-            color="bg-accent-primary/20"
-            trend="up"
+            title="MEDIUM"
+            value={metrics.medium_count.toLocaleString()}
+            subtitle="Menaces moyennes"
+            color="bg-yellow-500/20"
+            trend="stable"
           />
+          <MetricCard
+            title="TOTAL"
+            value={metrics.total_detections.toLocaleString()}
+            subtitle={`${metrics.unique_ips.toLocaleString()} IPs uniques`}
+            color="bg-blue-500/20"
+            trend="stable"
+          />
+        </div>
+      )}
+
+      {/* Bulk Actions */}
+      {selectedClusters.size > 0 && (
+        <div className="bg-blue-500/20 border border-blue-500 rounded-lg p-4">
+          <div className="flex items-center justify-between">
+            <div className="text-text-primary">
+              <span className="font-bold">{selectedClusters.size}</span> incidents sélectionnés
+            </div>
+            <div className="flex gap-2">
+              <button
+                onClick={() => {
+                  // Bulk classification
+                  const ips = clusters
+                    .filter(c => selectedClusters.has(c.id))
+                    .flatMap(c => c.subnet ? [c.subnet.split('/')[0]] : []);
+                  navigate(`/bulk-classify?ips=${encodeURIComponent(ips.join(','))}`);
+                }}
+                className="px-4 py-2 bg-blue-500 text-white rounded-lg text-sm hover:bg-blue-600 transition-colors"
+              >
+                Classifier en masse
+              </button>
+              <button
+                onClick={() => {
+                  // Export selected
+                  const data = clusters.filter(c => selectedClusters.has(c.id));
+                  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+                  const url = URL.createObjectURL(blob);
+                  const a = document.createElement('a');
+                  a.href = url;
+                  a.download = `export_incidents_${Date.now()}.json`;
+                  document.body.appendChild(a);
+                  a.click();
+                  document.body.removeChild(a);
+                }}
+                className="px-4 py-2 bg-background-card text-text-primary rounded-lg text-sm hover:bg-background-card/80 transition-colors"
+              >
+                Export JSON
+              </button>
+              <button
+                onClick={() => setSelectedClusters(new Set())}
+                className="px-4 py-2 bg-background-card text-text-primary rounded-lg text-sm hover:bg-background-card/80 transition-colors"
+              >
+                Désélectionner
+              </button>
+            </div>
+          </div>
         </div>
       )}
 
@@ -215,51 +215,53 @@ export function IncidentsView() {
       <div>
         <div className="flex items-center justify-between mb-4">
           <h2 className="text-xl font-semibold text-text-primary">
-            🎯 Incidents Prioritaires
+            Incidents Prioritaires
           </h2>
-          <div className="flex gap-2">
-            <button
-              onClick={() => navigate('/investigate')}
-              className="px-4 py-2 bg-accent-primary/20 text-accent-primary rounded-lg text-sm hover:bg-accent-primary/30 transition-colors"
-            >
-              🔍 Investigation avancée
-            </button>
-          </div>
+          <button
+            onClick={selectAll}
+            className="text-sm text-accent-primary hover:text-accent-primary/80"
+          >
+            {selectedClusters.size === clusters.length ? 'Tout désélectionner' : 'Tout sélectionner'}
+          </button>
         </div>
 
-        <div className="space-y-4">
+        <div className="space-y-3">
           {clusters.map((cluster) => (
             <div
               key={cluster.id}
-              className={`border-2 rounded-lg p-6 transition-all hover:shadow-lg ${getSeverityColor(cluster.severity)}`}
+              className={`border-2 rounded-lg p-4 transition-all hover:shadow-lg ${getSeverityColor(cluster.severity)}`}
             >
-              <div className="flex items-start justify-between">
+              <div className="flex items-start gap-4">
+                {/* Checkbox */}
+                <input
+                  type="checkbox"
+                  checked={selectedClusters.has(cluster.id)}
+                  onChange={() => toggleCluster(cluster.id)}
+                  className="mt-1 w-4 h-4 rounded bg-background-card border-background-card text-accent-primary focus:ring-accent-primary"
+                />
+
+                {/* Content */}
                 <div className="flex-1">
-                  <div className="flex items-center gap-3 mb-3">
-                    <span className="text-2xl">{getSeverityIcon(cluster.severity)}</span>
-                    <div>
-                      <h3 className="text-lg font-bold text-text-primary">
-                        {cluster.id}
-                      </h3>
-                      <p className="text-sm text-text-secondary">
-                        Score de risque: <span className="font-bold text-text-primary">{cluster.score}/100</span>
-                      </p>
-                    </div>
-                    <div className="ml-auto flex items-center gap-2 text-sm text-text-secondary">
-                      <span>{getTrendIcon(cluster.trend)}</span>
-                      <span className={cluster.trend === 'up' ? 'text-threat-high' : ''}>
-                        {cluster.trend_percentage}%
+                  <div className="flex items-start justify-between mb-3">
+                    <div className="flex items-center gap-3">
+                      <span className={`px-2 py-1 rounded text-xs font-bold ${getSeverityBadgeColor(cluster.severity)}`}>
+                        {cluster.severity}
                       </span>
+                      <span className="text-lg font-bold text-text-primary">{cluster.id}</span>
+                      <span className="text-text-secondary">|</span>
+                      <span className="font-mono text-sm text-text-primary">{cluster.subnet}</span>
+                    </div>
+                    <div className="flex items-center gap-4">
+                      <div className="text-right">
+                        <div className="text-2xl font-bold text-text-primary">{cluster.score}/100</div>
+                        <div className="text-xs text-text-secondary">Score de risque</div>
+                      </div>
                     </div>
                   </div>
 
-                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                  <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-3">
                     <div>
-                      <div className="text-xs text-text-secondary mb-1">Subnet</div>
-                      <div className="font-mono text-sm text-text-primary">{cluster.subnet}</div>
-                    </div>
-                    <div>
-                      <div className="text-xs text-text-secondary mb-1">IPs Uniques</div>
+                      <div className="text-xs text-text-secondary mb-1">IPs</div>
                       <div className="text-text-primary font-bold">{cluster.unique_ips}</div>
                     </div>
                     <div>
@@ -267,54 +269,85 @@ export function IncidentsView() {
                       <div className="text-text-primary font-bold">{cluster.total_detections}</div>
                     </div>
                     <div>
-                      <div className="text-xs text-text-secondary mb-1">Pays Principal</div>
-                      <div className="text-lg">
+                      <div className="text-xs text-text-secondary mb-1">Pays</div>
+                      <div className="text-text-primary">
                         {cluster.countries[0] && (
                           <>
-                            {getCountryFlag(cluster.countries[0].code)}{' '}
-                            <span className="text-sm text-text-primary">
-                              {cluster.countries[0].code}
-                            </span>
+                            {getCountryFlag(cluster.countries[0].code)} {cluster.countries[0].code}
                           </>
                         )}
                       </div>
                     </div>
+                    <div>
+                      <div className="text-xs text-text-secondary mb-1">ASN</div>
+                      <div className="text-text-primary">AS{cluster.asn || '?'}</div>
+                    </div>
+                    <div>
+                      <div className="text-xs text-text-secondary mb-1">Tendance</div>
+                      <div className={`font-bold ${
+                        cluster.trend === 'up' ? 'text-red-500' : 
+                        cluster.trend === 'down' ? 'text-green-500' : 
+                        'text-gray-400'
+                      }`}>
+                        {cluster.trend === 'up' ? '↑' : cluster.trend === 'down' ? '↓' : '→'} {cluster.trend_percentage}%
+                      </div>
+                    </div>
                   </div>
 
                   {cluster.ja4 && (
-                    <div className="mt-3 flex items-center gap-2 text-xs text-text-secondary">
-                      <span>🔐</span>
-                      <span className="font-mono">{cluster.ja4.slice(0, 50)}...</span>
+                    <div className="mb-3 p-2 bg-background-card rounded">
+                      <div className="text-xs text-text-secondary mb-1">JA4 Principal</div>
+                      <div className="font-mono text-xs text-text-primary break-all">{cluster.ja4}</div>
                     </div>
                   )}
 
-                  <div className="flex gap-2 mt-4">
+                  <div className="flex gap-2">
                     <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        navigate(`/investigation/${cluster.subnet?.split('/')[0] || ''}`);
-                      }}
-                      className="px-4 py-2 bg-accent-primary text-white rounded-lg text-sm hover:bg-accent-primary/80 transition-colors"
+                      onClick={() => navigate(`/investigation/${cluster.subnet?.split('/')[0] || ''}`)}
+                      className="px-3 py-1.5 bg-accent-primary text-white rounded text-sm hover:bg-accent-primary/80 transition-colors"
                     >
-                      🔍 Investiguer
+                      Investiguer
                     </button>
                     <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        // Timeline view
-                      }}
-                      className="px-4 py-2 bg-background-card text-text-primary rounded-lg text-sm hover:bg-background-card/80 transition-colors"
+                      onClick={() => navigate(`/entities/ip/${cluster.subnet?.split('/')[0] || ''}`)}
+                      className="px-3 py-1.5 bg-background-card text-text-primary rounded text-sm hover:bg-background-card/80 transition-colors"
                     >
-                      📊 Timeline
+                      Voir détails
                     </button>
                     <button
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        // Classification
+                      onClick={() => {
+                        // Quick classify
+                        navigate(`/bulk-classify?ips=${encodeURIComponent(cluster.subnet?.split('/')[0] || '')}`);
                       }}
-                      className="px-4 py-2 bg-background-card text-text-primary rounded-lg text-sm hover:bg-background-card/80 transition-colors"
+                      className="px-3 py-1.5 bg-background-card text-text-primary rounded text-sm hover:bg-background-card/80 transition-colors"
                     >
-                      🏷️ Classifier
+                      Classifier
+                    </button>
+                    <button
+                      onClick={() => {
+                        // Export STIX
+                        const stixData = {
+                          type: 'bundle',
+                          id: `bundle--${cluster.id}`,
+                          objects: [{
+                            type: 'indicator',
+                            id: `indicator--${cluster.id}`,
+                            pattern: `[ipv4-addr:value = '${cluster.subnet?.split('/')[0]}'`,
+                            pattern_type: 'stix'
+                          }]
+                        };
+                        const blob = new Blob([JSON.stringify(stixData, null, 2)], { type: 'application/json' });
+                        const url = URL.createObjectURL(blob);
+                        const a = document.createElement('a');
+                        a.href = url;
+                        a.download = `stix_${cluster.id}_${Date.now()}.json`;
+                        document.body.appendChild(a);
+                        a.click();
+                        document.body.removeChild(a);
+                      }}
+                      className="px-3 py-1.5 bg-background-card text-text-primary rounded text-sm hover:bg-background-card/80 transition-colors"
+                    >
+                      Export STIX
                     </button>
                   </div>
                 </div>
@@ -324,7 +357,6 @@ export function IncidentsView() {
 
           {clusters.length === 0 && (
             <div className="bg-background-secondary rounded-lg p-12 text-center">
-              <div className="text-6xl mb-4">🎉</div>
               <h3 className="text-xl font-semibold text-text-primary mb-2">
                 Aucun incident actif
               </h3>
@@ -336,94 +368,66 @@ export function IncidentsView() {
         </div>
       </div>
 
-      {/* Threat Map Placeholder */}
-      <div className="bg-background-secondary rounded-lg p-6">
-        <h2 className="text-xl font-semibold text-text-primary mb-4">
-          🗺️ Carte des Menaces
-        </h2>
-        <div className="h-64 bg-background-card rounded-lg flex items-center justify-center">
-          <div className="text-center text-text-secondary">
-            <div className="text-4xl mb-2">🌍</div>
-            <div className="text-sm">Carte interactive - Bientôt disponible</div>
-            <div className="text-xs mt-1">
-              🇨🇳 CN: 45% • 🇺🇸 US: 23% • 🇩🇪 DE: 12% • 🇫🇷 FR: 8% • Autres: 12%
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Timeline */}
-      <div className="bg-background-secondary rounded-lg p-6">
-        <h2 className="text-xl font-semibold text-text-primary mb-4">
-          📈 Timeline des Attaques (24h)
-        </h2>
-        <div className="h-48 flex items-end justify-between gap-1">
-          {Array.from({ length: 24 }).map((_, i) => {
-            const height = Math.random() * 100;
-            const severity = height > 80 ? 'bg-threat-critical' : height > 60 ? 'bg-threat-high' : height > 40 ? 'bg-threat-medium' : 'bg-threat-low';
-            return (
-              <div
-                key={i}
-                className={`flex-1 ${severity} rounded-t transition-all hover:opacity-80`}
-                style={{ height: `${height}%` }}
-                title={`${i}h: ${Math.round(height)} détections`}
-              />
-            );
-          })}
-        </div>
-        <div className="flex justify-between mt-2 text-xs text-text-secondary">
-          {Array.from({ length: 7 }).map((_, i) => (
-            <span key={i}>{i * 4}h</span>
-          ))}
-        </div>
-      </div>
-
       {/* Top Active Threats */}
       <div className="bg-background-secondary rounded-lg p-6">
         <h2 className="text-xl font-semibold text-text-primary mb-4">
-          🔥 Top Actifs (Dernière heure)
+          Top Menaces Actives
         </h2>
         <div className="overflow-x-auto">
           <table className="w-full">
             <thead className="bg-background-card">
               <tr>
                 <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">#</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">IP</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">JA4</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">ASN</th>
-                <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">Pays</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">Entité</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">Type</th>
                 <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">Score</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">Pays</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">ASN</th>
                 <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">Hits/s</th>
+                <th className="px-4 py-3 text-left text-xs font-medium text-text-secondary uppercase">Tendance</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-background-card">
-              {clusters.slice(0, 5).map((cluster, index) => (
-                <tr key={cluster.id} className="hover:bg-background-card/50 transition-colors cursor-pointer">
-                  <td className="px-4 py-3 text-text-secondary">{index + 1}.</td>
+              {clusters.slice(0, 10).map((cluster, index) => (
+                <tr 
+                  key={cluster.id} 
+                  className="hover:bg-background-card/50 transition-colors cursor-pointer"
+                  onClick={() => navigate(`/investigation/${cluster.subnet?.split('/')[0] || ''}`)}
+                >
+                  <td className="px-4 py-3 text-text-secondary">{index + 1}</td>
                   <td className="px-4 py-3 font-mono text-sm text-text-primary">
                     {cluster.subnet?.split('/')[0] || 'Unknown'}
                   </td>
-                  <td className="px-4 py-3 font-mono text-xs text-text-secondary">
-                    {cluster.ja4 ? `${cluster.ja4.slice(0, 20)}...` : '-'}
-                  </td>
-                  <td className="px-4 py-3 text-sm text-text-primary">
-                    AS{cluster.asn || '?'}
-                  </td>
-                  <td className="px-4 py-3 text-lg">
-                    {cluster.countries[0] && getCountryFlag(cluster.countries[0].code)}
-                  </td>
+                  <td className="px-4 py-3 text-sm text-text-secondary">IP</td>
                   <td className="px-4 py-3">
                     <span className={`px-2 py-1 rounded text-xs font-bold ${
-                      cluster.score > 80 ? 'bg-threat-critical text-white' :
-                      cluster.score > 60 ? 'bg-threat-high text-white' :
-                      cluster.score > 40 ? 'bg-threat-medium text-white' :
-                      'bg-threat-low text-white'
+                      cluster.score > 80 ? 'bg-red-500 text-white' :
+                      cluster.score > 60 ? 'bg-orange-500 text-white' :
+                      cluster.score > 40 ? 'bg-yellow-500 text-white' :
+                      'bg-green-500 text-white'
                     }`}>
                       {cluster.score}
                     </span>
                   </td>
+                  <td className="px-4 py-3 text-text-primary">
+                    {cluster.countries[0] && (
+                      <>
+                        {getCountryFlag(cluster.countries[0].code)} {cluster.countries[0].code}
+                      </>
+                    )}
+                  </td>
+                  <td className="px-4 py-3 text-sm text-text-primary">
+                    AS{cluster.asn || '?'}
+                  </td>
                   <td className="px-4 py-3 text-text-primary font-bold">
-                    {Math.round(cluster.total_detections / 24)}
+                    {Math.round(cluster.total_detections / 24) || 0}
+                  </td>
+                  <td className={`px-4 py-3 font-bold ${
+                    cluster.trend === 'up' ? 'text-red-500' : 
+                    cluster.trend === 'down' ? 'text-green-500' : 
+                    'text-gray-400'
+                  }`}>
+                    {cluster.trend === 'up' ? '↑' : cluster.trend === 'down' ? '↓' : '→'} {cluster.trend_percentage}%
                   </td>
                 </tr>
               ))}
@@ -454,7 +458,7 @@ function MetricCard({
       <div className="flex items-center justify-between mb-2">
         <h3 className="text-text-secondary text-sm font-medium">{title}</h3>
         <span className="text-lg">
-          {trend === 'up' ? '📈' : trend === 'down' ? '📉' : '➡️'}
+          {trend === 'up' ? '↑' : trend === 'down' ? '↓' : '→'}
         </span>
       </div>
       <p className="text-3xl font-bold text-text-primary">{value}</p>