diff --git a/components/Cart/CartContents.vue b/components/Cart/CartContents.vue
index b1679adf..cdea8f31 100644
--- a/components/Cart/CartContents.vue
+++ b/components/Cart/CartContents.vue
@@ -1,18 +1,24 @@
 <template>
-  <template v-if="data.cart?.contents?.nodes?.length">
+  <div v-if="isLoading">
+    <h2 class="mt-64 text-3xl text-center">Loading cart...</h2>
+  </div>
+  <div v-else-if="error">
+    <h2 class="mt-64 text-3xl text-center text-red-500">Error loading cart. Please try again.</h2>
+  </div>
+  <div v-else-if="cartItems.length">
     <h1 class="h-10 p-6 text-3xl font-bold text-center">Cart</h1>
     <section class="mt-10">
       <CartItem
-        v-for="product in data.cart.contents.nodes"
-        :key="product.id"
+        v-for="product in cartItems"
+        :key="product.key"
         :product="product"
         @remove="handleRemoveProduct"
       />
     </section>
-    <CommonButton link-to="/checkout" v-if="showCheckoutButton" center-button>
+    <CommonButton link-to="/checkout" center-button>
       CHECKOUT
     </CommonButton>
-  </template>
+  </div>
   <h2 v-else class="mt-64 text-3xl text-center">Cart is currently empty</h2>
 </template>
 
@@ -21,56 +27,43 @@
  * Vue.js component for handling the logic of removing a product from the cart and updating the cart state.
  *
  * @module CartContents
- * @param {Object} props - Object containing the component's properties.
- * @param {Boolean} props.showCheckoutButton - Determines whether the checkout button should be shown or not.
  * @returns {Object} The Vue.js component object.
  */
-import GET_CART_QUERY from "@/apollo/queries/GET_CART_QUERY.gql";
-import UPDATE_CART_MUTATION from "@/apollo/mutations/UPDATE_CART_MUTATION.gql";
-
+import { computed, ref, onMounted } from 'vue';
 import { useCart } from "@/store/useCart";
+import CommonButton from '@/components/common/CommonButton.vue';
 
 const cart = useCart();
+const isLoading = ref(true);
+const error = ref(null);
 
-defineProps({
-  showCheckoutButton: { type: Boolean, required: false, default: false },
-});
-
-const { data } = await useAsyncQuery(GET_CART_QUERY);
+const cartItems = computed(() => cart.cart);
 
 /**
  * Handles the removal of a product.
  *
- * @param {Object} product - The product to be removed.
+ * @param {string} key - The key of the product to be removed.
  */
