diff --git a/.pnp.cjs b/.pnp.cjs
old mode 100755
new mode 100644
diff --git a/.yarn/sdks/eslint/bin/eslint.js b/.yarn/sdks/eslint/bin/eslint.js
old mode 100755
new mode 100644
diff --git a/.yarn/sdks/prettier/bin-prettier.js b/.yarn/sdks/prettier/bin-prettier.js
old mode 100755
new mode 100644
diff --git a/.yarn/sdks/typescript/bin/tsc b/.yarn/sdks/typescript/bin/tsc
old mode 100755
new mode 100644
diff --git a/.yarn/sdks/typescript/bin/tsserver b/.yarn/sdks/typescript/bin/tsserver
old mode 100755
new mode 100644
diff --git a/docker-compose.yml b/docker-compose.yml
index 55d75d6d6..09ff47bdb 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -1,4 +1,3 @@
-version: '3.7'
 services:
   backend:
     build:
diff --git a/server/controllers/statistics.ts b/server/controllers/statistics.ts
index e4616b2cb..aa57358f1 100644
--- a/server/controllers/statistics.ts
+++ b/server/controllers/statistics.ts
@@ -1,45 +1,55 @@
-import type { Request } from 'express';
-
-import {
-  getClassroomsInfos,
-  getConnectedClassroomsCount,
-  getContributedClassroomsCount,
-  getRegisteredClassroomsCount,
-} from '../stats/classroomStats';
-import {
-  getAverageConnections,
-  getAverageDuration,
-  getMaxConnections,
-  getMaxDuration,
-  getMedianConnections,
-  getMedianDuration,
-  getMinConnections,
-  getMinDuration,
-} from '../stats/sessionStats';
-import { Controller } from './controller';
-
-export const statisticsController = new Controller('/statistics');
-
-statisticsController.get({ path: '/sessions/:phase' }, async (req: Request, res) => {
-  const phase = req.params.phase ? parseInt(req.params.phase) : null;
-
-  res.sendJSON({
-    minDuration: await getMinDuration(), // TODO - add phase
-    maxDuration: await getMaxDuration(), // TODO - add phase
-    averageDuration: await getAverageDuration(), // TODO - add phase
-    medianDuration: await getMedianDuration(), // TODO - add phase
-    minConnections: await getMinConnections(), // TODO - add phase
-    maxConnections: await getMaxConnections(), // TODO - add phase
-    averageConnections: await getAverageConnections(), // TODO - add phase
-    medianConnections: await getMedianConnections(), // TODO - add phase
-    registeredClassroomsCount: await getRegisteredClassroomsCount(),
-    connectedClassroomsCount: await getConnectedClassroomsCount(), // TODO - add phase
-    contributedClassroomsCount: await getContributedClassroomsCount(phase),
-  });
-});
-
-statisticsController.get({ path: '/classrooms' }, async (_req, res) => {
-  res.sendJSON({
-    classrooms: await getClassroomsInfos(),
-  });
-});
+import type { Request } from 'express';
+
+import {
+  getClassroomsInfos,
+  getConnectedClassroomsCount,
+  getContributedClassroomsCount,
+  getRegisteredClassroomsCount,
+} from '../stats/classroomStats';
+import {
+  getAverageConnections,
+  getAverageDuration,
+  getMaxConnections,
+  getMaxDuration,
+  getMedianConnections,
+  getMedianDuration,
+  getMinConnections,
+  getMinDuration,
+} from '../stats/sessionStats';
+import { getChildrenCodesCount, getFamilyAccountsCount, getConnectedFamiliesCount } from '../stats/villageStats';
+import { Controller } from './controller';
+
+export const statisticsController = new Controller('/statistics');
+
+statisticsController.get({ path: '/sessions/:phase' }, async (req: Request, res) => {
+  const phase = req.params.phase ? parseInt(req.params.phase) : null;
+
+  res.sendJSON({
+    minDuration: await getMinDuration(), // TODO - add phase
+    maxDuration: await getMaxDuration(), // TODO - add phase
+    averageDuration: await getAverageDuration(), // TODO - add phase
+    medianDuration: await getMedianDuration(), // TODO - add phase
+    minConnections: await getMinConnections(), // TODO - add phase
+    maxConnections: await getMaxConnections(), // TODO - add phase
+    averageConnections: await getAverageConnections(), // TODO - add phase
+    medianConnections: await getMedianConnections(), // TODO - add phase
+    registeredClassroomsCount: await getRegisteredClassroomsCount(),
+    connectedClassroomsCount: await getConnectedClassroomsCount(), // TODO - add phase
+    contributedClassroomsCount: await getContributedClassroomsCount(phase),
+  });
+});
+
+statisticsController.get({ path: '/classrooms' }, async (_req, res) => {
+  res.sendJSON({
+    classrooms: await getClassroomsInfos(),
+  });
+});
+
+statisticsController.get({ path: '/villages/:villageId' }, async (_req, res) => {
+  const villageId = parseInt(_req.params.villageId);
+  res.sendJSON({
+    familyAccountsCount: await getFamilyAccountsCount(villageId),
+    childrenCodesCount: await getChildrenCodesCount(villageId),
+    connectedFamiliesCount: await getConnectedFamiliesCount(villageId),
+  });
+});
diff --git a/server/controllers/village.ts b/server/controllers/village.ts
index 9361d954d..8c74bdd94 100644
--- a/server/controllers/village.ts
+++ b/server/controllers/village.ts
@@ -14,8 +14,23 @@ const villageController = new Controller('/villages');
 
 //--- Get all villages ---
 villageController.get({ path: '', userType: UserType.OBSERVATOR }, async (_req: Request, res: Response) => {
-  const villages = await AppDataSource.getRepository(Village).find();
-  res.sendJSON(villages);
+  const countryIsoCode = _req.query.countryIsoCode as string;
+  try {
+    const villageRepository = AppDataSource.getRepository(Village);
+    let villages;
+    if (countryIsoCode) {
+      const query = villageRepository.createQueryBuilder('village');
+      query.where('village.countryCodes LIKE :countryIsoCode', { countryIsoCode: `%${countryIsoCode.toUpperCase()}%` });
+
+      villages = await query.getMany();
+    } else {
+      villages = await villageRepository.find();
+    }
+    res.sendJSON(villages);
+  } catch (e) {
+    console.error(e);
+    res.status(500).sendJSON({ message: 'An error occurred while fetching villages' });
+  }
 });
 
 //--- Get one village ---
diff --git a/server/stats/classroomStats.ts b/server/stats/classroomStats.ts
index 99920a794..7eca0bec4 100644
--- a/server/stats/classroomStats.ts
+++ b/server/stats/classroomStats.ts
@@ -1,8 +1,6 @@
 import { UserType } from '../../types/user.type';
 import { Activity } from '../entities/activity';
 import { Classroom } from '../entities/classroom';
-// import { Comment } from '../entities/comment';
-// import { Video } from '../entities/video';
 import { AppDataSource } from '../utils/data-source';
 
 const classroomRepository = AppDataSource.getRepository(Classroom);
