diff --git a/api/src/Dto/DonutChartOutput.php b/api/src/Dto/DonutChartOutput.php
new file mode 100644
index 0000000000000000000000000000000000000000..be27636396ef1a13175f14e8f4fc7aeb50e671a4
--- /dev/null
+++ b/api/src/Dto/DonutChartOutput.php
@@ -0,0 +1,15 @@
+<?php
+
+namespace App\Dto;
+
+class DonutChartOutput
+{
+    public string $region;
+    public int $occurrences;
+
+    public function __construct(string $region, int $occurrences)
+    {
+        $this->region = $region;
+        $this->occurrences = $occurrences;
+    }
+}
diff --git a/api/src/Service/SaleService.php b/api/src/Service/SaleService.php
index b37e15bbee3c102bd7b72c226afba68b5c886e20..3a39dffe798e2b11f230dcb1841f87933253ef71 100755
--- a/api/src/Service/SaleService.php
+++ b/api/src/Service/SaleService.php
@@ -5,6 +5,7 @@ namespace App\Service;
 use App\Dto\BarChartInput;
 use App\Dto\BarChartOutput;
 use App\Dto\MonthlyAveragePriceEvolution;
+use App\Dto\DonutChartOutput;
 use App\Entity\Sale;
 use Doctrine\ORM\EntityManagerInterface;
 use Doctrine\ORM\Query;
@@ -186,10 +187,10 @@ class SaleService
 
                 $data = [];
                 foreach ($result as $row) {
-                    $data[] = [
-                        'region' => $row['region'],
-                        'occurrences' => (int)$row['occurrences'],
-                    ];
+                    $data[] = new DonutChartOutput(
+                        $row['region'],
+                        (int)$row['occurrences'],
+                    );
                 }
 
                 $item->expiresAfter(600);
diff --git a/pwa/app/components/donut-chart/donut.jsx b/pwa/app/components/donut-chart/donut.jsx
index 3d01034da11f04d1efce387f88d45358438def36..3a64a4beec61467ad198317367551659d08cc283 100644
--- a/pwa/app/components/donut-chart/donut.jsx
+++ b/pwa/app/components/donut-chart/donut.jsx
@@ -78,9 +78,24 @@ export default function DonutChart({ data }) {
             .append("line")
             .attr("x1", d => labelArc.centroid(d)[0])
             .attr("y1", d => labelArc.centroid(d)[1])
-            .attr("x2", d => labelArc.centroid(d)[0] * 2)
-            .attr("y2", d => labelArc.centroid(d)[1] * 2)
-            .attr("stroke", "gray");
+            .attr("x2", d => labelArc.centroid(d)[0] * 1.5)
+            .attr("y2", d => labelArc.centroid(d)[1] * 1.42)
+            .attr("stroke", "gray")
+            .attr("stroke-width", 1)
+            .attr("marker-end", "url(#arrow)");
+
+        // Définition de la flèche
+        svg.append("defs")
+            .append("marker")
+            .attr("id", "arrow")
+            .attr("viewBox", "0 -5 10 10")
+            .attr("refX", 8)
+            .attr("refY", 0)
+            .attr("markerWidth", 8)
+            .attr("markerHeight", 8)
+            .attr("orient", "auto")
+            .append("path")
+            .attr("d", "M0,-5L10,0L0,5");
 
         svg.selectAll(".label-text")
             .data(pieData.filter(d => d.data.region !== "Autres"))
@@ -88,7 +103,7 @@ export default function DonutChart({ data }) {
             .append("text")
             .attr("transform", d => {
                 const [x, y] = labelArc.centroid(d);
-                return `translate(${x * 2}, ${y * 2})`;
+                return `translate(${x * 2}, ${y * 1.5})`;
             })
             .attr("text-anchor", "middle")
             .text(d => `${d.data.region}: ${((d.data.occurrences / totalOccurrences) * 100).toFixed(2)}%`);
diff --git a/pwa/app/components/timeseries/timeseries.jsx b/pwa/app/components/timeseries/timeseries.jsx
index c08b19a286b22269488ae8c8820b6bb3d0151565..c79b190b50060bf9c1d02e40e02735572d5e1a2b 100644
--- a/pwa/app/components/timeseries/timeseries.jsx
+++ b/pwa/app/components/timeseries/timeseries.jsx
@@ -32,10 +32,23 @@ function Timeseries({ data }) {
             .attr("transform", `translate(0,${height - marginBottom})`)
             .call(d3.axisBottom(x).ticks(d3.timeYear.every(1)).tickFormat(d3.timeFormat("%Y")));
 
+        svg.append("text")
+            .attr("transform", `translate(${width - 20},${height - 5})`)
+            .style("text-anchor", "end")
+            .text("Année");
+
         svg.append("g")
             .attr("transform", `translate(${marginLeft},0)`)
             .call(d3.axisLeft(y));
 
+        svg.append("text")
+            .attr("transform", "rotate(-90)")
+            .attr("y", 0 )
+            .attr("x", - 70 )
+            .attr("dy", "1em")
+            .style("text-anchor", "end")
+            .text("Prix moyen du mètre carré ");
+
         const line = d3.line()
             .x(d => x(new Date(d.year, d.month - 1)))
             .y(d => y(d.averagePrice));