diff --git a/pwa/app/components/bar-chart/form.jsx b/pwa/app/components/bar-chart/form.jsx
index 610f403f111e0ded5f893b8dddec8d1fa3009d70..7c5b78c7ef5ecd3f462024fe5649a52bbd25bbef 100644
--- a/pwa/app/components/bar-chart/form.jsx
+++ b/pwa/app/components/bar-chart/form.jsx
@@ -8,6 +8,16 @@ const DataForm = ({ onSubmit }) => {
 
     const handleSubmit = (event) => {
         event.preventDefault();
+
+        if (startDate === endDate) {
+            alert("La date de début ne doit pas être égale à la date de fin.");
+            return;
+        }
+        if (startDate > endDate) {
+            alert("La date de début ne doit pas être supérieure à la date de fin.");
+            return;
+        }
+
         onSubmit({ startDate, endDate, granularity });
     };
 
diff --git a/pwa/app/help/fetch-service.js b/pwa/app/help/fetch-service.js
index 6d2203bd24f41e4c52a71aac582acc03c77f02e6..5fa318d2c81222b840c23035b4d02254a231cbea 100644
--- a/pwa/app/help/fetch-service.js
+++ b/pwa/app/help/fetch-service.js
@@ -1,6 +1,5 @@
-const apiUrl =  'https://localhost/api';
-
-  /**
+import config from '../../config.js';
+/**
   * @param {number} year
   */
 async function getDonutContent(year) {
@@ -32,7 +31,7 @@ async function getDonutContent(year) {
 }
 
 const getTimesSeries = () => {
-  const url = `${apiUrl}/timeseries?page=1`;
+  const url = `${config.apiUrl}/timeseries?page=1`;
   return fetch(url, {
     method: 'GET',
     headers: {
@@ -41,7 +40,15 @@ const getTimesSeries = () => {
   });
 }
 
+async function fetchBarChartData(formData) {
+  const url = `${config.apiUrl}/bar-chart/${formData.startDate}/${formData.endDate}/${formData.granularity}?page=1`;
+  const response = await fetch(url);
+  const data = await response.json();
+  return data;
+}
+
 export default {
   getDonutContent,
-  getTimesSeries
+  getTimesSeries,
+  fetchBarChartData
 };
diff --git a/pwa/app/page.jsx b/pwa/app/page.jsx
index cd09925317d0af580a4999202e180c782afff135..ef8ac7594b254578a04b77896d0fe59bad75c540 100644
--- a/pwa/app/page.jsx
+++ b/pwa/app/page.jsx
@@ -19,16 +19,29 @@ export default function Page() {
 
     const handleFormSubmit = async (formData) => {
         setIsLoading(true);
-        const url = `${config.apiUrl}/bar-chart/${formData.startDate}/${formData.endDate}/${formData.granularity}?page=1`;
-        const response = await fetch(url);
-        const data = await response.json();
-        console.log(typeof data);
+        const data = await FetchService.fetchBarChartData(formData);
         setChartData(data);
         setIsLoading(false);
     };
+    const loadInitialBarChartData = async () => {
+        setIsLoading(true);
+        try {
+            const formData = {
+                startDate: '2020-01-01',
+                endDate: '2022-01-01',
+                granularity: 'month'
+            };
+            const data = await FetchService.fetchBarChartData(formData);
+            setChartData(data);
+        } catch (error) {
+            console.error('Error fetching bar chart data:', error);
+        }
+        setIsLoading(false);
+    };
 
-    useEffect( () => {
+    useEffect(() => {
         (async () => {
+            loadInitialBarChartData();
             try {
                 const response = await FetchService.getTimesSeries();
                 if (!response.ok) {
@@ -39,11 +52,6 @@ export default function Page() {
             } catch (error) {
                 console.error('Error fetching time series data:', error);
             }
-        })();
-    }, []);
-
-    useEffect(() => {
-        (async () => {
             const data = await FetchService.getDonutContent();
             const formattedData = data.map((x) => ({
                 id: x.region,