diff --git a/server/stats/villageStats.ts b/server/stats/villageStats.ts
new file mode 100644
index 000000000..76724b303
--- /dev/null
+++ b/server/stats/villageStats.ts
@@ -0,0 +1,39 @@
+import { Student } from '../entities/student';
+import { User } from '../entities/user';
+import { AppDataSource } from '../utils/data-source';
+
+const userRepository = AppDataSource.getRepository(User);
+const studentRepository = AppDataSource.getRepository(Student);
+
+export const getChildrenCodesCount = async (villageId: number) => {
+  const childrenCodeCount = await studentRepository
+    .createQueryBuilder('student')
+    .innerJoin('student.classroom', 'classroom')
+    .innerJoin('classroom.village', 'village')
+    .where('classroom.villageId = :villageId', { villageId })
+    .getCount();
+  return childrenCodeCount;
+};
+
+export const getFamilyAccountsCount = async (villageId: number) => {
+  const familyAccountsCount = await userRepository
+    .createQueryBuilder('user')
+    .innerJoin('user.village', 'village')
+    .innerJoin('classroom', 'classroom', 'classroom.villageId = village.id')
+    .innerJoin('student', 'student', 'student.classroomId = classroom.id')
+    .where('classroom.villageId = :villageId', { villageId })
+    .groupBy('user.id')
+    .getCount();
+  return familyAccountsCount;
+};
+
+export const getConnectedFamiliesCount = async (villageId: number) => {
+  const connectedFamiliesCount = await studentRepository
+    .createQueryBuilder('student')
+    .innerJoin('classroom', 'classroom', 'classroom.id = student.classroomId')
+    .where('classroom.villageId = :villageId', { villageId })
+    .andWhere('student.numLinkedAccount >= 1')
+    .getCount();
+
+  return connectedFamiliesCount;
+};
diff --git a/src/api/statistics/statistics.get.ts b/src/api/statistics/statistics.get.ts
index 1c9d2ae3a..e2c81c6e3 100644
--- a/src/api/statistics/statistics.get.ts
+++ b/src/api/statistics/statistics.get.ts
@@ -1,32 +1,48 @@
-import { useQuery } from 'react-query';
-
-import { axiosRequest } from 'src/utils/axiosRequest';
-import type { ClassroomsStats, SessionsStats } from 'types/statistics.type';
-
-async function getSessionsStats(phase: number | null): Promise<SessionsStats> {
-  return (
-    await axiosRequest({
-      method: 'GET',
-      baseURL: '/api',
-      url: `/statistics/sessions/${phase}`,
-    })
-  ).data;
-}
-
-export const useGetSessionsStats = (phase: number | null) => {
-  return useQuery(['sessions-stats'], () => getSessionsStats(phase));
-};
-
-async function getClassroomsStats(): Promise<ClassroomsStats[]> {
-  return (
-    await axiosRequest({
-      method: 'GET',
-      baseURL: '/api',
-      url: '/statistics/classrooms',
-    })
-  ).data;
-}
-
-export const useGetClassroomsStats = () => {
-  return useQuery(['classrooms-stats'], () => getClassroomsStats());
-};
+import { useQuery } from 'react-query';
+
+import { axiosRequest } from 'src/utils/axiosRequest';
+import type { ClassroomsStats, SessionsStats, VillageStats } from 'types/statistics.type';
+
+async function getSessionsStats(phase: number | null): Promise<SessionsStats> {
+  return (
+    await axiosRequest({
+      method: 'GET',
+      baseURL: '/api',
+      url: `/statistics/sessions/${phase}`,
+    })
+  ).data;
+}
+
+async function getVillagesStats(villageId: number | null): Promise<VillageStats> {
+  return (
+    await axiosRequest({
+      method: 'GET',
+      baseURL: '/api',
+      url: `/statistics/villages/${villageId}`,
+    })
+  ).data;
+}
+
+export const useGetSessionsStats = (phase: number | null) => {
+  return useQuery(['sessions-stats'], () => getSessionsStats(phase));
+};
+
+export const useGetVillagesStats = (villageId: number | null) => {
+  return useQuery(['villages-stats', villageId], () => getVillagesStats(villageId), {
+    enabled: villageId !== null,
+  });
+};
+
+async function getClassroomsStats(): Promise<ClassroomsStats[]> {
+  return (
+    await axiosRequest({
+      method: 'GET',
+      baseURL: '/api',
+      url: '/statistics/classrooms',
+    })
+  ).data;
+}
+
+export const useGetClassroomsStats = () => {
+  return useQuery(['classrooms-stats'], () => getClassroomsStats());
+};
diff --git a/src/api/villages/villages.get.ts b/src/api/villages/villages.get.ts
index 12568153e..544ab8ef9 100644
--- a/src/api/villages/villages.get.ts
+++ b/src/api/villages/villages.get.ts
@@ -3,16 +3,19 @@ import type { Village } from 'server/entities/village';
 
 import { axiosRequest } from 'src/utils/axiosRequest';
 
