diff --git a/src/pages/Wagon/Type/WagonTypeCreate.vue b/src/pages/Wagon/Type/WagonTypeCreate.vue
index 03ee8d2ec8..adfd410494 100644
--- a/src/pages/Wagon/Type/WagonTypeCreate.vue
+++ b/src/pages/Wagon/Type/WagonTypeCreate.vue
@@ -238,20 +238,19 @@ function exceedMaxHeight(pos) {
 </script>
 
 <template>
-    <q-page class="q-pa-sm q-mx-xl">
-        <q-card class="q-pa-sm">
-            <q-form @submit="onSubmit()" @reset="onReset()" class="q-pa-md">
-                <!-- <div v-for="tray in wagon" :key="tray.id">{{ tray }}</div> -->
-                <q-input
+    <QPage class="q-pa-sm q-mx-xl">
+        <QCard class="q-pa-sm">
+            <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-md">
+                <QInput
                     filled
                     v-model="name"
                     :label="t('wagon.type.name')"
                     :rules="[(val) => !!val || t('wagon.warnings.nameNotEmpty')]"
                 />
-                <q-checkbox class="q-mb-sm" v-model="divisible" label="Divisible" />
+                <QCheckbox class="q-mb-sm" v-model="divisible" label="Divisible" />
                 <div class="wagon-tray q-mx-xl" v-for="tray in wagon" :key="tray.id">
                     <div class="position">
-                        <q-input
+                        <QInput
                             autofocus
                             filled
                             type="number"
@@ -259,20 +258,20 @@ function exceedMaxHeight(pos) {
                             v-model="tray.position"
                             @blur="onPositionBlur(tray)"
                         >
-                            <q-tooltip :delay="2000">
+                            <QTooltip :delay="2000">
                                 {{
                                     t('wagon.warnings.minHeightBetweenTrays') +
                                     wagonConfig.minHeightBetweenTrays +
                                     ' cm'
                                 }}
-                                <q-space />
+                                <QSpace />
                                 {{
                                     t('wagon.warnings.maxWagonHeight') +
                                     wagonConfig.maxWagonHeight +
                                     ' cm'
                                 }}
-                            </q-tooltip>
-                        </q-input>
+                            </QTooltip>
+                        </QInput>
                     </div>
                     <div class="shelving">
                         <div class="shelving-half">
@@ -297,7 +296,7 @@ function exceedMaxHeight(pos) {
                         </div>
                     </div>
                     <div class="action-button">
-                        <q-btn
+                        <QBtn
                             flat
                             round
                             color="primary"
@@ -307,16 +306,12 @@ function exceedMaxHeight(pos) {
                     </div>
                 </div>
                 <div class="q-mb-sm wheels">
-                    <q-icon color="grey-6" name="trip_origin" size="3rem" />
-                    <q-icon color="grey-6" name="trip_origin" size="3rem" />
+                    <QIcon color="grey-6" name="trip_origin" size="3rem" />
+                    <QIcon color="grey-6" name="trip_origin" size="3rem" />
                 </div>
                 <div>
-                    <q-btn
-                        :label="t('wagon.type.submit')"
-                        type="submit"
-                        color="primary"
-                    />
-                    <q-btn
+                    <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
+                    <QBtn
                         :label="t('wagon.type.reset')"
                         type="reset"
                         color="primary"
@@ -324,17 +319,17 @@ function exceedMaxHeight(pos) {
                         class="q-ml-sm"
                     />
                 </div>
-                <q-dialog
+                <QDialog
                     v-model="colorPickerActive"
                     position="right"
                     :no-backdrop-dismiss="false"
                 >
-                    <q-card>
-                        <q-card-section>
+                    <QCard>
+                        <QCardSection>
                             <div class="text-h6">{{ t('wagon.type.trayColor') }}</div>
-                        </q-card-section>
-                        <q-card-section class="row items-center no-wrap">
-                            <q-color
+                        </QCardSection>
+                        <QCardSection class="row items-center no-wrap">
+                            <QColor
                                 flat
                                 v-model="wagon[currentTrayColorPicked].color.rgb"
                                 no-header
@@ -347,13 +342,13 @@ function exceedMaxHeight(pos) {
                                 "
                                 @change="updateColor($event)"
                             />
-                            <q-btn flat round icon="close" v-close-popup />
-                        </q-card-section>
-                    </q-card>
-                </q-dialog>
-            </q-form>
-        </q-card>
-    </q-page>
+                            <QBtn flat round icon="close" v-close-popup />
+                        </QCardSection>
+                    </QCard>
+                </QDialog>
+            </QForm>
+        </QCard>
+    </QPage>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Wagon/Type/WagonTypeList.vue b/src/pages/Wagon/Type/WagonTypeList.vue
index 86dd2e7f7f..f364da0089 100644
--- a/src/pages/Wagon/Type/WagonTypeList.vue
+++ b/src/pages/Wagon/Type/WagonTypeList.vue
@@ -1,9 +1,8 @@
 <script setup>
 import axios from 'axios';
 import { useQuasar } from 'quasar';
-import Paginate from 'src/components/PaginateData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import { useArrayData } from 'src/composables/useArrayData';
-import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 
@@ -40,59 +39,59 @@ async function remove(row) {
 </script>
 
 <template>
-    <q-page class="column items-center q-pa-md">
+    <QPage class="column items-center q-pa-md">
         <div class="card-list">
-            <paginate
+            <VnPaginate
                 data-key="WagonTypeList"
                 url="/WagonTypes"
                 order="id DESC"
                 auto-load
             >
                 <template #body="{ rows }">
-                    <q-card class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <q-item
+                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
+                        <QItem
                             class="q-pa-none items-start cursor-pointer q-hoverable"
                             v-ripple
                             clickable
                         >
-                            <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
                                 <div class="text-h6">{{ row.name }}</div>
-                                <q-item-label caption>#{{ row.id }}</q-item-label>
-                            </q-item-section>
-                            <q-separator vertical />
-                            <q-card-actions vertical class="justify-between">
-                                <q-btn
+                                <QItem-label caption>#{{ row.id }}</QItem-label>
+                            </QItemSection>
+                            <QSeparator vertical />
+                            <QCardActions vertical class="justify-between">
+                                <QBtn
                                     flat
                                     round
                                     color="primary"
                                     icon="arrow_circle_right"
                                     @click="navigate(row.id)"
                                 >
-                                    <q-tooltip>
+                                    <QTooltip>
                                         {{ t('components.smartCard.openCard') }}
-                                    </q-tooltip>
-                                </q-btn>
-                                <q-btn
+                                    </QTooltip>
+                                </QBtn>
+                                <QBtn
                                     flat
                                     round
                                     color="primary"
                                     icon="delete"
                                     @click="remove(row)"
                                 >
-                                    <q-tooltip>
+                                    <QTooltip>
                                         {{ t('wagon.list.remove') }}
-                                    </q-tooltip>
-                                </q-btn>
-                            </q-card-actions>
-                        </q-item>
-                    </q-card>
+                                    </QTooltip>
+                                </QBtn>
+                            </QCardActions>
+                        </QItem>
+                    </QCard>
                 </template>
-            </paginate>
+            </VnPaginate>
         </div>
-        <q-page-sticky position="bottom-right" :offset="[18, 18]">
-            <q-btn @click="create" fab icon="add" color="primary" />
-        </q-page-sticky>
-    </q-page>
+        <QPageSticky position="bottom-right" :offset="[18, 18]">
+            <QBtn @click="create" fab icon="add" color="primary" />
+        </QPageSticky>
+    </QPage>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Wagon/WagonCreate.vue b/src/pages/Wagon/WagonCreate.vue
index 12ba0b372e..3f78249757 100644
--- a/src/pages/Wagon/WagonCreate.vue
+++ b/src/pages/Wagon/WagonCreate.vue
@@ -1,5 +1,6 @@
 <script setup>
 import axios from 'axios';
+import { QIcon, QInput, QItem, QItemSection, QSelect } from 'quasar';
 import { computed, onMounted, onUpdated, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
@@ -84,12 +85,12 @@ function filterType(val, update) {
 </script>
 
 <template>
-    <q-page class="q-pa-sm q-mx-xl">
-        <q-card class="q-pa-sm">
-            <q-form @submit="onSubmit()" @reset="onReset()" class="q-pa-md">
+    <QPage class="q-pa-sm q-mx-xl">
+        <QCard class="q-pa-sm">
+            <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-md">
                 <div class="row q-col-gutter-md q-mb-md">
                     <div class="col">
-                        <q-input
+                        <QInput
                             filled
                             v-model="wagon.label"
                             :label="t('wagon.create.label')"
@@ -99,7 +100,7 @@ function filterType(val, update) {
                         />
                     </div>
                     <div class="col">
-                        <q-input
+                        <QInput
                             filled
                             v-model="wagon.plate"
                             :label="t('wagon.create.plate')"
@@ -109,7 +110,7 @@ function filterType(val, update) {
                 </div>
                 <div class="row q-col-gutter-md q-mb-md">
                     <div class="col">
-                        <q-input
+                        <QInput
                             filled
                             v-model="wagon.volume"
                             :label="t('wagon.create.volume')"
@@ -121,7 +122,7 @@ function filterType(val, update) {
                         />
                     </div>
                     <div class="col">
-                        <q-select
+                        <QSelect
                             filled
                             v-model="wagon.typeFk"
                             use-input
@@ -138,29 +139,25 @@ function filterType(val, update) {
                             @filter="filterType"
                         >
                             <template v-if="wagon.typeFk" #append>
-                                <q-icon
+                                <QIcon
                                     name="cancel"
                                     @click.stop.prevent="wagon.typeFk = null"
                                     class="cursor-pointer"
                                 />
                             </template>
                             <template #no-option>
-                                <q-item>
-                                    <q-item-section class="text-grey">
+                                <QItem>
+                                    <QItemSection class="text-grey">
                                         {{ t('wagon.warnings.noData') }}
-                                    </q-item-section>
-                                </q-item>
+                                    </QItemSection>
+                                </QItem>
                             </template>
-                        </q-select>
+                        </QSelect>
                     </div>
                 </div>
                 <div>
-                    <q-btn
-                        :label="t('wagon.type.submit')"
-                        type="submit"
-                        color="primary"
-                    />
-                    <q-btn
+                    <QBtn :label="t('wagon.type.submit')" type="submit" color="primary" />
+                    <QBtn
                         :label="t('wagon.type.reset')"
                         type="reset"
                         color="primary"
@@ -168,9 +165,9 @@ function filterType(val, update) {
                         class="q-ml-sm"
                     />
                 </div>
-            </q-form>
-        </q-card>
-    </q-page>
+            </QForm>
+        </QCard>
+    </QPage>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Wagon/WagonList.vue b/src/pages/Wagon/WagonList.vue
index 5b27235090..5e512aa923 100644
--- a/src/pages/Wagon/WagonList.vue
+++ b/src/pages/Wagon/WagonList.vue
@@ -1,7 +1,7 @@
 <script setup>
 import axios from 'axios';
 import { useQuasar } from 'quasar';
-import Paginate from 'src/components/PaginateData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
@@ -45,9 +45,9 @@ async function remove(row) {
 </script>
 
 <template>
-    <q-page class="column items-center q-pa-md">
+    <QPage class="column items-center q-pa-md">
         <div class="card-list">
-            <paginate
+            <VnPaginate
                 data-key="WagonList"
                 url="/Wagons"
                 order="id DESC"
@@ -55,78 +55,76 @@ async function remove(row) {
                 auto-load
             >
                 <template #body="{ rows }">
-                    <q-card class="card q-mb-md" v-for="row of rows" :key="row.id">
-                        <q-item
+                    <QCard class="card q-mb-md" v-for="row of rows" :key="row.id">
+                        <QItem
                             class="q-pa-none items-start cursor-pointer q-hoverable"
                             v-ripple
                             clickable
                         >
-                            <q-item-section class="q-pa-md" @click="navigate(row.id)">
+                            <QItemSection class="q-pa-md" @click="navigate(row.id)">
                                 <div class="text-h6">{{ row.label }}</div>
-                                <q-item-label caption>#{{ row.id }}</q-item-label>
-                                <q-list>
-                                    <q-item class="q-pa-none">
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                <QItemLabel caption>#{{ row.id }}</QItemLabel>
+                                <QList>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('wagon.list.plate') }}
-                                            </q-item-label>
-                                            <q-item-label>{{ row.plate }}</q-item-label>
-                                        </q-item-section>
-                                    </q-item>
-                                    <q-item class="q-pa-none">
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                            </QItemLabel>
+                                            <QItemLabel>{{ row.plate }}</QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('wagon.list.volume') }}
-                                            </q-item-label>
-                                            <q-item-label>{{ row.volume }}</q-item-label>
-                                        </q-item-section>
-                                    </q-item>
-                                    <q-item class="q-pa-none">
-                                        <q-item-section>
-                                            <q-item-label caption>
+                                            </QItemLabel>
+                                            <QItemLabel>{{ row.volume }}</QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                    <QItem class="q-pa-none">
+                                        <QItemSection>
+                                            <QItemLabel caption>
                                                 {{ t('wagon.list.type') }}
-                                            </q-item-label>
-                                            <q-item-label>{{
-                                                row.type.name
-                                            }}</q-item-label>
-                                        </q-item-section>
-                                    </q-item>
-                                </q-list>
-                            </q-item-section>
-                            <q-separator vertical />
-                            <q-card-actions vertical class="justify-between">
-                                <q-btn
+                                            </QItemLabel>
+                                            <QItemLabel>{{ row.type.name }}</QItemLabel>
+                                        </QItemSection>
+                                    </QItem>
+                                </QList>
+                            </QItemSection>
+                            <QSeparator vertical />
+                            <QCardActions vertical class="justify-between">
+                                <QBtn
                                     flat
                                     round
                                     color="primary"
                                     icon="arrow_circle_right"
                                     @click="navigate(row.id)"
                                 >
-                                    <q-tooltip>
+                                    <QTooltip>
                                         {{ t('components.smartCard.openCard') }}
-                                    </q-tooltip>
-                                </q-btn>
-                                <q-btn
+                                    </QTooltip>
+                                </QBtn>
+                                <QBtn
                                     flat
                                     round
                                     color="primary"
                                     icon="delete"
                                     @click="remove(row)"
                                 >
-                                    <q-tooltip>
+                                    <QTooltip>
                                         {{ t('wagon.list.remove') }}
-                                    </q-tooltip>
-                                </q-btn>
-                            </q-card-actions>
-                        </q-item>
-                    </q-card>
+                                    </QTooltip>
+                                </QBtn>
+                            </QCardActions>
+                        </QItem>
+                    </QCard>
                 </template>
-            </paginate>
+            </VnPaginate>
         </div>
-        <q-page-sticky position="bottom-right" :offset="[18, 18]">
-            <q-btn @click="create" fab icon="add" color="primary" />
-        </q-page-sticky>
-    </q-page>
+        <QPageSticky position="bottom-right" :offset="[18, 18]">
+            <QBtn @click="create" fab icon="add" color="primary" />
+        </QPageSticky>
+    </QPage>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Wagon/WagonMain.vue b/src/pages/Wagon/WagonMain.vue
index 2fb079daab..66ce78f232 100644
--- a/src/pages/Wagon/WagonMain.vue
+++ b/src/pages/Wagon/WagonMain.vue
@@ -6,12 +6,12 @@ const stateStore = useStateStore();
 </script>
 
 <template>
-    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
-        <q-scroll-area class="fit text-grey-8">
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
             <LeftMenu />
-        </q-scroll-area>
-    </q-drawer>
-    <q-page-container>
-        <router-view></router-view>
-    </q-page-container>
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
 </template>