diff --git a/api/predictAPI/__pycache__/main.cpython-310.pyc b/api/predictAPI/__pycache__/main.cpython-310.pyc
new file mode 100644
index 0000000..613c8ee
Binary files /dev/null and b/api/predictAPI/__pycache__/main.cpython-310.pyc differ
diff --git a/web/src/components/Dashboard.jsx b/web/src/components/Dashboard.jsx
index fed33ba..eb8504f 100644
--- a/web/src/components/Dashboard.jsx
+++ b/web/src/components/Dashboard.jsx
@@ -113,64 +113,105 @@ function Dashboard() {
     humidity: "updating", //60,
     gasLevels1: "updating",
     gasLevels2: "updating",
-    gasLevels3: "updating",
   });
 
-  // Generates Random Data for Sensors
+  // Fetch Device Data
+  // useEffect(() => {
+  //   const interval = setInterval(() => {
+  //     // Fetch real-time sensor data every 5 seconds
+  //     Requests.fetchDevice_realTime((res) => {
+  //       // Extract temperature and humidity data
+  //       const { temp, humidity } = res;
+
+  //       // Extract gas levels data for each container
+  //       const gasLevels = res.containers.map((container) => ({
+  //         O2: container.o2,
+  //         CO2: container.co2,
+  //       }));
+
+  //       // Update the sensorData state
+  //       setSensorData({
+  //         temperature: temp,
+  //         humidity: humidity,
+  //         gasLevels: gasLevels,
+  //       });
+  //     });
+  //   }, 5000);
+
+  //   return () => clearInterval(interval); // Cleanup interval on unmount
+  // }, []);
+
   useEffect(() => {
-    // Simulate real-time updates every 5 seconds
     const interval = setInterval(() => {
-      // Replace the following lines with actual data fetching from your sensors
-
-      // For temperature, it's common for all containers
-      const newTemperature = getTemperature();
-      const newHumidity = getHumidity();
-
-      // For gas levels, we set data for each container individually
-      const newO2Level1 = getGasLevel1();
-      const newCO2Level1 = getGasLevel1();
-
-      const newO2Level2 = getGasLevel2();
-      const newCO2Level2 = getGasLevel2();
-
-      const newO2Level3 = getGasLevel3();
-      const newCO2Level3 = getGasLevel3();
-
-      setSensorData((prevData) => ({
-        ...prevData,
-        temperature: newTemperature,
-        humidity: newHumidity,
-        gasLevels1: {
-          O2: newO2Level1,
-          CO2: newCO2Level1,
-        },
-        gasLevels2: {
-          O2: newO2Level2,
-          CO2: newCO2Level2,
-        },
-        gasLevels3: {
-          O2: newO2Level3,
-          CO2: newCO2Level3,
-        },
-      }));
-    }, 1000);
+      // Fetch real-time sensor data every 5 seconds
+      Requests.fetchDevice_realTime((res) => {
+        // setSensorData(res);
+        console.log(res);
+      });
+    }, 5000);
 
-    return () => clearInterval(interval);
+    return () => clearInterval(interval); // Cleanup interval on unmount
   }, []);
 
-  // Fetch Device Data
   useEffect(() => {
     const interval = setInterval(() => {
       // Fetch real-time sensor data every 5 seconds
-      Requests.fetchDevice_realTime((res) => {
-        // setSensorData(res);
-        console.log(res);
+      Requests.fetchDevice_realTime((stats) => {
+        if (stats && stats.length > 0) {
+          const { temp, humidity, containers } = stats[0].data; // Extract temp, humidity, and containers from the first item in stats array
+          setSensorData({ temp, humidity, containers });
+        } else {
+          // If stats is empty or null, set temp, humidity, and containers to null
+          setSensorData({ temp: null, humidity: null, containers: null });
+        }
       });
-    }, 1000);
+    }, 5000);
 
     return () => clearInterval(interval); // Cleanup interval on unmount
   }, []);
 
