diff --git a/client/package.json b/client/package.json
index 8c608b45..1831a831 100644
--- a/client/package.json
+++ b/client/package.json
@@ -25,7 +25,7 @@
     "cypress:parallel:run": "cy2 run --parallel --record  --config-file cypress.frontend.json --ci-build-id "
   },
   "dependencies": {
-    "@apollo/client": "^3.5.8",
+    "@apollo/client": "^3.5.10",
     "@babel/core": "^7.16.7",
     "@babel/eslint-plugin": "^7.16.5",
     "@babel/plugin-transform-runtime": "^7.5.0",
@@ -46,6 +46,8 @@
     "@tiptap/vue-2": "^2.0.0-beta.77",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
+    "@vue/apollo-option": "^4.0.0-alpha.16",
+    "@vue/compiler-sfc": "3.2.30",
     "@vue/compat": "3.2.31",
     "@vue/test-utils": "^1.3.0",
     "@vue/vue2-jest": "^27.0.0",
@@ -96,12 +98,10 @@
     "uploadcare-widget": "^3.6.0",
     "url-loader": "^1.0.1",
     "vee-validate": "^4.5.10",
-    "@vee-validate/rules": "^4.5.10",
-    "vue": "^3.2.31",
-    "vue-apollo": "^3.1.0",
+    "vue": "3.2.30",
     "vue-loader": "^16.8.3",
     "vue-matomo": "^4.1.0",
-    "vue-router": "^3.5.3",
+    "vue-router": "^4.0.14",
     "vue-scrollto": "^2.20.0",
     "vue-style-loader": "^3.0.1",
     "vue-vimeo-player": "^0.2.2",
diff --git a/client/src/components/BackLink.vue b/client/src/components/BackLink.vue
index 0fb0651f..89613070 100644
--- a/client/src/components/BackLink.vue
+++ b/client/src/components/BackLink.vue
@@ -1,68 +1,75 @@
 <template>
-  <router-link :to="to" data-cy="back-link" class="sub-navigation-item back-link">
+  <router-link
+    :to="to"
+    class="sub-navigation-item back-link"
+  >
     <chevron-left class="back-link__icon sub-navigation-item__icon" />
     {{ fullTitle }}
   </router-link>
 </template>
 
 <script>
-import { MODULE_PAGE } from '@/router/module.names';
-import { ROOMS_PAGE } from '@/router/room.names';
-import { PROJECTS_PAGE } from '@/router/portfolio.names';
+  import { MODULE_PAGE } from '@/router/module.names';
+  import { ROOMS_PAGE } from '@/router/room.names';
+  import { PROJECTS_PAGE } from '@/router/portfolio.names';
 
-const ChevronLeft = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronLeft');
+  const ChevronLeft = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronLeft');
 
-export default {
-  props: {
-    title: {
-      type: String,
-      default: '',
+  export default {
+    props: {
+      title: {
+        type: String,
+        default: '',
+      },
+      type: {
+        type: String,
+        default: 'topic',
+      },
+      slug: {
+        type: String,
+        default: '',
+      },
     },
-    type: {
-      type: String,
-      default: 'topic',
-    },
-    slug: {
-      type: String,
-      default: '',
-    },
-  },
 
-  components: {
-    ChevronLeft,
-  },
+    components: {
+      ChevronLeft,
+    },
 
-  computed: {
-    to() {
-      switch (this.type) {
-        case 'topic':
-          return { name: 'topic', params: { topicSlug: this.slug } };
-        case 'module':
-          return { name: MODULE_PAGE };
-        case 'portfolio':
-          return { name: PROJECTS_PAGE };
-        default:
-          return { name: ROOMS_PAGE };
-      }
+    computed: {
+      to() {
+        switch (this.type) {
+          case 'topic':
+            if (this.slug) {
+              return {name: 'topic', params: {topicSlug: this.slug}};
+            } else {
+              return {};
+            }
+          case 'module':
+            return {name: MODULE_PAGE};
+          case 'portfolio':
+            return {name: PROJECTS_PAGE};
+          default:
+            return {name: ROOMS_PAGE};
+        }
+      },
+      fullTitle() {
+        switch (this.type) {
+          case 'topic':
+            return `${this.$flavor.textTopic}: ${this.title}`;
+          case 'module':
+            return `${this.$flavor.textModule}: ${this.title}`;
+          default:
+            return this.title;
+        }
+      },
     },
-    fullTitle() {
-      switch (this.type) {
-        case 'topic':
-          return `${this.$flavor.textTopic}: ${this.title}`;
-        case 'module':
-          return `${this.$flavor.textModule}: ${this.title}`;
-        default:
-          return this.title;
-      }
-    },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import '~styles/helpers';
 
-.back-link {
-  @include regular-text;
-}
+  .back-link {
+    @include regular-text;
+  }
 </style>
diff --git a/client/src/components/ScrollUp.vue b/client/src/components/ScrollUp.vue
index 10fd05fb..b031cdef 100644
--- a/client/src/components/ScrollUp.vue
+++ b/client/src/components/ScrollUp.vue
@@ -1,73 +1,78 @@
 <template>
   <transition name="fade">
-    <a class="scroll-up" v-if="scroll > 200" @click="scrollTop">
+    <a
+      class="scroll-up"
+      v-if="scroll>200"
+      @click="scrollTop"
+    >
       <arrow-up class="scroll-up__icon" />
     </a>
   </transition>
 </template>
 
 <script>
-const ArrowUp = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowUp');
+  const ArrowUp = () => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowUp');
 
-export default {
-  components: {
-    ArrowUp,
-  },
-
-  data() {
-    return {
-      scroll: 0,
-    };
-  },
-
-  mounted() {
-    let html = document.scrollingElement;
-    document.body.onscroll = () => {
-      this.scroll = html.scrollTop;
-    };
-  },
-
-  unmounted() {
-    document.body.onscroll = null;
-  },
-
-  methods: {
-    scrollTop() {
-      document.scrollingElement.scrollTop = 0;
+  export default {
+    components: {
+      ArrowUp
     },
-  },
-};
+
+    data() {
+      return {
+        scroll: 0
+      };
+    },
+
+    mounted() {
+      let html = document.scrollingElement;
+      document.body.onscroll = () => {
+        this.scroll = html.scrollTop;
+      };
+    },
+
+    unmounted() {
+      document.body.onscroll = null;
+    },
+
+    methods: {
+      scrollTop() {
+        document.scrollingElement.scrollTop = 0;
+      }
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
-@import '@/styles/_mixins.scss';
+  @import '@/styles/_variables.scss';
+  @import '@/styles/_mixins.scss';
 
-.scroll-up {
-  position: fixed;
-  right: $large-spacing;
-  bottom: $large-spacing;
-  padding: $medium-spacing;
-  border-radius: 100px;
-  @include default-box-shadow;
-  cursor: pointer;
-  background-color: $color-white;
-  border: 1px solid $color-silver;
-  z-index: 2;
+  .scroll-up {
+    position: fixed;
+    right: $large-spacing;
+    bottom: $large-spacing;
+    padding: $medium-spacing;
+    border-radius: 100px;
+    @include default-box-shadow;
+    cursor: pointer;
+    background-color: $color-white;
+    border: 1px solid $color-silver;
+    z-index: 2;
+
+    &__icon {
+      width: 50px;
+      height: 50px;
+      fill: $color-brand;
+    }
 
-  &__icon {
-    width: 50px;
-    height: 50px;
-    fill: $color-brand;
   }
-}
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s;
-}
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .3s;
+  }
 
-.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  opacity: 0;
-}
+  .fade-enter-from, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
+  {
+    opacity: 0;
+  }
 </style>
diff --git a/client/src/components/book-navigation/NavigationSidebar.vue b/client/src/components/book-navigation/NavigationSidebar.vue
index 5ca4ed74..6b015508 100644
--- a/client/src/components/book-navigation/NavigationSidebar.vue
+++ b/client/src/components/book-navigation/NavigationSidebar.vue
@@ -1,8 +1,18 @@
 <template>
   <transition name="slide">
-    <div class="navigation-sidebar" v-if="sidebar.navigation" v-click-outside="close">
-      <content-navigation :is-sidebar="true" class="navigation-sidebar__main" />
-      <div class="navigation-sidebar__close-button" @click="close">
+    <div
+      class="navigation-sidebar"
+      v-if="sidebar.navigation"
+      v-click-outside="close"
+    >
+      <content-navigation
+        :is-sidebar="true"
+        class="navigation-sidebar__main"
+      />
+      <div
+        class="navigation-sidebar__close-button"
+        @click="close"
+      >
         <cross class="navigation-sidebar__close-icon" />
       </div>
     </div>
@@ -10,94 +20,93 @@
 </template>
 
 <script>
-import ContentNavigation from '@/components/book-navigation/ContentNavigation';
+  import ContentNavigation from '@/components/book-navigation/ContentNavigation';
 
-import sidebarMixin from '@/mixins/sidebar';
+  import sidebarMixin from '@/mixins/sidebar';
 
-const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
+  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
 
-export default {
-  mixins: [sidebarMixin],
+  export default {
+    mixins: [sidebarMixin],
 
-  components: {
-    ContentNavigation,
-    Cross,
-  },
-
-  methods: {
-    close() {
-      this.closeSidebar('navigation');
+    components: {
+      ContentNavigation,
+      Cross
     },
-  },
-};
+
+    methods: {
+      close() {
+        this.closeSidebar('navigation');
+      }
+    },
+
+  };
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/_variables.scss';
-@import '@/styles/_mixins.scss';
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
-$desktop-width: 285px;
+  $desktop-width: 285px;
 
-.navigation-sidebar {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  background-color: white;
-  z-index: 20;
+  .navigation-sidebar {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    background-color: white;
+    z-index: 20;
 
-  @include desktop {
-    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.12);
-  }
-
-  display: grid;
-
-  grid-template-columns: 1fr 50px;
-  grid-template-rows: 50px max-content auto 100px;
-
-  grid-template-areas: 'm m' 'm m' 's s' 's s';
-
-  &--with-subnavigation {
-    grid-template-areas: 'm m' 'm m' 'sub sub' 's s';
-  }
-
-  height: 100vh;
-  overflow-y: auto;
-
-  @include desktop {
-    width: $desktop-width;
-  }
-
-  &__main {
-    padding: $medium-spacing;
-    grid-area: m;
-  }
-
-  &__main-link {
-  }
-
-  &__close-button {
-    grid-row: 1;
-    grid-column: 2;
-    align-self: center;
-    justify-self: center;
-    cursor: pointer;
-  }
-}
-
-.slide {
-  &-enter-active,
-  &-leave-active {
-    transition: left 0.2s;
-  }
-
-  &-enter,
-  &-leave-to {
-    left: -100vw;
     @include desktop {
-      left: -$desktop-width;
+      box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.12);
+    }
+
+    display: grid;
+
+    grid-template-columns: 1fr 50px;
+    grid-template-rows: 50px max-content auto 100px;
+
+    grid-template-areas: "m m" "m m" "s s" "s s";
+
+    &--with-subnavigation {
+      grid-template-areas: "m m" "m m" "sub sub" "s s";
+    }
+
+    height: 100vh;
+    overflow-y: auto;
+
+    @include desktop {
+      width: $desktop-width;
+    }
+
+    &__main {
+      padding: $medium-spacing;
+      grid-area: m;
+    }
+
+    &__main-link {
+    }
+
+    &__close-button {
+      grid-row: 1;
+      grid-column: 2;
+      align-self: center;
+      justify-self: center;
+      cursor: pointer;
+    }
+  }
+
+  .slide {
+    &-enter-active, &-leave-active {
+      transition: left 0.2s;
+    }
+
+    &-enter-from, &-leave-to {
+      left: -100vw;
+      @include desktop {
+        left: -$desktop-width;
+      }
     }
   }
-}
 </style>
diff --git a/client/src/components/content-blocks/ContentComponent.vue b/client/src/components/content-blocks/ContentComponent.vue
index 9a9e9b60..93177354 100644
--- a/client/src/components/content-blocks/ContentComponent.vue
+++ b/client/src/components/content-blocks/ContentComponent.vue
@@ -1,5 +1,9 @@
 <template>
-  <div :class="componentClass" :data-scrollto="component.id" data-cy="content-component">
+  <div
+    :class="componentClass"
+    :data-scrollto="component.id"
+    data-cy="content-component"
+  >
     <bookmark-actions
       :bookmarked="bookmarked"
       :note="note"
@@ -9,105 +13,97 @@
       @edit-note="editNote"
       @bookmark="bookmarkContent(component.id, !bookmarked)"
     />
-    <component v-bind="component" :parent="parent" :is="component.type" />
+    <component
+      v-bind="component"
+      :parent="parent"
+      :is="component.type"
+    />
   </div>
 </template>
 
 <script>
-import { constructContentComponentBookmarkMutation } from '@/helpers/update-content-bookmark-mutation';
+import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation';
+import {defineAsyncComponent} from 'vue';
 
-const TextBlock = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/TextBlock');
-const InstrumentWidget = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/InstrumentWidget');
-const ImageBlock = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ImageBlock');
-const ImageUrlBlock = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ImageUrlBlock');
-const VideoBlock = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/VideoBlock');
-const LinkBlock = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/LinkBlock');
-const DocumentBlock = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock');
-const CmsDocumentBlock = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/CmsDocumentBlock');
-const InfogramBlock = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/InfogramBlock');
-const ThinglinkBlock = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ThinglinkBlock');
-const GeniallyBlock = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/GeniallyBlock');
-const SubtitleBlock = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/SubtitleBlock');
-const SectionTitleBlock = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/SectionTitleBlock');
-const ContentListBlock = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ContentListBlock');
-const ModuleRoomSlug = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ModuleRoomSlug');
-const Assignment = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/assignment/Assignment');
-const Survey = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/SurveyBlock');
-const Solution = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Solution');
-const Instruction = () =>
-  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Instruction');
-const BookmarkActions = () => import(/* webpackChunkName: "content-components" */ '@/components/notes/BookmarkActions');
+const TextBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/TextBlock'));
+const InstrumentWidget = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InstrumentWidget'));
+const ImageBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageBlock'));
+const ImageUrlBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageUrlBlock'));
+const VideoBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/VideoBlock'));
+const LinkBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock'));
+const DocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock'));
+const CmsDocumentBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/CmsDocumentBlock'));
+const InfogramBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InfogramBlock'));
+const ThinglinkBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ThinglinkBlock'));
+const GeniallyBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/GeniallyBlock'));
+const SubtitleBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SubtitleBlock'));
+const SectionTitleBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SectionTitleBlock'));
+const ContentListBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentListBlock'));
+const ModuleRoomSlug = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ModuleRoomSlug'));
+const Assignment = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/Assignment'));
+const Survey = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SurveyBlock'));
+const Solution = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution'));
+const Instruction = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Instruction'));
+const BookmarkActions = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/notes/BookmarkActions'));
 
 export default {
   props: {
     component: {
       type: Object,
-      default: () => ({}),
+      default: () => ({})
     },
     parent: {
       type: Object,
-      default: () => ({}),
+      default: () => ({})
     },
     bookmarks: {
       type: Array,
-      default: () => [],
+      default: () => ([])
     },
     notes: {
       type: Array,
-      default: () => [],
+      default: () => ([])
     },
     root: {
       type: String,
-      default: '',
+      default: ''
     },
     editMode: {
       type: Boolean,
-      default: false,
-    },
+      default: false
+    }
   },
 
   components: {
-    text_block: TextBlock,
-    basic_knowledge: InstrumentWidget, // for legacy
-    instrument: InstrumentWidget,
-    image_block: ImageBlock,
-    image_url_block: ImageUrlBlock,
-    video_block: VideoBlock,
-    link_block: LinkBlock,
-    document_block: DocumentBlock,
-    infogram_block: InfogramBlock,
-    genially_block: GeniallyBlock,
-    subtitle: SubtitleBlock,
-    section_title: SectionTitleBlock,
-    content_list: ContentListBlock,
-    module_room_slug: ModuleRoomSlug,
-    thinglink_block: ThinglinkBlock,
-    cms_document_block: CmsDocumentBlock,
+    'text_block': TextBlock,
+    'basic_knowledge': InstrumentWidget, // for legacy
+    'instrument': InstrumentWidget,
+    'image_block': ImageBlock,
+    'image_url_block': ImageUrlBlock,
+    'video_block': VideoBlock,
+    'link_block': LinkBlock,
+    'document_block': DocumentBlock,
+    'infogram_block': InfogramBlock,
+    'genially_block': GeniallyBlock,
+    'subtitle': SubtitleBlock,
+    'section_title': SectionTitleBlock,
+    'content_list': ContentListBlock,
+    'module_room_slug': ModuleRoomSlug,
+    'thinglink_block': ThinglinkBlock,
+    'cms_document_block': CmsDocumentBlock,
     Survey,
     Solution,
     Instruction,
     Assignment,
-    BookmarkActions,
+    BookmarkActions
   },
 
   computed: {
     bookmarked() {
-      return this.bookmarks && !!this.bookmarks.find((bookmark) => bookmark.uuid === this.component.id);
+      return this.bookmarks && !!this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
     },
     note() {
-      const bookmark = this.bookmarks && this.bookmarks.find((bookmark) => bookmark.uuid === this.component.id);
+      const bookmark = this.bookmarks && this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
       return bookmark && bookmark.note;
     },
     showBookmarkActions() {
@@ -119,19 +115,18 @@ export default {
         classes.push('content-component--bookmarked');
       }
       return classes;
-    },
+    }
   },
 
   methods: {
     addNote(id) {
       const type = Object.prototype.hasOwnProperty.call(this.parent, '__typename')
-        ? this.parent.__typename
-        : 'ContentBlockNode';
+        ? this.parent.__typename : 'ContentBlockNode';
 
       this.$store.dispatch('addNote', {
         content: id,
         type,
-        block: this.root,
+        block: this.root
       });
     },
     editNote() {
@@ -139,36 +134,37 @@ export default {
     },
     bookmarkContent(uuid, bookmarked) {
       this.$apollo.mutate(constructContentComponentBookmarkMutation(uuid, bookmarked, this.parent, this.root));
-    },
-  },
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.content-component {
-  position: relative;
+  .content-component {
+    position: relative;
 
-  &--bookmarked {
+    &--bookmarked {
+
+    }
+
+    &--subtitle {
+      margin-top: $section-spacing;
+      margin-bottom: $large-spacing;
+    }
+
+    &--section_title {
+      margin-top: $section-spacing;
+      margin-bottom: $large-spacing;
+    }
+
+    &--text_block {
+      margin-bottom: $large-spacing;
+    }
+
+    &--document_block {
+      margin-bottom: $large-spacing;
+    }
   }
-
-  &--subtitle {
-    margin-top: $section-spacing;
-    margin-bottom: $large-spacing;
-  }
-
-  &--section_title {
-    margin-top: $section-spacing;
-    margin-bottom: $large-spacing;
-  }
-
-  &--text_block {
-    margin-bottom: $large-spacing;
-  }
-
-  &--document_block {
-    margin-bottom: $large-spacing;
-  }
-}
 </style>
diff --git a/client/src/components/content-blocks/Solution.vue b/client/src/components/content-blocks/Solution.vue
index 287e9114..ac08d40d 100644
--- a/client/src/components/content-blocks/Solution.vue
+++ b/client/src/components/content-blocks/Solution.vue
@@ -1,95 +1,114 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
-  <div class="solution" data-cy="solution">
-    <a class="solution__toggle" data-cy="show-solution" @click="toggle"
-      >Lösung
+  <div
+    class="solution"
+    data-cy="solution"
+  >
+    <a
+      class="solution__toggle"
+      data-cy="show-solution"
+      @click="toggle"
+    >Lösung
       <template v-if="!visible">anzeigen</template>
       <template v-else>ausblenden</template>
     </a>
     <transition name="fade">
-      <div class="solution__hidden fade" v-if="visible">
-        <p class="solution__text solution-text" data-cy="solution-text" v-html="sanitizedText" />
-        <cms-document-block :solution="true" class="solution__document" :value="value.document" v-if="value.document" />
+      <div
+        class="solution__hidden fade"
+        v-if="visible"
+      >
+        <p
+          class="solution__text solution-text"
+          data-cy="solution-text"
+
+          v-html="sanitizedText"
+        />
+        <cms-document-block
+          :solution="true"
+          class="solution__document"
+          :value="value.document"
+          v-if="value.document"
+        />
       </div>
     </transition>
   </div>
 </template>
 
 <script>
-import { sanitizeAsHtml } from '@/helpers/text';
-import CmsDocumentBlock from '@/components/content-blocks/CmsDocumentBlock';
+  import {sanitizeAsHtml} from '@/helpers/text';
+  import CmsDocumentBlock from '@/components/content-blocks/CmsDocumentBlock';
 
-export default {
-  props: ['value'],
-  components: { CmsDocumentBlock },
+  export default {
+    props: ['value'],
+    components: {CmsDocumentBlock},
 
-  data() {
-    return {
-      visible: false,
-    };
-  },
-
-  computed: {
-    sanitizedText() {
-      return sanitizeAsHtml(this.value.text);
+    data() {
+      return {
+        visible: false,
+      };
     },
-  },
 
-  methods: {
-    toggle() {
-      this.visible = !this.visible;
+    computed: {
+      sanitizedText() {
+        return sanitizeAsHtml(this.value.text);
+      },
     },
-  },
-};
+
+    methods: {
+      toggle() {
+        this.visible = !this.visible;
+      },
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-.solution {
-  display: grid;
-  grid-auto-rows: auto;
-  grid-row-gap: 15px;
+  .solution {
+    display: grid;
+    grid-auto-rows: auto;
+    grid-row-gap: 15px;
 
-  margin-bottom: 1rem;
+    margin-bottom: 1rem;
 
-  &__toggle {
-    font-family: $sans-serif-font-family;
-    color: $color-silver-dark;
-    font-size: toRem(15px);
-    /*margin-bottom: 15px;*/
-    display: block;
-    cursor: pointer;
-    font-weight: $font-weight-regular;
-  }
-
-  &__text {
-    font-size: toRem(18px);
-    color: $color-silver-dark;
-
-    :deep(p) {
-      font-size: toRem(18px);
+    &__toggle {
+      font-family: $sans-serif-font-family;
       color: $color-silver-dark;
+      font-size: toRem(15px);
+      /*margin-bottom: 15px;*/
+      display: block;
+      cursor: pointer;
+      font-weight: $font-weight-regular;
     }
 
-    :deep(ul) {
-      padding-left: $medium-spacing;
+    &__text {
+      font-size: toRem(18px);
+      color: $color-silver-dark;
 
-      > li {
-        list-style: disc outside none;
+      /deep/ p {
+        font-size: toRem(18px);
         color: $color-silver-dark;
       }
+
+      /deep/ ul {
+        padding-left: $medium-spacing;
+
+        > li {
+          list-style: disc outside none;
+          color: $color-silver-dark;
+        }
+      }
     }
   }
-}
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.3s;
-}
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity .3s;
+  }
 
-.fade-enter,
-.fade-leave-active {
-  opacity: 0;
-}
+  .fade-enter-from,
+  .fade-leave-active {
+    opacity: 0;
+  }
 </style>
diff --git a/client/src/components/modules/ModuleNavigation.vue b/client/src/components/modules/ModuleNavigation.vue
index 54d4cc81..250edb26 100644
--- a/client/src/components/modules/ModuleNavigation.vue
+++ b/client/src/components/modules/ModuleNavigation.vue
@@ -5,6 +5,7 @@
       :slug="module.topic.slug"
       class="module-navigation__topic-link"
       type="topic"
+      v-if="module.topic"
     />
     <div class="module-navigation__module-content" v-if="false">
       <!-- Do not display this for now, might be used later again though -->
diff --git a/client/src/components/profile/Avatar.vue b/client/src/components/profile/Avatar.vue
index ee7ea5f2..94772cd5 100644
--- a/client/src/components/profile/Avatar.vue
+++ b/client/src/components/profile/Avatar.vue
@@ -2,23 +2,31 @@
   <div class="avatar">
     <transition name="fade">
       <default-avatar
-        :class="{ 'avatar__placeholder--highlighted': iconHighlighted }"
+        :class="{'avatar__placeholder--highlighted': iconHighlighted}"
         class="avatar__placeholder"
         v-show="!isAvatarLoaded"
       />
     </transition>
     <transition name="show">
       <div
-        :style="{ 'background-image': `url(${avatarUrl})` }"
+        :style="{'background-image': `url(${avatarUrl})`}"
         class="avatar__image"
         v-show="isAvatarLoaded"
         ref="avatarImage"
       />
     </transition>
-    <img :src="avatarUrl" class="avatar__fake-image" ref="fakeImage" />
+    <img
+      :src="avatarUrl"
+      class="avatar__fake-image"
+      ref="fakeImage"
+    >
 
-    <div class="avatar__edit" v-if="editable" @click="closeSidebar">
-      <router-link :to="{ name: 'profile' }">
+    <div
+      class="avatar__edit"
+      v-if="editable"
+      @click="closeSidebar"
+    >
+      <router-link :to="{name: 'profile'}">
         <pen-icon />
       </router-link>
     </div>
@@ -26,121 +34,119 @@
 </template>
 
 <script>
-import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
+  import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
 
-const DefaultAvatar = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DefaultAvatar');
-const PenIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PenIcon');
+  const DefaultAvatar = () => import(/* webpackChunkName: "icons" */'@/components/icons/DefaultAvatar');
+  const PenIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon');
 
-export default {
-  props: {
-    avatarUrl: {
-      type: String,
+  export default {
+    props: {
+      avatarUrl: {
+        type: String
+      },
+      iconHighlighted: {},
+      editable: {
+        default: false
+      }
     },
-    iconHighlighted: {},
-    editable: {
-      default: false,
+    components: {
+      DefaultAvatar,
+      PenIcon
     },
-  },
-  components: {
-    DefaultAvatar,
-    PenIcon,
-  },
-  data() {
-    return {
-      isAvatarLoaded: false,
-    };
-  },
-  mounted() {
-    if (this.avatarUrl !== '') {
-      this.$refs.fakeImage.addEventListener('load', () => {
-        if (this.$refs.fakeImage) {
-          this.$refs.fakeImage.remove();
-          this.isAvatarLoaded = true;
-        }
-      });
+    data() {
+      return {
+        isAvatarLoaded: false
+      };
+    },
+    mounted() {
+      if (this.avatarUrl !== '') {
+        this.$refs.fakeImage.addEventListener('load', () => {
+          if (this.$refs.fakeImage) {
+            this.$refs.fakeImage.remove();
+            this.isAvatarLoaded = true;
+          }
+        });
+      }
+    },
+    methods: {
+      closeSidebar() {
+        this.$apollo.mutate({
+          mutation: TOGGLE_SIDEBAR,
+          variables: {
+            sidebar: {
+              profile: false
+            }
+          }
+        });
+      }
     }
-  },
-  methods: {
-    closeSidebar() {
-      this.$apollo.mutate({
-        mutation: TOGGLE_SIDEBAR,
-        variables: {
-          sidebar: {
-            profile: false,
-          },
-        },
-      });
-    },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-$max-width: 100%;
+  $max-width: 100%;
 
-.avatar {
-  height: $max-width;
-  width: $max-width;
-  overflow: hidden;
-  text-align: center;
-
-  &__placeholder {
+  .avatar {
     height: $max-width;
-    fill: $color-silver-dark;
-    border-radius: 50%;
+    width: $max-width;
+    overflow: hidden;
+    text-align: center;
 
-    &--highlighted {
-      fill: $color-brand;
-    }
-  }
-
-  &__image {
-    background-size: cover;
-    background-position: center center;
-    height: 100%;
-    width: 100%;
-    border: 0;
-    border-radius: 50%;
-
-    &--landscape {
-      width: auto;
+    &__placeholder {
       height: $max-width;
+      fill: $color-silver-dark;
+      border-radius: 50%;
+
+      &--highlighted {
+        fill: $color-brand;
+      }
+    }
+
+    &__image {
+      background-size: cover;
+      background-position: center center;
+      height: 100%;
+      width: 100%;
+      border: 0;
+      border-radius: 50%;
+
+      &--landscape {
+        width: auto;
+        height: $max-width;
+      }
+    }
+
+    &__fake-image {
+      width: 0;
+      height: 0;
+    }
+
+    &__edit {
+      position: absolute;
+      box-sizing: border-box;
+      width: 34px;
+      height: 34px;
+      display: block;
+      left: 50%;
+      bottom: -3px;
+      transform: translateX(80%);
+      background-color: $color-white;
+      border-radius: 50%;
+      padding: 6px;
+      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
+    }
+
+    .fade-leave-active, .show-enter-active {
+      transition: opacity .5s;
+    }
+    .fade-leave-to, .show-enter-from {
+      opacity: 0;
+    }
+
+    .show-enter-to {
+      opacity: 1;
     }
   }
-
-  &__fake-image {
-    width: 0;
-    height: 0;
-  }
-
-  &__edit {
-    position: absolute;
-    box-sizing: border-box;
-    width: 34px;
-    height: 34px;
-    display: block;
-    left: 50%;
-    bottom: -3px;
-    transform: translateX(80%);
-    background-color: $color-white;
-    border-radius: 50%;
-    padding: 6px;
-    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
-  }
-
-  .fade-leave-active,
-  .show-enter-active {
-    transition: opacity 0.5s;
-  }
-  .fade-leave-to,
-  .show-enter {
-    opacity: 0;
-  }
-
-  .show-enter-to {
-    opacity: 1;
-  }
-}
 </style>
diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue
index 0244e4e7..bd1d9a61 100644
--- a/client/src/components/profile/ProfileSidebar.vue
+++ b/client/src/components/profile/ProfileSidebar.vue
@@ -1,31 +1,69 @@
 <template>
   <transition name="slide">
-    <div class="profile-sidebar" data-cy="sidebar" v-if="sidebar.profile" v-click-outside="close">
-      <a class="profile-sidebar__close-link" data-cy="close-profile-sidebar-link" @click="close">
+    <div
+      class="profile-sidebar"
+      data-cy="sidebar"
+      v-if="sidebar.profile"
+      v-click-outside="close"
+    >
+      <a
+        class="profile-sidebar__close-link"
+        data-cy="close-profile-sidebar-link"
+        @click="close"
+      >
         <cross class="profile-sidebar__close-icon" />
       </a>
       <div class="profile-sidebar__section">
         <profile-widget class="profile-sidebar__item" />
-        <div class="profile-sidebar__item" @click="close">
-          <router-link to="/me/activity" class="profile-sidebar__link"> Meine Aktivitäten </router-link>
+        <div
+          class="profile-sidebar__item"
+          @click="close"
+        >
+          <router-link
+            to="/me/activity"
+            class="profile-sidebar__link"
+          >
+            Meine Aktivitäten
+          </router-link>
         </div>
-        <div class="profile-sidebar__item" v-if="me.isTeacher && !me.readOnly" @click="close">
-          <router-link :to="myTeamPage" data-cy="my-team-link" class="profile-sidebar__link"> Mein Team </router-link>
+        <div
+          class="profile-sidebar__item"
+          v-if="me.isTeacher && !me.readOnly"
+          @click="close"
+        >
+          <router-link
+            :to="myTeamPage"
+            data-cy="my-team-link"
+            class="profile-sidebar__link"
+          >
+            Mein Team
+          </router-link>
         </div>
       </div>
       <div class="profile-sidebar__section">
         <div class="profile-sidebar__item">
           <class-selection-widget />
           <div @click="close">
-            <router-link :to="{ name: 'my-class' }" data-cy="class-list-link" class="profile-sidebar__link">
+            <router-link
+              :to="{name: 'my-class'}"
+              data-cy="class-list-link"
+              class="profile-sidebar__link"
+            >
               Klassenliste
             </router-link>
           </div>
         </div>
       </div>
       <div class="profile-sidebar__section">
-        <div class="profile-sidebar__item" @click="close">
-          <router-link :to="{ name: 'join-class' }" data-cy="join-class-link" class="profile-sidebar__link">
+        <div
+          class="profile-sidebar__item"
+          @click="close"
+        >
+          <router-link
+            :to="{name:'join-class'}"
+            data-cy="join-class-link"
+            class="profile-sidebar__link"
+          >
             Zugangscode
           </router-link>
         </div>
@@ -38,112 +76,111 @@
 </template>
 
 <script>
-import ProfileWidget from '@/components/profile/ProfileWidget';
+  import ProfileWidget from '@/components/profile/ProfileWidget';
 
-import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
+  import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
 
-import sidebar from '@/mixins/sidebar';
-import me from '@/mixins/me';
-import LogoutWidget from '@/components/LogoutWidget';
-import { MY_TEAM } from '@/router/me.names';
-const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
+  import sidebar from '@/mixins/sidebar';
+  import me from '@/mixins/me';
+  import LogoutWidget from '@/components/LogoutWidget';
+  import {MY_TEAM} from '@/router/me.names';
+  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
 
-export default {
-  mixins: [sidebar, me],
+  export default {
 
-  components: {
-    LogoutWidget,
-    ClassSelectionWidget,
-    ProfileWidget,
-    Cross,
-  },
+    mixins: [sidebar, me],
 
-  computed: {
-    myTeamPage() {
-      return {
-        name: MY_TEAM,
-      };
+    components: {
+      LogoutWidget,
+      ClassSelectionWidget,
+      ProfileWidget,
+      Cross,
     },
-  },
 
-  methods: {
-    close() {
-      this.closeSidebar('profile');
+    computed: {
+      myTeamPage() {
+        return {
+          name: MY_TEAM,
+        };
+      },
     },
-  },
-};
+
+    methods: {
+      close() {
+        this.closeSidebar('profile');
+      },
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-@import '~styles/helpers';
+  @import "~styles/helpers";
 
-$desktop-width: 333px;
+  $desktop-width: 333px;
 
-.profile-sidebar {
-  padding: $large-spacing 0;
-  box-sizing: border-box;
-  position: fixed;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  height: 100vh;
-  background-color: $color-white;
-  z-index: 15;
-  box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
-  overflow-y: scroll;
+  .profile-sidebar {
+    padding: $large-spacing 0;
+    box-sizing: border-box;
+    position: fixed;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    height: 100vh;
+    background-color: $color-white;
+    z-index: 15;
+    box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
+    overflow-y: scroll;
 
-  width: 100%;
-  @include desktop {
-    width: $desktop-width;
-  }
-
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-
-  &__section {
-    margin-bottom: $large-spacing;
-
-    &:last-of-type {
-      margin-top: auto;
-    }
-  }
-
-  &__item {
-    padding: $small-spacing $medium-spacing;
-  }
-
-  &__subtitle {
-    @include small-text;
-    margin: 0;
-    margin-bottom: $small-spacing;
-  }
-
-  &__link {
-    @include default-link;
-    display: block;
-  }
-
-  &__close-link {
-    position: absolute;
-    right: $small-spacing;
-    top: $small-spacing;
-    cursor: pointer;
-  }
-}
-
-.slide {
-  &-enter-active,
-  &-leave-active {
-    transition: right 0.2s;
-  }
-
-  &-enter,
-  &-leave-to {
-    right: -100vw;
+    width: 100%;
     @include desktop {
-      right: -$desktop-width;
+      width: $desktop-width;
+    }
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+
+    &__section {
+      margin-bottom: $large-spacing;
+
+      &:last-of-type {
+        margin-top: auto;
+      }
+    }
+
+    &__item {
+      padding: $small-spacing $medium-spacing;
+    }
+
+    &__subtitle {
+      @include small-text;
+      margin: 0;
+      margin-bottom: $small-spacing;
+    }
+
+    &__link {
+      @include default-link;
+      display: block;
+    }
+
+    &__close-link {
+      position: absolute;
+      right: $small-spacing;
+      top: $small-spacing;
+      cursor: pointer;
+    }
+  }
+
+  .slide {
+    &-enter-active, &-leave-active {
+      transition: right 0.2s;
+    }
+
+    &-enter-from, &-leave-to {
+      right: -100vw;
+      @include desktop {
+        right: -$desktop-width;
+      }
     }
   }
-}
 </style>
diff --git a/client/src/main.js b/client/src/main.js
index 7a10cf2d..817a23b9 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,8 +1,7 @@
 import '@babel/polyfill';
-import {createApp, inject} from 'vue';
+import {createApp} from 'vue';
 import VueVimeoPlayer from 'vue-vimeo-player';
 import apolloClientFactory from './graphql/client';
-import VueApollo from 'vue-apollo';
 import App from './App.vue';
 import { postLoginRedirectUrlKey, router } from './router';
 import store from '@/store/index';
@@ -14,13 +13,14 @@ import VueModal from '@/plugins/modal';
 import VueRemoveEdges from '@/plugins/edges';
 import VueMatomo from 'vue-matomo';
 import VueLogger from 'vuejs3-logger';
+import { createApolloProvider } from '@vue/apollo-option';
 import { joiningClass, loginRequired, unauthorizedAccess } from '@/router/guards';
 import flavorPlugin from '@/plugins/flavor';
 
 const publicApolloClient = apolloClientFactory('/api/graphql-public/', null);
 const privateApolloClient = apolloClientFactory('/api/graphql/', networkErrorCallback);
 
-const apolloProvider = new VueApollo({
+const apolloProvider = createApolloProvider({
   clients: {
     publicClient: publicApolloClient,
   },
@@ -39,7 +39,6 @@ const isProduction = process.env.NODE_ENV === 'production';
 
 app.use(VueModal);
 app.use(VueRemoveEdges);
-app.use(VueApollo);
 app.use(VueVimeoPlayer);
 app.use(VueLogger, {
   isEnabled: true,
@@ -47,6 +46,8 @@ app.use(VueLogger, {
   stringifyArguments: false,
   showConsoleColors: true,
 });
+app.use(apolloProvider);
+app.use(router);
 
 // VueScrollTo.setDefaults({
 //   duration: 500,
diff --git a/client/src/router/guards.ts b/client/src/router/guards.ts
index 69c7e6ac..9bf105d3 100644
--- a/client/src/router/guards.ts
+++ b/client/src/router/guards.ts
@@ -1,4 +1,4 @@
-import { Route } from 'vue-router';
+import {RouteLocationNormalized} from "vue-router";
 
 function getCookieValue(cookieName: string) {
   // https://stackoverflow.com/questions/5639346/what-is-the-shortest-function-for-reading-a-cookie-by-name-in-javascript
@@ -6,16 +6,16 @@ function getCookieValue(cookieName: string) {
   return cookieValue ? cookieValue.pop() : '';
 }
 
-export function loginRequired(to: Route) {
+export function loginRequired(to: RouteLocationNormalized) {
   // public pages have the meta.public property set to true
   const isPublic = to.meta && to.meta.public;
   return !isPublic;
 }
 
-export function unauthorizedAccess(to: Route) {
+export function unauthorizedAccess(to: RouteLocationNormalized) {
   return loginRequired(to) && getCookieValue('loginStatus') !== 'true';
 }
 
-export function joiningClass(to: Route) {
+export function joiningClass(to: RouteLocationNormalized) {
   return to.name && (to.name === 'join-class' || to.name === 'licenseActivation');
 }
diff --git a/client/src/router/index.js b/client/src/router/index.js
index e2dc764c..f5013956 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -1,6 +1,4 @@
-import Vue from 'vue';
-
-import Router from 'vue-router';
+import {createRouter, createWebHistory} from 'vue-router';
 
 import moduleRoutes from './module.routes';
 import portfolioRoutes from './portfolio.routes';
@@ -10,26 +8,26 @@ import authRoutes from './auth.routes';
 import roomRoutes from './room.routes';
 
 import store from '@/store/index';
-import { LAYOUT_SIMPLE } from '@/router/core.constants';
-import { EMAIL_NOT_VERIFIED_STATE, NO_VALID_LICENSE_STATE, SUCCESS_STATE } from './oauth.names';
+import {LAYOUT_SIMPLE} from '@/router/core.constants';
+import {EMAIL_NOT_VERIFIED_STATE, NO_VALID_LICENSE_STATE, SUCCESS_STATE} from './oauth.names';
 
 import start from '@/pages/start';
 
-const instrument = () => import(/* webpackChunkName: "instruments" */ '@/pages/instrument');
-const instrumentOverview = () => import(/* webpackChunkName: "instruments" */ '@/pages/instrumentOverview');
+const instrument = () => import(/* webpackChunkName: "instruments" */'@/pages/instrument');
+const instrumentOverview = () => import(/* webpackChunkName: "instruments" */'@/pages/instrumentOverview');
 
-const article = () => import(/* webpackChunkName: "news" */ '@/pages/article');
-const news = () => import(/* webpackChunkName: "news" */ '@/pages/news');
+const article = () => import(/* webpackChunkName: "news" */'@/pages/article');
+const news = () => import(/* webpackChunkName: "news" */'@/pages/news');
 
-const surveyPage = () => import(/* webpackChunkName: "survey" */ '@/pages/survey');
+const surveyPage = () => import(/* webpackChunkName: "survey" */'@/pages/survey');
 
-const styleGuidePage = () => import('@/pages/styleguide.vue');
-const joinClass = () => import('@/pages/joinClass.vue');
+const styleGuidePage = () => import('@/pages/styleguide');
+const joinClass = () => import('@/pages/joinClass');
 
-const topic = () => import('@/pages/topic-page.vue');
+const topic = () => import('@/pages/topic-page');
 
-const p404 = () => import('@/pages/p404.vue');
-const submission = () => import('@/pages/studentSubmission.vue');
+const p404 = () => import('@/pages/p404');
+const submission = () => import('@/pages/studentSubmission');
 
 const postLoginRedirectUrlKey = 'postLoginRedirectionUrl';
 
@@ -52,22 +50,22 @@ const routes = [
   ...onboardingRoutes,
   ...portfolioRoutes,
   ...meRoutes,
-  { path: '/article/:slug', name: 'article', component: article, meta: { layout: LAYOUT_SIMPLE } },
+  {path: '/article/:slug', name: 'article', component: article, meta: {layout: LAYOUT_SIMPLE}},
   {
     path: '/instruments/',
     name: 'instrument-overview',
     component: instrumentOverview,
   },
-  { path: '/instrument/:slug', name: 'instrument', component: instrument, meta: { layout: LAYOUT_SIMPLE } },
-  { path: '/submission/:id', name: 'submission', component: submission, meta: { layout: LAYOUT_SIMPLE } },
-  { path: '/topic/:topicSlug', name: 'topic', component: topic, alias: '/book/topic/:topicSlug' },
-  { path: '/join-class', name: 'join-class', component: joinClass, meta: { layout: LAYOUT_SIMPLE } },
+  {path: '/instrument/:slug', name: 'instrument', component: instrument, meta: {layout: LAYOUT_SIMPLE}},
+  {path: '/submission/:id', name: 'submission', component: submission, meta: {layout: LAYOUT_SIMPLE}},
+  {path: '/topic/:topicSlug', name: 'topic', component: topic, alias: '/book/topic/:topicSlug'},
+  {path: '/join-class', name: 'join-class', component: joinClass, meta: {layout: LAYOUT_SIMPLE}},
   {
     path: '/survey/:id',
     component: surveyPage,
     name: 'survey',
     props: true,
-    meta: { layout: LAYOUT_SIMPLE },
+    meta: {layout: LAYOUT_SIMPLE},
   },
   {
     path: '/news',
@@ -76,7 +74,7 @@ const routes = [
   },
   {
     path: '/oauth-redirect',
-    redirect: (to) => {
+    redirect: to => {
       switch (to.query.state) {
         case EMAIL_NOT_VERIFIED_STATE:
           return '/verify-email';
@@ -94,28 +92,28 @@ const routes = [
       }
     },
   },
-  { path: '/styleguide', component: styleGuidePage },
+  {path: '/styleguide', component: styleGuidePage},
   {
     path: '/not-found',
     name: 'not-found',
-    ...notFoundRoute,
+    ...notFoundRoute
   },
   {
-    path: '*',
-    ...notFoundRoute,
+    path: '/:pathMatch(.*)*',
+    ...notFoundRoute
   },
 ];
 
-Vue.use(Router);
 
-const router = new Router({
+const router = createRouter({
   routes,
+  history: createWebHistory(),
   mode: 'history',
   scrollBehavior(to, from, savedPosition) {
     if (savedPosition) {
       return savedPosition;
     }
-    return { x: 0, y: 0 };
+    return {left: 0, top: 0};
   },
 });
 
@@ -124,4 +122,4 @@ router.afterEach(() => {
   store.dispatch('showMobileNavigation', false);
 });
 
-export { router, postLoginRedirectUrlKey };
+export {router, postLoginRedirectUrlKey};