diff --git a/src/App.jsx b/src/App.jsx
index 03e658b..5338c58 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,44 +1,18 @@
 import './styles/reset.css'
 import './styles/index.css'
 
-import initialStoreItems from './store-items'
+import Header from './components/Header'
+import MainContent from './components/MainContent'
+import Footer from './components/Footer'
+import { useState } from 'react'
 
 export default function App() {
+  const [basket, setBasket] = useState([])
   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>
-      <div>
-        Icons made by
-        <a
-          href="https://www.flaticon.com/authors/icongeek26"
-          title="Icongeek26"
-        >
-          Icongeek26
-        </a>
-        from
-        <a href="https://www.flaticon.com/" title="Flaticon">
-          www.flaticon.com
-        </a>
-      </div>
+      <Header setBasket={setBasket} basket={basket}></Header>
+      <MainContent basket={basket} setBasket={setBasket}></MainContent>
+      <Footer></Footer>
     </>
   )
 }
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
new file mode 100644
index 0000000..091da94
--- /dev/null
+++ b/src/components/Footer.jsx
@@ -0,0 +1,17 @@
+export default function Footer () {
+    return (
+        <div>
+            Icons made by
+            <a
+            href="https://www.flaticon.com/authors/icongeek26"
+            title="Icongeek26"
+            >
+            Icongeek26
+            </a>
+            from
+            <a href="https://www.flaticon.com/" title="Flaticon">
+            www.flaticon.com
+            </a>
+      </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
new file mode 100644
index 0000000..4172cac
--- /dev/null
+++ b/src/components/Header.jsx
@@ -0,0 +1,59 @@
+import { useState } from 'react'
+import initialStoreItems from '../store-items'
+
+export default function Header ({setBasket, basket}) {
+    const [storeItems, setStoreItems] = useState(initialStoreItems)
+
+    const storeItemsCopy = JSON.parse(JSON.stringify(storeItems))
+    
+    function addToBasket (e) {
+        const itemIndex = e.target.value
+
+        const item = storeItemsCopy[itemIndex]
+        item.quantity = 1
+        // console.log(item)
+
+        // add a check to see if item name is in the array
+        let inBasket = false
+        let basketIndex = ""
+        basket.forEach((itemInBasket, index) => {
+            // console.log(itemInBasket)
+            if (itemInBasket.name === item.name) {
+                inBasket = true
+                basketIndex = index
+            }
+        })
+
+        if (inBasket === false) {
+            setBasket([...basket, item])
+            // console.log(basketIndex)
+        }
+        else {
+            // need to find the item in basket and update quantity
+            // console.log(basketIndex)
+            basket[basketIndex].quantity += 1
+            setBasket([...basket])
+        }
+
+        inBasket = false
+    }
+
+
+    return (
+        <header id="store">
+            <h1>Greengrocers</h1>
+            <ul className="item-list store--item-list">
+                {storeItems.map((item, index) => {
+                    return (
+                        <li key={index}>
+                            <div className="store--item-icon">
+                                <img src={`../../assets/icons/${item.id}.svg`} alt={item.name} />
+                            </div>
+                            <button onClick={addToBasket} value={index}>Add to cart</button>
+                        </li>
+                    )
+                })}
+            </ul>
+        </header>
+    )
+}
\ No newline at end of file
diff --git a/src/components/MainContent.jsx b/src/components/MainContent.jsx
new file mode 100644
index 0000000..6be689b
--- /dev/null
+++ b/src/components/MainContent.jsx
@@ -0,0 +1,63 @@
+export default function MainContent ({setBasket, basket}) {
+    function increaseQuantity (event) {
+        // console.log(event.target.value)
+        basket[event.target.value].quantity += 1
+        setBasket([...basket])
+        // console.log(basket)
+    }
+
+    function decreaseQuantity (event) {
+        if (basket[event.target.value].quantity === 1) {
+            // console.log("delete")
+            // console.log(event.target.value)
+            basket.splice(event.target.value, 1)
+            setBasket([...basket])
+            
+        }
+        else {
+            basket[event.target.value].quantity -= 1
+            setBasket([...basket])
+        }
+
+    }
+
+    function calculateTotal () {
+        let total = 0
+        basket.forEach(item => {
+            total += item.quantity * item.price
+        });
+        return (
+            `£${total.toFixed(2)}`
+        )
+    }
+
+    return (
+        <main id="cart">
+            <h2>Your Cart</h2>
+            <div className="cart--item-list-container">
+                <ul className="item-list cart--item-list">
+                    {basket.map((item, index) => {
+                        return (
+                            <li key={index}>
+                                <img className="cart--item-icon" src={`assets/icons/${item.id}.svg`} alt={item.name}/>
+                                <p>{item.name}</p>
+                                <button onClick={decreaseQuantity} className="quantity-btn remove-btn center" value={index}>-</button>
+                                <span className="quantity-text center">{item.quantity}</span>
+                                <button onClick={increaseQuantity} className="quantity-btn add-btn center" value={index}>+</button>
+                            </li>
+
+                        )
+                    })}
+                </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/state-diagram.png b/state-diagram.png
new file mode 100644
index 0000000..9a80473
Binary files /dev/null and b/state-diagram.png differ