diff --git a/assets/vue/App.vue b/assets/vue/App.vue
index d41e3c1db6..45b106ce87 100644
--- a/assets/vue/App.vue
+++ b/assets/vue/App.vue
@@ -1,190 +1,11 @@
 <template>
-  <q-layout view="hHh LpR lff" class="bg-grey-1">
-    <q-header bordered class="bg-white text-grey-8" height-hint="64">
-      <q-toolbar>
-        <q-btn
-            flat
-            dense
-            round
-            @click="isSidebarOpen = !isSidebarOpen"
-            aria-label="Menu"
-            icon="menu"
-            class="q-mr-sm"
-        />
-        <q-toolbar-title v-if="$q.screen.gt.xs" shrink class="row items-center no-wrap">
-          <img style="width:200px" src="/build/css/themes/chamilo/images/header-logo.png" />
-        </q-toolbar-title>
-
-        <q-space />
-
-        <div v-if="isAuthenticated"  class="GPLAY__toolbar-input-container row no-wrap">
-          <q-tabs v-if="$q.screen.gt.xs" align="center" dense inline-label>
-            <q-route-tab dense no-caps icon="home"  to="/" label="Home" />
-            <q-route-tab no-caps icon="book" to="/courses" label="My courses" />
-            <q-route-tab no-caps icon="event" to="/main/calendar/agenda_js.php?type=personal" label="Agenda" />
-          </q-tabs>
-          <q-tabs v-else align="center" dense inline-label>
-            <q-route-tab dense no-caps icon="home"  to="/"  />
-            <q-route-tab no-caps icon="book" to="/courses" />
-            <q-route-tab no-caps icon="event" to="/main/calendar/agenda_js.php?type=personal" />
-          </q-tabs>
-        </div>
-
-        <q-space />
-
-        <div class="q-gutter-sm row items-center no-wrap">
-          <!--          <q-btn v-if="$q.screen.gt.sm" round dense flat color="text-grey-7" icon="apps">-->
-          <!--            <q-tooltip>Google Apps</q-tooltip>-->
-          <!--          </q-btn>-->
-          <q-btn v-if="isAuthenticated" round dense flat color="grey-8" icon="notifications">
-            <q-badge color="red" text-color="white" floating>
-              2
-            </q-badge>
-            <q-tooltip>Notifications</q-tooltip>
-          </q-btn>
-
-          <q-btn v-if="!isAuthenticated"
-                 :to="{ name: 'Login'}"
-                 color="primary"
-                 icon="mail"
-                 label="Login"
-          />
-
-          <!--          <Button v-if="!isAuthenticated" :to="{ name: 'Login' }" label="Login" class="p-button-sm"    />-->
-
-
-          <!--          <q-btn v-if="isAuthenticated" round flat>-->
-          <!--            <q-avatar size="26px">-->
-          <!--              <img src="https://cdn.quasar.dev/img/boy-avatar.png">-->
-          <!--            </q-avatar>-->
-          <!--            <q-tooltip>Account</q-tooltip>-->
-          <!--          </q-btn>-->
-
-          <q-btn v-if="isAuthenticated" dense flat no-wrap>
-            <q-avatar size="26px">
-              <img :src="userAvatar + '?w=80&h=80&fit=crop'" />
-              <!--              <q-icon name="person" ></q-icon>-->
-            </q-avatar>
-
-            <q-icon name="arrow_drop_down" size="16px" />
-            <q-menu auto-close>
-              <q-list dense>
-                <q-item class="GL__menu-link-signed-in">
-                  <q-item-section>
-                    <div>Signed in as <strong>{{ currentUser.username }}</strong></div>
-                  </q-item-section>
-                </q-item>
-                <!--                <q-separator />-->
-                <!--                <q-item clickable class="GL__menu-link-status">-->
-                <!--                  <q-item-section>-->
-                <!--                    <div>-->
-                <!--                      <q-icon name="tag_faces" color="blue-9" size="18px" />-->
-                <!--                      Set your status-->
-                <!--                    </div>-->
-                <!--                  </q-item-section>-->
-                <!--                </q-item>-->
-                <q-separator />
-                <q-item replace :to="'/main/messages/index.php'"  clickable class="">
-                  <q-item-section>Inbox</q-item-section>
-                </q-item>
-                <q-item href="/account/home" tag="a" class="">
-                  <q-item-section>
-                    Your profile
-                  </q-item-section>
-                </q-item>
-                <q-item href="/account/edit" tag="a"  class="">
-                  <q-item-section>Settings</q-item-section>
-                </q-item>
-                <q-item href="/logout" tag="a" clickable class="">
-                  <q-item-section>
-                    Sign out
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-menu>
-          </q-btn>
-        </div>
-      </q-toolbar>
-    </q-header>
-
-    <q-drawer
-        v-model="isSidebarOpen"
-        show-if-above
-        bordered
-        content-class="bg-white"
-        :width="280"
-        :breakpoint="500"
-    >
-      <q-scroll-area class="fit">
-        <q-list v-if="isAuthenticated" padding class="text-grey-8">
-
-          <q-item class="GNL__drawer-item" v-ripple v-for="link in links1" :key="link.text" :to="link.url" clickable>
-            <q-item-section avatar>
-<!--              <q-icon :name="link.icon" />-->
-              <font-awesome-icon :icon="link.icon" size="lg" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>{{ link.text }}</q-item-label>
-            </q-item-section>
-          </q-item>
-
-          <q-separator inset class="q-my-sm" />
-
-          <q-item class="GNL__drawer-item" v-ripple v-for="link in links2" :key="link.text" :to="link.url"  clickable>
-            <q-item-section avatar>
-<!--              <q-icon :name="link.icon" />-->
-              <font-awesome-icon :icon="link.icon" size="lg" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>{{ link.text }}</q-item-label>
-            </q-item-section>
-          </q-item>
-
-          <q-separator inset class="q-my-sm" />
-
-          <q-item class="GNL__drawer-item" v-ripple v-for="link in links3" :key="link.text" clickable>
-            <q-item-section>
-              <q-item-label>{{ link.text }}
-<!--                <q-icon v-if="link.icon" :name="link.icon" />-->
-                <font-awesome-icon :icon="link.icon" size="lg" />
-              </q-item-label>
-            </q-item-section>
-          </q-item>
-
-          <div class="q-mt-md">
-            <div class="flex flex-center q-gutter-xs">
-              <a class="GNL__drawer-footer-link" href="javascript:void(0)" aria-label="About">Chamilo</a>
-            </div>
-          </div>
-        </q-list>
-
-        <q-list v-else padding class="text-grey-8">
-          <q-item class="GNL__drawer-item" v-ripple v-for="link in linksAnon" :key="link.text" :to="link.url" clickable>
-            <q-item-section avatar>
-              <q-icon :name="link.icon" />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label>{{ link.text }}</q-item-label>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-scroll-area>
-    </q-drawer>
-    <!--    <q-drawer show-if-above v-model="rightDrawerOpen" side="right" elevated>-->
-    <!--      &lt;!&ndash; drawer content &ndash;&gt;-->
-    <!--    </q-drawer>-->
-
-    <q-page-container>
-      <q-page
-          class="q-layout-padding"
-      >
-        <router-view />
-        <div  id="legacy_content"
-              v-html="legacyContent"
-        />
-      </q-page>
-    </q-page-container>
-  </q-layout>
+  <component :is="layout">
+    <slot />
+    <div
+        id="legacy_content"
+        v-html="legacyContent"
+    />
+  </component>
 </template>
 
 <script>
