diff --git a/components/AppBreadcrumb.vue b/components/AppBreadcrumb.vue
index 3764017..857533b 100644
--- a/components/AppBreadcrumb.vue
+++ b/components/AppBreadcrumb.vue
@@ -1,16 +1,20 @@
 <template>
-  <div class="flex flex-row gap-1 py-2 items-center text-gray-500 text-sm">
+  <div class="flex flex-row items-center gap-1 py-2 text-sm text-gray-500">
     <ULink to="/" class="xxx">
       <UIcon name="i-heroicons-home" size="sm" />
     </ULink>
     <UIcon name="i-heroicons-chevron-right" size="sm" />
-    <ULink v-for="link in props.links" :key="link.to" :to="link.to" class="text-sm">
+    <ULink
+      v-for="link in props.links"
+      :key="link.to"
+      :to="link.to"
+      class="text-sm"
+    >
       <span class="underline">{{ link.label }}</span>
     </ULink>
     <UIcon name="i-heroicons-chevron-right" size="sm" />
     <p class="truncate">{{ props.lastText }}</p>
   </div>
-
 </template>
 
 <script setup lang="ts">
diff --git a/components/AppFooter.vue b/components/AppFooter.vue
index 1a9f8cb..2df799a 100644
--- a/components/AppFooter.vue
+++ b/components/AppFooter.vue
@@ -1,50 +1,60 @@
 <script setup lang="ts">
 const currentYear = new Date().getFullYear();
-const version = "22-Aout";
+const version = "02-Sept";
 
 const links = [
   {
-    label: 'À Propos',
-    to: '/about/us',
+    label: "À Propos",
+    to: "/about/us",
   },
   {
-    label: 'Contact',
-    to: '/contact',
+    label: "Contact",
+    to: "/contact",
   },
   {
-    label: 'Newsletter',
-    to: '/newsletter',
+    label: "Newsletter",
+    to: "/newsletter",
   },
   {
-    label: 'Règles de confidentialité',
-    to: '/about/privacy',
-  }, {
-    label: 'Linkedin',
-    to: 'https://www.linkedin.com/company/vie-publique-sn',
+    label: "Règles de confidentialité",
+    to: "/about/privacy",
   },
   {
-    label: 'Twitter',
-    to: 'https://twitter.com/malick_yacine',
-  }
-]
-
+    label: "Linkedin",
+    to: "https://www.linkedin.com/company/vie-publique-sn",
+  },
+  {
+    label: "Twitter",
+    to: "https://twitter.com/malick_yacine",
+  },
+];
 </script>
 
 <template>
-  <div class="w-full h-px bg-gray-200 dark:bg-gray-800 flex items-center justify-center mt-5">
-    <div class="bg-transparent dark:bg-gray-900 px-4">
-    </div>
+  <div
+    class="mt-5 flex h-px w-full items-center justify-center bg-gray-200 dark:bg-gray-800"
+  >
+    <div class="bg-transparent px-4 dark:bg-gray-900"></div>
   </div>
 
-  <footer class="relative mx-auto sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3">
-    <ul class="flex flex-col md:flex-row items-center justify-center gap-4 lg:gap-6">
+  <footer
+    class="relative mx-auto py-8 sm:px-6 lg:flex lg:items-center lg:justify-between lg:gap-x-3 lg:px-8 lg:py-4"
+  >
+    <ul
+      class="flex flex-col items-center justify-center gap-4 md:flex-row lg:gap-6"
+    >
       <li class="relative">
-        <p class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
-          Version {{ version }}&copy;{{ currentYear }} </p>
+        <p
+          class="text-sm text-gray-500 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300"
+        >
+          Version {{ version }}&copy;{{ currentYear }}
+        </p>
       </li>
-      <li class="relative" v-for="link in links">
-        <ULink :to="link.to"
-          class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 underline">
+      <li v-for="link in links" class="relative">
+        <ULink
+          :to="link.to"
+          class="text-sm text-gray-500 underline hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300"
+        >
           {{ link.label }}
         </ULink>
       </li>
