diff --git a/components/HeaderBlock.vue b/components/HeaderBlock.vue
index f57672e..efa03b7 100644
--- a/components/HeaderBlock.vue
+++ b/components/HeaderBlock.vue
@@ -25,9 +25,9 @@
               <CountryCurrencySelector />
             </div>
             <ThemeSwitcher />
-            <button
+            <button @click="navigateToShop"
               class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all text-inter">
-              E-shop
+              {{ $t('eshop') }}
             </button>
           </div>
         </div>
@@ -218,6 +218,10 @@ const colorMode = useColorMode();
 
 const route = useRoute()
 
+function navigateToShop() {
+  menuStore.navigateToItem(menuStore.menuItems?.items.find(item => item.page_name === 'shop'))
+}
+
 const isDark = computed({
   get() {
     return colorMode.value === "dark";
diff --git a/components/section/login-page/LoginMain.vue b/components/section/login-page/LoginMain.vue
index 9a944c7..f1d7f60 100644
--- a/components/section/login-page/LoginMain.vue
+++ b/components/section/login-page/LoginMain.vue
@@ -7,7 +7,7 @@
         }" />
         <div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12 ">
             <div class="space-25-55">
-                <div class="flex justify-between">
+                <div class="flex flex-wrap-reverse gap-y-4 justify-between">
                     <h2 class="h2-bold-bounded">{{ $t('login') }}</h2>
                     <button
                         class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer">{{
@@ -15,28 +15,28 @@
                 </div>
                 <div class="space-y-[15px]">
                     <p class="pl-6">{{ $t('email') }}</p>
-                    <input :placeholder="$t('email')" type="text"
+                    <input v-model="store.email" :placeholder="$t('email')" type="text"
                         class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
                 </div>
                 <div class="space-y-[15px]">
                     <p class="pl-6">{{ $t('password') }}</p>
-                    <input :placeholder="$t('placeholder_password')" type="text"
+                    <input v-model="store.password" :placeholder="$t('placeholder_password')" type="text"
                         class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
                 </div>
             </div>
             <p class="text-button hover:text-button-hover transition-all font-medium mt-[30px] cursor-pointer">{{
                 $t('forgot_password_question')
-            }}</p>
+                }}</p>
             <div class="py-[25px] sm:py-12 border-b border-gray flex justify-center w-full">
-                <UiButtonArrow type="fill" :arrow="true">{{ $t('login') }}</UiButtonArrow>
+                <UiButtonArrow @click="store.logIn()" type="fill" :arrow="true">{{ $t('login') }}</UiButtonArrow>
             </div>
             <div class="mt-[25px] sm:mt-[30px] w-full flex justify-center gap-3">
                 <p class="cursor-pointer hover:underline transition-all">{{
                     $t('no_account')
-                }}</p>
+                    }}</p>
                 <p class="text-button cursor-pointer hover:text-button-hover">{{
                     $t('sign_up_now')
-                }}</p>
+                    }}</p>
             </div>
         </div>
     </UiContainer>
@@ -49,4 +49,6 @@ type Component = {
     section_id: string;
     section_img: string;
     section_lang_data: {};
-};</script>
\ No newline at end of file
+};
+const store = useStore()
+</script>
\ No newline at end of file
diff --git a/components/section/registration-page/RegistrationMain.vue b/components/section/registration-page/RegistrationMain.vue
index 017338f..7edd626 100644
--- a/components/section/registration-page/RegistrationMain.vue
+++ b/components/section/registration-page/RegistrationMain.vue
@@ -1,5 +1,5 @@
 <template>
-    <UiContainer class="flex py-20 sm:py-14">
+    <UiContainer class="flex py-[15px] xl:py-20 sm:py-0">
         <div class="hidden xl:block rounded-2xl min-w-[40%] h-[830px]" :style="{
             backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[0]}?thumb=1200x0')`,
             backgroundSize: 'cover',
@@ -13,62 +13,96 @@
                         class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer">{{
                             $t('back_to_home') }}</button>
                 </div>
-                <div class="space-y-[30px]">
+                <div class="space-y-[25px] sm:space-y-[30px]">
                     <p>Obecné informace</p>
