diff --git a/src/App.vue b/src/App.vue
index bbe1a1f7..689fdd53 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,12 +7,10 @@
     <component :is="layout">
       <router-view />
     </component>
-
   </div>
 </template>
 
 <script>
-
 // This will be populated in `beforeCreate` hook
 import { $themeColors, $themeBreakpoints, $themeConfig } from '@themeConfig'
 import { provideToast } from 'vue-toastification/composition'
@@ -29,19 +27,17 @@ const LayoutFull = () => import('@/layouts/full/LayoutFull.vue')
 
 export default {
   components: {
-
     // Layouts
     LayoutHorizontal,
     LayoutVertical,
     LayoutFull,
-
   },
 
   // ! We can move this computed: layout & contentLayoutType once we get to use Vue 3
   // Currently, router.currentRoute is not reactive and doesn't trigger any change
   computed: {
     layout() {
-      if (this.$route.meta.layout === 'full') return 'layout-full'
+      if (!this.$route.name || this.$route.meta.layout === 'full') return 'layout-full'
       return `layout-${this.contentLayoutType}`
     },
     contentLayoutType() {
@@ -62,7 +58,9 @@ export default {
 
     // eslint-disable-next-line no-plusplus
     for (let i = 0, len = breakpoints.length; i < len; i++) {
-      $themeBreakpoints[breakpoints[i]] = Number(useCssVar(`--breakpoint-${breakpoints[i]}`, document.documentElement).value.slice(0, -2))
+      $themeBreakpoints[breakpoints[i]] = Number(
+        useCssVar(`--breakpoint-${breakpoints[i]}`, document.documentElement).value.slice(0, -2),
+      )
     }
 
     // Set RTL