diff --git a/webapp-next/components/filters/Regions.tsx b/webapp-next/components/filters/Regions.tsx
index 51b20eb..af3c10c 100644
--- a/webapp-next/components/filters/Regions.tsx
+++ b/webapp-next/components/filters/Regions.tsx
@@ -1,19 +1,15 @@
 import { Cm2dContext } from '@/utils/cm2d-provider';
-import { ChevronDownIcon, StarIcon } from '@chakra-ui/icons';
-import {
-  Button,
-  Flex,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList
-} from '@chakra-ui/react';
+import { ChevronDownIcon } from '@chakra-ui/icons';
+import { Flex, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
 import { useContext, useEffect, useState } from 'react';
 
 type Props = {};
 
 export const RegionFilter = (props: Props) => {
   const context = useContext(Cm2dContext);
+  const router = useRouter();
+  const { mode } = router.query;
 
   if (!context) {
     throw new Error('Menu must be used within a Cm2dProvider');
@@ -21,24 +17,97 @@ export const RegionFilter = (props: Props) => {
 
   const { filters, setFilters } = context;
 
-  const [selectedFilter, setSelectedFilter] = useState<number[]>(
+  const [selectedFilter, setSelectedFilter] = useState<string[]>(
     filters.region_departments
   );
 
-  console.log(filters);
-  console.log(selectedFilter);
-
-  const regionFilters: { label: string; value: number[] }[] = [
-    { label: 'Ile-de-France', value: [75, 77, 78, 91, 92, 93, 94, 95] },
-    { label: 'Normandie', value: [14, 27, 50, 61, 76] },
+  let regionFilters: { label: string; value: string[] }[] = [
+    {
+      label: 'Ile-de-France',
+      value: ['75', '77', '78', '91', '92', '93', '94', '95']
+    },
+    { label: 'Normandie', value: ['14', '27', '50', '61', '76'] },
     {
       label: 'Nouvelle-Aquitaine',
-      value: [16, 17, 19, 23, 24, 33, 40, 47, 64, 79, 86, 87]
+      value: [
+        '16',
+        '17',
+        '19',
+        '23',
+        '24',
+        '33',
+        '40',
+        '47',
+        '64',
+        '79',
+        '86',
+        '87'
+      ]
     },
-    { label: 'Hauts-de-France', value: [2, 59, 60, 62, 80] }
+    { label: 'Hauts-de-France', value: ['2', '59', '60', '62', '80'] }
   ];
 
-  const getLabelFromValue = (value: number[]): string => {
+  if (mode === 'dev') {
+    regionFilters = [
+      ...regionFilters,
+      {
+        label: 'Auvergne-Rhône-Alpes',
+        value: [
+          '1',
+          '3',
+          '7',
+          '15',
+          '26',
+          '38',
+          '42',
+          '43',
+          '63',
+          '69',
+          '73',
+          '74'
+        ]
+      },
+      {
+        label: 'Bourgogne-Franche-Comté',
+        value: ['21', '25', '39', '58', '70', '71', '89', '90']
+      },
+      { label: 'Bretagne', value: ['22', '29', '35', '56'] },
+      {
+        label: 'Centre-Val de Loire',
+        value: ['18', '28', '36', '37', '41', '45']
+      },
+      { label: 'Corse', value: ['2A', '2B'] },
+      {
+        label: 'Grand Est',
+        value: ['8', '10', '51', '52', '54', '55', '57', '67', '68', '88']
+      },
+      {
+        label: 'Occitanie',
+        value: [
+          '9',
+          '11',
+          '12',
+          '30',
+          '31',
+          '32',
+          '34',
+          '46',
+          '48',
+          '65',
+          '66',
+          '81',
+          '82'
+        ]
+      },
+      { label: 'Pays de la Loire', value: ['44', '49', '53', '72', '85'] },
+      {
+        label: "Provence-Alpes-Côte d'Azur",
+        value: ['4', '5', '6', '13', '83', '84']
+      }
+    ];
+  }
+
+  const getLabelFromValue = (value: string[]) => {
     return (
       regionFilters.find(
         df => JSON.stringify(df.value) === JSON.stringify(value)
diff --git a/webapp-next/utils/cm2d-provider.tsx b/webapp-next/utils/cm2d-provider.tsx
index 88b09a9..f412cc3 100644
--- a/webapp-next/utils/cm2d-provider.tsx
+++ b/webapp-next/utils/cm2d-provider.tsx
@@ -20,7 +20,7 @@ export type Filters = {
   }[];
   sex: string[];
   department: string[];
-  region_departments: number[];
+  region_departments: string[];
   start_date?: string;
   end_date?: string;
 };
@@ -69,7 +69,7 @@ export const baseFilters: Filters = {
   age: [],
   sex: [],
   department: [],
-  region_departments: [75, 77, 78, 91, 92, 93, 94, 95]
+  region_departments: ['75', '77', '78', '91', '92', '93', '94', '95']
 };
 export const baseAggregation = {
   aggregated_date: {
diff --git a/webapp-next/utils/map/props.ts b/webapp-next/utils/map/props.ts
index f7959cf..c38c39d 100644
--- a/webapp-next/utils/map/props.ts
+++ b/webapp-next/utils/map/props.ts
@@ -12,7 +12,7 @@ import { MapConfig } from './type';
 export const getMapProps = (
   id: string,
   datasets: { hits: any[]; total?: number }[],
-  departments: number[],
+  departments: string[],
   saveAggregateX?: string
 ): {
   config?: MapConfig;
@@ -67,13 +67,13 @@ export const getMapProps = (
     }
   };
 
-  const getCountFromKey = (key: number): number => {
+  const getCountFromKey = (key: string): number => {
     const hit = hits.find(h => h.key === key);
     // return hit ? (isNC(hit.doc_count) ? 'NC' : hit.doc_count) : 0;
     return hit ? hit.doc_count : 0;
   };
 
-  const getPercentage = (key: number): string => {
+  const getPercentage = (key: string): string => {
     const hit = hits.find(h => h.key === key);
     if (!hit || !total) return '0%';
     // if (isNC(hit.doc_count)) return 'NC';
@@ -81,7 +81,7 @@ export const getMapProps = (
   };
 
   const getColorFromPercentage = (
-    key: number,
+    key: string,
     kind: 'initial' | 'hover'
   ): string => {
     const hit = hits.find(h => h.key === key);
@@ -94,7 +94,7 @@ export const getMapProps = (
     return stateColors.RED[kind];
   };
 
-  const getFullDescription = (key: number): string => {
+  const getFullDescription = (key: string): string => {
     const hit = hits.find(h => h.key === key);
     if (!hit) return '';