diff --git a/frontend/src/ProPage.jsx b/frontend/src/ProPage.jsx
index dcd7b17..dc9d713 100644
--- a/frontend/src/ProPage.jsx
+++ b/frontend/src/ProPage.jsx
@@ -1,13 +1,180 @@
-
 import './App.css';
-import WeatherGraph from './WeatherGraph';
+import { LineChart } from '@mui/x-charts/LineChart';
+import React, { useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+import Icon from '@mdi/react';
+import { mdiWeatherSunsetDown } from '@mdi/js';
+import { mdiWeatherSunsetUp } from '@mdi/js';
+import Navbar from './components/Navbar';
+import Footer from './components/Footer';
 
 function ProPage() {
-    return (
-        <>
-          <WeatherGraph />
-        </>
-    )
+  const [searchQuery, setSearchQuery] = useState('');
+  const [data, setData] = useState([]);
+  const [error, setError] = useState(null);
+  const [chartData, setChartData] = useState([]);
+  const [dates, setDates] = useState([]);
+
+  useEffect(() => {
+    fetch('http://localhost:5984/helios/_find', {
+      method: 'POST',
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        selector: {
+          "_id": {
+            "$gt": null
+          }
+        },
+        fields: ["_id", "city", "date", "morningTemperature", "afternoonTemperature", "eveningTemperature", "sunrise", "sunset"],
+        limit: 2000
+
+      })
+    })
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(`Erreur HTTP! statut: ${response.status}`);
+        }
+        return response.json();
+      })
+      .then((data) => {
+        if (data.docs && data.docs.length > 0) {
+          setData(data.docs);
+        } else {
+          setError(new Error('Aucun résultat trouvé'));
+        }
+      })
+      .catch((error) => {
+        setError(error);
+        console.error('Erreur lors du chargement des données:', error);
+      });
+  }, []);
+
+  function parseDate(dateString) {
+    return dayjs(dateString).format('MDD');
+  }
+
+  useEffect(() => {
+    if (searchQuery && data.length > 0) {
+      const filteredData = data.filter((doc) => doc.city.toLowerCase() === searchQuery.toLowerCase());
+
+      if (filteredData.length > 0) {
+        // Sort by date
+        const sortedData = filteredData.sort((a, b) => new Date(a.date) - new Date(b.date));
+
+        // Define the start and end dates for the week of November 11, 2024
+        const startDate = new Date('2024-11-10');
+        const endDate = new Date('2024-11-16');
+
+        // Filter the data to include only dates within the specified week
+        const weekData = sortedData.filter((doc) => {
+          const docDate = new Date(doc.date);
+          return docDate >= startDate && docDate <= endDate;
+        });
+
+        // Prepare chart data
+        const dates = weekData.map((doc) => parseDate(doc.date));
+        const morningTemps = weekData.map((doc) => parseFloat(doc.morningTemperature));
+        const afternoonTemps = weekData.map((doc) => parseFloat(doc.afternoonTemperature));
+        const eveningTemps = weekData.map((doc) => parseFloat(doc.eveningTemperature));
+
+        setDates(dates);
+        setChartData([
+          { name: 'Matin', data: morningTemps },
+          { name: 'Après-Midi', data: afternoonTemps },
+          { name: 'Soir', data: eveningTemps },
+        ]);
+      } else {
+        setChartData([]);
+      }
+    }
+  }, [searchQuery, data]);
+
+
+  function findSunrizeofToday(data) {
+    const filteredData = data.filter((doc) => doc.city.toLowerCase() === searchQuery.toLowerCase());
+
+    const today = new Date();
+    const todayString = "2024-11-02"
+    console.log(filteredData.filter((doc) => doc.date === todayString))
+    const todayData = filteredData.filter((doc) => doc.date === todayString);
+    if (todayData.length > 0) {
+      return todayData[0].sunrise;
+    }
+    return null;
+  }
+
+
+  function findSunsetofToday(data) {
+    const filteredData = data.filter((doc) => doc.city.toLowerCase() === searchQuery.toLowerCase());
+    const today = new Date();
+    const todayString = "2024-11-02"
+    console.log(filteredData.filter((doc) => doc.date === todayString))
+    const todayData = filteredData.filter((doc) => doc.date === todayString);
+    if (todayData.length > 0) {
+      return todayData[0].sunset;
+    }
+    return null;
+  }
+
+  return (
+    <div>
+      < Navbar />
+      <div className="main_rapper">
+        <div className='weather_graph_wrapper'>
+          <h2>Température des prochains jours</h2>
+          <input
+            type="text"
+            placeholder="Recherchez une ville..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+
+          {error && <p style={{ color: 'red' }}>{error.message}</p>}
+
+          {chartData.length > 0 ? (
+            <LineChart
+              xAxis={[{
+                data: dates,
+                tickNumber: 2,
+                valueFormatter: (value, context) => {
+                  if (context.location === 'tick') {
+                    // On formate chaque valeur de date ici en prenant les 3 premiers caractères
+                    return `${String(value).slice(0, 2)}/${String(value).slice(2, 4)}`
+                  } else {
+                    return value; 
+                  }
+                },
+
+              }]}
+              series={chartData.map((serie) => (
+                console.log(dates), {
+                  data: serie.data,
+                  showMark: true,
+                  label: serie.name,
+                }))}
+              height={600}
+            />) : (
+            <p>Aucun résultat trouvé</p>
+          )}
+        </div>
+
+        <div className='sunset_graph'>
+          <h2>Ephéméride</h2>
+          <div>
+            {findSunrizeofToday(data)}
+            <Icon path={mdiWeatherSunsetUp} size={3} />
+          </div>
+          <div>
+            {findSunsetofToday(data)}
+            <Icon path={mdiWeatherSunsetDown} size={3} />
+          </div>
+
+
+        </div>
+      </div>
+      < Footer />
+    </div>
+  );
 }
 
