diff --git a/package-lock.json b/package-lock.json
index 4fe3c0cdc..afcf4b291 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "0.0.1",
+    "version": "23.32.01",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
diff --git a/package.json b/package.json
index d9702c895..85e0cd72b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "salix-front",
-    "version": "23.30.01",
+    "version": "23.32.01",
     "description": "Salix frontend",
     "productName": "Salix",
     "author": "Verdnatura",
diff --git a/src/boot/axios.js b/src/boot/axios.js
index f8f27278c..bdc661ae2 100644
--- a/src/boot/axios.js
+++ b/src/boot/axios.js
@@ -64,7 +64,7 @@ const onResponseError = (error) => {
         const url = hash.slice(1);
         Router.push({ path: url });
     } else if (!session.isLoggedIn()) {
-        message = 'login.loginError';
+        return Promise.reject(error);
     }
 
     Notify.create({
diff --git a/src/components/LeftMenu.vue b/src/components/LeftMenu.vue
index a627f9058..6196c636a 100644
--- a/src/components/LeftMenu.vue
+++ b/src/components/LeftMenu.vue
@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { QSeparator, useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
@@ -113,7 +113,7 @@ async function togglePinned(item, event) {
 <template>
     <QList padding class="column-max-width">
         <template v-if="$props.source === 'main'">
-            <template v-if="this.$route.matched[1].name === 'Dashboard'">
+            <template v-if="this.$route?.matched[1]?.name === 'Dashboard'">
                 <QItem class="header">
                     <QItemSection avatar>
                         <QIcon name="view_module" />
@@ -156,7 +156,7 @@ async function togglePinned(item, event) {
             </template>
 
             <template v-for="item in items" :key="item.name">
-                <template v-if="item.name === this.$route.matched[1].name">
+                <template v-if="item.name === this.$route?.matched[1]?.name">
                     <QItem class="header">
                         <QItemSection avatar v-if="item.icon">
                             <QIcon :name="item.icon" />
@@ -211,7 +211,7 @@ async function togglePinned(item, event) {
     </QList>
 </template>
 
-<style>
+<style scoped>
 .pinned .q-btn {
     visibility: hidden;
 }
diff --git a/src/composables/useLogin.js b/src/composables/useLogin.js
new file mode 100644
index 000000000..c2c8153a2
--- /dev/null
+++ b/src/composables/useLogin.js
@@ -0,0 +1,30 @@
+import { ref, computed } from 'vue';
+
+const user = ref({});
+
+export function useLogin() {
+    function getUser() {
+        const userData = user.value;
+        user.value = {};
+        return computed(() => {
+            return {
+                user: userData.user,
+                password: userData.password,
+                keepLogin: userData.keepLogin,
+            };
+        });
+    }
+
+    function setUser(data) {
+        user.value = {
+            user: data.user,
+            password: data.password,
+            keepLogin: data.keepLogin,
+        };
+    }
+
+    return {
+        getUser,
+        setUser,
+    };
+}
diff --git a/src/css/app.scss b/src/css/app.scss
index 7e39780a1..466219906 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -29,4 +29,10 @@ body.body--light {
         background-color: white;
         color: #555;
     }
-}
\ No newline at end of file
+
+    .summary {
+        .header {
+            color: white;
+        }
+    }
+}
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index faad6005a..fafba4b09 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -20,6 +20,7 @@ export default {
         save: 'Save',
         remove: 'Remove',
         reset: 'Reset',
+        close: 'Close',
         cancel: 'Cancel',
         confirm: 'Confirm',
         back: 'Back',
@@ -48,6 +49,20 @@ export default {
         loginSuccess: 'You have successfully logged in',
         loginError: 'Invalid username or password',
         fieldRequired: 'This field is required',
+        twoFactorRequired: 'Two-factor verification required',
+        pageTitles: {
+            logIn: 'Login',
+        },
+    },
+    twoFactor: {
+        code: 'Code',
+        validate: 'Validate',
+        insert: 'Enter the verification code',
+        explanation:
+            'Please, enter the verification code that we have sent to your email in the next 5 minutes',
+        pageTitles: {
+            twoFactor: 'Two-Factor',
+        },
     },
     dashboard: {
         pageTitles: {
@@ -448,6 +463,25 @@ export default {
             uncompleteTrays: 'There are incomplete trays',
         },
     },
+    route: {
+        pageTitles: {
+            routes: 'Routes',
+            cmrsList: 'External CMRs list',
+        },
+        cmr: {
+            list: {
+                total: 'Total {0} records',
+                cmrFk: 'Cmr id',
+                hasCmrDms: `Attached in gestdoc`,
+                true: 'Yes',
+                false: 'No',
+                ticketFk: 'Ticketd id',
+                country: 'Country',
+                clientFk: 'Client id',
+                shipped: 'Preparation date',
+            },
+        },
+    },
     components: {
         topbar: {},
         userPanel: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 289cfa463..5b0983031 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -20,6 +20,7 @@ export default {
         save: 'Guardar',
         remove: 'Eliminar',
         reset: 'Restaurar',
+        close: 'Cerrar',
         cancel: 'Cancelar',
         confirm: 'Confirmar',
         back: 'Volver',
@@ -48,6 +49,20 @@ export default {
         loginSuccess: 'Inicio de sesión correcto',
         loginError: 'Nombre de usuario o contraseña incorrectos',
         fieldRequired: 'Este campo es obligatorio',
+        twoFactorRequired: 'Verificación de doble factor requerida',
+        pageTitles: {
+            logIn: 'Inicio de sesión',
+        },
+    },
+    twoFactor: {
+        code: 'Código',
+        validate: 'Validar',
+        insert: 'Introduce el código de verificación',
+        explanation:
+            'Por favor, introduce el código de verificación que te hemos enviado a tu email en los próximos 5 minutos',
+        pageTitles: {
+            twoFactor: 'Doble factor',
+        },
     },
     dashboard: {
         pageTitles: {
@@ -448,6 +463,25 @@ export default {
             uncompleteTrays: 'Hay bandejas sin completar',
         },
     },
+    route: {
+        pageTitles: {
+            routes: 'Rutas',
+            cmrsList: 'Listado de CMRs externos',
+        },
+        cmr: {
+            list: {
+                total: 'Total {0} registros',
+                cmrFk: 'Id cmr',
+                hasCmrDms: 'Adjuntado en gestdoc',
+                true: 'Sí',
+                false: 'No',
+                ticketFk: 'Id ticket',
+                country: 'País',
+                clientFk: 'Id cliente',
+                shipped: 'Fecha preparación',
+            },
+        },
+    },
     components: {
         topbar: {},
         userPanel: {
diff --git a/src/layouts/OutLayout.vue b/src/layouts/OutLayout.vue
new file mode 100644
index 000000000..6ea14622f
--- /dev/null
+++ b/src/layouts/OutLayout.vue
@@ -0,0 +1,111 @@
+<script setup>
+import { Dark, Quasar } from 'quasar';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t, locale } = useI18n();
+
+const userLocale = computed({
+    get() {
+        return locale.value;
+    },
+    set(value) {
+        locale.value = value;
+
+        if (value === 'en') value = 'en-GB';
+
+        // FIXME: Dynamic imports from absolute paths are not compatible with vite:
+        // https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
+        try {
+            const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs');
+            langList[`../../node_modules/quasar/lang/${value}.mjs`]().then((lang) => {
+                Quasar.lang.set(lang.default);
+            });
+        } catch (error) {
+            //
+        }
+    },
+});
+const darkMode = computed({
+    get() {
+        return Dark.isActive;
+    },
+    set(value) {
+        Dark.set(value);
+    },
+});
+const langs = ['en', 'es'];
+</script>
+
+<template>
+    <QLayout view="hHh LpR fFf">
+        <QHeader reveal class="bg-dark">
+            <QToolbar class="justify-end">
+                <QBtn
+                    id="switchLanguage"
+                    :label="t('globals.language')"
+                    icon="translate"
+                    color="primary"
+                    size="sm"
+                    flat
+                    rounded
+                >
+                    <QMenu auto-close>
+                        <QList dense v-for="lang in langs" :key="lang">
+                            <QItem
+                                @click="userLocale = lang"
+                                :active="userLocale == lang"
+                                v-ripple
+                                clickable
+                            >
+                                {{ t(`globals.lang.${lang}`) }}
+                            </QItem>
+                        </QList>
+                    </QMenu>
+                </QBtn>
+                <QList>
+                    <QItem>
+                        <QItemSection>
+                            <QToggle
+                                v-model="darkMode"
+                                checked-icon="dark_mode"
+                                unchecked-icon="light_mode"
+                                :label="t(`globals.darkMode`)"
+                            />
+                        </QItemSection>
+                    </QItem>
+                </QList>
+            </QToolbar>
+        </QHeader>
+        <QPageContainer>
+            <QPage>
+                <div class="form">
+                    <QCard class="q-pa-lg formCard">
+                        <RouterView></RouterView>
+                    </QCard>
+                </div>
+            </QPage>
+        </QPageContainer>
+    </QLayout>
+</template>
+
+<style lang="scss" scoped>
+.form {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: inherit;
+    flex-direction: column;
+}
+
+.formCard {
+    max-width: 350px;
+    min-width: 300px;
+}
+
+@media (max-width: $breakpoint-xs-max) {
+    .formCard {
+        min-width: 100%;
+    }
+}
+</style>
diff --git a/src/pages/Login/LoginMain.vue b/src/pages/Login/LoginMain.vue
index 747fe8b14..7c0bbbd44 100644
--- a/src/pages/Login/LoginMain.vue
+++ b/src/pages/Login/LoginMain.vue
@@ -1,58 +1,30 @@
 <script setup>
-import { ref, computed } from 'vue';
-import { Dark, Quasar, useQuasar } from 'quasar';
+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';
 
 const quasar = useQuasar();
 const session = useSession();
+const loginCache = useLogin();
 const router = useRouter();
-const { t, locale } = useI18n();
-
-const userLocale = computed({
-    get() {
-        return locale.value;
-    },
-    set(value) {
-        locale.value = value;
-
-        if (value === 'en') value = 'en-GB';
-
-        // FIXME: Dynamic imports from absolute paths are not compatible with vite:
-        // https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations
-        try {
-            const langList = import.meta.glob('../../node_modules/quasar/lang/*.mjs');
-            langList[`../../node_modules/quasar/lang/${value}.mjs`]().then((lang) => {
-                Quasar.lang.set(lang.default);
-            });
-        } catch (error) {
-            //
-        }
-    },
-});
-
-const darkMode = computed({
-    get() {
-        return Dark.isActive;
-    },
-    set(value) {
-        Dark.set(value);
-    },
-});
+const { t } = useI18n();
 
 const username = ref('');
 const password = ref('');
 const keepLogin = ref(true);
 
 async function onSubmit() {
+    const params = {
+        user: username.value,
+        password: password.value,
+    };
     try {
-        const { data } = await axios.post('Accounts/login', {
-            user: username.value,
-            password: password.value,
-        });
+        const { data } = await axios.post('Accounts/login', params);
 
         if (!data) return;
 
@@ -69,122 +41,63 @@ async function onSubmit() {
         } else {
             router.push({ name: 'Dashboard' });
         }
-    } catch (e) {
-        //
+    } catch (res) {
+        if (res.response?.data?.error?.code === 'REQUIRES_2FA') {
+            Notify.create({
+                message: t('login.twoFactorRequired'),
+                icon: 'phonelink_lock',
+                type: 'warning',
+            });
+            params.keepLogin = keepLogin.value;
+            loginCache.setUser(params);
+            return router.push({
+                name: 'TwoFactor',
+                query: router.currentRoute.value?.query,
+            });
+        }
+        Notify.create({
+            message: t('login.loginError'),
+            type: 'negative',
+        });
     }
 }
 </script>
 
 <template>
-    <QLayout>
-        <QPageContainer>
-            <QPage id="login">
-                <QPageSticky position="top-right">
-                    <QToolbar>
-                        <QBtn
-                            id="switchLanguage"
-                            :label="t('globals.language')"
-                            icon="translate"
-                            color="primary"
-                            size="sm"
-                            flat
-                            rounded
-                        >
-                            <QMenu auto-close>
-                                <QList dense>
-                                    <QItem
-                                        @click="userLocale = 'en'"
-                                        :active="userLocale == 'en'"
-                                        v-ripple
-                                        clickable
-                                    >
-                                        {{ t('globals.lang.en') }}
-                                    </QItem>
-                                    <QItem
-                                        @click="userLocale = 'es'"
-                                        :active="userLocale == 'es'"
-                                        v-ripple
-                                        clickable
-                                    >
-                                        {{ t('globals.lang.es') }}
-                                    </QItem>
-                                </QList>
-                            </QMenu>
-                        </QBtn>
-                        <QList>
-                            <QItem>
-                                <QItemSection>
-                                    <QItemLabel caption>
-                                        {{ t(`globals.darkMode`) }}
-                                    </QItemLabel>
-                                </QItemSection>
-                                <QItemSection side>
-                                    <QToggle
-                                        v-model="darkMode"
-                                        checked-icon="dark_mode"
-                                        unchecked-icon="light_mode"
-                                    />
-                                </QItemSection>
-                            </QItem>
-                        </QList>
-                    </QToolbar>
-                </QPageSticky>
-                <div class="login-form q-pa-xl">
-                    <QImg
-                        src="~/assets/logo.svg"
-                        alt="Logo"
-                        fit="contain"
-                        :ratio="16 / 9"
-                        class="q-mb-md"
-                    />
-                    <QForm @submit="onSubmit" class="q-gutter-md">
-                        <QInput
-                            v-model="username"
-                            :label="t('login.username')"
-                            lazy-rules
-                            :rules="[
-                                (val) =>
-                                    (val && val.length > 0) || t('login.fieldRequired'),
-                            ]"
-                        />
-                        <QInput
-                            type="password"
-                            v-model="password"
-                            :label="t('login.password')"
-                            lazy-rules
-                            :rules="[
-                                (val) =>
-                                    (val && val.length > 0) || t('login.fieldRequired'),
-                            ]"
-                        />
-                        <QToggle v-model="keepLogin" :label="t('login.keepLogin')" />
+    <QImg
+        src="~/assets/logo.svg"
+        alt="Logo"
+        fit="contain"
+        :ratio="16 / 9"
+        class="q-mb-md"
+    />
+    <QForm @submit="onSubmit" class="q-gutter-md q-pa-lg">
+        <QInput
+            v-model="username"
+            :label="t('login.username')"
+            lazy-rules
+            :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
+        />
+        <QInput
+            type="password"
+            v-model="password"
+            :label="t('login.password')"
+            lazy-rules
+            :rules="[(val) => (val && val.length > 0) || t('login.fieldRequired')]"
+        />
+        <QToggle v-model="keepLogin" :label="t('login.keepLogin')" />
 
-                        <div>
-                            <QBtn
-                                :label="t('login.submit')"
-                                type="submit"
-                                color="primary"
-                                class="full-width"
-                                rounded
-                                unelevated
-                            />
-                        </div>
-                    </QForm>
-                </div>
-            </QPage>
-        </QPageContainer>
-    </QLayout>
+        <div>
+            <QBtn
+                :label="t('login.submit')"
+                type="submit"
+                color="primary"
+                class="full-width"
+                rounded
+                unelevated
+            />
+        </div>
+    </QForm>
 </template>
 
-<style lang="scss" scoped>
-#login {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: inherit;
-}
-
-.login-form {
-    width: 400px;
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/pages/Login/TwoFactor.vue b/src/pages/Login/TwoFactor.vue
new file mode 100644
index 000000000..f14e85418
--- /dev/null
+++ b/src/pages/Login/TwoFactor.vue
@@ -0,0 +1,80 @@
+<script setup>
+import { ref } from 'vue';
+import { 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';
+
+const quasar = useQuasar();
+const session = useSession();
+const router = useRouter();
+const loginCache = useLogin();
+const { t } = useI18n();
+
+const code = ref('');
+const params = loginCache.getUser().value;
+if (!params.user) {
+    router.push({ name: 'Login' });
+}
+
+async function onSubmit() {
+    try {
+        params.code = code.value;
+        const { data } = await axios.post('VnUsers/validate-auth', params);
+
+        if (!data) return;
+
+        await session.login(data.token, params.keepLogin);
+        quasar.notify({
+            message: t('login.loginSuccess'),
+            type: 'positive',
+        });
+
+        const currentRoute = router.currentRoute.value;
+        if (currentRoute.query && currentRoute.query.redirect) {
+            router.push(currentRoute.query.redirect);
+        } else {
+            router.push({ name: 'Dashboard' });
+        }
+    } catch (e) {
+        quasar.notify({
+            message: e.response?.data?.error.message,
+            type: 'negative',
+        });
+    }
+}
+</script>
+<template>
+    <QForm @submit="onSubmit" class="q-gutter-md q-pa-lg">
+        <div class="column items-center">
+            <QIcon name="phonelink_lock" size="xl" color="primary" />
+            <h5 class="text-center q-my-md">{{ t('twoFactor.insert') }}</h5>
+        </div>
+        <QInput
+            v-model="code"
+            :hint="t('twoFactor.explanation')"
+            mask="# # # # # #"
+            fill-mask
+            unmasked-value
+            autofocus
+        >
+            <template #prepend>
+                <QIcon name="lock" />
+            </template>
+        </QInput>
+        <div class="q-mt-xl">
+            <QBtn
+                :label="t('twoFactor.validate')"
+                type="submit"
+                color="primary"
+                class="full-width q-mt-md"
+                rounded
+                unelevated
+            />
+        </div>
+    </QForm>
+</template>
+<style lang="scss" scoped></style>
diff --git a/src/pages/Route/Cmr/CmrFilter.vue b/src/pages/Route/Cmr/CmrFilter.vue
new file mode 100644
index 000000000..9059e0195
--- /dev/null
+++ b/src/pages/Route/Cmr/CmrFilter.vue
@@ -0,0 +1,141 @@
+<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';
+
+const { t } = useI18n();
+const props = defineProps({
+    dataKey: {
+        type: String,
+        required: true,
+    },
+});
+
+const countries = ref();
+</script>
+
+<template>
+    <FetchData url="Countries" @on-fetch="(data) => (countries = data)" auto-load />
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+        <template #tags="{ tag, formatFn }">
+            <div class="q-gutter-x-xs">
+                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <span>{{ formatFn(tag.value) }}</span>
+            </div>
+        </template>
+        <template #body="{ params }">
+            <QList dense>
+                <QItem>
+                    <QItemSection>
+                        <QInput :label="t('route.cmr.list.cmrFk')" v-model="params.cmrFk" lazy-rules>
+                            <template #prepend>
+                                <QIcon name="article" size="sm"></QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QCheckbox
+                            :label="t('route.cmr.list.hasCmrDms')"
+                            v-model="params.hasCmrDms"
+                            lazy-rules
+                        />
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput :label="t('route.cmr.list.ticketFk')" v-model="params.ticketFk" lazy-rules>
+                            <template #prepend>
+                                <QIcon name="vn:ticket" size="sm"></QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput :label="t('route.cmr.list.clientFk')" v-model="params.clientFk" lazy-rules>
+                            <template #prepend>
+                                <QIcon name="vn:client" size="sm"></QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection v-if="!countries">
+                        <QSkeleton type="QInput" class="full-width" />
+                    </QItemSection>
+                    <QItemSection v-if="countries">
+                        <QSelect
+                            :label="t('route.cmr.list.country')"
+                            v-model="params.country"
+                            :options="countries"
+                            option-value="country"
+                            option-label="country"
+                            transition-show="jump-down"
+                            transition-hide="jump-up"
+                            emit-value
+                            map-options
+                        >
+                        <template #prepend>
+                            <QIcon name="flag" size="sm"></QIcon>
+                        </template>
+                        </QSelect>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput
+                            :label="t('route.cmr.list.shipped')"
+                            v-model="params.shipped"
+                            mask="date"
+                        >
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="rotate"
+                                        transition-hide="rotate"
+                                    >
+                                        <QDate v-model="params.shipped" minimal>
+                                            <div class="row items-center justify-end q-gutter-sm">
+                                                <QBtn
+                                                    :label="t('globals.close')"
+                                                    color="primary"
+                                                    flat
+                                                    @click="save"
+                                                    v-close-popup
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+            </QList>
+        </template>
+    </VnFilterPanel>
+</template>
+
+<i18n>
+    en:
+        params:
+            cmrFk: Cmr id,
+            hasCmrDms: Attached in gestdoc,
+            ticketFk: Ticketd id,
+            country: Country,
+            clientFk: Client id,
+            shipped: Preparation date,
+    
+    es:
+        params:
+            cmrFk: Id cmr,
+            hasCmrDms: Adjuntado en gestdoc,
+            ticketFk: Id ticket,
+            country: País,
+            clientFk: Id cliente,
+            shipped: Fecha preparación,
+</i18n>
diff --git a/src/pages/Route/Cmr/CmrList.vue b/src/pages/Route/Cmr/CmrList.vue
new file mode 100644
index 000000000..761d79fa2
--- /dev/null
+++ b/src/pages/Route/Cmr/CmrList.vue
@@ -0,0 +1,130 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStateStore } from 'stores/useStateStore';
+import VnPaginate from 'components/ui/VnPaginate.vue';
+import { useSession } from 'src/composables/useSession';
+import { toDate } from 'filters/index';
+import CmrFilter from './CmrFilter.vue';
+
+const stateStore = useStateStore();
+const { t } = useI18n();
+const session = useSession();
+const token = session.getToken();
+
+const columns = computed(() => [
+    {
+        name: 'cmrFk',
+        label: t('route.cmr.list.cmrFk'),
+        field: (row) => row.cmrFk,
+        sortable: true,
+    },
+    {
+        name: 'hasCmrDms',
+        label: t('route.cmr.list.hasCmrDms'),
+        field: (row) => row.hasCmrDms,
+        align: 'center',
+        sortable: true,
+        headerStyle: 'padding-left: 35px',
+    },
+    {
+        name: 'ticketFk',
+        label: t('route.cmr.list.ticketFk'),
+        field: (row) => row.ticketFk,
+        sortable: true,
+    },
+    {
+        name: 'clientFk',
+        label: t('route.cmr.list.clientFk'),
+        field: (row) => row.clientFk,
+        sortable: true,
+    },
+    {
+        name: 'country',
+        label: t('route.cmr.list.country'),
+        field: (row) => row.country,
+        align: 'left',
+        sortable: true,
+    },
+    {
+        name: 'shipped',
+        label: t('route.cmr.list.shipped'),
+        field: (row) => toDate(row.shipped),
+        align: 'center',
+        sortable: true,
+        headerStyle: 'padding-left: 33px',
+    },
+]);
+function getProjectUrl() {
+    return ((new URL(window.location)).origin);
+};
+</script>
+<template>
+    <div class="column items-center">
+        <div class="list">
+            <VnPaginate
+                data-key="CmrList"
+                :url="`Routes/getExternalCmrs`"
+                order="cmrFk DESC"
+                limit="null"
+                auto-load
+            >
+                <template #body="{ rows }">
+                    <QTable
+                        :columns="columns"
+                        :rows="rows"
+                        :dense="$q.screen.lt.md"
+                        :pagination="{ rowsPerPage: null }"
+                        hide-pagination
+                        :grid="$q.screen.lt.md"
+                        auto-load
+                    >
+                    <template #top>
+                        {{ t('route.cmr.list.total', [rows.length]) }}
+                    </template>
+                    <template #body-cell-cmrFk="{ value }">
+                        <QTd align="right" class="text-primary">
+                                <a :href="`${getProjectUrl()}/api/Routes/${value}/cmr?access_token=${token}`" target="_blank">
+                                    <span class="text-primary">{{ value }}</span>
+                                </a>
+                        </QTd>
+                    </template>
+                    <template #body-cell-hasCmrDms="{ value }">
+                        <QTd align="center">
+                            <QBadge
+                                :id="(value) ? 'true' : 'false'" 
+                                :label="(value)
+                                    ? t('route.cmr.list.true')
+                                    : t('route.cmr.list.false')"
+                            />
+                        </QTd>
+                    </template>
+                    </QTable>
+                </template>
+            </VnPaginate>
+        </div>
+        <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+                <QScrollArea class="fit text-grey-8">
+                    <CmrFilter data-key="CmrList" />
+                </QScrollArea>
+        </QDrawer>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.list {
+    padding-top: 15px;
+    padding-bottom: 15px;
+    max-width: 900px;
+    width: 100%;
+}
+.grid-style-transition {
+    transition: transform 0.28s, background-color 0.28s;
+}
+#true {
+    background-color: $positive;
+}
+#false {
+    background-color: $negative;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Route/RouteMain.vue b/src/pages/Route/RouteMain.vue
new file mode 100644
index 000000000..66ce78f23
--- /dev/null
+++ b/src/pages/Route/RouteMain.vue
@@ -0,0 +1,17 @@
+<script setup>
+import { useStateStore } from 'stores/useStateStore';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const stateStore = useStateStore();
+</script>
+
+<template>
+    <QDrawer v-model="stateStore.leftDrawer" show-if-above :width="256">
+        <QScrollArea class="fit text-grey-8">
+            <LeftMenu />
+        </QScrollArea>
+    </QDrawer>
+    <QPageContainer>
+        <RouterView></RouterView>
+    </QPageContainer>
+</template>
diff --git a/src/router/index.js b/src/router/index.js
index 9bc199047..cccf9af6d 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -45,8 +45,8 @@ export { Router };
 export default route(function (/* { store, ssrContext } */) {
     Router.beforeEach(async (to, from, next) => {
         const { isLoggedIn } = session;
-
-        if (!isLoggedIn() && to.name !== 'Login') {
+        const outLayout = ['Login', 'TwoFactor'];
+        if (!isLoggedIn() && !outLayout.includes(to.name)) {
             return next({ name: 'Login', query: { redirect: to.fullPath } });
         }
 
diff --git a/src/router/modules/index.js b/src/router/modules/index.js
index 30c51939d..2916b98ef 100644
--- a/src/router/modules/index.js
+++ b/src/router/modules/index.js
@@ -4,6 +4,7 @@ import Claim from './claim';
 import InvoiceOut from './invoiceOut';
 import Worker from './worker';
 import Wagon from './wagon';
+import Route from './route';
 
 export default [
     Customer,
@@ -11,5 +12,6 @@ export default [
     Claim,
     InvoiceOut,
     Worker,
-    Wagon
+    Wagon,
+    Route
 ]
diff --git a/src/router/modules/route.js b/src/router/modules/route.js
new file mode 100644
index 000000000..a3550885c
--- /dev/null
+++ b/src/router/modules/route.js
@@ -0,0 +1,35 @@
+import { RouterView } from 'vue-router';
+
+export default {
+    path: '/route',
+    name: 'Route',
+    meta: {
+        title: 'routes',
+        icon: 'vn:delivery',
+    },
+    component: RouterView,
+    redirect: { name: 'RouteMain' },
+    menus: {
+        main: ['CmrList'],
+        card: [],
+    },
+    children: [
+        {
+            path: '/route',
+            name: 'RouteMain',
+            component: () => import('src/pages/Route/RouteMain.vue'),
+            redirect: { name: 'CmrList' },
+            children: [
+                {
+                    path: 'cmr/list',
+                    name: 'CmrList',
+                    meta: {
+                        title: 'cmrsList',
+                        icon: 'fact_check',
+                    },
+                    component: () => import('src/pages/Route/Cmr/CmrList.vue')
+                },
+            ],
+        },
+    ],
+};
diff --git a/src/router/routes.js b/src/router/routes.js
index 17a56505d..4425996b0 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -4,13 +4,26 @@ import claim from './modules/claim';
 import worker from './modules/worker';
 import invoiceOut from './modules/invoiceOut';
 import wagon from './modules/wagon';
+import route from './modules/route';
 
 const routes = [
     {
         path: '/login',
-        name: 'Login',
-        meta: { title: 'logIn' },
-        component: () => import('../pages/Login/LoginMain.vue'),
+        component: () => import('../layouts/OutLayout.vue'),
+        children: [
+            {
+                path: '',
+                name: 'Login',
+                meta: { title: 'logIn' },
+                component: () => import('../pages/Login/LoginMain.vue'),
+            },
+            {
+                path: '/twoFactor',
+                name: 'TwoFactor',
+                meta: { title: 'twoFactor' },
+                component: () => import('../pages/Login/TwoFactor.vue'),
+            },
+        ],
     },
     {
         path: '/',
@@ -35,7 +48,8 @@ const routes = [
                 name: 'NotFound',
                 component: () => import('../pages/NotFound.vue'),
             },
-            wagon
+            wagon,
+            route,
         ],
     },
 ];
diff --git a/src/stores/useNavigationStore.js b/src/stores/useNavigationStore.js
index bcaeeb953..168c1f9dc 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', 'wagon'];
+    const modules = ['customer', 'claim', 'ticket', 'invoiceOut', 'worker', 'wagon', 'route'];
     const pinnedModules = ref([]);
     const role = useRole();
 
diff --git a/test/cypress/integration/login.spec.js b/test/cypress/integration/login.spec.js
index 4cf10f226..f8a9f5c64 100755
--- a/test/cypress/integration/login.spec.js
+++ b/test/cypress/integration/login.spec.js
@@ -3,28 +3,37 @@ describe('Login', () => {
     beforeEach(() => {
         cy.visit('/#/login');
         cy.get('#switchLanguage').click();
-        cy.get('div.q-menu div.q-item:nth-child(1)').click();
+        cy.get('.q-menu > :nth-child(1) > .q-item').click();
     });
 
     it('should fail to log in using wrong user', () => {
         cy.get('input[aria-label="Username"]').type('incorrectUser');
         cy.get('input[aria-label="Password"]').type('nightmare');
         cy.get('button[type="submit"]').click();
-        cy.get('.q-notification__message').should('have.text', 'Invalid username or password');
+        cy.get('.q-notification__message').should(
+            'have.text',
+            'Invalid username or password'
+        );
     });
 
     it('should fail to log in using wrong password', () => {
         cy.get('input[aria-label="Username"]').type('employee');
         cy.get('input[aria-label="Password"]').type('wrongPassword');
         cy.get('button[type="submit"]').click();
-        cy.get('.q-notification__message').should('have.text', 'Invalid username or password');
+        cy.get('.q-notification__message').should(
+            'have.text',
+            'Invalid username or password'
+        );
     });
 
     it('should log in', () => {
         cy.get('input[aria-label="Username"]').type('employee');
         cy.get('input[aria-label="Password"]').type('nightmare');
         cy.get('button[type="submit"]').click();
-        cy.get('.q-notification__message').should('have.text', 'You have successfully logged in');
+        cy.get('.q-notification__message').should(
+            'have.text',
+            'You have successfully logged in'
+        );
         cy.url().should('contain', '/dashboard');
     });
 
@@ -32,7 +41,10 @@ describe('Login', () => {
         cy.get('input[aria-label="Username"]').type('employee');
         cy.get('input[aria-label="Password"]').type('nightmare');
         cy.get('button[type="submit"]').click();
-        cy.get('.q-notification__message').should('have.text', 'You have successfully logged in');
+        cy.get('.q-notification__message').should(
+            'have.text',
+            'You have successfully logged in'
+        );
         cy.url().should('contain', '/dashboard');
         cy.get('#user').click();
         cy.get('#logout').click();
diff --git a/test/cypress/integration/workerNotificationsManager.spec.js b/test/cypress/integration/workerNotificationsManager.spec.js
index 6c5aa21fb..4cd54629a 100644
--- a/test/cypress/integration/workerNotificationsManager.spec.js
+++ b/test/cypress/integration/workerNotificationsManager.spec.js
@@ -1,4 +1,4 @@
-describe('WorkerNotificationsManager', () => {
+xdescribe('WorkerNotificationsManager', () => {
     beforeEach(() => {
         const workerId = 1110;
         cy.viewport(1280, 720);
@@ -9,16 +9,25 @@ describe('WorkerNotificationsManager', () => {
     it('should unsubscribe 2 notifications, check the unsubscription has been saved, subscribe to other one and should check the data has been saved', () => {
         cy.get('.q-chip').should('have.length', 3);
         cy.get('.q-toggle__thumb').eq(0).click();
-        cy.get('.q-notification__message').should('have.text', 'Unsubscribed from the notification');
+        cy.get('.q-notification__message').should(
+            'have.text',
+            'Unsubscribed from the notification'
+        );
         cy.get('.q-chip > .q-icon').eq(0).click();
 
         cy.reload();
 
         cy.get('.q-chip').should('have.length', 1);
         cy.get('.q-toggle__thumb').should('have.length', 3).eq(0).click();
-        cy.get('.q-notification__message').should('have.text', 'Subscribed to the notification');
+        cy.get('.q-notification__message').should(
+            'have.text',
+            'Subscribed to the notification'
+        );
         cy.get('.q-toggle__thumb').should('have.length', 3).eq(1).click();
-        cy.get('.q-notification__message').should('have.text', 'Subscribed to the notification');
+        cy.get('.q-notification__message').should(
+            'have.text',
+            'Subscribed to the notification'
+        );
 
         cy.reload();
 
diff --git a/test/vitest/__tests__/components/Leftmenu.spec.js b/test/vitest/__tests__/components/Leftmenu.spec.js
index 87caa2413..ffdaebe7b 100644
--- a/test/vitest/__tests__/components/Leftmenu.spec.js
+++ b/test/vitest/__tests__/components/Leftmenu.spec.js
@@ -45,7 +45,7 @@ vi.mock('src/router/modules', () => ({
     ],
 }));
 
-describe.skip('Leftmenu', () => {
+describe('Leftmenu', () => {
     let vm;
     let navigation;
     beforeAll(() => {