@@ -192,10 +13,10 @@ import {mapGetters} from 'vuex';
 import NotificationMixin from './mixins/NotificationMixin';
 import Breadcrumb from './components/Breadcrumb.vue';
 import axios from "axios";
-import { onMounted, onUnmounted, ref, computed } from 'vue';
+import { onMounted, onUnmounted, ref, computed, watch } from 'vue';
 import isEmpty from 'lodash/isEmpty';
 import { fasGlobeAmericas, fasFlask } from '@quasar/extras/fontawesome-v5'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 
 import useState from './hooks/useState'
 /*import Sidebar from './components/sidebar/Sidebar.vue'
@@ -219,88 +40,42 @@ export default {
     Breadcrumb,
   },
   setup () {
-    const { isSidebarOpen, isSettingsPanelOpen, isSearchPanelOpen, isNotificationsPanelOpen } = useState();
-
     const { currentRoute } = useRouter();
     const layout = computed(
         () => `${currentRoute.value.meta.layout || defaultLayout}Layout`
     );
-    const rightDrawerOpen = ref(false);
-    //console.log('isSidebarOpen');console.log(isSidebarOpen.value);
+    const route = useRoute();
+
+    watch(
+        () => route.meta,
+        async meta => {
+          try {
+            const component = `${meta.layout}.vue`;
+            layout.value = component?.default || defaultLayout
+          } catch (e) {
+            layout.value = defaultLayout
+          }
+        },
+        {immediate: true}
+    )
 
     return {
-      layout,
-      isSettingsPanelOpen,
-      isSearchPanelOpen,
-      isNotificationsPanelOpen,
-      isSidebarOpen,
-      rightDrawerOpen,
-      toggleRightDrawer () {
-        rightDrawerOpen.value = !rightDrawerOpen.value
-      }
+      layout
     }
   },
-  mixins: [NotificationMixin],
+
   data: () => ({
     user: {},
     userAvatar: '',
     firstTime: false,
-    search: '',
-    showAdvanced: false,
-    showDateOptions: false,
-    exactPhrase: '',
-    hasWords: '',
-    excludeWords: '',
-    byWebsite: '',
-    byDate: 'Any time',
-    moved: true,
-    links1: [
-      // { icon: 'person', url: '/courses', text: 'My courses' },
-      // { icon: 'star_border', url: '/sessions', text: 'Sessions' },
-      //{ icon: 'star_border', url: '/calendar', text: 'My calendar' },
-      { icon: 'compass', url: '/catalog', text: 'Explore' },
-      // { icon: 'star_border', url: '/news', text: 'News' },
-    ],
-    links2: [
-      { icon: 'users', url: '/main/admin/user_list.php', text: 'Users' },
-      { icon: 'book', url: '/main/admin/course_list.php', text: 'Courses' },
-      { icon: 'book-open',  url: '/main/session/session_list.php', text: 'Sessions' },
-      //{ icon: fasFlask, url: '/main/admin/index.php', text: 'Administration' },
-      { icon: 'cogs', url: '/main/admin/index.php', text: 'Administration' },
-    ],
-    links3: [
-      //{ icon: '', text: 'Settings' },
-      // { icon: 'open_in_new', text: 'open in new' },
-    ],
-    linksAnon: [
-      { icon: 'home', url: '/', text: 'Home' },
-    ],
-    drawer: true,
-    breadcrumb: [],
-    languageArray: ['en', 'fr'],
-    courses: [
-      ['Courses', 'mdi-book', 'CourseList'],
-      ['Courses category', 'mdi-book', 'CourseCategoryList'],
-    ],
-    /*cruds: [
-      ['Create', 'add'],
-      ['Read', 'insert_drive_file'],
-      ['Update', 'update'],
-      ['Delete', 'delete'],
-    ],*/
     legacyContent: '',
   }),
