diff --git a/src/components/ui/NewVnSearchBar.vue b/src/components/ui/NewVnSearchBar.vue
index d5b57433..7806b297 100644
--- a/src/components/ui/NewVnSearchBar.vue
+++ b/src/components/ui/NewVnSearchBar.vue
@@ -53,6 +53,12 @@ const search = async () => {
             return;
         }
 
+        if (props.searchFn) {
+            const data = await props.searchFn(searchTerm.value);
+            emit('onSearch', data);
+            return;
+        }
+
         if (props.url) {
             const params = {
                 filter: props.filter,
diff --git a/src/composables/serviceUtils.js b/src/composables/serviceUtils.js
index ce124398..d1c27a3c 100644
--- a/src/composables/serviceUtils.js
+++ b/src/composables/serviceUtils.js
@@ -45,6 +45,8 @@ async function fetch({
         });
     }
 
+    params.filter = params.filter || {};
+
     if (params.filter?.where || exprFilter) {
         params.filter.where = { ...params.filter.where, ...exprFilter };
     }
diff --git a/src/pages/Account/AddressList.vue b/src/pages/Account/AddressList.vue
index 9939c926..50bb7de9 100644
--- a/src/pages/Account/AddressList.vue
+++ b/src/pages/Account/AddressList.vue
@@ -14,7 +14,6 @@ import { storeToRefs } from 'pinia';
 import { useUserStore } from 'stores/user';
 
 const router = useRouter();
-const jApi = inject('jApi');
 const api = inject('api');
 const { notify } = useNotify();
 const { t } = useI18n();
@@ -26,32 +25,30 @@ const fetchAddressesRef = ref(null);
 
 const addresses = ref([]);
 const defaultAddress = ref(null);
-const clientId = ref(null);
 
 const goToAddressDetails = (id = 0) =>
     router.push({ name: 'addressDetails', params: { id } });
 
 const getDefaultAddress = async () => {
     try {
-        const [address] = await jApi.query(
-            'SELECT id, defaultAddressFk FROM myClient c'
-        );
-        defaultAddress.value = address.defaultAddressFk;
-        clientId.value = address.id;
+        const filter = { fields: ['defaultAddressFk'] };
+        const { data } = await api.get(`Clients/${userStore?.userId}`, {
+            params: { filter: JSON.stringify(filter) }
+        });
+        defaultAddress.value = data.defaultAddressFk;
     } catch (error) {
         console.error('Error getting default address:', error);
     }
 };
 
-const changeDefaultAddress = async () => {
-    if (!clientId.value) return;
-    await jApi.execQuery(
-        `UPDATE myClient
-        SET defaultAddressFk = #defaultAddress
-        WHERE id = #id;`,
+const changeDefaultAddress = async address => {
+    if (!userStore?.userId) return;
+
+    await api.patch(
+        `/Clients/${userStore?.user?.id}/updateAddress/${address.id}`,
         {
-            defaultAddress: defaultAddress.value,
-            id: clientId.value
+            ...address,
+            defaultAddressFk: defaultAddress.value
         }
     );
     notify(t('defaultAddressModified'), 'positive');
@@ -129,7 +126,7 @@ onMounted(async () => {
                         v-model="defaultAddress"
                         :val="address.id"
                         class="q-mr-sm"
-                        @update:model-value="changeDefaultAddress"
+                        @update:model-value="changeDefaultAddress(address)"
                     />
                 </template>
                 <template #content>
diff --git a/src/pages/Admin/AccessLogView.vue b/src/pages/Admin/AccessLogView.vue
index 45a71af2..47a8f6ed 100644
--- a/src/pages/Admin/AccessLogView.vue
+++ b/src/pages/Admin/AccessLogView.vue
@@ -7,8 +7,7 @@ import VnList from 'src/components/ui/VnList.vue';
 
 import { formatDateTitle } from 'src/lib/filters.js';
 
-const jApi = inject('jApi');
-
+const api = inject('api');
 const route = useRoute();
 
 const accessLogs = ref([]);
@@ -17,15 +16,32 @@ const user = ref(null);
 const getUser = async () => {
     try {
         if (!route.params.id) return;
-        const [data] = await jApi.query(
-            `SELECT u.id, u.name user, u.nickname, u.email, c.phone, r.name role
-            FROM account.user u
-            JOIN account.role r ON r.id = u.role
-            LEFT JOIN vn.client c ON c.id = u.id
-            WHERE u.id = #user`,
-            { user: route.params.id }
-        );
-        user.value = data;
+
+        const filter = {
+            where: { id: route.params.id },
+            include: [
+                {
+                    relation: 'role',
+                    scope: {
+                        fields: ['name']
+                    }
+                },
+                {
+                    relation: 'worker',
+                    scope: {
+                        fields: ['phone']
+                    }
+                }
+            ]
+        };
+        const { data } = await api.get('VnUsers/preview', {
+            params: {
+                filter: JSON.stringify(filter)
+            }
+        });
+
+        if (!data || !data.length) return;
+        user.value = data[0];
     } catch (error) {
         console.error('Error getting user:', error);
     }
@@ -33,16 +49,12 @@ const getUser = async () => {
 
 const getAccessLogs = async () => {
     try {
-        accessLogs.value = await jApi.query(
-            `SELECT u.stamp, a.platform, a.browser, a.version, a.javascript, a.cookies
-            FROM visitUser u
-            JOIN visitAccess c ON c.id = u.accessFk
-            JOIN visitAgent a ON a.id = c.agentFk
-            WHERE u.userFk = #user
-            ORDER BY u.stamp DESC
-            LIMIT 8`,
-            { user: route.params.id }
-        );
+        const { data } = await api.get('visitUsers/getUserVisits', {
+            params: {
+                userId: route.params.id
+            }
+        });
+        accessLogs.value = data;
     } catch (error) {
         console.error('Error getting access logs:', error);
     }
@@ -68,9 +80,9 @@ onMounted(async () => {
                     {{ user?.nickname }}
                 </span>
                 <span>#{{ user?.id }} - {{ user.user }} </span>
-                <span>{{ user?.role }} </span>
+                <span>{{ user?.role?.name }} </span>
                 <span>{{ user?.email }} </span>
-                <span>{{ user?.phone }} </span>
+                <span>{{ user?.worker?.phone }} </span>
             </template>
         </CardList>
         <VnList :rows="accessLogs">
diff --git a/src/pages/Ecomerce/CatalogView.vue b/src/pages/Ecomerce/CatalogView.vue
index 92a63858..714bc47c 100644
--- a/src/pages/Ecomerce/CatalogView.vue
+++ b/src/pages/Ecomerce/CatalogView.vue
@@ -1,308 +1,3 @@
-<template>
-    <Teleport v-if="isHeaderMounted" to="#actions">
-        <div class="row">
-            <VnSearchBar
-                @on-search-error="
-                    () => {
-                        items = [];
-                        search = '';
-                    }
-                "
-            />
-            <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
-                data-cy="catalogGoToBasketButton"
-            >
-                <QTooltip>
-                    {{ t('shoppingCart') }}
-                </QTooltip>
-            </QBtn>
-            <QBtn
-                v-if="!isDesktop"
-                flat
-                dense
-                round
-                icon="menu"
-                aria-label="Menu"
-                @click="toggleRightDrawer()"
-            />
-        </div>
-    </Teleport>
-    <div>
-        <QDrawer v-model="rightDrawerOpen" side="right" :width="250" persistent>
-            <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()"
-                        data-cy="orderModifyButton"
-                        color="light-green-7"
-                        unelevated
-                        text-color="white"
-                    >
-                        {{ 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"
-                            data-cy="catalogCategoryButton"
-                        >
-                            <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')"
-                        data-cy="catalogFamilySelect"
-                    />
-                    <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')"
-                    />
-                    <div
-                        v-if="isSomeFilterSelected"
-                        class="q-mt-md text-grey-7"
-                    >
-                        {{ t('orderBy') }}
-                    </div>
-                    <VnSelect
-                        v-if="isSomeFilterSelected"
-                        v-model="selectedOrderBy"
-                        :options="orderByOptions"
-                        option-value="value"
-                        option-label="label"
-                        :is-clearable="false"
-                        :label="t('sort')"
-                    />
-                </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'
-                    ? ' 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"
-            >
-                <span>{{ t('pleaseSetFilter') }}</span>
-            </div>
-            <CatalogCard
-                v-else
-                v-for="_item in items"
-                :key="_item.id"
-                :item="_item"
-                :view-mode="viewMode"
-                @click="showItem(_item)"
-                data-cy="catalogCardElement"
-            />
-        </div>
-        <QDialog v-model="showItemDialog" @hide="resetAmounts()">
-            <QCard v-if="selectedItem" 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="selectedItem.image"
-                            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)"
-                            data-cy="addItemQuantityButton"
-                        >
-                            <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()"
-                        data-cy="catalogAddToBasketButton"
-                    >
-                        <QTooltip>{{ t('confirm') }}</QTooltip>
-                    </QBtn>
-                </div>
-            </QCard>
-            <QSpinner v-else color="primary" size="3em" :thickness="5" />
-        </QDialog>
-    </div>
-</template>
-
 <script setup>
 import { useI18n } from 'vue-i18n';
 import {
@@ -318,7 +13,7 @@ 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 VnSearchBar from 'src/components/ui/NewVnSearchBar.vue';
 
 import { useAppStore } from 'stores/app';
 import { useUserStore } from 'stores/user';
@@ -328,6 +23,7 @@ import useNotify from 'src/composables/useNotify.js';
 import debounce from 'src/utils/debouncer.js';
 
 const jApi = inject('jApi');
+const api = inject('api');
 const { t } = useI18n();
 const appStore = useAppStore();
 const userStore = useUserStore();
@@ -361,6 +57,7 @@ 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([
     {
@@ -571,64 +268,69 @@ const getFilters = async () => {
     await Promise.allSettled(promises);
 };
 
-const getItems = async () => {
+const getItems = async searchValue => {
     try {
-        if (!basketOrderId.value || !isSomeFilterSelected.value) return;
+        if (
+            !basketOrderId.value ||
+            !isSomeFilterSelected.value ||
+            loading.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;
+        const params = {
+            orderFk: basketOrderId.value,
+            orderBy: selectedOrderBy.value,
+            search: searchValue,
+            categoryFk: selectedCategory.value,
+            typeFk: selectedType.value,
+            inkFk: selectedColor.value,
+            producerFk: selectedProducer.value,
+            originFk: selectedOrigin.value
+        };
+
+        const { data } = await api.get('Items/catalog', {
+            params
+        });
+
+        items.value = data;
         await onItemsFetched();
         loading.value = false;
+        return data;
     } catch (error) {
         console.error('Error getting items:', error);
     }
 };
 
-const debouncedGetItems = debounce(getItems, 400);
+const debouncedGetItems = searchValue => debounce(getItems(searchValue), 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;
+
+        const filter = {
+            include: [
+                {
+                    relation: 'address',
+                    scope: {
+                        fields: ['nickname', 'city', 'street']
+                    }
+                }
+            ],
+            id: basketOrderId.value,
+            fields: ['id', 'sent', 'addressFk', 'agencyModeFk', 'nickname']
+        };
+
+        const { data } = await api.get('Orders/filter', {
+            params: {
+                filter: JSON.stringify(filter),
+                orderFk: basketOrderId.value
+            }
+        });
+
+        order.value = data[0];
     } catch (error) {
         console.error('Error getting order:', error);
     }
@@ -636,13 +338,25 @@ const getOrder = async () => {
 
 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`
-        );
+        const { data } = await api.get('itemCategories', {
+            params: {
+                filter: JSON.stringify({
+                    order: 'display ASC',
+                    include: {
+                        relation: 'itemTypes',
+                        scope: {
+                            fields: ['code', 'name']
+                        }
+                    }
+                })
+            }
+        });
+        categories.value = data.map(category => {
+            return {
+                ...category,
+                icon: category.icon.split('-')[1]
+            };
+        });
     } catch (error) {
         console.error('Error getting categories:', error);
     }
@@ -651,23 +365,15 @@ const getCategories = async () => {
 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 ASC;
-            DROP TEMPORARY TABLE tmp.itemAvailable`,
+
+        const { data } = await api.get(
+            `Orders/${basketOrderId.value}/getItemTypeAvailable`,
             {
-                category: selectedCategory.value,
-                orderId: basketOrderId.value
+                params: { itemCategoryId: selectedCategory.value }
             }
         );
-        itemFamilies.value = res.results[1].data;
+
+        itemFamilies.value = data;
     } catch (error) {
         console.error('Error getting available items:', error);
     }
@@ -676,23 +382,17 @@ const getItemFamilies = async () => {
 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 ASC;
-            DROP TEMPORARY TABLE tmp.itemAvailable;`,
-            {
-                orderId: basketOrderId.value
+
+        const { data } = await api.get('Orders/itemsColorsAvailable', {
+            params: {
+                orderFk: basketOrderId.value,
+                whereFilter: queryFilter.value
             }
-        );
-        itemColors.value = res.results[1].data;
+        });
+
+        itemColors.value = data;
     } catch (error) {
-        console.error('Error getting available items:', error);
+        console.error('Error getting items colors:', error);
     }
 };
 
@@ -709,59 +409,42 @@ const onItemsFetched = async () => {
 
 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 ASC;
-            DROP TEMPORARY TABLE tmp.itemAvailable;`,
-            { orderId: basketOrderId.value }
-        );
-        itemProducers.value = res.results[1].data;
+        const { data } = await api.get('Orders/itemsProducersAvailable', {
+            params: {
+                orderFk: basketOrderId.value,
+                whereFilter: queryFilter.value
+            }
+        });
+        itemProducers.value = data;
     } catch (error) {
-        console.error('Error getting productors:', error);
+        console.error('Error getting producers:', 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 ASC;
-					DROP TEMPORARY TABLE tmp.itemAvailable;`,
-            { orderId: basketOrderId.value }
-        );
-        itemOrigins.value = res.results[1].data;
+        const { data } = await api.get('Orders/itemsOriginsAvailable', {
+            params: {
+                orderFk: basketOrderId.value,
+                whereFilter: queryFilter.value
+            }
+        });
+        itemOrigins.value = data;
     } catch (error) {
-        console.error('Error getting productors:', error);
+        console.error('Error getting origins:', 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 ASC;
-            DROP TEMPORARY TABLE tmp.itemAvailable;`,
-            { orderId: basketOrderId.value }
-        );
-        const filtered = res.results[1].data.filter(item => item.category);
+        const { data } = await api.get('Orders/itemsSubcategoriesAvailable', {
+            params: {
+                orderFk: basketOrderId.value,
+                whereFilter: queryFilter.value
+            }
+        });
+
+        const filtered = data.filter(item => item.category);
         itemSubcategories.value = filtered.map(i => i.category);
     } catch (error) {
         console.error('Error getting subcategories:', error);
@@ -799,19 +482,30 @@ const onCategoryChange = () => {
 
 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
+        const { data } = await api.get('ItemTags', {
+            params: {
+                filter: JSON.stringify({
+                    where: {
+                        itemFk
+                    },
+                    include: [
+                        {
+                            relation: 'tag',
+                            scope: {
+                                fields: ['name']
+                            }
+                        }
+                    ]
+                })
             }
-        );
-        return tags;
+        });
+
+        return data.map(tag => {
+            return {
+                name: tag?.tag?.name,
+                value: tag.value
+            };
+        });
     } catch (error) {
         console.error('Error getting available items:', error);
     }
@@ -819,23 +513,13 @@ const getItemTags = async itemFk => {
 
 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;
+        const { data } = await api.get('Orders/calcCatalogFromItem', {
+            params: {
+                orderFk: basketOrderId.value,
+                itemId
+            }
+        });
+        return data;
     } catch (error) {
         console.error('Error getting items:', error);
     }
@@ -875,10 +559,15 @@ const resetAmounts = () => {
 
 const addItemToOrder = async params => {
     try {
-        await jApi.execQuery(
-            `CALL myOrder_addItem(#orderId, #warehouse, #item, #amount);`,
-            params
-        );
+        await api.post('applications/myOrder_addItem/execute-proc', {
+            schema: 'hedera',
+            params: [
+                params.orderFk,
+                params.warehouse,
+                params.item,
+                params.amount
+            ]
+        });
     } catch (error) {
         console.error('Error adding item to basket:', error);
         throw error;
@@ -895,7 +584,7 @@ const onConfirmClick = async params => {
             amountSum += amount;
 
             const params = {
-                orderId: basketOrderId.value,
+                orderFk: basketOrderId.value,
                 warehouse,
                 item: selectedItem.value.id,
                 amount
@@ -906,7 +595,7 @@ const onConfirmClick = async params => {
         if (amountSum > 0) {
             await Promise.all(addItemPromises);
             notify(
-                `${t('added')} ${amountSum} ${selectedItem.value.item}`,
+                `${t('added')} ${amountSum} ${selectedItem.value.name}`,
                 'positive'
             );
         }
@@ -999,6 +688,312 @@ onBeforeMount(async () => {
 onBeforeUnmount(() => appStore.resetCustomTitle());
 </script>
 
+<template>
+    <Teleport v-if="isHeaderMounted" to="#actions">
+        <div class="row">
+            <VnSearchBar
+                :search-fn="debouncedGetItems"
+                @on-search-error="
+                    () => {
+                        items = [];
+                        search = '';
+                    }
+                "
+            />
+            <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
+                data-cy="catalogGoToBasketButton"
+            >
+                <QTooltip>
+                    {{ t('shoppingCart') }}
+                </QTooltip>
+            </QBtn>
+            <QBtn
+                v-if="!isDesktop"
+                flat
+                dense
+                round
+                icon="menu"
+                aria-label="Menu"
+                @click="toggleRightDrawer()"
+            />
+        </div>
+    </Teleport>
+    <div>
+        <QDrawer v-model="rightDrawerOpen" side="right" :width="250" persistent>
+            <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()"
+                        data-cy="orderModifyButton"
+                        color="light-green-7"
+                        unelevated
+                        text-color="white"
+                    >
+                        {{ 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"
+                            data-cy="catalogCategoryButton"
+                        >
+                            <img :src="`statics/category/${cat.icon}.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')"
+                        data-cy="catalogFamilySelect"
+                    />
+                    <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')"
+                    />
+                    <div
+                        v-if="isSomeFilterSelected"
+                        class="q-mt-md text-grey-7"
+                    >
+                        {{ t('orderBy') }}
+                    </div>
+                    <VnSelect
+                        v-if="isSomeFilterSelected"
+                        v-model="selectedOrderBy"
+                        :options="orderByOptions"
+                        option-value="value"
+                        option-label="label"
+                        :is-clearable="false"
+                        :label="t('sort')"
+                    />
+                </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'
+                    ? ' 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"
+            >
+                <span>{{ t('pleaseSetFilter') }}</span>
+            </div>
+            <CatalogCard
+                v-else
+                v-for="_item in items"
+                :key="_item.id"
+                :item="_item"
+                :view-mode="viewMode"
+                @click="showItem(_item)"
+                data-cy="catalogCardElement"
+            />
+        </div>
+        <QDialog v-model="showItemDialog" @hide="resetAmounts()">
+            <QCard v-if="selectedItem" 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="selectedItem.image"
+                            width="112px"
+                            height="112px"
+                            rounded="bottom"
+                            class="q-mr-md"
+                        />
+                        <div class="column">
+                            <div class="text-subtitle2">
+                                {{ selectedItem.name }}
+                            </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)"
+                            data-cy="addItemQuantityButton"
+                        >
+                            <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()"
+                        data-cy="catalogAddToBasketButton"
+                    >
+                        <QTooltip>{{ t('confirm') }}</QTooltip>
+                    </QBtn>
+                </div>
+            </QCard>
+            <QSpinner v-else color="primary" size="3em" :thickness="5" />
+        </QDialog>
+    </div>
+</template>
+
 <style lang="scss" scoped>
 .basket-info {
     display: flex;
diff --git a/src/pages/Ecomerce/OrdersView.vue b/src/pages/Ecomerce/OrdersView.vue
index a5d6d9d9..1277f35f 100644
--- a/src/pages/Ecomerce/OrdersView.vue
+++ b/src/pages/Ecomerce/OrdersView.vue
@@ -13,6 +13,7 @@ import useNotify from 'src/composables/useNotify.js';
 import { currency, formatDateTitle } from 'src/lib/filters.js';
 import { tpvStore } from 'stores/tpv';
 import { useAppStore } from 'stores/app';
+import { useUserStore } from 'stores/user';
 import { storeToRefs } from 'pinia';
 
 const { t } = useI18n();
@@ -26,6 +27,7 @@ const showAmountToPayDialog = ref(null);
 const amountToPay = ref(null);
 const orders = ref(null);
 const debt = ref(0);
+const userStore = useUserStore();
 const tpv = tpvStore();
 
 onMounted(async () => {
@@ -57,9 +59,14 @@ const onConfirmPay = async () => {
         return;
     }
 
+    if (!userStore.companyId) {
+        notify(t('companyConfigError'), 'negative');
+        return;
+    }
+
     const amount = amountToPay.value.toString().replace('.', ',');
     amountToPay.value = parseFloat(amount);
-    await tpv.pay(amountToPay.value);
+    await tpv.pay(amountToPay.value, userStore.companyId);
 };
 </script>
 
diff --git a/src/stores/tpv.js b/src/stores/tpv.js
index 53f146c2..e9312a52 100644
--- a/src/stores/tpv.js
+++ b/src/stores/tpv.js
@@ -1,22 +1,22 @@
 import { defineStore } from 'pinia';
-import { jApi } from 'boot/axios';
+import { api } from 'boot/axios';
 
 export const tpvStore = defineStore('tpv', {
     actions: {
         async check(route) {
-            const order = route.query.tpvOrder;
+            const orderId = route.query.tpvOrder;
             const status = route.query.tpvStatus;
-            if (!(order && status)) return null;
+            if (!(orderId && status)) return null;
 
-            await jApi.execQuery('CALL myTpvTransaction_end(#order, #status)', {
-                order,
+            await api.post('tpvTransactions/end', {
+                orderId,
                 status
             });
 
             if (status === 'ko') {
                 const retry = confirm('retryPayQuestion');
                 if (retry) {
-                    this.retryPay(order);
+                    this.retryPay(orderId);
                 }
             }
 
@@ -27,27 +27,33 @@ export const tpvStore = defineStore('tpv', {
             await this.realPay(amount * 100, company);
         },
 
-        async retryPay(order) {
-            const payment = await jApi.getObject(
-                `SELECT t.amount, m.companyFk
-          FROM myTpvTransaction t
-            JOIN tpvMerchant m ON m.id = t.merchantFk
-          WHERE t.id = #order`,
-                { order }
+        async retryPay(orderId) {
+            const { data: transactions } = await api.get(
+                'clients/transactions',
+                {
+                    params: {
+                        orderFk: orderId
+                    }
+                }
             );
-            await this.realPay(payment.amount, payment.companyFk);
+            if (transactions && transactions.length > 0) {
+                const [transaction] = transactions;
+                await this.realPay(
+                    transaction.amount * 100,
+                    transaction.merchantFk
+                );
+            }
         },
 
-        async realPay(amount, company) {
+        async realPay(amount, companyId) {
             if (!isNumeric(amount) || amount <= 0) {
                 throw new Error('payAmountError');
             }
-
-            const json = await jApi.send('tpv/transaction', {
-                amount: parseInt(amount),
+            const { data: json } = await api.post('tpvTransactions/start', {
+                amount,
+                companyId,
                 urlOk: this.makeUrl('ok'),
-                urlKo: this.makeUrl('ko'),
-                company
+                urlKo: this.makeUrl('ko')
             });
 
             const postValues = json.postValues;
diff --git a/src/stores/user.js b/src/stores/user.js
index 8b75f124..3d38fa34 100644
--- a/src/stores/user.js
+++ b/src/stores/user.js
@@ -8,6 +8,7 @@ const { notify } = useNotify();
 const TOKEN_MULTIMEDIA = 'tokenMultimedia';
 const TOKEN = 'token';
 
+
 export const useUserStore = defineStore('user', () => {
     const token = ref('');
     const tokenMultimedia = ref('');
@@ -15,7 +16,7 @@ export const useUserStore = defineStore('user', () => {
     const user = ref(null); // Usuario en uso => supplantedUser || mainUser
     const supplantedUser = ref(null); // Usuario suplantado
     const mainUser = ref(null); // Usuario principal logueado
-
+    const companyId = ref(null);
     const keepLogin = ref(false);
     const intervalId = ref(null);
     const isCheckingToken = ref(false);
@@ -40,6 +41,7 @@ export const useUserStore = defineStore('user', () => {
         } else {
             await fetchUser();
             await fetchTokenConfig();
+            await fetchCompanyId();
             await supplantInit();
             startInterval();
         }
@@ -154,6 +156,7 @@ export const useUserStore = defineStore('user', () => {
             await fetchTokenConfig();
             startInterval();
             await onLogin();
+            await fetchCompanyId();
         } catch (error) {
             throw new Error('Error logging in');
         }
@@ -283,6 +286,12 @@ export const useUserStore = defineStore('user', () => {
         user.value.lang = lang;
     };
 
+    const fetchCompanyId = async () => {
+        const { data } = await api.get('UserConfigs/getUserConfig');
+        companyId.value = data.companyFk;
+    };
+
+
     const $reset = () => {
         token.value = '';
         tokenMultimedia.value = '';
@@ -317,6 +326,7 @@ export const useUserStore = defineStore('user', () => {
         tokenConfig,
         isLoggedIn,
         storage,
+        companyId,
         getToken,
         getTokenMultimedia,
         setToken,