@@ -59,4 +69,4 @@ footer {
   border-image: linear-gradient(45deg, green 33%, #ff0 67%, red) 5;
   /* border-image: linear-gradient(90deg, green 33%, #ff0 34%, #ff0 66%, red 67%) 5; */
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index 6a11fcc..b40af1c 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -1,21 +1,27 @@
 <template>
-    <NuxtLink :to="`/`">
-        <div class="flex flex-row items-center gap-1 px-2.5 py-3.5">
-            <div class="flag-logo px-2.5">
-                <img src="~/assets/logos/logo.svg" loading="lazy" alt="Logo" class="flag-logo" fetchpriority="high" />
-            </div>
-            <div class="text-xs">
-                <h2 class="text-gray-500 tracking-wide font-bold ">Vie-Publique.sn</h2>
-                <!-- <p class="text-gray-500">Au cœur du débat public au Sénégal</p> -->
-                <p class="text-gray-500">Sénégal transparent</p>
-            </div>
-        </div>
-    </NuxtLink>
+  <NuxtLink :to="`/`">
+    <div class="flex flex-row items-center gap-1 px-2.5 py-3.5">
+      <div class="flag-logo px-2.5">
+        <img
+          src="~/assets/logos/logo.svg"
+          loading="lazy"
+          fetchpriority="high"
+          alt="Logo"
+          class="flag-logo"
+        />
+      </div>
+      <div class="text-xs">
+        <h2 class="font-bold tracking-wide text-gray-500">Vie-Publique.sn</h2>
+        <!-- <p class="text-gray-500">Au cœur du débat public au Sénégal</p> -->
+        <p class="text-gray-500">Sénégal transparent</p>
+      </div>
+    </div>
+  </NuxtLink>
 </template>
 
 <style scoped>
 .flag-logo {
-    height: auto;
-    width: 60px;
+  height: auto;
+  width: 60px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/Budget/BudgetTendance.vue b/components/Budget/BudgetTendance.vue
new file mode 100644
index 0000000..d215ea6
--- /dev/null
+++ b/components/Budget/BudgetTendance.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+const props = defineProps<{
+  data: any;
+}>();
+</script>
+
+<template>
+  <div class="mx-auto max-w-4xl bg-white p-4 text-sm">
+    <h1 class="mb-2 text-center text-xl font-bold">
+      Tendances des finances publiques
+    </h1>
+
+    <div class="">
+      <div class="bg-beige-100 mb-2 p-2 text-center">
+        <span class="font-bold">Évolution Taux de croissance du PIB</span>
+      </div>
+      <div>
+        <BudgetTendanceGrowthRateChart :growth-rates="data.growthRates" />
+      </div>
+    </div>
+
+    <div class="my-4">
+      <div class="bg-beige-100 mb-2 p-2 text-center">
+        <span class="font-bold">Évolution Déficit budgétaire</span>
+      </div>
+      <div>
+        <BudgetTendanceDebtCompositionChart />
+      </div>
+    </div>
+
+    <div class="my-4">
+      <div class="bg-beige-100 mb-2 p-2 text-center">
+        <span class="font-bold">Évolution Budget global</span>
+      </div>
+      <div class="text-center text-sm text-gray-500">
+        🚧 En cours d'élaboration
+      </div>
+    </div>
+
+    <div class="my-4">
+      <div class="bg-beige-100 mb-2 p-2 text-center">
+        <span class="font-bold">Évolution Dette Publique</span>
+      </div>
+      <div class="text-center text-sm text-gray-500">
+        🚧 En cours d'élaboration
+      </div>
+    </div>
+
+    <div class="my-4">
+      <div class="bg-beige-100 mb-2 p-2 text-center">
+        <span class="font-bold">Évolution Recettes fiscales</span>
+      </div>
+      <div class="text-center text-sm text-gray-500">
+        🚧 En cours d'élaboration
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bg-beige-300 {
+  background-color: #d7ccc8;
+}
+
+.bg-beige-100 {
+  background-color: #efebe9;
+}
+</style>
diff --git a/components/Budget/BudgetTendanceDebtCompositionChart.vue b/components/Budget/BudgetTendanceDebtCompositionChart.vue
new file mode 100644
index 0000000..014d4bb
--- /dev/null
+++ b/components/Budget/BudgetTendanceDebtCompositionChart.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import * as d3 from "d3";
+import { onMounted, ref } from "vue";
+
+interface DebtData {
+  year: number;
+  totalDebt: number;
+  fiscalDeficit: number;
+}
+
+const data: DebtData[] = [
+  { year: 2018, totalDebt: 63.2, fiscalDeficit: -3.5 },
+  { year: 2019, totalDebt: 64.0, fiscalDeficit: -3.9 },
+  { year: 2020, totalDebt: 69.1, fiscalDeficit: -6.4 },
+  { year: 2021, totalDebt: 73.2, fiscalDeficit: -5.4 },
+  { year: 2022, totalDebt: 77.0, fiscalDeficit: -4.8 },
+  { year: 2023, totalDebt: 74.2, fiscalDeficit: -4.9 },
+  { year: 2024, totalDebt: 70.1, fiscalDeficit: -3.9 },
+];
+
+const chartContainer = ref(null);
+
+onMounted(() => {
+  const resizeObserver = new ResizeObserver(() => {
+    drawChart();
+  });
+
+  if (chartContainer.value) {
+    resizeObserver.observe(chartContainer.value);
+    drawChart();
+  }
+
+  function drawChart() {
+    if (!chartContainer.value) return;
+
+    d3.select(chartContainer.value).selectAll("*").remove();
+
+    const containerWidth = chartContainer.value.clientWidth;
+    const containerHeight = 350;
+
+    const margin = { top: 10, right: 20, bottom: 80, left: 20 };
+    const width = containerWidth - margin.left - margin.right;
+    const height = containerHeight - margin.top - margin.bottom;
+
+    const svg = d3
+      .select(chartContainer.value)
+      .append("svg")
+      .attr("width", containerWidth)
+      .attr("height", containerHeight)
+      .append("g")
+      .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const x = d3
+      .scaleBand()
+      .domain(data.map((d) => d.year.toString()))
+      .range([0, width])
+      .padding(0.2);
+
+    const yLeft = d3
+      .scaleLinear()
+      .domain([0, d3.max(data, (d) => d.totalDebt)!])
+      .range([height, 0]);
+
+    const yRight = d3
+      .scaleLinear()
+      .domain([d3.min(data, (d) => d.fiscalDeficit)! - 1, 0])
+      .range([height, 0]);
+
+    svg
+      .append("g")
+      .attr("transform", `translate(0,${height})`)
+      .call(d3.axisBottom(x));
+
+    svg.append("g").call(d3.axisLeft(yLeft));
+
+    svg
+      .append("g")
+      .attr("transform", `translate(${width}, 0)`)
+      .call(d3.axisRight(yRight));
+
+    svg
+      .selectAll(".bar")
+      .data(data)
+      .enter()
+      .append("rect")
+      .attr("class", "bar")
+      .attr("x", (d) => x(d.year.toString())!)
+      .attr("y", (d) => yLeft(d.totalDebt))
+      .attr("width", x.bandwidth())
+      .attr("height", (d) => height - yLeft(d.totalDebt))
+      .attr("fill", "#1f77b4");
+
+    const line = d3
+      .line<DebtData>()
+      .x((d) => x(d.year.toString())! + x.bandwidth() / 2)
+      .y((d) => yRight(d.fiscalDeficit))
+      .curve(d3.curveMonotoneX);
+
+    svg
+      .append("path")
+      .datum(data)
+      .attr("fill", "none")
+      .attr("stroke", "#FFD700")
+      .attr("stroke-width", 2)
+      .attr("d", line);
+
+    svg
+      .selectAll(".dot")
+      .data(data)
+      .enter()
+      .append("circle")
+      .attr("class", "dot")
+      .attr("cx", (d) => x(d.year.toString())! + x.bandwidth() / 2)
+      .attr("cy", (d) => yRight(d.fiscalDeficit))
+      .attr("r", 8)
+      .attr("fill", "#ff7f0e");
+
+    // Ajouter une légende
+    // Ajouter une légende
+    const legend = svg
+      .append("g")
+      .attr("transform", `translate(0, ${height + 40})`); // Positionnement de la première ligne
+
+    // Première ligne de légendes
+    legend
+      .append("rect")
+      .attr("x", 0)
+      .attr("y", 0)
+      .attr("width", 18)
+      .attr("height", 18)
+      .style("fill", "#1f77b4"); // Couleur des barres
+
+    legend
+      .append("text")
+      .attr("x", 24)
+      .attr("y", 9)
+      .attr("dy", "0.35em")
+      .text("Dette publique totale (% PIB)");
+
+    // Deuxième ligne de légendes (décalée en y)
+    const legendLine2 = svg
+      .append("g")
+      .attr("transform", `translate(0, ${height + 60})`);
+
+    legendLine2
+      .append("circle")
+      .attr("cx", 9)
+      .attr("cy", 9)
+      .attr("r", 6) // Taille du point dans la légende
+      .style("fill", "#ff7f0e"); // Couleur des points
+
+    legendLine2
+      .append("text")
+      .attr("x", 24)
+      .attr("y", 9)
+      .attr("dy", "0.35em")
+      .text("Déficit budgétaire (% PIB)");
+  }
+});
+</script>
+
+<template>
+  <div ref="chartContainer" class="debt-composition-chart"></div>
+</template>
+
+<style scoped>
+.debt-composition-chart {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/components/Budget/BudgetTendanceGrowthRateChart.vue b/components/Budget/BudgetTendanceGrowthRateChart.vue
new file mode 100644
index 0000000..1baf666
--- /dev/null
+++ b/components/Budget/BudgetTendanceGrowthRateChart.vue
@@ -0,0 +1,129 @@
+<template>
+  <div ref="chartContainer" class="growth-rate-chart"></div>
+</template>
+
+<script setup lang="ts">
+import * as d3 from "d3";
+import { onMounted, ref, watch } from "vue";
+
+interface GrowthRateData {
+  year: number;
+  rate: number;
+}
+
+const props = defineProps<{
+  growthRates: GrowthRateData[];
+}>();
+
+const chartContainer = ref(null);
+
+onMounted(() => {
+  const resizeObserver = new ResizeObserver(() => {
+    drawChart();
+  });
+
+  if (chartContainer.value) {
+    resizeObserver.observe(chartContainer.value);
+    drawChart();
+  }
+
+  function drawChart() {
+    if (!chartContainer.value) return;
+
+    // Clear previous SVG elements
+    d3.select(chartContainer.value).selectAll("*").remove();
+
+    // Get dimensions of the parent container
+    const containerWidth = chartContainer.value.clientWidth;
+    // const containerHeight = chartContainer.value.clientHeight;
+    const containerHeight = 300; // Reduced height for a more compact design
+
+    const margin = { top: 10, right: 20, bottom: 30, left: 20 };
+    const width = containerWidth - margin.left - margin.right;
+    const height = containerHeight - margin.top - margin.bottom;
+
+    const svg = d3
+      .select(chartContainer.value)
+      .append("svg")
+      .attr("width", containerWidth)
+      .attr("height", containerHeight)
+      .append("g")
+      .attr("transform", `translate(${margin.left},${margin.top})`);
+
+    const x = d3
+      .scaleLinear()
+      .domain([
+        d3.min(props.growthRates, (d) => d.year) as number,
+        d3.max(props.growthRates, (d) => d.year) as number,
+      ])
+      .range([0, width]);
+
+    const y = d3
+      .scaleLinear()
+      .domain([0, d3.max(props.growthRates, (d) => d.rate) as number])
+      .nice()
+      .range([height, 0]);
+
+    const line = d3
+      .line<GrowthRateData>()
+      .x((d) => x(d.year))
+      .y((d) => y(d.rate));
+
+    svg
+      .append("g")
+      .attr("transform", `translate(0,${height})`)
+      .call(
+        d3
+          .axisBottom(x)
+          .ticks(props.growthRates.length)
+          .tickFormat(d3.format("d")),
+      );
+
+    svg.append("g").call(d3.axisLeft(y));
+
+    // #44403c #69b3a2
+
+    svg
+      .append("path")
+      .datum(props.growthRates)
+      .attr("fill", "none")
+      .attr("stroke", "#1c1917")
+      .attr("stroke-width", 2)
+      .attr("d", line);
+
+    svg
+      .selectAll("dot")
+      .data(props.growthRates)
+      .enter()
+      .append("circle")
+      .attr("cx", (d) => x(d.year))
+      .attr("cy", (d) => y(d.rate))
+      .attr("r", 4)
+      .attr("fill", "#ff7f0e");
+
+    svg
+      .selectAll("text.label")
+      .data(props.growthRates)
+      .enter()
+      .append("text")
+      .attr("class", "label")
+      .attr("x", (d) => x(d.year))
+      .attr("y", (d) => y(d.rate) - 10)
+      .attr("text-anchor", "middle")
+      .attr("font-size", "10px")
+      .attr("fill", "#000")
+      .text((d) => `${d.rate}%`);
+  }
+});
+</script>
+
+<style scoped>
+.growth-rate-chart {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+</style>
diff --git a/components/BudgetExecution.vue b/components/BudgetExecution.vue
new file mode 100644
index 0000000..91c3a01
--- /dev/null
+++ b/components/BudgetExecution.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+// import { getInstitutionColor } from "@/composables/useInstitution";
+
+const props = defineProps<{
+  dataQ1: any;
+  dataLfi: any;
+}>();
+</script>
+
+<template>
+  <div class="mx-auto max-w-4xl bg-white p-2 text-sm sm:p-4">
+    <h1 class="mb-2 text-center text-xl font-bold">
+      Rapport d'exécution premier Trimestre 2024
+    </h1>
+    <!-- <pre class="bg-red-100">{{ dataQ1.expenseCategories }}</pre>
+    <pre class="bg-blue-100">{{ dataLfi.institutionBudgets }}</pre> -->
+
+    <div class="mb-2 grid grid-cols-2 gap-2">
+      <BudgetExecutionIndicatorBox
+        title="Ressources totales"
+        :lfi-value="dataQ1.resources.lfi"
+        :realized-value="dataQ1.resources.realized"
+        unit="Mrd"
+      />
+      <BudgetExecutionIndicatorBox
+        title="Dépenses totales"
+        :lfi-value="dataQ1.expenses.lfi"
+        :realized-value="dataQ1.expenses.realized"
+        unit="Mrd"
+      />
+    </div>
+
+    <div class="bg-beige-100 my-4 p-2 text-center font-bold text-black">
+      Exécution par catégorie de dépenses
+    </div>
+
+    <BudgetExecutionRateBar
+      v-for="category in dataQ1.expenseCategories"
+      :key="category.title"
+      :title="category.title"
+      :lfi-value="category.lfi"
+      :realized-value="category.realized"
+      :color="category.color"
+    />
+
+    <div class="bg-beige-100 mt-4 p-2 text-center font-bold text-black">
+      Exécution par institution
+    </div>
+
+    <BudgetExecutionRateBar
+      v-for="institution in dataLfi.institutionBudgets"
+      :key="institution.name"
+      :title="institution.name"
+      :lfi-value="institution.totalBudget.amount"
+      :realized-value="institution.execution_q1.amount"
+      :color="institution.color"
+    />
+
+    <div class="mt-6">
+      <h2 class="mb-2 text-lg font-semibold">💡 NB</h2>
+      <ul class="list-disc space-y-1 pl-5">
+        <li v-for="point in dataQ1.keyPoints" :key="point">{{ point }}</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.bg-beige-300 {
+  background-color: #d7ccc8;
+}
+
+.bg-beige-100 {
+  background-color: #efebe9;
+}
+</style>
diff --git a/components/BudgetExecutionIndicatorBox.vue b/components/BudgetExecutionIndicatorBox.vue
new file mode 100644
index 0000000..070ff8a
--- /dev/null
+++ b/components/BudgetExecutionIndicatorBox.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="bg-beige-100 rounded-lg p-4">
+    <h3 class="mb-2 text-sm font-semibold">{{ title }}</h3>
+    <div class="text-2xl font-bold sm:text-3xl">
+      {{ formattedValue }} {{ unit }}
+    </div>
+
+    <div class="mt-1">Taux d'exécution</div>
+    <div class="mt-0 text-2xl font-medium text-green-700">
+      {{ executionRate }}%
+    </div>
+    <div class="mt-0">
+      <span class="">sur {{ formattedLfiValue }} {{ unit }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  title: string;
+  lfiValue: number;
+  realizedValue: number;
+  unit: string;
+}>();
+
+const formattedValue = computed(() =>
+  props.realizedValue.toLocaleString("fr-FR", { maximumFractionDigits: 0 }),
+);
+const formattedLfiValue = computed(() =>
+  props.lfiValue.toLocaleString("fr-FR", { maximumFractionDigits: 0 }),
+);
+const executionRate = computed(() =>
+  ((props.realizedValue / props.lfiValue) * 100).toFixed(2),
+);
+</script>
+
+<style scoped>
+.bg-beige-100 {
+  background-color: #efebe9;
+}
+</style>
diff --git a/components/BudgetExecutionRateBar.vue b/components/BudgetExecutionRateBar.vue
new file mode 100644
index 0000000..79df713
--- /dev/null
+++ b/components/BudgetExecutionRateBar.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="mb-2">
+    <!-- <pre>{{ title }}</pre> -->
+    <div class="mb-1 flex justify-between">
+      <span class="text-sm font-medium">{{ title }}</span>
+      <span class="text-sm font-medium">{{ executionRate }}%</span>
+    </div>
+    <div class="h-2.5 w-full bg-gray-200">
+      <div
+        class="h-2.5"
+        :class="[color]"
+        :style="{ width: `${executionRate}%` }"
+      ></div>
+    </div>
+    <div class="flex justify-end text-xs">
+      <!-- <span>Réalisé: {{ formattedRealizedValue }} Mrd</span> -->
+      <span
+        >{{ formattedRealizedValue }} sur
+        {{ formattedLfiValue }} milliards</span
+      >
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  title: string;
+  lfiValue: number;
+  realizedValue: number;
+  color: string;
+}>();
+
+const executionRate = computed(() =>
+  ((props.realizedValue / props.lfiValue) * 100).toFixed(0),
+);
+
+const formattedRealizedValue = computed(() =>
+  props.realizedValue.toLocaleString("fr-FR", { maximumFractionDigits: 1 }),
+);
+
+const formattedLfiValue = computed(() =>
+  props.lfiValue.toLocaleString("fr-FR", { maximumFractionDigits: 1 }),
+);
+</script>
diff --git a/components/BudgetInstitutions.vue b/components/BudgetInstitutions.vue
new file mode 100644
index 0000000..9565d6a
--- /dev/null
+++ b/components/BudgetInstitutions.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { getInstitutionColor } from "@/composables/useInstitution";
+
+const keyPoints = [
+  "Source: Document de loi de finance 2024",
+  "Vie-Publique est tenu par des bénévoles",
+  "si vous voyez une erreur merci de nous aider à corriger",
+];
+
+interface Budget {
+  amount: number;
+  unit: "milliards" | "millions";
+}
+
+interface Category {
+  name: string;
+  budget: Budget;
+}
+
+interface Institution {
+  name: string;
+  totalBudget: Budget;
+  categories: Category[];
+}
+
+const props = defineProps<{
+  institutions: Institution[];
+}>();
+
+const formatBudget = (budget: Budget): string => {
+  const formattedMontant = budget.amount.toFixed(1);
+  const uniteAbrev = budget.unit === "milliards" ? "Mrd" : "Millions";
+  return `${formattedMontant} ${uniteAbrev}`;
+};
+
+const totalBudget = computed(() => {
+  return props.institutions.reduce((total, inst) => {
+    const montantInMilliards =
+      inst.totalBudget.unit === "milliards"
+        ? inst.totalBudget.amount
+        : inst.totalBudget.amount / 1000;
+    return total + montantInMilliards;
+  }, 0);
+});
+
+const institutionsWithPercentage = computed(() => {
+  return props.institutions.map((inst) => {
+    const montantInMilliards =
+      inst.totalBudget.unit === "milliards"
+        ? inst.totalBudget.amount
+        : inst.totalBudget.amount / 1000;
+    const percentage = (montantInMilliards / totalBudget.value) * 100;
+    return { ...inst, percentage };
+  });
+});
+
+// État pour le tri
+const isSortedDescending = ref(true);
+
+const sortedInstitutions = computed(() => {
+  return [...institutionsWithPercentage.value].sort((a, b) => {
+    const aAmount =
+      a.totalBudget.unit === "milliards"
+        ? a.totalBudget.amount
+        : a.totalBudget.amount / 1000;
+    const bAmount =
+      b.totalBudget.unit === "milliards"
+        ? b.totalBudget.amount
+        : b.totalBudget.amount / 1000;
+    return isSortedDescending.value ? bAmount - aAmount : aAmount - bAmount;
+  });
+});
+
+const toggleSortOrder = () => {
+  isSortedDescending.value = !isSortedDescending.value;
+};
+
+// State to track which institution's categories are visible
+const expandedInstitutionIndex = ref<number | null>(null);
+
+const toggleInstitution = (index: number) => {
+  expandedInstitutionIndex.value =
+    expandedInstitutionIndex.value === index ? null : index;
+};
+</script>
+
+<template>
+  <div class="mx-auto max-w-4xl bg-white p-2 text-sm sm:p-4">
+    <h1 class="mb-2 text-center text-xl font-bold">
+      Budget par Institution
+      <button @click="toggleSortOrder" class="text-primary">
+        {{ isSortedDescending ? "↑" : "↓" }}
+      </button>
+    </h1>
+
+    <div
+      v-for="(institution, index) in sortedInstitutions"
+      :key="institution.name"
+      class="bg-beige-100 mb-2 rounded p-2"
+      @click="toggleInstitution(index)"
+    >
+      <div class="flex flex-row justify-between sm:items-center">
+        <h3 class="text mb-2 font-semibold sm:mb-0">
+          {{ institution.name }}
+        </h3>
+
+        <div class="flex flex-row items-center sm:justify-between">
+          <p class="mr-1 font-bold sm:text-sm">
+            {{ formatBudget(institution.totalBudget) }}
+          </p>
+          <UIcon
+            :name="
+              expandedInstitutionIndex === index
+                ? 'i-heroicons-chevron-up'
+                : 'i-heroicons-chevron-down'
+            "
+            size="md"
+          />
+        </div>
+      </div>
+      <div class="bg-beige-300 h-2 w-full">
+        <div
+          class="h-full"
+          :style="{
+            width: `${institution.percentage}%`,
+            backgroundColor: getInstitutionColor(index),
+          }"
+        ></div>
+      </div>
+      <!-- Display the categories when the card is expanded -->
+      <transition name="fade">
+        <div v-if="expandedInstitutionIndex === index" class="mt-2">
+          <div
+            v-for="category in institution.categories"
+            :key="category.name"
+            class="bg-beige-100 mt-1 rounded-md p-2"
+          >
+            <div class="flex justify-between">
+              <span class="text-xs">{{ category.name }}</span>
+              <span>{{ formatBudget(category.budget) }}</span>
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+
+    <div class="mt-6">
+      <h2 class="mb-2 text-lg font-semibold">💡 NB</h2>
+      <ul class="list-disc space-y-1 pl-5">
+        <li v-for="point in keyPoints" :key="point">{{ point }}</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+.bg-beige-100 {
+  background-color: #efebe9;
+}
+.bg-beige-300 {
+  background-color: #d7ccc8;
+}
+</style>
diff --git a/components/BudgetMinistry.vue b/components/BudgetMinistry.vue
new file mode 100644
index 0000000..23053d8
--- /dev/null
+++ b/components/BudgetMinistry.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const props = defineProps<{
+  icon: string;
+  ministry: string;
+  budget: number;
+}>();
+</script>
+
+<template>
+  <div class="bg-beige-100 flex flex-col items-center rounded p-2">
+    <div class="mb-1 text-2xl">{{ icon }}</div>
+    <div class="text-xl font-bold">{{ budget.toFixed(1) }} Mrd</div>
+    <div class="text-center text-xs">{{ ministry }}</div>
+  </div>
+</template>
+
+<style scoped>
+.bg-beige-100 {
+  background-color: #efebe9;
+}
+</style>
diff --git a/components/BudgetOverview.vue b/components/BudgetOverview.vue
new file mode 100644
index 0000000..1add05c
--- /dev/null
+++ b/components/BudgetOverview.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+const keyPoints = [
+  " Vie-Publique est tenu par des bénévoles, si vous voyez une erreur merci de nous aider à corriger",
+  "Les chiffres présentés sont basés sur les crédits de paiement de l'Annexe II de la LFI 2024",
+];
+
+const props = defineProps<{
+  budgetDatas: any;
+}>();
+</script>
+
+<template>
+  <div class="mx-auto max-w-4xl bg-white p-2 text-sm sm:p-4">
+    <h1 class="mb-2 text-center text-xl font-bold">
+      Budget prévisionnel Loi de finances 2024
+    </h1>
+
+    <div class="grid grid-cols-2 gap-2">
+      <div class="bg-beige-100 rounded-lg p-2 sm:p-4">
+        <h3 class="text-sm font-semibold">Budget Global</h3>
+        <span class="text-2xl font-bold md:text-4xl">{{
+          budgetDatas.totalBudget.toFixed(0)
+        }}</span>
+        <span class="text-md ml-1 font-semibold text-green-600 sm:text-2xl"
+          >+{{ budgetDatas.budgetIncrease }}%</span
+        >
+        <div class="text-primary text-sm">milliards FCFA</div>
+      </div>
+
+      <div class="bg-beige-100 rounded-lg p-2 sm:p-4">
+        <h3 class="text-sm font-semibold">Déficit budgétaire</h3>
+        <span class="text-2xl font-bold md:text-4xl">
+          {{ budgetDatas.balance.amount.toFixed(0) }}
+        </span>
+        <span class="text-md ml-1 font-semibold text-red-600 sm:text-2xl"
+          >{{ budgetDatas.balance.pibPercentage }}% PIB</span
+        >
+        <div class="text-primary text-sm">
+          {{ budgetDatas.balance.unit }} FCFA
+        </div>
+      </div>
+
+      <div class="bg-beige-100 rounded-lg p-2 sm:p-4">
+        <h3 class="text-sm font-semibold">Ressources du budget général</h3>
+        <span class="text-2xl font-bold md:text-4xl">{{
+          budgetDatas.resources.totalResources.toFixed(0)
+        }}</span>
+        <span class="text-md ml-1 font-semibold text-green-600 sm:text-2xl"
+          >+{{ budgetDatas.resources.resourcesIncrease }}%</span
+        >
+        <div class="text-primary text-sm">milliards FCFA</div>
+      </div>
+
+      <div class="bg-beige-100 rounded-lg p-2 sm:p-4">
+        <h3 class="text-sm font-semibold">Taux de croissance prévu</h3>
+        <span class="text-2xl font-bold md:text-4xl">
+          {{ budgetDatas.growthRate }} %
+        </span>
+        <!-- <span class="text-md ml-2 font-semibold text-green-600 sm:text-2xl"
+          >{{ budgetDatas.balance.pibPercentage }}%</span
+        > -->
+        <!-- <div class="font-semibold">{{ budgetDatas.balance.unit }} FCFA</div> -->
+      </div>
+    </div>
+
+    <div class="my-2">
+      <h2 class="bg-beige-100 mb-2 p-2 text-center font-bold">
+        Ressources du budget général
+      </h2>
+      <div class="flex items-center justify-around">
+        <div class="text-center">
+          <div class="mb-2">Ressources Internes</div>
+          <div class="flex flex-col md:flex-row md:gap-4">
+            <BudgetRessourcesCircleProgress
+              v-for="resource in budgetDatas.resources.internalResources
+                .details"
+              :key="resource.name"
+              :percentage="resource.percentage"
+              :label="resource.name"
+              :value="`${resource.value} Mrd`"
+              color="#4CAF50"
+              class="flex-1"
+            />
+          </div>
+        </div>
+
+        <div class="text-center">
+          <div class="mb-2">Ressources Externes</div>
+          <div class="flex flex-col md:flex-row md:gap-4">
+            <BudgetRessourcesCircleProgress
+              v-for="resource in budgetDatas.resources.externalResources
+                .details"
+              :key="resource.name"
+              :percentage="resource.percentage"
+              :label="resource.name"
+              :value="`${resource.value} Mrd`"
+              color="#4CAF50"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="my-4">
+      <div class="bg-beige-100 mb-2 p-2 text-center">
+        <span class="font-bold">Dépenses du budget général</span>
+      </div>
+
+      <div class="mt-2 text-center">
+        <span class="text-xl font-bold sm:text-3xl">{{
+          budgetDatas.expenses.totalExpenses
+        }}</span>
+        <span class="text-md ml-1 font-semibold text-green-600"
+          >↑ {{ budgetDatas.expenses.expensesIncrease }}%</span
+        >
+        <div class="font-medium">milliards FCFA</div>
+      </div>
+
+      <BudgetRateBar
+        :items="budgetDatas?.expenses.categories || []"
+        :total="budgetDatas.expenses.totalExpenses || 0"
+      />
+    </div>
+
+    <div class="my-4">
+      <div class="bg-beige-100 mb-2 p-2 text-center">
+        <span class="font-bold"> Comptes Spéciaux du Trésor</span>
+      </div>
+
+      <div class="mt-2 text-center">
+        <span class="text-xl font-bold sm:text-3xl">
+          {{ budgetDatas.specialAccount.value }}
+        </span>
+        <span class="text-md ml-1 font-semibold text-green-600"
+          >↑ {{ budgetDatas.specialAccount.increase }}%</span
+        >
+        <div class="mb-2 font-medium">milliards FCFA</div>
+        <div class="hidden text-sm text-gray-500">
+          Les recettes et dépenses des Comptes spéciaux du Trésor s'équilibrent
+          à
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="mt-6">
+    <h2 class="mb-2 text-lg font-semibold">💡 NB</h2>
+    <ul class="list-disc space-y-1 pl-5">
+      <li v-for="point in keyPoints" :key="point">{{ point }}</li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.bg-beige-300 {
+  background-color: #d7ccc8;
+}
+
+.text-beige-500 {
+  color: #a1887f;
+}
+
+.bg-beige-300 {
+  background-color: #d7ccc8;
+}
+
+.bg-beige-100 {
+  background-color: #efebe9;
+}
+</style>
diff --git a/components/BudgetRateBar.vue b/components/BudgetRateBar.vue
new file mode 100644
index 0000000..0ee19e1
--- /dev/null
+++ b/components/BudgetRateBar.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="space-y-2">
+    <div v-for="item in items" :key="item.name" class="mb-4">
+      <div class="mb-1 flex justify-between">
+        <span class="text-sm font-medium">{{ item.name }}</span>
+        <span class="text-sm font-medium">{{ item.value.toFixed(1) }} Mrd</span>
+      </div>
+
+      <!-- <div class="sm:w-54 w-40 text-xs">
+        {{ item.name }}
+      </div> -->
+      <div
+        class="h-2.5 w-full flex-grow overflow-hidden rounded-full bg-gray-200"
+      >
+        <div
+          :class="[item.color, 'h-full']"
+          :style="{ width: `${(item.value / total) * 100}%` }"
+        ></div>
+      </div>
+      <div class="flex justify-end text-xs">
+        <!-- {{ item.value.toFixed(1) }} Mrd -->
+        <span
+          class="text-sm"
+          :class="[item.increase > 0 ? 'text-green-600' : 'text-red-600']"
+          >{{ item.increase > 0 ? "↑" : "↓" }} {{ item.increase }}%</span
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  items: Array<{
+    name: string;
+    value: number;
+    increase: number;
+    color: string;
+  }>;
+  total: number;
+}>();
+</script>
diff --git a/components/BudgetRessourcesCategoryDonut.vue b/components/BudgetRessourcesCategoryDonut.vue
new file mode 100644
index 0000000..81f91e5
--- /dev/null
+++ b/components/BudgetRessourcesCategoryDonut.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="relative">
+    <div class="hidden">
+      <svg :width="size" :height="size" viewBox="0 0 100 100">
+        <!-- Cercle de fond -->
+        <circle cx="50" cy="50" :r="radius" fill="#f0f0f0" />
+
+        <!-- Segments pour chaque catégorie -->
+        <path
+          v-for="(segment, index) in segments"
+          :key="index"
+          :d="segment.path"
+          :fill="segment.color"
+        />
+
+        <!-- Cercle central pour le total -->
+        <circle cx="50" cy="50" :r="innerRadius" fill="white" />
+      </svg>
+    </div>
+    <!-- Texte central pour le total -->
+    <div
+      class="absolute inset-0 flex hidden flex-col items-center justify-center text-center"
+    >
+      <div class="text-3xl font-bold">{{ totalValue }} Mrd</div>
+      <div class="text-sm">FCFA</div>
+    </div>
+
+    <!-- Légende -->
+    <div class="text-center">
+      <div class="mt-4 grid grid-cols-2 gap-2">
+        <div
+          v-for="(category, index) in categories"
+          :key="index"
+          class="flex items-center"
+        >
+          <div :class="['mr-2 h-4 w-4', category.color]"></div>
+          <div class="mr-2 font-semibold">{{ category.name }}</div>
+
+          <div>
+            <div>{{ category.value }} Mrd ({{ category.percentage }}%)</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+  categories: Array<{
+    name: string;
+    value: number;
+    percentage: number;
+    color: string;
+  }>;
+  size?: number;
+}>();
+
+const size = computed(() => props.size || 300);
+const radius = computed(() => 45);
+const innerRadius = computed(() => 30);
+
+const totalValue = computed(() =>
+  props.categories.reduce((sum, category) => sum + category.value, 0),
+);
+
+const segments = computed(() => {
+  let startAngle = 0;
+  return props.categories.map((category) => {
+    const percentage = (category.value / totalValue.value) * 100;
+    const angle = (percentage / 100) * Math.PI * 2;
+    const endAngle = startAngle + angle;
+    const x1 = 50 + radius.value * Math.cos(startAngle);
+    const y1 = 50 + radius.value * Math.sin(startAngle);
+    const x2 = 50 + radius.value * Math.cos(endAngle);
+    const y2 = 50 + radius.value * Math.sin(endAngle);
+    const largeArcFlag = angle > Math.PI ? 1 : 0;
+    const path = `M 50 50 L ${x1} ${y1} A ${radius.value} ${radius.value} 0 ${largeArcFlag} 1 ${x2} ${y2} Z`;
+    startAngle = endAngle;
+    return { path, color: category.color };
+  });
+});
+</script>
diff --git a/components/BudgetRessourcesCategoryStackedBarD3.vue b/components/BudgetRessourcesCategoryStackedBarD3.vue
new file mode 100644
index 0000000..e69de29
diff --git a/components/BudgetRessourcesCategoryTreemap.vue b/components/BudgetRessourcesCategoryTreemap.vue
new file mode 100644
index 0000000..92b4fcf
--- /dev/null
+++ b/components/BudgetRessourcesCategoryTreemap.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="w-full">
+    <h2 class="mb-4 text-2xl font-bold">{{ title }}</h2>
+    <div class="mb-2 text-4xl font-bold text-blue-600">
+      {{ totalValue }} {{ unit }}
+    </div>
+    <div class="flex h-20 w-full overflow-hidden rounded-lg">
+      <div
+        v-for="(item, index) in items"
+        :key="index"
+        :style="{ width: `${item.percentage}%` }"
+        class="flex flex-col items-center justify-center text-white"
+        :class="[item.color]"
+      >
+        {{ item.percentage.toFixed(1) }}%
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface BudgetItem {
+  name: string;
+  value: number;
+  percentage: number;
+  color: string;
+}
+
+const props = defineProps<{
+  title: string;
+  items: BudgetItem[];
+  unit: string;
+}>();
+
+const totalValue = computed(() => {
+  return props.items.reduce((sum, item) => sum + item.value, 0);
+});
+</script>
diff --git a/components/BudgetRessourcesCategoryTreemapD3.vue b/components/BudgetRessourcesCategoryTreemapD3.vue
new file mode 100644
index 0000000..5abda16
--- /dev/null
+++ b/components/BudgetRessourcesCategoryTreemapD3.vue
@@ -0,0 +1,63 @@
+<template>
+  <div ref="treemapContainer" class="treemap"></div>
+</template>
+
+<script setup lang="ts">
+import * as d3 from "d3";
+
+const props = defineProps<{
+  data: Array<{ name: string; value: number }>;
+}>();
+
+const treemapContainer = ref(null);
+
+onMounted(() => {
+  if (treemapContainer.value) {
+    const width = 800;
+    const height = 400;
+
+    const treemap = d3.treemap().size([width, height]).padding(1).round(true);
+
+    const root = d3
+      .hierarchy({ children: props.data })
+      .sum((d) => d.value)
+      .sort((a, b) => b.value - a.value);
+
+    treemap(root);
+
+    const svg = d3
+      .select(treemapContainer.value)
+      .append("svg")
+      .attr("width", width)
+      .attr("height", height);
+
+    const nodes = svg
+      .selectAll("g")
+      .data(root.leaves())
+      .enter()
+      .append("g")
+      .attr("transform", (d) => `translate(${d.x0},${d.y0})`);
+
+    nodes
+      .append("rect")
+      .attr("id", (d) => d.data.name)
+      .attr("width", (d) => d.x1 - d.x0)
+      .attr("height", (d) => d.y1 - d.y0)
+      .attr("fill", "#69b3a2");
+
+    nodes
+      .append("text")
+      .attr("x", 3)
+      .attr("y", 10)
+      .text((d) => d.data.name);
+  }
+});
+</script>
+
+<style scoped>
+.treemap {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
diff --git a/components/BudgetRessourcesCategoryTreemapV2.vue b/components/BudgetRessourcesCategoryTreemapV2.vue
new file mode 100644
index 0000000..89b7055
--- /dev/null
+++ b/components/BudgetRessourcesCategoryTreemapV2.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="w-full">
+    <h2 class="mb-4 text-2xl font-bold">{{ title }}</h2>
+    <div class="mb-2 text-4xl font-bold text-blue-600">
+      {{ totalValue }} {{ unit }}
+    </div>
+    <!-- <pre>{{ items }}</pre> -->
+    <div class="flex h-20 w-full overflow-hidden rounded-lg">
+      <div
+        v-for="(item, index) in items"
+        :key="index"
+        :style="{ width: `${item.percentage}%` }"
+        class="flex flex-col items-center justify-center text-white"
+        :class="[item.color]"
+      >
+        <div class="text-2xl font-bold">{{ item.value }}</div>
+        <div class="text-sm">{{ item.name }}</div>
+      </div>
+    </div>
+    <div class="mt-2 flex">
+      <div
+        v-for="(item, index) in items"
+        :key="index"
+        :style="{ width: `${item.percentage}%` }"
+        class="text-center text-xs"
+      >
+        {{ item.percentage.toFixed(1) }}%
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface BudgetItem {
+  name: string;
+  value: number;
+  percentage: number;
+  color: string;
+}
+
+const props = defineProps<{
+  title: string;
+  items: BudgetItem[];
+  unit: string;
+}>();
+
+const totalValue = computed(() => {
+  return props.items.reduce((sum, item) => sum + item.value, 0);
+});
+</script>
diff --git a/components/BudgetRessourcesCategoryTreemapV3.vue b/components/BudgetRessourcesCategoryTreemapV3.vue
new file mode 100644
index 0000000..94c00ae
--- /dev/null
+++ b/components/BudgetRessourcesCategoryTreemapV3.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="w-full">
+    <h2 class="mb-4 text-2xl font-bold">{{ title }}</h2>
+    <div class="mb-2 text-4xl font-bold text-blue-600">
+      {{ totalValue }} {{ unit }}
+    </div>
+    <div
+      class="grid h-80 w-full grid-cols-1 gap-2 overflow-hidden rounded-lg md:grid-cols-2 lg:grid-cols-4"
+    >
+      <div
+        v-for="(item, index) in items"
+        :key="index"
+        :style="{ height: `${item.percentage}%` }"
+        class="flex items-center justify-center text-white"
+        :class="[item.color]"
+      >
+        <div class="text-center">
+          <div class="text-lg font-bold">{{ item.name }}</div>
+          <div class="text-sm">{{ item.value }} {{ unit }}</div>
+          <div>{{ item.percentage.toFixed(1) }}%</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface BudgetItem {
+  name: string;
+  value: number;
+  percentage: number;
+  color: string;
+}
+
+const props = defineProps<{
+  title: string;
+  items: BudgetItem[];
+  unit: string;
+}>();
+
+const totalValue = computed(() => {
+  return props.items.reduce((sum, item) => sum + item.value, 0);
+});
+</script>
diff --git a/components/BudgetRessourcesCircleProgress.vue b/components/BudgetRessourcesCircleProgress.vue
new file mode 100644
index 0000000..185fbb5
--- /dev/null
+++ b/components/BudgetRessourcesCircleProgress.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="relative h-32 w-32">
+    <svg class="h-full w-full" viewBox="0 0 35 35">
+      <path
+        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+        fill="none"
+        stroke="#eee"
+        stroke-width="2"
+      />
+      <path
+        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
+        fill="none"
+        :stroke="color"
+        stroke-width="2"
+        :stroke-dasharray="`${percentage}, 100`"
+      />
+    </svg>
+    <div
+      class="absolute inset-0 flex flex-col items-center justify-center text-center"
+    >
+      <div class="text-wrap text-xl text-green-700">
+        {{ Math.floor(percentage) }}%
+      </div>
+      <div class="text-wrap text-xs">{{ label }}</div>
+      <div class="text-sm font-bold">{{ value }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  percentage: number;
+  label: string;
+  value: string;
+  color?: string;
+}>();
+</script>
diff --git a/components/CustomCircleProgressBar.vue b/components/CustomCircleProgressBar.vue
index 2c491f4..0ba633a 100644
--- a/components/CustomCircleProgressBar.vue
+++ b/components/CustomCircleProgressBar.vue
@@ -1,34 +1,50 @@
 <template>
-    <div class="relative h-28">
-        <svg class="w-full h-full" viewBox="0 0 100 100">
-            <circle class="text-gray-200 stroke-current" stroke-width="8" cx="50" cy="50" r="40" fill="transparent" />
-            <circle class="text-black-700 progress-ring__circle stroke-current" stroke-width="8"
-                :stroke-dasharray="circumference" :stroke-dashoffset="dashOffset" cx="50" cy="50" r="40"
-                fill="transparent" />
-        </svg>
-        <div class="absolute inset-0 flex items-center font-bold justify-center text-3xl">
-            {{ progress }}%
-        </div>
+  <div class="relative h-28">
+    <svg class="h-full w-full" viewBox="0 0 100 100">
+      <circle
+        class="stroke-current text-gray-200"
+        stroke-width="8"
+        cx="50"
+        cy="50"
+        r="40"
+        fill="transparent"
+      />
+      <circle
+        class="text-black-700 progress-ring__circle stroke-current"
+        stroke-width="8"
+        :stroke-dasharray="circumference"
+        :stroke-dashoffset="dashOffset"
+        cx="50"
+        cy="50"
+        r="40"
+        fill="transparent"
+      />
+    </svg>
+    <div
+      class="absolute inset-0 flex items-center justify-center text-3xl font-bold"
+    >
+      {{ progress }}%
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed } from "vue";
 
 const props = defineProps<{
-    progress: number;
+  progress: number;
 }>();
 
 const circumference = 2 * Math.PI * 40;
 const dashOffset = computed(() => {
-    return circumference - (props.progress / 100) * circumference;
+  return circumference - (props.progress / 100) * circumference;
 });
 </script>
 
 <style scoped>
 .progress-ring__circle {
-    transition: stroke-dashoffset 0.35s;
-    transform: rotate(-90deg);
-    transform-origin: 50% 50%;
+  transition: stroke-dashoffset 0.35s;
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/Header.vue b/components/Header.vue
deleted file mode 100644
index 85cf7f1..0000000
--- a/components/Header.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <NuxtLink :to="`/`">
-        <div class="flex flex-col items-center p-2">
-            <!-- <div class="flag-logo px-2.5">
-                <img src="~/assets/logos/logo.svg" loading="lazy" alt="Logo" class="flag-logo" />
-            </div> -->
-            <div class="text-xs">
-                <h2 class="text-gray-500 tracking-wide font-bold ">Vie-Publique.sn</h2>
-                <img src="~/assets/logos/flag.png" loading="lazy" alt="Logo" class="flag-logo" fetchpriority="high"/>
-                <p class="text-gray-500">Au cœur du débat public au Sénégal</p>
-            </div>
-        </div>
-    </NuxtLink>
-</template>
-
-<style scoped>
-.flag-logo {
-    height: auto;
-    width: 80px;
-}
-</style>
\ No newline at end of file
diff --git a/components/HeaderBrand.vue b/components/HeaderBrand.vue
deleted file mode 100644
index 08d31ae..0000000
--- a/components/HeaderBrand.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <NuxtLink :to="`/`">
-        <div class="flex flex-row items-center gap-1 px-2.5 py-3.5">
-            <div class="flag-logo px-2.5">
-                <img src="~/assets/logos/logo.svg" loading="lazy" alt="Logo" class="flag-logo" fetchpriority="high" />
-            </div>
-            <div class="text-xs">
-                <h2 class="text-gray-500 tracking-wide font-bold ">Vie-Publique.sn</h2>
-                <!-- <p class="text-gray-500">Au cœur du débat public au Sénégal</p> -->
-                <p class="text-gray-500">Gouvernance au Sénégal</p>
-            </div>
-        </div>
-    </NuxtLink>
-</template>
-
-<style scoped>
-.flag-logo {
-    height: auto;
-    width: 60px;
-}
-</style>
\ No newline at end of file
diff --git a/components/HomeMenu.vue b/components/HomeMenu.vue
new file mode 100644
index 0000000..240e8ef
--- /dev/null
+++ b/components/HomeMenu.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+interface Menu {
+  label: string;
+  description: string;
+  icon: any;
+  to: string;
+}
+
+const props = defineProps<{
+  menus: Menu[];
+}>();
+</script>
+
+<template>
+  <div class="mb-6 mt-2 grid grid-cols-1 gap-4 md:grid-cols-2">
+    <UCard
+      v-for="menu in menus"
+      :key="menu.label"
+      class="custom-shadow p-2 hover:shadow-xl"
+    >
+      <NuxtLink :to="menu.to" class="flex items-start">
+        <div class="mr-4 flex-shrink-0">
+          <div
+            class="flex h-14 w-14 items-center justify-center rounded-full bg-green-100"
+          >
+            <UIcon :name="menu.icon" class="h-8 w-8 text-green-700" />
+          </div>
+        </div>
+        <div>
+          <h2 class="text-md font-bold text-green-700">{{ menu.label }}</h2>
+          <p class="text-sm text-gray-700">{{ menu.description }}</p>
+        </div>
+      </NuxtLink>
+    </UCard>
+  </div>
+</template>
diff --git a/components/HomeMenuCards1.vue b/components/HomeMenuCards1.vue
index 75145f0..739216a 100644
--- a/components/HomeMenuCards1.vue
+++ b/components/HomeMenuCards1.vue
@@ -1,34 +1,36 @@
 <script setup lang="ts">
-
 interface Menu {
-    label: string
-    description: string
-    photo: string
-    icon: any
-    to: string
+  label: string;
+  description: string;
+  photo: string;
+  icon: any;
+  to: string;
 }
 
 const props = defineProps<{
-    menus: Menu[]
-}>()
+  menus: Menu[];
+}>();
 </script>
 
 <template>
-    <div class="grid-container mt-2">
-        <ULink v-for="link in menus" :key="link.to" :to="link.to" class="w-full mb-2">
-            <UCard class="custom-shadow border-b-2 border-green-700 h-28 sm:h-28 ">
-
-                <div class="flex flex-row gap-1">
-                    <div class="flex-shrink-0 w-11 md:w-16">
-                        <UIcon :name="link.icon" class="w-full text-2xl mt-1" />
-                    </div>
-                    <div class="flex-grow">
-                        <h2 class="text-md font-semibold">{{ link.label }}</h2>
-                        <p class="text-gray-500 text-sm">{{ link.description }}</p>
-                    </div>
-                </div>
-
-            </UCard>
-        </ULink>
-    </div>
-</template>
\ No newline at end of file
+  <div class="grid-container mt-2">
+    <ULink
+      v-for="link in menus"
+      :key="link.to"
+      :to="link.to"
+      class="mb-2 w-full"
+    >
+      <UCard class="custom-shadow h-28 border-b-2 border-green-700 sm:h-28">
+        <div class="flex flex-row gap-1">
+          <div class="w-11 flex-shrink-0 md:w-16">
+            <UIcon :name="link.icon" class="mt-1 w-full text-2xl" />
+          </div>
+          <div class="flex-grow">
+            <h2 class="text-md font-semibold">{{ link.label }}</h2>
+            <p class="text-sm text-gray-500">{{ link.description }}</p>
+          </div>
+        </div>
+      </UCard>
+    </ULink>
+  </div>
+</template>
diff --git a/components/HomeMenuCards2.vue b/components/HomeMenuCards2.vue
deleted file mode 100644
index 7f27210..0000000
--- a/components/HomeMenuCards2.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-
-interface Menu {
-    label: string
-    description: string
-    photo: string
-    icon: any
-    to: string
-}
-
-const props = defineProps<{
-    menus: Menu[]
-}>()
-</script>
-
-<template>
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2 mb-6">
-        <UCard v-for="menu in menus" :key="menu.label" class="p-4 custom-shadow hover:shadow-xl">
-
-            <NuxtLink :to="menu.to" class="flex items-start">
-                <div class="flex-shrink-0 mr-4">
-                    <div class="w-14 h-14 rounded-full bg-green-100 flex items-center justify-center">
-                        <UIcon :name="menu.icon" class="w-8 h-8 text-green-700" />
-                    </div>
-                </div>
-                <div>
-                    <h2 class="text-md font-bold text-green-700">{{ menu.label }}</h2>
-                    <p class="text-gray-700 text-sm">{{ menu.description }}</p>
-                </div>
-            </NuxtLink>
-        </UCard>
-    </div>
-</template>
\ No newline at end of file
diff --git a/components/HomeNews.vue b/components/HomeNews.vue
new file mode 100644
index 0000000..dbf4b69
--- /dev/null
+++ b/components/HomeNews.vue
@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+const starNews = [
+  {
+    _path: "/budget-senegal",
+    title: "Suivi du Budget du Sénégal",
+    date: "2024-09-05",
+    category: "Tableau de bord",
+    image: "/images/actualites/budget-2024.PNG",
+  },
+  {
+    _path: "/publications/actualites/discours-president-diomaye-focac",
+    title: "Discours du président Diomaye au sommet du forum Sino-Africain",
+    date: "2024-09-05",
+    category: "Discours",
+    image: "/images/actualites/diomaye-chine-focac-1.jpeg",
+  },
+  {
+    _path:
+      "/publications/actualites/reunion-interministerielle-sur-leconomie-denergie",
+    title: "Réunion interministérielle sur l'économie d'énergie",
+    date: "2024-08-30",
+    category: "Conseil interministériel",
+    image:
+      "/images/actualites/reunion-interministerielle-sur-leconomie-denergie.jpeg",
+  },
+  {
+    _path: "/conseil-des-ministres/conseil-des-ministres-du-28-aout-2024",
+    title: "Conseil des ministres du Mercredi 28 août 2024",
+    date: "2024-08-28",
+    category: "Conseil des ministres",
+    image: "/images/communique-conseil-des-ministres.jpeg",
+  },
+];
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+    <UCard
+      v-for="item in starNews"
+      :key="item._path"
+      class="custom-shadow cursor-pointer"
+    >
+      <NuxtLink :to="item._path" class="flex flex-row sm:flex-col">
+        <div class="mb-0 mr-4 w-1/3 sm:mb-4 sm:mr-0 sm:w-full">
+          <NuxtImg
+            :src="item.image"
+            :alt="item.title"
+            class="h-24 w-full object-cover sm:h-48"
+            loading="lazy"
+            fetchpriority="high"
+            sizes="300px"
+            :placeholder="[300, 300]"
+          />
+        </div>
+        <div class="flex-1">
+          <div
+            class="siteweb-type my-1 inline-block bg-gray-200 px-2 py-1 text-xs text-gray-800"
+          >
+            {{ item.category }}
+          </div>
+
+          <p class="font-semibold">
+            {{ item.title }}
+          </p>
+          <div class="text-sm text-gray-800">
+            {{ $dateformatWithDayName(item.date) }}
+          </div>
+        </div>
+      </NuxtLink>
+    </UCard>
+  </div>
+</template>
diff --git a/components/NewsletterForm.vue b/components/NewsletterForm.vue
index 5804a37..4efb893 100644
--- a/components/NewsletterForm.vue
+++ b/components/NewsletterForm.vue
@@ -1,64 +1,85 @@
 <template>
-  <div class="newsletter-form mx-auto max-w-md">
-    <form @submit.prevent="submitForm" v-if="!formSubmitted" class="space-y-4">
+  <div class="newsletter-form mx-auto max-w-lg">
+    <form v-if="!formSubmitted" class="space-y-4" @submit.prevent="submitForm">
       <UFormGroup label="Adresse e-mail" name="email" class="w-full">
-        <UInput v-model="email" type="email" name="email" autocomplete="email" required
-          placeholder="votremail@exemple.com" :disabled="isLoading" class="w-full" />
+        <UInput
+          v-model="email"
+          type="email"
+          name="email"
+          autocomplete="email"
+          required
+          placeholder="votremail@exemple.com"
+          :disabled="isLoading"
+          class="w-full"
+        />
       </UFormGroup>
-      <UButton type="submit" :loading="isLoading" :disabled="!isValidEmail" color="primary" class="w-full">
-        {{ isLoading ? 'Envoi en cours...' : 'S\'abonner à la newsletter' }}
+      <UButton
+        type="submit"
+        :loading="isLoading"
+        :disabled="!isValidEmail"
+        color="primary"
+        class="w-full"
+      >
+        {{ isLoading ? "Envoi en cours..." : "S'abonner à la newsletter" }}
       </UButton>
     </form>
-    <UAlert v-if="formSubmitted" :type="isError ? 'danger' : 'success'" :title="isError ? 'Erreur' : 'Succès'"
-      :description="message" class="mt-4" icon />
-    <p v-if="!formSubmitted" class="text-sm text-gray-500 mt-2">
-      En vous abonnant, vous acceptez de recevoir nos newsletters. Vous pourrez vous désabonner à tout moment.
+    <UAlert
+      v-if="formSubmitted"
+      :type="isError ? 'danger' : 'success'"
+      :title="isError ? 'Erreur' : 'Succès'"
+      :description="message"
+      class="mt-4"
+      icon
+    />
+    <p v-if="!formSubmitted" class="mt-2 text-sm text-gray-500">
+      En vous abonnant, vous acceptez de recevoir nos newsletters. Vous pourrez
+      vous désabonner à tout moment.
     </p>
   </div>
 </template>
 
 <script lang="ts" setup>
-
-const email = ref('')
-const message = ref('')
-const isLoading = ref(false)
-const formSubmitted = ref(false)
-const isError = ref(false)
+const email = ref("");
+const message = ref("");
+const isLoading = ref(false);
+const formSubmitted = ref(false);
+const isError = ref(false);
 
 const isValidEmail = computed(() => {
-  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-  return emailRegex.test(email.value)
-})
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email.value);
+});
 
 const submitForm = async () => {
   if (!isValidEmail.value) {
-    message.value = "Veuillez entrer une adresse e-mail valide."
-    isError.value = true
-    formSubmitted.value = true
-    return
+    message.value = "Veuillez entrer une adresse e-mail valide.";
+    isError.value = true;
+    formSubmitted.value = true;
+    return;
   }
 
-  isLoading.value = true
+  isLoading.value = true;
   try {
-    const { data } = await useFetch('/api/brevo', {
-      method: 'POST',
-      body: { email: email.value }
-    })
+    const { data } = await useFetch("/api/brevo", {
+      method: "POST",
+      body: { email: email.value },
+    });
 
     if (data.value?.success) {
-      message.value = 'Inscription réussie ! Merci de vous être abonné à notre newsletter.'
-      formSubmitted.value = true
-      isError.value = false
+      message.value =
+        "Inscription réussie ! Merci de vous être abonné à notre newsletter.";
+      formSubmitted.value = true;
+      isError.value = false;
     } else {
-      throw new Error(data.value?.error || 'Une erreur est survenue')
+      throw new Error(data.value?.error || "Une erreur est survenue");
     }
   } catch (error) {
-    console.error('Erreur lors de l\'inscription:', error)
-    message.value = 'Une erreur est survenue. Veuillez réessayer.'
-    formSubmitted.value = true
-    isError.value = true
+    console.error("Erreur lors de l'inscription:", error);
+    message.value = "Une erreur est survenue. Veuillez réessayer.";
+    formSubmitted.value = true;
+    isError.value = true;
   } finally {
-    isLoading.value = false
+    isLoading.value = false;
   }
-}
-</script>
\ No newline at end of file
+};
+</script>
diff --git a/components/NewsletterModal.vue b/components/NewsletterModal.vue
index 02701e9..29a7303 100644
--- a/components/NewsletterModal.vue
+++ b/components/NewsletterModal.vue
@@ -10,23 +10,22 @@
 </template>
 
 <script lang="ts" setup>