-                    <div class="grid grid-cols-2 gap-[30px]">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-[30px]">
                         <div class="space-y-[15px]">
                             <p class="pl-6">{{ $t('first_name') }}</p>
                             <input :placeholder="$t('first_name')" type="text"
-                                class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                                class="text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
                         </div>
                         <div class="space-y-[15px]">
                             <p class="pl-6">{{ $t('last_name') }}</p>
                             <input :placeholder="$t('last_name')" type="text"
-                                class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                                class="text-sm sm:text-xl  border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
                         </div>
                         <div class="space-y-[15px]">
                             <p class="pl-6">{{ $t('email') }}</p>
                             <input :placeholder="$t('email')" type="text"
-                                class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                                class="text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
                         </div>
-                        <div class="space-y-[15px]">
+                        <div class="space-y-[15px]" ref="dropdownRef">
                             <p class="pl-6">{{ $t('phone') }}</p>
                             <div class="flex items-center border-2 border-block rounded-lg">
                                 <div
-                                    class="relative z-50 bg-inherit ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1">
+                                    class="relative z-50 bg-inherit ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0">
                                     <div class="px-[25px]" @click="dropCountry = !dropCountry">
                                         <div
-                                            class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark">
-                                            {{ menuStore.selectedPhoneCountry.name }} <span> <i
+                                            class="flex items-center gap-2 text-sm sm:text-xl uppercase text-text-light dark:text-text-dark">
+                                            <span :class="[dropCountry && 'rotate-180', 'transition-all']"> <i
                                                     class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
+                                            <p class="text-sm sm:text-xl">
+                                                {{ menuStore.selectedPhoneCountry.iso_code }}
+                                            </p>
                                         </div>
                                     </div>
 
                                     <div v-if="dropCountry"
-                                        class="absolute bg-bg-light  rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
-                                        <div class="overflow-auto h-[200px] w-full">
-                                            <p @click="() => {
+                                        class="mt-2 absolute bg-bg-light dark:bg-bg-dark rounded-[5px] ring-0 cursor-pointer w-full border border-button py-[10px] px-[5px] overflow-hidden">
+                                        <div class="overflow-y-auto h-[200px] w-full">
+                                            <p v-for="item in menuStore.countryList" @click="() => {
                                                 menuStore.selectedPhoneCountry = item
                                                 dropCountry = false
-                                            }" class="w-full hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
-                                                v-for="item in menuStore.countryList">
+                                            }" class="w-full truncate whitespace-nowrap overflow-hidden hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
+                                                :title="item.name">
                                                 {{ item.name }}
                                             </p>
                                         </div>
                                     </div>
+
                                 </div>
-                                {{ menuStore.selectedPhoneCountry.call_prefix }}
+                                <p class="text-sm sm:text-xl font-normal">{{ menuStore.selectedPhoneCountry.call_prefix
+                                }}</p>
                                 <input :placeholder="$t('phone')" type="text"
-                                    class="placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0" />
+                                    class="text-sm sm:text-xl placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0" />
                             </div>
                         </div>
                         <div class="space-y-[15px]">
-                            <p class="pl-6">{{ $t('email') }}</p>
-                            <input :placeholder="$t('email')" type="text"
-                                class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                            <p class="pl-6">{{ $t('account_type') }}</p>
+                            <USelect v-model="selectedType" :items="component.section_lang_data.account_types"
+                                value-key="name" :searchable="false" :ui="{
+                                    base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 h-[50px] sm:h-[67px] w-full p-0',
+                                    trailing: 'hidden w-full',
+                                    viewport: 'ring-0 min-w-full',
+                                    content: 'bg-bg-light dark:bg-bg-dark ring-0 border border-button',
+                                    leading:
+                                        'left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-0 w-full',
+                                    group: 'px-[5px] py-[10px]',
+                                    item: 'hover:bg-block dark:hover:bg-button rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 min-w-full',
+                                }">
+                                <template #leading="{ modelValue }">
+                                    <div
+                                        class="flex items-center justify-between gap-2 uppercase text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 w-full h-[50px] sm:h-[67px]">
+                                        <p class="truncate whitespace-nowrap">
+                                            {{component.section_lang_data.account_types.find((item) => item.name ===
+                                                modelValue)?.name}}</p>
+                                        <span> <i
+                                                class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
+                                    </div>
+                                </template>
+
+                                <template #item="{ item }">
+                                    <div class="flex items-center gap-2 cursor-pointer min-w-full">
+                                        <p
+                                            class="truncate whitespace-nowrap text-sm sm:text-xl font-medium uppercase text-text-light dark:text-text-dark opacity-100">
+                                            {{ item.name }}
+                                        </p>
+                                    </div>
+                                </template>
+                            </USelect>
                         </div>
                         <div class="space-y-[15px]">
