diff --git a/pwa/app/components/molecules/RegionSelector.tsx b/pwa/app/components/molecules/RegionSelector.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..71862c9c0e523e7cf814b3cb8b6f502ce6b1a588
--- /dev/null
+++ b/pwa/app/components/molecules/RegionSelector.tsx
@@ -0,0 +1,47 @@
+'use client'
+
+interface RegionSelectorProps {
+    regions: string[]
+    selectedRegions: string[]
+    onSelectionChange: (regions: string[]) => void
+}
+
+export default function RegionSelector({ regions, selectedRegions, onSelectionChange }: RegionSelectorProps) {
+    const toggleRegion = (region: string) => {
+        const newSelection = selectedRegions.includes(region) ? selectedRegions.filter(r => r !== region) : [...selectedRegions, region]
+        onSelectionChange(newSelection)
+    }
+
+    if (regions.length === 0) return null
+
+    return (
+        <div className="flex flex-col gap-2">
+            <label className="text-xs text-[#b0afaf] uppercase">Régions {selectedRegions.length > 0 && `(${selectedRegions.length})`}</label>
+            <div className="flex flex-wrap gap-2">
+                <button
+                    onClick={() => onSelectionChange(regions)}
+                    className="text-xs px-3 py-1 rounded-full border border-[#3a3f44] text-[#b0afaf] hover:text-white transition-colors"
+                >
+                    Tous
+                </button>
+                <button
+                    onClick={() => onSelectionChange([])}
+                    className="text-xs px-3 py-1 rounded-full border border-[#3a3f44] text-[#b0afaf] hover:text-white transition-colors"
+                >
+                    Aucun
+                </button>
+                {regions.map(region => (
+                    <button
+                        key={region}
+                        onClick={() => toggleRegion(region)}
+                        className={`text-xs px-3 py-1 rounded-full border transition-colors ${
+                            selectedRegions.includes(region) ? 'bg-[#8884d8] border-[#8884d8] text-white' : 'border-[#3a3f44] text-[#b0afaf] hover:text-white'
+                        }`}
+                    >
+                        {region}
+                    </button>
+                ))}
+            </div>
+        </div>
+    )
+}
diff --git a/pwa/app/components/organisms/Dashboard.tsx b/pwa/app/components/organisms/Dashboard.tsx
index 84656879cc18abbe2fff507b05472bd26f6f75eb..6bf2c1ef0a0cab241588b31c3bad72a58813f1c7 100644
--- a/pwa/app/components/organisms/Dashboard.tsx
+++ b/pwa/app/components/organisms/Dashboard.tsx
@@ -11,8 +11,6 @@ interface DashboardProps {
     regions: string[]
 }
 