-const handleRemoveProduct = (product) => {
-  const updatedItems = [];
-
-  const { key } = product;
-
-  updatedItems.push({
-    key,
-    quantity: 0,
-  });
-
-  const variables = {
-    input: {
-      items: updatedItems,
-    },
-  };
-
-  cart.removeProductFromCart(product);
-
-  const { mutate, onDone, onError } = useMutation(UPDATE_CART_MUTATION, {
-    variables,
-  });
-
-  mutate(variables);
-
-  onDone(() => {
-    document.location = "/cart";
-  });
+const handleRemoveProduct = async (key) => {
+  try {
+    await cart.removeProductFromCart(key);
+  } catch (error) {
+    console.error('Error removing product from cart:', error);
+    // Optionally, you can add a user-friendly notification here
+    // without exposing the error details
+  }
 };
+
+onMounted(async () => {
+  try {
+    await cart.refetch();
+  } catch (err) {
+    console.error('Error fetching cart:', err);
+    error.value = err;
+  } finally {
+    isLoading.value = false;
+  }
+});
 </script>
 
 <style scoped>
diff --git a/components/Cart/CartItem.vue b/components/Cart/CartItem.vue
index 7722cfb3..dc0a7f8a 100644
--- a/components/Cart/CartItem.vue
+++ b/components/Cart/CartItem.vue
@@ -15,7 +15,7 @@
     </div>
     <div class="item">
       <span class="block mt-2 font-extrabold">Name: <br /></span>
-      <span class="item-content">{{ product.product.node.name }}</span>
+      <span class="item-content">{{ product.product.name }}</span>
     </div>
     <div class="item">
       <span class="block mt-2 font-extrabold">Quantity: <br /></span>
@@ -25,7 +25,7 @@
     </div>
     <div class="item">
       <span class="block mt-2 font-extrabold">Subtotal: <br /></span>
-      <span class="item-content">{{ formatPrice(`${product.total}`) }}</span>
+      <span class="item-content">{{ formatPrice(product.total) }}</span>
     </div>
   </div>
 </template>
@@ -37,13 +37,16 @@
  * @component CartItem
  *
  * @prop {Object} product - The product object containing information about the product.
- * @prop {string} product.name - The name of the product.
+ * @prop {Object} product.product - The product details.
+ * @prop {string} product.product.name - The name of the product.
  * @prop {number} product.quantity - The quantity of the product.
- * @prop {number} product.total - The subtotal of the product.
+ * @prop {string} product.total - The subtotal of the product.
+ * @prop {string} product.key - The unique key for the cart item.
  *
  * @emits CartItem#remove - Emitted when the remove button is clicked.
  */
 
+import { ref } from 'vue';
 import { formatPrice } from "@/utils/functions";
 
 const isRemoving = ref(false);
@@ -58,10 +61,11 @@ const props = defineProps({
 const emit = defineEmits(["remove"]);
 
 /**
- * Emits a "remove" event with the `product` prop as the payload.
+ * Emits a "remove" event with the product's key as the payload.
  */
 const emitRemove = () => {
-  emit("remove", props.product);
+  isRemoving.value = true;
+  emit("remove", props.product.key);
 };
 </script>
 
diff --git a/components/Layout/LayoutCart.vue b/components/Layout/LayoutCart.vue
index 3bb81e9f..51b816b1 100644
--- a/components/Layout/LayoutCart.vue
+++ b/components/Layout/LayoutCart.vue
@@ -1,14 +1,17 @@
 <template>
-  <div v-if="remoteError">
-    <span class="text-xl text-red-500"
-      >Error fetching cart. Please refresh the page.</span
-    >
-  </div>
-  <div v-else class="mt-4 lg:mt-0">
-    <NuxtLink to="/cart">
+  <div class="mt-4 lg:mt-0">
+    <div v-if="isLoading">
+      <span class="text-xl text-gray-500">Loading cart...</span>
+    </div>
+    <div v-else-if="error">
+      <span class="text-xl text-red-500">
+        Error fetching cart. Please refresh the page.
+      </span>
+    </div>
+    <NuxtLink v-else to="/cart">
       <transition name="cart">
         <span
-          v-if="cartLength && !loading"
+          v-if="cartLength > 0"
           class="text-xl text-white no-underline lg:text-black is-active"
         >
           <span class="hidden lg:block">
@@ -29,14 +32,14 @@
         </span>
       </transition>
       <transition name="cart">
-        <div v-if="cartLength && !loading">
+        <div v-if="cartLength > 0">
           <span
             class="absolute w-6 h-6 pb-2 ml-16 -mt-12 text-center text-black bg-white lg:text-white lg:bg-black rounded-full lg:ml-14"
           >
             {{ cartLength }}
           </span>
           <span class="text-white lg:text-black">
-            Total: {{ formatPrice(`${subTotal}`) }}
+            Total: {{ formatPrice(cartSubtotal) }}
           </span>
         </div>
       </transition>
@@ -45,62 +48,24 @@
 </template>
 
 <script setup>
-import { ref, onBeforeMount, computed, watch } from "vue";
-
-import GET_CART_QUERY from "@/apollo/queries/GET_CART_QUERY.gql";
-import { getCookie } from "@/utils/functions";
+import { ref, computed, onMounted } from "vue";
 import { useCart } from "@/store/useCart";
+import { formatPrice } from "@/utils/functions";
 
 const cart = useCart();
-const cartChanged = ref(false);
-const loading = ref(true);
-const remoteError = ref(false);
-
-const { data, error, pending, execute } = useAsyncQuery(GET_CART_QUERY, {
-  fetchPolicy: "cache-and-network",
-});
-
-const cartContents = computed(() => data.value?.cart?.contents?.nodes || []);
-const cartLength = computed(() =>
-  cartContents.value.reduce((total, product) => total + product.quantity, 0)
-);
-const subTotal = computed(() =>
-  cartContents.value.reduce(
-    (total, product) => total + Number(product.total.replace(/[^0-9.-]+/g, "")),
-    0
-  )
-);
-
-// Watch for changes in the cart quantity and set a flag if it changes
-watch(cartLength, (newLength, oldLength) => {
-  if (newLength !== oldLength) {
-    cartChanged.value = true;
-  }
-});
-
-// Execute the query initially
-onBeforeMount(() => {
-  execute();
-});
+const isLoading = ref(true);
+const error = ref(null);
 
-// When the component is mounted, stop the loading state
-loading.value = false;
+const cartLength = computed(() => cart.cartQuantity);
+const cartSubtotal = computed(() => cart.cartSubtotal);
 
-// Watch for the cartChanged flag and execute the query when it changes
-watch(cartChanged, (newValue) => {
-  if (
-    newValue &&
-    process.client &&
-    !pending.value &&
-    getCookie("woo-session")
-  ) {
-    execute();
-    cartChanged.value = false; // Reset the flag after executing the query
+onMounted(async () => {
+  try {
+    await cart.refetch();
+  } catch (err) {
+    error.value = err;
+  } finally {
+    isLoading.value = false;
   }
 });
-
-// Watch for errors from the Apollo query
-watch(error, (newError) => {
-  remoteError.value = !!newError;
-});
 </script>
diff --git a/components/Products/ProductsSingleProduct.vue b/components/Products/ProductsSingleProduct.vue
index 64f6443b..3acc5662 100644
--- a/components/Products/ProductsSingleProduct.vue
+++ b/components/Products/ProductsSingleProduct.vue
@@ -54,13 +54,14 @@
                 @common-button-click="addProductToCart(data.product)"
                 :is-loading="isLoading"
               >
-                ADD TO CART</CommonButton
-              >
+                ADD TO CART
+              </CommonButton>
             </div>
           </div>
         </div>
       </div>
     </section>
+    <Toast ref="toast" />
   </template>
 </template>
 
@@ -75,13 +76,13 @@
  * @prop {string} slug - The slug of the product to display.
  */
 
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 
 import GET_SINGLE_PRODUCT_QUERY from "@/apollo/queries/GET_SINGLE_PRODUCT_QUERY.gql";
-import ADD_TO_CART_MUTATION from "@/apollo/mutations/ADD_TO_CART_MUTATION.gql";
 
 import ProductImage from "@/components/Products/ProductImage.vue";
 import ProductPrice from "@/components/Products/ProductPrice.vue";
+import Toast from "@/components/common/Toast.vue";
 
 import { stripHTML, filteredVariantName } from "@/utils/functions";
 
@@ -92,6 +93,7 @@ const cart = useCart();
 const isLoading = computed(() => cart.loading);
 
 const selectedVariation = ref(); // TODO Pass this value to addProductToCart()
+const toast = ref(null);
 
 const props = defineProps({
   id: { type: String, required: true },
@@ -119,12 +121,12 @@ watch(
  * @return {Promise<void>} A Promise that resolves when the product has been successfully added to the cart.
  */
 const addProductToCart = async (product) => {
-  await cart.addToCart(product);
-
-  watchEffect(() => {
-    if (isLoading.value === false) {
-      window.location.reload();
-    }
-  });
+  try {
+    await cart.addToCart(product);
+    toast.value.show();
+  } catch (error) {
+    console.error('Error adding product to cart:', error);
+    // You might want to show an error message to the user here
+  }
 };
 </script>
diff --git a/components/common/Toast.vue b/components/common/Toast.vue
new file mode 100644
index 00000000..a23133f5
--- /dev/null
+++ b/components/common/Toast.vue
@@ -0,0 +1,71 @@
+<template>
+  <Teleport to="body">
+    <transition name="toast">
+      <div v-if="isVisible" class="toast-container">
+        <div class="toast-content">
+          {{ message }}
+        </div>
+      </div>
+    </transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+
+const props = defineProps({
+  message: {
+    type: String,
+    default: 'Product added to cart'
+  },
+  duration: {
+    type: Number,
+    default: 3000
+  }
+});
+
+const isVisible = ref(false);
+
+const show = () => {
+  isVisible.value = true;
+  setTimeout(() => {
+    isVisible.value = false;
+  }, props.duration);
+};
+
+defineExpose({ show });
+</script>
+
+<style scoped>
+.toast-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 9999;
+}
+
+.toast-content {
+  background-color: #4CAF50;
+  color: white;
+  padding: 16px;
+  border-radius: 4px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.toast-enter-active,
+.toast-leave-active {
+  transition: all 0.5s ease;
+}
+
+.toast-enter-from,
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.toast-enter-to,
+.toast-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+</style>
\ No newline at end of file
diff --git a/nuxt.config.js b/nuxt.config.js
index 6294f2a7..c72c6e52 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -13,7 +13,7 @@ export default defineNuxtConfig({
     "nuxt-icon",
     "@nuxt/image",
   ],
-  plugins: ["~/plugins/apollo"],
+  plugins: ["~/plugins/apollo", "~/plugins/cartUpdater"],
   runtimeConfig: {
     public: {
       graphqlURL: process.env.PUBLIC_GRAPHQL_URL,
diff --git a/plugins/apollo.js b/plugins/apollo.js
index cc616acf..a89631c6 100644
--- a/plugins/apollo.js
+++ b/plugins/apollo.js
@@ -57,12 +57,29 @@ export default defineNuxtPlugin((nuxtApp) => {
   );
 
   // Cache implementation
-  const cache = new InMemoryCache();
+  const cache = new InMemoryCache({
+    typePolicies: {
+      Query: {
+        fields: {
+          cart: {
+            merge(existing, incoming) {
+              return incoming;
+            },
+          },
+        },
+      },
+    },
+  });
 
   // Create the apollo client
   const apolloClient = new ApolloClient({
     link: middleware.concat(afterware.concat(httpLink)),
     cache,
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: 'cache-and-network',
+      },
+    },
   });
 
   provideApolloClient(apolloClient);
diff --git a/plugins/cartUpdater.js b/plugins/cartUpdater.js
new file mode 100644
index 00000000..53e00956
--- /dev/null
+++ b/plugins/cartUpdater.js
@@ -0,0 +1,16 @@
+import { useCart } from '@/store/useCart';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.hook('app:created', () => {
+    const cart = useCart();
+    
+    // Refetch cart data on initial load
+    cart.refetch();
+
+    // Refetch cart data on route change
+    nuxtApp.$router.beforeEach((to, from, next) => {
+      cart.refetch();
+      next();
+    });
+  });
+});
\ No newline at end of file
diff --git a/store/useCart.js b/store/useCart.js
index e47e2ee0..99a91071 100644
--- a/store/useCart.js
+++ b/store/useCart.js
@@ -1,103 +1,139 @@
 import { defineStore } from "pinia";
-
+import { useQuery, useMutation } from "@vue/apollo-composable";
+import { computed, ref, watch } from "vue";
 import ADD_TO_CART_MUTATION from "@/apollo/mutations/ADD_TO_CART_MUTATION.gql";
+import UPDATE_CART_MUTATION from "@/apollo/mutations/UPDATE_CART_MUTATION.gql";
+import GET_CART_QUERY from "@/apollo/queries/GET_CART_QUERY.gql";
 
-/**
- * Manages a shopping cart store using the Pinia library.
- *
- * @typedef {Object} CartState
- * @property {Array} cart - The array representing the cart.
- * @property {boolean} loading - The loading status of the cart.
- * @property {string|null} error - The error message, if any.
- */
+export const useCart = defineStore("cartState", () => {
+  const cart = ref([]);
+  const loading = ref(false);
+  const error = ref(null);
+  const cartTotals = ref({});
 
-const state = {
-  cart: [],
-  loading: false,
-  error: null,
-};
+  const { result: cartResult, loading: cartLoading, refetch: refetchCart } = useQuery(GET_CART_QUERY, null, { fetchPolicy: 'network-only' });
 
-export const useCart = defineStore("cartState", {
-  state: () => state,
-  actions: {
-    async addToCart(product) {
-      this.loading = true;
-      try {
-        const { mutate } = useMutation(ADD_TO_CART_MUTATION);
-        const response = await mutate({
-          input: {
-            productId: product.databaseId,
-            quantity: 1,
-          },
-        });
+  watch(cartResult, (newCartResult) => {
+    if (newCartResult && newCartResult.cart) {
+      updateCartState(newCartResult.cart);
+    }
+  });
 
-        if (response.data && response.data.addToCart) {
-          this.loading = false;
-          const newCartItem = response.data.addToCart.cartItem;
-          const foundProductInCartIndex = this.cart.findIndex(
-            (cartProduct) => newCartItem.product.node.slug === cartProduct.slug
-          );
+  const updateCartState = (newCart) => {
+    cart.value = newCart.contents.nodes.map(item => ({
+      key: item.key,
+      product: item.product.node,
+      variation: item.variation ? item.variation.node : null,
+      quantity: item.quantity,
+      total: item.total,
+      subtotal: item.subtotal,
+      subtotalTax: item.subtotalTax
+    }));
 
-          if (foundProductInCartIndex > -1) {
-            this.cart[foundProductInCartIndex].quantity += 1;
-          } else {
-            // We need to construct a cart item that matches the expected structure in `this.cart`
-            const productCopy = {
-              ...newCartItem.product.node,
-              quantity: newCartItem.quantity,
-              price: newCartItem.total, // Assuming 'total' is the price for one item
-              slug: newCartItem.product.node.slug,
-            };
+    cartTotals.value = {
+      subtotal: newCart.subtotal,
+      subtotalTax: newCart.subtotalTax,
+      shippingTax: newCart.shippingTax,
+      shippingTotal: newCart.shippingTotal,
+      total: newCart.total,
+      totalTax: newCart.totalTax,
+      feeTax: newCart.feeTax,
+      feeTotal: newCart.feeTotal,
+      discountTax: newCart.discountTax,
+      discountTotal: newCart.discountTotal
+    };
+  };
 
-            this.cart.push(productCopy);
-          }
-        } else {
-          // Handle the case where the mutation does not return the expected data
-          this.error = "Did not receive expected cart data from the server.";
-        }
-      } catch (error) {
-        this.error = error.message || "An error occurred while adding to cart.";
-      } finally {
-        this.loading = false;
-      }
-    },
+  const addToCart = async (product, quantity = 1) => {
+    loading.value = true;
+    error.value = null;
+    try {
+      const { mutate } = useMutation(ADD_TO_CART_MUTATION);
+      await mutate({
+        input: {
+          productId: product.databaseId,
+          quantity: quantity,
+        },
+      });
+      await refetchCart();
+    } catch (err) {
+      console.error("Error adding to cart:", err);
+    } finally {
+      loading.value = false;
+    }
+  };
 
-    removeProductFromCart(product) {
-      this.cart.splice(this.cart.indexOf(product), 1);
-    },
-    clearCart() {
-      this.cart.length = 0;
-    },
-  },
-  getters: {
-    getCartQuantity() {
-      if (!this.cart) {
-        console.error("Cart is undefined");
-        return 0;
-      }
-      return this.cart.reduce((total, product) => total + product.quantity, 0);
-    },
+  const updateCartItemQuantity = async (key, quantity) => {
+    loading.value = true;
+    error.value = null;
+    try {
+      const { mutate } = useMutation(UPDATE_CART_MUTATION);
+      await mutate({
+        input: {
+          items: [{ key, quantity }],
+        },
+      });
+      await refetchCart();
+    } catch (err) {
+      console.error("Error updating cart:", err);
+      await refetchCart();
+    } finally {
+      loading.value = false;
+    }
+  };
 
-    getCartTotal() {
-      const currencySymbol = useRuntimeConfig().public.currencySymbol || "kr";
+  const removeProductFromCart = async (key) => {
+    loading.value = true;
+    error.value = null;
+    try {
+      await updateCartItemQuantity(key, 0);
+    } catch (err) {
+      console.error("Error removing product from cart:", err);
+    } finally {
+      loading.value = false;
+      await refetchCart();
+    }
+  };
 
-      const total = this.cart.reduce((total, product) => {
-        // Assuming product.price is a string that includes the currency symbol
-        const numericPrice = product.price
-          .replace(currencySymbol, "")
-          .replace(/[^0-9.]+/g, "");
+  const clearCart = async () => {
+    loading.value = true;
+    error.value = null;
+    try {
+      for (const item of cart.value) {
+        await removeProductFromCart(item.key);
+      }
+    } catch (err) {
+      console.error("Error clearing cart:", err);
+    } finally {
+      loading.value = false;
+      await refetchCart();
+    }
+  };
 
-        // Convert the cleaned string to a floating-point number
-        const price = parseFloat(numericPrice);
+  const cartQuantity = computed(() => {
+    return cart.value.reduce((total, item) => total + item.quantity, 0);
+  });
 
-        const productTotal = price * product.quantity;
+  const cartSubtotal = computed(() => {
+    return cartTotals.value.subtotal || '0';
+  });
 
-        return total + productTotal;
-      }, 0);
+  const cartTotal = computed(() => {
+    return cartTotals.value.total || '0';
+  });
 
-      // Format the total with the currency symbol and return it
-      return `${currencySymbol} ${total.toFixed(2)}`;
-    },
-  },
-  persist: true,
+  return {
+    cart,
+    loading,
+    error,
+    cartTotals,
+    addToCart,
+    updateCartItemQuantity,
+    removeProductFromCart,
+    clearCart,
+    cartQuantity,
+    cartSubtotal,
+    cartTotal,
+    refetch: refetchCart,
+  };
 });