diff --git a/public/js/app.js b/public/js/app.js
index 0b370eb1..c7d3647c 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -16550,6 +16550,16 @@ var vuexLocal = new vuex_persist__WEBPACK_IMPORTED_MODULE_1__.default({
     order: {}
   },
   getters: {
+    cartTotal: function cartTotal(state) {
+      return state.cart.length ? state.cart.reduce(function (total, product) {
+        return total + product.price * product.quantity;
+      }, 0) : 0;
+    },
+    cartQuantity: function cartQuantity(state) {
+      return state.cart.length ? state.cart.reduce(function (item, value) {
+        return item.quantity + value.quantity;
+      }) : 0;
+    },
     getCart: function getCart(state) {
       return state.cart;
     },
@@ -16637,14 +16647,10 @@ __webpack_require__.r(__webpack_exports__);
   setup: function setup() {
     var store = (0,vuex__WEBPACK_IMPORTED_MODULE_1__.useStore)();
     var cartQuantity = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
-      return store.state.cart.length ? store.state.cart.reduce(function (item, value) {
-        return item.quantity + value.quantity;
-      }) : 0;
+      return store.getters.cartQuantity;
     });
     var cartTotal = (0,vue__WEBPACK_IMPORTED_MODULE_0__.computed)(function () {
-      return store.state.cart.length ? store.state.cart.reduce(function (total, product) {
-        return total + product.price * product.quantity;
-      }, 0) : 0;
+      return store.getters.cartTotal;
     });
     return {
       cartQuantity: cartQuantity,
@@ -16763,7 +16769,6 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
 
- // import { useState } from 'vuex-composition-helpers';
 
 
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,vue__WEBPACK_IMPORTED_MODULE_1__.defineComponent)({
@@ -16786,6 +16791,9 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
     var cartLength = (0,vue__WEBPACK_IMPORTED_MODULE_1__.computed)(function () {
       return store.state.cart.length;
     });
+    var cartTotal = (0,vue__WEBPACK_IMPORTED_MODULE_1__.computed)(function () {
+      return store.getters.cartTotal;
+    });
 
     var removeProductFromCart = function removeProductFromCart(product) {
       console.log('Remove: ');
@@ -16837,6 +16845,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
     return _objectSpread(_objectSpread({}, (0,vue__WEBPACK_IMPORTED_MODULE_1__.toRefs)(localState)), {}, {
       store: store,
       cartLength: cartLength,
+      cartTotal: cartTotal,
       removeProductFromCart: removeProductFromCart,
       checkout: checkout
     });
@@ -17051,7 +17060,7 @@ var render = /*#__PURE__*/_withId(function (_ctx, _cache, $props, $setup, $data,
         "default": _withId(function () {
           return [(0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_4, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.cartQuantity.quantity), 1
           /* TEXT */
-          ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", null, "Total: " + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.cartTotal), 1
+          ), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", null, "Total: $" + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)($setup.cartTotal), 1
           /* TEXT */
           )];
         }),
@@ -17417,7 +17426,7 @@ var render = /*#__PURE__*/_withId(function (_ctx, _cache, $props, $setup, $data,
     /* TEXT */
     )]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_9, [_hoisted_10, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_11, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(products.quantity), 1
     /* TEXT */
-    )]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_12, [_hoisted_13, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_14, (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(products.total), 1
+    )]), (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("div", _hoisted_12, [_hoisted_13, (0,vue__WEBPACK_IMPORTED_MODULE_0__.createVNode)("span", _hoisted_14, " $" + (0,vue__WEBPACK_IMPORTED_MODULE_0__.toDisplayString)(_ctx.cartTotal), 1
     /* TEXT */
     )])]);
   }), 128
diff --git a/resources/js/components/Layout/Header/Cart.vue b/resources/js/components/Layout/Header/Cart.vue
index a01d1478..68fb5c88 100644
--- a/resources/js/components/Layout/Header/Cart.vue
+++ b/resources/js/components/Layout/Header/Cart.vue
@@ -21,7 +21,7 @@
           <span class="cartQuantity">
             {{ cartQuantity.quantity }}
           </span>
-          <span>Total: {{ cartTotal }} </span>
+          <span>Total: ${{ cartTotal }} </span>
         </router-link>
       </div>
     </transition>
@@ -35,17 +35,8 @@ import { useStore } from 'vuex';
 export default {
   setup() {
     const store = useStore();
-    const cartQuantity = computed(() => (store.state.cart.length
-      ? store.state.cart.reduce(
-        (item, value) => item.quantity + value.quantity,
-      )
-      : 0));
-    const cartTotal = computed(() => (store.state.cart.length
-      ? store.state.cart.reduce(
-        (total, product) => total + product.price * product.quantity,
-        0,
-      )
-      : 0));
+    const cartQuantity = computed(() => store.getters.cartQuantity);
+    const cartTotal = computed(() => store.getters.cartTotal);
     return { cartQuantity, cartTotal };
   },
 };
diff --git a/resources/js/pages/Checkout/Checkout.vue b/resources/js/pages/Checkout/Checkout.vue
index 8df80588..56d79427 100644
--- a/resources/js/pages/Checkout/Checkout.vue
+++ b/resources/js/pages/Checkout/Checkout.vue
@@ -41,11 +41,10 @@
           <span
             class="block mt-2 font-extrabold"
           >Subtotal: <br></span>
-          <span class="item-content"> {{ products.total }} </span>
+          <span class="item-content"> ${{ cartTotal }} </span>
         </div>
       </div>
     </section>
-
     <h2
       v-if="!cartLength"
       class="m-4 text-3xl text-center"
@@ -69,8 +68,6 @@ import {
 
 import { useStore } from 'vuex';
 
-// import { useState } from 'vuex-composition-helpers';
-
 import { loadStripe } from '@stripe/stripe-js';
 
 export default defineComponent({
@@ -93,6 +90,7 @@ export default defineComponent({
     });
 
     const cartLength = computed(() => store.state.cart.length);
+    const cartTotal = computed(() => store.getters.cartTotal);
 
     const removeProductFromCart = (product) => {
       console.log('Remove: ');
@@ -114,6 +112,7 @@ export default defineComponent({
       ...toRefs(localState),
       store,
       cartLength,
+      cartTotal,
       removeProductFromCart,
       checkout,
     };
diff --git a/resources/js/store/index.js b/resources/js/store/index.js
index e4f36468..313a95c3 100644
--- a/resources/js/store/index.js
+++ b/resources/js/store/index.js
@@ -19,6 +19,18 @@ export default createStore({
     order: {},
   },
   getters: {
+    cartTotal: (state) => (state.cart.length
+      ? state.cart.reduce(
+        (total, product) => total + product.price * product.quantity,
+        0,
+      )
+      : 0),
+    cartQuantity: (state) => (state.cart.length
+      ? state.cart.reduce(
+        (item, value) => item.quantity + value.quantity,
+      )
+      : 0),
+
     getCart: (state) => state.cart,
     cartLength: (state) => state.cart.length,
   },