-                            <p class="pl-6">{{ $t('password') }}</p>
+                            <p class="pl-6">{{ $t('partner_code') }}</p>
                             <input :placeholder="$t('placeholder_password')" type="text"
                                 class="border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
                         </div>
@@ -91,13 +125,26 @@
 </template>
 
 <script lang="ts" setup>
-defineProps<{ component: Component }>();
+import { onClickOutside } from "@vueuse/core";
+const props = defineProps<{ component: Component }>();
 type Component = {
     image_collection: string;
     section_id: string;
     section_img: string;
-    section_lang_data: {};
+    section_lang_data: {
+        account_types: [{
+            id: number,
+            name: string
+        }]
+    };
 };
 const menuStore = useMenuStore()
+const dropdownRef = ref(null);
 const dropCountry = ref()
+
+const selectedType = ref(props.component.section_lang_data.account_types[0].name)
+
+onClickOutside(dropdownRef, () => {
+    dropCountry.value = false
+});
 </script>
\ No newline at end of file
diff --git a/components/section/shop-page/CategoryTree.vue b/components/section/shop-page/CategoryTree.vue
new file mode 100644
index 0000000..ec386ec
--- /dev/null
+++ b/components/section/shop-page/CategoryTree.vue
@@ -0,0 +1,44 @@
+<template>
+  <div v-if="hasMainCategory" :class="['flex flex-col gap-[25px]', isOpen && 'border-b border-block pb-[10px]']">
+    <div @click="toggle" class="flex items-center justify-between rounded-lg cursor-pointer">
+      <div class="flex items-center justify-between w-full">
+        <p class="text-2xl font-extrabold text-black dark:text-white">
+          {{ mainCategoryName }}
+        </p>
+        <span :class="[isOpen && 'rotate-180', 'transition-all']"> <i
+            class="uil uil-angle-down text-3xl text-button font-light cursor-pointer"></i></span>
+      </div>
+    </div>
+
+    <ul class="flex flex-col gap-[25px] text-black dark:text-gray" v-show="isOpen">
+      <li @click="$emit('change-category', child)" v-for="child in subcategories" :key="child.id" class="cursor-pointer"
+        :class="child.id === props.active ? 'text-yellow' : ''">
+        {{ child.langs[0].Name }}
+      </li>
+    </ul>
+  </div>
+  <div v-else>
+    <!-- Optional: Placeholder or message when main category is not available -->
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+// Define the props
+const props = defineProps({
+  data: Array,
+  active: Number
+});
+
+const isOpen = ref(false);
+
+const toggle = () => {
+  isOpen.value = !isOpen.value;
+};
+
+// Computed properties
+const hasMainCategory = computed(() => props.data.length > 0 && props.data[0].langs && props.data[0].langs.length > 0);
+const mainCategoryName = computed(() => hasMainCategory.value ? props.data[0].langs[0].Name : '');
+const subcategories = computed(() => hasMainCategory.value && props.data[0].children ? props.data[0].children : []);
+</script>
\ No newline at end of file
diff --git a/components/section/shop-page/Product.vue b/components/section/shop-page/Product.vue
new file mode 100644
index 0000000..16fee20
--- /dev/null
+++ b/components/section/shop-page/Product.vue
@@ -0,0 +1,53 @@
+<template>
+  <NuxtLink>
+    <li class="bg-block rounded-2xl min-h-[420px] w-[330px] list-none overflow-hidden p-5">
+      <article class="group h-full">
+        <div class="h-full flex flex-col">
+          <div class="h-[205px]">
+            <img :src="`https://www.yourgold.cz/api/public/file/${props.product?.cover_picture_uuid}.webp`"
+              :alt="props.product?.description" class="h-full object-contain w-auto block mx-auto">
+          </div>
+
+          <div class="flex flex-col items-start text-start mt-[50px] justify-between h-full">
+            <div class="space-y-[15px]">
+              <h4 class="font-bold">{{ props.product?.name }}</h4>
+              <p class="text-sm font-normal">{{ props.product?.tax_name }}</p>
+            </div>
+            <div class="flex items-center justify-between w-full">
+              <p class="font-bold text-accent-green-light text-sm sm:text-2xl">{{ props.product?.formatted_price }}</p>
+              <div class="w-12 h-12 bg-button flex items-center justify-center rounded-[10px]">
+                <i class="uil uil-shopping-cart text-[31px] cursor-pointer text-white"></i>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- <div v-if="!props.product?.is_sale_active"
+          class="absolute top-0 flex items-center justify-center w-full h-full px-4 bg-black bg-opacity-90 cursor-progress">
+          <div class="flex flex-col items-center gap-4">
+            <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
+              <path fill="#ffcc00" d="M5.7 22H42.5V26H5.7z" transform="rotate(-45.001 24.036 24.037)"></path>
+              <path fill="#ffcc00"
+                d="M24,4C13,4,4,13,4,24s9,20,20,20s20-9,20-20S35,4,24,4z M24,40c-8.8,0-16-7.2-16-16S15.2,8,24,8 s16,7.2,16,16S32.8,40,24,40z">
+              </path>
+            </svg>
+            <span class="font-bold text-center uppercase text-yellow">
+              {{ $t("FrontTranslations", "not available") }}
+            </span>
+          </div>
+        </div> -->
+      </article>
+    </li>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+// import imgUrl from "~/utils/imgUrl";
+const props = defineProps({
+  product: Object,
+});
+
+// const addToCartAndPreventNavigation = (event: any) => {
+//   event.preventDefault();
+//   useCartStore().addToCart(props.product);
+// };
+</script>
diff --git a/components/section/shop-page/ShopMain.vue b/components/section/shop-page/ShopMain.vue
new file mode 100644
index 0000000..5919ea1
--- /dev/null
+++ b/components/section/shop-page/ShopMain.vue
@@ -0,0 +1,377 @@
+<template>
+    <UiContainer>
+        <div class="flex justify-between mb-[75px] whitespace-nowrap gap-[100px]">
+            <p>CZK cena (na EUR). Kč 25,2380 Kč +0,0030 (+0.01%)</p>
+            <p>Cena zlata na trhu. 2 852,1450 € -21,6520 € (-0.75%)</p>
+            <p>Cena stříbra na trhu. 28,6500 € -0,1570 € (-0.54%)</p>
+            <p>PLN cena (na EUR). zł 4,2550</p>
+        </div>
+        <div class="flex flex-col gap-16 px-4 xl:flex-row">
+            <!-- <Transition>
+                <div v-if="openCategories" class="z-40 block w-full pt-8 xl:w-1/4 xl:pt-36 xl:hidden">
+                    <BaseTitle>
+                        {{ $t("FrontTranslations", "Categories") }}
+                    </BaseTitle>
+                    <div class="mt-14">
+                        <div class="flex flex-col gap-12">
+                            <div>
+                                <CategoryTree :data="categoriesList" @change-category="changeCategory($event)"
+                                    :active="categoryId" />
+                            </div>
+                            <div>
+                                <p class="mb-8 text-2xl font-extrabold text-black dark:text-white">
+                                    {{ $t("FrontTranslations", "Filtered by") }}
+                                </p>
+
+                                <div v-for="(item, itemIndex) in filters" :key="itemIndex" class="mb-8 text-white">
+                                    <span
+                                        class="flex justify-between font-bold text-black cursor-pointer 2xl:pr-24 dark:text-gray"
+                                        @click="toggleFeature(item.feature)">
+                                        {{ item.feature }}
+                                        <span class="w-4 h-4 text-yellow"><i
+                                                class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
+                                    </span>
+                                    <ul v-show="visibleFeatures[item.feature]"
+                                        class="flex flex-col gap-8 pl-8 mt-8 text-black dark:text-gray">
+                                        <li v-for="filter in item.feature_values" :key="filter.value_id"
+                                            class="flex gap-1">
+                                            <input :id="`${filter.value_id}`"
+                                                :value="`${filter.parent}.${filter.value_id}`" v-model="selectedFilters"
+                                                type="checkbox" />
+                                            <label :for="`${filter.value_id}`">{{ filter.value }}</label>
+                                        </li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </Transition> -->
+
+            <div class="min-w-[275px]">
+                <h1 class="font-bounded leading-[140%] font-bold text-[40px] mb-[55px]">
+                    {{ $t("category") }}
+                </h1>
+                <div class="flex flex-col gap-12">
+                    <div>
+
+                        <div v-if="categoriesList.length < 1" class="animate-pulse">
+                            <div
+                                class="flex items-center justify-between mt-4 text-white rounded-lg cursor-pointer xl:pr-24">
+                                <div class="w-32 h-4 bg-gray-200 rounded"></div>
+                                <div class="w-4 h-4 bg-gray-200 rounded-full"></div>
+                            </div>
+                        </div>
+                        <CategoryTree :data="categoriesList" @change-category="changeCategory($event)"
+                            :active="categoryId" />
+                    </div>
+                    <div>
+                        <p class="mb-10 text-2xl font-extrabold text-black dark:text-white">
+                            {{ $t("filtered_by") }}
+                        </p>
+
+                        <!-- <div v-if="filters.length < 1" class="mb-8 text-white animate-pulse">
+                            <div v-for="i in 5"
+                                class="mt-10 flex justify-between font-bold text-black cursor-pointer 2xl:pr-24 dark:text-gray">
+                                <div class="w-32 h-4 bg-gray-200 rounded"></div>
+                                <div class="w-4 h-4 bg-gray-200 rounded"></div>
+                            </div>
+                        </div> -->
+
+                        <div v-for="(item, itemIndex) in filters" :key="itemIndex" :class="['mb-[30px] text-white', visibleFeatures[item.feature] && 'border-b border-block pb-[10px]']">
+                            <span class="flex justify-between items-center font-bold text-black cursor-pointer dark:text-gray mb-[25px]"
+                                @click="toggleFeature(item.feature)">
+                                {{ item.feature }}
+                                <span :class="[visibleFeatures[item.feature] && 'rotate-180', 'transition-all']"> <i
+                                        class="uil uil-angle-down text-3xl text-button font-light cursor-pointer"></i></span>
+                            </span>
+                            <ul v-show="visibleFeatures[item.feature]"
+                                class="flex flex-col gap-5 text-black dark:text-gray">
+                                <li v-for="filter in item.feature_values" :key="filter.value_id" class="flex gap-[10px] cursor-pointer">
+                                    <input :id="`${filter.value_id}`" :value="`${filter.parent}.${filter.value_id}`"
+                                        v-model="selectedFilters" type="checkbox" />
+                                    <label :for="`${filter.value_id}`" class="cursor-pointer">{{ filter.value }}</label>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="w-full">
+                <ThePartnerInfo v-if="isInfo" @close-element="closeElement()" />
+
+                <div v-if="products.length < 1" class="grid gap-12 pt-32 pb-16 md:grid-cols-2 2xl:grid-cols-3">
+                    <TheProductSkeleton v-for="index in 6"></TheProductSkeleton>
+                </div>
+
+                <div v-else ref="loadingElement" class="grid gap-12 pt-32 pb-16 md:grid-cols-2 2xl:grid-cols-4">
+                    <Product v-for="product in products" :key="product.id" :product="product" />
+                    <div v-if="reachedEnd"
+                        class="md:col-span-2 2xl:col-span-3 border-2 border-yellow border-r-0 border-l-0 mt-10">
+                        <p class="text-black dark:text-gray text-center text-lg p-2">
+                            {{ $t("FrontTranslations", "You reached end of the list.") }}
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </UiContainer>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import Product from "./Product.vue";
+import type { Feature, ProductType } from "~/types";
+import CategoryTree from "./CategoryTree.vue";
+const openCategories = ref(false);
+const isInfo = ref<boolean>(true);
+const selectedFilters = ref<any>([]);
+const categoryId = ref<number>(1);
+const itemsCount = ref(0);
+
+const loading = ref(false);
+const reachedEnd = ref(false);
+
+const loadingElement = ref<HTMLElement | null>(null);
+
+const page = ref(1);
+const elems = ref(12);
+const maxElements = ref(0);
+
+const products = ref([] as ProductType[]);
+async function getProducts() {
+    try {
+        const res = await fetch(
+            `http://127.0.0.1:4000/api/public/products/category/${categoryId.value}?p=${page.value}&elems=${elems.value}`,
+            {
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            }
+        );
+
+        const data = await res.json();
+
+        products.value = data.data.items;
+        maxElements.value = data.data.items_count + 1;
+
+    } catch (error) {
+        console.error("getProducts error:", error);
+    }
+}
+
+const filters = ref([] as Feature[]);
+async function getCategory() {
+    try {
+        const res = await fetch(
+            `http://127.0.0.1:4000/api/public/products/category/1/classification`,
+            {
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            }
+        );
+
+        const data = await res.json();
+
+        filters.value = data.data as Feature[];
+        filters.value.forEach((el) => {
+            const parentId = el.feature_id;
+            el.feature_values.forEach((el) => {
+                el.parent = parentId;
+            });
+        });
+
+    } catch (error) {
+        console.error("getCategory error:", error);
+    }
+}
+
+const categoriesList = ref([]);
+async function getCategoryTree() {
+    try {
+        const res = await fetch(
+            `http://127.0.0.1:4000/api/public/categories/tree`,
+            {
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            }
+        );
+
+        const data = await res.json();
+        categoriesList.value = data.data.children;
+
+    } catch (error) {
+        console.error("getCategory error:", error);
+    }
+}
+
+
+getProducts()
+getCategory()
+getCategoryTree()
+
+const closeElement = () => {
+    isInfo.value = false;
+};
+
+onMounted(() => {
+    window.addEventListener("scroll", scrollEvent);
+});
+
+onUnmounted(() => {
+    window.removeEventListener("scroll", scrollEvent);
+});
+
+async function scrollEvent(e: Event) {
+    let maxScrollY = window.scrollY || document.documentElement.scrollHeight - document.documentElement.clientHeight;
+
+    if (window.scrollY >= maxScrollY - 500 && !reachedEnd.value && !loading.value) {
+        loading.value = true;
+        await loadMoreProducts();
+        loading.value = false;
+    }
+}
+
+const visibleFeatures = reactive<any>({});
+
+filters.value.forEach((item) => {
+    visibleFeatures[item.feature] = false;
+});
+
+function toggleFeature(feature: any) {
+    if (visibleFeatures.hasOwnProperty(feature)) {
+        visibleFeatures[feature] = !visibleFeatures[feature];
+    } else {
+        visibleFeatures[feature] = true;
+    }
+}
+
+class FilteredQueryString extends URLSearchParams {
+    override append(name: string, value: string): void {
+        if (value == null) {
+            return;
+        }
+
+        super.append(name, value);
+    }
+}
+
+async function loadMoreProducts() {
+    let qParams = new FilteredQueryString();
+
+    page.value = page.value + 1;
+
+    qParams.append("p", `${page.value}`);
+    qParams.append("elems", `${elems.value}`);
+    qParams.append("features", selectedFilters.value.length > 0 ? selectedFilters.value : null);
+
+    try {
+        const res = await fetch(
+            `http://127.0.0.1:4000/api/public/products/category/${categoryId.value}?${qParams.toString()}`,
+            {
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            }
+        );
+
+        const data = await res.json();
+        maxElements.value = data.data.items_count;
+
+        if (data.data.items) {
+            products.value.push(...(data.data.items as ProductType[]));
+        } else {
+            reachedEnd.value = true;
+        }
+
+        if (products.value.length >= maxElements.value) {
+            reachedEnd.value = true;
+        }
+
+    } catch (error) {
+        console.error("getCategory error:", error);
+    }
+}
+
+const changeCategory = (item: any) => {
+    categoryId.value = item.id;
+};
+
+watch(selectedFilters, async (newQuestion) => {
+    if (newQuestion) {
+        page.value = 1;
+        reachedEnd.value = false;
+        loadingElement.value?.scrollIntoView();
+
+        let qParams = new FilteredQueryString();
+
+        qParams.append("p", `${page.value}`);
+        qParams.append("elems", `${elems.value}`);
+        qParams.append("features", selectedFilters.value.length > 0 ? selectedFilters.value : null);
+
+        try {
+            const res = await fetch(
+                `http://127.0.0.1:4000/api/public/products/category/1?${qParams.toString()}`,
+                {
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                }
+            );
+
+            const data = await res.json();
+            products.value = data.data.items;
+            maxElements.value = data.data.items_count;
+
+        } catch (error) {
+            console.error("selectedFilters error:", error);
+        }
+    }
+});
+
+watch(categoryId, async (newQuestion) => {
+    if (newQuestion) {
+        page.value = 1;
+        reachedEnd.value = false;
+        loadingElement.value?.scrollIntoView();
+
+        let qParams = new FilteredQueryString();
+
+        qParams.append("p", `${page.value}`);
+        qParams.append("elems", `${elems.value}`);
+        qParams.append("features", selectedFilters.value.length > 0 ? selectedFilters.value : null);
+
+        try {
+            const res = await fetch(
+                `http://127.0.0.1:4000/api/public/products/category/${categoryId.value}?${qParams.toString()}`,
+                {
+                    headers: {
+                        "Content-Type": "application/json",
+                    },
+                }
+            );
+
+            const data = await res.json();
+            products.value = data.data.items;
+            maxElements.value = data.data.items_count;
+
+        } catch (error) {
+            console.error("getCategory error:", error);
+        }
+    }
+});
+</script>
+
+<style scoped>
+.v-enter-active,
+.v-leave-active {
+    transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+    opacity: 0;
+}
+</style>
\ No newline at end of file
diff --git a/stores/menuStore.ts b/stores/menuStore.ts
index 768526b..3ac3652 100644
--- a/stores/menuStore.ts
+++ b/stores/menuStore.ts
@@ -139,7 +139,8 @@ export const useMenuStore = defineStore("menuStore", () => {
         name: `id-slug___${$i18n.locale.value}`,
       });
       openDropDown.value = false;