-export default ProPage;
\ No newline at end of file
+export default ProPage;
diff --git a/frontend/src/WeatherGraph.jsx b/frontend/src/WeatherGraph.jsx
deleted file mode 100644
index c3ed263..0000000
--- a/frontend/src/WeatherGraph.jsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import './App.css';
-import { LineChart } from '@mui/x-charts/LineChart';
-import React, { useState, useEffect } from 'react';
-import dayjs from 'dayjs';
-import Icon from '@mdi/react';
-import { mdiWeatherSunsetDown } from '@mdi/js';
-import { mdiWeatherSunsetUp } from '@mdi/js';
-import Navbar from './components/Navbar';
-import Footer from './components/Footer';
-
-function ProPage() {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [data, setData] = useState([]);
-  const [error, setError] = useState(null);
-  const [chartData, setChartData] = useState([]);
-  const [dates, setDates] = useState([]);
-
-  useEffect(() => {
-    fetch('http://localhost:5984/helios/_find', {
-      method: 'POST',
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        selector: {
-          "_id": {
-            "$gt": null
-          }
-        },
-        fields: ["_id", "city", "date", "morningTemperature", "afternoonTemperature", "eveningTemperature", "sunrise", "sunset"],
-        limit: 2000
-
-      })
-    })
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        return response.json();
-      })
-      .then((data) => {
-        if (data.docs && data.docs.length > 0) {
-          setData(data.docs);
-        } else {
-          setError(new Error('No matching documents found'));
-        }
-      })
-      .catch((error) => {
-        setError(error);
-        console.error('Error fetching data:', error);
-      });
-  }, []);
-
-  function parseDate(dateString) {
-    return dayjs(dateString).format('MDD');
-  }
-
-  useEffect(() => {
-    if (searchQuery && data.length > 0) {
-      const filteredData = data.filter((doc) => doc.city.toLowerCase() === searchQuery.toLowerCase());
-
-      if (filteredData.length > 0) {
-        // Sort by date
-        const sortedData = filteredData.sort((a, b) => new Date(a.date) - new Date(b.date));
-
-        // Define the start and end dates for the week of November 11, 2024
-        const startDate = new Date('2024-11-10');
-        const endDate = new Date('2024-11-16');
-
-        // Filter the data to include only dates within the specified week
-        const weekData = sortedData.filter((doc) => {
-          const docDate = new Date(doc.date);
-          return docDate >= startDate && docDate <= endDate;
-        });
-
-
-        // Prepare chart data
-        const dates = weekData.map((doc) => parseDate(doc.date));
-        const morningTemps = weekData.map((doc) => parseFloat(doc.morningTemperature));
-        const afternoonTemps = weekData.map((doc) => parseFloat(doc.afternoonTemperature));
-        const eveningTemps = weekData.map((doc) => parseFloat(doc.eveningTemperature));
-
-        setDates(dates);
-        setChartData([
-          { name: 'Matin', data: morningTemps },
-          { name: 'Après-Midi', data: afternoonTemps },
-          { name: 'Soir', data: eveningTemps },
-        ]);
-      } else {
-        setChartData([]);
-      }
-    }
-  }, [searchQuery, data]);
-
-
-  function findSunrizeofToday(data) {
-    const filteredData = data.filter((doc) => doc.city.toLowerCase() === searchQuery.toLowerCase());
-
-    const today = new Date();
-    // const todayString = today.toISOString().split('T')[0];
-    const todayString = "2024-11-02"
-    console.log(filteredData.filter((doc) => doc.date === todayString))
-    const todayData = filteredData.filter((doc) => doc.date === todayString);
-    if (todayData.length > 0) {
-      return todayData[0].sunrise;
-    }
-    return null;
-  }
-
-
-  function findSunsetofToday(data) {
-    const filteredData = data.filter((doc) => doc.city.toLowerCase() === searchQuery.toLowerCase());
-
-    const today = new Date();
-    // const todayString = today.toISOString().split('T')[0];
-    const todayString = "2024-11-02"
-    console.log(filteredData.filter((doc) => doc.date === todayString))
-    const todayData = filteredData.filter((doc) => doc.date === todayString);
-    if (todayData.length > 0) {
-      return todayData[0].sunset;
-    }
-    return null;
-  }
-
-  return (
-    <div>
-      < Navbar />
-      <div className="main_rapper">
-        <div className='weather_graph_wrapper'>
-          <h1>Température des prochains jours</h1>
-          <input
-            type="text"
-            placeholder="Enter city name"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-          />
-
-          {error && <p style={{ color: 'red' }}>{error.message}</p>}
-
-          {chartData.length > 0 ? (
-            <LineChart
-              xAxis={[{
-                data: dates,
-                tickNumber: 2,
-                valueFormatter: (value, context) => {
-                  if (context.location === 'tick') {
-                    // On formate chaque valeur de date ici en prenant les 3 premiers caractères
-                    return `${String(value).slice(0, 2)}/${String(value).slice(2, 4)} `  // Exemple de format MDD => Mois-Jour
-                  } else {
-                    return value;  // Retourne la valeur brute si ce n'est pas un tick
-                  }
-                },
-
-              }]}
-              series={chartData.map((serie) => (
-                console.log(dates), {
-                  data: serie.data,
-                  showMark: true,
-                  label: serie.name,
-                }))}
-              height={600}
-            />) : (
-            <p>No data to display</p>
-          )}
-        </div>
-
-
-        <div className='sunset_graph'>
-          <h1>Ephéméride</h1>
-          <div>
-            {findSunrizeofToday(data)}
-            <Icon path={mdiWeatherSunsetUp} size={3} />
-          </div>
-          <div>
-            {findSunsetofToday(data)}
-            <Icon path={mdiWeatherSunsetDown} size={3} />
-          </div>
-
-
-        </div>
-      </div>
-      < Footer />
-    </div>
-  );
-}
-
-export default ProPage;
diff --git a/frontend/src/assets/favicon.svg b/frontend/src/assets/favicon.svg
index 56f24da..604e41d 100644
--- a/frontend/src/assets/favicon.svg
+++ b/frontend/src/assets/favicon.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 11C21 16.55 17.16 21.74 12 23C6.84 21.74 3 16.55 3 11V5L12 1L21 5V11M12 21C15.75 20 19 15.54 19 11.22V6.3L12 3.18L5 6.3V11.22C5 15.54 8.25 20 12 21M12 8.89C13.6 8.89 14.89 10.18 14.89 11.78S13.6 14.67 12 14.67 9.11 13.37 9.11 11.78 10.41 8.89 12 8.89M12 6L13.38 8C12.96 7.82 12.5 7.73 12 7.73S11.05 7.82 10.62 8L12 6M7 8.89L9.4 8.69C9.06 9 8.74 9.34 8.5 9.76C8.25 10.18 8.1 10.62 8 11.08L7 8.89M7 14.67L8.03 12.5C8.11 12.93 8.27 13.38 8.5 13.8C8.75 14.23 9.06 14.59 9.4 14.88L7 14.67M17 8.89L16 11.08C15.9 10.62 15.74 10.18 15.5 9.76C15.26 9.34 14.95 9 14.6 8.68L17 8.89M17 14.67L14.6 14.87C14.94 14.58 15.25 14.22 15.5 13.8C15.74 13.38 15.89 12.93 15.97 12.5L17 14.67M12 17.55L10.61 15.57C11.04 15.72 11.5 15.82 12 15.82C12.5 15.82 12.95 15.72 13.37 15.57L12 17.55Z" /></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.55 19.09L4.96 20.5L6.76 18.71L5.34 17.29M12 6C8.69 6 6 8.69 6 12S8.69 18 12 18 18 15.31 18 12C18 8.68 15.31 6 12 6M20 13H23V11H20M17.24 18.71L19.04 20.5L20.45 19.09L18.66 17.29M20.45 5L19.04 3.6L17.24 5.39L18.66 6.81M13 1H11V4H13M6.76 5.39L4.96 3.6L3.55 5L5.34 6.81L6.76 5.39M1 13H4V11H1M13 20H11V23H13" /></svg>
\ No newline at end of file