diff --git a/.eslintrc.cjs b/.eslintrc.cjs
deleted file mode 100644
index 4dcb439..0000000
--- a/.eslintrc.cjs
+++ /dev/null
@@ -1,20 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
-}
diff --git a/component-tree.png b/component-tree.png
new file mode 100644
index 0000000..f234bbd
Binary files /dev/null and b/component-tree.png differ
diff --git a/src/App.jsx b/src/App.jsx
index 03e658b..5b976ba 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,44 +1,19 @@
 import './styles/reset.css'
 import './styles/index.css'
 
-import initialStoreItems from './store-items'
+import Header from './components/header/Header'
+import MainComponent from './components/main/MainComponent'
+import Footer from './components/footer/Footer'
+import { useState } from 'react'
 
 export default function App() {
+  const [cartItem, setCartItem] = 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 setCartItem={setCartItem} cartItem={cartItem}/>
+      <MainComponent cartItem={cartItem} setCartItem={setCartItem}/>
+      <Footer />
     </>
   )
 }
diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
new file mode 100644
index 0000000..3309bde
--- /dev/null
+++ b/src/components/footer/Footer.jsx
@@ -0,0 +1,19 @@
+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>
+    )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/src/components/header/Filter.jsx b/src/components/header/Filter.jsx
new file mode 100644
index 0000000..4d9020c
--- /dev/null
+++ b/src/components/header/Filter.jsx
@@ -0,0 +1,22 @@
+function Filter({ storeItems, setFilteredItems}) {
+    function filterProducts(e) {
+        if(e.target.value === 'default') {
+            setFilteredItems(storeItems)
+        } else {
+            setFilteredItems(storeItems.filter((i) => i.type === e.target.value))
+        }
+    }
+
+    return (
+        <div>
+            <label htmlFor="filter">Filter </label>
+            <select name="filter" id="filter" onChange={filterProducts}>
+                <option value="default">Select type</option>
+                <option value="vegetable">Vegetable</option>
+                <option value="fruit">Fruit</option>
+            </select>
+        </div>
+    )
+}
+
+export default Filter
\ No newline at end of file
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
new file mode 100644
index 0000000..debf0ae
--- /dev/null
+++ b/src/components/header/Header.jsx
@@ -0,0 +1,32 @@
+import Filter from './Filter'
+import StoreItemUl from './StoreItemUl'
+import { useState } from 'react'
+import initialStoreItems from '../../store-items'
+import Sort from './Sort'
+
+function Header({ setCartItem, cartItem}) {
+    const [storeItems] = useState(initialStoreItems)
+    const [sortedItems, setSortedItems] = useState('')
+    const [filteredItems, setFilteredItems] = useState(storeItems)
+
+    if (sortedItems === "alphabetically") {
+        filteredItems.sort((a, b) => {
+            return a.name.localeCompare(b.name)
+        })
+    } else if (sortedItems === 'price') {
+        filteredItems.sort((a, b) => {
+            return a.price - b.price
+        })
+    }
+
+    return (
+        <header id="store">
+            <h1>Greengrocers</h1>
+            <Filter setFilteredItems={setFilteredItems} storeItems={storeItems}/>
+            <Sort filteredItems={filteredItems} setSortedItems={setSortedItems}/>
+            <StoreItemUl setCartItem={setCartItem} cartItem={cartItem} filteredItems={filteredItems}/>
+        </header>
+    )
+}
+
+export default Header
\ No newline at end of file
diff --git a/src/components/header/Sort.jsx b/src/components/header/Sort.jsx
new file mode 100644
index 0000000..e734302
--- /dev/null
+++ b/src/components/header/Sort.jsx
@@ -0,0 +1,18 @@
+function Sort({ setSortedItems }) {
+    function sortProducts(e) {
+        setSortedItems(e.target.value)
+    }
+
+    return (
+        <div>
+            <label htmlFor="sort">Sort </label>
+            <select name="sort" id="sort" onChange={sortProducts}>
+                <option value="default">Select sorting</option>
+                <option value="alphabetically">Alphabetically</option>
+                <option value="price">Price</option>
+            </select>
+        </div>
+    )
+}
+
+export default Sort
\ No newline at end of file
diff --git a/src/components/header/StoreItemLi.jsx b/src/components/header/StoreItemLi.jsx
new file mode 100644
index 0000000..5d19f3e
--- /dev/null
+++ b/src/components/header/StoreItemLi.jsx
@@ -0,0 +1,44 @@
+import { useState } from "react"
+
+function StoreItemLi({ setCartItem, cartItem, filteredItems}) {
+    const [details, setDetails] = useState('')
+
+    function handleClick(item) {
+        const foundItem = cartItem.find(product => product.id === item.id)
+
+        if (foundItem) {
+                foundItem.quantity++
+                setCartItem([
+                    ...cartItem
+                ])
+
+          } else {
+                const productToAdd = { ...item }
+                productToAdd.quantity = 1
+                setCartItem([
+                    ...cartItem,
+                    productToAdd
+                ])
+          }
+
+    }
+
+    function handleDetails(item) {
+        setDetails(item)
+    }
+
+    return filteredItems.map((item, index) => {
+        return (
+            <li key={index}>
+                <div className="store--item-icon">
+                    <img src={`/assets/icons/${item.id}.svg`} alt={item.name} />
+                </div>
+                {details === item && <p className="details">{item.description}</p>}
+                <button onClick={() => handleClick(item)}>Add to cart</button>
+                <button onClick={() => handleDetails(item)}>Details</button>
+            </li>
+        )
+    })
+}
+
+export default StoreItemLi
\ No newline at end of file
diff --git a/src/components/header/StoreItemUl.jsx b/src/components/header/StoreItemUl.jsx
new file mode 100644
index 0000000..08321e4
--- /dev/null
+++ b/src/components/header/StoreItemUl.jsx
@@ -0,0 +1,11 @@
+import StoreItemLi from './StoreItemLi'
+
+function StoreItemUl({ setCartItem, cartItem, filteredItems}) {
+    return (
+        <ul className="item-list store--item-list">
+            <StoreItemLi setCartItem={setCartItem} cartItem={cartItem} filteredItems={filteredItems} />
+        </ul>
+    )
+}
+
+export default StoreItemUl
\ No newline at end of file
diff --git a/src/components/main/CartItemLi.jsx b/src/components/main/CartItemLi.jsx
new file mode 100644
index 0000000..c2ef15e
--- /dev/null
+++ b/src/components/main/CartItemLi.jsx
@@ -0,0 +1,40 @@
+function CartItemLi({ item, cartItem, setCartItem }) {
+    function handleMinusClick() {
+        if (item.quantity === 1) {
+            const index = cartItem.findIndex(product => product.id === item.id)
+            cartItem.splice(index, 1)
+            setCartItem([
+                ...cartItem
+            ])
+            return;
+          }
+      
+          item.quantity--
+          setCartItem([
+            ...cartItem
+          ])
+    }
+
+    function handlePlusClick() {
+        item.quantity++
+        setCartItem([
+            ...cartItem
+          ])
+    }
+
+    return (
+        <li>
+            <img
+                className="cart--item-icon"
+                src={`assets/icons/${item.id}.svg`}
+                alt={item.name}
+            />
+            <p>{item.name}</p>
+            <button className="quantity-btn remove-btn center" onClick={handleMinusClick}>-</button>
+            <span className="quantity-text center">{item.quantity}</span>
+            <button className="quantity-btn add-btn center" onClick={handlePlusClick}>+</button>
+        </li>
+    )
+}
+
+export default CartItemLi
\ No newline at end of file
diff --git a/src/components/main/CartItemUl.jsx b/src/components/main/CartItemUl.jsx
new file mode 100644
index 0000000..47ab62e
--- /dev/null
+++ b/src/components/main/CartItemUl.jsx
@@ -0,0 +1,13 @@
+import CartItemLi from "./CartItemLi"
+
+function CartItemUl({ cartItem, setCartItem }) {
+    return (
+        <ul className="item-list cart--item-list">
+            {cartItem.map((item, index) => {
+                return <CartItemLi key={index} item={item} cartItem={cartItem} setCartItem={setCartItem}/>
+            })}
+        </ul>
+    )
+}
+
+export default CartItemUl
\ No newline at end of file
diff --git a/src/components/main/MainComponent.jsx b/src/components/main/MainComponent.jsx
new file mode 100644
index 0000000..f5c7a6a
--- /dev/null
+++ b/src/components/main/MainComponent.jsx
@@ -0,0 +1,24 @@
+import CartItemUl from "./CartItemUl"
+
+function MainComponent({ cartItem, setCartItem}) {
+    const total = (cartItem.reduce((total, item) => total += item.price * item.quantity, 0)).toFixed(2)
+
+    return (
+        <main id="cart">
+            <h2>Your Cart</h2>
+            <div className="cart--item-list-container">
+            <CartItemUl cartItem={cartItem} setCartItem={setCartItem}/>
+            </div>
+            <div className="total-section">
+                <div>
+                    <h3>Total</h3>
+                </div>
+                <div>
+                    <span className="total-number">£{total}</span>
+                </div>
+            </div>
+        </main>
+    )
+}
+
+export default MainComponent
\ No newline at end of file
diff --git a/src/store-items.js b/src/store-items.js
index 96dd2ea..8bd473a 100644
--- a/src/store-items.js
+++ b/src/store-items.js
@@ -31,7 +31,7 @@ const storeItems =  [
   {
     id: "005-avocado",
     name: "avocado",
-    price: 0.35,
+    price: 0.37,
     description: "The avocado, alligator pear or avocado pear (Persea americana) is a medium-sized, evergreen tree in the laurel family (Lauraceae).",
     type: "fruit"
   },
@@ -45,7 +45,7 @@ const storeItems =  [
   {
     id: "007-bell-pepper",
     name: "bell pepper",
-    price: 0.35,
+    price: 0.36,
     description: "The bell pepper (also known as sweet pepper, pepper, capsicum /ˈkæpsɪkəm/ or in some places, mangoes) is the fruit of plants in the Grossum Group of the species Capsicum annuum.",
     type: "fruit"
   },
diff --git a/src/styles/index.css b/src/styles/index.css
index 0a04c2b..d1c587d 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -53,6 +53,10 @@ button {
   height: 125px;
 }
 
+.details {
+  font-size: 0.8rem;
+}
+
 @media only screen and (max-width: 600px) {
   .store--item-list {
     grid-template-columns: repeat(3, 125px);