diff --git a/src/AboutUs.jsx b/src/AboutUs.jsx
index 2f09e57d..acd9be6f 100644
--- a/src/AboutUs.jsx
+++ b/src/AboutUs.jsx
@@ -4,7 +4,7 @@ const AboutUs = () => {
     return (
         <div className="aboutus_container">
             <p>
-                Welcome to BudgetEase Solutions, your trusted partner in simplifying budget management and financial solutions. At BudgetEase, we understand the importance of effective budget planning and strive to provide intuitive, user-friendly solutions to meet the diverse needs of our clients.
+                Welcome to BudgetEase Solutions Company limited, your trusted partner in simplifying budget management and financial solutions. At BudgetEase, we understand the importance of effective budget planning and strive to provide intuitive, user-friendly solutions to meet the diverse needs of our clients.
             </p>
             <p>With a commitment to efficiency and innovation, we empower individuals and businesses to take control of their finances and achieve their goals with ease.</p>
             <p>At BudgetEase Solutions, our mission is to make budgeting effortless and accessible for everyone. Whether you're a small business owner, a busy professional, or an individual looking to manage your personal finances, we offer tailored solutions to streamline your budgeting process.
diff --git a/src/App.css b/src/App.css
index 85c14030..ff968c57 100644
--- a/src/App.css
+++ b/src/App.css
@@ -7,7 +7,7 @@
 .first_page {
   display: flex;
   height: 100vh;
-  background-image: url("https://cdn.pixabay.com/photo/2018/07/05/14/45/conference-3518465_1280.jpg");
+  background-image: url("https://cdn.pixabay.com/photo/2025/03/28/17/58/flowers-9499374_1280.jpg");
   background-size: cover;
   background-position: center;
   justify-content: center;
diff --git a/src/ConferenceEvent.jsx b/src/ConferenceEvent.jsx
index 612a4648..41e91298 100644
--- a/src/ConferenceEvent.jsx
+++ b/src/ConferenceEvent.jsx
@@ -1,12 +1,16 @@
 import React, { useState } from "react";
 import "./ConferenceEvent.css";
 import TotalCost from "./TotalCost";
+import { toggleMealSelection } from "./mealsSlice";
+import { incrementAvQuantity, decrementAvQuantity } from "./avSlice";
 import { useSelector, useDispatch } from "react-redux";
 import { incrementQuantity, decrementQuantity } from "./venueSlice";
 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,35 +33,111 @@ const ConferenceEvent = () => {
         }
       };
     const handleIncrementAvQuantity = (index) => {
-    };
+    dispatch(incrementAvQuantity(index));
+};
 
-    const handleDecrementAvQuantity = (index) => {
-    };
+const handleDecrementAvQuantity = (index) => {
+    dispatch(decrementAvQuantity(index));
+};
 
-    const handleMealSelection = (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 getItemsFromTotalCost = () => {
+    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;
-          });
+            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");
     const navigateToProducts = (idType) => {
         if (idType == '#venue' || idType == '#addons' || idType == '#meals') {
           if (showItems) { // Check if showItems is false
@@ -65,6 +145,11 @@ const ConferenceEvent = () => {
           }
         }
       }
+      const totalCosts = {
+        venue: venueTotalCost,
+        av: avTotalCost,
+        meals: mealsTotalCost,
+    };
 
     return (
         <>
@@ -157,10 +242,22 @@ const ConferenceEvent = () => {
 
                                 </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>
 
                             {/* Meal Section */}
@@ -173,20 +270,36 @@ const ConferenceEvent = () => {
                                 </div>
 
                                 <div className="input-container venue_selection">
-
+                                <div className="input-container venue_selection">
+    <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>
                                 <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>
                         </div>
                     ) : (
                         <div className="total_amount_detail">
-                            <TotalCost totalCosts={totalCosts} handleClick={handleToggleItems} ItemsDisplay={() => <ItemsDisplay items={items} />} />
-                        </div>
+    <TotalCost totalCosts={ totalCosts } ItemsDisplay={() => <ItemsDisplay items={ items } />} />
+</div>
                     )
                 }
 
@@ -200,3 +313,5 @@ const ConferenceEvent = () => {
 };
 
 export default ConferenceEvent;
+
+// By Zin
\ No newline at end of file
diff --git a/src/TotalCost.jsx b/src/TotalCost.jsx
index 845abca9..2e61f229 100644
--- a/src/TotalCost.jsx
+++ b/src/TotalCost.jsx
@@ -1,27 +1,23 @@
 import React, { useState, useEffect } from 'react';
 import "./TotalCost.css";
-
 const TotalCost = ({ totalCosts, ItemsDisplay }) => {
-  
-
-  return (
-    <div className="pricing-app">
-      <div className="display_box">
-        <div className="header">
-          <p className="preheading"><h3>Total cost for the event</h3></p>
-        </div>
-        <div>
-          <h2 id="pre_fee_cost_display" className="price">
-           
-          </h2>
-         
-            <div>
-             
+    const total_amount = totalCosts.venue + totalCosts.av + totalCosts.meals;
+    return (
+        <div className="pricing-app">
+            <div className="display_box">
+                <div className="header">
+                    <p className="preheading"><h3>Total cost for the event</h3></p>
+                </div>
+                <div>
+                <h2 id="pre_fee_cost_display" className="price">
+    ${total_amount}
+</h2>
+<div className="render_items">
+    <ItemsDisplay />
+</div>
+                </div>
             </div>
         </div>
-      </div>
-    </div>
-  );
+    );
 };
-
-export default TotalCost;
+export default TotalCost;
\ No newline at end of file
diff --git a/src/avSlice.js b/src/avSlice.js
index cdd79aac..c06da61c 100644
--- a/src/avSlice.js
+++ b/src/avSlice.js
@@ -1,18 +1,55 @@
-import { createSlice } from "@reduxjs/toolkit";
+    import { createSlice } from "@reduxjs/toolkit";
 
 export const avSlice = createSlice({
   name: "av",
   initialState: [
-    
+        {
+        img: "https://cdn.pixabay.com/photo/2012/03/01/01/10/business-20031_960_720.jpg",
+        name: "Projectors",
+        cost: 200,
+        quantity: 0,
+    },
+    {
+        img: "https://cdn.pixabay.com/photo/2019/04/07/09/41/speakers-4109274_960_720.jpg",
+        name: "Speaker",
+        cost: 35,
+        quantity: 0,
+    },
+    {
+        img: "https://cdn.pixabay.com/photo/2019/01/11/01/54/public-speaking-3926344_960_720.jpg",
+        name: "Microphones",
+        cost: 45,
+        quantity: 0,
+    },
+    {
+        img: "https://cdn.pixabay.com/photo/2017/10/30/19/24/whiteboard-2903269_960_720.png",
+        name: "Whiteboards",
+        cost: 80,
+        quantity: 0,
+    },
+
+    {
+        img: "https://cdn.pixabay.com/photo/2013/12/29/10/15/directory-235079_960_720.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..3aa03073 100644
--- a/src/mealsSlice.js
+++ b/src/mealsSlice.js
@@ -1,17 +1,19 @@
-// mealsSlice.js
 import { createSlice } from '@reduxjs/toolkit';
-
 export const mealsSlice = createSlice({
   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
diff --git a/src/venueSlice.js b/src/venueSlice.js
index 350d353a..8b8d53d7 100644
--- a/src/venueSlice.js
+++ b/src/venueSlice.js
@@ -35,24 +35,24 @@ export const venueSlice = createSlice({
       quantity: 0,
     },
   
-  ],
-  reducers: {
-   
-    incrementQuantity: (state, action) => {
-      const { payload: index } = action;
-      if (state[index]) {
-        if (state[index].name === " Auditorium Hall (Capacity:200)" && state[index].quantity >= 3) {
-          return;        }
-        state[index].quantity++;
-      }
-    },
-    decrementQuantity: (state, action) => {
-      const { payload: index } = action;
-      if (state[index] && state[index].quantity > 0) {
-        state[index].quantity--;
-      }
-    },
+],
+reducers: {
+ 
+  incrementQuantity: (state, action) => {
+    const { payload: index } = action;
+    if (state[index]) {
+      if (state[index].name === " Auditorium Hall (Capacity:200)" && state[index].quantity >= 3) {
+        return;        }
+      state[index].quantity++;
+    }
+  },
+  decrementQuantity: (state, action) => {
+    const { payload: index } = action;
+    if (state[index] && state[index].quantity > 0) {
+      state[index].quantity--;
+    }
   },
+},
 });
 
 export const { incrementQuantity, decrementQuantity } = venueSlice.actions;