diff --git a/README.md b/README.md
index 24835949..115a4a0a 100644
--- a/README.md
+++ b/README.md
@@ -24,9 +24,6 @@ In this project you'll take take an almost completed e-commerce store and refact
 - [ ] CD into the project base directory `cd react-shopping-cart`.
 - [ ] Download project dependencies by running `npm install`.
 - [ ] Start up the app using `npm start`.
-- [ ] Create a new branch: git checkout -b `<firstName-lastName>`.
-- [ ] Implement the project on your newly created `<firstName-lastName>` branch, committing changes regularly.
-- [ ] Push commits: git push origin `<firstName-lastName>`.
 
 ### Task 2: MVP
 
@@ -161,8 +158,3 @@ Do not attempt stretch problems until MVP has been reached and a final commit ha
 
 - Create a `removeItem` function that allows you to remove an item from your cart with a click of a button. This `removeItem` function should be able to be consumed from your `ShoppingCartItem` component.
   Remember each item has an `id` this will help out a lot while creating your removeItem function!
-
-- Persist Cart Items using `localStorage`. (If you try this one, it will be a bit tricky to get our items to populate the shopping cart on a refresh. You'll have to think about where the data actually lives, and how you can get data there from localStorage when the app is being mounted after a refresh. Good luck!)
-
-## Submission Format
-* [ ] Submit a Pull-Request to merge `<firstName-lastName>` Branch into `main` (student's  Repo). **Please don't merge your own pull request**
diff --git a/src/App.js b/src/App.js
index e134ca03..ed6e10dc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,27 +7,39 @@ import Navigation from './components/Navigation';
 import Products from './components/Products';
 import ShoppingCart from './components/ShoppingCart';
 
+// Context
+import { ProductContext } from './contexts/ProductContext';
+import { CartContext } from './contexts/CartContext';
+
 function App() {
 	const [products] = useState(data);
 	const [cart, setCart] = useState([]);
 
 	const addItem = item => {
 		// add the given item to the cart
+		setCart([...cart, item])
 	};
 
 	return (
-		<div className="App">
-			<Navigation cart={cart} />
-
-			{/* Routes */}
-			<Route exact path="/">
-				<Products products={products} addItem={addItem} />
-			</Route>
-
-			<Route path="/cart">
-				<ShoppingCart cart={cart} />
-			</Route>
-		</div>
+		<ProductContext.Provider value={{products, addItem}}>
+			<CartContext.Provider value={cart}>
+				<div className="App">
+					{/* <Navigation cart={cart} /> */}
+					<Navigation  />
+
+					{/* Routes */}
+					<Route exact path="/">
+						{/* <Products products={products} addItem={addItem} /> */}
+						<Products />
+					</Route>
+
+					<Route path="/cart">
+						{/* <ShoppingCart cart={cart} /> */}
+						<ShoppingCart  />
+					</Route>
+				</div>
+			</CartContext.Provider>
+		</ProductContext.Provider>
 	);
 }
 
diff --git a/src/components/Navigation.js b/src/components/Navigation.js
index b2ef658a..063f0dc4 100644
--- a/src/components/Navigation.js
+++ b/src/components/Navigation.js
@@ -1,12 +1,13 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { NavLink } from 'react-router-dom';
-
-const Navigation = props => {
+import { CartContext } from '../contexts/CartContext';
+const Navigation = () => {
+	const  cart  = useContext(CartContext);
 	return (
 		<div className="navigation">
 			<NavLink to="/">Products</NavLink>
 			<NavLink to="/cart">
-				Cart <span>{props.cart.length}</span>
+				Cart <span>{cart.length}</span>
 			</NavLink>
 		</div>
 	);
diff --git a/src/components/Products.js b/src/components/Products.js
index 3f56b80e..2c064d67 100644
--- a/src/components/Products.js
+++ b/src/components/Products.js
@@ -1,16 +1,19 @@
 import React from 'react';
+import { useContext } from 'react';
 
 // Components
 import Product from './Product';
+import { ProductContext } from '../contexts/ProductContext';
 
-const Products = props => {
+const Products = () => {
+	const { products, addItem } = useContext(ProductContext);
 	return (
 		<div className="products-container">
-			{props.products.map(product => (
+			{products.map(product => (
 				<Product
 					key={product.id}
 					product={product}
-					addItem={props.addItem}
+					addItem={addItem}
 				/>
 			))}
 		</div>
diff --git a/src/components/ShoppingCart.js b/src/components/ShoppingCart.js
index a2d21939..83488950 100644
--- a/src/components/ShoppingCart.js
+++ b/src/components/ShoppingCart.js
@@ -1,18 +1,23 @@
-import React from 'react';
+
+   
+import React, { useContext } from 'react';
+import { CartContext } from '../contexts/CartContext';
 
 // Components
 import Item from './ShoppingCartItem';
 
-const ShoppingCart = props => {
+const ShoppingCart = () => {
+	const  cart  = useContext(CartContext);
+
 	const getCartTotal = () => {
-		return props.cart.reduce((acc, value) => {
+		return cart.reduce((acc, value) => {
 			return acc + value.price;
 		}, 0).toFixed(2);
 	};
 
 	return (
 		<div className="shopping-cart">
-			{props.cart.map(item => (
+			{cart.map(item => (
 				<Item key={item.id} {...item} />
 			))}
 
diff --git a/src/contexts/CartContext.js b/src/contexts/CartContext.js
new file mode 100644
index 00000000..37fd47fb
--- /dev/null
+++ b/src/contexts/CartContext.js
@@ -0,0 +1,5 @@
+
+   
+import { createContext } from "react";
+
+export const CartContext = createContext();
\ No newline at end of file
diff --git a/src/contexts/ProductContext.js b/src/contexts/ProductContext.js
new file mode 100644
index 00000000..ca18c2b7
--- /dev/null
+++ b/src/contexts/ProductContext.js
@@ -0,0 +1,4 @@
+
+import React, {  createContext } from 'react';
+
+export const ProductContext = createContext();