diff --git a/src/components/App.js b/src/components/App.js
index 6b15d49f8..9fb5ea820 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,18 +1,22 @@
-import React from "react";
+import React, { useState } from "react";
 import ShoppingList from "./ShoppingList";
 import itemData from "../data/items";
 
 function App() {
+  const [colorMode, setColorMode] = useState(false);
+  const appClass = colorMode ? "App dark" : "App light";
 
-  // 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"
+  const handleColorMode = () => {
+    setColorMode((colorMode) => !colorMode);
+  };
 
   return (
     <div className={appClass}>
       <header>
         <h2>Shopster</h2>
-        <button>Dark Mode</button>
+        <button onClick={handleColorMode}>
+          {colorMode ? "Light Mode" : "Dark Mode"}
+        </button>
       </header>
       <ShoppingList items={itemData} />
     </div>
diff --git a/src/components/Item.js b/src/components/Item.js
index b833ecf8e..b368278f2 100644
--- a/src/components/Item.js
+++ b/src/components/Item.js
@@ -1,11 +1,16 @@
-import React from "react";
+import React, { useState } from "react";
 
 function Item({ name, category }) {
+  const [inCart, setInCart] = useState(false);
+  const handleCart = () => setInCart(!inCart);
+
   return (
     <li className="">
       <span>{name}</span>
       <span className="category">{category}</span>
-      <button className="add">Add to Cart</button>
+      <button className={inCart ? "in-Cart" : ""} onClick={handleCart}>
+        {inCart ? "Remove From Cart" : "Add to Cart"}
+      </button>
     </li>
   );
 }
diff --git a/src/components/ShoppingList.js b/src/components/ShoppingList.js
index a48d82615..7dcdae4fc 100644
--- a/src/components/ShoppingList.js
+++ b/src/components/ShoppingList.js
@@ -1,22 +1,33 @@
-import React from "react";
+import React, { useState } from "react";
 import Item from "./Item";
 
 function ShoppingList({ items }) {
+  const [category, setCategory] = useState("All");
+
+  const handleCategoryChange = (event) => {
+    setCategory(event.target.value);
+  };
+  const itemsToDisplay = items.filter((item) => {
+    if (category === "All") return true;
+    return item.category === category;
+  });
+
+  const renderItems = () => {
+    return itemsToDisplay.map((item) => (
+      <Item key={item.id} name={item.name} category={item.category} />
+    ));
+  };
   return (
     <div className="ShoppingList">
       <div className="Filter">
-        <select name="filter">
+        <select name="filter" value={category} onChange={handleCategoryChange}>
           <option value="All">Filter by category</option>
           <option value="Produce">Produce</option>
           <option value="Dairy">Dairy</option>
           <option value="Dessert">Dessert</option>
         </select>
       </div>
-      <ul className="Items">
-        {items.map((item) => (
-          <Item key={item.id} name={item.name} category={item.category} />
-        ))}
-      </ul>
+      <ul className="Items">{renderItems()}</ul>
     </div>
   );
 }