diff --git a/app/src/cart.js b/app/src/cart.js
new file mode 100644
index 0000000..3f17bab
--- /dev/null
+++ b/app/src/cart.js
@@ -0,0 +1,5 @@
+import { reactive } from 'vue';
+
+export const store = reactive({
+  cart: []
+});
diff --git a/app/src/components/GroceryCart.vue b/app/src/components/GroceryCart.vue
index ec9b4f9..6e7084f 100644
--- a/app/src/components/GroceryCart.vue
+++ b/app/src/components/GroceryCart.vue
@@ -1,11 +1,12 @@
 <template>
     <div>
         <h1>Cart</h1>
+        <h2 v-for="(item, index) in store.cart" :key="index" :index="index">{{ item.name }} - {{ item.cost }}</h2>
     </div>
 </template>
 
 <script setup>
-cart = [];
+import { store } from '../cart.js'
 </script>
 
 <style scoped>
diff --git a/app/src/components/ShopProduce.vue b/app/src/components/ShopProduce.vue
index 68f7f5f..d525d8f 100644
--- a/app/src/components/ShopProduce.vue
+++ b/app/src/components/ShopProduce.vue
@@ -1,14 +1,15 @@
 <template>
     <div>
       <div class="container">
-          <ProductCss @click="console.log(product)" v-for="product in products" :key="product.name" :product = "product">Add to Cart</ProductCss>
+          <ProductCss @click="addToCart(product)" v-for="product in products" :key="product.name" :product = "product">Add to Cart</ProductCss>
       </div>
     </div>
 </template>
 
 <script setup>
-import cart from '../components/GroceryCart.vue'
+import { store } from '../cart.js'
 import ProductCss from '../components/ProductCss.vue'
+import cart from '../components/GroceryCart.vue'
 const products  = [
   {name: "Broccoli (per lb)",
     cost: "$2.99"},
@@ -51,6 +52,11 @@ const products  = [
   {name: "Honeydew Melon (per lb)",
     cost: "$8.50"}
 ]
+
+const addToCart = (product) => {
+  store.cart.push(product); 
+};
+
 </script>
 
 <style scoped>