diff --git a/server/controllers/activity.ts b/server/controllers/activity.ts
index f18bdfceb..da6a20ee0 100644
--- a/server/controllers/activity.ts
+++ b/server/controllers/activity.ts
@@ -2,8 +2,8 @@ import type { JSONSchemaType } from 'ajv';
 import type { NextFunction, Request, Response } from 'express';
 import { IsNull } from 'typeorm';
 
-import type { Track } from '../../types/anthem.type';
 import { TrackType } from '../../types/anthem.type';
+import type { Track } from '../../types/anthem.type';
 import type { ActivityContent, AnyData } from '../../types/activity.type';
 import { EPhase1Steps, ActivityStatus, ActivityType, EPhase2Steps, EPhase3Steps } from '../../types/activity.type';
 import type { GameData, GamesData } from '../../types/game.type';
@@ -368,7 +368,7 @@ activityController.put({ path: '/:id', userType: UserType.TEACHER }, async (req:
       data.data.slicedRecordUrl = buildAudioMix(activity.userId, [data.data.classRecordTrack as Track, data.data.classRecordTrack as Track]);
     }
   }
-  
+
   if (activity.status !== ActivityStatus.PUBLISHED) {
     if (data.phase) activity.phase = data.phase;
     if (data.phaseStep) {
diff --git a/src/components/admin/dashboard-statistics/ClassroomStats.tsx b/src/components/admin/dashboard-statistics/ClassroomStats.tsx
index 4751cfbd6..e123ae881 100644
--- a/src/components/admin/dashboard-statistics/ClassroomStats.tsx
+++ b/src/components/admin/dashboard-statistics/ClassroomStats.tsx
@@ -1,7 +1,16 @@
 import React from 'react';
 
+import BarCharts from './charts/BarCharts';
+
+const barChartData = [{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }];
+
 const ClassroomStats = () => {
-  return <h1>Classe</h1>;
+  return (
+    <>
+      <h1>Classe</h1>;
+      <BarCharts barChartData={barChartData} />
+    </>
+  );
 };
 
 export default ClassroomStats;
diff --git a/src/components/admin/dashboard-statistics/CountryStats.tsx b/src/components/admin/dashboard-statistics/CountryStats.tsx
index 86bd87f28..d340409ae 100644
--- a/src/components/admin/dashboard-statistics/CountryStats.tsx
+++ b/src/components/admin/dashboard-statistics/CountryStats.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
 
+import BarCharts from './charts/BarCharts';
+import DashboardTable from './charts/DashboardTable';
+import HorizontalChart from './charts/HorizontalChart';
 import PieCharts from './charts/PieCharts';
+import PhaseDropdown from './filters/PhaseDropdown';
+import styles from './styles/charts.module.css';
+import PhaseDropdown from './filters/PhaseDropdown';
+import styles from './styles/charts.module.css';
 
 const pieChartData = {
   data: [
@@ -10,11 +17,23 @@ const pieChartData = {
   ],
 };
 
+const barChartData = [{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }];
+
+const barChartData = [{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }];
+
 const CountryStats = () => {
   return (
     <>
-      <h1>Pays</h1>
-      <PieCharts pieChartData={pieChartData} />
+      <PhaseDropdown />
+      <h1>Statut: Observateur</h1>
+      <div className={styles.chartsContainer}>
+        <HorizontalChart />
+        <DashboardTable />
+        <div className={styles.engamentContainer}>
+          <PieCharts pieChartData={pieChartData} />
+          <BarCharts barChartData={barChartData} />
+        </div>
+      </div>
     </>
   );
 };
diff --git a/src/components/admin/dashboard-statistics/charts/BarCharts.tsx b/src/components/admin/dashboard-statistics/charts/BarCharts.tsx
index 8a70b2c1f..22161405a 100644
--- a/src/components/admin/dashboard-statistics/charts/BarCharts.tsx
+++ b/src/components/admin/dashboard-statistics/charts/BarCharts.tsx
@@ -2,24 +2,31 @@ import React from 'react';
 
 import { BarChart } from '@mui/x-charts/BarChart';
 
-// import styles from '../styles/charts.module.css';
+import styles from '../styles/charts.module.css';
 
 type BarChartDataItem = {
   data: number[];
 };
 
-type BarChartData = {
-  dt: BarChartDataItem[];
-};
-
 interface Props {
-  barChartData: BarChartData;
+  barChartData: BarChartDataItem[];
 }
 
 const BarCharts: React.FC<Props> = ({ barChartData }) => {
-  const numericData = barChartData.dt.flatMap((item) => item.data);
+  const seriesData = barChartData.map((item) => ({ data: item.data }));
   return (
-    <BarChart xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]} series={[{ data: numericData }]} width={500} height={300} />
+    <div className={styles.barContainer}>
+      <div className={styles.title}>Evolution des connexions</div>
+      <BarChart 
+        xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]} 
+        series={seriesData}
+        slotProps={{
+          bar: {
+            clipPath: `inset(0px round 40px)`,
+          },
+        }} 
+      />
+    </div>
   );
 };
 