-    } else {
+    }
+    else {
       router.push({
         params: {
           slug: defaultMenu.value.link_rewrite,
diff --git a/stores/store.ts b/stores/store.ts
index 1f07948..b060b3e 100644
--- a/stores/store.ts
+++ b/stores/store.ts
@@ -13,6 +13,10 @@ export const useStore = defineStore("store", () => {
   const totalInvestment = ref()
   const minValue = ref()
 
+  // login
+  const email = ref()
+  const password = ref()
+
   const components = ref({} as PBPageItem[]);
   const getSections = async (id: string) => {
     pb.cancelRequest("menu_view");
@@ -111,6 +115,34 @@ export const useStore = defineStore("store", () => {
     }
   }
 
+  async function logIn() {
+    try {
+      const res = await fetch(
+        'http://127.0.0.1:4000/api/public/user/session/start',
+        {
+          method: 'POST',
+          body: JSON.stringify({
+            mail: email.value,
+            password: password.value
+          }),
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }
+      );
+
+      if (!res.ok) {
+        throw new Error(`HTTP error: ${res.status}`);
+      }
+
+      const data = await res.json();
+      minValue.value = data.data
+
+    } catch (error) {
+      console.error("getList error:", error);
+    }
+  }
+
   getCalculator()
   getMinValue()
 
@@ -121,6 +153,9 @@ export const useStore = defineStore("store", () => {
     monthlySavings,
     storagePeriod,
     minValue,
+    email,
+    password,
+    logIn,
     getCalculator,
     getComponents,
     getSections,
diff --git a/types/index.ts b/types/index.ts
index 18bc385..2a1b1c4 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -126,4 +126,34 @@ export type Currencies = {
   sign: string;
   active: boolean;
   suffix: boolean;
+}
+
+export type FeatureValue = {
+  parent: number,
+  products_with_value: number,
+  value: string,
+  value_id: number,
+}
+
+export type Feature = {
+  feature: string,
+  feature_id: number,
+  feature_values: FeatureValue[],
+  products_with_feature: number,
+}
+
+export type ProductType = {
+  applied_tax_rate: number,
+  cover_picture_uuid: string,
+  description: string,
+  formatted_price: string,
+  id: number,
+  in_stock: number,
+  is_sale_active: boolean,
+  link_rewrite: string,
+  name: string,
+  price: number,
+  tax_name: string,
+  cart_item_id?: number
+  product_id?: number
 }
\ No newline at end of file