-  computed: {
-    ...mapGetters({
-      'isAuthenticated': 'security/isAuthenticated',
-      'isAdmin': 'security/isAdmin',
-      'currentUser': 'security/getUser',
-    }),
-  },
+
   watch: {
     $route() {
       console.log('App.vue watch $route');
       console.log(this.$route.name);
+
       //let content = document.getElementById("sectionMainContent");
       this.legacyContent = '';
       /*if (content && false === this.contentLoaded) {
@@ -382,11 +157,12 @@ export default {
       immediate: true
     },
   },
+
   created() {
-    console.log('created');
-    let app = document.getElementById('app');
+    console.log('APP created');
     this.legacyContent = '';
     console.log('updated empty created');
+    let app = document.getElementById('app');
 
     let isAuthenticated = false;
     if (!isEmpty(window.user)) {
@@ -396,19 +172,10 @@ export default {
       this.userAvatar = window.userAvatar;
       isAuthenticated = true;
     }
-
-    /*if (app && app.attributes["data-user-json"].value) {
-      this.user = JSON.parse(app.attributes["data-user-json"].value);
-      this.userAvatar = app.attributes["data-user-avatar"].value;
-    }*/
     console.log(this.user);
     let payload = {isAuthenticated: isAuthenticated, user: this.user};
     this.$store.dispatch("security/onRefresh", payload);
 
-    if (isAuthenticated) {
-      this.links1.unshift({icon: 'user-circle', url: '/account/profile', text: this.currentUser.username});
-    }
-
     if (app && app.attributes["data-flashes"]) {
       let flashes = JSON.parse(app.attributes["data-flashes"].value);
       if (flashes) {
@@ -449,22 +216,13 @@ export default {
     console.log('app.vue mounted');
     this.firstTime = true;
   },
-  methods: {
-    dropdownHandler(event) {
-      let single = event.currentTarget.getElementsByTagName("ul")[0];
-      single.classList.toggle("hidden");
-    },
-    sidebarHandler() {
-      var sideBar = document.getElementById("mobile-nav");
-      sideBar.style.transform = "translateX(-260px)";
-      if (this.$data.moved) {
-        sideBar.style.transform = "translateX(0px)";
-        this.$data.moved = false;
-      } else {
-        sideBar.style.transform = "translateX(-260px)";
-        this.$data.moved = true;
-      }
-    },
+  mixins: [NotificationMixin],
+  computed: {
+    ...mapGetters({
+      'isAuthenticated': 'security/isAuthenticated',
+      'isAdmin': 'security/isAdmin',
+      'currentUser': 'security/getUser',
+    }),
   }
 }
 </script>
\ No newline at end of file
diff --git a/assets/vue/components/layout/DashboardLayout.vue b/assets/vue/components/layout/DashboardLayout.vue
index e27864b3df..d85a48a360 100644
--- a/assets/vue/components/layout/DashboardLayout.vue
+++ b/assets/vue/components/layout/DashboardLayout.vue
@@ -1,27 +1,300 @@
 <template>
-  <div class="flex h-screen bg-gray-200 font-roboto">
-    <Sidebar />
+  <q-layout view="hHh LpR lff" class="bg-grey-1">
+    <q-header bordered class="bg-white text-grey-8" height-hint="64">
+      <q-toolbar>
+        <q-btn
+            flat
+            dense
+            round
+            @click="isSidebarOpen = !isSidebarOpen"
+            aria-label="Menu"
+            icon="menu"
+            class="q-mr-sm"
+        />
+        <q-toolbar-title v-if="$q.screen.gt.xs" shrink class="row items-center no-wrap">
+          <img style="width:200px" src="/build/css/themes/chamilo/images/header-logo.png" />
+        </q-toolbar-title>
 
-    <div class="flex-1 flex flex-col overflow-hidden">
-      <Header />
+        <q-space />
 
-      <main class="flex-1 overflow-x-hidden overflow-y-auto bg-gray-100">
-        <div class="container mx-auto px-6 py-4">
-          <slot />
+        <div v-if="isAuthenticated"  class="GPLAY__toolbar-input-container row no-wrap">
+          <q-tabs v-if="$q.screen.gt.xs" align="center" dense inline-label>
+            <q-route-tab dense no-caps icon="home"  to="/" label="Home" />
+            <q-route-tab no-caps icon="book" to="/courses" label="My courses" />
+            <q-route-tab no-caps icon="event" to="/main/calendar/agenda_js.php?type=personal" label="Agenda" />
+          </q-tabs>
+          <q-tabs v-else align="center" dense inline-label>
+            <q-route-tab dense no-caps icon="home"  to="/"  />
+            <q-route-tab no-caps icon="book" to="/courses" />
+            <q-route-tab no-caps icon="event" to="/main/calendar/agenda_js.php?type=personal" />
+          </q-tabs>
         </div>
-      </main>
-    </div>
-  </div>
+
+        <q-space />
+
+        <div class="q-gutter-sm row items-center no-wrap">
+          <!--          <q-btn v-if="$q.screen.gt.sm" round dense flat color="text-grey-7" icon="apps">-->
+          <!--            <q-tooltip>Google Apps</q-tooltip>-->
+          <!--          </q-btn>-->
+          <q-btn v-if="isAuthenticated" round dense flat color="grey-8" icon="notifications">
+            <q-badge color="red" text-color="white" floating>
+              2
+            </q-badge>
+            <q-tooltip>Notifications</q-tooltip>
+          </q-btn>
+
+          <q-btn v-if="!isAuthenticated"
+                 :to="{ name: 'Login'}"
+                 color="primary"
+                 icon="mail"
+                 label="Login"
+          />
+
+          <!--          <Button v-if="!isAuthenticated" :to="{ name: 'Login' }" label="Login" class="p-button-sm"    />-->
+
+
+          <!--          <q-btn v-if="isAuthenticated" round flat>-->
+          <!--            <q-avatar size="26px">-->
+          <!--              <img src="https://cdn.quasar.dev/img/boy-avatar.png">-->
+          <!--            </q-avatar>-->
+          <!--            <q-tooltip>Account</q-tooltip>-->
+          <!--          </q-btn>-->
+
+          <q-btn v-if="isAuthenticated" dense flat no-wrap>
+            <q-avatar size="26px">
+              <img :src="userAvatar + '?w=80&h=80&fit=crop'" />
+              <!--              <q-icon name="person" ></q-icon>-->
+            </q-avatar>
+
+            <q-icon name="arrow_drop_down" size="16px" />
+            <q-menu auto-close>
+              <q-list dense>
+                <q-item class="GL__menu-link-signed-in">
+                  <q-item-section>
+                    <div>Signed in as <strong>{{ currentUser.username }}</strong></div>
+                  </q-item-section>
+                </q-item>
+                <!--                <q-separator />-->
+                <!--                <q-item clickable class="GL__menu-link-status">-->
+                <!--                  <q-item-section>-->
+                <!--                    <div>-->
+                <!--                      <q-icon name="tag_faces" color="blue-9" size="18px" />-->
+                <!--                      Set your status-->
+                <!--                    </div>-->
+                <!--                  </q-item-section>-->
+                <!--                </q-item>-->
+                <q-separator />
+                <q-item replace :to="'/main/messages/index.php'"  clickable class="">
+                  <q-item-section>Inbox</q-item-section>
+                </q-item>
+                <q-item href="/account/home" tag="a" class="">
+                  <q-item-section>
+                    Your profile
+                  </q-item-section>
+                </q-item>
+                <q-item href="/account/edit" tag="a"  class="">
+                  <q-item-section>Settings</q-item-section>
+                </q-item>
+                <q-item href="/logout" tag="a" clickable class="">
+                  <q-item-section>
+                    Sign out
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </div>
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer
+        v-model="isSidebarOpen"
+        show-if-above
+        bordered
+        content-class="bg-white"
+        :width="280"
+        :breakpoint="500"
+    >
+      <q-scroll-area class="fit">
+        <q-list v-if="isAuthenticated" padding class="text-grey-8">
+
+          <q-item class="GNL__drawer-item" v-ripple v-for="link in links1" :key="link.text" :to="link.url" clickable>
+            <q-item-section avatar>
+              <!--              <q-icon :name="link.icon" />-->
+              <font-awesome-icon :icon="link.icon" size="lg" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>{{ link.text }}</q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-separator inset class="q-my-sm" />
+
+          <q-item class="GNL__drawer-item" v-ripple v-for="link in links2" :key="link.text" :to="link.url"  clickable>
+            <q-item-section avatar>
+              <!--              <q-icon :name="link.icon" />-->
+              <font-awesome-icon :icon="link.icon" size="lg" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>{{ link.text }}</q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <q-separator inset class="q-my-sm" />
+
+          <q-item class="GNL__drawer-item" v-ripple v-for="link in links3" :key="link.text" clickable>
+            <q-item-section>
+              <q-item-label>{{ link.text }}
+                <!--                <q-icon v-if="link.icon" :name="link.icon" />-->
+                <font-awesome-icon :icon="link.icon" size="lg" />
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+
+          <div class="q-mt-md">
+            <div class="flex flex-center q-gutter-xs">
+              <a class="GNL__drawer-footer-link" href="javascript:void(0)" aria-label="About">Chamilo</a>
+            </div>
+          </div>
+        </q-list>
+
+        <q-list v-else padding class="text-grey-8">
+          <q-item class="GNL__drawer-item" v-ripple v-for="link in linksAnon" :key="link.text" :to="link.url" clickable>
+            <q-item-section avatar>
+              <q-icon :name="link.icon" />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>{{ link.text }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-scroll-area>
+    </q-drawer>
+    <!--    <q-drawer show-if-above v-model="rightDrawerOpen" side="right" elevated>-->
+    <!--      &lt;!&ndash; drawer content &ndash;&gt;-->
+    <!--    </q-drawer>-->
+
+    <q-page-container>
+      <q-page
+          class="q-layout-padding"
+      >
+        <router-view />
+        <slot></slot>
+
+      </q-page>
+    </q-page-container>
+  </q-layout>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from "vue";
-import Sidebar from "./../sidebar/Sidebar.vue";
-import Header from "./../sidebar/Header.vue";
-export default defineComponent({
+<script>
+import {mapGetters} from "vuex";
+import isEmpty from "lodash/isEmpty";
+import useState from "../../hooks/useState";
+import {useRouter} from "vue-router";
+import {computed, ref} from "vue";
+import axios from "axios";
+
+export default {
+  name: "DashboardLayout",
   components: {
-    Header,
-    Sidebar,
   },
-});
+  setup () {
+    const { isSidebarOpen, isSettingsPanelOpen, isSearchPanelOpen, isNotificationsPanelOpen } = useState();
+    const rightDrawerOpen = ref(false);
+
+    return {
+      isSettingsPanelOpen,
+      isSearchPanelOpen,
+      isNotificationsPanelOpen,
+      isSidebarOpen,
+      rightDrawerOpen,
+      toggleRightDrawer () {
+        rightDrawerOpen.value = !rightDrawerOpen.value
+      }
+    }
+  },
+
+  data: () => ({
+    user: {},
+    userAvatar: '',
+    moved: true,
+    links1: [
+      // { icon: 'person', url: '/courses', text: 'My courses' },
+      // { icon: 'star_border', url: '/sessions', text: 'Sessions' },
+      //{ icon: 'star_border', url: '/calendar', text: 'My calendar' },
+      { icon: 'compass', url: '/catalog', text: 'Explore' },
+      // { icon: 'star_border', url: '/news', text: 'News' },
+    ],
+    links2: [
+      { icon: 'users', url: '/main/admin/user_list.php', text: 'Users' },
+      { icon: 'book', url: '/main/admin/course_list.php', text: 'Courses' },
+      { icon: 'book-open',  url: '/main/session/session_list.php', text: 'Sessions' },
+      //{ icon: fasFlask, url: '/main/admin/index.php', text: 'Administration' },
+      { icon: 'cogs', url: '/main/admin/index.php', text: 'Administration' },
+    ],
+    links3: [
+      //{ icon: '', text: 'Settings' },
+      // { icon: 'open_in_new', text: 'open in new' },
+    ],
+    linksAnon: [
+      { icon: 'home', url: '/', text: 'Home' },
+    ],
+    drawer: true,
+    breadcrumb: [],
+    languageArray: ['en', 'fr'],
+    courses: [
+      ['Courses', 'mdi-book', 'CourseList'],
+      ['Courses category', 'mdi-book', 'CourseCategoryList'],
+    ],
+  }),
+  created() {
+    console.log('dashboard created');
+    this.legacyContent = '';
+    console.log('updated empty created');
+
+    let isAuthenticated = false;
+    if (!isEmpty(window.user)) {
+      console.log('is logged in as ' + window.user.username);
+      console.log('userAvatar ' + window.userAvatar);
+      this.user = window.user;
+      this.userAvatar = window.userAvatar;
+      isAuthenticated = true;
+    }
+
+    /*if (app && app.attributes["data-user-json"].value) {
+      this.user = JSON.parse(app.attributes["data-user-json"].value);
+      this.userAvatar = app.attributes["data-user-avatar"].value;
+    }*/
+    //console.log(this.user);
+    //let payload = {isAuthenticated: isAuthenticated, user: this.user};
+    //this.$store.dispatch("security/onRefresh", payload);
+    if (isAuthenticated) {
+      this.links1.unshift({icon: 'user-circle', url: '/account/profile', text: this.currentUser.username});
+    }
+  },
+  computed: {
+    ...mapGetters({
+      'isAuthenticated': 'security/isAuthenticated',
+      'isAdmin': 'security/isAdmin',
+      'currentUser': 'security/getUser',
+    }),
+  },
+  methods: {
+    dropdownHandler(event) {
+      let single = event.currentTarget.getElementsByTagName("ul")[0];
+      single.classList.toggle("hidden");
+    },
+    sidebarHandler() {
+      var sideBar = document.getElementById("mobile-nav");
+      sideBar.style.transform = "translateX(-260px)";
+      if (this.$data.moved) {
+        sideBar.style.transform = "translateX(0px)";
+        this.$data.moved = false;
+      } else {
+        sideBar.style.transform = "translateX(-260px)";
+        this.$data.moved = true;
+      }
+    },
+  },
+}
 </script>
\ No newline at end of file
diff --git a/assets/vue/components/layout/EmptyLayout.vue b/assets/vue/components/layout/EmptyLayout.vue
index b946e4f5f3..fb124a704a 100644
--- a/assets/vue/components/layout/EmptyLayout.vue
+++ b/assets/vue/components/layout/EmptyLayout.vue
@@ -1,6 +1,15 @@
 <template>
   <div class="flex flex-col items-center justify-center min-h-screen p-4 space-y-4 antialiased text-gray-900 bg-white">
+    <router-view />
     <slot></slot>
   </div>
 </template>
 
+<script>
+export default {
+  name: "EmptyLayout",
+  components: {},
+  setup() {
+  }
+}
+</script>
\ No newline at end of file
diff --git a/assets/vue/router/index.js b/assets/vue/router/index.js
index 6b97733416..619a567f00 100644
--- a/assets/vue/router/index.js
+++ b/assets/vue/router/index.js
@@ -23,7 +23,14 @@ const router = createRouter({
     history: createWebHistory(),
     routes: [
         {path: '/', name: 'Home', component: Index},
-        {path: '/login', name: 'Login', component: Login},
+        {
+            path: '/login',
+            name: 'Login',
+            component: Login,
+            meta: {
+                layout: 'Empty'
+            }
+        },
         {
             path: '/course/:id/home', name: 'CourseHome', component: CourseHome
         },
diff --git a/assets/vue/store/index.js b/assets/vue/store/index.js
index 81cbb37340..56881c743b 100644
--- a/assets/vue/store/index.js
+++ b/assets/vue/store/index.js
@@ -4,7 +4,7 @@ import SecurityModule from "./security";
 import createPersistedState from "vuex-persistedstate";
 //createLogger(),
 export default createStore({
-    plugins: [createPersistedState()],
+    plugins: [createLogger(), createPersistedState()],
     modules: {
         notifications,
         security: SecurityModule,
diff --git a/assets/vue/views/Login.vue b/assets/vue/views/Login.vue
index 30f0c92a92..abfc6595a3 100644
--- a/assets/vue/views/Login.vue
+++ b/assets/vue/views/Login.vue
@@ -69,6 +69,7 @@ import { LockClosedIcon } from '@heroicons/vue/solid'
 import useState from "../hooks/useState";
 import {ref} from "vue";
 import {useRoute, useRouter} from "vue-router";
+import isEmpty from "lodash/isEmpty";
 
 export default {
     name: "Login",
@@ -80,7 +81,6 @@ export default {
       const { isSidebarOpen } = useState();
       const route = useRoute();
       const router = useRouter();
-
       const store = useStore();
 
       const login = ref('');
@@ -124,6 +124,7 @@ export default {
         password
       }
     },
+
     computed: {
         ...mapGetters({
             'isLoading': 'security/isLoading',
diff --git a/assets/vue/views/course/Home.vue b/assets/vue/views/course/Home.vue
index 0e89c373ff..3c728a1228 100644
--- a/assets/vue/views/course/Home.vue
+++ b/assets/vue/views/course/Home.vue
@@ -24,7 +24,6 @@
             >
               {{ tool.nameToTranslate }}
             </a>
-<!--            <q-btn flat icon="visibility"></q-btn>-->
             <button @click="changeVisibility(course, tool)">
               <font-awesome-icon
                   v-if="tool.resourceNode.resourceLinks[0].visibility === 2"
@@ -38,7 +37,6 @@
           </div>
         </div>
       </div>
-
     </div>
   </div>
 </template>
@@ -82,8 +80,6 @@ export default {
     }
 
     function changeVisibility(course, tool) {
-      console.log(tool);
-      //r/course_tool/links/
       axios.post(ENTRYPOINT + '../r/course_tool/links/' + tool.resourceNode.id + '/change_visibility').then(response => {
         if (response.data.ok) {
           tool.resourceNode.resourceLinks[0].visibility = response.data.visibility;