From 40ae24a04c597434b365791ce61ad300f70e17c1 Mon Sep 17 00:00:00 2001
From: Alexandr SaVBaD Waltz <savbad@wiseless.xyz>
Date: Sat, 13 Sep 2025 12:53:06 +0300
Subject: [PATCH] Features: 1) Add SEO-related fragments to GraphQL queries
 including `SEOMETA_FRAGMENT` usage in brands, categories, and products
 queries; 2) Enable localized and dynamic SEO metadata handling in category
 pages with Vue composables and `useSeoMeta`; 3) Replace obsolete
 `client-only` wrapper with native Nuxt components like `nuxt-marquee` for
 enhanced rendering;

Fixes: 1) Correct file path imports by removing `.js` extensions in GraphQL fragments; 2) Resolve typo in `usePromocodeStore` composables to ensure consistent store usage; 3) Add missing `:type="submit"` to login form button for proper form submission handling;

Extra: 1) Remove unused `.idea` and `README.md` files for repository cleanup; 2) Delete extraneous dependencies from `package-lock.json` for streamlined package management; 3) Refactor category slug handling with improved composable logic for cleaner route parameters and SEO alignment.
---
 .idea/evibes.iml                              |  35 ---
 storefront/README.md                          |  75 -----
 storefront/app.vue                            |   4 +-
 storefront/components/cards/order.vue         |   2 +
 storefront/components/cards/product.vue       |   6 +-
 storefront/components/forms/contact.vue       |   1 +
 storefront/components/forms/deposit.vue       |   1 +
 storefront/components/forms/login.vue         |   1 +
 storefront/components/forms/new-password.vue  |   1 +
 storefront/components/forms/register.vue      |   1 +
 .../components/forms/reset-password.vue       |   1 +
 storefront/components/forms/update.vue        |   1 +
 storefront/components/home/brands.vue         |  54 ++--
 .../components/home/category-tags/index.vue   |   5 +-
 .../components/home/collection/index.vue      |  50 ++--
 storefront/components/store/filter.vue        |   1 +
 storefront/components/store/index.vue         |  80 ++++--
 storefront/components/store/top.vue           |   3 +-
 storefront/components/ui/button.vue           |   3 +-
 storefront/components/ui/link.vue             |  15 +-
 storefront/composables/auth/useLogin.ts       |   2 -
 storefront/composables/auth/useRefresh.ts     |   2 -
 storefront/composables/brands/index.ts        |   2 +-
 .../composables/brands/useBrandBySlug.ts      |  22 ++
 .../composables/brands/useBrandByUuid.ts      |  21 --
 storefront/composables/brands/useBrands.ts    |   8 +-
 .../categories/useCategoryBySlug.ts           |   1 +
 .../categories/useCategoryBySlugSeo.ts        |  21 ++
 storefront/composables/posts/index.ts         |   1 +
 storefront/composables/posts/usePostBySlug.ts |  38 +++
 .../composables/products/useProductBySlug.ts  |   3 +-
 .../composables/products/useProductTags.ts    |   8 +-
 .../composables/products/useProducts.ts       |   4 +-
 .../composables/promocodes/usePromocodes.ts   |   4 +-
 storefront/composables/seo/index.ts           |   1 +
 storefront/composables/seo/useDefaultSeo.ts   |  27 ++
 storefront/composables/store/useStore.ts      |  10 +-
 storefront/composables/user/useDeposit.ts     |   6 +-
 .../composables/user/useUserBaseData.ts       |  22 +-
 .../graphql/fragments/brands.fragment.ts      |   2 +
 .../graphql/fragments/seometa.fragment.ts     |  12 +
 storefront/graphql/mutations/cart.ts          |   2 +-
 storefront/graphql/mutations/deposit.ts       |   9 +-
 storefront/graphql/mutations/wishlist.ts      |   2 +-
 storefront/graphql/queries/standalone/blog.ts |   6 +-
 .../graphql/queries/standalone/brands.ts      |  17 +-
 .../graphql/queries/standalone/categories.ts  |  26 +-
 .../graphql/queries/standalone/orders.ts      |   2 +-
 .../graphql/queries/standalone/products.ts    |   7 +-
 .../graphql/queries/standalone/wishlist.ts    |   2 +-
 storefront/i18n/locales/en-gb.json            |   3 +
 storefront/package-lock.json                  | 270 ------------------
 storefront/pages/brand/[slug].vue             |  76 +++++
 storefront/pages/brand/[uuid].vue             |  40 ---
 storefront/pages/catalog/[slug].vue           |  59 +++-
 storefront/pages/index.vue                    |  23 +-
 storefront/pages/product/[slug].vue           | 151 ++++++----
 storefront/pages/profile/cart.vue             |   7 +-
 storefront/pages/profile/promocodes.vue       |   4 +-
 storefront/plugins/apollo.ts                  |   5 +-
 storefront/types/api/categories.ts            |  12 +-
 storefront/types/app/brand.ts                 |   4 +-
 storefront/types/app/products.ts              |   3 +
 storefront/types/app/seometa.ts               |  20 ++
 storefront/types/index.ts                     |   1 +
 65 files changed, 648 insertions(+), 660 deletions(-)
 delete mode 100644 .idea/evibes.iml
 delete mode 100644 storefront/README.md
 create mode 100644 storefront/composables/brands/useBrandBySlug.ts
 delete mode 100644 storefront/composables/brands/useBrandByUuid.ts
 create mode 100644 storefront/composables/categories/useCategoryBySlugSeo.ts
 create mode 100644 storefront/composables/posts/index.ts
 create mode 100644 storefront/composables/posts/usePostBySlug.ts
 create mode 100644 storefront/composables/seo/index.ts
 create mode 100644 storefront/composables/seo/useDefaultSeo.ts
 create mode 100644 storefront/graphql/fragments/seometa.fragment.ts
 create mode 100644 storefront/pages/brand/[slug].vue
 delete mode 100644 storefront/pages/brand/[uuid].vue
 create mode 100644 storefront/types/app/seometa.ts

diff --git a/.idea/evibes.iml b/.idea/evibes.iml
deleted file mode 100644
index 307a37b8..00000000
--- a/.idea/evibes.iml
+++ /dev/null
@@ -1,35 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="PYTHON_MODULE" version="4">
-  <component name="FacetManager">
-    <facet type="django" name="Django">
-      <configuration>
-        <option name="rootFolder" value="$MODULE_DIR$" />
-        <option name="settingsModule" value="evibes/settings/__init__.py" />
-        <option name="manageScript" value="$MODULE_DIR$/manage.py" />
-        <option name="environment" value="&lt;map/&gt;" />
-        <option name="doNotUseTestRunner" value="false" />
-        <option name="trackFilePattern" value="migrations" />
-      </configuration>
-    </facet>
-  </component>
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-  <component name="PyDocumentationSettings">
-    <option name="format" value="PLAIN" />
-    <option name="myDocStringFormat" value="Plain" />
-  </component>
-  <component name="TemplatesService">
-    <option name="TEMPLATE_CONFIGURATION" value="Django" />
-    <option name="TEMPLATE_FOLDERS">
-      <list>
-        <option value="$MODULE_DIR$/blog/templates" />
-        <option value="$MODULE_DIR$/core/templates" />
-        <option value="$MODULE_DIR$/payments/templates" />
-        <option value="$MODULE_DIR$/vibes_auth/templates" />
-      </list>
-    </option>
-  </component>
-</module>
\ No newline at end of file
diff --git a/storefront/README.md b/storefront/README.md
deleted file mode 100644
index 25b58212..00000000
--- a/storefront/README.md
+++ /dev/null
@@ -1,75 +0,0 @@
-# Nuxt Minimal Starter
-
-Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
-
-## Setup
-
-Make sure to install dependencies:
-
-```bash
-# npm
-npm install
-
-# pnpm
-pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
-```
-
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
diff --git a/storefront/app.vue b/storefront/app.vue
index a88ab6bf..1e99eeb8 100644
--- a/storefront/app.vue
+++ b/storefront/app.vue
@@ -23,7 +23,6 @@ import {useRefresh} from "~/composables/auth";
 import {useLanguages} from "~/composables/languages";
 import {useCompanyInfo} from "~/composables/company";
 import {useCategories} from "~/composables/categories";
-import {useNotification} from "~/composables/notification";
 
 const { locale } = useI18n();
 const route = useRoute();
@@ -38,7 +37,8 @@ const showBreadcrumbs = computed(() => {
       'brand',
       'search',
       'profile',
-      'activate-user'
+      'activate-user',
+      'reset-password'
   ].some(prefix => name.startsWith(prefix));
 });
 
diff --git a/storefront/components/cards/order.vue b/storefront/components/cards/order.vue
index c59f0432..355c6605 100644
--- a/storefront/components/cards/order.vue
+++ b/storefront/components/cards/order.vue
@@ -52,6 +52,8 @@
           <nuxt-img
               :src="product.node.product.images.edges[0].node.image"
               :alt="product.node.product.name"
+              format="webp"
+              densities="x1"
           />
           <p>{{ product.node.product.name }}</p>
         </div>
diff --git a/storefront/components/cards/product.vue b/storefront/components/cards/product.vue
index 61e7ea7e..87cfae28 100644
--- a/storefront/components/cards/product.vue
+++ b/storefront/components/cards/product.vue
@@ -67,6 +67,7 @@
               productUuid: product.uuid,
               productName: product.name
             })"
