diff --git a/packages/api-client/src/api/index.ts b/packages/api-client/src/api/index.ts
index cf9830eeb..4e9dd5573 100644
--- a/packages/api-client/src/api/index.ts
+++ b/packages/api-client/src/api/index.ts
@@ -61,3 +61,4 @@ export { default as updateCustomerEmail } from './updateCustomerEmail';
 export { default as upsellProduct } from './upsellProduct';
 export { default as urlResolver } from './urlResolver';
 export { default as wishlist } from './wishlist';
+export { default as wishlistItemsCount } from './wishlistItemsCount';
diff --git a/packages/api-client/src/api/wishlistItemsCount/index.ts b/packages/api-client/src/api/wishlistItemsCount/index.ts
new file mode 100644
index 000000000..53a3c5b82
--- /dev/null
+++ b/packages/api-client/src/api/wishlistItemsCount/index.ts
@@ -0,0 +1,27 @@
+import { ApolloQueryResult } from '@apollo/client/core';
+import { CustomQuery } from '@vue-storefront/core';
+
+import {
+  WishlistQuery,
+} from '../../types/GraphQL';
+import query from './wishlistItemsCount';
+import { Context } from '../../types/context';
+
+export default async (
+  context: Context,
+  customQuery: CustomQuery = { wishlistItemsCount: 'wishlistItemsCount' },
+): Promise<ApolloQueryResult<WishlistQuery>> => {
+  const { wishlistItemsCount } = context.extendQuery(customQuery, {
+    wishlistItemsCount: {
+      query,
+    },
+  });
+  try {
+    return await context.client
+      .query<WishlistQuery>({
+      query: wishlistItemsCount.query,
+    });
+  } catch (error) {
+    throw error.graphQLErrors?.[0].message || error.networkError?.result || error;
+  }
+};
diff --git a/packages/api-client/src/api/wishlistItemsCount/wishlistItemsCount.ts b/packages/api-client/src/api/wishlistItemsCount/wishlistItemsCount.ts
new file mode 100644
index 000000000..9833ba895
--- /dev/null
+++ b/packages/api-client/src/api/wishlistItemsCount/wishlistItemsCount.ts
@@ -0,0 +1,11 @@
+import gql from 'graphql-tag';
+
+export default gql`
+  query wishlist {
+    customer {
+      wishlists {
+        items_count
+      }
+    }
+  }
+`;
diff --git a/packages/api-client/src/types/API.ts b/packages/api-client/src/types/API.ts
index 95e0226bf..b30404d5a 100644
--- a/packages/api-client/src/types/API.ts
+++ b/packages/api-client/src/types/API.ts
@@ -444,4 +444,8 @@ export interface MagentoApiMethods {
     searchParams: WishlistQueryVariables,
     customQuery?: CustomQuery,
   ): Promise<ApolloQueryResult<WishlistQuery>>;
+
+  wishlistItemsCount(
+    customQuery?: CustomQuery,
+  ): Promise<ApolloQueryResult<WishlistQuery>>;
 }
diff --git a/packages/composables/src/composables/useCart/index.ts b/packages/composables/src/composables/useCart/index.ts
index fa59696a2..27a7d1be8 100644
--- a/packages/composables/src/composables/useCart/index.ts
+++ b/packages/composables/src/composables/useCart/index.ts
@@ -335,8 +335,8 @@ const factoryParams: UseCartFactoryParams<Cart, CartItem, Product> = {
     }
   },
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  clear: (context: Context, _params = null) => {
-    context.$magento.config.state.setCartId(null);
+  clear: async (context: Context, _params = null) => {
+    context.$magento.config.state.setCartId();
 
     return factoryParams.load(context, {});
   },
@@ -388,7 +388,7 @@ const factoryParams: UseCartFactoryParams<Cart, CartItem, Product> = {
     const apiState = context.$magento.config.state;
     const { data } : any = await context.$magento.api.cartTotalQty(apiState.getCartId());
 
-    return data?.cart?.total_quantity;
+    return data?.cart?.total_quantity ?? 0;
   },
 };
 
diff --git a/packages/composables/src/composables/useUser/index.ts b/packages/composables/src/composables/useUser/index.ts
index 00b37a524..c105e7f7b 100644
--- a/packages/composables/src/composables/useUser/index.ts
+++ b/packages/composables/src/composables/useUser/index.ts
@@ -60,9 +60,8 @@ CustomerCreateInput
 
     await context.$magento.api.revokeCustomerToken(params);
 
