diff --git a/src/main/java/com/example/exammen/Controller/RestController.java b/src/main/java/com/example/exammen/Controller/RestController.java
index 9b6d5af..0466ea8 100644
--- a/src/main/java/com/example/exammen/Controller/RestController.java
+++ b/src/main/java/com/example/exammen/Controller/RestController.java
@@ -11,6 +11,7 @@
 
 import java.lang.reflect.Array;
 import java.math.BigDecimal;
+import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 
@@ -76,10 +77,9 @@ public double calculateCorrelation() {
         return i.calculateCorrelation(circonfData, ageData);
     }
     @GetMapping("/arbres-density")
-    public String calculateArbresDensityByQuartier(Model model) {
-        Map<String, Double> quartierDensityMap = i.calculateArbresDensityByQuartier();
-        model.addAttribute("quartierDensityMap", quartierDensityMap);
-        return "arbresd"; // Ceci correspondra au nom du fichier HTML (arbres-density.html)
+    public ResponseEntity<Map<String, Double>> getArbresDensityByArrondissement() {
+        Map<String, Double> densityMap = i.calculateArbresDensityByQuartier();
+        return ResponseEntity.ok(densityMap);
     }
 
     @PostMapping("/ajouter")
@@ -98,4 +98,22 @@ public String distributionEspeces(Model model) {
         model.addAttribute("especesCount", especesCount);
         return "dis"; // Nom de la vue HTML
     }
+
+    @GetMapping("/arbres-genres-photos")
+    @ResponseBody
+    public List<Arbres> getArbresGenresAndPhotos() {
+        return i.getAllGenresAndPhotos();
+    }
+
+    @GetMapping("/pie-chart")
+    public ResponseEntity<Map<String, Object>> generatePieChart() {
+        Map<String, Object> data = new HashMap<>();
+        List<String> genres = i.getAllGenres();
+        List<Long> counts = i.getCountByGenre();
+
+        data.put("genres", genres);
+        data.put("counts", counts);
+
+        return ResponseEntity.ok(data);
+    }
 }
diff --git a/src/main/java/com/example/exammen/Repository/ArbresRepository.java b/src/main/java/com/example/exammen/Repository/ArbresRepository.java
index c667e7c..e154fa0 100644
--- a/src/main/java/com/example/exammen/Repository/ArbresRepository.java
+++ b/src/main/java/com/example/exammen/Repository/ArbresRepository.java
@@ -10,9 +10,10 @@
 import java.util.List;
 
 @Repository
