diff --git a/Componenets:Hierarchy.png b/Componenets:Hierarchy.png
new file mode 100644
index 0000000..9069a0b
Binary files /dev/null and b/Componenets:Hierarchy.png differ
diff --git a/src/App.jsx b/src/App.jsx
index 03e658b..946a2c0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,31 +1,48 @@
 import './styles/reset.css'
 import './styles/index.css'
-
-import initialStoreItems from './store-items'
+import {useState} from 'react'
+import initialStoreItems from './store-items' 
+import Header from './Header'
+import MainSection from  './MainSection'
 
 export default function App() {
+
+  const [storeItems] = useState(initialStoreItems)
+  const[cartItems, setCartItems] = useState([])
+
+
+  const addToCart = (targetItem) => {
+    const exisitingItem = cartItems.find(item => item.id === targetItem.id)
+    if(exisitingItem) {
+      const updateCart = cartItems.map(item =>
+        item.id === targetItem.id ? {...item, quantity: item.quantity + 1 } : item
+      )
+      setCartItems(updateCart)
+    } else {
+      setCartItems([...cartItems, targetItem])
+    }
+  }
+
+  const removeItem = (targetItem) => {
+    const exisitingItem = cartItems.find(item => item.id === targetItem.id)
+    if (exisitingItem.quantity > 1) {
+      const updateCart = cartItems.map(item =>
+        item.id === targetItem.id ? {...item, quantity: item.quantity - 1 } : item
+      )
+      setCartItems(updateCart)
+      } else {
+        setCartItems(cartItems.filter(item => item != targetItem))
+      }
+    }
+
+    const calculateTotal = () => {
+      return cartItems.reduce((acc, item) => acc + (item.quantity * item.price), 0).toFixed(2);
+    }
+  
   return (
     <>
-      <header id="store">
-        <h1>Greengrocers</h1>
-        <ul className="item-list store--item-list">
-        </ul>
-      </header>
-      <main id="cart">
-        <h2>Your Cart</h2>
-        <div className="cart--item-list-container">
-          <ul className="item-list cart--item-list">
-          </ul>
-        </div>
-        <div className="total-section">
-          <div>
-            <h3>Total</h3>
-          </div>
-          <div>
-            <span className="total-number">£0.00</span>
-          </div>
-        </div>
-      </main>
+      <Header storeItems={storeItems} addToCart={addToCart} />
+      <MainSection cartItems={cartItems} addToCart={addToCart} removeItem={removeItem} calculateTotal={calculateTotal} />
       <div>
         Icons made by
         <a
diff --git a/src/CartItem.jsx b/src/CartItem.jsx
new file mode 100644
index 0000000..0a7cf5e
--- /dev/null
+++ b/src/CartItem.jsx
@@ -0,0 +1,11 @@
+export default function CartItem({ item, addToCart, removeItem }) {
+return (
+<li>
+<img className='cart--item-icon' src={`./assets/icons/${item.id}.svg`}alt={item.name}/>
+<p>{item.name}</p>
+<button onClick={() => removeItem(item)} className='quantity-btn remove-btn center'>-</button>
+<span className='quantity-text center'>{item.quantity}</span>
+<button onClick={() => addToCart(item)} className='quantity-btn add-btn center'>+</button>
+</li>
+)
+}
\ No newline at end of file
diff --git a/src/Header.jsx b/src/Header.jsx
new file mode 100644
index 0000000..12a0887
--- /dev/null
+++ b/src/Header.jsx
@@ -0,0 +1,14 @@
+import StoreItem from './StoreItem'
+
+export default function Header({ storeItems, addToCart}) {
+    return (
+        <header id="store">
+        <h1>Greengrocers</h1>
+        <ul className="item-list store--item-list">
+          {storeItems.map((item) => (
+            <StoreItem key={item.id} item={item} addToCart={addToCart} />
+          ))}
+        </ul>
+      </header>
+    )
+}
\ No newline at end of file
diff --git a/src/MainSection.jsx b/src/MainSection.jsx
new file mode 100644
index 0000000..0089901
--- /dev/null
+++ b/src/MainSection.jsx
@@ -0,0 +1,29 @@
+import CartItem from './CartItem'
+
+export default function MainSection({ cartItems, addToCart, removeItem, calculateTotal}) {
+    return (
+        <main id="cart">
+            <h2>Your Cart</h2>
+            <div className="cart--item-list-container">
+            <ul className="item-list cart--item-list">
+                {cartItems.map((item) => (
+                    <CartItem key={item.id} item={item} addToCart={addToCart} removeItem={removeItem} />
+            ))}
+            </ul>
+            </div>
+                <div className="total-section">
+                <div>
+                    <h3>Total</h3>
+                </div>
+                <div>
+                    <span className="total-number">£{calculateTotal()}</span>
+                </div>
+            </div>
+            </main>
+
+    )
+}
+
+
+
+
diff --git a/src/StoreItem.jsx b/src/StoreItem.jsx
new file mode 100644
index 0000000..f5f7c30
--- /dev/null
+++ b/src/StoreItem.jsx
@@ -0,0 +1,10 @@
+export default function StoreItem({ item, addToCart }) {
+    return (
+        <li>
+        <div className='store--item-icon'>
+                <img src={`/assets/icons/${item.id}.svg`} alt={item.name} />
+              </div>
+              <button onClick={() => addToCart({...item, quantity : 1})}>Add to Cart</button>
+            </li>
+    )
+}
\ No newline at end of file