diff --git a/src/components/common/VnSelectCreate.vue b/src/components/common/VnSelectCreate.vue
new file mode 100644
index 000000000..867c97135
--- /dev/null
+++ b/src/components/common/VnSelectCreate.vue
@@ -0,0 +1,75 @@
+<script setup>
+import { ref, computed } from 'vue';
+
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+import { useRole } from 'src/composables/useRole';
+
+const emit = defineEmits(['update:modelValue', 'update:options']);
+
+const $props = defineProps({
+    modelValue: {
+        type: [String, Number, Object],
+        default: null,
+    },
+    options: {
+        type: Array,
+        default: () => [],
+    },
+    optionLabel: {
+        type: String,
+        default: '',
+    },
+    rolesAllowedToCreate: {
+        type: Array,
+        default: () => ['developer'],
+    },
+});
+
+const role = useRole();
+const showForm = ref(false);
+
+const value = computed({
+    get() {
+        return $props.modelValue;
+    },
+    set(value) {
+        emit('update:modelValue', value);
+    },
+});
+
+const isAllowedToCreate = computed(() => {
+    return role.hasAny($props.rolesAllowedToCreate);
+});
+
+const toggleForm = () => {
+    showForm.value = !showForm.value;
+};
+</script>
+
+<template>
+    <VnSelectFilter v-model="value" :options="options">
+        <template v-if="isAllowedToCreate" #append>
+            <QIcon
+                @click.stop.prevent="toggleForm()"
+                name="add"
+                size="19px"
+                class="add-icon"
+            />
+            <QDialog v-model="showForm" transition-show="scale" transition-hide="scale">
+                <slot name="form" @close-form="toggleForm()" />
+            </QDialog>
+        </template>
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
+            <slot :name="slotName" v-bind="slotData" :key="slotName" />
+        </template>
+    </VnSelectFilter>
+</template>
+
+<style lang="scss" scoped>
+.add-icon {
+    cursor: pointer;
+    background-color: $primary;
+    border-radius: 50px;
+}
+</style>
diff --git a/src/components/common/VnSelectFilter.vue b/src/components/common/VnSelectFilter.vue
index 568da613f..3c5b6f966 100644
--- a/src/components/common/VnSelectFilter.vue
+++ b/src/components/common/VnSelectFilter.vue
@@ -105,8 +105,8 @@ const value = computed({
                 size="18px"
             />
         </template>
-        <template v-for="(_, slotName) in $slots" #[slotName]="slotData">
-            <slot :name="slotName" v-bind="slotData ?? {}" />
+        <template v-for="(_, slotName) in $slots" #[slotName]="slotData" :key="slotName">
+            <slot :name="slotName" v-bind="slotData ?? {}" :key="slotName" />
         </template>
     </QSelect>
 </template>
diff --git a/src/pages/Customer/CustomerCreate.vue b/src/pages/Customer/CustomerCreate.vue
index eab238b6a..47f26e297 100644
--- a/src/pages/Customer/CustomerCreate.vue
+++ b/src/pages/Customer/CustomerCreate.vue
@@ -32,50 +32,34 @@ const businessTypesOptions = ref([]);
 const citiesLocationOptions = ref([]);
 const provincesLocationOptions = ref([]);
 const countriesOptions = ref([]);
-
-const onFetchWorkers = (workers) => {
-    workersOptions.value = [...workers];
-};
-
-const onFetchBusinessTypes = (businessTypes) => {
-    businessTypesOptions.value = [...businessTypes];
-};
-
-const onFetchCitiesLocation = (citiesLocation) => {
-    citiesLocationOptions.value = [...citiesLocation];
-};
-
-const onFetchProvincesLocation = (provincesLocation) => {
-    provincesLocationOptions.value = [...provincesLocation];
-};
-
-const onFetchCountries = (countries) => {
-    countriesOptions.value = [...countries];
-};
 </script>
 
 <template>
     <FetchData
-        @on-fetch="(data) => onFetchWorkers(data)"
+        @on-fetch="(data) => (workersOptions = data)"
         auto-load
         url="Workers/search?departmentCodes"
     />
     <FetchData
-        @on-fetch="(data) => onFetchBusinessTypes(data)"
+        @on-fetch="(data) => (businessTypesOptions = data)"
         auto-load
         url="BusinessTypes"
     />
     <FetchData
-        @on-fetch="(data) => onFetchCitiesLocation(data)"
+        @on-fetch="(data) => (citiesLocationOptions = data)"
         auto-load
         url="Towns/location"
     />
     <FetchData
-        @on-fetch="(data) => onFetchProvincesLocation(data)"
+        @on-fetch="(data) => (provincesLocationOptions = data)"
         auto-load
         url="Provinces/location"
     />
-    <FetchData url="Countries" @on-fetch="(data) => onFetchCountries(data)" auto-load />
+    <FetchData
+        @on-fetch="(data) => (countriesOptions = data)"
+        auto-load
+        url="Countries"
+    />
     <QPage>
         <QToolbar class="bg-vn-dark">
             <div id="st-data"></div>
diff --git a/src/pages/Customer/CustomerCreateNewPostcode.vue b/src/pages/Customer/CustomerCreateNewPostcode.vue
index d2f462ce5..10f3b7d2f 100644
--- a/src/pages/Customer/CustomerCreateNewPostcode.vue
+++ b/src/pages/Customer/CustomerCreateNewPostcode.vue
@@ -24,18 +24,6 @@ const isLoading = ref(false);
 const provincesOptions = ref([]);
 const townsLocationOptions = ref([]);
 
-const onFetchTownsLocation = (townsLocation) => {
-    townsLocationOptions.value = [...townsLocation];
-};
-
-const onFetchProvinces = (provinces) => {
-    provincesOptions.value = [...provinces];
-};
-
-const onFetchCountries = (countries) => {
-    countriesOptions.value = [...countries];
-};
-
 async function save() {
     isLoading.value = true;
 
@@ -60,24 +48,32 @@ async function save() {
 
 <template>
     <FetchData
-        @on-fetch="(data) => onFetchTownsLocation(data)"
+        @on-fetch="(data) => (townsLocationOptions = data)"
         auto-load
         url="Towns/location"
     />
-    <FetchData @on-fetch="(data) => onFetchProvinces(data)" auto-load url="Provinces" />
-    <FetchData @on-fetch="(data) => onFetchCountries(data)" auto-load url="Countries" />
+    <FetchData
+        @on-fetch="(data) => (provincesOptions = data)"
+        auto-load
+        url="Provinces"
+    />
+    <FetchData
+        @on-fetch="(data) => (countriesOptions = data)"
+        auto-load
+        url="Countries"
+    />
     <div class="q-pa-lg">
-        <h6 class="q-my-xs">New postcode</h6>
-        <p>Please, ensure you put the correct data!</p>
+        <h6 class="q-my-xs">{{ t('New postcode') }}</h6>
+        <p>{{ t('Please, ensure you put the correct data!') }}</p>
         <VnRow class="row q-gutter-md q-mb-md">
             <div class="col">
                 <QInput label="Postcode" v-model="data.code" />
             </div>
             <div class="col">
                 <VnSelectFilter
+                    :label="t('City')"
                     :options="townsLocationOptions"
                     hide-selected
-                    label="City"
                     option-label="name"
                     option-value="city"
                     v-model="data.city"
@@ -87,9 +83,9 @@ async function save() {
         <VnRow class="row q-gutter-md q-mb-xl">
             <div class="col">
                 <VnSelectFilter
+                    :label="t('Province')"
                     :options="provincesOptions"
                     hide-selected
-                    label="Province"
                     option-label="name"
                     option-value="id"
                     v-model="data.provinceFk"
@@ -97,9 +93,9 @@ async function save() {
             </div>
             <div class="col">
                 <VnSelectFilter
+                    :label="t('Country')"
                     :options="countriesOptions"
                     hide-selected
-                    label="Country"
                     option-label="country"
                     option-value="id"
                     v-model="data.countryFk"
@@ -107,8 +103,19 @@ async function save() {
             </div>
         </VnRow>
         <div class="flex justify-end">
-            <QBtn class="q-mr-lg" color="primary" label="Cancel" outline v-close-popup />
-            <QBtn @click="save" color="primary" label="Save" v-close-popup />
+            <QBtn
+                :label="t('globals.cancel')"
+                class="q-mr-lg"
+                color="primary"
+                outline
+                v-close-popup
+            />
+            <QBtn
+                :label="t('globals.save')"
+                @click="save"
+                color="primary"
+                v-close-popup
+            />
         </div>
     </div>
     <QInnerLoading
@@ -125,3 +132,12 @@ async function save() {
     grid-gap: 20px;
 }
 </style>
+
+<i18n>
+es:
+    New postcode: Nuevo código postal
+    Please, ensure you put the correct data!: ¡Por favor, asegúrese de poner los datos correctos!
+    City: Ciudad
+    Province: Provincia
+    Country: País
+</i18n>