-const tabKeys = ['temporal', 'points', 'diagram'] as const
-
 export default function Dashboard({ regions }: DashboardProps) {
     const [activeTab, setActiveTab] = useState<TabKey>('temporal')
     const [sidebarOpen, setSidebarOpen] = useState(false)
@@ -20,19 +18,14 @@ export default function Dashboard({ regions }: DashboardProps) {
     return (
         <main className="flex h-screen relative">
             <Sidebar activeTab={activeTab} onTabChange={setActiveTab} open={sidebarOpen} />
-            {sidebarOpen && (
-                <div
-                    className="fixed inset-0 bg-black/50 z-10 md:hidden"
-                    onClick={() => setSidebarOpen(false)}
-                />
-            )}
+            {sidebarOpen && <div className="fixed inset-0 bg-black/50 z-10 md:hidden" onClick={() => setSidebarOpen(false)} />}
 
             <div className="w-full flex flex-col min-w-0">
                 <Header onToggleSidebar={() => setSidebarOpen(prev => !prev)} />
                 <div className="w-full flex-1 bg-[#181C1F] overflow-auto">
                     {activeTab === 'temporal' && <Temporal regions={regions} />}
                     {activeTab === 'points' && <Points />}
-                    {activeTab === 'diagram' && <Diagram />}
+                    {activeTab === 'diagram' && <Diagram regions={regions} />}
                 </div>
             </div>
         </main>
diff --git a/pwa/app/components/tabs/diagram.tsx b/pwa/app/components/tabs/diagram.tsx
index c9df2e01c20bdb5663ef46c64bdf11df03aae6e7..7485ff3d9d05243aa4cfe9ccd9458319d096902e 100644
--- a/pwa/app/components/tabs/diagram.tsx
+++ b/pwa/app/components/tabs/diagram.tsx
@@ -1,120 +1,163 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { Doughnut } from 'react-chartjs-2'
-import { Chart as ChartJS, ArcElement, Tooltip, Legend, TooltipItem } from 'chart.js'
-import ChartDataLabels from 'chartjs-plugin-datalabels'
+import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from 'recharts'
 import { TAX_TYPES, YEARS, COLORS } from '../../constants'
-import { getRegionDistribution, prepareChartData, RegionDistribution } from '../../services/diagram.services'
+import { getRegionDistribution, RegionDistribution } from '../../services/diagram.services'
 import ErrorDiv from '../molecules/ErrorDiv'
+import RegionSelector from '../molecules/RegionSelector'
 
-ChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels)
+interface DiagramProps {
+    regions: string[]
+}
 
-export default function Diagram() {
-    const [taxType, setTaxType] = useState('th')
-    const [year, setYear] = useState(2019)
-    const [topCount, setTopCount] = useState(9)
+export default function Diagram({ regions }: DiagramProps) {
+    const [taxType, setTaxType] = useState('')
+    const [year, setYear] = useState<number | null>(null)
     const [data, setData] = useState<RegionDistribution[]>([])
-    const [maxRegions, setMaxRegions] = useState(20)
+    const [rawData, setRawData] = useState<RegionDistribution[]>([]) // Store fetched data
     const [loading, setLoading] = useState(false)
     const [error, setError] = useState<string | null>(null)
+    // Regions currently selected for display (all selected by default)
+    const [selectedRegions, setSelectedRegions] = useState<string[]>([])
+    const [isInitialized, setIsInitialized] = useState(false)
 
-    // Load number of regions on mount
+    // Initialize selectedRegions with all regions on first render
     useEffect(() => {
-        const loadMaxRegions = async () => {
+        if (!isInitialized && regions.length > 0) {
+            setSelectedRegions(regions)
+            setIsInitialized(true)
+        }
+    }, [regions, isInitialized])
+
+    // Fetch data only when tax type or year changes
+    useEffect(() => {
+        const fetchData = async () => {
+            if (!taxType || !year) {
+                setRawData([])
+                setData([])
+                return
+            }
+            setLoading(true)
+            setError(null)
             try {
                 const result = await getRegionDistribution(taxType, year)
-                setMaxRegions(result.length)
-            } catch {
-                // Keep default value on error
+                setRawData(result)
+            } catch (e) {
+                setRawData([])
+                setData([])
+                setError(e instanceof Error ? e.message : 'Une erreur est survenue')
+            } finally {
+                setLoading(false)
             }
         }
-        loadMaxRegions()
+
+        fetchData()
     }, [taxType, year])
 
-    const handleSubmit = async () => {
-        setLoading(true)
-        setError(null)
-        try {
-            const result = await getRegionDistribution(taxType, year)
-            setMaxRegions(result.length)
-            const chartData = prepareChartData(result, topCount)
-            setData(chartData)
-        } catch (e) {
+    // Filter and process data when selectedRegions or rawData changes
+    useEffect(() => {
+        if (rawData.length === 0 || selectedRegions.length === 0) {
             setData([])
-            setError(e instanceof Error ? e.message : 'Une erreur est survenue')
-        } finally {
-            setLoading(false)
+            return
         }
-    }
 
-    const chartConfig = {
-        labels: data.map(d => d.region),
-        datasets: [
-            {
-                data: data.map(d => d.total_amount),
-                backgroundColor: COLORS,
-                borderColor: '#1a1d21',
-                borderWidth: 2,
-            },
-        ],
+        // Calculate total for percentages
+        const totalAmount = rawData.reduce((sum, item) => sum + item.total_amount, 0)
+
+        // Separate selected and non-selected regions
+        const selected = rawData.filter(r => selectedRegions.includes(r.region))
+        const notSelected = rawData.filter(r => !selectedRegions.includes(r.region))
+
+        // Filter selected regions: keep only those >= 0.5%, others go to "Autres"
+        const significantRegions: RegionDistribution[] = []
+        const smallRegions: RegionDistribution[] = []
+
+        selected.forEach(item => {
+            const percentage = totalAmount > 0 ? (item.total_amount / totalAmount) * 100 : 0
+            if (percentage >= 0.5) {
+                significantRegions.push({
+                    region: item.region,
+                    total_amount: item.total_amount,
+                    percentage: percentage,
+                })
+            } else {
+                smallRegions.push(item)
+            }
+        })
+
+        // Combine small selected regions with non-selected regions for "Autres"
+        const othersRegions = [...smallRegions, ...notSelected]
+
+        // Add "Autres" if there are regions to group
+        if (othersRegions.length > 0) {
+            const othersTotal = othersRegions.reduce((sum, item) => sum + item.total_amount, 0)
+            const othersPercentage = totalAmount > 0 ? (othersTotal / totalAmount) * 100 : 0
+            significantRegions.push({
+                region: 'Autres',
+                total_amount: othersTotal,
+                percentage: othersPercentage,
+                otherRegionsSmall: smallRegions.map(item => ({
+                    name: item.region,
+                    percentage: totalAmount > 0 ? (item.total_amount / totalAmount) * 100 : 0,
+                })),
+                otherRegionsNotSelected: notSelected.map(item => ({
+                    name: item.region,
+                    percentage: totalAmount > 0 ? (item.total_amount / totalAmount) * 100 : 0,
+                })),
+            })
+        }
+
+        setData(significantRegions)
+    }, [rawData, selectedRegions])
+
+    // Custom label to display percentage on slices
+    const renderLabel = (props: { payload?: RegionDistribution; percent?: number }) => {
+        const entry = props.payload
+        if (!entry || !entry.percentage || entry.percentage < 3) return ''
+        return `${entry.percentage.toFixed(1)}%`
     }
 
-    const chartOptions = {
-        responsive: true,
-        maintainAspectRatio: true,
-        aspectRatio: 1.5,
-        plugins: {
-            legend: {
-                position: 'right' as const,
-                labels: {
-                    color: '#b0afaf',
-                    padding: 25,
-                    font: { size: 18 },
-                    boxWidth: 30,
-                    boxHeight: 30,
-                },
-            },
-            tooltip: {
-                backgroundColor: '#212529',
-                borderColor: '#3a3f44',
-                borderWidth: 1,
-                titleFont: { size: 18 },
-                bodyFont: { size: 16 },
-                padding: 12,
-                callbacks: {
-                    label: (ctx: TooltipItem<'doughnut'>) => {
-                        const region = data[ctx.dataIndex]
-                        if (!region) return ''
-                        const amount = region.total_amount ? (region.total_amount / 1_000_000).toFixed(2) : '0.00'
-                        const percentage = region.percentage ? region.percentage.toFixed(2) : '0.00'
-                        
-                        const lines = [`${region.region}`, `Volume: ${amount} M€`, `Part: ${percentage}%`]
-                        
-                        // If it's "Others", add the list of regions
-                        if (region.region === 'Autres' && region.otherRegions) {
-                            lines.push('', 'Régions incluses:')
-                            region.otherRegions.forEach((r: string) => lines.push(`  • ${r}`))
-                        }
-                        
-                        return lines
-                    },
-                },
-            },
-            datalabels: {
-                color: '#fff',
-                font: {
-                    weight: 'bold' as const,
-                    size: 24,
-                },
-                formatter: (_value: unknown, ctx: { dataIndex: number }) => {
-                    const region = data[ctx.dataIndex]
-                    if (!region || !region.percentage) return ''
-                    // Only display percentage if greater than 3%
-                    return region.percentage >= 3 ? `${region.percentage.toFixed(1)}%` : ''
-                },
-            },
-        },
+    // Custom tooltip
+    const CustomTooltip = ({ active, payload }: { active?: boolean; payload?: { payload: RegionDistribution }[] }) => {
+        if (active && payload && payload.length && payload[0]) {
+            const region = payload[0].payload
+            const amount = region.total_amount ? (region.total_amount / 1_000_000).toFixed(2) : '0.00'
+            const percentage = region.percentage ? region.percentage.toFixed(2) : '0.00'
+
+            return (
+                <div className="bg-[#212529] border border-[#3a3f44] rounded-lg p-3 text-white">
+                    <p className="font-semibold text-lg mb-2">{region.region}</p>
+                    <p className="text-base">Volume: {amount} M€</p>
+                    <p className="text-base">Part: {percentage}%</p>
+                    {region.region === 'Autres' && (
+                        <>
+                            {region.otherRegionsSmall && region.otherRegionsSmall.length > 0 && (
+                                <>
+                                    <p className="mt-3 font-semibold">Régions sélectionnées (&lt; 0.5%):</p>
+                                    {region.otherRegionsSmall.map((r: { name: string; percentage: number }) => (
+                                        <p key={`small-${r.name}`} className="text-sm ml-2">
+                                            • {r.name} ({r.percentage < 0.01 ? '<0.01%' : `${r.percentage.toFixed(2)}%`})
+                                        </p>
+                                    ))}
+                                </>
+                            )}
+                            {region.otherRegionsNotSelected && region.otherRegionsNotSelected.length > 0 && (
+                                <>
+                                    <p className="mt-3 font-semibold">Régions non sélectionnées:</p>
+                                    {region.otherRegionsNotSelected.map((r: { name: string; percentage: number }) => (
+                                        <p key={`notsel-${r.name}`} className="text-sm ml-2">
+                                            • {r.name} ({r.percentage < 0.01 ? '<0.01%' : `${r.percentage.toFixed(2)}%`})
+                                        </p>
+                                    ))}
+                                </>
+                            )}
+                        </>
+                    )}
+                </div>
+            )
+        }
+        return null
     }
 
     return (
@@ -129,6 +172,7 @@ export default function Diagram() {
                         onChange={e => setTaxType(e.target.value)}
                         className="bg-[#212529] border border-[#3a3f44] rounded px-3 py-1.5 text-white text-sm"
                     >
+                        <option value="">-- Sélectionnez --</option>
                         {TAX_TYPES.map(t => (
                             <option key={t} value={t}>
                                 {t.toUpperCase()}
@@ -140,10 +184,11 @@ export default function Diagram() {
                 <div className="flex flex-col gap-1">
                     <label className="text-xs text-[#b0afaf] uppercase">Année</label>
                     <select
-                        value={year}
-                        onChange={e => setYear(Number(e.target.value))}
+                        value={year ?? ''}
+                        onChange={e => setYear(e.target.value ? Number(e.target.value) : null)}
                         className="bg-[#212529] border border-[#3a3f44] rounded px-3 py-1.5 text-white text-sm"
                     >
+                        <option value="">-- Sélectionnez --</option>
                         {YEARS.map(y => (
                             <option key={y} value={y}>
                                 {y}
@@ -151,38 +196,56 @@ export default function Diagram() {
                         ))}
                     </select>
                 </div>
-
-                <div className="flex flex-col gap-1">
-                    <label className="text-xs text-[#b0afaf] uppercase">Nombre de régions</label>
-                    <select
-                        value={topCount}
-                        onChange={e => setTopCount(Number(e.target.value))}
-                        className="bg-[#212529] border border-[#3a3f44] rounded px-3 py-1.5 text-white text-sm"
-                    >
-                        {Array.from({ length: maxRegions - 4 }, (_, i) => i + 5).map(n => (
-                            <option key={n} value={n}>
-                                {n}
-                            </option>
-                        ))}
-                    </select>
-                </div>
-
-                <button
-                    onClick={handleSubmit}
-                    disabled={loading}
-                    className="bg-[#8884d8] hover:bg-[#7773c7] disabled:opacity-50 text-white text-sm px-4 py-1.5 rounded transition-colors"
-                >
-                    {loading ? 'Chargement...' : 'Afficher'}
-                </button>
             </div>
 
+            <RegionSelector regions={regions} selectedRegions={selectedRegions} onSelectionChange={setSelectedRegions} />
+
             {error && <ErrorDiv message={error} />}
 
-            {!error && data.length > 0 && (
+            {loading && !error && (
+                <div className="text-center text-[#b0afaf] py-8">
+                    <div className="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-[#8884d8]"></div>
+                    <p className="mt-2">Chargement des données...</p>
+                </div>
+            )}
+
+            {!error && !loading && data.length > 0 && (
                 <div className="w-full">
-                    <div className="w-full" style={{ height: '900px' }}>
-                        <Doughnut data={chartConfig} options={chartOptions} />
-                    </div>
+                    <ResponsiveContainer width="100%" height={950}>
+                        <PieChart>
+                            <Pie
+                                data={data}
+                                dataKey="total_amount"
+                                nameKey="region"
+                                cx="45%"
+                                cy="50%"
+                                innerRadius="45%"
+                                outerRadius="70%"
+                                label={renderLabel}
+                                labelLine={false}
+                                stroke="#1a1d21"
+                                strokeWidth={2}
+                            >
+                                {data.map((entry, index) => (
+                                    <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                                ))}
+                            </Pie>
+                            <Tooltip content={<CustomTooltip />} />
+                            <Legend
+                                verticalAlign="middle"
+                                align="right"
+                                layout="vertical"
+                                iconType="circle"
+                                iconSize={30}
+                                wrapperStyle={{
+                                    paddingLeft: '40px',
+                                    fontSize: '18px',
+                                    lineHeight: '2.5',
+                                }}
+                                formatter={(value: string) => <span style={{ color: '#b0afaf', fontSize: '18px' }}>{value}</span>}
+                            />
+                        </PieChart>
+                    </ResponsiveContainer>
                 </div>
             )}
         </div>
diff --git a/pwa/app/components/tabs/temporal.tsx b/pwa/app/components/tabs/temporal.tsx
index 60befb89ee9e24dde7835f52fe9471fe518b18f6..e3a444222b9a1c7aa95858a4ace66bb61fd8ead8 100644
--- a/pwa/app/components/tabs/temporal.tsx
+++ b/pwa/app/components/tabs/temporal.tsx
@@ -5,6 +5,7 @@ import { LineChart, Line, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer, Ca
 import { getTimeSeries, type TimeSeriesData } from '../../services/temporal.services'
 import { TAX_TYPES, YEARS, COLORS } from '../../constants'
 import ErrorDiv from '../molecules/ErrorDiv'
+import RegionSelector from '../molecules/RegionSelector'
 import Loader from '../molecules/Loader'
 
 interface TemporalProps {
@@ -27,11 +28,6 @@ export default function Temporal({ regions }: TemporalProps) {
     // Regions currently selected for display (initialized from SSR props)
     const [selectedRegions, setSelectedRegions] = useState<string[]>(regions)
 
-    // Toggles a region on/off in the selection
-    const toggleRegion = (region: string) => {
-        setSelectedRegions(prev => (prev.includes(region) ? prev.filter(r => r !== region) : [...prev, region]))
-    }
-
     // Fetches time series data from API for all regions with selected tax type and year range
     const handleSubmit = async () => {
         setLoading(true)
@@ -121,38 +117,7 @@ export default function Temporal({ regions }: TemporalProps) {
                 </button>
             </div>
 
-            {regions.length > 0 && (
-                <div className="flex flex-col gap-2">
-                    <label className="text-xs text-[#b0afaf] uppercase">Régions {selectedRegions.length > 0 && `(${selectedRegions.length})`}</label>
-                    <div className="flex flex-wrap gap-2">
-                        <button
-                            onClick={() => setSelectedRegions(regions)}
-                            className="text-xs px-3 py-1 rounded-full border border-[#3a3f44] text-[#b0afaf] hover:text-white transition-colors"
-                        >
-                            Tous
-                        </button>
-                        <button
-                            onClick={() => setSelectedRegions([])}
-                            className="text-xs px-3 py-1 rounded-full border border-[#3a3f44] text-[#b0afaf] hover:text-white transition-colors"
-                        >
-                            Aucun
-                        </button>
-                        {regions.map(region => (
-                            <button
-                                key={region}
-                                onClick={() => toggleRegion(region)}
-                                className={`text-xs px-3 py-1 rounded-full border transition-colors ${
-                                    selectedRegions.includes(region)
-                                        ? 'bg-[#8884d8] border-[#8884d8] text-white'
-                                        : 'border-[#3a3f44] text-[#b0afaf] hover:text-white'
-                                }`}
-                            >
-                                {region}
-                            </button>
-                        ))}
-                    </div>
-                </div>
-            )}
+            <RegionSelector regions={regions} selectedRegions={selectedRegions} onSelectionChange={setSelectedRegions} />
 
             {loading && <Loader />}
 
diff --git a/pwa/app/services/diagram.services.ts b/pwa/app/services/diagram.services.ts
index 841506e679c71a5bc421c1291f5fb292183dfe65..a1661e5679cd9fd5e301d2d9a729a93f62c8424f 100644
--- a/pwa/app/services/diagram.services.ts
+++ b/pwa/app/services/diagram.services.ts
@@ -3,6 +3,8 @@ export interface RegionDistribution {
     total_amount: number
     percentage: number
     otherRegions?: string[]
+    otherRegionsSmall?: Array<{ name: string; percentage: number }> // Selected regions < 0.5%
+    otherRegionsNotSelected?: Array<{ name: string; percentage: number }> // Not selected regions
 }
 
 export async function getRegionDistribution(taxType: string, year: number): Promise<RegionDistribution[]> {