diff --git a/src/components/App.js b/src/components/App.js
index 6b15d49f8..0798a40e6 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,18 +1,22 @@
 import React from "react";
 import ShoppingList from "./ShoppingList";
 import itemData from "../data/items";
+import { useState } from "react";
 
 function App() {
+  const [isDark, setIsDark] = useState(false)
 
-  // replace 'false' with a state variable that can be toggled between true and false
-  // this will be used for the Dark Mode Toggle feature
-  const appClass = false ? "App dark" : "App light"
+  function handleClick() {
+    setIsDark((isDark) => !isDark);
+  }
+
+  const appClass = isDark ? "App dark" : "App light"
 
   return (
     <div className={appClass}>
       <header>
         <h2>Shopster</h2>
-        <button>Dark Mode</button>
+        <button onClick={handleClick}>Dark Mode</button>
       </header>
       <ShoppingList items={itemData} />
     </div>
diff --git a/src/components/Item.js b/src/components/Item.js
index b833ecf8e..685d9bb51 100644
--- a/src/components/Item.js
+++ b/src/components/Item.js
@@ -1,11 +1,20 @@
-import React from "react";
+import React, {useState} from "react";
 
 function Item({ name, category }) {
+  const [inCart, setInCart] = useState(false)
+
+  function handleClick() {
+    setInCart((inCart) => !inCart)
+  }
+
+  const liClass = inCart ? "in-cart" : ""
+  const buttonTxt = inCart ?  "Remove From Cart" : "Add to Cart"
+
   return (
-    <li className="">
+    <li className={liClass}>
       <span>{name}</span>
       <span className="category">{category}</span>
-      <button className="add">Add to Cart</button>
+      <button onClick={handleClick} className="add">{buttonTxt}</button>
     </li>
   );
 }
diff --git a/src/components/ShoppingList.js b/src/components/ShoppingList.js
index a48d82615..1efd0f348 100644
--- a/src/components/ShoppingList.js
+++ b/src/components/ShoppingList.js
@@ -1,11 +1,25 @@
-import React from "react";
+import React, {useState} from "react";
 import Item from "./Item";
 
 function ShoppingList({ items }) {
+  const [isSelected, setSelectedCategory] = useState('All')
+
+  function handleFilterChange(event) {
+    setSelectedCategory(event.target.value);
+  }
+
+  const filterItems = items.filter((item) => {
+    if(isSelected === 'All') {
+      return items
+    } else {
+      return item.category === isSelected
+    }
+  })
+
   return (
     <div className="ShoppingList">
       <div className="Filter">
-        <select name="filter">
+        <select name="filter" onChange={handleFilterChange}>
           <option value="All">Filter by category</option>
           <option value="Produce">Produce</option>
           <option value="Dairy">Dairy</option>
@@ -13,7 +27,7 @@ function ShoppingList({ items }) {
         </select>
       </div>
       <ul className="Items">
-        {items.map((item) => (
+        {filterItems.map((item) => (
           <Item key={item.id} name={item.name} category={item.category} />
         ))}
       </ul>