-
-const isOpen = ref(false)
+const isOpen = ref(false);
 
 const open = () => {
-  isOpen.value = true
-}
+  isOpen.value = true;
+};
 
 const close = () => {
-  isOpen.value = false
-}
+  isOpen.value = false;
+};
 
 const handleSuccess = () => {
   // Fermer le modal après un court délai pour que l'utilisateur puisse voir le message de succès
   setTimeout(() => {
-    close()
-  }, 2000)
-}
+    close();
+  }, 2000);
+};
 
-defineExpose({ open, close })
-</script>
\ No newline at end of file
+defineExpose({ open, close });
+</script>
diff --git a/components/PromesseResume.vue b/components/PromesseResume.vue
index 72c72b1..b58dd88 100644
--- a/components/PromesseResume.vue
+++ b/components/PromesseResume.vue
@@ -1,60 +1,78 @@
 <template>
-    <div class="text-center max-w-md mx-auto">
-        <div class=" w-28 mx-auto mb-4">
-            <img src="/images/diomaye-officielle-1.jfif" alt="Diomaye Faye" class="object-cover w-28" fetchpriority="high" />
-        </div>
-        <h2 class="text-3xl font-bold mb-1">Diomaye Faye</h2>
-        <p class="text-xl mb-4">(2024-2029)</p>
-        <div class="h-1 w-16 bg-gray-500 mx-auto mb-4"></div>
-
-        <p class="font-bold text-xl mb-6">{{ stats.total }} PROMESSES IDENTIFIÉS</p>
-
-        <div class="space-y-2 text-left mb-6">
-            <div v-for="(item, key) in statsDisplay" :key="key" class="flex items-center">
-                <span class="w-24 text-right mr-2 font-bold">{{ item.count }}</span>
-                <span class="w-32 uppercase text-sm">{{ item.label }}</span>
-                <div class="flex-grow h-4 bg-gray-200">
-                    <div :class="item.color" :style="{ width: `${(item.count / stats.total) * 100}%` }" class="h-full">
-                    </div>
-                </div>
-            </div>
+  <div class="mx-auto max-w-md text-center">
+    <div class="mx-auto mb-4 w-28">
+      <img
+        src="/images/diomaye-officielle-1.jfif"
+        alt="Diomaye Faye"
+        class="w-28 object-cover"
+      />
+    </div>
+    <h2 class="mb-1 text-3xl font-bold">Diomaye Faye</h2>
+    <p class="mb-4 text-xl">(2024-2029)</p>
+    <div class="mx-auto mb-4 h-1 w-16 bg-gray-500"></div>
+
+    <p class="mb-6 text-xl font-bold">{{ stats.total }} PROMESSES IDENTIFIÉS</p>
+
+    <div class="mb-6 space-y-2 text-left">
+      <div
+        v-for="(item, key) in statsDisplay"
+        :key="key"
+        class="flex items-center"
+      >
+        <span class="mr-2 w-24 text-right font-bold">{{ item.count }}</span>
+        <span class="w-40 text-sm uppercase">{{ item.label }}</span>
+        <div class="h-4 flex-grow bg-gray-200">
+          <div
+            :class="item.color"
+            :style="{ width: `${(item.count / stats.total) * 100}%` }"
+            class="h-full"
+          ></div>
         </div>