-async function getVillages(): Promise<Village[]> {
+async function getVillages(countryIsoCode?: string): Promise<Village[]> {
+  const url = countryIsoCode ? `/villages?countryIsoCode=${countryIsoCode}` : '/villages';
   return (
     await axiosRequest({
       method: 'GET',
       baseURL: '/api',
-      url: '/villages',
+      url: url,
     })
   ).data;
 }
 
-export const useGetVillages = () => {
-  return useQuery(['villages'], getVillages);
+export const useGetVillages = (countryIsoCode?: string) => {
+  return useQuery(['villages', countryIsoCode], () => getVillages(countryIsoCode), {
+    enabled: !!countryIsoCode || countryIsoCode === undefined,
+  });
 };
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 022989074..b19da43f9 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -115,7 +115,6 @@ export const Header = () => {
               >
                 {hasAccessToNewAdmin && <MenuItem onClick={() => goToPage('/admin/newportal/create')}>Portail admin</MenuItem>}
                 {hasAccessToOldAdmin && <MenuItem onClick={() => goToPage('/admin/villages')}>Admin (old)</MenuItem>}
-
                 <MenuItem onClick={() => goToPage('/mon-compte')}>Mon compte</MenuItem>
                 {user.type !== UserType.FAMILY && <MenuItem onClick={() => goToPage('/mes-videos')}>Mes vidéos</MenuItem>}
                 <AccessControl featureName="id-family" key={user?.id || 'default'}>
diff --git a/src/components/admin/dashboard-statistics/ClassroomStats.tsx b/src/components/admin/dashboard-statistics/ClassroomStats.tsx
index bedc807b9..0932e7138 100644
--- a/src/components/admin/dashboard-statistics/ClassroomStats.tsx
+++ b/src/components/admin/dashboard-statistics/ClassroomStats.tsx
@@ -7,16 +7,21 @@ import VillageDropdown from './filters/VillageDropdown';
 import { mockClassroomsStats } from './mocks/mocks';
 import { PelicoCard } from './pelico-card';
 import styles from './styles/charts.module.css';
+import { useCountries } from 'src/services/useCountries';
+import { useVillages } from 'src/services/useVillages';
+import type { VillageFilter } from 'types/village.type';
 
 const ClassroomStats = () => {
   const [selectedCountry, setSelectedCountry] = useState<string>('');
   const [selectedVillage, setSelectedVillage] = useState<string>('');
   const [selectedClassroom, setSelectedClassroom] = useState<string>();
+  const [selectedPhase, setSelectedPhase] = useState<string>('4');
+  const [options, setOptions] = useState<VillageFilter>({ countryIsoCode: '' });
 
   const pelicoMessage = 'Merci de sélectionner une classe pour analyser ses statistiques ';
 
-  const countriesMap = mockClassroomsStats.map((country) => country.classroomCountryCode);
-  const countries = [...new Set(countriesMap)];
+  const { countries } = useCountries();
+  const { villages } = useVillages(options);
 
   const handleCountryChange = (country: string) => {
     setSelectedCountry(country);
@@ -24,8 +29,11 @@ const ClassroomStats = () => {
     setSelectedClassroom('');
   };
 
-  const villagesMap = mockClassroomsStats.filter((village) => village.classroomCountryCode === selectedCountry).map((village) => village.villageName);
-  const villages = [...new Set(villagesMap)];
+  React.useEffect(() => {
+    setOptions({
+      countryIsoCode: selectedCountry,
+    });
+  }, [selectedCountry, selectedPhase]);
 
   const handleVillageChange = (village: string) => {
     setSelectedVillage(village);
@@ -41,11 +49,15 @@ const ClassroomStats = () => {
     setSelectedClassroom(classroom);
   };
 
+  const handlePhaseChange = (phase: string) => {
+    setSelectedPhase(phase);
+  };
+
   return (
     <>
       <div className={styles.filtersContainer}>
         <div className={styles.phaseFilter}>
-          <PhaseDropdown />
+          <PhaseDropdown onPhaseChange={handlePhaseChange} />
         </div>
         <div className={styles.countryFilter}>
           <CountriesDropdown countries={countries} onCountryChange={handleCountryChange} />
diff --git a/src/components/admin/dashboard-statistics/CountryStats.tsx b/src/components/admin/dashboard-statistics/CountryStats.tsx
index 5da52f6d8..883802aeb 100644
--- a/src/components/admin/dashboard-statistics/CountryStats.tsx
+++ b/src/components/admin/dashboard-statistics/CountryStats.tsx
@@ -1,178 +1,176 @@
-import React, { useState } from 'react';
-
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import Box from '@mui/material/Box';
-
-import AverageStatsCard from './cards/AverageStatsCard/AverageStatsCard';
-import ClassesExchangesCard from './cards/ClassesExchangesCard/ClassesExchangesCard';
-import StatsCard from './cards/StatsCard/StatsCard';
-import BarCharts from './charts/BarCharts';
-import DashboardTable from './charts/DashboardTable';
-import HorizontalBars from './charts/HorizontalChart';
-import PieCharts from './charts/PieCharts';
-import CountriesDropdown from './filters/CountriesDropdown';
-import PhaseDropdown from './filters/PhaseDropdown';
-import PhaseDetails from './menu/PhaseDetails';
-import { mockClassroomsStats, mockConnectionsStats } from './mocks/mocks';
-import { PelicoCard } from './pelico-card';
-import styles from './styles/charts.module.css';
-import { sumContribution } from './utils/sumData';
-
-const pieChartData = {
-  data: [
-    { id: 0, value: 10, label: 'series A' },
-    { id: 1, value: 15, label: 'series B' },
-    { id: 2, value: 20, label: 'series C' },
-  ],
-};
-
-const barChartData = [{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }];
-const EngagementBarChartTitle = 'Évolution des connexions';
-const ContributionBarChartTitle = 'Contribution des classes';
-
-const CountryStats = () => {
-  const [selectedCountry, setSelectedCountry] = useState<string>('');
-  const pelicoMessage = 'Merci de sélectionner un pays pour analyser ses statistiques ';
-
-  const countriesMap = mockClassroomsStats.map((country) => country.classroomCountryCode);
-  const countries = [...new Set(countriesMap)]; // avoid duplicates
-  const handleCountryChange = (country: string) => {
-    setSelectedCountry(country);
-  };
-
-  const filteredVillage = mockClassroomsStats.filter((village) => village.classroomCountryCode === selectedCountry);
-  const countryData = sumContribution[selectedCountry];
-
-  const { totalActivities = 0, totalComments = 0, totalVideos = 0 } = countryData || {};
-
-  const classStats = mockConnectionsStats.map((classroom) => ({
-    registered: classroom.registeredClassroomsCount,
-    connected: classroom.connectedClassroomsCount,
-    contributed: classroom.contributedClassroomsCount,
-  }));
-
-  const connectStats = mockConnectionsStats.map((connect) => ({
-    averageConnection: connect.averageConnections,
-    averageDuration: connect.averageDuration,
-    minDuration: connect.minDuration,
-    maxDuration: connect.maxDuration,
-    medianDuration: connect.medianDuration,
-    minConnections: connect.minConnections,
-    maxConnections: connect.maxConnections,
-    medianConnections: connect.medianConnections,
-  }));
-
-  return (
-    <>
-      <div className={styles.filtersContainer}>
-        <div className={styles.phaseFilter}>
-          <PhaseDropdown />
-        </div>
-        <div className={styles.countryFilter}>
-          <CountriesDropdown countries={countries} onCountryChange={handleCountryChange} />
-        </div>
-      </div>
-      <h1>Statut: Observateur</h1>
-      {!selectedCountry ? (
-        <PelicoCard message={pelicoMessage} />
-      ) : (
-        <>
-          <div className={styles.monitorTable}>
-            <HorizontalBars />
-          </div>
-          <Box
-            height={1}
-            width={1}
-            my={4}
-            display="flex"
-            alignItems="center"
-            justify-content="center"
-            font-weight="bold"
-            gap={4}
-            p={2}
-            py={3}
-            sx={{ border: '2px solid #4C3ED9', borderRadius: 4 }}
-          >
-            Ce pays participe dans les villages-monde suivants :
-            <ul>
-              {filteredVillage.map((village, index) => (
-                <li key={index}>{village.villageName}</li>
-              ))}
-            </ul>
-          </Box>
-          <div className={styles.monitorTable}>
-            <DashboardTable />
-          </div>
-          <div className={styles.classroomStats}>
-            <StatsCard data={classStats[0].registered}>Nombre de classes inscrites</StatsCard>
-            <StatsCard data={classStats[0].connected}>Nombre de classes connectées</StatsCard>
-            <StatsCard data={classStats[0].contributed}>Nombre de classes contributrices</StatsCard>
-          </div>
-          <div className={styles.averageStatsContainer}>
-            <AverageStatsCard
-              data={{
-                min: connectStats[0].minConnections,
-                max: connectStats[0].maxConnections,
-                average: connectStats[0].averageConnection,
-                median: connectStats[0].medianConnections,
-              }}
-              unit="min"
-              icon={<AccessTimeIcon sx={{ fontSize: 'inherit' }} />}
-            >
-              Temps de connexion moyen par classe
-            </AverageStatsCard>
-            <AverageStatsCard
-              data={{
-                min: connectStats[0].minDuration,
-                max: connectStats[0].maxDuration,
-                average: connectStats[0].averageDuration,
-                median: connectStats[0].medianDuration,
-              }}
-              icon={<VisibilityIcon sx={{ fontSize: 'inherit' }} />}
-            >
-              Nombre de connexions moyen par classe
-            </AverageStatsCard>
-          </div>
-          <div className={styles.engagementContainer}>
-            <PieCharts pieChartData={pieChartData} />
-            <BarCharts barChartData={barChartData} title={EngagementBarChartTitle} />
-          </div>
-          <div className={styles.exchangesConnectionsContainer}>
-            <ClassesExchangesCard totalPublications={totalActivities} totalComments={totalComments} totalVideos={totalVideos} />
-            <BarCharts className={styles.connectionsChart} barChartData={barChartData} title={ContributionBarChartTitle} />
-          </div>
-          <div>
-            <PhaseDetails
-              phase={1}
-              data={[
-                { name: 'test', connections: 2 },
-                { name: 'test 2', connections: 12 },
-              ]}
-            />
-          </div>
-          <div>
-            <PhaseDetails
-              phase={2}
-              data={[
-                { name: 'test', connections: 2, allo: 'fds' },
-                { name: 'dest 2', connections: 12, allo: 'ads' },
-              ]}
-            />
-          </div>
-          <div>
-            <PhaseDetails
-              phase={3}
-              data={[
-                { name: 'test ff', connections: 15, allo: 'fdjjjjjjjs' },
-                { name: 'dest 2', connections: 1, allo: 'fdsfsqds' },
-              ]}
-            />
-          </div>
-        </>
-      )}
-    </>
-  );
-};
-
-export default CountryStats;
+import React, { useState } from 'react';
+
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import Box from '@mui/material/Box';
+
+import AverageStatsCard from './cards/AverageStatsCard/AverageStatsCard';
+import ClassesExchangesCard from './cards/ClassesExchangesCard/ClassesExchangesCard';
+import StatsCard from './cards/StatsCard/StatsCard';
+import BarCharts from './charts/BarCharts';
+import DashboardTable from './charts/DashboardTable';
+import HorizontalBars from './charts/HorizontalChart';
+import PieCharts from './charts/PieCharts';
+import CountriesDropdown from './filters/CountriesDropdown';
+import PhaseDetails from './menu/PhaseDetails';
+import { mockClassroomsStats, mockConnectionsStats } from './mocks/mocks';
+import { PelicoCard } from './pelico-card';
+import styles from './styles/charts.module.css';
+import { sumContribution } from './utils/sumData';
+import { useCountries } from 'src/services/useCountries';
+
+const pieChartData = {
+  data: [
+    { id: 0, value: 10, label: 'series A' },
+    { id: 1, value: 15, label: 'series B' },
+    { id: 2, value: 20, label: 'series C' },
+  ],
+};
+
+const barChartData = [{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }];
+const EngagementBarChartTitle = 'Évolution des connexions';
+const ContributionBarChartTitle = 'Contribution des classes';
+
+const CountryStats = () => {
+  const [selectedCountry, setSelectedCountry] = useState<string>('');
+  const pelicoMessage = 'Merci de sélectionner un pays pour analyser ses statistiques ';
+  const { countries } = useCountries();
+  const handleCountryChange = (country: string) => {
+    setSelectedCountry(country);
+  };
+
+  const filteredVillage = mockClassroomsStats.filter((village) => village.classroomCountryCode === selectedCountry);
+  const countryData = sumContribution[selectedCountry];
+
+  const { totalActivities = 0, totalComments = 0, totalVideos = 0 } = countryData || {};
+
+  const classStats = mockConnectionsStats.map((classroom) => ({
+    registered: classroom.registeredClassroomsCount,
+    connected: classroom.connectedClassroomsCount,
+    contributed: classroom.contributedClassroomsCount,
+  }));
+
+  const connectStats = mockConnectionsStats.map((connect) => ({
+    averageConnection: connect.averageConnections,
+    averageDuration: connect.averageDuration,
+    minDuration: connect.minDuration,
+    maxDuration: connect.maxDuration,
+    medianDuration: connect.medianDuration,
+    minConnections: connect.minConnections,
+    maxConnections: connect.maxConnections,
+    medianConnections: connect.medianConnections,
+  }));
+
+  return (
+    <>
+      <div className={styles.filtersContainer}>
+        {/* <div className={styles.phaseFilter}>
+          <PhaseDropdown />
+        </div> */}
+        <div className={styles.countryFilter}>
+          <CountriesDropdown countries={countries} onCountryChange={handleCountryChange} />
+        </div>
+      </div>
+      <h1>Statut: Observateur</h1>
+      {!selectedCountry ? (
+        <PelicoCard message={pelicoMessage} />
+      ) : (
+        <>
+          <div className={styles.monitorTable}>
+            <HorizontalBars />
+          </div>
+          <Box
+            height={1}
+            width={1}
+            my={4}
+            display="flex"
+            alignItems="center"
+            justify-content="center"
+            font-weight="bold"
+            gap={4}
+            p={2}
+            py={3}
+            sx={{ border: '2px solid #4C3ED9', borderRadius: 4 }}
+          >
+            Ce pays participe dans les villages-monde suivants :
+            <ul>
+              {filteredVillage.map((village, index) => (
+                <li key={index}>{village.villageName}</li>
+              ))}
+            </ul>
+          </Box>
+          <div className={styles.monitorTable}>
+            <DashboardTable />
+          </div>
+          <div className={styles.classroomStats}>
+            <StatsCard data={classStats[0].registered}>Nombre de classes inscrites</StatsCard>
+            <StatsCard data={classStats[0].connected}>Nombre de classes connectées</StatsCard>
+            <StatsCard data={classStats[0].contributed}>Nombre de classes contributrices</StatsCard>
+          </div>
+          <div className={styles.averageStatsContainer}>
+            <AverageStatsCard
+              data={{
+                min: connectStats[0].minConnections,
+                max: connectStats[0].maxConnections,
+                average: connectStats[0].averageConnection,
+                median: connectStats[0].medianConnections,
+              }}
+              unit="min"
+              icon={<AccessTimeIcon sx={{ fontSize: 'inherit' }} />}
+            >
+              Temps de connexion moyen par classe
+            </AverageStatsCard>
+            <AverageStatsCard
+              data={{
+                min: connectStats[0].minDuration,
+                max: connectStats[0].maxDuration,
+                average: connectStats[0].averageDuration,
+                median: connectStats[0].medianDuration,
+              }}
+              icon={<VisibilityIcon sx={{ fontSize: 'inherit' }} />}
+            >
+              Nombre de connexions moyen par classe
+            </AverageStatsCard>
+          </div>
+          <div className={styles.engagementContainer}>
+            <PieCharts pieChartData={pieChartData} />
+            <BarCharts barChartData={barChartData} title={EngagementBarChartTitle} />
+          </div>
+          <div className={styles.exchangesConnectionsContainer}>
+            <ClassesExchangesCard totalPublications={totalActivities} totalComments={totalComments} totalVideos={totalVideos} />
+            <BarCharts className={styles.connectionsChart} barChartData={barChartData} title={ContributionBarChartTitle} />
+          </div>
+          <div>
+            <PhaseDetails
+              phase={1}
+              data={[
+                { name: 'test', connections: 2 },
+                { name: 'test 2', connections: 12 },
+              ]}
+            />
+          </div>
+          <div>
+            <PhaseDetails
+              phase={2}
+              data={[
+                { name: 'test', connections: 2, allo: 'fds' },
+                { name: 'dest 2', connections: 12, allo: 'ads' },
+              ]}
+            />
+          </div>
+          <div>
+            <PhaseDetails
+              phase={3}
+              data={[
+                { name: 'test ff', connections: 15, allo: 'fdjjjjjjjs' },
+                { name: 'dest 2', connections: 1, allo: 'fdsfsqds' },
+              ]}
+            />
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+export default CountryStats;
diff --git a/src/components/admin/dashboard-statistics/DashboardStatsNav.tsx b/src/components/admin/dashboard-statistics/DashboardStatsNav.tsx
index fea75d4e6..8ddb30ece 100644
--- a/src/components/admin/dashboard-statistics/DashboardStatsNav.tsx
+++ b/src/components/admin/dashboard-statistics/DashboardStatsNav.tsx
@@ -23,7 +23,7 @@ function CustomTabPanel(props: TabPanelProps) {
   return (
     <div role="tabpanel" hidden={value !== index} id={`simple-tabpanel-${index}`} aria-labelledby={`simple-tab-${index}`} {...other}>
       {value === index && (
-        <Box sx={{ p: 3 }}>
+        <Box sx={{ p: 0 }}>
           <Typography>{children}</Typography>
         </Box>
       )}
@@ -47,7 +47,7 @@ const DashboardStatsNav = () => {
 
   return (
     <Box sx={{ width: '100%' }}>
-      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
+      <Box sx={{ borderBottom: 1 }}>
         <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
           <Tab label="1Village" {...a11yProps(0)} />
           <Tab label="Pays" {...a11yProps(1)} />
diff --git a/src/components/admin/dashboard-statistics/VillageStats.tsx b/src/components/admin/dashboard-statistics/VillageStats.tsx
index 9a6eb4be6..b1de79c27 100644
--- a/src/components/admin/dashboard-statistics/VillageStats.tsx
+++ b/src/components/admin/dashboard-statistics/VillageStats.tsx
@@ -1,48 +1,131 @@
-import React, { useState } from 'react';
-
-import CountriesDropdown from './filters/CountriesDropdown';
-import PhaseDropdown from './filters/PhaseDropdown';
-import VillageDropdown from './filters/VillageDropdown';
-import { mockClassroomsStats } from './mocks/mocks';
-import { PelicoCard } from './pelico-card';
-import styles from './styles/charts.module.css';
-
-const VillageStats = () => {
-  const [selectedCountry, setSelectedCountry] = useState<string>('');
-  const [selectedVillage, setSelectedVillage] = useState<string>('');
-
-  const pelicoMessage = 'Merci de sélectionner un village-monde pour analyser ses statistiques ';
-
-  const countriesMap = mockClassroomsStats.map((country) => country.classroomCountryCode);
-  const countries = [...new Set(countriesMap)]; // avoid duplicates
-
-  const handleCountryChange = (country: string) => {
-    setSelectedCountry(country);
-  };
-
-  const villagesMap = mockClassroomsStats.filter((village) => village.classroomCountryCode === selectedCountry).map((village) => village.villageName);
-  const villages = [...new Set(villagesMap)];
-
-  const handleVillageChange = (village: string) => {
-    setSelectedVillage(village);
-  };
-
-  return (
-    <>
-      <div className={styles.filtersContainer}>
-        <div className={styles.phaseFilter}>
-          <PhaseDropdown />
-        </div>
-        <div className={styles.countryFilter}>
-          <CountriesDropdown countries={countries} onCountryChange={handleCountryChange} />
-        </div>
-        <div className={styles.countryFilter}>
-          <VillageDropdown villages={villages} onVillageChange={handleVillageChange} />
-        </div>
-      </div>
-      {!selectedVillage ? <PelicoCard message={pelicoMessage} /> : null}
-    </>
-  );
-};
-
-export default VillageStats;
+import React, { useState } from 'react';
+
+import Box from '@mui/material/Box';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Typography from '@mui/material/Typography';
+
+import StatsCard from './cards/StatsCard/StatsCard';
+import CountriesDropdown from './filters/CountriesDropdown';
+import VillageDropdown from './filters/VillageDropdown';
+import { PelicoCard } from './pelico-card';
+import styles from './styles/charts.module.css';
+import { useGetVillagesStats } from 'src/api/statistics/statistics.get';
+import { useCountries } from 'src/services/useCountries';
+import { useVillages } from 'src/services/useVillages';
+import type { VillageFilter } from 'types/village.type';
+
+const VillageStats = () => {
+  const [selectedCountry, setSelectedCountry] = useState<string>('');
+  const [selectedVillage, setSelectedVillage] = useState<string>('');
+  const [options, setOptions] = useState<VillageFilter>({ countryIsoCode: '' });
+
+  const pelicoMessage = 'Merci de sélectionner un village-monde pour analyser ses statistiques ';
+
+  const { countries } = useCountries();
+
+  const { villages } = useVillages(options);
+  const villagesStats = useGetVillagesStats(+selectedVillage);
+
+  React.useEffect(() => {
+    setOptions({
+      countryIsoCode: selectedCountry,
+    });
+  }, [selectedCountry]);
+
+  const handleCountryChange = (country: string) => {
+    setSelectedCountry(country);
+    setSelectedVillage('');
+  };
+
+  const handleVillageChange = (village: string) => {
+    setSelectedVillage(village);
+  };
+
+  interface TabPanelProps {
+    children?: React.ReactNode;
+    index: number;
+    value: number;
+  }
+
+  function a11yProps(index: number) {
+    return {
+      id: `simple-tab-${index}`,
+      'aria-controls': `simple-tabpanel-${index}`,
+    };
+  }
+  const [value, setValue] = React.useState(0);
+  const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+
+  function CustomTabPanel(props: TabPanelProps) {
+    const { children, value, index, ...other } = props;
+
+    return (
+      <div role="tabpanel" hidden={value !== index} id={`simple-tabpanel-${index}`} aria-labelledby={`simple-tab-${index}`} {...other}>
+        {value === index && (
+          <Box sx={{ p: 0 }}>
+            <Typography>{children}</Typography>
+          </Box>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <Box
+        className={styles.filtersContainer}
+        sx={{
+          display: 'flex',
+          flexDirection: {
+            xs: 'column',
+            md: 'row',
+          },
+          gap: 2,
+        }}
+      >
+        <div className={styles.countryFilter}>
+          <CountriesDropdown countries={countries} onCountryChange={handleCountryChange} />
+        </div>
+        <div className={styles.countryFilter}>
+          <VillageDropdown villages={villages} onVillageChange={handleVillageChange} />
+        </div>
+      </Box>
+      <div>
+        <p>Tableau à venir</p>
+      </div>
+      <Tabs value={value} onChange={handleTabChange} aria-label="basic tabs example" sx={{ py: 3 }}>
+        <Tab label="En classe" {...a11yProps(0)} />
+        <Tab label="En famille" {...a11yProps(1)} />
+      </Tabs>
+      <CustomTabPanel value={value} index={0}>
+        <p>Statistiques - En classe</p>
+      </CustomTabPanel>
+      <CustomTabPanel value={value} index={1}>
+        {!selectedVillage ? (
+          <PelicoCard message={pelicoMessage} />
+        ) : (
+          <Box
+            className={styles.classroomStats}
+            sx={{
+              display: 'flex',
+              flexDirection: {
+                xs: 'column', // Column direction for small devices
+                md: 'row', // Row direction for medium and larger devices
+              },
+              gap: 2, // Adds spacing between the child elements
+            }}
+          >
+            <StatsCard data={villagesStats.data?.familyAccountsCount}>Nombre de profs ayant créé des comptes famille</StatsCard>
+            <StatsCard data={villagesStats.data?.childrenCodesCount}>Nombre de codes enfant créés</StatsCard>
+            <StatsCard data={villagesStats.data?.connectedFamiliesCount}>Nombre de familles connectées</StatsCard>
+          </Box>
+        )}
+      </CustomTabPanel>
+    </>
+  );
+};
+
+export default VillageStats;
diff --git a/src/components/admin/dashboard-statistics/cards/StatsCard/StatsCard.module.css b/src/components/admin/dashboard-statistics/cards/StatsCard/StatsCard.module.css
index c91490ba9..ff822dece 100644
--- a/src/components/admin/dashboard-statistics/cards/StatsCard/StatsCard.module.css
+++ b/src/components/admin/dashboard-statistics/cards/StatsCard/StatsCard.module.css
@@ -1,11 +1,22 @@
 .cardContainer {
-    background: linear-gradient(0deg, #6065FC, #6065FC),
-        radial-gradient(69.64% 69.64% at 51.53% 21.25%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
+    background: radial-gradient(ellipse at top, #9198e5, #6065FC);
     text-align: center;
     padding: 16px;
     border-radius: 1rem;
     width: auto;
     color: #FFF;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.cardContainer:first-child{
+    margin-left: 0;
+}
+.cardContainer:last-child{
+    margin-right: 0;
 }
 
 .cardContainer>p {
diff --git a/src/components/admin/dashboard-statistics/cards/StatsCard/StatsCard.tsx b/src/components/admin/dashboard-statistics/cards/StatsCard/StatsCard.tsx
index 5806d779f..b94b22639 100644
--- a/src/components/admin/dashboard-statistics/cards/StatsCard/StatsCard.tsx
+++ b/src/components/admin/dashboard-statistics/cards/StatsCard/StatsCard.tsx
@@ -1,17 +1,27 @@
 import React from 'react';
 
+import Box from '@mui/material/Box';
+
 import styles from './StatsCard.module.css';
 
 interface StatsCardProps {
   children: React.ReactNode;
-  data: number;
+  data: number | undefined;
 }
 const StatsCard = ({ children, data }: StatsCardProps) => {
   return (
-    <div className={styles.cardContainer}>
+    <Box
+      className={styles.cardContainer}
+      sx={{
+        margin: {
+          xs: '0',
+          md: '0 1rem',
+        },
+      }}
+    >
       <p>{children}</p>
       <p>{data}</p>
-    </div>
+    </Box>
   );
 };
 
diff --git a/src/components/admin/dashboard-statistics/filters/CountriesDropdown.tsx b/src/components/admin/dashboard-statistics/filters/CountriesDropdown.tsx
index 6d4174cd6..668a6efd2 100644
--- a/src/components/admin/dashboard-statistics/filters/CountriesDropdown.tsx
+++ b/src/components/admin/dashboard-statistics/filters/CountriesDropdown.tsx
@@ -7,13 +7,15 @@ import MenuItem from '@mui/material/MenuItem';
 import type { SelectChangeEvent } from '@mui/material/Select';
 import Select from '@mui/material/Select';
 
+import type { Country } from 'types/country.type';
+
 interface CountriesDropdownProps {
-  countries: string[];
+  countries: Country[];
   onCountryChange: (country: string) => void;
 }
 
 export default function CountriesDropdown({ countries, onCountryChange }: CountriesDropdownProps) {
-  const [country, setCountry] = React.useState('');
+  const [country, setCountry] = React.useState<string>('');
 
   const handleChange = (event: SelectChangeEvent) => {
     const selectedCountry = event.target.value as string;
@@ -22,13 +24,24 @@ export default function CountriesDropdown({ countries, onCountryChange }: Countr
   };
 
   return (
-    <Box sx={{ minWidth: 150, maxWidth: 200 }}>
+    <Box
+      sx={{
+        minWidth: {
+          xs: 'none',
+          md: 150,
+        },
+        maxWidth: {
+          xs: 'none',
+          md: 200,
+        },
+      }}
+    >
       <FormControl fullWidth size="small">
         <InputLabel id="country-menu-select">Pays</InputLabel>
         <Select labelId="country-menu-select" id="country-select" value={country} label="Pays" onChange={handleChange}>
-          {countries.map((country) => (
-            <MenuItem key={country} value={country}>
-              {country}
+          {countries.map((c) => (
+            <MenuItem key={c.isoCode} value={c.isoCode}>
+              {c.name}
             </MenuItem>
           ))}
         </Select>
diff --git a/src/components/admin/dashboard-statistics/filters/PhaseDropdown.tsx b/src/components/admin/dashboard-statistics/filters/PhaseDropdown.tsx
index d65fa6a4c..d530893e0 100644
--- a/src/components/admin/dashboard-statistics/filters/PhaseDropdown.tsx
+++ b/src/components/admin/dashboard-statistics/filters/PhaseDropdown.tsx
@@ -7,11 +7,17 @@ import MenuItem from '@mui/material/MenuItem';
 import type { SelectChangeEvent } from '@mui/material/Select';
 import Select from '@mui/material/Select';
 
-export default function PhaseDropdown() {
-  const [phase, setPhase] = React.useState('');
+interface PhaseDropdownProps {
+  onPhaseChange: (phase: string) => void;
+}
+
+export default function PhaseDropdown({ onPhaseChange }: PhaseDropdownProps) {
+  const [phase, setPhase] = React.useState('4');
 
   const handleChange = (event: SelectChangeEvent) => {
-    setPhase(event.target.value as string);
+    const selectedPhase = event.target.value as string;
+    setPhase(selectedPhase);
+    onPhaseChange(selectedPhase);
   };
 
   return (
@@ -19,10 +25,12 @@ export default function PhaseDropdown() {
       <FormControl fullWidth size="small">
         <InputLabel id="phase-menu-select">Phase</InputLabel>
         <Select labelId="phase-menu-select" id="phase-menu" value={phase} label="Phase" onChange={handleChange}>
-          <MenuItem value={3}>Toutes les phases</MenuItem>
-          <MenuItem value={0}>Phase 1</MenuItem>
-          <MenuItem value={1}>Phase 2</MenuItem>
-          <MenuItem value={2}>Phase 3</MenuItem>
+          <MenuItem value={4} selected>
+            Toutes les phases
+          </MenuItem>
+          <MenuItem value={1}>Phase 1</MenuItem>
+          <MenuItem value={2}>Phase 2</MenuItem>
+          <MenuItem value={3}>Phase 3</MenuItem>
         </Select>
       </FormControl>
     </Box>
diff --git a/src/components/admin/dashboard-statistics/filters/VillageDropdown.tsx b/src/components/admin/dashboard-statistics/filters/VillageDropdown.tsx
index 367681a29..ad5096274 100644
--- a/src/components/admin/dashboard-statistics/filters/VillageDropdown.tsx
+++ b/src/components/admin/dashboard-statistics/filters/VillageDropdown.tsx
@@ -8,12 +8,12 @@ import type { SelectChangeEvent } from '@mui/material/Select';
 import Select from '@mui/material/Select';
 
 interface VillageDropdownProps {
-  villages: string[];
+  villages: { name: string; id: number }[];
   onVillageChange: (vm: string) => void;
 }
 
 export default function VillageDropdown({ villages, onVillageChange }: VillageDropdownProps) {
-  const [village, setVillage] = React.useState('');
+  const [village, setVillage] = React.useState<string>('');
 
   const handleChange = (event: SelectChangeEvent) => {
     const selectedVillage = event.target.value as string;
@@ -22,13 +22,32 @@ export default function VillageDropdown({ villages, onVillageChange }: VillageDr
   };
 
   return (
-    <Box sx={{ minWidth: 150, maxWidth: 200 }}>
+    <Box
+      sx={{
+        minWidth: {
+          xs: 'none',
+          md: 150,
+        },
+        maxWidth: {
+          xs: 'none',
+          md: 200,
+        },
+      }}
+    >
       <FormControl fullWidth size="small">
-        <InputLabel id="village-menu-select">Village-monde</InputLabel>
-        <Select labelId="village-menu-select" id="village-select" value={village} label="Village" onChange={handleChange}>
-          {villages.map((village) => (
-            <MenuItem key={village} value={village}>
-              {village}
+        <InputLabel
+          id="village-menu-select"
+          sx={{
+            backgroundColor: 'white',
+            padding: '0 4px',
+          }}
+        >
+          Village-monde
+        </InputLabel>
+        <Select labelId="village-menu-select" id="village-select" value={`${village}`} label="Village" onChange={handleChange}>
+          {villages.map((v) => (
+            <MenuItem key={v.id} value={v.id}>
+              {v.name}
             </MenuItem>
           ))}
         </Select>
diff --git a/src/components/admin/dashboard-statistics/mocks/mocks.ts b/src/components/admin/dashboard-statistics/mocks/mocks.ts
index 881b50587..aface84cb 100644
--- a/src/components/admin/dashboard-statistics/mocks/mocks.ts
+++ b/src/components/admin/dashboard-statistics/mocks/mocks.ts
@@ -36,7 +36,7 @@ export const mockClassroomsStats: ClassroomsStats[] = [
   {
     classroomId: 3,
     classroomCountryCode: 'FR',
-    villageId: 1,
+    villageId: 456,
     villageName: 'Village C',
     commentsCount: 40,
     videosCount: 2,
diff --git a/src/components/admin/dashboard-statistics/styles/charts.module.css b/src/components/admin/dashboard-statistics/styles/charts.module.css
index 4fb8a0e36..08cd95dde 100644
--- a/src/components/admin/dashboard-statistics/styles/charts.module.css
+++ b/src/components/admin/dashboard-statistics/styles/charts.module.css
@@ -11,7 +11,7 @@
   display: flex;
   justify-content: flex-start;
   gap: 20px;
-  padding-bottom: 5%;
+  padding: 5% 0;
 }
 
 .horizontalBars {
@@ -34,6 +34,7 @@
   flex-direction: row;
   justify-content: space-between;
   padding-top: 5%;
+  align-items: stretch;
 }
 
 .averageStatsContainer {
diff --git a/src/pages/admin/newportal/manage/access/index.tsx b/src/pages/admin/newportal/manage/access/index.tsx
index db114a15a..8555ba70c 100644
--- a/src/pages/admin/newportal/manage/access/index.tsx
+++ b/src/pages/admin/newportal/manage/access/index.tsx
@@ -93,7 +93,6 @@ const FeatureFlagsTest: React.FC = () => {
 
   const handleNewFeatureFlagChange = async (event: SelectChangeEvent<string>) => {
     const featureFlagName = event.target.value;
-
     // Find the feature flag object from the featureFlags state using the selected feature flag name
     const selectedFeatureFlag = (featureFlags || []).find((flag) => flag.name === featureFlagName);
 
diff --git a/src/services/useCountries.ts b/src/services/useCountries.ts
index 6508d8ecb..a0be28b1c 100644
--- a/src/services/useCountries.ts
+++ b/src/services/useCountries.ts
@@ -1,24 +1,24 @@
-import React from 'react';
-import type { QueryFunction } from 'react-query';
-import { useQuery } from 'react-query';
-
-import { axiosRequest } from 'src/utils/axiosRequest';
-import type { Country } from 'types/country.type';
-
-export const useCountries = (): { countries: Country[] } => {
-  const getCountries: QueryFunction<Country[]> = React.useCallback(async () => {
-    const response = await axiosRequest({
-      method: 'GET',
-      url: '/countries',
-    });
-    if (response.error) {
-      return [];
-    }
-    return response.data;
-  }, []);
-  const { data, isLoading, error } = useQuery<Country[], unknown>(['countries'], getCountries);
-
-  return {
-    countries: isLoading || error ? [] : data || [],
-  };
-};
+import React from 'react';
+import type { QueryFunction } from 'react-query';
+import { useQuery } from 'react-query';
+
+import { axiosRequest } from 'src/utils/axiosRequest';
+import type { Country } from 'types/country.type';
+
+export const useCountries = (): { countries: Country[] } => {
+  const getCountries: QueryFunction<Country[]> = React.useCallback(async () => {
+    const response = await axiosRequest({
+      method: 'GET',
+      url: '/countries',
+    });
+    if (response.error) {
+      return [];
+    }
+    return response.data;
+  }, []);
+  const { data, isLoading, error } = useQuery<Country[], unknown>(['countries'], getCountries);
+
+  return {
+    countries: isLoading || error ? [] : data || [],
+  };
+};
diff --git a/src/services/useVillages.ts b/src/services/useVillages.ts
index 08fe9993b..af0fde204 100644
--- a/src/services/useVillages.ts
+++ b/src/services/useVillages.ts
@@ -1,145 +1,161 @@
-import { useSnackbar } from 'notistack';
-import React from 'react';
-import type { QueryFunction } from 'react-query';
-import { useQueryClient, useQuery } from 'react-query';
-
-import { axiosRequest } from 'src/utils/axiosRequest';
-import type { Village } from 'types/village.type';
-
-export const useVillages = (): { villages: Village[]; setVillages(newVillages: Village[]): void } => {
-  const queryClient = useQueryClient();
-
-  const getVillages: QueryFunction<Village[]> = React.useCallback(async () => {
-    const response = await axiosRequest({
-      method: 'GET',
-      url: '/villages',
-    });
-    if (response.error) {
-      return [];
-    }
-    return response.data;
-  }, []);
-  const { data, isLoading, error } = useQuery<Village[], unknown>(['villages'], getVillages);
-
-  const setVillages = React.useCallback(
-    (newVillages: Village[]) => {
-      queryClient.setQueryData(['villages'], newVillages);
-    },
-    [queryClient],
-  );
-
-  return {
-    villages: isLoading || error ? [] : data || [],
-    setVillages,
-  };
-};
-
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const useVillageRequests = () => {
-  const queryClient = useQueryClient();
-  const { enqueueSnackbar } = useSnackbar();
-
-  const addVillage = React.useCallback(
-    async (newVillage: Pick<Village, 'name' | 'countries'>) => {
-      const response = await axiosRequest({
-        method: 'POST',
-        url: '/villages',
-        data: {
-          name: newVillage.name,
-          countries: newVillage.countries.map((c) => c.isoCode),
-        },
-      });
-      if (response.error) {
-        enqueueSnackbar('Une erreur est survenue...', {
-          variant: 'error',
-        });
-        return null;
-      }
-      enqueueSnackbar('Village créé avec succès!', {
-        variant: 'success',
-      });
-      queryClient.invalidateQueries('villages');
-      return response.data as Village;
-    },
-    [queryClient, enqueueSnackbar],
-  );
-
-  const editVillage = React.useCallback(
-    async (updatedVillage: Partial<Village>) => {
-      const { id, ...rest } = updatedVillage;
-      const response = await axiosRequest({
-        method: 'PUT',
-        url: `/villages/${id}`,
-        data: {
-          activePhase: rest.activePhase,
-          countries: rest.countries?.map((c) => c.isoCode) || undefined,
-          name: rest.name,
-          anthemId: rest.anthemId,
-        },
-      });
-      if (response.error) {
-        enqueueSnackbar('Une erreur est survenue...', {
-          variant: 'error',
-        });
-        return null;
-      }
-      enqueueSnackbar('Village modifié avec succès!', {
-        variant: 'success',
-      });
-      queryClient.invalidateQueries('villages');
-      return response.data as Village;
-    },
-    [queryClient, enqueueSnackbar],
-  );
-
-  const deleteVillage = React.useCallback(
-    async (id: number) => {
-      const response = await axiosRequest({
-        method: 'DELETE',
-        url: `/villages/${id}`,
-      });
-      if (response.error) {
-        enqueueSnackbar('Une erreur est survenue...', {
-          variant: 'error',
-        });
-        return;
-      }
-      enqueueSnackbar('Village supprimé avec succès!', {
-        variant: 'success',
-      });
-      queryClient.invalidateQueries('villages');
-    },
-    [queryClient, enqueueSnackbar],
-  );
-
-  const importVillages = React.useCallback(async () => {
-    const response = await axiosRequest({
-      method: 'POST',
-      url: '/villages/import/plm',
-    });
-    if (response.error) {
-      enqueueSnackbar('Une erreur est survenue...', {
-        variant: 'error',
-      });
-      return;
-    }
-    enqueueSnackbar(
-      response.data.count === 0
-        ? 'Aucun nouveau village importé!'
-        : response.data.count === 1
-        ? '1 village importé avec succès!'
-        : `${response.data.count} villages importés avec succès!`,
-      {
-        variant: 'success',
-      },
-    );
-    queryClient.invalidateQueries('villages');
-  }, [queryClient, enqueueSnackbar]);
-
-  return {
-    addVillage,
-    editVillage,
-    deleteVillage,
-    importVillages,
-  };
-};
+import { useSnackbar } from 'notistack';
+import React from 'react';
+import type { QueryFunction } from 'react-query';
+import { useQueryClient, useQuery } from 'react-query';
+
+import { axiosRequest } from 'src/utils/axiosRequest';
+import type { Village, VillageFilter } from 'types/village.type';
+
+export const useVillages = (options?: VillageFilter): { villages: Village[]; setVillages(newVillages: Village[]): void } => {
+  const queryClient = useQueryClient();
+  const buildUrl = () => {
+    if (!options) return '/villages';
+    const { countryIsoCode } = options;
+    const queryParams = [];
+
+    if (countryIsoCode) queryParams.push(`countryIsoCode=${countryIsoCode}`);
+
+    return queryParams.length ? `/villages?${queryParams.join('&')}` : '/villages';
+  };
+
+  const url = buildUrl();
+  // The query function for fetching villages, memoized with useCallback
+  const getVillages: QueryFunction<Village[]> = React.useCallback(async () => {
+    const response = await axiosRequest({
+      method: 'GET',
+      url,
+    });
+    if (response.error) {
+      return [];
+    }
+    return response.data;
+  }, [url]);
+
+  // Notice that we include `countryIsoCode` in the query key so that the query is refetched
+  const { data, isLoading, error } = useQuery<Village[], unknown>(
+    ['villages', options], // Include countryIsoCode in the query key to trigger refetching
+    getVillages,
+  );
+
+  const setVillages = React.useCallback(
+    (newVillages: Village[]) => {
+      queryClient.setQueryData(['villages', options], newVillages); // Ensure that the query key includes countryIsoCode
+    },
+    [queryClient, options],
+  );
+
+  return {
+    villages: isLoading || error ? [] : data || [],
+    setVillages,
+  };
+};
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useVillageRequests = () => {
+  const queryClient = useQueryClient();
+  const { enqueueSnackbar } = useSnackbar();
+
+  const addVillage = React.useCallback(
+    async (newVillage: Pick<Village, 'name' | 'countries'>) => {
+      const response = await axiosRequest({
+        method: 'POST',
+        url: '/villages',
+        data: {
+          name: newVillage.name,
+          countries: newVillage.countries.map((c) => c.isoCode),
+        },
+      });
+      if (response.error) {
+        enqueueSnackbar('Une erreur est survenue...', {
+          variant: 'error',
+        });
+        return null;
+      }
+      enqueueSnackbar('Village créé avec succès!', {
+        variant: 'success',
+      });
+      queryClient.invalidateQueries('villages');
+      return response.data as Village;
+    },
+    [queryClient, enqueueSnackbar],
+  );
+
+  const editVillage = React.useCallback(
+    async (updatedVillage: Partial<Village>) => {
+      const { id, ...rest } = updatedVillage;
+      const response = await axiosRequest({
+        method: 'PUT',
+        url: `/villages/${id}`,
+        data: {
+          activePhase: rest.activePhase,
+          countries: rest.countries?.map((c) => c.isoCode) || undefined,
+          name: rest.name,
+          anthemId: rest.anthemId,
+        },
+      });
+      if (response.error) {
+        enqueueSnackbar('Une erreur est survenue...', {
+          variant: 'error',
+        });
+        return null;
+      }
+      enqueueSnackbar('Village modifié avec succès!', {
+        variant: 'success',
+      });
+      queryClient.invalidateQueries('villages');
+      return response.data as Village;
+    },
+    [queryClient, enqueueSnackbar],
+  );
+
+  const deleteVillage = React.useCallback(
+    async (id: number) => {
+      const response = await axiosRequest({
+        method: 'DELETE',
+        url: `/villages/${id}`,
+      });
+      if (response.error) {
+        enqueueSnackbar('Une erreur est survenue...', {
+          variant: 'error',
+        });
+        return;
+      }
+      enqueueSnackbar('Village supprimé avec succès!', {
+        variant: 'success',
+      });
+      queryClient.invalidateQueries('villages');
+    },
+    [queryClient, enqueueSnackbar],
+  );
+
+  const importVillages = React.useCallback(async () => {
+    const response = await axiosRequest({
+      method: 'POST',
+      url: '/villages/import/plm',
+    });
+    if (response.error) {
+      enqueueSnackbar('Une erreur est survenue...', {
+        variant: 'error',
+      });
+      return;
+    }
+    enqueueSnackbar(
+      response.data.count === 0
+        ? 'Aucun nouveau village importé!'
+        : response.data.count === 1
+        ? '1 village importé avec succès!'
+        : `${response.data.count} villages importés avec succès!`,
+      {
+        variant: 'success',
+      },
+    );
+    queryClient.invalidateQueries('villages');
+  }, [queryClient, enqueueSnackbar]);
+
+  return {
+    addVillage,
+    editVillage,
+    deleteVillage,
+    importVillages,
+  };
+};
diff --git a/types/statistics.type.ts b/types/statistics.type.ts
index 2e9816573..3f644e48a 100644
--- a/types/statistics.type.ts
+++ b/types/statistics.type.ts
@@ -25,3 +25,9 @@ export interface SessionsStats {
   connectedClassroomsCount: number;
   contributedClassroomsCount: number;
 }
+
+export interface VillageStats {
+  childrenCodesCount: number;
+  familyAccountsCount: number;
+  connectedFamiliesCount: number;
+}
diff --git a/types/village.type.ts b/types/village.type.ts
index e262b3db8..f5065231c 100644
--- a/types/village.type.ts
+++ b/types/village.type.ts
@@ -14,3 +14,7 @@ export interface Village {
   anthemId: number | null;
   plmId: number | null;
 }
+
+export interface VillageFilter {
+  countryIsoCode: string;
+}