diff --git a/public/js/app.js b/public/js/app.js
index 0e804c2c..f7e1c2da 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -16484,9 +16484,7 @@ var _hoisted_2 = {
   key: 1
 };
 
-var _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Add to cart: ");
-
-var _hoisted_4 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("br", null, null, -1
+var _hoisted_3 = /*#__PURE__*/(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("br", null, null, -1
 /* HOISTED */
 );
 
@@ -16505,11 +16503,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     );
   }), 128
   /* KEYED_FRAGMENT */
-  )), _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("button", {
+  )), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("button", {
+    "class": "p-2 mt-4 mb-4 text-lg font-bold text-white bg-blue-500 rounded",
     onClick: _cache[1] || (_cache[1] = function ($event) {
-      return _ctx.$store.commit('addProductToCart', 'testproduct');
+      return _ctx.$store.commit('addProductToCart', 'clicktestproduct');
     })
-  }, "Add to cart"), _hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Cart: " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(_ctx.$store.state.cart), 1
+  }, " Add to cart button"), _hoisted_3, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createTextVNode)(" Cart: " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(_ctx.$store.state.cart), 1
   /* TEXT */
   )])) : (0,vue__WEBPACK_IMPORTED_MODULE_0__.createCommentVNode)("v-if", true)]);
 }
@@ -16589,10 +16588,11 @@ __webpack_require__.r(__webpack_exports__);
     cart: []
   },
   mutations: {
-    addProductToCart: function addProductToCart(_ref) {
+    addProductToCart: function addProductToCart(_ref, payload) {
       var cart = _ref.cart;
       console.log(cart);
-      cart.push("test");
+      console.log(payload);
+      cart.push(payload);
     }
   } //actions: {},
   //modules: {},
diff --git a/resources/js/components/MainIndex.vue b/resources/js/components/MainIndex.vue
index f8dcf78c..a0f3ca74 100644
--- a/resources/js/components/MainIndex.vue
+++ b/resources/js/components/MainIndex.vue
@@ -8,8 +8,12 @@
                 {{ product.id }} - {{ product.name }} -
                 {{ product.description }} - {{ product.price }}
             </div>
-            Add to cart:
-            <button @click="$store.commit('addProductToCart', 'testproduct')">Add to cart</button
+
+            <button
+                class="p-2 mt-4 mb-4 text-lg font-bold text-white bg-blue-500 rounded"
+                @click="$store.commit('addProductToCart', 'clicktestproduct')"
+            >
+                Add to cart button</button
             ><br />
             Cart: {{ $store.state.cart }}
         </div>
diff --git a/resources/js/store/index.js b/resources/js/store/index.js
index 1fd09fcd..e0ca801c 100644
--- a/resources/js/store/index.js
+++ b/resources/js/store/index.js
@@ -3,9 +3,10 @@ import { createStore } from "vuex";
 export default createStore({
     state: { cart: [] },
     mutations: {
-        addProductToCart({ cart }) {
+        addProductToCart({ cart }, payload) {
             console.log(cart);
-            cart.push("test");
+            console.log(payload);
+            cart.push(payload);
         },
     },
     //actions: {},