diff --git a/code/interface_admin/hooks/stats.js b/code/interface_admin/hooks/stats.js
new file mode 100644
index 0000000..40449bb
--- /dev/null
+++ b/code/interface_admin/hooks/stats.js
@@ -0,0 +1,26 @@
+import { useEffect } from "react";
+import { api } from "../config/reviewsApi";
+
+export default function useStats(limit, interval) {
+    const [stats, setStats] = useState({});
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(false);
+
+    async function fetchData(limit, interval) {
+        const response = await fetch("http://" + api.HOST + `/get_stats?interval=${interval}&limit=${limit}`)
+        if(response.ok) {
+            const data = await response.json();
+            setStats(data);
+            setError(false);
+        }else {
+            setError(true)
+        }
+        setLoading(false);
+    }
+
+    useEffect(() => {
+        fetchData(limit, interval);
+    })
+
+    return {stats, loading, error};
+}
\ No newline at end of file
diff --git a/code/interface_admin/pages/index.js b/code/interface_admin/pages/index.js
index 69985c8..8310496 100644
--- a/code/interface_admin/pages/index.js
+++ b/code/interface_admin/pages/index.js
@@ -6,19 +6,20 @@ import styles from "../styles/Home.module.css"
 
 
 export default function Home() {
-	const [datasets, setDatasets] = useState([
-	]);
-	const [averages, setAverages] = useState([]);
-	const [differences, setDifferences] = useState([]);
+	const [datasets, setDatasets] = useState(null);
+	const [averages, setAverages] = useState(null);
+	const [differences, setDifferences] = useState(null);
 	useEffect(() => {
-		let newAverages = []
-		let newDifferences = []
-		for (let i = 0; i < datasets.length; i++) {
-			newAverages[i] = datasets[i].current.reduce((a, b) => a + b) / datasets[i].current.length
-			newDifferences[i] = newAverages[i] - datasets[i].previous.reduce((a, b) => a + b) / datasets[i].previous.length
+		if (datasets) {
+			let newAverages = []
+			let newDifferences = []
+			for (let i = 0; i < datasets.length; i++) {
+				newAverages[i] = datasets[i].current.reduce((a, b) => a + b) / datasets[i].current.length
+				newDifferences[i] = newAverages[i] - datasets[i].previous.reduce((a, b) => a + b) / datasets[i].previous.length
+			}
+			setAverages(newAverages);
+			setDifferences(newDifferences);
 		}
-		setAverages(newAverages);
-		setDifferences(newDifferences);
 	}, [datasets]);
 
 	useEffect(() => setDatasets([
@@ -26,7 +27,7 @@ export default function Home() {
 		{ title: "Notes moyennes", current: [1, 2, 3, 4, 5, 6, 7], previous: [7, 6, 5, 4, 3, 2, 1] }
 	]), []);
 	function dataVisualizer(title, current, previous, average, difference) {
-		return <>
+		return <div key={title}>
 			<h3>{title}</h3>
 			<Card className={styles.averageCard}>
 				<Card.Title>Moyenne</Card.Title>
@@ -34,12 +35,12 @@ export default function Home() {
 					<div
 						className={styles.averageMainValue}
 					>
-						{Math.round(average*1e2)/1e2}
+						{Math.round(average * 1e2) / 1e2}
 					</div>
 					<div
 						className={[styles.averageCardSecondaryValue, difference >= 0 ? styles.averagePositive : styles.averageNegative].join(' ')}
 					>
-						{(difference >= 0 ? "+" : "-") + Math.round(difference*1e2)/1e2}
+						{(difference >= 0 ? "+" : "-") + Math.round(difference * 1e2) / 1e2}
 					</div>
 				</Card.Body>
 			</Card>
@@ -51,7 +52,7 @@ export default function Home() {
 				data1={previous}
 			/>
 			<hr />
-		</>
+		</div>
 	}
 
 	return (
@@ -64,7 +65,7 @@ export default function Home() {
 				<Card>
 					<Card.Header as="h2">Vos performances cette semaine</Card.Header>
 					<Card.Body>
-						{datasets.map((set, i) => dataVisualizer(set.title, set.current, set.previous, averages[i], differences[i]))}
+						{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>