diff --git a/code/interface_admin/components/ComparativeBarChart.jsx b/code/interface_admin/components/ComparativeBarChart.jsx
index c2cbd01..c29b4b4 100644
--- a/code/interface_admin/components/ComparativeBarChart.jsx
+++ b/code/interface_admin/components/ComparativeBarChart.jsx
@@ -1,17 +1,11 @@
 import React from 'react'
 import { Bar } from 'react-chartjs-2'
-import Chart from 'chart.js/auto';
+import Chart from 'chart.js/auto'; //NE SURTOUT PAS SUPPRIMER CET IMPORT  
 
 export default function ComparativeBarChart({ xlabels, data0, label0, data1, label1}) {
 	return (
 		<Bar
 			options={{
-				// plugins: {
-				// 	title: {
-				// 		display: true,
-				// 		text: title 
-				// 	},
-				// },
 				responsive: true,
 				interaction: {
 					intersect: false,
diff --git a/code/interface_admin/components/StatBarChart.jsx b/code/interface_admin/components/StatBarChart.jsx
new file mode 100644
index 0000000..b16a0ee
--- /dev/null
+++ b/code/interface_admin/components/StatBarChart.jsx
@@ -0,0 +1,34 @@
+import React, { useRef } from 'react'
+import { Bar } from 'react-chartjs-2'
+import Chart from 'chart.js/auto'; //NE SURTOUT PAS SUPPRIMER CET IMPORT  
+
+export default function StatBarChart({labels, data}) {
+  return (
+		<Bar 
+			options={{
+                redraw: true,
+				responsive: true,
+				interaction: {
+					intersect: false,
+				},
+				scales: {
+					x: {
+						stacked: true,
+					},
+					y: {
+						stacked: true
+					}
+				}
+			}}
+			data={{
+				labels: labels,
+				datasets: [
+					{
+						data: data,
+						backgroundColor: "#FF3B30",
+					},
+				]
+			}}
+		/>
+  )
+}
diff --git a/code/interface_admin/hooks/stats.js b/code/interface_admin/hooks/stats.js
index 4b630ce..447d7a2 100644
--- a/code/interface_admin/hooks/stats.js
+++ b/code/interface_admin/hooks/stats.js
@@ -20,7 +20,7 @@ export default function useStats(limit, interval) {
 
     useEffect(() => {
         fetchData(limit, interval);
-    }, [])
+    }, [limit, interval])
 
     return {stats, loading, error};
 }
\ No newline at end of file
diff --git a/code/interface_admin/pages/avis/index.js b/code/interface_admin/pages/avis/index.js
index 4ff8a39..26e4a85 100644
--- a/code/interface_admin/pages/avis/index.js
+++ b/code/interface_admin/pages/avis/index.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { Card, Container, Form, Row, Table } from 'react-bootstrap'
+import { Card, Container, Form, Row  } from 'react-bootstrap'
 import AvisList from '../../components/AvisList';
 import useReviews from '../../hooks/reviews';
 import styles from '../../styles/AvisListPage.module.css'
diff --git a/code/interface_admin/pages/index.js b/code/interface_admin/pages/index.js
index 553c24b..e7bb436 100644
--- a/code/interface_admin/pages/index.js
+++ b/code/interface_admin/pages/index.js
@@ -12,7 +12,7 @@ export default function Home() {
 	const [datasets, setDatasets] = useState(null);
 	const [averages, setAverages] = useState(null);
 	const [differences, setDifferences] = useState(null);
-	
+
 	useEffect(() => {
 		if (datasets) {
 			let newAverages = []
@@ -20,25 +20,25 @@ export default function Home() {
 			for (let i = 0; i < datasets.length; i++) {
 				let currentEntriesCount = 0;
 				let previousEntriesCount = 0;
-				for(let x of datasets[i].current) {
-					if(x != null) {
+				for (let x of datasets[i].current) {
+					if (x != null) {
 						currentEntriesCount++;
 					}
 				}
-				for(let x of datasets[i].previous) {
-					if(x != null) {
+				for (let x of datasets[i].previous) {
+					if (x != null) {
 						previousEntriesCount++;
 					}
 				}
 
-				if(currentEntriesCount != 0) {
-					newAverages[i] = datasets[i].current.reduce((a, b) => a + b) / currentEntriesCount; 
-					if(previousEntriesCount > 0) {
+				if (currentEntriesCount != 0) {
+					newAverages[i] = datasets[i].current.reduce((a, b) => a + b) / currentEntriesCount;
+					if (previousEntriesCount > 0) {
 						newDifferences[i] = newAverages[i] - datasets[i].previous.reduce((a, b) => a + b) / datasets[i].previous.length
-					}else {
+					} else {
 						newDifferences[i] = newAverages[i]
 					}
-				}else {
+				} else {
 					newDifferences[i] = 0;
 					newAverages[i] = 0;
 				}
@@ -47,31 +47,31 @@ export default function Home() {
 			setDifferences(newDifferences);
 		}
 	}, [datasets]);
-	
+
 	const { stats, loading, error } = useStats(14, "jour");
-	
+
 	useEffect(() => {
 		console.log(getDay(new Date("2023-03-20T14:00:00.000Z")))
 	})
-	
+
 	useEffect(() => {
-		if(!error && !loading) {
-			let reviewCount = [null,null,null,null,null,null,null];
-			let reviewCountPrev = [null,null,null,null,null,null,null]
-			let reviewAvg = [null,null,null,null,null,null,null]
-			let reviewAvgPrev = [null,null,null,null,null,null,null]
-			
-			for(let i = 0; i < stats.length; i++) {
+		if (!error && !loading) {
+			let reviewCount = [null, null, null, null, null, null, null];
+			let reviewCountPrev = [null, null, null, null, null, null, null]
+			let reviewAvg = [null, null, null, null, null, null, null]
+			let reviewAvgPrev = [null, null, null, null, null, null, null]
+
+			for (let i = 0; i < stats.length; i++) {
 				let date = new Date(Date.parse(stats[i].date))
 				let now = new Date();
 				let day = (date.getDay() - 1) % 7;
 				let week = getWeek(date, 1);
 				let thisWeek = getWeek(now, 1);
-				console.log({date,week,thisWeek,day})
-				if(week == thisWeek) {
+				console.log({ date, week, thisWeek, day })
+				if (week == thisWeek) {
 					reviewCount[day] = stats[i].nb_avis;
 					reviewAvg[day] = stats[i].moyenne_globale;
-				}else if(week = thisWeek - 1){
+				} else if (week = thisWeek - 1) {
 					reviewAvgPrev[day] = stats[i].moyenne_globale;
 					reviewCountPrev[day] = stats[i].nb_avis;
 				}
@@ -82,53 +82,52 @@ export default function Home() {
 			])
 		}
 	}, [stats]);
-	
+
 	function dataVisualizer(title, current, previous, average, difference) {
 		return <div key={title}>
-		<h3>{title}</h3>
-		<Card className={styles.averageCard}>
-		<Card.Title>Moyenne</Card.Title>
-		<Card.Body className={styles.averageCardBody}>
-		<div
-		className={styles.averageMainValue}
-		>
-		{Math.round(average * 1e2) / 1e2}
-		</div>
-		<div
-		className={[styles.averageCardSecondaryValue, difference >= 0 ? styles.averagePositive : styles.averageNegative].join(' ')}
-		>
-		{(difference >= 0 ? "+" : "-") + Math.round(difference * 1e2) / 1e2}
-		</div>
-		</Card.Body>
-		</Card>
-		<ComparativeBarChart
-		xlabels={["lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi", "dimanche"]}
-		label0="Cette semaine"
-		label1="La semaine dernière"
-		data0={current}
-		data1={previous}
-		/>
-		<hr />
+			<h3>{title}</h3>
+			<Card className={styles.averageCard}>
+				<Card.Title>Moyenne</Card.Title>
+				<Card.Body className={styles.averageCardBody}>
+					<div
+						className={styles.averageMainValue}
+					>
+						{Math.round(average * 1e2) / 1e2}
+					</div>
+					<div
+						className={[styles.averageCardSecondaryValue, difference >= 0 ? styles.averagePositive : styles.averageNegative].join(' ')}
+					>
+						{(difference >= 0 ? "+" : "-") + Math.round(difference * 1e2) / 1e2}
+					</div>
+				</Card.Body>
+			</Card>
+			<ComparativeBarChart
+				xlabels={["lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi", "dimanche"]}
+				label0="Cette semaine"
+				label1="La semaine dernière"
+				data0={current}
+				data1={previous}
+			/>
+			<hr />
 		</div>
 	}
-	
+
 	return (
 		<>
-		<Head>
-		<title>Create Next App</title>
-		<meta name="description" content="Page d'accueil" />
-		</Head>
-		<Container fluid>
-		<Card>
-		<Card.Header as="h2">Vos performances cette semaine</Card.Header>
-		<Card.Body>
-		{datasets && averages && differences && datasets.map((set, i) => dataVisualizer(set.title, set.current, set.previous, averages[i], differences[i]))}
-		</Card.Body>
-		<div className='col col-12 col-lg-8 mx-auto'>
-		</div>
-		</Card>
-		</Container>
+			<Head>
+				<title>Telereview</title>
+				<meta name="description" content="Page d'accueil" />
+			</Head>
+			<Container fluid>
+				<Card>
+					<Card.Header as="h2">Vos performances cette semaine</Card.Header>
+					<Card.Body>
+						{datasets && averages && differences && datasets.map((set, i) => dataVisualizer(set.title, set.current, set.previous, averages[i], differences[i]))}
+					</Card.Body>
+					<div className='col col-12 col-lg-8 mx-auto'>
+					</div>
+				</Card>
+			</Container>
 		</>
-		)
-	}
-	
\ No newline at end of file
+	)
+}
diff --git a/code/interface_admin/pages/stats.js b/code/interface_admin/pages/stats.js
index 9be9933..800e60f 100644
--- a/code/interface_admin/pages/stats.js
+++ b/code/interface_admin/pages/stats.js
@@ -1,7 +1,69 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+import { Card, Container, Form, Row  } from 'react-bootstrap';
+import StatBarChart from '../components/StatBarChart';
+import useStats from '../hooks/stats';
 
 export default function Stats() {
+  const [statName,setStatName] = useState("moyenne_globale")
+  const [timeInterval, setTimeInterval] = useState("jour")
+  const [chartReady, setChartReady] = useState(false);
+  const [xlabels, setXlabels] = useState([]);
+  const [plotData, setPlotData] = useState([]);
+
+  const {loading, error, stats} = useStats(10,timeInterval);
+
+  useEffect(() => {
+    if(!loading && !error) {
+      let newXlabels = [];
+      let newPlotData = [];
+      for(let i = 0; i < stats.length; i++) {
+        newXlabels.push(stats[i].date);
+        newPlotData.push(stats[i][statName]);
+      }
+      setXlabels(newXlabels);
+      setPlotData(newPlotData);
+      setChartReady(true);
+      console.log(timeInterval, stats, plotData, xlabels);
+    }else {
+      setChartReady(false);
+    }
+  }, [stats, statName, timeInterval, loading, error])
+
+
   return (
-    <div>stats</div>
+    <Container fluid>
+      <Card>
+        <Card.Header>Tous les avis</Card.Header>
+        <Card.Body>
+          <Row>
+            <Form>
+              <Form.Group>
+                <Form.Label>Statistique</Form.Label>
+                <Form.Select value={statName} onChange={(e) => setStatName(e.target.value)}>
+                  <option value="moyenne_globale">Moyenne globale</option>
+                  <option value="nb_avis">Nombre d'avis</option>
+                  <option value="moyenne_site">Moyenne du formulaire</option>
+                  <option value = "moyenne_borne">Moyenne sur la borne</option>
+                  <option value="dist_sexes">Distribution sexes</option>
+                </Form.Select>
+              </Form.Group>
+              <Form.Group>
+                <Form.Label>Periode</Form.Label>
+                <Form.Select value={timeInterval} onChange={(e) => setTimeInterval(e.target.value)}>
+                  <option value="jour">Jour</option>
+                  <option value="semaine">Semaine</option>
+                  <option value="mois">Mois</option>
+                  <option value = "annee">Année</option>
+                </Form.Select>
+              </Form.Group>
+            </Form>
+          </Row>
+          <Row>
+            {error && <p>Error</p>}
+            {chartReady && <StatBarChart data={plotData} labels={xlabels} />}
+          </Row>
+        </Card.Body>
+      </Card>
+    </Container>
   )
 }
diff --git a/docs/charte_graphique.md b/docs/charte_graphique.md
new file mode 100644
index 0000000..25ce42b
--- /dev/null
+++ b/docs/charte_graphique.md
@@ -0,0 +1,3 @@
+# Codes hex couleurs
+#6B8000
+#A6CC00
\ No newline at end of file