-    apiState.setCustomerToken(null);
-    apiState.setCartId(null);
-    context.cart.setCart(null);
+    apiState.setCustomerToken();
+    apiState.setCartId();
   },
   updateUser: async (context: Context, params) => {
     Logger.debug('[Magento] Update user information', { params });
diff --git a/packages/composables/src/composables/useWishlist/index.ts b/packages/composables/src/composables/useWishlist/index.ts
index 9656820a9..f657abb7a 100644
--- a/packages/composables/src/composables/useWishlist/index.ts
+++ b/packages/composables/src/composables/useWishlist/index.ts
@@ -30,6 +30,20 @@ const factoryParams: UseWishlistFactoryParams<any, any, any> = {
 
     return [];
   },
+  loadItemsCount: async (context: Context, params) => {
+    Logger.debug('[Magento Storefront]: useWishlist.wishlistItemsCount params->', params);
+    const apiState = context.$magento.config.state;
+
+    if (apiState.getCustomerToken()) {
+      const { data } = await context.$magento.api.wishlistItemsCount();
+
+      Logger.debug('[Result]:', { data });
+
+      return data?.customer?.wishlists ?? [];
+    }
+
+    return [];
+  },
   addItem: async (context, params) => {
     const {
       currentWishlist,
diff --git a/packages/composables/src/factories/useCartFactory.ts b/packages/composables/src/factories/useCartFactory.ts
index 55d7d3eeb..0e0bc62d1 100644
--- a/packages/composables/src/factories/useCartFactory.ts
+++ b/packages/composables/src/factories/useCartFactory.ts
@@ -159,22 +159,11 @@ export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi
   const load = async ({ customQuery } = { customQuery: undefined }) => {
     Logger.debug('useCart.load');
 
-    if (cart.value) {
-      /**
-         * Triggering change for hydration purpose,
-         * temporary issue related with cpapi plugin
-         */
-      loading.value = false;
-      error.value.load = null;
-      cart.value = { ...cart.value };
-
-      return;
-    }
     try {
       loading.value = true;
       const loadedCart = await _factoryParams.load({ customQuery });
       cart.value = loadedCart;
-      totalQuantity.value = loadedCart.total_quantity;
+      totalQuantity.value = loadedCart?.total_quantity ?? 0;
       error.value.load = null;
     } catch (err) {
       error.value.load = err;
@@ -207,7 +196,7 @@ export const useCartFactory = <CART, CART_ITEM, PRODUCT, API extends PlatformApi
       const updatedCart = await _factoryParams.clear({ currentCart: cart.value });
       error.value.clear = null;
       cart.value = updatedCart;
-      totalQuantity.value = updatedCart.total_quantity;
+      totalQuantity.value = 0;
     } catch (err) {
       error.value.clear = err;
       Logger.error('useCart/clear', err);
diff --git a/packages/composables/src/factories/useWishlistFactory.ts b/packages/composables/src/factories/useWishlistFactory.ts
index f0fd2bcd8..8fe11a60f 100644
--- a/packages/composables/src/factories/useWishlistFactory.ts
+++ b/packages/composables/src/factories/useWishlistFactory.ts
@@ -23,6 +23,12 @@ export interface UseWishlistFactoryParams<WISHLIST,
       pageSize: number;
     }>,
   }>) => Promise<WISHLIST>;
+  loadItemsCount: (context: Context, params: ComposableFunctionArgs<{
+    searchParams?: Partial<{
+      currentPage: number;
+      pageSize: number;
+    }>,
+  }>) => Promise<WISHLIST>;
   addItem: (
     context: Context,
     params: ComposableFunctionArgs<{
@@ -42,13 +48,17 @@ export interface UseWishlistFactoryParams<WISHLIST,
 export const useWishlistFactory = <WISHLIST, WISHLIST_ITEM, PRODUCT, API extends PlatformApi = any>(
   factoryParams: UseWishlistFactoryParams<WISHLIST, WISHLIST_ITEM, PRODUCT, API>,
 ) => {
+  const calculateWishlistTotal = (wishlists) => wishlists.reduce((prev, next) => (prev?.items_count ?? 0) + (next?.items_count ?? 0), 0);
+
   const useWishlist = (ssrKey = 'useWishlistFactory'): UseWishlist<WISHLIST, WISHLIST_ITEM, PRODUCT, API> => {
     const loading: Ref<boolean> = sharedRef<boolean>(false, `useWishlist-loading-${ssrKey}`);
     const wishlist: Ref<WISHLIST> = sharedRef(null, `useWishlist-wishlist-${ssrKey}`);
+    const itemsCount: Ref<number> = sharedRef(0, `useWishlist-itemsCount-${ssrKey}`);
     const error: Ref<UseWishlistErrors> = sharedRef({
       addItem: null,
       removeItem: null,
       load: null,
+      loadItemsCount: null,
       clear: null,
     }, `useWishlist-error-${ssrKey}`);
 
@@ -65,6 +75,7 @@ export const useWishlistFactory = <WISHLIST, WISHLIST_ITEM, PRODUCT, API extends
 
     const setWishlist = (newWishlist: WISHLIST) => {
       wishlist.value = newWishlist;
+      itemsCount.value = newWishlist[0].items_count;
       Logger.debug(`useWishlistFactory/${ssrKey}/setWishlist`, newWishlist);
     };
 
@@ -80,6 +91,7 @@ export const useWishlistFactory = <WISHLIST, WISHLIST_ITEM, PRODUCT, API extends
         });
         error.value.addItem = null;
         wishlist.value = updatedWishlist;
+        itemsCount.value = updatedWishlist.items_count;
       } catch (err) {
         error.value.addItem = err;
         Logger.error(`useWishlist/${ssrKey}/addItem`, err);
@@ -100,6 +112,7 @@ export const useWishlistFactory = <WISHLIST, WISHLIST_ITEM, PRODUCT, API extends
         });
         error.value.removeItem = null;
         wishlist.value = updatedWishlist;
+        itemsCount.value = updatedWishlist.items_count;
       } catch (err) {
         error.value.removeItem = err;
         Logger.error(`useWishlist/${ssrKey}/removeItem`, err);
@@ -118,7 +131,9 @@ export const useWishlistFactory = <WISHLIST, WISHLIST_ITEM, PRODUCT, API extends
       Logger.debug(`useWishlist/${ssrKey}/load`);
       try {
         loading.value = true;
-        wishlist.value = await _factoryParams.load(params);
+        const loadedWishlist = await _factoryParams.load(params);
+        wishlist.value = loadedWishlist;
+        itemsCount.value = calculateWishlistTotal(loadedWishlist);
         error.value.load = null;
       } catch (err) {
         error.value.load = err;
@@ -128,6 +143,20 @@ export const useWishlistFactory = <WISHLIST, WISHLIST_ITEM, PRODUCT, API extends
       }
     };
 
+    const loadItemsCount = async (params: {
+      customQuery?: CustomQuery
+    }) => {
+      Logger.debug(`useWishlist/${ssrKey}/loadItemsCount`);
+      try {
+        const loadedWishlist = await _factoryParams.loadItemsCount(params);
+        itemsCount.value = calculateWishlistTotal(loadedWishlist);
+        error.value.loadItemsCount = null;
+      } catch (err) {
+        error.value.loadItemsCount = err;
+        Logger.error(`useWishlist/${ssrKey}/loadItemsCount`, err);
+      }
+    };
+
     const clear = async () => {
       Logger.debug(`useWishlist/${ssrKey}/clear`);
 
@@ -138,6 +167,7 @@ export const useWishlistFactory = <WISHLIST, WISHLIST_ITEM, PRODUCT, API extends
         });
         error.value.clear = null;
         wishlist.value = updatedWishlist;
