diff --git a/src/App.jsx b/src/App.jsx
index 03e658b..f3190fd 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,31 +1,62 @@
-import './styles/reset.css'
-import './styles/index.css'
+import "./styles/reset.css";
+import "./styles/index.css";
 
-import initialStoreItems from './store-items'
+import initialStoreItems from "./store-items";
+import Header from "./Components/Header";
+import { useState } from "react";
+import MainBody from "./Components/MainBody";
 
 export default function App() {
+  const [cart, setCart] = useState([]);
+  const [store, setStore] = useState(initialStoreItems);
+
+  const removeFromCart = (item) => {
+
+    const checkItem = cart.find((cartItem) => {if(cartItem.quantity === 1 && cartItem.id === item.id) return true})
+
+  
+
+    if (checkItem) {
+      const updatedCart = cart.filter((cartItem) => {
+        if(cartItem.id !== checkItem.id)
+        return cartItem
+      })
+      setCart(updatedCart)
+
+    } else {
+      const updatedCart = cart.map((cartItem) => {
+        if (cartItem.id === item.id) cartItem.quantity--;
+        return { ...cartItem };
+      });
+      setCart(updatedCart);
+    }
+  };
+
+  const addToCart = (item) => {
+    const checkItem = cart.find((cartItem) => {
+      if (cartItem.id === item.id) return true;
+    });
+
+    if (!checkItem) {
+      const updatedCart = [...cart, { ...item, quantity: 1 }];
+      setCart(updatedCart);
+    } else {
+      const updatedCart = cart.map((cartItem) => {
+        if (cartItem.id === item.id && cartItem.quantity >= 1) cartItem.quantity++;
+        return { ...cartItem };
+      });
+      setCart(updatedCart);
+    }
+  };
+
   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 store={store} addToCart={addToCart} />
+      <MainBody
+        cart={cart}
+        addToCart={addToCart}
+        removeFromCart={removeFromCart}
+      />
       <div>
         Icons made by
         <a
@@ -40,5 +71,5 @@ export default function App() {
         </a>
       </div>
     </>
-  )
+  );
 }
diff --git a/src/Components/CartItem.jsx b/src/Components/CartItem.jsx
new file mode 100644
index 0000000..4556d9d
--- /dev/null
+++ b/src/Components/CartItem.jsx
@@ -0,0 +1,18 @@
+/* eslint-disable react/prop-types */
+
+export default function CartItem({cartItem, addToCart, removeFromCart}) {
+
+  return (
+    <li key={cartItem.id}>
+      <img
+        className="cart--item-icon"
+        src={`../../assets/icons/${cartItem.id}.svg`}
+        alt={cartItem.name}
+      />
+      <p>{cartItem.name}</p>
+      <button className="quantity-btn remove-btn center" onClick={() => removeFromCart(cartItem)}>-</button>
+      <span className="quantity-text center">{cartItem.quantity}</span>
+      <button className="quantity-btn add-btn center" onClick={() => addToCart(cartItem)}>+</button>
+    </li>
+  );
+}
diff --git a/src/Components/Header.jsx b/src/Components/Header.jsx
new file mode 100644
index 0000000..b5537b8
--- /dev/null
+++ b/src/Components/Header.jsx
@@ -0,0 +1,15 @@
+/* eslint-disable react/prop-types */
+import StoreItem from "./StoreItem";
+
+export default function Header({store, addToCart}) {
+  return (
+    <header id="store">
+      <h1>Greengrocers</h1>
+      <ul className="item-list store--item-list">
+        {store.map((storeItem, index) => {
+            return <StoreItem storeItem={storeItem} key={index} addToCart={addToCart}/>
+        })}
+      </ul>
+    </header>
+  );
+}
\ No newline at end of file
diff --git a/src/Components/MainBody.jsx b/src/Components/MainBody.jsx
new file mode 100644
index 0000000..9ac9c6f
--- /dev/null
+++ b/src/Components/MainBody.jsx
@@ -0,0 +1,32 @@
+/* eslint-disable react/prop-types */
+
+import CartItem from "./CartItem";
+
+export default function MainBody({cart, addToCart, removeFromCart}) {
+
+  const calculateTotal = () => {
+    const calculateCartTotal = cart.reduce((cartTotal, item) => cartTotal += item.quantity * item.price, 0)
+    return calculateCartTotal.toFixed(2)
+  }
+
+    return (
+        <main id="cart">
+        <h2>Your Cart</h2>
+        <div className="cart--item-list-container">
+          <ul className="item-list cart--item-list">
+            {cart.map((cartItem) => {
+              return <CartItem cartItem={cartItem} key={cartItem.id} addToCart={addToCart} removeFromCart={removeFromCart}/>
+            })}
+          </ul>
+        </div>
+        <div className="total-section">
+          <div>
+            <h3>Total</h3>
+          </div>
+          <div>
+            <span className="total-number">{`£${calculateTotal()}`}</span>
+          </div>
+        </div>
+      </main>
+    )
+}
\ No newline at end of file
diff --git a/src/Components/StoreItem.jsx b/src/Components/StoreItem.jsx
new file mode 100644
index 0000000..17f6c4d
--- /dev/null
+++ b/src/Components/StoreItem.jsx
@@ -0,0 +1,11 @@
+/* eslint-disable react/prop-types */
+export default function StoreItem({storeItem, index, addToCart}) {
+    return (
+        <li>
+            <div className="store--item-icon" key={index}>
+                <img src={`../../assets/icons/${storeItem.id}.svg`} alt={storeItem.name}/>
+            </div>
+            <button onClick={() => addToCart(storeItem)}>Add to cart</button>
+        </li>
+    )
+}
\ No newline at end of file