From 21366392efa376d3d5bb86ef9cf25afc434a0a42 Mon Sep 17 00:00:00 2001
From: Marcin Kwiatkowski <marcin.kwiatkowski@vuestorefront.io>
Date: Thu, 3 Feb 2022 09:07:43 +0100
Subject: [PATCH] chore: release 1.0.0-rc.5.4

---
 .env.example                                  |  19 +
 components/AppHeader.vue                      |   9 +-
 components/BottomNavigation.vue               |  17 +-
 components/CartSidebar.vue                    |  30 +-
 components/Checkout/CartPreview.vue           |   9 +-
 components/Checkout/VsfShippingProvider.vue   |  12 +-
 components/CurrencySelector.vue               |   2 +-
 components/InstagramFeed.vue                  |  52 +--
 components/LoginModal.vue                     | 105 +++--
 components/MobileStoreBanner.vue              |  12 +-
 components/MyAccount/AddressForm.vue          |  33 +-
 components/MyAccount/PasswordResetForm.vue    |  10 +-
 components/MyAccount/ProfileUpdateForm.vue    |   8 +-
 components/ProductAddReviewForm.vue           |  22 +-
 components/Products/BundleProductSelector.vue |  27 +-
 .../Products/GroupedProductSelector.vue       |  15 +-
 components/ProductsCarousel.vue               |  47 +-
 components/SearchResults.vue                  |  89 +++-
 components/StoreSwitcher.vue                  |   8 +-
 components/WishlistSidebar.vue                |  31 +-
 components/__tests__/LoginModal.spec.js       | 214 ++++++++++
 .../__tests__/ProductAddReviewForm.spec.js    | 133 ++++++
 composables/index.ts                          |   1 +
 .../useImage/__tests__/useImage.spec.js       |  47 ++
 composables/useImage/index.ts                 |  33 ++
 composables/useMagentoConfiguration.ts        |  39 +-
 composables/useUiNotification/index.ts        |   3 +-
 config.js                                     |  62 +++
 config/example.json                           |  13 +-
 enums/imageEnums.js                           |  14 +
 helpers/__tests__/asyncLocalStorage.spec.js   |  70 +++
 helpers/__tests__/formatCurrency.spec.js      |  16 +
 helpers/asyncLocalStorage.ts                  |  42 ++
 helpers/checkout/__tests__/steps.spec.js      |  26 ++
 helpers/checkout/steps.ts                     |   6 +
 helpers/formatCurrency.ts                     |  11 +
 lang/de.js                                    | 392 ++++++++++-------
 lang/en.js                                    | 404 ++++++++++--------
 layouts/default.vue                           |  39 +-
 middleware.config.js                          |   9 +
 nuxt.config.js                                |  57 ++-
 package.json                                  |   7 +-
 pages/Category.vue                            | 122 +++++-
 pages/Checkout.vue                            |  60 ++-
 pages/Checkout/Billing.vue                    |  73 +++-
 pages/Checkout/Payment.vue                    |  43 +-
 pages/Checkout/Shipping.vue                   |  21 +-
 pages/Checkout/UserAccount.vue                |  44 +-
 pages/Checkout/__tests__/Shipping.spec.js     |  44 ++
 pages/Checkout/__tests__/UserAccount.spec.js  | 157 ++++++-
 pages/Home.vue                                |  55 ++-
 pages/MyAccount.vue                           |  33 +-
 pages/MyAccount/AddressesDetails.vue          |  11 +-
 pages/MyAccount/MyNewsletter.vue              |   4 +-
 pages/MyAccount/MyProfile.vue                 |  23 +-
 pages/MyAccount/MyReviews.vue                 |  21 +-
 pages/MyAccount/MyWishlist.vue                |  93 +++-
 pages/MyAccount/OrderHistory.vue              |  27 +-
 pages/Page.vue                                |   6 +-
 pages/Product.vue                             |  19 +-
 pages/ResetPassword.vue                       |  40 +-
 pages/__tests__/ResetPassword.spec.js         |  71 +++
 plugins/__tests__/fcPlugin.spec.js            |  10 +
 plugins/__tests__/i18n.spec.js                |  20 +-
 plugins/__tests__/token-expired.spec.js       |  40 +-
 plugins/fcPlugin.ts                           |  20 +
 plugins/i18n.ts                               |  33 +-
 plugins/token-expired.js                      |  27 --
 plugins/token-expired.ts                      |  44 ++
 serverMiddleware/body-parser.js               |   5 +
 test-utils.js                                 |  20 +-
 test-utils/mocks/index.js                     |  10 +-
 test-utils/mocks/useBilling.js                |  16 +
 test-utils/mocks/useCountrySearch.js          |   5 +
 test-utils/mocks/useForgotPassword.js         |  11 +
 test-utils/mocks/useReview.js                 |  26 ++
 test-utils/mocks/useShipping.js               |   5 +
 test-utils/mocks/useUser.js                   |  18 +-
 test-utils/mocks/useUserBilling.js            |  14 +
 tsconfig.json                                 |   3 +-
 80 files changed, 2667 insertions(+), 822 deletions(-)
 create mode 100644 components/__tests__/LoginModal.spec.js
 create mode 100644 components/__tests__/ProductAddReviewForm.spec.js
 create mode 100644 composables/useImage/__tests__/useImage.spec.js
 create mode 100644 composables/useImage/index.ts
 create mode 100644 enums/imageEnums.js
 create mode 100644 helpers/__tests__/asyncLocalStorage.spec.js
 create mode 100644 helpers/__tests__/formatCurrency.spec.js
 create mode 100644 helpers/asyncLocalStorage.ts
 create mode 100644 helpers/checkout/__tests__/steps.spec.js
 create mode 100644 helpers/checkout/steps.ts
 create mode 100644 helpers/formatCurrency.ts
 create mode 100644 pages/Checkout/__tests__/Shipping.spec.js
 create mode 100644 pages/__tests__/ResetPassword.spec.js
 create mode 100644 plugins/__tests__/fcPlugin.spec.js
 create mode 100644 plugins/fcPlugin.ts
 delete mode 100644 plugins/token-expired.js
 create mode 100644 plugins/token-expired.ts
 create mode 100644 serverMiddleware/body-parser.js
 create mode 100644 test-utils/mocks/useBilling.js
 create mode 100644 test-utils/mocks/useCountrySearch.js
 create mode 100644 test-utils/mocks/useForgotPassword.js
 create mode 100644 test-utils/mocks/useReview.js
 create mode 100644 test-utils/mocks/useShipping.js
 create mode 100644 test-utils/mocks/useUserBilling.js

diff --git a/.env.example b/.env.example
index 9663e1d..5ef8ad1 100644
--- a/.env.example
+++ b/.env.example
@@ -6,3 +6,22 @@ MAGENTO_GRAPHQL=https://{YOUR_SITE_FRONT_URL}/graphql
 MAGENTO_EXTERNAL_CHECKOUT=false
 MAGENTO_EXTERNAL_CHECKOUT_URL=https://{YOUR_SITE_FRONT_URL}
 MAGENTO_EXTERNAL_CHECKOUT_SYNC_PATH=/vue/cart/sync
+MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL}
+IMAGE_PROVIDER={YOUR_IMAGE_PROVIDER}
+IMAGE_PROVIDER_BASE_URL={YOUR_IMAGE_PROVIDER_BASE_URL}
+MAGENTO_BASE_URL={YOUR_SITE_FRONT_URL}
+IMAGE_PROVIDER={YOUR_IMAGE_PROVIDER}
+IMAGE_PROVIDER_BASE_URL={YOUR_IMAGE_PROVIDER_BASE_URL}
+REDIS__HOST=127.0.0.1
+REDIS__PORT=6379
+REDIS_PASSWORD=
+REDIS__KEY_PREFIX=
+REDIS__CACHE_INVALIDATE_URL=/cache-invalidate
+REDIS__ENABLED=false
+RECAPTCHA_ENABLED=true
+RECAPTCHA_HIDE_BADGE=false
+RECAPTCHA_VERSION=3
+RECAPTCHA_SITE_KEY=
+RECAPTCHA_SECRET_KEY=
+RECAPTCHA_SIZE=invisible
+RECAPTCHA_MIN_SCORE=0.5
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index fa12218..ed46990 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -10,10 +10,12 @@
           :to="localePath('/')"
           class="sf-header__logo"
         >
-          <SfImage
+          <nuxt-img
             src="/icons/logo.svg"
             alt="Vue Storefront Next"
             class="sf-header__logo-image"
+            width="35"
+            height="34"
           />
         </nuxt-link>
       </template>
