diff --git a/frontend/src/components/BotnetMapView.tsx b/frontend/src/components/BotnetMapView.tsx
deleted file mode 100644
index ecd9340..0000000
--- a/frontend/src/components/BotnetMapView.tsx
+++ /dev/null
@@ -1,314 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { formatNumber } from '../utils/dateUtils';
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-interface BotnetItem {
-  ja4: string;
-  unique_ips: number;
-  unique_countries: number;
-  targeted_hosts: number;
-  distribution_score: number;
-  botnet_class: string;
-}
-
-interface BotnetSummary {
-  total_global_botnets: number;
-  total_ips_in_botnets: number;
-  most_spread_ja4: string;
-  most_ips_ja4: string;
-}
-
-interface CountryEntry {
-  country_code: string;
-  unique_ips: number;
-  hits: number;
-}
-
-type SortField = 'unique_ips' | 'unique_countries' | 'targeted_hosts';
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-
-
-function getCountryFlag(code: string): string {
-  if (!code || code.length !== 2) return '🌐';
-  return code
-    .toUpperCase()
-    .replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397));
-}
-
-function botnetClassBadge(cls: string): { bg: string; text: string; label: string } {
-  switch (cls) {
-    case 'global':
-      return { bg: 'bg-threat-critical/20', text: 'text-threat-critical', label: '🌐 Global' };
-    case 'regional':
-      return { bg: 'bg-threat-high/20', text: 'text-threat-high', label: '🗺️ Régional' };
-    case 'concentrated':
-      return { bg: 'bg-threat-medium/20', text: 'text-threat-medium', label: '📍 Concentré' };
-    default:
-      return { bg: 'bg-background-card', text: 'text-text-secondary', label: cls };
-  }
-}
-
-// ─── Sub-components ───────────────────────────────────────────────────────────
-
-function StatCard({ label, value, accent, mono }: { label: string; value: string | number; accent?: string; mono?: boolean }) {
-  return (
-    <div className="bg-background-secondary rounded-lg p-4 flex flex-col gap-1 border border-border">
-      <span className="text-text-secondary text-sm">{label}</span>
-      <span className={`text-xl font-bold truncate ${mono ? 'font-mono text-sm' : 'text-2xl'} ${accent ?? 'text-text-primary'}`} title={String(value)}>
-        {value}
-      </span>
-    </div>
-  );
-}
-
-function LoadingSpinner() {
-  return (
-    <div className="flex items-center justify-center py-12">
-      <div className="w-8 h-8 border-2 border-accent-primary border-t-transparent rounded-full animate-spin" />
-    </div>
-  );
-}
-
-function ErrorMessage({ message }: { message: string }) {
-  return (
-    <div className="bg-threat-critical/10 border border-threat-critical/30 rounded-lg p-4 text-threat-critical">
-      ⚠️ {message}
-    </div>
-  );
-}
-
-// ─── Botnet row with expandable countries ─────────────────────────────────────
-
-function BotnetRow({
-  item,
-  onInvestigate,
-}: {
-  item: BotnetItem;
-  onInvestigate: (ja4: string) => void;
-}) {
-  const [expanded, setExpanded] = useState(false);
-  const [countries, setCountries] = useState<CountryEntry[]>([]);
-  const [countriesLoading, setCountriesLoading] = useState(false);
-  const [countriesError, setCountriesError] = useState<string | null>(null);
-  const [countriesLoaded, setCountriesLoaded] = useState(false);
-
-  const toggle = async () => {
-    setExpanded((prev) => !prev);
-    if (!countriesLoaded && !expanded) {
-      setCountriesLoading(true);
-      try {
-        const res = await fetch(`/api/botnets/ja4/${encodeURIComponent(item.ja4)}/countries?limit=30`);
-        if (!res.ok) throw new Error('Erreur chargement des pays');
-        const data: { items: CountryEntry[] } = await res.json();
-        setCountries(data.items ?? []);
-        setCountriesLoaded(true);
-      } catch (err) {
-        setCountriesError(err instanceof Error ? err.message : 'Erreur inconnue');
-      } finally {
-        setCountriesLoading(false);
-      }
-    }
-  };
-
-  const badge = botnetClassBadge(item.botnet_class);
-
-  return (
-    <>
-      <tr
-        className="border-b border-border hover:bg-background-card transition-colors cursor-pointer"
-        onClick={toggle}
-      >
-        <td className="px-4 py-3">
-          <span className="text-accent-primary text-xs mr-2">{expanded ? '▾' : '▸'}</span>
-          <span className="font-mono text-xs text-text-primary">{item.ja4 ? item.ja4.slice(0, 20) : '—'}…</span>
-        </td>
-        <td className="px-4 py-3 text-text-primary">{formatNumber(item.unique_ips)}</td>
-        <td className="px-4 py-3 text-text-primary">
-          <span className="flex items-center gap-1">🌍 {formatNumber(item.unique_countries)}</span>
-        </td>
-        <td className="px-4 py-3 text-text-secondary">{formatNumber(item.targeted_hosts)}</td>
-        <td className="px-4 py-3">
-          <div className="flex items-center gap-2">
-            <div className="w-16 bg-background-card rounded-full h-1.5">
-              <div
-                className="h-1.5 rounded-full bg-accent-primary"
-                style={{ width: `${Math.min(item.distribution_score, 100)}%` }}
-              />
-            </div>
-            <span className="text-xs text-text-secondary">{Math.round(item.distribution_score)}</span>
-          </div>
-        </td>
-        <td className="px-4 py-3">
-          <span className={`text-xs px-2 py-1 rounded-full ${badge.bg} ${badge.text}`}>{badge.label}</span>
-        </td>
-        <td className="px-4 py-3">
-          <button
-            onClick={(e) => { e.stopPropagation(); onInvestigate(item.ja4); }}
-            className="text-xs bg-accent-primary/10 text-accent-primary px-3 py-1 rounded hover:bg-accent-primary/20 transition-colors"
-          >
-            Investiguer JA4
-          </button>
-        </td>
-      </tr>
-      {expanded && (
-        <tr className="border-b border-border bg-background-card">
-          <td colSpan={7} className="px-6 py-4">
-            {countriesLoading ? (
-              <div className="flex items-center gap-2 text-text-secondary text-sm">
-                <div className="w-4 h-4 border-2 border-accent-primary border-t-transparent rounded-full animate-spin" />
-                Chargement des pays…
-              </div>
-            ) : countriesError ? (
-              <span className="text-threat-critical text-sm">⚠️ {countriesError}</span>
-            ) : (
-              <div className="flex flex-wrap gap-2">
-                {countries.map((c) => (
-                  <span
-                    key={c.country_code}
-                    title={`${c.country_code}: ${c.unique_ips} IPs, ${c.hits} hits`}
-                    className="inline-flex items-center gap-1 bg-background-secondary border border-border rounded-full px-2 py-1 text-xs text-text-primary"
-                  >
-                    {getCountryFlag(c.country_code)} {c.country_code}
-                    <span className="text-text-disabled">·</span>
-                    <span className="text-accent-primary">{formatNumber(c.unique_ips)} IPs</span>
-                  </span>
-                ))}
-              </div>
-            )}
-          </td>
-        </tr>
-      )}
-    </>
-  );
-}
-
-// ─── Main Component ───────────────────────────────────────────────────────────
-
-export function BotnetMapView() {
-  const navigate = useNavigate();
-
-  const [items, setItems] = useState<BotnetItem[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const [summary, setSummary] = useState<BotnetSummary | null>(null);
-  const [summaryLoading, setSummaryLoading] = useState(true);
-  const [summaryError, setSummaryError] = useState<string | null>(null);
-
-  const [sortField, setSortField] = useState<SortField>('unique_ips');
-
-  useEffect(() => {
-    const fetchItems = async () => {
-      setLoading(true);
-      try {
-        const res = await fetch('/api/botnets/ja4-spread');
-        if (!res.ok) throw new Error('Erreur chargement des botnets');
-        const data: { items: BotnetItem[]; total: number } = await res.json();
-        setItems(data.items ?? []);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'Erreur inconnue');
-      } finally {
-        setLoading(false);
-      }
-    };
-    const fetchSummary = async () => {
-      setSummaryLoading(true);
-      try {
-        const res = await fetch('/api/botnets/summary');
-        if (!res.ok) throw new Error('Erreur chargement du résumé');
-        const data: BotnetSummary = await res.json();
-        setSummary(data);
-      } catch (err) {
-        setSummaryError(err instanceof Error ? err.message : 'Erreur inconnue');
-      } finally {
-        setSummaryLoading(false);
-      }
-    };
-    fetchItems();
-    fetchSummary();
-  }, []);
-
-  const sortedItems = [...items].sort((a, b) => b[sortField] - a[sortField]);
-
-  const sortButton = (field: SortField, label: string) => (
-    <button
-      onClick={() => setSortField(field)}
-      className={`text-xs px-3 py-1.5 rounded transition-colors ${
-        sortField === field
-          ? 'bg-accent-primary/20 text-accent-primary'
-          : 'text-text-secondary hover:text-text-primary'
-      }`}
-    >
-      {label}
-    </button>
-  );
-
-  return (
-    <div className="p-6 space-y-6 animate-fade-in">
-      {/* Header */}
-      <div>
-        <h1 className="text-2xl font-bold text-text-primary">🌍 Botnets Distribués</h1>
-        <p className="text-text-secondary mt-1">
-          Analyse de la distribution géographique des fingerprints JA4 pour détecter les botnets globaux.
-        </p>
-      </div>
-
-      {/* Stat cards */}
-      {summaryLoading ? (
-        <LoadingSpinner />
-      ) : summaryError ? (
-        <ErrorMessage message={summaryError} />
-      ) : summary ? (
-        <div className="grid grid-cols-4 gap-4">
-          <StatCard label="Botnets globaux (>100 pays)" value={formatNumber(summary.total_global_botnets)} accent="text-threat-critical" />
-          <StatCard label="Total IPs en botnets" value={formatNumber(summary.total_ips_in_botnets)} accent="text-threat-high" />
-          <StatCard label="JA4 le plus répandu" value={summary.most_spread_ja4 || '—'} accent="text-accent-primary" mono />
-          <StatCard label="JA4 avec le plus d'IPs" value={summary.most_ips_ja4 || '—'} accent="text-accent-primary" mono />
-        </div>
-      ) : null}
-
-      {/* Sort controls */}
-      <div className="flex items-center gap-2">
-        <span className="text-text-secondary text-sm">Trier par :</span>
-        {sortButton('unique_ips', '🖥️ IPs')}
-        {sortButton('unique_countries', '🌍 Pays')}
-        {sortButton('targeted_hosts', '🎯 Hosts')}
-      </div>
-
-      {/* Table */}
-      <div className="bg-background-secondary rounded-lg border border-border overflow-hidden">
-        {loading ? (
-          <LoadingSpinner />
-        ) : error ? (
-          <div className="p-4"><ErrorMessage message={error} /></div>
-        ) : (
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-b border-border text-text-secondary text-left">
-                <th className="px-4 py-3">JA4</th>
-                <th className="px-4 py-3">IPs</th>
-                <th className="px-4 py-3">Pays</th>
-                <th className="px-4 py-3">Hosts ciblés</th>
-                <th className="px-4 py-3">Score distribution</th>
-                <th className="px-4 py-3">Classe</th>
-                <th className="px-4 py-3"></th>
-              </tr>
-            </thead>
-            <tbody>
-              {sortedItems.map((item) => (
-                <BotnetRow
-                  key={item.ja4}
-                  item={item}
-                  onInvestigate={(ja4) => navigate(`/investigation/ja4/${ja4}`)}
-                />
-              ))}
-            </tbody>
-          </table>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/src/components/BruteForceView.tsx b/frontend/src/components/BruteForceView.tsx
index e12d3c3..230f467 100644
--- a/frontend/src/components/BruteForceView.tsx
+++ b/frontend/src/components/BruteForceView.tsx
@@ -4,6 +4,7 @@ import DataTable, { Column } from './ui/DataTable';
 import { InfoTip } from './ui/Tooltip';
 import { TIPS } from './ui/tooltips';
 import { formatNumber } from '../utils/dateUtils';
+import { LoadingSpinner, ErrorMessage } from './ui/Feedback';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -46,15 +47,7 @@ function StatCard({ label, value, accent }: { label: string; value: string | num
   );
 }
 
-function LoadingSpinner() {
-  return (
-    <div className="flex items-center justify-center py-12">
-      <div className="w-8 h-8 border-2 border-accent-primary border-t-transparent rounded-full animate-spin" />
-    </div>
-  );
-}
-
-function ErrorMessage({ message }: { message: string }) {
+: { message: string }) {
   return (
     <div className="bg-threat-critical/10 border border-threat-critical/30 rounded-lg p-4 text-threat-critical">
       ⚠️ {message}
diff --git a/frontend/src/components/BulkClassification.tsx b/frontend/src/components/BulkClassification.tsx
index 60a215e..515efad 100644
--- a/frontend/src/components/BulkClassification.tsx
+++ b/frontend/src/components/BulkClassification.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { PREDEFINED_TAGS } from '../utils/classifications';
 
 interface BulkClassificationProps {
   selectedIPs: string[];
@@ -6,26 +7,6 @@ interface BulkClassificationProps {
   onSuccess: () => void;
 }
 
-const PREDEFINED_TAGS = [
-  'scraping',
-  'bot-network',
-  'scanner',
-  'bruteforce',
-  'data-exfil',
-  'ddos',
-  'spam',
-  'proxy',
-  'tor',
-  'vpn',
-  'hosting-asn',
-  'distributed',
-  'ja4-rotation',
-  'ua-rotation',
-  'country-cn',
-  'country-us',
-  'country-ru',
-];
-
 export function BulkClassification({ selectedIPs, onClose, onSuccess }: BulkClassificationProps) {
   const [selectedLabel, setSelectedLabel] = useState<string>('suspicious');
   const [selectedTags, setSelectedTags] = useState<string[]>([]);
diff --git a/frontend/src/components/CampaignsView.tsx b/frontend/src/components/CampaignsView.tsx
index 36dc10e..49a3a1c 100644
--- a/frontend/src/components/CampaignsView.tsx
+++ b/frontend/src/components/CampaignsView.tsx
@@ -4,6 +4,8 @@ import DataTable, { Column } from './ui/DataTable';
 import ThreatBadge from './ui/ThreatBadge';
 import { InfoTip } from './ui/Tooltip';
 import { TIPS } from './ui/tooltips';
+import { formatNumber } from '../utils/dateUtils';
+import { getCountryFlag } from '../utils/countryUtils';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -854,14 +856,6 @@ interface BotnetCountryEntry {
   hits: number;
 }
 
-function formatNumber(n: number): string {
-  return n.toLocaleString(navigator.language || undefined);
-}
-
-function getCountryFlag(code: string): string {
-  if (!code || code.length !== 2) return '🌐';
-  return code.toUpperCase().replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397));
-}
 
 function botnetClassBadge(cls: string): { bg: string; text: string; label: string } {
   switch (cls) {
diff --git a/frontend/src/components/CorrelationGraph.tsx b/frontend/src/components/CorrelationGraph.tsx
index f823dec..66bb44b 100644
--- a/frontend/src/components/CorrelationGraph.tsx
+++ b/frontend/src/components/CorrelationGraph.tsx
@@ -17,6 +17,7 @@ import 'reactflow/dist/style.css';
 import { useEffect, useState, useCallback, memo } from 'react';
 import { InfoTip } from './ui/Tooltip';
 import { TIPS } from './ui/tooltips';
+import { getCountryFlag } from '../utils/countryUtils';
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
@@ -47,12 +48,6 @@ function cleanIP(address: string): string {
   return address.replace(/^::ffff:/i, '');
 }
 
-function getCountryFlag(code: string): string {
-  return (code || '').toUpperCase().replace(/./g, (char) =>
-    String.fromCodePoint(char.charCodeAt(0) + 127397)
-  );
-}
-
 function classifyUA(ua: string): 'bot' | 'script' | 'normal' {
   const u = ua.toLowerCase();
   if (u.includes('bot') || u.includes('crawler') || u.includes('spider')) return 'bot';
diff --git a/frontend/src/components/EntityInvestigationView.tsx b/frontend/src/components/EntityInvestigationView.tsx
index bef3c00..e85e86a 100644
--- a/frontend/src/components/EntityInvestigationView.tsx
+++ b/frontend/src/components/EntityInvestigationView.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import { InfoTip } from './ui/Tooltip';
 import { TIPS } from './ui/tooltips';
 import { formatDateOnly } from '../utils/dateUtils';
+import { getCountryFlag } from '../utils/countryUtils';
 
 interface EntityStats {
   entity_type: string;
@@ -84,15 +85,7 @@ export function EntityInvestigationView() {
     return labels[entityType] || entityType;
   };
 
-  const getCountryFlag = (code: string) => {
-    const flags: Record<string, string> = {
-      CN: '🇨🇳', US: '🇺🇸', FR: '🇫🇷', DE: '🇩🇪', GB: '🇬🇧',
-      RU: '🇷🇺', CA: '🇨🇦', AU: '🇦🇺', JP: '🇯🇵', IN: '🇮🇳',
-      BR: '🇧🇷', IT: '🇮🇹', ES: '🇪🇸', NL: '🇳🇱', BE: '🇧🇪',
-      CH: '🇨🇭', SE: '🇸🇪', NO: '🇳🇴', DK: '🇩🇰', FI: '🇫🇮'
-    };
-    return flags[code] || code;
-  };
+  ;
 
 
   if (loading) {
diff --git a/frontend/src/components/FingerprintsView.tsx b/frontend/src/components/FingerprintsView.tsx
index 6a4823d..0e28ea5 100644
--- a/frontend/src/components/FingerprintsView.tsx
+++ b/frontend/src/components/FingerprintsView.tsx
@@ -4,7 +4,8 @@ import DataTable, { Column } from './ui/DataTable';
 import ThreatBadge from './ui/ThreatBadge';
 import { InfoTip } from './ui/Tooltip';
 import { TIPS } from './ui/tooltips';
-import { formatNumber as fmtNum, formatDateShort } from '../utils/dateUtils';
+import { formatNumber, formatDateShort } from '../utils/dateUtils';
+import { getCountryFlag } from '../utils/countryUtils';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -123,16 +124,6 @@ function botnetScore(uniqueIps: number, botUaPct: number): number {
   return Math.round(ipScore + botBonus);
 }
 
-function getCountryFlag(code: string): string {
-  return code
-    .toUpperCase()
-    .replace(/./g, (char) => String.fromCodePoint(char.charCodeAt(0) + 127397));
-}
-
-function formatNumber(n: number): string {
-  return fmtNum(n);
-}
-
 function botUaPercentage(userAgents: AttributeValue[]): number {
   if (!userAgents.length) return 0;
   const botOrScript = userAgents.filter((ua) => classifyUA(ua.value) !== 'normal');
diff --git a/frontend/src/components/HeaderFingerprintView.tsx b/frontend/src/components/HeaderFingerprintView.tsx
index f6a2e38..1cca724 100644
--- a/frontend/src/components/HeaderFingerprintView.tsx
+++ b/frontend/src/components/HeaderFingerprintView.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import DataTable, { Column } from './ui/DataTable';
 import { TIPS } from './ui/tooltips';
 import { formatNumber } from '../utils/dateUtils';
+import { ErrorMessage } from './ui/Feedback';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -65,7 +66,7 @@ function StatCard({ label, value, accent }: { label: string; value: string | num
   );
 }
 
-function ErrorMessage({ message }: { message: string }) {
+: { message: string }) {
   return (
     <div className="bg-threat-critical/10 border border-threat-critical/30 rounded-lg p-4 text-threat-critical">
       ⚠️ {message}
diff --git a/frontend/src/components/HeatmapView.tsx b/frontend/src/components/HeatmapView.tsx
deleted file mode 100644
index 86d44c5..0000000
--- a/frontend/src/components/HeatmapView.tsx
+++ /dev/null
@@ -1,318 +0,0 @@
-import { useState, useEffect } from 'react';
-import { formatNumber } from '../utils/dateUtils';
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-interface HourlyEntry {
-  hour: number;
-  hits: number;
-  unique_ips: number;
-  max_rps: number;
-}
-
-interface TopHost {
-  host: string;
-  total_hits: number;
-  unique_ips: number;
-  unique_ja4s: number;
-  hourly_hits: number[];
-}
-
-interface HeatmapMatrix {
-  hosts: string[];
-  matrix: number[][];
-}
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-
-
-function heatmapCellStyle(value: number, maxValue: number): React.CSSProperties {
-  if (maxValue === 0 || value === 0) return { backgroundColor: 'transparent' };
-  const ratio = value / maxValue;
-  if (ratio >= 0.75) return { backgroundColor: 'rgba(239, 68, 68, 0.85)' };
-  if (ratio >= 0.5) return { backgroundColor: 'rgba(168, 85, 247, 0.7)' };
-  if (ratio >= 0.25) return { backgroundColor: 'rgba(59, 130, 246, 0.6)' };
-  if (ratio >= 0.05) return { backgroundColor: 'rgba(96, 165, 250, 0.35)' };
-  return { backgroundColor: 'rgba(147, 197, 253, 0.15)' };
-}
-
-// ─── Sub-components ───────────────────────────────────────────────────────────
-
-function StatCard({ label, value, accent }: { label: string; value: string | number; accent?: string }) {
-  return (
-    <div className="bg-background-secondary rounded-lg p-4 flex flex-col gap-1 border border-border">
-      <span className="text-text-secondary text-sm">{label}</span>
-      <span className={`text-2xl font-bold ${accent ?? 'text-text-primary'}`}>{value}</span>
-    </div>
-  );
-}
-
-function LoadingSpinner() {
-  return (
-    <div className="flex items-center justify-center py-12">
-      <div className="w-8 h-8 border-2 border-accent-primary border-t-transparent rounded-full animate-spin" />
-    </div>
-  );
-}
-
-function ErrorMessage({ message }: { message: string }) {
-  return (
-    <div className="bg-threat-critical/10 border border-threat-critical/30 rounded-lg p-4 text-threat-critical">
-      ⚠️ {message}
-    </div>
-  );
-}
-
-// Mini sparkline for a host row
-function Sparkline({ data }: { data: number[] }) {
-  const max = Math.max(...data, 1);
-  return (
-    <div className="flex items-end gap-px" style={{ height: '24px', width: '96px' }}>
-      {data.map((v, i) => {
-        const pct = (v / max) * 100;
-        return (
-          <div
-            key={i}
-            style={{ height: `${Math.max(pct, 5)}%`, width: '4px' }}
-            className={`rounded-sm ${pct >= 70 ? 'bg-threat-critical' : pct >= 30 ? 'bg-threat-medium' : 'bg-accent-primary/50'}`}
-          />
-        );
-      })}
-    </div>
-  );
-}
-
-// ─── Main Component ───────────────────────────────────────────────────────────
-
-export function HeatmapView() {
-  const [hourly, setHourly] = useState<HourlyEntry[]>([]);
-  const [hourlyLoading, setHourlyLoading] = useState(true);
-  const [hourlyError, setHourlyError] = useState<string | null>(null);
-
-  const [topHosts, setTopHosts] = useState<TopHost[]>([]);
-  const [topHostsLoading, setTopHostsLoading] = useState(true);
-  const [topHostsError, setTopHostsError] = useState<string | null>(null);
-
-  const [matrixData, setMatrixData] = useState<HeatmapMatrix | null>(null);
-  const [matrixLoading, setMatrixLoading] = useState(true);
-  const [matrixError, setMatrixError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const fetchHourly = async () => {
-      try {
-        const res = await fetch('/api/heatmap/hourly');
-        if (!res.ok) throw new Error('Erreur chargement courbe horaire');
-        const data: { hours: HourlyEntry[] } = await res.json();
-        setHourly(data.hours ?? []);
-      } catch (err) {
-        setHourlyError(err instanceof Error ? err.message : 'Erreur inconnue');
-      } finally {
-        setHourlyLoading(false);
-      }
-    };
-    const fetchTopHosts = async () => {
-      try {
-        const res = await fetch('/api/heatmap/top-hosts?limit=20');
-        if (!res.ok) throw new Error('Erreur chargement top hosts');
-        const data: { items: TopHost[] } = await res.json();
-        setTopHosts(data.items ?? []);
-      } catch (err) {
-        setTopHostsError(err instanceof Error ? err.message : 'Erreur inconnue');
-      } finally {
-        setTopHostsLoading(false);
-      }
-    };
-    const fetchMatrix = async () => {
-      try {
-        const res = await fetch('/api/heatmap/matrix');
-        if (!res.ok) throw new Error('Erreur chargement heatmap matrix');
-        const data: HeatmapMatrix = await res.json();
-        setMatrixData(data);
-      } catch (err) {
-        setMatrixError(err instanceof Error ? err.message : 'Erreur inconnue');
-      } finally {
-        setMatrixLoading(false);
-      }
-    };
-    fetchHourly();
-    fetchTopHosts();
-    fetchMatrix();
-  }, []);
-
-  const peakHour = hourly.reduce((best, h) => (h.hits > best.hits ? h : best), { hour: 0, hits: 0, unique_ips: 0, max_rps: 0 });
-  const totalHits = hourly.reduce((s, h) => s + h.hits, 0);
-  const maxHits = hourly.length > 0 ? Math.max(...hourly.map((h) => h.hits)) : 1;
-
-  const matrixMax = matrixData
-    ? Math.max(...matrixData.matrix.flatMap((row) => row), 1)
-    : 1;
-
-  const displayHosts = matrixData ? matrixData.hosts.slice(0, 15) : [];
-
-  return (
-    <div className="p-6 space-y-8 animate-fade-in">
-      {/* Header */}
-      <div>
-        <h1 className="text-2xl font-bold text-text-primary">⏱️ Heatmap Temporelle d'Attaques</h1>
-        <p className="text-text-secondary mt-1">
-          Distribution horaire de l'activité malveillante par host cible.
-        </p>
-      </div>
-
-      {/* Stat cards */}
-      <div className="grid grid-cols-3 gap-4">
-        <StatCard
-          label="Heure de pic"
-          value={peakHour.hits > 0 ? `${peakHour.hour}h (${formatNumber(peakHour.hits)} hits)` : '—'}
-          accent="text-threat-critical"
-        />
-        <StatCard label="Total hits (24h)" value={formatNumber(totalHits)} accent="text-text-primary" />
-        <StatCard label="Hosts ciblés" value={formatNumber(matrixData?.hosts.length ?? 0)} accent="text-threat-high" />
-      </div>
-
-      {/* Section 1: Courbe horaire */}
-      <div className="bg-background-secondary rounded-lg border border-border p-6">
-        <h2 className="text-text-primary font-semibold mb-4">Activité horaire — 24h</h2>
-        {hourlyLoading ? (
-          <LoadingSpinner />
-        ) : hourlyError ? (
-          <ErrorMessage message={hourlyError} />
-        ) : (
-          <>
-            <div className="flex items-end gap-1" style={{ height: '160px' }}>
-              {Array.from({ length: 24 }, (_, i) => {
-                const entry = hourly.find((h) => h.hour === i) ?? { hour: i, hits: 0, unique_ips: 0, max_rps: 0 };
-                const pct = maxHits > 0 ? (entry.hits / maxHits) * 100 : 0;
-                return (
-                  <div key={i} className="flex flex-col items-center flex-1 gap-1 h-full">
-                    <div className="w-full flex flex-col justify-end flex-1">
-                      <div
-                        title={`${i}h: ${entry.hits} hits`}
-                        style={{ height: `${Math.max(pct, 1)}%` }}
-                        className={`w-full rounded-t transition-all ${
-                          pct >= 70 ? 'bg-threat-critical' : pct >= 30 ? 'bg-threat-medium' : 'bg-accent-primary/60'
-                        }`}
-                      />
-                    </div>
-                    <span className="text-text-disabled text-xs">{i}</span>
-                  </div>
-                );
-              })}
-            </div>
-            <div className="flex gap-4 mt-3 text-xs text-text-secondary">
-              <span className="flex items-center gap-1"><span className="w-3 h-3 bg-threat-critical rounded-sm inline-block" /> Élevé (≥70%)</span>
-              <span className="flex items-center gap-1"><span className="w-3 h-3 bg-threat-medium rounded-sm inline-block" /> Moyen (≥30%)</span>
-              <span className="flex items-center gap-1"><span className="w-3 h-3 bg-accent-primary/60 rounded-sm inline-block" /> Faible</span>
-            </div>
-          </>
-        )}
-      </div>
-
-      {/* Section 2: Heatmap matrix */}
-      <div className="bg-background-secondary rounded-lg border border-border p-6">
-        <h2 className="text-text-primary font-semibold mb-4">Heatmap Host × Heure</h2>
-        {matrixLoading ? (
-          <LoadingSpinner />
-        ) : matrixError ? (
-          <ErrorMessage message={matrixError} />
-        ) : !matrixData || displayHosts.length === 0 ? (
-          <p className="text-text-secondary text-sm">Aucune donnée disponible.</p>
-        ) : (
-          <div className="overflow-auto">
-            <div className="inline-block min-w-full">
-              {/* Hour headers */}
-              <div className="flex" style={{ marginLeft: '180px' }}>
-                {Array.from({ length: 24 }, (_, i) => (
-                  <div key={i} className="text-center text-xs text-text-disabled" style={{ width: '28px', minWidth: '28px' }}>
-                    {i}
-                  </div>
-                ))}
-              </div>
-              {/* Rows */}
-              {displayHosts.map((host, rowIdx) => {
-                const rowData = matrixData.matrix[rowIdx] ?? Array(24).fill(0);
-                return (
-                  <div key={host} className="flex items-center" style={{ height: '24px', marginBottom: '2px' }}>
-                    <div className="text-xs text-text-secondary truncate text-right pr-2" style={{ width: '180px', minWidth: '180px' }} title={host}>
-                      {host}
-                    </div>
-                    {Array.from({ length: 24 }, (_, h) => {
-                      const val = rowData[h] ?? 0;
-                      return (
-                        <div
-                          key={h}
-                          title={`${host} ${h}h: ${val} hits`}
-                          style={{
-                            width: '26px',
-                            minWidth: '26px',
-                            height: '20px',
-                            marginRight: '2px',
-                            borderRadius: '2px',
-                            ...heatmapCellStyle(val, matrixMax),
-                          }}
-                        />
-                      );
-                    })}
-                  </div>
-                );
-              })}
-            </div>
-            <div className="flex gap-3 mt-4 text-xs text-text-secondary items-center">
-              <span>Intensité :</span>
-              {[
-                { label: 'Nul', style: { backgroundColor: 'transparent', border: '1px solid rgba(255,255,255,0.1)' } },
-                { label: 'Très faible', style: { backgroundColor: 'rgba(147, 197, 253, 0.15)' } },
-                { label: 'Faible', style: { backgroundColor: 'rgba(96, 165, 250, 0.35)' } },
-                { label: 'Moyen', style: { backgroundColor: 'rgba(59, 130, 246, 0.6)' } },
-                { label: 'Élevé', style: { backgroundColor: 'rgba(168, 85, 247, 0.7)' } },
-                { label: 'Critique', style: { backgroundColor: 'rgba(239, 68, 68, 0.85)' } },
-              ].map(({ label, style }) => (
-                <span key={label} className="flex items-center gap-1">
-                  <span style={{ ...style, display: 'inline-block', width: '14px', height: '14px', borderRadius: '2px' }} />
-                  {label}
-                </span>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Section 3: Top hosts table */}
-      <div className="bg-background-secondary rounded-lg border border-border overflow-hidden">
-        <div className="px-6 py-4 border-b border-border">
-          <h2 className="text-text-primary font-semibold">Top Hosts ciblés</h2>
-        </div>
-        {topHostsLoading ? (
-          <LoadingSpinner />
-        ) : topHostsError ? (
-          <div className="p-4"><ErrorMessage message={topHostsError} /></div>
-        ) : (
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-b border-border text-text-secondary text-left">
-                <th className="px-4 py-3">Host</th>
-                <th className="px-4 py-3">Total hits</th>
-                <th className="px-4 py-3">IPs uniques</th>
-                <th className="px-4 py-3">JA4 uniques</th>
-                <th className="px-4 py-3">Activité 24h</th>
-              </tr>
-            </thead>
-            <tbody>
-              {topHosts.map((h) => (
-                <tr key={h.host} className="border-b border-border hover:bg-background-card transition-colors">
-                  <td className="px-4 py-3 font-mono text-xs text-text-primary">{h.host}</td>
-                  <td className="px-4 py-3 text-text-primary">{formatNumber(h.total_hits)}</td>
-                  <td className="px-4 py-3 text-text-secondary">{formatNumber(h.unique_ips)}</td>
-                  <td className="px-4 py-3 text-text-secondary">{formatNumber(h.unique_ja4s)}</td>
-                  <td className="px-4 py-3">
-                    <Sparkline data={h.hourly_hits ?? Array(24).fill(0)} />
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/src/components/IncidentsView.tsx b/frontend/src/components/IncidentsView.tsx
index 2188767..66405b1 100644
--- a/frontend/src/components/IncidentsView.tsx
+++ b/frontend/src/components/IncidentsView.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { InfoTip } from './ui/Tooltip';
 import { TIPS } from './ui/tooltips';
+import { getCountryFlag } from '../utils/countryUtils';
 
 interface IncidentCluster {
   id: string;
@@ -123,9 +124,7 @@ export function IncidentsView() {
     }
   };
 
-  const getCountryFlag = (code: string) => {
-    return code.toUpperCase().replace(/./g, char => String.fromCodePoint(char.charCodeAt(0) + 127397));
-  };
+  ;
 
   if (loading) {
     return (
diff --git a/frontend/src/components/InvestigationPanel.tsx b/frontend/src/components/InvestigationPanel.tsx
deleted file mode 100644
index 2255cf9..0000000
--- a/frontend/src/components/InvestigationPanel.tsx
+++ /dev/null
@@ -1,351 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-interface InvestigationPanelProps {
-  entityType: 'ip' | 'ja4' | 'asn' | 'host';
-  entityValue: string;
-  onClose: () => void;
-}
-
-interface AttributeValue {
-  value: string;
-  count: number;
-  percentage: number;
-  first_seen?: string;
-  last_seen?: string;
-}
-
-interface EntityData {
-  type: string;
-  value: string;
-  total_detections: number;
-  unique_ips: number;
-  threat_level?: string;
-  anomaly_score?: number;
-  country_code?: string;
-  asn_number?: string;
-  user_agents?: { value: string; count: number }[];
-  ja4s?: string[];
-  hosts?: string[];
-  attributes?: {
-    user_agents?: AttributeValue[];
-    ja4?: AttributeValue[];
-    countries?: AttributeValue[];
-    asns?: AttributeValue[];
-    hosts?: AttributeValue[];
-  };
-}
-
-export function InvestigationPanel({ entityType, entityValue, onClose }: InvestigationPanelProps) {
-  const navigate = useNavigate();
-  const [data, setData] = useState<EntityData | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [classifying, setClassifying] = useState(false);
-  const [showAllUA, setShowAllUA] = useState(false);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      setLoading(true);
-      try {
-        const response = await fetch(`/api/variability/${entityType}/${encodeURIComponent(entityValue)}`);
-        if (response.ok) {
-          const result = await response.json();
-          setData(result);
-        }
-      } catch (error) {
-        console.error('Error fetching entity data:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchData();
-  }, [entityType, entityValue]);
-
-  const getSeverityColor = (score?: number) => {
-    if (!score) return 'bg-gray-500';
-    if (score < -0.7) return 'bg-threat-critical';
-    if (score < -0.3) return 'bg-threat-high';
-    if (score < 0) return 'bg-threat-medium';
-    return 'bg-threat-low';
-  };
-
-  const getSeverityLabel = (score?: number) => {
-    if (!score) return 'Unknown';
-    if (score < -0.7) return 'CRITICAL';
-    if (score < -0.3) return 'HIGH';
-    if (score < 0) return 'MEDIUM';
-    return 'LOW';
-  };
-
-  const getCountryFlag = (code?: string) => {
-    if (!code) return '';
-    return code.toUpperCase().replace(/./g, char => String.fromCodePoint(char.charCodeAt(0) + 127397));
-  };
-
-  const handleQuickClassify = async (label: string) => {
-    setClassifying(true);
-    try {
-      await fetch('/api/analysis/classifications', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          [entityType]: entityValue,
-          label,
-          tags: ['quick-classification'],
-          comment: 'Classification rapide depuis panel latéral',
-          confidence: 0.7,
-          analyst: 'soc_user'
-        })
-      });
-      alert(`Classification sauvegardée: ${label}`);
-    } catch (error) {
-      alert('Erreur lors de la classification');
-    } finally {
-      setClassifying(false);
-    }
-  };
-
-  return (
-    <div className="fixed inset-0 z-50 flex justify-end">
-      {/* Backdrop */}
-      <div
-        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
-        onClick={onClose}
-      />
-
-      {/* Panel */}
-      <div className="relative w-full max-w-md bg-background-secondary h-full shadow-2xl overflow-y-auto animate-slide-in-right">
-        {/* Header */}
-        <div className="sticky top-0 bg-background-secondary border-b border-background-card p-6 z-10">
-          <div className="flex items-center justify-between mb-4">
-            <button
-              onClick={onClose}
-              className="text-text-secondary hover:text-text-primary transition-colors"
-            >
-              ← Fermer
-            </button>
-            <button
-              onClick={() => navigate(`/investigation/${entityType === 'ip' ? entityValue : ''}`)}
-              className="text-accent-primary hover:text-accent-primary/80 text-sm transition-colors"
-            >
-              Vue complète →
-            </button>
-          </div>
-
-          <div className="flex items-start gap-3">
-            <div className="text-3xl">
-              {entityType === 'ip' && '🌐'}
-              {entityType === 'ja4' && '🔐'}
-              {entityType === 'asn' && '🏢'}
-              {entityType === 'host' && '🖥️'}
-            </div>
-            <div className="flex-1 min-w-0">
-              <div className="text-xs text-text-secondary uppercase tracking-wide">
-                {entityType.toUpperCase()}
-              </div>
-              <div className="font-mono text-sm text-text-primary break-all">
-                {entityValue}
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Content */}
-        <div className="p-6 space-y-6">
-          {loading ? (
-            <div className="text-center text-text-secondary py-12">
-              Chargement...
-            </div>
-          ) : data ? (
-            <>
-              {/* Quick Stats */}
-              <div className="grid grid-cols-2 gap-4">
-                <StatBox
-                  label="Détections"
-                  value={data.total_detections.toLocaleString()}
-                />
-                <StatBox
-                  label="IPs Uniques"
-                  value={data.unique_ips.toLocaleString()}
-                />
-              </div>
-
-              {/* Risk Score */}
-              <div className="bg-background-card rounded-lg p-4">
-                <div className="text-sm text-text-secondary mb-2">Score de Risque Estimé</div>
-                <div className="flex items-center gap-3">
-                  <div className={`px-3 py-1 rounded font-bold text-white ${getSeverityColor(data.anomaly_score)}`}>
-                    {getSeverityLabel(data.anomaly_score)}
-                  </div>
-                  <div className="flex-1 bg-background-secondary rounded-full h-3">
-                    <div
-                      className={`h-3 rounded-full ${getSeverityColor(data.anomaly_score)}`}
-                      style={{ width: `${Math.min(100, Math.abs((data.anomaly_score || 0) * 100))}%` }}
-                    />
-                  </div>
-                </div>
-              </div>
-
-              {/* User-Agents */}
-              {data.attributes?.user_agents && data.attributes.user_agents.length > 0 && (
-                <div>
-                  <div className="text-sm font-semibold text-text-primary mb-2">
-                    🤖 User-Agents ({data.attributes.user_agents.length})
-                  </div>
-                  <div className="space-y-2">
-                    {(showAllUA ? data.attributes.user_agents : data.attributes.user_agents.slice(0, 5)).map((ua: any, idx: number) => (
-                      <div key={idx} className="bg-background-card rounded-lg p-3">
-                        <div className="text-xs text-text-primary font-mono break-all leading-relaxed">
-                          {ua.value}
-                        </div>
-                        <div className="text-xs text-text-secondary mt-1">
-                          {ua.count} détections • {ua.percentage.toFixed(1)}%
-                        </div>
-                      </div>
-                    ))}
-                    {data.attributes.user_agents.length > 5 && (
-                      <button
-                        onClick={() => setShowAllUA(v => !v)}
-                        className="w-full text-xs text-accent-primary hover:text-accent-primary/80 transition-colors"
-                      >
-                        {showAllUA ? '↑ Réduire' : `↓ Voir les ${data.attributes.user_agents.length - 5} autres`}
-                      </button>
-                    )}
-                  </div>
-                </div>
-              )}
-
-              {/* JA4 Fingerprints */}
-              {data.attributes?.ja4 && data.attributes.ja4.length > 0 && (
-                <div>
-                  <div className="text-sm font-semibold text-text-primary mb-2">
-                    🔐 JA4 Fingerprints ({data.attributes.ja4.length})
-                  </div>
-                  <div className="space-y-2">
-                    {data.attributes.ja4.slice(0, 5).map((ja4: any, idx: number) => (
-                      <div
-                        key={idx}
-                        className="bg-background-card rounded-lg p-3 flex items-center justify-between cursor-pointer hover:bg-background-card/80 transition-colors"
-                        onClick={() => navigate(`/investigation/ja4/${encodeURIComponent(ja4.value)}`)}
-                      >
-                        <div className="font-mono text-xs text-text-primary break-all flex-1">
-                          {ja4.value}
-                        </div>
-                        <div className="text-xs text-text-secondary ml-2 whitespace-nowrap">
-                          {ja4.count}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {/* Countries */}
-              {data.attributes?.countries && data.attributes.countries.length > 0 && (
-                <div>
-                  <div className="text-sm font-semibold text-text-primary mb-2">
-                    🌍 Pays ({data.attributes.countries.length})
-                  </div>
-                  <div className="space-y-2">
-                    {data.attributes.countries.slice(0, 5).map((country: any, idx: number) => (
-                      <div key={idx} className="bg-background-card rounded-lg p-3 flex items-center gap-3">
-                        <span className="text-xl">
-                          {getCountryFlag(country.value)}
-                        </span>
-                        <div className="flex-1">
-                          <div className="text-sm text-text-primary">
-                            {country.value}
-                          </div>
-                          <div className="text-xs text-text-secondary">
-                            {country.percentage.toFixed(1)}%
-                          </div>
-                        </div>
-                        <div className="text-sm text-text-primary font-bold">
-                          {country.count}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {/* Quick Classification */}
-              <div className="border-t border-background-card pt-6">
-                <div className="text-sm font-semibold text-text-primary mb-4">
-                  ⚡ Classification Rapide
-                </div>
-                <div className="grid grid-cols-3 gap-2 mb-4">
-                  <button
-                    onClick={() => handleQuickClassify('legitimate')}
-                    disabled={classifying}
-                    className="py-3 px-2 bg-threat-low/20 text-threat-low rounded-lg text-sm font-medium hover:bg-threat-low/30 transition-colors disabled:opacity-50"
-                  >
-                    ✅ Légitime
-                  </button>
-                  <button
-                    onClick={() => handleQuickClassify('suspicious')}
-                    disabled={classifying}
-                    className="py-3 px-2 bg-threat-medium/20 text-threat-medium rounded-lg text-sm font-medium hover:bg-threat-medium/30 transition-colors disabled:opacity-50"
-                  >
-                    ⚠️ Suspect
-                  </button>
-                  <button
-                    onClick={() => handleQuickClassify('malicious')}
-                    disabled={classifying}
-                    className="py-3 px-2 bg-threat-high/20 text-threat-high rounded-lg text-sm font-medium hover:bg-threat-high/30 transition-colors disabled:opacity-50"
-                  >
-                    ❌ Malveillant
-                  </button>
-                </div>
-
-                <div className="flex gap-2">
-                  <button
-                    onClick={() => navigate(`/investigation/${entityType === 'ip' ? entityValue : ''}`)}
-                    className="flex-1 py-3 px-4 bg-accent-primary text-white rounded-lg text-sm font-medium hover:bg-accent-primary/80 transition-colors"
-                  >
-                    🔍 Investigation Complète
-                  </button>
-                  <button
-                    onClick={() => {
-                      // Export IOC
-                      const blob = new Blob([JSON.stringify({
-                        type: entityType,
-                        value: entityValue,
-                        timestamp: new Date().toISOString()
-                      }, null, 2)], { type: 'application/json' });
-                      const url = URL.createObjectURL(blob);
-                      const a = document.createElement('a');
-                      a.href = url;
-                      a.download = `ioc_${entityType}_${Date.now()}.json`;
-                      document.body.appendChild(a);
-                      a.click();
-                      document.body.removeChild(a);
-                    }}
-                    className="py-3 px-4 bg-background-card text-text-primary rounded-lg text-sm font-medium hover:bg-background-card/80 transition-colors"
-                  >
-                    📤 Export IOC
-                  </button>
-                </div>
-              </div>
-            </>
-          ) : (
-            <div className="text-center text-text-secondary py-12">
-              Aucune donnée disponible
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// Stat Box Component
-function StatBox({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="bg-background-card rounded-lg p-4">
-      <div className="text-xs text-text-secondary mb-1">{label}</div>
-      <div className="text-2xl font-bold text-text-primary">{value}</div>
-    </div>
-  );
-}
diff --git a/frontend/src/components/MLFeaturesView.tsx b/frontend/src/components/MLFeaturesView.tsx
index 4f6c79c..e457abc 100644
--- a/frontend/src/components/MLFeaturesView.tsx
+++ b/frontend/src/components/MLFeaturesView.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import DataTable, { Column } from './ui/DataTable';
 import { TIPS } from './ui/tooltips';
 import { formatNumber } from '../utils/dateUtils';
+import { LoadingSpinner, ErrorMessage } from './ui/Feedback';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -80,15 +81,7 @@ function fuzzingBadgeClass(value: number): string {
 
 // ─── Sub-components ───────────────────────────────────────────────────────────
 
-function LoadingSpinner() {
-  return (
-    <div className="flex items-center justify-center py-12">
-      <div className="w-8 h-8 border-2 border-accent-primary border-t-transparent rounded-full animate-spin" />
-    </div>
-  );
-}
-
-function ErrorMessage({ message }: { message: string }) {
+: { message: string }) {
   return (
     <div className="bg-threat-critical/10 border border-threat-critical/30 rounded-lg p-4 text-threat-critical">
       ⚠️ {message}
diff --git a/frontend/src/components/PivotView.tsx b/frontend/src/components/PivotView.tsx
index 4ecf728..4e31c04 100644
--- a/frontend/src/components/PivotView.tsx
+++ b/frontend/src/components/PivotView.tsx
@@ -14,6 +14,7 @@ import { useState, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { InfoTip } from './ui/Tooltip';
 import { TIPS } from './ui/tooltips';
+import { getCountryFlag } from '../utils/countryUtils';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -67,12 +68,6 @@ function detectType(input: string): EntityType {
   return 'ja4';
 }
 
-function getCountryFlag(code: string): string {
-  return (code || '').toUpperCase().replace(/./g, c =>
-    String.fromCodePoint(c.charCodeAt(0) + 127397)
-  );
-}
-
 // ─── Component ────────────────────────────────────────────────────────────────
 
 export function PivotView() {
diff --git a/frontend/src/components/RotationView.tsx b/frontend/src/components/RotationView.tsx
deleted file mode 100644
index ebb2799..0000000
--- a/frontend/src/components/RotationView.tsx
+++ /dev/null
@@ -1,590 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { formatDateShort } { formatNumber; } from '../utils/dateUtils'
-
-// ─── Types ────────────────────────────────────────────────────────────────────
-
-interface JA4Rotator {
-  ip: string;
-  distinct_ja4_count: number;
-  total_hits: number;
-  evasion_score: number;
-}
-
-interface PersistentThreat {
-  ip: string;
-  recurrence: number;
-  worst_score: number;
-  worst_threat_level: string;
-  first_seen: string;
-  last_seen: string;
-  persistence_score: number;
-}
-
-interface JA4HistoryEntry {
-  ja4: string;
-  hits: number;
-  window_start: string;
-}
-
-interface SophisticationItem {
-  ip: string;
-  ja4_rotation_count: number;
-  recurrence: number;
-  bruteforce_hits: number;
-  sophistication_score: number;
-  tier: string;
-}
-
-interface ProactiveHuntItem {
-  ip: string;
-  recurrence: number;
-  worst_score: number;
-  worst_threat_level: string;
-  first_seen: string;
-  last_seen: string;
-  days_active: number;
-  risk_assessment: string;
-}
-
-type ActiveTab = 'rotators' | 'persistent' | 'sophistication' | 'hunt';
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-
-
-function formatDate(iso: string): string {
-  if (!iso) return '—';
-  try {
-    return formatDateShort(iso);
-  } catch {
-    return iso;
-  }
-}
-
-function threatLevelBadge(level: string): { bg: string; text: string } {
-  switch (level?.toLowerCase()) {
-    case 'critical': return { bg: 'bg-threat-critical/20', text: 'text-threat-critical' };
-    case 'high':     return { bg: 'bg-threat-high/20', text: 'text-threat-high' };
-    case 'medium':   return { bg: 'bg-threat-medium/20', text: 'text-threat-medium' };
-    case 'low':      return { bg: 'bg-threat-low/20', text: 'text-threat-low' };
-    default:         return { bg: 'bg-background-card', text: 'text-text-secondary' };
-  }
-}
-
-function tierBadge(tier: string): { bg: string; text: string } {
-  switch (tier) {
-    case 'APT-like':  return { bg: 'bg-threat-critical/20', text: 'text-threat-critical' };
-    case 'Advanced':  return { bg: 'bg-threat-high/20', text: 'text-threat-high' };
-    case 'Automated': return { bg: 'bg-threat-medium/20', text: 'text-threat-medium' };
-    default:          return { bg: 'bg-background-card', text: 'text-text-secondary' };
-  }
-}
-
-// ─── Sub-components ───────────────────────────────────────────────────────────
-
-function StatCard({ label, value, accent }: { label: string; value: string | number; accent?: string }) {
-  return (
-    <div className="bg-background-secondary rounded-lg p-4 flex flex-col gap-1 border border-border">
-      <span className="text-text-secondary text-sm">{label}</span>
-      <span className={`text-2xl font-bold ${accent ?? 'text-text-primary'}`}>{value}</span>
-    </div>
-  );
-}
-
-function LoadingSpinner() {
-  return (
-    <div className="flex items-center justify-center py-12">
-      <div className="w-8 h-8 border-2 border-accent-primary border-t-transparent rounded-full animate-spin" />
-    </div>
-  );
-}
-
-function ErrorMessage({ message }: { message: string }) {
-  return (
-    <div className="bg-threat-critical/10 border border-threat-critical/30 rounded-lg p-4 text-threat-critical">
-      ⚠️ {message}
-    </div>
-  );
-}
-
-// ─── Rotator row with expandable JA4 history ─────────────────────────────────
-
-function RotatorRow({ item }: { item: JA4Rotator }) {
-  const [expanded, setExpanded] = useState(false);
-  const [history, setHistory] = useState<JA4HistoryEntry[]>([]);
-  const [historyLoading, setHistoryLoading] = useState(false);
-  const [historyError, setHistoryError] = useState<string | null>(null);
-  const [historyLoaded, setHistoryLoaded] = useState(false);
-
-  const toggle = async () => {
-    setExpanded((prev) => !prev);
-    if (!historyLoaded && !expanded) {
-      setHistoryLoading(true);
-      try {
-        const res = await fetch(`/api/rotation/ip/${encodeURIComponent(item.ip)}/ja4-history`);
-        if (!res.ok) throw new Error('Erreur chargement historique JA4');
-        const data: { ja4_history: JA4HistoryEntry[] } = await res.json();
-        setHistory(data.ja4_history ?? []);
-        setHistoryLoaded(true);
-      } catch (err) {
-        setHistoryError(err instanceof Error ? err.message : 'Erreur inconnue');
-      } finally {
-        setHistoryLoading(false);
-      }
-    }
-  };
-
-  const isHighRotation = item.distinct_ja4_count > 5;
-
-  return (
-    <>
-      <tr
-        className="border-b border-border hover:bg-background-card transition-colors cursor-pointer"
-        onClick={toggle}
-      >
-        <td className="px-4 py-3">
-          <span className="text-accent-primary text-xs mr-2">{expanded ? '▾' : '▸'}</span>
-          <span className="font-mono text-xs text-text-primary">{item.ip}</span>
-        </td>
-        <td className="px-4 py-3">
-          <span className={`text-xs px-2 py-1 rounded-full font-semibold ${
-            isHighRotation ? 'bg-threat-critical/20 text-threat-critical' : 'bg-threat-medium/20 text-threat-medium'
-          }`}>
-            {item.distinct_ja4_count} JA4
-          </span>
-        </td>
-        <td className="px-4 py-3 text-text-primary">{formatNumber(item.total_hits)}</td>
-        <td className="px-4 py-3">
-          <div className="flex items-center gap-2">
-            <div className="w-24 bg-background-card rounded-full h-2">
-              <div
-                className="h-2 rounded-full bg-threat-critical"
-                style={{ width: `${Math.min(item.evasion_score, 100)}%` }}
-              />
-            </div>
-            <span className="text-xs text-threat-critical font-semibold">{Math.round(item.evasion_score)}</span>
-          </div>
-        </td>
-      </tr>
-      {expanded && (
-        <tr className="border-b border-border bg-background-card">
-          <td colSpan={4} className="px-6 py-4">
-            {historyLoading ? (
-              <div className="flex items-center gap-2 text-text-secondary text-sm">
-                <div className="w-4 h-4 border-2 border-accent-primary border-t-transparent rounded-full animate-spin" />
-                Chargement de l'historique…
-              </div>
-            ) : historyError ? (
-              <span className="text-threat-critical text-sm">⚠️ {historyError}</span>
-            ) : history.length === 0 ? (
-              <span className="text-text-secondary text-sm">Aucun historique disponible.</span>
-            ) : (
-              <div className="space-y-1.5">
-                <p className="text-text-secondary text-xs mb-2">Historique des JA4 utilisés :</p>
-                {history.map((entry, idx) => (
-                  <div key={idx} className="flex items-center gap-3 text-xs">
-                    <span className="font-mono text-text-primary bg-background-secondary border border-border rounded px-2 py-0.5">
-                      {entry.ja4}
-                    </span>
-                    <span className="text-text-secondary">{formatNumber(entry.hits)} hits</span>
-                    <span className="text-text-disabled">{formatDate(entry.window_start)}</span>
-                  </div>
-                ))}
-              </div>
-            )}
-          </td>
-        </tr>
-      )}
-    </>
-  );
-}
-
-// ─── Main Component ───────────────────────────────────────────────────────────
-
-export function RotationView() {
-  const navigate = useNavigate();
-
-  const [activeTab, setActiveTab] = useState<ActiveTab>('rotators');
-
-  const [rotators, setRotators] = useState<JA4Rotator[]>([]);
-  const [rotatorsLoading, setRotatorsLoading] = useState(true);
-  const [rotatorsError, setRotatorsError] = useState<string | null>(null);
-
-  const [persistent, setPersistent] = useState<PersistentThreat[]>([]);
-  const [persistentLoading, setPersistentLoading] = useState(false);
-  const [persistentError, setPersistentError] = useState<string | null>(null);
-  const [persistentLoaded, setPersistentLoaded] = useState(false);
-
-  const [sophistication, setSophistication] = useState<SophisticationItem[]>([]);
-  const [sophisticationLoading, setSophisticationLoading] = useState(false);
-  const [sophisticationError, setSophisticationError] = useState<string | null>(null);
-  const [sophisticationLoaded, setSophisticationLoaded] = useState(false);
-
-  const [proactive, setProactive] = useState<ProactiveHuntItem[]>([]);
-  const [proactiveLoading, setProactiveLoading] = useState(false);
-  const [proactiveError, setProactiveError] = useState<string | null>(null);
-  const [proactiveLoaded, setProactiveLoaded] = useState(false);
-
-  useEffect(() => {
-    const fetchRotators = async () => {
-      setRotatorsLoading(true);
-      try {
-        const res = await fetch('/api/rotation/ja4-rotators?limit=50');
-        if (!res.ok) throw new Error('Erreur chargement des rotateurs');
-        const data: { items: JA4Rotator[] } = await res.json();
-        setRotators(data.items ?? []);
-      } catch (err) {
-        setRotatorsError(err instanceof Error ? err.message : 'Erreur inconnue');
-      } finally {
-        setRotatorsLoading(false);
-      }
-    };
-    fetchRotators();
-  }, []);
-
-  const loadPersistent = async () => {
-    if (persistentLoaded) return;
-    setPersistentLoading(true);
-    try {
-      const res = await fetch('/api/rotation/persistent-threats?limit=100');
-      if (!res.ok) throw new Error('Erreur chargement des menaces persistantes');
-      const data: { items: PersistentThreat[] } = await res.json();
-      const sorted = [...(data.items ?? [])].sort((a, b) => b.persistence_score - a.persistence_score);
-      setPersistent(sorted);
-      setPersistentLoaded(true);
-    } catch (err) {
-      setPersistentError(err instanceof Error ? err.message : 'Erreur inconnue');
-    } finally {
-      setPersistentLoading(false);
-    }
-  };
-
-  const loadSophistication = async () => {
-    if (sophisticationLoaded) return;
-    setSophisticationLoading(true);
-    try {
-      const res = await fetch('/api/rotation/sophistication?limit=50');
-      if (!res.ok) throw new Error('Erreur chargement sophistication');
-      const data: { items: SophisticationItem[] } = await res.json();
-      setSophistication(data.items ?? []);
-      setSophisticationLoaded(true);
-    } catch (err) {
-      setSophisticationError(err instanceof Error ? err.message : 'Erreur inconnue');
-    } finally {
-      setSophisticationLoading(false);
-    }
-  };
-
-  const loadProactive = async () => {
-    if (proactiveLoaded) return;
-    setProactiveLoading(true);
-    try {
-      const res = await fetch('/api/rotation/proactive-hunt?min_recurrence=1&min_days=0&limit=50');
-      if (!res.ok) throw new Error('Erreur chargement chasse proactive');
-      const data: { items: ProactiveHuntItem[] } = await res.json();
-      setProactive(data.items ?? []);
-      setProactiveLoaded(true);
-    } catch (err) {
-      setProactiveError(err instanceof Error ? err.message : 'Erreur inconnue');
-    } finally {
-      setProactiveLoading(false);
-    }
-  };
-
-  const handleTabChange = (tab: ActiveTab) => {
-    setActiveTab(tab);
-    if (tab === 'persistent') loadPersistent();
-    if (tab === 'sophistication') loadSophistication();
-    if (tab === 'hunt') loadProactive();
-  };
-
-  const maxEvasion = rotators.length > 0 ? Math.max(...rotators.map((r) => r.evasion_score)) : 0;
-  const maxPersistence = persistent.length > 0 ? Math.max(...persistent.map((p) => p.persistence_score)) : 0;
-
-  const tabs: { id: ActiveTab; label: string }[] = [
-    { id: 'rotators', label: '🎭 Rotateurs JA4' },
-    { id: 'persistent', label: '🕰️ Menaces Persistantes' },
-    { id: 'sophistication', label: '🏆 Sophistication' },
-    { id: 'hunt', label: '🕵️ Chasse proactive' },
-  ];
-
-  return (
-    <div className="p-6 space-y-6 animate-fade-in">
-      {/* Header */}
-      <div>
-        <h1 className="text-2xl font-bold text-text-primary">🔄 Rotation JA4 & Persistance</h1>
-        <p className="text-text-secondary mt-1">
-          Détection des IPs qui changent de fingerprint pour contourner les détections, et des menaces persistantes.
-        </p>
-      </div>
-
-      {/* Stat cards */}
-      <div className="grid grid-cols-4 gap-4">
-        <StatCard label="IPs en rotation" value={formatNumber(rotators.length)} accent="text-threat-high" />
-        <StatCard label="Score évasion max" value={Math.round(maxEvasion)} accent="text-threat-critical" />
-        <StatCard label="IPs persistantes" value={persistentLoaded ? formatNumber(persistent.length) : '—'} accent="text-threat-medium" />
-        <StatCard label="Score persistance max" value={persistentLoaded ? Math.round(maxPersistence) : '—'} accent="text-threat-critical" />
-      </div>
-
-      {/* Tabs */}
-      <div className="flex gap-2 border-b border-border">
-        {tabs.map((tab) => (
-          <button
-            key={tab.id}
-            onClick={() => handleTabChange(tab.id)}
-            className={`px-4 py-2 text-sm font-medium transition-colors ${
-              activeTab === tab.id
-                ? 'text-accent-primary border-b-2 border-accent-primary'
-                : 'text-text-secondary hover:text-text-primary'
-            }`}
-          >
-            {tab.label}
-          </button>
-        ))}
-      </div>
-
-      {/* Rotateurs tab */}
-      {activeTab === 'rotators' && (
-        <div className="bg-background-secondary rounded-lg border border-border overflow-hidden">
-          {rotatorsLoading ? (
-            <LoadingSpinner />
-          ) : rotatorsError ? (
-            <div className="p-4"><ErrorMessage message={rotatorsError} /></div>
-          ) : (
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="border-b border-border text-text-secondary text-left">
-                  <th className="px-4 py-3">IP</th>
-                  <th className="px-4 py-3">JA4 distincts</th>
-                  <th className="px-4 py-3">Total hits</th>
-                  <th className="px-4 py-3">Score d'évasion</th>
-                </tr>
-              </thead>
-              <tbody>
-                {rotators.map((item) => (
-                  <RotatorRow key={item.ip} item={item} />
-                ))}
-              </tbody>
-            </table>
-          )}
-        </div>
-      )}
-
-      {/* Persistantes tab */}
-      {activeTab === 'persistent' && (
-        <div className="bg-background-secondary rounded-lg border border-border overflow-hidden">
-          {persistentLoading ? (
-            <LoadingSpinner />
-          ) : persistentError ? (
-            <div className="p-4"><ErrorMessage message={persistentError} /></div>
-          ) : (
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="border-b border-border text-text-secondary text-left">
-                  <th className="px-4 py-3">IP</th>
-                  <th className="px-4 py-3">Récurrence</th>
-                  <th className="px-4 py-3">Score menace</th>
-                  <th className="px-4 py-3">Niveau</th>
-                  <th className="px-4 py-3">Première vue</th>
-                  <th className="px-4 py-3">Dernière vue</th>
-                  <th className="px-4 py-3">Score persistance</th>
-                  <th className="px-4 py-3"></th>
-                </tr>
-              </thead>
-              <tbody>
-                {persistent.map((item) => {
-                  const badge = threatLevelBadge(item.worst_threat_level);
-                  return (
-                    <tr key={item.ip} className="border-b border-border hover:bg-background-card transition-colors">
-                      <td className="px-4 py-3 font-mono text-xs text-text-primary">{item.ip}</td>
-                      <td className="px-4 py-3">
-                        <span className="bg-background-card border border-border text-text-primary text-xs px-2 py-1 rounded-full">
-                          {item.recurrence}j
-                        </span>
-                      </td>
-                      <td className="px-4 py-3 text-text-primary font-semibold">{Math.round(item.worst_score)}</td>
-                      <td className="px-4 py-3">
-                        <span className={`text-xs px-2 py-1 rounded-full ${badge.bg} ${badge.text}`}>
-                          {item.worst_threat_level?.toUpperCase() || '—'}
-                        </span>
-                      </td>
-                      <td className="px-4 py-3 text-text-secondary text-xs">{formatDate(item.first_seen)}</td>
-                      <td className="px-4 py-3 text-text-secondary text-xs">{formatDate(item.last_seen)}</td>
-                      <td className="px-4 py-3">
-                        <div className="flex items-center gap-2">
-                          <div className="w-20 bg-background-card rounded-full h-2">
-                            <div
-                              className="h-2 rounded-full bg-threat-high"
-                              style={{ width: `${Math.min(item.persistence_score, 100)}%` }}
-                            />
-                          </div>
-                          <span className="text-xs text-text-secondary">{Math.round(item.persistence_score)}</span>
-                        </div>
-                      </td>
-                      <td className="px-4 py-3">
-                        <button
-                          onClick={() => navigate(`/investigation/${item.ip}`)}
-                          className="text-xs bg-accent-primary/10 text-accent-primary px-3 py-1 rounded hover:bg-accent-primary/20 transition-colors"
-                        >
-                          Investiguer
-                        </button>
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          )}
-        </div>
-      )}
-
-      {/* Sophistication tab */}
-      {activeTab === 'sophistication' && (
-        <div className="bg-background-secondary rounded-lg border border-border overflow-hidden">
-          {sophisticationLoading ? (
-            <LoadingSpinner />
-          ) : sophisticationError ? (
-            <div className="p-4"><ErrorMessage message={sophisticationError} /></div>
-          ) : (
-            <>
-              <div className="p-4 border-b border-border text-text-secondary text-sm">
-                Score de sophistication = rotation JA4 × 10 + récurrence × 20 + log(bruteforce+1) × 5
-              </div>
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="border-b border-border text-text-secondary text-left">
-                    <th className="px-4 py-3">IP</th>
-                    <th className="px-4 py-3">Rotation JA4</th>
-                    <th className="px-4 py-3">Récurrence</th>
-                    <th className="px-4 py-3">Hits bruteforce</th>
-                    <th className="px-4 py-3">Score sophistication</th>
-                    <th className="px-4 py-3">Tier</th>
-                    <th className="px-4 py-3"></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {sophistication.map((item) => {
-                    const tb = tierBadge(item.tier);
-                    return (
-                      <tr key={item.ip} className="border-b border-border hover:bg-background-card transition-colors">
-                        <td className="px-4 py-3 font-mono text-xs text-text-primary">{item.ip}</td>
-                        <td className="px-4 py-3">
-                          <span className="bg-threat-medium/10 text-threat-medium text-xs px-2 py-1 rounded-full">
-                            {item.ja4_rotation_count} JA4
-                          </span>
-                        </td>
-                        <td className="px-4 py-3 text-text-primary">{item.recurrence}</td>
-                        <td className="px-4 py-3 text-text-primary">{formatNumber(item.bruteforce_hits)}</td>
-                        <td className="px-4 py-3">
-                          <div className="flex items-center gap-2">
-                            <div className="w-24 bg-background-card rounded-full h-2">
-                              <div
-                                className="h-2 rounded-full bg-threat-critical"
-                                style={{ width: `${Math.min(item.sophistication_score, 100)}%` }}
-                              />
-                            </div>
-                            <span className="text-xs font-semibold text-threat-critical">
-                              {item.sophistication_score}
-                            </span>
-                          </div>
-                        </td>
-                        <td className="px-4 py-3">
-                          <span className={`text-xs px-2 py-1 rounded-full ${tb.bg} ${tb.text} font-semibold`}>
-                            {item.tier}
-                          </span>
-                        </td>
-                        <td className="px-4 py-3">
-                          <button
-                            onClick={() => navigate(`/investigation/${item.ip}`)}
-                            className="text-xs bg-accent-primary/10 text-accent-primary px-3 py-1 rounded hover:bg-accent-primary/20 transition-colors"
-                          >
-                            Investiguer
-                          </button>
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-              {sophistication.length === 0 && (
-                <div className="text-center py-8 text-text-secondary text-sm">Aucune donnée de sophistication disponible.</div>
-              )}
-            </>
-          )}
-        </div>
-      )}
-
-      {/* Chasse proactive tab */}
-      {activeTab === 'hunt' && (
-        <div className="bg-background-secondary rounded-lg border border-border overflow-hidden">
-          {proactiveLoading ? (
-            <LoadingSpinner />
-          ) : proactiveError ? (
-            <div className="p-4"><ErrorMessage message={proactiveError} /></div>
-          ) : (
-            <>
-              <div className="p-4 border-b border-border text-text-secondary text-sm">
-                IPs récurrentes volant sous le radar (score &lt; 0.5) — persistantes mais non détectées comme critiques.
-              </div>
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="border-b border-border text-text-secondary text-left">
-                    <th className="px-4 py-3">IP</th>
-                    <th className="px-4 py-3">Récurrence</th>
-                    <th className="px-4 py-3">Score max</th>
-                    <th className="px-4 py-3">Jours actifs</th>
-                    <th className="px-4 py-3">Timeline</th>
-                    <th className="px-4 py-3">Évaluation</th>
-                    <th className="px-4 py-3"></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {proactive.map((item) => (
-                    <tr key={item.ip} className="border-b border-border hover:bg-background-card transition-colors">
-                      <td className="px-4 py-3 font-mono text-xs text-text-primary">{item.ip}</td>
-                      <td className="px-4 py-3">
-                        <span className="bg-background-card border border-border text-text-primary text-xs px-2 py-1 rounded-full">
-                          {item.recurrence}×
-                        </span>
-                      </td>
-                      <td className="px-4 py-3">
-                        <span className="text-threat-medium font-semibold">{item.worst_score.toFixed(3)}</span>
-                      </td>
-                      <td className="px-4 py-3 text-text-primary font-medium">{item.days_active}j</td>
-                      <td className="px-4 py-3">
-                        <div className="text-xs text-text-secondary space-y-0.5">
-                          <div><span className="text-text-disabled">Premier:</span> {formatDate(item.first_seen)}</div>
-                          <div><span className="text-text-disabled">Dernier:</span> {formatDate(item.last_seen)}</div>
-                        </div>
-                      </td>
-                      <td className="px-4 py-3">
-                        <span className={`text-xs px-2 py-1 rounded-full font-semibold ${
-                          item.risk_assessment === 'Évadeur potentiel'
-                            ? 'bg-threat-critical/20 text-threat-critical'
-                            : 'bg-threat-medium/20 text-threat-medium'
-                        }`}>
-                          {item.risk_assessment}
-                        </span>
-                      </td>
-                      <td className="px-4 py-3">
-                        <button
-                          onClick={() => navigate(`/investigation/${item.ip}`)}
-                          className="text-xs bg-accent-primary/10 text-accent-primary px-3 py-1 rounded hover:bg-accent-primary/20 transition-colors"
-                        >
-                          Lancer investigation
-                        </button>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-              {proactive.length === 0 && (
-                <div className="text-center py-8 text-text-secondary text-sm">Aucune IP sous le radar détectée avec ces critères.</div>
-              )}
-            </>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/frontend/src/components/SearchModal.tsx b/frontend/src/components/SearchModal.tsx
deleted file mode 100644
index 51289d1..0000000
--- a/frontend/src/components/SearchModal.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-interface SearchResult {
-  type: 'ip' | 'ja4' | 'host' | 'asn';
-  value: string;
-  label: string;
-  meta: string;
-  url: string;
-  investigation_url?: string;
-}
-
-const TYPE_ICON: Record<string, string> = {
-  ip:   '🌐',
-  ja4:  '🔏',
-  host: '🖥️',
-  asn:  '🏢',
-};
-
-const TYPE_LABEL: Record<string, string> = {
-  ip:   'IP',
-  ja4:  'JA4',
-  host: 'Host',
-  asn:  'ASN',
-};
-
-interface SearchModalProps {
-  open: boolean;
-  onClose: () => void;
-}
-
-export default function SearchModal({ open, onClose }: SearchModalProps) {
-  const navigate = useNavigate();
-  const [query, setQuery]       = useState('');
-  const [results, setResults]   = useState<SearchResult[]>([]);
-  const [loading, setLoading]   = useState(false);
-  const [selected, setSelected] = useState(0);
-  const inputRef  = useRef<HTMLInputElement>(null);
-  const debounce  = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  // Focus input when modal opens
-  useEffect(() => {
-    if (open) {
-      setQuery('');
-      setResults([]);
-      setSelected(0);
-      setTimeout(() => inputRef.current?.focus(), 50);
-    }
-  }, [open]);
-
-  const search = useCallback(async (q: string) => {
-    if (q.length < 2) { setResults([]); return; }
-    setLoading(true);
-    try {
-      const res = await fetch(`/api/search/quick?q=${encodeURIComponent(q)}`);
-      if (!res.ok) return;
-      const data = await res.json();
-      setResults(data.results || []);
-      setSelected(0);
-    } catch {
-      // ignore
-    } finally {
-      setLoading(false);
-    }
-  }, []);
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const val = e.target.value;
-    setQuery(val);
-    if (debounce.current) clearTimeout(debounce.current);
-    debounce.current = setTimeout(() => search(val), 200);
-  };
-
-  const go = (result: SearchResult, useInvestigation = false) => {
-    const url = (useInvestigation && result.investigation_url) ? result.investigation_url : result.url;
-    navigate(url);
-    onClose();
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Escape') { onClose(); return; }
-    if (e.key === 'ArrowDown') { e.preventDefault(); setSelected(s => Math.min(s + 1, results.length - 1)); }
-    if (e.key === 'ArrowUp')   { e.preventDefault(); setSelected(s => Math.max(s - 1, 0)); }
-    if (e.key === 'Enter' && results[selected]) {
-      go(results[selected], e.metaKey || e.ctrlKey);
-    }
-  };
-
-  if (!open) return null;
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex items-start justify-center pt-24 px-4"
-      onClick={onClose}
-    >
-      {/* Backdrop */}
-      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" />
-
-      {/* Modal */}
-      <div
-        className="relative w-full max-w-2xl bg-background-secondary border border-background-card rounded-2xl shadow-2xl overflow-hidden"
-        onClick={e => e.stopPropagation()}
-        onKeyDown={handleKeyDown}
-      >
-        {/* Input */}
-        <div className="flex items-center gap-3 px-4 py-3 border-b border-background-card">
-          <span className="text-text-disabled text-lg">🔍</span>
-          <input
-            ref={inputRef}
-            type="text"
-            value={query}
-            onChange={handleChange}
-            placeholder="Rechercher IP, JA4, host, ASN..."
-            className="flex-1 bg-transparent text-text-primary placeholder-text-disabled outline-none text-base"
-            autoComplete="off"
-          />
-          {loading && (
-            <span className="text-text-disabled text-xs animate-pulse">…</span>
-          )}
-          <kbd className="hidden sm:inline text-xs text-text-disabled bg-background-card px-1.5 py-0.5 rounded border border-border">
-            Esc
-          </kbd>
-        </div>
-
-        {/* Results */}
-        {results.length > 0 && (
-          <ul className="max-h-96 overflow-y-auto py-2">
-            {results.map((r, i) => (
-              <li key={`${r.type}-${r.value}-${i}`}>
-                <button
-                  className={[
-                    'w-full flex items-start gap-3 px-4 py-2.5 text-left transition-colors',
-                    i === selected
-                      ? 'bg-accent-primary/10 border-l-2 border-accent-primary'
-                      : 'hover:bg-background-card/50 border-l-2 border-transparent',
-                  ].join(' ')}
-                  onMouseEnter={() => setSelected(i)}
-                  onClick={() => go(r)}
-                >
-                  <span className="mt-0.5 text-base">{TYPE_ICON[r.type]}</span>
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2">
-                      <span className="text-xs font-semibold uppercase text-text-disabled tracking-wider">
-                        {TYPE_LABEL[r.type]}
-                      </span>
-                      <span className="font-mono text-sm text-text-primary truncate">{r.label}</span>
-                    </div>
-                    <div className="text-xs text-text-secondary mt-0.5">{r.meta}</div>
-                  </div>
-                  {r.investigation_url && (
-                    <button
-                      className="shrink-0 text-xs text-accent-primary hover:underline"
-                      onClick={e => { e.stopPropagation(); go(r, true); }}
-                      title="Ouvrir l'investigation complète"
-                    >
-                      Investigation →
-                    </button>
-                  )}
-                </button>
-              </li>
-            ))}
-          </ul>
-        )}
-
-        {/* Empty state */}
-        {query.length >= 2 && !loading && results.length === 0 && (
-          <div className="px-4 py-8 text-center text-text-disabled text-sm">
-            Aucun résultat pour <span className="font-mono text-text-secondary">"{query}"</span>
-          </div>
-        )}
-
-        {/* Footer hints */}
-        <div className="px-4 py-2 border-t border-background-card flex items-center gap-4 text-xs text-text-disabled">
-          <span><kbd className="bg-background-card px-1 rounded">↑↓</kbd> naviguer</span>
-          <span><kbd className="bg-background-card px-1 rounded">↵</kbd> ouvrir</span>
-          <span><kbd className="bg-background-card px-1 rounded">⌘↵</kbd> investigation</span>
-          <span className="ml-auto">Recherche sur les 24 dernières heures</span>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/frontend/src/components/SubnetInvestigation.tsx b/frontend/src/components/SubnetInvestigation.tsx
index ba79601..30514a6 100644
--- a/frontend/src/components/SubnetInvestigation.tsx
+++ b/frontend/src/components/SubnetInvestigation.tsx
@@ -3,6 +3,7 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { InfoTip } from './ui/Tooltip';
 import { TIPS } from './ui/tooltips';
 import { formatDateShort } from '../utils/dateUtils';
+import { getCountryFlag } from '../utils/countryUtils';
 
 interface SubnetIP {
   ip: string;
@@ -62,9 +63,7 @@ export function SubnetInvestigation() {
     fetchSubnet();
   }, [formattedSubnet]);
 
-  const getCountryFlag = (code: string) => {
-    return code.toUpperCase().replace(/./g, char => String.fromCodePoint(char.charCodeAt(0) + 127397));
-  };
+  ;
 
   const getThreatLevelColor = (level: string) => {
     switch (level) {
@@ -76,11 +75,6 @@ export function SubnetInvestigation() {
     }
   };
 
-  const formatDate = (dateString: string) => {
-    if (!dateString) return '-';
-    return formatDateShort(dateString);
-  };
-
   if (loading) {
     return (
       <div className="flex items-center justify-center h-64">
@@ -164,7 +158,7 @@ export function SubnetInvestigation() {
         <div className="bg-background-card rounded-lg p-4">
           <div className="text-sm text-text-secondary mb-1">Période</div>
           <div className="text-sm text-text-primary font-medium">
-            {formatDate(stats.first_seen)} – {formatDate(stats.last_seen)}
+            {formatDateShort(stats.first_seen)} – {formatDateShort(stats.last_seen)}
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/TcpSpoofingView.tsx b/frontend/src/components/TcpSpoofingView.tsx
index b324669..8199ed7 100644
--- a/frontend/src/components/TcpSpoofingView.tsx
+++ b/frontend/src/components/TcpSpoofingView.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import DataTable, { Column } from './ui/DataTable';
 import { TIPS } from './ui/tooltips';
 import { formatNumber } from '../utils/dateUtils';
+import { LoadingSpinner, ErrorMessage } from './ui/Feedback';
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -109,15 +110,7 @@ function StatCard({ label, value, accent }: { label: string; value: string | num
   );
 }
 
-function LoadingSpinner() {
-  return (
-    <div className="flex items-center justify-center py-12">
-      <div className="w-8 h-8 border-2 border-accent-primary border-t-transparent rounded-full animate-spin" />
-    </div>
-  );
-}
-
-function ErrorMessage({ message }: { message: string }) {
+: { message: string }) {
   return (
     <div className="bg-threat-critical/10 border border-threat-critical/30 rounded-lg p-4 text-threat-critical">
       ⚠️ {message}
diff --git a/frontend/src/components/analysis/CorrelationSummary.tsx b/frontend/src/components/analysis/CorrelationSummary.tsx
index ca1074b..ac0a86c 100644
--- a/frontend/src/components/analysis/CorrelationSummary.tsx
+++ b/frontend/src/components/analysis/CorrelationSummary.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { PREDEFINED_TAGS } from '../../utils/classifications';
 
 interface CorrelationIndicators {
   subnet_ips_count: number;
@@ -22,26 +23,6 @@ interface CorrelationSummaryProps {
   onClassify?: (label: string, tags: string[], comment: string, confidence: number) => void;
 }
 
-const PREDEFINED_TAGS = [
-  'scraping',
-  'bot-network',
-  'scanner',
-  'bruteforce',
-  'data-exfil',
-  'ddos',
-  'spam',
-  'proxy',
-  'tor',
-  'vpn',
-  'hosting-asn',
-  'distributed',
-  'ja4-rotation',
-  'ua-rotation',
-  'country-cn',
-  'country-us',
-  'country-ru',
-];
-
 export function CorrelationSummary({ ip, onClassify }: CorrelationSummaryProps) {
   const [data, setData] = useState<ClassificationRecommendation | null>(null);
   const [loading, setLoading] = useState(true);
diff --git a/frontend/src/components/analysis/JA4CorrelationSummary.tsx b/frontend/src/components/analysis/JA4CorrelationSummary.tsx
index 5b7fdca..349c678 100644
--- a/frontend/src/components/analysis/JA4CorrelationSummary.tsx
+++ b/frontend/src/components/analysis/JA4CorrelationSummary.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { PREDEFINED_TAGS_JA4 } from '../../utils/classifications';
 
 interface CorrelationIndicators {
   subnet_ips_count: number;
@@ -22,29 +23,6 @@ interface JA4CorrelationSummaryProps {
   onClassify?: (label: string, tags: string[], comment: string, confidence: number) => void;
 }
 
-const PREDEFINED_TAGS = [
-  'scraping',
-  'bot-network',
-  'scanner',
-  'bruteforce',
-  'data-exfil',
-  'ddos',
-  'spam',
-  'proxy',
-  'tor',
-  'vpn',
-  'hosting-asn',
-  'distributed',
-  'ja4-rotation',
-  'ua-rotation',
-  'country-cn',
-  'country-us',
-  'country-ru',
-  'known-bot',
-  'crawler',
-  'search-engine',
-];
-
 export function JA4CorrelationSummary({ ja4, onClassify }: JA4CorrelationSummaryProps) {
   const [data, setData] = useState<JA4ClassificationRecommendation | null>(null);
   const [loading, setLoading] = useState(true);
@@ -309,7 +287,7 @@ export function JA4CorrelationSummary({ ja4, onClassify }: JA4CorrelationSummary
         <div className="mb-6">
           <div className="text-sm text-text-secondary mb-3">Tags</div>
           <div className="flex flex-wrap gap-2">
-            {PREDEFINED_TAGS.map(tag => (
+            {PREDEFINED_TAGS_JA4.map(tag => (
               <button
                 key={tag}
                 onClick={() => toggleTag(tag)}
diff --git a/frontend/src/utils/classifications.ts b/frontend/src/utils/classifications.ts
new file mode 100644
index 0000000..85ffe6d
--- /dev/null
+++ b/frontend/src/utils/classifications.ts
@@ -0,0 +1,36 @@
+/**
+ * Tags prédéfinis pour la classification SOC.
+ *
+ * Utilisé par BulkClassification, CorrelationSummary, JA4CorrelationSummary.
+ * Ajouter de nouveaux tags ici pour les propager partout.
+ */
+export const PREDEFINED_TAGS: readonly string[] = [
+  'scraping',
+  'bot-network',
+  'scanner',
+  'bruteforce',
+  'data-exfil',
+  'ddos',
+  'spam',
+  'proxy',
+  'tor',
+  'vpn',
+  'hosting-asn',
+  'distributed',
+  'ja4-rotation',
+  'ua-rotation',
+  'country-cn',
+  'country-us',
+  'country-ru',
+];
+
+/**
+ * Tags supplémentaires spécifiques aux fingerprints JA4.
+ * S'étend de PREDEFINED_TAGS.
+ */
+export const PREDEFINED_TAGS_JA4: readonly string[] = [
+  ...PREDEFINED_TAGS,
+  'known-bot',
+  'crawler',
+  'search-engine',
+];