diff --git a/public/package-lock.json b/public/package-lock.json
index 65102c69e4..cad74e12d1 100644
--- a/public/package-lock.json
+++ b/public/package-lock.json
@@ -3253,9 +3253,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001593",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001593.tgz",
-      "integrity": "sha512-UWM1zlo3cZfkpBysd7AS+z+v007q9G1+fLTUU42rQnY6t2axoogPW/xol6T7juU5EUoOhML4WgBIdG+9yYqAjQ==",
+      "version": "1.0.30001687",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001687.tgz",
+      "integrity": "sha512-0S/FDhf4ZiqrTUiQ39dKeUjYRjkv7lOZU1Dgif2rIqrTzX/1wV2hfKu9TOm1IHkdSijfLswxTFzl/cvir+SLSQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -3269,7 +3269,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/cartocolor": {
       "version": "4.0.2",
diff --git a/public/src/app/observatoire/territoire/Dashboard.tsx b/public/src/app/observatoire/territoire/Dashboard.tsx
index 43ac4616cc..21a2717160 100644
--- a/public/src/app/observatoire/territoire/Dashboard.tsx
+++ b/public/src/app/observatoire/territoire/Dashboard.tsx
@@ -1,21 +1,21 @@
 'use client'
 import SectionTitle from '@/components/common/SectionTitle';
 import SelectInList from '@/components/common/SelectInList';
+import SelectMonth from '@/components/observatoire/SelectMonth';
 import SelectObserve from '@/components/observatoire/SelectObserve';
 import SelectPeriod from '@/components/observatoire/SelectPeriod';
+import SelectSemester from '@/components/observatoire/SelectSemester';
 import SelectTerritory from '@/components/observatoire/SelectTerritory';
-import { DashboardContext } from '@/context/DashboardProvider';
+import SelectTrimester from '@/components/observatoire/SelectTrimester';
+import SelectYear from '@/components/observatoire/SelectYear';
+import { GetPeriod } from '@/helpers/dashboard';
 import { graphList, mapList } from '@/helpers/lists';
+import { useDashboard } from '@/hooks/useDashboard';
 import { PerimeterType } from '@/interfaces/observatoire/Perimeter';
 import { fr } from '@codegouvfr/react-dsfr';
 import CircularProgress from '@mui/material/CircularProgress';
 import { useSearchParams } from 'next/navigation';
-import { useContext, useEffect } from 'react';
-import SelectMonth from '../../../components/observatoire/SelectMonth';
-import SelectSemester from '../../../components/observatoire/SelectSemester';
-import SelectTrimester from '../../../components/observatoire/SelectTrimester';
-import SelectYear from '../../../components/observatoire/SelectYear';
-import { GetPeriod } from '../../../helpers/dashboard';
+import { useEffect } from 'react';
 import DistanceGraph from './graphs/DistanceGraph';
 import FluxGraph from './graphs/FluxGraph';
 import IncentiveGraph from './graphs/IncentiveGraph';
@@ -32,7 +32,7 @@ import BestTerritoriesTable from './tables/BestTerritoriesTable';
 
 export default function Dashboard() {
   const searchParams = useSearchParams();
-  const { dashboard } =useContext(DashboardContext);
+  const dashboard =useDashboard();
   const period = GetPeriod();
   const observeLabel = dashboard.params.map == 1 ? 'Flux entre:' : 'Territoires observés';
   useEffect(() => {
diff --git a/public/src/app/observatoire/territoire/KeyFigures.tsx b/public/src/app/observatoire/territoire/KeyFigures.tsx
index a234fa159a..98b630ffe0 100644
--- a/public/src/app/observatoire/territoire/KeyFigures.tsx
+++ b/public/src/app/observatoire/territoire/KeyFigures.tsx
@@ -1,14 +1,13 @@
 import Rows from '@/components/observatoire/indicators/Rows';
 import { Config } from '@/config';
-import { DashboardContext } from '@/context/DashboardProvider';
 import { useApi } from '@/hooks/useApi';
 import { IndicatorProps } from '@/interfaces/observatoire/componentsInterfaces';
 import { KeyFiguresDataInterface } from '@/interfaces/observatoire/dataInterfaces';
 import { fr } from '@codegouvfr/react-dsfr';
-import { useContext } from 'react';
+import { useDashboardContext } from '../../../context/DashboardProvider';
 
 export default function KeyFigures() {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
   const apiUrl = Config.get<string>('next.public_api_url', '');
   const url = () => {
     const params = [
diff --git a/public/src/app/observatoire/territoire/graphs/DistanceGraph.tsx b/public/src/app/observatoire/territoire/graphs/DistanceGraph.tsx
index f80f10f6b9..cb111e2336 100644
--- a/public/src/app/observatoire/territoire/graphs/DistanceGraph.tsx
+++ b/public/src/app/observatoire/territoire/graphs/DistanceGraph.tsx
@@ -1,5 +1,6 @@
 import DownloadButton from '@/components/observatoire/DownloadButton';
-import { DashboardContext } from '@/context/DashboardProvider';
+import { GetApiUrl } from '@/helpers/api';
+import { chartLabels } from '@/helpers/graph';
 import { useApi } from '@/hooks/useApi';
 import { fr } from '@codegouvfr/react-dsfr';
 import {
@@ -13,15 +14,13 @@ import {
   Title,
   Tooltip,
 } from 'chart.js';
-import { useContext } from 'react';
 import { Line } from 'react-chartjs-2';
-import { GetApiUrl } from '../../../../helpers/api';
-import { chartLabels } from '../../../../helpers/graph';
+import { useDashboardContext } from '../../../../context/DashboardProvider';
 
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler);
 
 export default function DistanceGraph({ title }: { title: string }) {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
   const options = {
     responsive: true,
     plugins: {
diff --git a/public/src/app/observatoire/territoire/graphs/FluxGraph.tsx b/public/src/app/observatoire/territoire/graphs/FluxGraph.tsx
index 96171b15fd..2ff05ba9e8 100644
--- a/public/src/app/observatoire/territoire/graphs/FluxGraph.tsx
+++ b/public/src/app/observatoire/territoire/graphs/FluxGraph.tsx
@@ -1,5 +1,6 @@
 import DownloadButton from '@/components/observatoire/DownloadButton';
-import { DashboardContext } from '@/context/DashboardProvider';
+import { GetApiUrl } from '@/helpers/api';
+import { chartLabels } from '@/helpers/graph';
 import { useApi } from '@/hooks/useApi';
 import { FluxIndicators } from '@/interfaces/observatoire/componentsInterfaces';
 import { fr } from '@codegouvfr/react-dsfr';
@@ -14,15 +15,13 @@ import {
   Title,
   Tooltip,
 } from 'chart.js';
-import { useContext } from 'react';
 import { Line } from 'react-chartjs-2';
-import { GetApiUrl } from '../../../../helpers/api';
-import { chartLabels } from '../../../../helpers/graph';
+import { useDashboardContext } from '../../../../context/DashboardProvider';
 
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler);
 
 export default function TrajetsGraph({ title,indic }: { title: string, indic:FluxIndicators }) {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
   const options = {
     responsive: true,
     plugins: {
diff --git a/public/src/app/observatoire/territoire/graphs/IncentiveGraph.tsx b/public/src/app/observatoire/territoire/graphs/IncentiveGraph.tsx
index 489f21effd..8f1a430fa0 100644
--- a/public/src/app/observatoire/territoire/graphs/IncentiveGraph.tsx
+++ b/public/src/app/observatoire/territoire/graphs/IncentiveGraph.tsx
@@ -1,18 +1,17 @@
 import DownloadButton from '@/components/observatoire/DownloadButton';
-import { DashboardContext } from '@/context/DashboardProvider';
+import { GetApiUrl } from '@/helpers/api';
 import { useApi } from '@/hooks/useApi';
 import { IncentiveDataInterface } from '@/interfaces/observatoire/dataInterfaces';
 import { fr } from '@codegouvfr/react-dsfr';
 import { ArcElement, ChartData, Chart as ChartJS, Legend, Title, Tooltip } from 'chart.js';
 import ChartDataLabels, { Context } from 'chartjs-plugin-datalabels';
-import { useContext } from 'react';
 import { Doughnut } from 'react-chartjs-2';
-import { GetApiUrl } from '../../../../helpers/api';
+import { useDashboardContext } from '../../../../context/DashboardProvider';
 
 ChartJS.register(ArcElement, Title, Tooltip, Legend);
 
 export default function IncentiveGraph({ title }: { title: string }) {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
   const options = {
     responsive: true,
     maintainAspectRatio: false,
diff --git a/public/src/app/observatoire/territoire/graphs/OccupationGraph.tsx b/public/src/app/observatoire/territoire/graphs/OccupationGraph.tsx
index d947d06350..3d19e54058 100644
--- a/public/src/app/observatoire/territoire/graphs/OccupationGraph.tsx
+++ b/public/src/app/observatoire/territoire/graphs/OccupationGraph.tsx
@@ -1,5 +1,6 @@
 import DownloadButton from '@/components/observatoire/DownloadButton';
-import { DashboardContext } from '@/context/DashboardProvider';
+import { GetApiUrl } from '@/helpers/api';
+import { chartLabels } from '@/helpers/graph';
 import { useApi } from '@/hooks/useApi';
 import { OccupationIndicators } from '@/interfaces/observatoire/componentsInterfaces';
 import { fr } from '@codegouvfr/react-dsfr';
@@ -14,15 +15,13 @@ import {
   Title,
   Tooltip,
 } from 'chart.js';
-import { useContext } from 'react';
 import { Line } from 'react-chartjs-2';
-import { GetApiUrl } from '../../../../helpers/api';
-import { chartLabels } from '../../../../helpers/graph';
+import { useDashboardContext } from '../../../../context/DashboardProvider';
 
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler);
 
 export default function TrajetsGraph({ title,indic }: { title: string, indic:OccupationIndicators }) {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
   const options = {
     responsive: true,
     plugins: {
diff --git a/public/src/app/observatoire/territoire/graphs/RepartitionDistanceGraph.tsx b/public/src/app/observatoire/territoire/graphs/RepartitionDistanceGraph.tsx
index 07d4d94c91..fdd2e8369d 100644
--- a/public/src/app/observatoire/territoire/graphs/RepartitionDistanceGraph.tsx
+++ b/public/src/app/observatoire/territoire/graphs/RepartitionDistanceGraph.tsx
@@ -1,18 +1,17 @@
 import DownloadButton from '@/components/observatoire/DownloadButton';
-import { DashboardContext } from '@/context/DashboardProvider';
+import { GetApiUrl } from '@/helpers/api';
 import { useApi } from '@/hooks/useApi';
 import { DistributionDistanceDataInterface } from '@/interfaces/observatoire/dataInterfaces';
 import { fr } from '@codegouvfr/react-dsfr';
 import { ArcElement, ChartData, Chart as ChartJS, Legend, Title, Tooltip } from 'chart.js';
 import ChartDataLabels, { Context } from 'chartjs-plugin-datalabels';
-import { useContext } from 'react';
 import { Doughnut } from 'react-chartjs-2';
-import { GetApiUrl } from '../../../../helpers/api';
+import { useDashboardContext } from '../../../../context/DashboardProvider';
 
 ChartJS.register(ArcElement, Title, Tooltip, Legend);
 
 export default function RepartitionDistanceGraph({ title }: { title: string }) {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
   const options = {
     responsive: true,
     maintainAspectRatio: false,
diff --git a/public/src/app/observatoire/territoire/graphs/RepartitionHoraireGraph.tsx b/public/src/app/observatoire/territoire/graphs/RepartitionHoraireGraph.tsx
index 9d08bcf84b..b8fa151fbc 100644
--- a/public/src/app/observatoire/territoire/graphs/RepartitionHoraireGraph.tsx
+++ b/public/src/app/observatoire/territoire/graphs/RepartitionHoraireGraph.tsx
@@ -1,18 +1,17 @@
 import DownloadButton from '@/components/observatoire/DownloadButton';
-import { DashboardContext } from '@/context/DashboardProvider';
+import { GetApiUrl } from '@/helpers/api';
 import { useApi } from '@/hooks/useApi';
 import { Hour } from '@/interfaces/observatoire/Perimeter';
 import { DistributionHoraireDataInterface } from '@/interfaces/observatoire/dataInterfaces';
 import { fr } from '@codegouvfr/react-dsfr';
 import { BarElement, CategoryScale, ChartData, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js';
-import { useContext } from 'react';
 import { Bar } from 'react-chartjs-2';
-import { GetApiUrl } from '../../../../helpers/api';
+import { useDashboardContext } from '../../../../context/DashboardProvider';
 
 ChartJS.register(BarElement, CategoryScale, LinearScale, Title, Tooltip, Legend);
 
 export default function RepartitionHoraireGraph({ title }: { title: string }) {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
   const options = {
     responsive: true,
     maintainAspectRatio: false,
diff --git a/public/src/app/observatoire/territoire/maps/AiresMap.tsx b/public/src/app/observatoire/territoire/maps/AiresMap.tsx
index 0b32fbf85e..ca676f4867 100644
--- a/public/src/app/observatoire/territoire/maps/AiresMap.tsx
+++ b/public/src/app/observatoire/territoire/maps/AiresMap.tsx
@@ -1,7 +1,6 @@
 import DownloadButton from '@/components/observatoire/DownloadButton';
 import AppMap from '@/components/observatoire/maps/Map';
 import { Config } from '@/config';
-import { DashboardContext } from '@/context/DashboardProvider';
 import { useApi } from '@/hooks/useApi';
 import { useSwitchFilters } from '@/hooks/useSwitchFilters';
 import { ClasseInterface } from '@/interfaces/observatoire/componentsInterfaces';
@@ -13,11 +12,12 @@ import bbox from '@turf/bbox';
 import { feature, featureCollection } from '@turf/helpers';
 import { FeatureCollection } from 'geojson';
 import { LngLatBoundsLike } from 'maplibre-gl';
-import { useCallback, useContext, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { CircleLayer, Layer, Popup, Source } from 'react-map-gl/maplibre';
+import { useDashboardContext } from '../../../../context/DashboardProvider';
 
 export default function AiresCovoiturageMap({ title }: { title: string }) {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
   const mapTitle = title;
   const apiUrl = Config.get<string>('next.public_api_url', '');
   const url = `${apiUrl}/aires-covoiturage?code=${dashboard.params.code}&type=${dashboard.params.type}`;
diff --git a/public/src/app/observatoire/territoire/maps/DensiteMap.tsx b/public/src/app/observatoire/territoire/maps/DensiteMap.tsx
index cb93cff45e..6ba83a8385 100644
--- a/public/src/app/observatoire/territoire/maps/DensiteMap.tsx
+++ b/public/src/app/observatoire/territoire/maps/DensiteMap.tsx
@@ -1,7 +1,6 @@
 import DownloadButton from '@/components/observatoire/DownloadButton';
 import DeckMap from '@/components/observatoire/maps/DeckMap';
 import { Config } from '@/config';
-import { DashboardContext } from '@/context/DashboardProvider';
 import { classColor, jenks } from '@/helpers/analyse';
 import { useApi } from '@/hooks/useApi';
 import type { DensiteDataInterface } from '@/interfaces/observatoire/dataInterfaces';
@@ -11,10 +10,11 @@ import bbox from '@turf/bbox';
 import { multiPolygon } from '@turf/helpers';
 import { cellsToMultiPolygon } from 'h3-js';
 import { LngLatBoundsLike } from 'maplibre-gl';
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
+import { useDashboardContext } from '../../../../context/DashboardProvider';
 
 export default function DensiteMap({ title }: { title: string }) {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
   const mapTitle = title;
   const apiUrl = Config.get<string>('next.public_api_url', '');
   const url = `${apiUrl}/location?code=${dashboard.params.code}&type=${dashboard.params.type}&year=${dashboard.params.year}&month=${dashboard.params.month}&zoom=8`;
diff --git a/public/src/app/observatoire/territoire/maps/FluxMap.tsx b/public/src/app/observatoire/territoire/maps/FluxMap.tsx
index 6a3acd5124..76adfe511e 100644
--- a/public/src/app/observatoire/territoire/maps/FluxMap.tsx
+++ b/public/src/app/observatoire/territoire/maps/FluxMap.tsx
@@ -1,8 +1,8 @@
 import DownloadButton from '@/components/observatoire/DownloadButton';
 import DeckMap from '@/components/observatoire/maps/DeckMap';
 import { Config } from '@/config';
-import { DashboardContext } from '@/context/DashboardProvider';
 import { classWidth, getLegendClasses, jenks } from '@/helpers/analyse';
+import { GetApiUrl } from '@/helpers/api';
 import { useApi } from '@/hooks/useApi';
 import type { FluxDataInterface } from '@/interfaces/observatoire/dataInterfaces';
 import { fr } from '@codegouvfr/react-dsfr';
@@ -10,11 +10,11 @@ import { ArcLayer } from '@deck.gl/layers/typed';
 import bbox from '@turf/bbox';
 import { multiPoint } from '@turf/helpers';
 import { LngLatBoundsLike } from 'maplibre-gl';
-import { useContext, useMemo } from 'react';
-import { GetApiUrl } from '../../../../helpers/api';
+import { useMemo } from 'react';
+import { useDashboardContext } from '../../../../context/DashboardProvider';
 
 export default function FluxMap({ title }: { title: string }) {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
   const params = [
     `code=${dashboard.params.code}`,
     `type=${dashboard.params.type}`,
diff --git a/public/src/app/observatoire/territoire/maps/OccupationMap.tsx b/public/src/app/observatoire/territoire/maps/OccupationMap.tsx
index 5a3fa0e050..8b79f2acf1 100644
--- a/public/src/app/observatoire/territoire/maps/OccupationMap.tsx
+++ b/public/src/app/observatoire/territoire/maps/OccupationMap.tsx
@@ -1,8 +1,8 @@
 import DownloadButton from '@/components/observatoire/DownloadButton';
 import AppMap from '@/components/observatoire/maps/Map';
 import { Config } from '@/config';
-import { DashboardContext } from '@/context/DashboardProvider';
 import { getLegendClasses } from '@/helpers/analyse';
+import { GetApiUrl } from '@/helpers/api';
 import { useApi } from '@/hooks/useApi';
 import { ClasseInterface } from '@/interfaces/observatoire/componentsInterfaces';
 import type { OccupationDataInterface } from '@/interfaces/observatoire/dataInterfaces';
@@ -12,12 +12,12 @@ import bbox from '@turf/bbox';
 import { feature, featureCollection } from '@turf/helpers';
 import { FeatureCollection } from 'geojson';
 import { LngLatBoundsLike } from 'maplibre-gl';
-import { useCallback, useContext, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { CircleLayer, Layer, Popup, Source } from 'react-map-gl/maplibre';
-import { GetApiUrl } from '../../../../helpers/api';
+import { useDashboardContext } from '../../../../context/DashboardProvider';
 
 export default function OccupationMap({ title }: { title: string }) {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
   const mapTitle = title;
   const params = [
     `code=${dashboard.params.code}`,
diff --git a/public/src/app/observatoire/territoire/tables/BestFluxTable.tsx b/public/src/app/observatoire/territoire/tables/BestFluxTable.tsx
index 24ac73678e..e19a7486fe 100644
--- a/public/src/app/observatoire/territoire/tables/BestFluxTable.tsx
+++ b/public/src/app/observatoire/territoire/tables/BestFluxTable.tsx
@@ -1,12 +1,11 @@
-import { DashboardContext } from '@/context/DashboardProvider';
+import { GetApiUrl } from '@/helpers/api';
 import { useApi } from "@/hooks/useApi";
 import { BestFluxDataInterface } from "@/interfaces/observatoire/dataInterfaces";
 import { fr } from "@codegouvfr/react-dsfr";
 import { Table as TableStyled } from "@codegouvfr/react-dsfr/Table";
 import { css } from "@emotion/react";
 import styled from '@emotion/styled';
-import { useContext } from 'react';
-import { GetApiUrl } from '../../../../helpers/api';
+import { useDashboardContext } from '../../../../context/DashboardProvider';
 
 const Table = styled(TableStyled)(
   css`
@@ -23,7 +22,7 @@ const Table = styled(TableStyled)(
 `);
 
 export default function BestFluxTable({ title, limit}: { title: string, limit: number }) {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
   const params = [
     `code=${dashboard.params.code}`,
     `type=${dashboard.params.type}`,
diff --git a/public/src/app/observatoire/territoire/tables/BestTerritoriesTable.tsx b/public/src/app/observatoire/territoire/tables/BestTerritoriesTable.tsx
index 57044ec860..842f87fec5 100644
--- a/public/src/app/observatoire/territoire/tables/BestTerritoriesTable.tsx
+++ b/public/src/app/observatoire/territoire/tables/BestTerritoriesTable.tsx
@@ -1,12 +1,11 @@
-import { DashboardContext } from '@/context/DashboardProvider';
+import { GetApiUrl } from '@/helpers/api';
 import { useApi } from "@/hooks/useApi";
 import { BestTerritoriesDataInterface } from "@/interfaces/observatoire/dataInterfaces";
 import { fr } from "@codegouvfr/react-dsfr";
 import { Table as TableStyled } from "@codegouvfr/react-dsfr/Table";
 import { css } from "@emotion/react";
 import styled from '@emotion/styled';
-import { useContext } from 'react';
-import { GetApiUrl } from '../../../../helpers/api';
+import { useDashboardContext } from '../../../../context/DashboardProvider';
 
 const Table = styled(TableStyled)(
   css`
@@ -23,7 +22,7 @@ const Table = styled(TableStyled)(
 `);
 
 export default function BestTerritoriesTable({ title, limit }: { title: string, limit: number }) {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
   const params = [
     `code=${dashboard.params.code}`,
     `type=${dashboard.params.type}`,
diff --git a/public/src/components/observatoire/SelectIncentiveTerritory.tsx b/public/src/components/observatoire/SelectIncentiveTerritory.tsx
index 534260d2ff..151385443c 100644
--- a/public/src/components/observatoire/SelectIncentiveTerritory.tsx
+++ b/public/src/components/observatoire/SelectIncentiveTerritory.tsx
@@ -1,15 +1,15 @@
 'use client'
-import { DashboardContext } from '@/context/DashboardProvider';
 import { castPerimeterType, getUrl } from '@/helpers/search';
+import { PerimeterType } from '@/interfaces/observatoire/Perimeter';
 import { fr } from '@codegouvfr/react-dsfr';
 import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
 import { useRouter } from 'next/navigation';
-import { useContext, useState } from 'react';
-import { PerimeterType } from '../../interfaces/observatoire/Perimeter';
+import { useState } from 'react';
+import { useDashboardContext } from '../../context/DashboardProvider';
 
 export default function SelectIncentiveTerritory(props: { url: string, data:any[] }) {
-  const { dashboard } =useContext(DashboardContext)
+  const { dashboard } = useDashboardContext();
   const router = useRouter();
   const defaultOption = [props.data,{
     code: dashboard.params.code,
diff --git a/public/src/components/observatoire/SelectMonth.tsx b/public/src/components/observatoire/SelectMonth.tsx
index c15c302694..6ac5d83f9f 100644
--- a/public/src/components/observatoire/SelectMonth.tsx
+++ b/public/src/components/observatoire/SelectMonth.tsx
@@ -1,12 +1,12 @@
 'use client'
-import { DashboardContext } from '@/context/DashboardProvider';
 import { monthList } from '@/helpers/lists';
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import { useDashboardContext } from '../../context/DashboardProvider';
 import SelectInList from '../common/SelectInList';
 
 
 export default function SelectMonth() {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
  
   const [monthAvailable, setMonthAvailable] = useState<{id: number; name: string; disabled: boolean;}[]>([]);
   useEffect(()=>{
diff --git a/public/src/components/observatoire/SelectObserve.tsx b/public/src/components/observatoire/SelectObserve.tsx
index 33b128de54..a59b07e068 100644
--- a/public/src/components/observatoire/SelectObserve.tsx
+++ b/public/src/components/observatoire/SelectObserve.tsx
@@ -1,8 +1,7 @@
 import { territoryList } from '@/helpers/lists';
 import { PerimeterType } from '@/interfaces/observatoire/Perimeter';
 import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
-import { useContext } from 'react';
-import { DashboardContext } from '@/context/DashboardProvider';
+import { useDashboardContext } from '../../context/DashboardProvider';
 
 type SelectObserveProps = {
   id: string,
@@ -10,7 +9,7 @@ type SelectObserveProps = {
 };
 
 export default function SelectObserve(props: SelectObserveProps) {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
 
   const observeObject = territoryList.find(d=>d.id===dashboard.params.type)
   const filteredList = observeObject ? territoryList.filter(d=> territoryList.indexOf(d) < territoryList.indexOf(observeObject)) : [];
diff --git a/public/src/components/observatoire/SelectPeriod.tsx b/public/src/components/observatoire/SelectPeriod.tsx
index b1055b4d70..8f753600f5 100644
--- a/public/src/components/observatoire/SelectPeriod.tsx
+++ b/public/src/components/observatoire/SelectPeriod.tsx
@@ -1,8 +1,7 @@
-import { DashboardContext } from '@/context/DashboardProvider';
 import { periodList } from '@/helpers/lists';
+import { PeriodType } from '@/interfaces/observatoire/componentsInterfaces';
 import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
-import { useContext } from 'react';
-import { PeriodType } from '../../interfaces/observatoire/componentsInterfaces';
+import { useDashboardContext } from '../../context/DashboardProvider';
 
 type SelectPeriodProps = {
   id: string,
@@ -10,7 +9,7 @@ type SelectPeriodProps = {
 };
 
 export default function SelectPeriod(props: SelectPeriodProps) {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
   return (
     <>
       <FormControl sx={{ minWidth: 200, margin: '0 0.5em' }}>
diff --git a/public/src/components/observatoire/SelectSemester.tsx b/public/src/components/observatoire/SelectSemester.tsx
index 9d743b56d7..7c52c4bc7d 100644
--- a/public/src/components/observatoire/SelectSemester.tsx
+++ b/public/src/components/observatoire/SelectSemester.tsx
@@ -1,12 +1,12 @@
 'use client'
-import { DashboardContext } from '@/context/DashboardProvider';
 import { semesterList } from '@/helpers/lists';
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import { useDashboardContext } from '../../context/DashboardProvider';
 import SelectInList from '../common/SelectInList';
 
 
 export default function SelectSemester() {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
   const [semesterAvailable, setSemesterAvailable] = useState<{id: number; name: string; disabled: boolean;}[]>([]);
   useEffect(()=>{
       const monthSemester = [6,12];
diff --git a/public/src/components/observatoire/SelectTerritory.tsx b/public/src/components/observatoire/SelectTerritory.tsx
index 65e6765f97..7498dabfa2 100644
--- a/public/src/components/observatoire/SelectTerritory.tsx
+++ b/public/src/components/observatoire/SelectTerritory.tsx
@@ -1,15 +1,15 @@
 'use client'
-import { DashboardContext } from '@/context/DashboardProvider';
 import { castPerimeterType, fetchSearchAPI, getUrl } from '@/helpers/search';
 import { fr } from '@codegouvfr/react-dsfr';
 import Tag from '@codegouvfr/react-dsfr/Tag';
 import Autocomplete from '@mui/material/Autocomplete';
 import TextField from '@mui/material/TextField';
 import { useRouter } from 'next/navigation';
-import { useContext, useState } from 'react';
+import { useState } from 'react';
+import { useDashboardContext } from '../../context/DashboardProvider';
 
 export default function SelectTerritory(props: { url:string }) {
-  const { dashboard } =useContext(DashboardContext)
+  const { dashboard } = useDashboardContext();
   const router = useRouter();
   const defaultOption = {
     territory: dashboard.params.code,
diff --git a/public/src/components/observatoire/SelectTrimester.tsx b/public/src/components/observatoire/SelectTrimester.tsx
index 727482eae0..ed9148cbc1 100644
--- a/public/src/components/observatoire/SelectTrimester.tsx
+++ b/public/src/components/observatoire/SelectTrimester.tsx
@@ -1,12 +1,12 @@
 'use client'
-import { DashboardContext } from '@/context/DashboardProvider';
 import { trimesterList } from '@/helpers/lists';
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
+import { useDashboardContext } from '../../context/DashboardProvider';
 import SelectInList from '../common/SelectInList';
 
 
 export default function SelectTrimester() {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
   const [trimesterAvailable, setTrimesterAvailable] = useState<{id: number; name: string; disabled: boolean;}[]>([]);
   useEffect(()=>{
       const monthTrimester = [3,6,9,12];
diff --git a/public/src/components/observatoire/SelectYear.tsx b/public/src/components/observatoire/SelectYear.tsx
index 52e4fe6c21..e4bba93313 100644
--- a/public/src/components/observatoire/SelectYear.tsx
+++ b/public/src/components/observatoire/SelectYear.tsx
@@ -1,12 +1,11 @@
 'use client'
-import { DashboardContext } from '@/context/DashboardProvider';
 import { yearList } from '@/helpers/lists';
-import { useContext } from 'react';
+import { useDashboardContext } from '../../context/DashboardProvider';
 import SelectInList from '../common/SelectInList';
 
 
 export default function SelectYear() {
-  const { dashboard } =useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
  
   return (
     <>
diff --git a/public/src/context/DashboardProvider.tsx b/public/src/context/DashboardProvider.tsx
index d40c6d2a26..a13b93718e 100644
--- a/public/src/context/DashboardProvider.tsx
+++ b/public/src/context/DashboardProvider.tsx
@@ -1,13 +1,23 @@
 import { useDashboard } from '@/hooks/useDashboard';
 import { DashboardContextType } from '@/interfaces/common/contextInterface';
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
  
+
+const DashboardContext = createContext<DashboardContextType | undefined>(undefined);
+
 export default function DashboardContextProvider({children}: { children: React.ReactNode}) {
   const dashboard = useDashboard();
-  const DashboardContext = createContext<DashboardContextType>({dashboard})
   return( 
     <DashboardContext.Provider value={{dashboard}}>
       {children}
     </DashboardContext.Provider>
   )
 }
+
+export const useDashboardContext = () => {
+  const context = useContext(DashboardContext);
+  if (!context) {
+    throw new Error('useDashboardContext must be used within an DashboardContextProvider');
+  }
+  return context;
+};
diff --git a/public/src/helpers/api.ts b/public/src/helpers/api.ts
index e8e2688cc2..1dd54c0ca3 100644
--- a/public/src/helpers/api.ts
+++ b/public/src/helpers/api.ts
@@ -1,12 +1,11 @@
 import { Config } from "@/config";
-import { DashboardContext } from "@/context/DashboardProvider";
-import { useContext } from "react";
+import { useDashboardContext } from "../context/DashboardProvider";
 
 export const GetApiUrl = (
   route: string,
   params: string[],
 ) => {
-  const { dashboard } = useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
   switch (dashboard.params.period) {
     case "month":
       params.push(`month=${dashboard.params.month}`);
@@ -18,7 +17,5 @@ export const GetApiUrl = (
       params.push(`semester=${dashboard.params.semester}`);
       break;
   }
-  return `${Config.get<string>("next.public_api_url", "")}/${route}?${
-    params.join("&")
-  }`;
+  return `${Config.get<string>("next.public_api_url", "")}/${route}?${params.join("&")}`;
 };
diff --git a/public/src/helpers/dashboard.ts b/public/src/helpers/dashboard.ts
index d7f39aa675..1324d04a60 100644
--- a/public/src/helpers/dashboard.ts
+++ b/public/src/helpers/dashboard.ts
@@ -1,8 +1,7 @@
-import { DashboardContext } from "@/context/DashboardProvider";
-import { useContext } from "react";
+import { useDashboardContext } from "../context/DashboardProvider";
 
 export function GetPeriod() {
-  const { dashboard } = useContext(DashboardContext);
+  const { dashboard } = useDashboardContext();
   const period = {
     start_date: new Date(dashboard.params.year, dashboard.params.month - 1, 2)
       .toISOString().slice(0, 10),