diff --git a/src/components/ui/VnImg.vue b/src/components/ui/VnImg.vue
index 6a459020..fb468dc1 100644
--- a/src/components/ui/VnImg.vue
+++ b/src/components/ui/VnImg.vue
@@ -28,13 +28,9 @@ const props = defineProps({
         type: Number,
         required: true
     },
-    rounded: {
-        type: Boolean,
-        default: false
-    },
-    fullRounded: {
-        type: Boolean,
-        default: false
+    roundedBorders: {
+        type: String,
+        default: 'none'
     },
     width: {
         type: String,
@@ -70,6 +66,17 @@ const showEditForm = ref(false);
 const url = computed(() => {
     return `${props.baseURL ?? app.imageUrl}/${props.storage}/${props.size}/${props.id}`;
 });
+
+const rounded = computed(() => {
+    const roundedMap = {
+        none: '',
+        default: 'rounded',
+        full: 'full-rounded',
+        top: 'top-rounded',
+        bottom: 'bottom-rounded'
+    };
+    return roundedMap[props.roundedBorders];
+});
 </script>
 <template>
     <div class="relative-position main-image-container">
@@ -85,11 +92,7 @@ const url = computed(() => {
             <QTooltip>{{ t('addOrEditImage') }}</QTooltip>
         </QBtn>
         <QImg
-            :class="{
-                zoomIn: props.zoomSize,
-                rounded: props.rounded,
-                'full-rounded': props.fullRounded
-            }"
+            :class="[rounded, { zoomIn: props.zoomSize }]"
             class="main-image"
             :src="url"
             v-bind="$attrs"
@@ -161,9 +164,19 @@ const url = computed(() => {
 .rounded {
     border-radius: 0.6em;
 }
+
 .full-rounded {
     border-radius: 50px;
 }
+
+.rounded-bottom {
+    border-radius: 0.6em 0.6em 0 0;
+}
+
+.rounded-top {
+    border-radius: 0 0 0.6em 0.6em;
+}
+
 .img_zoom {
     border-radius: 0%;
 }
diff --git a/src/components/ui/VnSearchBar.vue b/src/components/ui/VnSearchBar.vue
index 0d65a5f1..375e9e8f 100644
--- a/src/components/ui/VnSearchBar.vue
+++ b/src/components/ui/VnSearchBar.vue
@@ -12,7 +12,7 @@ const props = defineProps({
     },
     placeholder: {
         type: String,
-        default: 'Search'
+        default: ''
     },
     sqlQuery: {
         type: String,
diff --git a/src/i18n/ca-ES/index.js b/src/i18n/ca-ES/index.js
index 891d22d8..c21533d9 100644
--- a/src/i18n/ca-ES/index.js
+++ b/src/i18n/ca-ES/index.js
@@ -103,6 +103,9 @@ export default {
     user: 'Usuari',
     password: 'Contrasenya',
     modify: 'Modificar',
+    shoppingCart: 'Cistella de la compra',
+    available: 'Disponible',
+    minQuantity: 'Quantitat mínima',
     // Image related translations
     'Cant lock cache': 'No es pot bloquejar la memòria cau',
     'Bad file format': 'Format de fitxer no reconegut',
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index f3d1e002..6938af07 100644
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@@ -136,6 +136,9 @@ export default {
     remindMe: 'Remember me',
     password: 'Password',
     modify: 'Modify',
+    shoppingCart: 'Shopping cart',
+    available: 'Available',
+    minQuantity: 'Minimum quantity',
     // Image related translations
     'Cant lock cache': 'The cache could not be blocked',
     'Bad file format': 'Unrecognized file format',
diff --git a/src/i18n/es-ES/index.js b/src/i18n/es-ES/index.js
index cafc2e7c..d826b2d8 100644
--- a/src/i18n/es-ES/index.js
+++ b/src/i18n/es-ES/index.js
@@ -135,6 +135,9 @@ export default {
     cancel: 'Cancelar',
     of: 'de',
     modify: 'Modificar',
+    shoppingCart: 'Cesta de la compra',
+    available: 'Disponible',
+    minQuantity: 'Cantidad mínima',
     // Image related translations
     'Cant lock cache': 'La caché no pudo ser bloqueada',
     'Bad file format': 'Formato de archivo no reconocido',
diff --git a/src/i18n/fr-FR/index.js b/src/i18n/fr-FR/index.js
index afa36798..549eae58 100644
--- a/src/i18n/fr-FR/index.js
+++ b/src/i18n/fr-FR/index.js
@@ -103,6 +103,9 @@ export default {
     user: 'Utilisateur',
     password: 'Mot de passe',
     modify: 'Modifier',
+    shoppingCart: 'Panier',
+    available: 'Disponible',
+    minQuantity: 'Quantité minimum',
     // Image related translations
     'Cant lock cache': "Le cache n'a pas pu être verrouillé",
     'Bad file format': 'Format de fichier non reconnu',
diff --git a/src/i18n/pt-PT/index.js b/src/i18n/pt-PT/index.js
index 43485c41..80b9a222 100644
--- a/src/i18n/pt-PT/index.js
+++ b/src/i18n/pt-PT/index.js
@@ -101,6 +101,9 @@ export default {
     user: 'Utilizador',
     password: 'Senha',
     modify: 'Modificar',
+    shoppingCart: 'Cesta da compra',
+    available: 'Disponível',
+    minQuantity: 'Quantidade mínima',
     // Image related translations
     'Cant lock cache': 'O cache não pôde ser bloqueado',
     'Bad file format': 'Formato de arquivo inválido',
diff --git a/src/pages/Account/AddressList.vue b/src/pages/Account/AddressList.vue
index 0f6fd764..0b91d52c 100644
--- a/src/pages/Account/AddressList.vue
+++ b/src/pages/Account/AddressList.vue
@@ -104,10 +104,7 @@ onMounted(async () => {
         </QBtn>
     </Teleport>
     <QPage class="vn-w-sm">
-        <QList
-            class="rounded-borders shadow-1 shadow-transition"
-            separator
-        >
+        <QList class="rounded-borders shadow-1 shadow-transition" separator>
             <CardList
                 v-for="(address, index) in addresses"
                 :key="index"
diff --git a/src/pages/Admin/ItemsView.vue b/src/pages/Admin/ItemsView.vue
index 7f83d4b9..bbcefc60 100644
--- a/src/pages/Admin/ItemsView.vue
+++ b/src/pages/Admin/ItemsView.vue
@@ -33,9 +33,9 @@ const onSearch = data => (items.value = data || []);
 <template>
     <Teleport v-if="isHeaderMounted" to="#actions">
         <VnSearchBar
-            :sqlQuery="query"
-            @onSearch="onSearch"
-            @onSearchError="items = []"
+            :sql-query="query"
+            @on-search="onSearch"
+            @on-search-error="items = []"
         />
     </Teleport>
     <QPage class="vn-w-xs">
@@ -66,8 +66,8 @@ const onSearch = data => (items.value = data || []);
                         class="q-mr-md"
                         rounded
                         editable
-                        editSchema="catalog"
-                        :editImageName="item.image"
+                        edit-schema="catalog"
+                        :edit-image-name="item.image"
                     />
                 </template>
                 <template #content>
diff --git a/src/pages/Ecomerce/Catalog.vue b/src/pages/Ecomerce/Catalog.vue
deleted file mode 100644
index 21ac278a..00000000
--- a/src/pages/Ecomerce/Catalog.vue
+++ /dev/null
@@ -1,706 +0,0 @@
-<template>
-    <Teleport v-if="isHeaderMounted" to="#actions">
-        <QInput
-            :placeholder="$t('search')"
-            v-model="search"
-            debounce="500"
-            class="search q-mr-sm"
-            rounded
-            dark
-            dense
-            standout
-        >
-            <template #prepend>
-                <QIcon v-if="search === ''" name="search" />
-                <QIcon
-                    v-else
-                    name="clear"
-                    class="cursor-pointer"
-                    @click="search = ''"
-                />
-            </template>
-        </QInput>
-        <QBtn
-            :icon="$t(viewMode == 'list' ? 'view_list' : 'grid_on')"
-            :label="$t(viewMode == 'list' ? 'listView' : 'gridView')"
-            @click="onViewModeClick()"
-            rounded
-            no-caps
-        />
-    </Teleport>
-    <div style="padding-bottom: 5em">
-        <QDrawer v-model="$app.rightDrawerOpen" side="right" :width="250">
-            <div class="q-pa-md">
-                <div class="basket-info">
-                    <p>{{ date(new Date()) }}</p>
-                    <p>
-                        {{ $t('warehouse') }}
-                        {{ 'Algemesi' }}
-                    </p>
-                    <QBtn
-                        flat
-                        rounded
-                        no-caps
-                        :to="{
-                            name: 'checkout',
-                            params: { id: appStore.basketOrderId },
-                            query: { continue: 'catalog' }
-                        }"
-                    >
-                        {{ $t('modify') }}
-                    </QBtn>
-                </div>
-                <div class="q-mt-md">
-                    <div class="q-mb-xs text-grey-7">
-                        {{ $t('category') }}
-                        <QIcon
-                            v-if="category"
-                            style="font-size: 1.3em"
-                            name="cancel"
-                            class="cursor-pointer"
-                            :title="$t('deleteFilter')"
-                            @click="
-                                $router.push({ params: { category: null } })
-                            "
-                        />
-                    </div>
-                    <div class="categories">
-                        <QBtn
-                            flat
-                            round
-                            class="category q-pa-sm"
-                            v-for="cat in categories"
-                            :class="{ active: category == cat.id }"
-                            :key="cat.id"
-                            :title="cat.name"
-                            :to="{ params: { category: cat.id, type: null } }"
-                        >
-                            <img :src="`statics/category/${cat.code}.svg`" />
-                        </QBtn>
-                    </div>
-                </div>
-                <div class="q-mt-md" v-if="category || search">
-                    <div class="q-mb-xs text-grey-7">
-                        {{ $t('filterBy') }}
-                    </div>
-                    <QSelect
-                        v-model="type"
-                        option-value="id"
-                        option-label="name"
-                        :options="types"
-                        :disable="!category"
-                        clearable
-                        :label="$t('family')"
-                        @filter="filterType"
-                        @input="
-                            $router.push({ params: { type: type && type.id } })
-                        "
-                    />
-                    <QSelect
-                        v-model="order"
-                        input-debounce="0"
-                        :options="orderOptions"
-                        :label="$t('orderBy')"
-                    />
-                </div>
-            </div>
-            <div class="q-pa-md" v-if="typeId || search">
-                <div class="q-mb-md" v-for="tag in tags" :key="tag.uid">
-                    <div class="q-mb-xs text-caption text-grey-7">
-                        {{ tag.name }}
-                        <QIcon
-                            v-if="tag.hasFilter"
-                            style="font-size: 1.3em"
-                            name="cancel"
-                            :title="$t('deleteFilter')"
-                            class="cursor-pointer"
-                            @click="onResetTagFilterClick(tag)"
-                        />
-                    </div>
-                    <div v-if="!tag.useRange">
-                        <div
-                            v-for="value in tag.values.slice(0, tag.showCount)"
-                            :key="value"
-                        >
-                            <QCheckbox
-                                v-model="tag.filter"
-                                :dense="true"
-                                :val="value"
-                                :label="value"
-                                @input="onCheck(tag)"
-                            />
-                        </div>
-                        <div v-if="tag.values.length > tag.showCount">
-                            <span
-                                class="cursor-pointer text-blue"
-                                @click="tag.showCount = Infinity"
-                            >
-                                <QIcon name="keyboard_arrow_down" />
-                                {{ $t('viewMore') }}
-                            </span>
-                        </div>
-                        <div v-if="tag.showCount == Infinity">
-                            <span
-                                class="cursor-pointer text-blue"
-                                @click="tag.showCount = tag.initialCount"
-                            >
-                                <QIcon name="keyboard_arrow_up" />
-                                {{ $t('viewLess') }}
-                            </span>
-                        </div>
-                    </div>
-                    <div class="q-mx-md">
-                        <QRange
-                            class="q-mt-lg"
-                            v-if="tag.useRange"
-                            v-model="tag.filter"
-                            :min="tag.min"
-                            :max="tag.max"
-                            :step="tag.step"
-                            :color="tag.hasFilter ? 'primary' : 'grey-6'"
-                            @input="onRangeChange(tag, true)"
-                            @change="onRangeChange(tag)"
-                            label-always
-                            markers
-                            snap
-                        />
-                    </div>
-                </div>
-            </div>
-        </QDrawer>
-        <QInfiniteScroll
-            @load="onLoad"
-            scroll-taget="html"
-            :offset="800"
-            :disable="disableScroll"
-        >
-            <div class="q-pa-md row justify-center q-gutter-md">
-                <QSpinner v-if="isLoading" color="primary" size="50px" />
-                <div
-                    v-if="items && !items.length"
-                    class="text-subtitle1 text-grey-7 q-pa-md"
-                >
-                    {{ $t('noItemsFound') }}
-                </div>
-                <div
-                    v-if="!items && !isLoading"
-                    class="text-subtitle1 text-grey-7 q-pa-md"
-                >
-                    {{ $t('pleaseSetFilter') }}
-                </div>
-                <QCard class="my-card" v-for="_item in items" :key="_item.id">
-                    <img
-                        :src="`${$imageBase}/catalog/200x200/${_item.image}`"
-                    />
-                    <QCardSection>
-                        <div class="name text-subtitle1">
-                            {{ _item.longName }}
-                        </div>
-                        <div
-                            class="sub-name text-uppercase text-subtitle1 text-grey-7 ellipsize q-pt-xs"
-                        >
-                            {{ _item.subName }}
-                        </div>
-                        <div class="tags q-pt-xs">
-                            <div v-for="tag in _item.tags" :key="tag.tagFk">
-                                <span class="text-grey-7">{{
-                                    tag.tag.name
-                                }}</span>
-                                {{ tag.value }}
-                            </div>
-                        </div>
-                    </QCardSection>
-                    <QCardActions class="actions justify-between">
-                        <div class="q-pl-sm">
-                            <span class="available bg-green text-white">{{
-                                _item.available
-                            }}</span>
-                            {{ $t('from') }}
-                            <span class="price">{{
-                                currency(_item.buy?.price3)
-                            }}</span>
-                        </div>
-                        <QBtn
-                            icon="add_shopping_cart"
-                            :title="$t('buy')"
-                            @click="showItem(_item)"
-                            flat
-                        />
-                    </QCardActions>
-                </QCard>
-            </div>
-            <template #loading>
-                <div class="row justify-center q-my-md">
-                    <QSpinner color="primary" name="dots" size="40px" />
-                </div>
-            </template>
-        </QInfiniteScroll>
-        <QDialog v-model="showItemDialog">
-            <QCard style="width: 25em">
-                <QImg
-                    :src="`${$imageBase}/catalog/200x200/${item.image}`"
-                    :ratio="5 / 3"
-                >
-                    <div class="absolute-bottom text-center q-pa-xs">
-                        <div class="text-subtitle1">
-                            {{ item.longName }}
-                        </div>
-                    </div>
-                </QImg>
-                <QCardSection>
-                    <div
-                        class="text-uppercase text-subtitle1 text-grey-7 ellipsize"
-                    >
-                        {{ item.subName }}
-                    </div>
-                    <div class="text-grey-7">#{{ item.id }}</div>
-                </QCardSection>
-                <QCardSection>
-                    <div v-for="tag in item.tags" :key="tag.tagFk">
-                        <span class="text-grey-7">{{ tag.tag.name }}</span>
-                        {{ tag.value }}
-                    </div>
-                </QCardSection>
-                <QCardActions align="right">
-                    <QBtn @click="showItemDialog = false" flat>
-                        {{ $t('cancel') }}
-                    </QBtn>
-                    <QBtn @click="showItemDialog = false" flat>
-                        {{ $t('accept') }}
-                    </QBtn>
-                </QCardActions>
-            </QCard>
-        </QDialog>
-        <QPageSticky>
-            <QBtn
-                fab
-                to="/ecomerce/basket"
-                icon="shopping_cart"
-                color="accent"
-                :title="$t('shoppingCart')"
-            />
-        </QPageSticky>
-    </div>
-</template>
-
-<style lang="scss" scoped>
-.search {
-    max-width: 250px;
-}
-.basket-info {
-    background-color: #8cc63f;
-    color: white;
-    padding: 17px 28px;
-    border-radius: 7px;
-    text-align: center;
-
-    & > p {
-        margin: 0;
-        padding: 0.4em 0;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-    }
-}
-.categories {
-    margin: 0 auto;
-    width: 220px;
-
-    .category {
-        width: 55px;
-
-        &.active {
-            background: rgba(0, 0, 0, 0.08);
-        }
-        & > img {
-            height: 40px;
-            width: 40px;
-        }
-    }
-}
-.tags {
-    max-height: 4.6em;
-    overflow: hidden;
-}
-.available {
-    padding: 0.15em;
-    border-radius: 0.2em;
-    font-size: 1.3em;
-}
-.price {
-    font-size: 1.3em;
-}
-.my-card {
-    width: 100%;
-    max-width: 17.5em;
-    height: 32.5em;
-    overflow: hidden;
-    .name,
-    .sub-name {
-        line-height: 1.3em;
-    }
-    .ellipsize {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-    .description {
-        height: 40px;
-        overflow: hidden;
-    }
-}
-</style>
-
-<script>
-import { date, currency, formatDate } from 'src/lib/filters.js';
-import axios from 'axios';
-import { useAppStore } from 'stores/app';
-import { storeToRefs } from 'pinia';
-
-const CancelToken = axios.CancelToken;
-
-export default {
-    name: 'HederaCatalog',
-    setup() {
-        const appStore = useAppStore();
-        const { isHeaderMounted } = storeToRefs(appStore);
-        return { isHeaderMounted, appStore };
-    },
-    data() {
-        return {
-            uid: 0,
-            search: '',
-            orderDate: formatDate(new Date(), 'YYYY/MM/DD'),
-            category: null,
-            categories: [],
-            type: null,
-            typeId: null,
-            types: [],
-            orgTypes: [],
-            item: {},
-            showItemDialog: false,
-            tags: [],
-            isLoading: false,
-            items: null,
-            limit: null,
-            pageSize: 30,
-            maxTags: 5,
-            disableScroll: true,
-            viewMode: 'list',
-            order: {
-                label: this.$t('relevancy'),
-                value: 'relevancy DESC, longName'
-            },
-            orderOptions: [
-                {
-                    label: this.$t('relevancy'),
-                    value: 'relevancy DESC, longName'
-                },
-                {
-                    label: this.$t('name'),
-                    value: 'longName'
-                },
-                {
-                    label: this.$t('siceAsc'),
-                    value: 'size ASC'
-                },
-                {
-                    label: this.$t('sizeDesc'),
-                    value: 'size DESC'
-                },
-                {
-                    label: this.$t('priceAsc'),
-                    value: 'price ASC'
-                },
-                {
-                    label: this.$t('priceDesc'),
-                    value: 'price DESC'
-                },
-                {
-                    label: this.$t('available'),
-                    value: 'available'
-                }
-            ]
-        };
-    },
-    created() {
-        this.$app.useRightDrawer = true;
-    },
-    async beforeMount() {
-        const isGuest = false; // TODO: Integrate isGuest logic
-        if (!isGuest) {
-            this.appStore.check('catalog');
-        }
-    },
-    async mounted() {
-        this.categories = await this.$jApi.query(
-            `SELECT c.id, l.name, c.color, c.code
-        FROM vn.itemCategory c
-          JOIN vn.itemCategoryL10n l ON l.id = c.id
-        WHERE c.display
-        ORDER BY display`
-        );
-        this.onRouteChange(this.$route);
-    },
-    beforeUnmount() {
-        this.clearTimeoutAndRequest();
-    },
-    beforeRouteUpdate(to, from, next) {
-        this.onRouteChange(to);
-        next();
-    },
-    watch: {
-        categories() {
-            this.refreshTitle();
-        },
-        orgTypes() {
-            this.refreshTitle();
-        },
-        order() {
-            this.loadItems();
-        },
-        date() {
-            this.loadItems();
-        },
-        async category(value) {
-            this.orgTypes = [];
-            if (!value) return;
-
-            const res = await this.$jApi.execQuery(
-                `CALL myOrder_getAvailable(${this.appStore.basketOrderId});
-        SELECT DISTINCT t.id, l.name
-          FROM vn.item i
-            JOIN vn.itemType t ON t.id = i.typeFk
-            JOIN tmp.itemAvailable a ON a.id = i.id
-            JOIN vn.itemTypeL10n l ON l.id = t.id
-          WHERE t.\`order\` >= 0
-            AND t.categoryFk = #category
-          ORDER BY t.\`order\`, l.name;
-        DROP TEMPORARY TABLE tmp.itemAvailable;`,
-                { category: value }
-            );
-            res.fetch();
-            this.orgTypes = res.fetchData();
-        },
-        search(value) {
-            const location = { params: this.$route.params };
-            if (value) location.query = { search: value };
-            this.$router.push(location);
-        }
-    },
-    methods: {
-        date,
-        currency,
-        onViewModeClick() {
-            this.viewMode = this.viewMode === 'list' ? 'grid' : 'list';
-        },
-        onRouteChange(route) {
-            let { category, type } = route.params;
-
-            category = parseInt(category) || null;
-            type = parseInt(type) || null;
-
-            this.category = category;
-            this.typeId = category ? type : null;
-            this.search = route.query.search || '';
-            this.tags = [];
-
-            this.refreshTitle();
-            this.loadItems();
-        },
-        refreshTitle() {
-            let title = this.$t(this.$router.currentRoute.value.name);
-            let subtitle;
-
-            if (this.category) {
-                const category =
-                    this.categories.find(i => i.id === this.category) || {};
-                title = category.name;
-            }
-
-            if (this.typeId) {
-                this.type = this.orgTypes.find(i => i.id === this.typeId);
-                subtitle = title;
-                title = this.type && this.type.name;
-            } else {
-                this.type = null;
-            }
-
-            this.$app.$patch({ title, subtitle });
-        },
-        clearTimeoutAndRequest() {
-            if (this.timeout) {
-                clearTimeout(this.timeout);
-                this.timeout = null;
-            }
-            if (this.source) {
-                this.source.cancel();
-                this.source = null;
-            }
-        },
-        loadItemsDelayed() {
-            this.clearTimeoutAndRequest();
-            this.timeout = setTimeout(() => this.loadItems(), 500);
-        },
-        loadItems() {
-            this.items = null;
-            this.isLoading = true;
-            this.limit = this.pageSize;
-            this.disableScroll = false;
-            this.isLoading = false;
-            // this.loadItemsBase().finally(() => (this.isLoading = false))
-        },
-        onLoad(index, done) {
-            if (this.isLoading) return done();
-            this.limit += this.pageSize;
-            done();
-            // this.loadItemsBase().finally(done)
-        },
-        loadItemsBase() {
-            this.clearTimeoutAndRequest();
-
-            if (!(this.category || this.typeId || this.search)) {
-                this.tags = [];
-                return Promise.resolve(true);
-            }
-
-            const tagFilter = [];
-
-            for (const tag of this.tags) {
-                if (tag.hasFilter) {
-                    tagFilter.push({
-                        tagFk: tag.id,
-                        values: tag.filter
-                    });
-                }
-            }
-
-            this.source = CancelToken.source();
-
-            const params = {
-                dated: this.orderDate,
-                typeFk: this.typeId,
-                categoryFk: this.category,
-                search: this.search,
-                order: this.order.value,
-                limit: this.limit,
-                tagFilter
-            };
-            const config = {
-                params,
-                cancelToken: this.source.token
-            };
-            return this.$axios
-                .get('Items/catalog', config)
-                .then(res => this.onItemsGet(res))
-                .catch(err => this.onItemsError(err))
-                .finally(() => (this.cancel = null));
-        },
-        onItemsError(err) {
-            if (err.__CANCEL__) return;
-            this.disableScroll = true;
-            throw err;
-        },
-        onItemsGet(res) {
-            for (const tag of res.data.tags) {
-                tag.uid = this.uid++;
-
-                if (tag.filter) {
-                    tag.hasFilter = true;
-                    tag.useRange = tag.filter.max || tag.filter.min;
-                } else {
-                    tag.useRange =
-                        tag.isQuantitative && tag.values.length > this.maxTags;
-                    this.resetTagFilter(tag);
-                }
-
-                if (tag.values) {
-                    tag.initialCount = this.maxTags;
-                    if (Array.isArray(tag.filter)) {
-                        tag.initialCount = Math.max(
-                            tag.initialCount,
-                            tag.filter.length
-                        );
-                    }
-                    tag.showCount = tag.initialCount;
-                }
-            }
-
-            this.items = res.data.items;
-            this.tags = res.data.tags;
-            this.disableScroll = this.items.length < this.limit;
-        },
-        onRangeChange(tag, delay) {
-            tag.hasFilter = true;
-
-            if (!delay) this.loadItems();
-            else this.loadItemsDelayed();
-        },
-        onCheck(tag) {
-            tag.hasFilter = tag.filter.length > 0;
-            this.loadItems();
-        },
-        resetTagFilter(tag) {
-            tag.hasFilter = false;
-
-            if (tag.useRange) {
-                tag.filter = {
-                    min: tag.min,
-                    max: tag.max
-                };
-            } else {
-                tag.filter = [];
-            }
-        },
-        onResetTagFilterClick(tag) {
-            this.resetTagFilter(tag);
-            this.loadItems();
-        },
-        filterType(val, update) {
-            if (val === '') {
-                update(() => {
-                    this.types = this.orgTypes;
-                });
-            } else {
-                update(() => {
-                    const needle = val.toLowerCase();
-                    this.types = this.orgTypes.filter(
-                        type => type.name.toLowerCase().indexOf(needle) > -1
-                    );
-                });
-            }
-        },
-        showItem(item) {
-            this.item = item;
-            this.showItemDialog = true;
-
-            const conf = this.$state.catalogConfig;
-            const params = {
-                dated: this.orderDate,
-                addressFk: conf.addressFk,
-                agencyModeFk: conf.agencyModeFk
-            };
-            this.$axios
-                .get(`Items/${item.id}/calcCatalog`, { params })
-                .then(res => (this.lots = res.data));
-        }
-    }
-};
-</script>
-
-<i18n lang="yaml">
-es-ES:
-    gridView: Vista de rejilla
-    listView: Vista de lista
-    shoppingCart: Cesta de la compra
-    warehouse: Almacén
-    agency: Agencia
-    modify: Modificar
-    category: Categoría
-    deleteFilter: Quitar filtro
-    filterBy: Filtrar por
-    family: Familia
-    orderBy: Ordernar por
-    pleaseSetFilter: Elige un filtro en el menú de la derecha
-    search: Buscar
-</i18n>
diff --git a/src/pages/Ecomerce/CatalogCard.vue b/src/pages/Ecomerce/CatalogCard.vue
new file mode 100644
index 00000000..a53ce109
--- /dev/null
+++ b/src/pages/Ecomerce/CatalogCard.vue
@@ -0,0 +1,207 @@
+<script setup>
+import { useI18n } from 'vue-i18n';
+
+import VnImg from 'src/components/ui/VnImg.vue';
+import CardList from 'src/components/ui/CardList.vue';
+
+import { currency } from 'src/lib/filters.js';
+
+defineProps({
+    item: { type: Object, default: () => {} },
+    viewMode: { type: String, default: 'grid' }
+});
+
+const { t } = useI18n();
+</script>
+
+<template>
+    <QCard v-if="viewMode === 'grid'" v-ripple class="catalog-card">
+        <VnImg
+            storage="catalog"
+            size="200x200"
+            :id="item.image"
+            height="210px"
+            rounded="bottom"
+        />
+        <div class="column" style="height: 205px; padding: 10px">
+            <div class="column" style="margin-bottom: auto">
+                <div class="text-subtitle2 ellipsis-2-lines">
+                    {{ item.item }}
+                </div>
+                <div
+                    class="row justify-between text-uppercase text-subtitle1 text-grey-7"
+                >
+                    <span class="text-subtitle2">
+                        {{ item.subName }}
+                    </span>
+                    <span> #{{ item.id }}</span>
+                </div>
+                <div class="tags q-pt-xs text-caption">
+                    <div
+                        v-for="(tag, index) in item.previewTags"
+                        :key="index"
+                        class="full-width row"
+                    >
+                        <span class="text-grey-7 col">
+                            {{ tag.name }}
+                        </span>
+                        <span class="col ellipsis">{{ tag.value }}</span>
+                    </div>
+                </div>
+                <div v-if="item.minQuantity" class="row justify-end">
+                    <QIcon
+                        name="production_quantity_limits"
+                        size="xs"
+                        color="negative"
+                    >
+                        <QTooltip>
+                            {{ t('minQuantity') }}
+                        </QTooltip>
+                    </QIcon>
+                    <span class="text-negative text-caption">{{
+                        item.minQuantity
+                    }}</span>
+                </div>
+            </div>
+            <div class="row justify-between items-cente q-gutter-x-xs">
+                <QBadge
+                    :label="`x${item.grouping}`"
+                    color="grey"
+                    class="col-2 justify-end text-body2"
+                >
+                    <QTooltip>
+                        {{ t('minGrouping') }}
+                    </QTooltip>
+                </QBadge>
+                <QBadge
+                    outline
+                    :label="item.available"
+                    color="accent"
+                    text-color="black"
+                    class="col justify-end text-body2"
+                >
+                    <QTooltip>
+                        {{ t('available') }}
+                    </QTooltip>
+                </QBadge>
+                <QBadge
+                    outline
+                    :label="currency(item.price)"
+                    color="accent"
+                    text-color="black"
+                    class="col justify-end text-body2"
+                >
+                    <QTooltip>
+                        {{ t('groupingPrice') }}
+                    </QTooltip>
+                </QBadge>
+            </div>
+        </div>
+    </QCard>
+    <CardList v-else class="vn-w-sm">
+        <template #prepend>
+            <VnImg
+                storage="catalog"
+                size="200x200"
+                :id="item.image"
+                width="105px"
+                height="105px"
+                rounded-borders="full"
+                class="q-mr-md"
+            />
+        </template>
+        <template #content>
+            <span class="ellipsis-2-lines">
+                {{ item.item }}
+            </span>
+            <div class="row justify-between text-uppercase text-grey-7">
+                <span>{{ item.subName }}</span>
+                <span>#{{ item.id }}</span>
+            </div>
+            <div class="full-width row">
+                <span
+                    v-for="(tag, index) in item.previewTags"
+                    :key="index"
+                    class="text-grey-7 text-caption q-mr-sm"
+                >
+                    {{ tag.value }}
+                </span>
+            </div>
+            <div v-if="item.minQuantity" class="row justify-end">
+                <QIcon
+                    name="production_quantity_limits"
+                    size="xs"
+                    color="negative"
+                >
+                    <QTooltip>
+                        {{ t('minQuantity') }}
+                    </QTooltip>
+                </QIcon>
+                <span class="text-negative text-caption">{{
+                    item.minQuantity
+                }}</span>
+            </div>
+            <div class="row justify-end items-center q-gutter-x-xs q-mt-sm">
+                <QBadge
+                    :label="`x${item.grouping}`"
+                    color="grey"
+                    class="col-2 justify-end text-body2"
+                >
+                    <QTooltip>
+                        {{ t('minGrouping') }}
+                    </QTooltip>
+                </QBadge>
+                <QBadge
+                    outline
+                    :label="item.available"
+                    color="accent"
+                    text-color="black"
+                    class="col-3 justify-end text-body2"
+                >
+                    <QTooltip>
+                        {{ t('available') }}
+                    </QTooltip>
+                </QBadge>
+                <QBadge
+                    outline
+                    :label="currency(item.price)"
+                    color="accent"
+                    text-color="black"
+                    class="col-3 justify-end text-body2"
+                >
+                    <QTooltip>
+                        {{ t('groupingPrice') }}
+                    </QTooltip>
+                </QBadge>
+            </div>
+        </template>
+    </CardList>
+</template>
+
+<style lang="scss" scoped>
+.catalog-card {
+    display: flex;
+    flex-direction: column;
+    width: 210px;
+    overflow: hidden;
+    cursor: pointer;
+}
+</style>
+
+<i18n lang="yaml">
+en-US:
+    groupingPrice: Price per group
+    minGrouping: Minimum packing
+es-ES:
+    groupingPrice: Precio por grupo
+    minGrouping: Cantidad mínima
+ca-ES:
+    groupingPrice: Preu per grup
+    minGrouping: Empaquetament mínim
+fr-FR:
+    groupingPrice: Prix par groupe
+    minGrouping: Emballage minimum
+pt-PT:
+    groupingPrice: Preço por grupo
+    minGrouping: Embalagem mínima
+</i18n>
diff --git a/src/pages/Ecomerce/CatalogView.vue b/src/pages/Ecomerce/CatalogView.vue
new file mode 100644
index 00000000..1faa5674
--- /dev/null
+++ b/src/pages/Ecomerce/CatalogView.vue
@@ -0,0 +1,1086 @@
+<template>
+    <Teleport v-if="isHeaderMounted" to="#actions">
+        <div class="q-gutter-x-sm row">
+            <VnSearchBar :search-term="search" @on-search-error="items = []" />
+            <QBtn
+                :icon="viewTypeButtonContent.icon"
+                :label="viewTypeButtonContent.label"
+                @click="onViewModeClick()"
+                rounded
+                no-caps
+            >
+                <QTooltip>
+                    {{ viewTypeButtonContent.label }}
+                </QTooltip>
+            </QBtn>
+            <QBtn
+                icon="shopping_cart_checkout"
+                :label="t('shoppingCart')"
+                @click="redirectToBasket()"
+                rounded
+                no-caps
+            >
+                <QTooltip>
+                    {{ t('shoppingCart') }}
+                </QTooltip>
+            </QBtn>
+        </div>
+    </Teleport>
+    <div style="padding-bottom: 5em">
+        <QDrawer v-model="rightDrawerOpen" side="right" :width="250">
+            <div class="q-pa-md">
+                <div class="basket-info q-gutter-y-sm">
+                    <span v-if="order?.nickname">{{ order.nickname }}</span>
+                    <span v-if="order?.sent">
+                        {{
+                            formatDateTitle(order.sent, {
+                                shortDay: true,
+                                shortMonth: true,
+                                includeOfString: true
+                            })
+                        }}
+                    </span>
+                    <QBtn rounded no-caps @click="redirectToCheckout()">
+                        {{ t('modify') }}
+                    </QBtn>
+                </div>
+                <div class="q-mt-md">
+                    <div class="q-mb-xs text-grey-7">
+                        {{ t('category') }}
+                        <QIcon
+                            v-if="category"
+                            style="font-size: 1.3em"
+                            name="cancel"
+                            class="cursor-pointer"
+                            :title="t('deleteFilter')"
+                            @click="removeCategory()"
+                        />
+                    </div>
+                    <div class="categories">
+                        <QBtn
+                            flat
+                            round
+                            class="category q-pa-sm"
+                            v-for="cat in categories"
+                            :class="{ active: category == cat.id }"
+                            :key="cat.id"
+                            @click="selectedCategory = cat.id"
+                        >
+                            <img :src="`statics/category/${cat.code}.svg`" />
+                            <QTooltip>{{ cat.name }}</QTooltip>
+                        </QBtn>
+                    </div>
+                </div>
+                <div class="q-mt-md" v-if="selectedCategory">
+                    <div class="q-mb-xs text-grey-7">
+                        {{ t('filterBy') }}
+                    </div>
+                    <VnSelect
+                        v-model="selectedType"
+                        option-value="id"
+                        option-label="name"
+                        :options="itemFamilies"
+                        :disable="!category"
+                        :label="t('family')"
+                    />
+                    <VnSelect
+                        v-model="selectedColor"
+                        option-value="id"
+                        option-label="name"
+                        :options="itemColors"
+                        :disable="!category"
+                        :label="t('color')"
+                    />
+                    <VnSelect
+                        v-model="selectedProducer"
+                        option-value="id"
+                        option-label="name"
+                        :options="itemProducers"
+                        :disable="!category"
+                        :label="t('producer')"
+                    />
+                    <VnSelect
+                        v-model="selectedOrigin"
+                        option-value="id"
+                        option-label="name"
+                        :options="itemOrigins"
+                        :disable="!category"
+                        :label="t('origin')"
+                    />
+                    <VnSelect
+                        v-model="selectedSubcategory"
+                        option-value="id"
+                        option-label="name"
+                        :options="itemSubcategories"
+                        :disable="!category"
+                        :label="t('category')"
+                    />
+                    <VnSelect
+                        v-if="isSomeFilterSelected"
+                        v-model="selectedOrderBy"
+                        :options="orderByOptions"
+                        option-value="value"
+                        option-label="label"
+                        :is-clearable="false"
+                        :label="t('orderBy')"
+                    />
+                </div>
+                <span
+                    v-else
+                    class="flex full-width justify-center q-pt-lg text-h6 text-grey-7"
+                >
+                    {{ t('chooseCategory') }}
+                </span>
+            </div>
+        </QDrawer>
+        <div
+            :class="
+                viewMode === 'grid'
+                    ? 'q-pa-md row justify-center q-gutter-md'
+                    : 'column items-center'
+            "
+        >
+            <QSpinner
+                v-if="loading"
+                color="primary"
+                size="3em"
+                :thickness="2"
+            />
+            <div
+                v-else-if="!items || !items.length || !isSomeFilterSelected"
+                class="text-subtitle1 text-grey-7 q-pa-md"
+            >
+                <QIcon name="refresh" size="sm" class="q-mr-sm"></QIcon>
+                <span>{{ t('pleaseSetFilter') }}</span>
+            </div>
+            <CatalogCard
+                v-else
+                v-for="_item in items"
+                :key="_item.id"
+                :item="_item"
+                :view-mode="viewMode"
+                @click="showItem(_item)"
+            />
+        </div>
+        <QDialog v-model="showItemDialog" @hide="resetAmounts()">
+            <QCard style="width: 25em" class="column">
+                <div class="q-pa-md relative-position">
+                    <div class="q-mb-md" style="display: flex">
+                        <VnImg
+                            storage="catalog"
+                            size="200x200"
+                            :id="'asd'"
+                            width="112px"
+                            height="112px"
+                            rounded="bottom"
+                            class="q-mr-md"
+                        />
+                        <div class="column">
+                            <div class="text-subtitle2">
+                                {{ selectedItem.item }}
+                            </div>
+                            <span
+                                class="text-subtitle2 text-grey-7 text-uppercase"
+                            >
+                                {{ selectedItem.subName }}
+                            </span>
+                            <span class="text-grey-7">
+                                #{{ selectedItem.id }}</span
+                            >
+                        </div>
+                    </div>
+                    <div class="text-caption">
+                        <div
+                            v-for="(tag, index) in selectedItem.tags"
+                            :key="index"
+                            class="row"
+                        >
+                            <span class="text-grey-7" style="width: 35%">
+                                {{ tag.name }}
+                            </span>
+                            <span>{{ tag.value }}</span>
+                        </div>
+                    </div>
+                    <div
+                        v-if="selectedItem.minQuantity"
+                        class="row justify-end q-px-md absolute-bottom-right q-pa-md"
+                    >
+                        <QIcon
+                            name="production_quantity_limits"
+                            size="xs"
+                            color="negative"
+                        >
+                            <QTooltip>
+                                {{ t('minQuantity') }}
+                            </QTooltip>
+                        </QIcon>
+                        <span class="text-negative text-caption">{{
+                            selectedItem.minQuantity
+                        }}</span>
+                    </div>
+                </div>
+                <div
+                    v-for="(lot, index) in selectedItem.lots"
+                    :key="index"
+                    class="column"
+                >
+                    <QSeparator />
+                    <div class="row items-center q-px-md q-py-xs">
+                        <span class="col">{{ currency(lot.price) }}</span>
+                        <span class="col"> x{{ lot.grouping }}</span>
+                        <QBtn
+                            icon="add"
+                            round
+                            flat
+                            dense
+                            @click="onAddLotClick(lot)"
+                        >
+                            <QTooltip>{{ t('add') }}</QTooltip>
+                        </QBtn>
+                    </div>
+                </div>
+                <div class="row items-center justify-between q-pa-md bg-black">
+                    <QBtn
+                        icon="delete"
+                        round
+                        dense
+                        flat
+                        color="white"
+                        @click="resetAmounts()"
+                    >
+                        <QTooltip>{{ t('delete') }}</QTooltip>
+                    </QBtn>
+                    <span class="text-center text-white">{{ amount }}</span>
+                    <QBtn
+                        icon="check"
+                        round
+                        dense
+                        flat
+                        color="white"
+                        @click="onConfirmClick()"
+                    >
+                        <QTooltip>{{ t('confirm') }}</QTooltip>
+                    </QBtn>
+                </div>
+            </QCard>
+        </QDialog>
+    </div>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { inject, onBeforeMount, ref, computed, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import VnImg from 'src/components/ui/VnImg.vue';
+import VnSelect from 'src/components/common/VnSelect.vue';
+import CatalogCard from 'src/pages/Ecomerce/CatalogCard.vue';
+import VnSearchBar from 'src/components/ui/VnSearchBar.vue';
+
+import { useAppStore } from 'stores/app';
+import { useUserStore } from 'stores/user';
+import { storeToRefs } from 'pinia';
+import { formatDateTitle, currency } from 'src/lib/filters.js';
+import useNotify from 'src/composables/useNotify.js';
+import debounce from 'src/utils/debouncer.js';
+
+const jApi = inject('jApi');
+const { t } = useI18n();
+const appStore = useAppStore();
+const userStore = useUserStore();
+const route = useRoute();
+const router = useRouter();
+const { isHeaderMounted, rightDrawerOpen, basketOrderId } =
+    storeToRefs(appStore);
+const { isGuest } = storeToRefs(userStore);
+const { notify } = useNotify();
+
+const order = ref(null);
+const items = ref([]);
+const selectedItem = ref(null);
+const showItemDialog = ref(false);
+const loading = ref(false);
+const viewMode = ref('grid');
+
+// Filters options
+const categories = ref([]);
+const itemColors = ref([]);
+const itemFamilies = ref([]);
+const itemProducers = ref([]);
+const itemOrigins = ref([]);
+const itemSubcategories = ref([]);
+const search = ref(null);
+// Filters values
+const category = ref(null);
+const type = ref(null);
+const color = ref(null);
+const producer = ref(null);
+const origin = ref(null);
+const subcategory = ref(null);
+// Order by options
+const orderBy = ref('i.relevancy DESC, longName');
+const orderByOptions = ref([
+    {
+        label: t('relevancy'),
+        value: 'i.relevancy DESC, longName'
+    },
+    {
+        label: t('name'),
+        value: 'longName ASC'
+    },
+    {
+        label: t('lowerSize'),
+        value: 'size ASC'
+    },
+    {
+        label: t('higherSize'),
+        value: 'size DESC'
+    },
+    {
+        label: t('lowerPrice'),
+        value: 'price ASC'
+    },
+    {
+        label: t('higherPrice'),
+        value: 'price DESC'
+    },
+    {
+        label: t('available'),
+        value: 'available'
+    },
+    { label: t('color'), value: 'ink ASC' },
+    {
+        label: t('producer'),
+        value: 'producer ASC'
+    },
+    {
+        label: t('origin'),
+        value: 'origin ASC'
+    },
+    {
+        label: t('category'),
+        value: 'category ASC'
+    }
+]);
+
+const selectedCategory = computed({
+    get() {
+        return category.value;
+    },
+    async set(value) {
+        category.value = value;
+        onCategoryChange();
+        if (!value) return;
+        debouncedGetFilters();
+        debouncedGetItems();
+        refreshTitle();
+    }
+});
+
+const selectedType = computed({
+    get() {
+        return type.value;
+    },
+    set(value) {
+        type.value = value;
+        router.push({
+            params: { category: category.value, type: type.value },
+            query: { ...route.query }
+        });
+        if (!selectedCategory.value) return;
+        debouncedGetFilters();
+        debouncedGetItems();
+        refreshTitle();
+    }
+});
+
+const selectedColor = computed({
+    get() {
+        return color.value;
+    },
+    set(value) {
+        color.value = value;
+        if (!selectedCategory.value) return;
+        debouncedGetFilters();
+        debouncedGetItems();
+    }
+});
+
+const selectedProducer = computed({
+    get() {
+        return producer.value;
+    },
+    set(value) {
+        producer.value = value;
+        if (!value || !selectedCategory.value) return;
+        debouncedGetFilters();
+        debouncedGetItems();
+    }
+});
+
+const selectedOrigin = computed({
+    get() {
+        return origin.value;
+    },
+    set(value) {
+        origin.value = value;
+        if (!value || !selectedCategory.value) return;
+        debouncedGetFilters();
+        debouncedGetItems();
+    }
+});
+
+const selectedSubcategory = computed({
+    get() {
+        return subcategory.value;
+    },
+    set(value) {
+        subcategory.value = value;
+        if (!value && !selectedCategory.value) return;
+        debouncedGetFilters();
+        debouncedGetItems();
+    }
+});
+
+const selectedOrderBy = computed({
+    get() {
+        return orderBy.value;
+    },
+    set(value) {
+        if (value) {
+            orderBy.value = value;
+        } else {
+            orderBy.value = 'i.relevancy DESC, longName';
+        }
+        debouncedGetItems();
+    }
+});
+
+const queryFilter = computed(() => {
+    const filters = [];
+
+    // Filtro principal
+    if (selectedCategory.value) {
+        filters.push(`(t.categoryFk = ${selectedCategory.value})`);
+    }
+
+    // Filtro búsqueda
+    if (search.value) {
+        filters.push(
+            `((i.longName LIKE '%${search.value}%') OR (i.subname LIKE '%${search.value}%'))`
+        );
+    }
+
+    const otherFilters = {
+        'i.typeFk': selectedType.value,
+        'i.inkFk': selectedColor?.value ? `'${selectedColor.value}'` : null,
+        'i.producerFk': selectedProducer.value,
+        'i.originFk': selectedOrigin.value
+    };
+
+    // Añadir solo aquellos filtros que tengan valor
+    Object.entries(otherFilters).forEach(([key, value]) => {
+        if (value) {
+            filters.push(`(${key} = ${value})`);
+        }
+    });
+
+    // Concatenar todos los filtros
+    return filters.join(' AND ');
+});
+
+const isSomeFilterSelected = computed(() => {
+    return (
+        search.value ||
+        selectedType.value ||
+        selectedColor.value ||
+        selectedProducer.value ||
+        selectedOrigin.value ||
+        selectedSubcategory.value
+    );
+});
+
+const viewTypeButtonContent = computed(() => {
+    return {
+        label: t(viewMode.value === 'list' ? 'gridView' : 'listView'),
+        icon: viewMode.value === 'list' ? 'grid_on' : 'view_list'
+    };
+});
+
+const checkGuest = () => {
+    if (isGuest.value) {
+        notify(t('youMustBeLoggedIn'), 'negative');
+        return true;
+    }
+
+    return false;
+};
+
+const getFilters = async () => {
+    const promises = [
+        getItemFamilies(),
+        getItemColors(),
+        getProducers(),
+        getOrigins(),
+        getSubcategories()
+    ];
+
+    await Promise.allSettled(promises);
+};
+
+const getItems = async () => {
+    try {
+        if (!basketOrderId.value || !isSomeFilterSelected.value) return;
+        loading.value = true;
+
+        const res = await jApi.execQuery(
+            `DROP TEMPORARY TABLE IF EXISTS tmp.item;
+            CREATE TEMPORARY TABLE tmp.item
+            (INDEX (itemFk))
+            ENGINE = MEMORY
+            SELECT i.id itemFk
+            FROM vn.item i
+            JOIN vn.itemType t ON t.id = i.typeFk
+            WHERE (${queryFilter.value});
+            CALL myOrder_calcCatalogFull(#orderId);
+            SELECT i.id, i.longName item, i.subName,
+            i.tag5, i.value5, i.tag6, i.value6,
+            i.tag7, i.value7, i.tag8, i.value8,
+            i.relevancy, i.size, i.category, b.minQuantity,
+            k.name ink, p.name producer, o.name origin,
+            b.available, b.price, b.grouping,
+            i.image, im.updated
+            FROM tmp.ticketCalculateItem b
+            JOIN vn.item i ON i.id = b.itemFk
+            LEFT JOIN vn.ink k ON k.id = i.inkFk
+            LEFT JOIN vn.producer p ON p.id = i.producerFk
+            LEFT JOIN vn.origin o ON o.id = i.originFk
+            LEFT JOIN image im ON im.collectionFk = 'catalog'
+            AND im.name = i.image
+            WHERE b.available > 0
+            ORDER BY ${selectedOrderBy.value}
+            LIMIT 5000;
+            DROP TEMPORARY TABLE tmp.item;
+            CALL vn.ticketCalculatePurge();`,
+            { orderId: basketOrderId.value }
+        );
+        items.value = res.results[3].data;
+        await onItemsFetched();
+        loading.value = false;
+    } catch (error) {
+        console.error('Error getting items:', error);
+    }
+};
+
+const debouncedGetItems = debounce(getItems, 400);
+const debouncedGetFilters = debounce(getFilters, 400);
+
+const getOrder = async () => {
+    try {
+        if (!basketOrderId.value) return;
+        const [data] = await jApi.query(
+            `SELECT o.id, o.sent, ad.nickname, o.addressFk, o.agencyModeFk
+				    FROM myOrder o
+				    LEFT JOIN myAddress ad ON ad.id = o.addressFk
+				    WHERE o.id = #orderId`,
+            { orderId: basketOrderId.value }
+        );
+        order.value = data;
+    } catch (error) {
+        console.error('Error getting order:', error);
+    }
+};
+
+const getCategories = async () => {
+    try {
+        categories.value = await jApi.query(
+            `SELECT c.id, l.name, c.color, c.code
+            FROM vn.itemCategory c
+            JOIN vn.itemCategoryL10n l ON l.id = c.id
+            WHERE c.display
+            ORDER BY display`
+        );
+    } catch (error) {
+        console.error('Error getting categories:', error);
+    }
+};
+
+const getItemFamilies = async () => {
+    try {
+        if (!selectedCategory.value || !basketOrderId.value) return;
+        const res = await jApi.execQuery(
+            `CALL myOrder_getAvailable(#orderId);
+            SELECT DISTINCT t.id, l.name
+            FROM vn.item i
+            JOIN vn.itemType t ON t.id = i.typeFk
+            JOIN tmp.itemAvailable a ON a.id = i.id
+            JOIN vn.itemTypeL10n l ON l.id = t.id
+            WHERE t.order >= 0
+            AND t.categoryFk = #category
+            ORDER BY t.order, l.name;
+            DROP TEMPORARY TABLE tmp.itemAvailable`,
+            {
+                category: selectedCategory.value,
+                orderId: basketOrderId.value
+            }
+        );
+        itemFamilies.value = res.results[1].data;
+    } catch (error) {
+        console.error('Error getting available items:', error);
+    }
+};
+
+const getItemColors = async () => {
+    try {
+        if (!selectedCategory.value || !basketOrderId.value) return;
+        const res = await jApi.execQuery(
+            `CALL myOrder_getAvailable(#orderId);
+					  SELECT DISTINCT l.id, l.name
+            FROM vn.item i
+            JOIN vn.itemType t ON t.id = i.typeFk
+            JOIN tmp.itemAvailable a ON a.id = i.id
+            JOIN vn.inkL10n l ON l.id = i.inkFk
+            WHERE (${queryFilter.value})
+            ORDER BY name;
+            DROP TEMPORARY TABLE tmp.itemAvailable;`,
+            {
+                orderId: basketOrderId.value
+            }
+        );
+        itemColors.value = res.results[1].data;
+    } catch (error) {
+        console.error('Error getting available items:', error);
+    }
+};
+
+const onItemsFetched = async () => {
+    items.value.forEach(item => {
+        const previewTags = [
+            { name: item.tag5, value: item.value5 },
+            { name: item.tag6, value: item.value6 },
+            { name: item.tag7, value: item.value7 }
+        ];
+        item.previewTags = previewTags;
+    });
+};
+
+const getProducers = async () => {
+    try {
+        const res = await jApi.execQuery(
+            `CALL myOrder_getAvailable(#orderId);
+            SELECT DISTINCT p.id, p.name
+            FROM vn.item i
+            JOIN vn.itemType t ON t.id = i.typeFk
+            JOIN tmp.itemAvailable a ON a.id = i.id
+            JOIN vn.producer p ON p.id = i.producerFk
+            WHERE (${queryFilter.value})
+            ORDER BY name;
+            DROP TEMPORARY TABLE tmp.itemAvailable;`,
+            { orderId: basketOrderId.value }
+        );
+        itemProducers.value = res.results[1].data;
+    } catch (error) {
+        console.error('Error getting productors:', error);
+    }
+};
+
+const getOrigins = async () => {
+    try {
+        const res = await jApi.execQuery(
+            `CALL myOrder_getAvailable(#orderId);
+					SELECT DISTINCT o.id, l.name, o.code
+          FROM vn.item i
+          JOIN vn.itemType t ON t.id = i.typeFk
+          JOIN tmp.itemAvailable a ON a.id = i.id
+          JOIN vn.origin o ON o.id = i.originFk
+          JOIN vn.originL10n l ON l.id = o.id
+          WHERE (${queryFilter.value})
+          ORDER BY name;
+					DROP TEMPORARY TABLE tmp.itemAvailable;`,
+            { orderId: basketOrderId.value }
+        );
+        itemOrigins.value = res.results[1].data;
+    } catch (error) {
+        console.error('Error getting productors:', error);
+    }
+};
+
+const getSubcategories = async () => {
+    try {
+        const res = await jApi.execQuery(
+            `CALL myOrder_getAvailable(#orderId);
+            SELECT DISTINCT i.category
+            FROM vn.item i
+            JOIN vn.itemType t ON t.id = i.typeFk
+            JOIN tmp.itemAvailable a ON a.id = i.id
+            WHERE (${queryFilter.value})
+            ORDER BY category;
+            DROP TEMPORARY TABLE tmp.itemAvailable;`,
+            { orderId: basketOrderId.value }
+        );
+        itemSubcategories.value = res.results[1].data;
+    } catch (error) {
+        console.error('Error getting subcategories:', error);
+    }
+};
+
+const showItem = async item => {
+    if (checkGuest()) return;
+
+    const itemLots = await calcItem(item.id);
+    const tags = await getItemTags(item.id);
+    item.lots = itemLots;
+    item.tags = tags;
+    showItemDialog.value = true;
+    selectedItem.value = item;
+};
+
+const removeCategory = () => {
+    selectedCategory.value = null;
+    onCategoryChange();
+};
+
+const onCategoryChange = () => {
+    selectedType.value = null;
+    selectedColor.value = null;
+    selectedProducer.value = null;
+    selectedOrigin.value = null;
+    selectedSubcategory.value = null;
+    search.value = '';
+    items.value = [];
+    router.push({ params: { category: category.value, type: null } });
+};
+
+const getItemTags = async itemFk => {
+    try {
+        const tags = await jApi.query(
+            `SELECT l.name, it.value
+            FROM vn.itemTag it
+            JOIN vn.tag t ON t.id = it.tagFk
+            JOIN vn.tagL10n l ON l.id = t.id
+            WHERE it.itemFk = #itemFk
+            AND priority >= 0
+            ORDER BY it.priority`,
+            {
+                itemFk
+            }
+        );
+        return tags;
+    } catch (error) {
+        console.error('Error getting available items:', error);
+    }
+};
+
+const calcItem = async itemId => {
+    try {
+        const res = await jApi.execQuery(
+            `CALL myOrder_calcCatalogFromItem(#orderId, #itemId);
+      SELECT l.warehouseFk, w.name warehouse, p.grouping,
+      p.price, p.priceKg, p.rate, l.available
+      FROM tmp.ticketLot l
+      JOIN tmp.ticketComponentPrice p ON p.warehouseFk = l.warehouseFk
+      JOIN vn.warehouse w ON w.id = p.warehouseFk
+      ORDER BY warehouseFk, grouping;
+      DROP TEMPORARY TABLE
+      tmp.ticketCalculateItem,
+      tmp.ticketComponentPrice,
+      tmp.ticketComponent,
+      tmp.ticketLot,
+      tmp.zoneGetShipped;`,
+            { orderId: basketOrderId.value, itemId }
+        );
+        return res.results[1].data;
+    } catch (error) {
+        console.error('Error getting items:', error);
+    }
+};
+
+const addedItemsAmountAcc = ref({});
+const amount = ref(0);
+
+const onAddLotClick = async lot => {
+    try {
+        const { grouping, warehouseFk, available } = lot;
+
+        let lotAmount = addedItemsAmountAcc.value[warehouseFk];
+
+        if (lotAmount === undefined) lotAmount = 0;
+
+        if (lotAmount < available) {
+            let newAmount = lotAmount + grouping;
+
+            if (newAmount > available) newAmount = available;
+
+            addedItemsAmountAcc.value[warehouseFk] = newAmount;
+            amount.value += newAmount - lotAmount;
+        } else {
+            notify(t('amountNotAvailable'), 'negative');
+        }
+    } catch (error) {
+        console.error('Error adding item to basket:', error);
+    }
+};
+
+const resetAmounts = () => {
+    addedItemsAmountAcc.value = {};
+    amount.value = 0;
+};
+
+const addItemToOrder = async params => {
+    try {
+        await jApi.execQuery(
+            `CALL myOrder_addItem(#orderId, #warehouse, #item, #amount);`,
+            params
+        );
+    } catch (error) {
+        console.error('Error adding item to basket:', error);
+        throw error;
+    }
+};
+
+const onConfirmClick = async params => {
+    try {
+        let amountSum = 0;
+        const addItemPromises = [];
+
+        for (const warehouse in addedItemsAmountAcc.value) {
+            const amount = addedItemsAmountAcc.value[warehouse];
+            amountSum += amount;
+
+            const params = {
+                orderId: basketOrderId.value,
+                warehouse,
+                item: selectedItem.value.id,
+                amount
+            };
+            addItemPromises.push(addItemToOrder(params));
+        }
+
+        if (amountSum > 0) {
+            await Promise.all(addItemPromises);
+            notify(
+                `${t('added')} ${amountSum} ${selectedItem.value.item}`,
+                'positive'
+            );
+        }
+        showItemDialog.value = false;
+    } catch (error) {
+        console.error('Error adding item to basket:', error);
+    }
+};
+
+const refreshTitle = () => {
+    const { meta } = route;
+    let title = t(meta.title);
+    let subtitle;
+
+    if (selectedCategory.value) {
+        const _category = categories.value.find(
+            i => i.id === selectedCategory.value
+        );
+        if (_category) {
+            title = _category.name;
+
+            if (selectedType.value) {
+                const _type = itemFamilies.value.find(
+                    i => i.id === selectedType.value
+                );
+                if (_type) {
+                    subtitle = title;
+                    title = _type.name;
+                }
+            }
+        }
+    }
+
+    appStore.$patch({ title, subtitle });
+};
+
+const onViewModeClick = () => {
+    viewMode.value = viewMode.value === 'list' ? 'grid' : 'list';
+};
+
+const redirectToCheckout = () => {
+    if (checkGuest()) return;
+
+    router.push({
+        name: 'checkout',
+        params: { id: basketOrderId.value },
+        query: { continue: 'catalog' }
+    });
+};
+
+const redirectToBasket = () => {
+    if (checkGuest()) return;
+    router.push({ name: 'basket' });
+};
+
+watch(
+    () => route.query.search,
+    val => {
+        if (val) {
+            search.value = val;
+            debouncedGetItems();
+        }
+    }
+);
+
+onBeforeMount(async () => {
+    if (!isGuest.value) {
+        await appStore.check('catalog');
+    } else {
+        const resultSet = await jApi.execQuery(
+            'CALL myOrder_configureForGuest(@orderId); SELECT @orderId;'
+        );
+        resultSet.fetchResult();
+        appStore.basketOrderId = resultSet.fetchValue();
+    }
+    await getOrder();
+    await getCategories();
+
+    if (route.params.category)
+        selectedCategory.value = Number(route.params.category);
+    if (route.params.type) selectedType.value = Number(route.params.type);
+});
+</script>
+
+<style lang="scss" scoped>
+.basket-info {
+    display: flex;
+    flex-direction: column;
+    background-color: #8cc63f;
+    color: white;
+    padding: 17px 28px;
+    border-radius: 7px;
+    text-align: center;
+}
+
+.categories {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    .category {
+        width: 54px;
+
+        &.active {
+            background: rgba(0, 0, 0, 0.08);
+        }
+        & > img {
+            height: 40px;
+            width: 40px;
+        }
+    }
+}
+</style>
+
+<i18n lang="yaml">
+en-US:
+    category: Category
+    deleteFilter: Delete filter
+    family: Family
+    color: Color
+    producer: Producer
+    origin: Origin
+    pleaseSetFilter: Choose a filter from the right menu
+    orderBy: Order by
+    relevancy: Relevancy
+    name: Name
+    lowerSize: Lower size
+    higherSize: Higher size
+    lowerPrice: Lower price
+    higherPrice: Higher price
+    add: Add
+    added: Added
+    listView: List view
+    gridView: Grid view
+    filterBy: Filter by
+    chooseCategory: Choose a category
+    youMustBeLoggedIn: You must be a registered user
+es-ES:
+    category: Categoría
+    deleteFilter: Quitar filtro
+    family: Familia
+    search: Buscar
+    color: Color
+    producer: Productor
+    origin: Origen
+    pleaseSetFilter: Elige un filtro en el menú de la derecha
+    orderBy: Ordernar por
+    relevancy: Relevancia
+    name: Nombre
+    lowerSize: Medida más pequeña
+    higherSize: Medida más grande
+    lowerPrice: Precio más bajo
+    higherPrice: Precio más alto
+    add: Añadir
+    added: Añadido
+    listView: Vista de lista
+    gridView: Vista de rejilla
+    filterBy: Filtrar por
+    chooseCategory: Elige una categoría
+    youMustBeLoggedIn: Debes estar registrado como usuario
+ca-ES:
+    category: Categoría
+    deleteFilter: Eliminar filtro
+    family: Família
+    color: Color
+    producer: Productor
+    origin: Origen
+    pleaseSetFilter: Tria un filtre en el menú de la dreta
+    orderBy: Ordenar per
+    relevancy: Relevància
+    name: Nom
+    lowerSize: Mida més petita
+    higherSize: Mida més gran
+    lowerPrice: Preu més baix
+    higherPrice: Preu més alt
+    add: Afegir
+    listView: Vista de llista
+    gridView: Vista de graella
+    filterBy: Filtrar per
+    chooseCategory: Tria una categoria
+    youMustBeLoggedIn: Has d'estar registrat com a usuari
+fr-FR:
+    category: Catégorie
+    deleteFilter: Supprimer le filtre
+    family: Famille
+    color: Couleur
+    producer: Producteur
+    origin: Origine
+    pleaseSetFilter: Choisissez un filtre dans le menu de droite
+    orderBy: Trier par
+    relevancy: Pertinence
+    name: Nom
+    lowerSize: Taille le plus bas
+    higherSize: Taille le plus élevé
+    lowerPrice: Prix le plus bas
+    higherPrice: Prix le plus élevé
+    add: Ajouter
+    listView: Vue en liste
+    gridView: Vue en grille
+    filterBy: Filtrer par
+    chooseCategory: Choisissez une catégorie
+    youMustBeLoggedIn: Vous devez être un utilisateur enregistré
+pt-PT:
+    category: Categoria
+    deleteFilter: Apagar filtro
+    family: Família
+    color: Cor
+    producer: Produtor
+    origin: Origem
+    pleaseSetFilter: Escolha um filtro no menu à direita
+    orderBy: Ordenar por
+    relevancy: Relevância
+    name: Nome
+    lowerSize: Tamanho menor
+    higherSize: Tamanho maior
+    lowerPrice: Preço mais baixo
+    higherPrice: Preço mais alto
+    add: Adicionar
+    listView: Vista de lista
+    gridView: Vista de grade
+    filterBy: Filtrar por
+    chooseCategory: Escolha uma categoria
+    youMustBeLoggedIn: Deves estar registrado como usuario
+</i18n>
diff --git a/src/pages/Ecomerce/OrdersView.vue b/src/pages/Ecomerce/OrdersView.vue
index f7a2c081..f801b090 100644
--- a/src/pages/Ecomerce/OrdersView.vue
+++ b/src/pages/Ecomerce/OrdersView.vue
@@ -174,7 +174,6 @@ en-US:
     startOrder: Start order
     noOrdersFound: No orders found
     makePayment: Make payment
-    shoppingCart: Shopping cart
     balance: 'Balance:'
     paymentInfo: >-
         The amount shown is your slope (negative) or favorable balance today, it
@@ -187,7 +186,6 @@ es-ES:
     startOrder: Empezar pedido
     noOrdersFound: No se encontrado pedidos
     makePayment: Realizar pago
-    shoppingCart: Cesta de la compra
     balance: 'Saldo:'
     paymentInfo: >-
         La cantidad mostrada es tu saldo pendiente (negativa) o favorable a día de
@@ -201,7 +199,6 @@ ca-ES:
     startOrder: Començar encàrrec
     noOrdersFound: No s'han trobat comandes
     makePayment: Realitzar pagament
-    shoppingCart: Cistella de la compra
     balance: 'Saldo:'
     paymentInfo: >-
         La quantitat mostrada és el teu saldo pendent (negatiu) o favorable a dia
@@ -215,7 +212,6 @@ fr-FR:
     startOrder: Acheter
     noOrdersFound: Aucune commande trouvée
     makePayment: Effectuer un paiement
-    shoppingCart: Panier
     balance: 'Balance:'
     paymentInfo: >-
         Le montant indiqué est votre pente (négative) ou balance favorable
@@ -229,7 +225,6 @@ pt-PT:
     startOrder: Iniciar encomenda
     noOrdersFound: Nenhum pedido encontrado
     makePayment: Realizar pagamento
-    shoppingCart: Cesta da compra
     balance: 'Saldo:'
     paymentInfo: >-
         A quantidade mostrada é seu saldo pendente (negativo) ou favorável a dia de
diff --git a/src/pages/Ecomerce/TicketDetails.vue b/src/pages/Ecomerce/TicketDetails.vue
index 408cf944..91f2a030 100644
--- a/src/pages/Ecomerce/TicketDetails.vue
+++ b/src/pages/Ecomerce/TicketDetails.vue
@@ -66,7 +66,7 @@ const deleteRow = id => {
 <template>
     <QCard class="vn-w-sm" style="padding: 32px">
         <QCardSection class="no-padding q-mb-md">
-            <div class="text-h6">#{{ ticket.id }}</div>
+            <div class="text-h6 text-bold">#{{ ticket.id }}</div>
         </QCardSection>
         <QCardSection class="no-padding q-mb-md q-gutter-y-xs">
             <div class="text-subtitle1 text-bold">
diff --git a/src/pages/Login/LoginView.vue b/src/pages/Login/LoginView.vue
index dc159e94..1dabc431 100644
--- a/src/pages/Login/LoginView.vue
+++ b/src/pages/Login/LoginView.vue
@@ -41,12 +41,23 @@ onMounted(() => {
         password.value.focus();
     }
 });
-async function onLogin() {
-    await userStore.login(email.value, password.value, remember.value);
+
+const onLogin = async () => {
     await userStore.fetchUser();
     await userStore.updateUserLang(selectedLocaleValue.value);
     await router.push('/');
-}
+};
+
+const login = async () => {
+    await userStore.login(email.value, password.value, remember.value);
+    await onLogin();
+};
+
+const loginAsGuest = async () => {
+    userStore.isGuest = true;
+    localStorage.setItem('hederaGuest', true);
+    await onLogin();
+};
 </script>
 
 <template>
@@ -56,7 +67,7 @@ async function onLogin() {
                 <img src="statics/logo.svg" alt="Verdnatura" class="block" />
             </router-link>
         </div>
-        <QForm @submit="onLogin" class="q-gutter-y-md">
+        <QForm @submit="login()" class="q-gutter-y-md">
             <div class="q-gutter-y-sm">
                 <QInput v-model="email" :label="$t('user')" autofocus />
                 <QInput
@@ -106,7 +117,7 @@ async function onLogin() {
             </div>
             <div class="justify-center">
                 <QBtn
-                    to="/"
+                    @click="loginAsGuest()"
                     :label="$t('logInAsGuest')"
                     class="full-width"
                     color="primary"
diff --git a/src/router/routes.js b/src/router/routes.js
index fa9dbd83..1a632381 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -75,7 +75,7 @@ const routes = [
                 meta: {
                     title: 'Catalog'
                 },
-                component: () => import('pages/Ecomerce/Catalog.vue')
+                component: () => import('pages/Ecomerce/CatalogView.vue')
             },
             {
                 name: 'basket',
diff --git a/src/stores/app.js b/src/stores/app.js
index 184fbb71..ece6d4bb 100644
--- a/src/stores/app.js
+++ b/src/stores/app.js
@@ -139,6 +139,11 @@ export const useAppStore = defineStore('hedera', {
         unloadOrder() {
             localStorage.removeItem(storageOrderName);
             this.basketOrderId = null;
+        },
+
+        onLogout() {
+            this.unloadOrder();
+            this.menuEssentialLinks = [];
         }
     },
     getters: {
diff --git a/src/stores/user.js b/src/stores/user.js
index fe662e86..4fc4c650 100644
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 import { api, jApi } from 'boot/axios';
 import { i18n } from 'src/boot/i18n';
 import useNotify from 'src/composables/useNotify.js';
+import { useAppStore } from 'src/stores/app.js';
 
 const { t } = i18n.global;
 const { notify } = useNotify();
@@ -35,6 +36,7 @@ export const useUserStore = defineStore('user', {
 
     actions: {
         async init() {
+            this.isGuest = localStorage.getItem('hederaGuest') || false;
             await this.fetchUser();
             await this.supplantInit();
             this.updateSiteLocale();
@@ -71,6 +73,8 @@ export const useUserStore = defineStore('user', {
                 sessionStorage.removeItem('vnToken');
             }
             this.$reset();
+            localStorage.removeItem('hederaGuest');
+            useAppStore().onLogout();
         },
 
         async fetchUser(userType = 'user') {
diff --git a/src/utils/debouncer.js b/src/utils/debouncer.js
new file mode 100644
index 00000000..2b915fb8
--- /dev/null
+++ b/src/utils/debouncer.js
@@ -0,0 +1,10 @@
+export default function debounce(callback, delay) {
+    let timeoutId;
+    return (...args) => {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => {
+            // eslint-disable-next-line
+            callback(...args);
+        }, delay);
+    };
+}