diff --git a/src/ConferenceEvent.jsx b/src/ConferenceEvent.jsx
index 612a4648..58c0f481 100644
--- a/src/ConferenceEvent.jsx
+++ b/src/ConferenceEvent.jsx
@@ -3,10 +3,15 @@ import "./ConferenceEvent.css";
 import TotalCost from "./TotalCost";
 import { useSelector, useDispatch } from "react-redux";
 import { incrementQuantity, decrementQuantity } from "./venueSlice";
+import { incrementAvQuantity, decrementAvQuantity  } from "./avSlice";
+import { toggleMealSelection } from "./mealsSlice";
+
 const ConferenceEvent = () => {
     const [showItems, setShowItems] = useState(false);
     const [numberOfPeople, setNumberOfPeople] = useState(1);
     const venueItems = useSelector((state) => state.venue);
+    const avItems = useSelector((state) => state.av);
+    const mealsItems = useSelector((state) => state.meals);
     const dispatch = useDispatch();
     const remainingAuditoriumQuantity = 3 - venueItems.find(item => item.name === "Auditorium Hall (Capacity:200)").quantity;
 
@@ -29,34 +34,111 @@ const ConferenceEvent = () => {
         }
       };
     const handleIncrementAvQuantity = (index) => {
+      dispatch(incrementAvQuantity(index));
     };
 
     const handleDecrementAvQuantity = (index) => {
+      dispatch(decrementAvQuantity(index));
     };
 
     const handleMealSelection = (index) => {
-       
-    };
+    const item = mealsItems[index];
+    if (item.selected && item.type === "mealForPeople") {
+        // Ensure numberOfPeople is set before toggling selection
+        const newNumberOfPeople = item.selected ? numberOfPeople : 0;
+        dispatch(toggleMealSelection(index, newNumberOfPeople));
+    }
+    else {
+        dispatch(toggleMealSelection(index));
+    }
+};
 
     const getItemsFromTotalCost = () => {
-        const items = [];
-    };
-
-    const items = getItemsFromTotalCost();
-
-    const ItemsDisplay = ({ items }) => {
+    const items = [];
+    venueItems.forEach((item) => {
+      if (item.quantity > 0) {
+        items.push({ ...item, type: "venue" });
+      }
+    });
+    avItems.forEach((item) => {
+      if (
+        item.quantity > 0 &&
+        !items.some((i) => i.name === item.name && i.type === "av")
+      ) {
+        items.push({ ...item, type: "av" });
+      }
+    });
+    mealsItems.forEach((item) => {
+      if (item.selected) {
+        const itemForDisplay = { ...item, type: "meals" };
+        if (item.numberOfPeople) {
+          itemForDisplay.numberOfPeople = numberOfPeople;
+        }
+        items.push(itemForDisplay);
+      }
+    });
+    return items;
+  };
+  const items = getItemsFromTotalCost();
+
+  const ItemsDisplay = ({ items }) => {
+    console.log(items);
+    return <>
+        <div className="display_box1">
+            {items.length === 0 && <p>No items selected</p>}
+            <table className="table_item_data">
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Unit Cost</th>
+                        <th>Quantity</th>
+                        <th>Subtotal</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {items.map((item, index) => (
+                        <tr key={index}>
+                            <td>{item.name}</td>
+                            <td>${item.cost}</td>
+                            <td>
+                                {item.type === "meals" || item.numberOfPeople
+                                ? ` For ${numberOfPeople} people`
+                                : item.quantity}
+                            </td>
+                            <td>{item.type === "meals" || item.numberOfPeople
+                                ? `${item.cost * numberOfPeople}`
+                                : `${item.cost * item.quantity}`}
+                            </td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    </>
+};
 
-    };
     const calculateTotalCost = (section) => {
-        let totalCost = 0;
-        if (section === "venue") {
-          venueItems.forEach((item) => {
-            totalCost += item.cost * item.quantity;
-          });
+    let totalCost = 0;
+    if (section === "venue") {
+      venueItems.forEach((item) => {
+        totalCost += item.cost * item.quantity;
+      });
+    } else if (section === "av") {
+      avItems.forEach((item) => {
+        totalCost += item.cost * item.quantity;
+      });
+    } else if( section === "meals"){
+      mealsItems.forEach((item) => {
+        if(item.selected){
+          totalCost += item.cost * numberOfPeople;
         }
-        return totalCost;
-      };
+      })
+    }
+    return totalCost;
+  };
     const venueTotalCost = calculateTotalCost("venue");
+    const avTotalCost = calculateTotalCost("av");
+    const mealsTotalCost = calculateTotalCost("meals") ? calculateTotalCost("meals") : 0;
 
     const navigateToProducts = (idType) => {
         if (idType == '#venue' || idType == '#addons' || idType == '#meals') {
@@ -65,7 +147,13 @@ const ConferenceEvent = () => {
           }
         }
       }
+      const totalCosts = {
+        venue: venueTotalCost,
+        av: avTotalCost,
+        meals: mealsTotalCost,
+    };
 
+    
     return (
         <>
             <navbar className="navbar_event_conference">
@@ -154,12 +242,32 @@ const ConferenceEvent = () => {
                                 <div className="text">
 
                                     <h1> Add-ons Selection</h1>
+                                    
 
                                 </div>
                                 <div className="addons_selection">
-
+                                  {avItems.map((item, index) => (
+                                    <div className="av_data venue_main" key={index}>
+                                      <div className="img">
+                                        <img src={item.img} alt={item.name} />
+                                      </div>
+                                      <div className="text">
+                                        {item.name}
+                                      </div>
+                                      <div>
+                                        ${item.cost}
+                                      </div>
+                                      <div className="addons_btn">
+                                        <button className="btn-warning" onClick={() => handleDecrementAvQuantity(index)}> &ndash; </button>
+                                        <span className="quantity-value">{item.quantity}</span>
+                                        <button className=" btn-success" onClick={() => handleIncrementAvQuantity(index)}> &#43; </button>
+                                    </div>
+                                    </div>
+                                  ))}
+
+                                  
                                 </div>
-                                <div className="total_cost">Total Cost:</div>
+                                <div className="total_cost">Total Cost: {avTotalCost}</div>
 
                             </div>
 
@@ -173,12 +281,27 @@ const ConferenceEvent = () => {
                                 </div>
 
                                 <div className="input-container venue_selection">
-
-                                </div>
+    <label htmlFor="numberOfPeople"><h3>Number of People:</h3></label>
+    <input type="number" className="input_box5" id="numberOfPeople" value={numberOfPeople}
+        onChange={(e) => setNumberOfPeople(parseInt(e.target.value))}
+        min="1"
+    />
+</div>
                                 <div className="meal_selection">
-
-                                </div>
-                                <div className="total_cost">Total Cost: </div>
+    {mealsItems.map((item, index) => (
+        <div className="meal_item" key={index} style={{ padding: 15 }}>
+            <div className="inner">
+                <input type="checkbox" id={ `meal_${index}` }
+                    checked={ item.selected }
+                    onChange={() => handleMealSelection(index)}
+                 />
+                <label htmlFor={`meal_${index}`}> {item.name} </label>
+            </div>
+            <div className="meal_cost">${item.cost}</div>
+        </div>
+    ))}
+</div>
+                                <div className="total_cost">Total Cost: {mealsTotalCost}</div>
 
 
                             </div>
@@ -197,6 +320,7 @@ const ConferenceEvent = () => {
         </>
 
     );
+    
 };
 
 export default ConferenceEvent;
diff --git a/src/TotalCost.jsx b/src/TotalCost.jsx
index 845abca9..b7516c8e 100644
--- a/src/TotalCost.jsx
+++ b/src/TotalCost.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import "./TotalCost.css";
 
 const TotalCost = ({ totalCosts, ItemsDisplay }) => {
-  
+  const total_amount = totalCosts.venue + totalCosts.av + totalCosts.meals;
 
   return (
     <div className="pricing-app">
@@ -12,11 +12,13 @@ const TotalCost = ({ totalCosts, ItemsDisplay }) => {
         </div>
         <div>
           <h2 id="pre_fee_cost_display" className="price">
-           
+           ${total_amount}
           </h2>
          
             <div>
-             
+              <div className="render_items">
+                <ItemsDisplay />
+            </div>
             </div>
         </div>
       </div>
diff --git a/src/avSlice.js b/src/avSlice.js
index cdd79aac..1e66c43b 100644
--- a/src/avSlice.js
+++ b/src/avSlice.js
@@ -3,17 +3,53 @@ import { createSlice } from "@reduxjs/toolkit";
 export const avSlice = createSlice({
   name: "av",
   initialState: [
-    
+        {
+        img: "https://pixabay.com/images/download/business-20031_640.jpg",
+        name: "Projectors",
+        cost: 200,
+        quantity: 0,
+    },
+    {
+        img: "https://pixabay.com/images/download/speakers-4109274_640.jpg",
+        name: "Speaker",
+        cost: 35,
+        quantity: 0,
+    },
+    {
+        img: "https://pixabay.com/images/download/public-speaking-3926344_640.jpg",
+        name: "Microphones",
+        cost: 45,
+        quantity: 0,
+    },
+    {
+        img: "https://pixabay.com/images/download/whiteboard-2903269_640.png",
+        name: "Whiteboards",
+        cost: 80,
+        quantity: 0,
+    },
+
+    {
+        img: "https://pixabay.com/images/download/signpost-235079_640.jpg",
+        name: "Signage",
+        cost: 80,
+        quantity: 0,
+    },
   ],
 
 
   reducers: {
     incrementAvQuantity: (state, action) => {
-      
-    },
+    const item = state[action.payload];
+    if (item) {
+        item.quantity++;
+    }
+},
     decrementAvQuantity: (state, action) => {
-     
-    },
+    const item = state[action.payload];
+    if (item && item.quantity > 0) {
+        item.quantity--;
+    }
+},
   },
 });
 
diff --git a/src/mealsSlice.js b/src/mealsSlice.js
index faf8138a..030f9563 100644
--- a/src/mealsSlice.js
+++ b/src/mealsSlice.js
@@ -1,17 +1,17 @@
-// mealsSlice.js
 import { createSlice } from '@reduxjs/toolkit';
-
 export const mealsSlice = createSlice({
-  name: 'meals',
-  initialState: [
-   
-  ],
-  reducers: {
-    toggleMealSelection: (state, action) => {
+    name: 'meals',
+    initialState: [
+        { name: 'Breakfast', cost: 50, selected: false },
+        { name: 'High Tea', cost: 25, selected: false },
+        { name: 'Lunch', cost: 65, selected: false },
+        { name: 'Dinner', cost: 70, selected: false },
+    ],
+    reducers: {
+        toggleMealSelection: (state, action) => {
+            state[action.payload].selected = !state[action.payload].selected;
+        },
     },
-  },
 });
-
 export const { toggleMealSelection } = mealsSlice.actions;
-
-export default mealsSlice.reducer;
+export default mealsSlice.reducer;
\ No newline at end of file
diff --git a/src/store.js b/src/store.js
index f05b9f8f..568b1071 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,9 +1,12 @@
-// store.js
 import { configureStore } from '@reduxjs/toolkit';
 import venueReducer from './venueSlice';
+import avReducer from './avSlice';
+import mealsReducer from './mealsSlice';
 
 export default configureStore({
   reducer: {
     venue: venueReducer,
+    av: avReducer,
+    meals: mealsReducer,
   },
-});
+});
\ No newline at end of file