diff --git a/src/components/admin/dashboard-statistics/charts/DashboardTable.tsx b/src/components/admin/dashboard-statistics/charts/DashboardTable.tsx
new file mode 100644
index 000000000..07414383c
--- /dev/null
+++ b/src/components/admin/dashboard-statistics/charts/DashboardTable.tsx
@@ -0,0 +1,56 @@
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import React from 'react';
+
+// function createData(classroom: string, vm: sting, prof: string, status: string) {
+//   return { classroom, vm, prof, status };
+// }
+
+// const rows = [
+//   createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
+//   createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
+//   createData('Eclair', 262, 16.0, 24, 6.0),
+//   createData('Cupcake', 305, 3.7, 67, 4.3),
+//   createData('Gingerbread', 356, 16.0, 49, 3.9),
+// ];
+
+export default function DashboardTable() {
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }} aria-label="simple table">
+        <TableHead>
+          <TableRow>
+            <TableCell>A surveiller</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell align="right">Classe</TableCell>
+            <TableCell align="right">Village-Monde</TableCell>
+            <TableCell align="right">Professeur</TableCell>
+            <TableCell align="right">Statut</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {/* {rows.map((row) => (
+            <TableRow
+              key={row.name}
+              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+            >
+              <TableCell component="th" scope="row">
+                {row.name}
+              </TableCell>
+              <TableCell align="right">{row.classroom}</TableCell>
+              <TableCell align="right">{row.vm}</TableCell>
+              <TableCell align="right">{row.prof}</TableCell>
+              <TableCell align="right">{row.status}</TableCell>
+            </TableRow>
+          ))} */}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/src/components/admin/dashboard-statistics/charts/HorizontalChart.tsx b/src/components/admin/dashboard-statistics/charts/HorizontalChart.tsx
new file mode 100644
index 000000000..09b13d9df
--- /dev/null
+++ b/src/components/admin/dashboard-statistics/charts/HorizontalChart.tsx
@@ -0,0 +1,49 @@
+import { BarChart } from '@mui/x-charts/BarChart';
+import * as React from 'react';
+
+import styles from '../styles/charts.module.css';
+import { useGetClassroomExchanges, ClassroomExchangesStats } from 'src/api/statistics/statistics.get.ts';
+
+const chartSetting = {
+  xAxis: [
+    {
+      label: 'publications & commentaires',
+    },
+  ],
+  width: 500,
+  height: 400,
+};
+const dataset = [];
+
+const valueFormatter = (value: number | null) => `${value}mm`;
+
+// eslint-disable-next-line no-console
+console.log('Data:', data);
+
+// handle loading & errors
+// if (isLoading) return <div>Loading...</div>;
+// if (isError) return <div>Error...</div>;
+
+export default function HorizontalBars() {
+  return (
+    <div className={styles.horizontalBars}>
+      <BarChart
+        dataset={dataset}
+        yAxis={[
+          {
+            scaleType: 'band',
+            dataKey: 'month',
+          },
+        ]}
+        series={[{ dataKey: 'seoul', valueFormatter, color: '#4C3ED9' }]}
+        layout="horizontal"
+        {...chartSetting}
+        slotProps={{
+          bar: {
+            clipPath: `inset(0px round 25px)`,
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/components/admin/dashboard-statistics/charts/HorizontalCharts.tsx b/src/components/admin/dashboard-statistics/charts/HorizontalCharts.tsx
new file mode 100644
index 000000000..a46591e4f
--- /dev/null
+++ b/src/components/admin/dashboard-statistics/charts/HorizontalCharts.tsx
@@ -0,0 +1,126 @@
+import * as React from "react";
+import { BarChart } from "@mui/x-charts/BarChart";
+
+import styles from '../styles/charts.module.css';
+
+const chartSetting = {
+  xAxis: [
+    {
+      label: "publications & commentaires",
+    },
+  ],
+  width: 500,
+  height: 400,
+};
+const dataset = [
+  {
+    pays: 59,
+    paris: 57,
+    newYork: 86,
+    seoul: 21,
+    month: "pays 1",
+  },
+  {
+    london: 50,
+    paris: 52,
+    newYork: 78,
+    seoul: 28,
+    month: "Fev",
+  },
+  {
+    london: 47,
+    paris: 53,
+    newYork: 106,
+    seoul: 41,
+    month: "Mar",
+  },
+  {
+    london: 54,
+    paris: 56,
+    newYork: 92,
+    seoul: 73,
+    month: "Apr",
+  },
+  {
+    london: 57,
+    paris: 69,
+    newYork: 92,
+    seoul: 99,
+    month: "May",
+  },
+  {
+    london: 60,
+    paris: 63,
+    newYork: 103,
+    seoul: 144,
+    month: "June",
+  },
+  {
+    london: 59,
+    paris: 60,
+    newYork: 105,
+    seoul: 319,
+    month: "July",
+  },
+  {
+    london: 65,
+    paris: 60,
+    newYork: 106,
+    seoul: 249,
+    month: "Aug",
+  },
+  {
+    london: 51,
+    paris: 51,
+    newYork: 95,
+    seoul: 131,
+    month: "Sept",
+  },
+  {
+    london: 60,
+    paris: 65,
+    newYork: 97,
+    seoul: 55,
+    month: "Oct",
+  },
+  {
+    london: 67,
+    paris: 64,
+    newYork: 76,
+    seoul: 48,
+    month: "Nov",
+  },
+  {
+    london: 61,
+    paris: 70,
+    newYork: 103,
+    seoul: 25,
+    month: "Dec",
+  },
+];
+
+const valueFormatter = (value: number | null) => `${value}mm`;
+
+export default function HorizontalBars() {
+  return (
+    <div className={styles.horizontalBars}>
+      <BarChart
+        dataset={dataset}
+        yAxis={[
+          {
+            scaleType: "band",
+            dataKey: "month",
+          },
+        ]}
+        series={[{ dataKey: "seoul", valueFormatter, color: '#4C3ED9' }]}
+        layout="horizontal"
+        {...chartSetting}
+        slotProps={{
+          bar: {
+            clipPath: `inset(0px round 25px)`,
+          },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/components/admin/dashboard-statistics/charts/PieCharts.tsx b/src/components/admin/dashboard-statistics/charts/PieCharts.tsx
index 5c82b782f..5a371bea6 100644
--- a/src/components/admin/dashboard-statistics/charts/PieCharts.tsx
+++ b/src/components/admin/dashboard-statistics/charts/PieCharts.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { PieChart } from '@mui/x-charts/PieChart';
 
 import styles from '../styles/charts.module.css';
@@ -19,13 +18,20 @@ interface Props {
 }
 
 const PieCharts: React.FC<Props> = ({ pieChartData }) => {
+  const labels = pieChartData.data.map((item) => item.label);
+
   return (
-    <>
-      <div className={styles.pieContainer}>
-        <div className={styles.title}>Niveau engagement</div>
-        <PieChart className={styles.pieChart} series={[{ data: pieChartData.data }]} width={400} height={200} />
+    <div className={styles.pieContainer}>
+      <div className={styles.title}>Niveau engagement</div>
+      <PieChart series={[{ data: pieChartData.data }]} width={400} height={200} />
+      <div className={`${styles.legend}`}>
+        {labels.map((label, index) => (
+          <div key={index} className={styles.legendItem}>
+            {label}
+          </div>
+        ))}
       </div>
-    </>
+    </div>
   );
 };
 
diff --git a/src/components/admin/dashboard-statistics/filters/PhaseDropdown.tsx b/src/components/admin/dashboard-statistics/filters/PhaseDropdown.tsx
new file mode 100644
index 000000000..e8f67b833
--- /dev/null
+++ b/src/components/admin/dashboard-statistics/filters/PhaseDropdown.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+
+export default function PhaseDropdown() {
+  const [phase, setPhase] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setPhase(event.target.value as string);
+  };
+
+  return (
+    <Box sx={{ maxWidth: 120 }}>
+      <FormControl fullWidth>
+        <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>
+        </Select>
+      </FormControl>
+    </Box>
+  );
+}
diff --git a/src/components/admin/dashboard-statistics/styles/charts.module.css b/src/components/admin/dashboard-statistics/styles/charts.module.css
index e2992bb51..12bb52cdc 100644
--- a/src/components/admin/dashboard-statistics/styles/charts.module.css
+++ b/src/components/admin/dashboard-statistics/styles/charts.module.css
@@ -7,16 +7,56 @@
     text-align: left;
 }
 
+.horizontalBars {
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    background-color: #F3F3F3;
+    margin-bottom: 20px;
+    max-width: auto;
+    border-radius: 20px;
+    position: relative;
+}
+
+.chartsContainer {
+    display: flex;
+    flex-direction: column;
+}
+
 .pieContainer {
     display: flex;
     flex-direction: column;
     padding: 20px;
     background-color: #F3F3F3;
     margin-bottom: 20px;
-    max-width: 285.61px;
-    max-height: 282.81px;
-    top: 3.09px;
-    gap: 0px;
-    border-radius: 20px 20px 20px 20px;
-    opacity: 0px;
+    max-width: 400px;
+    border-radius: 20px;
+    position: relative;
+}
+
+.legend {
+    display: flex;
+    justify-content: center;
+}
+
+.legendItem {
+    margin: 5px;
+    font-size: 14px;
+}
+
+.barContainer {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 20px;
+    background-color: #F3F3F3;
+    margin-left: 20px;
+    max-width: 648px;
+    max-height: 289px;
+    border-radius: 20px;
+}
+
+.engamentContainer {
+    display: flex;
+    flex-direction: row;
 }
\ No newline at end of file
diff --git a/src/pages/admin/newportal/analyze/index.tsx b/src/pages/admin/newportal/analyze/index.tsx
index fb24d5a81..9243d4c2d 100644
--- a/src/pages/admin/newportal/analyze/index.tsx
+++ b/src/pages/admin/newportal/analyze/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+
 import DashboardStatsNav from 'src/components/admin/dashboard-statistics/DashboardStatsNav';
 
 const Analyser = () => {