+        itemsCount.value = 0;
       } catch (err) {
         error.value.clear = err;
         Logger.error(`useWishlist/${ssrKey}/clear`, err);
@@ -157,15 +187,17 @@ export const useWishlistFactory = <WISHLIST, WISHLIST_ITEM, PRODUCT, API extends
 
     return {
       api: _factoryParams.api,
-      wishlist: computed(() => wishlist.value),
+      wishlist,
+      itemsCount,
       isInWishlist,
       addItem,
       load,
+      loadItemsCount,
       removeItem,
       clear,
       setWishlist,
-      loading: computed(() => loading.value),
-      error: computed(() => error.value),
+      loading,
+      error,
     };
   };
 
diff --git a/packages/composables/src/getters/wishlistGetters.ts b/packages/composables/src/getters/wishlistGetters.ts
index 3c0f42b85..a856a1dba 100644
--- a/packages/composables/src/getters/wishlistGetters.ts
+++ b/packages/composables/src/getters/wishlistGetters.ts
@@ -87,7 +87,7 @@ const getProducts = (wishlistData: Wishlist[] | Wishlist): {
     return [];
   }
 
-  const reducer = (acc, curr) => [...acc, ...curr.items_v2.items.map((item) => ({
+  const reducer = (acc, curr) => [...acc, ...curr?.items_v2?.items.map((item) => ({
     product: item.product,
     quantity: item.quantity,
     added_at: item.added_at,
diff --git a/packages/composables/src/types/composables.ts b/packages/composables/src/types/composables.ts
index 3ce8a12f3..6fe22188b 100644
--- a/packages/composables/src/types/composables.ts
+++ b/packages/composables/src/types/composables.ts
@@ -4,7 +4,7 @@ import {
   ComputedProperty,
   CustomQuery,
 } from '@vue-storefront/core';
-import { ComputedRef } from '@vue/composition-api';
+import { ComputedRef, Ref } from '@vue/composition-api';
 import { PlatformApi } from '@vue-storefront/core/lib/src/types';
 import { FetchPolicy } from './index';
 
@@ -300,6 +300,7 @@ export interface UseWishlistErrors {
   addItem: Error;
   removeItem: Error;
   load: Error;
+  loadItemsCount: Error;
   clear: Error;
 }
 
@@ -310,7 +311,7 @@ export interface UseWishlist<WISHLIST,
 > extends Composable<API> {
   wishlist: ComputedProperty<WISHLIST>;
   loading: ComputedProperty<boolean>;
-
+  itemsCount: Ref<number>;
   addItem(params: ComposableFunctionArgs<{ product: PRODUCT; }>): Promise<void>;
 
   removeItem(params: ComposableFunctionArgs<{ product: WISHLIST_ITEM; }>): Promise<void>;
@@ -322,6 +323,8 @@ export interface UseWishlist<WISHLIST,
     }>,
   }>): Promise<void>;
 
+  loadItemsCount(params: ComposableFunctionArgs<{}>): Promise<void>;
+
   clear(): Promise<void>;
 
   setWishlist: (wishlist: WISHLIST) => void;
diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
index eff73e1c2..37db9e73a 100644
--- a/packages/theme/components/AppHeader.vue
+++ b/packages/theme/components/AppHeader.vue
@@ -176,7 +176,7 @@ import {
   useCategory,
   useCategorySearch,
   useFacet,
-  useUser, useWishlist, wishlistGetters,
+  useUser, useWishlist,
 } from '@vue-storefront/magento';
 import {
   computed,
@@ -220,8 +220,8 @@ export default defineComponent({
     const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = useUiState();
     const { setTermForUrl, getFacetsFromURL, getAgnosticCatLink } = useUiHelpers();
     const { isAuthenticated } = useUser();
-    const { totalQuantity, loadTotalQty } = useCart();
-    const { wishlist } = useWishlist('GlobalWishlist');
+    const { totalQuantity: cartTotalItems, loadTotalQty: loadCartTotalQty } = useCart();
+    const { itemsCount: wishlistItemsQty, loadItemsCount: loadWishlistItemsCount } = useWishlist('GlobalWishlist');
     const {
       result: searchResult,
       search: productsSearch,
@@ -240,8 +240,7 @@ export default defineComponent({
     const searchBarRef = ref(null);
     const result = ref(null);
 
-    const wishlistHasProducts = computed(() => wishlistGetters.getTotalItems(wishlist.value) > 0);
-    const wishlistItemsQty = computed(() => wishlistGetters.getTotalItems(wishlist.value));
+    const wishlistHasProducts = computed(() => wishlistItemsQty.value > 0);
 
     const accountIcon = computed(() => (isAuthenticated.value ? 'profile_fill' : 'profile'));
 
@@ -256,7 +255,7 @@ export default defineComponent({
     };
 
     useAsync(async () => {
-      await Promise.all([loadTotalQty(), categoriesListSearch({ pageSize: 20 })]);
+      await Promise.all([loadCartTotalQty(), loadWishlistItemsCount(), categoriesListSearch({ pageSize: 20 })]);
     });
 
     const showSearch = () => {
@@ -323,7 +322,7 @@ export default defineComponent({
 
     return {
       accountIcon,
-      cartTotalItems: totalQuantity,
+      cartTotalItems,
       categoryTree,
       closeOrFocusSearchBar,
       closeSearch,
diff --git a/packages/theme/components/CartSidebar.vue b/packages/theme/components/CartSidebar.vue
index ad3928ba8..3da1d37f3 100644
--- a/packages/theme/components/CartSidebar.vue
+++ b/packages/theme/components/CartSidebar.vue
@@ -302,8 +302,9 @@ export default defineComponent({
     const tempProduct = ref();
 
     onMounted(() => {
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      loadCart();
+      if (cart.value === null) {
+        loadCart();
+      }
     });
 
     const goToCheckout = async () => {
diff --git a/packages/theme/components/LoginModal.vue b/packages/theme/components/LoginModal.vue
index a21baaf75..56126e9df 100644
--- a/packages/theme/components/LoginModal.vue
+++ b/packages/theme/components/LoginModal.vue
@@ -298,7 +298,9 @@ import {
 } from '@storefront-ui/vue';
 import { ValidationProvider, ValidationObserver, extend } from 'vee-validate';
 import { required, email } from 'vee-validate/dist/rules';
-import { useUser, useForgotPassword, useWishlist } from '@vue-storefront/magento';
+import {
+  useUser, useForgotPassword, useWishlist, useCart,
+} from '@vue-storefront/magento';
 import { useUiState } from '~/composables';
 import { customerPasswordRegExp, invalidPasswordMsg } from '~/helpers/customer/regex';
 
@@ -348,7 +350,9 @@ export default defineComponent({
       loading,
       error: userError,
     } = useUser();
-    const { load: loadWishlist } = useWishlist('GlobalWishlist');
+
+    const { load: loadCart } = useCart();
+    const { loadItemsCount } = useWishlist('GlobalWishlist');
     const { request, error: forgotPasswordError, loading: forgotPasswordLoading } = useForgotPassword();
 
     const barTitle = computed(() => {
@@ -439,7 +443,7 @@ export default defineComponent({
 
     const handleLogin = async () => {
       await handleForm(login)();
-      await loadWishlist('GlobalWishlist');
+      await Promise.all([loadItemsCount('GlobalWishlist'), loadCart()]);
     };
 
     const handleForgotten = async () => {
diff --git a/packages/theme/components/WishlistSidebar.vue b/packages/theme/components/WishlistSidebar.vue
index b7b2f6c6d..a59b6b5d1 100644
--- a/packages/theme/components/WishlistSidebar.vue
+++ b/packages/theme/components/WishlistSidebar.vue
@@ -27,10 +27,8 @@
           </SfButton>
         </div>
       </template>
-      <transition
-        name="fade"
-        mode="out-in"
-      >
+
+      <SfLoader :loading="loading">
         <div
           v-if="totalItems"
           key="my-wishlist"
@@ -132,7 +130,7 @@
             />
           </div>
         </div>
-      </transition>
+      </SfLoader>
       <template #content-bottom>
         <SfButton
           class="sf-button--full-width color-secondary"
@@ -154,6 +152,7 @@ import {
   SfPrice,
   SfCollectedProduct,
   SfLink,
+  SfLoader,
 } from '@storefront-ui/vue';
 import { computed, defineComponent, onMounted } from '@nuxtjs/composition-api';
 import {
@@ -175,11 +174,15 @@ export default defineComponent({
     SfPrice,
     SfCollectedProduct,
     SfLink,
+    SfLoader,
   },
   setup() {
     const { isWishlistSidebarOpen, toggleWishlistSidebar } = useUiState();
-    const { wishlist, removeItem, load: loadWishlist } = useWishlist('GlobalWishlist');
+    const {
+      wishlist, removeItem, load: loadWishlist, loading,
+    } = useWishlist('GlobalWishlist');
     const { isAuthenticated } = useUser();
+    console.log('VALUE', wishlist.value);
     const products = computed(() => wishlistGetters.getProducts(wishlist.value));
     const totals = computed(() => wishlistGetters.getTotals(wishlist.value));
     const totalItems = computed(() => wishlistGetters.getTotalItems(wishlist.value));
@@ -190,7 +193,9 @@ export default defineComponent({
     const { getMagentoImage, imageSizes } = useImage();
 
     onMounted(() => {
-      loadWishlist();
+      if (wishlist.value === null) {
+        loadWishlist('GlobalWishlist');
+      }
     });
 
     return {
@@ -208,6 +213,7 @@ export default defineComponent({
       productGetters,
       getMagentoImage,
       imageSizes,
+      loading,
     };
   },
 });
diff --git a/packages/theme/components/__tests__/LoginModal.spec.js b/packages/theme/components/__tests__/LoginModal.spec.js
index 0734739f1..809fe3704 100644
--- a/packages/theme/components/__tests__/LoginModal.spec.js
+++ b/packages/theme/components/__tests__/LoginModal.spec.js
@@ -2,8 +2,10 @@
 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 { useUser, useForgotPassword, useCart } from '@vue-storefront/magento';
+import {
+  render, useUserMock, useForgotPasswordMock, useCartMock,
+} from '~/test-utils';
 import useUiState from '~/composables/useUiState.ts';
 
 import LoginModal from '../LoginModal';
@@ -11,13 +13,16 @@ import LoginModal from '../LoginModal';
 jest.mock('~/composables/useUiState.ts', () => jest.fn());
 jest.mock('@vue-storefront/magento', () => ({
   useUser: jest.fn(),
+  useCart: jest.fn(),
   useForgotPassword: jest.fn(),
   useWishlist: jest.fn().mockReturnValue({
     load: jest.fn(),
+    loadItemsCount: jest.fn(),
   }),
 }));
 
 describe('<LoginModal/>', () => {
+  useCart.mockReturnValue(useCartMock());
   it('User can log in', async () => {
     useUiState.mockReturnValue({
       isLoginModalOpen: ref(true),
diff --git a/packages/theme/layouts/default.vue b/packages/theme/layouts/default.vue
index 034873a0d..83c951f25 100644
--- a/packages/theme/layouts/default.vue
+++ b/packages/theme/layouts/default.vue
@@ -1,9 +1,7 @@
 <template>
   <div>
     <CartSidebar v-if="isCartSidebarOpen" />
-    <LazyHydrate when-visible>
-      <WishlistSidebar />
-    </LazyHydrate>
+    <WishlistSidebar v-if="isWishlistSidebarOpen" />
     <LazyHydrate when-visible>
       <LoginModal />
     </LazyHydrate>
@@ -54,7 +52,7 @@ export default defineComponent({
     const route = useRoute();
     const { load: loadUser } = useUser();
     const { loadConfiguration } = useMagentoConfiguration();
-    const { isCartSidebarOpen } = useUiState();
+    const { isCartSidebarOpen, isWishlistSidebarOpen } = useUiState();
 
     useAsync(() => {
       loadConfiguration();
@@ -66,6 +64,7 @@ export default defineComponent({
 
     return {
       isCartSidebarOpen,
+      isWishlistSidebarOpen,
       route,
     };
   },
diff --git a/packages/theme/pages/MyAccount.vue b/packages/theme/pages/MyAccount.vue
index b9b6df64a..6ffb1d523 100644
--- a/packages/theme/pages/MyAccount.vue
+++ b/packages/theme/pages/MyAccount.vue
@@ -54,7 +54,7 @@ import {
   useRoute,
   useRouter,
 } from '@nuxtjs/composition-api';
-import { useUser } from '@vue-storefront/magento';
+import { useCart, useUser } from '@vue-storefront/magento';
 import {
   mapMobileObserver,
   unMapMobileObserver,
@@ -85,6 +85,7 @@ export default defineComponent({
     const route = useRoute();
     const router = useRouter();
     const { logout } = useUser();
+    const { clear } = useCart();
     const { localePath, app } = useContext();
     const isMobile = computed(() => mapMobileObserver().isMobile.get());
     const breadcrumbs = ref([
@@ -110,7 +111,7 @@ export default defineComponent({
 
     const changeActivePage = async (title) => {
       if (title === app.i18n.t('Log out')) {
-        await logout();
+        await Promise.all([logout(), clear()]);
         await router.push(`${localePath({ name: 'home' })}`);
 
         return;
diff --git a/packages/theme/test-utils/mocks/useCart.js b/packages/theme/test-utils/mocks/useCart.js
index 0eb6fb53e..9e1d7d878 100644
--- a/packages/theme/test-utils/mocks/useCart.js
+++ b/packages/theme/test-utils/mocks/useCart.js
@@ -3,6 +3,7 @@ export const useEmptyCartMock = (cartData = {}) => ({
   loading: false,
   removeItem: jest.fn(),
   updateItemQty: jest.fn(),
+  loadTotalQty: jest.fn(() => 0),
   cart: {
     value: {},
   },
@@ -14,6 +15,7 @@ export const useCartMock = (cartData = {}) => ({
   loading: false,
   removeItem: jest.fn(),
   updateItemQty: jest.fn(),
+  loadTotalQty: jest.fn(() => 2),
   cart: {
     value: {
       items: [