-public interface ArbresRepository  extends JpaRepository<Arbres,BigDecimal>{
+public interface ArbresRepository  extends JpaRepository<Arbres,BigDecimal> {
 
     List<Arbres> findByArbresDomanialite(String arbresDomanialite);
+
     List<Arbres> findByArbresDomanialiteContaining(String arbresDomanialite);
 
     @Query("SELECT a.arbresCirconferenceencm FROM Arbres a")
@@ -26,5 +27,5 @@ public interface ArbresRepository  extends JpaRepository<Arbres,BigDecimal>{
     List<Object[]> countArbresByEspece();
 
 
-
+    long countByArbresGenre(String genre);
 }
diff --git a/src/main/java/com/example/exammen/Service/IService.java b/src/main/java/com/example/exammen/Service/IService.java
index 74ced71..ba02541 100644
--- a/src/main/java/com/example/exammen/Service/IService.java
+++ b/src/main/java/com/example/exammen/Service/IService.java
@@ -19,4 +19,10 @@ public interface IService {
 
     void deleteArbreByArbresIdbase(BigDecimal arbresIdbase);
     public List<Object[]> countArbresByEspece();
+
+    public List<Arbres> getAllGenresAndPhotos();
+
+    public List<String> getAllGenres();
+    public List<Long> getCountByGenre();
+
 }
diff --git a/src/main/java/com/example/exammen/Service/ServiceImpl.java b/src/main/java/com/example/exammen/Service/ServiceImpl.java
index aaaa867..68313a0 100644
--- a/src/main/java/com/example/exammen/Service/ServiceImpl.java
+++ b/src/main/java/com/example/exammen/Service/ServiceImpl.java
@@ -12,6 +12,7 @@
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
+import java.util.stream.Collectors;
 
 @Service
 @AllArgsConstructor
@@ -96,4 +97,23 @@ public List<Object[]> countArbresByEspece() {
         return arbrerepo.countArbresByEspece();
     }
 
+    @Override
+    public List<Arbres> getAllGenresAndPhotos() {
+        return arbrerepo.findAll();
+    }
+
+    @Override
+    public List<String> getAllGenres() {
+        return getAllArbres().stream()
+                .map(Arbres::getArbresGenre)
+                .distinct()
+                .collect(Collectors.toList());
+    }
+
+    @Override
+    public List<Long> getCountByGenre() {
+        return getAllGenres().stream()
+                .map(genre -> arbrerepo.countByArbresGenre(genre))
+                .collect(Collectors.toList());
+    }
 }
diff --git a/src/main/resources/static/arbresd.html b/src/main/resources/static/arbresd.html
index 2edb027..49b94b1 100644
--- a/src/main/resources/static/arbresd.html
+++ b/src/main/resources/static/arbresd.html
@@ -29,7 +29,7 @@ <h1>Densité des Arbres par Quartier</h1>
           var canvas = document.getElementById("densityChart");
           var ctx = canvas.getContext("2d");
 
-          // Créez le graphique à barres en utilisant Chart.js
+
           var densityChart = new Chart(ctx, {
             type: 'bar', // Type de graphique : barres
             data: {
diff --git a/src/main/resources/static/densi.html b/src/main/resources/static/densi.html
new file mode 100644
index 0000000..411188d
--- /dev/null
+++ b/src/main/resources/static/densi.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>Densité des Arbres par Arrondissement</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+</head>
+<body>
+<h1>Densité des Arbres par Arrondissement</h1>
+
+<!-- Canvas pour le graphique à barres -->
+<canvas id="densityChart" width="400" height="200"></canvas>
+
+<script>
+  $(document).ready(function() {
+    $.ajax({
+      url: '/arbres-density', // Endpoint pour récupérer la densité des arbres par arrondissement
+      method: 'GET',
+      success: function(data) {
+        var arrondissements = Object.keys(data);
+        var densites = Object.values(data);
+
+        var ctx = document.getElementById("densityChart").getContext("2d");
+
+        var densityChart = new Chart(ctx, {
+          type: 'bar',
+          data: {
+            labels: arrondissements,
+            datasets: [{
+              label: 'Densité',
+              data: densites,
+              backgroundColor: 'rgba(75, 192, 192, 0.2)',
+              borderColor: 'rgba(75, 192, 192, 1)',
+              borderWidth: 1
+            }]
+          },
+          options: {
+            scales: {
+              y: {
+                beginAtZero: true,
+                title: {
+                  display: true,
+                  text: 'Densité'
+                }
+              },
+              x: {
+                title: {
+                  display: true,
+                  text: 'Arrondissement'
+                }
+              }
+            }
+          }
+        });
+      },
+      error: function() {
+        alert("Erreur lors du chargement des données de densité.");
+      }
+    });
+  });
+</script>
+</body>
+</html>
diff --git a/src/main/resources/static/genre.html b/src/main/resources/static/genre.html
new file mode 100644
index 0000000..9c0b70e
--- /dev/null
+++ b/src/main/resources/static/genre.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Genres d'arbres et photos</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f2f2f2;
+      margin: 0;
+      padding: 0;
+    }
+
+    h1 {
+      text-align: center;
+      margin-top: 20px;
+    }
+
+    table {
+      width: 80%;
+      margin: 0 auto;
+      border-collapse: collapse;
+      background-color: #fff;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+
+    th, td {
+      padding: 12px 15px;
+      text-align: left;
+    }
+
+    th {
+      background-color: #f2f2f2;
+      font-weight: bold;
+    }
+
+    tr:nth-child(even) {
+      background-color: #f5f5f5;
+    }
+
+    img {
+      max-width: 100px;
+      max-height: 100px;
+      display: block;
+      margin: 0 auto;
+    }
+  </style>
+</head>
+<body>
+<h1>Genres d'arbres et leurs photos</h1>
+<table>
+  <thead>
+  <tr>
+    <th>Genre d'arbre</th>
+    <th>Photo</th>
+  </tr>
+  </thead>
+  <tbody id="table-body">
+  <!-- Les données seront affichées ici -->
+  </tbody>
+</table>
+
+<script>
+  // Utilisation de JavaScript pour récupérer les données depuis le contrôleur
+  fetch("/arbres-genres-photos")
+          .then(response => response.json())
+          .then(data => {
+            const tableBody = document.getElementById("table-body");
+
+            data.forEach(arbre => {
+              const row = document.createElement("tr");
+              const genreCell = document.createElement("td");
+              const photoCell = document.createElement("td");
+              const img = document.createElement("img");
+
+              genreCell.textContent = arbre.arbresGenre;
+              img.src = arbre.comUrlPhoto1;
+              img.alt = "Photo de l'arbre";
+
+              photoCell.appendChild(img);
+
+              row.appendChild(genreCell);
+              row.appendChild(photoCell);
+
+              tableBody.appendChild(row);
+            });
+          })
+          .catch(error => {
+            console.error(error);
+          });
+</script>
+</body>
+</html>
diff --git a/src/main/resources/static/pie.html b/src/main/resources/static/pie.html
new file mode 100644
index 0000000..995fbf4
--- /dev/null
+++ b/src/main/resources/static/pie.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Pie Chart des Genres d'Arbres</title>
+  <!-- Inclure la bibliothèque Chart.js -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
+</head>
+<body>
+<h1>Pie Chart des Genres d'Arbres</h1>
+<div style="width: 80%; margin: 0 auto;">
+  <!-- Créer un élément canvas pour le graphique -->
+  <canvas id="pieChart"></canvas>
+</div>
+
+<!-- JavaScript pour créer la pie chart -->
+<script>
+  // Récupération des données depuis le contrôleur
+  fetch("/pie-chart")
+          .then(response => response.json())
+          .then(data => {
+            const genres = data.genres;
+            const counts = data.counts;
+
+            // Création de la pie chart
+            const ctx = document.getElementById('pieChart').getContext('2d');
+            const pieChart = new Chart(ctx, {
+              type: 'pie',
+              data: {
+                labels: genres, // Labels des genres
+                datasets: [{
+                  data: counts, // Données des genres
+                  backgroundColor: [
+                    'rgba(255, 99, 132, 0.7)',
+                    'rgba(54, 162, 235, 0.7)',
+                    'rgba(255, 206, 86, 0.7)',
+                    'rgba(75, 192, 192, 0.7)',
+                    'rgba(153, 102, 255, 0.7)',
+                    'rgba(255, 159, 64, 0.7)',
+                    'rgba(255, 99, 132, 0.7)',
+                  ],
+                  borderColor: [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)',
+                    'rgba(153, 102, 255, 1)',
+                    'rgba(255, 159, 64, 1)',
+                    'rgba(255, 99, 132, 1)',
+                  ],
+                  borderWidth: 1,
+                }],
+              },
+            });
+          })
+          .catch(error => {
+            console.error(error);
+          });
+</script>
+</body>
+</html>