+      </div>
+    </div>
 
-        <!-- <UButton to="/barometre-politique/diomaye-faye" class="mb-4">
+    <!-- <UButton to="/barometre-politique/diomaye-faye" class="mb-4">
             Explorer les promesses
         </UButton> -->
 
-        <NuxtLink to="/barometre-politique/diomaye-faye" class="mt-4">
-            <p class="font-semibold underline">
-                Explorer les promesses ›
-            </p>
-        </NuxtLink>
-
+    <NuxtLink to="/barometre-politique/diomaye-faye" class="mt-4">
+      <p class="font-semibold underline">Explorer les promesses ›</p>
+    </NuxtLink>
 
-        <p class="text-sm text-gray-500 mt-4">
-            Mis à jour le 17 Aout 2024
-        </p>
+    <p class="mt-4 text-sm text-gray-500">Mis à jour le 17 Aout 2024</p>
 
-        <NuxtLink to="/about/barometre">
-            <p class="text-md text-gray-500 underline mt-4">
-                En savoir plus sur la démarche ›
-            </p>
-        </NuxtLink>
-    </div>
+    <NuxtLink to="/about/barometre">
+      <p class="text-md mt-4 text-gray-500 underline">
+        En savoir plus sur la démarche ›
+      </p>
+    </NuxtLink>
+  </div>
 </template>
 
 <script setup lang="ts">
 import type { PromesseStats } from "~/types/promesse";
 
 const props = defineProps<{
-    stats: PromesseStats
+  stats: PromesseStats;
 }>();
 
 const statsDisplay = computed(() => [
-    { count: props.stats.tenues, label: 'Tenues', color: 'bg-green-600' },
-    { count: props.stats.non_tenues, label: 'Non tenues', color: 'bg-red-600' },
-    { count: props.stats.en_cours, label: 'Partiellement', color: 'bg-orange-500' },
-    { count: props.stats.inevaluables, label: 'Inévaluables', color: 'bg-gray-600' },
-    { count: props.stats.non_evaluees, label: 'Non évaluées', color: 'bg-gray-400' },
+  { count: props.stats.tenues, label: "Tenues", color: "bg-green-600" },
+  { count: props.stats.non_tenues, label: "Non tenues", color: "bg-red-600" },
+  {
+    count: props.stats.en_cours,
+    label: "Partiellement",
+    color: "bg-orange-500",
+  },
+  {
+    count: props.stats.inevaluables,
+    label: "Inévaluables",
+    color: "bg-gray-600",
+  },
+  {
+    count: props.stats.non_evaluees,
+    label: "Attente d'évaluation",
+    color: "bg-gray-400",
+  },
 ]);