+            :type="'button'"
             :isLoading="removeLoading"
         >
           {{ t('buttons.removeFromCart') }}
@@ -79,6 +80,7 @@
               productUuid: product.uuid,
               productName: product.name
             })"
+            :type="'button'"
             :isLoading="addLoading"
         >
           {{ t('buttons.addToCart') }}
@@ -106,7 +108,7 @@
         >
           -
         </button>
-        <span class="tools__item tools__item-count" v-text="'X' + productinCartQuantity" />
+        <span class="tools__item tools__item-count" v-text="'X' + productInCartQuantity" />
         <button
             class="tools__item tools__item-button"
             @click="overwriteOrder({
@@ -156,7 +158,7 @@ const isProductInWishlist = computed(() => {
 const isProductInCart = computed(() => {
   return cartStore.currentOrder?.orderProducts?.edges.find((prod) => prod.node.product.uuid === props.product?.uuid);
 });
-const productinCartQuantity = computed(() => {
+const productInCartQuantity = computed(() => {
   return cartStore.currentOrder?.orderProducts?.edges.filter((prod) => prod.node.product.uuid === props.product.uuid)[0].node.quantity;
 });
 
diff --git a/storefront/components/forms/contact.vue b/storefront/components/forms/contact.vue
index 7c4f96fb..6617b538 100644
--- a/storefront/components/forms/contact.vue
+++ b/storefront/components/forms/contact.vue
@@ -32,6 +32,7 @@
         v-model="message"
     />
     <ui-button
+        :type="'submit'"
         class="form__button"
         :isDisabled="!isFormValid"
         :isLoading="loading"
diff --git a/storefront/components/forms/deposit.vue b/storefront/components/forms/deposit.vue
index dd2d21e1..46d185e5 100644
--- a/storefront/components/forms/deposit.vue
+++ b/storefront/components/forms/deposit.vue
@@ -18,6 +18,7 @@
       />
     </div>
     <ui-button
+        :type="'submit'"
         class="form__button"
         :isDisabled="!isFormValid"
         :isLoading="loading"
diff --git a/storefront/components/forms/login.vue b/storefront/components/forms/login.vue
index bbbf85ea..b02d8158 100644
--- a/storefront/components/forms/login.vue
+++ b/storefront/components/forms/login.vue
@@ -25,6 +25,7 @@
       {{ t('forms.login.forgot') }}
     </ui-link>
     <ui-button
+        :type="'submit'"
         class="form__button"
         :isDisabled="!isFormValid"
         :isLoading="loading"
diff --git a/storefront/components/forms/new-password.vue b/storefront/components/forms/new-password.vue
index 83e16fea..fa29f52d 100644
--- a/storefront/components/forms/new-password.vue
+++ b/storefront/components/forms/new-password.vue
@@ -14,6 +14,7 @@
         v-model="confirmPassword"
     />
     <ui-button
+        :type="'submit'"
         class="form__button"
         :isDisabled="!isFormValid"
         :isLoading="loading"
diff --git a/storefront/components/forms/register.vue b/storefront/components/forms/register.vue
index c59f72aa..881e8b9a 100644
--- a/storefront/components/forms/register.vue
+++ b/storefront/components/forms/register.vue
@@ -44,6 +44,7 @@
         v-model="confirmPassword"
     />
     <ui-button
+        :type="'submit'"
         class="form__button"
         :isDisabled="!isFormValid"
         :isLoading="loading"
diff --git a/storefront/components/forms/reset-password.vue b/storefront/components/forms/reset-password.vue
index 52eed779..3c2ff02e 100644
--- a/storefront/components/forms/reset-password.vue
+++ b/storefront/components/forms/reset-password.vue
@@ -9,6 +9,7 @@
         :inputMode="'email'"
     />
     <ui-button
+        :type="'submit'"
         class="form__button"
         :isDisabled="!isFormValid"
         :isLoading="loading"
diff --git a/storefront/components/forms/update.vue b/storefront/components/forms/update.vue
index 7b8eb65f..23f8d797 100644
--- a/storefront/components/forms/update.vue
+++ b/storefront/components/forms/update.vue
@@ -43,6 +43,7 @@
       />
     </div>
     <ui-button
+        :type="'submit'"
         class="form__button"
         :isLoading="loading"
     >
diff --git a/storefront/components/home/brands.vue b/storefront/components/home/brands.vue
index ceaee0bf..b947d691 100644
--- a/storefront/components/home/brands.vue
+++ b/storefront/components/home/brands.vue
@@ -1,39 +1,39 @@
 <template>
   <div class="brands">
-    <client-only>
-      <NuxtMarquee
-          class="brand__marquee"
-          id="marquee-slider"
-          :speed="50"
-          :pauseOnHover="true"
+    <nuxt-marquee
+        class="brand__marquee"
+        id="marquee-slider"
+        :speed="50"
+        :pauseOnHover="true"
+    >
+      <nuxt-link-locale
+          v-for="brand in brands"
+          :key="brand.node.uuid"
+          :to="`/brand/${brand.node.slug}`"
       >
-        <div
-            class="brands__item"
-            v-for="brand in brands"
-            :key="brand.node.uuid"
+      <div
+          class="brands__item"
 
-        >
-          <nuxt-link-locale
-              :to="`/brand/${brand.node.uuid}`"
-          >
-            <nuxt-img
-                densities="x1"
-                :src="brand.node.smallLogo"
-                :alt="brand.node.name"
-                loading="lazy"
-                class="brands__item-image"
-            />
-          </nuxt-link-locale>
-        </div>
-      </NuxtMarquee>
-    </client-only>
+      >
+          <nuxt-img
+              densities="x1"
+              :src="brand.node.smallLogo"
+              :alt="brand.node.name"
+              loading="lazy"
+              class="brands__item-image"
+          />
+      </div>
+      </nuxt-link-locale>
+    </nuxt-marquee>
   </div>
 </template>
 
 <script setup lang="ts">
-import {useBrands} from "~/composables/brands";
+import type {IBrand} from "~/types";
 
-const { brands } = await useBrands();
+defineProps<{
+  brands: { node: IBrand }[]
+}>()
 </script>
 
 <style lang="scss" scoped>
diff --git a/storefront/components/home/category-tags/index.vue b/storefront/components/home/category-tags/index.vue
index 7fc7ebc2..266cea30 100644
--- a/storefront/components/home/category-tags/index.vue
+++ b/storefront/components/home/category-tags/index.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="tags">
+  <div
+      class="tags"
+      v-if="tags.length > 0"
+  >
     <home-category-tags-block
         v-for="tag in tags"
         :key="tag.node.uuid"
diff --git a/storefront/components/home/collection/index.vue b/storefront/components/home/collection/index.vue
index cfcade82..1c50816c 100644
--- a/storefront/components/home/collection/index.vue
+++ b/storefront/components/home/collection/index.vue
@@ -9,14 +9,16 @@
               :key="tag.node.uuid"
               :tag="tag.node"
           />
-          <home-collection-inner
-              v-if="newProducts.length > 0"
-              :tag="newProductsTag"
-          />
-          <home-collection-inner
-              v-if="priceProducts.length > 0"
-              :tag="priceProductsTag"
-          />
+          <client-only>
+            <home-collection-inner
+                v-if="newProducts.length > 0"
+                :tag="newProductsTag"
+            />
+            <home-collection-inner
+                v-if="priceProducts.length > 0"
+                :tag="priceProductsTag"
+            />
+          </client-only>
         </div>
       </div>
     </div>
@@ -24,20 +26,15 @@
 </template>
 
 <script setup lang="ts">
-import {useProducts, useProductTags} from "@/composables/products";
+import type {IProduct, IProductTag} from "~/types";
 
-const { t } = useI18n()
+const props = defineProps<{
+  tags: { node: IProductTag }[],
+  newProducts: { cursor: string; node: IProduct }[],
+  priceProducts: { cursor: string; node: IProduct }[]
+}>()
 
-const { tags } = await useProductTags();
-const {
-  products: newProducts,
-  getProducts: getNewProducts
-} = await useProducts();
-
-const {
-  products: priceProducts,
-  getProducts: getPriceProducts
-} = await useProducts();
+const { t } = useI18n();
 
 const newProductsTag = computed(() => {
   return {
@@ -45,7 +42,7 @@ const newProductsTag = computed(() => {
     tagName: t('home.collection.newTag'),
     uuid: 'new-products',
     productSet: {
-      edges: newProducts.value
+      edges: props.newProducts
     }
   }
 });
@@ -56,19 +53,10 @@ const priceProductsTag = computed(() => {
     tagName: t('home.collection.cheapTag'),
     uuid: 'price-products',
     productSet: {
-      edges: priceProducts.value
+      edges: props.priceProducts
     }
   }
 });
-
-await Promise.all([
-  getNewProducts({
-    orderBy: '-modified'
-  }),
-  getPriceProducts({
-    orderBy: '-price'
-  })
-]);
 </script>
 
 <style lang="scss" scoped>
diff --git a/storefront/components/store/filter.vue b/storefront/components/store/filter.vue
index 793e3686..f5785f51 100644
--- a/storefront/components/store/filter.vue
+++ b/storefront/components/store/filter.vue
@@ -55,6 +55,7 @@
           {{ t('store.filters.reset') }}
         </button>
         <ui-button
+            :type="'button'"
             @click="onApply"
         >
           {{ t('store.filters.apply') }}
diff --git a/storefront/components/store/index.vue b/storefront/components/store/index.vue
index e6d5b572..657b809b 100644
--- a/storefront/components/store/index.vue
+++ b/storefront/components/store/index.vue
@@ -10,28 +10,31 @@
     <store-top
         v-model="orderBy"
         @toggle-filter="onFilterToggle"
+        :isFiltersVisible="filters.length > 0"
     />
-    <div
-        class="store__list"
-        :class="[
+    <client-only>
+      <div
+          class="store__list"
+          :class="[
             { 'store__list-grid': productView === 'grid' },
             { 'store__list-list': productView === 'list' }
         ]"
-    >
-      <cards-product
-          v-if="products.length"
-          v-for="product in products"
-          :key="product.node.uuid"
-          :product="product.node"
-          :isList="productView === 'list'"
-      />
-      <skeletons-cards-product
-          v-if="pending"
-          v-for="idx in 12"
-          :key="idx"
-          :isList="productView === 'list'"
-      />
-    </div>
+      >
+        <cards-product
+            v-if="products.length && !pending"
+            v-for="product in products"
+            :key="product.node.uuid"
+            :product="product.node"
+            :isList="productView === 'list'"
+        />
+        <skeletons-cards-product
+            v-if="pending"
+            v-for="idx in 12"
+            :key="idx"
+            :isList="productView === 'list'"
+        />
+      </div>
+    </client-only>
     <div class="store__list-observer" ref="observer"></div>
   </div>
 </template>
@@ -42,8 +45,11 @@ import {useRouteQuery} from "@vueuse/router";
 import {useRouteParams} from "@vueuse/router";
 import {useCategoryBySlug} from "~/composables/categories";
 import {useAppConfig} from '~/composables/config';
+import {useDefaultSeo} from "~/composables/seo";
 
-const { COOKIES_PRODUCT_VIEW_KEY } = useAppConfig();
+const { locale } = useI18n();
+
+const { COOKIES_PRODUCT_VIEW_KEY, APP_NAME } = useAppConfig();
 const productView = useCookie<string>(
   COOKIES_PRODUCT_VIEW_KEY as string,
   {
@@ -59,7 +65,39 @@ const minPrice = useRouteQuery<number>('minPrice', 0);
 const maxPrice = useRouteQuery<number>('maxPrice', 50000);
 const observer = ref(null);
 
-const { category, filters } = await useCategoryBySlug(slug.value);
+const { category, seoMeta, filters } = await useCategoryBySlug(slug.value);
+
+const meta = useDefaultSeo(seoMeta.value || null);
+
+if (meta) {
+  useSeoMeta({
+    title: meta.title || APP_NAME,
+    description: meta.description || meta.title || APP_NAME,
+    ogTitle: meta.og.title || undefined,
+    ogDescription: meta.og.description || meta.title || APP_NAME,
+    ogType: meta.og.type || undefined,
+    ogUrl: meta.og.url || undefined,
+    ogImage: meta.og.image || undefined,
+    twitterCard: meta.twitter.card || undefined,
+    twitterTitle: meta.twitter.title || undefined,
+    twitterDescription: meta.twitter.description || undefined,
+    robots: meta.robots,
+  });
+
+  useHead({
+    link: [
+      meta.canonical ? { rel: 'canonical', href: meta.canonical } : {},
+    ].filter(Boolean) as any,
+    meta: [{ property: 'og:locale', content: locale.value }],
+    script: meta.jsonLd.map((obj: any) => ({
+      type: 'application/ld+json',
+      innerHTML: JSON.stringify(obj),
+    })),
+    __dangerouslyDisableSanitizersByTagID: Object.fromEntries(
+        meta.jsonLd.map((_, i: number) => [`ldjson-${i}`, ['innerHTML']])
+    ),
+  });
+}
 
 watch(
   () => category.value,
@@ -71,7 +109,7 @@ watch(
   { immediate: true }
 );
 
-const { pending, products, pageInfo, variables } = await useStore(
+const { pending, products, pageInfo, variables } = useStore(
   slug.value,
   attributes.value,
   orderBy.value,
diff --git a/storefront/components/store/top.vue b/storefront/components/store/top.vue
index 08f27b37..f6a4031d 100644
--- a/storefront/components/store/top.vue
+++ b/storefront/components/store/top.vue
@@ -35,7 +35,7 @@
         </button>
       </div>
     </div>
-    <div class="top__filter">
+    <div class="top__filter" v-if="isFiltersVisible">
       <button
           class="top__filter-button"
           @click="$emit('toggle-filter')"
@@ -53,6 +53,7 @@ import { useAppConfig } from '~/composables/config';
 
 const props = defineProps<{
   modelValue: string
+  isFiltersVisible: boolean
 }>()
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string): void
diff --git a/storefront/components/ui/button.vue b/storefront/components/ui/button.vue
index 343112c5..7440568f 100644
--- a/storefront/components/ui/button.vue
+++ b/storefront/components/ui/button.vue
@@ -3,7 +3,7 @@
       class="button"
       :disabled="isDisabled"
       :class="[{active: isLoading}]"
-      type="submit"
+      :type="type"
   >
     <ui-loader class="button__loader" v-if="isLoading" />
     <slot v-else />
@@ -12,6 +12,7 @@
 
 <script setup lang="ts">
 const props = defineProps<{
+  type: 'submit' | 'button',
   isDisabled?: boolean,
   isLoading?: boolean
 }>()
diff --git a/storefront/components/ui/link.vue b/storefront/components/ui/link.vue
index 2cc5ff23..56e4682d 100644
--- a/storefront/components/ui/link.vue
+++ b/storefront/components/ui/link.vue
@@ -1,22 +1,23 @@
 <template>
-  <div @click="redirect" class="link">
+  <div
+      v-on="props.routePath ? { click: redirect } : {}"
+      class="link"
+  >
     <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts">
 const props = defineProps<{
-  routePath: string
+  routePath?: string
 }>();
 
 const router = useRouter();
 
 const redirect = () => {
-  if (props.routePath) {
-    router.push({
-      path: props.routePath
-    });
-  }
+  router.push({
+    path: props.routePath
+  });
 };
 </script>
 
diff --git a/storefront/composables/auth/useLogin.ts b/storefront/composables/auth/useLogin.ts
index d007d5a9..585ecad2 100644
--- a/storefront/composables/auth/useLogin.ts
+++ b/storefront/composables/auth/useLogin.ts
@@ -57,8 +57,6 @@ export function useLogin() {
     userStore.setUser(authData.user);
     cookieAccess.value = authData.accessToken;
 
-    await nextTick();
-
     appStore.unsetActiveState();
 
     useNotification({
diff --git a/storefront/composables/auth/useRefresh.ts b/storefront/composables/auth/useRefresh.ts
index 015a24c6..6cd684e8 100644
--- a/storefront/composables/auth/useRefresh.ts
+++ b/storefront/composables/auth/useRefresh.ts
@@ -64,8 +64,6 @@ export function useRefresh() {
     // });
     // await usePromocodes();
 
-    await nextTick();
-
     await useUserBaseData(data.user.email);
   }
 
diff --git a/storefront/composables/brands/index.ts b/storefront/composables/brands/index.ts
index 01b9bd41..08b4fa14 100644
--- a/storefront/composables/brands/index.ts
+++ b/storefront/composables/brands/index.ts
@@ -1,2 +1,2 @@
 export * from './useBrands';
-export * from './useBrandByUuid';
\ No newline at end of file
+export * from './useBrandBySlug';
\ No newline at end of file
diff --git a/storefront/composables/brands/useBrandBySlug.ts b/storefront/composables/brands/useBrandBySlug.ts
new file mode 100644
index 00000000..b1978f98
--- /dev/null
+++ b/storefront/composables/brands/useBrandBySlug.ts
@@ -0,0 +1,22 @@
+import {GET_BRAND_BY_SLUG} from "~/graphql/queries/standalone/brands";
+import type {IBrandsResponse} from "~/types";
+
+export async function useBrandBySlug(slug: string) {
+  const brand = computed(() => data.value?.brands.edges[0]?.node ?? null);
+
+  const { data, error } = await useAsyncQuery<IBrandsResponse>(
+      GET_BRAND_BY_SLUG,
+    { slug }
+  );
+
+  watch(error, (err) => {
+    if (err) {
+      console.error('useBrandsBySlug error:', err)
+    }
+  });
+
+  return {
+    brand,
+    seoMeta: computed(() => brand.value?.seoMeta)
+  }
+}
\ No newline at end of file
diff --git a/storefront/composables/brands/useBrandByUuid.ts b/storefront/composables/brands/useBrandByUuid.ts
deleted file mode 100644
index a42288a7..00000000
--- a/storefront/composables/brands/useBrandByUuid.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import {GET_BRAND_BY_UUID} from "~/graphql/queries/standalone/brands";
-import type {IBrandsResponse} from "~/types";
-
-export async function useBrandByUuid(uuid: string) {
-  const brand = computed(() => data.value?.brands.edges[0].node ?? []);
-
-  const { data, error } = await useAsyncQuery<IBrandsResponse>(
-    GET_BRAND_BY_UUID,
-    { uuid }
-  );
-
-  watch(error, (err) => {
-    if (err) {
-      console.error('useBrandsByUuid error:', err)
-    }
-  });
-
-  return {
-    brand
-  }
-}
\ No newline at end of file
diff --git a/storefront/composables/brands/useBrands.ts b/storefront/composables/brands/useBrands.ts
index ffc5d43a..1753c54b 100644
--- a/storefront/composables/brands/useBrands.ts
+++ b/storefront/composables/brands/useBrands.ts
@@ -1,13 +1,13 @@
 import {GET_BRANDS} from "~/graphql/queries/standalone/brands";
 import type {IBrandsResponse} from "~/types";
 
-export async function useBrands() {
-  const brands = computed(() => data.value?.brands.edges ?? []);
-
-  const { data, error } = await useAsyncQuery<IBrandsResponse>(
+export function useBrands() {
+  const { data, error } = useAsyncQuery<IBrandsResponse>(
     GET_BRANDS
   );
 
+  const brands = computed(() => data.value?.brands.edges ?? []);
+
   watch(error, (err) => {
     if (err) {
       console.error('useBrands error:', err)
diff --git a/storefront/composables/categories/useCategoryBySlug.ts b/storefront/composables/categories/useCategoryBySlug.ts
index badd5f61..879d3362 100644
--- a/storefront/composables/categories/useCategoryBySlug.ts
+++ b/storefront/composables/categories/useCategoryBySlug.ts
@@ -22,6 +22,7 @@ export async function useCategoryBySlug(slug: string) {
 
   return {
     category,
+    seoMeta: computed(() => category.value?.seoMeta),
     filters
   };
 }
\ No newline at end of file
diff --git a/storefront/composables/categories/useCategoryBySlugSeo.ts b/storefront/composables/categories/useCategoryBySlugSeo.ts
new file mode 100644
index 00000000..8ec42cbf
--- /dev/null
+++ b/storefront/composables/categories/useCategoryBySlugSeo.ts
@@ -0,0 +1,21 @@
+import type {ICategoryBySlugSeoResponse} from '~/types';
+import {GET_CATEGORY_BY_SLUG_SEO} from "~/graphql/queries/standalone/categories";
+
+export async function useCategoryBySlugSeo(slug: string) {
+    const category = computed(() => data.value?.categories.edges[0]?.node ?? null);
+
+    const { data, error } = await useAsyncQuery<ICategoryBySlugSeoResponse>(
+        GET_CATEGORY_BY_SLUG_SEO,
+        { categorySlug: slug }
+    );
+
+    watch(error, (err) => {
+        if (err) {
+            console.error('useCategoryBySlugSeo error:', err)
+        }
+    });
+
+    return {
+        seoMeta: computed(() => category.value?.seoMeta)
+    };
+}
\ No newline at end of file
diff --git a/storefront/composables/posts/index.ts b/storefront/composables/posts/index.ts
new file mode 100644
index 00000000..8a1756cb
--- /dev/null
+++ b/storefront/composables/posts/index.ts
@@ -0,0 +1 @@
+export * from './usePostBySlug'
\ No newline at end of file
diff --git a/storefront/composables/posts/usePostBySlug.ts b/storefront/composables/posts/usePostBySlug.ts
new file mode 100644
index 00000000..45e22903
--- /dev/null
+++ b/storefront/composables/posts/usePostBySlug.ts
@@ -0,0 +1,38 @@
+import type {IPostResponse} from '~/types';
+import {GET_POST_BY_SLUG} from "~/graphql/queries/standalone/blog";
+
+export async function usePostBySlug(slug: string) {
+  const { locale } = useI18n();
+
+  const variables = reactive({
+    slug: slug,
+    first: 1
+  });
+
+  const { data, error, refresh } = await useAsyncQuery<IPostResponse>(
+      GET_POST_BY_SLUG,
+      variables
+  );
+
+  const post = computed(() => data.value?.posts.edges[0]?.node ?? null);
+
+  watch(locale, async () => {
+    if (variables.first >= 100) {
+      variables.first = 0;
+    } else {
+      variables.first += 1;
+    }
+    await refresh();
+  });
+
+  watch(error, (err) => {
+    if (err) {
+      console.error('usePostBySlug error:', err)
+    }
+  });
+
+  return {
+    post,
+    refresh
+  };
+}
\ No newline at end of file
diff --git a/storefront/composables/products/useProductBySlug.ts b/storefront/composables/products/useProductBySlug.ts
index 22a78c35..36fe16d9 100644
--- a/storefront/composables/products/useProductBySlug.ts
+++ b/storefront/composables/products/useProductBySlug.ts
@@ -21,6 +21,7 @@ export async function useProductBySlug(slug: string) {
   });
 
   return {
-    product
+    product,
+    seoMeta: computed(() => product.value?.seoMeta)
   };
 }
\ No newline at end of file
diff --git a/storefront/composables/products/useProductTags.ts b/storefront/composables/products/useProductTags.ts
index 338e0d22..aa79b6f1 100644
--- a/storefront/composables/products/useProductTags.ts
+++ b/storefront/composables/products/useProductTags.ts
@@ -1,13 +1,13 @@
 import {GET_PRODUCT_TAGS} from "~/graphql/queries/standalone/products.js";
 import type {IProductTagsResponse} from "~/types";
 
-export async function useProductTags() {
-  const tags = computed(() => data.value?.productTags?.edges ?? []);
-
-  const { data, error } = await useAsyncQuery<IProductTagsResponse>(
+export function useProductTags() {
+  const { data, error } = useAsyncQuery<IProductTagsResponse>(
     GET_PRODUCT_TAGS
   );
 
+  const tags = computed(() => data.value?.productTags?.edges ?? []);
+
   watch(error, (err) => {
     if (err) {
       console.error('useProductTags error:', err)
diff --git a/storefront/composables/products/useProducts.ts b/storefront/composables/products/useProducts.ts
index 816ade7f..34d25ab6 100644
--- a/storefront/composables/products/useProducts.ts
+++ b/storefront/composables/products/useProducts.ts
@@ -1,10 +1,10 @@
 import { GET_PRODUCTS } from '~/graphql/queries/standalone/products';
 import type { IProductResponse } from '~/types';
 
-export async function useProducts() {
+export function useProducts() {
   const variables = ref({ first: 12 });
 
-  const { data, error, refresh } = await useAsyncQuery<IProductResponse>(
+  const { data, error, refresh } = useAsyncQuery<IProductResponse>(
     GET_PRODUCTS,
     variables
   );
diff --git a/storefront/composables/promocodes/usePromocodes.ts b/storefront/composables/promocodes/usePromocodes.ts
index aeb4453b..4f488e6e 100644
--- a/storefront/composables/promocodes/usePromocodes.ts
+++ b/storefront/composables/promocodes/usePromocodes.ts
@@ -2,7 +2,7 @@ import type {IPromocodesResponse} from "~/types";
 import {GET_PROMOCODES} from "~/graphql/queries/standalone/promocodes";
 
 export async function usePromocodes () {
-  const promocodesStore = usePromocodeStore();
+  const promocodeStore = usePromocodeStore();
 
   const { data, error } = await useAsyncQuery<IPromocodesResponse>(
     GET_PROMOCODES
@@ -10,7 +10,7 @@ export async function usePromocodes () {
   console.log(data.value)
 
   if (!error.value && data.value?.promocodes.edges) {
-    promocodesStore.setPromocodes(data.value.promocodes.edges);
+    promocodeStore.setPromocodes(data.value.promocodes.edges);
   }
 
   watch(error, (err) => {
diff --git a/storefront/composables/seo/index.ts b/storefront/composables/seo/index.ts
new file mode 100644
index 00000000..38f39a5b
--- /dev/null
+++ b/storefront/composables/seo/index.ts
@@ -0,0 +1 @@
+export * from './useDefaultSeo';
\ No newline at end of file
diff --git a/storefront/composables/seo/useDefaultSeo.ts b/storefront/composables/seo/useDefaultSeo.ts
new file mode 100644
index 00000000..8aface57
--- /dev/null
+++ b/storefront/composables/seo/useDefaultSeo.ts
@@ -0,0 +1,27 @@
+import type {ISEOMeta} from "~/types";
+
+export function useDefaultSeo (meta: ISEOMeta | null) {
+  if (meta === null) return meta
+
+  const norm = (s?: string) => (s ?? '').toString().trim()
+
+  return {
+    title: norm(meta.title),
+    description: norm(meta.description),
+    canonical: norm(meta.canonical),
+    robots: norm(meta.robots || 'index,follow'),
+    og: {
+      title: norm(meta.openGraph?.title || meta.title),
+      description: norm(meta.openGraph?.description || meta.description),
+      type: norm(meta.openGraph?.type || 'product'),
+      url: norm(meta.openGraph?.url || meta.canonical),
+      image: norm(meta.openGraph?.image),
+    },
+    twitter: {
+      card: norm(meta.twitter?.card || 'summary_large_image'),
+      title: norm(meta.twitter?.title || meta.title),
+      description: norm(meta.twitter?.description || meta.description),
+    },
+    jsonLd: Array.isArray(meta.jsonLd) ? meta.jsonLd : [],
+  }
+}
\ No newline at end of file
diff --git a/storefront/composables/store/useStore.ts b/storefront/composables/store/useStore.ts
index 092bdffa..3a4739ff 100644
--- a/storefront/composables/store/useStore.ts
+++ b/storefront/composables/store/useStore.ts
@@ -11,7 +11,7 @@ interface IProdVars {
   productAfter?: string
 }
 
-export async function useStore(
+export function useStore(
   slug: string,
   attributes?: string,
   orderBy?: string,
@@ -29,12 +29,12 @@ export async function useStore(
     productAfter
   });
 
-  const { pending, data, error, refresh } = await useAsyncQuery<IProductResponse>(
+  const { pending, data, error, refresh } = useAsyncQuery<IProductResponse>(
       GET_PRODUCTS,
       variables
   );
 
-  const products = ref(data.value?.products.edges ?? []);
+  const products = ref([...(data.value?.products.edges ?? [])]);
   const pageInfo = computed(() => data.value?.products.pageInfo ?? null);
 
   watch(error, e => e && console.error('useStore products error', e));
@@ -45,7 +45,7 @@ export async function useStore(
       if (!newCursor || newCursor === oldCursor) return;
       await refresh();
       const newEdges = data.value?.products.edges ?? [];
-      products.value.push(...newEdges);
+      products.value = [...products.value, ...newEdges];
     }
   );
 
@@ -59,7 +59,7 @@ export async function useStore(
     async () => {
       variables.productAfter = '';
       await refresh();
-      products.value = data.value?.products.edges ?? [];
+      products.value = [...(data.value?.products.edges ?? [])];
     }
   );
 
diff --git a/storefront/composables/user/useDeposit.ts b/storefront/composables/user/useDeposit.ts
index 79bd0ed3..6fe5c2b5 100644
--- a/storefront/composables/user/useDeposit.ts
+++ b/storefront/composables/user/useDeposit.ts
@@ -15,7 +15,11 @@ export function useDeposit() {
     );
 
     if (result?.data?.deposit) {
-      window.open(result?.data.deposit.transaction.process.url)
+      if (result?.data.deposit?.transaction?.process?.url) {
+        window.location.href = result?.data.deposit.transaction.process.url
+      } else {
+        console.log(result?.data)
+      }
     }
   }
 
diff --git a/storefront/composables/user/useUserBaseData.ts b/storefront/composables/user/useUserBaseData.ts
index 93fd30ec..4a1ea6b9 100644
--- a/storefront/composables/user/useUserBaseData.ts
+++ b/storefront/composables/user/useUserBaseData.ts
@@ -5,7 +5,7 @@ import {orderStatuses} from "~/config/constants";
 export async function useUserBaseData(userEmail: string) {
   const wishlistStore = useWishlistStore();
   const cartStore = useCartStore();
-  const promocodesStore = usePromocodeStore();
+  const promocodeStore = usePromocodeStore();
 
   const { document, variables } = getUserBaseData(
       {
@@ -14,19 +14,19 @@ export async function useUserBaseData(userEmail: string) {
       },
   );
 
-  const { data, error } = await useAsyncQuery<IUserBaseDataResponse>(
-      document,
-      variables
-  );
+  const { mutate, error } = useMutation<IUserBaseDataResponse>(document);
 
-  if (data.value?.wishlists.edges) {
-    wishlistStore.setWishlist(data.value.wishlists.edges[0].node);
+  const result = await mutate(variables);
+  const data = result?.data;
+
+  if (data?.wishlists.edges) {
+    wishlistStore.setWishlist(data.wishlists.edges[0].node);
   }
-  if (data.value?.orders.edges) {
-    cartStore.setCurrentOrders(data.value?.orders.edges[0].node);
+  if (data?.orders.edges) {
+    cartStore.setCurrentOrders(data.orders.edges[0].node);
   }
-  if (data.value?.promocodes.edges) {
-    promocodesStore.setPromocodes(data.value.promocodes.edges);
+  if (data?.promocodes.edges) {
+    promocodeStore.setPromocodes(data.promocodes.edges);
   }
 
   watch(error, (err) => {
diff --git a/storefront/graphql/fragments/brands.fragment.ts b/storefront/graphql/fragments/brands.fragment.ts
index 777a20ea..02a977ce 100644
--- a/storefront/graphql/fragments/brands.fragment.ts
+++ b/storefront/graphql/fragments/brands.fragment.ts
@@ -1,7 +1,9 @@
 export const BRAND_FRAGMENT = gql`
   fragment Brand on BrandType {
     uuid
+    slug
     name
     smallLogo
+    bigLogo  
   }
 `
\ No newline at end of file
diff --git a/storefront/graphql/fragments/seometa.fragment.ts b/storefront/graphql/fragments/seometa.fragment.ts
new file mode 100644
index 00000000..830edd7b
--- /dev/null
+++ b/storefront/graphql/fragments/seometa.fragment.ts
@@ -0,0 +1,12 @@
+export const SEOMETA_FRAGMENT = gql`
+  fragment SEOMeta on SEOMetaType {
+    canonical
+    description
+    hreflang
+    jsonLd
+    openGraph
+    robots
+    title
+    twitter 
+  }
+`
\ No newline at end of file
diff --git a/storefront/graphql/mutations/cart.ts b/storefront/graphql/mutations/cart.ts
index 017ff276..bc8d866f 100644
--- a/storefront/graphql/mutations/cart.ts
+++ b/storefront/graphql/mutations/cart.ts
@@ -1,4 +1,4 @@
-import {ORDER_FRAGMENT} from "@/graphql/fragments/orders.fragment.js";
+import {ORDER_FRAGMENT} from "@/graphql/fragments/orders.fragment";
 
 export const ADD_TO_CART = gql`
   mutation addToCart(
diff --git a/storefront/graphql/mutations/deposit.ts b/storefront/graphql/mutations/deposit.ts
index a2bbcf87..77f70dd7 100644
--- a/storefront/graphql/mutations/deposit.ts
+++ b/storefront/graphql/mutations/deposit.ts
@@ -1,12 +1,13 @@
 export const DEPOSIT = gql`
   mutation deposit(
-      $amount: Number!
+      $amount: Float!
   ) {
-    contactUs(
+    deposit(
         amount: $amount,
     ) {
-      error
-      received
+      transaction {
+        process
+      }
     }
   }
 `
\ No newline at end of file
diff --git a/storefront/graphql/mutations/wishlist.ts b/storefront/graphql/mutations/wishlist.ts
index fac18284..b1b885d5 100644
--- a/storefront/graphql/mutations/wishlist.ts
+++ b/storefront/graphql/mutations/wishlist.ts
@@ -1,4 +1,4 @@
-import {WISHLIST_FRAGMENT} from "@/graphql/fragments/wishlist.fragment.js";
+import {WISHLIST_FRAGMENT} from "@/graphql/fragments/wishlist.fragment";
 
 export const ADD_TO_WISHLIST = gql`
   mutation addToWishlist(
diff --git a/storefront/graphql/queries/standalone/blog.ts b/storefront/graphql/queries/standalone/blog.ts
index 424385e0..ec5fed49 100644
--- a/storefront/graphql/queries/standalone/blog.ts
+++ b/storefront/graphql/queries/standalone/blog.ts
@@ -12,10 +12,12 @@ export const GET_POSTS = gql`
 
 export const GET_POST_BY_SLUG = gql`
   query getPostBySlug(
-    $slug: String!
+    $slug: String!,
+    $first: Int
   ) {
     posts(
-      slug: $slug
+      slug: $slug,
+      first: $first,
     ) {
       edges {
         node {
diff --git a/storefront/graphql/queries/standalone/brands.ts b/storefront/graphql/queries/standalone/brands.ts
index a1d081c9..16dd6629 100644
--- a/storefront/graphql/queries/standalone/brands.ts
+++ b/storefront/graphql/queries/standalone/brands.ts
@@ -1,5 +1,6 @@
-import {BRAND_FRAGMENT} from "@/graphql/fragments/brands.fragment.js";
-import {CATEGORY_FRAGMENT} from "@/graphql/fragments/categories.fragment.js";
+import {BRAND_FRAGMENT} from "@/graphql/fragments/brands.fragment";
+import {CATEGORY_FRAGMENT} from "@/graphql/fragments/categories.fragment";
+import {SEOMETA_FRAGMENT} from "@/graphql/fragments/seometa.fragment";
 
 export const GET_BRANDS = gql`
   query getBrands (
@@ -18,12 +19,12 @@ export const GET_BRANDS = gql`
   ${BRAND_FRAGMENT}
 `
 
-export const GET_BRAND_BY_UUID = gql`
-  query getBrandbyUuid(
-      $uuid: UUID!
+export const GET_BRAND_BY_SLUG = gql`
+  query getBrandBySlug(
+    $slug: String!
   ) {
     brands(
-      uuid: $uuid
+      slug: $slug
     ) {
       edges {
         node {
@@ -31,10 +32,14 @@ export const GET_BRAND_BY_UUID = gql`
           categories {
             ...Category
           }
+          seoMeta {
+            ...SEOMeta
+          }
         }
       }
     }
   }
   ${BRAND_FRAGMENT}
   ${CATEGORY_FRAGMENT}
+  ${SEOMETA_FRAGMENT}
 `
\ No newline at end of file
diff --git a/storefront/graphql/queries/standalone/categories.ts b/storefront/graphql/queries/standalone/categories.ts
index 32adff11..ccf3a182 100644
--- a/storefront/graphql/queries/standalone/categories.ts
+++ b/storefront/graphql/queries/standalone/categories.ts
@@ -1,4 +1,5 @@
-import {CATEGORY_FRAGMENT} from "~/graphql/fragments/categories.fragment.js";
+import {CATEGORY_FRAGMENT} from "~/graphql/fragments/categories.fragment";
+import {SEOMETA_FRAGMENT} from "~/graphql/fragments/seometa.fragment";
 
 export const GET_CATEGORIES = gql`
   query getCategories (
@@ -55,11 +56,34 @@ export const GET_CATEGORY_BY_SLUG = gql`
             maxPrice
             minPrice
           }
+          seoMeta {
+            ...SEOMeta
+          }
         }
       }
     }
   }
   ${CATEGORY_FRAGMENT}
+  ${SEOMETA_FRAGMENT}
+`
+
+export const GET_CATEGORY_BY_SLUG_SEO = gql`
+  query getCategoryBySlug(
+    $categorySlug: String!
+  ) {
+    categories(
+      slug: $categorySlug
+    ) {
+      edges {
+        node {
+          seoMeta {
+            ...SEOMeta
+          }
+        }
+      }
+    }
+  }
+  ${SEOMETA_FRAGMENT}
 `
 
 export const GET_CATEGORY_TAGS = gql`
diff --git a/storefront/graphql/queries/standalone/orders.ts b/storefront/graphql/queries/standalone/orders.ts
index bab80762..a004b96c 100644
--- a/storefront/graphql/queries/standalone/orders.ts
+++ b/storefront/graphql/queries/standalone/orders.ts
@@ -1,4 +1,4 @@
-import {ORDER_FRAGMENT} from "@/graphql/fragments/orders.fragment.js";
+import {ORDER_FRAGMENT} from "@/graphql/fragments/orders.fragment";
 
 export const GET_ORDERS = gql`
   query getOrders(
diff --git a/storefront/graphql/queries/standalone/products.ts b/storefront/graphql/queries/standalone/products.ts
index 5dc5790a..3fc4d06f 100644
--- a/storefront/graphql/queries/standalone/products.ts
+++ b/storefront/graphql/queries/standalone/products.ts
@@ -1,4 +1,5 @@
-import {PRODUCT_FRAGMENT} from "@/graphql/fragments/products.fragment.js";
+import {PRODUCT_FRAGMENT} from "@/graphql/fragments/products.fragment";
+import {SEOMETA_FRAGMENT} from "~/graphql/fragments/seometa.fragment";
 
 export const GET_PRODUCTS = gql`
   query getProducts(
@@ -46,11 +47,15 @@ export const GET_PRODUCT_BY_SLUG = gql`
       edges {
         node {
           ...Product
+          seoMeta {
+            ...SEOMeta
+          }
         }
       }
     }
   }
   ${PRODUCT_FRAGMENT}
+  ${SEOMETA_FRAGMENT}
 `
 
 export const GET_PRODUCT_TAGS = gql`
diff --git a/storefront/graphql/queries/standalone/wishlist.ts b/storefront/graphql/queries/standalone/wishlist.ts
index c0d8d0a1..fa0fed39 100644
--- a/storefront/graphql/queries/standalone/wishlist.ts
+++ b/storefront/graphql/queries/standalone/wishlist.ts
@@ -1,4 +1,4 @@
-import {WISHLIST_FRAGMENT} from "@/graphql/fragments/wishlist.fragment.js";
+import {WISHLIST_FRAGMENT} from "@/graphql/fragments/wishlist.fragment";
 
 export const GET_WISHLIST = gql`
   query getWishlist {
diff --git a/storefront/i18n/locales/en-gb.json b/storefront/i18n/locales/en-gb.json
index 02a6a4f4..bf4d7597 100644
--- a/storefront/i18n/locales/en-gb.json
+++ b/storefront/i18n/locales/en-gb.json
@@ -203,5 +203,8 @@
       "empty": "You don't have any promocodes."
     },
     "logout": "Logout"
+  },
+  "catalog": {
+    "title": "Catalog"
   }
 }
\ No newline at end of file
diff --git a/storefront/package-lock.json b/storefront/package-lock.json
index 5f58f5cb..8c774b94 100644
--- a/storefront/package-lock.json
+++ b/storefront/package-lock.json
@@ -1439,17 +1439,6 @@
       "integrity": "sha512-4wMPu9iN3/HL97QblBsBay3E1etIciR84izI3U+4iALY+JHCrI+a2jO0qbAZ/nxKoegypYEaiiqWXylm+/zfrw==",
       "license": "Apache 2"
     },
-    "node_modules/@netlify/blobs": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/@netlify/blobs/-/blobs-8.2.0.tgz",
-      "integrity": "sha512-9djLZHBKsoKk8XCgwWSEPK9QnT8qqxEQGuYh48gFIcNLvpBKkLnHbDZuyUxmNemCfDz7h0HnMXgSPnnUVgARhg==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": "^14.16.0 || >=16.0.0"
-      }
-    },
     "node_modules/@netlify/dev-utils": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@netlify/dev-utils/-/dev-utils-2.2.0.tgz",
@@ -4351,14 +4340,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/change-case": {
-      "version": "5.4.4",
-      "resolved": "https://registry.npmjs.org/change-case/-/change-case-5.4.4.tgz",
-      "integrity": "sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==",
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/chokidar": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
@@ -7876,257 +7857,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/lightningcss": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
-      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
-      "license": "MPL-2.0",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "detect-libc": "^2.0.3"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      },
-      "optionalDependencies": {
-        "lightningcss-darwin-arm64": "1.30.1",
-        "lightningcss-darwin-x64": "1.30.1",
-        "lightningcss-freebsd-x64": "1.30.1",
-        "lightningcss-linux-arm-gnueabihf": "1.30.1",
-        "lightningcss-linux-arm64-gnu": "1.30.1",
-        "lightningcss-linux-arm64-musl": "1.30.1",
-        "lightningcss-linux-x64-gnu": "1.30.1",
-        "lightningcss-linux-x64-musl": "1.30.1",
-        "lightningcss-win32-arm64-msvc": "1.30.1",
-        "lightningcss-win32-x64-msvc": "1.30.1"
-      }
-    },
-    "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
-      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-darwin-x64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
-      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
-      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
-      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
-      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
-      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
-      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
-      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
-      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.30.1",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
-      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "peer": true,
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss/node_modules/detect-libc": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
-      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
-      "license": "Apache-2.0",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
diff --git a/storefront/pages/brand/[slug].vue b/storefront/pages/brand/[slug].vue
new file mode 100644
index 00000000..364f6187
--- /dev/null
+++ b/storefront/pages/brand/[slug].vue
@@ -0,0 +1,76 @@
+<template>
+  <div class="brand">
+    <ui-title>{{ brand?.name }}</ui-title>
+    <div class="brand__categories">
+      <cards-category
+          v-for="category in brand?.categories"
+          :key="category.uuid"
+          :category="category"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {useBrandBySlug} from "~/composables/brands";
+import {usePageTitle} from "~/composables/utils";
+import {useDefaultSeo} from "~/composables/seo/index.js";
+import {useRouteParams} from "@vueuse/router";
+import {useAppConfig} from "~/composables/config";
+
+const { locale } = useI18n();
+
+const slug = useRouteParams<string>('slug');
+
+const { APP_NAME } = useAppConfig();
+const { setPageTitle } = usePageTitle();
+
+const { brand, seoMeta } = await useBrandBySlug(slug.value);
+
+const meta = useDefaultSeo(seoMeta.value || null);
+
+if (meta) {
+  useSeoMeta({
+    title: meta.title || APP_NAME,
+    description: meta.description || meta.title || APP_NAME,
+    ogTitle: meta.og.title || undefined,
+    ogDescription: meta.og.description || meta.title || APP_NAME,
+    ogType: meta.og.type || undefined,
+    ogUrl: meta.og.url || undefined,
+    ogImage: meta.og.image || undefined,
+    twitterCard: meta.twitter.card || undefined,
+    twitterTitle: meta.twitter.title || undefined,
+    twitterDescription: meta.twitter.description || undefined,
+    robots: meta.robots,
+  });
+
+  useHead({
+    link: [
+      meta.canonical ? { rel: 'canonical', href: meta.canonical } : {},
+    ].filter(Boolean) as any,
+    meta: [{ property: 'og:locale', content: locale.value }],
+    script: meta.jsonLd.map((obj: any) => ({
+      type: 'application/ld+json',
+      innerHTML: JSON.stringify(obj),
+    })),
+    __dangerouslyDisableSanitizersByTagID: Object.fromEntries(
+        meta.jsonLd.map((_, i: number) => [`ldjson-${i}`, ['innerHTML']])
+    ),
+  });
+}
+
+setPageTitle(brand.value?.name ?? 'Brand');
+// TODO: add product by this brand
+</script>
+
+<style lang="scss" scoped>
+.brand {
+  &__categories {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 275px);
+    align-items: center;
+    justify-content: center;
+    gap: 50px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/storefront/pages/brand/[uuid].vue b/storefront/pages/brand/[uuid].vue
deleted file mode 100644
index 2dbea25e..00000000
--- a/storefront/pages/brand/[uuid].vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<template>
-  <div class="brand">
-    <ui-title>{{ brand.name }}</ui-title>
-    <div class="brand__categories">
-      <cards-category
-          v-for="category in brand.categories"
-          :key="category.uuid"
-          :category="category"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup>
-import {useBrandByUuid} from "~/composables/brands";
-import {usePageTitle} from "~/composables/utils";
-
-const route = useRoute()
-
-const slug = computed(() => route.params.uuid)
-
-const { setPageTitle } = usePageTitle();
-
-const { brand } = await useBrandByUuid(slug.value);
-
-setPageTitle(brand.value?.name ?? 'Brand');
-// TODO: add product by this brand
-</script>
-
-<style lang="scss" scoped>
-.brand {
-  &__categories {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, 275px);
-    align-items: center;
-    justify-content: center;
-    gap: 50px;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/storefront/pages/catalog/[slug].vue b/storefront/pages/catalog/[slug].vue
index 7b7b609b..939c4236 100644
--- a/storefront/pages/catalog/[slug].vue
+++ b/storefront/pages/catalog/[slug].vue
@@ -19,25 +19,64 @@
 <script setup lang="ts">
 import type {ICategory} from "~/types";
 import {usePageTitle} from "~/composables/utils";
+import {useRouteParams} from "@vueuse/router";
+import {useDefaultSeo} from "~/composables/seo";
+import {useCategoryBySlugSeo} from "~/composables/categories/useCategoryBySlugSeo";
+import {useAppConfig} from "~/composables/config";
 
-const route = useRoute()
-const categoryStore = useCategoryStore()
+const { locale } = useI18n();
+const categoryStore = useCategoryStore();
 
-const { setPageTitle } = usePageTitle()
+const { APP_NAME } = useAppConfig();
+const { setPageTitle } = usePageTitle();
 
-const slug = computed(() => route.params.slug as string)
-const roots = computed(() => categoryStore.categories.map(e => e.node))
+const slug = useRouteParams<string>('slug');
+const roots = computed(() => categoryStore.categories.map(e => e.node));
 
-const category = computed(() => findBySlug(roots.value, slug.value))
+const category = computed(() => findBySlug(roots.value, slug.value));
 
-setPageTitle(category.value?.name ?? 'Category')
+const seoMeta = useCategoryBySlugSeo(category.value.slug)
+
+const meta = useDefaultSeo(seoMeta || null);
+
+if (meta) {
+  useSeoMeta({
+    title: meta.title || APP_NAME,
+    description: meta.description || meta.title || APP_NAME,
+    ogTitle: meta.og.title || undefined,
+    ogDescription: meta.og.description || meta.title || APP_NAME,
+    ogType: meta.og.type || undefined,
+    ogUrl: meta.og.url || undefined,
+    ogImage: meta.og.image || undefined,
+    twitterCard: meta.twitter.card || undefined,
+    twitterTitle: meta.twitter.title || undefined,
+    twitterDescription: meta.twitter.description || undefined,
+    robots: meta.robots,
+  });
+
+  useHead({
+    link: [
+      meta.canonical ? { rel: 'canonical', href: meta.canonical } : {},
+    ].filter(Boolean) as any,
+    meta: [{ property: 'og:locale', content: locale.value }],
+    script: meta.jsonLd.map((obj: any) => ({
+      type: 'application/ld+json',
+      innerHTML: JSON.stringify(obj),
+    })),
+    __dangerouslyDisableSanitizersByTagID: Object.fromEntries(
+        meta.jsonLd.map((_, i: number) => [`ldjson-${i}`, ['innerHTML']])
+    ),
+  });
+}
+
+setPageTitle(category.value?.name ?? 'Category');
 
 function findBySlug(nodes: ICategory[], slug: string): ICategory | undefined {
   for (const n of nodes) {
-    if (n.slug === slug) return n
+    if (n.slug === slug) return n;
     if (n.children?.length) {
-      const found = findBySlug(n.children, slug)
-      if (found) return found
+      const found = findBySlug(n.children, slug);
+      if (found) return found;
     }
   }
 }
diff --git a/storefront/pages/index.vue b/storefront/pages/index.vue
index 714ccc1c..adbe62bb 100644
--- a/storefront/pages/index.vue
+++ b/storefront/pages/index.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="home">
     <home-hero />
-    <home-brands />
-    <home-collection />
+    <home-brands :brands="brands" />
+    <home-collection
+        :tags="tags"
+        :newProducts="newProducts"
+        :priceProducts="priceProducts"
+    />
     <home-category-tags />
   </div>
 </template>
@@ -10,6 +14,9 @@
 <script setup lang="ts">
 import {useUserActivation} from "~/composables/user";
 import { useRouteQuery } from '@vueuse/router';
+import {useBrands} from "~/composables/brands";
+import {useProducts, useProductTags} from "~/composables/products";
+import type {IProduct} from "~/types";
 
 const {t} = useI18n();
 const appStore = useAppStore();
@@ -25,6 +32,18 @@ const referrer = useRouteQuery('referrer', '');
 
 const { activateUser } = useUserActivation();
 
+const newProducts = ref<{ cursor: string; node: IProduct }[]>([]);
+const priceProducts = ref<{ cursor: string; node: IProduct }[]>([]);
+const { brands } = useBrands();
+const { tags } = useProductTags();
+const { products, getProducts } = useProducts();
+
+await getProducts({ orderBy: '-modified' });
+newProducts.value = products.value;
+
+await getProducts({ orderBy: '-price' });
+priceProducts.value = products.value;
+
 onMounted( async () => {
   if (route.path.includes('activate-user') && token.value && uid.value) {
     await activateUser(token.value, uid.value);
diff --git a/storefront/pages/product/[slug].vue b/storefront/pages/product/[slug].vue
index fe4d427d..b88a3aac 100644
--- a/storefront/pages/product/[slug].vue
+++ b/storefront/pages/product/[slug].vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="product" v-if="product">
+  <div class="product">
     <div class="container">
       <div class="product__wrapper">
-        <h1 class="product__title">{{ product.name }}</h1>
+        <h1 class="product__title">{{ product?.name }}</h1>
         <div class="product__block">
           <div class="product__images">
             <div class="product__images-gallery">
@@ -14,7 +14,7 @@
               >
                 <nuxt-img
                     :src="image"
-                    :alt="product.name"
+                    :alt="product?.name"
                     format="webp"
                     densities="x1"
                 />
@@ -22,28 +22,31 @@
             </div>
             <nuxt-img
                 :src="selectedImage"
-                :alt="product.name"
+                :alt="product?.name"
                 class="product__images-main"
                 format="webp"
                 densities="x1"
             />
           </div>
           <div class="product__center">
-            <p class="product__center-description">{{ product.description }}</p>
-            <p
-                class="product__center-characteristic"
-                @click="scrollTo('characteristics')"
-            >
-              {{ t('product.characteristics') }}
-            </p>
+            <p class="product__center-description">{{ product?.description }}</p>
+            <client-only>
+              <p
+                  v-if="attributes.length"
+                  class="product__center-characteristic"
+                  @click="scrollTo('characteristics')"
+              >
+                {{ t('product.characteristics') }}
+              </p>
+            </client-only>
           </div>
           <div class="product__info">
             <div class="product__info-inner">
               <div class="product__info-top">
-                <p>{{ t('cards.product.stock') }} {{ product.quantity }}</p>
+                <p>{{ t('cards.product.stock') }} {{ product?.quantity }}</p>
                 <nuxt-img
-                    :src="product.brand.smallLogo"
-                    :alt="product.brand.name"
+                    :src="product?.brand.smallLogo"
+                    :alt="product?.brand.name"
                     format="webp"
                     densities="x1"
                 />
@@ -54,44 +57,48 @@
                   allow-half
                   disabled
               />
-              <div class="product__info-price">{{ product.price }} {{ CURRENCY }}</div>
-              <div class="product__info-bottom">
-                <ui-button
-                    class="product__info-button"
-                    v-if="isProductInCart"
-                    @click="overwriteOrder({
-                      type: 'remove',
-                      productUuid: product.uuid,
-                      productName: product.name
-                    })"
-                    :isLoading="removeLoading"
-                >
-                  {{ t('buttons.removeFromCart') }}
-                </ui-button>
-                <ui-button
-                    class="product__info-button"
-                    v-else
-                    @click="overwriteOrder({
-                      type: 'add',
-                      productUuid: product.uuid,
-                      productName: product.name
-                    })"
-                    :isLoading="addLoading"
-                >
-                  {{ t('buttons.addToCart') }}
-                </ui-button>
-                <div
-                    class="product__info-wishlist"
-                    @click="overwriteWishlist({
-                      type: (isProductInWishlist ? 'remove' : 'add'),
-                      productUuid: product.uuid,
-                      productName: product.name
-                    })"
-                >
-                  <icon name="mdi:cards-heart" size="28" v-if="isProductInWishlist" />
-                  <icon name="mdi:cards-heart-outline" size="28" v-else />
+              <div class="product__info-price">{{ product?.price }} {{ CURRENCY }}</div>
+              <client-only>
+                <div class="product__info-bottom">
+                  <ui-button
+                      class="product__info-button"
+                      v-if="isProductInCart"
+                      @click="overwriteOrder({
+                        type: 'remove',
+                        productUuid: product?.uuid,
+                        productName: product?.name
+                      })"
+                      :type="'button'"
+                      :isLoading="removeLoading"
+                  >
+                    {{ t('buttons.removeFromCart') }}
+                  </ui-button>
+                  <ui-button
+                      class="product__info-button"
+                      v-else
+                      @click="overwriteOrder({
+                        type: 'add',
+                        productUuid: product?.uuid,
+                        productName: product?.name
+                      })"
+                      :type="'button'"
+                      :isLoading="addLoading"
+                  >
+                    {{ t('buttons.addToCart') }}
+                  </ui-button>
+                  <div
+                      class="product__info-wishlist"
+                      @click="overwriteWishlist({
+                        type: (isProductInWishlist ? 'remove' : 'add'),
+                        productUuid: product?.uuid,
+                        productName: product?.name
+                      })"
+                  >
+                    <icon name="mdi:cards-heart" size="28" v-if="isProductInWishlist" />
+                    <icon name="mdi:cards-heart-outline" size="28" v-else />
+                  </div>
                 </div>
-              </div>
+              </client-only>
             </div>
           </div>
         </div>
@@ -167,9 +174,11 @@ import {Navigation} from "swiper/modules";
 import {CURRENCY} from "~/config/constants";
 import {useWishlistOverwrite} from "~/composables/wishlist";
 import {useOrderOverwrite} from "~/composables/orders";
+import {useDefaultSeo} from "~/composables/seo";
+import {useAppConfig} from "~/composables/config";
 
 const route = useRoute();
-const {t} = useI18n();
+const {t, locale} = useI18n();
 const wishlistStore = useWishlistStore();
 const cartStore = useCartStore();
 
@@ -178,10 +187,44 @@ const { scrollTo } = useScrollTo();
 
 const slug = useRouteParams<string>('slug');
 
+const { APP_NAME } = useAppConfig();
 const { overwriteWishlist } = useWishlistOverwrite();
 const { addLoading, removeLoading, overwriteOrder } = useOrderOverwrite();
-const { product } = await useProductBySlug(slug.value);
-const { products, getProducts } = await useProducts();
+const { product, seoMeta } = await useProductBySlug(slug.value);
+
+const meta = useDefaultSeo(seoMeta.value || null);
+
+if (meta) {
+  useSeoMeta({
+    title: meta.title || APP_NAME,
+    description: meta.description || meta.title || APP_NAME,
+    ogTitle: meta.og.title || undefined,
+    ogDescription: meta.og.description || meta.title || APP_NAME,
+    ogType: meta.og.type || undefined,
+    ogUrl: meta.og.url || undefined,
+    ogImage: meta.og.image || undefined,
+    twitterCard: meta.twitter.card || undefined,
+    twitterTitle: meta.twitter.title || undefined,
+    twitterDescription: meta.twitter.description || undefined,
+    robots: meta.robots,
+  });
+
+  useHead({
+    link: [
+      meta.canonical ? { rel: 'canonical', href: meta.canonical } : {},
+    ].filter(Boolean) as any,
+    meta: [{ property: 'og:locale', content: locale.value }],
+    script: meta.jsonLd.map((obj: any) => ({
+      type: 'application/ld+json',
+      innerHTML: JSON.stringify(obj),
+    })),
+    __dangerouslyDisableSanitizersByTagID: Object.fromEntries(
+        meta.jsonLd.map((_, i: number) => [`ldjson-${i}`, ['innerHTML']])
+    ),
+  });
+}
+
+const { products, getProducts } = useProducts();
 await getProducts({
   categoriesSlugs: product.value?.category.slug
 });
diff --git a/storefront/pages/profile/cart.vue b/storefront/pages/profile/cart.vue
index 1104af5a..0c4f37b8 100644
--- a/storefront/pages/profile/cart.vue
+++ b/storefront/pages/profile/cart.vue
@@ -5,7 +5,12 @@
         <p><span>{{ t('profile.cart.quantity') }}</span> {{ productsInCartQuantity }}</p>
         <p><span>{{ t('profile.cart.total') }}: </span> {{ totalPrice }}{{ CURRENCY }}</p>
       </div>
-      <ui-button class="cart__top-button">{{ t('buttons.checkout') }}</ui-button>
+      <ui-button
+          :type="'button'"
+          class="cart__top-button"
+      >
+        {{ t('buttons.checkout') }}
+      </ui-button>
     </div>
     <div class="cart__list">
       <div class="cart__list-inner" v-if="productsInCart.length">
diff --git a/storefront/pages/profile/promocodes.vue b/storefront/pages/profile/promocodes.vue
index e11c1dae..6ed780ce 100644
--- a/storefront/pages/profile/promocodes.vue
+++ b/storefront/pages/profile/promocodes.vue
@@ -45,9 +45,9 @@ import {CURRENCY} from "~/config/constants";
 import {useDate} from "~/composables/date";
 
 const {t, locale} = useI18n();
-const promocodesStore = usePromocodeStore();
+const promocodeStore = usePromocodeStore();
 
-const promocodes = computed(() => promocodesStore.promocodes);
+const promocodes = computed(() => promocodeStore.promocodes);
 
 const copyCode = (code: string) => {
   navigator.clipboard.writeText(code)
diff --git a/storefront/plugins/apollo.ts b/storefront/plugins/apollo.ts
index 3975b4a4..831d6fe5 100644
--- a/storefront/plugins/apollo.ts
+++ b/storefront/plugins/apollo.ts
@@ -7,8 +7,6 @@ import { useAppConfig } from '~/composables/config';
 
 export default defineNuxtPlugin((nuxtApp) => {
   const runtime = useRuntimeConfig();
-  const localeCookie = useCookie(useAppConfig().COOKIES_LOCALE_KEY);
-  const token = useCookie(useAppConfig().COOKIES_ACCESS_TOKEN_KEY);
   const { $apollo } = nuxtApp as any;
 
   const errorLink = onError((err) => {
@@ -16,6 +14,9 @@ export default defineNuxtPlugin((nuxtApp) => {
   });
 
   const authLink = setContext(async (_, { headers }) => {
+    const localeCookie = useCookie(useAppConfig().COOKIES_LOCALE_KEY);
+    const token = useCookie(useAppConfig().COOKIES_ACCESS_TOKEN_KEY);
+
     const hdrs: Record<string,string> = {
       ...headers,
       'Accept-Language': localeCookie.value || 'en-gb'
diff --git a/storefront/types/api/categories.ts b/storefront/types/api/categories.ts
index 6f1a6896..49073bc3 100644
--- a/storefront/types/api/categories.ts
+++ b/storefront/types/api/categories.ts
@@ -1,4 +1,4 @@
-import type {ICategory, ICategoryTag, IStoreFilters} from "~/types";
+import type {ICategory, ICategoryTag, ISEOMeta, IStoreFilters} from "~/types";
 
 export interface ICategoriesResponse {
   categories: {
@@ -31,6 +31,16 @@ export interface ICategoryBySlugResponse {
   }
 }
 
+export interface ICategoryBySlugSeoResponse {
+  categories: {
+    edges: {
+      node: {
+        seoMeta: ISEOMeta
+      }
+    }[]
+  }
+}
+
 export interface ICategoryTagsResponse {
   categoryTags: {
     edges: {
diff --git a/storefront/types/app/brand.ts b/storefront/types/app/brand.ts
index 2f33c1ef..78924de5 100644
--- a/storefront/types/app/brand.ts
+++ b/storefront/types/app/brand.ts
@@ -1,9 +1,11 @@
-import type {ICategory} from "~/types";
+import type {ICategory, ISEOMeta} from "~/types";
 
 export interface IBrand {
   name: string,
+  slug: string,
   uuid: string,
   smallLogo: string,
   bigLogo: string,
+  seoMeta: ISEOMeta,
   categories: ICategory[]
 }
\ No newline at end of file
diff --git a/storefront/types/app/products.ts b/storefront/types/app/products.ts
index 9d8ce2d7..aebe8751 100644
--- a/storefront/types/app/products.ts
+++ b/storefront/types/app/products.ts
@@ -1,3 +1,5 @@
+import type {ISEOMeta} from "~/types";
+
 export interface IProduct {
   uuid: string,
   name: string,
@@ -5,6 +7,7 @@ export interface IProduct {
   quantity: number,
   slug: string,
   description: string,
+  seoMeta: ISEOMeta,
   brand: {
     smallLogo: string,
     uuid: string,
diff --git a/storefront/types/app/seometa.ts b/storefront/types/app/seometa.ts
new file mode 100644
index 00000000..fab2b22e
--- /dev/null
+++ b/storefront/types/app/seometa.ts
@@ -0,0 +1,20 @@
+export interface ISEOMeta {
+  canonical: string,
+  description: string,
+  hreflang: string,
+  jsonLd: string,
+  openGraph: {
+    title: string,
+    description: string,
+    type: string,
+    url: string,
+    image: string
+  },
+  robots: string,
+  title: string,
+  twitter: {
+    card: string,
+    title: string,
+    description: string
+  }
+}
\ No newline at end of file
diff --git a/storefront/types/index.ts b/storefront/types/index.ts
index 824285fd..f44e3c00 100644
--- a/storefront/types/index.ts
+++ b/storefront/types/index.ts
@@ -11,6 +11,7 @@ export * from './app/orders'
 export * from './app/category'
 export * from './app/store'
 export * from './app/promocodes'
+export * from './app/seometa'