diff --git a/AirQuality.ino b/AirQuality.ino
index c040ec1..8a94d3b 100644
--- a/AirQuality.ino
+++ b/AirQuality.ino
@@ -93,6 +93,7 @@ void setup() {
 
   // Sync time using NTP
   syncTime();
+  delay(1000);
 
   // Initialize AHTX0 sensor
   if (!aht.begin()) {
@@ -150,11 +151,11 @@ void setup() {
       color: #000000;
     }
     .card.poor {
-      background-color: #ff5722;
+      background-color:rgb(255, 60, 34);
       color: #ffffff;
     }
     .card.unhealthy {
-      background-color: #f44336;
+      background-color:rgb(244, 54, 244);
       color: #ffffff;
     }
     .apexcharts-tooltip {
@@ -225,94 +226,121 @@ void setup() {
       </div>
     </div>
   </div>
-  <script>
-    let chartOptions = {
-      chart: {
-        type: 'line',
-        height: 350,
-        animations: { enabled: true, easing: 'linear', dynamicAnimation: { speed: 1000 } },
-        background: '#1e1e1e'
-      },
-      series: [
-        { name: 'TVOC (ppb)', data: [] },
-        { name: 'eCO2 (ppm)', data: [] },
-        { name: 'Temperature (°C)', data: [] },
-        { name: 'Humidity (%)', data: [] }
-      ],
-      xaxis: { type: 'datetime', labels: { style: { colors: '#ffffff' } } },
-      yaxis: { labels: { style: { colors: '#ffffff' } } },
-      tooltip: { theme: 'dark' },
-    };
+<script>
+  let chartOptions = {
+    chart: {
+      type: 'line',
+      height: 350,
+      animations: { enabled: true, easing: 'linear', dynamicAnimation: { speed: 1000 } },
+      background: '#1e1e1e'
+    },
+    series: [
+      { name: 'TVOC (ppb)', data: [] },
+      { name: 'eCO2 (ppm)', data: [] },
+      { name: 'Temperature (°C)', data: [] },
+      { name: 'Humidity (%)', data: [] }
+    ],
+    xaxis: { type: 'datetime', labels: { style: { colors: '#ffffff' } } },
+    yaxis: { labels: { style: { colors: '#ffffff' } } },
+    tooltip: { theme: 'dark' }
+  };
 
-    let chart = new ApexCharts(document.querySelector("#chart"), chartOptions);
-    chart.render();
+  let chart = new ApexCharts(document.querySelector("#chart"), chartOptions);
+  chart.render();
 
-    async function fetchData() {
+  async function fetchData() {
+    try {
       const response = await fetch('/data');
+      if (!response.ok) {
+        console.error(`Failed to fetch data: ${response.statusText}`);
+        return;
+      }
+
       const data = await response.json();
 
-      console.log(data.latest.humidity);
-
+      // Update cards
       updateCard("aqiCard", data.latest.aqi, getAQIRecommendation(data.latest.aqi));
       updateCard("eco2Card", data.latest.eco2, getECO2Recommendation(data.latest.eco2));
       updateCard("tvocCard", data.latest.tvoc, getTVOCRecommendation(data.latest.tvoc));
       updateCard("temperatureCard", data.latest.temperature, getTemperatureClass(data.latest.temperature));
       updateCard("humidityCard", data.latest.humidity, getHumidityClass(data.latest.humidity));
 
+      // Update chart
       chart.updateSeries([
         { name: 'TVOC (ppb)', data: data.history.tvoc },
         { name: 'eCO2 (ppm)', data: data.history.eco2 },
         { name: 'Temperature (°C)', data: data.history.temperature },
         { name: 'Humidity (%)', data: data.history.humidity }
       ]);
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
+  }
+
+  function updateCard(cardId, value, recommendation) {
+    const card = document.getElementById(cardId);
+    if (!card) {
+      console.error(`Card with ID ${cardId} not found.`);
+      return;
     }
 
-    function updateCard(cardId, value, recommendation) {
-      const card = document.getElementById(cardId);
-      const valueText = card.querySelector(".card-body h4");
-      const recText = card.querySelector(".card-body p");
-      card.className = `card text-center ${recommendation.class}`;
+    const valueText = card.querySelector(".card-body h4");
+    const recText = card.querySelector(".card-body p");
+
+    if (valueText) {
       valueText.textContent = value.toFixed(1);
-      recText.textContent = recommendation.text;
+    } else {
+      console.error(`Value text element not found in ${cardId}`);
     }
 
-    function getAQIRecommendation(aqi) {
-      if (aqi === 1) return { class: "excellent", text: "Suitable for long-term living." };
-      if (aqi === 2) return { class: "good", text: "Maintain adequate ventilation." };
-      if (aqi === 3) return { class: "moderate", text: "Strengthen ventilation." };
-      if (aqi === 4) return { class: "poor", text: "Find pollution sources, ventilate more." };
-      return { class: "unhealthy", text: "Avoid staying long; ventilate." };
+    if (recText && recommendation) {
+      recText.textContent = recommendation.text || "";
+      card.className = `card text-center ${recommendation.class || ""}`;
+    } else if (recText) {
+      recText.textContent = "";
+      card.className = "card text-center";
     }
+  }
 
-    function getECO2Recommendation(eco2) {
-      if (eco2 > 1500) return { class: "unhealthy", text: "Serious pollution, ventilate!" };
-      if (eco2 > 1000) return { class: "poor", text: "Polluted air, ventilation recommended." };
-      if (eco2 > 800) return { class: "moderate", text: "Consider ventilation." };
-      if (eco2 > 600) return { class: "good", text: "Air quality is fine." };
-      return { class: "excellent", text: "Air quality is excellent." };
-    }
+  function getAQIRecommendation(aqi) {
+    if (aqi === 1) return { class: "excellent", text: "Suitable for long-term living." };
+    if (aqi === 2) return { class: "good", text: "Maintain adequate ventilation." };
+    if (aqi === 3) return { class: "moderate", text: "Strengthen ventilation." };
+    if (aqi === 4) return { class: "poor", text: "Find pollution sources, ventilate more." };
+    return { class: "unhealthy", text: "Avoid staying long; ventilate." };
+  }
 
-    function getTVOCRecommendation(tvoc) {
-      if (tvoc > 6000) return { class: "unhealthy", text: "Headaches and nerve issues possible." };
-      if (tvoc > 750) return { class: "poor", text: "May cause headaches, ventilate." };
-      if (tvoc > 50) return { class: "moderate", text: "Some discomfort possible." };
-      return { class: "excellent", text: "No effects on health." };
-    }
+  function getECO2Recommendation(eco2) {
+    if (eco2 > 1500) return { class: "unhealthy", text: "Serious pollution, ventilate!" };
+    if (eco2 > 1000) return { class: "poor", text: "Polluted air, ventilation recommended." };
+    if (eco2 > 800) return { class: "moderate", text: "Consider ventilation." };
+    if (eco2 > 600) return { class: "good", text: "Air quality is fine." };
+    return { class: "excellent", text: "Air quality is excellent." };
+  }
 
-    function getTemperatureClass(temp) {
-      if (temp < 18) return { class: "moderate", text: "Too cold, consider heating." };
-      if (temp > 26) return { class: "poor", text: "Too hot, ventilate or cool down." };
-      return { class: "good", text: "Comfortable temperature." };
-    }
+  function getTVOCRecommendation(tvoc) {
+    if (tvoc > 6000) return { class: "unhealthy", text: "Headaches and nerve issues possible." };
+    if (tvoc > 750) return { class: "poor", text: "May cause headaches, ventilate." };
+    if (tvoc > 50) return { class: "moderate", text: "Some discomfort possible." };
+    return { class: "excellent", text: "No effects on health." };
+  }
 
-    function getHumidityClass(hum) {
-      if (hum < 30) return { class: "moderate", text: "Too dry, consider humidifying." };
-      if (hum > 60) return { class: "poor", text: "Too humid, consider dehumidifying." };
-      return { class: "good", text: "Comfortable humidity." };
-    }
+  function getTemperatureClass(temp) {
+    if (temp < 18) return { class: "moderate"};
+    if (temp > 26) return { class: "poor"};
+    return { class: "good"};
+  }
+
+  function getHumidityClass(hum) {
+    if (hum < 30) return { class: "moderate"};
+    if (hum > 60) return { class: "poor"};
+    return { class: "good"};
+  }
+
+  // Fetch data every second
+  setInterval(fetchData, 1000);
+</script>
 
-    setInterval(fetchData, 1000);
-  </script>
 </body>
 </html>
     )rawliteral";
diff --git a/AirQuality/AirQuality.ino b/AirQuality/AirQuality.ino
index c040ec1..8a94d3b 100644
--- a/AirQuality/AirQuality.ino
+++ b/AirQuality/AirQuality.ino
@@ -93,6 +93,7 @@ void setup() {
 
   // Sync time using NTP
   syncTime();
+  delay(1000);
 
   // Initialize AHTX0 sensor
   if (!aht.begin()) {
@@ -150,11 +151,11 @@ void setup() {
       color: #000000;
     }
     .card.poor {
-      background-color: #ff5722;
+      background-color:rgb(255, 60, 34);
       color: #ffffff;
     }
     .card.unhealthy {
-      background-color: #f44336;
+      background-color:rgb(244, 54, 244);
       color: #ffffff;
     }
     .apexcharts-tooltip {
@@ -225,94 +226,121 @@ void setup() {
       </div>
     </div>
   </div>
-  <script>
-    let chartOptions = {
-      chart: {
-        type: 'line',
-        height: 350,
-        animations: { enabled: true, easing: 'linear', dynamicAnimation: { speed: 1000 } },
-        background: '#1e1e1e'
-      },
-      series: [
-        { name: 'TVOC (ppb)', data: [] },
-        { name: 'eCO2 (ppm)', data: [] },
-        { name: 'Temperature (°C)', data: [] },
-        { name: 'Humidity (%)', data: [] }
-      ],
-      xaxis: { type: 'datetime', labels: { style: { colors: '#ffffff' } } },
-      yaxis: { labels: { style: { colors: '#ffffff' } } },
-      tooltip: { theme: 'dark' },
-    };
+<script>
+  let chartOptions = {
+    chart: {
+      type: 'line',
+      height: 350,
+      animations: { enabled: true, easing: 'linear', dynamicAnimation: { speed: 1000 } },
+      background: '#1e1e1e'
+    },
+    series: [
+      { name: 'TVOC (ppb)', data: [] },
+      { name: 'eCO2 (ppm)', data: [] },
+      { name: 'Temperature (°C)', data: [] },
+      { name: 'Humidity (%)', data: [] }
+    ],
+    xaxis: { type: 'datetime', labels: { style: { colors: '#ffffff' } } },
+    yaxis: { labels: { style: { colors: '#ffffff' } } },
+    tooltip: { theme: 'dark' }
+  };
 
-    let chart = new ApexCharts(document.querySelector("#chart"), chartOptions);
-    chart.render();
+  let chart = new ApexCharts(document.querySelector("#chart"), chartOptions);
+  chart.render();
 
-    async function fetchData() {
+  async function fetchData() {
+    try {
       const response = await fetch('/data');
+      if (!response.ok) {
+        console.error(`Failed to fetch data: ${response.statusText}`);
+        return;
+      }
+
       const data = await response.json();
 
-      console.log(data.latest.humidity);
-
+      // Update cards
       updateCard("aqiCard", data.latest.aqi, getAQIRecommendation(data.latest.aqi));
       updateCard("eco2Card", data.latest.eco2, getECO2Recommendation(data.latest.eco2));
       updateCard("tvocCard", data.latest.tvoc, getTVOCRecommendation(data.latest.tvoc));
       updateCard("temperatureCard", data.latest.temperature, getTemperatureClass(data.latest.temperature));
       updateCard("humidityCard", data.latest.humidity, getHumidityClass(data.latest.humidity));
 
+      // Update chart
       chart.updateSeries([
         { name: 'TVOC (ppb)', data: data.history.tvoc },
         { name: 'eCO2 (ppm)', data: data.history.eco2 },
         { name: 'Temperature (°C)', data: data.history.temperature },
         { name: 'Humidity (%)', data: data.history.humidity }
       ]);
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
+  }
+
+  function updateCard(cardId, value, recommendation) {
+    const card = document.getElementById(cardId);
+    if (!card) {
+      console.error(`Card with ID ${cardId} not found.`);
+      return;
     }
 
-    function updateCard(cardId, value, recommendation) {
-      const card = document.getElementById(cardId);
-      const valueText = card.querySelector(".card-body h4");
-      const recText = card.querySelector(".card-body p");
-      card.className = `card text-center ${recommendation.class}`;
+    const valueText = card.querySelector(".card-body h4");
+    const recText = card.querySelector(".card-body p");
+
+    if (valueText) {
       valueText.textContent = value.toFixed(1);
-      recText.textContent = recommendation.text;
+    } else {
+      console.error(`Value text element not found in ${cardId}`);
     }
 
-    function getAQIRecommendation(aqi) {
-      if (aqi === 1) return { class: "excellent", text: "Suitable for long-term living." };
-      if (aqi === 2) return { class: "good", text: "Maintain adequate ventilation." };
-      if (aqi === 3) return { class: "moderate", text: "Strengthen ventilation." };
-      if (aqi === 4) return { class: "poor", text: "Find pollution sources, ventilate more." };
-      return { class: "unhealthy", text: "Avoid staying long; ventilate." };
+    if (recText && recommendation) {
+      recText.textContent = recommendation.text || "";
+      card.className = `card text-center ${recommendation.class || ""}`;
+    } else if (recText) {
+      recText.textContent = "";
+      card.className = "card text-center";
     }
+  }
 
-    function getECO2Recommendation(eco2) {
-      if (eco2 > 1500) return { class: "unhealthy", text: "Serious pollution, ventilate!" };
-      if (eco2 > 1000) return { class: "poor", text: "Polluted air, ventilation recommended." };
-      if (eco2 > 800) return { class: "moderate", text: "Consider ventilation." };
-      if (eco2 > 600) return { class: "good", text: "Air quality is fine." };
-      return { class: "excellent", text: "Air quality is excellent." };
-    }
+  function getAQIRecommendation(aqi) {
+    if (aqi === 1) return { class: "excellent", text: "Suitable for long-term living." };
+    if (aqi === 2) return { class: "good", text: "Maintain adequate ventilation." };
+    if (aqi === 3) return { class: "moderate", text: "Strengthen ventilation." };
+    if (aqi === 4) return { class: "poor", text: "Find pollution sources, ventilate more." };
+    return { class: "unhealthy", text: "Avoid staying long; ventilate." };
+  }
 
-    function getTVOCRecommendation(tvoc) {
-      if (tvoc > 6000) return { class: "unhealthy", text: "Headaches and nerve issues possible." };
-      if (tvoc > 750) return { class: "poor", text: "May cause headaches, ventilate." };
-      if (tvoc > 50) return { class: "moderate", text: "Some discomfort possible." };
-      return { class: "excellent", text: "No effects on health." };
-    }
+  function getECO2Recommendation(eco2) {
+    if (eco2 > 1500) return { class: "unhealthy", text: "Serious pollution, ventilate!" };
+    if (eco2 > 1000) return { class: "poor", text: "Polluted air, ventilation recommended." };
+    if (eco2 > 800) return { class: "moderate", text: "Consider ventilation." };
+    if (eco2 > 600) return { class: "good", text: "Air quality is fine." };
+    return { class: "excellent", text: "Air quality is excellent." };
+  }
 
-    function getTemperatureClass(temp) {
-      if (temp < 18) return { class: "moderate", text: "Too cold, consider heating." };
-      if (temp > 26) return { class: "poor", text: "Too hot, ventilate or cool down." };
-      return { class: "good", text: "Comfortable temperature." };
-    }
+  function getTVOCRecommendation(tvoc) {
+    if (tvoc > 6000) return { class: "unhealthy", text: "Headaches and nerve issues possible." };
+    if (tvoc > 750) return { class: "poor", text: "May cause headaches, ventilate." };
+    if (tvoc > 50) return { class: "moderate", text: "Some discomfort possible." };
+    return { class: "excellent", text: "No effects on health." };
+  }
 
-    function getHumidityClass(hum) {
-      if (hum < 30) return { class: "moderate", text: "Too dry, consider humidifying." };
-      if (hum > 60) return { class: "poor", text: "Too humid, consider dehumidifying." };
-      return { class: "good", text: "Comfortable humidity." };
-    }
+  function getTemperatureClass(temp) {
+    if (temp < 18) return { class: "moderate"};
+    if (temp > 26) return { class: "poor"};
+    return { class: "good"};
+  }
+
+  function getHumidityClass(hum) {
+    if (hum < 30) return { class: "moderate"};
+    if (hum > 60) return { class: "poor"};
+    return { class: "good"};
+  }
+
+  // Fetch data every second
+  setInterval(fetchData, 1000);
+</script>
 
-    setInterval(fetchData, 1000);
-  </script>
 </body>
 </html>
     )rawliteral";