diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index e61bbaab0..add2a29e9 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -386,6 +386,20 @@ export default {
         },
         imageNotFound: 'Image not found',
     },
+    wagon: {
+        pageTitles: {
+            wagons: 'Wagons',
+            list: 'List'
+        },
+        type: {
+            name: 'Name',
+            nameNotEmpty: 'Name can not be empty',
+            maxTrays: 'You have reached the max number of trays',
+            saveMessage: 'Wagon type successfully saved',
+            submit: 'Submit',
+            reset: 'Reset'
+        }
+    },
     components: {
         topbar: {},
         userPanel: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 2ca9d5ee9..91e69b13b 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -386,6 +386,20 @@ export default {
         },
         imageNotFound: 'No se ha encontrado la imagen',
     },
+    wagon: {
+        pageTitles: {
+            wagons: 'Vagones',
+            list: 'Listado'
+        },
+        type: {
+            name: 'Nombre',
+            nameNotEmpty: 'El nombre no puede estar vacío',
+            maxTrays: 'Has alcanzado el número máximo de bandejas',
+            saveMessage: 'Tipo de vagón guardado correctamente',
+            submit: 'Guardar',
+            reset: 'Deshacer cambios'
+        }
+    },
     components: {
         topbar: {},
         userPanel: {
diff --git a/src/pages/Wagon/WagonMain.vue b/src/pages/Wagon/WagonMain.vue
new file mode 100644
index 000000000..2fb079daa
--- /dev/null
+++ b/src/pages/Wagon/WagonMain.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <q-drawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <q-scroll-area class="fit text-grey-8">
+            <LeftMenu />
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <router-view></router-view>
+    </q-page-container>
+</template>
diff --git a/src/pages/Wagon/WagonTray.vue b/src/pages/Wagon/WagonTray.vue
new file mode 100644
index 000000000..ebbc0d0d3
--- /dev/null
+++ b/src/pages/Wagon/WagonTray.vue
@@ -0,0 +1,103 @@
+<script setup>
+const props = defineProps({
+    position: {
+        type: Number,
+        required: true,
+    },
+    color: {
+        type: Object,
+        required: true,
+    },
+    action: {
+        type: String,
+        required: true,
+    },
+    divisible: {
+        type: Boolean,
+        required: true,
+    },
+});
+const emit = defineEmits(['add-tray', 'delete-tray']);
+function doAction() {
+    if (props.action == 'add') {
+        emit('add-tray');
+    } else {
+        emit('delete-tray', props.position);
+    }
+}
+</script>
+<template>
+    <div class="wagon-tray q-mx-xl">
+        <div class="position">{{ position }}</div>
+        <div class="shelving">
+            <div class="shelving-half">
+                <div class="shelving-up"></div>
+                <div
+                    class="shelving-down"
+                    :style="{ backgroundColor: props.color.rgb }"
+                ></div>
+            </div>
+            <div
+                class="shelving-divisible"
+                :class="{ isDivisible: !props.divisible }"
+            ></div>
+            <div class="shelving-half">
+                <div class="shelving-up"></div>
+                <div
+                    class="shelving-down"
+                    :style="{ backgroundColor: props.color.rgb }"
+                ></div>
+            </div>
+        </div>
+        <div class="action-button">
+            <q-btn flat round color="primary" :icon="action" @click="doAction()" />
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.wagon-tray {
+    display: flex;
+    height: 6rem;
+    .position {
+        width: 10%;
+        border-right: 1rem solid gray;
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-end;
+        padding-right: 1rem;
+    }
+    .shelving {
+        display: flex;
+        width: 80%;
+        .shelving-half {
+            width: 50%;
+            height: 100%;
+            .shelving-up {
+                height: 80%;
+                width: 100%;
+            }
+            .shelving-down {
+                height: 20%;
+                width: 100%;
+            }
+        }
+        .shelving-divisible {
+            width: 1%;
+            height: 100%;
+            border-left: 0.5rem dashed grey;
+            border-right: 0.5rem dashed grey;
+        }
+        .isDivisible {
+            display: none;
+        }
+    }
+    .action-button {
+        width: 10%;
+        border-left: 1rem solid gray;
+        display: flex;
+        align-items: flex-end;
+        justify-content: flex-start;
+        padding-left: 1rem;
+    }
+}
+</style>
diff --git a/src/pages/Wagon/WagonTypeCreate.vue b/src/pages/Wagon/WagonTypeCreate.vue
new file mode 100644
index 000000000..c431b808e
--- /dev/null
+++ b/src/pages/Wagon/WagonTypeCreate.vue
@@ -0,0 +1,191 @@
+<!-- <script setup>
+import { useI18n } from 'vue-i18n';
+import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+import { useStateStore } from 'stores/useStateStore';
+import Paginate from 'src/components/PaginateData.vue';
+import WorkerSummaryDialog from 'src/pages/Worker/Card/WorkerSummaryDialog.vue';
+import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
+import WorkerFilter from 'src/pages/Worker/WorkerFilter.vue';
+
+const stateStore = useStateStore();
+const router = useRouter();
+const { t } = useI18n();
+const quasar = useQuasar();
+
+function navigate(id) {
+    router.push({ path: `/worker/${id}` });
+}
+
+function viewSummary(id) {
+    quasar.dialog({
+        component: WorkerSummaryDialog,
+        componentProps: {
+            id,
+        },
+    });
+}
+</script> -->
+<script setup>
+import axios from 'axios';
+import FetchData from 'components/FetchData.vue';
+import { useQuasar } from 'quasar';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import WagonTray from './WagonTray.vue';
+
+const { t } = useI18n();
+const quasar = useQuasar();
+const wagonConfig = ref([]);
+const wagonTypeColors = ref([]);
+const wagon = ref([]);
+const divisible = ref(false);
+const name = ref('');
+let currentPosition = 0;
+
+function addTray() {
+    if (wagon.value.length < wagonConfig.value.maxTrays - 1) {
+        currentPosition += wagonConfig.value.trayStep;
+        wagon.value.unshift({
+            position: currentPosition,
+            color: {
+                id: 1,
+                rgb: 'blue',
+            },
+        });
+    } else {
+        quasar.notify({
+            message: t('wagon.type.maxTrays'),
+            type: 'warning',
+        });
+    }
+}
+
+function deleteTray(position) {
+    currentPosition = 0;
+    wagon.value = wagon.value.filter((tray) => tray.position !== position);
+    for (let i = wagon.value.length - 1; i >= 0; i--) {
+        currentPosition += wagonConfig.value.trayStep;
+        wagon.value[i].position = currentPosition;
+    }
+}
+
+async function onSubmit() {
+    try {
+        await axios
+            .post('WagonTypes', {
+                name: name.value,
+            })
+            .then((res) => {
+                wagon.value.forEach(async (tray) => {
+                    await axios.post('WagonTypeTrays', {
+                        typeFk: res.data.id,
+                        height: tray.position,
+                        colorFk: tray.color.id,
+                    });
+                });
+            });
+
+        quasar.notify({
+            message: t('wagon.type.saveMessage'),
+            type: 'positive',
+        });
+    } catch (error) {
+        //
+    }
+}
+
+async function onReset() {
+    name.value = null;
+    divisible.value = false;
+    wagon.value = [];
+    currentPosition = 0;
+}
+</script>
+
+<template>
+    <fetch-data
+        url="WagonConfigs"
+        @on-fetch="(data) => (wagonConfig = data[0])"
+        auto-load
+    />
+    <fetch-data
+        url="WagonTypeColors"
+        @on-fetch="(data) => (wagonTypeColors = data)"
+        auto-load
+    />
+    <q-page class="q-pa-sm q-mx-xl">
+        <q-card class="q-pa-sm">
+            <q-form @submit="onSubmit" @reset="onReset" class="q-pa-md">
+                <q-input
+                    filled
+                    v-model="name"
+                    :label="t('wagon.type.name')"
+                    :rules="[(val) => !!val || t('wagon.type.nameNotEmpty')]"
+                />
+                <q-checkbox class="q-mb-sm" v-model="divisible" label="Divisible" />
+                <div v-for="tray in wagon" :key="tray.position">
+                    <WagonTray
+                        action="delete"
+                        @delete-tray="deleteTray"
+                        :position="tray.position"
+                        :color="{ rgb: 'blue' }"
+                        :divisible="divisible"
+                    ></WagonTray>
+                </div>
+                <WagonTray
+                    v-if="wagonTypeColors.values"
+                    action="add"
+                    @add-tray="addTray"
+                    :color="{ rgb: 'blue' }"
+                    :divisible="divisible"
+                ></WagonTray>
+                <div class="q-mb-sm wheels">
+                    <q-icon color="grey-6" name="trip_origin" size="3rem" />
+                    <q-icon color="grey-6" name="trip_origin" size="3rem" />
+                </div>
+                <div>
+                    <q-btn
+                        :label="t('wagon.type.submit')"
+                        type="submit"
+                        color="primary"
+                    />
+                    <q-btn
+                        :label="t('wagon.type.reset')"
+                        type="reset"
+                        color="primary"
+                        flat
+                        class="q-ml-sm"
+                    />
+                    <!-- <q-color
+                        flat
+                        v-model="hex"
+                        no-header
+                        no-footer
+                        default-view="palette"
+                        :palette="
+                            wagonTypeColors.map((color) => {
+                                return color.rgb;
+                            })
+                        "
+                    /> -->
+                </div>
+            </q-form>
+        </q-card>
+    </q-page>
+</template>
+
+<style lang="scss" scoped>
+.q-page {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+}
+.q-card {
+    width: 50%;
+}
+.wheels {
+    display: flex;
+    justify-content: space-around;
+}
+</style>
diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index ca8b3c958..30c51939d 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -3,11 +3,13 @@ import Ticket from './ticket';
 import Claim from './claim';
 import InvoiceOut from './invoiceOut';
 import Worker from './worker';
+import Wagon from './wagon';
 
 export default [
     Customer,
     Ticket,
     Claim,
     InvoiceOut,
-    Worker
+    Worker,
+    Wagon
 ]
diff --git a/src/router/modules/wagon.js b/src/router/modules/wagon.js
new file mode 100644
index 000000000..7059b3143
--- /dev/null
+++ b/src/router/modules/wagon.js
@@ -0,0 +1,35 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/wagon',
+    name: 'Wagon',
+    meta: {
+        title: 'wagons',
+        icon: 'contact_support',
+    },
+    component: RouterView,
+    redirect: { name: 'WagonMain' },
+    menus: {
+        main: ['WagonTypeList'],
+        card: [],
+    },
+    children: [
+        {
+            path: '',
+            name: 'WagonMain',
+            component: () => import('src/pages/Wagon/WagonMain.vue'),
+            redirect: { name: 'WagonTypeList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'WagonTypeCreate',
+                    meta: {
+                        title: 'list',
+                        icon: 'view_list',
+                    },
+                    component: () => import('src/pages/Wagon/WagonTypeCreate.vue'),
+                },
+            ],
+        }
+    ],
+};
diff --git a/src/router/routes.js b/src/router/routes.js
index c92075a82..17a56505d 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -3,6 +3,7 @@ import ticket from './modules/ticket';
 import claim from './modules/claim';
 import worker from './modules/worker';
 import invoiceOut from './modules/invoiceOut';
+import wagon from './modules/wagon';
 
 const routes = [
     {
@@ -34,6 +35,7 @@ const routes = [
                 name: 'NotFound',
                 component: () => import('../pages/NotFound.vue'),
             },
+            wagon
         ],
     },
 ];
diff --git a/src/stores/useNavigationStore.js b/src/stores/useNavigationStore.js
index 3b2c7e8a7..bcaeeb953 100644
--- a/src/stores/useNavigationStore.js
+++ b/src/stores/useNavigationStore.js
@@ -6,7 +6,7 @@ import { useRole } from 'src/composables/useRole';
 import routes from 'src/router/modules';
 
 export const useNavigationStore = defineStore('navigationStore', () => {
-    const modules = ['customer', 'claim', 'ticket', 'invoiceOut', 'worker'];
+    const modules = ['customer', 'claim', 'ticket', 'invoiceOut', 'worker', 'wagon'];
     const pinnedModules = ref([]);
     const role = useRole();