diff --git a/src/components/common/SendEmailDialog.vue b/src/components/common/SendEmailDialog.vue
index 0f574a795..501c48a4d 100644
--- a/src/components/common/SendEmailDialog.vue
+++ b/src/components/common/SendEmailDialog.vue
@@ -1,7 +1,9 @@
 <script setup>
 import { ref } from 'vue';
-import { useDialogPluginComponent } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import { useDialogPluginComponent } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
 
 const props = defineProps({
     data: {
@@ -52,7 +54,7 @@ async function confirm() {
                 {{ t('The notification will be sent to the following address') }}
             </QCardSection>
             <QCardSection class="q-pt-none">
-                <QInput dense v-model="address" rounded outlined autofocus />
+                <VnInput v-model="address" is-outlined autofocus />
             </QCardSection>
             <QCardActions align="right">
                 <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
diff --git a/src/components/common/VnInput.vue b/src/components/common/VnInput.vue
new file mode 100644
index 000000000..e3040a698
--- /dev/null
+++ b/src/components/common/VnInput.vue
@@ -0,0 +1,51 @@
+<script setup>
+import { computed } from 'vue';
+
+const emit = defineEmits(['update:modelValue', 'update:options']);
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number],
+        default: null,
+    },
+    isOutlined: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    },
+});
+
+const styleAttrs = computed(() => {
+    return $props.isOutlined
+        ? {
+              dense: true,
+              outlined: true,
+              rounded: true,
+          }
+        : {};
+});
+</script>
+
+<template>
+    <QInput
+        ref="vnInputRef"
+        v-model="value"
+        v-bind="{ ...$attrs, ...styleAttrs }"
+        type="text"
+    >
+        <template v-if="$slots.prepend" #prepend>
+            <slot name="prepend" />
+        </template>
+        <template v-if="$slots.append" #append>
+            <slot name="append" />
+        </template>
+    </QInput>
+</template>
diff --git a/src/components/common/VnInputDate.vue b/src/components/common/VnInputDate.vue
index a8e0d4a43..8e0ef2890 100644
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@@ -10,7 +10,11 @@ const props = defineProps({
     readonly: {
         type: Boolean,
         default: false,
-    }
+    },
+    isOutlined: {
+        type: Boolean,
+        default: false,
+    },
 });
 const emit = defineEmits(['update:modelValue']);
 const value = computed({
@@ -36,6 +40,16 @@ const formatDate = (dateString) => {
         date.getDate()
     )}`;
 };
+
+const styleAttrs = computed(() => {
+    return props.isOutlined
+        ? {
+              dense: true,
+              outlined: true,
+              rounded: true,
+          }
+        : {};
+});
 </script>
 
 <template>
@@ -44,7 +58,7 @@ const formatDate = (dateString) => {
         rounded
         readonly
         :model-value="toDate(value)"
-        v-bind="$attrs"
+        v-bind="{ ...$attrs, ...styleAttrs }"
     >
         <template #append>
             <QIcon name="event" class="cursor-pointer">
diff --git a/src/components/common/VnSmsDialog.vue b/src/components/common/VnSmsDialog.vue
index 7f019927e..8bb8c3858 100644
--- a/src/components/common/VnSmsDialog.vue
+++ b/src/components/common/VnSmsDialog.vue
@@ -1,7 +1,9 @@
 <script setup>
 import { ref, computed } from 'vue';
-import { useDialogPluginComponent } from 'quasar';
 import { useI18n } from 'vue-i18n';
+import { useDialogPluginComponent } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { dialogRef, onDialogOK } = useDialogPluginComponent();
 const { t, availableLocales } = useI18n();
@@ -117,24 +119,10 @@ async function send() {
                 />
             </QCardSection>
             <QCardSection class="q-pb-xs">
-                <QInput
-                    :label="t('Phone')"
-                    v-model="phone"
-                    rounded
-                    outlined
-                    autofocus
-                    dense
-                />
+                <VnInput :label="t('Phone')" v-model="phone" is-outlined />
             </QCardSection>
             <QCardSection class="q-pb-xs">
-                <QInput
-                    :label="t('Subject')"
-                    v-model="subject"
-                    rounded
-                    outlined
-                    autofocus
-                    dense
-                />
+                <VnInput v-model="subject" :label="t('Subject')" is-outlined />
             </QCardSection>
             <QCardSection class="q-mb-md" q-input>
                 <QInput
@@ -198,7 +186,7 @@ async function send() {
 en:
     CustomerDefaultLanguage: This customer uses <strong>{locale}</strong> as their default language
     templates:
-        pendingPayment: 'Your order is pending of payment. 
+        pendingPayment: 'Your order is pending of payment.
             Please, enter the website and make the payment with a credit card. Thank you.'
         minAmount: 'A minimum amount of 50€ (VAT excluded) is required for your order 
             { orderId } of { shipped } to receive it without additional shipping costs.'
@@ -215,7 +203,7 @@ es:
     Subject: Asunto
     Message: Mensaje
     templates:
-        pendingPayment: 'Su pedido está pendiente de pago. 
+        pendingPayment: 'Su pedido está pendiente de pago.
             Por favor, entre en la página web y efectue el pago con tarjeta. Muchas gracias.'
         minAmount: 'Es necesario un importe mínimo de 50€ (Sin IVA) en su pedido 
             { orderId } del día { shipped } para recibirlo sin portes adicionales.'
@@ -249,7 +237,7 @@ pt:
     Subject: Assunto
     Message: Mensagem
     templates:
-        pendingPayment: 'Seu pedido está pendente de pagamento. 
+        pendingPayment: 'Seu pedido está pendente de pagamento.
             Por favor, acesse o site e faça o pagamento com cartão. Muito obrigado.'
         minAmount: 'É necessário um valor mínimo de 50€ (sem IVA) em seu pedido 
             { orderId } do dia { shipped } para recebê-lo sem custos de envio adicionais.'
diff --git a/src/components/ui/VnSearchbar.vue b/src/components/ui/VnSearchbar.vue
index 35f6c1548..cc6cd1971 100644
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@@ -1,8 +1,12 @@
 <script setup>
 import { onMounted, ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
-import { useArrayData } from 'composables/useArrayData';
 import { useQuasar } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useArrayData } from 'composables/useArrayData';
+
 const quasar = useQuasar();
 
 const props = defineProps({
@@ -86,7 +90,7 @@ async function search() {
 
 <template>
     <QForm @submit="search">
-        <QInput
+        <VnInput
             id="searchbar"
             v-model="searchText"
             :placeholder="props.label"
@@ -113,7 +117,7 @@ async function search() {
                     <QTooltip>{{ props.info }}</QTooltip>
                 </QIcon>
             </template>
-        </QInput>
+        </VnInput>
     </QForm>
 </template>
 
diff --git a/src/pages/Claim/Card/ClaimBasicData.vue b/src/pages/Claim/Card/ClaimBasicData.vue
index 0f067f281..35f93c736 100644
--- a/src/pages/Claim/Card/ClaimBasicData.vue
+++ b/src/pages/Claim/Card/ClaimBasicData.vue
@@ -3,11 +3,13 @@ import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
-import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import VnInputDate from "components/common/VnInputDate.vue";
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+import { useSession } from 'src/composables/useSession';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -102,14 +104,17 @@ const statesFilter = {
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.client.name"
                         :label="t('claim.basicData.customer')"
                         disable
                     />
                 </div>
                 <div class="col">
-                    <VnInputDate v-model="data.created" :label="t('claim.basicData.created')" />
+                    <VnInputDate
+                        v-model="data.created"
+                        :label="t('claim.basicData.created')"
+                    />
                 </div>
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
@@ -165,7 +170,7 @@ const statesFilter = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.rma"
                         :label="t('claim.basicData.returnOfMaterial')"
                         :rules="validate('claim.rma')"
diff --git a/src/pages/Claim/ClaimFilter.vue b/src/pages/Claim/ClaimFilter.vue
index c9716074d..b06f47653 100644
--- a/src/pages/Claim/ClaimFilter.vue
+++ b/src/pages/Claim/ClaimFilter.vue
@@ -1,9 +1,11 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
@@ -34,30 +36,31 @@ const states = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
-                <QItem>
+            <QList dense class="list">
+                <QItem class="q-my-sm">
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Customer ID')"
                             v-model="params.clientFk"
                             lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </QInput>
+                                <QIcon name="badge" size="xs"></QIcon> </template
+                        ></VnInput>
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Client Name')"
                             v-model="params.clientName"
                             lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -72,11 +75,15 @@ const states = ref();
                             emit-value
                             map-options
                             use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -91,11 +98,15 @@ const states = ref();
                             emit-value
                             map-options
                             use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -110,11 +121,15 @@ const states = ref();
                             emit-value
                             map-options
                             use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-md">
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!states">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -128,6 +143,10 @@ const states = ref();
                             option-label="description"
                             emit-value
                             map-options
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                         />
                     </QItemSection>
                 </QItem>
@@ -151,7 +170,11 @@ const states = ref();
                     </QItem> -->
                     <QItem>
                         <QItemSection>
-                            <VnInputDate v-model="params.created" :label="t('Created')" />
+                            <VnInputDate
+                                v-model="params.created"
+                                :label="t('Created')"
+                                is-outlined
+                            />
                         </QItemSection>
                     </QItem>
                 </QExpansionItem>
@@ -160,6 +183,15 @@ const states = ref();
     </VnFilterPanel>
 </template>
 
+<style scoped>
+.list {
+    width: 256px;
+}
+.list * {
+    max-width: 100%;
+}
+</style>
+
 <i18n>
 en:
     params:
diff --git a/src/pages/Claim/ClaimRmaList.vue b/src/pages/Claim/ClaimRmaList.vue
index 8eac83b1e..3774932e3 100644
--- a/src/pages/Claim/ClaimRmaList.vue
+++ b/src/pages/Claim/ClaimRmaList.vue
@@ -2,10 +2,13 @@
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useQuasar } from 'quasar';
-import axios from 'axios';
+
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
-import { useArrayData } from 'src/composables/useArrayData';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useArrayData } from 'src/composables/useArrayData';
+import axios from 'axios';
 
 const quasar = useQuasar();
 const { t } = useI18n();
@@ -65,7 +68,7 @@ async function remove({ id }) {
         <QPageSticky expand position="top" :offset="[16, 16]">
             <QCard class="card q-pa-md">
                 <QForm @submit="submit">
-                    <QInput
+                    <VnInput
                         ref="input"
                         v-model="newRma.code"
                         :label="t('claim.rmaList.code')"
diff --git a/src/pages/Customer/Card/CustomerBasicData.vue b/src/pages/Customer/Card/CustomerBasicData.vue
index 47cb6e337..458d50082 100644
--- a/src/pages/Customer/Card/CustomerBasicData.vue
+++ b/src/pages/Customer/Card/CustomerBasicData.vue
@@ -7,6 +7,7 @@ import { useSession } from 'src/composables/useSession';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -64,7 +65,7 @@ const filterOptions = {
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.socialName"
                         :label="t('customer.basicData.socialName')"
                         :rules="validate('client.socialName')"
@@ -87,7 +88,7 @@ const filterOptions = {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.contact"
                         :label="t('customer.basicData.contact')"
                         :rules="validate('client.contact')"
@@ -95,7 +96,7 @@ const filterOptions = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.email"
                         type="email"
                         :label="t('customer.basicData.email')"
@@ -106,7 +107,7 @@ const filterOptions = {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.phone"
                         :label="t('customer.basicData.phone')"
                         :rules="validate('client.phone')"
@@ -114,7 +115,7 @@ const filterOptions = {
                     />
                 </div>
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.mobile"
                         :label="t('customer.basicData.mobile')"
                         :rules="validate('client.mobile')"
diff --git a/src/pages/Customer/CustomerFilter.vue b/src/pages/Customer/CustomerFilter.vue
index c276b0d3e..36a9add89 100644
--- a/src/pages/Customer/CustomerFilter.vue
+++ b/src/pages/Customer/CustomerFilter.vue
@@ -1,9 +1,11 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -35,31 +37,31 @@ const zones = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
-                <QItem>
+            <QList dense class="list">
+                <QItem class="q-my-sm">
                     <QItemSection>
-                        <QInput :label="t('FI')" v-model="params.fi" lazy-rules>
+                        <VnInput :label="t('FI')" v-model="params.fi" is-outlined>
                             <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
+                                <QIcon name="badge" size="xs" />
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QInput :label="t('Name')" v-model="params.name" lazy-rules />
+                        <VnInput :label="t('Name')" v-model="params.name" is-outlined />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Social Name')"
                             v-model="params.socialName"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!workers">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -74,11 +76,15 @@ const zones = ref();
                             emit-value
                             map-options
                             use-input
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem>
+                <QItem class="q-mb-sm">
                     <QItemSection v-if="!provinces">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
@@ -92,33 +98,45 @@ const zones = ref();
                             option-label="name"
                             emit-value
                             map-options
+                            hide-selected
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mb-md">
                     <QItemSection>
-                        <QInput :label="t('City')" v-model="params.city" lazy-rules />
+                        <VnInput :label="t('City')" v-model="params.city" is-outlined />
                     </QItemSection>
                 </QItem>
                 <QSeparator />
                 <QExpansionItem :label="t('More options')" expand-separator>
                     <QItem>
                         <QItemSection>
-                            <QInput :label="t('Phone')" v-model="params.phone" lazy-rules>
+                            <VnInput
+                                :label="t('Phone')"
+                                v-model="params.phone"
+                                is-outlined
+                            >
                                 <template #prepend>
-                                    <QIcon name="phone" size="sm"></QIcon>
+                                    <QIcon name="phone" size="xs" />
                                 </template>
-                            </QInput>
+                            </VnInput>
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput :label="t('Email')" v-model="params.email" lazy-rules>
+                            <VnInput
+                                :label="t('Email')"
+                                v-model="params.email"
+                                is-outlined
+                            >
                                 <template #prepend>
-                                    <QIcon name="email" size="sm"></QIcon>
+                                    <QIcon name="email" size="sm" />
                                 </template>
-                            </QInput>
+                            </VnInput>
                         </QItemSection>
                     </QItem>
                     <QItem>
@@ -135,15 +153,19 @@ const zones = ref();
                                 option-label="name"
                                 emit-value
                                 map-options
+                                hide-selected
+                                dense
+                                outlined
+                                rounded
                             />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInput
                                 :label="t('Postcode')"
                                 v-model="params.postcode"
-                                lazy-rules
+                                is-outlined
                             />
                         </QItemSection>
                     </QItem>
@@ -153,6 +175,15 @@ const zones = ref();
     </VnFilterPanel>
 </template>
 
+<style scoped>
+.list {
+    width: 256px;
+}
+.list * {
+    max-width: 100%;
+}
+</style>
+
 <i18n>
 en:
     params:
diff --git a/src/pages/Customer/CustomerPaymentsFilter.vue b/src/pages/Customer/CustomerPaymentsFilter.vue
index 7ee584d7f..a19b35a20 100644
--- a/src/pages/Customer/CustomerPaymentsFilter.vue
+++ b/src/pages/Customer/CustomerPaymentsFilter.vue
@@ -1,6 +1,8 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
+
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
@@ -25,39 +27,39 @@ function isValidNumber(value) {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Order ID')"
                             v-model="params.orderFk"
-                            lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
-                                <QIcon name="vn:basket" size="sm"></QIcon>
+                                <QIcon name="vn:basket" size="xs" />
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Customer ID')"
                             v-model="params.clientFk"
-                            lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
-                                <QIcon name="vn:client" size="sm"></QIcon>
+                                <QIcon name="vn:client" size="xs" />
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Amount')"
                             v-model="params.amount"
-                            lazy-rules
+                            is-outlined
                             @update:model-value="
                                 (value) => {
                                     if (value.includes(','))
@@ -68,25 +70,25 @@ function isValidNumber(value) {
                                 (val) =>
                                     isValidNumber(val) || !val || 'Please type a number',
                             ]"
+                            lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="euro" size="sm" />
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
+
                 <QItem>
                     <QItemSection>
                         <VnInputDate
                             v-model="params.from"
                             :label="t('From')"
+                            is-outlined
                         />
                     </QItemSection>
                     <QItemSection>
-                        <VnInputDate
-                            v-model="params.to"
-                            :label="t('To')"
-                        />
+                        <VnInputDate v-model="params.to" :label="t('To')" is-outlined />
                     </QItemSection>
                 </QItem>
             </QList>
diff --git a/src/pages/InvoiceIn/InvoiceInFilter.vue b/src/pages/InvoiceIn/InvoiceInFilter.vue
index 6348d4167..f8198d237 100644
--- a/src/pages/InvoiceIn/InvoiceInFilter.vue
+++ b/src/pages/InvoiceIn/InvoiceInFilter.vue
@@ -1,9 +1,12 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import VnSelectFilter from 'components/common/VnSelectFilter.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -33,28 +36,32 @@ const suppliersRef = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
+            <QList dense class="list q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('Id or Supplier')" v-model="params.search">
+                        <VnInput
+                            :label="t('Id or Supplier')"
+                            v-model="params.search"
+                            is-outlined
+                        >
                             <template #prepend>
                                 <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('params.supplierRef')"
                             v-model="params.supplierRef"
-                            @input.
+                            is-outlined
                             lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="vn:client" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -66,52 +73,67 @@ const suppliersRef = ref();
                             option-value="id"
                             option-label="nickname"
                             @input-value="suppliersRef.fetch()"
+                            dense
+                            outlined
+                            rounded
                         >
                         </VnSelectFilter>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('params.fi')" v-model="params.fi" lazy-rules>
+                        <VnInput
+                            :label="t('params.fi')"
+                            v-model="params.fi"
+                            is-outlined
+                            lazy-rules
+                        >
                             <template #prepend>
                                 <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('params.serialNumber')"
                             v-model="params.serialNumber"
+                            is-outlined
                             lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('params.serial')"
                             v-model="params.serial"
+                            is-outlined
                             lazy-rules
                         >
                             <template #prepend>
                                 <QIcon name="badge" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('Amount')" v-model="params.amount" lazy-rules>
+                        <VnInput
+                            :label="t('Amount')"
+                            v-model="params.amount"
+                            is-outlined
+                            lazy-rules
+                        >
                             <template #prepend>
                                 <QIcon name="euro" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem class="q-mb-md">
@@ -127,137 +149,57 @@ const suppliersRef = ref();
                 <QExpansionItem :label="t('More options')" expand-separator>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInput
                                 :label="t('params.awb')"
                                 v-model="params.awbCode"
+                                is-outlined
                                 lazy-rules
                             >
                                 <template #prepend>
                                     <QIcon name="badge" size="sm"></QIcon>
                                 </template>
-                            </QInput>
+                            </VnInput>
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInput
                                 :label="t('params.account')"
                                 v-model="params.account"
+                                is-outlined
                                 lazy-rules
                             >
                                 <template #prepend>
                                     <QIcon name="person" size="sm" />
                                 </template>
-                            </QInput>
+                            </VnInput>
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput :label="t('From')" v-model="params.from" mask="date">
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.from" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        color="primary"
-                                                        flat
-                                                        @click="save"
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                            <VnInputDate
+                                :label="t('From')"
+                                v-model="params.from"
+                                is-outlined
+                            />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput :label="t('To')" v-model="params.to" mask="date">
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.to" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        color="primary"
-                                                        flat
-                                                        @click="save"
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                            <VnInputDate
+                                :label="t('To')"
+                                v-model="params.to"
+                                is-outlined
+                            />
                         </QItemSection>
                     </QItem>
                     <QItem>
                         <QItemSection>
-                            <QInput
+                            <VnInputDate
                                 :label="t('Issued')"
                                 v-model="params.issued"
-                                mask="date"
-                            >
-                                <template #append>
-                                    <QIcon name="event" class="cursor-pointer">
-                                        <QPopupProxy
-                                            cover
-                                            transition-show="scale"
-                                            transition-hide="scale"
-                                        >
-                                            <QDate v-model="params.issued" landscape>
-                                                <div
-                                                    class="row items-center justify-end q-gutter-sm"
-                                                >
-                                                    <QBtn
-                                                        :label="t('globals.cancel')"
-                                                        color="primary"
-                                                        flat
-                                                        v-close-popup
-                                                    />
-                                                    <QBtn
-                                                        :label="t('globals.confirm')"
-                                                        color="primary"
-                                                        flat
-                                                        @click="save"
-                                                        v-close-popup
-                                                    />
-                                                </div>
-                                            </QDate>
-                                        </QPopupProxy>
-                                    </QIcon>
-                                </template>
-                            </QInput>
+                                is-outlined
+                            />
                         </QItemSection>
                     </QItem>
                 </QExpansionItem>
@@ -266,6 +208,15 @@ const suppliersRef = ref();
     </VnFilterPanel>
 </template>
 
+<style scoped>
+.list {
+    width: 256px;
+}
+.list * {
+    max-width: 100%;
+}
+</style>
+
 <i18n>
 en:
     params:
diff --git a/src/pages/InvoiceOut/InvoiceOutFilter.vue b/src/pages/InvoiceOut/InvoiceOutFilter.vue
index 5d965816f..124ea00d1 100644
--- a/src/pages/InvoiceOut/InvoiceOutFilter.vue
+++ b/src/pages/InvoiceOut/InvoiceOutFilter.vue
@@ -1,8 +1,10 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
@@ -39,47 +41,31 @@ function setWorkers(data) {
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Customer ID')"
-                            class="q-mt-sm"
-                            dense
-                            lazy-rules
-                            outlined
-                            rounded
                             v-model="params.clientFk"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('FI')"
-                            class="q-mt-sm"
-                            dense
-                            lazy-rules
-                            outlined
-                            rounded
-                            v-model="params.fi"
-                        />
+                        <VnInput v-model="params.fi" :label="t('FI')" is-outlined />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Amount')"
-                            class="q-mt-sm"
-                            dense
-                            lazy-rules
-                            outlined
-                            rounded
                             v-model="params.amount"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mt-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             :label="t('Min')"
@@ -103,7 +89,7 @@ function setWorkers(data) {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-md">
+                <QItem>
                     <QItemSection>
                         <QCheckbox
                             :label="t('Has PDF')"
@@ -120,9 +106,7 @@ function setWorkers(data) {
                             <VnInputDate
                                 v-model="params.issued"
                                 :label="t('Issued')"
-                                dense
-                                outlined
-                                rounded
+                                is-outlined
                             />
                         </QItemSection>
                     </QItem>
@@ -131,9 +115,7 @@ function setWorkers(data) {
                             <VnInputDate
                                 v-model="params.created"
                                 :label="t('Created')"
-                                dense
-                                outlined
-                                rounded
+                                is-outlined
                             />
                         </QItemSection>
                     </QItem>
@@ -142,9 +124,7 @@ function setWorkers(data) {
                             <VnInputDate
                                 v-model="params.dued"
                                 :label="t('Dued')"
-                                dense
-                                outlined
-                                rounded
+                                is-outlined
                             />
                         </QItemSection>
                     </QItem>
diff --git a/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue b/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
index c15d56671..62acd0a79 100644
--- a/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
+++ b/src/pages/InvoiceOut/InvoiceOutGlobalForm.vue
@@ -1,11 +1,13 @@
 <script setup>
 import { onMounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 import { storeToRefs } from 'pinia';
-import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
 import FetchData from 'components/FetchData.vue';
-import VnInputDate from "components/common/VnInputDate.vue";
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInputDate from 'components/common/VnInputDate.vue';
+
+import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 
 const { t } = useI18n();
 const invoiceOutGlobalStore = useInvoiceOutGlobalStore();
@@ -84,7 +86,7 @@ onMounted(async () => {
         class="form-container q-pa-md"
         style="max-width: 256px"
     >
-        <div class="column q-gutter-y-md">
+        <div class="column q-gutter-y-sm">
             <QRadio
                 v-model="clientsToInvoice"
                 dense
@@ -98,6 +100,7 @@ onMounted(async () => {
                 val="one"
                 :label="t('oneClient')"
                 :dark="true"
+                class="q-mb-sm"
             />
             <VnSelectFilter
                 v-if="clientsToInvoice === 'one'"
@@ -114,15 +117,13 @@ onMounted(async () => {
             <VnInputDate
                 v-model="formData.invoiceDate"
                 :label="t('invoiceDate')"
-                dense
-                outlined
-                rounded />
+                is-outlined
+            />
             <VnInputDate
                 v-model="formData.maxShipped"
                 :label="t('maxShipped')"
-                dense
-                outlined
-                rounded />
+                is-outlined
+            />
             <VnSelectFilter
                 :label="t('company')"
                 v-model="formData.companyFk"
diff --git a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
index 63385380e..7265a0b08 100644
--- a/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
+++ b/src/pages/InvoiceOut/InvoiceOutNegativeBases.vue
@@ -1,11 +1,14 @@
 <script setup>
 import { onMounted, ref, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { QCheckbox, QBtn } from 'quasar';
+
 import CustomerDescriptorProxy from 'src/pages/Customer/Card/CustomerDescriptorProxy.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
 import invoiceOutService from 'src/services/invoiceOut.service';
 import { toCurrency } from 'src/filters';
-import { QCheckbox, QBtn } from 'quasar';
 import { useInvoiceOutGlobalStore } from 'src/stores/invoiceOutGlobal.js';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
@@ -187,13 +190,13 @@ const search = async () => {
         }
     });
     const searchFilter = {
-        limit: 20
-    }
+        limit: 20,
+    };
 
     if (and.length) {
         searchFilter.where = {
-            and
-        }
+            and,
+        };
     }
 
     const params = {
@@ -251,19 +254,15 @@ onMounted(async () => {
                         v-model="dateRange.from"
                         :label="t('invoiceOut.negativeBases.from')"
                         class="q-mr-md"
-                        dense
                         lazy-rules
-                        outlined
-                        rounded
+                        is-outlined
                     />
                     <VnInputDate
                         v-model="dateRange.to"
                         :label="t('invoiceOut.negativeBases.to')"
                         class="q-mr-md"
-                        dense
                         lazy-rules
-                        outlined
-                        rounded
+                        is-outlined
                     />
                     <QBtn
                         color="primary"
@@ -293,19 +292,17 @@ onMounted(async () => {
                     <QTh v-for="col in props.cols" :key="col.name" :props="props">
                         <div class="column justify-start items-start full-height">
                             {{ t(`invoiceOut.negativeBases.${col.label}`) }}
-                            <QInput
+                            <VnInput
                                 :class="{
                                     invisible:
                                         col.field === 'isActive' ||
                                         col.field === 'hasToInvoice' ||
                                         col.field === 'isTaxDataChecked',
                                 }"
-                                dense
-                                outlined
-                                rounded
                                 v-model="filter[col.field]"
                                 type="text"
                                 @keyup.enter="search()"
+                                is-outlined
                             />
                         </div>
                     </QTh>
diff --git a/src/pages/Login/LoginMain.vue b/src/pages/Login/LoginMain.vue
index 2e4fd91ca..e2ccdac16 100644
--- a/src/pages/Login/LoginMain.vue
+++ b/src/pages/Login/LoginMain.vue
@@ -3,12 +3,13 @@ import { ref } from 'vue';
 import { Notify, useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import axios from 'axios';
 
 import { useSession } from 'src/composables/useSession';
 import { useLogin } from 'src/composables/useLogin';
 
 import VnLogo from 'components/ui/VnLogo.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import axios from 'axios';
 
 const quasar = useQuasar();
 const session = useSession();
@@ -68,13 +69,14 @@ async function onSubmit() {
 <template>
     <QForm @submit="onSubmit" class="q-gutter-y-md q-pa-lg formCard">
         <VnLogo alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
-        <QInput
+
+        <VnInput
             v-model="username"
             :label="t('login.username')"
             lazy-rules
             :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
         />
-        <QInput
+        <VnInput
             type="password"
             v-model="password"
             :label="t('login.password')"
diff --git a/src/pages/Login/TwoFactor.vue b/src/pages/Login/TwoFactor.vue
index 1c99e8dec..b3a139149 100644
--- a/src/pages/Login/TwoFactor.vue
+++ b/src/pages/Login/TwoFactor.vue
@@ -53,7 +53,7 @@ async function onSubmit() {
             <QIcon name="phonelink_lock" size="xl" color="primary" />
             <h5 class="text-center q-my-md">{{ t('twoFactor.insert') }}</h5>
         </div>
-        <QInput
+        <VnInput
             v-model="code"
             :hint="t('twoFactor.explanation')"
             mask="# # # # # #"
@@ -64,7 +64,7 @@ async function onSubmit() {
             <template #prepend>
                 <QIcon name="lock" />
             </template>
-        </QInput>
+        </VnInput>
         <div class="q-mt-xl">
             <QBtn
                 :label="t('twoFactor.validate')"
diff --git a/src/pages/Route/Cmr/CmrFilter.vue b/src/pages/Route/Cmr/CmrFilter.vue
index bab300672..a5bf5513b 100644
--- a/src/pages/Route/Cmr/CmrFilter.vue
+++ b/src/pages/Route/Cmr/CmrFilter.vue
@@ -1,9 +1,11 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
-import VnInputDate from "components/common/VnInputDate.vue";
+import VnInputDate from 'components/common/VnInputDate.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -26,18 +28,18 @@ const countries = ref();
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('route.cmr.list.cmrFk')"
                             v-model="params.cmrFk"
-                            lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
                                 <QIcon name="article" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -51,48 +53,48 @@ const countries = ref();
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('route.cmr.list.ticketFk')"
                             v-model="params.ticketFk"
-                            lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
                                 <QIcon name="vn:ticket" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('route.cmr.list.routeFk')"
                             v-model="params.routeFk"
-                            lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
                                 <QIcon name="vn:delivery" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('route.cmr.list.clientFk')"
                             v-model="params.clientFk"
-                            lazy-rules
+                            is-outlined
                         >
                             <template #prepend>
                                 <QIcon name="vn:client" size="sm"></QIcon>
                             </template>
-                        </QInput>
+                        </VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection v-if="!countries">
                         <QSkeleton type="QInput" class="full-width" />
                     </QItemSection>
-                    <QItemSection v-if="countries">
+                    <QItemSection v-if="countries" class="q-mb-sm">
                         <QSelect
                             :label="t('route.cmr.list.country')"
                             v-model="params.country"
@@ -103,6 +105,9 @@ const countries = ref();
                             transition-hide="jump-up"
                             emit-value
                             map-options
+                            dense
+                            outlined
+                            rounded
                         >
                             <template #prepend>
                                 <QIcon name="flag" size="sm"></QIcon>
@@ -112,7 +117,11 @@ const countries = ref();
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <VnInputDate v-model="params.shipped" :label="t('route.cmr.list.shipped')" />
+                        <VnInputDate
+                            v-model="params.shipped"
+                            :label="t('route.cmr.list.shipped')"
+                            is-outlined
+                        />
                     </QItemSection>
                 </QItem>
             </QList>
diff --git a/src/pages/Shelving/Card/ShelvingForm.vue b/src/pages/Shelving/Card/ShelvingForm.vue
index e30ac1939..d359b5b12 100644
--- a/src/pages/Shelving/Card/ShelvingForm.vue
+++ b/src/pages/Shelving/Card/ShelvingForm.vue
@@ -5,6 +5,7 @@ import { useRoute } from 'vue-router';
 import VnRow from 'components/ui/VnRow.vue';
 import FetchData from 'components/FetchData.vue';
 import FormModel from 'components/FormModel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -15,7 +16,7 @@ const defaultInitialData = {
     priority: 0,
     code: null,
     isRecyclable: false,
-}
+};
 
 const parkingFilter = { fields: ['id', 'code'] };
 const parkingList = ref([]);
@@ -81,7 +82,7 @@ const shelvingFilter = {
         <template #form="{ data, validate, filter }">
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.code"
                         :label="t('shelving.basicData.code')"
                         :rules="validate('Shelving.code')"
@@ -107,7 +108,7 @@ const shelvingFilter = {
             </VnRow>
             <VnRow class="row q-gutter-md q-mb-md">
                 <div class="col">
-                    <QInput
+                    <VnInput
                         v-model="data.priority"
                         :label="t('shelving.basicData.priority')"
                         :rules="validate('Shelving.priority')"
diff --git a/src/pages/Supplier/SupplierCreate.vue b/src/pages/Supplier/SupplierCreate.vue
index 9b792483b..7cf8f117e 100644
--- a/src/pages/Supplier/SupplierCreate.vue
+++ b/src/pages/Supplier/SupplierCreate.vue
@@ -1,11 +1,12 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import { reactive } from 'vue';
-import { useStateStore } from 'stores/useStateStore';
+import { useI18n } from 'vue-i18n';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
 
+import { useStateStore } from 'stores/useStateStore';
+
 const { t } = useI18n();
 const stateStore = useStateStore();
 
@@ -39,7 +40,7 @@ const newSupplierForm = reactive({
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <QInput
+                        <VnInput
                             v-model="data.name"
                             :label="t('supplier.create.supplierName')"
                         />
diff --git a/src/pages/Ticket/TicketFilter.vue b/src/pages/Ticket/TicketFilter.vue
index 69f0b1c11..b0b584257 100644
--- a/src/pages/Ticket/TicketFilter.vue
+++ b/src/pages/Ticket/TicketFilter.vue
@@ -1,10 +1,13 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
 import toDateString from 'filters/toDateString';
-import VnInputDate from "components/common/VnInputDate.vue";
+import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -53,29 +56,33 @@ const warehouses = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             v-model="params.clientFk"
                             :label="t('Customer ID')"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             v-model="params.orderFk"
                             :label="t('Order ID')"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <VnInputDate v-model="params.from" :label="t('From')" />
+                        <VnInputDate
+                            v-model="params.from"
+                            :label="t('From')"
+                            is-outlined
+                        />
                     </QItemSection>
                     <QItemSection>
-                        <VnInputDate v-model="params.to" :label="t('To')" />
+                        <VnInputDate v-model="params.to" :label="t('To')" is-outlined />
                     </QItemSection>
                 </QItem>
                 <QItem>
@@ -92,6 +99,9 @@ const warehouses = ref();
                             emit-value
                             map-options
                             use-input
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
@@ -110,15 +120,18 @@ const warehouses = ref();
                             option-label="name"
                             emit-value
                             map-options
+                            dense
+                            outlined
+                            rounded
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             v-model="params.refFk"
                             :label="t('Invoice Ref.')"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
@@ -184,6 +197,9 @@ const warehouses = ref();
                                 option-label="name"
                                 emit-value
                                 map-options
+                                dense
+                                outlined
+                                rounded
                             />
                         </QItemSection>
                     </QItem>
@@ -201,6 +217,9 @@ const warehouses = ref();
                                 option-label="name"
                                 emit-value
                                 map-options
+                                dense
+                                outlined
+                                rounded
                             />
                         </QItemSection>
                     </QItem>
@@ -218,6 +237,9 @@ const warehouses = ref();
                                 option-label="name"
                                 emit-value
                                 map-options
+                                dense
+                                outlined
+                                rounded
                             />
                         </QItemSection>
                     </QItem>
@@ -232,7 +254,7 @@ en:
     params:
         search: Contains
         clientFk: Customer
-        orderFK: Order
+        orderFk: Order
         from: From
         to: To
         salesPersonFk: Salesperson
@@ -249,7 +271,7 @@ es:
     params:
         search: Contiene
         clientFk: Cliente
-        orderFK: Pedido
+        orderFk: Pedido
         from: Desde
         to: Hasta
         salesPersonFk: Comercial
diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index cef3ed998..245cbc9de 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -8,6 +8,7 @@ import SupplierDescriptorProxy from 'src/pages/Supplier/Card/SupplierDescriptorP
 import TravelDescriptorProxy from 'src/pages/Travel/Card/TravelDescriptorProxy.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import ExtraCommunityFilter from './ExtraCommunityFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 import { useStateStore } from 'stores/useStateStore';
 import { toCurrency } from 'src/filters';
@@ -314,7 +315,7 @@ onMounted(async () => {
                                     label-set="Save"
                                     label-cancel="Close"
                                 >
-                                    <QInput
+                                    <VnInput
                                         v-model="rows[props.pageIndex][col.field]"
                                         dense
                                         autofocus
diff --git a/src/pages/Travel/ExtraCommunityFilter.vue b/src/pages/Travel/ExtraCommunityFilter.vue
index 2d3629de4..57c3ec4bf 100644
--- a/src/pages/Travel/ExtraCommunityFilter.vue
+++ b/src/pages/Travel/ExtraCommunityFilter.vue
@@ -1,9 +1,11 @@
 <script setup>
 import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
-import FetchData from 'components/FetchData.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'components/common/VnInputDate.vue';
 
 const { t } = useI18n();
@@ -70,24 +72,22 @@ const decrement = (paramsObj, key) => {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense style="max-width: 256px" class="list">
-                <QItem class="q-my-sm">
+            <QList dense class="list q-gutter-y-sm q-mt-sm">
+                <QItem>
                     <QItemSection>
-                        <QInput label="id" dense outlined rounded v-model="params.id" />
+                        <VnInput label="id" v-model="params.id" is-outlined />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-my-sm">
+                <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('params.ref')"
-                            dense
-                            outlined
-                            rounded
+                        <VnInput
+                            :label="t('params.reference')"
                             v-model="params.reference"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             v-model="params.totalEntries"
@@ -118,7 +118,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.agencyModeFk')"
@@ -133,29 +133,25 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnInputDate
                             v-model="params.shippedFrom"
                             :label="t('params.shippedFrom')"
-                            dense
-                            outlined
-                            rounded
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnInputDate
                             v-model="params.landedTo"
                             :label="t('params.landedTo')"
-                            dense
-                            outlined
-                            rounded
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.warehouseOutFk')"
@@ -170,7 +166,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.warehouseInFk')"
@@ -185,7 +181,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('supplier.pageTitles.supplier')"
@@ -200,7 +196,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.continent')"
@@ -221,6 +217,9 @@ const decrement = (paramsObj, key) => {
 </template>
 
 <style scoped>
+.list {
+    width: 256px;
+}
 .list * {
     max-width: 100%;
 }
@@ -240,7 +239,8 @@ const decrement = (paramsObj, key) => {
 <i18n>
 en:
     params:
-        ref: Reference
+        id: Id
+        reference: Reference
         totalEntries: Total entries
         agencyModeFk: Agency
         warehouseInFk: Warehouse In
@@ -251,7 +251,8 @@ en:
         continent: Continent out
 es:
     params:
-        ref: Referencia
+        id: Id
+        reference: Referencia
         totalEntries: Ent. totales
         agencyModeFk: Agencia
         warehouseInFk: Alm. entrada
diff --git a/src/pages/Travel/TravelCreate.vue b/src/pages/Travel/TravelCreate.vue
index 434bbb238..9e4fa5f31 100644
--- a/src/pages/Travel/TravelCreate.vue
+++ b/src/pages/Travel/TravelCreate.vue
@@ -1,14 +1,15 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import { reactive, ref } from 'vue';
-import FetchData from 'components/FetchData.vue';
+import { reactive, ref, onBeforeMount } from 'vue';
 import { useRoute } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import FormModel from 'components/FormModel.vue';
 import VnRow from 'components/ui/VnRow.vue';
-import { toDate } from 'src/filters';
+import VnInput from 'src/components/common/VnInput.vue';
 
-import { onBeforeMount } from 'vue';
+import { toDate } from 'src/filters';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -70,7 +71,7 @@ const onFetchWarehouses = (warehouses) => {
             <template #form="{ data }">
                 <VnRow class="row q-gutter-md q-mb-md">
                     <div class="col">
-                        <QInput v-model="data.ref" :label="t('globals.reference')" />
+                        <VnInput v-model="data.ref" :label="t('globals.reference')" />
                     </div>
                     <div class="col">
                         <VnSelectFilter
diff --git a/src/pages/Travel/TravelFilter.vue b/src/pages/Travel/TravelFilter.vue
index 2c2d80488..d4cb286c2 100644
--- a/src/pages/Travel/TravelFilter.vue
+++ b/src/pages/Travel/TravelFilter.vue
@@ -1,9 +1,12 @@
 <script setup>
 import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 import FetchData from 'components/FetchData.vue';
+
 import { toDate } from 'src/filters';
 
 const { t } = useI18n();
@@ -64,19 +67,17 @@ const decrement = (paramsObj, key) => {
             </div>
         </template>
         <template #body="{ params }">
-            <QList dense style="max-width: 256px" class="list">
-                <QItem class="q-my-sm">
+            <QList dense class="list q-gutter-y-sm q-mt-sm">
+                <QItem>
                     <QItemSection>
-                        <QInput
-                            :label="t('params.search')"
-                            dense
-                            outlined
-                            rounded
+                        <VnInput
                             v-model="params.search"
+                            :label="t('params.search')"
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.agencyModeFk')"
@@ -91,7 +92,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.warehouseOutFk')"
@@ -106,7 +107,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.warehouseInFk')"
@@ -121,7 +122,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             v-model="params.scopeDays"
@@ -151,7 +152,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             dense
@@ -184,7 +185,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             dense
@@ -217,7 +218,7 @@ const decrement = (paramsObj, key) => {
                         </QInput>
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <VnSelectFilter
                             :label="t('params.continent')"
@@ -232,7 +233,7 @@ const decrement = (paramsObj, key) => {
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-sm">
+                <QItem>
                     <QItemSection>
                         <QInput
                             v-model="params.totalEntries"
@@ -269,6 +270,9 @@ const decrement = (paramsObj, key) => {
 </template>
 
 <style scoped>
+.list {
+    width: 256px;
+}
 .list * {
     max-width: 100%;
 }
diff --git a/src/pages/Wagon/Type/WagonTypeCreate.vue b/src/pages/Wagon/Type/WagonTypeCreate.vue
index 50be4169c..aa14e2cbf 100644
--- a/src/pages/Wagon/Type/WagonTypeCreate.vue
+++ b/src/pages/Wagon/Type/WagonTypeCreate.vue
@@ -1,9 +1,12 @@
 <script setup>
-import axios from 'axios';
-import { useQuasar } from 'quasar';
 import { computed, ref, onMounted, onUpdated } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
+import { useI18n } from 'vue-i18n';
+import axios from 'axios';
 
 onMounted(() => fetch());
 onUpdated(() => fetch());
@@ -241,7 +244,7 @@ function exceedMaxHeight(pos) {
     <QPage class="q-pa-sm q-mx-xl">
         <QForm @submit="onSubmit()" @reset="onReset()" class="q-pa-sm">
             <QCard class="q-pa-md">
-                <QInput
+                <VnInput
                     filled
                     v-model="name"
                     :label="t('wagon.type.name')"
diff --git a/src/pages/Wagon/WagonCreate.vue b/src/pages/Wagon/WagonCreate.vue
index 0bd6f87be..cf6bc3ff2 100644
--- a/src/pages/Wagon/WagonCreate.vue
+++ b/src/pages/Wagon/WagonCreate.vue
@@ -1,9 +1,12 @@
 <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 { QIcon, QInput, QItem, QItemSection, QSelect } from 'quasar';
+
+import VnInput from 'src/components/common/VnInput.vue';
+
 import { useRoute, useRouter } from 'vue-router';
+import axios from 'axios';
 
 onMounted(() => fetch());
 onUpdated(() => fetch());
@@ -100,7 +103,7 @@ function filterType(val, update) {
                         />
                     </div>
                     <div class="col">
-                        <QInput
+                        <VnInput
                             filled
                             v-model="wagon.plate"
                             :label="t('wagon.create.plate')"
diff --git a/src/pages/Worker/WorkerFilter.vue b/src/pages/Worker/WorkerFilter.vue
index 079905c4f..680a17937 100644
--- a/src/pages/Worker/WorkerFilter.vue
+++ b/src/pages/Worker/WorkerFilter.vue
@@ -1,8 +1,10 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+
 import FetchData from 'components/FetchData.vue';
 import VnFilterPanel from 'src/components/ui/VnFilterPanel.vue';
+import VnInput from 'src/components/common/VnInput.vue';
 
 const { t } = useI18n();
 const props = defineProps({
@@ -25,40 +27,39 @@ const departments = ref();
             </div>
         </template>
         <template #body="{ params, searchFn }">
-            <QList dense>
+            <QList dense class="q-gutter-y-sm q-mt-sm">
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('FI')" v-model="params.fi" lazy-rules>
-                            <template #prepend>
-                                <QIcon name="badge" size="sm"></QIcon>
-                            </template>
-                        </QInput>
+                        <VnInput :label="t('FI')" v-model="params.fi" is-outlined
+                            ><template #prepend>
+                                <QIcon name="badge" size="xs"></QIcon> </template
+                        ></VnInput>
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('First Name')"
                             v-model="params.firstName"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Last Name')"
                             v-model="params.lastName"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('User Name')"
                             v-model="params.userName"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
@@ -77,16 +78,19 @@ const departments = ref();
                             emit-value
                             map-options
                             use-input
+                            dense
+                            outlined
+                            rounded
                             :input-debounce="0"
                         />
                     </QItemSection>
                 </QItem>
-                <QItem class="q-mb-md">
+                <QItem>
                     <QItemSection>
-                        <QInput
+                        <VnInput
                             :label="t('Extension')"
                             v-model="params.extension"
-                            lazy-rules
+                            is-outlined
                         />
                     </QItemSection>
                 </QItem>
@@ -104,6 +108,7 @@ en:
         lastName: Last name
         userName: User
         extension: Extension
+        departmentFk: Department
 es:
     params:
         search: Contiene
@@ -112,6 +117,7 @@ es:
         lastName: Apellidos
         userName: Usuario
         extension: Extensión
+        departmentFk: Departamento
     FI: NIF
     First Name: Nombre
     Last Name: Apellidos