@@ -155,7 +157,6 @@
 <script>
 import {
   SfHeader,
-  SfImage,
   SfIcon,
   SfButton,
   SfBadge,
@@ -197,7 +198,6 @@ import SearchResults from '~/components/SearchResults.vue';
 export default defineComponent({
   components: {
     SfHeader,
-    SfImage,
     StoreSwitcher,
     SfIcon,
     SfButton,
@@ -213,7 +213,7 @@ export default defineComponent({
     const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();
     const { setTermForUrl, getFacetsFromURL, getAgnosticCatLink } = useUiHelpers();
     const { isAuthenticated, load: loadUser } = useUser();
-    const { cart, load: loadCart } = useCart();
+    const { cart } = useCart();
     const { wishlist } = useWishlist('GlobalWishlist');
     const {
       result: searchResult,
@@ -257,7 +257,6 @@ export default defineComponent({
     onSSR(async () => {
       await Promise.all([
         loadUser(),
-        loadCart(),
         categoriesListSearch({
           pageSize: 20,
         }),
diff --git a/components/BottomNavigation.vue b/components/BottomNavigation.vue
index 3c837e9..00cdad5 100644
--- a/components/BottomNavigation.vue
+++ b/components/BottomNavigation.vue
@@ -1,15 +1,13 @@
 <template>
   <!-- TODO: create logic with isActive prop for BottomNavigationItems -->
   <SfBottomNavigation class="navigation-bottom smartphone-only">
-    <nuxt-link to="localePath('/')">
-      <SfBottomNavigationItem
-        :class="$route.path == '/' ? 'sf-bottom-navigation__item--active' : ''"
-        icon="home"
-        size="20px"
-        label="Home"
-        @click="isMobileMenuOpen ? toggleMobileMenu() : false"
-      />
-    </nuxt-link>
+    <SfBottomNavigationItem
+      :class="$route.path == '/' ? 'sf-bottom-navigation__item--active' : ''"
+      icon="home"
+      size="20px"
+      label="Home"
+      @click="$router.push(app.localePath('/')) && (isMobileMenuOpen ? toggleMobileMenu() : false)"
+    />
     <SfBottomNavigationItem
       icon="menu"
       size="20px"
@@ -86,6 +84,7 @@ export default defineComponent({
       toggleCartSidebar,
       toggleMobileMenu,
       handleAccountClick,
+      app,
     };
   },
 });
diff --git a/components/CartSidebar.vue b/components/CartSidebar.vue
index 8f855e8..8c28dbe 100644
--- a/components/CartSidebar.vue
+++ b/components/CartSidebar.vue
@@ -97,12 +97,12 @@
                 :image="cartGetters.getItemImage(product)"
                 :title="cartGetters.getItemName(product)"
                 :regular-price="
-                  $n(cartGetters.getItemPrice(product).regular, 'currency')
+                  $fc(cartGetters.getItemPrice(product).regular)
                 "
                 :special-price="
                   cartGetters.productHasSpecialPrice(product)
                     ? getItemPrice(product).special &&
-                      $n(cartGetters.getItemPrice(product).special, 'currency')
+                      $fc(cartGetters.getItemPrice(product).special)
                     : ''
                 "
                 :link="
@@ -113,7 +113,7 @@
                   )
                 "
                 class="collected-product"
-                @input="updateItemQty({ product, quantity: $event })"
+                @input="delayedUpdateItemQty({ product, quantity: $event })"
                 @click:remove="sendToRemove({ product })"
               >
                 <template #input>
@@ -125,7 +125,7 @@
                       :disabled="loading"
                       :qty="cartGetters.getItemQty(product)"
                       class="sf-collected-product__quantity-selector"
-                      @input="updateItemQty({ product, quantity: $event })"
+                      @input="delayedUpdateItemQty({ product, quantity: $event })"
                     />
                   </div>
                   <SfBadge
@@ -166,10 +166,12 @@
           class="empty-cart"
         >
           <div class="empty-cart__banner">
-            <SfImage
+            <nuxt-img
               alt="Empty bag"
               class="empty-cart__image"
               src="/icons/empty-cart.svg"
+              width="211"
+              height="143"
             />
             <SfHeading
               title="Your cart is empty"
@@ -196,11 +198,11 @@
             >
               <template #value>
                 <SfPrice
-                  :regular="$n(totals.subtotal, 'currency')"
+                  :regular="$fc(totals.subtotal)"
                   :special="
                     totals.subtotal <= totals.special
                       ? ''
-                      : $n(totals.special, 'currency')
+                      : $fc(totals.special)
                   "
                 />
               </template>
@@ -240,7 +242,6 @@ import {
   SfProperty,
   SfPrice,
   SfCollectedProduct,
-  SfImage,
   SfQuantitySelector,
   SfBadge,
 } from '@storefront-ui/vue';
@@ -257,9 +258,10 @@ import {
   cartGetters,
   useExternalCheckout,
 } from '@vue-storefront/magento';
+import _debounce from 'lodash.debounce';
 import { useUiState, useUiNotification } from '~/composables';
-import CouponCode from './CouponCode.vue';
 import stockStatusEnum from '~/enums/stockStatusEnum';
+import CouponCode from './CouponCode.vue';
 
 export default defineComponent({
   name: 'CartSidebar',
@@ -272,7 +274,6 @@ export default defineComponent({
     SfProperty,
     SfPrice,
     SfCollectedProduct,
-    SfImage,
     SfQuantitySelector,
     SfBadge,
     CouponCode,
@@ -292,7 +293,10 @@ export default defineComponent({
     const { isAuthenticated } = useUser();
     const { send: sendNotification, notifications } = useUiNotification();
 
-    const products = computed(() => cartGetters.getItems(cart.value).filter(Boolean));
+    const products = computed(() => cartGetters
+      .getItems(cart.value)
+      .filter(Boolean)
+      .map((item) => ({ ...item, product: { ...item.product, ...item.configured_variant } })));
     const totals = computed(() => cartGetters.getTotals(cart.value));
     const totalItems = computed(() => cartGetters.getTotalItems(cart.value));
     const getAttributes = (product) => product.configurable_options || [];
@@ -339,7 +343,7 @@ export default defineComponent({
         title: 'Product removed',
       });
     };
-
+    const delayedUpdateItemQty = _debounce((params) => updateItemQty(params), 1000);
     const isInStock = (product) => cartGetters.getStockStatus(product) === stockStatusEnum.inStock;
 
     return {
@@ -349,7 +353,7 @@ export default defineComponent({
       isAuthenticated,
       products,
       removeItem,
-      updateItemQty,
+      delayedUpdateItemQty,
       isCartSidebarOpen,
       notifications,
       visible,
diff --git a/components/Checkout/CartPreview.vue b/components/Checkout/CartPreview.vue
index f1a37f3..7dc34de 100644
--- a/components/Checkout/CartPreview.vue
+++ b/components/Checkout/CartPreview.vue
@@ -15,24 +15,25 @@
       />
       <SfProperty
         :name="$t('Subtotal')"
-        :value="$n(totals.subtotal, 'currency')"
+        :value="$fc(totals.subtotal)"
         :class="['sf-property--full-width', 'sf-property--large property']"
       />
       <SfProperty
         v-if="hasDiscounts"
         :name="$t('Discount')"
-        :value="$n(discountsAmount, 'currency')"
+        :value="$fc(discountsAmount)"
         class="sf-property--full-width sf-property--small property"
       />
       <SfProperty
         v-if="selectedShippingMethod"
         :name="$t('Shipping')"
-        :value="$n(getShippingMethodPrice(selectedShippingMethod), 'currency')"
+        :value="$fc(getShippingMethodPrice(selectedShippingMethod))"
         class="sf-property--full-width sf-property--large property"
       />
+
       <SfProperty
         :name="$t('Total')"
-        :value="$n(totals.total, 'currency')"
+        :value="$fc(totals.total)"
         class="sf-property--full-width sf-property--large property-total"
       />
     </div>
diff --git a/components/Checkout/VsfShippingProvider.vue b/components/Checkout/VsfShippingProvider.vue
index 39da576..e1295d2 100644
--- a/components/Checkout/VsfShippingProvider.vue
+++ b/components/Checkout/VsfShippingProvider.vue
@@ -49,7 +49,7 @@
             <div class="sf-radio__label shipping__label">
               <div>{{ method.carrier_title }}</div>
               <div v-if="method && (method.amount || method.price_incl_tax)">
-                {{ $n(getShippingMethodPrice(method), 'currency') }}
+                {{ $fc(getShippingMethodPrice(method)) }}
               </div>
             </div>
           </template>
@@ -108,10 +108,11 @@ export default defineComponent({
       result: shippingMethods,
       loading: loadingShippingMethods,
       error: errorUseGetShippingMethods,
-    } = useGetShippingMethods('VsfShippingProvider');
+    } = useGetShippingMethods();
     const { cart } = useCart();
     const {
       state,
+      save: saveShippingProvider,
       error: errorShippingProvider,
       loading: loadingShippingProvider,
       setState,
@@ -129,9 +130,14 @@ export default defineComponent({
      * Instead, specify the pickup_location_code attribute in the setShippingAddressesOnCart mutation.
      */
     const selectShippingMethod = async (method) => {
-      await setState({
+      const shippingData = {
         carrier_code: method.carrier_code,
         method_code: method.method_code,
+      };
+
+      setState(shippingData);
+      await saveShippingProvider({
+        shippingMethod: shippingData,
       });
     };
 
diff --git a/components/CurrencySelector.vue b/components/CurrencySelector.vue
index 46f4f77..e834cd7 100644
--- a/components/CurrencySelector.vue
+++ b/components/CurrencySelector.vue
@@ -104,7 +104,7 @@ export default defineComponent({
 
     const isCurrencyModalOpen = ref(false);
 
-    const availableCurrencies = computed(() => currencies.value?.available_currency_codes);
+    const availableCurrencies = computed(() => currencies.value?.available_currency_codes || []);
 
     return {
       currentCurrencySymbol,
diff --git a/components/InstagramFeed.vue b/components/InstagramFeed.vue
index e2b1caf..c41f3f7 100644
--- a/components/InstagramFeed.vue
+++ b/components/InstagramFeed.vue
@@ -1,92 +1,76 @@
 <template>
   <SfSection
-    title-heading="Share Your Look"
+    :title-heading="$t('Share Your Look')"
     subtitle-heading="#YOURLOOK"
     class="title"
   >
     <div class="grid grid-images">
       <div class="grid__row">
         <div class="grid__col">
-          <SfImage
+          <nuxt-img
             v-if="isMobile"
             src="/homepage/imageAm.webp"
             alt="katherina_trn"
             :width="160"
             :height="160"
-          >
-            katherina_trn
-          </SfImage>
-          <SfImage
+          />
+          <nuxt-img
             v-else
             src="/homepage/imageAd.webp"
             alt="katherina_trn"
             :width="470"
             :height="470"
-          >
-            katherina_trn
-          </SfImage>
+          />
         </div>
         <div class="grid__col small">
-          <SfImage
+          <nuxt-img
             v-if="isMobile"
             src="/homepage/imageBm.webp"
             alt="katherina_trn"
             :width="160"
             :height="160"
-          >
-            katherina_trn
-          </SfImage>
-          <SfImage
+          />
+          <nuxt-img
             v-else
             src="/homepage/imageCd.webp"
             alt="katherina_trn"
             :width="470"
             :height="160"
-          >
-            katherina_trn
-          </SfImage>
+          />
         </div>
       </div>
       <div class="grid__row">
         <div class="grid__col small">
-          <SfImage
+          <nuxt-img
             v-if="isMobile"
             src="/homepage/imageCm.webp"
             alt="katherina_trn"
             :width="160"
             :height="160"
-          >
-            katherina_trn
-          </SfImage>
-          <SfImage
+          />
+          <nuxt-img
             v-else
             src="/homepage/imageBd.webp"
             alt="katherina_trn"
             :width="470"
             :height="160"
-          >
-            katherina_trn
-          </SfImage>
+          />
         </div>
         <div class="grid__col">
-          <SfImage
+          <nuxt-img
             v-if="isMobile"
             src="/homepage/imageDm.webp"
             alt="katherina_trn"
             :width="160"
             :height="160"
-          >
-            katherina_trn
-          </SfImage>
-          <SfImage
+          />
+          <nuxt-img
             v-else
             src="/homepage/imageDd.webp"
             alt="katherina_trn"
             :width="470"
             :height="470"
-          >
-            katherina_trn
-          </SfImage>
+          />
         </div>
       </div>
     </div>
@@ -95,7 +79,6 @@
 <script>
 import {
   SfSection,
-  SfImage,
 } from '@storefront-ui/vue';
 import {
   mapMobileObserver,
@@ -107,7 +90,6 @@ export default defineComponent({
   name: 'InstagramFeed',
   components: {
     SfSection,
-    SfImage,
   },
   computed: {
     ...mapMobileObserver(),
diff --git a/components/LoginModal.vue b/components/LoginModal.vue
index 512ad4a..a21baaf 100644
--- a/components/LoginModal.vue
+++ b/components/LoginModal.vue
@@ -34,9 +34,9 @@
                 v-model="form.username"
                 v-e2e="'login-modal-email'"
                 :valid="!errors[0]"
-                :error-message="errors[0]"
+                :error-message="$t(errors[0])"
                 name="email"
-                label="Your email"
+                :label="$t('Your email')"
                 class="form__element"
               />
             </ValidationProvider>
@@ -48,16 +48,17 @@
                 v-model="form.password"
                 v-e2e="'login-modal-password'"
                 :valid="!errors[0]"
-                :error-message="errors[0]"
+                :error-message="$t(errors[0])"
                 name="password"
-                label="Password"
+                :label="$t('Password')"
                 type="password"
                 has-show-password
                 class="form__element"
               />
             </ValidationProvider>
+            <recaptcha v-if="isRecaptchaEnabled" />
             <div v-if="error.login">
-              {{ error.login }}
+              {{ $t(error.login) }}
             </div>
             <SfButton
               v-e2e="'login-modal-submit'"
@@ -112,12 +113,13 @@
                 v-model="form.username"
                 v-e2e="'forgot-modal-email'"
                 :valid="!errors[0]"
-                :error-message="errors[0]"
+                :error-message="$t(errors[0])"
                 name="email"
                 :label="$t('Forgot Password Modal Email')"
                 class="form__element"
               />
             </ValidationProvider>
+            <recaptcha v-if="isRecaptchaEnabled" />
             <div v-if="forgotPasswordError.request">
               {{ $t('It was not possible to request a new password, please check the entered email address.') }}
             </div>
@@ -173,9 +175,9 @@
                 v-model="form.email"
                 v-e2e="'login-modal-email'"
                 :valid="!errors[0]"
-                :error-message="errors[0]"
+                :error-message="$t(errors[0])"
                 name="email"
-                label="Your email"
+                :label="$t('Your email')"
                 class="form__element"
               />
             </ValidationProvider>
@@ -187,9 +189,9 @@
                 v-model="form.firstName"
                 v-e2e="'login-modal-firstName'"
                 :valid="!errors[0]"
-                :error-message="errors[0]"
+                :error-message="$t(errors[0])"
                 name="first-name"
-                label="First Name"
+                :label="$t('First Name')"
                 class="form__element"
               />
             </ValidationProvider>
@@ -201,9 +203,9 @@
                 v-model="form.lastName"
                 v-e2e="'login-modal-lastName'"
                 :valid="!errors[0]"
-                :error-message="errors[0]"
+                :error-message="$t(errors[0])"
                 name="last-name"
-                label="Last Name"
+                :label="$t('Last Name')"
                 class="form__element"
               />
             </ValidationProvider>
@@ -215,9 +217,9 @@
                 v-model="form.password"
                 v-e2e="'login-modal-password'"
                 :valid="!errors[0]"
-                :error-message="errors[0]"
+                :error-message="$t(errors[0])"
                 name="password"
-                label="Password"
+                :label="$t('Password')"
                 type="password"
                 has-show-password
                 class="form__element"
@@ -226,7 +228,7 @@
             <SfCheckbox
               v-model="isSubscribed"
               v-e2e="'sign-up-newsletter'"
-              label="Sign Up for Newsletter"
+              :label="$t('Sign Up for Newsletter')"
               name="signupNewsletter"
               class="form__element"
             />
@@ -238,14 +240,15 @@
                 v-model="createAccount"
                 v-e2e="'login-modal-create-account'"
                 :valid="!errors[0]"
-                :error-message="errors[0]"
+                :error-message="$t(errors[0])"
                 name="create-account"
-                label="I want to create an account"
+                :label="$t('I want to create an account')"
                 class="form__element"
               />
             </ValidationProvider>
+            <recaptcha v-if="isRecaptchaEnabled" />
             <div v-if="error.register">
-              {{ error.register }}
+              {{ $t(error.register) }}
             </div>
             <SfButton
               v-e2e="'login-modal-submit'"
@@ -283,6 +286,7 @@ import {
   reactive,
   defineComponent,
   computed,
+  useContext,
 } from '@nuxtjs/composition-api';
 import {
   SfModal,
@@ -294,7 +298,7 @@ import {
 } from '@storefront-ui/vue';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { required, email } from 'vee-validate/dist/rules';
-import { useUser, useForgotPassword } from '@vue-storefront/magento';
+import { useUser, useForgotPassword, useWishlist } from '@vue-storefront/magento';
 import { useUiState } from '~/composables';
 import { customerPasswordRegExp, invalidPasswordMsg } from '~/helpers/customer/regex';
 
@@ -335,12 +339,16 @@ export default defineComponent({
     const isForgotten = ref(false);
     const isThankYouAfterForgotten = ref(false);
     const userEmail = ref('');
+    const { $recaptcha, $config } = useContext();
+    const isRecaptchaEnabled = ref(typeof $recaptcha !== 'undefined' && $config.isRecaptcha);
+
     const {
       register,
       login,
       loading,
       error: userError,
     } = useUser();
+    const { load: loadWishlist } = useWishlist('GlobalWishlist');
     const { request, error: forgotPasswordError, loading: forgotPasswordLoading } = useForgotPassword();
 
     const barTitle = computed(() => {
@@ -388,12 +396,30 @@ export default defineComponent({
 
     const handleForm = (fn) => async () => {
       resetErrorValues();
-      await fn({
-        user: {
-          ...form.value,
-          is_subscribed: isSubscribed.value,
-        },
-      });
+
+      if (isRecaptchaEnabled.value) {
+        $recaptcha.init();
+      }
+
+      if (isRecaptchaEnabled.value) {
+        const recaptchaToken = await $recaptcha.getResponse();
+        form.value.recaptchaInstance = $recaptcha;
+
+        await fn({
+          user: {
+            ...form.value,
+            is_subscribed: isSubscribed.value,
+            recaptchaToken,
+          },
+        });
+      } else {
+        await fn({
+          user: {
+            ...form.value,
+            is_subscribed: isSubscribed.value,
+          },
+        });
+      }
 
       const hasUserErrors = userError.value.register || userError.value.login;
       if (hasUserErrors) {
@@ -402,20 +428,44 @@ export default defineComponent({
         return;
       }
       toggleLoginModal();
+
+      if (isRecaptchaEnabled.value) {
+        // reset recaptcha
+        $recaptcha.reset();
+      }
     };
 
     const handleRegister = async () => handleForm(register)();
 
-    const handleLogin = async () => handleForm(login)();
+    const handleLogin = async () => {
+      await handleForm(login)();
+      await loadWishlist('GlobalWishlist');
+    };
 
     const handleForgotten = async () => {
       userEmail.value = form.value.username;
-      await request({ email: userEmail.value });
+
+      if (isRecaptchaEnabled.value) {
+        $recaptcha.init();
+      }
+
+      if (isRecaptchaEnabled.value) {
+        const recaptchaToken = await $recaptcha.getResponse();
+
+        await request({ email: userEmail.value, recaptchaToken });
+      } else {
+        await request({ email: userEmail.value });
+      }
 
       if (!forgotPasswordError.value.request) {
         isThankYouAfterForgotten.value = true;
         isForgotten.value = false;
       }
+
+      if (isRecaptchaEnabled.value) {
+        // reset recaptcha
+        $recaptcha.reset();
+      }
     };
 
     return {
@@ -440,6 +490,7 @@ export default defineComponent({
       setIsLoginValue,
       userEmail,
       userError,
+      isRecaptchaEnabled,
     };
   },
 });
diff --git a/components/MobileStoreBanner.vue b/components/MobileStoreBanner.vue
index 18144fd..3855849 100644
--- a/components/MobileStoreBanner.vue
+++ b/components/MobileStoreBanner.vue
@@ -1,8 +1,8 @@
 <template>
   <SfBanner
     image="/homepage/bannerD.png"
-    subtitle="Fashon to take away"
-    title="Download our application to your mobile"
+    :subtitle="$t('Fashion to take away')"
+    :title="$t('Download our application to your mobile')"
     class="sf-banner--left desktop-only banner-app"
   >
     <template #call-to-action>
@@ -12,22 +12,22 @@
           aria-label="Go to Apple Product"
           @click="() => {}"
         >
-          <img
+          <nuxt-img
             src="/homepage/apple.png"
             width="174"
             height="57"
-          >
+          />
         </SfButton>
         <SfButton
           class="banner-app__button sf-button--pure"
           aria-label="Go to Google Product"
           @click="() => {}"
         >
-          <img
+          <nuxt-img
             src="/homepage/google.png"
             width="174"
             height="57"
-          >
+          />
         </SfButton>
       </div>
     </template>
diff --git a/components/MyAccount/AddressForm.vue b/components/MyAccount/AddressForm.vue
index c8a9446..eb245fa 100644
--- a/components/MyAccount/AddressForm.vue
+++ b/components/MyAccount/AddressForm.vue
@@ -15,7 +15,7 @@
           <SfInput
             v-model="form.firstname"
             name="firstname"
-            label="First Name"
+            :label="$t('First Name')"
             required
             :valid="!errors[0]"
             :error-message="errors[0]"
@@ -30,7 +30,7 @@
           <SfInput
             v-model="form.lastname"
             name="lastname"
-            label="Last Name"
+            :label="$t('Last Name')"
             required
             :valid="!errors[0]"
             :error-message="errors[0]"
@@ -46,7 +46,7 @@
         <SfInput
           v-model="form.street"
           name="street"
-          label="Street Name"
+          :label="$t('Street Name')"
           required
           :valid="!errors[0]"
           :error-message="errors[0]"
@@ -55,7 +55,7 @@
       <SfInput
         v-model="form.apartment"
         name="apartment"
-        label="House/Apartment number"
+        :label="$t('House/Apartment number')"
         required
         class="form__element"
       />
@@ -68,7 +68,7 @@
           <SfInput
             v-model="form.city"
             name="city"
-            label="City"
+            :label="$t('City')"
             required
             :valid="!errors[0]"
             :error-message="errors[0]"
@@ -84,18 +84,18 @@
             v-if="!form.country_code || regionInformation.length === 0"
             v-model="form.region.region"
             v-e2e="'shipping-state'"
-            label="State/Province"
+            :label="$t('State/Province')"
             :disabled="!form.country_code"
             name="state"
             class="form__element form__element--half form__element--half-even"
             :valid="!!form.country_code"
-            :error-message="!form.country_code ? 'Please select a country first' : ''"
+            :error-message="!form.country_code ? $t('Please select a country first') : ''"
           />
           <SfSelect
             v-else
             v-model="form.region.region_code"
             v-e2e="'shipping-state'"
-            label="State/Province"
+            :label="$t('State/Province')"
             name="state"
             class="form__element form__element--half form__element--half-even form__select sf-select--underlined"
             :valid="!errors[0]"
@@ -121,7 +121,7 @@
           <SfInput
             v-model="form.postcode"
             name="postcode"
-            label="Zip-code"
+            :label="$t('Zip-code')"
             required
             :valid="!errors[0]"
             :error-message="errors[0]"
@@ -135,7 +135,7 @@
         >
           <SfSelect
             v-model="form.country_code"
-            label="Country"
+            :label="$t('Country')"
             name="country"
             class="form__select sf-select--underlined"
             required
@@ -162,7 +162,7 @@
         <SfInput
           v-model="form.telephone"
           name="telephone"
-          label="Phone number"
+          :label="$t('Phone number')"
           required
           :valid="!errors[0]"
           :error-message="errors[0]"
@@ -171,17 +171,17 @@
       <SfCheckbox
         v-model="form.default_shipping"
         name="isDefaultShipping"
-        label="Set as default shipping"
+        :label="$t('Set as default shipping')"
         class="form__checkbox-isDefaultShipping"
       />
       <SfCheckbox
         v-model="form.default_billing"
         name="isDefaultBilling"
-        label="Set as default billing"
+        :label="$t('Set as default billing')"
         class="form__checkbox-isDefaultBilling"
       />
       <SfButton class="form__button">
-        {{ isNew ? "Add the address" : "Update the address" }}
+        {{ isNew ? $t('Add the address') : $t('Update the address') }}
       </SfButton>
     </form>
   </ValidationObserver>
@@ -302,8 +302,9 @@ export default defineComponent({
     const regionInformation = computed(() => addressGetter.regionList(country.value));
 
     const submitForm = () => {
-      if (form.region.region_code) {
-        form.region.region_id = regionInformation.value.find((r) => r.abbreviation === form.region.region_code).id;
+      const regionId = regionInformation.value.find((r) => r.abbreviation === form.region.region_code)?.id;
+      if (regionId) {
+        form.region.region_id = regionId;
       }
 
       emit('submit', {
diff --git a/components/MyAccount/PasswordResetForm.vue b/components/MyAccount/PasswordResetForm.vue
index 986d851..0c47676 100644
--- a/components/MyAccount/PasswordResetForm.vue
+++ b/components/MyAccount/PasswordResetForm.vue
@@ -13,7 +13,7 @@
           v-model="form.currentPassword"
           type="password"
           name="currentPassword"
-          label="Current Password"
+          :label="$t('Current Password')"
           required
           :valid="!errors[0]"
           :error-message="errors[0]"
@@ -30,7 +30,7 @@
             v-model="form.newPassword"
             type="password"
             name="newPassword"
-            label="New Password"
+            :label="$t('New Password')"
             required
             :valid="!errors[0]"
             :error-message="errors[0]"
@@ -45,7 +45,7 @@
             v-model="form.repeatPassword"
             type="password"
             name="repeatPassword"
-            label="Repeat Password"
+            :label="$t('Repeat Password')"
             required
             :valid="!errors[0]"
             :error-message="errors[0]"
@@ -101,10 +101,10 @@ export default defineComponent({
         resetValidationFn();
       };
 
-      const onError = () => {
+      const onError = (msg) => {
         sendNotification({
           id: Symbol('password_not_updated'),
-          message: 'It was not possible to update your password.',
+          message: msg,
           type: 'danger',
           icon: 'cross',
           persist: false,
diff --git a/components/MyAccount/ProfileUpdateForm.vue b/components/MyAccount/ProfileUpdateForm.vue
index 460a68a..fc02adb 100644
--- a/components/MyAccount/ProfileUpdateForm.vue
+++ b/components/MyAccount/ProfileUpdateForm.vue
@@ -13,7 +13,7 @@
           <SfInput
             v-model="form.firstname"
             name="firstName"
-            label="First Name"
+            :label="$t('First Name')"
             required
             :valid="!errors[0]"
             :error-message="errors[0]"
@@ -27,7 +27,7 @@
           <SfInput
             v-model="form.lastname"
             name="lastName"
-            label="Last Name"
+            :label="$t('Last Name')"
             required
             :valid="!errors[0]"
             :error-message="errors[0]"
@@ -43,7 +43,7 @@
           v-model="form.email"
           type="email"
           name="email"
-          label="Your e-mail"
+          :label="$t('Your e-mail')"
           required
           :valid="!errors[0]"
           :error-message="errors[0]"
@@ -61,7 +61,7 @@
           v-model="currentPassword"
           type="password"
           name="currentPassword"
-          label="Current Password"
+          :label="$t('Current Password')"
           required
           class="form__element"
           style="margin-top: 10px"
diff --git a/components/ProductAddReviewForm.vue b/components/ProductAddReviewForm.vue
index 53ef516..fb535b7 100644
--- a/components/ProductAddReviewForm.vue
+++ b/components/ProductAddReviewForm.vue
@@ -97,11 +97,13 @@
               :cols="60"
               :rows="10"
               wrap="soft"
+              required
               :valid="!errors[0]"
               :error-message="errors[0]"
             />
           </ValidationProvider>
         </div>
+        <recaptcha v-if="isRecaptchaEnabled" />
         <SfButton class="form__button">
           Add review
         </SfButton>
@@ -116,6 +118,7 @@ import {
   onBeforeMount,
   computed,
   useRoute,
+  useContext,
 } from '@nuxtjs/composition-api';
 import {
   reviewGetters, useReview, userGetters, useUser,
@@ -165,6 +168,8 @@ export default defineComponent({
   setup(_, { emit }) {
     const route = useRoute();
     const { params: { id } } = route.value;
+    const { $recaptcha, $config } = useContext();
+    const isRecaptchaEnabled = ref(typeof $recaptcha !== 'undefined' && $config.isRecaptcha);
     const {
       loading,
       loadReviewMetadata,
@@ -193,10 +198,11 @@ export default defineComponent({
         ...form.value,
         nickname,
         ratings,
+        recaptchaToken: '',
       };
     });
 
-    const submitForm = (reset) => () => {
+    const submitForm = (reset) => async () => {
       if (!(
         formSubmitValue.value.ratings[0].value_id
         || formSubmitValue.value.ratings[0].id
@@ -206,11 +212,24 @@ export default defineComponent({
         || formSubmitValue.value.text
       )) return;
       try {
+        if (isRecaptchaEnabled.value) {
+          $recaptcha.init();
+        }
+
+        if (isRecaptchaEnabled.value) {
+          const recaptchaToken = await $recaptcha.getResponse();
+          formSubmitValue.value.recaptchaToken = recaptchaToken;
+        }
+
         reviewSent.value = true;
 
         emit('add-review', formSubmitValue.value);
 
         reset();
+
+        if (isRecaptchaEnabled.value) {
+          $recaptcha.reset();
+        }
       } catch {
         reviewSent.value = false;
       }
@@ -229,6 +248,7 @@ export default defineComponent({
       ratingMetadata,
       reviewSent,
       submitForm,
+      isRecaptchaEnabled,
     };
   },
 });
diff --git a/components/Products/BundleProductSelector.vue b/components/Products/BundleProductSelector.vue
index d6f7166..e474116 100644
--- a/components/Products/BundleProductSelector.vue
+++ b/components/Products/BundleProductSelector.vue
@@ -24,11 +24,13 @@
             <template
               v-if="bundle.options.length === 1"
             >
-              {{ productGetters.getName(option.product) }}
-              <SfPrice
-                :regular="$n(productGetters.getPrice(option.product).regular, 'currency')"
-                :special="productGetters.getPrice(option.product).special && $n(productGetters.getPrice(option.product).special, 'currency')"
-              />
+              <div class="bundle_products--options-option__container">
+                <p>{{ productGetters.getName(option.product) }}</p>
+                <SfPrice
+                  :regular="$fc(productGetters.getPrice(option.product).regular)"
+                  :special="productGetters.getPrice(option.product).special && $fc(productGetters.getPrice(option.product).special)"
+                />
+              </div>
             </template>
             <template
               v-else
@@ -43,8 +45,8 @@
               >
                 <template #description>
                   <SfPrice
-                    :regular="$n(productGetters.getPrice(option.product).regular, 'currency')"
-                    :special="productGetters.getPrice(option.product).special && $n(productGetters.getPrice(option.product).special, 'currency')"
+                    :regular="$fc(productGetters.getPrice(option.product).regular)"
+                    :special="productGetters.getPrice(option.product).special && $fc(productGetters.getPrice(option.product).special)"
                   />
                 </template>
               </SfRadio>
@@ -177,9 +179,12 @@ export default defineComponent({
   &--item {
       padding: 0 0 var(--spacer-base) 0 !important;
       border-bottom: 1px solid #e4e4e4 !important;
-
+      .sf-quantity-selector{
+        margin: 0 var(--spacer-sm) !important;
+      }
       p {
         font-weight: 600;
+        padding: 0 var(--spacer-sm);
       }
       &-required{
         &:after{
@@ -192,7 +197,13 @@ export default defineComponent({
     }
 
   &--options{
+
     &-option{
+      &__container {
+       p, .sf-price {
+        padding: 0 var(--spacer-sm) !important;
+       }
+      }
       .sf-price{
         &:before{
           content: '+';
diff --git a/components/Products/GroupedProductSelector.vue b/components/Products/GroupedProductSelector.vue
index f93a42e..e592ed4 100644
--- a/components/Products/GroupedProductSelector.vue
+++ b/components/Products/GroupedProductSelector.vue
@@ -8,16 +8,17 @@
         :key="index"
         class="grouped_items--item"
       >
-        <SfImage
-          :src="productGetters.getProductThumbnailImage(groupedItem.product)"
+        <nuxt-img
+          :src="getMagentoImage(productGetters.getProductThumbnailImage(groupedItem.product))"
           :alt="productGetters.getName(groupedItem.product)"
           :width="60"
+          :height="60"
         />
         <div>
           <p>{{ productGetters.getName(groupedItem.product) }}</p>
           <SfPrice
-            :regular="$n(productGetters.getPrice(groupedItem.product).regular, 'currency')"
-            :special="productGetters.getPrice(groupedItem.product).special && $n(productGetters.getPrice(groupedItem.product).special, 'currency')"
+            :regular="$fc(productGetters.getPrice(groupedItem.product).regular)"
+            :special="productGetters.getPrice(groupedItem.product).special && $fc(productGetters.getPrice(groupedItem.product).special)"
           />
         </div>
         <SfQuantitySelector
@@ -42,19 +43,18 @@ import {
   SfPrice,
   SfButton,
   SfQuantitySelector,
-  SfImage,
 } from '@storefront-ui/vue';
 import { productGetters, useCart } from '@vue-storefront/magento';
 import {
   computed, watch, ref, defineComponent,
 } from '@nuxtjs/composition-api';
 import { productData } from '~/helpers/product/productData';
+import { useImage } from '~/composables';
 
 export default defineComponent({
   name: 'GroupedProductSelector',
   components: {
     SfList,
-    SfImage,
     SfPrice,
     SfButton,
     SfQuantitySelector,
@@ -105,6 +105,8 @@ export default defineComponent({
       deep: true,
     });
 
+    const { getMagentoImage } = useImage();
+
     return {
       addToCart,
       groupedItems,
@@ -112,6 +114,7 @@ export default defineComponent({
       productLoading,
       product,
       productGetters,
+      getMagentoImage,
     };
   },
 });
diff --git a/components/ProductsCarousel.vue b/components/ProductsCarousel.vue
index e03fedf..714dc37 100644
--- a/components/ProductsCarousel.vue
+++ b/components/ProductsCarousel.vue
@@ -19,9 +19,11 @@
         >
           <SfProductCard
             :title="productGetters.getName(product)"
-            :image="productGetters.getProductThumbnailImage(product)"
-            :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
-            :special-price="productGetters.getPrice(product).special && $n(productGetters.getPrice(product).special, 'currency')"
+            :image-width="imageSizes.productCard.width"
+            :image-height="imageSizes.productCard.height"
+            :image="getMagentoImage(productGetters.getProductThumbnailImage(product))"
+            :regular-price="$fc(productGetters.getPrice(product).regular)"
+            :special-price="productGetters.getPrice(product).special && $fc(productGetters.getPrice(product).special)"
             :link="localePath(`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`)"
             :max-rating="5"
             :score-rating="productGetters.getAverageRating(product)"
@@ -32,7 +34,37 @@
             :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
             @click:wishlist="addItemToWishlist(product)"
             @click:add-to-cart="addItemToCart({ product, quantity: 1 })"
-          />
+          >
+            <template #image="imageSlotProps">
+              <SfButton
+                :link="imageSlotProps.link"
+                class="sf-button--pure sf-product-card__link"
+                data-testid="product-link"
+                aria-label="Go To Product"
+                v-on="$listeners"
+              >
+                <template v-if="Array.isArray(imageSlotProps.image)">
+                  <nuxt-img
+                    v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
+                    :key="key"
+                    class="sf-product-card__picture"
+                    :src="picture"
+                    :alt="imageSlotProps.title"
+                    :width="imageSlotProps.imageWidth"
+                    :height="imageSlotProps.imageHeight"
+                  />
+                </template>
+                <nuxt-img
+                  v-else
+                  class="sf-product-card__image lol"
+                  :src="imageSlotProps.image"
+                  :alt="imageSlotProps.title"
+                  :width="imageSlotProps.imageWidth"
+                  :height="imageSlotProps.imageHeight"
+                />
+              </SfButton>
+            </template>
+          </SfProductCard>
         </SfCarouselItem>
       </SfCarousel>
     </SfLoader>
@@ -45,6 +77,7 @@ import {
   SfProductCard,
   SfSection,
   SfLoader,
+  SfButton
 } from '@storefront-ui/vue';
 
 import {
@@ -52,6 +85,7 @@ import {
 } from '@vue-storefront/magento';
 import { computed, defineComponent } from '@nuxtjs/composition-api';
 import { useAddToCart } from '~/helpers/cart/addToCart';
+import { useImage } from '~/composables';
 
 export default defineComponent({
   name: 'ProductsCarousel',
@@ -60,6 +94,7 @@ export default defineComponent({
     SfProductCard,
     SfSection,
     SfLoader,
+    SfButton,
   },
   props: {
     title: {
@@ -96,6 +131,8 @@ export default defineComponent({
       );
     };
 
+    const { getMagentoImage, imageSizes } = useImage();
+
     return {
       addItemToCart,
       addItemToWishlist,
@@ -104,6 +141,8 @@ export default defineComponent({
       isInWishlist,
       mappedProducts,
       productGetters,
+      getMagentoImage,
+      imageSizes,
     };
   },
 });
diff --git a/components/SearchResults.vue b/components/SearchResults.vue
index 22aeeba..037045e 100644
--- a/components/SearchResults.vue
+++ b/components/SearchResults.vue
@@ -69,11 +69,13 @@
                   v-for="(product, index) in products"
                   :key="index"
                   class="result-card"
-                  :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
+                  :regular-price="$fc(productGetters.getPrice(product).regular)"
                   :max-rating="5"
                   :score-rating="productGetters.getAverageRating(product)"
                   :reviews-count="productGetters.getTotalReviews(product)"
-                  :image="productGetters.getProductThumbnailImage(product)"
+                  :image-width="imageSizes.productCard.width"
+                  :image-height="imageSizes.productCard.height"
+                  :image="getMagentoImage(productGetters.getProductThumbnailImage(product))"
                   :alt="productGetters.getName(product)"
                   :title="productGetters.getName(product)"
                   :link="localePath(`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`)"
@@ -81,7 +83,37 @@
                   :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
                   :is-in-wishlist="product.isInWishlist"
                   @click:wishlist="addItemToWishlist(product)"
-                />
+                >
+                  <template #image="imageSlotProps">
+                    <SfButton
+                      :link="imageSlotProps.link"
+                      class="sf-button--pure sf-product-card__link"
+                      data-testid="product-link"
+                      aria-label="Go To Product"
+                      v-on="$listeners"
+                    >
+                      <template v-if="Array.isArray(imageSlotProps.image)">
+                        <nuxt-img
+                          v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
+                          :key="key"
+                          class="sf-product-card__picture"
+                          :src="picture"
+                          :alt="imageSlotProps.title"
+                          :width="imageSlotProps.imageWidth"
+                          :height="imageSlotProps.imageHeight"
+                        />
+                      </template>
+                      <nuxt-img
+                        v-else
+                        class="sf-product-card__image lol"
+                        :src="imageSlotProps.image"
+                        :alt="imageSlotProps.title"
+                        :width="imageSlotProps.imageWidth"
+                        :height="imageSlotProps.imageHeight"
+                      />
+                    </SfButton>
+                  </template>
+                </SfProductCard>
               </div>
             </SfScrollable>
             <div class="results--mobile smartphone-only">
@@ -89,11 +121,13 @@
                 v-for="(product, index) in products"
                 :key="index"
                 class="result-card"
-                :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
+                :regular-price="$fc(productGetters.getPrice(product).regular)"
                 :max-rating="5"
                 :score-rating="productGetters.getAverageRating(product)"
                 :reviews-count="productGetters.getTotalReviews(product)"
-                :image="productGetters.getProductThumbnailImage(product)"
+                :image-width="imageSizes.productCardHorizontal.width"
+                :image-height="imageSizes.productCardHorizontal.height"
+                :image="getMagentoImage(productGetters.getProductThumbnailImage(product))"
                 :alt="productGetters.getName(product)"
                 :title="productGetters.getName(product)"
                 :link="localePath(`/p/${productGetters.getProductSku(product)}${productGetters.getSlug(product, product.categories[0])}`)"
@@ -101,7 +135,37 @@
                 :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
                 :is-in-wishlist="product.isInWishlist"
                 @click:wishlist="addItemToWishlist(product)"
-              />
+              >
+                <template #image="imageSlotProps">
+                  <SfButton
+                    :link="imageSlotProps.link"
+                    class="sf-button--pure sf-product-card__link"
+                    data-testid="product-link"
+                    aria-label="Go To Product"
+                    v-on="$listeners"
+                  >
+                    <template v-if="Array.isArray(imageSlotProps.image)">
+                      <nuxt-img
+                        v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
+                        :key="key"
+                        class="sf-product-card__picture"
+                        :src="picture"
+                        :alt="imageSlotProps.title"
+                        :width="imageSlotProps.imageWidth"
+                        :height="imageSlotProps.imageHeight"
+                      />
+                    </template>
+                    <nuxt-img
+                      v-else
+                      class="sf-product-card__image lol"
+                      :src="imageSlotProps.image"
+                      :alt="imageSlotProps.title"
+                      :width="imageSlotProps.imageWidth"
+                      :height="imageSlotProps.imageHeight"
+                    />
+                  </SfButton>
+                </template>
+              </SfProductCard>
             </div>
           </SfMegaMenuColumn>
           <div class="action-buttons smartphone-only">
@@ -118,11 +182,12 @@
           key="no-results"
           class="before-results"
         >
-          <SfImage
+          <nuxt-img
             src="/error/error.svg"
             class="before-results__picture"
             alt="error"
-            loading="lazy"
+            width="412"
+            height="412"
           />
           <p class="before-results__paragraph">
             {{ $t('You haven’t searched for items yet') }}
@@ -149,7 +214,6 @@ import {
   SfScrollable,
   SfMenuItem,
   SfButton,
-  SfImage,
 } from '@storefront-ui/vue';
 import {
   ref,
@@ -158,7 +222,7 @@ import {
   defineComponent,
 } from '@nuxtjs/composition-api';
 import { productGetters, useUser, useWishlist } from '@vue-storefront/magento';
-import { useUiHelpers } from '~/composables';
+import { useUiHelpers, useImage } from '~/composables';
 
 export default defineComponent({
   name: 'SearchResults',
@@ -169,7 +233,6 @@ export default defineComponent({
     SfScrollable,
     SfMenuItem,
     SfButton,
-    SfImage,
   },
   props: {
     visible: {
@@ -208,6 +271,8 @@ export default defineComponent({
       );
     };
 
+    const { getMagentoImage, imageSizes } = useImage();
+
     return {
       th,
       isSearchOpen,
@@ -217,6 +282,8 @@ export default defineComponent({
       addItemToWishlist,
       isInWishlist,
       isAuthenticated,
+      getMagentoImage,
+      imageSizes
     };
   },
 });
diff --git a/components/StoreSwitcher.vue b/components/StoreSwitcher.vue
index 80fd9e5..53a2a3b 100644
--- a/components/StoreSwitcher.vue
+++ b/components/StoreSwitcher.vue
@@ -9,9 +9,10 @@
           <span>{{ storeConfig.store_name }}</span>
         </template>
         <template #icon>
-          <SfImage
+          <nuxt-img
             :src="`/icons/langs/${storeConfigGetters.getLocale(storeConfig)}.webp`"
             width="20"
+            height="20"
             alt="Flag"
             class="language__flag"
           />
@@ -45,9 +46,10 @@
                 <span>{{ storeConfigGetters.getName(store) }}</span>
               </template>
               <template #icon>
-                <SfImage
+                <nuxt-img
                   :src="`/icons/langs/${storeConfigGetters.getLocale(store)}.webp`"
                   width="20"
+                  height="20"
                   alt="Flag"
                   class="language__flag"
                 />
@@ -68,7 +70,6 @@ import {
   storeGetters,
 } from '@vue-storefront/magento';
 import {
-  SfImage,
   SfButton,
   SfList,
   SfBottomModal,
@@ -84,7 +85,6 @@ import { useHandleChanges } from '~/helpers/magentoConfig/handleChanges';
 export default defineComponent({
   name: 'StoreSwitcher',
   components: {
-    SfImage,
     SfButton,
     SfList,
     SfBottomModal,
diff --git a/components/WishlistSidebar.vue b/components/WishlistSidebar.vue
index f64705e..b7b2f6c 100644
--- a/components/WishlistSidebar.vue
+++ b/components/WishlistSidebar.vue
@@ -45,9 +45,9 @@
               :key="i"
               :image="wishlistGetters.getItemImage(product)"
               :title="wishlistGetters.getItemName(product)"
-              :regular-price="$n(wishlistGetters.getItemPrice(product).regular, 'currency')"
+              :regular-price="$fc(wishlistGetters.getItemPrice(product).regular)"
               :link="localePath(`/p/${wishlistGetters.getItemSku(product)}${productGetters.getSlug(product.product, product.product.categories[0])}`)"
-              :special-price="wishlistGetters.getItemPrice(product).special && $n(wishlistGetters.getItemPrice(product).special, 'currency')"
+              :special-price="wishlistGetters.getItemPrice(product).special && $fc(wishlistGetters.getItemPrice(product).special)"
               :stock="99999"
               class="collected-product"
               @click:remove="removeItem({ product: product.product })"
@@ -61,8 +61,8 @@
                     localePath(`/p/${wishlistGetters.getItemSku(product)}${productGetters.getSlug(product.product, product.product.categories[0])}`)
                   "
                 >
-                  <SfImage
-                    :src="wishlistGetters.getItemImage(product)"
+                  <nuxt-img
+                    :src="getMagentoImage(wishlistGetters.getItemImage(product))"
                     :alt="wishlistGetters.getItemName(product)"
                     :width="140"
                     :height="200"
@@ -107,7 +107,7 @@
                 <span class="my-wishlist__total-price-label">Total price:</span>
               </template>
               <template #value>
-                <SfPrice :regular="$n(totals.subtotal, 'currency')" />
+                <SfPrice :regular="$fc(totals.subtotal)" />
               </template>
             </SfProperty>
           </div>
@@ -118,10 +118,12 @@
           class="empty-wishlist"
         >
           <div class="empty-wishlist__banner">
-            <SfImage
+            <nuxt-img
               src="/icons/empty-cart.svg"
               alt="Empty bag"
               class="empty-wishlist__icon"
+              width="211"
+              height="143"
             />
             <SfHeading
               title="Your bag is empty"
@@ -151,18 +153,16 @@ import {
   SfProperty,
   SfPrice,
   SfCollectedProduct,
-  SfImage,
   SfLink,
 } from '@storefront-ui/vue';
-import { computed, defineComponent } from '@nuxtjs/composition-api';
+import { computed, defineComponent, onMounted } from '@nuxtjs/composition-api';
 import {
   useWishlist,
   useUser,
   wishlistGetters,
   productGetters,
 } from '@vue-storefront/magento';
-import { onSSR } from '@vue-storefront/core';
-import { useUiState } from '~/composables';
+import { useUiState, useImage } from '~/composables';
 
 export default defineComponent({
   name: 'WishlistSidebar',
@@ -174,12 +174,11 @@ export default defineComponent({
     SfProperty,
     SfPrice,
     SfCollectedProduct,
-    SfImage,
     SfLink,
   },
   setup() {
     const { isWishlistSidebarOpen, toggleWishlistSidebar } = useUiState();
-    const { wishlist, removeItem } = useWishlist('GlobalWishlist');
+    const { wishlist, removeItem, load: loadWishlist } = useWishlist('GlobalWishlist');
     const { isAuthenticated } = useUser();
     const products = computed(() => wishlistGetters.getProducts(wishlist.value));
     const totals = computed(() => wishlistGetters.getTotals(wishlist.value));
@@ -188,6 +187,12 @@ export default defineComponent({
     const getAttributes = (product) => product?.product?.configurable_options || [];
     const getBundles = (product) => product?.product?.items?.map((b) => b.title).flat() || [];
 
+    const { getMagentoImage, imageSizes } = useImage();
+
+    onMounted(() => {
+      loadWishlist();
+    });
+
     return {
       getAttributes,
       getBundles,
@@ -201,6 +206,8 @@ export default defineComponent({
       wishlistGetters,
       wishlist,
       productGetters,
+      getMagentoImage,
+      imageSizes,
     };
   },
 });
diff --git a/components/__tests__/LoginModal.spec.js b/components/__tests__/LoginModal.spec.js
new file mode 100644
index 0000000..0734739
--- /dev/null
+++ b/components/__tests__/LoginModal.spec.js
@@ -0,0 +1,214 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import { ref } from '@nuxtjs/composition-api';
+import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/vue';
+import { useUser, useForgotPassword } from '@vue-storefront/magento';
+import { render, useUserMock, useForgotPasswordMock } from '~/test-utils';
+import useUiState from '~/composables/useUiState.ts';
+
+import LoginModal from '../LoginModal';
+
+jest.mock('~/composables/useUiState.ts', () => jest.fn());
+jest.mock('@vue-storefront/magento', () => ({
+  useUser: jest.fn(),
+  useForgotPassword: jest.fn(),
+  useWishlist: jest.fn().mockReturnValue({
+    load: jest.fn(),
+  }),
+}));
+
+describe('<LoginModal/>', () => {
+  it('User can log in', async () => {
+    useUiState.mockReturnValue({
+      isLoginModalOpen: ref(true),
+      toggleLoginModal: jest.fn(),
+    });
+    const loginMock = jest.fn();
+    useForgotPassword.mockReturnValue(useForgotPasswordMock());
+    useUser.mockReturnValue(useUserMock({
+      login: loginMock,
+    }));
+
+    const values = {
+      email: 'james@bond.io',
+      password: 'J@mesBond007!',
+      token: 'recaptcha token',
+    };
+
+    const $recaptchaInstance = {
+      init: jest.fn(),
+      reset: jest.fn(),
+      getResponse: jest.fn().mockResolvedValue(Promise.resolve(values.token)),
+    };
+    const { getByRole, findByLabelText, queryByTestId } = render(LoginModal, {
+      mocks: {
+        $nuxt: {
+          context: {
+            $config: { isRecaptcha: true },
+            $recaptcha: $recaptchaInstance,
+          },
+        },
+      },
+    });
+
+    const recaptchaComponent = queryByTestId('recaptcha');
+    expect(recaptchaComponent).toBeTruthy();
+
+    const emailInput = getByRole('textbox', { name: /your email/i });
+    const passwordInput = await findByLabelText('Password');
+
+    userEvent.type(emailInput, values.email);
+    userEvent.type(passwordInput, values.password);
+
+    const submitButton = getByRole('button', { name: /login/i });
+    userEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(loginMock).toHaveBeenCalledTimes(1);
+      expect(loginMock).toHaveBeenCalledWith({
+        user: {
+          username: values.email,
+          password: values.password,
+          is_subscribed: false,
+          recaptchaInstance: $recaptchaInstance,
+          recaptchaToken: values.token,
+        },
+      });
+    });
+  });
+
+  it('User can register', async () => {
+    const registerMock = jest.fn();
+    useForgotPassword.mockReturnValue(useForgotPasswordMock());
+    useUser.mockReturnValue(useUserMock({
+      register: registerMock,
+    }));
+    useUiState.mockReturnValue({
+      isLoginModalOpen: ref(true),
+      toggleLoginModal: jest.fn(),
+    });
+
+    const values = {
+      email: 'james@bond.io',
+      firstName: 'James',
+      lastName: 'Bond',
+      password: 'J@mesBond007!',
+      token: 'recaptcha token',
+    };
+
+    const $recaptchaInstance = {
+      init: jest.fn(),
+      reset: jest.fn(),
+      getResponse: jest.fn().mockResolvedValue(Promise.resolve(values.token)),
+    };
+    const {
+      getByRole,
+      findByRole,
+      findByLabelText,
+      queryByTestId,
+    } = render(LoginModal, {
+      mocks: {
+        $nuxt: {
+          context: {
+            $config: { isRecaptcha: true },
+            $recaptcha: $recaptchaInstance,
+          },
+        },
+      },
+    });
+
+    const switchToRegisterButton = getByRole('button', { name: /register today/i });
+    userEvent.click(switchToRegisterButton);
+
+    await waitFor(() => findByRole('button', { name: /create an account/i }));
+
+    const recaptchaComponent = queryByTestId('recaptcha');
+    expect(recaptchaComponent).toBeTruthy();
+
+    const emailInput = getByRole('textbox', { name: /your email/i });
+    const firstNameInput = getByRole('textbox', { name: /first name/i });
+    const lastNameInput = getByRole('textbox', { name: /last name/i });
+    const passwordInput = await findByLabelText('Password');
+    const newsletterCheckbox = getByRole('checkbox', { name: /sign up for newsletter/i });
+    const createAccountCheckbox = getByRole('checkbox', { name: /i want to create an account/i });
+
+    userEvent.type(emailInput, values.email);
+    userEvent.type(firstNameInput, values.firstName);
+    userEvent.type(lastNameInput, values.lastName);
+    userEvent.type(passwordInput, values.password);
+    userEvent.click(newsletterCheckbox);
+    userEvent.click(createAccountCheckbox);
+
+    const submitButton = getByRole('button', { name: /create an account/i });
+    userEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(registerMock).toHaveBeenCalledTimes(1);
+      expect(registerMock).toHaveBeenCalledWith({
+        user: {
+          email: values.email,
+          firstName: values.firstName,
+          is_subscribed: true,
+          lastName: values.lastName,
+          password: values.password,
+          recaptchaInstance: $recaptchaInstance,
+          recaptchaToken: values.token,
+        },
+      });
+    });
+  });
+
+  it('User can reset his password', async () => {
+    const requestPasswordMock = jest.fn();
+    useForgotPassword.mockReturnValue(useForgotPasswordMock({
+      request: requestPasswordMock,
+    }));
+    useUser.mockReturnValue(useUserMock());
+    useUiState.mockReturnValue({
+      isLoginModalOpen: ref(true),
+      toggleLoginModal: jest.fn(),
+    });
+
+    const values = {
+      email: 'james@bond.io',
+      token: 'recaptcha token',
+    };
+
+    const { getByRole, findByRole, queryByTestId } = render(LoginModal, {
+      mocks: {
+        $nuxt: {
+          context: {
+            $config: { isRecaptcha: true },
+            $recaptcha: {
+              init: jest.fn(),
+              reset: jest.fn(),
+              getResponse: jest.fn().mockResolvedValue(Promise.resolve(values.token)),
+            },
+          },
+        },
+      },
+    });
+
+    const forgottenPasswordButton = getByRole('button', { name: /forgotten password/i });
+    userEvent.click(forgottenPasswordButton);
+
+    await waitFor(() => findByRole('button', { name: /reset password/i }));
+
+    const recaptchaComponent = queryByTestId('recaptcha');
+    expect(recaptchaComponent).toBeTruthy();
+
+    const emailInput = getByRole('textbox', { name: /email/i });
+    userEvent.type(emailInput, values.email);
+
+    const submitButton = getByRole('button', { name: /reset password/i });
+    userEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(requestPasswordMock).toHaveBeenCalledTimes(1);
+      expect(requestPasswordMock).toHaveBeenCalledWith({
+        email: values.email,
+        recaptchaToken: values.token,
+      });
+    });
+  });
+});
diff --git a/components/__tests__/ProductAddReviewForm.spec.js b/components/__tests__/ProductAddReviewForm.spec.js
new file mode 100644
index 0000000..36891fd
--- /dev/null
+++ b/components/__tests__/ProductAddReviewForm.spec.js
@@ -0,0 +1,133 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import { waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { useRoute } from '@nuxtjs/composition-api';
+import { useUser, useReview } from '@vue-storefront/magento';
+import {
+  render,
+  useUserMock,
+  useReviewMock,
+} from '~/test-utils';
+
+import ProductAddReviewForm from '../ProductAddReviewForm';
+
+jest.mock('@vue-storefront/magento', () => {
+  const originalModule = jest.requireActual('@vue-storefront/magento');
+  return {
+    ...originalModule,
+    useUser: jest.fn(),
+    useReview: jest.fn(),
+  };
+});
+
+jest.mock('@nuxtjs/composition-api', () => {
+  // Require the original module to not be mocked...
+  const originalModule = jest.requireActual('@nuxtjs/composition-api');
+
+  return {
+    ...originalModule,
+    useRoute: jest.fn(),
+  };
+});
+
+describe('<ProductAddReviewForm/>', () => {
+  it('Form fields are rendered and validated', async () => {
+    useUser.mockReturnValue(useUserMock());
+    useReview.mockReturnValue(useReviewMock());
+    useRoute.mockReturnValue({ value: { params: { id: '' } } });
+
+    const { getByRole, findAllByText, queryByTestId } = render(ProductAddReviewForm);
+
+    // Nickname, title and review fields should be rendered and required
+
+    const recaptchaComponent = queryByTestId('recaptcha');
+    expect(recaptchaComponent).toBeNull();
+
+    const nickname = getByRole('textbox', { name: /name/i });
+    expect(nickname).toBeRequired();
+
+    const summary = getByRole('textbox', { name: /title/i });
+    expect(summary).toBeRequired();
+
+    const text = getByRole('textbox', { name: /review/i });
+    expect(text).toBeRequired();
+
+    const submitButton = getByRole('button', { name: /add review/i });
+    userEvent.click(submitButton);
+
+    // should display form errors when field are not filled
+    const errors = await findAllByText('This field is required');
+    expect(errors).toHaveLength(3);
+  });
+
+  it('User can submit a review', async () => {
+    const values = {
+      nickname: 'nickname value',
+      rating: '2',
+      sku: 'sku value',
+      summary: 'summary value',
+      text: 'text value',
+      token: 'token value',
+    };
+
+    useRoute.mockReturnValue({ value: { params: { id: values.sku } } });
+    useUser.mockReturnValue(useUserMock());
+    useReview.mockReturnValue(useReviewMock({
+      metadata: {
+        value: [{
+          id: 'rating',
+          name: 'Product rating',
+          values: [
+            { value_id: '1', value: 'Rating 1' },
+            { value_id: '2', value: 'Rating 2' },
+            { value_id: '3', value: 'Rating 3' },
+          ],
+        }],
+      },
+    }));
+
+    const { getByRole, emitted, queryByTestId } = render(ProductAddReviewForm, {
+      mocks: {
+        $nuxt: {
+          context: {
+            $config: { isRecaptcha: true },
+            $recaptcha: {
+              init: jest.fn(),
+              getResponse: jest.fn().mockResolvedValue(Promise.resolve(values.token)),
+            },
+          },
+        },
+      },
+    });
+
+    const recaptchaComponent = queryByTestId('recaptcha');
+    expect(recaptchaComponent).toBeTruthy();
+
+    const nickname = getByRole('textbox', { name: /name/i });
+    const summary = getByRole('textbox', { name: /title/i });
+    const text = getByRole('textbox', { name: /review/i });
+    const rating = getByRole('combobox', { name: /product rating/i });
+    const submitButton = getByRole('button', { name: /add review/i });
+
+    // fill the form
+    userEvent.type(nickname, values.nickname);
+    userEvent.type(summary, values.summary);
+    userEvent.selectOptions(rating, values.rating);
+    userEvent.type(text, values.text);
+
+    // Submit the form
+    userEvent.click(submitButton);
+
+    await waitFor(() => {
+      expect(emitted()).toHaveProperty('add-review');
+      expect(emitted()['add-review'][0][0]).toEqual({
+        nickname: values.nickname,
+        ratings: [{ id: 'rating', value_id: values.rating }],
+        sku: values.sku,
+        summary: values.summary,
+        text: values.text,
+        recaptchaToken: values.token,
+      });
+    });
+  });
+});
diff --git a/composables/index.ts b/composables/index.ts
index 3a0da61..cd7162b 100644
--- a/composables/index.ts
+++ b/composables/index.ts
@@ -1,3 +1,4 @@
 export { default as useUiHelpers } from './useUiHelpers';
 export { default as useUiNotification } from './useUiNotification';
 export { default as useUiState } from './useUiState';
+export { default as useImage } from './useImage';
diff --git a/composables/useImage/__tests__/useImage.spec.js b/composables/useImage/__tests__/useImage.spec.js
new file mode 100644
index 0000000..ad29f2b
--- /dev/null
+++ b/composables/useImage/__tests__/useImage.spec.js
@@ -0,0 +1,47 @@
+import { useContext } from '@nuxtjs/composition-api';
+import useImage from '../index';
+
+jest.mock('@nuxtjs/composition-api', () => {
+  return {
+    useContext: jest.fn(),
+  };
+});
+
+describe('useImage composable', () => {
+  const testURL = 'https://mymagento.dev/media/image.png';
+
+  it('return given URL without modifications if custom image provider is not set', () => {
+    useContext.mockReturnValue({
+      $vsf: {
+        $magento: {
+          config: {
+            imageProvider: 'ipx',
+          },
+        },
+      },
+    });
+
+    const { getMagentoImage } = useImage();
+    const image = getMagentoImage(testURL);
+
+    expect(image).toEqual(image);
+  });
+
+  it('return modified URL when custom image provider is set', () => {
+    useContext.mockReturnValue({
+      $vsf: {
+        $magento: {
+          config: {
+            imageProvider: 'cloudinary',
+            magentoBaseUrl: 'https://mymagento.dev/'
+          },
+        },
+      },
+    });
+
+    const { getMagentoImage } = useImage();
+    const image = getMagentoImage(testURL);
+
+    expect(image).toEqual('media/image.png');
+  });
+});
diff --git a/composables/useImage/index.ts b/composables/useImage/index.ts
new file mode 100644
index 0000000..4562477
--- /dev/null
+++ b/composables/useImage/index.ts
@@ -0,0 +1,33 @@
+import { useContext } from '@nuxtjs/composition-api';
+import imageSizes from '~/enums/imageEnums';
+
+const useImage = () => {
+  // @ts-ignore
+  const { $vsf } = useContext();
+  /**
+   * Extract image path from Magento URL.
+   *
+   * @param fullImageUrl {string}
+   *
+   * @return {string}
+   */
+  const getMagentoImage = (fullImageUrl: string) => {
+    const { imageProvider, magentoBaseUrl } = $vsf.$magento.config;
+
+    if (imageProvider !== 'ipx') {
+      const url = fullImageUrl.split(`${magentoBaseUrl}`);
+
+      const regex = /cache\/(.*?)\//gm;
+      return url[1].replace(regex, '');
+    }
+
+    return fullImageUrl;
+  };
+
+  return {
+    getMagentoImage,
+    imageSizes,
+  };
+};
+
+export default useImage;
diff --git a/composables/useMagentoConfiguration.ts b/composables/useMagentoConfiguration.ts
index c9346f6..bbda83f 100644
--- a/composables/useMagentoConfiguration.ts
+++ b/composables/useMagentoConfiguration.ts
@@ -44,7 +44,7 @@ export const useMagentoConfiguration: UseMagentoConfiguration = () => {
 
   const selectedStore = computed<string | undefined>(() => app.$cookies.get(cookieNames.storeCookieName));
 
-  const loadConfiguration: (params: { updateCookies: boolean; updateLocale: boolean; }) => Promise<void> = async (params = {
+  const loadConfiguration: (params: { updateCookies: boolean; updateLocale: boolean; }) => void = (params = {
     updateCookies: false,
     updateLocale: false,
   }) => {
@@ -52,27 +52,30 @@ export const useMagentoConfiguration: UseMagentoConfiguration = () => {
       updateCookies,
       updateLocale,
     } = params;
-    await Promise.all([
-      loadConfig(),
-      loadStores(),
-      loadCurrencies(),
-    ]);
 
-    if (!app.$cookies.get(cookieNames.storeCookieName) || updateCookies) {
-      app.$cookies.set(cookieNames.storeCookieName, storeConfigGetters.getCode(storeConfig.value));
-    }
+    // eslint-disable-next-line promise/catch-or-return
+    loadConfig().then(() => {
+      if (!app.$cookies.get(cookieNames.storeCookieName) || updateCookies) {
+        app.$cookies.set(cookieNames.storeCookieName, storeConfigGetters.getCode(storeConfig.value));
+      }
 
-    if (!app.$cookies.get(cookieNames.localeCookieName) || updateCookies) {
-      app.$cookies.set(cookieNames.localeCookieName, storeConfigGetters.getLocale(storeConfig.value));
-    }
+      if (!app.$cookies.get(cookieNames.localeCookieName) || updateCookies) {
+        app.$cookies.set(cookieNames.localeCookieName, storeConfigGetters.getCode(storeConfig.value));
+      }
 
-    if (!app.$cookies.get(cookieNames.currencyCookieName) || updateCookies) {
-      app.$cookies.set(cookieNames.currencyCookieName, storeConfigGetters.getCurrency(storeConfig.value));
-    }
+      if (!app.$cookies.get(cookieNames.currencyCookieName) || updateCookies) {
+        app.$cookies.set(cookieNames.currencyCookieName, storeConfigGetters.getCurrency(storeConfig.value));
+      }
 
-    if (updateLocale) {
-      app.i18n.setLocale(storeConfigGetters.getLocale(storeConfig.value));
-    }
+      if (updateLocale) {
+        app.i18n.setLocale(storeConfigGetters.getLocale(storeConfig.value));
+      }
+
+      return true;
+    });
+
+    loadStores();
+    loadCurrencies();
   };
 
   return {
diff --git a/composables/useUiNotification/index.ts b/composables/useUiNotification/index.ts
index eab0583..620b9d1 100644
--- a/composables/useUiNotification/index.ts
+++ b/composables/useUiNotification/index.ts
@@ -1,4 +1,4 @@
-import { computed, reactive, useContext} from '@nuxtjs/composition-api';
+import { computed, reactive, useContext } from '@nuxtjs/composition-api';
 import cookieNames from '~/enums/cookieNameEnum';
 
 interface UiNotification {
@@ -56,7 +56,6 @@ const useUiNotification = () => {
     }
   };
 
-
   if (cookieMessage) {
     send(cookieMessage);
   }
diff --git a/config.js b/config.js
index a6ce772..905daed 100644
--- a/config.js
+++ b/config.js
@@ -55,6 +55,68 @@ const config = convict({
     default: process.env.NUXT_APP_PORT || 3000,
     env: 'NUXT_APP_PORT',
   },
+  magentoBaseUrl: {
+    doc: 'Magento base url',
+    format: String,
+    default: process.env.MAGENTO_BASE_URL || 'https://magento2-instance.vuestorefront.io/',
+    env: 'MAGENTO_BASE_URL',
+  },
+  imageProvider: {
+    doc: 'Image provider',
+    format: String,
+    default: process.env.IMAGE_PROVIDER || 'ipx',
+    env: 'IMAGE_PROVIDER',
+  },
+  imageProviderBaseUrl: {
+    doc: 'Image provider base URL',
+    format: String,
+    default: process.env.IMAGE_PROVIDER_BASE_URL,
+    env: 'IMAGE_PROVIDER_BASE_URL',
+  },
+  // region recaptcha
+  recaptchaEnabled: {
+    doc: 'reCaptcha Enabled',
+    format: Boolean,
+    default: process.env.RECAPTCHA_ENABLED || false,
+    env: 'RECAPTCHA_ENABLED',
+  },
+  recaptchaHideBadge: {
+    doc: 'reCaptcha Hide Badge',
+    format: Boolean,
+    default: process.env.RECAPTCHA_HIDE_BADGE || false,
+    env: 'RECAPTCHA_HIDE_BADGE',
+  },
+  recaptchaVersion: {
+    doc: 'reCaptcha Version',
+    format: Number,
+    default: process.env.RECAPTCHA_VERSION || 3,
+    env: 'RECAPTCHA_VERSION',
+  },
+  recaptchaSiteKey: {
+    doc: 'reCaptcha Site Key',
+    format: String,
+    default: process.env.RECAPTCHA_SITE_KEY || '',
+    env: 'RECAPTCHA_SITE_KEY',
+  },
+  recaptchaSecretkey: {
+    doc: 'reCaptcha Secret Key',
+    format: String,
+    default: process.env.RECAPTCHA_SECRET_KEY || '',
+    env: 'RECAPTCHA_SECRET_KEY',
+  },
+  recaptchaSize: {
+    doc: 'reCaptcha Size',
+    format: String,
+    default: process.env.RECAPTCHA_SIZE || 'invisible',
+    env: 'RECAPTCHA_SIZE',
+  },
+  recaptchaMinScore: {
+    doc: 'reCaptcha Minimum Score',
+    format: Number,
+    default: process.env.RECAPTCHA_MIN_SCORE || 0.5,
+    env: 'RECAPTCHA_MIN_SCORE',
+  },
+  // endregion
 });
 
 const env = config.get('env');
diff --git a/config/example.json b/config/example.json
index cb367c9..d41f29d 100644
--- a/config/example.json
+++ b/config/example.json
@@ -5,5 +5,14 @@
   "magentoGraphQl": "https://{YOUR_SITE_FRONT_URL}/graphql",
   "enableMagentoExternalCheckout": false,
   "externalCheckoutUrl": "https://{YOUR_SITE_FRONT_URL}",
-  "externalCheckoutSyncPath": "/vue/cart/sync"
-}
+  "externalCheckoutSyncPath": "/vue/cart/sync",
+  "imageProvider": "ipx",
+  "magentoBaseUrl": "https://magento2-instance.vuestorefront.io/",
+  "imageProviderBaseUrl": "https://res-4.cloudinary.com/{YOUR_CLOUD_ID}/image/upload/",
+  "recaptchaHideBadge": "{YOUR_RECAPTCHA_BADGE_TYPE}",
+  "recaptchaSize": "{YOUR_RECAPTCHA_SIZE}",
+  "recaptchaSiteKey": "{YOUR_RECAPTCHA_SITE_KEY}",
+  "recaptchaSecretkey": "{YOUR_RECAPTCHA_SECRET_KEY}",
+  "recaptchaVersion": "{YOUR_RECAPTCHA_VERSION}",
+  "recaptchaMinScore": "{YOUR_RECAPTCHA_MIN_SCORE}"
+}
\ No newline at end of file
diff --git a/enums/imageEnums.js b/enums/imageEnums.js
new file mode 100644
index 0000000..44e9bf0
--- /dev/null
+++ b/enums/imageEnums.js
@@ -0,0 +1,14 @@
+module.exports = {
+  productCard: {
+    width: 216,
+    height: 268,
+  },
+  productCardHorizontal: {
+    width: 140,
+    height: 200,
+  },
+  cartItem: {
+    width: 100,
+    height: 100,
+  },
+};
diff --git a/helpers/__tests__/asyncLocalStorage.spec.js b/helpers/__tests__/asyncLocalStorage.spec.js
new file mode 100644
index 0000000..56b9d40
--- /dev/null
+++ b/helpers/__tests__/asyncLocalStorage.spec.js
@@ -0,0 +1,70 @@
+import { setItem, getItem, mergeItem, removeItem, clear } from '~/helpers/asyncLocalStorage';
+
+describe('asyncLocalStorage :: Promised Based Localstorage Management', () => {
+  test('setItem :: should store to localStorage by key', async () => {
+    const KEY = 'jest'
+    const VSF_KEY = `vsf-${KEY}`
+    const VALUE = 'jest-localstorage-value';
+    const VSF_VALUE = JSON.stringify(VALUE);
+
+    await setItem(KEY, VALUE);
+
+    expect(localStorage.setItem).toHaveBeenLastCalledWith(VSF_KEY, VSF_VALUE);
+    expect(localStorage.__STORE__[VSF_KEY]).toBe(VSF_VALUE);
+    expect(Object.keys(localStorage.__STORE__).length).toBe(1);
+  });
+
+  test('getItem :: should get value from localStorage by key', async () => {
+    const KEY = 'jest'
+    const VSF_KEY = `vsf-${KEY}`
+    const VSF_VALUE = 'jest-localstorage-value';
+
+    const VALUE = await getItem(KEY);
+
+    expect(localStorage.getItem).toHaveBeenLastCalledWith(VSF_KEY);
+    expect(localStorage.__STORE__[VSF_KEY]).toBe(JSON.stringify(VALUE));
+    expect(VSF_VALUE).toBe(VALUE);
+  });
+
+  test('merge :: should merge values to localStorage by key', async () => {
+    const KEY = 'jest'
+    const VSF_KEY = `vsf-${KEY}`
+    const VALUE = {row1: 'Lonely'};
+    const VSF_VALUE = JSON.stringify(VALUE);
+    const MERGE_VALUE = {row2: 'Not anymore'};
+    const VSF_MERGE_VALUE = JSON.stringify({
+      row1: 'Lonely',
+      row2: 'Not anymore'
+    })
+
+    await setItem(KEY, VALUE);
+
+    expect(localStorage.__STORE__[VSF_KEY]).toBe(VSF_VALUE);
+    expect(Object.keys(localStorage.__STORE__).length).toBe(1);
+
+    await mergeItem(KEY, MERGE_VALUE);
+
+    expect(localStorage.__STORE__[VSF_KEY]).toBe(VSF_MERGE_VALUE);
+    expect(Object.keys(localStorage.__STORE__).length).toBe(1);
+  });
+
+  test('remove :: should remove a key and value from localStorage', async () => {
+    const KEY = 'jest'
+    const VSF_KEY = `vsf-${KEY}`
+
+    expect(Object.keys(localStorage.__STORE__).length).toBe(1);
+
+    await removeItem(KEY);
+
+    expect(localStorage.removeItem).toHaveBeenCalledWith(VSF_KEY);
+    expect(Object.keys(localStorage.__STORE__).length).toBe(0);
+  });
+
+  test('clear :: should clear all values and keys from localStorage', async () => {
+    await clear();
+
+    expect(localStorage.clear).toHaveBeenCalledWith();
+    expect(Object.keys(localStorage.__STORE__).length).toBe(0);
+  });
+});
+
diff --git a/helpers/__tests__/formatCurrency.spec.js b/helpers/__tests__/formatCurrency.spec.js
new file mode 100644
index 0000000..2e0bfe2
--- /dev/null
+++ b/helpers/__tests__/formatCurrency.spec.js
@@ -0,0 +1,16 @@
+import formatCurrency from '~/helpers/formatCurrency';
+
+describe('formatCurrency()', () => {
+  it('executed without required options should throw error', () => {
+    expect(() => { formatCurrency(100, 'en-US', {}); }).toThrowError();
+  });
+
+  it('should return formatted currency string', () => {
+    const currency = 'EUR';
+    jest.spyOn(Intl, 'NumberFormat').mockImplementation(() => ({
+      format: (value) => `${value}${currency}`,
+    }));
+    const result = formatCurrency(123, 'de-DE', { currency });
+    expect(result).toBe('123EUR');
+  });
+});
diff --git a/helpers/asyncLocalStorage.ts b/helpers/asyncLocalStorage.ts
new file mode 100644
index 0000000..87faac3
--- /dev/null
+++ b/helpers/asyncLocalStorage.ts
@@ -0,0 +1,42 @@
+const getVsfKey = (key) => `vsf-${key}`;
+
+const mergeLocalStorageItem = (key: string, value: string) => {
+  const oldValue = window.localStorage.getItem(key);
+  const oldObject = JSON.parse(oldValue);
+  const newObject = value;
+  const nextValue = JSON.stringify({ ...JSON.parse(JSON.stringify(oldObject)), ...JSON.parse(JSON.stringify(newObject)) });
+  window.localStorage.setItem(key, nextValue);
+};
+
+const createPromise = (getValue, callback): Promise<any> => new Promise((resolve, reject) => {
+  try {
+    const value = getValue();
+    if (callback) {
+      callback(null, value);
+    }
+    resolve(value);
+  } catch (err) {
+    if (callback) {
+      callback(err);
+    }
+    reject(err);
+  }
+});
+
+// eslint-disable-next-line max-len
+export const getItem = (key: string, callback?: Function): Promise<any> => createPromise(() => JSON.parse(window.localStorage.getItem(getVsfKey(key))), callback);
+
+// eslint-disable-next-line max-len
+export const setItem = (key: string, value: string, callback?: Function): Promise<any> => createPromise(() => (window.localStorage.setItem(getVsfKey(key), JSON.stringify(value))), callback);
+
+// eslint-disable-next-line max-len
+export const removeItem = (key: string, callback?: Function): Promise<any> => createPromise(() => {
+  window.localStorage.removeItem(getVsfKey(key));
+}, callback);
+
+// eslint-disable-next-line max-len
+export const mergeItem = (key: string, value: string, callback?: Function): Promise<any> => createPromise(() => mergeLocalStorageItem(getVsfKey(key), value), callback);
+
+export const clear = (callback?: Function): Promise<any> => createPromise(() => {
+  window.localStorage.clear();
+}, callback);
diff --git a/helpers/checkout/__tests__/steps.spec.js b/helpers/checkout/__tests__/steps.spec.js
new file mode 100644
index 0000000..4c43ee8
--- /dev/null
+++ b/helpers/checkout/__tests__/steps.spec.js
@@ -0,0 +1,26 @@
+import { isPreviousStepValid } from '~/helpers/checkout/steps'
+
+const CHECKOUT_DATA = {
+  'my-account': {a: 'b', c: 'd'}
+}
+
+describe('steps :: steps helper for the checkout', () => {
+
+  beforeEach(async () => {
+    localStorage.clear();
+
+    localStorage.setItem('vsf-checkout', JSON.stringify(CHECKOUT_DATA))
+  });
+
+  test('user can continue', async () => {
+    const isValid = await isPreviousStepValid('my-account')
+
+    expect(isValid).toBeTruthy();
+  });
+
+  test('user can\'t continue', async () => {
+    const isValid = await isPreviousStepValid('billing')
+
+    expect(isValid).toBeFalsy();
+  });
+});
diff --git a/helpers/checkout/steps.ts b/helpers/checkout/steps.ts
new file mode 100644
index 0000000..9430530
--- /dev/null
+++ b/helpers/checkout/steps.ts
@@ -0,0 +1,6 @@
+import { getItem } from '~/helpers/asyncLocalStorage';
+
+export const isPreviousStepValid = async (stepToValidate: string) => {
+  const checkout = await getItem('checkout');
+  return !(!checkout || !checkout[stepToValidate]);
+};
diff --git a/helpers/formatCurrency.ts b/helpers/formatCurrency.ts
new file mode 100644
index 0000000..65cbc24
--- /dev/null
+++ b/helpers/formatCurrency.ts
@@ -0,0 +1,11 @@
+const formatCurrency = (value: number | string, locale: string, options: Intl.NumberFormatOptions): string => {
+  if (typeof value === 'string') {
+    // eslint-disable-next-line no-param-reassign
+    value = Number(value);
+  }
+  // eslint-disable-next-line no-param-reassign
+
+  return new Intl.NumberFormat(locale, { style: 'currency', ...options }).format(value);
+};
+
+export default formatCurrency;
diff --git a/lang/de.js b/lang/de.js
index 3cb2067..33b354e 100644
--- a/lang/de.js
+++ b/lang/de.js
@@ -1,158 +1,242 @@
 /* eslint-disable  */
 
 export default {
-  'Categories': 'Kategorien',
-  'Filters': 'Filters',
-  'Sort by': 'Sortieren nach',
-  'Products found': 'Produkte gefunden',
-  'About us': 'Über uns',
-  'Who we are': 'Wer wir sind',
-  'Quality in the details': 'Qualität im Detail',
-  'Customer Reviews': 'Kundenbewertungen',
-  'Departments': 'Abteilungen',
-  'Women fashion': 'Damenmode',
-  'Men fashion': 'Herrenmode',
-  'Kidswear': 'Kinderkleidung',
-  'Home': 'Zuhause',
-  'Help': 'Hilfe',
-  'Customer service': 'Kundendienst',
-  'Size guide': 'Größentabelle',
-  'Contact us': 'Kontaktiere uns',
-  'Payment & Delivery': 'Zahlung & Lieferung',
-  'Purchase terms': 'Kaufbedingungen',
-  'Guarantee': 'Garantie',
-  'Description': 'Beschreibung',
-  'Read reviews': 'Bewertungen lesen',
-  'Additional Information': 'Zusätzliche Information',
-  'Save for later': 'Für später speichern',
-  'Add to compare': 'Hinzufügen zum vergleichen',
-  'Match it with': 'Kombiniere es mit',
-  'Share your look': 'Teile deinen Look',
-  'Product description': 'Das Karissa V-Neck Tee hat eine halb taillierte Form schmeichelhaft für jede Figur. Sie können mit ins Fitnessstudio gehen Vertrauen, während es Kurven umarmt und häufiges "Problem" verbirgt Bereiche. Finden Sie atemberaubende Cocktailkleider für Frauen und feiern Sie Kleider.',
-  'Brand': 'Marke',
-  'Instruction1': 'Um mich kümmern',
-  'Instruction2': 'Nur hier für die Pflegehinweise?',
-  'Instruction3': 'Ja, das haben wir uns gedacht',
-  'Items': 'Gegenstände',
-  'View': 'Ansicht',
-  'Show on page': 'Auf Seite anzeigen',
-  'Done': 'Fertig',
-  'Clear all': 'Alles löschen',
-  'Empty': 'Sieht so aus, als hätten Sie der Tasche noch keine Artikel hinzugefügt. Beginnen Sie mit dem Einkaufen, um es auszufüllen.',
-  'Help & FAQs': 'Hilfe & FAQs',
-  'Find out more': 'Finde mehr heraus',
-  'Login': 'Anmeldung',
-  'Forgotten password?': 'Passwort vergessen?',
-  'No account': `Sie haben noch keinen Account?`,
-  'Register today': 'Melde dich noch heute an',
-  'Go to checkout': 'Zur Kasse gehen',
-  'Go back shopping': 'Zurück einkaufen',
-  'Personal details': 'Persönliche Daten',
-  'Edit': 'Bearbeiten',
-  'Shipping details': 'Versanddetails',
-  'Billing address': 'Rechnungsadresse',
-  'Same as shipping address': 'Wie Versandadresse',
-  'Payment method': 'Zahlungsmethode',
-  'Apply': 'Übernehmen',
-  'Update password': 'Passwort aktualisieren',
-  'Update personal data': 'Persönliche Daten aktualisieren',
-  'Item': 'Artikel',
-  'Go back': 'Go back',
-  'Continue to shipping': 'Weiter zum Versand',
-  'I agree to': 'Ich stimme zu',
-  'Terms and conditions': 'Allgemeine Geschäftsbedingungen',
-  'Pay for order': 'Für Bestellung bezahlen',
-  'Log into your account': 'In dein Konto einloggen',
-  'or fill the details below': 'oder füllen Sie die Details unten',
-  'Enjoy your free account': 'Enjoy these perks with your free account!',
-  'Continue to payment': 'Weiter zur Zahlung',
-  'Order No.': 'Bestellnummer',
-  'Successful placed order': 'Sie haben die Bestellung erfolgreich aufgegeben. Sie können den Status Ihres Bestellen Sie über unsere Lieferstatusfunktion. Sie erhalten eine Bestellung Bestätigungs-E-Mail mit Details Ihrer Bestellung und einem Link zum Verfolgen der Bestellung Fortschritt.',
-  'Info after order': 'Sie können sich mit E-Mail und definiertem Passwort in Ihrem Konto anmelden vorhin. Überprüfen Sie in Ihrem Konto Ihre Profildaten Transaktionsverlauf, Abonnement für Newsletter bearbeiten.',
-  'Allow order notifications': 'Bestellbenachrichtigungen zulassen',
-  'Feedback': 'Ihr Feedback ist uns wichtig. Lassen Sie uns wissen, was wir verbessern können.',
-  'Send my feedback': 'Senden Sie mein Feedback',
-  'Go back to shop': 'Zurück zum Einkaufen',
-  'Read all reviews': 'Alle Bewertungen lesen',
-  'Color': 'Farbe',
-  'Contact details updated': 'Halten Sie Ihre Adressen und Kontaktdaten auf dem neuesten Stand.',
-  'Manage billing addresses': 'Alle gewünschten Rechnungsadressen verwalten (Arbeitsplatz, Privatadresse ...) Auf diese Weise müssen Sie die Rechnungsadresse nicht bei jeder Bestellung manuell eingeben.',
-  'Change': 'Änderungsänderung',
-  'Delete': 'Löschen',
-  'Add new address': 'Neue Adresse hinzufügen',
-  'Set up newsletter': 'Richten Sie Ihren Newsletter ein und wir senden Ihnen wöchentlich Informationen zu neuen Produkten und Trends aus den von Ihnen ausgewählten Bereichen',
-  'Sections that interest you': 'Abschnitte, die Sie interessieren',
-  'Save changes': 'Änderungen speichern',
-  'Read and understand': 'Ich habe das gelesen und verstanden',
-  'Privacy': 'Datenschutz',
-  'Cookies Policy': 'Cookie-Richtlinie',
-  'Commercial information': 'und erklären sich damit einverstanden, personalisierte Handelsinformationen vom Markennamen per E-Mail zu erhalten',
-  'Feel free to edit': 'Fühlen Sie sich frei, Ihre unten stehenden Daten zu bearbeiten, damit Ihr Konto immer auf dem neuesten Stand ist',
-  'Use your personal data': 'Bei Markennamen legen wir großen Wert auf Datenschutzfragen und verpflichten uns, die persönlichen Daten unserer Benutzer zu schützen. Erfahren Sie mehr darüber, wie wir Ihre persönlichen Daten pflegen und verwenden',
-  'Privacy Policy': 'Datenschutzrichtlinie',
-  'Change password your account': 'Wenn Sie das Passwort ändern möchten, um auf Ihr Konto zuzugreifen, geben Sie die folgenden Informationen ein',
-  'Your current email address is': 'Ihre aktuelle E-Mail-Adresse lautet',
-  'Product': 'Produkt',
-  'Details and status orders': 'Überprüfen Sie die Details und den Status Ihrer Bestellungen im Online-Shop. Sie können Ihre Bestellung auch stornieren oder eine Rücksendung anfordern. ',
-  'You currently have no orders': 'Sie haben derzeit keine Bestellungen',
-  'Start shopping': 'Einkaufen starten',
-  'Download': 'Herunterladen',
-  'Download all': 'Alle herunterladen',
-  'View details': 'Details anzeigen',
-  'Manage shipping addresses': 'Alle gewünschten Versandadressen verwalten (Arbeitsplatz, Privatadresse ...) Auf diese Weise müssen Sie die Versandadresse nicht bei jeder Bestellung manuell eingeben.',
-  'Quantity': 'Menge',
-  'Price': 'Preis',
-  'Back to homepage': 'Zurück zur Homepage',
-  'Select shipping method': 'Versandart auswählen',
-  'Review my order': 'Meine Bestellung überprüfen',
-  'Select payment method': 'Zahlungsmethode auswählen',
-  'Make an order': 'Bestellung aufgeben',
-  'or': 'oder',
-  'login in to your account': 'Anmelden bei Ihrem Konto',
-  'Create an account': 'Konto erstellen',
-  'Your bag is empty': 'Ihre Tasche ist leer',
-  'Cancel': 'Abbrechen',
-  'See all': 'Alle anzeigen',
-  'See all results': 'Alle Ergebnisse anzeigen',
-  'We haven’t found any results for given phrase': 'Wir haben keine Ergebnisse für die angegebene Phrase gefunden',
-  'You haven’t searched for items yet': 'Sie haben noch nicht nach Artikeln gesucht.',
-  'Let’s start now – we’ll help you': 'Fangen wir jetzt an - wir helfen Ihnen.',
-  'Search results': 'Suchergebnisse',
-  'Product suggestions': 'Produktvorschläge',
-  'Search for items': 'Nach Artikeln suchen',
-  'Enter promo code': 'Geben Sie den Promo-Code ein',
-  'Shipping method': 'Versandart',
-  'Continue to billing': 'Weiter zur Abrechnung',
-  'Payment methods': 'Zahlungsmethoden',
-  'Shipping address': 'Lieferanschrift',
-  'Subtotal': 'Zwischensumme',
-  'Shipping': 'Versand',
-  'Total price': 'Gesamtpreis',
-  'Payment': 'Zahlung',
-  'Order summary': 'Bestellübersicht',
-  'Products': 'Produkte',
-  'Total': 'Gesamt',
-  'Reset Password': 'Passwort Zurücksetzen',
-  'Save Password': 'Passwort Speichern',
-  'Back to home': 'Zurück Zur Startseite',
-  'Forgot Password': 'Wenn Sie Ihr Passwort vergessen haben, können Sie es zurücksetzen.',
-  'Thank You Inbox': 'Wenn die Nachricht nicht in Ihrem Posteingang ankommt, versuchen Sie es mit einer anderen E-Mail-Adresse, mit der Sie sich möglicherweise registriert haben.',
-  'Sign in': 'Einloggen',
-  'Register': 'Registrieren',
-  'Password Changed': 'Passwort erfolgreich geändert. Sie können nun zur Startseite zurückkehren und sich anmelden.',
-  'Password': 'Passwort',
-  'Repeat Password': 'Wiederhole das Passwort',
-  'Forgot Password Modal Email': 'E-Mail, mit der Sie sich anmelden:',
-  forgotPasswordConfirmation: 'Vielen Dank! Wenn ein Konto mit der E-Mail-Adresse {0} registriert ist, finden Sie in Ihrem Posteingang eine Nachricht mit einem Link zum Zurücksetzen des Passworts.',
-  subscribeToNewsletterModalContent:
-    'Wenn Sie sich für den Newsletter angemeldet haben, erhalten Sie spezielle Angebote und Nachrichten von VSF per E-Mail. Wir werden Ihre E-Mail zu keinem Zeitpunkt an Dritte verkaufen oder weitergeben. Bitte beachten Sie unsere {0}.',
-  'Subscribe': 'Abonnieren',
-  'Subscribe to newsletter': 'Anmeldung zum Newsletter',
-  'Email address': 'E-Mail Adresse',
-  'I confirm subscription': 'Ich bestätige das Abonnement',
-  'You can unsubscribe at any time': 'Sie können sich jederzeit abmelden',
-  'show more': 'mehr anzeigen',
-  'hide': 'ausblenden',
-  'Change to grid view': 'Zur Rasteransicht wechseln',
-  'Change to list view': 'Zur Listenansicht wechseln'
+  "About us": "Über uns",
+  "Add new address": "Neue Adresse hinzufügen",
+  "Add to compare": "Hinzufügen zum vergleichen",
+  "Add to Wishlist": "Zur Wunschliste hinzufügen",
+  "Additional Information": "Zusätzliche Information",
+  "Allow order notifications": "Bestellbenachrichtigungen zulassen",
+  "Apply": "Übernehmen",
+  "Attention!": "Attention!",
+  "Back to home": "Zurück Zur Startseite",
+  "Back to homepage": "Zurück zur Homepage",
+  "Billing": "Abrechnung",
+  "Billing address": "Rechnungsadresse",
+  "Brand": "Marke",
+  "Cancel": "Abbrechen",
+  "Categories": "Kategorien",
+  "Change": "Änderungsänderung",
+  "Change password your account": "Wenn Sie das Passwort ändern möchten, um auf Ihr Konto zuzugreifen, geben Sie die folgenden Informationen ein",
+  "Change to grid view": "Zur Rasteransicht wechseln",
+  "Change to list view": "Zur Listenansicht wechseln",
+  "Clear all": "Alles löschen",
+  "Color": "Farbe",
+  "Commercial information": "und erklären sich damit einverstanden, personalisierte Handelsinformationen vom Markennamen per E-Mail zu erhalten",
+  "Contact details updated": "Halten Sie Ihre Adressen und Kontaktdaten auf dem neuesten Stand.",
+  "Contact us": "Kontaktiere uns",
+  "Continue to billing": "Weiter zur Abrechnung",
+  "Continue to payment": "Weiter zur Zahlung",
+  "Continue to shipping": "Weiter zum Versand",
+  "Cookies Policy": "Cookie-Richtlinie",
+  "Create an account": "Konto erstellen",
+  "Customer Reviews": "Kundenbewertungen",
+  "Customer service": "Kundendienst",
+  "Default Billing Address": "Standard-Rechnungsadresse",
+  "Default Shipping Address": "Standardlieferadresse",
+  "Delete": "Löschen",
+  "Departments": "Abteilungen",
+  "Description": "Beschreibung",
+  "Details and status orders": "Überprüfen Sie die Details und den Status Ihrer Bestellungen im Online-Shop. Sie können Ihre Bestellung auch stornieren oder eine Rücksendung anfordern. ",
+  "Discount": "Rabatt",
+  "Done": "Fertig",
+  "Download": "Herunterladen",
+  "Download all": "Alle herunterladen",
+  "Edit": "Bearbeiten",
+  "Email address": "E-Mail Adresse",
+  "Empty": "Sieht so aus, als hätten Sie der Tasche noch keine Artikel hinzugefügt. Beginnen Sie mit dem Einkaufen, um es auszufüllen.",
+  "Enjoy your free account": "Enjoy these perks with your free account!",
+  "Enter promo code": "Geben Sie den Promo-Code ein",
+  "Feedback": "Ihr Feedback ist uns wichtig. Lassen Sie uns wissen, was wir verbessern können.",
+  "Feel free to edit": "Fühlen Sie sich frei, Ihre unten stehenden Daten zu bearbeiten, damit Ihr Konto immer auf dem neuesten Stand ist",
+  "Filters": "Filters",
+  "Find out more": "Finde mehr heraus",
+  "First Name": "Vorname",
+  "Forgot Password": "Wenn Sie Ihr Passwort vergessen haben, können Sie es zurücksetzen.",
+  "Forgot Password Modal Email": "E-Mail, mit der Sie sich anmelden:",
+  "forgotPasswordConfirmation": "Vielen Dank! Wenn ein Konto mit der E-Mail-Adresse {0} registriert ist, finden Sie in Ihrem Posteingang eine Nachricht mit einem Link zum Zurücksetzen des Passworts.",
+  "Forgotten password?": "Passwort vergessen?",
+  "Go back": "Geh zurück",
+  "Go back shopping": "Zurück einkaufen",
+  "Go back to shop": "Zurück zum Einkaufen",
+  "Go to checkout": "Zur Kasse gehen",
+  "Guarantee": "Garantie",
+  "Help": "Hilfe",
+  "Help & FAQs": "Hilfe & FAQs",
+  "hide": "ausblenden",
+  "Home": "Zuhause",
+  "I agree to": "Ich stimme zu",
+  "I confirm subscription": "Ich bestätige das Abonnement",
+  "I want to create an account": "Ich möchte ein Konto erstellen",
+  "Info after order": "Sie können sich mit E-Mail und definiertem Passwort in Ihrem Konto anmelden vorhin. Überprüfen Sie in Ihrem Konto Ihre Profildaten Transaktionsverlauf, Abonnement für Newsletter bearbeiten.",
+  "Instruction1": "Um mich kümmern",
+  "Instruction2": "Nur hier für die Pflegehinweise?",
+  "Instruction3": "Ja, das haben wir uns gedacht",
+  "It was not possible to request a new password, please check the entered email address.": "Es war nicht möglich, ein neues Passwort anzufordern, bitte überprüfen Sie die eingegebene E-Mail-Adresse.",
+  "Item": "Artikel",
+  "Items": "Gegenstände",
+  "Kidswear": "Kinderkleidung",
+  "Last Name": "Nachname",
+  "Let’s start now – we’ll help you": "Fangen wir jetzt an - wir helfen Ihnen.",
+  "Log into your account": "In dein Konto einloggen",
+  "Login": "Anmeldung",
+  "login in to your account": "Anmelden bei Ihrem Konto",
+  "Looks like you haven’t added any items to the bag yet. Start shopping to fill it in.": "Sieht so aus, als hätten Sie der Tasche noch keine Artikel hinzugefügt. Beginnen Sie mit dem Einkaufen, um es auszufüllen.",
+  "Make an order": "Bestellung aufgeben",
+  "Manage addresses": "Verwalten Sie alle gewünschten Adressen (Arbeitsplatz, Privatadresse...) Auf diese Weise müssen Sie die Adresse nicht bei jeder Bestellung manuell eingeben.",
+  "Manage billing addresses": "Alle gewünschten Rechnungsadressen verwalten (Arbeitsplatz, Privatadresse ...) Auf diese Weise müssen Sie die Rechnungsadresse nicht bei jeder Bestellung manuell eingeben.",
+  "Manage shipping addresses": "Alle gewünschten Versandadressen verwalten (Arbeitsplatz, Privatadresse ...) Auf diese Weise müssen Sie die Versandadresse nicht bei jeder Bestellung manuell eingeben.",
+  "Match it with": "Kombiniere es mit",
+  "Men fashion": "Herrenmode",
+  "My billing and shipping address are the same": "Meine Rechnungs- und Lieferadresse sind identisch",
+  "My Cart": "Mein Warenkorb",
+  "No account": "Sie haben noch keinen Account?",
+  "or": "oder",
+  "or fill the details below": "oder füllen Sie die Details unten",
+  "Order No.": "Bestellnummer",
+  "Order summary": "Bestellübersicht",
+  "Other products you might like": "Andere Produkte, die Ihnen gefallen könnten",
+  "Out of stock": "Ausverkauft",
+  "Password": "Passwort",
+  "Password Changed": "Passwort erfolgreich geändert. Sie können nun zur Startseite zurückkehren und sich anmelden.",
+  "Pay for order": "Für Bestellung bezahlen",
+  "Payment": "Zahlung",
+  "Payment & Delivery": "Zahlung & Lieferung",
+  "Payment method": "Zahlungsmethode",
+  "Payment methods": "Zahlungsmethoden",
+  "Personal details": "Persönliche Daten",
+  "Please type your current password to change your email address.": "Bitte geben Sie Ihr aktuelles Passwort ein, um Ihre E-Mail-Adresse zu ändern.",
+  "Price": "Preis",
+  "Privacy": "Datenschutz",
+  "Privacy Policy": "Datenschutzrichtlinie",
+  "Product": "Produkt",
+  "Product description": "Das Karissa V-Neck Tee hat eine halb taillierte Form schmeichelhaft für jede Figur. Sie können mit ins Fitnessstudio gehen Vertrauen, während es Kurven umarmt und häufiges \"Problem\" verbirgt Bereiche. Finden Sie atemberaubende Cocktailkleider für Frauen und feiern Sie Kleider.",
+  "Product suggestions": "Produktvorschläge",
+  "Products": "Produkte",
+  "Products found": "Produkte gefunden",
+  "Purchase terms": "Kaufbedingungen",
+  "Quality in the details": "Qualität im Detail",
+  "Quantity": "Menge",
+  "Read all reviews": "Alle Bewertungen lesen",
+  "Read and understand": "Ich habe das gelesen und verstanden",
+  "Read reviews": "Bewertungen lesen",
+  "Register": "Registrieren",
+  "Register today": "Melde dich noch heute an",
+  "Remove from Wishlist": "Von Wunschliste entfernen",
+  "Repeat Password": "Wiederhole das Passwort",
+  "Reset Password": "Passwort Zurücksetzen",
+  "Review my order": "Meine Bestellung überprüfen",
+  "Same as shipping address": "Wie Versandadresse",
+  "Save changes": "Änderungen speichern",
+  "Save for later": "Für später speichern",
+  "Save Password": "Passwort Speichern",
+  "Search for items": "Nach Artikeln suchen",
+  "Search results": "Suchergebnisse",
+  "Sections that interest you": "Abschnitte, die Sie interessieren",
+  "See all": "Alle anzeigen",
+  "See all results": "Alle Ergebnisse anzeigen",
+  "Select payment method": "Zahlungsmethode auswählen",
+  "Select shipping method": "Versandart auswählen",
+  "Send my feedback": "Senden Sie mein Feedback",
+  "Set up newsletter": "Richten Sie Ihren Newsletter ein und wir senden Ihnen wöchentlich Informationen zu neuen Produkten und Trends aus den von Ihnen ausgewählten Bereichen",
+  "Share your look": "Teile deinen Look",
+  "Shipping": "Versand",
+  "Shipping address": "Lieferanschrift",
+  "Shipping details": "Versanddetails",
+  "Shipping method": "Versandart",
+  "show more": "mehr anzeigen",
+  "Show on page": "Auf Seite anzeigen",
+  "Sign in": "Einloggen",
+  "Sign Up for Newsletter": "Anmeldung für Newsletter",
+  "Size guide": "Größentabelle",
+  "Sort by": "Sortieren nach",
+  "Sort: Default": "Standard",
+  "Sort: Name A-Z": "Benennen Sie A-Z",
+  "Sort: Name Z-A": "Benennen Sie Z-A",
+  "Sort: Price from high to low": "Preis von hoch bis niedrig",
+  "Sort: Price from low to high": "Preis von niedrig bis hoch",
+  "Start shopping": "Einkaufen starten",
+  "Subscribe": "Abonnieren",
+  "Subscribe to newsletter": "Anmeldung zum Newsletter",
+  "subscribeToNewsletterModalContent": "Wenn Sie sich für den Newsletter angemeldet haben, erhalten Sie spezielle Angebote und Nachrichten von VSF per E-Mail. Wir werden Ihre E-Mail zu keinem Zeitpunkt an Dritte verkaufen oder weitergeben. Bitte beachten Sie unsere {0}.",
+  "Subtotal": "Zwischensumme",
+  "Subtotal price": "Zwischensumme Preis",
+  "Successful placed order": "Sie haben die Bestellung erfolgreich aufgegeben. Sie können den Status Ihres Bestellen Sie über unsere Lieferstatusfunktion. Sie erhalten eine Bestellung Bestätigungs-E-Mail mit Details Ihrer Bestellung und einem Link zum Verfolgen der Bestellung Fortschritt.",
+  "Terms and conditions": "Allgemeine Geschäftsbedingungen",
+  "Thank You Inbox": "Wenn die Nachricht nicht in Ihrem Posteingang ankommt, versuchen Sie es mit einer anderen E-Mail-Adresse, mit der Sie sich möglicherweise registriert haben.",
+  "Total": "Gesamt",
+  "Total items": "Gesamtanzahl",
+  "Total price": "Gesamtpreis",
+  "Update password": "Passwort aktualisieren",
+  "Update personal data": "Persönliche Daten aktualisieren",
+  "Use your personal data": "Bei Markennamen legen wir großen Wert auf Datenschutzfragen und verpflichten uns, die persönlichen Daten unserer Benutzer zu schützen. Erfahren Sie mehr darüber, wie wir Ihre persönlichen Daten pflegen und verwenden",
+  "User Account": "Benutzerkonto",
+  "View": "Ansicht",
+  "View details": "Details anzeigen",
+  "We haven’t found any results for given phrase": "Wir haben keine Ergebnisse für die angegebene Phrase gefunden",
+  "Who we are": "Wer wir sind",
+  "Women fashion": "Damenmode",
+  "You are not authorized, please log in": "Sie sind nicht autorisiert, bitte melden Sie sich an",
+  "You can unsubscribe at any time": "Sie können sich jederzeit abmelden",
+  "You currently have no orders": "Sie haben derzeit keine Bestellungen",
+  "You haven’t searched for items yet": "Sie haben noch nicht nach Artikeln gesucht.",
+  "Your bag is empty": "Ihre Tasche ist leer",
+  "Your current email address is": "Ihre aktuelle E-Mail-Adresse lautet",
+  "Your email": "Deine E-Mail",
+  "You have submitted no reviews": "Sie haben keine Bewertungen abgegeben",
+  "The account sign-in was incorrect or your account is disabled temporarily. Please wait and try again later.":"Die Kontoanmeldung war falsch oder Ihr Konto wurde vorübergehend deaktiviert. Bitte warten Sie und versuchen Sie es später erneut.",
+  "A customer with the same email address already exists in an associated website.": "Ein Kunde mit derselben E-Mail-Adresse existiert bereits auf einer verknüpften Website.",
+  "Invalid email": "Ungültige E-Mail",
+  "SUMMER COLLECTION {year}": "SUMMER COLLECTION {year}",
+  "Colorful summer dresses are already in store": "Bunte Sommerkleider sind bereits im Store",
+  "Learn more": "Mehr erfahren",
+  "Dresses": "Kleider",
+  "Cocktail & Party": "Cocktail & Party",
+  "Linen Dresses": "Leinenkleider",
+  "T-Shirts": "T-Shirts",
+  "The office life": "Das Büroleben",
+  "Find stunning women's cocktail dresses and party dresses. Stand out in lace and metallic cocktail dresses from all your favorite brands.": "Finden Sie atemberaubende Cocktailkleider für Damen und Cocktailkleider für Party-D…c von all Ihren Lieblingsmarken.",
+  "Shop now": "Jetzt einkaufen",
+  "The Office Life": "The Office Life",
+  "Summer Sandals": "Sommersandalen",
+  "Eco Sandals": "Öko-Sandalen",
+  "Subscribe to Newsletters": "Newsletter abonnieren",
+  "Be aware of upcoming sales and events. Receive gifts and special offers!": "Informieren Sie sich über bevorstehende Verkäufe und Veranstaltungen. Erhalten Sie Geschenke und Sonderangebote",
+  "Fashion to take away": "Mode zum Mitnehmen",
+  "Download our application to your mobile": "Laden Sie unsere Anwendung auf Ihr Handy herunter",
+  "Share Your Look": "Teilen Sie Ihren Look",
+  "My Account": "Mein Konto",
+  "My profile": "Mein Profil",
+  "Personal Details": "Persönliche Daten",
+  "Addresses details": "Adressendetails",
+  "My newsletter": "Mein Newsletter",
+  "Log out": "Ausloggen",
+  "My reviews": "Meine Bewertungen",
+  "Order history": "Bestellverlauf",
+  "Order details": "Bestelldetails",
+  "My wishlist": "Meine Wunschliste",
+  "Password change": "Passwortänderung",
+  "Personal data": "Persönliche Daten",
+  "Your e-mail": "Deine E-Mail",
+  "Current Password": "Jetziges Passwortd",
+  "You are not authorized, please log in.": "Sie sind nicht autorisiert, bitte melden Sie sich an.",
+  "Go To Product": "Zum Produkt",
+  "Returns":"Rücklauf",
+  "My orders": "Meine Bestellungen",
+  "Add the address": "Fügen Sie die Adresse hinzu",
+  "Set as default shipping": "Als Standardversand festlegen",
+  "Set as default billing": "Als Standardabrechnung festlegen",
+  "House/Apartment number": "Haus-/Wohnungsnummer",
+  "Street Name": "Straßenname",
+  "City": "Stadt",
+  "State/Province": "Staat/Provinz",
+  "Zip-code": "Postleitzahl",
+  "Country": "Land",
+  "Phone number": "Telefonnummer",
+  "Please select a country first": "Bitte wählen Sie zuerst ein Land aus",
+  "This field is required": "Dieses Feld ist erforderlich",
+  "The field should have at least 2 characters": "Das Feld sollte mindestens 2 Zeichen lang sein",
+  "The field should have at least 4 characters": "Das Feld sollte mindestens 4 Zeichen lang sein",
+  "The field should have at least 8 characters": "Das Feld sollte mindestens 8 Zeichen lang sein",
+  "New Password": "Neues Passwort",
 };
diff --git a/lang/en.js b/lang/en.js
index b1a6c3e..bf60673 100644
--- a/lang/en.js
+++ b/lang/en.js
@@ -1,173 +1,239 @@
 /* eslint-disable  */
 
 export default {
-  'About us': 'About us',
-  'Add new address': 'Add new address',
-  'Add to compare': 'Add to compare',
-  'Add to Wishlist':'Add to Wishlist',
-  'Additional Information': 'Additional Information',
-  'Allow order notifications': 'Allow order notifications',
-  'Apply': 'Apply',
-  'Attention!': 'Attention!',
-  'Back to home': 'Back to home',
-  'Back to homepage': 'Back to homepage',
-  'Billing address': 'Billing address',
-  'Brand': 'Brand',
-  'Cancel': 'Cancel',
-  'Categories': 'Categories',
-  'Change password your account': 'If you want to change the password to access your account, enter the following information',
-  'Change': 'Change',
-  'Clear all': 'Clear all',
-  'Color': 'Color',
-  'Commercial information': 'and agree to receive personalized commercial information from Brand name by email',
-  'Contact details updated': 'Keep your addresses and contact details updated.',
-  'Contact us': 'Contact us',
-  'Continue to billing': 'Continue to billing',
-  'Continue to payment': 'Continue to payment',
-  'Continue to shipping': 'Continue to shipping',
-  'Cookies Policy': 'Cookies Policy',
-  'Create an account': 'Create an account',
-  'Customer Reviews': 'Customer Reviews',
-  'Customer service': 'Customer service',
-  'Delete': 'Delete',
-  'Departments': 'Departments',
-  'Description': 'Description',
-  'Details and status orders': 'Check the details and status of your orders in the online store. You can also cancel your order or request a return.',
-  'Discount': 'Discount',
-  'Done': 'Done',
-  'Download all': 'Download all',
-  'Download': 'Download',
-  'Edit': 'Edit',
-  'Email address': 'Email address',
-  'Empty': 'Looks like you haven’t added any items to the bag yet. Start shopping to fill it in.',
-  'Enjoy your free account': 'Enjoy these perks with your free account!',
-  'Enter promo code': 'Enter promo code',
-  'Feedback': 'Your feedback is important to us. Let us know what we could improve.',
-  'Feel free to edit': 'Feel free to edit any of your details below so your account is always up to date',
-  'Filters': 'Filter',
-  'Find out more': 'Find out more',
-  'Forgot Password Modal Email': 'Email you are using to sign in:',
-  'Forgot Password': 'If you can’t remember your password, you can reset it.',
-  'Forgotten password?': 'Forgotten password?',
-  'Go back shopping': 'Go back shopping',
-  'Go back to shop': 'Go back to shop',
-  'Go back': 'Go back',
-  'Go to checkout': 'Go to checkout',
-  'Guarantee': 'Guarantee',
-  'Help & FAQs': 'Help & FAQs',
-  'Help': 'Help',
-  'hide': 'hide',
-  'Home': 'Home',
-  'I agree to': 'I agree to',
-  'I confirm subscription': 'I confirm subscription',
-  'Info after order': 'You can log to your account using e-mail and password defined earlier. On your account you can edit your profile data, check history of transactions, edit subscription to newsletter.',
-  'Instruction1': 'Take care of me',
-  'Instruction2': 'Just here for the care instructions?',
-  'Instruction3': 'Yeah, we thought so',
-  'It was not possible to request a new password, please check the entered email address.': 'It was not possible to request a new password, please check the entered email address.',
-  'Item': 'Item',
-  'Items': 'Items',
-  'Kidswear': 'Kidswear',
-  'Let’s start now – we’ll help you': 'Let’s start now – we’ll help you.',
-  'Log into your account': 'Log into your account',
-  'login in to your account': 'login in to your account',
-  'Login': 'Login',
-  'Looks like you haven’t added any items to the bag yet. Start shopping to fill it in.': 'Looks like you haven’t added any items to the bag yet. Start shopping to fill it in.',
-  'Make an order': 'Make an order',
-  'Manage addresses': 'Manage all the addresses you want (work place, home address...) This way you won"t have to enter the address manually with each order.',
-  'Manage billing addresses': 'Manage all the billing addresses you want (work place, home address...) This way you won"t have to enter the billing address manually with each order.',
-  'Manage shipping addresses': 'Manage all the shipping addresses you want (work place, home address...) This way you won"t have to enter the shipping address manually with each order.',
-  'Match it with': 'Match it with',
-  'Men fashion': 'Men fashion',
-  'My Cart': 'My Cart',
-  'No account': `Don't have an account yet?`,
-  'or fill the details below': 'or fill the details below',
-  'or': 'or',
-  'Order No.': 'Order No.',
-  'Order summary': 'Order summary',
-  'Other products you might like': 'Other products you might like',
-  'Password Changed': 'Password successfuly changed. You can now go back to homepage and sign in.',
-  'Password': 'Password',
-  'Pay for order': 'Pay for order',
-  'Payment & Delivery': 'Payment & Delivery',
-  'Payment method': 'Payment method',
-  'Payment methods': 'Payment methods',
-  'Payment': 'Payment',
-  'Personal details': 'Personal details',
-  'Please type your current password to change your email address.': 'Please type your current password to change your email address.',
-  'Price': 'Price',
-  'Privacy Policy': 'Privacy Policy',
-  'Privacy': 'Privacy',
-  'Product suggestions': 'Product suggestions',
-  'Product': 'Product',
-  'Products found': 'Products found',
-  'Products': 'Products',
-  'Purchase terms': 'Purchase terms',
-  'Quality in the details': 'Quality in the details',
-  'Quantity': 'Quantity',
-  'Read all reviews': 'Read all reviews',
-  'Read and understand': 'I have read and understand the',
-  'Read reviews': 'Read reviews',
-  'Register today': 'Register today',
-  'Register': 'Register',
-  'Remove from Wishlist':'Remove from Wishlist',
-  'Repeat Password': 'Repeat Password',
-  'Reset Password': 'Reset Password',
-  'Review my order': 'Review my order',
-  'Same as shipping address': 'Same as shipping address',
-  'Save changes': 'Save changes',
-  'Save for later': 'Save for later',
-  'Save Password': 'Save Password',
-  'Search for items': 'Search for items',
-  'Search results': 'Search results',
-  'Sections that interest you': 'Sections that interest you',
-  'See all results': 'See all results',
-  'Select payment method': 'Select payment method',
-  'Select shipping method': 'Select shipping method',
-  'Send my feedback': 'Send my feedback',
-  'Set up newsletter': 'Set up your newsletter and we will send you information about new products and trends from the sections you selected every week.',
-  'Share your look': 'Share your look',
-  'Shipping address': 'Shipping address',
-  'Shipping details': 'Shipping details',
-  'Shipping method': 'Shipping method',
-  'Shipping': 'Shipping',
-  'show more': 'show more',
-  'Show on page': 'Show on page',
-  'Sign in': 'Sign in',
-  'Size guide': 'Size guide',
-  'Sort by': 'Sort by',
-  'Sort: Default': 'Default',
-  'Sort: Name A-Z': 'Name A-Z',
-  'Sort: Name Z-A': 'Name Z-A',
-  'Sort: Price from high to low': 'Price from high to low',
-  'Sort: Price from low to high': 'Price from low to high',
-  'Start shopping': 'Start shopping',
-  'Subscribe to newsletter': 'Subscribe to newsletter',
-  'Subscribe': 'Subscribe',
-  'Subtotal': 'Subtotal',
-  'Successful placed order': 'You have successfully placed the order. You can check status of your order by using our delivery status feature. You will receive an order confirmation e-mail with details of your order and a link to track its progress.',
-  'Terms and conditions': 'Terms and conditions',
-  'Thank You Inbox': 'If the message is not arriving in your inbox, try another email address you might’ve used to register.',
-  'Total items': 'Total items',
-  'Total price': 'Total price',
-  'Total': 'Total',
-  'Update password': 'Update password',
-  'Update personal data': 'Update personal data',
-  'Use your personal data': 'At Brand name, we attach great importance to privacy issues and are committed to protecting the personal data of our users. Learn more about how we care and use your personal data in the',
-  'User Account': 'User Account',
-  'View details': 'View details',
-  'View': 'View',
-  'Who we are': 'Who we are',
-  'Women fashion': 'Women fashion',
-  'You can unsubscribe at any time': 'You can unsubscribe at any time',
-  'You currently have no orders': 'You currently have no orders',
-  'You haven’t searched for items yet': 'You haven’t searched for items yet.',
-  'Your bag is empty': 'Your bag is empty',
-  'Your current email address is': 'Your current email address is',
-  forgotPasswordConfirmation: 'Thanks! If there is an account registered with the {0} email, you will find message with a password reset link in your inbox.',
-  subscribeToNewsletterModalContent: 'After signing up for the newsletter, you will receive special offers and messages from VSF via email. We will not sell or distribute your email to any third party at any time. Please see our {0}.',
-  'Default Shipping Address': 'Default Shipping Address',
-  'Default Billing Address': 'Default Billing Address',
-  'You are not authorized, please log in': 'You are not authorized, please log in',
-  'Out of stock': 'Out of stock'
+  "About us": "About us",
+  "Add new address": "Add new address",
+  "Add to compare": "Add to compare",
+  "Add to Wishlist": "Add to Wishlist",
+  "Additional Information": "Additional Information",
+  "Allow order notifications": "Allow order notifications",
+  "Apply": "Apply",
+  "Attention!": "Attention!",
+  "Back to home": "Back to home",
+  "Back to homepage": "Back to homepage",
+  "Billing": "Billing",
+  "Billing address": "Billing address",
+  "Brand": "Brand",
+  "Cancel": "Cancel",
+  "Categories": "Categories",
+  "Change": "Change",
+  "Change password your account": "If you want to change the password to access your account, enter the following information",
+  "Clear all": "Clear all",
+  "Color": "Color",
+  "Commercial information": "and agree to receive personalized commercial information from Brand name by email",
+  "Contact details updated": "Keep your addresses and contact details updated.",
+  "Contact us": "Contact us",
+  "Continue to billing": "Continue to billing",
+  "Continue to payment": "Continue to payment",
+  "Continue to shipping": "Continue to shipping",
+  "Cookies Policy": "Cookies Policy",
+  "Create an account": "Create an account",
+  "Customer Reviews": "Customer Reviews",
+  "Customer service": "Customer service",
+  "Default Billing Address": "Default Billing Address",
+  "Default Shipping Address": "Default Shipping Address",
+  "Delete": "Delete",
+  "Departments": "Departments",
+  "Description": "Description",
+  "Details and status orders": "Check the details and status of your orders in the online store. You can also cancel your order or request a return.",
+  "Discount": "Discount",
+  "Done": "Done",
+  "Download": "Download",
+  "Download all": "Download all",
+  "Edit": "Edit",
+  "Email address": "Email address",
+  "Empty": "Looks like you haven’t added any items to the bag yet. Start shopping to fill it in.",
+  "Enjoy your free account": "Enjoy these perks with your free account!",
+  "Enter promo code": "Enter promo code",
+  "Feedback": "Your feedback is important to us. Let us know what we could improve.",
+  "Feel free to edit": "Feel free to edit any of your details below so your account is always up to date",
+  "Filters": "Filter",
+  "Find out more": "Find out more",
+  "First Name": "First Name",
+  "Forgot Password": "If you can’t remember your password, you can reset it.",
+  "Forgot Password Modal Email": "Email you are using to sign in:",
+  "forgotPasswordConfirmation": "Thanks! If there is an account registered with the {0} email, you will find message with a password reset link in your inbox.",
+  "Forgotten password?": "Forgotten password?",
+  "Go back": "Go back",
+  "Go back shopping": "Go back shopping",
+  "Go back to shop": "Go back to shop",
+  "Go to checkout": "Go to checkout",
+  "Guarantee": "Guarantee",
+  "Help": "Help",
+  "Help & FAQs": "Help & FAQs",
+  "hide": "hide",
+  "Home": "Home",
+  "I agree to": "I agree to",
+  "I confirm subscription": "I confirm subscription",
+  "I want to create an account": "I want to create an account",
+  "Info after order": "You can log to your account using e-mail and password defined earlier. On your account you can edit your profile data, check history of transactions, edit subscription to newsletter.",
+  "Instruction1": "Take care of me",
+  "Instruction2": "Just here for the care instructions?",
+  "Instruction3": "Yeah, we thought so",
+  "It was not possible to request a new password, please check the entered email address.": "It was not possible to request a new password, please check the entered email address.",
+  "Item": "Item",
+  "Items": "Items",
+  "Kidswear": "Kidswear",
+  "Last Name": "Last Name",
+  "Let’s start now – we’ll help you": "Let’s start now – we’ll help you.",
+  "Log into your account": "Log into your account",
+  "Login": "Login",
+  "login in to your account": "login in to your account",
+  "Looks like you haven’t added any items to the bag yet. Start shopping to fill it in.": "Looks like you haven’t added any items to the bag yet. Start shopping to fill it in.",
+  "Make an order": "Make an order",
+  "Manage addresses": "Manage all the addresses you want (work place, home address...) This way you won\"t have to enter the address manually with each order.",
+  "Manage billing addresses": "Manage all the billing addresses you want (work place, home address...) This way you won\"t have to enter the billing address manually with each order.",
+  "Manage shipping addresses": "Manage all the shipping addresses you want (work place, home address...) This way you won\"t have to enter the shipping address manually with each order.",
+  "Match it with": "Match it with",
+  "Men fashion": "Men fashion",
+  "My billing and shipping address are the same": "My billing and shipping address are the same",
+  "My Cart": "My Cart",
+  "No account": "Don't have an account yet?",
+  "or": "or",
+  "or fill the details below": "or fill the details below",
+  "Order No.": "Order No.",
+  "Order summary": "Order summary",
+  "Other products you might like": "Other products you might like",
+  "Out of stock": "Out of stock",
+  "Password": "Password",
+  "Password Changed": "Password successfuly changed. You can now go back to homepage and sign in.",
+  "Pay for order": "Pay for order",
+  "Payment": "Payment",
+  "Payment & Delivery": "Payment & Delivery",
+  "Payment method": "Payment method",
+  "Payment methods": "Payment methods",
+  "Personal details": "Personal details",
+  "Please type your current password to change your email address.": "Please type your current password to change your email address.",
+  "Price": "Price",
+  "Privacy": "Privacy",
+  "Privacy Policy": "Privacy Policy",
+  "Product": "Product",
+  "Product suggestions": "Product suggestions",
+  "Products": "Products",
+  "Products found": "Products found",
+  "Purchase terms": "Purchase terms",
+  "Quality in the details": "Quality in the details",
+  "Quantity": "Quantity",
+  "Read all reviews": "Read all reviews",
+  "Read and understand": "I have read and understand the",
+  "Read reviews": "Read reviews",
+  "Register": "Register",
+  "Register today": "Register today",
+  "Remove from Wishlist": "Remove from Wishlist",
+  "Repeat Password": "Repeat Password",
+  "Reset Password": "Reset Password",
+  "Review my order": "Review my order",
+  "Same as shipping address": "Same as shipping address",
+  "Save changes": "Save changes",
+  "Save for later": "Save for later",
+  "Save Password": "Save Password",
+  "Search for items": "Search for items",
+  "Search results": "Search results",
+  "Sections that interest you": "Sections that interest you",
+  "See all results": "See all results",
+  "Select payment method": "Select payment method",
+  "Select shipping method": "Select shipping method",
+  "Send my feedback": "Send my feedback",
+  "Set up newsletter": "Set up your newsletter and we will send you information about new products and trends from the sections you selected every week.",
+  "Share your look": "Share your look",
+  "Shipping": "Shipping",
+  "Shipping address": "Shipping address",
+  "Shipping details": "Shipping details",
+  "Shipping method": "Shipping method",
+  "show more": "show more",
+  "Show on page": "Show on page",
+  "Sign in": "Sign in",
+  "Sign Up for Newsletter": "Sign Up for Newsletter",
+  "Size guide": "Size guide",
+  "Sort by": "Sort by",
+  "Sort: Default": "Default",
+  "Sort: Name A-Z": "Name A-Z",
+  "Sort: Name Z-A": "Name Z-A",
+  "Sort: Price from high to low": "Price from high to low",
+  "Sort: Price from low to high": "Price from low to high",
+  "Start shopping": "Start shopping",
+  "Subscribe": "Subscribe",
+  "Subscribe to newsletter": "Subscribe to newsletter",
+  "subscribeToNewsletterModalContent": "After signing up for the newsletter, you will receive special offers and messages from VSF via email. We will not sell or distribute your email to any third party at any time. Please see our {0}.",
+  "Subtotal": "Subtotal",
+  "Subtotal price": "Subtotal price",
+  "Successful placed order": "You have successfully placed the order. You can check status of your order by using our delivery status feature. You will receive an order confirmation e-mail with details of your order and a link to track its progress.",
+  "Terms and conditions": "Terms and conditions",
+  "Thank You Inbox": "If the message is not arriving in your inbox, try another email address you might’ve used to register.",
+  "Total": "Total",
+  "Total items": "Total items",
+  "Total price": "Total price",
+  "Update password": "Update password",
+  "Update personal data": "Update personal data",
+  "Use your personal data": "At Brand name, we attach great importance to privacy issues and are committed to protecting the personal data of our users. Learn more about how we care and use your personal data in the",
+  "User Account": "User Account",
+  "View": "View",
+  "View details": "View details",
+  "Who we are": "Who we are",
+  "Women fashion": "Women fashion",
+  "You are not authorized, please log in": "You are not authorized, please log in",
+  "You can unsubscribe at any time": "You can unsubscribe at any time",
+  "You currently have no orders": "You currently have no orders",
+  "You haven\’t searched for items yet": "You haven’t searched for items yet.",
+  "Your bag is empty": "Your bag is empty",
+  "Your current email address is": "Your current email address is",
+  "Your email": "Your email",
+  'You have submitted no reviews': 'You have submitted no reviews',
+  "The account sign-in was incorrect or your account is disabled temporarily. Please wait and try again later.":"The account sign-in was incorrect or your account is disabled temporarily. Please wait and try again later.",
+  "A customer with the same email address already exists in an associated website.": "A customer with the same email address already exists in an associated website.",
+  "Invalid email": "Invalid email",
+  "SUMMER COLLECTION {year}": "SUMMER COLLECTION {year}",
+  "Colorful summer dresses are already in store": "Colorful summer dresses are already in store",
+  "Learn more": "Learn more",
+  "Dresses": "Dresses",
+  "Cocktail & Party": "Cocktail & Party",
+  "Linen Dresses": "Linen Dresses",
+  "T-Shirts": "T-Shirts",
+  "The office life": "The office life",
+  "Find stunning women's cocktail dresses and party dresses. Stand out in lace and metallic cocktail dresses from all your favorite brands.": "Find stunning women's cocktail dresses and party dresses. Stand out in lace and metallic cocktail dresses from all your favorite brands.",
+  "Shop now": "Shop now",
+  "The Office Life": "The Office Life",
+  "Summer Sandals": "Summer Sandals",
+  "Eco Sandals": "Eco Sandals",
+  "Subscribe to Newsletters": "Subscribe to Newsletters",
+  "Be aware of upcoming sales and events. Receive gifts and special offers!": "Be aware of upcoming sales and events. Receive gifts and special offers",
+  "Fashion to take away": "Fashion to take away",
+  "Download our application to your mobile": "Download our application to your mobile",
+  "Share Your Look": "Share Your Look",
+  "My Account": "My Account",
+  "My profile": "My profile",
+  "Personal Details": "Personal Details",
+  "Addresses details": "Addresses details",
+  "My newsletter": "My newsletter",
+  "Log out": "Log out",
+  "My reviews": "My reviews",
+  "Order history": "Order history",
+  "Order details": "Order details",
+  "My wishlist": "My wishlist",
+  "Password change": "Password change",
+  "Personal data": "Personal data",
+  "Your e-mail": "Your e-mail",
+  "Current Password": "Current Password",
+  "You are not authorized, please log in.": "You are not authorized, please log in.",
+  "Go To Product": "Go To Product",
+  "Change to list view": "Change to list view",
+  "Change to grid view": "Change to grid view",
+  "Returns":"Returns",
+  "My orders": "My orders",
+  "Add the address": "Add the address",
+  "Set as default shipping": "Set as default shipping",
+  "Set as default billing": "Set as default billing",
+  "House/Apartment number": "House/Apartment number",
+  "Street Name": "Street Name",
+  "City": "City",
+  "State/Province": "State/Province",
+  "Zip-code": "Zip-code",
+  "Country": "Country",
+  "Phone number": "Phone number",
+  "Please select a country first":"Please select a country first",
+  "This field is required": "This field is required",
+  "The field should have at least 2 characters": "The field should have at least 2 characters",
+  "The field should have at least 4 characters": "The field should have at least 4 characters",
+  "The field should have at least 8 characters": "The field should have at least 8 characters",
+  "New Password": "New Password",
 };
diff --git a/layouts/default.vue b/layouts/default.vue
index c38521c..814a31e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,42 +1,42 @@
 <template>
   <div>
     <LazyHydrate when-visible>
-      <TopBar class="desktop-only" />
-    </LazyHydrate>
-
-    <AppHeader />
-
-    <div id="layout">
-      <nuxt :key="route.fullPath" />
-
-      <BottomNavigation />
       <CartSidebar />
+    </LazyHydrate>
+    <LazyHydrate when-visible>
       <WishlistSidebar />
+    </LazyHydrate>
+    <LazyHydrate when-visible>
       <LoginModal />
-      <Notification />
-    </div>
+    </LazyHydrate>
     <LazyHydrate when-visible>
-      <AppFooter />
+      <Notification />
     </LazyHydrate>
+    <TopBar class="desktop-only" />
+    <AppHeader />
+    <div id="layout">
+      <nuxt :key="route.fullPath" />
+    </div>
+    <BottomNavigation />
+    <AppFooter />
   </div>
 </template>
 
 <script>
 import LazyHydrate from 'vue-lazy-hydration';
-import { onSSR } from '@vue-storefront/core';
-import { useRoute, defineComponent } from '@nuxtjs/composition-api';
+import { useRoute, defineComponent, onMounted } from '@nuxtjs/composition-api';
 import {
   useUser,
 } from '@vue-storefront/magento';
+import { useMagentoConfiguration } from '~/composables/useMagentoConfiguration';
 import AppHeader from '~/components/AppHeader.vue';
 import BottomNavigation from '~/components/BottomNavigation.vue';
-import AppFooter from '~/components/AppFooter.vue';
 import TopBar from '~/components/TopBar.vue';
 import CartSidebar from '~/components/CartSidebar.vue';
 import WishlistSidebar from '~/components/WishlistSidebar.vue';
 import LoginModal from '~/components/LoginModal.vue';
 import Notification from '~/components/Notification';
-import { useMagentoConfiguration } from '~/composables/useMagentoConfiguration';
+import AppFooter from '~/components/AppFooter.vue';
 
 export default defineComponent({
   name: 'DefaultLayout',
@@ -56,12 +56,11 @@ export default defineComponent({
   setup() {
     const route = useRoute();
     const { load: loadUser } = useUser();
-
     const { loadConfiguration } = useMagentoConfiguration();
 
-    onSSR(async () => {
-      await loadConfiguration();
-      await loadUser();
+    onMounted(() => {
+      loadConfiguration();
+      loadUser();
     });
 
     return {
diff --git a/middleware.config.js b/middleware.config.js
index 91ab3a4..e7e79cd 100755
--- a/middleware.config.js
+++ b/middleware.config.js
@@ -25,6 +25,15 @@ module.exports = {
         customApolloHttpLinkOptions: {
           useGETForQueries: false,
         },
+        magentoBaseUrl: config.get('magentoBaseUrl'),
+        imageProvider: config.get('imageProvider'),
+        recaptcha: {
+          isEnabled: config.get('recaptchaEnabled'),
+          sitekey: config.get('recaptchaSiteKey'),
+          secretkey: config.get('recaptchaSecretkey'),
+          version: config.get('recaptchaVersion'),
+          score: config.get('recaptchaMinScore'),
+        },
       },
     },
   },
diff --git a/nuxt.config.js b/nuxt.config.js
index dc4bf51..8c1cffc 100755
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -14,6 +14,8 @@ const {
         externalCheckout,
         defaultStore,
         facets,
+        magentoBaseUrl,
+        imageProvider,
       },
     },
   },
@@ -74,7 +76,10 @@ export default {
       externalCheckout,
       defaultStore,
       facets,
+      magentoBaseUrl,
+      imageProvider,
     }],
+    '@nuxt/image',
   ],
   modules: [
     ['nuxt-i18n', {
@@ -83,6 +88,17 @@ export default {
     'cookie-universal-nuxt',
     'vue-scrollto/nuxt',
     '@vue-storefront/middleware/nuxt',
+    '@nuxt/image',
+    ['@vue-storefront/cache/nuxt', {
+      enabled: false,
+      invalidation: {
+        handlers: [
+          '@vue-storefront/cache/defaultHandler',
+        ],
+      },
+      driver: [
+      ],
+    }],
   ],
   i18n: {
     country: 'US',
@@ -92,11 +108,13 @@ export default {
         code: 'default',
         file: 'en.js',
         iso: 'en_US',
+        defaultCurrency: 'USD',
       },
       {
         code: 'german',
         file: 'de.js',
         iso: 'de_DE',
+        defaultCurrency: 'EUR',
       },
     ],
     defaultLocale: 'default',
@@ -168,44 +186,17 @@ export default {
         }),
       }),
     ],
-    extend(cfg, ctx) {
-      // eslint-disable-next-line no-param-reassign
-      cfg.devtool = ctx.isClient ? 'eval-source-map' : 'inline-source-map';
-
-      if (ctx && ctx.isClient) {
-        // eslint-disable-next-line no-param-reassign
-        cfg.optimization = {
-          ...cfg.optimization,
-          mergeDuplicateChunks: true,
-          splitChunks: {
-            ...cfg.optimization.splitChunks,
-            automaticNameDelimiter: '.',
-            chunks: 'all',
-            enforceSizeThreshold: 40_000,
-            maxAsyncRequests: 30,
-            maxInitialRequests: 30,
-            maxSize: 128_000,
-            minChunks: 1,
-            minSize: 0,
-            cacheGroups: {
-              ...cfg.optimization.splitChunks.cacheGroups,
-              vendor: {
-                test: /[/\\]node_modules[/\\]/,
-                reuseExistingChunk: true,
-                name: (module) => `${module
-                  .context
-                  .match(/[/\\]node_modules[/\\](.*?)([/\\]|$)/)[1]
-                  .replace(/[.@_]/gm, '')}`,
-              },
-            },
-          },
-        };
-      }
+    extractCSS: {
+      allChunks: true,
     },
   },
   plugins: [
     '~/plugins/token-expired',
     '~/plugins/i18n',
+    '~/plugins/fcPlugin',
+  ],
+  serverMiddleware: [
+    '~/serverMiddleware/body-parser.js',
   ],
   router: {
     extendRoutes(routes) {
diff --git a/package.json b/package.json
index 207149c..851b63f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vue-storefront/magento-theme",
-  "version": "1.0.0-rc.5.3",
+  "version": "1.0.0-rc.5.4",
   "private": true,
   "license": "MIT",
   "homepage": "https://github.com/vuestorefront/magento2",
@@ -32,8 +32,9 @@
     "@nuxtjs/pwa": "^3.3.5",
     "@nuxtjs/style-resources": "^1.2.1",
     "@storefront-ui/vue": "^0.11.5",
+    "@vue-storefront/cache": "^2.5.4",
     "@vue-storefront/core": "~2.5.4",
-    "@vue-storefront/magento": "1.0.0-rc.5.3",
+    "@vue-storefront/magento": "1.0.0-rc.5.4",
     "@vue-storefront/middleware": "~2.5.4",
     "@vue-storefront/nuxt": "~2.5.4",
     "@vue-storefront/nuxt-theme": "~2.5.4",
@@ -54,6 +55,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.7",
+    "@nuxt/image": "^0.6.0",
     "@nuxt/types": "latest",
     "@nuxt/typescript-build": "latest",
     "@testing-library/jest-dom": "^5.16.1",
@@ -65,6 +67,7 @@
     "cypress": "^9.2.1",
     "cypress-pipe": "^2.0.0",
     "cypress-tags": "^0.3.0",
+    "deepmerge": "^4.2.2",
     "dotenv": "^12.0.1",
     "ejs": "^3.1.6",
     "jest": "^27.4.7",
diff --git a/pages/Category.vue b/pages/Category.vue
index 22bafad..d32679f 100644
--- a/pages/Category.vue
+++ b/pages/Category.vue
@@ -122,9 +122,11 @@
               class="products__product-card"
               :style="{ '--index': i }"
               :title="productGetters.getName(product)"
-              :image="productGetters.getProductThumbnailImage(product)"
-              :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
-              :special-price="productGetters.getPrice(product).special && $n(productGetters.getPrice(product).special, 'currency')"
+              :image-width="imageSizes.productCard.width"
+              :image-height="imageSizes.productCard.height"
+              :image="getMagentoImage(productGetters.getProductThumbnailImage(product))"
+              :regular-price="$fc(productGetters.getPrice(product).regular)"
+              :special-price="productGetters.getPrice(product).special && $fc(productGetters.getPrice(product).special)"
               :score-rating="productGetters.getAverageRating(product)"
               :reviews-count="productGetters.getTotalReviews(product)"
               :show-add-to-cart-button="true"
@@ -141,7 +143,37 @@
               "
               @click:wishlist="addItemToWishlist(product)"
               @click:add-to-cart="addItemToCart({ product, quantity: 1 })"
-            />
+            >
+              <template #image="imageSlotProps">
+                <SfButton
+                  :link="imageSlotProps.link"
+                  class="sf-button--pure sf-product-card__link"
+                  data-testid="product-link"
+                  aria-label="Go To Product"
+                  v-on="$listeners"
+                >
+                  <template v-if="Array.isArray(imageSlotProps.image)">
+                    <nuxt-img
+                      v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
+                      :key="key"
+                      class="sf-product-card__picture"
+                      :src="picture"
+                      :alt="imageSlotProps.title"
+                      :width="imageSlotProps.imageWidth"
+                      :height="imageSlotProps.imageHeight"
+                    />
+                  </template>
+                  <nuxt-img
+                    v-else
+                    class="sf-product-card__image lol"
+                    :src="imageSlotProps.image"
+                    :alt="imageSlotProps.title"
+                    :width="imageSlotProps.imageWidth"
+                    :height="imageSlotProps.imageHeight"
+                  />
+                </SfButton>
+              </template>
+            </SfProductCard>
           </transition-group>
           <transition-group
             v-else
@@ -157,14 +189,16 @@
               :style="{ '--index': i }"
               :title="productGetters.getName(product)"
               :description="productGetters.getDescription(product)"
-              :image="productGetters.getProductThumbnailImage(product)"
-              :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
-              :special-price="productGetters.getPrice(product).special && $n(productGetters.getPrice(product).special, 'currency')"
+              :image="getMagentoImage(productGetters.getProductThumbnailImage(product))"
+              :image-width="imageSizes.productCardHorizontal.width"
+              :image-height="imageSizes.productCardHorizontal.height"
+              :regular-price="$fc(productGetters.getPrice(product).regular)"
+              :special-price="productGetters.getPrice(product).special && $fc(productGetters.getPrice(product).special)"
               :score-rating="productGetters.getAverageRating(product)"
               :reviews-count="productGetters.getTotalReviews(product)"
               :is-in-wishlist="isInWishlist({product})"
-              :is-in-wishlist-icon="isAuthenticated ? 'heart_fill' : ''"
-              :wishlist-icon="isAuthenticated ? 'heart' : ''"
+              :is-in-wishlist-icon="isAuthenticated ? '' : ''"
+              :wishlist-icon="isAuthenticated ? '' : ''"
               :link="
                 localePath(
                   `/p/${productGetters.getProductSku(
@@ -172,9 +206,38 @@
                   )}${productGetters.getSlug(product, product.categories[0])}`
                 )
               "
-              @click:wishlist="addItemToWishlist(product)"
               @click:add-to-cart="addItemToCart({ product, quantity: 1 })"
+              @click:wishlist="addItemToWishlist(product)"
             >
+              <template #image="imageSlotProps">
+                <SfLink
+                  :link="imageSlotProps.link"
+                  class="
+                    sf-product-card-horizontal__link
+                    sf-product-card-horizontal__link--image
+                  "
+                >
+                  <template v-if="Array.isArray(imageSlotProps.image)">
+                    <nuxt-img
+                      v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
+                      :key="key"
+                      class="sf-product-card-horizontal__picture"
+                      :src="picture"
+                      :alt="imageSlotProps.title"
+                      :width="imageSlotProps.imageWidth"
+                      :height="imageSlotProps.imageHeight"
+                    />
+                  </template>
+                  <nuxt-img
+                    v-else
+                    class="sf-product-card-horizontal__image"
+                    :src="imageSlotProps.image"
+                    :alt="imageSlotProps.title"
+                    :width="imageSlotProps.imageWidth"
+                    :height="imageSlotProps.imageHeight"
+                  />
+                </SfLink>
+              </template>
               <template #configuration>
                 <SfProperty
                   class="desktop-only"
@@ -190,10 +253,10 @@
               </template>
               <template #actions>
                 <SfButton
-                  class="sf-button--text desktop-only"
-                  style="margin: 0 0 1rem auto; display: block"
+                  class="sf-button--text products__product-card-horizontal__add-to-wishlist"
+                  @click="addItemToWishlist(product)"
                 >
-                  {{ $t('Save for later') }}
+                  {{ isInWishlist({product}) ? $t('Remove from Wishlist') : $t('Save for later') }}
                 </SfButton>
               </template>
             </SfProductCardHorizontal>
@@ -368,11 +431,12 @@ import {
   useWishlist,
 } from '@vue-storefront/magento';
 import { onSSR, useVSFContext } from '@vue-storefront/core';
-import CategorySidebarMenu from '~/components/Category/CategorySidebarMenu';
+import { useCache, CacheTagPrefix } from '@vue-storefront/cache';
 import { useUrlResolver } from '~/composables/useUrlResolver.ts';
-import { useUiHelpers, useUiState } from '~/composables';
+import { useUiHelpers, useUiState, useImage } from '~/composables';
 import cacheControl from '~/helpers/cacheControl';
 import { useAddToCart } from '~/helpers/cart/addToCart';
+import CategorySidebarMenu from '~/components/Category/CategorySidebarMenu';
 
 // TODO(addToCart qty, horizontal): https://github.com/vuestorefront/storefront-ui/issues/1606
 export default defineComponent({
@@ -402,6 +466,7 @@ export default defineComponent({
   }),
   transition: 'fade',
   setup() {
+    const { addTags } = useCache();
     const uiHelpers = useUiHelpers();
     const uiState = useUiState();
     const {
@@ -431,7 +496,11 @@ export default defineComponent({
       isInCart,
     } = useAddToCart();
 
-    const selectedFilters = ref(Object.fromEntries((magentoConfig.facets.available).map((curr) => [curr, (curr === 'price' ? '' : [])])));
+    const selectedFilters = ref(Object.fromEntries(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      (magentoConfig.facets.available)
+        .map((curr) => [curr, (curr === 'price' ? '' : [])]),
+    ));
 
     const products = computed(() => facetGetters.getProducts(result.value));
 
@@ -533,6 +602,7 @@ export default defineComponent({
       const categoryId = activeCategoryUid(routeData.value?.entity_uid)
         ? activeCategoryUid(routeData.value?.entity_uid)
         : routeData.value?.entity_uid;
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       await search({
         ...uiHelpers.getFacetsFromURL(),
         categoryId,
@@ -572,8 +642,19 @@ export default defineComponent({
         await searchCategoryProduct();
         isProductsLoading.value = false;
       }
+
+      const tags = [{ prefix: CacheTagPrefix.View, value: 'category' }];
+      // eslint-disable-next-line no-underscore-dangle
+      const productTags = products.value.map((product) => ({ prefix: CacheTagPrefix.Product, value: product.uid }));
+
+      const categoriesTags = categoryTree.value.items.map((category) => ({ prefix: CacheTagPrefix.Category, value: category.slug }));
+
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      addTags([...tags, ...productTags, ...categoriesTags]);
     });
 
+    const { getMagentoImage, imageSizes } = useImage();
+
     return {
       routeData,
       ...uiState,
@@ -598,6 +679,8 @@ export default defineComponent({
       selectFilter,
       sortBy,
       uiHelpers,
+      getMagentoImage,
+      imageSizes,
     };
   },
 });
@@ -839,6 +922,13 @@ export default defineComponent({
         --image-height: 7.0625rem;
       }
     }
+
+    &__add-to-wishlist {
+      @include for-mobile {
+        margin: 1rem auto;
+      }
+      display: block
+    }
   }
 
   &__slide-enter {
diff --git a/pages/Checkout.vue b/pages/Checkout.vue
index 3abe653..9ca3e84 100644
--- a/pages/Checkout.vue
+++ b/pages/Checkout.vue
@@ -11,7 +11,9 @@
           <SfStep
             v-for="(step, key) in STEPS"
             :key="key"
-            :name="step"
+            :name="$t(step.title)"
+            :active="1"
+            can-go-back
           >
             <nuxt-child />
           </SfStep>
@@ -32,7 +34,11 @@
 <script>
 import { SfSteps } from '@storefront-ui/vue';
 import {
-  computed, defineComponent, ref, useRoute, useRouter, useContext,
+  useCart,
+  cartGetters,
+} from '@vue-storefront/magento';
+import {
+  computed, defineComponent, ref, useRoute, useRouter, useContext, onMounted,
 } from '@nuxtjs/composition-api';
 import CartPreview from '~/components/Checkout/CartPreview.vue';
 
@@ -47,22 +53,51 @@ export default defineComponent({
     const { app } = useContext();
     const { path } = route.value;
     const router = useRouter();
+    const { cart, load } = useCart();
+    const products = computed(() => cartGetters.getItems(cart.value));
     const currentStep = computed(() => path.split('/').pop());
-    const STEPS = ref({
-      'user-account': 'User Account',
-      shipping: 'Shipping',
-      billing: 'Billing',
-      payment: 'Payment',
-    });
-    const currentStepIndex = computed(() => Object.keys(STEPS.value)
-      .indexOf(currentStep.value));
+
+    const STEPS = ref(
+      [
+        {
+          title: 'User Account',
+          url: 'user-account',
+        },
+        {
+          title: 'Shipping',
+          url: 'shipping',
+        },
+        {
+          title: 'Billing',
+          url: 'billing',
+        },
+        {
+          title: 'Payment',
+          url: 'payment',
+        },
+      ],
+    );
+
+    const currentStepIndex = computed(() => STEPS.value
+      .findIndex((step) => step.url === currentStep.value));
     const isThankYou = computed(() => currentStep.value === 'thank-you');
 
     const handleStepClick = async (stepIndex) => {
-      const key = Object.keys(STEPS.value)[stepIndex];
-      await router.push(`${app.localePath(`/checkout/${key}`)}`);
+      if (stepIndex <= currentStepIndex.value) {
+        const { url } = STEPS.value[stepIndex];
+        await router.push(`${app.localePath(`/checkout/${url}`)}`);
+      }
     };
 
+    onMounted(async () => {
+      await load();
+      if (products.value.length === 0 && currentStep.value !== 'thank-you') {
+        await router.push(app.localePath('/'));
+      }
+
+      return null;
+    });
+
     return {
       handleStepClick,
       STEPS,
@@ -80,6 +115,7 @@ export default defineComponent({
   @include for-desktop {
     max-width: 1240px;
     margin: 0 auto;
+    padding: 0 1.5rem;
   }
 }
 
diff --git a/pages/Checkout/Billing.vue b/pages/Checkout/Billing.vue
index 15c7c67..ef8e5c8 100644
--- a/pages/Checkout/Billing.vue
+++ b/pages/Checkout/Billing.vue
@@ -9,23 +9,30 @@
     <form
       @submit.prevent="handleSubmit(handleAddressSubmit(reset))"
     >
-      <UserBillingAddresses
-        v-if="isAuthenticated && hasSavedBillingAddress"
-        v-model="setAsDefault"
-        v-e2e="'billing-addresses'"
-        :current-address-id="currentAddressId || NOT_SELECTED_ADDRESS"
-        @setCurrentAddress="handleSetCurrentAddress"
-      />
       <SfCheckbox
         v-e2e="'copy-address'"
         :selected="sameAsShipping"
-        label="Copy address data from shipping"
+        :label="$t('My billing and shipping address are the same')"
         name="copyShippingAddress"
         class="form__element"
         @change="handleCheckSameAddress"
       />
+      <div v-if="sameAsShipping" class="copy__shipping__addresses">
+        <div class="copy__shipping__address">
+          <div class="sf-address">
+            <UserAddressDetails :address="{... billingDetails, region: {region_code: billingDetails.region}}" />
+          </div>
+        </div>
+      </div>
+      <UserBillingAddresses
+        v-if="!sameAsShipping && isAuthenticated && hasSavedBillingAddress"
+        v-model="setAsDefault"
+        v-e2e="'billing-addresses'"
+        :current-address-id="currentAddressId || NOT_SELECTED_ADDRESS"
+        @setCurrentAddress="handleSetCurrentAddress"
+      />
       <div
-        v-if="canAddNewAddress"
+        v-if="!sameAsShipping && canAddNewAddress"
         class="form"
       >
         <ValidationProvider
@@ -222,7 +229,7 @@
         </ValidationProvider>
       </div>
       <SfButton
-        v-if="!canAddNewAddress"
+        v-if="!sameAsShipping && !canAddNewAddress"
         class="color-light form__action-button form__action-button--add-address"
         type="submit"
         @click="handleAddNewAddressBtnClick"
@@ -243,7 +250,7 @@
             to="localePath('/checkout/shipping')"
             class="sf-button sf-button--underlined form__back-button smartphone-only"
           >
-            Go back
+            {{ $t('Go back') }}
           </nuxt-link>
         </div>
       </div>
@@ -259,6 +266,7 @@ import {
   SfSelect,
   SfCheckbox,
 } from '@storefront-ui/vue';
+import UserAddressDetails from '~/components/UserAddressDetails.vue';
 import {
   useUserBilling,
   userBillingGetters,
@@ -270,7 +278,6 @@ import {
 } from '@vue-storefront/magento';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { required, min, digits } from 'vee-validate/dist/rules';
-import { onSSR } from '@vue-storefront/core';
 import {
   ref,
   computed,
@@ -281,6 +288,8 @@ import {
   useContext,
 } from '@nuxtjs/composition-api';
 import { addressFromApiToForm, formatAddressReturnToData } from '~/helpers/checkout/address';
+import { mergeItem } from '~/helpers/asyncLocalStorage';
+import { isPreviousStepValid } from '~/helpers/checkout/steps';
 
 const NOT_SELECTED_ADDRESS = '';
 
@@ -308,6 +317,7 @@ export default defineComponent({
     ValidationProvider,
     ValidationObserver,
     UserBillingAddresses: () => import('~/components/Checkout/UserBillingAddresses.vue'),
+    UserAddressDetails,
   },
   setup() {
     const router = useRouter();
@@ -363,13 +373,14 @@ export default defineComponent({
 
     const handleAddressSubmit = (reset) => async () => {
       const addressId = currentAddressId.value;
-      await save({
+      const billingDetailsData = {
         billingDetails: {
           ...billingDetails.value,
           customerAddressId: addressId,
           sameAsShipping: sameAsShipping.value,
         },
-      });
+      };
+      await save(billingDetailsData);
       if (addressId !== NOT_SELECTED_ADDRESS && setAsDefault.value) {
         const chosenAddress = userBillingGetters.getAddresses(
           userBilling.value,
@@ -380,6 +391,7 @@ export default defineComponent({
         }
       }
       reset();
+      await mergeItem('checkout', { billing: billingDetailsData });
       await router.push(`${app.localePath('/checkout/payment')}`);
       isBillingDetailsStepCompleted.value = true;
     };
@@ -395,7 +407,6 @@ export default defineComponent({
         oldBilling = { ...billingDetails.value };
         billingDetails.value = { ...formatAddressReturnToData(shippingDetails.value) };
         currentAddressId.value = NOT_SELECTED_ADDRESS;
-        canAddNewAddress.value = true;
         setAsDefault.value = false;
         if (billingDetails.value.country_code) {
           await searchCountry({ id: billingDetails?.value.country_code });
@@ -450,14 +461,17 @@ export default defineComponent({
       billingDetails.value = addressFromApiToForm(addr || {});
     });
 
-    onSSR(async () => {
+    onMounted(async () => {
+      const validStep = await isPreviousStepValid('shipping');
+      if (!validStep) {
+        await router.push(app.localePath('/checkout/user-account'));
+      }
+
       await Promise.all([
         loadCountries(),
         load(),
       ]);
-    });
 
-    onMounted(async () => {
       if (billingDetails.value?.country_code) {
         await searchCountry({ id: billingDetails.value.country_code });
       }
@@ -513,6 +527,29 @@ export default defineComponent({
   --heading-title-font-weight: var(--font-weight--bold);
 }
 
+.copy__shipping {
+  &__address {
+    margin-bottom: var(--spacer-xs);
+    @include for-desktop {
+      margin-right: var(--spacer-sm);
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+    }
+
+    .sf-address {
+      padding: var(--spacer-xs);
+    }
+  }
+
+  &__addresses {
+    margin-bottom: var(--spacer-xl);
+    @include for-desktop {
+      display: flex;
+    }
+  }
+}
+
 .form {
   &__select {
     display: flex;
diff --git a/pages/Checkout/Payment.vue b/pages/Checkout/Payment.vue
index 52e7a6c..503672c 100644
--- a/pages/Checkout/Payment.vue
+++ b/pages/Checkout/Payment.vue
@@ -25,9 +25,11 @@
         class="table__row"
       >
         <SfTableData class="table__image">
-          <SfImage
-            :src="cartGetters.getItemImage(product)"
+          <nuxt-img
+            :src="getMagentoImage(cartGetters.getItemImage(product))"
             :alt="cartGetters.getItemName(product)"
+            :width="imageSizes.cartItem.width"
+            :height="imageSizes.cartItem.height"
           />
         </SfTableData>
         <SfTableData class="table__data table__description table__data">
@@ -65,8 +67,8 @@
         </SfTableData>
         <SfTableData class="table__data price">
           <SfPrice
-            :regular="$n(cartGetters.getItemPrice(product).regular, 'currency')"
-            :special="cartGetters.getItemPrice(product).special && $n(cartGetters.getItemPrice(product).special, 'currency')"
+            :regular="$fc(cartGetters.getItemPrice(product).regular)"
+            :special="cartGetters.getItemPrice(product).special && $fc(cartGetters.getItemPrice(product).special)"
             class="product-price"
           />
         </SfTableData>
@@ -77,13 +79,13 @@
         <div class="summary__total">
           <SfProperty
             name="Subtotal"
-            :value="$n(totals.subtotal, 'currency')"
+            :value="$fc(totals.subtotal)"
             class="sf-property--full-width property"
           />
           <SfProperty
             v-if="hasDiscounts"
             :name="$t('Discount')"
-            :value="$n(discountsAmount, 'currency')"
+            :value="$fc(discountsAmount)"
             class="sf-property--full-width sf-property--small property"
           />
         </div>
@@ -92,7 +94,7 @@
           class="summary__total"
         >
           <SfProperty
-            :value="$n(getShippingMethodPrice(selectedShippingMethod), 'currency')"
+            :value="$fc(getShippingMethodPrice(selectedShippingMethod))"
             class="sf-property--full-width property"
           >
             <template #name>
@@ -107,7 +109,7 @@
 
         <SfProperty
           name="Total price"
-          :value="$n(totals.total, 'currency')"
+          :value="$fc(totals.total)"
           class="sf-property--full-width sf-property--large summary__property-total"
         />
 
@@ -160,18 +162,17 @@ import {
   SfCheckbox,
   SfButton,
   SfDivider,
-  SfImage,
   SfPrice,
   SfProperty,
   SfLink,
 } from '@storefront-ui/vue';
-import { onSSR, useVSFContext } from '@vue-storefront/core';
+import { useVSFContext } from '@vue-storefront/core';
 import {
   ref,
   computed,
   defineComponent,
   useRouter,
-  useContext,
+  useContext, onMounted
 } from '@nuxtjs/composition-api';
 import {
   useMakeOrder,
@@ -179,6 +180,9 @@ import {
   cartGetters,
 } from '@vue-storefront/magento';
 import getShippingMethodPrice from '~/helpers/checkout/getShippingMethodPrice';
+import { useImage } from '~/composables';
+import { removeItem } from '~/helpers/asyncLocalStorage';
+import { isPreviousStepValid } from '~/helpers/checkout/steps';
 
 export default defineComponent({
   name: 'ReviewOrderAndPayment',
@@ -188,7 +192,6 @@ export default defineComponent({
     SfCheckbox,
     SfButton,
     SfDivider,
-    SfImage,
     SfPrice,
     SfProperty,
     SfLink,
@@ -205,7 +208,12 @@ export default defineComponent({
     const getAttributes = (product) => product.configurable_options || [];
     const getBundles = (product) => product.bundle_options?.map((b) => b.values).flat() || [];
 
-    onSSR(async () => {
+    onMounted(async () => {
+      const validStep = await isPreviousStepValid('billing');
+      if (!validStep) {
+        await router.push(app.localePath('/checkout/user-account'));
+      }
+
       await load();
     });
 
@@ -214,6 +222,7 @@ export default defineComponent({
       setCart(null);
       $magento.config.state.setCartId();
       await load();
+      await removeItem('checkout');
       await router.push(`${app.localePath(`/checkout/thank-you?order=${order.value.order_number}`)}`);
     };
 
@@ -221,6 +230,8 @@ export default defineComponent({
     const hasDiscounts = computed(() => discounts.value.length > 0);
     const discountsAmount = computed(() => -1 * discounts.value.reduce((a, el) => el.value + a, 0));
 
+    const { getMagentoImage, imageSizes } = useImage();
+
     return {
       cart,
       cartGetters,
@@ -238,6 +249,8 @@ export default defineComponent({
       totals: computed(() => cartGetters.getTotals(cart.value)),
       getAttributes,
       getBundles,
+      getMagentoImage,
+      imageSizes,
     };
   },
 });
@@ -298,7 +311,7 @@ export default defineComponent({
 
 .summary {
   &__terms {
-    margin: var(--spacer-base) 0 0 0;
+    margin: var(--spacer-base) 0 0 var(--spacer-sm);
   }
 
   &__total {
@@ -344,7 +357,7 @@ export default defineComponent({
   }
 
   &__property-total {
-    margin: var(--spacer-xl) 0 0 0;
+    margin: var(--spacer-xl) 0 var(--spacer-sm) 0;
   }
 }
 
diff --git a/pages/Checkout/Shipping.vue b/pages/Checkout/Shipping.vue
index 9d8dd16..1a38891 100644
--- a/pages/Checkout/Shipping.vue
+++ b/pages/Checkout/Shipping.vue
@@ -124,7 +124,7 @@
             name="state"
             class="form__element form__element--half form__element--half-even"
             :valid="!!shippingDetails.country_code"
-            :error-message="!shippingDetails.country_code ? 'Please select a country first' : ''"
+            :error-message="!shippingDetails.country_code ? $t('Please select a country first') : ''"
             @input="region => changeShippingDetails('region', region)"
           />
           <SfSelect
@@ -251,9 +251,8 @@ import {
   computed,
   watch,
   onMounted,
-  defineComponent,
+  defineComponent, useRouter, useContext,
 } from '@nuxtjs/composition-api';
-import { onSSR } from '@vue-storefront/core';
 import {
   addressGetter,
   useCountrySearch,
@@ -265,6 +264,8 @@ import {
 import { required, min, digits } from 'vee-validate/dist/rules';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { addressFromApiToForm } from '~/helpers/checkout/address';
+import { mergeItem } from '~/helpers/asyncLocalStorage';
+import { isPreviousStepValid } from '~/helpers/checkout/steps';
 
 const NOT_SELECTED_ADDRESS = '';
 
@@ -294,6 +295,8 @@ export default defineComponent({
     VsfShippingProvider: () => import('~/components/Checkout/VsfShippingProvider.vue'),
   },
   setup() {
+    const router = useRouter();
+    const { app } = useContext();
     const {
       load,
       save,
@@ -322,6 +325,7 @@ export default defineComponent({
     const isShippingDetailsStepCompleted = ref(false);
 
     const canMoveForward = computed(() => !loading.value && shippingDetails.value && Object.keys(
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       shippingDetails.value,
     ).length > 0);
 
@@ -343,6 +347,7 @@ export default defineComponent({
         ...shippingDetails.value,
         customerAddressId: addressId,
       };
+      await mergeItem('checkout', { shipping: shippingDetailsData });
       // @TODO remove ignore when https://github.com/vuestorefront/vue-storefront/issues/5967 is applied
       // @ts-ignore
       await save({ shippingDetails: shippingDetailsData });
@@ -401,14 +406,17 @@ export default defineComponent({
       shippingDetails.value = addressFromApiToForm(addr || {});
     });
 
-    onSSR(async () => {
+    onMounted(async () => {
+      const validStep = await isPreviousStepValid('user-account');
+      if (!validStep) {
+        await router.push(app.localePath('/checkout/user-account'));
+      }
+
       await Promise.all([
         loadCountries(),
         load(),
       ]);
-    });
 
-    onMounted(async () => {
       if (shippingDetails.value?.country_code) {
         await searchCountry({ id: shippingDetails.value.country_code });
       }
@@ -422,6 +430,7 @@ export default defineComponent({
         return;
       }
 
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       const hasEmptyShippingDetails = !shippingDetails.value || Object.keys(shippingDetails.value).length === 0;
       if (hasEmptyShippingDetails) {
         selectDefaultAddress();
diff --git a/pages/Checkout/UserAccount.vue b/pages/Checkout/UserAccount.vue
index d8f63f9..00810b3 100644
--- a/pages/Checkout/UserAccount.vue
+++ b/pages/Checkout/UserAccount.vue
@@ -110,6 +110,7 @@
         class="form__element"
         :disabled="createUserAccount"
       />
+      <recaptcha v-if="isRecaptchaEnabled" />
       <div class="form">
         <div class="form__action">
           <SfButton
@@ -139,15 +140,16 @@ import {
   computed,
   defineComponent,
   useRouter,
-  useContext,
+  useContext, onMounted,
 } from '@nuxtjs/composition-api';
 import { useUser, useGuestUser } from '@vue-storefront/magento';
 import {
   required, min, email,
 } from 'vee-validate/dist/rules';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
-import { customerPasswordRegExp, invalidPasswordMsg } from '../../helpers/customer/regex';
 import { useUiNotification } from '~/composables';
+import { getItem, mergeItem } from '~/helpers/asyncLocalStorage';
+import { customerPasswordRegExp, invalidPasswordMsg } from '../../helpers/customer/regex';
 
 extend('required', {
   ...required,
@@ -180,7 +182,9 @@ export default defineComponent({
   },
   setup() {
     const router = useRouter();
-    const { app } = useContext();
+    const { app, $recaptcha, $config } = useContext();
+    const isRecaptchaEnabled = ref(typeof $recaptcha !== 'undefined' && $config.isRecaptcha);
+
     const {
       attachToCart,
       loading: loadingGuestUser,
@@ -216,7 +220,17 @@ export default defineComponent({
     });
 
     const handleFormSubmit = (reset) => async () => {
+      if (isRecaptchaEnabled.value) {
+        $recaptcha.init();
+      }
+
       if (!isAuthenticated.value) {
+        if (isRecaptchaEnabled.value && createUserAccount.value) {
+          const recaptchaToken = await $recaptcha.getResponse();
+          form.value.recaptchaToken = recaptchaToken;
+          form.value.recaptchaInstance = $recaptcha;
+        }
+
         await (
           !createUserAccount.value
             ? attachToCart({ email: form.value.email })
@@ -225,15 +239,22 @@ export default defineComponent({
       }
 
       if (loginUserAccount.value) {
+        const recaptchaParams = {};
+        if (isRecaptchaEnabled.value) {
+          recaptchaParams.recaptchaToken = await $recaptcha.getResponse();
+        }
+
         await login({
           user: {
             username: form.value.email,
             password: form.value.password,
+            ...recaptchaParams,
           },
         });
       }
 
       if (!hasError.value) {
+        await mergeItem('checkout', { 'user-account': form.value });
         await router.push(`${app.localePath('/checkout/shipping')}`);
         reset();
         isFormSubmitted.value = true;
@@ -247,11 +268,15 @@ export default defineComponent({
           title: 'Error',
         });
       }
+
+      if (isRecaptchaEnabled.value) {
+        // reset recaptcha
+        $recaptcha.reset();
+      }
     };
 
     onSSR(async () => {
       await load();
-
       if (isAuthenticated.value) {
         form.value.firstname = user.value.firstname;
         form.value.lastname = user.value.lastname;
@@ -259,6 +284,16 @@ export default defineComponent({
       }
     });
 
+    onMounted(async () => {
+      const checkout = await getItem('checkout');
+      if (checkout && checkout['user-account']) {
+        const data = checkout['user-account'];
+        form.value.email = data.email;
+        form.value.firstname = data.firstname;
+        form.value.lastname = data.lastname;
+      }
+    });
+
     return {
       canMoveForward,
       createUserAccount,
@@ -270,6 +305,7 @@ export default defineComponent({
       loading,
       loginUserAccount,
       user,
+      isRecaptchaEnabled,
     };
   },
 });
diff --git a/pages/Checkout/__tests__/Shipping.spec.js b/pages/Checkout/__tests__/Shipping.spec.js
new file mode 100644
index 0000000..0cbf614
--- /dev/null
+++ b/pages/Checkout/__tests__/Shipping.spec.js
@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/vue';
+import { useRouter } from '@nuxtjs/composition-api';
+import { useBilling, useUserBilling, useShipping, useCountrySearch, useGuestUser, useUser } from '@vue-storefront/magento';
+import { render, useBillingMock, useUserBillingMock, useShippingMock, useCountrySearchMock, useUserMock, useGuestUserMock } from '~/test-utils';
+
+import Billing from '../Billing';
+
+jest.mock('@vue-storefront/magento', () => ({
+  useBilling: jest.fn(),
+  useCountrySearch: jest.fn(),
+  useGuestUser: jest.fn(),
+  useShipping: jest.fn(),
+  useUser: jest.fn(),
+  useUserBilling: jest.fn(),
+}));
+
+jest.mock('@nuxtjs/composition-api', () => {
+  // Require the original module to not be mocked...
+  const originalModule = jest.requireActual('@nuxtjs/composition-api');
+
+  return {
+    ...originalModule,
+    useRouter: jest.fn(),
+  };
+});
+
+describe('Checkout :: <Billing/>', () => {
+  test.todo('Test onMount');
+  // it('Form fields are rendered and validated', async () => {
+  //
+  //   useBilling.mockReturnValue(useBillingMock());
+  //   useUserBilling.mockReturnValue(useUserBillingMock());
+  //   useShipping.mockReturnValue(useShippingMock());
+  //   useCountrySearch.mockReturnValue(useCountrySearchMock());
+  //   useUser.mockReturnValue(useUserMock());
+  //   useGuestUser.mockReturnValue(useGuestUserMock());
+  //
+  //   const { getByRole, findAllByText, html } = render(Billing);
+  //
+  //   console.log(html)
+  // });
+});
diff --git a/pages/Checkout/__tests__/UserAccount.spec.js b/pages/Checkout/__tests__/UserAccount.spec.js
index 014f84b..1bed0c4 100644
--- a/pages/Checkout/__tests__/UserAccount.spec.js
+++ b/pages/Checkout/__tests__/UserAccount.spec.js
@@ -7,15 +7,18 @@ import { render, useUserMock, useGuestUserMock } from '~/test-utils';
 
 import UserAccount from '../UserAccount';
 
+jest.mock('~/helpers/asyncLocalStorage', () => ({
+  getItem: jest.fn(),
+  mergeItem: jest.fn(),
+}));
+
 jest.mock('@vue-storefront/magento', () => ({
   useGuestUser: jest.fn(),
   useUser: jest.fn(),
 }));
 
 jest.mock('@nuxtjs/composition-api', () => {
-  // Require the original module to not be mocked...
   const originalModule = jest.requireActual('@nuxtjs/composition-api');
-
   return {
     ...originalModule,
     useRouter: jest.fn(),
@@ -27,10 +30,13 @@ describe('<UserAccount/>', () => {
     useUser.mockReturnValue(useUserMock());
     useGuestUser.mockReturnValue(useGuestUserMock());
 
-    const { getByRole, findAllByText } = render(UserAccount);
+    const { getByRole, findAllByText, queryByTestId } = render(UserAccount);
 
     // First name, last name and email fields should be rendered and required
 
+    const recaptchaComponent = queryByTestId('recaptcha');
+    expect(recaptchaComponent).toBeNull();
+
     const firstNameInput = getByRole('textbox', { name: /first name/i });
     expect(firstNameInput).toBeRequired();
 
@@ -101,11 +107,150 @@ describe('<UserAccount/>', () => {
     expect(routerPushMock).toHaveBeenCalledWith('/checkout/shipping');
   });
 
-  test.todo('User cannot move to the next step if data is loading');
+  it('User can log-in to the store', async () => {
+    const attachToCartMock = jest.fn();
+    const routerPushMock = jest.fn();
+    const loginMock = jest.fn();
+
+    useUser.mockReturnValue(useUserMock({
+      login: loginMock,
+    }));
+    useGuestUser.mockReturnValue(useGuestUserMock({
+      attachToCart: attachToCartMock,
+    }));
+    useRouter.mockReturnValue({
+      push: routerPushMock,
+    });
+
+    const values = {
+      password: 'J@mesBond007!',
+      email: 'james@bond.io',
+      token: 'token value',
+    };
+
+    const { findByLabelText, getByRole, queryByTestId } = render(UserAccount, {
+      mocks: {
+        $nuxt: {
+          context: {
+            $config: { isRecaptcha: true },
+            $recaptcha: {
+              init: jest.fn(),
+              reset: jest.fn(),
+              getResponse: jest.fn().mockResolvedValue(Promise.resolve(values.token)),
+            },
+          },
+        },
+      },
+    });
+
+    const recaptchaComponent = queryByTestId('recaptcha');
+    expect(recaptchaComponent).toBeTruthy();
+
+    const loginCheckbox = getByRole('checkbox', { name: /login on the store/i });
+    userEvent.click(loginCheckbox);
+
+    const passwordInput = await findByLabelText('Password');
+    const emailInput = getByRole('textbox', { name: /e-mail/i });
+    const continueButton = getByRole('button', { name: /continue to shipping/i });
+
+    userEvent.type(passwordInput, values.password);
+    userEvent.type(emailInput, values.email);
+
+    // click the continue button
+    userEvent.click(continueButton);
+
+    await waitFor(() => {
+      expect(attachToCartMock).toHaveBeenCalledTimes(1);
+      expect(attachToCartMock).toHaveBeenCalledWith({
+        email: 'james@bond.io',
+      });
 
-  test.todo('User can log-in to the store');
+      expect(loginMock).toHaveBeenCalledTimes(1);
+      expect(loginMock).toHaveBeenCalledWith({
+        user: {
+          username: values.email,
+          password: values.password,
+          recaptchaToken: values.token,
+        },
+      });
+    });
+    expect(routerPushMock).toHaveBeenCalledTimes(1);
+    expect(routerPushMock).toHaveBeenCalledWith('/checkout/shipping');
+  });
 
-  test.todo('User can create an account');
+  it('User can create an account', async () => {
+    const routerPushMock = jest.fn();
+    const registerMock = jest.fn();
+
+    useUser.mockReturnValue(useUserMock({
+      register: registerMock,
+    }));
+    useRouter.mockReturnValue({
+      push: routerPushMock,
+    });
+
+    const values = {
+      password: 'J@mesBond007!',
+      firstName: 'James',
+      lastName: 'Bond',
+      email: 'james@bond.io',
+      token: 'token value',
+    };
+
+    const recaptchaInstance = {
+      init: jest.fn(),
+      reset: jest.fn(),
+      getResponse: jest.fn().mockResolvedValue(Promise.resolve(values.token)),
+    };
+    const { findByLabelText, findByRole, getByRole } = render(UserAccount, {
+      mocks: {
+        $nuxt: {
+          context: {
+            $config: { isRecaptcha: true },
+            $recaptcha: recaptchaInstance,
+          },
+        },
+      },
+    });
+
+    const loginCheckbox = getByRole('checkbox', { name: /create an account on the store/i });
+    userEvent.click(loginCheckbox);
+
+    const passwordInput = await findByLabelText('Password');
+    const newsletterCheckbox = await findByRole('checkbox', { name: /sign up for newsletter/i });
+    const firstNameInput = getByRole('textbox', { name: /first name/i });
+    const lastNameInput = getByRole('textbox', { name: /last name/i });
+    const emailInput = getByRole('textbox', { name: /e-mail/i });
+    const continueButton = getByRole('button', { name: /continue to shipping/i });
+
+    userEvent.click(newsletterCheckbox);
+    userEvent.type(passwordInput, values.password);
+    userEvent.type(emailInput, values.email);
+    userEvent.type(firstNameInput, values.firstName);
+    userEvent.type(lastNameInput, values.lastName);
+
+    // click the continue button
+    userEvent.click(continueButton);
+
+    await waitFor(() => {
+      expect(registerMock).toHaveBeenCalledTimes(1);
+      expect(registerMock).toHaveBeenCalledWith({
+        user: {
+          email: values.email,
+          is_subscribed: true,
+          firstname: values.firstName,
+          lastname: values.lastName,
+          recaptchaInstance,
+          password: values.password,
+          recaptchaToken: values.token,
+        },
+      });
+    });
+    expect(routerPushMock).toHaveBeenCalledTimes(1);
+    expect(routerPushMock).toHaveBeenCalledWith('/checkout/shipping');
+  });
+
+  test.todo('User cannot move to the next step if data is loading');
 
   test.todo('User can subscribe to the newsletter during account creation');
 });
diff --git a/pages/Home.vue b/pages/Home.vue
index e7e0861..ce9c57d 100644
--- a/pages/Home.vue
+++ b/pages/Home.vue
@@ -43,9 +43,9 @@
 
     <LazyHydrate when-visible>
       <SfCallToAction
-        title="Subscribe to Newsletters"
-        button-text="Subscribe"
-        description="Be aware of upcoming sales and events. Receive gifts and special offers!"
+        :title="$t('Subscribe to Newsletters')"
+        :button-text="$t('Subscribe')"
+        :description="$t('Be aware of upcoming sales and events. Receive gifts and special offers!')"
         image="https://cdn.shopify.com/s/files/1/0407/1902/4288/files/newsletter_1240x202.jpg?v=1616496568"
         class="call-to-action"
       />
@@ -74,9 +74,11 @@ import {
   computed,
   defineComponent,
   ref,
+  useContext,
 } from '@nuxtjs/composition-api';
 import { onSSR } from '@vue-storefront/core';
 import LazyHydrate from 'vue-lazy-hydration';
+import { useCache, CacheTagPrefix } from '@vue-storefront/cache';
 import MobileStoreBanner from '~/components/MobileStoreBanner.vue';
 import InstagramFeed from '~/components/InstagramFeed.vue';
 import ProductsCarousel from '~/components/ProductsCarousel.vue';
@@ -95,6 +97,10 @@ export default defineComponent({
   },
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   setup() {
+    const { addTags } = useCache();
+    const { app } = useContext();
+    const year = new Date().getFullYear();
+
     const {
       products: newProductsResult,
       search: newProductsSearch,
@@ -102,9 +108,9 @@ export default defineComponent({
     } = useProduct('newProducts');
     const heroes = ref([
       {
-        title: 'Colorful summer dresses are already in store',
-        subtitle: 'SUMMER COLLECTION 2021',
-        buttonText: 'Learn more',
+        title: app.i18n.t('Colorful summer dresses are already in store'),
+        subtitle: app.i18n.t('SUMMER COLLECTION {year}', { year }),
+        buttonText: app.i18n.t('Learn more'),
         background: '#eceff1',
         image: {
           mobile:
@@ -115,9 +121,9 @@ export default defineComponent({
         link: '/c/women/women-clothing-shirts',
       },
       {
-        title: 'Colorful summer dresses are already in store',
-        subtitle: 'SUMMER COLLECTION 2021',
-        buttonText: 'Learn more',
+        title: app.i18n.t('Colorful summer dresses are already in store'),
+        subtitle: app.i18n.t('SUMMER COLLECTION {year}', { year }),
+        buttonText: app.i18n.t('Learn more'),
         background: '#fce4ec',
         image: {
           mobile:
@@ -128,9 +134,9 @@ export default defineComponent({
         link: '/c/women/women-clothing-dresses',
       },
       {
-        title: 'Colorful summer dresses are already in store',
-        subtitle: 'SUMMER COLLECTION 2021',
-        buttonText: 'Learn more',
+        title: app.i18n.t('Colorful summer dresses are already in store'),
+        subtitle: app.i18n.t('SUMMER COLLECTION {year}', { year }),
+        buttonText: app.i18n.t('Learn more'),
         background: '#efebe9',
         image: {
           mobile:
@@ -146,8 +152,8 @@ export default defineComponent({
     const banners = ref([
       {
         slot: 'banner-A',
-        subtitle: 'Dresses',
-        title: 'Cocktail & Party',
+        subtitle: app.i18n.t('Dresses'),
+        title: app.i18n.t('Cocktail & Party'),
         description:
             'Find stunning women\'s cocktail dresses and party dresses. Stand out in lace and metallic cocktail dresses from all your favorite brands.',
         buttonText: 'Shop now',
@@ -162,11 +168,10 @@ export default defineComponent({
       },
       {
         slot: 'banner-B',
-        subtitle: 'Dresses',
-        title: 'Linen Dresses',
-        description:
-            'Find stunning women\'s cocktail dresses and party dresses. Stand out in lace and metallic cocktail dresses from all your favorite brands.',
-        buttonText: 'Shop now',
+        subtitle: app.i18n.t('Dresses'),
+        title: app.i18n.t('Linen Dresses'),
+        description: app.i18n.t('Find stunning women\'s cocktail dresses and party dresses. Stand out in lace and metallic cocktail dresses from all your favorite brands.'),
+        buttonText: app.i18n.t('Shop now'),
         image: {
           mobile:
               'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerE_328x343.jpg',
@@ -178,8 +183,8 @@ export default defineComponent({
       },
       {
         slot: 'banner-C',
-        subtitle: 'T-Shirts',
-        title: 'The Office Life',
+        subtitle: app.i18n.t('T-Shirts'),
+        title: app.i18n.t('The Office Life'),
         image: {
           mobile:
               'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerC_328x343.jpg',
@@ -191,8 +196,8 @@ export default defineComponent({
       },
       {
         slot: 'banner-D',
-        subtitle: 'Summer Sandals',
-        title: 'Eco Sandals',
+        subtitle: app.i18n.t('Summer Sandals'),
+        title: app.i18n.t('Eco Sandals'),
         image: {
           mobile:
               'https://cdn.shopify.com/s/files/1/0407/1902/4288/files/bannerG_328x343.jpg',
@@ -215,6 +220,10 @@ export default defineComponent({
           position: 'ASC',
         },
       });
+
+      addTags([
+        { prefix: CacheTagPrefix.View, value: 'home' },
+      ]);
     });
 
     return {
diff --git a/pages/MyAccount.vue b/pages/MyAccount.vue
index 16b8827..b9b6df6 100644
--- a/pages/MyAccount.vue
+++ b/pages/MyAccount.vue
@@ -6,40 +6,40 @@
     />
     <SfContentPages
       v-e2e="'my-account-content-pages'"
-      title="My Account"
+      :title="$t('My Account')"
       :active="activePage"
       class="my-account"
       @click:change="changeActivePage"
     >
-      <SfContentCategory title="Personal Details">
-        <SfContentPage title="My profile">
+      <SfContentCategory :title="$t('Personal Details')">
+        <SfContentPage :title="$t('My profile')">
           <MyProfile />
         </SfContentPage>
 
-        <SfContentPage title="Addresses details">
+        <SfContentPage :title="$t('Addresses details')">
           <AddressesDetails />
         </SfContentPage>
 
-        <SfContentPage title="My newsletter">
+        <SfContentPage :title="$t('My newsletter')">
           <MyNewsletter />
         </SfContentPage>
 
-        <SfContentPage title="My wishlist">
+        <SfContentPage :title="$t('My wishlist')">
           <MyWishlist />
         </SfContentPage>
       </SfContentCategory>
 
-      <SfContentCategory title="Order details">
-        <SfContentPage title="Order history">
+      <SfContentCategory :title="$t('Order details')">
+        <SfContentPage :title="$t('Order history')">
           <OrderHistory />
         </SfContentPage>
 
-        <SfContentPage title="My reviews">
+        <SfContentPage :title="$t('My reviews')">
           <MyReviews />
         </SfContentPage>
       </SfContentCategory>
 
-      <SfContentPage title="Log out" />
+      <SfContentPage :title="$t('Log out')" />
     </SfContentPages>
   </div>
 </template>
@@ -85,15 +85,15 @@ export default defineComponent({
     const route = useRoute();
     const router = useRouter();
     const { logout } = useUser();
-    const { localePath } = useContext();
+    const { localePath, app } = useContext();
     const isMobile = computed(() => mapMobileObserver().isMobile.get());
     const breadcrumbs = ref([
       {
-        text: 'Home',
+        text: app.i18n.t('Home'),
         route: { link: '#' },
       },
       {
-        text: 'My Account',
+        text: app.i18n.t('My Account'),
         route: { link: '#' },
       },
     ]);
@@ -103,13 +103,13 @@ export default defineComponent({
       if (pageName) {
         return (pageName.charAt(0).toUpperCase() + pageName.slice(1)).replace('-', ' ');
       } if (!isMobile.value) {
-        return 'My profile';
+        return app.i18n.t('My profile');
       }
       return '';
     });
 
     const changeActivePage = async (title) => {
-      if (title === 'Log out') {
+      if (title === app.i18n.t('Log out')) {
         await logout();
         await router.push(`${localePath({ name: 'home' })}`);
 
@@ -118,8 +118,7 @@ export default defineComponent({
 
       const slugifiedTitle = (title || '').toLowerCase().replace(' ', '-');
       const transformedPath = `/my-account/${slugifiedTitle}`;
-
-      await router.push(String(localePath(transformedPath)));
+      await router.push(`${localePath(transformedPath)}`);
     };
 
     onBeforeUnmount(() => {
diff --git a/pages/MyAccount/AddressesDetails.vue b/pages/MyAccount/AddressesDetails.vue
index b4c398c..cc1253c 100644
--- a/pages/MyAccount/AddressesDetails.vue
+++ b/pages/MyAccount/AddressesDetails.vue
@@ -7,7 +7,7 @@
       class="tab-orphan"
     >
       <SfTab
-        :title="isNewAddress ? 'Add the address' : 'Update the address'"
+        :title="isNewAddress ? $t('Add the address') : $t('Update the address')"
       >
         <p class="message">
           {{ $t('Contact details updated') }}
@@ -27,7 +27,7 @@
       :open-tab="1"
       class="tab-orphan"
     >
-      <SfTab title="Addresses details">
+      <SfTab :title="$t('Addresses details')">
         <p class="message">
           {{ $t('Manage addresses') }}
         </p>
@@ -118,14 +118,15 @@ export default defineComponent({
     const route = useRoute();
     const { app } = useContext();
     const activeAddress = computed(
-      () => userAddresses.value.filter((address) => address?.id == route.value.query.id).pop(),
+      () => userAddresses.value.filter((address) => String(address?.id) === route.value.query.id).pop(),
     );
 
+    const getTranslatedUrlAddress = (title) => app.i18n.t(`${title}`).toLowerCase().replace(' ', '-');
     const isNewAddress = computed(() => !activeAddress.value);
     const editingAddress = computed(() => !!route.value.query.id);
     const changeAddress = async (address) => {
       const addressId = address?.id || 'new';
-      await router.push(`${app.localePath({ path: '/my-account/addresses-details', query: { id: addressId } })}`);
+      await router.push(`${app.localePath({ path: `/my-account/${getTranslatedUrlAddress('Addresses details')}`, query: { id: addressId } })}`);
     };
 
     const removeAddress = async (address) => {
@@ -141,7 +142,7 @@ export default defineComponent({
         const actionMethod = isNewAddress.value ? save : update;
         const data = await actionMethod({ address: form });
         await onComplete(data);
-        await router.push(`${app.localePath('/my-account/addresses-details')}`);
+        await router.push(app.localePath(`/my-account/${getTranslatedUrlAddress('Addresses details')}`));
       } catch (error) {
         onError(error);
       }
diff --git a/pages/MyAccount/MyNewsletter.vue b/pages/MyAccount/MyNewsletter.vue
index 25ba4ea..6e2de1a 100644
--- a/pages/MyAccount/MyNewsletter.vue
+++ b/pages/MyAccount/MyNewsletter.vue
@@ -3,7 +3,7 @@
     :open-tab="1"
     class="tab-orphan"
   >
-    <SfTab title="My newsletter">
+    <SfTab :title="$t('My newsletter')">
       <p class="message">
         {{ $t('Set up newsletter') }}
       </p>
@@ -12,7 +12,7 @@
           <SfCheckbox
             v-model="isSubscribed"
             v-e2e="'sign-up-newsletter'"
-            label="Sign Up for Newsletter"
+            :label="$t('Sign Up for Newsletter')"
             name="signupNewsletter"
             class="form__element"
           />
diff --git a/pages/MyAccount/MyProfile.vue b/pages/MyAccount/MyProfile.vue
index 27b634c..b7ee913 100644
--- a/pages/MyAccount/MyProfile.vue
+++ b/pages/MyAccount/MyProfile.vue
@@ -1,7 +1,7 @@
 <template>
   <SfTabs :open-tab="1">
     <!-- Personal data update -->
-    <SfTab title="Personal data">
+    <SfTab :title="$t('Personal data')">
       <p class="message">
         {{ $t('Feel free to edit') }}
       </p>
@@ -18,7 +18,7 @@
     </SfTab>
 
     <!-- Password reset -->
-    <SfTab title="Password change">
+    <SfTab :title="$t('Password change')">
       <p class="message">
         {{ $t('Change password your account') }}:<br>
       </p>
@@ -55,6 +55,7 @@ extend('min', {
 
 extend('password', {
   message: invalidPasswordMsg,
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
   validate: (value) => customerPasswordRegExp.test(value),
 });
 
@@ -79,15 +80,16 @@ export default defineComponent({
       load,
       loading,
       updateUser,
+      error,
     } = useUser();
 
     const formHandler = async (fn, onComplete, onError) => {
-      try {
-        const data = await fn();
-        if (!data) throw new Error('API Error');
-        await onComplete(data);
-      } catch (error) {
-        onError(error);
+      await fn();
+      const actionErr = error.value.changePassword || error.value.updateUser;
+      if (actionErr) {
+        onError(actionErr);
+      } else {
+        onComplete();
       }
     };
 
@@ -100,13 +102,14 @@ export default defineComponent({
       onComplete,
       onError,
     );
+
     const updatePassword = ({
       form,
       onComplete,
       onError,
     }) => formHandler(async () => changePassword({
-      currentPassword: form.value.currentPassword,
-      newPassword: form.value.newPassword,
+      current: form.value.currentPassword,
+      new: form.value.newPassword,
     }), onComplete, onError);
 
     onSSR(async () => {
diff --git a/pages/MyAccount/MyReviews.vue b/pages/MyAccount/MyReviews.vue
index c8ef0be..4bcc3a5 100644
--- a/pages/MyAccount/MyReviews.vue
+++ b/pages/MyAccount/MyReviews.vue
@@ -3,7 +3,7 @@
     :open-tab="1"
     class="tab-orphan"
   >
-    <SfTab title="My reviews">
+    <SfTab :title="$t('My reviews')">
       <div v-if="loading">
         <SfLoader />
       </div>
@@ -17,8 +17,8 @@
         :max-rating="5"
         :rating="reviewGetters.getReviewRating(review)"
         :char-limit="250"
-        read-more-text="Read more"
-        hide-full-text="Read less"
+        :read-more-text="$t('Read more')"
+        :hide-full-text="$t('Read less')"
         class="product__review"
       >
         <template #info="{ rating, maxRating, date }">
@@ -39,6 +39,14 @@
           </div>
         </template>
       </SfReview>
+      <div
+        v-if="userReviews.length === 0"
+        class="no-reviews"
+      >
+        <p class="no-reviews__title">
+          {{ $t('You have submitted no reviews') }}.
+        </p>
+      </div>
     </SfTab>
   </SfTabs>
 </template>
@@ -86,6 +94,13 @@ export default defineComponent({
 </script>
 
 <style lang='scss' scoped>
+.no-reviews {
+  &__title {
+    margin: 0 0 var(--spacer-lg) 0;
+    font: var(--font-weight--normal) var(--font-size--base) / 1.6 var(--font-family--primary);
+  }
+}
+
 .tab-orphan {
   @include for-mobile {
     --tabs-title-display: none;
diff --git a/pages/MyAccount/MyWishlist.vue b/pages/MyAccount/MyWishlist.vue
index 7b33cc6..2d9bd67 100644
--- a/pages/MyAccount/MyWishlist.vue
+++ b/pages/MyAccount/MyWishlist.vue
@@ -3,7 +3,7 @@
     :open-tab="1"
     class="tab-orphan"
   >
-    <SfTab title="My wishlist">
+    <SfTab :title="$t('My wishlist')">
       <div v-if="loading">
         <SfLoader />
       </div>
@@ -27,7 +27,7 @@
                 icon="tiles"
                 size="12px"
                 role="button"
-                aria-label="Change to grid view"
+                :aria-label="$t('Change to grid view')"
                 :aria-pressed="isWishlistGridView"
                 @click="changeToWishlistGridView"
               />
@@ -37,7 +37,7 @@
                 icon="list"
                 size="12px"
                 role="button"
-                aria-label="Change to list view"
+                :aria-label="$t('Change to list view')"
                 :aria-pressed="!isWishlistGridView"
                 @click="changeToWishlistListView"
               />
@@ -66,7 +66,9 @@
                   :key="productGetters.getSlug(product.product)"
                   v-e2e="'wishlist-product-card'"
                   class="products__product-card"
-                  :image="productGetters.getProductThumbnailImage(product.product)"
+                  :image-width="imageSizes.productCard.width"
+                  :image-height="imageSizes.productCard.height"
+                  :image="getMagentoImage(productGetters.getProductThumbnailImage(product.product))"
                   :is-added-to-cart="isInCart({ product: product.product })"
                   :is-in-wishlist="true"
                   :link="
@@ -76,18 +78,48 @@
                       )}${productGetters.getSlug(product.product, product.product.categories[0])}`
                     )
                   "
-                  :regular-price="$n(productGetters.getPrice(product.product).regular, 'currency')"
+                  :regular-price="$fc(productGetters.getPrice(product.product).regular)"
                   :reviews-count="productGetters.getTotalReviews(product.product)"
                   :score-rating="productGetters.getAverageRating(product.product)"
                   :show-add-to-cart-button="true"
                   :special-price="productGetters.getPrice(product.product).special
-                    && $n(productGetters.getPrice(product.product).special, 'currency')"
+                    && $fc(productGetters.getPrice(product.product).special)"
                   :style="{ '--index': i }"
                   :title="productGetters.getName(product.product)"
                   wishlist-icon
                   @click:wishlist="removeItemFromWishlist(product.product)"
                   @click:add-to-cart="addItemToCart({ product: product.product, quantity: 1 })"
-                />
+                >
+                  <template #image="imageSlotProps">
+                    <SfButton
+                      :link="imageSlotProps.link"
+                      class="sf-button--pure sf-product-card__link"
+                      data-testid="product-link"
+                      :aria-label="$t('Go To Product')"
+                      v-on="$listeners"
+                    >
+                      <template v-if="Array.isArray(imageSlotProps.image)">
+                        <nuxt-img
+                          v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
+                          :key="key"
+                          class="sf-product-card__picture"
+                          :src="picture"
+                          :alt="imageSlotProps.title"
+                          :width="imageSlotProps.imageWidth"
+                          :height="imageSlotProps.imageHeight"
+                        />
+                      </template>
+                      <nuxt-img
+                        v-else
+                        class="sf-product-card__image lol"
+                        :src="imageSlotProps.image"
+                        :alt="imageSlotProps.title"
+                        :width="imageSlotProps.imageWidth"
+                        :height="imageSlotProps.imageHeight"
+                      />
+                    </SfButton>
+                  </template>
+                </SfProductCard>
               </transition-group>
               <transition-group
                 v-else
@@ -101,7 +133,9 @@
                   :key="productGetters.getSlug(product.product)"
                   class="products__product-card-horizontal"
                   :description="productGetters.getDescription(product.product)"
-                  :image="productGetters.getProductThumbnailImage(product.product)"
+                  :image="getMagentoImage(productGetters.getProductThumbnailImage(product.product))"
+                  :image-width="imageSizes.productCardHorizontal.width"
+                  :image-height="imageSizes.productCardHorizontal.height"
                   :is-in-wishlist="true"
                   :link="
                     localePath(
@@ -110,27 +144,56 @@
                       )}${productGetters.getSlug(product.product, product.product.categories[0])}`
                     )
                   "
-                  :regular-price="$n(productGetters.getPrice(product.product).regular, 'currency')"
+                  :regular-price="$fc(productGetters.getPrice(product.product).regular)"
                   :reviews-count="productGetters.getTotalReviews(product.product)"
                   :score-rating="productGetters.getAverageRating(product.product)"
                   :special-price="productGetters.getPrice(product.product).special
-                    && $n(productGetters.getPrice(product.product).special, 'currency')"
+                    && $fc(productGetters.getPrice(product.product).special)"
                   :style="{ '--index': i }"
                   :title="productGetters.getName(product.product)"
                   wishlist-icon
                   @click:wishlist="removeItemFromWishlist(product.product)"
                   @click:add-to-cart="addItemToCart({ product: product.product, quantity: 1 })"
                 >
+                  <template #image="imageSlotProps">
+                    <SfLink
+                      :link="imageSlotProps.link"
+                      class="
+                    sf-product-card-horizontal__link
+                    sf-product-card-horizontal__link--image
+                  "
+                    >
+                      <template v-if="Array.isArray(imageSlotProps.image)">
+                        <nuxt-img
+                          v-for="(picture, key) in imageSlotProps.image.slice(0, 2)"
+                          :key="key"
+                          class="sf-product-card-horizontal__picture"
+                          :src="picture"
+                          :alt="imageSlotProps.title"
+                          :width="imageSlotProps.imageWidth"
+                          :height="imageSlotProps.imageHeight"
+                        />
+                      </template>
+                      <nuxt-img
+                        v-else
+                        class="sf-product-card-horizontal__image"
+                        :src="imageSlotProps.image"
+                        :alt="imageSlotProps.title"
+                        :width="imageSlotProps.imageWidth"
+                        :height="imageSlotProps.imageHeight"
+                      />
+                    </SfLink>
+                  </template>
                   <template #configuration>
                     <SfProperty
                       class="desktop-only"
-                      name="Size"
+                      :name="$t('Size')"
                       value="XS"
                       style="margin: 0 0 1rem 0"
                     />
                     <SfProperty
                       class="desktop-only"
-                      name="Color"
+                      :name="$t('Color')"
                       value="white"
                     />
                   </template>
@@ -214,7 +277,7 @@ import {
   productGetters,
   wishlistGetters,
 } from '@vue-storefront/magento';
-import { useUiHelpers, useUiState } from '~/composables';
+import { useUiHelpers, useUiState, useImage } from '~/composables';
 
 export default defineComponent({
   name: 'MyWishlist',
@@ -287,6 +350,8 @@ export default defineComponent({
       await removeItem({ product });
     };
 
+    const { getMagentoImage, imageSizes } = useImage();
+
     onSSR(async () => {
       await load({
         searchParams: {
@@ -307,6 +372,8 @@ export default defineComponent({
       products,
       th,
       wishlist,
+      getMagentoImage,
+      imageSizes
     };
   },
 });
diff --git a/pages/MyAccount/OrderHistory.vue b/pages/MyAccount/OrderHistory.vue
index 3658180..b8bbc0f 100644
--- a/pages/MyAccount/OrderHistory.vue
+++ b/pages/MyAccount/OrderHistory.vue
@@ -2,7 +2,7 @@
   <SfTabs :open-tab="1">
     <SfTab
       data-cy="order-history-tab_my-orders"
-      title="My orders"
+      :title="$t('My orders')"
     >
       <div v-if="loading">
         <SfLoader />
@@ -17,23 +17,23 @@
         </SfButton>
         <div class="highlighted highlighted--total">
           <SfProperty
-            name="Order ID"
+            :name="$t('Order ID')"
             :value="orderGetters.getId(currentOrder)"
             class="sf-property--full-width property"
           />
           <SfProperty
-            name="Date"
+            :name="$t('Date')"
             :value="orderGetters.getDate(currentOrder)"
             class="sf-property--full-width property"
           />
           <SfProperty
-            name="Status"
+            :name="$t('Status')"
             :value="orderGetters.getStatus(currentOrder)"
             class="sf-property--full-width property"
           />
           <SfProperty
-            name="Total"
-            :value="$n(orderGetters.getPrice(currentOrder), 'currency')"
+            :name="$t('Total')"
+            :value="$fc(orderGetters.getPrice(currentOrder))"
             class="sf-property--full-width property"
           />
         </div>
@@ -55,7 +55,7 @@
               </nuxt-link>
             </SfTableData>
             <SfTableData>{{ orderGetters.getItemQty(item) }}</SfTableData>
-            <SfTableData>{{ $n(orderGetters.getItemPrice(item), 'currency') }}</SfTableData>
+            <SfTableData>{{ $fc(orderGetters.getItemPrice(item)) }}</SfTableData>
           </SfTableRow>
         </SfTable>
       </div>
@@ -97,21 +97,14 @@
           >
             <SfTableData>{{ orderGetters.getId(order) }}</SfTableData>
             <SfTableData>{{ orderGetters.getDate(order) }}</SfTableData>
-            <SfTableData>{{ $n(orderGetters.getPrice(order), 'currency') }}</SfTableData>
+            <SfTableData>{{ $fc(orderGetters.getPrice(order)) }}</SfTableData>
             <SfTableData>
               <span :class="getStatusTextClass(order)">{{ orderGetters.getStatus(order) }}</span>
             </SfTableData>
             <SfTableData class="orders__view orders__element--right">
-              <SfButton
-                data-cy="order-history-btn_download"
-                class="sf-button--text smartphone-only"
-                @click="downloadOrder(order)"
-              >
-                {{ $t('Download') }}
-              </SfButton>
               <SfButton
                 data-cy="order-history-btn_view"
-                class="sf-button--text desktop-only"
+                class="sf-button--text"
                 @click="currentOrder = order"
               >
                 {{ $t('View details') }}
@@ -156,7 +149,7 @@
     </SfTab>
     <SfTab
       data-cy="order-history-tab_returns"
-      title="Returns"
+      :title="$t('Returns')"
     >
       <p class="message">
         This feature is not implemented yet! Please take a look at
diff --git a/pages/Page.vue b/pages/Page.vue
index 6899116..b5c0bd6 100644
--- a/pages/Page.vue
+++ b/pages/Page.vue
@@ -22,6 +22,7 @@ import { useContent } from '@vue-storefront/magento';
 import { onSSR } from '@vue-storefront/core';
 import { defineComponent, useContext, useRoute } from '@nuxtjs/composition-api';
 import HTMLContent from '~/components/HTMLContent';
+import { useCache, CacheTagPrefix } from '@vue-storefront/cache';
 
 export default defineComponent({
   components: {
@@ -36,6 +37,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const { addTags } = useCache();
     const {
       page,
       error,
@@ -47,8 +49,10 @@ export default defineComponent({
     const { params } = route.value;
 
     onSSR(async () => {
-      await loadContent(params.slug || props.identifier);
+      await loadContent({ identifier: params.slug || props.identifier });
       if (error?.value?.content) nuxtError({ statusCode: 404 });
+
+      addTags([{ prefix: CacheTagPrefix.View, value: page.value.identifier }]);
     });
     return {
       page,
diff --git a/pages/Product.vue b/pages/Product.vue
index 648ba77..5689487 100644
--- a/pages/Product.vue
+++ b/pages/Product.vue
@@ -40,8 +40,8 @@
             </div>
             <div class="product__price-and-rating">
               <SfPrice
-                :regular="$n(productPrice, 'currency')"
-                :special="productSpecialPrice && $n(productSpecialPrice, 'currency')"
+                :regular="$fc(productPrice)"
+                :special="productSpecialPrice && $fc(productSpecialPrice)"
               />
               <div>
                 <div class="product__rating">
@@ -140,7 +140,7 @@
                 v-else
                 v-model="qty"
                 v-e2e="'product_add-to-cart'"
-                :disabled="loading || !canAddToCart"
+                :disabled="loading || !canAddToCart || productLoading"
                 class="product__add-to-cart"
                 @click="addItem({ product, quantity: parseInt(qty) })"
               />
@@ -297,6 +297,7 @@ import UpsellProducts from '~/components/UpsellProducts';
 import RelatedProducts from '~/components/RelatedProducts';
 import HTMLContent from '~/components/HTMLContent';
 import AddToWishlist from '~/components/AddToWishlist';
+import { useCache, CacheTagPrefix } from '@vue-storefront/cache';
 
 export default defineComponent({
   name: 'ProductPage',
@@ -331,6 +332,7 @@ export default defineComponent({
   }),
   transition: 'fade',
   setup() {
+    const { addTags } = useCache();
     const qty = ref(1);
     const {
       product,
@@ -476,6 +478,14 @@ export default defineComponent({
       if (product?.value?.length === 0) nuxtError({ statusCode: 404 });
 
       await searchReviews(baseSearchQuery);
+
+      const tags = [{ prefix: CacheTagPrefix.View, value: `product-${route.value.params.id}` }];
+      const productTags = { prefix: CacheTagPrefix.Product, value: product.value.uid };
+
+      const categoriesTags = categories.value.map((catId) => {
+        return { prefix: CacheTagPrefix.Category, value: catId };
+      });
+      addTags(tags.concat(productTags, categoriesTags));
     });
 
     return {
@@ -521,6 +531,7 @@ export default defineComponent({
   @include for-desktop {
     max-width: 1272px;
     margin: 0 auto;
+    padding: 0 1.5rem;
   }
 }
 
@@ -538,7 +549,7 @@ export default defineComponent({
     margin: var(--spacer-sm) auto;
     @include for-desktop {
       max-width: 32.625rem;
-      margin: 0 0 0 7.5rem;
+      margin: 0 0 0 2rem;
     }
   }
 
diff --git a/pages/ResetPassword.vue b/pages/ResetPassword.vue
index b49e6d2..911d648 100644
--- a/pages/ResetPassword.vue
+++ b/pages/ResetPassword.vue
@@ -61,6 +61,7 @@
           <div v-if="passwordMatchError || forgotPasswordError.setNew">
             {{ passwordMatchError || forgotPasswordError.setNew.message }}
           </div>
+          <recaptcha v-if="isRecaptchaEnabled" />
           <SfButton
             v-e2e="'reset-password-modal-submit'"
             type="submit"
@@ -95,7 +96,12 @@ import {
   SfInput,
   SfHeading,
 } from '@storefront-ui/vue';
-import { ref, computed, defineComponent } from '@nuxtjs/composition-api';
+import {
+  ref,
+  computed,
+  defineComponent,
+  useContext,
+} from '@nuxtjs/composition-api';
 import { useForgotPassword, forgotPasswordGetters } from '@vue-storefront/magento';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { email, required } from 'vee-validate/dist/rules';
@@ -143,6 +149,8 @@ export default defineComponent({
     const isPasswordChanged = computed(() => forgotPasswordGetters.isPasswordChanged(result.value));
 
     const { token } = context.root.$route.query;
+    const { $recaptcha, $config } = useContext();
+    const isRecaptchaEnabled = ref(typeof $recaptcha !== 'undefined' && $config.isRecaptcha);
 
     const setNewPassword = async () => {
       passwordMatchError.value = false;
@@ -151,11 +159,30 @@ export default defineComponent({
         return;
       }
 
-      await setNew({
-        tokenValue: token,
-        newPassword: form.value.password,
-        email: form.value.email,
-      });
+      if (isRecaptchaEnabled.value) {
+        $recaptcha.init();
+      }
+
+      if (isRecaptchaEnabled.value) {
+        const recaptchaToken = await $recaptcha.getResponse();
+
+        await setNew({
+          tokenValue: token,
+          newPassword: form.value.password,
+          email: form.value.email,
+          recaptchaToken,
+        });
+      } else {
+        await setNew({
+          tokenValue: token,
+          newPassword: form.value.password,
+          email: form.value.email,
+        });
+      }
+
+      if (isRecaptchaEnabled.value) {
+        $recaptcha.reset();
+      }
     };
 
     return {
@@ -167,6 +194,7 @@ export default defineComponent({
       passwordMatchError,
       token,
       result,
+      isRecaptchaEnabled,
     };
   },
 });
diff --git a/pages/__tests__/ResetPassword.spec.js b/pages/__tests__/ResetPassword.spec.js
new file mode 100644
index 0000000..12b02a4
--- /dev/null
+++ b/pages/__tests__/ResetPassword.spec.js
@@ -0,0 +1,71 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import userEvent from '@testing-library/user-event';
+import { waitFor } from '@testing-library/vue';
+import { useForgotPassword } from '@vue-storefront/magento';
+import { render, useForgotPasswordMock } from '~/test-utils';
+
+import ResetPassword from '../ResetPassword';
+
+jest.mock('@vue-storefront/magento', () => {
+  const originalModule = jest.requireActual('@vue-storefront/magento');
+  return {
+    ...originalModule,
+    useForgotPassword: jest.fn(),
+  };
+});
+
+describe('<ResetPassword/>', () => {
+  it('User can change his password', async () => {
+    const setNewMock = jest.fn();
+    useForgotPassword.mockReturnValue(useForgotPasswordMock({
+      setNew: setNewMock,
+    }));
+
+    const values = {
+      email: 'james@bond.io',
+      password: 'J@mesBond007!',
+      token: 'token value',
+      resetToken: 'reset token value',
+    };
+
+    const { getByRole, findByLabelText, queryByTestId } = render(ResetPassword, {
+      mocks: {
+        $route: { query: { token: values.resetToken } },
+        $nuxt: {
+          context: {
+            $config: { isRecaptcha: true },
+            $recaptcha: {
+              init: jest.fn(),
+              reset: jest.fn(),
+              getResponse: jest.fn().mockResolvedValue(Promise.resolve(values.token)),
+            },
+          },
+        },
+      },
+    });
+
+    const recaptchaComponent = queryByTestId('recaptcha');
+    expect(recaptchaComponent).toBeTruthy();
+
+    const emailInput = getByRole('textbox', /your email/i);
+    const passwordInput = await findByLabelText('Password');
+    const repeatPasswordInput = await findByLabelText('Repeat Password');
+
+    userEvent.type(emailInput, values.email);
+    userEvent.type(passwordInput, values.password);
+    userEvent.type(repeatPasswordInput, values.password);
+
+    const continueButton = getByRole('button', { name: /save password/i });
+    userEvent.click(continueButton);
+
+    await waitFor(() => {
+      expect(setNewMock).toHaveBeenCalledTimes(1);
+      expect(setNewMock).toHaveBeenCalledWith({
+        email: values.email,
+        newPassword: values.password,
+        recaptchaToken: values.token,
+        tokenValue: values.resetToken,
+      });
+    });
+  });
+});
diff --git a/plugins/__tests__/fcPlugin.spec.js b/plugins/__tests__/fcPlugin.spec.js
new file mode 100644
index 0000000..f436451
--- /dev/null
+++ b/plugins/__tests__/fcPlugin.spec.js
@@ -0,0 +1,10 @@
+import fcPlugin from '~/plugins/fcPlugin';
+
+const injectFnMock = jest.fn();
+
+describe('Format currency plugin', () => {
+  it('should inject $fc', () => {
+    fcPlugin({ app: {} }, injectFnMock);
+    expect(injectFnMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/plugins/__tests__/i18n.spec.js b/plugins/__tests__/i18n.spec.js
index 91bd489..52b22f3 100644
--- a/plugins/__tests__/i18n.spec.js
+++ b/plugins/__tests__/i18n.spec.js
@@ -5,16 +5,19 @@ const localesMock = [
     code: 'default',
     file: 'en.js',
     iso: 'en_US',
+    defaultCurrency: 'USD',
   },
   {
     code: 'de_DE',
     file: 'de.js',
     iso: 'de_DE',
+    defaultCurrency: 'EUR',
   },
   {
     code: 'nl_NL',
     file: 'en.js',
     iso: 'en_US',
+    defaultCurrency: 'EUR',
   },
 ];
 
@@ -29,14 +32,19 @@ const callbackRequest = {
   headers: {},
 };
 
+const routeMock = {
+  path: 'https://domain/german',
+};
 const appMock = {
   $cookies: {
     get: jest.fn(),
   },
   i18n: {
     defaultLocale: 'en',
+    defaultCurrency: 'EUR',
     setLocale: jest.fn(),
     locales: localesMock,
+    locale: 'de_DE',
   },
   $vsf: {
     $magento: {
@@ -54,6 +62,7 @@ const appMock = {
           ...apiStateMock,
           setStore: jest.fn(),
           setLocale: jest.fn(),
+          setCurrency: jest.fn(),
         },
         axios: {
           headers: {
@@ -71,14 +80,14 @@ describe('i18n plugin', () => {
   });
 
   it('Should read vsf-store cookie value', () => {
-    i18nPlugin({ app: appMock });
+    i18nPlugin({ app: appMock, route: routeMock });
 
     expect(appMock.$cookies.get).toHaveBeenCalledWith('vsf-store');
   });
 
   it('Should find locale based on magento store code', () => {
     appMock.$cookies.get.mockReturnValue('default');
-    i18nPlugin({ app: appMock });
+    i18nPlugin({ app: appMock, route: routeMock });
 
     expect(appMock.i18n.setLocale).not.toHaveBeenCalled();
   });
@@ -91,7 +100,7 @@ describe('i18n plugin', () => {
 
   it('Should set default locale when vsf-store cookie is not exist', () => {
     appMock.$cookies.get.mockReturnValue(null);
-    i18nPlugin({ app: appMock });
+    i18nPlugin({ app: appMock, route: routeMock });
 
     expect(appMock.i18n.setLocale).toHaveBeenCalledWith('en');
   });
@@ -107,12 +116,13 @@ describe('i18n plugin', () => {
 
     testCaseAppMock.$cookies.get.mockReturnValueOnce('de_DE').mockReturnValueOnce('default');
 
-    i18nPlugin({ app: testCaseAppMock });
+    i18nPlugin({ app: testCaseAppMock, route: routeMock });
 
     expect(testCaseAppMock.$vsf.$magento.config.state.setLocale).toHaveBeenCalledWith('de_DE');
     expect(testCaseAppMock.$vsf.$magento.config.state.setStore).toHaveBeenCalledWith('de_DE');
+    expect(testCaseAppMock.$vsf.$magento.config.state.setCurrency).toHaveBeenCalledWith('EUR');
     expect(callbackRequest.headers.cookie).toMatchInlineSnapshot(
-      `"vsf-store=de_DE; vsf-locale=de_DE; vsf-currency=USD; vsf-country=PL; vsf-customer=12fg45; vsf-cart=123 "`
+      '"vsf-store=de_DE; vsf-locale=de_DE; vsf-currency=EUR; vsf-country=PL; vsf-customer=12fg45; vsf-cart=123 "',
     );
   });
 });
diff --git a/plugins/__tests__/token-expired.spec.js b/plugins/__tests__/token-expired.spec.js
index 1c8a868..1974440 100644
--- a/plugins/__tests__/token-expired.spec.js
+++ b/plugins/__tests__/token-expired.spec.js
@@ -1,14 +1,25 @@
 import tokenExpiredPlugin from '../token-expired';
 import cookieNames from '~/enums/cookieNameEnum';
 
-const callbackResponse = {
+const errRes = {
   data: {
-    message: 'The current customer isn\'t authorized.',
+    errors: [
+      {
+        extensions: {
+          category: 'graphql-authorization',
+        },
+      },
+    ],
   },
 };
 
+const validRes = {
+  data: {
+    errors: [],
+  },
+};
 
-const appMock = {
+const appMockFactory = (callbackResponse) => ({
   $vsf: {
     $magento: {
       client: {
@@ -26,29 +37,34 @@ const appMock = {
     remove: jest.fn(),
     set: jest.fn(),
   },
+  router: {
+    go: jest.fn(),
+  },
   localePath: (t) => t,
   i18n: {
     t: (t) => t,
   },
-};
-
-const redirectMock = jest.fn();
+});
 
 describe('Token Expired plugin', () => {
   beforeEach(() => {
     jest.resetAllMocks();
   });
 
-  it('should work only when the current customer is not authorized', async () => {
+  it('should be executed only if there is the "graphql-authorization" error', async () => {
+    const appMock = appMockFactory(validRes);
+
     // eslint-disable-next-line @typescript-eslint/await-thenable
-    await tokenExpiredPlugin({ app: appMock, redirect: redirectMock });
+    await tokenExpiredPlugin({ app: appMock });
 
-    expect(redirectMock).toHaveBeenCalledWith('/');
+    expect(appMock.router.go).toHaveBeenCalledTimes(0);
   });
 
   it('should set message cookie', async () => {
+    const appMock = appMockFactory(errRes);
+
     // eslint-disable-next-line @typescript-eslint/await-thenable
-    await tokenExpiredPlugin({ app: appMock, redirect: redirectMock });
+    await tokenExpiredPlugin({ app: appMock });
 
     const messageMock = {
       icon: null,
@@ -62,8 +78,10 @@ describe('Token Expired plugin', () => {
   });
 
   it('should clear customer token and clear cart id', async () => {
+    const appMock = appMockFactory(errRes);
+
     // eslint-disable-next-line @typescript-eslint/await-thenable
-    await tokenExpiredPlugin({ app: appMock, redirect: redirectMock });
+    await tokenExpiredPlugin({ app: appMock });
 
     expect(appMock.$cookies.remove).toHaveBeenCalledTimes(2);
     expect(appMock.$cookies.remove).toHaveBeenCalledWith(cookieNames.customerCookieName);
diff --git a/plugins/fcPlugin.ts b/plugins/fcPlugin.ts
new file mode 100644
index 0000000..07457e1
--- /dev/null
+++ b/plugins/fcPlugin.ts
@@ -0,0 +1,20 @@
+import cookieNames from '~/enums/cookieNameEnum';
+import formatCurrency from '~/helpers/formatCurrency';
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $fc(value: number | string): string;
+    $fc(value: number | string, options?: Intl.NumberFormatOptions): string;
+    $fc(value: number | string, locale?: string, options?: Intl.NumberFormatOptions): string;
+  }
+}
+
+export default ({ i18n, app }, inject) => {
+  inject('fc', (value: number | string, locale?: string, options = {}): string => {
+    // eslint-disable-next-line no-param-reassign
+    locale = locale || i18n?.localeProperties?.iso.replace('_', '-');
+    // eslint-disable-next-line no-param-reassign
+    options = { currency: app.$cookies.get(cookieNames.currencyCookieName) || i18n?.localeProperties?.defaultCurrency, ...options };
+    return formatCurrency(value, locale, options);
+  });
+};
diff --git a/plugins/i18n.ts b/plugins/i18n.ts
index e7e2e5e..d58bddd 100644
--- a/plugins/i18n.ts
+++ b/plugins/i18n.ts
@@ -15,14 +15,26 @@ const readStoreCookie = (app: NuxtAppOptions) => app.$cookies.get(cookieNames.st
  * Find locale code based on magento store code
  * @param storeCode {string} - magento store code
  * @param locales {array} - array with locales
- * @returns boolean
+ * @returns string
  */
 const findLocaleBasedOnStoreCode = (storeCode: string, locales: string[] | LocaleObject[]) => {
   if (locales.some((l) => typeof l !== 'string')) {
-    return !!(locales as LocaleObject[]).find((locale) => locale.code === storeCode);
+    return (locales as LocaleObject[]).find((locale) => locale.code === storeCode);
   }
 
-  return (locales as string[]).includes(storeCode);
+  return (locales as string[]).find((locale) => locale === storeCode);
+};
+
+/**
+ * Find defaultCurrency code based on magento store code
+ * @param storeCode {string} - magento store code
+ * @param locales {array} - array with locales
+ * @returns string
+ */
+const findCurrencyBasedOnStoreCode = (storeCode: string, locales: string[] | LocaleObject[]): string => {
+  const match = (locales as LocaleObject[]).find((locale) => locale.code === storeCode);
+
+  return match.defaultCurrency;
 };
 
 /**
@@ -39,15 +51,16 @@ const setDefaultLocale = async (i18n) => {
  *
  * @param apiState {ConfigState}
  * @param newStoreCode {string}
+ * @param currency {string}
  * @returns {string}
  */
-const prepareNewCookieString = (apiState: ConfigState, newStoreCode: string) => {
+const prepareNewCookieString = (apiState: ConfigState, newStoreCode: string, currency: string) => {
   const customerTokenCookie = apiState.getCustomerToken();
   const cartIdCookie = apiState.getCartId();
 
   let cookie = `vsf-store=${newStoreCode}; `;
   cookie += `vsf-locale=${newStoreCode}; `;
-  cookie += `vsf-currency=${apiState.getCurrency()}; `;
+  cookie += `vsf-currency=${currency}; `;
   cookie += `vsf-country=${apiState.getCountry()}; `;
 
   if (customerTokenCookie) {
@@ -61,11 +74,10 @@ const prepareNewCookieString = (apiState: ConfigState, newStoreCode: string) =>
   return cookie;
 };
 
-export default async ({ app }: Context) => {
+export default async ({ app, route }: Context) => {
   await app.$vsf.$magento.client.interceptors.request.use(async (request) => {
     const { i18n } = app;
-    const currentStoreCode = readStoreCookie(app);
-
+    const currentStoreCode = readStoreCookie(app) ?? route.path.split('/').find((element) => String(element));
     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     if (!currentStoreCode || !findLocaleBasedOnStoreCode(currentStoreCode, i18n.locales)) {
       await setDefaultLocale(i18n);
@@ -74,16 +86,19 @@ export default async ({ app }: Context) => {
     }
 
     const i18nCurrentLocaleCode = i18n.locale;
+
     const localeCookie = app.$cookies.get(cookieNames.localeCookieName);
 
     if (i18nCurrentLocaleCode !== localeCookie) {
       const apiState = app.$vsf.$magento.config.state as ConfigState;
+      const currency = findCurrencyBasedOnStoreCode(i18nCurrentLocaleCode, i18n.locales);
 
       apiState.setStore(i18nCurrentLocaleCode);
       apiState.setLocale(i18nCurrentLocaleCode);
+      apiState.setCurrency(currency);
 
       // eslint-disable-next-line no-param-reassign
-      request.headers.cookie = prepareNewCookieString(apiState, i18nCurrentLocaleCode);
+      request.headers.cookie = prepareNewCookieString(apiState, i18nCurrentLocaleCode, currency);
     }
 
     return request;
diff --git a/plugins/token-expired.js b/plugins/token-expired.js
deleted file mode 100644
index d3c8773..0000000
--- a/plugins/token-expired.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import cookieNames from '~/enums/cookieNameEnum';
-
-export default ({ app, redirect }) => {
-  let once = true;
-
-
-  app.$vsf.$magento.client.interceptors.response.use(async (r) => {
-
-    if (r.data.message === 'The current customer isn\'t authorized.' && once) {
-      once = false;
-      app.$cookies.remove(cookieNames.customerCookieName);
-      app.$cookies.remove(cookieNames.cartCookieName);
-
-      await app.$cookies.set(cookieNames.messageCookieName, {
-        message: app.i18n.t('You are not authorized, please log in.'),
-        type: 'warning',
-        icon: null,
-        persist: true,
-        title: null,
-      });
-
-      redirect(app.localePath('/'));
-    }
-
-    return r;
-  });
-};
diff --git a/plugins/token-expired.ts b/plugins/token-expired.ts
new file mode 100644
index 0000000..b39a15e
--- /dev/null
+++ b/plugins/token-expired.ts
@@ -0,0 +1,44 @@
+import cookieNames from '~/enums/cookieNameEnum';
+
+const hasAuthorizationError = (res): boolean => {
+  if (!res?.data?.errors) {
+    return false;
+  }
+
+  const { errors } = res.data;
+
+  let isAuthErr = false;
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (const error of errors) {
+    if (error?.extensions?.category === 'graphql-authorization') {
+      isAuthErr = true;
+      break;
+    }
+  }
+
+  return isAuthErr;
+};
+
+export default ({ app }) => {
+  app.$vsf.$magento.client.interceptors.response.use(async (res): Promise<any> => {
+    if (!hasAuthorizationError(res)) {
+      return res;
+    }
+
+    app.$cookies.remove(cookieNames.customerCookieName);
+    app.$cookies.remove(cookieNames.cartCookieName);
+
+    await app.$cookies.set(cookieNames.messageCookieName, {
+      message: app.i18n.t('You are not authorized, please log in.'),
+      type: 'warning',
+      icon: null,
+      persist: true,
+      title: null,
+    });
+
+    app.router.go(app.localePath('/'));
+
+    return false;
+  });
+};
diff --git a/serverMiddleware/body-parser.js b/serverMiddleware/body-parser.js
new file mode 100644
index 0000000..c9b6c46
--- /dev/null
+++ b/serverMiddleware/body-parser.js
@@ -0,0 +1,5 @@
+const bodyParser = require('body-parser');
+const app = require('express')();
+
+app.use(bodyParser.json());
+module.exports = app;
diff --git a/test-utils.js b/test-utils.js
index b724dee..49ed92f 100644
--- a/test-utils.js
+++ b/test-utils.js
@@ -1,13 +1,16 @@
 import { render } from '@testing-library/vue';
+import deepmerge from 'deepmerge';
 
 const $t = (text) => text;
 const $n = (text) => text;
+const $fc = (text) => text;
 const localePath = (path) => path;
 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-const customRender = (component, options = {}, callback = null) => render(component, {
+const customRender = (component, options = {}, callback = null) => render(component, deepmerge({
   mocks: {
     $t,
     $n,
+    $fc,
     localePath,
     $nuxt: {
       context: {
@@ -19,11 +22,20 @@ const customRender = (component, options = {}, callback = null) => render(compon
         },
       },
     },
-    ...options?.mocks,
   },
-  ...options,
+  stubs: {
+    NuxtImg: {
+      template: '<img src="image-stub.png" class="nuxt-img" alt="image"/>',
+    },
+    recaptcha: {
+      template: '<div data-testid="recaptcha" />',
+    },
+    i18n: {
+      template: '<div><slot /></div>',
+    },
+  },
 // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-}, callback);
+}, options), callback);
 
 export * from '@testing-library/vue';
 export * from '~/test-utils/mocks';
diff --git a/test-utils/mocks/index.js b/test-utils/mocks/index.js
index 2800c9c..784dbf5 100644
--- a/test-utils/mocks/index.js
+++ b/test-utils/mocks/index.js
@@ -1,5 +1,11 @@
-export * from './useGuestUser';
-export * from './useUser';
+export * from './useBilling';
 export * from './useCart';
+export * from './useCountrySearch';
+export * from './useForgotPassword';
+export * from './useGuestUser';
+export * from './useShipping';
 export * from './useUiState';
+export * from './useUser';
+export * from './useUserBilling';
+export * from './useReview';
 export * from './cartGetters';
diff --git a/test-utils/mocks/useBilling.js b/test-utils/mocks/useBilling.js
new file mode 100644
index 0000000..905745c
--- /dev/null
+++ b/test-utils/mocks/useBilling.js
@@ -0,0 +1,16 @@
+export const useBillingMock = (billingData = {}) => ({
+  load: () => {},
+  save: () => {},
+  loading: {
+    value: false,
+  },
+  billing: {
+    value: {},
+  },
+  address: {
+    value: {},
+  },
+  ...billingData,
+});
+
+export default useBillingMock;
diff --git a/test-utils/mocks/useCountrySearch.js b/test-utils/mocks/useCountrySearch.js
new file mode 100644
index 0000000..6831aad
--- /dev/null
+++ b/test-utils/mocks/useCountrySearch.js
@@ -0,0 +1,5 @@
+export const useCountrySearchMock = (countrySearchData = {}) => ({
+  ...countrySearchData,
+});
+
+export default useCountrySearchMock;
diff --git a/test-utils/mocks/useForgotPassword.js b/test-utils/mocks/useForgotPassword.js
new file mode 100644
index 0000000..17b56ec
--- /dev/null
+++ b/test-utils/mocks/useForgotPassword.js
@@ -0,0 +1,11 @@
+import { ref } from '@nuxtjs/composition-api';
+
+export const useForgotPasswordMock = (passwordData = {}) => ({
+  result: ref({}),
+  setNew: jest.fn(),
+  error: ref({}),
+  loading: ref(false),
+  ...passwordData,
+});
+
+export default useForgotPasswordMock;
diff --git a/test-utils/mocks/useReview.js b/test-utils/mocks/useReview.js
new file mode 100644
index 0000000..4c74a01
--- /dev/null
+++ b/test-utils/mocks/useReview.js
@@ -0,0 +1,26 @@
+export const useReviewMock = (reviewData = {}) => ({
+  loading: {
+    value: false,
+  },
+  loadReviewMetadata: jest.fn(),
+  metadata: {
+    value: [
+      {
+        id: 'METADATA_ID',
+        name: 'METADATA_NAME',
+        values: [
+          {
+            value_id: '1',
+            value: 'VALUE 1',
+          },
+        ],
+      },
+    ],
+  },
+  error: {
+    value: {},
+  },
+  ...reviewData,
+});
+
+export default useReviewMock;
diff --git a/test-utils/mocks/useShipping.js b/test-utils/mocks/useShipping.js
new file mode 100644
index 0000000..a05155d
--- /dev/null
+++ b/test-utils/mocks/useShipping.js
@@ -0,0 +1,5 @@
+export const useShippingMock = (shippingData = {}) => ({
+  ...shippingData,
+});
+
+export default useShippingMock;
diff --git a/test-utils/mocks/useUser.js b/test-utils/mocks/useUser.js
index efb1333..87c9b6c 100644
--- a/test-utils/mocks/useUser.js
+++ b/test-utils/mocks/useUser.js
@@ -1,16 +1,12 @@
+import { ref } from '@nuxtjs/composition-api';
+
 export const useUserMock = (userData = {}) => ({
   load: jest.fn(),
-  loading: {
-    value: false,
-  },
-  isAuthenticated: {
-    value: false,
-  },
-  error: {
-    value: {
-      register: null,
-    },
-  },
+  loading: ref(false),
+  isAuthenticated: ref(false),
+  error: ref({
+    register: null,
+  }),
   ...userData,
 });
 
diff --git a/test-utils/mocks/useUserBilling.js b/test-utils/mocks/useUserBilling.js
new file mode 100644
index 0000000..dbbe45e
--- /dev/null
+++ b/test-utils/mocks/useUserBilling.js
@@ -0,0 +1,14 @@
+export const useUserBillingMock = (userBillingData = {}) => ({
+  load: jest.fn(),
+  loading: {
+    value: false,
+  },
+  error: {
+    value: {
+      register: null,
+    },
+  },
+  ...userBillingData,
+});
+
+export default useUserBillingMock;
diff --git a/tsconfig.json b/tsconfig.json
index be1cf9c..de81919 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -26,7 +26,8 @@
     "types": [
       "@types/node",
       "@nuxt/types",
-      "nuxt-i18n"
+      "nuxt-i18n",
+      "@nuxt/image"
     ],
     "resolveJsonModule": true,
     "rootDir": "./",