+  // Generates Random Data for Sensors
+  // useEffect(() => {
+  //   // Simulate real-time updates every 5 seconds
+  //   const interval = setInterval(() => {
+  //     // Replace the following lines with actual data fetching from your sensors
+
+  //     // For temperature, it's common for all containers
+  //     const newTemperature = getTemperature();
+  //     const newHumidity = getHumidity();
+
+  //     // For gas levels, we set data for each container individually
+  //     const newO2Level1 = getGasLevel1();
+  //     const newCO2Level1 = getGasLevel1();
+
+  //     const newO2Level2 = getGasLevel2();
+  //     const newCO2Level2 = getGasLevel2();
+
+  //     const newO2Level3 = getGasLevel3();
+  //     const newCO2Level3 = getGasLevel3();
+
+  //     setSensorData((prevData) => ({
+  //       ...prevData,
+  //       temperature: newTemperature,
+  //       humidity: newHumidity,
+  //       gasLevels1: {
+  //         O2: newO2Level1,
+  //         CO2: newCO2Level1,
+  //       },
+  //       gasLevels2: {
+  //         O2: newO2Level2,
+  //         CO2: newCO2Level2,
+  //       },
+  //       gasLevels3: {
+  //         O2: newO2Level3,
+  //         CO2: newCO2Level3,
+  //       },
+  //     }));
+  //   }, 1000);
+
+  //   return () => clearInterval(interval);
+  // }, []);
+
   const getTemperature = () => {
     // Replace this with actual logic to get temperature data
     return Math.floor(Math.random() * 30) + 20;
@@ -420,29 +461,46 @@ function Dashboard() {
           <Icon path={mdiThermometer} size={1} />
           Sensor Data
         </h3>
-        <p>{`Temperature: ${sensorData.temperature} °C`}</p>
-        <p>{`Humidity: ${sensorData.humidity}`}</p>
+        <p>{`Temperature: ${
+          sensorData.temp ? sensorData.temp + " °C" : "N/A"
+        }`}</p>
+        <p>{`Humidity: ${
+          sensorData.humidity ? sensorData.humidity : "N/A"
+        }`}</p>
 
         {/* Container 1 */}
-        <div className={styles.sensorData}>
-          <h4>Gas Levels Container 1</h4>
-          <p>{`Gas Levels (O2): ${sensorData.gasLevels1.O2} ppm`}</p>
-          <p>{`Gas Levels (CO2): ${sensorData.gasLevels1.CO2} ppm`}</p>
-        </div>
+        {sensorData.containers && sensorData.containers[0] && (
+          <div className={styles.sensorData}>
+            <h4>Gas Levels Container 1</h4>
+            <p>{`Gas Levels (O2): ${
+              sensorData.containers[0].o2
+                ? sensorData.containers[0].o2 + " ppm"
+                : "N/A"
+            }`}</p>
+            <p>{`Gas Levels (CO2): ${
+              sensorData.containers[0].co2
+                ? sensorData.containers[0].co2 + " ppm"
+                : "N/A"
+            }`}</p>
+          </div>
+        )}
 
         {/* Container 2 */}
-        <div className={styles.sensorData}>
-          <h4>Gas Levels Container 2</h4>
-          <p>{`Gas Levels (O2): ${sensorData.gasLevels2.O2} ppm`}</p>
-          <p>{`Gas Levels (CO2): ${sensorData.gasLevels2.CO2} ppm`}</p>
-        </div>
-
-        {/* Container 3 */}
-        <div className={styles.sensorData}>
-          <h4>Gas Levels Container 3</h4>
-          <p>{`Gas Levels (O2): ${sensorData.gasLevels3.O2} ppm`}</p>
-          <p>{`Gas Levels (CO2): ${sensorData.gasLevels3.CO2} ppm`}</p>
-        </div>
+        {sensorData.containers && sensorData.containers[1] && (
+          <div className={styles.sensorData}>
+            <h4>Gas Levels Container 2</h4>
+            <p>{`Gas Levels (O2): ${
+              sensorData.containers[1].o2
+                ? sensorData.containers[1].o2 + " ppm"
+                : "N/A"
+            }`}</p>
+            <p>{`Gas Levels (CO2): ${
+              sensorData.containers[1].co2
+                ? sensorData.containers[1].co2 + " ppm"
+                : "N/A"
+            }`}</p>
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/web/src/components/FoodSelection.jsx b/web/src/components/FoodSelection.jsx
index 810ca5c..2a95b70 100644
--- a/web/src/components/FoodSelection.jsx
+++ b/web/src/components/FoodSelection.jsx
@@ -7,6 +7,7 @@ function FoodSelection() {
   const [selectedFoodIndex, setSelectedFoodIndex] = useState(null);
   const [isFoodItemModalOpen, setFoodItemModalOpen] = useState(false);
   const [showAlert, setShowAlert] = useState(false);
+  const [numberOfContainers, setNumberOfContainers] = useState(1);
 
   const foodItems = [
     { id: 1, name: "Apple" },
@@ -21,20 +22,34 @@ function FoodSelection() {
       containerNumber: 1,
       containerText: "Container 1",
     },
-    {
-      id: 2,
-      imageSrc: conImg,
-      containerNumber: 2,
-      containerText: "Container 2",
-    },
-    {
-      id: 3,
-      imageSrc: conImg,
-      containerNumber: 3,
-      containerText: "Container 3",
-    },
+    // {
+    //   id: 2,
+    //   imageSrc: conImg,
+    //   containerNumber: 2,
+    //   containerText: "Container 2",
+    // },
+    // {
+    //   id: 3,
+    //   imageSrc: conImg,
+    //   containerNumber: 3,
+    //   containerText: "Container 3",
+    // },
   ]);
 
+  const handleNumberOfContainersChange = (e) => {
+    const number = parseInt(e.target.value);
+    setNumberOfContainers(number);
+
+    // Generate container data based on the selected number of containers
+    const newContainers = Array.from({ length: number }, (_, index) => ({
+      id: index + 1,
+      imageSrc: conImg,
+      containerNumber: index + 1,
+      containerText: `Container ${index + 1}`,
+    }));
+    setContainerData(newContainers);
+  };
+
   const handleContainerClick = (containerID) => {
     setSelectedContainer(containerID);
     setSelectedFoodIndex(null); // Reset selected food index
@@ -87,6 +102,22 @@ function FoodSelection() {
     <div className={styles.foodSelectionContainer}>
       <h2 className={styles.foodSelectionTitle}>Food Container Selection</h2>
 
+      {/* Select Number of Containers */}
+      <div className={styles.numberOfContainers}>
+        <label htmlFor="numberOfContainers">Select Number of Containers:</label>
+        <select
+          id="numberOfContainers"
+          value={numberOfContainers}
+          onChange={handleNumberOfContainersChange}
+        >
+          {[1, 2, 3, 4, 5].map((number) => (
+            <option key={number} value={number}>
+              {number}
+            </option>
+          ))}
+        </select>
+      </div>
+
       {/* Container List */}
       <div className={styles.containerList}>
         {containerData.map((container) => (
diff --git a/web/src/styles/blocks.module.css b/web/src/styles/blocks.module.css
index 459a4f5..66fa926 100644
--- a/web/src/styles/blocks.module.css
+++ b/web/src/styles/blocks.module.css
@@ -293,6 +293,29 @@ h3 {
   margin-top: 20px;
 }
 
+.numberOfContainers {
+  margin-bottom: 20px;
+}
+
+.numberOfContainers label {
+  font-size: 16px;
+  font-weight: bold;
+  margin-right: 10px;
+}
+
+.numberOfContainers select {
+  padding: 8px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  outline: none;
+}
+
+.numberOfContainers select:focus {
+  border-color: #007bff;
+  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+}
+
 .containerList {
   display: flex;
   align-items: center;