diff --git a/nupes-elections-front/src/App.js b/nupes-elections-front/src/App.js
index f5c3c61..3de72b6 100644
--- a/nupes-elections-front/src/App.js
+++ b/nupes-elections-front/src/App.js
@@ -1,8 +1,9 @@
 import {createBrowserRouter, RouterProvider} from "react-router-dom"
 
 import './App.css'
-import ElectionsLegislatives2022 from "./ElectionsLegislatives2022"
+import ElectionsLegislatives2022 from './ElectionsLegislatives2022'
 import ElectionsEuropeennes2024 from './ElectionsEuropeennes2024'
+import ElectionsLegislatives2024 from './ElectionsLegislatives2024'
 
 function App() {
   const router = createBrowserRouter([
@@ -26,14 +27,14 @@ function App() {
       path: "/elections/europeennes/2024/:typeResultats/:zoneId/",
       element: <ElectionsEuropeennes2024 />
     },
-    // {
-    //   path: "/elections/legislatives/2024/:typeResultats/",
-    //   element: <ElectionsLegislatives2024 />,
-    // },
-    // {
-    //   path: "/elections/legislatives/2024/:typeResultats/:zoneId/",
-    //   element: <ElectionsLegislatives2024 />
-    // },
+    {
+      path: "/elections/legislatives/2024/:typeResultats/",
+      element: <ElectionsLegislatives2024 />,
+    },
+    {
+      path: "/elections/legislatives/2024/:typeResultats/:zoneId/",
+      element: <ElectionsLegislatives2024 />
+    },
   ])
 
   return <>
diff --git a/nupes-elections-front/src/ElectionsLegislatives2024.js b/nupes-elections-front/src/ElectionsLegislatives2024.js
new file mode 100644
index 0000000..d5a335e
--- /dev/null
+++ b/nupes-elections-front/src/ElectionsLegislatives2024.js
@@ -0,0 +1,148 @@
+import {useParams} from "react-router-dom"
+import {AppBar, Container, Toolbar} from "@mui/material"
+import * as Highcharts from 'highcharts'
+import highchartsItem from 'highcharts/modules/item-series'
+import {useEffect, useMemo, useState} from "react"
+import {
+  SelectionAffichage,
+  TableauParticipation,
+  CarteResultats,
+  HistogrammeVoix, GroupementParBloc, SelectionTour
+} from "./includes/composants_elections"
+import {getNomZone, regrouperVoix} from "./utils"
+import 'leaflet/dist/leaflet.css'
+import {
+  TableauResultatsCandidatsLegislatives,
+  TableauResultatsNuancesLegislatives
+} from "./includes/composants_elections_legislatives"
+
+
+highchartsItem(Highcharts)
+
+export default function ElectionsLegislatives2024() {
+  const {typeResultats, zoneId} = useParams()
+
+  const [grouperParBloc, setGrouperParBloc] = useState(false)
+  const [tour, setTour] = useState(1)
+  const [blocs, setBlocs] = useState([])
+  const [candidats, setCandidats] = useState([])
+  const [nuances, setNuances] = useState([])
+  const [resultats, setResultats] = useState([])
+  const [typeSousZone, setTypeSousZone] = useState("region")
+
+  useEffect(() => {
+    fetch("/data/resultats/legislatives/2024/blocs.json").then(response => response.json())
+      .then(data => setBlocs(data))
+    fetch("/data/resultats/legislatives/2024/nuances.json").then(response => response.json())
+      .then(data => setNuances(data))
+
+    if (typeResultats === "france") {
+      fetch("/data/resultats/legislatives/2024/france.json").then(response => response.json())
+        .then(data => setResultats(data))
+    }
+    else {
+      fetch(`/data/resultats/legislatives/2024/${typeResultats}/${zoneId}.json`)
+        .then(response => response.json())
+        .then(data => setResultats(data))
+    }
+  }, [typeResultats, zoneId])
+
+  const zoneInfo = useMemo(() => resultats?.zone ?? {}, [resultats])
+  const nomZone = useMemo(() => getNomZone(typeResultats, zoneInfo), [typeResultats, zoneInfo])
+
+  useEffect(() => {
+    let circonscription = ""
+
+    if (typeResultats === "circonscription")
+      circonscription = zoneId
+    else if (typeResultats === "bureau_vote")
+      circonscription = zoneInfo?.circonscription ?? ""
+    else {
+      setCandidats(nuances)
+    }
+
+    if (!circonscription)
+      return
+
+    fetch(`/data/resultats/legislatives/2024/candidats/${circonscription}.json`)
+      .then(response => response.json())
+      .then(data => setCandidats(data))
+  }, [typeResultats, zoneId, zoneInfo, nuances])
+
+  const donnees = useMemo(() => {
+    if (tour === 1)
+      return resultats?.tour1 ?? {}
+    else if (tour === 2)
+      return resultats?.tour2 ?? {}
+    else
+      return {}
+  }, [resultats, tour])
+
+  const dejaGroupeParNuance = typeResultats !== "circonscription" && typeResultats !== "bureau_vote"
+  const [voixParBloc, voixParNuance] = regrouperVoix(donnees.voix, candidats, blocs, nuances,
+    dejaGroupeParNuance)
+
+  const candidatKey = typeSousZone === "circonscription" || typeSousZone === "bureau_vote" ? "numero" : "code"
+
+  const [categoriesHistogramme, valeursHistogramme, couleursHistogramme] = useMemo(() => {
+    if (grouperParBloc) {
+      const categories = {}
+      const couleurs = {}
+      for (let bloc of blocs) {
+        categories[bloc.nom] = bloc.nom
+        couleurs[bloc.nom] = bloc.couleur
+      }
+      return [categories, voixParBloc, couleurs]
+    }
+    else {
+      if (typeResultats === "circonscription" || typeResultats === "bureau_vote") {
+        // On affiche les noms des candidat⋅es
+        const categories = {}
+        const couleurs = {}
+        for (let candidat of candidats) {
+          categories[candidat.numero] = `${candidat.prenom} ${candidat.nom} (${candidat.nuance})`
+          couleurs[candidat.numero] = nuances.filter(nuance => nuance.code === candidat.nuance)[0]?.couleur
+        }
+        return [categories, donnees.voix, couleurs]
+      }
+      else {
+        // On affiche les nuances
+        const categories = {}
+        const couleurs = {}
+        for (let nuance of nuances) {
+          categories[nuance.code] = nuance.nom
+          couleurs[nuance.code] = nuance.couleur
+        }
+        return [categories, voixParNuance, couleurs]
+
+      }
+    }
+  }, [typeResultats, candidats, nuances, blocs, donnees, voixParNuance, voixParBloc, grouperParBloc])
+
+  const tableauResultats = useMemo(() => {
+    if (typeResultats === "circonscription" || typeResultats === "bureau_vote")
+      return <TableauResultatsCandidatsLegislatives candidats={candidats} blocs={blocs} nuances={nuances} donnees_t1={resultats.tour1} donnees_t2={resultats.tour2} />
+    else
+      return <TableauResultatsNuancesLegislatives blocs={blocs} nuances={nuances} donnees={donnees} />
+  }, [typeResultats, candidats, blocs, nuances, donnees])
+
+  return <>
+    <AppBar position="sticky">
+      <Toolbar>
+        <GroupementParBloc grouperParBloc={grouperParBloc} setGrouperParBloc={setGrouperParBloc} />
+        <SelectionAffichage typeResultats={typeResultats} typeSousZone={typeSousZone} setTypeSousZone={setTypeSousZone} />
+        <SelectionTour tour={tour} setTour={setTour} />
+      </Toolbar>
+    </AppBar>
+    <Container>
+      <HistogrammeVoix titre={`Résultats des élections législatives 2024 : ${nomZone}`}
+                       nomCategories={categoriesHistogramme} valeurParCategorie={valeursHistogramme}
+                       totalExprimes={donnees.exprimes} couleurParCategorie={couleursHistogramme} />
+      {tableauResultats}
+      <TableauParticipation donnees_t1={resultats.tour1 ?? {}} donnees_t2={resultats.tour2 ?? {}} />
+      <CarteResultats typeElection={"legislatives"} anneeElection={"2024"} typeResultats={typeResultats} zoneInfo={zoneInfo}
+                      typeSousZone={typeSousZone} candidats={candidats} blocs={blocs} nuances={nuances} tour={tour}
+                      grouperParBloc={grouperParBloc} candidatKey={candidatKey} />
+    </Container>
+  </>
+}