diff --git a/src/components/admin/dashboard-statistics/CountryStats.tsx b/src/components/admin/dashboard-statistics/CountryStats.tsx
index 78d0dc289..6965a63b3 100644
--- a/src/components/admin/dashboard-statistics/CountryStats.tsx
+++ b/src/components/admin/dashboard-statistics/CountryStats.tsx
@@ -1,177 +1,177 @@
-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';
-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;
+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';
+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/VillageStats.tsx b/src/components/admin/dashboard-statistics/VillageStats.tsx
index ccde5d90d..a12b9d34f 100644
--- a/src/components/admin/dashboard-statistics/VillageStats.tsx
+++ b/src/components/admin/dashboard-statistics/VillageStats.tsx
@@ -68,6 +68,18 @@ const VillageStats = () => {
 
   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>
+      <p>Tableau à venir</p>
       <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)} />
@@ -76,17 +88,6 @@ const VillageStats = () => {
         <p>Statistiques - En classe</p>
       </CustomTabPanel>
       <CustomTabPanel value={value} index={1}>
-        <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} />
         ) : (
diff --git a/src/components/admin/dashboard-statistics/filters/VillageDropdown.tsx b/src/components/admin/dashboard-statistics/filters/VillageDropdown.tsx
index 64821201e..07f5c6509 100644
--- a/src/components/admin/dashboard-statistics/filters/VillageDropdown.tsx
+++ b/src/components/admin/dashboard-statistics/filters/VillageDropdown.tsx
@@ -24,7 +24,15 @@ export default function VillageDropdown({ villages, onVillageChange }: VillageDr
   return (
     <Box sx={{ minWidth: 150, maxWidth: 200 }}>
       <FormControl fullWidth size="small">
-        <InputLabel id="village-menu-select">Village-monde</InputLabel>
+        <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}>
diff --git a/src/components/admin/dashboard-statistics/styles/charts.module.css b/src/components/admin/dashboard-statistics/styles/charts.module.css
index 50dea34dc..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 {