-</script>
\ No newline at end of file
+</script>
diff --git a/components/ScrollToTopButton.vue b/components/ScrollToTopButton.vue
index 31380aa..e461b35 100644
--- a/components/ScrollToTopButton.vue
+++ b/components/ScrollToTopButton.vue
@@ -1,27 +1,31 @@
 <script setup lang="ts">
-
-const showButton = ref(false)
+const showButton = ref(false);
 
 const checkScroll = (): void => {
-    showButton.value = window.scrollY > 300
-}
+  showButton.value = window.scrollY > 300;
+};
 
 const scrollToTop = (): void => {
-    window.scrollTo({ top: 0, behavior: 'smooth' })
-}
+  window.scrollTo({ top: 0, behavior: "smooth" });
+};
 
 onMounted(() => {
-    window.addEventListener('scroll', checkScroll)
-})
+  window.addEventListener("scroll", checkScroll);
+});
 
 onUnmounted(() => {
-    window.removeEventListener('scroll', checkScroll)
-})
+  window.removeEventListener("scroll", checkScroll);
+});
 </script>
 
 <template>
-    <UButton v-show="showButton" @click="scrollToTop" :ui="{ rounded: 'rounded-full' }"
-        class="fixed bottom-4 right-4 bg-primary text-white p-2 shadow-lg" icon="i-heroicons-arrow-up-circle">
-        Sommaire
-    </UButton>
-</template>
\ No newline at end of file
+  <UButton
+    v-show="showButton"
+    :ui="{ rounded: 'rounded-full' }"
+    class="bg-primary fixed bottom-4 right-4 p-2 text-white shadow-lg"
+    icon="i-heroicons-arrow-up-circle"
+    @click="scrollToTop"
+  >
+    Sommaire
+  </UButton>
+</template>
diff --git a/components/footer.vue b/components/footer.vue
deleted file mode 100644
index 59b29c2..0000000
--- a/components/footer.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script setup lang="ts">
-const currentYear = new Date().getFullYear();
-const version = "13-07";
-
-const links = [
-  {
-    label: 'À Propos',
-    to: '/about/us',
-  },
-  {
-    label: 'Règles de confidentialité',
-    to: '/about/privacy',
-  },
-  {
-    label: 'Twitter',
-    to: 'https://twitter.com/malick_yacine',
-  },
-  {
-    label: 'Linkedin',
-    to: 'https://www.linkedin.com/in/malicktech',
-  }
-]
-
-</script>
-
-<template>
-  <div class="w-full h-px bg-gray-200 dark:bg-gray-800 flex items-center justify-center mt-5">
-    <div class="bg-transparent dark:bg-gray-900 px-4">
-    </div>
-  </div>
-
-  <footer class="relative mx-auto sm:px-6 lg:px-8 py-8 lg:py-4 lg:flex lg:items-center lg:justify-between lg:gap-x-3">
-    <ul class="flex flex-col md:flex-row items-center justify-center gap-4 lg:gap-6">
-      <li class="relative">
-        <p class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
-          version {{ version }} &copy; {{ currentYear }} </p>
-      </li>
-      <li class="relative" v-for="link in links">
-        <ULink :to="link.to"
-          class="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 underline">
-          {{ link.label }}
-        </ULink>
-      </li>
-    </ul>
-  </footer>
-</template>
-
-<style scoped>
-footer {
-  border-top: 2px solid #fff;
-  -o-border-image: linear-gradient(45deg, green 33%, #ff0 67%, red) 5;
-  border-image: linear-gradient(45deg, green 33%, #ff0 67%, red) 5;
-  /* border-image: linear-gradient(90deg, green 33%, #ff0 34%, #ff0 66%, red 67%) 5; */
-}
-</style>
\ No newline at end of file
diff --git a/components/submenu.vue b/components/submenu.vue
index 03db88e..2917a63 100644
--- a/components/submenu.vue
+++ b/components/submenu.vue
@@ -1,28 +1,25 @@
 <script setup lang="ts">
 const links = [
-    {
-        label: 'Rapports publics',
-        to: '/',
-    },
-    {
-        label: 'Personnes épinglées',
-        to: '/individuals-cited',
-    },
-
-]
+  {
+    label: "Rapports publics",
+    to: "/",
+  },
+  {
+    label: "Personnes épinglées",
+    to: "/individuals-cited",
+  },
+];
 </script>
 
 <template>
-
-    <!-- <UHorizontalNavigation :links="links"
+  <!-- <UHorizontalNavigation :links="links"
         class="flex border-b border-gray-200 dark:border-gray-800 mx-auto mb-3 top-0 z-50 justify-center">
         <template #default="{ link }">
             <span class="text-sm group-hover:text-primary relative">{{ link.label }}</span>
         </template>
 </UHorizontalNavigation> -->
 
-    <!-- <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800" /> -->
-
-    <UHorizontalNavigation :links="links" class="justify-center" />
+  <!-- <UHorizontalNavigation :links="links" class="border-b border-gray-200 dark:border-gray-800" /> -->
 
-</template>
\ No newline at end of file
+  <UHorizontalNavigation :links="links" class="justify-center" />
+</template>
diff --git a/composables/useInstitution.ts b/composables/useInstitution.ts
new file mode 100644
index 0000000..f4622a5
--- /dev/null
+++ b/composables/useInstitution.ts
@@ -0,0 +1,15 @@
+// composables/useInstitution.ts
+
+export function getInstitutionColor(index: number): string {
+  const colors = [
+    "#4299E1",
+    "#48BB78",
+    "#ED8936",
+    "#ECC94B",
+    "#9F7AEA",
+    "#ED64A6",
+    "#38B2AC",
+    "#F56565",
+  ];
+  return colors[index % colors.length];
+}
diff --git a/composables/usePromesseStatus.ts b/composables/usePromesseStatus.ts
new file mode 100644
index 0000000..1dc7bb9
--- /dev/null
+++ b/composables/usePromesseStatus.ts
@@ -0,0 +1,53 @@
+// composables/useStatus.ts
+
+export function getStatusIcon(status: string): string {
+  const statusIcons: { [key: string]: string } = {
+    "non tenue": "i-heroicons-x-circle",
+    "en cours": "i-heroicons-arrow-path",
+    tenue: "i-heroicons-check-circle",
+    "non évaluée": "i-heroicons-question-mark-circle",
+  };
+
+  return (
+    statusIcons[status.toLowerCase()] || "i-heroicons-question-mark-circle"
+  );
+}
+
+export function getStatusBackgroundClass(status: string): string {
+  switch (status.toLowerCase()) {
+    case "tenue":
+      return "bg-green-100";
+    case "non tenue":
+      return "bg-red-100";
+    case "en cours":
+      return "bg-yellow-100";
+    default:
+      return "bg-gray-100";
+  }
+}
+
+export function getStatusIconClass(status: string): string {
+  switch (status.toLowerCase()) {
+    case "tenue":
+      return "text-green-600";
+    case "non tenue":
+      return "text-red-600";
+    case "en cours":
+      return "text-yellow-600";
+    default:
+      return "text-gray-600";
+  }
+}
+
+export function getStatusTextClass(status: string): string {
+  switch (status.toLowerCase()) {
+    case "tenue":
+      return "text-green-800";
+    case "non tenue":
+      return "text-red-800";
+    case "en cours":
+      return "text-yellow-800";
+    default:
+      return "text-gray-800";
+  }
+}
diff --git a/layouts/default.vue b/layouts/default.vue
index 6a5211c..9f9495a 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -2,4 +2,4 @@
   <UContainer class="min-h-96">
     <slot />
   </UContainer>
-</template>
\ No newline at end of file
+</template>
diff --git a/plugins/utils.ts b/plugins/utils.ts
index 2e3fa5b..b275228 100644
--- a/plugins/utils.ts
+++ b/plugins/utils.ts
@@ -27,7 +27,7 @@ export default defineNuxtPlugin(() => {
         const day = date.getDate();
         const month = monthNames[date.getMonth()];
         const year = date.getFullYear();
-        var days = [
+        const days = [
           "Dimanche",
           "Lundi",
           "Mardi",
@@ -36,7 +36,7 @@ export default defineNuxtPlugin(() => {
           "Vendredi",
           "Samedi",
         ];
-        var dayName = days[date.getDay()];
+        const dayName = days[date.getDay()];
         return `${dayName} ${day} ${month} ${year}`;
       },
       dateMonthYearformat: (dateStr: string) => {
diff --git a/server/api/__sitemap__/urls.ts b/server/api/__sitemap__/urls.ts
index 71bd7b3..bf50667 100644
--- a/server/api/__sitemap__/urls.ts
+++ b/server/api/__sitemap__/urls.ts
@@ -4,7 +4,7 @@ import reportsData from "@/assets/data/rapports-liste.json";
 export default defineSitemapEventHandler(async (event) => {
   // Générer un tableau de chaînes d'URL pour les rapports
   const reportUrls = reportsData.map(
-    (report) => `/rapport-senegal/${report.slug}`
+    (report) => `/rapport-senegal/${report.slug}`,
   );
 
   // Récupérer toutes les pages du dossier content
diff --git a/server/api/aide-presse.ts b/server/api/aide-presse.ts
index 987a432..f6961dd 100644
--- a/server/api/aide-presse.ts
+++ b/server/api/aide-presse.ts
@@ -1,5 +1,5 @@
 import aides from "~/assets/data/fadp.json";
-import { AidePresse } from "~/types/aide-presse-type";
+import type { AidePresse } from "~/types/aide-presse-type";
 
 export default defineEventHandler((): AidePresse[] => {
   return aides;
diff --git a/server/api/barometre-politique/diomaye-faye.ts b/server/api/barometre-politique/diomaye-faye.ts
index 9f2813c..70513e4 100644
--- a/server/api/barometre-politique/diomaye-faye.ts
+++ b/server/api/barometre-politique/diomaye-faye.ts
@@ -1,7 +1,6 @@
 // /server/api/barometre-politique/diomaye-faye.ts
 import promesses from "~/assets/data/barometre-diomaye.json";
-import { Promesse } from "~/types/promesse";
-import { PromesseStats } from "~/types/promesse";
+import type { Promesse, PromesseStats } from "~/types/promesse";
 
 function calculateStats(promesses: Promesse[]): PromesseStats {
   const stats: PromesseStats = {
diff --git a/server/api/budget-lfi.ts b/server/api/budget-lfi.ts
new file mode 100644
index 0000000..718e9a3
--- /dev/null
+++ b/server/api/budget-lfi.ts
@@ -0,0 +1,6 @@
+import data from "~/assets/data/budget-2024-lfi.json";
+// import { GovernmentMember } from "~/types/government-member";
+
+export default defineEventHandler((): any => {
+  return data;
+});
diff --git a/server/api/budget-q1.ts b/server/api/budget-q1.ts
new file mode 100644
index 0000000..90f9633
--- /dev/null
+++ b/server/api/budget-q1.ts
@@ -0,0 +1,5 @@
+import data from "~/assets/data/budget-2024-q1.json";
+
+export default defineEventHandler((): any => {
+  return data;
+});
diff --git a/server/api/nominations-magistrature.ts b/server/api/nominations-magistrature.ts
index f9f5316..d9941a5 100644
--- a/server/api/nominations-magistrature.ts
+++ b/server/api/nominations-magistrature.ts
@@ -1,10 +1,10 @@
 import magistratureMembers from "~/assets/data/nominations-magistrature.json";
-import { MagistratureType } from "~/types/magistrature-type";
+import type { MagistratureType } from "~/types/magistrature-type";
 
 export default defineEventHandler((): MagistratureType[] => {
   return magistratureMembers.sort(
     (a, b) =>
       new Date(b.date_nomination).getTime() -
-      new Date(a.date_nomination).getTime()
+      new Date(a.date_nomination).getTime(),
   );
 });
diff --git a/server/api/nominations.ts b/server/api/nominations.ts
new file mode 100644
index 0000000..729c4ec
--- /dev/null
+++ b/server/api/nominations.ts
@@ -0,0 +1,10 @@
+import governmentMembers from "~/assets/data/nominations.json";
+import type { GovernmentMember } from "~/types/government-member";
+
+export default defineEventHandler((): GovernmentMember[] => {
+  return governmentMembers.sort(
+    (a, b) =>
+      new Date(b.nominationDate).getTime() -
+      new Date(a.nominationDate).getTime(),
+  );
+});
diff --git a/server/api/quiz-image.ts b/server/api/quiz-image.ts
index c4df339..f22aa42 100644
--- a/server/api/quiz-image.ts
+++ b/server/api/quiz-image.ts
@@ -1,5 +1,5 @@
 import questions from "~/assets/data/quiz-photos.json";
-import { Question } from "~/types/question";
+import type { Question } from "~/types/question";
 
 export default defineEventHandler((): Question[] => {
   return questions;
diff --git a/server/api/quiz-text.ts b/server/api/quiz-text.ts
index ed42233..1274930 100644
--- a/server/api/quiz-text.ts
+++ b/server/api/quiz-text.ts
@@ -1,5 +1,5 @@
 import questions from "~/assets/data/quiz-text.json";
-import { Question } from "~/types/question";
+import type { Question } from "~/types/question";
 
 export default defineEventHandler((): Question[] => {
   return questions;
diff --git a/stores/promesseStore.ts b/stores/promesseStore.ts
new file mode 100644
index 0000000..72ca02a
--- /dev/null
+++ b/stores/promesseStore.ts
@@ -0,0 +1,15 @@
+// stores/itemStore.ts
+import { defineStore } from "pinia";
+import type { Promesse } from "~/types/promesse";
+
+export const usePromesseStore = defineStore("promesse", {
+  state: () => ({
+    items: [] as Promesse[],
+    selectedItem: null as Promesse | null,
+  }),
+  actions: {
+    selectItem(item: Promesse) {
+      this.selectedItem = item;
+    },
+  },
+});
diff --git a/types/journal.ts b/types/journal.ts
index f8ebb21..6f15d8d 100644
--- a/types/journal.ts
+++ b/types/journal.ts
@@ -1,5 +1,4 @@
 export type Journal = {
-    numero: string;
-    date: string;
-  };
-  
\ No newline at end of file
+  numero: string;
+  date: string;
+};