diff --git a/client/.babelrc b/client/.babelrc
index 46e6f10b..3d4e3855 100644
--- a/client/.babelrc
+++ b/client/.babelrc
@@ -1,14 +1,15 @@
 {
   "presets": [
     "@babel/preset-typescript",
-    ["@babel/preset-env", {
-      "useBuiltIns": false,
-      "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": false,
+        "targets": {
+          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+        }
       }
-    }]
+    ]
   ],
-  "plugins": [
-    "@babel/plugin-transform-runtime"
-  ]
+  "plugins": ["@babel/plugin-transform-runtime"]
 }
diff --git a/client/.eslintrc.js b/client/.eslintrc.js
index 285fb91b..5f0f3142 100644
--- a/client/.eslintrc.js
+++ b/client/.eslintrc.js
@@ -10,7 +10,7 @@ module.exports = {
     browser: true,
   },
   globals: {
-    process: "readonly"
+    process: 'readonly',
   },
   extends: [
     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
@@ -21,69 +21,77 @@ module.exports = {
     'plugin:@typescript-eslint/eslint-recommended',
   ],
   // required to lint *.vue files
-  plugins: [
-    'vue',
-    '@typescript-eslint'
+  plugins: ['vue', '@typescript-eslint'],
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      rules: {
+        'no-unused-vars': 'off',
+      },
+    },
   ],
-  overrides: [{
-    files: ['*.ts','*.tsx'],
-    rules: {
-      'no-unused-vars': 'off'
-    }
-  }],
   // add your custom rules here
   rules: {
     // allow async-await
     'generator-star-spacing': 'off',
     // allow debugger during development
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'indent': 'off',
-    'semi': ['error', 'always'],
+    indent: 'off',
+    semi: ['error', 'always'],
     'space-before-function-paren': 'off',
     'comma-dangle': 'off',
 
     // vue rules
     'vue/require-prop-types': 'off', //todo: should we do this?
     'vue/require-default-prop': 'off', //todo: should we do this?
-    'vue/attributes-order': ['error', {
-      'order': [
-        'OTHER_ATTR',
-        'DEFINITION',
-        'LIST_RENDERING',
-        'CONDITIONALS',
-        'RENDER_MODIFIERS',
-        'GLOBAL',
-        'UNIQUE',
-        'TWO_WAY_BINDING',
-        'OTHER_DIRECTIVES',
-        'EVENTS',
-        'CONTENT'
-      ]
-    }],
-    "vue/multi-word-component-names": ["off", {
-    "ignores": []
-    }],
-    'vue/order-in-components': ['error', {
-      'order': [
-        'el',
-        'name',
-        'parent',
-        'functional',
-        ['delimiters', 'comments'],
-        ['props', 'propsData'],
-        'mixins',
-        ['components', 'directives', 'filters'],
-        'data',
-        'extends',
-        'inheritAttrs',
-        'model',
-        'computed',
-        'watch',
-        'LIFECYCLE_HOOKS',
-        'methods',
-        ['template', 'render'],
-        'renderError'
-      ]
-    }]
-  }
+    'vue/attributes-order': [
+      'error',
+      {
+        order: [
+          'OTHER_ATTR',
+          'DEFINITION',
+          'LIST_RENDERING',
+          'CONDITIONALS',
+          'RENDER_MODIFIERS',
+          'GLOBAL',
+          'UNIQUE',
+          'TWO_WAY_BINDING',
+          'OTHER_DIRECTIVES',
+          'EVENTS',
+          'CONTENT',
+        ],
+      },
+    ],
+    'vue/multi-word-component-names': [
+      'off',
+      {
+        ignores: [],
+      },
+    ],
+    'vue/order-in-components': [
+      'error',
+      {
+        order: [
+          'el',
+          'name',
+          'parent',
+          'functional',
+          ['delimiters', 'comments'],
+          ['props', 'propsData'],
+          'mixins',
+          ['components', 'directives', 'filters'],
+          'data',
+          'extends',
+          'inheritAttrs',
+          'model',
+          'computed',
+          'watch',
+          'LIFECYCLE_HOOKS',
+          'methods',
+          ['template', 'render'],
+          'renderError',
+        ],
+      },
+    ],
+  },
 };
diff --git a/client/.postcssrc.js b/client/.postcssrc.js
index eee3e92d..39ebf318 100644
--- a/client/.postcssrc.js
+++ b/client/.postcssrc.js
@@ -1,10 +1,10 @@
 // https://github.com/michael-ciniawsky/postcss-load-config
 
 module.exports = {
-  "plugins": {
-    "postcss-import": {},
-    "postcss-url": {},
+  plugins: {
+    'postcss-import': {},
+    'postcss-url': {},
     // to edit target browsers: use "browserslist" field in package.json
-    "autoprefixer": {}
-  }
-}
+    autoprefixer: {},
+  },
+};
diff --git a/client/build/build.js b/client/build/build.js
index 0d5f51ef..78ba7f23 100644
--- a/client/build/build.js
+++ b/client/build/build.js
@@ -1,41 +1,45 @@
-'use strict'
-require('./check-versions')()
+'use strict';
+require('./check-versions')();
 
-process.env.NODE_ENV = 'production'
+process.env.NODE_ENV = 'production';
 
-const ora = require('ora')
-const rm = require('rimraf')
-const path = require('path')
-const chalk = require('chalk')
-const webpack = require('webpack')
-const config = require('../config')
-const webpackConfig = require('./webpack.prod.conf')
+const ora = require('ora');
+const rm = require('rimraf');
+const path = require('path');
+const chalk = require('chalk');
+const webpack = require('webpack');
+const config = require('../config');
+const webpackConfig = require('./webpack.prod.conf');
 
-const spinner = ora('building for production...')
-spinner.start()
+const spinner = ora('building for production...');
+spinner.start();
 
-rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
-  if (err) throw err
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), (err) => {
+  if (err) throw err;
   webpack(webpackConfig, (err, stats) => {
-    spinner.succeed()
-    if (err) throw err
-    process.stdout.write(stats.toString({
-      colors: true,
-      modules: false,
-      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
-      chunks: false,
-      chunkModules: false
-    }) + '\n\n')
+    spinner.succeed();
+    if (err) throw err;
+    process.stdout.write(
+      stats.toString({
+        colors: true,
+        modules: false,
+        children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
+        chunks: false,
+        chunkModules: false,
+      }) + '\n\n'
+    );
 
     if (stats.hasErrors()) {
-      console.log(chalk.red('  Build failed with errors.\n'))
-      process.exit(1)
+      console.log(chalk.red('  Build failed with errors.\n'));
+      process.exit(1);
     }
 
-    console.log(chalk.cyan('  Build complete.\n'))
-    console.log(chalk.yellow(
-      '  Tip: built files are meant to be served over an HTTP server.\n' +
-      '  Opening index.html over file:// won\'t work.\n'
-    ))
-  })
-})
+    console.log(chalk.cyan('  Build complete.\n'));
+    console.log(
+      chalk.yellow(
+        '  Tip: built files are meant to be served over an HTTP server.\n' +
+          "  Opening index.html over file:// won't work.\n"
+      )
+    );
+  });
+});
diff --git a/client/build/check-versions.js b/client/build/check-versions.js
index 3ef972a0..3999006d 100644
--- a/client/build/check-versions.js
+++ b/client/build/check-versions.js
@@ -1,54 +1,53 @@
-'use strict'
-const chalk = require('chalk')
-const semver = require('semver')
-const packageConfig = require('../package.json')
-const shell = require('shelljs')
+'use strict';
+const chalk = require('chalk');
+const semver = require('semver');
+const packageConfig = require('../package.json');
+const shell = require('shelljs');
 
-function exec (cmd) {
-  return require('child_process').execSync(cmd).toString().trim()
+function exec(cmd) {
+  return require('child_process').execSync(cmd).toString().trim();
 }
 
 const versionRequirements = [
   {
     name: 'node',
     currentVersion: semver.clean(process.version),
-    versionRequirement: packageConfig.engines.node
-  }
-]
+    versionRequirement: packageConfig.engines.node,
+  },
+];
 
 if (shell.which('npm')) {
   versionRequirements.push({
     name: 'npm',
     currentVersion: exec('npm --version'),
-    versionRequirement: packageConfig.engines.npm
-  })
+    versionRequirement: packageConfig.engines.npm,
+  });
 }
 
 module.exports = function () {
-  const warnings = []
+  const warnings = [];
 
   for (let i = 0; i < versionRequirements.length; i++) {
-    const mod = versionRequirements[i]
+    const mod = versionRequirements[i];
 
     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-      warnings.push(mod.name + ': ' +
-        chalk.red(mod.currentVersion) + ' should be ' +
-        chalk.green(mod.versionRequirement)
-      )
+      warnings.push(
+        mod.name + ': ' + chalk.red(mod.currentVersion) + ' should be ' + chalk.green(mod.versionRequirement)
+      );
     }
   }
 
   if (warnings.length) {
-    console.log('')
-    console.log(chalk.yellow('To use this template, you must update following to modules:'))
-    console.log()
+    console.log('');
+    console.log(chalk.yellow('To use this template, you must update following to modules:'));
+    console.log();
 
     for (let i = 0; i < warnings.length; i++) {
-      const warning = warnings[i]
-      console.log('  ' + warning)
+      const warning = warnings[i];
+      console.log('  ' + warning);
     }
 
-    console.log()
-    process.exit(1)
+    console.log();
+    process.exit(1);
   }
-}
+};
diff --git a/client/build/utils.js b/client/build/utils.js
index 20c511b6..80059123 100644
--- a/client/build/utils.js
+++ b/client/build/utils.js
@@ -1,20 +1,17 @@
-'use strict'
-const path = require('path')
-const config = require('../config')
-const packageConfig = require('../package.json')
+'use strict';
+const path = require('path');
+const config = require('../config');
+const packageConfig = require('../package.json');
 
 const isDev = process.env.NODE_ENV !== 'production';
 
 const assetsPath = (_path) => {
-  const assetsSubDirectory = isDev
-    ? config.dev.assetsSubDirectory
-    : config.build.assetsSubDirectory
-
-  return path.posix.join(assetsSubDirectory, _path)
-}
+  const assetsSubDirectory = isDev ? config.dev.assetsSubDirectory : config.build.assetsSubDirectory;
 
+  return path.posix.join(assetsSubDirectory, _path);
+};
 
 module.exports = {
   isDev,
-  assetsPath
-}
+  assetsPath,
+};
diff --git a/client/build/webpack.base.conf.js b/client/build/webpack.base.conf.js
index 3190e8b7..6ef67bcb 100644
--- a/client/build/webpack.base.conf.js
+++ b/client/build/webpack.base.conf.js
@@ -3,10 +3,10 @@ const path = require('path');
 const config = require('../config');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
-const {VueLoaderPlugin} = require('vue-loader');
+const { VueLoaderPlugin } = require('vue-loader');
 const ESLintPlugin = require('eslint-webpack-plugin');
 
-const {isDev, assetsPath} = require('./utils');
+const { isDev, assetsPath } = require('./utils');
 
 function resolve(dir) {
   return path.join(__dirname, '..', dir);
@@ -15,7 +15,7 @@ function resolve(dir) {
 const eslintOptions = {
   formatter: require('eslint-formatter-friendly'),
   emitWarning: !config.dev.showEslintErrorsInOverlay,
-  extensions: ['js', 'ts', 'vue']
+  extensions: ['js', 'ts', 'vue'],
 };
 
 //todo: mini-css-extract-plugin? upgrade to webpack 4, then use this
@@ -29,9 +29,7 @@ module.exports = {
   output: {
     path: config.build.assetsRoot,
     filename: '[name].js',
-    publicPath: isDev
-      ? config.dev.assetsPublicPath
-      : config.build.assetsPublicPath,
+    publicPath: isDev ? config.dev.assetsPublicPath : config.build.assetsPublicPath,
   },
   optimization: {
     splitChunks: {
@@ -131,10 +129,7 @@ module.exports = {
       // styleRule(true), // sass rule
     ],
   },
-  plugins: [
-    new VueLoaderPlugin(),
-    new ESLintPlugin(eslintOptions),
-  ],
+  plugins: [new VueLoaderPlugin(), new ESLintPlugin(eslintOptions)],
 
   // node: {
   //   // prevent webpack from injecting useless setImmediate polyfill because Vue
diff --git a/client/build/webpack.dev.conf.js b/client/build/webpack.dev.conf.js
index eeb59ea6..657069ce 100755
--- a/client/build/webpack.dev.conf.js
+++ b/client/build/webpack.dev.conf.js
@@ -8,7 +8,7 @@ const CopyPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const portfinder = require('portfinder');
-const {merge} = require('webpack-merge');
+const { merge } = require('webpack-merge');
 
 const HOST = process.env.HOST;
 const PORT = process.env.PORT && Number(process.env.PORT);
@@ -21,15 +21,12 @@ const devWebpackConfig = merge(baseWebpackConfig, {
   devServer: {
     client: {
       logging: 'warn',
-      overlay: config.dev.errorOverlay ? {errors: true, warnings: false} : false,
+      overlay: config.dev.errorOverlay ? { errors: true, warnings: false } : false,
       progress: true,
-
     },
 
     historyApiFallback: {
-      rewrites: [
-        {from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html')},
-      ],
+      rewrites: [{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }],
     },
     hot: true,
     compress: true,
@@ -66,8 +63,8 @@ const devWebpackConfig = merge(baseWebpackConfig, {
       ],
     }),
     new BundleAnalyzerPlugin({
-      analyzerMode: 'disabled' // do nothing by default, but be able to generate stats with --profile
-    })
+      analyzerMode: 'disabled', // do nothing by default, but be able to generate stats with --profile
+    }),
   ],
 });
 
diff --git a/client/build/webpack.prod.conf.js b/client/build/webpack.prod.conf.js
index 7a3096b9..c516f4a7 100644
--- a/client/build/webpack.prod.conf.js
+++ b/client/build/webpack.prod.conf.js
@@ -3,11 +3,11 @@ const path = require('path');
 const utils = require('./utils');
 const webpack = require('webpack');
 const config = require('../config');
-const {merge} = require('webpack-merge');
+const { merge } = require('webpack-merge');
 const baseWebpackConfig = require('./webpack.base.conf');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 
 const env = require('../config/prod.env');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -21,9 +21,7 @@ const webpackConfig = merge(baseWebpackConfig, {
     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'),
   },
   optimization: {
-    minimizer:  [
-      new CssMinimizerPlugin()
-    ]
+    minimizer: [new CssMinimizerPlugin()],
   },
   plugins: [
     // http://vuejs.github.io/vue-loader/en/workflow/production.html
@@ -44,7 +42,8 @@ const webpackConfig = merge(baseWebpackConfig, {
       filename: config.build.index,
       template: 'index.html',
       ...require('../config/prod.env'),
-      minify: { // defaults from https://github.com/jantimon/html-webpack-plugin#minification
+      minify: {
+        // defaults from https://github.com/jantimon/html-webpack-plugin#minification
         collapseWhitespace: true,
         keepClosingSlash: true,
         removeComments: true,
@@ -112,14 +111,10 @@ if (config.build.productionGzip) {
     new CompressionWebpackPlugin({
       asset: '[path].gz[query]',
       algorithm: 'gzip',
-      test: new RegExp(
-        '\\.(' +
-        config.build.productionGzipExtensions.join('|') +
-        ')$',
-      ),
+      test: new RegExp('\\.(' + config.build.productionGzipExtensions.join('|') + ')$'),
       threshold: 10240,
       minRatio: 0.8,
-    }),
+    })
   );
 }
 
diff --git a/client/config/dev.env.js b/client/config/dev.env.js
index e9cf97d7..92ff8787 100644
--- a/client/config/dev.env.js
+++ b/client/config/dev.env.js
@@ -1,8 +1,8 @@
-'use strict'
-const {merge} = require('webpack-merge')
-const prodEnv = require('./prod.env')
+'use strict';
+const { merge } = require('webpack-merge');
+const prodEnv = require('./prod.env');
 
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
-  VUE_APP_ENABLE_SPELLCHECK: 'true'
+  VUE_APP_ENABLE_SPELLCHECK: 'true',
 });
diff --git a/client/config/index.js b/client/config/index.js
index 313916d2..07465239 100644
--- a/client/config/index.js
+++ b/client/config/index.js
@@ -1,12 +1,11 @@
-'use strict'
+'use strict';
 // Template version: 1.3.1
 // see http://vuejs-templates.github.io/webpack for documentation.
 
-const path = require('path')
+const path = require('path');
 
 module.exports = {
   dev: {
-
     // Paths
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
@@ -41,7 +40,7 @@ module.exports = {
     // https://vue-loader.vuejs.org/en/options.html#cachebusting
     cacheBusting: true,
 
-    cssSourceMap: true
+    cssSourceMap: true,
   },
 
   build: {
@@ -71,6 +70,6 @@ module.exports = {
     // View the bundle analyzer report after build finishes:
     // `npm run build --report`
     // Set to `true` or `false` to always turn it on or off
-    bundleAnalyzerReport: process.env.npm_config_report
-  }
-}
+    bundleAnalyzerReport: process.env.npm_config_report,
+  },
+};
diff --git a/client/config/prod-dha.env.js b/client/config/prod-dha.env.js
index dca5df77..5efa78c3 100644
--- a/client/config/prod-dha.env.js
+++ b/client/config/prod-dha.env.js
@@ -1,9 +1,9 @@
-'use strict'
+'use strict';
 module.exports = {
   /*
-  * ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
-  * around strings
-  */
+   * ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
+   * around strings
+   */
   VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
 
   /*
@@ -12,6 +12,6 @@ module.exports = {
   // vvvv HTML PROPERTIES FROM HERE, NOT STRINGIFIED vvvv
   VUE_APP_FAVICON_32: 'https://skillbox-my-detailhandel-dha-prod.s3.eu-central-1.amazonaws.com/myDHA-favicon.png',
   VUE_APP_FAVICON_16: 'https://skillbox-my-detailhandel-dha-prod.s3.eu-central-1.amazonaws.com/myDHA-favicon.png',
-  VUE_APP_TITLE: 'myDHA'
+  VUE_APP_TITLE: 'myDHA',
   // ^^^^ HTML PROPERTIES TO HERE, NOT STRINGIFIED ^^^^
-}
+};
diff --git a/client/config/prod-dhf.env.js b/client/config/prod-dhf.env.js
index cdcb0d9c..fa5b1fca 100644
--- a/client/config/prod-dhf.env.js
+++ b/client/config/prod-dhf.env.js
@@ -1,9 +1,9 @@
-'use strict'
+'use strict';
 module.exports = {
   /*
-  * ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
-  * around strings
-  */
+   * ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
+   * around strings
+   */
   VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
 
   /*
@@ -12,6 +12,6 @@ module.exports = {
   // vvvv HTML PROPERTIES FROM HERE, NOT STRINGIFIED vvvv
   VUE_APP_FAVICON_32: 'https://skillbox-my-detailhandel-dhf-prod.s3.eu-central-1.amazonaws.com/myDHF-favicon.png',
   VUE_APP_FAVICON_16: 'https://skillbox-my-detailhandel-dhf-prod.s3.eu-central-1.amazonaws.com/myDHF-favicon.png',
-  VUE_APP_TITLE: 'myDHF'
+  VUE_APP_TITLE: 'myDHF',
   // ^^^^ HTML PROPERTIES TO HERE, NOT STRINGIFIED ^^^^
-}
+};
diff --git a/client/config/prod-my-kv.env.js b/client/config/prod-my-kv.env.js
index 7b7d560a..797a8bca 100644
--- a/client/config/prod-my-kv.env.js
+++ b/client/config/prod-my-kv.env.js
@@ -1,9 +1,9 @@
-'use strict'
+'use strict';
 module.exports = {
   /*
-  * ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
-  * around strings
-  */
+   * ENV variables used in JS code need to be stringyfied, as they will be replaced in the code, and JS needs quotes
+   * around strings
+   */
   VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
 
   /*
@@ -12,6 +12,6 @@ module.exports = {
   // vvvv HTML PROPERTIES FROM HERE, NOT STRINGIFIED vvvv
   VUE_APP_FAVICON_32: 'https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-favicon.png',
   VUE_APP_FAVICON_16: 'https://skillbox-my-kv-prod.s3-eu-west-1.amazonaws.com/mykv-favicon.png',
-  VUE_APP_TITLE: 'myKV'
+  VUE_APP_TITLE: 'myKV',
   // ^^^^ HTML PROPERTIES TO HERE, NOT STRINGIFIED ^^^^
-}
+};
diff --git a/client/config/prod.env.js b/client/config/prod.env.js
index 7ff19464..4f4fafe0 100644
--- a/client/config/prod.env.js
+++ b/client/config/prod.env.js
@@ -1,5 +1,5 @@
-'use strict'
-const { merge } = require('webpack-merge')
+'use strict';
+const { merge } = require('webpack-merge');
 
 const values = {
   NODE_ENV: '"production"',
@@ -9,10 +9,10 @@ const values = {
   LOGOUT_REDIRECT_URL: JSON.stringify(process.env.LOGOUT_REDIRECT_URL),
   VUE_APP_FLAVOR: JSON.stringify(process.env.APP_FLAVOR),
   /*
-  * ENV variables used in JS code need to be stringyfied, as they will be replaced (in place) in the code,
-  * and JS needs quotes around strings
-  * see https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code
-  */
+   * ENV variables used in JS code need to be stringyfied, as they will be replaced (in place) in the code,
+   * and JS needs quotes around strings
+   * see https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code
+   */
   VUE_APP_ENABLE_SPELLCHECK: !!process.env.TASKBASE_BASEURL,
 
   /*
@@ -21,9 +21,9 @@ const values = {
   // vvvv HTML PROPERTIES FROM HERE, NOT STRINGIFIED vvvv
   VUE_APP_FAVICON_32: '/static/favicon-32x32.png',
   VUE_APP_FAVICON_16: '/static/favicon-16x16.png',
-  VUE_APP_TITLE: 'mySkillbox'
+  VUE_APP_TITLE: 'mySkillbox',
   // ^^^^ HTML PROPERTIES TO HERE, NOT STRINGIFIED ^^^^
-}
+};
 
 switch (process.env.APP_FLAVOR) {
   case 'my-kv':
@@ -39,4 +39,3 @@ switch (process.env.APP_FLAVOR) {
     // we are on the skillbox APP_FLAVOR
     module.exports = values;
 }
-
diff --git a/client/cypress.e2e.ts b/client/cypress.e2e.ts
index 8bb23982..9e9a0919 100644
--- a/client/cypress.e2e.ts
+++ b/client/cypress.e2e.ts
@@ -1,27 +1,24 @@
-import {defineConfig} from 'cypress';
-import {readFileSync} from "fs";
-import {resolve} from "path";
-export default defineConfig( {
+import { defineConfig } from 'cypress';
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
+export default defineConfig({
   e2e: {
-    "baseUrl": "http://localhost:8000",
+    baseUrl: 'http://localhost:8000',
     specPattern: 'cypress/e2e/e2e/**/*.{spec,cy}.{js,ts}',
     supportFile: 'cypress/support/e2e.ts',
     setupNodeEvents(on, config) {
       on('task', {
         getSchema() {
-          return readFileSync(
-            resolve(__dirname, '../server/schema.graphql'),
-            'utf8'
-          );
-        }
+          return readFileSync(resolve(__dirname, '../server/schema.graphql'), 'utf8');
+        },
       });
     },
   },
-  "videoUploadOnPasses": false,
-  "reporter": "junit",
-  "reporterOptions": {
-    "mochaFile": "cypress/test-reports/e2e/cypress-results-[hash].xml",
-    "toConsole": true
+  videoUploadOnPasses: false,
+  reporter: 'junit',
+  reporterOptions: {
+    mochaFile: 'cypress/test-reports/e2e/cypress-results-[hash].xml',
+    toConsole: true,
   },
-  "projectId": "msk-ee",
+  projectId: 'msk-ee',
 });
diff --git a/client/cypress.frontend.ts b/client/cypress.frontend.ts
index 29927148..48d4366e 100644
--- a/client/cypress.frontend.ts
+++ b/client/cypress.frontend.ts
@@ -1,34 +1,29 @@
-import {defineConfig} from 'cypress';
-import {readFileSync} from "fs";
-import {resolve} from "path";
+import { defineConfig } from 'cypress';
+import { readFileSync } from 'fs';
+import { resolve } from 'path';
 
 export default defineConfig({
   chromeWebSecurity: false,
   e2e: {
-    baseUrl: "http://localhost:8080",
+    baseUrl: 'http://localhost:8080',
     specPattern: 'cypress/e2e/frontend/**/*.{cy,spec}.{js,ts}',
     supportFile: 'cypress/support/e2e.ts',
     setupNodeEvents(on, config) {
       on('task', {
         getSchema() {
-          return readFileSync(
-            resolve(__dirname, '../server/schema.graphql'),
-            'utf8'
-          );
-        }
+          return readFileSync(resolve(__dirname, '../server/schema.graphql'), 'utf8');
+        },
       });
     },
   },
   videoUploadOnPasses: false,
-  reporter: "junit",
+  reporter: 'junit',
   reporterOptions: {
-    mochaFile: "cypress/test-reports/frontend/cypress-results-[hash].xml",
-    toConsole: true
+    mochaFile: 'cypress/test-reports/frontend/cypress-results-[hash].xml',
+    toConsole: true,
   },
-  "projectId": "msk-fe",
+  projectId: 'msk-fe',
   retries: {
-    runMode: 3
-  }
+    runMode: 3,
+  },
 });
-
-
diff --git a/client/index.html b/client/index.html
index b29052f2..c0866fd4 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,43 +1,41 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
-  <title><%= htmlWebpackPlugin.options.VUE_APP_TITLE %></title>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
+    <title><%= htmlWebpackPlugin.options.VUE_APP_TITLE %></title>
 
-  <link href='https://fonts.googleapis.com/css?family=Material+Icons' rel="stylesheet" type="text/css">
-  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,800" rel="stylesheet">
-  <link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" type="text/css" />
+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,800" rel="stylesheet" />
+    <link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet" />
 
-  <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="<%- htmlWebpackPlugin.options.VUE_APP_FAVICON_32 %>">
-  <link rel="icon" type="image/png" sizes="16x16" href="<%- htmlWebpackPlugin.options.VUE_APP_FAVICON_16 %>">
-  <link rel="manifest" href="/static/site.webmanifest">
-  <link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#5bbad5">
-  <meta name="msapplication-TileColor" content="#da532c">
-  <meta name="theme-color" content="#ffffff">
+    <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="<%- htmlWebpackPlugin.options.VUE_APP_FAVICON_32 %>" />
+    <link rel="icon" type="image/png" sizes="16x16" href="<%- htmlWebpackPlugin.options.VUE_APP_FAVICON_16 %>" />
+    <link rel="manifest" href="/static/site.webmanifest" />
+    <link rel="mask-icon" href="/static/safari-pinned-tab.svg" color="#5bbad5" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="theme-color" content="#ffffff" />
 
-  <script>
-    window.UPLOADCARE_PUBLIC_KEY = '78212ff39934a59775ac';
-    window.UPLOADCARE_LOCALE = 'de';
-    window.UPLOADCARE_LOCALE_TRANSLATIONS = {
-      dialog: {
-        tabs: {
-          file: {
-            drag: 'Ziehen Sie ein Bild hier hinein',
-            button: 'Wählen Sie ein lokales Bild',
-          }
-        }
-      }
-    };
-  </script>
-
-</head>
-<body>
-<div id="app">
-  <div class="center">
-  </div>
-</div>
-<!-- built files will be auto injected -->
-</body>
+    <script>
+      window.UPLOADCARE_PUBLIC_KEY = '78212ff39934a59775ac';
+      window.UPLOADCARE_LOCALE = 'de';
+      window.UPLOADCARE_LOCALE_TRANSLATIONS = {
+        dialog: {
+          tabs: {
+            file: {
+              drag: 'Ziehen Sie ein Bild hier hinein',
+              button: 'Wählen Sie ein lokales Bild',
+            },
+          },
+        },
+      };
+    </script>
+  </head>
+  <body>
+    <div id="app">
+      <div class="center"></div>
+    </div>
+    <!-- built files will be auto injected -->
+  </body>
 </html>
diff --git a/client/jest.config.js b/client/jest.config.js
index fd7e0cd0..460b060a 100644
--- a/client/jest.config.js
+++ b/client/jest.config.js
@@ -1,11 +1,5 @@
 module.exports = {
-  moduleFileExtensions: [
-    'js',
-    'jsx',
-    'ts',
-    'json',
-    'vue',
-  ],
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'json', 'vue'],
   transform: {
     '\\.(gql|graphql)$': 'jest-transform-graphql',
     '^.+\\.js$': 'babel-jest',
@@ -13,27 +7,15 @@ module.exports = {
     '^.+\\.vue$': '@vue/vue2-jest',
     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
   },
-  modulePaths: [
-    '<rootDir>/src',
-    '<rootDir>/node_modules',
-  ],
-  transformIgnorePatterns: [
-    '/node_modules/',
-  ],
+  modulePaths: ['<rootDir>/src', '<rootDir>/node_modules'],
+  transformIgnorePatterns: ['/node_modules/'],
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',
     '^gql/(.*)$': '<rootDir>/src/graphql/gql/$1',
   },
-  snapshotSerializers: [
-    '<rootDir>/node_modules/jest-serializer-vue',
-  ],
+  snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   testEnvironment: 'jsdom',
-  testMatch: [
-    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)',
-  ],
+  testMatch: ['**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'],
   testURL: 'http://localhost/',
-  watchPlugins: [
-    'jest-watch-typeahead/filename',
-    'jest-watch-typeahead/testname',
-  ],
+  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
 };
diff --git a/client/mock.js b/client/mock.js
index 0769f90b..ad319f11 100644
--- a/client/mock.js
+++ b/client/mock.js
@@ -1,29 +1,26 @@
-const {readFileSync} = require('fs');
-const {resolve} = require('path');
-const {  addMocksToSchema} = require('@graphql-tools/mock');
+const { readFileSync } = require('fs');
+const { resolve } = require('path');
+const { addMocksToSchema } = require('@graphql-tools/mock');
 const { makeExecutableSchema } = require('@graphql-tools/schema');
 const { graphql } = require('graphql');
 
-const schemaString = readFileSync(
-  resolve(__dirname,'../server/schema.graphql'),
-  'utf8'
-);
+const schemaString = readFileSync(resolve(__dirname, '../server/schema.graphql'), 'utf8');
 
 // Make a GraphQL schema with no resolvers
-const schema = makeExecutableSchema({ typeDefs: schemaString })
+const schema = makeExecutableSchema({ typeDefs: schemaString });
 
 // Create a new schema with mocks
-const schemaWithMocks = addMocksToSchema({ schema })
+const schemaWithMocks = addMocksToSchema({ schema });
 
 const query = /* GraphQL */ `
   query MeQuery {
     me {
-     firstName 
+      firstName
     }
   }
-`
+`;
 
 graphql({
   schema: schemaWithMocks,
   source: query,
-}).then(result => console.log('Got result', result))
+}).then((result) => console.log('Got result', result));
diff --git a/client/src/@types/graphql.d.ts b/client/src/@types/graphql.d.ts
index 60950b87..90cca9ba 100644
--- a/client/src/@types/graphql.d.ts
+++ b/client/src/@types/graphql.d.ts
@@ -1,12 +1,12 @@
 declare module '*.graphql' {
-  import {DocumentNode} from "graphql";
+  import { DocumentNode } from 'graphql';
   const Schema: DocumentNode;
 
   export = Schema;
 }
 
 declare module '*.gql' {
-  import {DocumentNode} from "graphql";
+  import { DocumentNode } from 'graphql';
   const content: DocumentNode;
   export default content;
 }
diff --git a/client/src/@types/index.ts b/client/src/@types/index.ts
index ea59eef3..74bf4dea 100644
--- a/client/src/@types/index.ts
+++ b/client/src/@types/index.ts
@@ -11,7 +11,7 @@ export interface ContentBlock {
 }
 
 export interface ActionOptions {
-  up?: boolean,
-  down?: boolean,
-  extended?: boolean
+  up?: boolean;
+  down?: boolean;
+  extended?: boolean;
 }
diff --git a/client/src/App.vue b/client/src/App.vue
index 0905d8c3..253967df 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,109 +1,107 @@
 <template>
-  <div
-    :class="{'no-scroll': showModal || showMobileNavigation}"
-    class="app"
-    id="app"
-  >
+  <div :class="{ 'no-scroll': showModal || showMobileNavigation }" class="app" id="app">
     <read-only-banner />
     <scroll-up />
-    <component
-      :is="showModalDeprecated"
-      v-if="showModalDeprecated"
-    />
-    <component
-      :is="showModal"
-      v-if="showModal"
-    />
+    <component :is="showModalDeprecated" v-if="showModalDeprecated" />
+    <component :is="showModal" v-if="showModal" />
     <component :is="layout" />
   </div>
 </template>
 
 <script>
-  import {mapGetters} from 'vuex';
-  import ScrollUp from '@/components/ScrollUp';
-  import ReadOnlyBanner from '@/components/ReadOnlyBanner';
+import { mapGetters } from 'vuex';
+import ScrollUp from '@/components/ScrollUp';
+import ReadOnlyBanner from '@/components/ReadOnlyBanner';
 
-  import modals from '@/components/modals';
+import modals from '@/components/modals';
 
-  const NewContentBlockWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/content-block-form/NewContentBlockWizard');
-  const EditContentBlockWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/content-block-form/EditContentBlockWizard');
-  const EditRoomEntryWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/rooms/room-entries/EditRoomEntryWizard');
-  const NewProjectEntryWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/portfolio/NewProjectEntryWizard');
-  const EditProjectEntryWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/portfolio/EditProjectEntryWizard');
-  const NewObjectiveWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/objective-groups/NewObjectiveWizard');
-  const NewNoteWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/notes/NewNoteWizard');
-  const EditNoteWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/notes/EditNoteWizard');
-  const EditClassNameWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/school-class/EditClassNameWizard');
-  const EditTeamNameWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/profile/EditTeamNameWizard');
-  const EditSnapshotTitleWizard = () => import(/* webpackChunkName: "content-forms" */'@/components/snapshots/EditSnapshotTitleWizard');
-  const DefaultLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/DefaultLayout');
-  const SimpleLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/SimpleLayout');
-  const FullScreenLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/FullScreenLayout');
-  const PublicLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/PublicLayout');
-  const BlankLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/BlankLayout');
-  const SplitLayout = () => import(/* webpackChunkName: "layouts" */'@/layouts/SplitLayout');
+const NewContentBlockWizard = () =>
+  import(/* webpackChunkName: "content-forms" */ '@/components/content-block-form/NewContentBlockWizard');
+const EditContentBlockWizard = () =>
+  import(/* webpackChunkName: "content-forms" */ '@/components/content-block-form/EditContentBlockWizard');
+const EditRoomEntryWizard = () =>
+  import(/* webpackChunkName: "content-forms" */ '@/components/rooms/room-entries/EditRoomEntryWizard');
+const NewProjectEntryWizard = () =>
+  import(/* webpackChunkName: "content-forms" */ '@/components/portfolio/NewProjectEntryWizard');
+const EditProjectEntryWizard = () =>
+  import(/* webpackChunkName: "content-forms" */ '@/components/portfolio/EditProjectEntryWizard');
+const NewObjectiveWizard = () =>
+  import(/* webpackChunkName: "content-forms" */ '@/components/objective-groups/NewObjectiveWizard');
+const NewNoteWizard = () => import(/* webpackChunkName: "content-forms" */ '@/components/notes/NewNoteWizard');
+const EditNoteWizard = () => import(/* webpackChunkName: "content-forms" */ '@/components/notes/EditNoteWizard');
+const EditClassNameWizard = () =>
+  import(/* webpackChunkName: "content-forms" */ '@/components/school-class/EditClassNameWizard');
+const EditTeamNameWizard = () =>
+  import(/* webpackChunkName: "content-forms" */ '@/components/profile/EditTeamNameWizard');
+const EditSnapshotTitleWizard = () =>
+  import(/* webpackChunkName: "content-forms" */ '@/components/snapshots/EditSnapshotTitleWizard');
+const DefaultLayout = () => import(/* webpackChunkName: "layouts" */ '@/layouts/DefaultLayout');
+const SimpleLayout = () => import(/* webpackChunkName: "layouts" */ '@/layouts/SimpleLayout');
+const FullScreenLayout = () => import(/* webpackChunkName: "layouts" */ '@/layouts/FullScreenLayout');
+const PublicLayout = () => import(/* webpackChunkName: "layouts" */ '@/layouts/PublicLayout');
+const BlankLayout = () => import(/* webpackChunkName: "layouts" */ '@/layouts/BlankLayout');
+const SplitLayout = () => import(/* webpackChunkName: "layouts" */ '@/layouts/SplitLayout');
 
-  export default {
-    name: 'App',
+export default {
+  name: 'App',
 
-    components: {
-      ReadOnlyBanner,
-      ScrollUp,
-      DefaultLayout,
-      SimpleLayout,
-      FullScreenLayout,
-      PublicLayout,
-      BlankLayout,
-      SplitLayout,
-      NewContentBlockWizard,
-      EditContentBlockWizard,
-      EditRoomEntryWizard,
-      NewProjectEntryWizard,
-      EditProjectEntryWizard,
-      NewObjectiveWizard,
-      NewNoteWizard,
-      EditNoteWizard,
-      EditClassNameWizard,
-      EditTeamNameWizard,
-      EditSnapshotTitleWizard,
-      ...modals
+  components: {
+    ReadOnlyBanner,
+    ScrollUp,
+    DefaultLayout,
+    SimpleLayout,
+    FullScreenLayout,
+    PublicLayout,
+    BlankLayout,
+    SplitLayout,
+    NewContentBlockWizard,
+    EditContentBlockWizard,
+    EditRoomEntryWizard,
+    NewProjectEntryWizard,
+    EditProjectEntryWizard,
+    NewObjectiveWizard,
+    NewNoteWizard,
+    EditNoteWizard,
+    EditClassNameWizard,
+    EditTeamNameWizard,
+    EditSnapshotTitleWizard,
+    ...modals,
+  },
+
+  computed: {
+    layout() {
+      return (this.$route.meta.layout || 'default') + '-layout';
     },
-
-    computed: {
-      layout() {
-        return (this.$route.meta.layout || 'default') + '-layout';
-      },
-      ...mapGetters({
-        showModalDeprecated: 'showModal', // don't use this any more todo: remove this
-        showMobileNavigation: 'showMobileNavigation',
-      }),
-      showModal() {
-        return this.$modal.state.component;
-      },
+    ...mapGetters({
+      showModalDeprecated: 'showModal', // don't use this any more todo: remove this
+      showMobileNavigation: 'showMobileNavigation',
+    }),
+    showModal() {
+      return this.$modal.state.component;
     },
-  };
+  },
+};
 </script>
 
 <style lang="scss">
-  @import "~styles/main.scss";
-  @import "~styles/helpers";
+@import '~styles/main.scss';
+@import '~styles/helpers';
 
-  body {
-    overflow-y: auto;
-    overflow-x: hidden;
-    height: 100vh;
-  }
+body {
+  overflow-y: auto;
+  overflow-x: hidden;
+  height: 100vh;
+}
 
-  .app {
-    /*overflow-y: auto;*/
-    min-height: 100vh;
-    /*for IE10+*/
-    display: flex;
-    flex-direction: column;
-  }
-
-  .no-scroll {
-    overflow-y: hidden;
-  }
+.app {
+  /*overflow-y: auto;*/
+  min-height: 100vh;
+  /*for IE10+*/
+  display: flex;
+  flex-direction: column;
+}
 
+.no-scroll {
+  overflow-y: hidden;
+}
 </style>
diff --git a/client/src/components/AddContentButton.vue b/client/src/components/AddContentButton.vue
index f9ed72fc..529c2578 100644
--- a/client/src/components/AddContentButton.vue
+++ b/client/src/components/AddContentButton.vue
@@ -1,104 +1,98 @@
 <template>
   <div class="add-content">
-    <a
-      class="add-content__button"
-      @click="addContent"
-    >
+    <a class="add-content__button" @click="addContent">
       <add-pointer class="add-content__icon" />
     </a>
   </div>
 </template>
 
 <script>
-  import {
-    CREATE_CONTENT_BLOCK_AFTER_PAGE,
-    CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
-  } from '@/router/module.names';
+import { CREATE_CONTENT_BLOCK_AFTER_PAGE, CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE } from '@/router/module.names';
 
-  const AddPointer = () => import(/* webpackChunkName: "icons" */'@/components/icons/AddPointer');
+const AddPointer = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddPointer');
 
-  export default {
-    props: {
-      where: {
-        type: Object,
-        validator(prop) {
-          return Object.prototype.hasOwnProperty.call(prop, 'after' )
-            || Object.prototype.hasOwnProperty.call(prop, 'parent');
-        }
+export default {
+  props: {
+    where: {
+      type: Object,
+      validator(prop) {
+        return (
+          Object.prototype.hasOwnProperty.call(prop, 'after') || Object.prototype.hasOwnProperty.call(prop, 'parent')
+        );
       },
     },
+  },
 
-    components: {
-      AddPointer
+  components: {
+    AddPointer,
+  },
+
+  computed: {
+    parent() {
+      return this.where.parent;
     },
-
-    computed: {
-      parent() {
-        return this.where.parent;
-      },
-      after() {
-        return this.where.after;
-      },
-      isObjectiveGroup() {
-        return this.parent && this.parent.__typename === 'ObjectiveGroupNode';
-      },
-      slug() {
-        return this.$route.params.slug;
-      }
+    after() {
+      return this.where.after;
     },
+    isObjectiveGroup() {
+      return this.parent && this.parent.__typename === 'ObjectiveGroupNode';
+    },
+    slug() {
+      return this.$route.params.slug;
+    },
+  },
 
-
-    methods: {
-      addContent() {
-        if (this.isObjectiveGroup) {
-          this.$modal.open('new-objective-wizard', {parent: this.parent.id});
+  methods: {
+    addContent() {
+      if (this.isObjectiveGroup) {
+        this.$modal.open('new-objective-wizard', { parent: this.parent.id });
+      } else {
+        let route;
+        if (this.after && this.after.id) {
+          route = {
+            name: CREATE_CONTENT_BLOCK_AFTER_PAGE,
+            params: {
+              after: this.after.id,
+              slug: this.slug,
+            },
+          };
         } else {
-          let route;
-          if (this.after && this.after.id) {
-             route = {
-              name: CREATE_CONTENT_BLOCK_AFTER_PAGE,
-              params: {
-                after: this.after.id,
-                slug: this.slug
-              }
-            };
-          } else {
-            route = {
-              name: CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
-              params: {
-                parent: this.parent.id
-              }
-            };
-          }
-          this.$router.push(route);
+          route = {
+            name: CREATE_CONTENT_BLOCK_UNDER_PARENT_PAGE,
+            params: {
+              parent: this.parent.id,
+            },
+          };
         }
+        this.$router.push(route);
       }
-    }
-  };
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .add-content {
-    display: none;
-    position: relative;
-    @include desktop {
-      display: flex;
-    }
-    z-index: 1;
-
-    justify-content: flex-end;
-
-    &__button {
-      margin-right: -85px;
-      cursor: pointer;
-      display: inline-grid;
-    }
-
-    &__icon {
-      width: 40px;
-      fill: $color-silver-dark;
-    }
+.add-content {
+  display: none;
+  position: relative;
+  @include desktop {
+    display: flex;
   }
+  z-index: 1;
+
+  justify-content: flex-end;
+
+  &__button {
+    margin-right: -85px;
+    cursor: pointer;
+    display: inline-grid;
+  }
+
+  &__icon {
+    width: 40px;
+    fill: $color-silver-dark;
+  }
+}
 </style>
diff --git a/client/src/components/AddContentElement.vue b/client/src/components/AddContentElement.vue
index 692b617c..5afa10e8 100644
--- a/client/src/components/AddContentElement.vue
+++ b/client/src/components/AddContentElement.vue
@@ -1,41 +1,38 @@
 <template>
-  <div
-    class="add-content-element"
-    @click="$emit('add-element', index)"
-  >
+  <div class="add-content-element" @click="$emit('add-element', index)">
     <add-icon class="add-content-element__icon" />
   </div>
 </template>
 
 <script>
-  const AddIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon');
+const AddIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddIcon');
 
-  export default {
-    props: ['index'],
+export default {
+  props: ['index'],
 
-    components: {
-      AddIcon
-    }
-  };
+  components: {
+    AddIcon,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+@import '@/styles/_variables.scss';
 
-  .add-content-element {
-    display: flex;
-    justify-content: center;
-    border-bottom: 2px solid $color-silver-dark;
-    margin-bottom: 21px + 25px;
-    cursor: pointer;
+.add-content-element {
+  display: flex;
+  justify-content: center;
+  border-bottom: 2px solid $color-silver-dark;
+  margin-bottom: 21px + 25px;
+  cursor: pointer;
 
-    &__icon {
-      width: 40px;
-      height: 40px;
-      fill: $color-silver-dark;
-      margin-bottom: -21px;
-      background-color: $color-white;
-      border-radius: 50px;
-    }
+  &__icon {
+    width: 40px;
+    height: 40px;
+    fill: $color-silver-dark;
+    margin-bottom: -21px;
+    background-color: $color-white;
+    border-radius: 50px;
   }
+}
 </style>
diff --git a/client/src/components/AddWidget.vue b/client/src/components/AddWidget.vue
index f223ae46..2856a11e 100644
--- a/client/src/components/AddWidget.vue
+++ b/client/src/components/AddWidget.vue
@@ -11,68 +11,71 @@
 </template>
 
 <script>
-  const AddIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon.vue');
+const AddIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddIcon.vue');
 
-  export default {
-    props: {
-      route: {
-        type: String,
-        default: null
-      },
-      reverse: { // use reverse colors
-        type: Boolean,
-        default: false
-      },
-      click: {
-        type: Function,
-        default: null
-      }
+export default {
+  props: {
+    route: {
+      type: String,
+      default: null,
     },
+    reverse: {
+      // use reverse colors
+      type: Boolean,
+      default: false,
+    },
+    click: {
+      type: Function,
+      default: null,
+    },
+  },
 
-    components: {
-      AddIcon
-    },
+  components: {
+    AddIcon,
+  },
 
-    computed: {
-      component() {
-        // only use the router link if the route prop is provided, otherwise render a normal anchor tag
-        return this.route ? 'router-link' : 'a';
-      },
-      properties() {
-        return this.route ? {
-          to: this.route,
-          tag: 'div'
-        } : {};
-      }
+  computed: {
+    component() {
+      // only use the router link if the route prop is provided, otherwise render a normal anchor tag
+      return this.route ? 'router-link' : 'a';
     },
-  };
+    properties() {
+      return this.route
+        ? {
+            to: this.route,
+            tag: 'div',
+          }
+        : {};
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .add-widget {
-    display: none;
-    align-items: center;
-    justify-content: center;
-    @include widget-shadow;
-    cursor: pointer;
+.add-widget {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  @include widget-shadow;
+  cursor: pointer;
 
-    @include desktop {
-      display: flex;
-    }
-
-    &__add {
-      width: 80px;
-      fill: $color-silver-dark;
-    }
-
-    &--reverse {
-      @include widget-shadow-reverse;
-    }
-
-    &--reverse &__add {
-      fill: white;
-    }
+  @include desktop {
+    display: flex;
   }
+
+  &__add {
+    width: 80px;
+    fill: $color-silver-dark;
+  }
+
+  &--reverse {
+    @include widget-shadow-reverse;
+  }
+
+  &--reverse &__add {
+    fill: white;
+  }
+}
 </style>
diff --git a/client/src/components/AssignmentWithSubmissions.vue b/client/src/components/AssignmentWithSubmissions.vue
index fe49cc74..db5e1d93 100644
--- a/client/src/components/AssignmentWithSubmissions.vue
+++ b/client/src/components/AssignmentWithSubmissions.vue
@@ -1,53 +1,31 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
   <div class="assignment-with-submissions">
-    <p
-      class="assignment-with-submissions__text"
-      data-cy="assignment-main-text"
-      v-html="assignment.assignment"
-    />
+    <p class="assignment-with-submissions__text" data-cy="assignment-main-text" v-html="assignment.assignment" />
 
     <div>
-      <a
-        class="button button--primary submissions-page__back"
-        @click="$emit('back')"
-      >Aufgabe im {{ $flavor.textModule }} anzeigen</a>
+      <a class="button button--primary submissions-page__back" @click="$emit('back')"
+        >Aufgabe im {{ $flavor.textModule }} anzeigen</a
+      >
     </div>
 
-    <div
-      class="assignment-with-submissions__solution"
-      v-if="assignment.solution"
-    >
-      <h4 class="assignment-with-submissions__heading">
-        Lösung
-      </h4>
+    <div class="assignment-with-submissions__solution" v-if="assignment.solution">
+      <h4 class="assignment-with-submissions__heading">Lösung</h4>
       <p
         class="assignment-with-submissions__solution-text"
         data-cy="assignment-solution"
         v-html="assignment.solution"
       />
     </div>
-    <p
-      class="assignment-with-submissions__no-submissions"
-      v-if="!assignment.submissions.length"
-    >
+    <p class="assignment-with-submissions__no-submissions" v-if="!assignment.submissions.length">
       Zu diesem Auftrag sind noch keine Ergebnisse vorhanden.
     </p>
 
-    <div
-      class="assignment-with-submissions__submissions submissions"
-      v-if="assignment.submissions.length"
-    >
+    <div class="assignment-with-submissions__submissions submissions" v-if="assignment.submissions.length">
       <div class="submissions__header student-submission-row submission-header">
-        <p class="submission-header__title">
-          Lernende
-        </p>
-        <p class="submission-header__title">
-          Ergebnisse
-        </p>
-        <p class="submission-header__title">
-          Feedback
-        </p>
+        <p class="submission-header__title">Lernende</p>
+        <p class="submission-header__title">Ergebnisse</p>
+        <p class="submission-header__title">Feedback</p>
       </div>
       <router-link
         :to="submissionLink(submission)"
@@ -55,116 +33,110 @@
         v-for="submission in submissions"
         :key="submission.id"
       >
-        <student-submission
-          :submission="submission"
-          class="assignment-with-submissions__submission"
-        />
+        <student-submission :submission="submission" class="assignment-with-submissions__submission" />
       </router-link>
     </div>
   </div>
 </template>
 
 <script>
-  import StudentSubmission from '@/components/StudentSubmission';
+import StudentSubmission from '@/components/StudentSubmission';
 
-  import { meQuery } from '@/graphql/queries';
+import { meQuery } from '@/graphql/queries';
 
-  export default {
-    props: ['assignment'],
+export default {
+  props: ['assignment'],
 
-    components: {
-      StudentSubmission
+  components: {
+    StudentSubmission,
+  },
+
+  data() {
+    return {
+      me: {},
+    };
+  },
+
+  computed: {
+    submissions() {
+      return this.assignment.submissions.filter((submission) => {
+        return this.belongsToSchool(submission);
+      });
     },
-
-    data() {
-      return {
-        me: {}
-      };
+    currentFilter() {
+      return this.me.selectedClass;
     },
+  },
 
-    computed: {
-      submissions() {
-        return this.assignment.submissions.filter(submission => {
-          return this.belongsToSchool(submission);
-        });
-      },
-      currentFilter() {
-        return this.me.selectedClass;
-      },
+  methods: {
+    submissionLink(submission) {
+      return `/submission/${submission.id}`;
     },
-
-    methods: {
-      submissionLink(submission) {
-        return `/submission/${submission.id}`;
-      },
-      belongsToSchool(submission) {
-        if (this.currentFilter.id === '') {
-          return true;
-        }
-        return submission.student.schoolClasses.some(schoolClass => schoolClass .id === this.currentFilter.id);
+    belongsToSchool(submission) {
+      if (this.currentFilter.id === '') {
+        return true;
       }
+      return submission.student.schoolClasses.some((schoolClass) => schoolClass.id === this.currentFilter.id);
     },
+  },
 
-    apollo: {
-      me: meQuery
-    }
-
-  };
+  apollo: {
+    me: meQuery,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
-
-  .assignment-with-submissions {
-    &__title {
-      font-size: toRem(35px);
-    }
-
-    &__text {
-      font-size: toRem(26px);
-      margin-bottom: 1rem;
-    }
-
-    &__solution {
-      margin-bottom: 1rem;
-    }
-
-    &__heading {
-      font-size: toRem(17px);
-      font-weight: 800;
-      margin-bottom: 1rem;
-    }
-
-    &__link {
-      display: block;
-    }
-
-    &__submissions {
-      margin-top: 3rem;
-    }
-
-    &__no-submissions {
-      margin-top: $large-spacing;
-    }
-
-    :deep(ul) {
-      @include list-parent;
-    }
-    :deep(li) {
-      @include list-child;
-    }
+@import '~styles/helpers';
 
+.assignment-with-submissions {
+  &__title {
+    font-size: toRem(35px);
   }
 
-  .submissions {
-    width: 100%;
+  &__text {
+    font-size: toRem(26px);
+    margin-bottom: 1rem;
   }
 
-  .submission-header {
-    &__title {
-      color: $color-silver-dark;
-      font-family: $sans-serif-font-family;
-    }
+  &__solution {
+    margin-bottom: 1rem;
   }
 
+  &__heading {
+    font-size: toRem(17px);
+    font-weight: 800;
+    margin-bottom: 1rem;
+  }
+
+  &__link {
+    display: block;
+  }
+
+  &__submissions {
+    margin-top: 3rem;
+  }
+
+  &__no-submissions {
+    margin-top: $large-spacing;
+  }
+
+  :deep(ul) {
+    @include list-parent;
+  }
+  :deep(li) {
+    @include list-child;
+  }
+}
+
+.submissions {
+  width: 100%;
+}
+
+.submission-header {
+  &__title {
+    color: $color-silver-dark;
+    font-family: $sans-serif-font-family;
+  }
+}
 </style>
diff --git a/client/src/components/BackLink.vue b/client/src/components/BackLink.vue
index b2d8a89e..0fb0651f 100644
--- a/client/src/components/BackLink.vue
+++ b/client/src/components/BackLink.vue
@@ -1,72 +1,68 @@
 <template>
-  <router-link
-    :to="to"
-    data-cy="back-link"
-    class="sub-navigation-item back-link"
-  >
+  <router-link :to="to" data-cy="back-link" 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: '',
-      },
-      type: {
-        type: String,
-        default: 'topic',
-      },
-      slug: {
-        type: String,
-        default: '',
-      },
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
     },
-
-    components: {
-      ChevronLeft,
+    type: {
+      type: String,
+      default: 'topic',
     },
-
-    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};
-        }
-      },
-      fullTitle() {
-        switch (this.type) {
-          case 'topic':
-            return `${this.$flavor.textTopic}: ${this.title}`;
-          case 'module':
-            return `${this.$flavor.textModule}: ${this.title}`;
-          default:
-            return this.title;
-        }
-      },
+    slug: {
+      type: String,
+      default: '',
     },
-  };
+  },
+
+  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 };
+      }
+    },
+    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/Chapter.vue b/client/src/components/Chapter.vue
index 220f3ebc..6e9a3fb6 100644
--- a/client/src/components/Chapter.vue
+++ b/client/src/components/Chapter.vue
@@ -1,26 +1,12 @@
 <template>
-  <div
-    :data-scrollto="chapter.id"
-    class="chapter"
-    data-cy="chapter"
-  >
-    <div
-      :class="{'hideable-element--greyed-out': titleGreyedOut}"
-      class="hideable-element"
-      v-if="!titleHidden"
-    >
-      <h3
-        :id="'chapter-' + index"
-      >
+  <div :data-scrollto="chapter.id" class="chapter" data-cy="chapter">
+    <div :class="{ 'hideable-element--greyed-out': titleGreyedOut }" class="hideable-element" v-if="!titleHidden">
+      <h3 :id="'chapter-' + index">
         {{ chapter.title }}
       </h3>
     </div>
 
-    <visibility-action
-      :block="chapter"
-      type="chapter-title"
-      v-if="editMode"
-    />
+    <visibility-action :block="chapter" type="chapter-title" v-if="editMode" />
 
     <bookmark-actions
       :bookmarked="!!chapter.bookmark"
@@ -33,27 +19,17 @@
       @bookmark="bookmark(!chapter.bookmark)"
     />
     <div
-      :class="{'hideable-element--greyed-out': descriptionGreyedOut}"
+      :class="{ 'hideable-element--greyed-out': descriptionGreyedOut }"
       class="chapter__intro intro hideable-element"
       v-if="!descriptionHidden"
     >
-      <visibility-action
-        :block="chapter"
-        :chapter="true"
-        type="chapter-description"
-        v-if="editMode"
-      />
-      <p
-        class="chapter__description"
-      >
+      <visibility-action :block="chapter" :chapter="true" type="chapter-description" v-if="editMode" />
+      <p class="chapter__description">
         {{ chapter.description }}
       </p>
     </div>
 
-    <add-content-button
-      :where="{parent: chapter}"
-      v-if="editMode"
-    />
+    <add-content-button :where="{ parent: chapter }" v-if="editMode" />
 
     <content-block
       :content-block="contentBlock"
@@ -66,177 +42,179 @@
 </template>
 
 <script>
-  import ContentBlock from '@/components/ContentBlock';
-  import AddContentButton from '@/components/AddContentButton';
-  import BookmarkActions from '@/components/notes/BookmarkActions';
-  import VisibilityAction from '@/components/visibility/VisibilityAction';
+import ContentBlock from '@/components/ContentBlock';
+import AddContentButton from '@/components/AddContentButton';
+import BookmarkActions from '@/components/notes/BookmarkActions';
+import VisibilityAction from '@/components/visibility/VisibilityAction';
 
-  import {hidden} from '@/helpers/visibility';
-  import {CHAPTER_DESCRIPTION_TYPE, CHAPTER_TITLE_TYPE, CONTENT_TYPE} from '@/consts/types';
+import { hidden } from '@/helpers/visibility';
+import { CHAPTER_DESCRIPTION_TYPE, CHAPTER_TITLE_TYPE, CONTENT_TYPE } from '@/consts/types';
 
-  import UPDATE_CHAPTER_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateChapterBookmark.gql';
-  import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
+import UPDATE_CHAPTER_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateChapterBookmark.gql';
+import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
 
-  import me from '@/mixins/me';
+import me from '@/mixins/me';
 
-  export default {
-    props: {
-      chapter: {
-        type: Object,
-        default: () => ({})
-      },
-      index: {
-        type: Number,
-        default: 0
-      },
-      editMode: {
-        type: Boolean,
-        default: false
+export default {
+  props: {
+    chapter: {
+      type: Object,
+      default: () => ({}),
+    },
+    index: {
+      type: Number,
+      default: 0,
+    },
+    editMode: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  mixins: [me],
+
+  components: {
+    BookmarkActions,
+    VisibilityAction,
+    ContentBlock,
+    AddContentButton,
+  },
+
+  computed: {
+    filteredContentBlocks() {
+      if (!(this.chapter && this.chapter.contentBlocks)) {
+        return [];
       }
+      if (this.editMode) {
+        return this.chapter.contentBlocks;
+      }
+      return this.chapter.contentBlocks.filter(
+        (contentBlock) =>
+          !hidden({
+            block: contentBlock,
+            schoolClass: this.schoolClass,
+            type: CONTENT_TYPE,
+          })
+      );
     },
-
-    mixins: [me],
-
-    components: {
-      BookmarkActions,
-      VisibilityAction,
-      ContentBlock,
-      AddContentButton,
+    note() {
+      if (this.chapter && this.chapter.bookmark) {
+        return this.chapter.bookmark.note;
+      }
+      return false;
     },
-
-    computed: {
-      filteredContentBlocks() {
-        if (!(this.chapter && this.chapter.contentBlocks)) {
-          return [];
-        }
-        if (this.editMode) {
-          return this.chapter.contentBlocks;
-        }
-        return this.chapter.contentBlocks.filter(contentBlock => !hidden({
-          block: contentBlock,
-          schoolClass: this.schoolClass,
-          type: CONTENT_TYPE,
-        }));
-      },
-      note() {
-        if (this.chapter && this.chapter.bookmark) {
-          return this.chapter.bookmark.note;
-        }
-        return false;
-      },
-      titleGreyedOut() {
-        return this.textHidden(CHAPTER_TITLE_TYPE) && this.editMode;
-      },
-      // never hidden when editing the module
-      titleHidden() {
-        if (this.chapter.titleHidden === true) {
-          return true;
-        }
-        return this.textHidden(CHAPTER_TITLE_TYPE) && !this.editMode;
-      },
-      descriptionGreyedOut() {
-        return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && this.editMode;
-      },
-      // never hidden when editing the module
-      descriptionHidden() {
-        if (this.chapter.descriptionHidden === true) {
-          return true;
-        }
-        return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && !this.editMode;
-      },
+    titleGreyedOut() {
+      return this.textHidden(CHAPTER_TITLE_TYPE) && this.editMode;
     },
+    // never hidden when editing the module
+    titleHidden() {
+      if (this.chapter.titleHidden === true) {
+        return true;
+      }
+      return this.textHidden(CHAPTER_TITLE_TYPE) && !this.editMode;
+    },
+    descriptionGreyedOut() {
+      return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && this.editMode;
+    },
+    // never hidden when editing the module
+    descriptionHidden() {
+      if (this.chapter.descriptionHidden === true) {
+        return true;
+      }
+      return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && !this.editMode;
+    },
+  },
 
-    methods: {
-      bookmark(bookmarked) {
-        const id = this.chapter.id;
-        this.$apollo.mutate({
-          mutation: UPDATE_CHAPTER_BOOKMARK_MUTATION,
-          variables: {
-            input: {
-              chapter: id,
-              bookmarked,
-            },
+  methods: {
+    bookmark(bookmarked) {
+      const id = this.chapter.id;
+      this.$apollo.mutate({
+        mutation: UPDATE_CHAPTER_BOOKMARK_MUTATION,
+        variables: {
+          input: {
+            chapter: id,
+            bookmarked,
           },
-          update: (store) => {
-            const query = CHAPTER_QUERY;
-            const variables = {id};
-            const {chapter} = store.readQuery({
-              query,
-              variables,
-            });
+        },
+        update: (store) => {
+          const query = CHAPTER_QUERY;
+          const variables = { id };
+          const { chapter } = store.readQuery({
+            query,
+            variables,
+          });
 
-            let bookmark;
+          let bookmark;
 
-            if (bookmarked) {
-              bookmark = {
-                __typename: 'ChapterBookmarkNode',
-                note: null,
-              };
-            } else {
-              bookmark = null;
-            }
-
-            const data = {
-              chapter: {
-                ...chapter,
-                bookmark
-              }
+          if (bookmarked) {
+            bookmark = {
+              __typename: 'ChapterBookmarkNode',
+              note: null,
             };
+          } else {
+            bookmark = null;
+          }
 
-            store.writeQuery({
-              data,
-              query,
-              variables,
-            });
-          },
-          optimisticResponse: {
-            __typename: 'Mutation',
-            updateChapterBookmark: {
-              __typename: 'UpdateChapterBookmarkPayload',
-              success: true,
+          const data = {
+            chapter: {
+              ...chapter,
+              bookmark,
             },
-          },
-        });
-      },
-      addNote(id) {
-        this.$store.dispatch('addNote', {
-          content: id,
-          parent: this.chapter.id,
-        });
-      },
-      editNote() {
-        this.$store.dispatch('editNote', this.chapter.bookmark.note);
-      },
-      textHidden(type) {
-        return hidden({
-          block: this.chapter,
-          schoolClass: this.schoolClass,
-          type,
-        });
-      },
-    },
+          };
 
-  };
+          store.writeQuery({
+            data,
+            query,
+            variables,
+          });
+        },
+        optimisticResponse: {
+          __typename: 'Mutation',
+          updateChapterBookmark: {
+            __typename: 'UpdateChapterBookmarkPayload',
+            success: true,
+          },
+        },
+      });
+    },
+    addNote(id) {
+      this.$store.dispatch('addNote', {
+        content: id,
+        parent: this.chapter.id,
+      });
+    },
+    editNote() {
+      this.$store.dispatch('editNote', this.chapter.bookmark.note);
+    },
+    textHidden(type) {
+      return hidden({
+        block: this.chapter,
+        schoolClass: this.schoolClass,
+        type,
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .chapter {
-    position: relative;
+.chapter {
+  position: relative;
 
-    &__bookmark-actions {
-      margin-top: 3px;
-    }
-
-    &__intro {
-      position: relative;
-    }
-
-    &__description {
-      @include lead-paragraph;
-
-      margin-bottom: $large-spacing;
-    }
+  &__bookmark-actions {
+    margin-top: 3px;
   }
+
+  &__intro {
+    position: relative;
+  }
+
+  &__description {
+    @include lead-paragraph;
+
+    margin-bottom: $large-spacing;
+  }
+}
 </style>
diff --git a/client/src/components/ColorChooser.vue b/client/src/components/ColorChooser.vue
index 3880b7a6..498a212e 100644
--- a/client/src/components/ColorChooser.vue
+++ b/client/src/components/ColorChooser.vue
@@ -1,92 +1,86 @@
 <template>
   <div class="color-chooser">
     <div
-      :class="{'color-chooser__color-wrapper--selected': selectedColor === color.name}"
+      :class="{ 'color-chooser__color-wrapper--selected': selectedColor === color.name }"
       class="color-chooser__color-wrapper"
       data-cy="color-select"
       v-for="(color, index) in colors"
       :key="index"
       @click="$emit('input', color.name)"
     >
-      <div
-        :class="'color-chooser__color--' + color.name"
-        class="color-chooser__color"
-      >
-        <tick
-          class="color-chooser__selected-icon"
-          v-if="selectedColor === color.name"
-        />
+      <div :class="'color-chooser__color--' + color.name" class="color-chooser__color">
+        <tick class="color-chooser__selected-icon" v-if="selectedColor === color.name" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  const Tick = () => import(/* webpackChunkName: "icons" */'@/components/icons/Tick');
+const Tick = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Tick');
 
-  export default {
-    props: ['selectedColor'],
+export default {
+  props: ['selectedColor'],
 
-    components: {
-      Tick
-    },
+  components: {
+    Tick,
+  },
 
-    data() {
-      return {
-        colors: [
-          {
-            name: 'yellow'
-          },
-          {
-            name: 'blue'
-          },
-          {
-            name: 'red'
-          },
-          {
-            name: 'green'
-          }
-        ]
-      };
-    },
-  };
+  data() {
+    return {
+      colors: [
+        {
+          name: 'yellow',
+        },
+        {
+          name: 'blue',
+        },
+        {
+          name: 'red',
+        },
+        {
+          name: 'green',
+        },
+      ],
+    };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
-  .color-chooser {
-    display: flex;
+.color-chooser {
+  display: flex;
 
-    &__color-wrapper {
-      margin-right: 10px;
-      border-radius: 50px;
-      padding: 10px;
+  &__color-wrapper {
+    margin-right: 10px;
+    border-radius: 50px;
+    padding: 10px;
 
-      &--selected {
-        border: 1px solid $color-charcoal-dark;
-      }
-    }
-
-    &__selected-icon {
-      width: 17px;
-      fill: $color-charcoal-dark;
-    }
-
-    &__color {
-      width: 46px;
-      height: 46px;
-      border-radius: 23px;
-      display: flex;
-      justify-content: center;
-      @supports (display: grid) {
-        display: grid
-      }
-      justify-items: center;
-      align-items: center;
-
-      @include skillbox-colors;
+    &--selected {
+      border: 1px solid $color-charcoal-dark;
     }
   }
+
+  &__selected-icon {
+    width: 17px;
+    fill: $color-charcoal-dark;
+  }
+
+  &__color {
+    width: 46px;
+    height: 46px;
+    border-radius: 23px;
+    display: flex;
+    justify-content: center;
+    @supports (display: grid) {
+      display: grid;
+    }
+    justify-items: center;
+    align-items: center;
+
+    @include skillbox-colors;
+  }
+}
 </style>
diff --git a/client/src/components/ContentBlock.vue b/client/src/components/ContentBlock.vue
index d0d9dd80..9571dbab 100644
--- a/client/src/components/ContentBlock.vue
+++ b/client/src/components/ContentBlock.vue
@@ -1,38 +1,20 @@
 <template>
   <div
-    :class="{'hideable-element--greyed-out': hidden}"
+    :class="{ 'hideable-element--greyed-out': hidden }"
     class="content-block__container hideable-element content-list__parent"
   >
-    <div
-      :class="specialClass"
-      :style="instrumentStyle"
-      class="content-block"
-      data-cy="content-block"
-    >
-      <div
-        class="block-actions"
-        v-if="canEditModule && !isInstrumentBlock"
-      >
-        <user-widget
-          v-bind="me"
-          class="block-actions__user-widget content-block__user-widget"
-          v-if="isMine"
-        />
+    <div :class="specialClass" :style="instrumentStyle" class="content-block" data-cy="content-block">
+      <div class="block-actions" v-if="canEditModule && !isInstrumentBlock">
+        <user-widget v-bind="me" class="block-actions__user-widget content-block__user-widget" v-if="isMine" />
         <more-options-widget>
-          <li
-            class="popover-links__link"
-            v-if="!isInstrumentBlock"
-          >
+          <li class="popover-links__link" v-if="!isInstrumentBlock">
             <popover-link
               data-cy="duplicate-content-block-link"
               text="Duplizieren"
               @link-action="duplicateContentBlock(contentBlock)"
             />
           </li>
-          <li
-            class="popover-links__link"
-            v-if="isMine"
-          >
+          <li class="popover-links__link" v-if="isMine">
             <popover-link
               data-cy="delete-content-block-link"
               text="Löschen"
@@ -40,22 +22,13 @@
             />
           </li>
 
-          <li
-            class="popover-links__link"
-            v-if="isMine"
-          >
-            <popover-link
-              text="Bearbeiten"
-              @link-action="editContentBlock(contentBlock)"
-            />
+          <li class="popover-links__link" v-if="isMine">
+            <popover-link text="Bearbeiten" @link-action="editContentBlock(contentBlock)" />
           </li>
         </more-options-widget>
       </div>
       <div class="content-block__visibility">
-        <visibility-action
-          :block="contentBlock"
-          v-if="canEditModule"
-        />
+        <visibility-action :block="contentBlock" v-if="canEditModule" />
       </div>
 
       <h3
@@ -66,10 +39,7 @@
       >
         {{ instrumentLabel }}
       </h3>
-      <h4
-        class="content-block__title"
-        v-if="!contentBlock.indent"
-      >
+      <h4 class="content-block__title" v-if="!contentBlock.indent">
         {{ contentBlock.title }}
       </h4>
 
@@ -85,109 +55,107 @@
       />
     </div>
 
-    <add-content-button
-      :where="{after: contentBlock}"
-      v-if="canEditModule"
-    />
+    <add-content-button :where="{ after: contentBlock }" v-if="canEditModule" />
   </div>
 </template>
 
 <script>
-  import AddContentButton from '@/components/AddContentButton';
-  import MoreOptionsWidget from '@/components/MoreOptionsWidget';
-  import UserWidget from '@/components/UserWidget';
-  import VisibilityAction from '@/components/visibility/VisibilityAction';
+import AddContentButton from '@/components/AddContentButton';
+import MoreOptionsWidget from '@/components/MoreOptionsWidget';
+import UserWidget from '@/components/UserWidget';
+import VisibilityAction from '@/components/visibility/VisibilityAction';
 
-  import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
-  import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
-  import DUPLICATE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/duplicateContentBlock.gql';
+import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
+import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
+import DUPLICATE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/duplicateContentBlock.gql';
 
-  import me from '@/mixins/me';
+import me from '@/mixins/me';
 
-  import {hidden} from '@/helpers/visibility';
-  import {CONTENT_TYPE} from '@/consts/types';
-  import PopoverLink from '@/components/ui/PopoverLink';
-  import {insertAtIndex, removeAtIndex} from '@/graphql/immutable-operations';
-  import {EDIT_CONTENT_BLOCK_PAGE} from '@/router/module.names';
-  import {instrumentCategory} from '@/helpers/instrumentType';
+import { hidden } from '@/helpers/visibility';
+import { CONTENT_TYPE } from '@/consts/types';
+import PopoverLink from '@/components/ui/PopoverLink';
+import { insertAtIndex, removeAtIndex } from '@/graphql/immutable-operations';
+import { EDIT_CONTENT_BLOCK_PAGE } from '@/router/module.names';
+import { instrumentCategory } from '@/helpers/instrumentType';
 
-  const ContentComponent = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentComponent');
+const ContentComponent = () =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ContentComponent');
 
-
-  export default {
-    name: 'ContentBlock',
-    props: {
-      contentBlock: {
-        type: Object,
-        default: () => ({}),
-      },
-      parent: {
-        type: Object,
-        default: () => ({}),
-      },
-      editMode: {
-        type: Boolean,
-        default: true,
-      },
+export default {
+  name: 'ContentBlock',
+  props: {
+    contentBlock: {
+      type: Object,
+      default: () => ({}),
     },
-
-    mixins: [me],
-
-    components: {
-      PopoverLink,
-      ContentComponent,
-      AddContentButton,
-      VisibilityAction,
-      MoreOptionsWidget,
-      UserWidget,
+    parent: {
+      type: Object,
+      default: () => ({}),
     },
+    editMode: {
+      type: Boolean,
+      default: true,
+    },
+  },
 
-    computed: {
-      canEditModule() {
-        return !this.contentBlock.indent && this.editMode;
-      },
-      specialClass() {
-        return `content-block--${this.contentBlock.type.toLowerCase()}`;
-      },
-      isInstrumentBlock() {
-        return !!this.contentBlock.instrumentCategory;
-      },
-      // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
-      instrumentStyle() {
-        if (this.isInstrumentBlock) {
-          return {
-            backgroundColor: this.contentBlock.instrumentCategory.background
-          };
-        }
-        return {};
-      },
-      instrumentLabel() {
-        const contentType = this.contentBlock.type.toLowerCase();
-        if (contentType.startsWith('base')) { // all legacy instruments start with `base`
-          return instrumentCategory(contentType);
-        }
-        if (this.isInstrumentBlock) {
-          return instrumentCategory(this.contentBlock.instrumentCategory.name);
-        }
-        return '';
-      },
-      // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
-      instrumentLabelStyle() {
-        if (this.isInstrumentBlock) {
-          return {
-            color: this.contentBlock.instrumentCategory.foreground
-          };
-        }
-        return {};
-      },
-      canEditContentBlock() {
-        return this.isMine && !this.contentBlock.indent;
-      },
-      isMine() {
-        return this.contentBlock.mine;
-      },
-      contentBlocksWithContentLists() {
-        /*
+  mixins: [me],
+
+  components: {
+    PopoverLink,
+    ContentComponent,
+    AddContentButton,
+    VisibilityAction,
+    MoreOptionsWidget,
+    UserWidget,
+  },
+
+  computed: {
+    canEditModule() {
+      return !this.contentBlock.indent && this.editMode;
+    },
+    specialClass() {
+      return `content-block--${this.contentBlock.type.toLowerCase()}`;
+    },
+    isInstrumentBlock() {
+      return !!this.contentBlock.instrumentCategory;
+    },
+    // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+    instrumentStyle() {
+      if (this.isInstrumentBlock) {
+        return {
+          backgroundColor: this.contentBlock.instrumentCategory.background,
+        };
+      }
+      return {};
+    },
+    instrumentLabel() {
+      const contentType = this.contentBlock.type.toLowerCase();
+      if (contentType.startsWith('base')) {
+        // all legacy instruments start with `base`
+        return instrumentCategory(contentType);
+      }
+      if (this.isInstrumentBlock) {
+        return instrumentCategory(this.contentBlock.instrumentCategory.name);
+      }
+      return '';
+    },
+    // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+    instrumentLabelStyle() {
+      if (this.isInstrumentBlock) {
+        return {
+          color: this.contentBlock.instrumentCategory.foreground,
+        };
+      }
+      return {};
+    },
+    canEditContentBlock() {
+      return this.isMine && !this.contentBlock.indent;
+    },
+    isMine() {
+      return this.contentBlock.mine;
+    },
+    contentBlocksWithContentLists() {
+      /*
         collects all content_list_items in content_lists:
         {
           text_block,
@@ -201,221 +169,238 @@
           text_block
         }
         */
-        let contentList = [];
-        let newContent = this.contentBlock.contents.reduce((newContents, content, index) => {
-          // collect content_list_items
-          if (content.type === 'content_list_item') {
-            contentList = [...contentList, content];
-            if (index === this.contentBlock.contents.length - 1) { // content is last element of contents array
-              let updatedContent = [...newContents, ...this.createContentListOrBlocks(contentList)];
-              return updatedContent;
-            }
+      let contentList = [];
+      let newContent = this.contentBlock.contents.reduce((newContents, content, index) => {
+        // collect content_list_items
+        if (content.type === 'content_list_item') {
+          contentList = [...contentList, content];
+          if (index === this.contentBlock.contents.length - 1) {
+            // content is last element of contents array
+            let updatedContent = [...newContents, ...this.createContentListOrBlocks(contentList)];
+            return updatedContent;
+          }
+          return newContents;
+        } else {
+          // handle all other items and reset current content_list if necessary
+          if (contentList.length !== 0) {
+            newContents = [...newContents, ...this.createContentListOrBlocks(contentList), content];
+            contentList = [];
             return newContents;
           } else {
-            // handle all other items and reset current content_list if necessary
-            if (contentList.length !== 0) {
-              newContents = [...newContents, ...this.createContentListOrBlocks(contentList), content];
-              contentList = [];
-              return newContents;
-            } else {
-              return [...newContents, content];
-            }
+            return [...newContents, content];
           }
-        }, []);
-        return Object.assign({}, this.contentBlock, {
-          contents: newContent,
-        });
-      },
-      hidden() {
-        return hidden({
-          block: this.contentBlock,
-          schoolClass: this.schoolClass,
-          type: CONTENT_TYPE,
-        });
-      },
-      root() {
-        // we need the root content block id, not the generated content block if inside a content list block
-        return this.contentBlock.root ? this.contentBlock.root : this.contentBlock.id;
-      },
+        }
+      }, []);
+      return Object.assign({}, this.contentBlock, {
+        contents: newContent,
+      });
     },
-    methods: {
-      duplicateContentBlock({id}) {
-        const parent = this.parent;
-        this.$apollo.mutate({
-          mutation: DUPLICATE_CONTENT_BLOCK_MUTATION,
-          variables: {
-            input: {
-              id,
+    hidden() {
+      return hidden({
+        block: this.contentBlock,
+        schoolClass: this.schoolClass,
+        type: CONTENT_TYPE,
+      });
+    },
+    root() {
+      // we need the root content block id, not the generated content block if inside a content list block
+      return this.contentBlock.root ? this.contentBlock.root : this.contentBlock.id;
+    },
+  },
+  methods: {
+    duplicateContentBlock({ id }) {
+      const parent = this.parent;
+      this.$apollo.mutate({
+        mutation: DUPLICATE_CONTENT_BLOCK_MUTATION,
+        variables: {
+          input: {
+            id,
+          },
+        },
+        update(
+          store,
+          {
+            data: {
+              duplicateContentBlock: { contentBlock },
             },
+          }
+        ) {
+          if (contentBlock) {
+            const query = CHAPTER_QUERY;
+            const variables = {
+              id: parent.id,
+            };
+            const { chapter } = store.readQuery({ query, variables });
+            const index = chapter.contentBlocks.findIndex((contentBlock) => contentBlock.id === id);
+            const contentBlocks = insertAtIndex(chapter.contentBlocks, index, contentBlock);
+            const data = {
+              chapter: {
+                ...chapter,
+                contentBlocks,
+              },
+            };
+            store.writeQuery({ query, variables, data });
+          }
+        },
+      });
+    },
+    editContentBlock(contentBlock) {
+      const route = {
+        name: EDIT_CONTENT_BLOCK_PAGE,
+        params: {
+          id: contentBlock.id,
+        },
+      };
+      this.$router.push(route);
+    },
+    deleteContentBlock(contentBlock) {
+      this.$modal
+        .open('confirm')
+        .then(() => {
+          this.doDeleteContentBlock(contentBlock);
+        })
+        .catch();
+    },
+    doDeleteContentBlock(contentBlock) {
+      const parent = this.parent;
+      const id = contentBlock.id;
+      this.$apollo.mutate({
+        mutation: DELETE_CONTENT_BLOCK_MUTATION,
+        variables: {
+          input: {
+            id,
           },
-          update(store, {data: {duplicateContentBlock: {contentBlock}}}) {
-            if (contentBlock) {
-              const query = CHAPTER_QUERY;
-              const variables = {
-                id: parent.id,
-              };
-              const {chapter} = store.readQuery({query, variables});
-              const index = chapter.contentBlocks.findIndex(contentBlock => contentBlock.id === id);
-              const contentBlocks = insertAtIndex(chapter.contentBlocks, index, contentBlock);
-              const data = {
-                chapter: {
-                  ...chapter,
-                  contentBlocks,
-                },
-              };
-              store.writeQuery({query, variables, data});
-            }
-          },
-        });
-
-      },
-      editContentBlock(contentBlock) {
-        const route = {
-          name: EDIT_CONTENT_BLOCK_PAGE,
-          params: {
-            id: contentBlock.id,
-          },
-        };
-        this.$router.push(route);
-      },
-      deleteContentBlock(contentBlock) {
-        this.$modal.open('confirm').then(() => {
-            this.doDeleteContentBlock(contentBlock);
-          })
-          .catch();
-      },
-      doDeleteContentBlock(contentBlock) {
-        const parent = this.parent;
-        const id = contentBlock.id;
-        this.$apollo.mutate({
-          mutation: DELETE_CONTENT_BLOCK_MUTATION,
-          variables: {
-            input: {
-              id,
+        },
+        update(
+          store,
+          {
+            data: {
+              deleteContentBlock: { success },
             },
-          },
-          update(store, {data: {deleteContentBlock: {success}}}) {
-            if (success) {
-              const query = CHAPTER_QUERY;
-              const variables = {
-                id: parent.id,
-              };
-              const {chapter} = store.readQuery({query, variables});
-              const index = chapter.contentBlocks.findIndex(contentBlock => contentBlock.id === id);
-              const contentBlocks = removeAtIndex(chapter.contentBlocks, index);
-              const data = {
-                chapter: {
-                  ...chapter,
-                  contentBlocks,
-                },
-              };
-              store.writeQuery({query, variables, data});
-            }
-          },
-        });
-      },
-      createContentListOrBlocks(contentList) {
-        return [{
+          }
+        ) {
+          if (success) {
+            const query = CHAPTER_QUERY;
+            const variables = {
+              id: parent.id,
+            };
+            const { chapter } = store.readQuery({ query, variables });
+            const index = chapter.contentBlocks.findIndex((contentBlock) => contentBlock.id === id);
+            const contentBlocks = removeAtIndex(chapter.contentBlocks, index);
+            const data = {
+              chapter: {
+                ...chapter,
+                contentBlocks,
+              },
+            };
+            store.writeQuery({ query, variables, data });
+          }
+        },
+      });
+    },
+    createContentListOrBlocks(contentList) {
+      return [
+        {
           type: 'content_list',
           contents: contentList,
           id: contentList[0].id,
-        }];
-      },
+        },
+      ];
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .content-block {
-    margin-bottom: $section-spacing;
+.content-block {
+  margin-bottom: $section-spacing;
+  position: relative;
+
+  &__container {
     position: relative;
+  }
 
-    &__container {
-      position: relative;
+  &__title {
+    line-height: 1.5;
+    margin-top: -0.5rem; // to offset the 1.5 line height, it leaves a padding on top
+  }
+
+  &__instrument-label {
+    margin-bottom: $medium-spacing;
+    @include regular-text();
+  }
+
+  &__action-button {
+    cursor: pointer;
+  }
+
+  &__user-widget {
+    margin-right: 0;
+  }
+
+  &--base_communication {
+    @include content-box($color-accent-1-list);
+
+    .content-block__instrument-label {
+      color: $color-accent-1-dark;
     }
+  }
 
-    &__title {
-      line-height: 1.5;
-      margin-top: -0.5rem; // to offset the 1.5 line height, it leaves a padding on top
-    }
+  &--task {
+    @include light-border(bottom);
 
-    &__instrument-label {
-      margin-bottom: $medium-spacing;
-      @include regular-text();
-    }
-
-    &__action-button {
-      cursor: pointer;
-    }
-
-    &__user-widget {
-      margin-right: 0;
-    }
-
-    &--base_communication {
-      @include content-box($color-accent-1-list);
-
-      .content-block__instrument-label {
-        color: $color-accent-1-dark;
-      }
-    }
-
-    &--task {
+    .content-block__title {
+      color: $color-brand;
+      margin-top: $default-padding;
+      margin-bottom: $large-spacing;
       @include light-border(bottom);
 
-      .content-block__title {
-        color: $color-brand;
-        margin-top: $default-padding;
-        margin-bottom: $large-spacing;
-        @include light-border(bottom);
-
-        @include desktop {
-          margin-top: 0;
-        }
+      @include desktop {
+        margin-top: 0;
       }
     }
-
-    &--base_society {
-      @include content-box($color-accent-2-list);
-
-      .content-block__instrument-label {
-        color: $color-accent-2-dark;
-      }
-    }
-
-    &--base_interdisciplinary {
-      @include content-box($color-accent-4-list);
-
-      .content-block__instrument-label {
-        color: $color-accent-4-dark;
-      }
-    }
-
-    &--instrument {
-      @include content-box-base;
-    }
-
-    :deep(p) {
-      line-height: 1.5;
-      margin-bottom: 1em;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    :deep(.text-block) {
-      ul {
-        @include list-parent;
-      }
-
-      li {
-        @include list-child;
-        line-height: 1.5;
-      }
-    }
-
   }
+
+  &--base_society {
+    @include content-box($color-accent-2-list);
+
+    .content-block__instrument-label {
+      color: $color-accent-2-dark;
+    }
+  }
+
+  &--base_interdisciplinary {
+    @include content-box($color-accent-4-list);
+
+    .content-block__instrument-label {
+      color: $color-accent-4-dark;
+    }
+  }
+
+  &--instrument {
+    @include content-box-base;
+  }
+
+  :deep(p) {
+    line-height: 1.5;
+    margin-bottom: 1em;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  :deep(.text-block) {
+    ul {
+      @include list-parent;
+    }
+
+    li {
+      @include list-child;
+      line-height: 1.5;
+    }
+  }
+}
 </style>
diff --git a/client/src/components/FullscreenImage.vue b/client/src/components/FullscreenImage.vue
index ddacddbb..b0e767bc 100644
--- a/client/src/components/FullscreenImage.vue
+++ b/client/src/components/FullscreenImage.vue
@@ -1,38 +1,31 @@
 <template>
-  <modal
-    :hide-header="true"
-    :fullscreen="true"
-    class="fullscreen-image"
-  >
-    <img
-      :src="imageUrl"
-      class="fullscreen-image__image"
-    >
+  <modal :hide-header="true" :fullscreen="true" class="fullscreen-image">
+    <img :src="imageUrl" class="fullscreen-image__image" />
   </modal>
 </template>
 
 <script>
-  import Modal from '@/components/Modal';
+import Modal from '@/components/Modal';
 
-  export default {
-    components: {
-      Modal
+export default {
+  components: {
+    Modal,
+  },
+
+  computed: {
+    imageUrl() {
+      return this.$store.state.imageUrl;
     },
-
-    computed: {
-      imageUrl() {
-        return this.$store.state.imageUrl;
-      }
-    }
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  .fullscreen-image {
-    &__image {
-      max-width: 100%;
-      width: 100%;
-      vertical-align: bottom;
-    }
+.fullscreen-image {
+  &__image {
+    max-width: 100%;
+    width: 100%;
+    vertical-align: bottom;
   }
+}
 </style>
diff --git a/client/src/components/FullscreenInfographic.vue b/client/src/components/FullscreenInfographic.vue
index 859e21a5..2197ebc2 100644
--- a/client/src/components/FullscreenInfographic.vue
+++ b/client/src/components/FullscreenInfographic.vue
@@ -1,36 +1,35 @@
 <template>
   <modal :fullscreen="true">
-    <component
-      :value="value"
-      :is="type"
-    />
+    <component :value="value" :is="type" />
   </modal>
 </template>
 
 <script>
-  import Modal from '@/components/Modal';
-  const InfogramBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InfogramBlock');
-  const GeniallyBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/GeniallyBlock');
+import Modal from '@/components/Modal';
+const InfogramBlock = () =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/InfogramBlock');
+const GeniallyBlock = () =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/GeniallyBlock');
 
-  export default {
-    components: {
-      Modal,
-      InfogramBlock,
-      GeniallyBlock
+export default {
+  components: {
+    Modal,
+    InfogramBlock,
+    GeniallyBlock,
+  },
+
+  computed: {
+    id() {
+      return this.$store.state.infographic.id;
     },
-
-    computed: {
-      id() {
-        return this.$store.state.infographic.id;
-      },
-      type() {
-        return this.$store.state.infographic.type;
-      },
-      value() {
-        return {
-          id: this.id
-        };
-      }
-    }
-  };
+    type() {
+      return this.$store.state.infographic.type;
+    },
+    value() {
+      return {
+        id: this.id,
+      };
+    },
+  },
+};
 </script>
diff --git a/client/src/components/FullscreenVideo.vue b/client/src/components/FullscreenVideo.vue
index acf618e9..251cc5d9 100644
--- a/client/src/components/FullscreenVideo.vue
+++ b/client/src/components/FullscreenVideo.vue
@@ -1,9 +1,5 @@
 <template>
-  <modal
-    :hide-header="true"
-    :fullscreen="true"
-    class="fullscreen-video"
-  >
+  <modal :hide-header="true" :fullscreen="true" class="fullscreen-video">
     <iframe
       :src="src"
       width="2000"
@@ -18,31 +14,31 @@
 </template>
 
 <script>
-  import Modal from '@/components/Modal';
+import Modal from '@/components/Modal';
 
-  export default {
-    components: {
-      Modal
+export default {
+  components: {
+    Modal,
+  },
+
+  computed: {
+    vimeoId() {
+      return this.$store.state.vimeoId;
     },
-
-    computed: {
-      vimeoId() {
-        return this.$store.state.vimeoId;
-      },
-      src() {
-        return `https://player.vimeo.com/video/${this.vimeoId}`;
-      }
-    }
-  };
+    src() {
+      return `https://player.vimeo.com/video/${this.vimeoId}`;
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  .fullscreen-video {
-    &__embed {
-      max-width: 100%;
-      width: 100%;
-      height: 95vh;
-      vertical-align: bottom;
-    }
+.fullscreen-video {
+  &__embed {
+    max-width: 100%;
+    width: 100%;
+    height: 95vh;
+    vertical-align: bottom;
   }
+}
 </style>
diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue
index a2827a0d..9504e43e 100644
--- a/client/src/components/HeaderBar.vue
+++ b/client/src/components/HeaderBar.vue
@@ -1,139 +1,126 @@
 <template>
   <header class="header-bar">
-    <a
-      class="header-bar__sidebar-link"
-      data-cy="open-sidebar-link"
-      @click.stop="openSidebar('navigation')"
-    >
+    <a class="header-bar__sidebar-link" data-cy="open-sidebar-link" @click.stop="openSidebar('navigation')">
       <hamburger class="header-bar__sidebar-icon" />
     </a>
     <content-navigation class="header-bar__content-navigation" />
     <div class="user-header">
-      <a
-        class="user-header__sidebar-link"
-      >
-        <current-class
-          class="user-header__current-class"
-          @click.native.stop="openSidebar('profile')"
-        />
+      <a class="user-header__sidebar-link">
+        <current-class class="user-header__current-class" @click.native.stop="openSidebar('profile')" />
       </a>
 
-      <user-widget
-        v-bind="me"
-        data-cy="header-user-widget"
-        @click.native.stop="openSidebar('profile')"
-      />
+      <user-widget v-bind="me" data-cy="header-user-widget" @click.native.stop="openSidebar('profile')" />
     </div>
   </header>
 </template>
 
 <script>
-  import ContentNavigation from '@/components/book-navigation/ContentNavigation.vue';
-  import UserWidget from '@/components/UserWidget.vue';
-  import CurrentClass from '@/components/school-class/CurrentClass';
+import ContentNavigation from '@/components/book-navigation/ContentNavigation.vue';
+import UserWidget from '@/components/UserWidget.vue';
+import CurrentClass from '@/components/school-class/CurrentClass';
 
-  import openSidebar from '@/mixins/open-sidebar';
-  import me from '@/mixins/me';
+import openSidebar from '@/mixins/open-sidebar';
+import me from '@/mixins/me';
 
-  const Hamburger = () => import(/* webpackChunkName: "icons" */'@/components/icons/Hamburger');
+const Hamburger = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Hamburger');
 
-  export default {
-    mixins: [openSidebar, me],
+export default {
+  mixins: [openSidebar, me],
 
-    components: {
-      ContentNavigation,
-      UserWidget,
-      CurrentClass,
-      Hamburger,
-    },
-  };
+  components: {
+    ContentNavigation,
+    UserWidget,
+    CurrentClass,
+    Hamburger,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .header-bar {
-    display: flex;
-    flex-direction: row;
-    @supports (display: grid) {
-      display: grid;
-    }
-    align-items: center;
-    justify-content: space-between;
-    background-color: $color-white;
-    grid-auto-rows: 50px;
-    width: 100%;
-    max-width: 100vw;
+.header-bar {
+  display: flex;
+  flex-direction: row;
+  @supports (display: grid) {
+    display: grid;
+  }
+  align-items: center;
+  justify-content: space-between;
+  background-color: $color-white;
+  grid-auto-rows: 50px;
+  width: 100%;
+  max-width: 100vw;
 
-    grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
 
-    @include desktop {
-      grid-template-columns: 50px 1fr auto;
-      grid-template-rows: 50px;
-      grid-auto-rows: auto;
-    }
+  @include desktop {
+    grid-template-columns: 50px 1fr auto;
+    grid-template-rows: 50px;
+    grid-auto-rows: auto;
+  }
 
-    /*
+  /*
      * For IE10+
      */
-    -ms-grid-columns: 1fr 1fr 1fr;
-    -ms-grid-rows: 50px 50px;
+  -ms-grid-columns: 1fr 1fr 1fr;
+  -ms-grid-rows: 50px 50px;
 
-    /*
+  /*
     * For IE10+
     */
-    & > :nth-child(1) {
-      -ms-grid-column: 1;
-      -ms-grid-row-align: center;
-    }
+  & > :nth-child(1) {
+    -ms-grid-column: 1;
+    -ms-grid-row-align: center;
+  }
 
-    &__content-navigation {
-      grid-column: 2;
-      justify-content: space-between;
-    }
+  &__content-navigation {
+    grid-column: 2;
+    justify-content: space-between;
+  }
 
-    &__sidebar-link {
-      padding: $small-spacing;
-      cursor: pointer;
-    }
+  &__sidebar-link {
+    padding: $small-spacing;
+    cursor: pointer;
+  }
 
-    &__sidebar-icon {
-      width: 30px;
-      height: 30px;
-    }
+  &__sidebar-icon {
+    width: 30px;
+    height: 30px;
+  }
 
-    /*
+  /*
     * For IE10+
     */
-    & > :nth-child(3) {
-      -ms-grid-column: 3;
-      -ms-grid-row-align: center;
-      -ms-grid-column-align: end;
+  & > :nth-child(3) {
+    -ms-grid-column: 3;
+    -ms-grid-row-align: center;
+    -ms-grid-column-align: end;
 
-      justify-self: end;
-    }
-
-    & > :nth-child(4) {
-      -ms-grid-row: 2;
-      -ms-grid-column: 1;
-      -ms-grid-column-span: 3;
-    }
+    justify-self: end;
   }
 
-  .user-header {
-    display: flex;
+  & > :nth-child(4) {
+    -ms-grid-row: 2;
+    -ms-grid-column: 1;
+    -ms-grid-column-span: 3;
+  }
+}
 
-    &__current-class {
-      margin-right: $large-spacing;
-    }
+.user-header {
+  display: flex;
 
-    &__sidebar-link {
-      cursor: pointer;
-      display: none;
+  &__current-class {
+    margin-right: $large-spacing;
+  }
 
-      @include desktop {
-        display: flex;
-      }
+  &__sidebar-link {
+    cursor: pointer;
+    display: none;
+
+    @include desktop {
+      display: flex;
     }
   }
+}
 </style>
diff --git a/client/src/components/HelpfulTooltip.vue b/client/src/components/HelpfulTooltip.vue
index a47e69b8..01d24917 100644
--- a/client/src/components/HelpfulTooltip.vue
+++ b/client/src/components/HelpfulTooltip.vue
@@ -10,66 +10,65 @@
 </template>
 
 <script>
-  const InfoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon');
+const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
 
-  export default {
-    props: ['text'],
+export default {
+  props: ['text'],
 
-    components: {
-      InfoIcon
-    }
-  };
+  components: {
+    InfoIcon,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
-  .helpful-tooltip {
-    position: relative;
+.helpful-tooltip {
+  position: relative;
 
-    &__icon {
-      width: 20px;
-      height: 20px;
-      fill: $color-silver-dark;
-    }
+  &__icon {
+    width: 20px;
+    height: 20px;
+    fill: $color-silver-dark;
+  }
 
-    &__tooltip {
-      visibility: hidden;
+  &__tooltip {
+    visibility: hidden;
+    position: absolute;
+    left: 30px;
+    top: 0px;
+    width: 400px;
+  }
+
+  &__text {
+    display: inline-table;
+    width: auto;
+
+    background-color: $color-white;
+    border: 1px solid $color-silver-dark;
+    border-radius: 5px;
+    padding: $small-spacing;
+    @include small-text;
+
+    &::before {
+      content: '';
       position: absolute;
-      left: 30px;
-      top: 0px;
-      width: 400px;
-    }
-
-    &__text {
-      display: inline-table;
-      width: auto;
-
+      left: 0;
+      top: 18px;
+      margin-left: -1px;
+      border-left: 1px solid $color-silver-dark;
+      border-top: 1px solid $color-silver-dark;
       background-color: $color-white;
-      border: 1px solid $color-silver-dark;
-      border-radius: 5px;
-      padding: $small-spacing;
-      @include small-text;
-
-      &::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 18px;
-        margin-left: -1px;
-        border-left: 1px solid $color-silver-dark;
-        border-top: 1px solid $color-silver-dark;
-        background-color: $color-white;
-        width: 10px;
-        height: 10px;
-        transform: rotate(-45deg) translateY(-50%);
-      }
-
-    }
-
-    &:hover &__tooltip {
-      visibility: visible;
+      width: 10px;
+      height: 10px;
+      transform: rotate(-45deg) translateY(-50%);
     }
   }
+
+  &:hover &__tooltip {
+    visibility: visible;
+  }
+}
 </style>
diff --git a/client/src/components/LoadingButton.vue b/client/src/components/LoadingButton.vue
index 700c4ccd..390d16b7 100644
--- a/client/src/components/LoadingButton.vue
+++ b/client/src/components/LoadingButton.vue
@@ -1,57 +1,51 @@
 <template>
-  <button
-    :disabled="loading || disabled"
-    class="loading-button button button--primary button--big"
-  >
+  <button :disabled="loading || disabled" class="loading-button button button--primary button--big">
     <template v-if="!loading">
       {{ label }}
     </template>
-    <loading-icon
-      class="loading-button__icon"
-      v-else
-    />
+    <loading-icon class="loading-button__icon" v-else />
   </button>
 </template>
 
 <script>
-  const LoadingIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/LoadingIcon');
+const LoadingIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/LoadingIcon');
 
-  export default {
-    props: {
-      loading: {
-        type: Boolean,
-        default: false
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      },
-      label: {
-        type: String,
-        default: ''
-      }
+export default {
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
     },
-    components: {
-      LoadingIcon
-    }
-  };
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+  },
+  components: {
+    LoadingIcon,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .loading-button {
-    height: 52px;
-    min-width: 100px;
-    display: inline-flex;
-    justify-content: center;
+.loading-button {
+  height: 52px;
+  min-width: 100px;
+  display: inline-flex;
+  justify-content: center;
 
-    &__icon {
-      width: 14px;
-      height: 14px;
-      margin: 0 auto;
-      @include spin;
-      fill: $color-brand;
-    }
+  &__icon {
+    width: 14px;
+    height: 14px;
+    margin: 0 auto;
+    @include spin;
+    fill: $color-brand;
   }
+}
 </style>
diff --git a/client/src/components/LogoutWidget.vue b/client/src/components/LogoutWidget.vue
index 9d80936f..a198b94f 100644
--- a/client/src/components/LogoutWidget.vue
+++ b/client/src/components/LogoutWidget.vue
@@ -1,40 +1,40 @@
 <template>
   <div class="logout-widget">
-    <a
-      class="logout-widget__logout"
-      data-cy="logout"
-      @click="logout()"
-    >Abmelden</a>
+    <a class="logout-widget__logout" data-cy="logout" @click="logout()">Abmelden</a>
   </div>
 </template>
 
 <script>
-  import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';
+import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';
 
-  export default {
-    methods: {
-      logout() {
-        this.$apollo.mutate({
+export default {
+  methods: {
+    logout() {
+      this.$apollo
+        .mutate({
           mutation: LOGOUT_MUTATION,
-        }).then(({data}) => {
-          if (data.logout.success) { location.replace('/logout'); }
+        })
+        .then(({ data }) => {
+          if (data.logout.success) {
+            location.replace('/logout');
+          }
         });
-      }
-    }
-  };
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
-  .logout-widget {
-    display: flex;
-    align-items: center;
+.logout-widget {
+  display: flex;
+  align-items: center;
 
-    &__logout {
-      @include default-link;
-      cursor: pointer;
-    }
+  &__logout {
+    @include default-link;
+    cursor: pointer;
   }
+}
 </style>
diff --git a/client/src/components/MobileHeader.vue b/client/src/components/MobileHeader.vue
index e16987be..540f5aff 100644
--- a/client/src/components/MobileHeader.vue
+++ b/client/src/components/MobileHeader.vue
@@ -4,65 +4,59 @@
       <hamburger class="mobile-header__hamburger" />
     </a>
 
-    <router-link
-      to="/"
-      data-cy="mobile-home-link"
-    >
+    <router-link to="/" data-cy="mobile-home-link">
       <logo />
     </router-link>
 
-    <user-widget
-      v-bind="me"
-      @click.native.stop="openSidebar('profile')"
-    />
+    <user-widget v-bind="me" @click.native.stop="openSidebar('profile')" />
   </div>
 </template>
 
 <script>
-  import UserWidget from '@/components/UserWidget';
+import UserWidget from '@/components/UserWidget';
 
-  import me from '@/mixins/me';
-  import openSidebar from '@/mixins/open-sidebar';
+import me from '@/mixins/me';
+import openSidebar from '@/mixins/open-sidebar';
 
-  const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
-  const Hamburger = () => import(/* webpackChunkName: "icons" */'@/components/icons/Hamburger');
+const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
+const Hamburger = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Hamburger');
 
-  export default {
-    mixins: [me, openSidebar],
+export default {
+  mixins: [me, openSidebar],
 
-    components: {
-      Logo,
-      Hamburger,
-      UserWidget,
+  components: {
+    Logo,
+    Hamburger,
+    UserWidget,
+  },
+
+  methods: {
+    showMobileNavigation() {
+      this.$store.dispatch('showMobileNavigation', true);
     },
-
-    methods: {
-      showMobileNavigation() {
-        this.$store.dispatch('showMobileNavigation', true);
-      },
-    },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .mobile-header {
-    justify-content: space-between;
-    align-items: center;
+.mobile-header {
+  justify-content: space-between;
+  align-items: center;
 
-    display: flex;
+  display: flex;
 
-    @include desktop {
-      display: none;
-    }
-
-    padding: 0 $medium-spacing;
-
-    &__hamburger {
-      width: 30px;
-      height: 30px;
-      fill: $color-silver-dark;
-    }
+  @include desktop {
+    display: none;
   }
+
+  padding: 0 $medium-spacing;
+
+  &__hamburger {
+    width: 30px;
+    height: 30px;
+    fill: $color-silver-dark;
+  }
+}
 </style>
diff --git a/client/src/components/Modal.vue b/client/src/components/Modal.vue
index 17e5c979..9757bd2e 100644
--- a/client/src/components/Modal.vue
+++ b/client/src/components/Modal.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="modal__backdrop">
     <div
-      :class="{'modal--hide-header': hideHeader || fullscreen, 'modal--fullscreen': fullscreen, 'modal--small': small}"
+      :class="{
+        'modal--hide-header': hideHeader || fullscreen,
+        'modal--fullscreen': fullscreen,
+        'modal--small': small,
+      }"
       class="modal"
     >
       <div class="modal__header">
@@ -9,20 +13,14 @@
       </div>
       <div class="modal__body">
         <slot />
-        <div
-          class="modal__close-button"
-          @click="hideModal"
-        >
+        <div class="modal__close-button" @click="hideModal">
           <cross class="modal__close-icon" />
         </div>
       </div>
       <div class="modal__footer">
         <slot name="footer">
           <!--<a class="button button&#45;&#45;active">Speichern</a>-->
-          <a
-            class="button"
-            @click="hideModal"
-          >Abbrechen</a>
+          <a class="button" @click="hideModal">Abbrechen</a>
         </slot>
       </div>
     </div>
@@ -30,159 +28,158 @@
 </template>
 
 <script>
-  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
+const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
 
-  export default {
-    props: {
-      hideHeader: {
-        type: Boolean,
-        default: false
-      },
-      fullscreen: {
-        type: Boolean,
-        default: false
-      },
-      small: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  props: {
+    hideHeader: {
+      type: Boolean,
+      default: false,
     },
-
-    components: {
-      Cross
+    fullscreen: {
+      type: Boolean,
+      default: false,
     },
+    small: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
-    methods: {
-      hideModal() {
-        this.$store.dispatch('hideModal');
-      }
-    }
-  };
+  components: {
+    Cross,
+  },
+
+  methods: {
+    hideModal() {
+      this.$store.dispatch('hideModal');
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+@import '@/styles/_variables.scss';
 
-  .modal {
-    align-self: center;
-    justify-self: center;
-    width: 700px;
-    height: 80vh;
-    background-color: $color-white;
-    border-radius: 12px;
-    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
-    border: 1px solid $color-silver-light;
-    display: -ms-grid;
+.modal {
+  align-self: center;
+  justify-self: center;
+  width: 700px;
+  height: 80vh;
+  background-color: $color-white;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+  border: 1px solid $color-silver-light;
+  display: -ms-grid;
+  @supports (display: grid) {
+    display: grid;
+  }
+  grid-template-rows: auto 1fr 65px;
+  grid-template-areas: 'header' 'body' 'footer';
+  -ms-grid-rows: auto 1fr 65px;
+  position: relative;
+
+  &__backdrop {
+    display: flex;
+    justify-content: center;
     @supports (display: grid) {
       display: grid;
     }
-    grid-template-rows: auto 1fr 65px;
-    grid-template-areas: "header" "body" "footer";
-    -ms-grid-rows: auto 1fr 65px;
-    position: relative;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: rgba($color-white, 0.8);
+    z-index: 90;
+  }
 
-    &__backdrop {
-      display: flex;
-      justify-content: center;
-      @supports (display: grid) {
-        display: grid;
-      }
-      position: fixed;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      background-color: rgba($color-white, 0.8);
-      z-index: 90;
-    }
+  &__header {
+    grid-area: header;
+    -ms-grid-row: 1;
+    padding: 10px $modal-lateral-padding;
+    border-bottom: 1px solid $color-silver-light;
+  }
 
-    &__header {
-      grid-area: header;
-      -ms-grid-row: 1;
-      padding: 10px $modal-lateral-padding;
-      border-bottom: 1px solid $color-silver-light;
-    }
+  &__body {
+    grid-area: body;
+    -ms-grid-row: 2;
+    padding: 10px $modal-lateral-padding;
+    overflow: auto;
+    box-sizing: border-box;
+    min-height: 30vh;
+  }
 
-    &__body {
-      grid-area: body;
-      -ms-grid-row: 2;
-      padding: 10px $modal-lateral-padding;
-      overflow: auto;
-      box-sizing: border-box;
-      min-height: 30vh;
-    }
+  &__close-button {
+    display: none;
+    cursor: pointer;
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    background: rgba($color-white, 0.5);
+    border-radius: 40px;
+    padding: 10px;
+    align-content: center;
+  }
 
-    &__close-button {
+  &__footer {
+    grid-area: footer;
+    -ms-grid-row: 3;
+    border-top: 1px solid $color-silver-light;
+    padding: 16px $modal-lateral-padding;
+  }
+
+  $parent: &;
+
+  &--hide-header {
+    grid-template-rows: 1fr 65px;
+    grid-template-areas: 'body' 'footer';
+
+    #{$parent}__header {
       display: none;
-      cursor: pointer;
-      position: absolute;
-      right: 15px;
-      top: 15px;
-      background: rgba($color-white, 0.5);
-      border-radius: 40px;
-      padding: 10px;
-      align-content: center;
     }
 
-    &__footer {
-      grid-area: footer;
-      -ms-grid-row: 3;
-      border-top: 1px solid $color-silver-light;
-      padding: 16px $modal-lateral-padding;
-    }
-
-    $parent: &;
-
-    &--hide-header {
-      grid-template-rows: 1fr 65px;
-      grid-template-areas: "body" "footer";
-
-      #{$parent}__header {
-        display: none;
-      }
-
-      #{$parent}__body {
-        padding: $default-padding;
-      }
-
-    }
-
-    &--fullscreen {
-      width: 95vw;
-      height: auto;
-      grid-template-rows: 1fr;
-      -ms-grid-rows: 1fr;
-      grid-template-areas: "body";
-      overflow: hidden;
-
-      #{$parent}__footer {
-        display: none;
-      }
-
-      #{$parent}__body {
-        padding: 0;
-        scrollbar-width: none;
-        margin-right: -5px;
-
-        height: auto;
-        max-height: 95vh;
-
-        &::-webkit-scrollbar {
-          display: none;
-        }
-      }
-
-      #{$parent}__close-button {
-        display: flex;
-      }
-    }
-
-    &--small {
-      height: auto;
-
-      #{$parent}__body {
-        min-height: 0;
-      }
+    #{$parent}__body {
+      padding: $default-padding;
     }
   }
+
+  &--fullscreen {
+    width: 95vw;
+    height: auto;
+    grid-template-rows: 1fr;
+    -ms-grid-rows: 1fr;
+    grid-template-areas: 'body';
+    overflow: hidden;
+
+    #{$parent}__footer {
+      display: none;
+    }
+
+    #{$parent}__body {
+      padding: 0;
+      scrollbar-width: none;
+      margin-right: -5px;
+
+      height: auto;
+      max-height: 95vh;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    #{$parent}__close-button {
+      display: flex;
+    }
+  }
+
+  &--small {
+    height: auto;
+
+    #{$parent}__body {
+      min-height: 0;
+    }
+  }
+}
 </style>
diff --git a/client/src/components/ModalInput.vue b/client/src/components/ModalInput.vue
index cbc69768..68264deb 100644
--- a/client/src/components/ModalInput.vue
+++ b/client/src/components/ModalInput.vue
@@ -2,40 +2,35 @@
   <div class="modal-input">
     <input
       :placeholder="placeholder"
-      :class="{'skillbox-input--error': error}"
+      :class="{ 'skillbox-input--error': error }"
       :value="value"
       class="modal-input__inputfield skillbox-input"
       @input="$emit('input', $event.target.value)"
-    >
-    <div
-      class="modal-input__error"
-      v-if="error"
-    >
-      Für Inhaltsblöcke muss zwingend ein Titel erfasst werden.
-    </div>
+    />
+    <div class="modal-input__error" v-if="error">Für Inhaltsblöcke muss zwingend ein Titel erfasst werden.</div>
   </div>
 </template>
 
 <script>
-  export default {
-    props: ['value', 'error', 'placeholder']
-  };
+export default {
+  props: ['value', 'error', 'placeholder'],
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_functions.scss';
 
-  .modal-input {
-    &__inputfield {
-      width: $modal-input-width;
-    }
-
-    &__error {
-      font-family: sans-serif;
-      font-size: toRem(14px);
-      color: $color-accent-3-dark;
-      padding: 10px 0;
-    }
+.modal-input {
+  &__inputfield {
+    width: $modal-input-width;
   }
+
+  &__error {
+    font-family: sans-serif;
+    font-size: toRem(14px);
+    color: $color-accent-3-dark;
+    padding: 10px 0;
+  }
+}
 </style>
diff --git a/client/src/components/MoreOptionsWidget.vue b/client/src/components/MoreOptionsWidget.vue
index dbe79d01..74e092c1 100644
--- a/client/src/components/MoreOptionsWidget.vue
+++ b/client/src/components/MoreOptionsWidget.vue
@@ -1,67 +1,59 @@
 <template>
   <div class="more-options">
-    <a
-      class="more-options__more-link"
-      data-cy="more-options-link"
-      @click.stop="showMenu = !showMenu"
-    >
+    <a class="more-options__more-link" data-cy="more-options-link" @click.stop="showMenu = !showMenu">
       <ellipses class="more-options__ellipses" />
     </a>
-    <widget-popover
-      class="more-options__popover"
-      v-if="showMenu"
-      @hide-me="showMenu = false"
-    >
+    <widget-popover class="more-options__popover" v-if="showMenu" @hide-me="showMenu = false">
       <slot />
     </widget-popover>
   </div>
 </template>
 
 <script>
-  import WidgetPopover from '@/components/ui/WidgetPopover';
+import WidgetPopover from '@/components/ui/WidgetPopover';
 
-  const Ellipses = () => import(/* webpackChunkName: "icons" */'@/components/icons/Ellipses.vue');
+const Ellipses = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Ellipses.vue');
 
-  export default {
-    components: {
-      WidgetPopover,
-      Ellipses
-    },
+export default {
+  components: {
+    WidgetPopover,
+    Ellipses,
+  },
 
-    data() {
-      return {
-        showMenu: false
-      };
-    }
-  };
+  data() {
+    return {
+      showMenu: false,
+    };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .more-options {
-    display: flex;
-    justify-content: flex-end;
+.more-options {
+  display: flex;
+  justify-content: flex-end;
 
-    &__ellipses {
-      width: 30px;
-      height: 30px;
-      fill: $color-charcoal-dark;
-      margin-top: -7px;
-    }
-
-    &__more-link {
-      background-color: rgba($color-white, 0.9);
-      width: 35px;
-      height: 15px;
-      border-radius: 15px;
-      display: flex;
-      justify-content: center;
-    }
-
-    &__popover {
-      min-width: 200px;
-      @include popover-defaults();
-    }
+  &__ellipses {
+    width: 30px;
+    height: 30px;
+    fill: $color-charcoal-dark;
+    margin-top: -7px;
   }
+
+  &__more-link {
+    background-color: rgba($color-white, 0.9);
+    width: 35px;
+    height: 15px;
+    border-radius: 15px;
+    display: flex;
+    justify-content: center;
+  }
+
+  &__popover {
+    min-width: 200px;
+    @include popover-defaults();
+  }
+}
 </style>
diff --git a/client/src/components/Radiobutton.vue b/client/src/components/Radiobutton.vue
index c807c672..edb4f1e2 100644
--- a/client/src/components/Radiobutton.vue
+++ b/client/src/components/Radiobutton.vue
@@ -1,33 +1,27 @@
 <template>
-  <base-input
-    :label="label"
-    :checked="checked"
-    :item="item"
-    :type="'radiobutton'"
-    @input="passOn"
-  />
+  <base-input :label="label" :checked="checked" :item="item" :type="'radiobutton'" @input="passOn" />
 </template>
 
 <script>
-  import BaseInput from '@/components/ui/BaseInput';
+import BaseInput from '@/components/ui/BaseInput';
 
-  export default {
-    props: {
-      label: String,
-      checked: {
-        type: Boolean
-      },
-      item: Object
+export default {
+  props: {
+    label: String,
+    checked: {
+      type: Boolean,
     },
+    item: Object,
+  },
 
-    components: {
-      BaseInput
+  components: {
+    BaseInput,
+  },
+
+  methods: {
+    passOn() {
+      this.$emit('input', ...arguments);
     },
-
-    methods: {
-      passOn() {
-        this.$emit('input', ...arguments);
-      }
-    }
-  };
+  },
+};
 </script>
diff --git a/client/src/components/ReadOnlyBanner.vue b/client/src/components/ReadOnlyBanner.vue
index 31af735d..798a7dfa 100644
--- a/client/src/components/ReadOnlyBanner.vue
+++ b/client/src/components/ReadOnlyBanner.vue
@@ -1,14 +1,7 @@
 <template>
-  <div
-    class="read-only-banner"
-    data-cy="read-only-banner"
-    v-if="me.readOnly || me.selectedClass.readOnly"
-  >
+  <div class="read-only-banner" data-cy="read-only-banner" v-if="me.readOnly || me.selectedClass.readOnly">
     <div class="read-only-banner__content">
-      <p class="read-only-banner__text">
-        {{ readOnlyText }} Sie können Inhalte lesen, aber nicht
-        bearbeiten.
-      </p>
+      <p class="read-only-banner__text">{{ readOnlyText }} Sie können Inhalte lesen, aber nicht bearbeiten.</p>
       <div class="read-only-banner__buttons">
         <router-link
           :to="licenseActivationLink"
@@ -18,96 +11,93 @@
         >
           Neuen Lizenzcode eingeben
         </router-link>
-        <a
-          target="_blank"
-          href="https://myskillbox.ch/lesemodus"
-          class="button button--secondary"
-        >Mehr Informationen zum Lesemodus</a>
+        <a target="_blank" href="https://myskillbox.ch/lesemodus" class="button button--secondary"
+          >Mehr Informationen zum Lesemodus</a
+        >
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  import gql from 'graphql-tag';
-  import {LICENSE_ACTIVATION} from '@/router/auth.names';
+import gql from 'graphql-tag';
+import { LICENSE_ACTIVATION } from '@/router/auth.names';
 
-  export default {
-    data() {
-      return {
-        me: {
-          readOnly: false,
-          selectedClass: {
-            readOnly: false,
-          },
-        },
-        licenseActivationLink: {
-          name: LICENSE_ACTIVATION,
-        },
-      };
-    },
-
-    apollo: {
+export default {
+  data() {
+    return {
       me: {
-        query: gql`
+        readOnly: false,
+        selectedClass: {
+          readOnly: false,
+        },
+      },
+      licenseActivationLink: {
+        name: LICENSE_ACTIVATION,
+      },
+    };
+  },
+
+  apollo: {
+    me: {
+      query: gql`
         query {
           me {
             readOnly
             selectedClass {
-                readOnly
+              readOnly
             }
           }
         }
-`,
-        fetchPolicy: 'cache-only',
-        update({me}) {
-          if (!me) {
-            return {
+      `,
+      fetchPolicy: 'cache-only',
+      update({ me }) {
+        if (!me) {
+          return {
+            readOnly: false,
+            selectedClass: {
               readOnly: false,
-              selectedClass: {
-                readOnly: false,
-              },
-            };
-          }
-          return me;
-        },
+            },
+          };
+        }
+        return me;
       },
     },
+  },
 
-    computed: {
-      readOnlyText() {
-        return this.me.readOnly ? 'Sie besitzen keine aktive Lizenz.' : 'Sie sind in dieser Klasse nicht mehr aktiv.';
-      },
+  computed: {
+    readOnlyText() {
+      return this.me.readOnly ? 'Sie besitzen keine aktive Lizenz.' : 'Sie sind in dieser Klasse nicht mehr aktiv.';
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .read-only-banner {
-    background-color: $color-brand-light;
-    display: flex;
-    justify-content: center;
-    padding: $small-spacing 0;
+.read-only-banner {
+  background-color: $color-brand-light;
+  display: flex;
+  justify-content: center;
+  padding: $small-spacing 0;
 
-    &__content {
-      max-width: $screen-width;
-    }
-
-    &__text {
-      padding: 0;
-      @include regular-text;
-      margin-bottom: $small-spacing;
-    }
-
-    &__buttons {
-
-    }
-
-    &__link {
-      @include default-link;
-      margin-right: $small-spacing;
-    }
+  &__content {
+    max-width: $screen-width;
   }
+
+  &__text {
+    padding: 0;
+    @include regular-text;
+    margin-bottom: $small-spacing;
+  }
+
+  &__buttons {
+  }
+
+  &__link {
+    @include default-link;
+    margin-right: $small-spacing;
+  }
+}
 </style>
diff --git a/client/src/components/ScrollUp.vue b/client/src/components/ScrollUp.vue
index 3f0a8809..66a1ee19 100644
--- a/client/src/components/ScrollUp.vue
+++ b/client/src/components/ScrollUp.vue
@@ -1,78 +1,73 @@
 <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
-    },
+export default {
+  components: {
+    ArrowUp,
+  },
 
-    data() {
-      return {
-        scroll: 0
-      };
-    },
+  data() {
+    return {
+      scroll: 0,
+    };
+  },
 
-    mounted() {
-      let html = document.scrollingElement;
-      document.body.onscroll = () => {
-        this.scroll = html.scrollTop;
-      };
-    },
+  mounted() {
+    let html = document.scrollingElement;
+    document.body.onscroll = () => {
+      this.scroll = html.scrollTop;
+    };
+  },
 
-    destroyed() {
-      document.body.onscroll = null;
-    },
+  destroyed() {
+    document.body.onscroll = null;
+  },
 
-    methods: {
-      scrollTop() {
-        document.scrollingElement.scrollTop = 0;
-      }
+  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;
-
-    &__icon {
-      width: 50px;
-      height: 50px;
-      fill: $color-brand;
-    }
+.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;
   }
+}
 
-  .fade-enter-active, .fade-leave-active {
-    transition: opacity .3s;
-  }
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
 
-  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
-  {
-    opacity: 0;
-  }
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
 </style>
diff --git a/client/src/components/SectionBlock.vue b/client/src/components/SectionBlock.vue
index 61b5c7bd..b6711cb1 100644
--- a/client/src/components/SectionBlock.vue
+++ b/client/src/components/SectionBlock.vue
@@ -1,18 +1,10 @@
 <template>
   <div class="section-block">
-    <div
-      :class="{'section-block--navigatable': route}"
-      class="section-block__illustration"
-      @click="navigate()"
-    >
+    <div :class="{ 'section-block--navigatable': route }" class="section-block__illustration" @click="navigate()">
       <slot />
     </div>
 
-    <div
-      :class="{'section-block--navigatable': route}"
-      class="section-block__title block-title"
-      @click="navigate()"
-    >
+    <div :class="{ 'section-block--navigatable': route }" class="section-block__title block-title" @click="navigate()">
       <h2 class="block-title__title">
         {{ title }}
       </h2>
@@ -23,91 +15,88 @@
     <div class="section-block__content section-content">
       <div class="section-content__subsection subsection">
         <a
-          :class="{'section-block--navigatable': route}"
+          :class="{ 'section-block--navigatable': route }"
           class="subsection__content button button--primary"
           v-if="route"
           @click="navigate()"
         >
           {{ linkText }}
         </a>
-        <span
-          class="subsection__content subsection__content--disabled"
-          v-if="!route"
-        >Noch nicht verfügbar</span>
+        <span class="subsection__content subsection__content--disabled" v-if="!route">Noch nicht verfügbar</span>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  export default {
-    props: ['title', 'subtitle', 'route', 'linkText'],
-    methods: {
-      navigate() {
-        if (this.route) {
-          this.$router.push(this.route);
-        }
+export default {
+  props: ['title', 'subtitle', 'route', 'linkText'],
+  methods: {
+    navigate() {
+      if (this.route) {
+        this.$router.push(this.route);
       }
-    }
-  };
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_functions.scss';
 
-  .section-block {
-    border-radius: $default-border-radius;
-    width: 100%;
-    overflow: hidden;
-    text-align: center;
+.section-block {
+  border-radius: $default-border-radius;
+  width: 100%;
+  overflow: hidden;
+  text-align: center;
 
-    &--navigatable {
-      cursor: pointer;
-    }
-
-    &__title {
-      padding: 20px;
-    }
+  &--navigatable {
+    cursor: pointer;
   }
 
-  .block-title {
-    &__title, &__subtitle {
-      color: $color-charcoal-dark;
-      font-family: $sans-serif-font-family;
-    }
+  &__title {
+    padding: 20px;
+  }
+}
 
-    &__title {
-      font-size: toRem(29px);
-      text-transform: uppercase;
-      margin-bottom: 8px;
-      font-weight: 600;
-    }
-
-    &__subtitle {
-      font-size: toRem(14px);
-      font-weight: $font-weight-regular;
-      min-height: 2rem;
-    }
+.block-title {
+  &__title,
+  &__subtitle {
+    color: $color-charcoal-dark;
+    font-family: $sans-serif-font-family;
   }
 
-  .section-content {
-    padding: 15px 15px 15px;
-
-    &__subsection {
-      padding-bottom: 15px;
-    }
+  &__title {
+    font-size: toRem(29px);
+    text-transform: uppercase;
+    margin-bottom: 8px;
+    font-weight: 600;
   }
 
-  .subsection {
-    &__content {
-      font-family: $sans-serif-font-family;
-      font-weight: 600;
+  &__subtitle {
+    font-size: toRem(14px);
+    font-weight: $font-weight-regular;
+    min-height: 2rem;
+  }
+}
 
-      &--disabled {
-        color: $color-silver-dark;
-      }
+.section-content {
+  padding: 15px 15px 15px;
+
+  &__subsection {
+    padding-bottom: 15px;
+  }
+}
+
+.subsection {
+  &__content {
+    font-family: $sans-serif-font-family;
+    font-weight: 600;
+
+    &--disabled {
+      color: $color-silver-dark;
     }
   }
-
+}
 </style>
diff --git a/client/src/components/StudentSubmission.vue b/client/src/components/StudentSubmission.vue
index 5c7fd204..3abb9872 100644
--- a/client/src/components/StudentSubmission.vue
+++ b/client/src/components/StudentSubmission.vue
@@ -5,24 +5,12 @@
     </div>
     <div class="student-submission__entry entry">
       <p>{{ submission.text | trimToLength(50) }}</p>
-      <p
-        class="entry__document"
-        v-if="submission.document && submission.document.length > 0"
-      >
-        <student-submission-document
-          :document="submission.document"
-          class="entry-document"
-        />
+      <p class="entry__document" v-if="submission.document && submission.document.length > 0">
+        <student-submission-document :document="submission.document" class="entry-document" />
       </p>
     </div>
-    <div
-      class="student-submission__feedback entry"
-      v-if="submission.submissionFeedback"
-    >
-      <p
-        :class="{'entry__text--final': submission.submissionFeedback.final}"
-        class="entry__text"
-      >
+    <div class="student-submission__feedback entry" v-if="submission.submissionFeedback">
+      <p :class="{ 'entry__text--final': submission.submissionFeedback.final }" class="entry__text">
         {{ submission.submissionFeedback.text | trimToLength(50) }}
       </p>
     </div>
@@ -30,66 +18,67 @@
 </template>
 
 <script>
-  import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
+import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
 
-  export default {
-    props: ['submission'],
-    components: {
-      StudentSubmissionDocument
-    },
-    filters: {
-      trimToLength: function(text, numberOfChars) {
-        if (!text) {
-          return '';
-        }
-        if (text.length <= numberOfChars) {
-          return text;
-        }
-        const index = text.indexOf(' ', numberOfChars - 1);
-        if (index === -1) {
-          return text;
-        }
-        return `${text.substring(0, index)}…`;
+export default {
+  props: ['submission'],
+  components: {
+    StudentSubmissionDocument,
+  },
+  filters: {
+    trimToLength: function (text, numberOfChars) {
+      if (!text) {
+        return '';
       }
+      if (text.length <= numberOfChars) {
+        return text;
+      }
+      const index = text.indexOf(' ', numberOfChars - 1);
+      if (index === -1) {
+        return text;
+      }
+      return `${text.substring(0, index)}…`;
     },
+  },
 
-    computed: {
-      name() {
-        return this.submission && this.submission.student
-          ? `${this.submission.student.firstName} ${this.submission.student.lastName}` : '';
-      },
+  computed: {
+    name() {
+      return this.submission && this.submission.student
+        ? `${this.submission.student.firstName} ${this.submission.student.lastName}`
+        : '';
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .student-submission {
-    @include table-row;
+.student-submission {
+  @include table-row;
 
-    &__student-name {
-      font-size: toRem(17px);
-      font-weight: 800;
-      font-family: $sans-serif-font-family;
-    }
-
-    &__entry {
-      font-size: toRem(14px);
-      font-family: $sans-serif-font-family;
-    }
-
-    .entry-document {
-      margin-top: 1rem;
-    }
+  &__student-name {
+    font-size: toRem(17px);
+    font-weight: 800;
+    font-family: $sans-serif-font-family;
   }
 
-  .entry {
-    &__text {
-      color: $color-silver-dark;
-      &--final {
-        color: $color-charcoal-dark;
-      }
+  &__entry {
+    font-size: toRem(14px);
+    font-family: $sans-serif-font-family;
+  }
+
+  .entry-document {
+    margin-top: 1rem;
+  }
+}
+
+.entry {
+  &__text {
+    color: $color-silver-dark;
+    &--final {
+      color: $color-charcoal-dark;
     }
   }
+}
 </style>
diff --git a/client/src/components/StudentSubmissionDocument.vue b/client/src/components/StudentSubmissionDocument.vue
index 68d59a57..0498ecf9 100644
--- a/client/src/components/StudentSubmissionDocument.vue
+++ b/client/src/components/StudentSubmissionDocument.vue
@@ -1,44 +1,40 @@
 <template>
   <div class="submission-document">
-    <p
-      class="submission-document__content content"
-      v-if="document && document.length > 0"
-    >
+    <p class="submission-document__content content" v-if="document && document.length > 0">
       <document-icon class="content__icon" /><span class="content__text">{{ filename }}</span>
     </p>
   </div>
 </template>
 
 <script>
+import filenameFromUrl from '@/helpers/urls';
+const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
 
-  import filenameFromUrl from '@/helpers/urls';
-  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
+export default {
+  name: 'StudentSubmissionDocument',
+  props: ['document'],
+  components: { DocumentIcon },
 
-  export default {
-    name: 'StudentSubmissionDocument',
-    props: ['document'],
-    components: { DocumentIcon },
-
-    computed: {
-      filename() {
-        return filenameFromUrl(this.document);
-      }
+  computed: {
+    filename() {
+      return filenameFromUrl(this.document);
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  .content {
-    display: flex;
+.content {
+  display: flex;
 
-    &__icon {
-      width: 25px;
-      align-self: center;
-    }
-
-    &__text {
-      align-self: center;
-      padding-left: 5px;
-    }
+  &__icon {
+    width: 25px;
+    align-self: center;
   }
+
+  &__text {
+    align-self: center;
+    padding-left: 5px;
+  }
+}
 </style>
diff --git a/client/src/components/UserMetaWidget.vue b/client/src/components/UserMetaWidget.vue
index e40a9123..92dec210 100644
--- a/client/src/components/UserMetaWidget.vue
+++ b/client/src/components/UserMetaWidget.vue
@@ -4,53 +4,50 @@
       <avatar :avatar-url="avatarUrl" />
     </div>
     <span class="user-widget__name">{{ firstName }} {{ lastName }}</span>
-    <span
-      class="user-widget__date"
-      v-if="date"
-    >{{ date }}</span>
+    <span class="user-widget__date" v-if="date">{{ date }}</span>
   </div>
 </template>
 
 <script>
-  import Avatar from '@/components/profile/Avatar';
+import Avatar from '@/components/profile/Avatar';
 
-  export default {
-    props: ['firstName', 'lastName', 'avatarUrl', 'date'],
+export default {
+  props: ['firstName', 'lastName', 'avatarUrl', 'date'],
 
-    components: {
-      Avatar
-    }
-  };
+  components: {
+    Avatar,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+@import '@/styles/_variables.scss';
 
-  .user-widget {
+.user-widget {
+  color: $color-silver-dark;
+  display: flex;
+  align-items: center;
+
+  &__name {
+    padding: 0px 10px;
     color: $color-silver-dark;
-    display: flex;
-    align-items: center;
+    font-family: $sans-serif-font-family;
+  }
 
-    &__name {
-      padding: 0px 10px;
-      color: $color-silver-dark;
-      font-family: $sans-serif-font-family;
-    }
+  &__date {
+    font-family: $sans-serif-font-family;
+  }
 
-    &__date {
-      font-family: $sans-serif-font-family;
-    }
+  &__avatar {
+    width: 30px;
+    height: 30px;
+    fill: $color-silver-dark;
+  }
 
-    &__avatar {
-      width: 30px;
-      height: 30px;
-      fill: $color-silver-dark;
-    }
-
-    &--is-profile {
-      & > span {
-        color: $color-brand;
-      }
+  &--is-profile {
+    & > span {
+      color: $color-brand;
     }
   }
+}
 </style>
diff --git a/client/src/components/UserWidget.vue b/client/src/components/UserWidget.vue
index 2c05d970..2c8c8310 100644
--- a/client/src/components/UserWidget.vue
+++ b/client/src/components/UserWidget.vue
@@ -1,79 +1,70 @@
 <template>
-  <div
-    :class="{'user-widget--is-profile': isProfile}"
-    class="user-widget"
-  >
-    <div
-      class="user-widget__avatar"
-      data-cy="user-widget-avatar"
-    >
-      <avatar
-        :avatar-url="avatarUrl"
-        :icon-highlighted="isProfile"
-      />
+  <div :class="{ 'user-widget--is-profile': isProfile }" class="user-widget">
+    <div class="user-widget__avatar" data-cy="user-widget-avatar">
+      <avatar :avatar-url="avatarUrl" :icon-highlighted="isProfile" />
     </div>
   </div>
 </template>
 
 <script>
-  import Avatar from '@/components/profile/Avatar';
+import Avatar from '@/components/profile/Avatar';
 
-  export default {
-    props: {
-      avatarUrl: {
-        type: String
-      }
+export default {
+  props: {
+    avatarUrl: {
+      type: String,
     },
+  },
 
-    components: {
-      Avatar
+  components: {
+    Avatar,
+  },
+  computed: {
+    isProfile() {
+      return this.$route.meta.isProfile;
     },
-    computed: {
-      isProfile() {
-        return this.$route.meta.isProfile;
-      }
-    }
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .user-widget {
+.user-widget {
+  color: $color-silver-dark;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: relative;
+  // todo: do we need the margin right always? just do it where needed --> content block actions and objecives override this
+  margin-right: $medium-spacing;
+
+  &__popover {
+    top: 40px;
+    white-space: nowrap;
+  }
+
+  &__name {
+    padding: 0px $small-spacing;
     color: $color-silver-dark;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    position: relative;
-    // todo: do we need the margin right always? just do it where needed --> content block actions and objecives override this
-    margin-right: $medium-spacing;
+    font-family: $sans-serif-font-family;
+  }
 
-    &__popover {
-      top: 40px;
-      white-space: nowrap;
-    }
+  &__date {
+    font-family: $sans-serif-font-family;
+  }
 
-    &__name {
-      padding: 0px $small-spacing;
-      color: $color-silver-dark;
-      font-family: $sans-serif-font-family;
-    }
+  &__avatar {
+    width: 30px;
+    height: 30px;
+    fill: $color-silver-dark;
+    cursor: pointer;
+  }
 
-    &__date {
-      font-family: $sans-serif-font-family;
-    }
-
-    &__avatar {
-      width: 30px;
-      height: 30px;
-      fill: $color-silver-dark;
-      cursor: pointer;
-    }
-
-    &--is-profile {
-      & > span {
-        color: $color-brand;
-      }
+  &--is-profile {
+    & > span {
+      color: $color-brand;
     }
   }
+}
 </style>
diff --git a/client/src/components/book-navigation/ContentNavigation.vue b/client/src/components/book-navigation/ContentNavigation.vue
index 0b3f57c3..5edec89a 100644
--- a/client/src/components/book-navigation/ContentNavigation.vue
+++ b/client/src/components/book-navigation/ContentNavigation.vue
@@ -1,12 +1,9 @@
 <template>
-  <nav
-    :class="{'content-navigation--sidebar': isSidebar}"
-    class="content-navigation"
-  >
+  <nav :class="{ 'content-navigation--sidebar': isSidebar }" class="content-navigation">
     <div class="content-navigation__primary">
       <div class="content-navigation__item">
         <router-link
-          :class="{'content-navigation__link--active': isActive('book')}"
+          :class="{ 'content-navigation__link--active': isActive('book') }"
           :to="topicRoute"
           active-class="content-navigation__link--active"
           class="content-navigation__link"
@@ -15,9 +12,7 @@
           {{ $flavor.textTopics }}
         </router-link>
 
-        <topic-navigation
-          v-if="isSidebar"
-        />
+        <topic-navigation v-if="isSidebar" />
       </div>
 
       <div class="content-navigation__item">
@@ -33,7 +28,7 @@
 
       <div class="content-navigation__item">
         <router-link
-          :to="{name: 'news'}"
+          :to="{ name: 'news' }"
           active-class="content-navigation__link--active"
           class="content-navigation__link"
           data-cy="news-navigation-link"
@@ -45,19 +40,14 @@
       </div>
     </div>
 
-    <router-link
-      to="/"
-      class="content-navigation__logo"
-      data-cy="home-link"
-      v-if="!isSidebar"
-    >
+    <router-link to="/" class="content-navigation__logo" data-cy="home-link" v-if="!isSidebar">
       <logo class="content-navigation__logo-icon" />
     </router-link>
 
     <div class="content-navigation__secondary">
       <div class="content-navigation__item content-navigation__item--secondary">
         <router-link
-          :class="{'content-navigation__link--active': isRoomUrl()}"
+          :class="{ 'content-navigation__link--active': isRoomUrl() }"
           to="/rooms"
           active-class="content-navigation__link--active"
           class="content-navigation__link content-navigation__link--secondary"
@@ -67,10 +57,7 @@
         </router-link>
       </div>
 
-      <div
-        class="content-navigation__item content-navigation__item--secondary"
-        v-if="showPortfolio"
-      >
+      <div class="content-navigation__item content-navigation__item--secondary" v-if="showPortfolio">
         <router-link
           to="/portfolio"
           active-class="content-navigation__link--active"
@@ -80,16 +67,13 @@
           Portfolio
         </router-link>
       </div>
-      <div
-        class="content-navigation__item content-navigation__item--secondary"
-        v-if="isSidebar"
-      >
+      <div class="content-navigation__item content-navigation__item--secondary" v-if="isSidebar">
         <a
           :href="$flavor.supportLink"
           target="_blank"
           class="content-navigation__link content-navigation__link--secondary"
           @click="close"
-        >Support
+          >Support
         </a>
       </div>
     </div>
@@ -97,141 +81,142 @@
 </template>
 
 <script>
-  import TopicNavigation from '@/components/book-navigation/TopicNavigation';
+import TopicNavigation from '@/components/book-navigation/TopicNavigation';
 
-  import sidebarMixin from '@/mixins/sidebar';
-  import meMixin from '@/mixins/me';
+import sidebarMixin from '@/mixins/sidebar';
+import meMixin from '@/mixins/me';
 
-  const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
+const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
 
-  export default {
-    props: {
-      isSidebar: {
-        default: false
-      }
+export default {
+  props: {
+    isSidebar: {
+      default: false,
     },
+  },
 
-    mixins: [sidebarMixin, meMixin],
+  mixins: [sidebarMixin, meMixin],
 
-    components: {
-      TopicNavigation,
-      Logo
+  components: {
+    TopicNavigation,
+    Logo,
+  },
+
+  computed: {
+    showPortfolio() {
+      return this.$flavor.showPortfolio;
     },
+  },
 
-    computed: {
-      showPortfolio() {
-        return this.$flavor.showPortfolio;
-      }
+  methods: {
+    isActive(linkName) {
+      return linkName === 'book' && this.$route.path.indexOf('module') > -1;
     },
-
-    methods: {
-      isActive(linkName) {
-        return linkName === 'book' && this.$route.path.indexOf('module') > -1;
-      },
-      isRoomUrl() {
-        return this.$route.path.indexOf('room') > -1;
-      },
-      close() {
-        this.closeSidebar('navigation');
-      }
-    }
-  };
+    isRoomUrl() {
+      return this.$route.path.indexOf('room') > -1;
+    },
+    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';
 
-  .content-navigation {
-    display: flex;
-    align-items: center;
+.content-navigation {
+  display: flex;
+  align-items: center;
 
-    &__link {
-      padding: 0 24px;
-      @include navigation-link;
-    }
+  &__link {
+    padding: 0 24px;
+    @include navigation-link;
+  }
 
-    &__primary, &__secondary {
-      display: none;
-      flex-direction: row;
+  &__primary,
+  &__secondary {
+    display: none;
+    flex-direction: row;
 
-      @include desktop {
-        display: flex;
-      }
-    }
-
-    &__logo {
-      color: #17A887;
-      font-size: 36px;
-      font-weight: 800;
-      font-family: $sans-serif-font-family;
+    @include desktop {
       display: flex;
-      justify-self: center;
-
-      /*
-      * For IE10+
-      */
-      -ms-grid-column: 2;
-      -ms-grid-row-align: center;
-      -ms-grid-column-align: center;
-    }
-
-    &__logo-icon {
-      width: auto;
-      height: 31px;
-    }
-
-    &__link {
-      &--secondary {
-        @include regular-text;
-      }
-
-      &--active {
-        color: $color-brand;
-      }
-    }
-
-    $parent: &;
-
-    &--sidebar {
-      flex-direction: column;
-
-      #{$parent}__primary, #{$parent}__secondary {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-      }
-
-      #{$parent}__link {
-        @include heading-4;
-        line-height: 2.5em;
-        padding: 0;
-        display: block;
-        margin-bottom: 0.5*$small-spacing;
-
-        &:only-child {
-          margin-bottom: 0;
-        }
-
-      }
-
-      #{$parent}__item {
-        width: 100%;
-        //border-bottom: 1px solid $color-white;
-
-        /*&:nth-child(1) {*/
-        /*  order: 3;*/
-        /*  border-bottom: 0;*/
-        /*}*/
-
-        /*&:nth-child(2) {*/
-        /*  order: 1;*/
-        /*}*/
-
-        /*&:nth-child(3) {*/
-        /*  order: 2;*/
-        /*}*/
-      }
     }
   }
+
+  &__logo {
+    color: #17a887;
+    font-size: 36px;
+    font-weight: 800;
+    font-family: $sans-serif-font-family;
+    display: flex;
+    justify-self: center;
+
+    /*
+      * For IE10+
+      */
+    -ms-grid-column: 2;
+    -ms-grid-row-align: center;
+    -ms-grid-column-align: center;
+  }
+
+  &__logo-icon {
+    width: auto;
+    height: 31px;
+  }
+
+  &__link {
+    &--secondary {
+      @include regular-text;
+    }
+
+    &--active {
+      color: $color-brand;
+    }
+  }
+
+  $parent: &;
+
+  &--sidebar {
+    flex-direction: column;
+
+    #{$parent}__primary,
+    #{$parent}__secondary {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+
+    #{$parent}__link {
+      @include heading-4;
+      line-height: 2.5em;
+      padding: 0;
+      display: block;
+      margin-bottom: 0.5 * $small-spacing;
+
+      &:only-child {
+        margin-bottom: 0;
+      }
+    }
+
+    #{$parent}__item {
+      width: 100%;
+      //border-bottom: 1px solid $color-white;
+
+      /*&:nth-child(1) {*/
+      /*  order: 3;*/
+      /*  border-bottom: 0;*/
+      /*}*/
+
+      /*&:nth-child(2) {*/
+      /*  order: 1;*/
+      /*}*/
+
+      /*&:nth-child(3) {*/
+      /*  order: 2;*/
+      /*}*/
+    }
+  }
+}
 </style>
diff --git a/client/src/components/book-navigation/NavigationSidebar.vue b/client/src/components/book-navigation/NavigationSidebar.vue
index 4e838210..5ca4ed74 100644
--- a/client/src/components/book-navigation/NavigationSidebar.vue
+++ b/client/src/components/book-navigation/NavigationSidebar.vue
@@ -1,18 +1,8 @@
 <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>
@@ -20,93 +10,94 @@
 </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
+  components: {
+    ContentNavigation,
+    Cross,
+  },
+
+  methods: {
+    close() {
+      this.closeSidebar('navigation');
     },
-
-    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;
-    }
+  @include desktop {
+    box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.12);
   }
 
-  .slide {
-    &-enter-active, &-leave-active {
-      transition: left 0.2s;
-    }
+  display: grid;
 
-    &-enter, &-leave-to {
-      left: -100vw;
-      @include desktop {
-        left: -$desktop-width;
-      }
+  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;
     }
   }
+}
 </style>
diff --git a/client/src/components/book-navigation/SubNavigationItem.vue b/client/src/components/book-navigation/SubNavigationItem.vue
index 9a351602..347d1755 100644
--- a/client/src/components/book-navigation/SubNavigationItem.vue
+++ b/client/src/components/book-navigation/SubNavigationItem.vue
@@ -1,54 +1,44 @@
 <template>
-  <div
-    :class="{ 'sub-navigation-item--active': show}"
-    class="sub-navigation-item"
-    v-click-outside="close"
-  >
-    <div
-      class="sub-navigation-item__title"
-      @click="show = !show"
-    >
+  <div :class="{ 'sub-navigation-item--active': show }" class="sub-navigation-item" v-click-outside="close">
+    <div class="sub-navigation-item__title" @click="show = !show">
       {{ title }}
       <chevron-down class="sub-navigation-item__icon sub-navigation-item__chevron-down" />
       <chevron-up class="sub-navigation-item__icon sub-navigation-item__chevron-up" />
     </div>
-    <div
-      class="sub-navigation-item__nav-items book-subnavigation"
-      v-if="show"
-    >
+    <div class="sub-navigation-item__nav-items book-subnavigation" v-if="show">
       <slot />
     </div>
   </div>
 </template>
 
 <script>
-  const ChevronDown = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronDown');
-  const ChevronUp = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronUp');
+const ChevronDown = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronDown');
+const ChevronUp = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronUp');
 
-  export default {
-    props: ['title'],
+export default {
+  props: ['title'],
 
-    components: {
-      ChevronDown,
-      ChevronUp
+  components: {
+    ChevronDown,
+    ChevronUp,
+  },
+
+  data() {
+    return {
+      show: false,
+    };
+  },
+
+  watch: {
+    $route() {
+      this.show = false;
     },
+  },
 
-    data() {
-      return {
-        show: false
-      };
+  methods: {
+    close() {
+      this.show = false;
     },
-
-    watch: {
-      $route() {
-        this.show = false;
-      }
-    },
-
-    methods: {
-      close() {
-        this.show = false;
-      }
-    }
-  };
+  },
+};
 </script>
diff --git a/client/src/components/book-navigation/TopicNavigation.vue b/client/src/components/book-navigation/TopicNavigation.vue
index 3c99d0e6..f42e7c55 100644
--- a/client/src/components/book-navigation/TopicNavigation.vue
+++ b/client/src/components/book-navigation/TopicNavigation.vue
@@ -1,8 +1,8 @@
 <template>
   <nav class="topic-navigation">
     <router-link
-      :to="{name: 'topic', params: {topicSlug: topic.slug}}"
-      :class="{'topic-navigation__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile}"
+      :to="{ name: 'topic', params: { topicSlug: topic.slug } }"
+      :class="{ 'topic-navigation__topic--active': topic.active, 'book-subnavigation__item--mobile': mobile }"
       tag="div"
       active-class="book-subnavigation__item--active"
       class="topic-navigation__topic book-subnavigation__item"
@@ -17,49 +17,49 @@
 </template>
 
 <script>
-  import ALL_TOPICS_QUERY from '@/graphql/gql/queries/allTopicsQuery.gql';
-  import sidebarMixin from '@/mixins/sidebar';
+import ALL_TOPICS_QUERY from '@/graphql/gql/queries/allTopicsQuery.gql';
+import sidebarMixin from '@/mixins/sidebar';
 
-  export default {
-    props: {
-      mobile: {
-        default: false
-      }
+export default {
+  props: {
+    mobile: {
+      default: false,
     },
+  },
 
-    mixins: [sidebarMixin],
+  mixins: [sidebarMixin],
 
-    data() {
-      return {
-        topics: []
-      };
+  data() {
+    return {
+      topics: [],
+    };
+  },
+
+  methods: {
+    topicId(id) {
+      return atob(id);
     },
+  },
 
-    methods: {
-      topicId(id) {
-        return atob(id);
-      }
-    },
-
-    apollo: {
-      topics: {
-        query: ALL_TOPICS_QUERY,
-        manual: true,
-        result({data, loading}) {
-          if (!loading) {
-            this.topics = this.$getRidOfEdges(data).topics;
-          }
+  apollo: {
+    topics: {
+      query: ALL_TOPICS_QUERY,
+      manual: true,
+      result({ data, loading }) {
+        if (!loading) {
+          this.topics = this.$getRidOfEdges(data).topics;
         }
-      }
-    }
-  };
+      },
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+@import '@/styles/_variables.scss';
 
-  .topic-navigation {
-    &__topic {
-    }
+.topic-navigation {
+  &__topic {
   }
+}
 </style>
diff --git a/client/src/components/content-block-form/AddContentLink.vue b/client/src/components/content-block-form/AddContentLink.vue
index 1aefa001..742947ce 100644
--- a/client/src/components/content-block-form/AddContentLink.vue
+++ b/client/src/components/content-block-form/AddContentLink.vue
@@ -1,39 +1,37 @@
 <template>
-  <a
-    class="add-content-link"
-    data-cy="add-content-link"
-    @click="$emit('click')"
-  ><plus-icon class="add-content-link__icon" /> <span class="add-content-link__text">Inhalt hinzufügen</span></a>
+  <a class="add-content-link" data-cy="add-content-link" @click="$emit('click')"
+    ><plus-icon class="add-content-link__icon" /> <span class="add-content-link__text">Inhalt hinzufügen</span></a
+  >
 </template>
 
 <script>
- import PlusIcon from '@/components/icons/PlusIcon';
- export default {
-   components: { PlusIcon }
- };
+import PlusIcon from '@/components/icons/PlusIcon';
+export default {
+  components: { PlusIcon },
+};
 </script>
 
 <style scoped lang="scss">
-    @import '~styles/helpers';
-    $color: $color-silver-dark;
-    $icon-size: 14px;
+@import '~styles/helpers';
+$color: $color-silver-dark;
+$icon-size: 14px;
 
-    .add-content-link {
-      display: inline-flex;
-      align-items: center;
-      justify-content: flex-start;
-      cursor: pointer;
+.add-content-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
 
-      &__icon {
-        width: $icon-size;
-        height: $icon-size;
-        margin-right: $small-spacing;
-        fill: $color;
-      }
-      &__text {
-        // custom style, because the view needs this
-        @include large-link;
-        color: $color;
-      }
-    }
+  &__icon {
+    width: $icon-size;
+    height: $icon-size;
+    margin-right: $small-spacing;
+    fill: $color;
+  }
+  &__text {
+    // custom style, because the view needs this
+    @include large-link;
+    color: $color;
+  }
+}
 </style>
diff --git a/client/src/components/content-block-form/ContentBlockForm.vue b/client/src/components/content-block-form/ContentBlockForm.vue
index 19269ff9..96408ad4 100644
--- a/client/src/components/content-block-form/ContentBlockForm.vue
+++ b/client/src/components/content-block-form/ContentBlockForm.vue
@@ -1,10 +1,7 @@
 <template>
   <div class="content-block-form content-list__parent">
     <div class="content-block-form__content">
-      <h1
-        class="heading-1 content-block-form__heading"
-        data-cy="content-block-form-heading"
-      >
+      <h1 class="heading-1 content-block-form__heading" data-cy="content-block-form-heading">
         {{ title }}
       </h1>
 
@@ -15,26 +12,21 @@
         class="content-block-form__task-toggle"
         label="Inhaltsblock als Auftrag formatieren"
         v-if="hasDefaultFeatures"
-        @input="localContentBlock.isAssignment=$event"
+        @input="localContentBlock.isAssignment = $event"
       />
 
       <!-- Form for title of content block -->
-      <content-form-section
-        data-cy="content-form-title-section"
-        title="Titel (Pflichtfeld)"
-      >
+      <content-form-section data-cy="content-form-title-section" title="Titel (Pflichtfeld)">
         <input-with-label
           :value="localContentBlock.title"
           data-cy="content-block-title"
           placeholder="z.B. Auftrag 3"
-          @input="localContentBlock.title=$event"
+          @input="localContentBlock.title = $event"
         />
       </content-form-section>
 
       <!-- Add content at top of content block -->
-      <add-content-link
-        @click="addBlock(-1)"
-      />
+      <add-content-link @click="addBlock(-1)" />
 
       <!-- Loop for outer contents layer -->
       <div
@@ -43,32 +35,21 @@
         :key="block.id"
       >
         <!-- If the block is a content list -->
-        <div
-          class="content-block-form__segment"
-          data-cy="content-list"
-          v-if="block.type === 'content_list_item'"
-        >
+        <div class="content-block-form__segment" data-cy="content-list" v-if="block.type === 'content_list_item'">
           <content-element-actions
             class="content-block-form__actions"
-            :actions="{extended: true, up: outer>0, down: outer<localContentBlock.contents.length }"
+            :actions="{ extended: true, up: outer > 0, down: outer < localContentBlock.contents.length }"
             @remove="remove(outer)"
             @move-up="up(outer)"
             @move-down="down(outer)"
             @move-top="top(outer)"
             @move-bottom="bottom(outer)"
           />
-          <ol
-            class="content-list__item"
-            data-cy="content-list-item"
-          >
-            <li
-              class="content-block-form__segment"
-              v-for="(content, index) in block.contents"
-              :key="content.id"
-            >
+          <ol class="content-list__item" data-cy="content-list-item">
+            <li class="content-block-form__segment" v-for="(content, index) in block.contents" :key="content.id">
               <content-element
-                :first-element="index===0"
-                :last-element="index===block.contents.length-1"
+                :first-element="index === 0"
+                :last-element="index === block.contents.length - 1"
                 :element="content"
                 class="content-block-form__segment"
                 :top-level="false"
@@ -80,10 +61,7 @@
                 @bottom="bottom(outer, index)"
               />
 
-              <add-content-link
-                class="content-block-form__add-button"
-                @click="addBlock(outer, index)"
-              />
+              <add-content-link class="content-block-form__add-button" @click="addBlock(outer, index)" />
             </li>
           </ol>
         </div>
@@ -93,8 +71,8 @@
           :element="block"
           class="content-block-form__segment"
           :top-level="true"
-          :first-element="outer===0"
-          :last-element="outer===localContentBlock.contents.length-1"
+          :first-element="outer === 0"
+          :last-element="outer === localContentBlock.contents.length - 1"
           v-else
           @update="update(outer, $event)"
           @remove="remove(outer, undefined, $event)"
@@ -105,11 +83,10 @@
         />
 
         <!-- Add element after the looped item -->
-        <add-content-link
-          @click="addBlock(outer)"
-        />
+        <add-content-link @click="addBlock(outer)" />
       </div>
-    </div><!-- -->
+    </div>
+    <!-- -->
     <!-- Save and Cancel buttons -->
     <footer class="content-block-form__footer">
       <div class="content-block-form__buttons">
@@ -121,309 +98,307 @@
         >
           Speichern
         </button>
-        <a
-          class="button"
-          @click="$emit('back')"
-        >Abbrechen</a>
+        <a class="button" @click="$emit('back')">Abbrechen</a>
       </div>
     </footer>
   </div>
 </template>
 
 <script lang="ts">
-  import Vue, {PropType} from 'vue';
-  import Toggle from '@/components/ui/Toggle.vue';
-  import ContentFormSection from '@/components/content-block-form/ContentFormSection.vue';
-  import InputWithLabel from '@/components/ui/InputWithLabel.vue';
-  import AddContentLink from '@/components/content-block-form/AddContentLink.vue';
+import Vue, { PropType } from 'vue';
+import Toggle from '@/components/ui/Toggle.vue';
+import ContentFormSection from '@/components/content-block-form/ContentFormSection.vue';
+import InputWithLabel from '@/components/ui/InputWithLabel.vue';
+import AddContentLink from '@/components/content-block-form/AddContentLink.vue';
 
-  import ContentElement from '@/components/content-block-form/ContentElement.vue';
-  import {
-    insertAtIndex,
-    moveToIndex,
-    removeAtIndex,
-    replaceAtIndex,
-    swapElements
-  } from '@/graphql/immutable-operations';
+import ContentElement from '@/components/content-block-form/ContentElement.vue';
+import {
+  insertAtIndex,
+  moveToIndex,
+  removeAtIndex,
+  replaceAtIndex,
+  swapElements,
+} from '@/graphql/immutable-operations';
 
-  import {CHOOSER, transformInnerContents} from '@/components/content-block-form/helpers.js';
-  import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
-  import {ContentBlock, numberOrUndefined} from "@/@types";
-  import {DEFAULT_FEATURE_SET} from "@/consts/features.consts";
+import { CHOOSER, transformInnerContents } from '@/components/content-block-form/helpers.js';
+import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
+import { ContentBlock, numberOrUndefined } from '@/@types';
+import { DEFAULT_FEATURE_SET } from '@/consts/features.consts';
 
-  // TODO: refactor this file, it's huuuuuge!
-  interface ContentBlockFormData {
-    localContentBlock: any;
-  }
+// TODO: refactor this file, it's huuuuuge!
+interface ContentBlockFormData {
+  localContentBlock: any;
+}
 
-  export default Vue.extend({
-    props: {
-      title: {
-        type: String,
-        default: '',
-      },
-      contentBlock: {
-        type: Object as PropType<ContentBlock>,
-        required: true,
-      },
-      features: {
-        type: String,
-        default: DEFAULT_FEATURE_SET
-      }
+export default Vue.extend({
+  props: {
+    title: {
+      type: String,
+      default: '',
     },
-    provide(): object {
-      return {
-        features: this.features
-      };
+    contentBlock: {
+      type: Object as PropType<ContentBlock>,
+      required: true,
     },
-    components: {
-      ContentElementActions,
-      ContentElement,
-      AddContentLink,
-      InputWithLabel,
-      ContentFormSection,
-      Toggle,
+    features: {
+      type: String,
+      default: DEFAULT_FEATURE_SET,
     },
-    data(): ContentBlockFormData {
-      return {
-        localContentBlock: Object.assign({}, {
+  },
+  provide(): object {
+    return {
+      features: this.features,
+    };
+  },
+  components: {
+    ContentElementActions,
+    ContentElement,
+    AddContentLink,
+    InputWithLabel,
+    ContentFormSection,
+    Toggle,
+  },
+  data(): ContentBlockFormData {
+    return {
+      localContentBlock: Object.assign(
+        {},
+        {
           title: this.contentBlock.title,
           // contents: [...this.contentBlock.contents],
           contents: transformInnerContents([...this.contentBlock.contents]),
           id: this.contentBlock.id || undefined,
           isAssignment: this.contentBlock.type && this.contentBlock.type.toLowerCase() === 'task',
-        }),
-      };
+        }
+      ),
+    };
+  },
+  computed: {
+    isValid(): boolean {
+      return this.localContentBlock.title > '';
     },
-    computed: {
-      isValid(): boolean {
-        return this.localContentBlock.title > '';
-      },
-      hasDefaultFeatures(): boolean {
-        return this.features === DEFAULT_FEATURE_SET;
+    hasDefaultFeatures(): boolean {
+      return this.features === DEFAULT_FEATURE_SET;
+    },
+  },
+  methods: {
+    update(index: number, element: any, parent?: number) {
+      if (parent === undefined) {
+        // element is top level
+        this.localContentBlock.contents = replaceAtIndex(this.localContentBlock.contents, index, element);
+      } else {
+        const parentBlock = this.localContentBlock.contents[parent];
+
+        const newElementContents = replaceAtIndex(parentBlock.contents, index, element);
+        const newBlock = {
+          ...parentBlock,
+          contents: newElementContents,
+        };
+        this.localContentBlock.contents = replaceAtIndex(this.localContentBlock.contents, parent, newBlock);
       }
     },
-    methods: {
-      update(index: number, element: any, parent?: number) {
-        if (parent === undefined) {
-          // element is top level
-          this.localContentBlock.contents = replaceAtIndex(this.localContentBlock.contents, index, element);
-        } else {
-          const parentBlock = this.localContentBlock.contents[parent];
-
-          const newElementContents = replaceAtIndex(parentBlock.contents, index, element);
-          const newBlock = {
-            ...parentBlock,
-            contents: newElementContents,
-          };
-          this.localContentBlock.contents = replaceAtIndex(this.localContentBlock.contents, parent, newBlock);
-        }
-      },
-      addBlock(afterOuterIndex: number, innerIndex?: number) {
-        if (innerIndex !== undefined) {
-          const block = this.localContentBlock.contents[afterOuterIndex];
-          const element = {
-            ...block,
-            contents: insertAtIndex(block.contents, innerIndex + 1, {
-              id: -1,
-              type: CHOOSER,
-            }),
-          };
-
-          this.localContentBlock.contents = replaceAtIndex(this.localContentBlock.contents, afterOuterIndex, element);
-        } else {
-          const element = {
+    addBlock(afterOuterIndex: number, innerIndex?: number) {
+      if (innerIndex !== undefined) {
+        const block = this.localContentBlock.contents[afterOuterIndex];
+        const element = {
+          ...block,
+          contents: insertAtIndex(block.contents, innerIndex + 1, {
             id: -1,
             type: CHOOSER,
-            includeListOption: true,
-          };
+          }),
+        };
 
-          this.localContentBlock.contents = insertAtIndex(this.localContentBlock.contents, afterOuterIndex + 1, element);
-        }
-      },
-      remove(outer: number, inner?: number, askForConfirmation = true) {
-        if (askForConfirmation) {
-          this.$modal.open('confirm')
-            .then(() => {
-              this.executeRemoval(outer, inner);
-            })
-            .catch(() => {
+        this.localContentBlock.contents = replaceAtIndex(this.localContentBlock.contents, afterOuterIndex, element);
+      } else {
+        const element = {
+          id: -1,
+          type: CHOOSER,
+          includeListOption: true,
+        };
 
-            });
-        } else {
-          this.executeRemoval(outer, inner);
-        }
-      },
-      shift(outer: number, inner: numberOrUndefined = undefined, distance: number) {
-        if (inner === undefined) {
-          this.localContentBlock.contents = swapElements(this.localContentBlock.contents, outer, outer + distance);
-        } else {
-          const {contents} = this.localContentBlock;
-          const outerElement = contents[outer];
-          const newOuterElement = {
-            ...outerElement,
-            contents: swapElements(outerElement.contents, inner, inner + distance),
-          };
-          this.localContentBlock.contents = replaceAtIndex(contents, outer, newOuterElement);
-        }
-      },
-      top(outer: number, inner: numberOrUndefined = undefined) {
-        if (inner === undefined) {
-          this.localContentBlock.contents = moveToIndex(this.localContentBlock.contents, outer, 0);
-        } else {
-          const {contents} = this.localContentBlock;
-          const outerElement = contents[outer];
-          const newOuterElement = {
-            ...outerElement,
-            contents: moveToIndex(outerElement.contents, inner, 0),
-          };
-          this.localContentBlock.contents = replaceAtIndex(contents, outer, newOuterElement);
-        }
-      },
-      up(outer: number, inner: numberOrUndefined = undefined) {
-        this.shift(outer, inner, -1);
-      },
-      down(outer: number, inner: numberOrUndefined = undefined) {
-        this.shift(outer, inner, 1);
-      },
-      bottom(outer: number, inner: numberOrUndefined = undefined) {
-        if (inner === undefined) {
-          const maxIndex = this.localContentBlock.contents.length - 1;
-          this.localContentBlock.contents = moveToIndex(this.localContentBlock.contents, outer, maxIndex);
-        } else {
-          const {contents} = this.localContentBlock;
-          const outerElement = contents[outer];
-          const maxIndex = outerElement.contents.length - 1;
-          const newOuterElement = {
-            ...outerElement,
-            contents: moveToIndex(outerElement.contents, inner, maxIndex),
-          };
-          this.localContentBlock.contents = replaceAtIndex(contents, outer, newOuterElement);
-        }
-      },
-      executeRemoval(outer: number, inner: numberOrUndefined = undefined) {
-        if (inner === undefined) {
-          // not a list item container, just remove the element from the outer array
-          this.localContentBlock.contents = removeAtIndex(this.localContentBlock.contents, outer);
-        } else {
-          let prevInnerContents = this.localContentBlock.contents[outer].contents;
-          let innerContents = removeAtIndex(prevInnerContents, inner);
+        this.localContentBlock.contents = insertAtIndex(this.localContentBlock.contents, afterOuterIndex + 1, element);
+      }
+    },
+    remove(outer: number, inner?: number, askForConfirmation = true) {
+      if (askForConfirmation) {
+        this.$modal
+          .open('confirm')
+          .then(() => {
+            this.executeRemoval(outer, inner);
+          })
+          .catch(() => {});
+      } else {
+        this.executeRemoval(outer, inner);
+      }
+    },
+    shift(outer: number, inner: numberOrUndefined = undefined, distance: number) {
+      if (inner === undefined) {
+        this.localContentBlock.contents = swapElements(this.localContentBlock.contents, outer, outer + distance);
+      } else {
+        const { contents } = this.localContentBlock;
+        const outerElement = contents[outer];
+        const newOuterElement = {
+          ...outerElement,
+          contents: swapElements(outerElement.contents, inner, inner + distance),
+        };
+        this.localContentBlock.contents = replaceAtIndex(contents, outer, newOuterElement);
+      }
+    },
+    top(outer: number, inner: numberOrUndefined = undefined) {
+      if (inner === undefined) {
+        this.localContentBlock.contents = moveToIndex(this.localContentBlock.contents, outer, 0);
+      } else {
+        const { contents } = this.localContentBlock;
+        const outerElement = contents[outer];
+        const newOuterElement = {
+          ...outerElement,
+          contents: moveToIndex(outerElement.contents, inner, 0),
+        };
+        this.localContentBlock.contents = replaceAtIndex(contents, outer, newOuterElement);
+      }
+    },
+    up(outer: number, inner: numberOrUndefined = undefined) {
+      this.shift(outer, inner, -1);
+    },
+    down(outer: number, inner: numberOrUndefined = undefined) {
+      this.shift(outer, inner, 1);
+    },
+    bottom(outer: number, inner: numberOrUndefined = undefined) {
+      if (inner === undefined) {
+        const maxIndex = this.localContentBlock.contents.length - 1;
+        this.localContentBlock.contents = moveToIndex(this.localContentBlock.contents, outer, maxIndex);
+      } else {
+        const { contents } = this.localContentBlock;
+        const outerElement = contents[outer];
+        const maxIndex = outerElement.contents.length - 1;
+        const newOuterElement = {
+          ...outerElement,
+          contents: moveToIndex(outerElement.contents, inner, maxIndex),
+        };
+        this.localContentBlock.contents = replaceAtIndex(contents, outer, newOuterElement);
+      }
+    },
+    executeRemoval(outer: number, inner: numberOrUndefined = undefined) {
+      if (inner === undefined) {
+        // not a list item container, just remove the element from the outer array
+        this.localContentBlock.contents = removeAtIndex(this.localContentBlock.contents, outer);
+      } else {
+        let prevInnerContents = this.localContentBlock.contents[outer].contents;
+        let innerContents = removeAtIndex(prevInnerContents, inner);
 
-          if (innerContents.length) {
-            /*
+        if (innerContents.length) {
+          /*
               there is still an element inside the outer element after removal,
               so we replace the previous element in the outer array with the new one with fewer contents
              */
-            let element = {
-              ...this.localContentBlock.contents[outer],
-              contents: innerContents,
-            };
-            this.localContentBlock.contents = replaceAtIndex(this.localContentBlock.contents, outer, element);
-          } else {
-            // inner contents is now empty, remove the whole element from the outer array
-            this.localContentBlock.contents = removeAtIndex(this.localContentBlock.contents, outer);
-          }
+          let element = {
+            ...this.localContentBlock.contents[outer],
+            contents: innerContents,
+          };
+          this.localContentBlock.contents = replaceAtIndex(this.localContentBlock.contents, outer, element);
+        } else {
+          // inner contents is now empty, remove the whole element from the outer array
+          this.localContentBlock.contents = removeAtIndex(this.localContentBlock.contents, outer);
         }
-      },
-      save(contentBlock: ContentBlock) {
-        this.$emit('save', contentBlock);
-      },
+      }
     },
-
-  });
+    save(contentBlock: ContentBlock) {
+      this.$emit('save', contentBlock);
+    },
+  },
+});
 </script>
 
 <style lang="scss">
-  @import '~styles/helpers';
-  // override parent page properties
-  .layout--no-scroll {
-    padding-bottom: 20px;
-    height: 100vh;
-    overflow-y: hidden;
-    box-sizing: border-box;
+@import '~styles/helpers';
+// override parent page properties
+.layout--no-scroll {
+  padding-bottom: 20px;
+  height: 100vh;
+  overflow-y: hidden;
+  box-sizing: border-box;
 
-    .module-page {
-      height: 100vh;
-      grid-template-rows: 60px 1fr;
-      padding-bottom: $small-spacing;
-      box-sizing: border-box;
-    }
+  .module-page {
+    height: 100vh;
+    grid-template-rows: 60px 1fr;
+    padding-bottom: $small-spacing;
+    box-sizing: border-box;
   }
+}
 </style>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .content-block-form {
-    max-width: 100%;
-    display: grid;
-    grid-template-columns: 100vw;
-    grid-template-rows:  85vh 80px;
-    height: 100vh;
-    grid-template-areas:
-      'content'
-      'footer';
+.content-block-form {
+  max-width: 100%;
+  display: grid;
+  grid-template-columns: 100vw;
+  grid-template-rows: 85vh 80px;
+  height: 100vh;
+  grid-template-areas:
+    'content'
+    'footer';
 
-    @media (-webkit-min-device-pixel-ratio: 1.25) {
-      grid-template-rows:  80vh auto;
-      height: auto;
-    }
+  @media (-webkit-min-device-pixel-ratio: 1.25) {
+    grid-template-rows: 80vh auto;
+    height: auto;
+  }
 
+  &__heading {
+    @include heading-1;
+  }
 
-    &__heading {
-      @include heading-1;
-    }
+  &__task-toggle {
+    margin-bottom: $large-spacing;
+  }
 
-    &__task-toggle {
-      margin-bottom: $large-spacing;
-    }
+  &__add-button {
+  }
 
-    &__add-button {
-    }
+  &__segment {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
 
-    &__segment {
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
+    margin-bottom: $large-spacing;
 
-      margin-bottom: $large-spacing;
-
-      :last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    &__actions {
-      align-self: flex-end;
-    }
-
-    &__content {
-      grid-area: content;
-      overflow-x: visible;
-      overflow-y: auto;
-      padding: 10px;
-      align-items: center;
-      display: flex;
-      flex-direction: column;
-
-      & > * { // we make an exception and use a wildcard here
-        width: 800px;
-        max-width: 100vw;
-        box-sizing: border-box;
-      }
-    }
-
-    &__footer {
-      padding: $medium-spacing 0;
-      border-top: 1px solid $color-silver;
-      margin-top: auto;
-      grid-area: footer;
-      justify-content: center;
-      display: flex;
-    }
-
-    &__buttons {
-      width: 800px;
+    :last-child {
+      margin-bottom: 0;
     }
   }
+
+  &__actions {
+    align-self: flex-end;
+  }
+
+  &__content {
+    grid-area: content;
+    overflow-x: visible;
+    overflow-y: auto;
+    padding: 10px;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+
+    & > * {
+      // we make an exception and use a wildcard here
+      width: 800px;
+      max-width: 100vw;
+      box-sizing: border-box;
+    }
+  }
+
+  &__footer {
+    padding: $medium-spacing 0;
+    border-top: 1px solid $color-silver;
+    margin-top: auto;
+    grid-area: footer;
+    justify-content: center;
+    display: flex;
+  }
+
+  &__buttons {
+    width: 800px;
+  }
+}
 </style>
diff --git a/client/src/components/content-block-form/ContentElement.vue b/client/src/components/content-block-form/ContentElement.vue
index d59555a9..05df19db 100644
--- a/client/src/components/content-block-form/ContentElement.vue
+++ b/client/src/components/content-block-form/ContentElement.vue
@@ -9,7 +9,6 @@
       @remove="$emit('remove', false)"
     />
 
-
     <!-- Content Forms -->
     <content-form-section
       :title="title"
@@ -27,14 +26,10 @@
           :class="['content-element__component']"
           v-bind="element"
           :is="component"
-
           @change-text="changeText"
-
           @link-change-url="changeUrl"
           @change-url="changeUrl"
-
           @switch-to-document="switchToDocument"
-
           @assignment-change-title="changeAssignmentTitle"
           @assignment-change-assignment="changeAssignmentAssignment"
         />
@@ -44,312 +39,321 @@
 </template>
 
 <script>
-  import ContentFormSection from '@/components/content-block-form/ContentFormSection';
-  import ContentElementActions from '@/components/content-block-form/ContentElementActions';
+import ContentFormSection from '@/components/content-block-form/ContentFormSection';
+import ContentElementActions from '@/components/content-block-form/ContentElementActions';
 
-  const TrashIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon');
-  const ContentBlockElementChooserWidget = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/ContentBlockElementChooserWidget');
-  const LinkForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/LinkForm');
-  const VideoForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/VideoForm');
-  const ImageForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/ImageForm');
-  const DocumentForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/DocumentForm');
-  const AssignmentForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/AssignmentForm');
-  const TextForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/TipTap.vue');
-  const SubtitleForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/SubtitleForm');
-  // readonly blocks
-  const Assignment = () => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/assignment/Assignment');
-  const SurveyBlock = () => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/SurveyBlock');
-  const Solution = () => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/Solution');
-  const ImageBlock = () => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/ImageBlock');
-  const Instruction = () => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/Instruction');
-  const ModuleRoomSlug = () => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/ModuleRoomSlug');
-  const CmsDocumentBlock = () => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/CmsDocumentBlock');
-  const ThinglinkBlock = () => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/ThinglinkBlock');
-  const InfogramBlock = () => import(/* webpackChunkName: "content-forms" */'@/components/content-blocks/InfogramBlock');
+const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
+const ContentBlockElementChooserWidget = () =>
+  import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/ContentBlockElementChooserWidget');
+const LinkForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/LinkForm');
+const VideoForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/VideoForm');
+const ImageForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/ImageForm');
+const DocumentForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/DocumentForm');
+const AssignmentForm = () =>
+  import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/AssignmentForm');
+const TextForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/TipTap.vue');
+const SubtitleForm = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-forms/SubtitleForm');
+// readonly blocks
+const Assignment = () =>
+  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/assignment/Assignment');
+const SurveyBlock = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/SurveyBlock');
+const Solution = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/Solution');
+const ImageBlock = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/ImageBlock');
+const Instruction = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/Instruction');
+const ModuleRoomSlug = () =>
+  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/ModuleRoomSlug');
+const CmsDocumentBlock = () =>
+  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/CmsDocumentBlock');
+const ThinglinkBlock = () =>
+  import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/ThinglinkBlock');
+const InfogramBlock = () => import(/* webpackChunkName: "content-forms" */ '@/components/content-blocks/InfogramBlock');
 
-  const CHOOSER = 'content-block-element-chooser-widget';
+const CHOOSER = 'content-block-element-chooser-widget';
 
-  export default {
-    props: {
-      element: {
-        type: Object,
-        default: null,
-      },
-      // is this element at the top level, or is it nested? we assume top level
-      topLevel: {
-        type: Boolean,
-        default: true,
-      },
-      firstElement: {
-        type: Boolean,
-        required: true,
-      },
-      lastElement: {
-        type: Boolean,
-        required: true,
-      },
+export default {
+  props: {
+    element: {
+      type: Object,
+      default: null,
     },
-
-    components: {
-      ContentElementActions,
-      ContentFormSection,
-      TrashIcon,
-      ContentBlockElementChooserWidget,
-      LinkForm,
-      VideoForm,
-      ImageForm,
-      DocumentForm,
-      AssignmentForm,
-      TextForm,
-      SubtitleForm,
-      SurveyBlock,
-      Solution,
-      ImageBlock,
-      Instruction,
-      ModuleRoomSlug,
-      CmsDocumentBlock,
-      InfogramBlock,
-      ThinglinkBlock,
-      Assignment
+    // is this element at the top level, or is it nested? we assume top level
+    topLevel: {
+      type: Boolean,
+      default: true,
     },
-
-    computed: {
-      actions() {
-        return {
-          up: !this.firstElement,
-          down: !this.lastElement,
-          extended: this.topLevel,
-        };
-      },
-      isChooser() {
-        return this.component === CHOOSER;
-      },
-      type() {
-        return this.getType(this.element);
-      },
-      component() {
-        return this.type.component;
-      },
-      title() {
-        return this.type.title;
-      },
-      icon() {
-        return this.type.icon;
-      },
+    firstElement: {
+      type: Boolean,
+      required: true,
     },
+    lastElement: {
+      type: Boolean,
+      required: true,
+    },
+  },
 
-    methods: {
-      getType(element) {
-        switch (element.type) {
-          case 'subtitle':
-            return {
-              component: 'subtitle-form',
-              title: 'Untertitel',
-              icon: 'title-icon',
-            };
-          case 'link_block':
-            return {
-              component: 'link-form',
-              title: 'Link',
-              icon: 'link-icon',
-            };
-          case 'video_block':
-            return {
-              component: 'video-form',
-              title: 'Video',
-              icon: 'video-icon',
-            };
-          case 'image_url_block':
-            return {
-              component: 'image-form',
-              title: 'Bild',
-              icon: 'image-icon',
-            };
-          case 'text_block':
-            return {
-              component: 'text-form',
-              title: 'Text',
-              icon: 'text-icon',
-            };
-          case 'assignment':
-            return {
-              component: element.id ? 'assignment' : 'assignment-form', // prevent editing of existing assignments
-              title: 'Aufgabe & Ergebnis',
-              icon: 'speech-bubble-icon',
-            };
-          case 'document_block':
-            return {
-              component: 'document-form',
-              title: 'Dokument',
-              icon: 'document-icon',
-            };
-          case 'survey':
-            return {
-              component: 'survey-block',
-              title: 'Übung',
-            };
-          case 'solution':
-            return {
-              component: 'solution',
-              title: 'Lösung',
-            };
-          case 'image_block':
-            return {
-              component: 'image-block',
-              title: 'Bild',
-            };
-          case 'instruction':
-            return {
-              component: 'instruction',
-              title: 'Instruktion',
-            };
-          case 'module_room_slug':
-            return {
-              component: 'module-room-slug',
-              title: 'Raum',
-            };
-          case 'cms_document_block':
-            return {
-              component: 'cms-document-block',
-              title: 'Dokument',
-            };
-          case 'thinglink_block':
-            return {
-              component: 'thinglink-block',
-              title: 'Interaktive Grafik'
-            };
-          case 'infogram_block':
-            return {
-              component: 'infogram-block',
-              title: 'Interaktive Grafik'
-            };
-        }
-        return {
-          component: CHOOSER,
-          title: '',
-          icon: '',
-        };
-      },
-      _updateProperty(value, key) {
-        // const content = this.localContentBlock.contents[index];
-        const content = this.element;
-        this.update({
-          ...content,
-          value: {
-            ...content.value,
-            [key]: value,
-          },
-        });
-      },
-      changeUrl(value) {
-        this._updateProperty(value, 'url');
-      },
-      changeText(value) {
-        this._updateProperty(value, 'text');
-      },
-      changeAssignmentTitle(value) {
-        this._updateProperty(value, 'title');
-      },
-      changeAssignmentAssignment(value) {
-        this._updateProperty(value, 'assignment');
-      },
-      changeType({type, convertToList}, value) {
-        let el = {
-          type: type,
-          value: Object.assign({}, value),
-        };
-        switch (type) {
-          case 'subtitle':
-            el = {
-              ...el,
-              value: {
-                text: '',
-              },
-            };
-            break;
-          case 'text_block':
-            el = {
-              ...el,
-              value: {
-                text: '',
-              },
-            };
-            break;
-          case 'link_block':
-            el = {
-              ...el,
-              value: {
-                text: '',
-                url: '',
-              },
-            };
-            break;
-          case 'video_block':
-            el = {
-              ...el,
-              value: {
-                url: '',
-              },
-            };
-            break;
-          case 'document_block':
-            el = {
-              ...el,
-              value: Object.assign({
-                url: '',
-              }, value),
-            };
-            break;
-          case 'image_url_block':
-            el = {
-              ...el,
-              value: {
-                url: '',
-              },
-            };
-            break;
-        }
+  components: {
+    ContentElementActions,
+    ContentFormSection,
+    TrashIcon,
+    ContentBlockElementChooserWidget,
+    LinkForm,
+    VideoForm,
+    ImageForm,
+    DocumentForm,
+    AssignmentForm,
+    TextForm,
+    SubtitleForm,
+    SurveyBlock,
+    Solution,
+    ImageBlock,
+    Instruction,
+    ModuleRoomSlug,
+    CmsDocumentBlock,
+    InfogramBlock,
+    ThinglinkBlock,
+    Assignment,
+  },
 
-        if (convertToList) {
-          el = {
-            type: 'content_list_item',
-            contents: [el],
+  computed: {
+    actions() {
+      return {
+        up: !this.firstElement,
+        down: !this.lastElement,
+        extended: this.topLevel,
+      };
+    },
+    isChooser() {
+      return this.component === CHOOSER;
+    },
+    type() {
+      return this.getType(this.element);
+    },
+    component() {
+      return this.type.component;
+    },
+    title() {
+      return this.type.title;
+    },
+    icon() {
+      return this.type.icon;
+    },
+  },
+
+  methods: {
+    getType(element) {
+      switch (element.type) {
+        case 'subtitle':
+          return {
+            component: 'subtitle-form',
+            title: 'Untertitel',
+            icon: 'title-icon',
           };
-        }
-        this.update(el);
-      },
-      update(element) {
-        this.$emit('update', element);
-      },
-      switchToDocument(value) {
-        this.changeType('document_block', value);
-      },
+        case 'link_block':
+          return {
+            component: 'link-form',
+            title: 'Link',
+            icon: 'link-icon',
+          };
+        case 'video_block':
+          return {
+            component: 'video-form',
+            title: 'Video',
+            icon: 'video-icon',
+          };
+        case 'image_url_block':
+          return {
+            component: 'image-form',
+            title: 'Bild',
+            icon: 'image-icon',
+          };
+        case 'text_block':
+          return {
+            component: 'text-form',
+            title: 'Text',
+            icon: 'text-icon',
+          };
+        case 'assignment':
+          return {
+            component: element.id ? 'assignment' : 'assignment-form', // prevent editing of existing assignments
+            title: 'Aufgabe & Ergebnis',
+            icon: 'speech-bubble-icon',
+          };
+        case 'document_block':
+          return {
+            component: 'document-form',
+            title: 'Dokument',
+            icon: 'document-icon',
+          };
+        case 'survey':
+          return {
+            component: 'survey-block',
+            title: 'Übung',
+          };
+        case 'solution':
+          return {
+            component: 'solution',
+            title: 'Lösung',
+          };
+        case 'image_block':
+          return {
+            component: 'image-block',
+            title: 'Bild',
+          };
+        case 'instruction':
+          return {
+            component: 'instruction',
+            title: 'Instruktion',
+          };
+        case 'module_room_slug':
+          return {
+            component: 'module-room-slug',
+            title: 'Raum',
+          };
+        case 'cms_document_block':
+          return {
+            component: 'cms-document-block',
+            title: 'Dokument',
+          };
+        case 'thinglink_block':
+          return {
+            component: 'thinglink-block',
+            title: 'Interaktive Grafik',
+          };
+        case 'infogram_block':
+          return {
+            component: 'infogram-block',
+            title: 'Interaktive Grafik',
+          };
+      }
+      return {
+        component: CHOOSER,
+        title: '',
+        icon: '',
+      };
     },
-  };
+    _updateProperty(value, key) {
+      // const content = this.localContentBlock.contents[index];
+      const content = this.element;
+      this.update({
+        ...content,
+        value: {
+          ...content.value,
+          [key]: value,
+        },
+      });
+    },
+    changeUrl(value) {
+      this._updateProperty(value, 'url');
+    },
+    changeText(value) {
+      this._updateProperty(value, 'text');
+    },
+    changeAssignmentTitle(value) {
+      this._updateProperty(value, 'title');
+    },
+    changeAssignmentAssignment(value) {
+      this._updateProperty(value, 'assignment');
+    },
+    changeType({ type, convertToList }, value) {
+      let el = {
+        type: type,
+        value: Object.assign({}, value),
+      };
+      switch (type) {
+        case 'subtitle':
+          el = {
+            ...el,
+            value: {
+              text: '',
+            },
+          };
+          break;
+        case 'text_block':
+          el = {
+            ...el,
+            value: {
+              text: '',
+            },
+          };
+          break;
+        case 'link_block':
+          el = {
+            ...el,
+            value: {
+              text: '',
+              url: '',
+            },
+          };
+          break;
+        case 'video_block':
+          el = {
+            ...el,
+            value: {
+              url: '',
+            },
+          };
+          break;
+        case 'document_block':
+          el = {
+            ...el,
+            value: Object.assign(
+              {
+                url: '',
+              },
+              value
+            ),
+          };
+          break;
+        case 'image_url_block':
+          el = {
+            ...el,
+            value: {
+              url: '',
+            },
+          };
+          break;
+      }
+
+      if (convertToList) {
+        el = {
+          type: 'content_list_item',
+          contents: [el],
+        };
+      }
+      this.update(el);
+    },
+    update(element) {
+      this.$emit('update', element);
+    },
+    switchToDocument(value) {
+      this.changeType('document_block', value);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .content-element {
-    display: flex;
-    flex-direction: column;
+.content-element {
+  display: flex;
+  flex-direction: column;
 
-    &__actions {
-      display: inline-flex;
-      justify-self: flex-end;
-      align-self: flex-end;
-    }
-
-    &__section {
-      display: grid;
-      //grid-template-columns: 1fr 50px;
-      grid-auto-rows: auto;
-      /*width: 95%; // reserve space for scrollbar*/
-    }
-
-    &__chooser {
-      grid-column: 1 / span 2;
-    }
+  &__actions {
+    display: inline-flex;
+    justify-self: flex-end;
+    align-self: flex-end;
   }
+
+  &__section {
+    display: grid;
+    //grid-template-columns: 1fr 50px;
+    grid-auto-rows: auto;
+    /*width: 95%; // reserve space for scrollbar*/
+  }
+
+  &__chooser {
+    grid-column: 1 / span 2;
+  }
+}
 </style>
diff --git a/client/src/components/content-block-form/ContentElementActions.vue b/client/src/components/content-block-form/ContentElementActions.vue
index cc69596e..9a6a4d33 100644
--- a/client/src/components/content-block-form/ContentElementActions.vue
+++ b/client/src/components/content-block-form/ContentElementActions.vue
@@ -1,17 +1,9 @@
 <template>
   <div class="content-element-actions">
-    <button
-      class="icon-button"
-      @click.stop="toggle(true)"
-    >
+    <button class="icon-button" @click.stop="toggle(true)">
       <ellipses class="icon-button__icon" />
     </button>
-    <widget-popover
-      class="content-element-actions__popover"
-      :no-padding="true"
-      v-if="show"
-      @hide-me="toggle(false)"
-    >
+    <widget-popover class="content-element-actions__popover" :no-padding="true" v-if="show" @hide-me="toggle(false)">
       <section class="content-element-actions__section">
         <button-with-icon-and-text
           class="content-element-actions__button"
@@ -63,84 +55,82 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import WidgetPopover from '@/components/ui/WidgetPopover.vue';
-  import Ellipses from '@/components/icons/Ellipses.vue';
-  import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText.vue';
-  import {ActionOptions} from "@/@types";
+import Vue from 'vue';
+import WidgetPopover from '@/components/ui/WidgetPopover.vue';
+import Ellipses from '@/components/icons/Ellipses.vue';
+import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText.vue';
+import { ActionOptions } from '@/@types';
 
-  interface Data {
-    show: boolean;
-  }
+interface Data {
+  show: boolean;
+}
 
-  export default Vue.extend({
-    props: {
-      actions: {
-        type: Object as () => ActionOptions
-      },
+export default Vue.extend({
+  props: {
+    actions: {
+      type: Object as () => ActionOptions,
     },
-    components: {ButtonWithIconAndText, Ellipses, WidgetPopover},
+  },
+  components: { ButtonWithIconAndText, Ellipses, WidgetPopover },
 
-    data: (): Data => ({
-      show: false,
-    }),
+  data: (): Data => ({
+    show: false,
+  }),
 
-    methods: {
-      toggle(show: boolean) {
-        this.show = show;
-      },
-      close() {
-        this.show = false;
-      },
-      up() {
-        this.$emit('move-up');
-        this.close();
-      },
-      down() {
-        this.$emit('move-down');
-        this.close();
-      },
-      top() {
-        this.$emit('move-top');
-        this.close();
-      },
-      bottom() {
-        this.$emit('move-bottom');
-        this.close();
-      },
-      emitAndClose(event: string) {
-        this.$emit(event);
-        this.close();
-      }
+  methods: {
+    toggle(show: boolean) {
+      this.show = show;
     },
-  });
+    close() {
+      this.show = false;
+    },
+    up() {
+      this.$emit('move-up');
+      this.close();
+    },
+    down() {
+      this.$emit('move-down');
+      this.close();
+    },
+    top() {
+      this.$emit('move-top');
+      this.close();
+    },
+    bottom() {
+      this.$emit('move-bottom');
+      this.close();
+    },
+    emitAndClose(event: string) {
+      this.$emit(event);
+      this.close();
+    },
+  },
+});
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .content-element-actions {
-    position: relative;
+.content-element-actions {
+  position: relative;
 
-    &__popover {
-      white-space: nowrap;
-      top: 100%;
-      transform: translateY($small-spacing);
+  &__popover {
+    white-space: nowrap;
+    top: 100%;
+    transform: translateY($small-spacing);
+  }
 
-    }
+  &__section {
+    border-bottom: 1px solid $color-silver-dark;
+    padding: $medium-spacing $small-spacing;
 
-    &__section {
-      border-bottom: 1px solid $color-silver-dark;
-      padding: $medium-spacing $small-spacing;
-
-      &:last-child {
-        border-bottom: 0;
-      }
-    }
-
-    &__button {
-      margin-bottom: $medium-spacing;
+    &:last-child {
+      border-bottom: 0;
     }
   }
 
+  &__button {
+    margin-bottom: $medium-spacing;
+  }
+}
 </style>
diff --git a/client/src/components/content-block-form/ContentFormSection.vue b/client/src/components/content-block-form/ContentFormSection.vue
index 3941c1f7..e903b628 100644
--- a/client/src/components/content-block-form/ContentFormSection.vue
+++ b/client/src/components/content-block-form/ContentFormSection.vue
@@ -1,13 +1,8 @@
 <template>
   <div class="content-form-section">
     <h2 class="content-form-section__heading">
-      <component
-        class="content-form-section__icon"
-        :is="icon"
-      /> <span
-        class="content-form-section__title"
-        data-cy="content-form-section-title"
-      >{{ title }}</span>
+      <component class="content-form-section__icon" :is="icon" />
+      <span class="content-form-section__title" data-cy="content-form-section-title">{{ title }}</span>
     </h2>
 
     <content-element-actions
@@ -27,74 +22,73 @@
 </template>
 
 <script lang="ts">
-  import formElementIcons from '@/components/ui/form-element-icons.js';
-  import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
-  import {ActionOptions} from "@/@types";
+import formElementIcons from '@/components/ui/form-element-icons.js';
+import ContentElementActions from '@/components/content-block-form/ContentElementActions.vue';
+import { ActionOptions } from '@/@types';
 
-
-  export default {
-    props: {
-      title: {
-        type: String,
-        default: ''
-      },
-      icon: {
-        type: String,
-        default: ''
-      },
-      actions: {
-        type: Object as () => ActionOptions,
-        default: () => {}
-      }
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
     },
-    components: {
-      ContentElementActions,
-      ...formElementIcons
-    }
-  };
+    icon: {
+      type: String,
+      default: '',
+    },
+    actions: {
+      type: Object as () => ActionOptions,
+      default: () => {},
+    },
+  },
+  components: {
+    ContentElementActions,
+    ...formElementIcons,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .content-form-section {
-    @include default-box-shadow;
-    border-radius: $default-border-radius;
-    padding: $small-spacing $medium-spacing;
-    margin-bottom: $medium-spacing;
+.content-form-section {
+  @include default-box-shadow;
+  border-radius: $default-border-radius;
+  padding: $small-spacing $medium-spacing;
+  margin-bottom: $medium-spacing;
 
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: auto;
-    grid-template-areas: 'h a' 'c c';
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: auto;
+  grid-template-areas: 'h a' 'c c';
+  align-items: center;
+  grid-row-gap: $medium-spacing;
+
+  &__heading {
+    display: flex;
     align-items: center;
-    grid-row-gap: $medium-spacing;
-
-    &__heading {
-      display: flex;
-      align-items: center;
-      grid-area: h;
-      margin-bottom: 0;
-    }
-
-    &__actions {
-      grid-area: a;
-      justify-self: end;
-    }
-
-    &__title {
-      @include heading-3;
-      margin-bottom: 0;
-    }
-
-    &__icon {
-      width: 28px;
-      height: 28px;
-      margin-right: $small-spacing;
-    }
-
-    &__content {
-      grid-area: c;
-    }
+    grid-area: h;
+    margin-bottom: 0;
   }
+
+  &__actions {
+    grid-area: a;
+    justify-self: end;
+  }
+
+  &__title {
+    @include heading-3;
+    margin-bottom: 0;
+  }
+
+  &__icon {
+    width: 28px;
+    height: 28px;
+    margin-right: $small-spacing;
+  }
+
+  &__content {
+    grid-area: c;
+  }
+}
 </style>
diff --git a/client/src/components/content-block-form/ContentsForm.vue b/client/src/components/content-block-form/ContentsForm.vue
index c9235d24..930969f4 100644
--- a/client/src/components/content-block-form/ContentsForm.vue
+++ b/client/src/components/content-block-form/ContentsForm.vue
@@ -18,166 +18,150 @@
       />
     </template>
 
-    <add-content-element
-      :index="-1"
-      class="contents-form__add"
-      @add-element="addElement"
-    />
-    <div
-      class="contents-form__element"
-      v-for="(element, index) in localContentBlock.contents"
-      :key="index"
-    >
-      <content-element
-        :element="element"
-        @update="update(index, $event)"
-        @remove="remove(index)"
-      />
+    <add-content-element :index="-1" class="contents-form__add" @add-element="addElement" />
+    <div class="contents-form__element" v-for="(element, index) in localContentBlock.contents" :key="index">
+      <content-element :element="element" @update="update(index, $event)" @remove="remove(index)" />
 
-      <add-content-element
-        :index="index"
-        class="contents-form__add"
-        @add-element="addElement"
-      />
+      <add-content-element :index="index" class="contents-form__add" @add-element="addElement" />
     </div>
 
     <template #footer>
       <div>
         <a
-          :class="{'button--disabled': disableSave}"
+          :class="{ 'button--disabled': disableSave }"
           class="button button--primary"
           data-cy="modal-save-button"
           @click="save"
-        >Speichern</a>
-        <a
-          class="button"
-          @click="$emit('hide')"
-        >Abbrechen</a>
+          >Speichern</a
+        >
+        <a class="button" @click="$emit('hide')">Abbrechen</a>
       </div>
     </template>
   </modal>
 </template>
 
 <script>
-  import {meQuery} from '@/graphql/queries';
+import { meQuery } from '@/graphql/queries';
 
-  const ModalInput = () => import(/* webpackChunkName: "content-forms" */'@/components/ModalInput');
-  const AddContentElement = () => import(/* webpackChunkName: "content-forms" */'@/components/AddContentElement');
-  const ContentElement = () => import(/* webpackChunkName: "content-forms" */'@/components/content-block-form/ContentElement');
+const ModalInput = () => import(/* webpackChunkName: "content-forms" */ '@/components/ModalInput');
+const AddContentElement = () => import(/* webpackChunkName: "content-forms" */ '@/components/AddContentElement');
+const ContentElement = () =>
+  import(/* webpackChunkName: "content-forms" */ '@/components/content-block-form/ContentElement');
 
-  const Modal = () => import('@/components/Modal.vue');
-  const Checkbox = () => import('@/components/ui/Checkbox.vue');
+const Modal = () => import('@/components/Modal.vue');
+const Checkbox = () => import('@/components/ui/Checkbox.vue');
 
-  export default {
-    props: {
-      contentBlock: Object,
-      blockType: {
-        type: String,
-        default: 'ContentBlock',
-      },
-      showTaskSelection: {
-        type: Boolean,
-        default: false,
-      },
-      disableSave: {
-        type: Boolean,
-        default: false,
-      },
+export default {
+  props: {
+    contentBlock: Object,
+    blockType: {
+      type: String,
+      default: 'ContentBlock',
     },
-
-    components: {
-      ContentElement,
-      Modal,
-      ModalInput,
-      AddContentElement,
-      Checkbox,
+    showTaskSelection: {
+      type: Boolean,
+      default: false,
     },
+    disableSave: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
-    data() {
-      return {
-        error: false,
-        localContentBlock: Object.assign({}, {
+  components: {
+    ContentElement,
+    Modal,
+    ModalInput,
+    AddContentElement,
+    Checkbox,
+  },
+
+  data() {
+    return {
+      error: false,
+      localContentBlock: Object.assign(
+        {},
+        {
           title: this.contentBlock.title,
           contents: [...this.contentBlock.contents],
           id: this.contentBlock.id || undefined,
           isAssignment: this.contentBlock.type && this.contentBlock.type.toLowerCase() === 'task',
-        }),
-        me: {},
-      };
-    },
-
-    apollo: {
-      me: meQuery,
-    },
-
-    computed: {
-      titlePlaceholder() {
-        return this.blockType === 'RoomEntry' ? 'Titel für Raumeintrag erfassen' : 'Titel für Inhaltsblock erfassen';
-      },
-      taskSelection() {
-        return this.showTaskSelection && this.me.permissions.includes('users.can_manage_school_class_content');
-      },
-    },
-
-    methods: {
-      setContentBlockType(checked) {
-        this.localContentBlock.isAssignment = checked;
-      },
-      update(index, element) {
-        this.localContentBlock.contents.splice(index, 1, element);
-      },
-      save() {
-        if (!this.disableSave) {
-          if (!this.localContentBlock.title) {
-            this.error = true;
-            return false;
-          }
-          this.$emit('save', this.localContentBlock);
         }
-      },
-      updateTitle(title) {
-        this.localContentBlock.title = title;
-        this.error = false;
-      },
-      addElement(index) {
-        this.localContentBlock.contents.splice(index + 1, 0, {
-          hideAssignment: this.blockType !== 'ContentBlock',
-        });
-      },
-      remove(index) {
-        this.localContentBlock.contents.splice(index, 1);
-      },
+      ),
+      me: {},
+    };
+  },
 
+  apollo: {
+    me: meQuery,
+  },
+
+  computed: {
+    titlePlaceholder() {
+      return this.blockType === 'RoomEntry' ? 'Titel für Raumeintrag erfassen' : 'Titel für Inhaltsblock erfassen';
     },
-  };
+    taskSelection() {
+      return this.showTaskSelection && this.me.permissions.includes('users.can_manage_school_class_content');
+    },
+  },
+
+  methods: {
+    setContentBlockType(checked) {
+      this.localContentBlock.isAssignment = checked;
+    },
+    update(index, element) {
+      this.localContentBlock.contents.splice(index, 1, element);
+    },
+    save() {
+      if (!this.disableSave) {
+        if (!this.localContentBlock.title) {
+          this.error = true;
+          return false;
+        }
+        this.$emit('save', this.localContentBlock);
+      }
+    },
+    updateTitle(title) {
+      this.localContentBlock.title = title;
+      this.error = false;
+    },
+    addElement(index) {
+      this.localContentBlock.contents.splice(index + 1, 0, {
+        hideAssignment: this.blockType !== 'ContentBlock',
+      });
+    },
+    remove(index) {
+      this.localContentBlock.contents.splice(index, 1);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .contents-form {
-    /* top level does not exist, because of the modal */
+.contents-form {
+  /* top level does not exist, because of the modal */
 
-    &__element {
-
-    }
-
-    &__element-component {
-      margin-bottom: 25px;
-    }
-
-    &__remove {
-    }
-
-    &__trash-icon {
-    }
-
-    &__add {
-      grid-column: 1 / span 2;
-    }
-
-    &__task {
-      margin: 15px 0 10px;
-    }
+  &__element {
   }
+
+  &__element-component {
+    margin-bottom: 25px;
+  }
+
+  &__remove {
+  }
+
+  &__trash-icon {
+  }
+
+  &__add {
+    grid-column: 1 / span 2;
+  }
+
+  &__task {
+    margin: 15px 0 10px;
+  }
+}
 </style>
diff --git a/client/src/components/content-block-form/EditContentBlockWizard.vue b/client/src/components/content-block-form/EditContentBlockWizard.vue
index 0495da57..26ed1b82 100644
--- a/client/src/components/content-block-form/EditContentBlockWizard.vue
+++ b/client/src/components/content-block-form/EditContentBlockWizard.vue
@@ -1,77 +1,75 @@
 <template>
-  <contents-form
-    :content-block="contentBlock"
-    :show-task-selection="true"
-    @save="saveContentBlock"
-    @hide="hideModal"
-  />
+  <contents-form :content-block="contentBlock" :show-task-selection="true" @save="saveContentBlock" @hide="hideModal" />
 </template>
 
 <script>
-  import ContentsForm from '@/components/content-block-form/ContentsForm';
+import ContentsForm from '@/components/content-block-form/ContentsForm';
 
-  import store from '@/store/index';
+import store from '@/store/index';
 
-  import EDIT_CONTENT_BLOCK_MUTATION from 'gql/mutations/editContentBlock.gql';
-  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
-  import CONTENT_BLOCK_QUERY from '@/graphql/gql/queries/contentBlockQuery.gql';
-  import { setUserBlockType } from '@/helpers/content-block';
+import EDIT_CONTENT_BLOCK_MUTATION from 'gql/mutations/editContentBlock.gql';
+import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
+import CONTENT_BLOCK_QUERY from '@/graphql/gql/queries/contentBlockQuery.gql';
+import { setUserBlockType } from '@/helpers/content-block';
 
-  export default {
-    components: {
-      ContentsForm
+export default {
+  components: {
+    ContentsForm,
+  },
+
+  data() {
+    return {
+      contentBlock: {},
+    };
+  },
+
+  created() {
+    // debugger;
+  },
+
+  methods: {
+    hideModal() {
+      this.$store.dispatch('resetCurrentNoteBlock');
+      this.$store.dispatch('hideModal');
     },
-
-    data() {
-      return {
-        contentBlock: {}
-      };
-    },
-
-    created() {
-      // debugger;
-    },
-
-    methods: {
-      hideModal() {
-        this.$store.dispatch('resetCurrentNoteBlock');
-        this.$store.dispatch('hideModal');
-      },
-      saveContentBlock(contentBlock) {
-        this.$apollo.mutate({
+    saveContentBlock(contentBlock) {
+      this.$apollo
+        .mutate({
           mutation: EDIT_CONTENT_BLOCK_MUTATION,
           variables: {
             input: {
               contentBlock: {
                 title: contentBlock.title,
-                contents: contentBlock.contents.filter(value => Object.keys(value).length > 0),
-                type: setUserBlockType(contentBlock.isAssignment)
+                contents: contentBlock.contents.filter((value) => Object.keys(value).length > 0),
+                type: setUserBlockType(contentBlock.isAssignment),
               },
-              id: contentBlock.id
-            }
+              id: contentBlock.id,
+            },
           },
-          refetchQueries: [{
-            query: MODULE_DETAILS_QUERY,
-            variables: {
-              slug: this.$route.params.slug
-            }
-          }]
-        }).then(() => {
+          refetchQueries: [
+            {
+              query: MODULE_DETAILS_QUERY,
+              variables: {
+                slug: this.$route.params.slug,
+              },
+            },
+          ],
+        })
+        .then(() => {
           this.hideModal();
         });
-      }
     },
+  },
 
-    apollo: {
-      contentBlock() {
-        return {
-          query: CONTENT_BLOCK_QUERY,
-          variables: {
-            id: store.state.currentNoteBlock
-          }
-        };
-      }
-    }
-
-  };
+  apollo: {
+    contentBlock() {
+      return {
+        query: CONTENT_BLOCK_QUERY,
+        variables: {
+          id: store.state.currentNoteBlock,
+        },
+      };
+    },
+  },
+};
 </script>
diff --git a/client/src/components/content-block-form/NewContentBlockWizard.vue b/client/src/components/content-block-form/NewContentBlockWizard.vue
index 27874334..faba8790 100644
--- a/client/src/components/content-block-form/NewContentBlockWizard.vue
+++ b/client/src/components/content-block-form/NewContentBlockWizard.vue
@@ -9,60 +9,62 @@
 </template>
 
 <script>
-  import ContentsForm from '@/components/content-block-form/ContentsForm';
+import ContentsForm from '@/components/content-block-form/ContentsForm';
 
-  import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';
-  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
-  import {setUserBlockType} from '@/helpers/content-block';
+import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';
+import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
+import { setUserBlockType } from '@/helpers/content-block';
 
-  export default {
-    components: {
-      ContentsForm
-    },
+export default {
+  components: {
+    ContentsForm,
+  },
 
-    data() {
-      return {
-        contentBlock: {
-          title: '',
-          contents: [
-            {}
-          ]
-        },
-        saving: false
-      };
-    },
-
-    methods: {
-      hideModal() {
-        this.$store.dispatch('resetContentBlockPosition');
-        this.$store.dispatch('hideModal');
+  data() {
+    return {
+      contentBlock: {
+        title: '',
+        contents: [{}],
       },
-      saveContentBlock(contentBlock) {
-        this.saving = true;
-        this.$apollo.mutate({
+      saving: false,
+    };
+  },
+
+  methods: {
+    hideModal() {
+      this.$store.dispatch('resetContentBlockPosition');
+      this.$store.dispatch('hideModal');
+    },
+    saveContentBlock(contentBlock) {
+      this.saving = true;
+      this.$apollo
+        .mutate({
           mutation: NEW_CONTENT_BLOCK_MUTATION,
           variables: {
             input: {
               contentBlock: {
                 title: contentBlock.title,
-                contents: contentBlock.contents.filter(value => Object.keys(value).length > 0),
-                type: setUserBlockType(contentBlock.isAssignment)
+                contents: contentBlock.contents.filter((value) => Object.keys(value).length > 0),
+                type: setUserBlockType(contentBlock.isAssignment),
               },
               after: this.$store.state.contentBlockPosition.after,
-              parent: this.$store.state.contentBlockPosition.parent
-            }
+              parent: this.$store.state.contentBlockPosition.parent,
+            },
           },
-          refetchQueries: [{
-            query: MODULE_DETAILS_QUERY,
-            variables: {
-              slug: this.$route.params.slug
-            }
-          }]
-        }).then(() => {
+          refetchQueries: [
+            {
+              query: MODULE_DETAILS_QUERY,
+              variables: {
+                slug: this.$route.params.slug,
+              },
+            },
+          ],
+        })
+        .then(() => {
           this.saving = false;
           this.hideModal();
         });
-      }
     },
-  };
+  },
+};
 </script>
diff --git a/client/src/components/content-block-form/helpers.js b/client/src/components/content-block-form/helpers.js
index 097ec7f9..349b827b 100644
--- a/client/src/components/content-block-form/helpers.js
+++ b/client/src/components/content-block-form/helpers.js
@@ -1,39 +1,46 @@
 export const CHOOSER = 'content-block-element-chooser-widget';
-export const chooserFilter = value => value.type !== CHOOSER;
-export const USER_CONTENT_TYPES = ['subtitle', 'link_block', 'video_block', 'image_url_block', 'text_block', 'assignment', 'document_block'];
+export const chooserFilter = (value) => value.type !== CHOOSER;
+export const USER_CONTENT_TYPES = [
+  'subtitle',
+  'link_block',
+  'video_block',
+  'image_url_block',
+  'text_block',
+  'assignment',
+  'document_block',
+];
 
 /*
   Users can only edit certain types of contents, the rest can only be re-ordered. We only care about their id, we won't
   send anything else to the server about them
  */
 export const simplifyContents = (contents) => {
-  return contents.map(c => {
+  return contents.map((c) => {
     if (USER_CONTENT_TYPES.includes(c.type)) {
       return c;
     }
     if (c.type === 'content_list_item') {
       return {
         ...c,
-        contents: simplifyContents(c.contents)
+        contents: simplifyContents(c.contents),
       };
     }
     return {
       id: c.id,
-      type: 'readonly'
+      type: 'readonly',
     };
   });
 };
 
 export const cleanUpContents = (contents) => {
-  let filteredContents = contents
-    .filter(chooserFilter); // only use items that are not chooser elements
+  let filteredContents = contents.filter(chooserFilter); // only use items that are not chooser elements
 
-  return filteredContents.map(content => {
+  return filteredContents.map((content) => {
     // if the element has a contents property, it's a list of contents, filter them
     if (content.contents) {
       return {
         ...content,
-        contents: content.contents.filter(chooserFilter)
+        contents: content.contents.filter(chooserFilter),
       };
     }
     // else just return it
@@ -44,16 +51,16 @@ export const cleanUpContents = (contents) => {
 // transform value prop to contents, to better handle the input type on the server
 export const transformInnerContents = (contents) => {
   let ret = [];
- for (let content of contents) {
-   if (Array.isArray(content.value)) {
-     const {value, ...contentWithoutValue} = content;
-     ret.push({
-       ...contentWithoutValue,
-       contents: value
-     });
-   } else {
-     ret.push(content);
-   }
- }
- return ret;
+  for (let content of contents) {
+    if (Array.isArray(content.value)) {
+      const { value, ...contentWithoutValue } = content;
+      ret.push({
+        ...contentWithoutValue,
+        contents: value,
+      });
+    } else {
+      ret.push(content);
+    }
+  }
+  return ret;
 };
diff --git a/client/src/components/content-blocks/CmsDocumentBlock.vue b/client/src/components/content-blocks/CmsDocumentBlock.vue
index 70817717..e32cfb15 100644
--- a/client/src/components/content-blocks/CmsDocumentBlock.vue
+++ b/client/src/components/content-blocks/CmsDocumentBlock.vue
@@ -1,66 +1,57 @@
 <template>
-  <div
-    :class="{'cms-document-block--solution': solution}"
-    class="cms-document-block"
-  >
+  <div :class="{ 'cms-document-block--solution': solution }" class="cms-document-block">
     <document-icon class="cms-document-block__icon" />
-    <a
-      :href="value.url"
-      class="cms-document-block__link"
-      target="_blank"
-    >{{ value.display_text }}</a>
+    <a :href="value.url" class="cms-document-block__link" target="_blank">{{ value.display_text }}</a>
   </div>
 </template>
 
 <script>
-  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
+const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
 
-  export default {
-    props: {
-      value: Object,
-      solution: {
-        type: Boolean,
-        default: false,
-      },
+export default {
+  props: {
+    value: Object,
+    solution: {
+      type: Boolean,
+      default: false,
     },
+  },
 
-    components: {
-      DocumentIcon,
-    },
-  };
+  components: {
+    DocumentIcon,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .cms-document-block {
-    display: grid;
-    grid-template-columns: 50px 1fr 50px;
-    align-items: center;
-    margin-bottom: $large-spacing;
+.cms-document-block {
+  display: grid;
+  grid-template-columns: 50px 1fr 50px;
+  align-items: center;
+  margin-bottom: $large-spacing;
 
-    &__icon {
-      width: 30px;
-      height: 30px;
+  &__icon {
+    width: 30px;
+    height: 30px;
+  }
+
+  &__link {
+    text-decoration: underline;
+  }
+
+  $parent: &;
+
+  &--solution {
+    margin-bottom: $small-spacing;
+
+    #{$parent}__link {
+      color: $color-silver-dark;
     }
-
-
-    &__link {
-      text-decoration: underline;
-    }
-
-    $parent: &;
-
-    &--solution {
-      margin-bottom: $small-spacing;
-
-      #{$parent}__link {
-        color: $color-silver-dark;
-      }
-      #{$parent}__icon {
-        fill: $color-silver-dark;
-      }
-
+    #{$parent}__icon {
+      fill: $color-silver-dark;
     }
   }
+}
 </style>
diff --git a/client/src/components/content-blocks/ContentComponent.vue b/client/src/components/content-blocks/ContentComponent.vue
index a2ffe238..9a9e9b60 100644
--- a/client/src/components/content-blocks/ContentComponent.vue
+++ b/client/src/components/content-blocks/ContentComponent.vue
@@ -1,9 +1,5 @@
 <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"
@@ -13,96 +9,105 @@
       @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';
 
-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 = () => 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');
 
 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() {
@@ -114,18 +119,19 @@ 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() {
@@ -133,37 +139,36 @@ 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 {
-
-    }
-
-    &--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;
-    }
+  &--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;
+  }
+}
 </style>
diff --git a/client/src/components/content-blocks/ContentList.vue b/client/src/components/content-blocks/ContentList.vue
index 8faf472f..cc612fdb 100644
--- a/client/src/components/content-blocks/ContentList.vue
+++ b/client/src/components/content-blocks/ContentList.vue
@@ -1,14 +1,7 @@
 <template>
   <ol class="content-list">
-    <li
-      class="content-list__item"
-      v-for="(item, index) in items"
-      :key="item.id"
-    >
-      <slot
-        :item="item"
-        :index="index"
-      >
+    <li class="content-list__item" v-for="(item, index) in items" :key="item.id">
+      <slot :item="item" :index="index">
         {{ item.id }}
       </slot>
     </li>
@@ -16,13 +9,13 @@
 </template>
 
 <script>
-  export default {
-    //
-    props: {
-      items: {
-        type: Array,
-        default: () => ([])
-      }
+export default {
+  //
+  props: {
+    items: {
+      type: Array,
+      default: () => [],
     },
-  };
+  },
+};
 </script>
diff --git a/client/src/components/content-blocks/ContentListBlock.vue b/client/src/components/content-blocks/ContentListBlock.vue
index f7b20a56..eaaab5bb 100644
--- a/client/src/components/content-blocks/ContentListBlock.vue
+++ b/client/src/components/content-blocks/ContentListBlock.vue
@@ -1,47 +1,40 @@
 <template>
-  <content-list
-    :items="contentBlocks"
-  >
+  <content-list :items="contentBlocks">
     <template #default="{ item }">
-      <content-block
-        :content-block="item"
-        :parent="parent"
-      />
+      <content-block :content-block="item" :parent="parent" />
     </template>
   </content-list>
 </template>
 
 <script>
-  import ContentList from '@/components/content-blocks/ContentList.vue';
-  export default {
-    name: 'ContentBlockList',
-    props: ['contents', 'parent'],
+import ContentList from '@/components/content-blocks/ContentList.vue';
+export default {
+  name: 'ContentBlockList',
+  props: ['contents', 'parent'],
 
-    components: {
-      ContentList,
-      // https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
-      ContentBlock: () => import('@/components/ContentBlock.vue')
-    },
+  components: {
+    ContentList,
+    // https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
+    ContentBlock: () => import('@/components/ContentBlock.vue'),
+  },
 
-    computed: {
-      contentBlocks() {
-        return this.contents.map(contentBlock => {
-          const contents = contentBlock.value ? [...contentBlock.value] : [];
-          return Object.assign({}, contentBlock, {
-            contents,
-            indent: true,
-            bookmarks: this.parent.bookmarks,
-            notes: this.parent.notes,
-            root: this.parent.id
-          });
+  computed: {
+    contentBlocks() {
+      return this.contents.map((contentBlock) => {
+        const contents = contentBlock.value ? [...contentBlock.value] : [];
+        return Object.assign({}, contentBlock, {
+          contents,
+          indent: true,
+          bookmarks: this.parent.bookmarks,
+          notes: this.parent.notes,
+          root: this.parent.id,
         });
-      }
+      });
     },
-
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
-
+@import '~styles/helpers';
 </style>
diff --git a/client/src/components/content-blocks/DocumentBlock.vue b/client/src/components/content-blocks/DocumentBlock.vue
index 398fd332..d31b6797 100644
--- a/client/src/components/content-blocks/DocumentBlock.vue
+++ b/client/src/components/content-blocks/DocumentBlock.vue
@@ -1,79 +1,71 @@
 <template>
   <div class="document-block">
     <document-icon class="document-block__icon" />
-    <a
-      :href="value.url"
-      class="document-block__link"
-      target="_blank"
-    >{{ urlName }}</a>
-    <a
-      class="document-block__remove"
-      v-if="showTrashIcon"
-      @click="$emit('trash')"
-    >
+    <a :href="value.url" class="document-block__link" target="_blank">{{ urlName }}</a>
+    <a class="document-block__remove" v-if="showTrashIcon" @click="$emit('trash')">
       <trash-icon class="document-block__trash-icon" />
     </a>
   </div>
 </template>
 
 <script>
-  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
-  const TrashIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon');
+const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
+const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
 
-  export default {
-    props: {
-      value: Object,
-      showTrashIcon: Boolean,
-    },
+export default {
+  props: {
+    value: Object,
+    showTrashIcon: Boolean,
+  },
 
-    components: {
-      DocumentIcon,
-      TrashIcon,
-    },
+  components: {
+    DocumentIcon,
+    TrashIcon,
+  },
 
-    computed: {
-      urlName: function() {
-        if (this.value && this.value.url) {
-          const parts = this.value.url.split('/');
-          return parts[parts.length - 1];
-        }
-        return null;
+  computed: {
+    urlName: function () {
+      if (this.value && this.value.url) {
+        const parts = this.value.url.split('/');
+        return parts[parts.length - 1];
       }
-    }
-  };
+      return null;
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .document-block {
-    display: grid;
-    grid-template-columns: 50px 1fr 50px;
-    align-items: center;
+.document-block {
+  display: grid;
+  grid-template-columns: 50px 1fr 50px;
+  align-items: center;
 
-    &__icon {
-      width: 30px;
-      height: 30px;
-    }
-
-    &__link {
-      text-decoration: underline;
-    }
-
-    &__remove {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      width: 50px;
-      height: 50px;
-    }
-
-    &__trash-icon {
-      width: 25px;
-      height: 25px;
-      fill: $color-silver-dark;
-      cursor: pointer;
-      justify-self: center;
-    }
+  &__icon {
+    width: 30px;
+    height: 30px;
   }
+
+  &__link {
+    text-decoration: underline;
+  }
+
+  &__remove {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50px;
+    height: 50px;
+  }
+
+  &__trash-icon {
+    width: 25px;
+    height: 25px;
+    fill: $color-silver-dark;
+    cursor: pointer;
+    justify-self: center;
+  }
+}
 </style>
diff --git a/client/src/components/content-blocks/GeniallyBlock.vue b/client/src/components/content-blocks/GeniallyBlock.vue
index a4a15afd..7b9f2c38 100644
--- a/client/src/components/content-blocks/GeniallyBlock.vue
+++ b/client/src/components/content-blocks/GeniallyBlock.vue
@@ -18,51 +18,51 @@
 </template>
 
 <script>
-  export default {
-    props: ['value'],
+export default {
+  props: ['value'],
 
-    computed: {
-      src() {
-        return `https://view.genial.ly/${this.value.id}`;
-      }
+  computed: {
+    src() {
+      return `https://view.genial.ly/${this.value.id}`;
     },
+  },
 
-    methods: {
-      openFullscreen() {
-        this.$store.dispatch('showFullscreenInfographic', {
-          id: this.value.id,
-          type: 'genially-block'
-        });
-      }
-    }
-  };
+  methods: {
+    openFullscreen() {
+      this.$store.dispatch('showFullscreenInfographic', {
+        id: this.value.id,
+        type: 'genially-block',
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+@import '@/styles/_variables.scss';
 
-  // Styling and structure taken from original iframe
-  .genially-block {
-    width: 100%;
-    margin-bottom: $large-spacing;
+// Styling and structure taken from original iframe
+.genially-block {
+  width: 100%;
+  margin-bottom: $large-spacing;
 
-    &__wrapper {
-      position: relative;
-      padding-bottom: 75%;
-      padding-top: 0;
-      height: 0;
-    }
-
-    &__iframe {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-
-    &__link {
-      cursor: pointer;
-    }
+  &__wrapper {
+    position: relative;
+    padding-bottom: 75%;
+    padding-top: 0;
+    height: 0;
   }
+
+  &__iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__link {
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/client/src/components/content-blocks/ImageBlock.vue b/client/src/components/content-blocks/ImageBlock.vue
index f3be9cdb..5e2f72a6 100644
--- a/client/src/components/content-blocks/ImageBlock.vue
+++ b/client/src/components/content-blocks/ImageBlock.vue
@@ -1,31 +1,25 @@
 <template>
-  <img
-    :src="value.path"
-    alt=""
-    class="image-block"
-    @click="openFullscreen"
-  >
+  <img :src="value.path" alt="" class="image-block" @click="openFullscreen" />
 </template>
 
 <script>
-  export default {
-    props: ['value'],
-    methods: {
-      openFullscreen() {
-        this.$store.dispatch('showFullscreenImage', this.value.path);
-      }
-    }
-
-  };
+export default {
+  props: ['value'],
+  methods: {
+    openFullscreen() {
+      this.$store.dispatch('showFullscreenImage', this.value.path);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .image-block {
-    width: 100%;
-    max-width: 100%;
-    border-radius: 13px;
-    margin-bottom: $large-spacing;
-  }
+.image-block {
+  width: 100%;
+  max-width: 100%;
+  border-radius: 13px;
+  margin-bottom: $large-spacing;
+}
 </style>
diff --git a/client/src/components/content-blocks/ImageUrlBlock.vue b/client/src/components/content-blocks/ImageUrlBlock.vue
index 08e92b1e..ee6e952c 100644
--- a/client/src/components/content-blocks/ImageUrlBlock.vue
+++ b/client/src/components/content-blocks/ImageUrlBlock.vue
@@ -1,30 +1,24 @@
 <template>
-  <img
-    :src="value.url"
-    alt=""
-    class="image-block"
-    @click="openFullscreen"
-  >
+  <img :src="value.url" alt="" class="image-block" @click="openFullscreen" />
 </template>
 
 <script>
-  export default {
-    props: ['value'],
-    methods: {
-      openFullscreen() {
-        this.$store.dispatch('showFullscreenImage', this.value.url);
-      }
-    }
-
-  };
+export default {
+  props: ['value'],
+  methods: {
+    openFullscreen() {
+      this.$store.dispatch('showFullscreenImage', this.value.url);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  .image-block {
-    width: 100%;
-    max-width: 100%;
-    border-radius: 13px;
+.image-block {
+  width: 100%;
+  max-width: 100%;
+  border-radius: 13px;
 
-    margin-bottom: 30px;
-  }
+  margin-bottom: 30px;
+}
 </style>
diff --git a/client/src/components/content-blocks/InfogramBlock.vue b/client/src/components/content-blocks/InfogramBlock.vue
index b84c6a6b..d9329836 100644
--- a/client/src/components/content-blocks/InfogramBlock.vue
+++ b/client/src/components/content-blocks/InfogramBlock.vue
@@ -7,79 +7,79 @@
       class="infogram-block__iframe"
       scrolling="no"
       frameborder="0"
-      style="border:none;"
+      style="border: none"
     />
   </div>
 </template>
 
 <script>
-  export default {
-    props: ['value'],
+export default {
+  props: ['value'],
 
-    data() {
-      return {
-        height: 1
-      };
+  data() {
+    return {
+      height: 1,
+    };
+  },
+
+  computed: {
+    src() {
+      return `https://e.infogram.com/${this.id}?src=embed`;
     },
-
-    computed: {
-      src() {
-        return `https://e.infogram.com/${this.id}?src=embed`;
-      },
-      href() {
-        return `https://infogram.com/${this.id}`;
-      },
-      id() {
-        return this.value.id;
-      },
-      title() {
-        return this.value.title || 'Infografik';
-      }
+    href() {
+      return `https://infogram.com/${this.id}`;
     },
+    id() {
+      return this.value.id;
+    },
+    title() {
+      return this.value.title || 'Infografik';
+    },
+  },
 
-    mounted() {
-      // from https://developers.infogr.am/oembed/
-      window.addEventListener('message', event => {
-        try {
-          const data = JSON.parse(event.data);
-          if (data.context === 'iframe.resize' && this.parseId(data.src) === this.id) {
-            this.height = data.height;
-          }
-        } catch (e) {
-          return false;
+  mounted() {
+    // from https://developers.infogr.am/oembed/
+    window.addEventListener('message', (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.context === 'iframe.resize' && this.parseId(data.src) === this.id) {
+          this.height = data.height;
         }
+      } catch (e) {
+        return false;
+      }
+    });
+  },
+
+  methods: {
+    parseId(src) {
+      // src will be in the format of something like https://e.infogram.com/0ccf86bc-1afe-4026-b313-1f1b5992452b?src=embed
+      let last = src.split('/').pop();
+      return last.substring(0, last.indexOf('?')); // we're only interested in the id part before the '?'
+    },
+    openFullscreen() {
+      this.$store.dispatch('showFullscreenInfographic', {
+        id: this.value.id,
+        type: 'infogram-block',
       });
     },
-
-    methods: {
-      parseId(src) {
-        // src will be in the format of something like https://e.infogram.com/0ccf86bc-1afe-4026-b313-1f1b5992452b?src=embed
-        let last = src.split('/').pop();
-        return last.substring(0, last.indexOf('?')); // we're only interested in the id part before the '?'
-      },
-      openFullscreen() {
-        this.$store.dispatch('showFullscreenInfographic', {
-          id: this.value.id,
-          type: 'infogram-block'
-        });
-      }
-    },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+@import '@/styles/_variables.scss';
 
-  .infogram-block {
-    margin-bottom: $large-spacing;
+.infogram-block {
+  margin-bottom: $large-spacing;
 
-    &__link {
-      text-decoration: none;
-      cursor: pointer;
-    }
-
-    &__iframe {
-      width: 100%;
-    }
+  &__link {
+    text-decoration: none;
+    cursor: pointer;
   }
+
+  &__iframe {
+    width: 100%;
+  }
+}
 </style>
diff --git a/client/src/components/content-blocks/Instruction.vue b/client/src/components/content-blocks/Instruction.vue
index 7765762d..a07b54d8 100644
--- a/client/src/components/content-blocks/Instruction.vue
+++ b/client/src/components/content-blocks/Instruction.vue
@@ -1,56 +1,50 @@
 <template>
-  <div
-    class="instruction"
-    v-if="me.isTeacher"
-  >
+  <div class="instruction" v-if="me.isTeacher">
     <bulb-icon class="instruction__icon" />
-    <a
-      :href="url"
-      class="instruction__link"
-    >{{ text }}</a>
+    <a :href="url" class="instruction__link">{{ text }}</a>
   </div>
 </template>
 
 <script>
-  import me from '@/mixins/me';
-  const BulbIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/BulbIcon');
+import me from '@/mixins/me';
+const BulbIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/BulbIcon');
 
-  export default {
-    props: ['value'],
+export default {
+  props: ['value'],
 
-    mixins: [me],
+  mixins: [me],
 
-    components: {
-      BulbIcon
+  components: {
+    BulbIcon,
+  },
+
+  computed: {
+    text() {
+      return this.value.text ? this.value.text : 'Anweisungen';
     },
-
-    computed: {
-      text() {
-        return this.value.text ? this.value.text : 'Anweisungen';
-      },
-      url() {
-        return this.value.document ? this.value.document.url : this.value.url;
-      }
-    }
-  };
+    url() {
+      return this.value.document ? this.value.document.url : this.value.url;
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_mixins.scss';
 
-  .instruction {
-    margin-bottom: 1rem;
-    display: flex;
-    align-items: center;
+.instruction {
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
 
-    &__icon {
-      width: 40px;
-      height: 40px;
-      margin-right: $small-spacing;
-    }
-
-    &__link {
-      @include heading-3;
-    }
+  &__icon {
+    width: 40px;
+    height: 40px;
+    margin-right: $small-spacing;
   }
+
+  &__link {
+    @include heading-3;
+  }
+}
 </style>
diff --git a/client/src/components/content-blocks/InstrumentWidget.vue b/client/src/components/content-blocks/InstrumentWidget.vue
index f199d9d9..d611608a 100644
--- a/client/src/components/content-blocks/InstrumentWidget.vue
+++ b/client/src/components/content-blocks/InstrumentWidget.vue
@@ -1,15 +1,12 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
   <div class="instrument-widget">
-    <div
-      class="instrument-widget__description"
-      v-html="value.description"
-    />
+    <div class="instrument-widget__description" v-html="value.description" />
     <router-link
-      :to="{name: 'instrument', params: { slug: value.slug }}"
+      :to="{ name: 'instrument', params: { slug: value.slug } }"
       class="instrument-widget__button button"
       :style="{
-        borderColor: value.foreground
+        borderColor: value.foreground,
       }"
     >
       {{ $flavor.textInstrument }} anzeigen
@@ -18,24 +15,23 @@
 </template>
 
 <script>
-  // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
-  export default {
-    props: ['value'],
-  };
+// todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+export default {
+  props: ['value'],
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/_variables.scss";
+@import '~styles/_variables.scss';
 
-  .instrument-widget {
-    margin-bottom: $small-spacing;
+.instrument-widget {
+  margin-bottom: $small-spacing;
 
-    &__description {
-      margin-bottom: 25px;
-    }
-
-    &__button {
-
-    }
+  &__description {
+    margin-bottom: 25px;
   }
+
+  &__button {
+  }
+}
 </style>
diff --git a/client/src/components/content-blocks/LinkBlock.vue b/client/src/components/content-blocks/LinkBlock.vue
index 6458235f..423d955a 100644
--- a/client/src/components/content-blocks/LinkBlock.vue
+++ b/client/src/components/content-blocks/LinkBlock.vue
@@ -1,59 +1,52 @@
 <template>
-  <div
-    :class="{ 'link-block--no-margin': noMargin}"
-    class="link-block"
-  >
+  <div :class="{ 'link-block--no-margin': noMargin }" class="link-block">
     <link-icon class="link-block__icon" />
-    <a
-      :href="href"
-      class="link-block__link"
-      target="_blank"
-    >{{ value.text }}</a>
+    <a :href="href" class="link-block__link" target="_blank">{{ value.text }}</a>
   </div>
 </template>
 
 <script>
-  const LinkIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/LinkIcon');
+const LinkIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/LinkIcon');
 
-  export default {
-    props: {
-      value: Object,
-      noMargin: {
-        default: false
-      }
+export default {
+  props: {
+    value: Object,
+    noMargin: {
+      default: false,
     },
+  },
 
-    components: {
-      LinkIcon
+  components: {
+    LinkIcon,
+  },
+
+  computed: {
+    href() {
+      const url = this.value.url;
+      return url.startsWith('http') ? this.value.url : `http://${this.value.url}`;
     },
-
-    computed: {
-      href() {
-        const url = this.value.url;
-        return url.startsWith('http') ? this.value.url : `http://${this.value.url}`;
-      }
-    }
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  .link-block {
-    margin-bottom: 30px;
-    display: grid;
-    grid-template-columns: 50px 1fr;
-    align-items: center;
+.link-block {
+  margin-bottom: 30px;
+  display: grid;
+  grid-template-columns: 50px 1fr;
+  align-items: center;
 
-    &--no-margin {
-      margin-bottom: 0;
-    }
-
-    &__icon {
-      width: 30px;
-      height: 30px;
-    }
-
-    &__link {
-      text-decoration: underline;
-    }
+  &--no-margin {
+    margin-bottom: 0;
   }
+
+  &__icon {
+    width: 30px;
+    height: 30px;
+  }
+
+  &__link {
+    text-decoration: underline;
+  }
+}
 </style>
diff --git a/client/src/components/content-blocks/ModuleRoomSlug.vue b/client/src/components/content-blocks/ModuleRoomSlug.vue
index a4e4a976..ee51c022 100644
--- a/client/src/components/content-blocks/ModuleRoomSlug.vue
+++ b/client/src/components/content-blocks/ModuleRoomSlug.vue
@@ -1,24 +1,21 @@
 <template>
   <div class="module-slug">
-    <router-link
-      :to="{name: 'moduleRoom', params: { slug: value.slug }}"
-      class="button button--primary"
-    >
+    <router-link :to="{ name: 'moduleRoom', params: { slug: value.slug } }" class="button button--primary">
       Raum anzeigen
     </router-link>
   </div>
 </template>
 
 <script>
-  export default {
-    props: ['value']
-  };
+export default {
+  props: ['value'],
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+@import '@/styles/_variables.scss';
 
-  .module-slug {
-    margin-bottom: $large-spacing;
-  }
+.module-slug {
+  margin-bottom: $large-spacing;
+}
 </style>
diff --git a/client/src/components/content-blocks/SectionTitleBlock.vue b/client/src/components/content-blocks/SectionTitleBlock.vue
index fda0706d..19fe011e 100644
--- a/client/src/components/content-blocks/SectionTitleBlock.vue
+++ b/client/src/components/content-blocks/SectionTitleBlock.vue
@@ -1,23 +1,20 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
-  <h4
-    class="section-title"
-    v-html="value.text"
-  />
+  <h4 class="section-title" v-html="value.text" />
 </template>
 
 <script>
-  export default {
-    props: ['value']
-  };
+export default {
+  props: ['value'],
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
-  .section-title {
-    margin-bottom: 30px;
-    @include heading-line-height;
-  }
+.section-title {
+  margin-bottom: 30px;
+  @include heading-line-height;
+}
 </style>
diff --git a/client/src/components/content-blocks/Solution.vue b/client/src/components/content-blocks/Solution.vue
index 282e6beb..287e9114 100644
--- a/client/src/components/content-blocks/Solution.vue
+++ b/client/src/components/content-blocks/Solution.vue
@@ -1,114 +1,95 @@
 <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,
-      };
+  data() {
+    return {
+      visible: false,
+    };
+  },
+
+  computed: {
+    sanitizedText() {
+      return sanitizeAsHtml(this.value.text);
     },
+  },
 
-    computed: {
-      sanitizedText() {
-        return sanitizeAsHtml(this.value.text);
-      },
+  methods: {
+    toggle() {
+      this.visible = !this.visible;
     },
-
-    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;
-    }
+  &__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 {
+  &__text {
+    font-size: toRem(18px);
+    color: $color-silver-dark;
+
+    :deep(p) {
       font-size: toRem(18px);
       color: $color-silver-dark;
+    }
 
-      :deep(p) {
-        font-size: toRem(18px);
+    :deep(ul) {
+      padding-left: $medium-spacing;
+
+      > li {
+        list-style: disc outside none;
         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 .3s;
-  }
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s;
+}
 
-  .fade-enter,
-  .fade-leave-active {
-    opacity: 0;
-  }
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
 </style>
diff --git a/client/src/components/content-blocks/SubtitleBlock.vue b/client/src/components/content-blocks/SubtitleBlock.vue
index eefab3d8..3940e0b4 100644
--- a/client/src/components/content-blocks/SubtitleBlock.vue
+++ b/client/src/components/content-blocks/SubtitleBlock.vue
@@ -1,33 +1,29 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
-  <h5
-    class="subtitle"
-    data-cy="subtitle-block"
-    v-html="sanitizedText"
-  />
+  <h5 class="subtitle" data-cy="subtitle-block" v-html="sanitizedText" />
 </template>
 
 <script>
-  import {sanitize} from '@/helpers/text';
+import { sanitize } from '@/helpers/text';
 
-  export default {
-    props: ['value'],
+export default {
+  props: ['value'],
 
-    computed: {
-      sanitizedText() {
-        return sanitize(this.value.text);
-      }
-    }
-  };
+  computed: {
+    sanitizedText() {
+      return sanitize(this.value.text);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .subtitle {
-    padding-top: 1px;
-    margin-bottom: $medium-spacing;
-    margin-bottom: calc(#{$large-spacing} - 0.1rem);
-    @include heading-line-height;
-  }
+.subtitle {
+  padding-top: 1px;
+  margin-bottom: $medium-spacing;
+  margin-bottom: calc(#{$large-spacing} - 0.1rem);
+  @include heading-line-height;
+}
 </style>
diff --git a/client/src/components/content-blocks/SurveyBlock.vue b/client/src/components/content-blocks/SurveyBlock.vue
index 2a49c848..64f7f6ee 100644
--- a/client/src/components/content-blocks/SurveyBlock.vue
+++ b/client/src/components/content-blocks/SurveyBlock.vue
@@ -1,27 +1,21 @@
 <template>
-  <div
-    :data-scrollto="value.id"
-    class="survey-block"
-  >
-    <router-link
-      :to="{name: 'survey', params: {id:value.id}}"
-      class="button button--primary"
-    >
+  <div :data-scrollto="value.id" class="survey-block">
+    <router-link :to="{ name: 'survey', params: { id: value.id } }" class="button button--primary">
       Übung anzeigen
     </router-link>
   </div>
 </template>
 
 <script>
-  export default {
-    props: ['value'],
-  };
+export default {
+  props: ['value'],
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+@import '@/styles/_variables.scss';
 
-  .survey-block {
-    margin-bottom: $large-spacing;
-  }
+.survey-block {
+  margin-bottom: $large-spacing;
+}
 </style>
diff --git a/client/src/components/content-blocks/Task.vue b/client/src/components/content-blocks/Task.vue
index a15749e7..5dcbe921 100644
--- a/client/src/components/content-blocks/Task.vue
+++ b/client/src/components/content-blocks/Task.vue
@@ -1,26 +1,23 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
   <div class="task">
-    <div
-      class="task__text"
-      v-html="value.text"
-    />
+    <div class="task__text" v-html="value.text" />
   </div>
 </template>
 
 <script>
-  export default {
-    props: ['value']
-  };
+export default {
+  props: ['value'],
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+@import '@/styles/_variables.scss';
 
-  .task {
-    margin-bottom: 30px;
-    align-items: start;
-    background-color: $color-brand-light;
-    border-radius: $default-border-radius;
-  }
+.task {
+  margin-bottom: 30px;
+  align-items: start;
+  background-color: $color-brand-light;
+  border-radius: $default-border-radius;
+}
 </style>
diff --git a/client/src/components/content-blocks/TextBlock.vue b/client/src/components/content-blocks/TextBlock.vue
index 6ec98764..c9b9239d 100644
--- a/client/src/components/content-blocks/TextBlock.vue
+++ b/client/src/components/content-blocks/TextBlock.vue
@@ -1,39 +1,35 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
-  <div
-    class="text-block"
-    data-cy="text-block"
-    v-html="sanitizedText"
-  />
+  <div class="text-block" data-cy="text-block" v-html="sanitizedText" />
 </template>
 
 <script>
-  export default {
-    props: ['value'],
+export default {
+  props: ['value'],
 
-    computed: {
-      sanitizedText() {
-        // don't need to sanitize the input, server does this
-        return this.value.text;
-      }
-    }
-  };
+  computed: {
+    sanitizedText() {
+      // don't need to sanitize the input, server does this
+      return this.value.text;
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .text-block {
-    margin-bottom: $medium-spacing; // if calc is not supported
-    margin-bottom: calc(#{$large-spacing} - 0.25rem); // to offset the 1.5 line height, which leaves a padding
-    @include regular-paragraph;
+.text-block {
+  margin-bottom: $medium-spacing; // if calc is not supported
+  margin-bottom: calc(#{$large-spacing} - 0.25rem); // to offset the 1.5 line height, which leaves a padding
+  @include regular-paragraph;
 
-    :deep(ul) {
-      @include list-parent;
-    }
-
-    :deep(li) {
-      @include list-child;
-    }
+  :deep(ul) {
+    @include list-parent;
   }
+
+  :deep(li) {
+    @include list-child;
+  }
+}
 </style>
diff --git a/client/src/components/content-blocks/ThinglinkBlock.vue b/client/src/components/content-blocks/ThinglinkBlock.vue
index 34927ab3..1d12a5fd 100644
--- a/client/src/components/content-blocks/ThinglinkBlock.vue
+++ b/client/src/components/content-blocks/ThinglinkBlock.vue
@@ -20,51 +20,51 @@
 </template>
 
 <script>
-  export default {
-    props: ['value'],
+export default {
+  props: ['value'],
 
-    computed: {
-      src() {
-        return `https://www.thinglink.com/card/${this.value.id}`;
-      }
+  computed: {
+    src() {
+      return `https://www.thinglink.com/card/${this.value.id}`;
     },
+  },
 
-    methods: {
-      openFullscreen() {
-        this.$store.dispatch('showFullscreenInfographic', {
-          id: this.value.id,
-          type: 'thinglink-block'
-        });
-      }
-    }
-  };
+  methods: {
+    openFullscreen() {
+      this.$store.dispatch('showFullscreenInfographic', {
+        id: this.value.id,
+        type: 'thinglink-block',
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+@import '@/styles/_variables.scss';
 
-  // Styling and structure taken from original iframe
-  .thinglink-block {
-    width: 100%;
-    margin-bottom: $large-spacing;
+// Styling and structure taken from original iframe
+.thinglink-block {
+  width: 100%;
+  margin-bottom: $large-spacing;
 
-    &__wrapper {
-      position: relative;
-      padding-bottom: 75%;
-      padding-top: 0;
-      height: 0;
-    }
-
-    &__iframe {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-
-    &__link {
-      cursor: pointer;
-    }
+  &__wrapper {
+    position: relative;
+    padding-bottom: 75%;
+    padding-top: 0;
+    height: 0;
   }
+
+  &__iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__link {
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/client/src/components/content-blocks/VideoBlock.vue b/client/src/components/content-blocks/VideoBlock.vue
index 64a2f5c8..bb59cb4d 100644
--- a/client/src/components/content-blocks/VideoBlock.vue
+++ b/client/src/components/content-blocks/VideoBlock.vue
@@ -1,51 +1,42 @@
 <template>
   <div class="video-block">
-    <youtube-embed
-      :url="value.url"
-      v-if="isYoutube"
-    />
-    <vimeo-embed
-      :url="value.url"
-      v-if="isVimeo"
-    />
-    <srf-embed
-      :url="value.url"
-      v-if="isSrf"
-    />
+    <youtube-embed :url="value.url" v-if="isYoutube" />
+    <vimeo-embed :url="value.url" v-if="isVimeo" />
+    <srf-embed :url="value.url" v-if="isSrf" />
   </div>
 </template>
 
 <script>
-  import YoutubeEmbed from '@/components/videos/YoutubeEmbed';
-  import VimeoEmbed from '@/components/videos/VimeoEmbed';
-  import SrfEmbed from '@/components/videos/SrfEmbed';
-  import {isVimeoUrl, isYoutubeUrl, isSrfUrl} from '@/helpers/video';
+import YoutubeEmbed from '@/components/videos/YoutubeEmbed';
+import VimeoEmbed from '@/components/videos/VimeoEmbed';
+import SrfEmbed from '@/components/videos/SrfEmbed';
+import { isVimeoUrl, isYoutubeUrl, isSrfUrl } from '@/helpers/video';
 
-  export default {
-    props: ['value'],
+export default {
+  props: ['value'],
 
-    components: {
-      YoutubeEmbed,
-      VimeoEmbed,
-      SrfEmbed
+  components: {
+    YoutubeEmbed,
+    VimeoEmbed,
+    SrfEmbed,
+  },
+
+  computed: {
+    isYoutube() {
+      return isYoutubeUrl(this.value.url);
     },
-
-    computed: {
-      isYoutube() {
-        return isYoutubeUrl(this.value.url);
-      },
-      isVimeo() {
-        return isVimeoUrl(this.value.url);
-      },
-      isSrf() {
-        return isSrfUrl(this.value.url);
-      }
-    }
-  };
+    isVimeo() {
+      return isVimeoUrl(this.value.url);
+    },
+    isSrf() {
+      return isSrfUrl(this.value.url);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  .video-block {
-    margin-bottom: 30px;
-  }
+.video-block {
+  margin-bottom: 30px;
+}
 </style>
diff --git a/client/src/components/content-blocks/assignment/Assignment.vue b/client/src/components/content-blocks/assignment/Assignment.vue
index b64f5711..f268a07f 100644
--- a/client/src/components/content-blocks/assignment/Assignment.vue
+++ b/client/src/components/content-blocks/assignment/Assignment.vue
@@ -1,19 +1,9 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
-  <div
-    :data-scrollto="value.id"
-    class="assignment"
-  >
-    <p
-      class="assignment__main-text"
-      data-cy="assignment-main-text"
-      v-html="assignment.assignment"
-    />
+  <div :data-scrollto="value.id" class="assignment">
+    <p class="assignment__main-text" data-cy="assignment-main-text" v-html="assignment.assignment" />
 
-    <solution
-      :value="solution"
-      v-if="assignment.solution"
-    />
+    <solution :value="solution" v-if="assignment.solution" />
 
     <template v-if="isStudent">
       <submission-form
@@ -33,100 +23,92 @@
         @spellcheck="spellcheck"
       />
 
-      <spell-check
-        :corrections="corrections"
-        :text="submission.text"
-      />
+      <spell-check :corrections="corrections" :text="submission.text" />
 
-      <p
-        class="assignment__feedback"
-        v-if="assignment.submission.submissionFeedback"
-        v-html="feedbackText"
-      />
+      <p class="assignment__feedback" v-if="assignment.submission.submissionFeedback" v-html="feedbackText" />
     </template>
     <template v-if="!isStudent">
-      <router-link
-        :to="{name: 'submissions', params: { id: assignment.id }}"
-        class="button button--primary"
-      >
-        Zu den
-        Ergebnissen
+      <router-link :to="{ name: 'submissions', params: { id: assignment.id } }" class="button button--primary">
+        Zu den Ergebnissen
       </router-link>
     </template>
   </div>
 </template>
 
 <script>
-  import {mapActions, mapGetters} from 'vuex';
-  import ASSIGNMENT_QUERY from '@/graphql/gql/queries/assignmentQuery.gql';
-  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
-  import UPDATE_ASSIGNMENT_MUTATION from '@/graphql/gql/mutations/updateAssignmentMutation.gql';
-  import UPDATE_ASSIGNMENT_MUTATION_WITH_SUCCESS from '@/graphql/gql/mutations/updateAssignmentMutationWithSuccess.gql';
-  import SPELL_CHECK_MUTATION from '@/graphql/gql/mutations/spellCheck.gql';
-  import debounce from 'lodash/debounce';
-  import cloneDeep from 'lodash/cloneDeep';
-  import {sanitize} from '@/helpers/text';
+import { mapActions, mapGetters } from 'vuex';
+import ASSIGNMENT_QUERY from '@/graphql/gql/queries/assignmentQuery.gql';
+import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+import UPDATE_ASSIGNMENT_MUTATION from '@/graphql/gql/mutations/updateAssignmentMutation.gql';
+import UPDATE_ASSIGNMENT_MUTATION_WITH_SUCCESS from '@/graphql/gql/mutations/updateAssignmentMutationWithSuccess.gql';
+import SPELL_CHECK_MUTATION from '@/graphql/gql/mutations/spellCheck.gql';
+import debounce from 'lodash/debounce';
+import cloneDeep from 'lodash/cloneDeep';
+import { sanitize } from '@/helpers/text';
 
-  const SubmissionForm = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/SubmissionForm');
-  const Solution = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution');
-  const SpellCheck = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/SpellCheck');
+const SubmissionForm = () =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/assignment/SubmissionForm');
+const Solution = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Solution');
+const SpellCheck = () =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/assignment/SpellCheck');
 
-  export default {
-    props: ['value'],
+export default {
+  props: ['value'],
 
-    components: {
-      Solution,
-      SubmissionForm,
-      SpellCheck,
+  components: {
+    Solution,
+    SubmissionForm,
+    SpellCheck,
+  },
+
+  data() {
+    return {
+      assignment: {
+        submission: this.initialSubmission(),
+      },
+      me: {
+        permissions: [],
+      },
+      inputType: 'text',
+      unsaved: false,
+      saving: 0,
+      corrections: '',
+      spellcheckLoading: false,
+    };
+  },
+
+  computed: {
+    ...mapGetters(['scrollToAssignmentId']),
+    final() {
+      return !!this.submission && this.submission.final;
     },
-
-    data() {
+    submission() {
+      return this.assignment.submission ? this.assignment.submission : {};
+    },
+    isStudent() {
+      return !this.me.permissions.includes('users.can_manage_school_class_content');
+    },
+    solution() {
       return {
-        assignment: {
-          submission: this.initialSubmission(),
-        },
-        me: {
-          permissions: [],
-        },
-        inputType: 'text',
-        unsaved: false,
-        saving: 0,
-        corrections: '',
-        spellcheckLoading: false,
+        text: this.assignment.solution,
       };
     },
-
-    computed: {
-      ...mapGetters(['scrollToAssignmentId']),
-      final() {
-        return !!this.submission && this.submission.final;
-      },
-      submission() {
-        return this.assignment.submission ? this.assignment.submission : {};
-      },
-      isStudent() {
-        return !this.me.permissions.includes('users.can_manage_school_class_content');
-      },
-      solution() {
-        return {
-          text: this.assignment.solution,
-        };
-      },
-      id() {
-        return this.assignment.id ? this.assignment.id.replace(/=/g, '') : '';
-      },
-      feedbackText() {
-        let feedback = this.assignment.submission.submissionFeedback;
-        let sanitizedFeedbackText = sanitize(feedback.text);
-        return `<span class="inline-title">Feedback von ${feedback.teacher.firstName} ${feedback.teacher.lastName}:</span> ${sanitizedFeedbackText}`;
-      },
+    id() {
+      return this.assignment.id ? this.assignment.id.replace(/=/g, '') : '';
     },
+    feedbackText() {
+      let feedback = this.assignment.submission.submissionFeedback;
+      let sanitizedFeedbackText = sanitize(feedback.text);
+      return `<span class="inline-title">Feedback von ${feedback.teacher.firstName} ${feedback.teacher.lastName}:</span> ${sanitizedFeedbackText}`;
+    },
+  },
 
-    methods: {
-      ...mapActions(['scrollToAssignmentReady']),
-      _save: debounce(function (submission) {
-        this.saving++;
-        this.$apollo.mutate({
+  methods: {
+    ...mapActions(['scrollToAssignmentReady']),
+    _save: debounce(function (submission) {
+      this.saving++;
+      this.$apollo
+        .mutate({
           mutation: UPDATE_ASSIGNMENT_MUTATION_WITH_SUCCESS,
           variables: {
             input: {
@@ -137,7 +119,14 @@
               },
             },
           },
-          update(store, {data: {updateAssignment: {successful, updatedAssignment}}}) {
+          update(
+            store,
+            {
+              data: {
+                updateAssignment: { successful, updatedAssignment },
+              },
+            }
+          ) {
             try {
               if (successful) {
                 const query = ASSIGNMENT_QUERY;
@@ -148,80 +137,82 @@
                   submission,
                 });
                 const data = {
-                  assignment
+                  assignment,
                 };
-                store.writeQuery({query, variables, data});
+                store.writeQuery({ query, variables, data });
               }
             } catch (e) {
               console.error(e);
               // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
             }
           },
-        }).then(() => {
+        })
+        .then(() => {
           this.saving--;
           if (this.saving === 0) {
             this.unsaved = false;
           }
         });
-      }, 500),
-      saveInput: function (answer) {
-        // reset corrections on input
-        this.corrections = '';
-        this.unsaved = true;
-        /*
+    }, 500),
+    saveInput: function (answer) {
+      // reset corrections on input
+      this.corrections = '';
+      this.unsaved = true;
+      /*
           We update the assignment on this component, so the changes are reflected on it. The server does not return
           the updated entity, to prevent the UI to update when the user is entering his input
          */
-        this.assignment.submission.text = answer;
-        this._save(this.assignment.submission);
-      },
-      changeDocumentUrl(documentUrl) {
-        this.assignment.submission.document = documentUrl;
-        this._save(this.assignment.submission);
-      },
-      turnIn() {
-        // reset corrections on turn in
-        this.corrections = '';
-        this.$apollo.mutate({
-          mutation: UPDATE_ASSIGNMENT_MUTATION,
-          variables: {
-            input: {
-              assignment: {
-                id: this.assignment.id,
-                answer: this.assignment.submission.text,
-                document: this.assignment.submission.document,
-                final: true,
-              },
+      this.assignment.submission.text = answer;
+      this._save(this.assignment.submission);
+    },
+    changeDocumentUrl(documentUrl) {
+      this.assignment.submission.document = documentUrl;
+      this._save(this.assignment.submission);
+    },
+    turnIn() {
+      // reset corrections on turn in
+      this.corrections = '';
+      this.$apollo.mutate({
+        mutation: UPDATE_ASSIGNMENT_MUTATION,
+        variables: {
+          input: {
+            assignment: {
+              id: this.assignment.id,
+              answer: this.assignment.submission.text,
+              document: this.assignment.submission.document,
+              final: true,
             },
           },
-        });
-      },
-      reopen() {
-        this.$apollo.mutate({
-          mutation: UPDATE_ASSIGNMENT_MUTATION,
-          variables: {
-            input: {
-              assignment: {
-                id: this.assignment.id,
-                answer: this.assignment.submission.text,
-                document: this.assignment.submission.document,
-                final: false,
-              },
+        },
+      });
+    },
+    reopen() {
+      this.$apollo.mutate({
+        mutation: UPDATE_ASSIGNMENT_MUTATION,
+        variables: {
+          input: {
+            assignment: {
+              id: this.assignment.id,
+              answer: this.assignment.submission.text,
+              document: this.assignment.submission.document,
+              final: false,
             },
           },
-        });
-      },
-      initialSubmission() {
-        return {
-          text: '',
-          document: '',
-          final: false,
-        };
-      },
-      spellcheck() {
-        let self = this;
-        this.spellcheckLoading = true;
-        this.$apollo.mutate({
+        },
+      });
+    },
+    initialSubmission() {
+      return {
+        text: '',
+        document: '',
+        final: false,
+      };
+    },
+    spellcheck() {
+      let self = this;
+      this.spellcheckLoading = true;
+      this.$apollo
+        .mutate({
           mutation: SPELL_CHECK_MUTATION,
           variables: {
             input: {
@@ -229,90 +220,96 @@
               text: this.assignment.submission.text,
             },
           },
-          update(store, {data: {spellCheck: {results}}}) {
+          update(
+            store,
+            {
+              data: {
+                spellCheck: { results },
+              },
+            }
+          ) {
             self.corrections = results;
           },
-        }).then(() => {
+        })
+        .then(() => {
           this.spellcheckLoading = false;
         });
-      },
     },
+  },
 
-    apollo: {
-      assignment: {
-        query: ASSIGNMENT_QUERY,
-        variables() {
-          return {
-            id: this.value.id,
-          };
-        },
-        result(response) {
-          const data = response.data;
-          this.assignment = cloneDeep(data.assignment);
-          this.assignment.submission = Object.assign(this.initialSubmission(), this.assignment.submission);
-          if (this.assignment.id === this.scrollToAssignmentId && 'stale' in response) {
-            this.$nextTick(() => this.scrollToAssignmentReady(true));
-          }
-        },
+  apollo: {
+    assignment: {
+      query: ASSIGNMENT_QUERY,
+      variables() {
+        return {
+          id: this.value.id,
+        };
       },
-      me: {
-        query: ME_QUERY,
+      result(response) {
+        const data = response.data;
+        this.assignment = cloneDeep(data.assignment);
+        this.assignment.submission = Object.assign(this.initialSubmission(), this.assignment.submission);
+        if (this.assignment.id === this.scrollToAssignmentId && 'stale' in response) {
+          this.$nextTick(() => this.scrollToAssignmentReady(true));
+        }
       },
     },
-  };
+    me: {
+      query: ME_QUERY,
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '@/styles/_variables.scss';
-  @import '@/styles/_functions.scss';
-  @import '@/styles/_mixins.scss';
+@import '@/styles/_variables.scss';
+@import '@/styles/_functions.scss';
+@import '@/styles/_mixins.scss';
 
-  .assignment {
-    margin-bottom: 3rem;
-    position: relative;
-
-    &__title {
-      font-size: toRem(17px);
-      margin-bottom: 1rem;
-    }
-
-    &__main-text {
-      :deep(ul){
-        @include list-parent
-      }
-
-      :deep(li) {
-        @include list-child;
-      }
-    }
-
-    &__toggle-input-container {
-      display: flex;
-      margin-bottom: 15px;
-    }
-
-    &__toggle-input {
-      border: 0;
-      font-family: $sans-serif-font-family;
-      background: transparent;
-      font-size: toRem(14px);
-      padding: 5px 0;
-      margin-right: 15px;
-      outline: 0;
-      color: $color-silver-dark;
-      cursor: pointer;
-      border-bottom: 2px solid transparent;
-
-      &--active {
-        border-bottom-color: $color-charcoal-dark;
-        color: $color-charcoal-dark;
-      }
-    }
-
-    &__feedback {
-      @include regular-text;
-    }
+.assignment {
+  margin-bottom: 3rem;
+  position: relative;
 
+  &__title {
+    font-size: toRem(17px);
+    margin-bottom: 1rem;
   }
 
+  &__main-text {
+    :deep(ul) {
+      @include list-parent;
+    }
+
+    :deep(li) {
+      @include list-child;
+    }
+  }
+
+  &__toggle-input-container {
+    display: flex;
+    margin-bottom: 15px;
+  }
+
+  &__toggle-input {
+    border: 0;
+    font-family: $sans-serif-font-family;
+    background: transparent;
+    font-size: toRem(14px);
+    padding: 5px 0;
+    margin-right: 15px;
+    outline: 0;
+    color: $color-silver-dark;
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+
+    &--active {
+      border-bottom-color: $color-charcoal-dark;
+      color: $color-charcoal-dark;
+    }
+  }
+
+  &__feedback {
+    @include regular-text;
+  }
+}
 </style>
diff --git a/client/src/components/content-blocks/assignment/FinalSubmission.vue b/client/src/components/content-blocks/assignment/FinalSubmission.vue
index d52f163c..dbb8c56b 100644
--- a/client/src/components/content-blocks/assignment/FinalSubmission.vue
+++ b/client/src/components/content-blocks/assignment/FinalSubmission.vue
@@ -1,108 +1,99 @@
 <template>
-  <div
-    class="final-submission"
-    data-cy="final-submission"
-  >
-    <document-block
-      :value="{url: userInput.document}"
-      class="final-submission__document"
-      v-if="userInput.document"
-    />
+  <div class="final-submission" data-cy="final-submission">
+    <document-block :value="{ url: userInput.document }" class="final-submission__document" v-if="userInput.document" />
     <div class="final-submission__explanation">
       <info-icon class="final-submission__explanation-icon" />
       <span class="final-submission__explanation-text">{{ sharedMsg }}</span>
-      <a
-        class="final-submission__reopen"
-        data-cy="final-submission-reopen"
-        v-if="showReopen"
-        @click="$emit('reopen')"
-      >Bearbeiten</a>
+      <a class="final-submission__reopen" data-cy="final-submission-reopen" v-if="showReopen" @click="$emit('reopen')"
+        >Bearbeiten</a
+      >
     </div>
   </div>
 </template>
 
 <script>
-  import {newLineToParagraph} from '@/helpers/text';
-  const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');
+import { newLineToParagraph } from '@/helpers/text';
+const DocumentBlock = () =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock');
 
-  const InfoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon');
+const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
 
-  export default {
-    props: {
-      userInput: {
-        type: Object,
-        default: () => ({})
-      },
-      showReopen: {
-        type: Boolean,
-        default: true
-      },
-      sharedMsg: {
-        type: String,
-        default: ''
-      }
+export default {
+  props: {
+    userInput: {
+      type: Object,
+      default: () => ({}),
     },
-
-    components: {
-      InfoIcon,
-      DocumentBlock,
+    showReopen: {
+      type: Boolean,
+      default: true,
     },
+    sharedMsg: {
+      type: String,
+      default: '',
+    },
+  },
 
-    computed: {
-      text() {
-        return newLineToParagraph(this.userInput.text);
-      }
-    }
-  };
+  components: {
+    InfoIcon,
+    DocumentBlock,
+  },
+
+  computed: {
+    text() {
+      return newLineToParagraph(this.userInput.text);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .final-submission {
-    &__text {
-      background-color: $color-white;
-      @include input-box-shadow;
-      border-radius: $input-border-radius;
-      padding: 15px;
-      font-size: toRem(17px);
-      font-family: $sans-serif-font-family;
-      margin-bottom: 20px;
-      font-weight: $font-weight-regular;
+.final-submission {
+  &__text {
+    background-color: $color-white;
+    @include input-box-shadow;
+    border-radius: $input-border-radius;
+    padding: 15px;
+    font-size: toRem(17px);
+    font-family: $sans-serif-font-family;
+    margin-bottom: 20px;
+    font-weight: $font-weight-regular;
 
-      overflow-wrap: break-word;
-      word-wrap: break-word;
-      hyphens: auto;
-      word-break: break-word;
-    }
-
-    &__document {
-      margin-bottom: $small-spacing;
-    }
-
-    &__explanation {
-      display: flex;
-      align-items: center;
-    }
-
-    &__explanation-icon {
-      width: 40px;
-      height: 40px;
-      fill: $color-brand;
-      margin-right: 8px;
-    }
-
-    &__explanation-text {
-      color: $color-brand;
-      font-family: $sans-serif-font-family;
-      font-weight: $font-weight-regular;
-      margin-right: $medium-spacing;
-    }
-
-    &__reopen {
-      @include small-text;
-      cursor: pointer;
-      color: $color-charcoal-light;
-    }
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    hyphens: auto;
+    word-break: break-word;
   }
+
+  &__document {
+    margin-bottom: $small-spacing;
+  }
+
+  &__explanation {
+    display: flex;
+    align-items: center;
+  }
+
+  &__explanation-icon {
+    width: 40px;
+    height: 40px;
+    fill: $color-brand;
+    margin-right: 8px;
+  }
+
+  &__explanation-text {
+    color: $color-brand;
+    font-family: $sans-serif-font-family;
+    font-weight: $font-weight-regular;
+    margin-right: $medium-spacing;
+  }
+
+  &__reopen {
+    @include small-text;
+    cursor: pointer;
+    color: $color-charcoal-light;
+  }
+}
 </style>
diff --git a/client/src/components/content-blocks/assignment/SpellCheck.vue b/client/src/components/content-blocks/assignment/SpellCheck.vue
index c7f3e546..6612f9c6 100644
--- a/client/src/components/content-blocks/assignment/SpellCheck.vue
+++ b/client/src/components/content-blocks/assignment/SpellCheck.vue
@@ -1,63 +1,63 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
-  <p
-    class="spellcheck"
-    v-if="corrections"
-  >
+  <p class="spellcheck" v-if="corrections">
     <span class="inline-title">Rechtschreibung:</span> <span v-html="highlightedText" />
   </p>
 </template>
 
 <script>
-  export default {
-    props: ['corrections', 'text'],
+export default {
+  props: ['corrections', 'text'],
 
-    computed: {
-      highlightedText() {
-        if (!this.corrections) {
-          return '';
-        }
-        let parts = [];
-        let index = 0;
-        [...this.corrections] // no side effects, as sort changes the source array
-          .sort((e1, e2) => (e1.offset + e1.sentenceOffset) - (e2.offset + e2.sentenceOffset))
-          .forEach(current => {
-            let realOffset = current.offset + current.sentenceOffset;
-            parts.push({
-              correct: true,
-              text: this.text.substring(index, realOffset)
-            }, {
-              correct: false,
-              text: this.text.substring(realOffset, realOffset + current.length)
-            });
-            index = realOffset + current.length;
-          });
-        parts.push({
-          correct: true,
-          text: this.text.substring(index, this.text.length + 1)
-        });
-        return parts
-          .filter(part => part.text.length)
-          .reduce((previous, part) => {
-            if (part.correct) {
-              return `${previous}${part.text}`;
-            } else {
-              return `${previous}<span data-cy="spellcheck-correction" class="spellcheck__correction">${part.text}</span>`;
-            }
-          }, '');
+  computed: {
+    highlightedText() {
+      if (!this.corrections) {
+        return '';
       }
-    }
-  };
+      let parts = [];
+      let index = 0;
+      [...this.corrections] // no side effects, as sort changes the source array
+        .sort((e1, e2) => e1.offset + e1.sentenceOffset - (e2.offset + e2.sentenceOffset))
+        .forEach((current) => {
+          let realOffset = current.offset + current.sentenceOffset;
+          parts.push(
+            {
+              correct: true,
+              text: this.text.substring(index, realOffset),
+            },
+            {
+              correct: false,
+              text: this.text.substring(realOffset, realOffset + current.length),
+            }
+          );
+          index = realOffset + current.length;
+        });
+      parts.push({
+        correct: true,
+        text: this.text.substring(index, this.text.length + 1),
+      });
+      return parts
+        .filter((part) => part.text.length)
+        .reduce((previous, part) => {
+          if (part.correct) {
+            return `${previous}${part.text}`;
+          } else {
+            return `${previous}<span data-cy="spellcheck-correction" class="spellcheck__correction">${part.text}</span>`;
+          }
+        }, '');
+    },
+  },
+};
 </script>
 
 <style lang="scss">
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_mixins.scss';
 
-  .spellcheck {
-    @include regular-text;
+.spellcheck {
+  @include regular-text;
 
-    &__correction {
-      background: yellow;
-    }
+  &__correction {
+    background: yellow;
   }
+}
 </style>
diff --git a/client/src/components/content-blocks/assignment/SubmissionForm.vue b/client/src/components/content-blocks/assignment/SubmissionForm.vue
index 5e9a95a6..621296df 100644
--- a/client/src/components/content-blocks/assignment/SubmissionForm.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionForm.vue
@@ -10,10 +10,7 @@
       />
     </div>
 
-    <div
-      class="submission-form-container__actions"
-      v-if="!isFinalOrReadOnly"
-    >
+    <div class="submission-form-container__actions" v-if="!isFinalOrReadOnly">
       <button
         class="submission-form-container__submit button button--primary button--white-bg"
         data-cy="submission-form-submit"
@@ -29,11 +26,7 @@
       >
         {{ spellcheckText }}
       </button>
-      <file-upload
-        :document="userInput.document"
-        v-if="allowsDocuments"
-        @change-document-url="changeDocumentUrl"
-      />
+      <file-upload :document="userInput.document" v-if="allowsDocuments" @change-document-url="changeDocumentUrl" />
       <slot />
     </div>
 
@@ -48,115 +41,112 @@
 </template>
 
 <script>
-  const SubmissionInput = () => import('@/components/content-blocks/assignment/SubmissionInput.vue');
-  const FinalSubmission = () => import('@/components/content-blocks/assignment/FinalSubmission.vue');
-  const FileUpload = () => import('@/components/ui/file-upload/FileUpload.vue');
+const SubmissionInput = () => import('@/components/content-blocks/assignment/SubmissionInput.vue');
+const FinalSubmission = () => import('@/components/content-blocks/assignment/FinalSubmission.vue');
+const FileUpload = () => import('@/components/ui/file-upload/FileUpload.vue');
 
-
-  export default {
-    props: {
-      userInput: Object,
-      saved: Boolean,
-      placeholder: String,
-      action: String,
-      reopen: Function,
-      document: String,
-      readOnly: {
-        type: Boolean,
-        default: false,
-      },
-      spellcheck: {
-        type: Boolean,
-        default: false,
-      },
-      spellcheckLoading: {
-        type: Boolean,
-        default: false,
-      },
-      sharedMsg: String,
+export default {
+  props: {
+    userInput: Object,
+    saved: Boolean,
+    placeholder: String,
+    action: String,
+    reopen: Function,
+    document: String,
+    readOnly: {
+      type: Boolean,
+      default: false,
     },
-
-    components: {
-      FileUpload,
-      SubmissionInput,
-      FinalSubmission,
+    spellcheck: {
+      type: Boolean,
+      default: false,
     },
-
-    computed: {
-      final() {
-        return !!this.userInput && this.userInput.final;
-      },
-      isFinalOrReadOnly() {
-        return this.final || this.readOnly;
-      },
-      allowsDocuments() {
-        return 'document' in this.userInput;
-      },
-      showSpellcheckButton() {
-        return this.spellcheck && process.env.VUE_APP_ENABLE_SPELLCHECK;
-      },
-      spellcheckText() {
-        if (!this.spellcheckLoading) {
-          return 'Rechtschreibung prüfen';
-        } else {
-          return 'Wird geprüft...';
-        }
-      },
+    spellcheckLoading: {
+      type: Boolean,
+      default: false,
     },
+    sharedMsg: String,
+  },
 
-    methods: {
-      reopenSubmission() {
-        this.$emit('reopen');
-      },
-      saveInput(input) {
-        this.$emit('saveInput', input);
-      },
-      changeDocumentUrl(documentUrl) {
-        this.$emit('changeDocumentUrl', documentUrl);
-      },
+  components: {
+    FileUpload,
+    SubmissionInput,
+    FinalSubmission,
+  },
+
+  computed: {
+    final() {
+      return !!this.userInput && this.userInput.final;
     },
+    isFinalOrReadOnly() {
+      return this.final || this.readOnly;
+    },
+    allowsDocuments() {
+      return 'document' in this.userInput;
+    },
+    showSpellcheckButton() {
+      return this.spellcheck && process.env.VUE_APP_ENABLE_SPELLCHECK;
+    },
+    spellcheckText() {
+      if (!this.spellcheckLoading) {
+        return 'Rechtschreibung prüfen';
+      } else {
+        return 'Wird geprüft...';
+      }
+    },
+  },
 
-  };
+  methods: {
+    reopenSubmission() {
+      this.$emit('reopen');
+    },
+    saveInput(input) {
+      this.$emit('saveInput', input);
+    },
+    changeDocumentUrl(documentUrl) {
+      this.$emit('changeDocumentUrl', documentUrl);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .submission-form-container {
-    @include form-with-border;
+.submission-form-container {
+  @include form-with-border;
 
-    margin-bottom: $medium-spacing;
+  margin-bottom: $medium-spacing;
 
-    display: none;
-    @include desktop {
-      display: block;
-    }
+  display: none;
+  @include desktop {
+    display: block;
+  }
 
-    &__inputs {
-      margin-bottom: 12px;
-    }
+  &__inputs {
+    margin-bottom: 12px;
+  }
 
-    &__submit {
-      margin-right: $medium-spacing;
-    }
+  &__submit {
+    margin-right: $medium-spacing;
+  }
 
-    &__actions {
-      display: flex;
-      align-items: center;
-    }
+  &__actions {
+    display: flex;
+    align-items: center;
+  }
 
-    &__document {
-      &:hover {
-        cursor: pointer;
-      }
-    }
-
-    &__spellcheck {
-      /* so the button does not change size when changing the text */
-      width: 235px;
-      text-align: center;
-      display: inline-block;
+  &__document {
+    &:hover {
+      cursor: pointer;
     }
   }
 
+  &__spellcheck {
+    /* so the button does not change size when changing the text */
+    width: 235px;
+    text-align: center;
+    display: inline-block;
+  }
+}
 </style>
diff --git a/client/src/components/content-blocks/assignment/SubmissionInput.vue b/client/src/components/content-blocks/assignment/SubmissionInput.vue
index 52b9988f..3176fa49 100644
--- a/client/src/components/content-blocks/assignment/SubmissionInput.vue
+++ b/client/src/components/content-blocks/assignment/SubmissionInput.vue
@@ -4,74 +4,68 @@
       :placeholder="placeholder"
       :readonly="readonly"
       :value="inputText"
-      :class="{'submission-form__textarea--readonly': readonly}"
+      :class="{ 'submission-form__textarea--readonly': readonly }"
       data-cy="submission-textarea"
       rows="1"
       class="submission-form__textarea"
       v-auto-grow
       @input="$emit('input', $event.target.value)"
     />
-    <div
-      class="submission-form__save-status submission-form__save-status--saved"
-      v-if="saved"
-    >
+    <div class="submission-form__save-status submission-form__save-status--saved" v-if="saved">
       <tick-circle-icon class="submission-form__save-status-icon" />
     </div>
-    <div
-      class="submission-form__save-status submission-form__save-status--unsaved"
-      v-if="!saved"
-    >
+    <div class="submission-form__save-status submission-form__save-status--unsaved" v-if="!saved">
       <loading-icon class="submission-form__save-status-icon submission-form__saving-icon" />
     </div>
   </div>
 </template>
 
 <script>
-  const TickCircleIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TickCircleIcon');
-  const LoadingIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/LoadingIcon');
+const TickCircleIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TickCircleIcon');
+const LoadingIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/LoadingIcon');
 
-  export default {
-    props: {
-      inputText: String,
-      saved: Boolean,
-      readonly: Boolean,
-      placeholder: {
-        type: String,
-        default: 'Ergebnis erfassen'
-      }
+export default {
+  props: {
+    inputText: String,
+    saved: Boolean,
+    readonly: Boolean,
+    placeholder: {
+      type: String,
+      default: 'Ergebnis erfassen',
     },
-    components: {
-      TickCircleIcon,
-      LoadingIcon
-    }
-  };
+  },
+  components: {
+    TickCircleIcon,
+    LoadingIcon,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .submission-form {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+.submission-form {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 
-    &__textarea {
-      @include borderless-textarea;
-    }
-
-    &__save-status {
-      position: relative;
-      align-items: center;
-    }
-
-    &__save-status-icon {
-      width: 22px;
-      height: 22px;
-      fill: $color-silver-dark;
-    }
-
-    &__saving-icon {
-      @include spin;
-    }
+  &__textarea {
+    @include borderless-textarea;
   }
+
+  &__save-status {
+    position: relative;
+    align-items: center;
+  }
+
+  &__save-status-icon {
+    width: 22px;
+    height: 22px;
+    fill: $color-silver-dark;
+  }
+
+  &__saving-icon {
+    @include spin;
+  }
+}
 </style>
diff --git a/client/src/components/content-forms/AssignmentForm.vue b/client/src/components/content-forms/AssignmentForm.vue
index f45b0b8c..cac3003c 100644
--- a/client/src/components/content-forms/AssignmentForm.vue
+++ b/client/src/components/content-forms/AssignmentForm.vue
@@ -5,7 +5,7 @@
       class="assignment-form__title skillbox-input"
       placeholder="Aufgabentitel"
       @input="$emit('assignment-change-title', $event.target.value, index)"
-    >
+    />
     <textarea
       :value="value.assignment"
       class="assignment-form__exercise-text skillbox-textarea"
@@ -20,43 +20,43 @@
 </template>
 
 <script>
-  const InfoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon');
+const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
 
-  export default {
-    props: ['value', 'index'],
+export default {
+  props: ['value', 'index'],
 
-    components: {
-      InfoIcon
-    }
-  };
+  components: {
+    InfoIcon,
+  },
+};
 </script>
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .assignment-form {
-    display: grid;
-    grid-auto-rows: auto;
-    grid-row-gap: 13px;
-    grid-template-columns: 40px 1fr;
-    grid-column-gap: 16px;
-    align-items: center;
+.assignment-form {
+  display: grid;
+  grid-auto-rows: auto;
+  grid-row-gap: 13px;
+  grid-template-columns: 40px 1fr;
+  grid-column-gap: 16px;
+  align-items: center;
 
-    &__title {
-      width: $modal-input-width;
-      grid-column: span 2;
-    }
-
-    &__exercise-text {
-      width: $modal-input-width;
-      grid-column: span 2;
-    }
-
-    &__help-icon {
-      width: 40px;
-      height: 40px;
-    }
-
-    &__help-description {
-    }
+  &__title {
+    width: $modal-input-width;
+    grid-column: span 2;
   }
+
+  &__exercise-text {
+    width: $modal-input-width;
+    grid-column: span 2;
+  }
+
+  &__help-icon {
+    width: 40px;
+    height: 40px;
+  }
+
+  &__help-description {
+  }
+}
 </style>
diff --git a/client/src/components/content-forms/ChooserElement.vue b/client/src/components/content-forms/ChooserElement.vue
index 5a8672d9..e4c53858 100644
--- a/client/src/components/content-forms/ChooserElement.vue
+++ b/client/src/components/content-forms/ChooserElement.vue
@@ -1,13 +1,6 @@
 <template>
-  <div
-    :class="['chooser-element', subclass]"
-    :data-cy="cy"
-    @click="$emit('select')"
-  >
-    <component
-      class="chooser-element__icon"
-      :is="icon"
-    />
+  <div :class="['chooser-element', subclass]" :data-cy="cy" @click="$emit('select')">
+    <component class="chooser-element__icon" :is="icon" />
     <div class="chooser-element__title">
       {{ title }}
     </div>
@@ -15,62 +8,61 @@
 </template>
 
 <script>
-  import formElementIcons from '@/components/ui/form-element-icons';
+import formElementIcons from '@/components/ui/form-element-icons';
 
-  export default {
-    props: {
-      type: {
-        type: String,
-        default: '',
-      },
-      icon: {
-        type: String,
-        default() {
-          return `${this.type}-icon`;
-        },
-      },
-      title: {
-        type: String,
-        default() {
-          return this.type.replace(/^\w/, c => c.toUpperCase());
-        },
+export default {
+  props: {
+    type: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default() {
+        return `${this.type}-icon`;
       },
     },
-
-    components: {
-      ...formElementIcons,
+    title: {
+      type: String,
+      default() {
+        return this.type.replace(/^\w/, (c) => c.toUpperCase());
+      },
     },
+  },
 
-    data() {
-      return {
-        subclass: `chooser-element--${this.type}`,
-        cy: `choose-${this.type}-widget`,
-      };
-    },
-  };
+  components: {
+    ...formElementIcons,
+  },
+
+  data() {
+    return {
+      subclass: `chooser-element--${this.type}`,
+      cy: `choose-${this.type}-widget`,
+    };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .chooser-element {
-    cursor: pointer;
-    border: 1px solid $color-silver;
-    border-radius: 4px;
-    height: 105px;
-    width: 105px;
-    box-sizing: border-box;
-    display: grid;
-    grid-template-rows: 1fr 45px;
-    justify-content: center;
-    justify-items: center;
-    align-items: center;
+.chooser-element {
+  cursor: pointer;
+  border: 1px solid $color-silver;
+  border-radius: 4px;
+  height: 105px;
+  width: 105px;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-rows: 1fr 45px;
+  justify-content: center;
+  justify-items: center;
+  align-items: center;
 
-    &__icon {
-      width: 40px;
-      height: 40px;
-      align-self: end;
-    }
+  &__icon {
+    width: 40px;
+    height: 40px;
+    align-self: end;
   }
-
+}
 </style>
diff --git a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
index e8bfdccd..5691bf60 100644
--- a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
+++ b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
@@ -1,31 +1,21 @@
 <template>
   <div class="content-block-element-chooser-widget__wrapper">
-    <button
-      class="content-block-element-chooser-widget__remove-button icon-button"
-      @click="remove"
-    >
+    <button class="content-block-element-chooser-widget__remove-button icon-button" @click="remove">
       <cross-icon class="icon-button__icon" />
     </button>
-    <h3
-      class="content-block-element-chooser-widget__heading"
-      data-cy="chooser-heading"
-    >
-      Neuer Inhalt
-    </h3>
-    <template
-      v-if="includeListOption && hasDefaultFeatures"
-    >
+    <h3 class="content-block-element-chooser-widget__heading" data-cy="chooser-heading">Neuer Inhalt</h3>
+    <template v-if="includeListOption && hasDefaultFeatures">
       <checkbox
         class="content-block-element-chooser-widget__list-toggle"
         :checked="convertToList"
         data-cy="convert-to-list-checkbox"
         label="Aufzählungszeichen hinzufügen"
-        @input="convertToList=$event"
+        @input="convertToList = $event"
       />
     </template>
 
     <div
-      :class="{'content-block-element-chooser-widget--no-assignment': hideAssignment}"
+      :class="{ 'content-block-element-chooser-widget--no-assignment': hideAssignment }"
       class="content-block-element-chooser-widget"
     >
       <chooser-element
@@ -41,182 +31,177 @@
 </template>
 
 <script>
-  import Checkbox from '@/components/ui/Checkbox';
+import Checkbox from '@/components/ui/Checkbox';
 
-  import formElementIcons from '@/components/ui/form-element-icons';
-  import CrossIcon from '@/components/icons/CrossIcon';
-  import ChooserElement from '@/components/content-forms/ChooserElement';
-  import {DEFAULT_FEATURE_SET} from '@/consts/features.consts';
+import formElementIcons from '@/components/ui/form-element-icons';
+import CrossIcon from '@/components/icons/CrossIcon';
+import ChooserElement from '@/components/content-forms/ChooserElement';
+import { DEFAULT_FEATURE_SET } from '@/consts/features.consts';
 
-
-  export default {
-    props: {
-      element: {},
-      index: {},
-      hideAssignment: {
-        type: Boolean,
-        default: false,
-      },
-      includeListOption: {
-        type: Boolean,
-        default: false,
-      },
+export default {
+  props: {
+    element: {},
+    index: {},
+    hideAssignment: {
+      type: Boolean,
+      default: false,
     },
-
-    inject: ['features'],
-
-    components: {
-      ChooserElement,
-      CrossIcon,
-      Checkbox,
-      ...formElementIcons,
+    includeListOption: {
+      type: Boolean,
+      default: false,
     },
+  },
 
-    data() {
-      const hasDefaultFeatures = this.features === DEFAULT_FEATURE_SET;
-      return {
-        convertToList: false,
-        chooserTypes: [
-          {
-            type: 'subtitle',
-            block: 'subtitle',
-            title: 'Untertitel',
-            icon: 'title-icon',
-          },
-          {
-            type: 'link',
-            block: 'link_block',
-            title: 'Link',
-            icon: 'link-icon',
-          },
-          {
-            type: 'video',
-            block: 'video_block',
-          },
-          {
-            type: 'image',
-            block: 'image_url_block',
-            title: 'Bild',
-          },
-          {
-            type: 'text',
-            block: 'text_block',
-          },
-          {
-            type: 'assignment',
-            block: 'assignment',
-            icon: 'speech-bubble-icon',
-            title: 'Aufgabe & Ergebnis',
-            show: !this.hideAssignment && hasDefaultFeatures
-          },
-          {
-            type: 'document',
-            block: 'document_block',
-            title: 'Dokument',
-            show: hasDefaultFeatures
-          },
+  inject: ['features'],
 
+  components: {
+    ChooserElement,
+    CrossIcon,
+    Checkbox,
+    ...formElementIcons,
+  },
 
-        ],
-      };
+  data() {
+    const hasDefaultFeatures = this.features === DEFAULT_FEATURE_SET;
+    return {
+      convertToList: false,
+      chooserTypes: [
+        {
+          type: 'subtitle',
+          block: 'subtitle',
+          title: 'Untertitel',
+          icon: 'title-icon',
+        },
+        {
+          type: 'link',
+          block: 'link_block',
+          title: 'Link',
+          icon: 'link-icon',
+        },
+        {
+          type: 'video',
+          block: 'video_block',
+        },
+        {
+          type: 'image',
+          block: 'image_url_block',
+          title: 'Bild',
+        },
+        {
+          type: 'text',
+          block: 'text_block',
+        },
+        {
+          type: 'assignment',
+          block: 'assignment',
+          icon: 'speech-bubble-icon',
+          title: 'Aufgabe & Ergebnis',
+          show: !this.hideAssignment && hasDefaultFeatures,
+        },
+        {
+          type: 'document',
+          block: 'document_block',
+          title: 'Dokument',
+          show: hasDefaultFeatures,
+        },
+      ],
+    };
+  },
+
+  computed: {
+    filteredChooserTypes() {
+      return this.chooserTypes.filter((type) => !('show' in type) || type.show); // display element if `show` is not set or if `show` evaluates to true
     },
-
-    computed: {
-      filteredChooserTypes() {
-        return this.chooserTypes.filter(type => !("show" in type) || type.show ); // display element if `show` is not set or if `show` evaluates to true
-      },
-      hasDefaultFeatures() {
-        return this.features === DEFAULT_FEATURE_SET;
-      }
+    hasDefaultFeatures() {
+      return this.features === DEFAULT_FEATURE_SET;
     },
+  },
 
-    methods: {
-      changeType(type) {
-        this.$emit('change-type', {
-          type,
-          convertToList: this.convertToList,
-        });
-      },
-      remove() {
-        this.$emit('remove');
-      },
+  methods: {
+    changeType(type) {
+      this.$emit('change-type', {
+        type,
+        convertToList: this.convertToList,
+      });
     },
-  };
+    remove() {
+      this.$emit('remove');
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
-
-  .content-block-element-chooser-widget {
-    display: -ms-grid;
-
-    @supports (display: grid) {
-      display: grid;
-    }
-    grid-template-columns: repeat(7, 1fr);
-    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-    grid-column-gap: 0;
-    font-family: $sans-serif-font-family;
-    text-align: center;
-    position: relative;
-
-    // grid position in wrapper element
-    grid-column: 1 / -1;
-
-    /*IE10+*/
-    & > :nth-child(1) {
-      -ms-grid-column: 1;
-    }
-
-    & > :nth-child(2) {
-      -ms-grid-column: 2;
-    }
-
-    & > :nth-child(3) {
-      -ms-grid-column: 3;
-    }
-
-    & > :nth-child(4) {
-      -ms-grid-column: 4;
-    }
-
-    & > :nth-child(5) {
-      -ms-grid-column: 5;
-    }
-
-    & > :nth-child(6) {
-      -ms-grid-column: 6;
-    }
-
-    &--no-assignment {
-      grid-template-columns: repeat(5, 1fr);
-      -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
-    }
-
-    &__wrapper {
-      display: grid;
-      grid-template-columns: 180px 1fr 50px;
-      align-items: center;
-      row-gap: $small-spacing;
-    }
-
-    &__remove-button {
-      grid-column: 3;
-    }
-
-    &__heading {
-      @include heading-3;
-      margin-bottom: 0;
-      grid-column: 1;
-      grid-row: 1;
-    }
-
-    &__list-toggle {
-      margin-bottom: 0;
-      grid-column: 2;
-      grid-row: 1;
-    }
+@import '~styles/helpers';
 
+.content-block-element-chooser-widget {
+  display: -ms-grid;
 
+  @supports (display: grid) {
+    display: grid;
   }
+  grid-template-columns: repeat(7, 1fr);
+  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+  grid-column-gap: 0;
+  font-family: $sans-serif-font-family;
+  text-align: center;
+  position: relative;
+
+  // grid position in wrapper element
+  grid-column: 1 / -1;
+
+  /*IE10+*/
+  & > :nth-child(1) {
+    -ms-grid-column: 1;
+  }
+
+  & > :nth-child(2) {
+    -ms-grid-column: 2;
+  }
+
+  & > :nth-child(3) {
+    -ms-grid-column: 3;
+  }
+
+  & > :nth-child(4) {
+    -ms-grid-column: 4;
+  }
+
+  & > :nth-child(5) {
+    -ms-grid-column: 5;
+  }
+
+  & > :nth-child(6) {
+    -ms-grid-column: 6;
+  }
+
+  &--no-assignment {
+    grid-template-columns: repeat(5, 1fr);
+    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
+  }
+
+  &__wrapper {
+    display: grid;
+    grid-template-columns: 180px 1fr 50px;
+    align-items: center;
+    row-gap: $small-spacing;
+  }
+
+  &__remove-button {
+    grid-column: 3;
+  }
+
+  &__heading {
+    @include heading-3;
+    margin-bottom: 0;
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  &__list-toggle {
+    margin-bottom: 0;
+    grid-column: 2;
+    grid-row: 1;
+  }
+}
 </style>
diff --git a/client/src/components/content-forms/DocumentForm.vue b/client/src/components/content-forms/DocumentForm.vue
index b5258bc6..4272a335 100644
--- a/client/src/components/content-forms/DocumentForm.vue
+++ b/client/src/components/content-forms/DocumentForm.vue
@@ -1,132 +1,119 @@
 <template>
-  <div
-    class="document-form"
-    ref="documentform"
-  >
-    <div
-      v-if="!value.url"
-      ref="uploadcare-panel"
-    />
-    <div
-      class="document-form__spinner"
-      v-if="loading"
-    >
+  <div class="document-form" ref="documentform">
+    <div v-if="!value.url" ref="uploadcare-panel" />
+    <div class="document-form__spinner" v-if="loading">
       <loading-icon class="document-form__loading-icon" />
     </div>
-    <div
-      class="document-form__uploaded"
-      v-if="value.url"
-    >
+    <div class="document-form__uploaded" v-if="value.url">
       <document-icon class="document-form__icon" />
-      <a
-        :href="previewUrl"
-        class="document-form__link"
-        target="_blank"
-      >{{ previewLink }}</a>
+      <a :href="previewUrl" class="document-form__link" target="_blank">{{ previewLink }}</a>
     </div>
   </div>
 </template>
 
 <script>
-  import {uploadcare} from '@/helpers/uploadcare';
-  import LoadingIcon from '@/components/icons/LoadingIcon';
+import { uploadcare } from '@/helpers/uploadcare';
+import LoadingIcon from '@/components/icons/LoadingIcon';
 
-  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
+const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
 
-  export default {
-    props: ['value', 'index'],
+export default {
+  props: ['value', 'index'],
 
-    components: {
-      LoadingIcon,
-      DocumentIcon,
+  components: {
+    LoadingIcon,
+    DocumentIcon,
+  },
+
+  data() {
+    return {
+      loading: false,
+    };
+  },
+
+  computed: {
+    previewUrl() {
+      if (this.value && this.value.url) {
+        return this.value.url;
+      }
+      return null;
     },
-
-    data() {
-      return {
-        loading: false,
-      };
+    previewLink() {
+      if (this.value && this.value.url) {
+        const parts = this.value.url.split('/');
+        return parts[parts.length - 1];
+      }
+      return '';
     },
+  },
 
-    computed: {
-      previewUrl() {
-        if (this.value && this.value.url) {
-          return this.value.url;
-        }
-        return null;
-      },
-      previewLink() {
-        if (this.value && this.value.url) {
-          const parts = this.value.url.split('/');
-          return parts[parts.length - 1];
-        }
-        return '';
-      },
-    },
-
-    mounted() {
-      uploadcare(this, url => {
+  mounted() {
+    uploadcare(
+      this,
+      (url) => {
         this.$emit('change-url', url, this.index);
         this.loading = false;
-      }, () => {
+      },
+      () => {
         this.loading = true;
-
-      });
-    },
-  };
+      }
+    );
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .document-form {
-    &__uploaded {
-      display: flex;
-      align-items: center;
-    }
+.document-form {
+  &__uploaded {
+    display: flex;
+    align-items: center;
+  }
 
-    &__link {
-      text-decoration: underline;
-    }
+  &__link {
+    text-decoration: underline;
+  }
 
-    &__spinner {
-      width: 100%;
+  &__spinner {
+    width: 100%;
+    height: 150px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__loading-icon {
+    @include spin;
+    fill: $color-silver-dark;
+  }
+
+  &__icon {
+    width: 30px;
+    height: 30px;
+    margin-right: $small-spacing;
+  }
+
+  &__file-input {
+    width: 0.1px;
+    height: 0.1px;
+    overflow: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -1;
+
+    & + label {
+      cursor: pointer;
+      background-color: $color-silver-light;
       height: 150px;
       display: flex;
-      align-items: center;
+      width: 100%;
       justify-content: center;
-    }
-
-    &__loading-icon {
-      @include spin;
-      fill: $color-silver-dark;
-    }
-
-    &__icon {
-      width: 30px;
-      height: 30px;
-      margin-right: $small-spacing;
-    }
-
-    &__file-input {
-      width: 0.1px;
-      height: 0.1px;
-      overflow: hidden;
-      opacity: 0;
-      position: absolute;
-      z-index: -1;
-
-      & + label {
-        cursor: pointer;
-        background-color: $color-silver-light;
-        height: 150px;
-        display: flex;
-        width: 100%;
-        justify-content: center;
-        align-items: center;
-        font-family: $sans-serif-font-family;
-        font-weight: $font-weight-regular;
-        text-decoration: underline;
-      }
+      align-items: center;
+      font-family: $sans-serif-font-family;
+      font-weight: $font-weight-regular;
+      text-decoration: underline;
     }
   }
+}
 </style>
diff --git a/client/src/components/content-forms/ImageForm.vue b/client/src/components/content-forms/ImageForm.vue
index 5ba54ea2..2687bec9 100644
--- a/client/src/components/content-forms/ImageForm.vue
+++ b/client/src/components/content-forms/ImageForm.vue
@@ -1,149 +1,134 @@
 <template>
   <div class="image-form">
-    <div
-      class="image-form__error"
-      v-if="hadError"
-    >
-      Ups, das scheint kein Bild zu sein. Bitte versuche es nochmal mit einer anderen Datei, oder lade die Datei als <a
-        class="image-form__link"
-        @click="switchToDocument"
-      >Dokument</a> hoch.
+    <div class="image-form__error" v-if="hadError">
+      Ups, das scheint kein Bild zu sein. Bitte versuche es nochmal mit einer anderen Datei, oder lade die Datei als
+      <a class="image-form__link" @click="switchToDocument">Dokument</a> hoch.
     </div>
 
-    <div
-      class="image-form__spinner"
-      v-if="loading"
-    >
+    <div class="image-form__spinner" v-if="loading">
       <loading-icon class="image-form__loading-icon" />
     </div>
 
-    <div
-      v-if="!value.url || hadError"
-      ref="uploadcare-panel"
-    />
+    <div v-if="!value.url || hadError" ref="uploadcare-panel" />
     <div v-if="value.url && !hadError">
-      <img
-        alt=""
-        :src="previewUrl"
-        @error="error"
-      >
+      <img alt="" :src="previewUrl" @error="error" />
     </div>
   </div>
 </template>
 
 <script>
-  import uploadcare from 'uploadcare-widget';
-  import LoadingIcon from '@/components/icons/LoadingIcon';
+import uploadcare from 'uploadcare-widget';
+import LoadingIcon from '@/components/icons/LoadingIcon';
 
-  export default {
-    props: ['value', 'index'],
-    components: {LoadingIcon},
-    data() {
-      return {
-        hadError: false,
-        uploadcarePanel: null,
-        url: '',
-        filename: '',
-        loading: false,
-      };
+export default {
+  props: ['value', 'index'],
+  components: { LoadingIcon },
+  data() {
+    return {
+      hadError: false,
+      uploadcarePanel: null,
+      url: '',
+      filename: '',
+      loading: false,
+    };
+  },
+  computed: {
+    previewUrl: function () {
+      if (this.value && this.value.url) {
+        return this.value.url + '-/preview/200x200/';
+      }
+      return null;
     },
-    computed: {
-      previewUrl: function () {
-        if (this.value && this.value.url) {
-          return this.value.url + '-/preview/200x200/';
-        }
-        return null;
-      },
-    },
-    mounted() {
-      this.mountUploadcare();
-    },
-    methods: {
-      error() {
-        this.hadError = true;
+  },
+  mounted() {
+    this.mountUploadcare();
+  },
+  methods: {
+    error() {
+      this.hadError = true;
 
-        setTimeout(() => {
-          this.mountUploadcare();
-        }, 0);
-      },
-      mountUploadcare() {
-        this.uploadcarePanel = uploadcare.openPanel(this.$refs['uploadcare-panel'], null, {
-          tabs: ['file'],
+      setTimeout(() => {
+        this.mountUploadcare();
+      }, 0);
+    },
+    mountUploadcare() {
+      this.uploadcarePanel = uploadcare.openPanel(this.$refs['uploadcare-panel'], null, {
+        tabs: ['file'],
+      });
+
+      this.uploadcarePanel.done((panelResult) => {
+        this.loading = true;
+        panelResult.done((fileInfo) => {
+          this.hadError = false;
+          this.loading = false;
+          this.url = fileInfo.cdnUrl;
+          this.filename = fileInfo.name;
+          this.$emit('change-url', fileInfo.cdnUrl, this.index);
         });
 
-        this.uploadcarePanel.done(panelResult => {
-          this.loading = true;
-          panelResult.done(fileInfo => {
-            this.hadError = false;
-            this.loading = false;
-            this.url = fileInfo.cdnUrl;
-            this.filename = fileInfo.name;
-            this.$emit('change-url', fileInfo.cdnUrl, this.index);
-          });
-
-          // the api also provides these methods
-          // panelResult.progress(p => {});
-          // panelResult.fail(uploadResult => {});
-        });
-      },
-      switchToDocument() {
-        this.$emit('switch-to-document', this.index, {
-          url: `${this.url}${this.filename}`,
-        });
-      },
+        // the api also provides these methods
+        // panelResult.progress(p => {});
+        // panelResult.fail(uploadResult => {});
+      });
     },
-  };
+    switchToDocument() {
+      this.$emit('switch-to-document', this.index, {
+        url: `${this.url}${this.filename}`,
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .image-form {
-    &__error {
-      @include regular-text;
-      margin-bottom: $medium-spacing;
-      line-height: 1.5;
-    }
+.image-form {
+  &__error {
+    @include regular-text;
+    margin-bottom: $medium-spacing;
+    line-height: 1.5;
+  }
 
-    &__spinner {
-      width: 100%;
+  &__spinner {
+    width: 100%;
+    height: 150px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__loading-icon {
+    @include spin;
+    fill: $color-silver-dark;
+  }
+
+  &__link {
+    text-decoration: underline;
+    @include regular-text;
+    cursor: pointer;
+  }
+
+  &__file-input {
+    width: 0.1px;
+    height: 0.1px;
+    overflow: hidden;
+    opacity: 0;
+    position: absolute;
+    z-index: -1;
+
+    & + label {
+      cursor: pointer;
+      background-color: $color-silver-light;
       height: 150px;
       display: flex;
-      align-items: center;
+      width: 100%;
       justify-content: center;
-    }
-
-    &__loading-icon {
-      @include spin;
-      fill: $color-silver-dark;
-    }
-
-    &__link {
+      align-items: center;
+      font-family: $sans-serif-font-family;
+      font-weight: $font-weight-regular;
       text-decoration: underline;
-      @include regular-text;
-      cursor: pointer;
-    }
-
-    &__file-input {
-      width: 0.1px;
-      height: 0.1px;
-      overflow: hidden;
-      opacity: 0;
-      position: absolute;
-      z-index: -1;
-
-      & + label {
-        cursor: pointer;
-        background-color: $color-silver-light;
-        height: 150px;
-        display: flex;
-        width: 100%;
-        justify-content: center;
-        align-items: center;
-        font-family: $sans-serif-font-family;
-        font-weight: $font-weight-regular;
-        text-decoration: underline;
-      }
     }
   }
+}
 </style>
diff --git a/client/src/components/content-forms/LinkForm.vue b/client/src/components/content-forms/LinkForm.vue
index 859a6db7..aba8543a 100644
--- a/client/src/components/content-forms/LinkForm.vue
+++ b/client/src/components/content-forms/LinkForm.vue
@@ -5,34 +5,34 @@
       placeholder="Name erfassen..."
       class="link-form__text skillbox-input"
       @input="$emit('change-text', $event.target.value, index)"
-    >
+    />
 
     <input
       :value="value.url"
       placeholder="URL einfügen..."
       class="link-form__url skillbox-input"
       @input="$emit('change-url', $event.target.value, index)"
-    >
+    />
   </div>
 </template>
 
 <script>
-  export default {
-    props: ['value', 'index']
-  };
+export default {
+  props: ['value', 'index'],
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .link-form {
-    display: grid;
-    grid-auto-rows: auto;
-    grid-row-gap: 11px;
+.link-form {
+  display: grid;
+  grid-auto-rows: auto;
+  grid-row-gap: 11px;
 
-    &__text,
-    &__url {
-      width: $modal-input-width;
-    }
+  &__text,
+  &__url {
+    width: $modal-input-width;
   }
+}
 </style>
diff --git a/client/src/components/content-forms/SubtitleForm.vue b/client/src/components/content-forms/SubtitleForm.vue
index e83a0373..cc67ccd9 100644
--- a/client/src/components/content-forms/SubtitleForm.vue
+++ b/client/src/components/content-forms/SubtitleForm.vue
@@ -12,38 +12,38 @@
 </template>
 
 <script>
-  import InputWithLabel from '@/components/ui/InputWithLabel';
+import InputWithLabel from '@/components/ui/InputWithLabel';
 
-  export default {
-    props: {
-      value: {
-        type: Object,
-        default: null,
-        validator(value) {
-          return Object.prototype.hasOwnProperty.call(value, 'text');
-        }
+export default {
+  props: {
+    value: {
+      type: Object,
+      default: null,
+      validator(value) {
+        return Object.prototype.hasOwnProperty.call(value, 'text');
       },
-      index: {
-        type: Number,
-        default: -1
-      }
     },
-    components: {InputWithLabel},
+    index: {
+      type: Number,
+      default: -1,
+    },
+  },
+  components: { InputWithLabel },
 
-    computed: {
-      text() {
-        return this.value.text;
-      }
-    }
-  };
+  computed: {
+    text() {
+      return this.value.text;
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .subtitle-form {
-    &__input {
-      width: 100%;
-    }
+.subtitle-form {
+  &__input {
+    width: 100%;
   }
+}
 </style>
diff --git a/client/src/components/content-forms/TextForm.vue b/client/src/components/content-forms/TextForm.vue
index e8ec7762..14a3c564 100644
--- a/client/src/components/content-forms/TextForm.vue
+++ b/client/src/components/content-forms/TextForm.vue
@@ -11,35 +11,35 @@
 </template>
 
 <script>
-  export default {
-    props: {
-      value: {
-        type: Object,
-        default: null,
-        validator(value) {
-          return Object.prototype.hasOwnProperty.call(value, 'text');
-        }
+export default {
+  props: {
+    value: {
+      type: Object,
+      default: null,
+      validator(value) {
+        return Object.prototype.hasOwnProperty.call(value, 'text');
       },
-      index: {
-        type: Number,
-        default: -1
-      }
+    },
+    index: {
+      type: Number,
+      default: -1,
+    },
   },
 
-    computed: {
-      text() {
-        return this.value.text ? this.value.text.replace(/<br(\/)?>/, '\n').replace(/(<([^>]+)>)/ig, '') : '';
-      }
-    }
-  };
+  computed: {
+    text() {
+      return this.value.text ? this.value.text.replace(/<br(\/)?>/, '\n').replace(/(<([^>]+)>)/gi, '') : '';
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .text-form {
-    &__input {
-      width: 100%;
-    }
+.text-form {
+  &__input {
+    width: 100%;
   }
+}
 </style>
diff --git a/client/src/components/content-forms/TextFormWithHelpText.vue b/client/src/components/content-forms/TextFormWithHelpText.vue
index e9adf466..7215ea5a 100644
--- a/client/src/components/content-forms/TextFormWithHelpText.vue
+++ b/client/src/components/content-forms/TextFormWithHelpText.vue
@@ -4,53 +4,50 @@
       <span class="text-form-with-help-text__title">{{ title }}</span>
       <helpful-tooltip :text="helpText" />
     </h3>
-    <text-form
-      :value="v"
-      @change-text="$emit('change', $event)"
-    />
+    <text-form :value="v" @change-text="$emit('change', $event)" />
   </div>
 </template>
 
 <script>
-  import TextForm from '@/components/content-forms/TextForm';
-  import HelpfulTooltip from '@/components/HelpfulTooltip';
+import TextForm from '@/components/content-forms/TextForm';
+import HelpfulTooltip from '@/components/HelpfulTooltip';
 
-  export default {
-    props: ['title', 'value', 'helpText'],
+export default {
+  props: ['title', 'value', 'helpText'],
 
-    components: {
-      TextForm,
-      HelpfulTooltip
+  components: {
+    TextForm,
+    HelpfulTooltip,
+  },
+
+  computed: {
+    v() {
+      return {
+        text: this.value,
+      };
     },
-
-    computed: {
-      v() {
-        return {
-          text: this.value
-        };
-      }
-    }
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_functions.scss';
 
-  .text-form-with-help-text {
-    margin-bottom: 30px;
+.text-form-with-help-text {
+  margin-bottom: 30px;
 
-    &__heading {
-      margin-bottom: 15px;
-      display: flex;
-      justify-items: center;
-      align-items: center;
-    }
-
-    &__title {
-      font-size: toRem(22px);
-      font-weight: 600;
-      margin-right: 8px;
-    }
+  &__heading {
+    margin-bottom: 15px;
+    display: flex;
+    justify-items: center;
+    align-items: center;
   }
+
+  &__title {
+    font-size: toRem(22px);
+    font-weight: 600;
+    margin-right: 8px;
+  }
+}
 </style>
diff --git a/client/src/components/content-forms/TipTap.vue b/client/src/components/content-forms/TipTap.vue
index 8fc00c91..8955edc5 100644
--- a/client/src/components/content-forms/TipTap.vue
+++ b/client/src/components/content-forms/TipTap.vue
@@ -1,146 +1,130 @@
 <template>
   <div class="tip-tap">
-    <editor-content
-      class="tip-tap__editor-wrapper"
-      :editor="editor"
-    />
+    <editor-content class="tip-tap__editor-wrapper" :editor="editor" />
 
-    <toggle
-      :bordered="false"
-      :checked="isList"
-      label="Als Liste formatieren"
-      @input="toggleList"
-    />
+    <toggle :bordered="false" :checked="isList" label="Als Liste formatieren" @input="toggleList" />
   </div>
 </template>
 
 <script lang="ts">
-  import Vue, {PropType} from 'vue';
-  import {Editor, EditorContent} from "@tiptap/vue-2";
-  import Document from '@tiptap/extension-document';
-  import Paragraph from '@tiptap/extension-paragraph';
-  import Text from '@tiptap/extension-text';
-  import BulletList from '@tiptap/extension-bullet-list';
-  import ListItem from '@tiptap/extension-list-item';
-  import Toggle from "@/components/ui/Toggle.vue";
+import Vue, { PropType } from 'vue';
+import { Editor, EditorContent } from '@tiptap/vue-2';
+import Document from '@tiptap/extension-document';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
+import BulletList from '@tiptap/extension-bullet-list';
+import ListItem from '@tiptap/extension-list-item';
+import Toggle from '@/components/ui/Toggle.vue';
 
-  interface Data {
-    editor: Editor | undefined;
-  }
-  interface Value {
-    text: string;
-  }
+interface Data {
+  editor: Editor | undefined;
+}
+interface Value {
+  text: string;
+}
 
-  export default Vue.extend({
-    props: {
-      value: {
-        type: Object as PropType<Value>,
-        validator(value: Value) {
-          return Object.prototype.hasOwnProperty.call(value, 'text');
+export default Vue.extend({
+  props: {
+    value: {
+      type: Object as PropType<Value>,
+      validator(value: Value) {
+        return Object.prototype.hasOwnProperty.call(value, 'text');
+      },
+    },
+  },
+
+  components: {
+    Toggle,
+    EditorContent,
+  },
+
+  data(): Data {
+    return {
+      editor: undefined,
+    };
+  },
+
+  computed: {
+    isList(): boolean {
+      return this.editor?.isActive('bulletList') || false;
+    },
+    text(): string {
+      return this.value.text;
+    },
+  },
+
+  watch: {
+    value({ text }: Value) {
+      const editor = this.editor as Editor; // editor is always initialized on mount, cast it
+      const isSame = editor.getHTML() === text;
+
+      if (isSame) {
+        return;
+      }
+
+      editor.commands.setContent(text, false);
+    },
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      editorProps: {
+        attributes: {
+          class: 'tip-tap__editor',
         },
       },
-    },
-
-    components: {
-      Toggle,
-      EditorContent
-    },
-
-    data(): Data {
-      return {
-        editor: undefined,
-      };
-    },
-
-    computed: {
-      isList(): boolean {
-        return this.editor?.isActive('bulletList') || false;
+      content: this.text,
+      extensions: [Document, Paragraph, Text, BulletList, ListItem],
+      onUpdate: () => {
+        const text = (this.editor as Editor).getHTML();
+        this.$emit('input', text);
+        this.$emit('change-text', text);
       },
-      text(): string {
-        return this.value.text;
-      }
+    });
+  },
+
+  beforeDestroy() {
+    this.editor?.destroy();
+  },
+
+  methods: {
+    toggleList() {
+      const editor = this.editor as Editor;
+      editor.chain().selectAll().toggleBulletList().run();
     },
-
-    watch: {
-      value({text}: Value) {
-        const editor = this.editor as Editor; // editor is always initialized on mount, cast it
-        const isSame = editor.getHTML() === text;
-
-        if (isSame) {
-          return;
-        }
-
-        editor.commands.setContent(text, false);
-      }
-    },
-
-    mounted() {
-      this.editor = new Editor({
-        editorProps: {
-          attributes: {
-            class: 'tip-tap__editor'
-          }
-        },
-        content: this.text,
-        extensions: [
-          Document,
-          Paragraph,
-          Text,
-          BulletList,
-          ListItem
-        ],
-        onUpdate: () => {
-          const text=(this.editor as Editor).getHTML();
-          this.$emit('input', text);
-          this.$emit('change-text', text);
-        }
-      });
-    },
-
-    beforeDestroy() {
-      this.editor?.destroy();
-    },
-
-    methods: {
-      toggleList() {
-        const editor = this.editor as Editor;
-        editor.chain().selectAll().toggleBulletList().run();
-      },
-    }
-  });
+  },
+});
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-
-  .tip-tap {
-
-    &__editor-wrapper {
-      margin-bottom: $medium-spacing;
-    }
-
-    :deep(.tip-tap__editor) {
-      @include inputstyle;
-      flex-direction: column;
-      min-height: 150px;
-    }
-
-    :deep(ul) {
-      padding-left: $medium-spacing;
-      list-style: initial;
-    }
-
-    :deep(li) {
-      @include inputfont;
-    }
-
-    :deep(div) {
-      @include inputfont;
-    }
-
-    :deep(p) {
-      @include inputfont;
-    }
+.tip-tap {
+  &__editor-wrapper {
+    margin-bottom: $medium-spacing;
   }
+
+  :deep(.tip-tap__editor) {
+    @include inputstyle;
+    flex-direction: column;
+    min-height: 150px;
+  }
+
+  :deep(ul) {
+    padding-left: $medium-spacing;
+    list-style: initial;
+  }
+
+  :deep(li) {
+    @include inputfont;
+  }
+
+  :deep(div) {
+    @include inputfont;
+  }
+
+  :deep(p) {
+    @include inputfont;
+  }
+}
 </style>
diff --git a/client/src/components/content-forms/VideoForm.vue b/client/src/components/content-forms/VideoForm.vue
index abec4cf2..8a1e02bf 100644
--- a/client/src/components/content-forms/VideoForm.vue
+++ b/client/src/components/content-forms/VideoForm.vue
@@ -1,21 +1,11 @@
 <template>
   <div>
-    <div
-      class="video-form"
-      v-if="!isVimeo && !isYoutube && !isSrf"
-    >
+    <div class="video-form" v-if="!isVimeo && !isYoutube && !isSrf">
       <info-icon class="video-form__help-icon help-text__icon" />
       <p class="video-form__help-description help-text__description">
-        Sie können Videos auf <a
-          class="video-form__platform-link help-text__link"
-          href="https://youtube.com/"
-          target="_blank"
-        >Youtube</a>
-        oder <a
-          class="video-form__platform-link help-text__link"
-          href="https://vimeo.com/"
-          target="_blank"
-        >Vimeo</a>
+        Sie können Videos auf
+        <a class="video-form__platform-link help-text__link" href="https://youtube.com/" target="_blank">Youtube</a>
+        oder <a class="video-form__platform-link help-text__link" href="https://vimeo.com/" target="_blank">Vimeo</a>
         hochladen und anschliessen einen Link hier einfügen.
       </p>
 
@@ -24,7 +14,7 @@
         class="video-form__video-link skillbox-input"
         placeholder="Bsp: https://www.youtube.com/watch?v=dQw4w9WgXcQ"
         @input="$emit('change-url', $event.target.value, index)"
-      >
+      />
     </div>
 
     <div v-if="isYoutube">
@@ -40,66 +30,64 @@
 </template>
 
 <script>
-  import YoutubeEmbed from '@/components/videos/YoutubeEmbed';
-  import VimeoEmbed from '@/components/videos/VimeoEmbed';
-  import SrfEmbed from '@/components/videos/SrfEmbed';
-  import {isVimeoUrl, isYoutubeUrl, isSrfUrl} from '@/helpers/video';
-  const InfoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/InfoIcon');
+import YoutubeEmbed from '@/components/videos/YoutubeEmbed';
+import VimeoEmbed from '@/components/videos/VimeoEmbed';
+import SrfEmbed from '@/components/videos/SrfEmbed';
+import { isVimeoUrl, isYoutubeUrl, isSrfUrl } from '@/helpers/video';
+const InfoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/InfoIcon');
 
-  export default {
-    props: ['value', 'index'],
+export default {
+  props: ['value', 'index'],
 
-    components: {
-      InfoIcon,
-      YoutubeEmbed,
-      VimeoEmbed,
-      SrfEmbed
+  components: {
+    InfoIcon,
+    YoutubeEmbed,
+    VimeoEmbed,
+    SrfEmbed,
+  },
+
+  computed: {
+    isYoutube() {
+      return isYoutubeUrl(this.value.url);
     },
-
-    computed: {
-      isYoutube() {
-        return isYoutubeUrl(this.value.url);
-      },
-      isVimeo() {
-        return isVimeoUrl(this.value.url);
-      },
-      isSrf() {
-        return isSrfUrl(this.value.url);
-      }
-    }
-  };
+    isVimeo() {
+      return isVimeoUrl(this.value.url);
+    },
+    isSrf() {
+      return isSrfUrl(this.value.url);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_functions.scss';
 
-  .video-form {
-    display: grid;
-    grid-auto-rows: auto;
-    grid-template-columns: 40px 1fr;
-    grid-column-gap: 16px;
-    grid-row-gap: 20px;
-    align-items: center;
+.video-form {
+  display: grid;
+  grid-auto-rows: auto;
+  grid-template-columns: 40px 1fr;
+  grid-column-gap: 16px;
+  grid-row-gap: 20px;
+  align-items: center;
 
-    &__help-icon {
-
-    }
-
-    &__help-description {
-
-    }
-
-    &__platform-link {
-      font-family: $sans-serif-font-family;
-      text-decoration: underline;
-      font-weight: $font-weight-regular;
-      font-size: toRem(17px);
-    }
-
-    &__video-link {
-      grid-column: 1 / span 2;
-      width: $modal-input-width
-    }
+  &__help-icon {
   }
+
+  &__help-description {
+  }
+
+  &__platform-link {
+    font-family: $sans-serif-font-family;
+    text-decoration: underline;
+    font-weight: $font-weight-regular;
+    font-size: toRem(17px);
+  }
+
+  &__video-link {
+    grid-column: 1 / span 2;
+    width: $modal-input-width;
+  }
+}
 </style>
diff --git a/client/src/components/icons/AddIcon.vue b/client/src/components/icons/AddIcon.vue
index dec28445..409c0705 100644
--- a/client/src/components/icons/AddIcon.vue
+++ b/client/src/components/icons/AddIcon.vue
@@ -1,9 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="6 6 88 88"
-    id="shape"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="6 6 88 88" id="shape">
     <path
       d="M50,6.48A43.62,43.62,0,0,0,6.56,47.08S6.5,48.46,6.5,50s.06,2.83.06,2.92A43.52,43.52,0,1,0,50,6.48Zm0,82.15A38.62,38.62,0,1,1,88.6,50,38.67,38.67,0,0,1,50,88.62Z"
     />
diff --git a/client/src/components/icons/AddNoteIcon.vue b/client/src/components/icons/AddNoteIcon.vue
index ecc3266a..2b4b9456 100644
--- a/client/src/components/icons/AddNoteIcon.vue
+++ b/client/src/components/icons/AddNoteIcon.vue
@@ -1,9 +1,5 @@
 <template>
-  <svg
-    class="add-note-icon"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-  >
+  <svg class="add-note-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <path
       d="M81.5,88.39746H18.7627a2.49981,2.49981,0,0,1-2.5-2.5V35.35352L1.72559,20.71191A2.50054,2.50054,0,0,1,3.5,16.4502h78a2.49981,2.49981,0,0,1,2.5,2.5V85.89746A2.49981,2.49981,0,0,1,81.5,88.39746Zm-60.2373-5H79V21.4502H9.50488L20.53711,32.56152a2.5013,2.5013,0,0,1,.72559,1.76172Z"
     />
@@ -13,9 +9,9 @@
 </template>
 
 <style scoped lang="scss">
-  .add-note-icon {
-    width: 29px;
-    height: 25px;
-    margin-left: 2px;
-  }
+.add-note-icon {
+  width: 29px;
+  height: 25px;
+  margin-left: 2px;
+}
 </style>
diff --git a/client/src/components/icons/AddPointer.vue b/client/src/components/icons/AddPointer.vue
index 2976c625..44e3ea76 100644
--- a/client/src/components/icons/AddPointer.vue
+++ b/client/src/components/icons/AddPointer.vue
@@ -1,9 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    id="shape"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="shape">
     <path
       d="M61.74,13.24a36.43,36.43,0,0,0-22.06,7.35L2.52,48a2.5,2.5,0,0,0,0,4L39.66,79.39A36.76,36.76,0,1,0,61.74,13.24Zm0,68.52a31.5,31.5,0,0,1-19.09-6.38L8.21,50,42.66,24.6A31.76,31.76,0,1,1,61.74,81.76Z"
     />
diff --git a/client/src/components/icons/ArrowThinBottom.vue b/client/src/components/icons/ArrowThinBottom.vue
index a92ac906..a2926588 100644
--- a/client/src/components/icons/ArrowThinBottom.vue
+++ b/client/src/components/icons/ArrowThinBottom.vue
@@ -1,8 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <path
       d="M79 80.8H51.6l.1-.1 25.7-25.8c1-1 1-2.6 0-3.5-1-1-2.6-1-3.5 0L52.5 72.9V16.7c0-1.4-1.1-2.5-2.5-2.5s-2.5 1.1-2.5 2.5v56.2L26.1 51.4c-1-1-2.6-1-3.5 0-1 1-1 2.6 0 3.5l25.7 25.8.1.1H21c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5h58c1.4 0 2.5-1.1 2.5-2.5s-1.1-2.5-2.5-2.5z"
       id="shape"
diff --git a/client/src/components/icons/ArrowThinDown.vue b/client/src/components/icons/ArrowThinDown.vue
index ffcdb019..3009d06c 100644
--- a/client/src/components/icons/ArrowThinDown.vue
+++ b/client/src/components/icons/ArrowThinDown.vue
@@ -1,9 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    xml:space="preserve"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xml:space="preserve">
     <path
       d="M77.5 55.7c-1-1-2.6-1-3.5 0L52.5 77.2V21.1c0-1.4-1.1-2.5-2.5-2.5s-2.5 1.1-2.5 2.5v56.2L26.1 55.8c-1-1-2.6-1-3.5 0-1 1-1 2.6 0 3.5l25.7 25.8c.1.1.2.2.4.3 0 0 .1 0 .1.1.1.1.2.1.3.2h.1c.1 0 .2.1.3.1h1c.1 0 .2-.1.3-.1h.1c.1 0 .2-.1.3-.2 0 0 .1 0 .1-.1.1-.1.3-.2.4-.3l25.7-25.8c1.1-1 1.1-2.6.1-3.6z"
       id="arrow-thin-down"
diff --git a/client/src/components/icons/ArrowThinTop.vue b/client/src/components/icons/ArrowThinTop.vue
index 83aff157..af3d2576 100644
--- a/client/src/components/icons/ArrowThinTop.vue
+++ b/client/src/components/icons/ArrowThinTop.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="100"
-    height="100"
-    viewBox="0 0 100 100"
-    id="shape"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" id="shape">
     <path
       d="M79,14.2H21a2.5,2.5,0,0,0,0,5H48.35l-.12.1h0L22.52,45.08a2.5,2.5,0,1,0,3.54,3.53L47.5,27.12V83.3a2.5,2.5,0,1,0,5,0V27.12L73.94,48.61a2.5,2.5,0,1,0,3.54-3.53L51.77,19.3h0l-.12-.1H79a2.5,2.5,0,0,0,0-5Z"
     />
diff --git a/client/src/components/icons/ArrowThinUp.vue b/client/src/components/icons/ArrowThinUp.vue
index 92bee674..d7f0d38a 100644
--- a/client/src/components/icons/ArrowThinUp.vue
+++ b/client/src/components/icons/ArrowThinUp.vue
@@ -1,11 +1,8 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    xml:space="preserve"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" xml:space="preserve">
     <path
       d="M77.5 45.1 51.8 19.3c-.5-.5-1.1-.7-1.8-.7s-1.3.3-1.8.7L22.5 45.1c-1 1-1 2.6 0 3.5 1 1 2.6 1 3.5 0l21.4-21.5v56.2c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5V27.1l21.4 21.5c.5.5 1.1.7 1.8.7.6 0 1.3-.2 1.8-.7 1.1-1 1.1-2.5.1-3.5z"
       id="arrow-thin-up"
-    /></svg>
+    />
+  </svg>
 </template>
diff --git a/client/src/components/icons/ArrowUp.vue b/client/src/components/icons/ArrowUp.vue
index 2194bd91..6c04f1ba 100644
--- a/client/src/components/icons/ArrowUp.vue
+++ b/client/src/components/icons/ArrowUp.vue
@@ -1,10 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="100"
-    height="100"
-    viewBox="0 0 100 100"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
     <path
       d="M85.56934,50.543l-33.5-49.44531a2.49942,2.49942,0,0,0-4.13867,0l-33.5,49.44531A2.49925,2.49925,0,0,0,16.5,54.44531H32.36035V97.5a2.49981,2.49981,0,0,0,2.5,2.5h30.2793a2.49981,2.49981,0,0,0,2.5-2.5V54.44531H83.5A2.49925,2.49925,0,0,0,85.56934,50.543ZM62.63965,49.44531V95H37.36035V49.44531H21.21387L50,6.957,78.78613,49.44531Z"
     />
diff --git a/client/src/components/icons/BookmarkIcon.vue b/client/src/components/icons/BookmarkIcon.vue
index 0c355b32..7f8d6889 100644
--- a/client/src/components/icons/BookmarkIcon.vue
+++ b/client/src/components/icons/BookmarkIcon.vue
@@ -1,10 +1,6 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    class="bookmark-icon"
-  >
-    <g :class="{'bookmark-icon--bookmarked': bookmarked}">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="bookmark-icon">
+    <g :class="{ 'bookmark-icon--bookmarked': bookmarked }">
       <path
         class="bookmark-icon__background"
         d="M51,67.32872a5.06849,5.06849,0,0,1,2.98875.97385L84,90V11H18V90L48.01333,68.30149A5.064,5.064,0,0,1,51,67.32872Z"
@@ -18,28 +14,28 @@
 </template>
 
 <script>
-  export default {
-    props: ['bookmarked']
-  };
+export default {
+  props: ['bookmarked'],
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/variables";
+@import '~styles/variables';
 
-  .bookmark-icon {
-    width: 24px;
-    height: 28px;
+.bookmark-icon {
+  width: 24px;
+  height: 28px;
 
-    &__background {
-      fill: white;
-    }
+  &__background {
+    fill: white;
+  }
 
-    $parent: &;
+  $parent: &;
 
-    &--bookmarked {
-      #{$parent}__background {
-        fill: $color-brand;
-      }
+  &--bookmarked {
+    #{$parent}__background {
+      fill: $color-brand;
     }
   }
+}
 </style>
diff --git a/client/src/components/icons/BulbIcon.vue b/client/src/components/icons/BulbIcon.vue
index 508eba48..cacaa03b 100644
--- a/client/src/components/icons/BulbIcon.vue
+++ b/client/src/components/icons/BulbIcon.vue
@@ -1,24 +1,14 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="100"
-    height="100"
-    viewBox="0 0 100 100"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
     <g id="shape">
-      <circle
-        cx="50"
-        cy="50"
-        r="50"
-        style="fill:#17a887"
-      />
+      <circle cx="50" cy="50" r="50" style="fill: #17a887" />
       <path
         d="M57.96318,62.73515H41.99379A2.48236,2.48236,0,0,1,39.51288,60.34c-.06061-1.72061-.21515-2.61273-3.23576-5.60545a20.69086,20.69086,0,1,1,27.55152-.18485l-.27394.26848c-2.89273,2.86424-3.04424,3.76485-3.11091,5.52848A2.48231,2.48231,0,0,1,57.96318,62.73515ZM44.17652,57.7703H55.77409c.50667-2.1903,1.72788-3.94606,4.29636-6.48909l.317-.3103c.02364-.023.04727-.04545.07212-.06788a15.62483,15.62483,0,1,0-20.85788.14364c.03848.03333.07606.06848.11273.10424C42.38379,53.78848,43.65439,55.58424,44.17652,57.7703Z"
-        style="fill:#fff"
+        style="fill: #fff"
       />
       <path
         d="M58.13591,83H41.86773a2.48255,2.48255,0,0,1-2.48242-2.48242V70.50909a2.48255,2.48255,0,0,1,2.48242-2.48242H58.13227a2.48229,2.48229,0,0,1,2.48242,2.48121l.00364,10.00848A2.482,2.482,0,0,1,58.13591,83ZM44.35015,78.03515H55.65227l-.00121-5.04364H44.35015Z"
-        style="fill:#fff"
+        style="fill: #fff"
       />
     </g>
   </svg>
diff --git a/client/src/components/icons/Cards.vue b/client/src/components/icons/Cards.vue
index 95d3ef14..2c8da338 100644
--- a/client/src/components/icons/Cards.vue
+++ b/client/src/components/icons/Cards.vue
@@ -1,9 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    id="shape"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="shape">
     <path
       d="M30.89,21v9.67H17.44v9.67H4V79H69.11V69.34H82.56V59.67H96V21Zm3.77,3.77H92.23V55.89H82.56V30.65H34.67ZM21.22,34.43H78.78V65.57H69.11V40.33H21.22ZM7.77,44.1H65.34V75.24H7.77Z"
       id="Fill-1"
diff --git a/client/src/components/icons/ChevronDown.vue b/client/src/components/icons/ChevronDown.vue
index f7c3b4fd..db7a9342 100644
--- a/client/src/components/icons/ChevronDown.vue
+++ b/client/src/components/icons/ChevronDown.vue
@@ -1,8 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <path d="M50,74.07,6.86,30.93A2.93,2.93,0,0,1,11,26.79l39,39,39-39a2.93,2.93,0,1,1,4.15,4.15Z" />
   </svg>
 </template>
diff --git a/client/src/components/icons/ChevronLeft.vue b/client/src/components/icons/ChevronLeft.vue
index e0fe8b62..f560965a 100644
--- a/client/src/components/icons/ChevronLeft.vue
+++ b/client/src/components/icons/ChevronLeft.vue
@@ -1,15 +1,11 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    class="chevron"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="chevron">
     <path d="M74.07,50,30.93,93.14A2.93,2.93,0,0,1,26.79,89l39-39-39-39a2.93,2.93,0,0,1,4.15-4.15Z" />
   </svg>
 </template>
 
 <style scoped lang="scss">
-  .chevron {
-    transform: rotate(180deg);
-  }
+.chevron {
+  transform: rotate(180deg);
+}
 </style>
diff --git a/client/src/components/icons/ChevronRight.vue b/client/src/components/icons/ChevronRight.vue
index 6aca5acb..9c54d0b6 100644
--- a/client/src/components/icons/ChevronRight.vue
+++ b/client/src/components/icons/ChevronRight.vue
@@ -1,9 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    class="chevron"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="chevron">
     <path d="M74.07,50,30.93,93.14A2.93,2.93,0,0,1,26.79,89l39-39-39-39a2.93,2.93,0,0,1,4.15-4.15Z" />
   </svg>
 </template>
diff --git a/client/src/components/icons/ChevronUp.vue b/client/src/components/icons/ChevronUp.vue
index a51ebea7..be3ec396 100644
--- a/client/src/components/icons/ChevronUp.vue
+++ b/client/src/components/icons/ChevronUp.vue
@@ -1,8 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <path d="M50,18.93,93.14,62.07A2.93,2.93,0,1,1,89,66.21l-39-39-39,39a2.93,2.93,0,1,1-4.15-4.15Z" />
   </svg>
 </template>
diff --git a/client/src/components/icons/CircleIcon.vue b/client/src/components/icons/CircleIcon.vue
index d761b7ef..3cc95959 100644
--- a/client/src/components/icons/CircleIcon.vue
+++ b/client/src/components/icons/CircleIcon.vue
@@ -1,12 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-  >
-    <circle
-      r="25"
-      cx="50"
-      cy="50"
-    />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <circle r="25" cx="50" cy="50" />
   </svg>
 </template>
diff --git a/client/src/components/icons/ClosedEyeIcon.vue b/client/src/components/icons/ClosedEyeIcon.vue
index 6d14f26d..2c6a5951 100644
--- a/client/src/components/icons/ClosedEyeIcon.vue
+++ b/client/src/components/icons/ClosedEyeIcon.vue
@@ -1,9 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    id="shape"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="shape">
     <path
       d="M99.5,48.11a56.91,56.91,0,0,0-21-21.19L91.18,14.26a3.85,3.85,0,1,0-5.44-5.44L71.21,23.36A56.73,56.73,0,0,0,.5,48.11a3.84,3.84,0,0,0,0,3.79,56.92,56.92,0,0,0,21,21.19L8.82,85.74a3.85,3.85,0,1,0,5.44,5.44L28.79,76.64A56.66,56.66,0,0,0,50,80.79,57,57,0,0,0,99.5,51.89,3.84,3.84,0,0,0,99.5,48.11ZM8.32,50a49.09,49.09,0,0,1,56.9-20.66L27.15,67.42A49.25,49.25,0,0,1,8.32,50ZM50,73.09a49,49,0,0,1-15.22-2.43L72.85,32.59A49.25,49.25,0,0,1,91.68,50,49.27,49.27,0,0,1,50,73.09Z"
     />
diff --git a/client/src/components/icons/CrossIcon.vue b/client/src/components/icons/CrossIcon.vue
index b644a11b..c26eddf8 100644
--- a/client/src/components/icons/CrossIcon.vue
+++ b/client/src/components/icons/CrossIcon.vue
@@ -1,9 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    class="cross-icon"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="cross-icon">
     <path
       d="M53.91,50,87.19,16.73a2.77,2.77,0,1,0-3.91-3.91L50,46.09,16.73,12.81a2.77,2.77,0,1,0-3.91,3.91L46.09,50,12.81,83.27a2.77,2.77,0,1,0,3.91,3.91L50,53.91,83.27,87.19a2.77,2.77,0,0,0,3.91-3.91Z"
     />
@@ -11,9 +7,9 @@
 </template>
 
 <style scoped lang="scss">
-  .cross-icon {
-    width: 30px;
-    height: 30px;
-    opacity: 0.5;
-  }
+.cross-icon {
+  width: 30px;
+  height: 30px;
+  opacity: 0.5;
+}
 </style>
diff --git a/client/src/components/icons/DefaultAvatar.vue b/client/src/components/icons/DefaultAvatar.vue
index f0c6b2c6..017893f4 100644
--- a/client/src/components/icons/DefaultAvatar.vue
+++ b/client/src/components/icons/DefaultAvatar.vue
@@ -1,26 +1,12 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    viewBox="0 0 400 400"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400">
     <defs>
       <clipPath id="avatar-clip-path">
-        <circle
-          class="cls-1"
-          cx="200"
-          cy="200"
-          r="197"
-        />
+        <circle class="cls-1" cx="200" cy="200" r="197" />
       </clipPath>
     </defs>
     <g id="bg">
-      <circle
-        class="cls-2"
-        cx="200"
-        cy="200"
-        r="197"
-      />
+      <circle class="cls-2" cx="200" cy="200" r="197" />
     </g>
     <g id="objects">
       <g class="cls-3">
@@ -36,13 +22,7 @@
           class="cls-6"
           d="M237.057,266.23162H166.56944c0,34.9025-27.34,45.73431-43.07576,50.90769,15.73577,67.03868,142.10688,67.03868,156.63909,0C260.78642,311.96593,241.52987,305.94826,237.057,266.23162Z"
         />
-        <ellipse
-          class="cls-7"
-          cx="202.35227"
-          cy="179.47219"
-          rx="79.23803"
-          ry="97.02616"
-        />
+        <ellipse class="cls-7" cx="202.35227" cy="179.47219" rx="79.23803" ry="97.02616" />
         <path
           class="cls-8"
           d="M117.61519,154.166c10.8764-3.25836,22.30778,5.29762,25.51206,19.09451,3.20424,13.7965-3.02464,27.64251-13.90108,30.90087-10.87644,3.25678-22.30919-5.29877-25.51339-19.09389-3.20425-13.79708,3.026-27.64273,13.90241-30.90149Z"
@@ -61,35 +41,39 @@
 </template>
 
 <style scoped>
-  .cls-1 {
-    fill: none;
-  }
+.cls-1 {
+  fill: none;
+}
 
-  .cls-2 {
-    fill: #d1eee7;
-  }
+.cls-2 {
+  fill: #d1eee7;
+}
 
-  .cls-3 {
-    clip-path: url(#avatar-clip-path);
-  }
+.cls-3 {
+  clip-path: url(#avatar-clip-path);
+}
 
-  .cls-4 {
-    fill: #17a887;
-  }
+.cls-4 {
+  fill: #17a887;
+}
 
-  .cls-4, .cls-5, .cls-6, .cls-8 {
-    fill-rule: evenodd;
-  }
+.cls-4,
+.cls-5,
+.cls-6,
+.cls-8 {
+  fill-rule: evenodd;
+}
 
-  .cls-5 {
-    fill: #102d24;
-  }
+.cls-5 {
+  fill: #102d24;
+}
 
-  .cls-6 {
-    fill: #e5f5f2;
-  }
+.cls-6 {
+  fill: #e5f5f2;
+}
 
-  .cls-7, .cls-8 {
-    fill: #fff;
-  }
+.cls-7,
+.cls-8 {
+  fill: #fff;
+}
 </style>
diff --git a/client/src/components/icons/DocumentIcon.vue b/client/src/components/icons/DocumentIcon.vue
index 8557dd79..2c4d8ddf 100644
--- a/client/src/components/icons/DocumentIcon.vue
+++ b/client/src/components/icons/DocumentIcon.vue
@@ -1,18 +1,12 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <path
       d="M22.64,5.3a8.38,8.38,0,0,0-8.37,8.37V86.33a8.38,8.38,0,0,0,8.37,8.37H77.36a8.38,8.38,0,0,0,8.37-8.37v-57L61.39,5.3ZM79.17,88.08a2.74,2.74,0,0,1-2.11.94H22.34a3,3,0,0,1-3-3V13.37a3,3,0,0,1,3-3H54V28.32a7.78,7.78,0,0,0,7.77,7.77H79.75V85.73A2.85,2.85,0,0,1,79.17,88.08ZM62.11,31a2.34,2.34,0,0,1-2.39-2.39V11.15L79.58,31Z"
     />
     <path
       d="M61.81,36.1A7.78,7.78,0,0,1,54,28.32V10.38H22.34a3,3,0,0,0-3,3V86a3,3,0,0,0,3,3H77.06a2.74,2.74,0,0,0,2.11-.94,2.85,2.85,0,0,0,.59-2.35V36.1Z"
-      style="fill:#fff"
-    />
-    <path
-      d="M59.72,28.62A2.34,2.34,0,0,0,62.11,31H79.58L59.72,11.15Z"
-      style="fill:#fff"
+      style="fill: #fff"
     />
+    <path d="M59.72,28.62A2.34,2.34,0,0,0,62.11,31H79.58L59.72,11.15Z" style="fill: #fff" />
   </svg>
 </template>
diff --git a/client/src/components/icons/DocumentWithLinesIcon.vue b/client/src/components/icons/DocumentWithLinesIcon.vue
index bcaaea73..f672da05 100644
--- a/client/src/components/icons/DocumentWithLinesIcon.vue
+++ b/client/src/components/icons/DocumentWithLinesIcon.vue
@@ -1,14 +1,6 @@
 <template>
-  <svg
-    viewBox="0 0 51 51"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <rect
-      width="51"
-      height="51"
-      fill="white"
-    />
+  <svg viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="51" height="51" fill="white" />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
@@ -37,6 +29,5 @@
 </template>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
-
+@import '~styles/helpers';
 </style>
diff --git a/client/src/components/icons/EhbLogo.vue b/client/src/components/icons/EhbLogo.vue
index 21e7e199..922515fd 100644
--- a/client/src/components/icons/EhbLogo.vue
+++ b/client/src/components/icons/EhbLogo.vue
@@ -1,102 +1,33 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 79.6006 25.5117"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79.6006 25.5117">
     <g id="bild_wortmarke">
       <path d="M42.6597,6.811h8.1616V9.2915H45.6001v2.6211H50.041v2.46H45.6001v3.0009h5.4214V19.854H42.6597Z" />
       <path d="M54.9195,6.811h2.9404v5.0215h4.5005V6.811h2.9609V19.854H62.3604V14.4126H57.8599V19.854H54.9195Z" />
       <path
         d="M69.6983,6.811h4.4609c2.7012,0,4.8018.7403,4.8018,3.2412a2.84374,2.84374,0,0,1-2.1807,2.8204v.08c1.8604.3399,2.8203,1.3204,2.8203,3.0606,0,2.6601-2.2402,3.8408-5.0605,3.8408H69.6983Zm4.3213,5.2618c1.4404,0,2.0605-.6202,2.0605-1.6006s-.6602-1.3809-2.041-1.3809H72.6397v2.9815Zm.2802,5.5009c1.5996,0,2.42-.6006,2.42-1.7802,0-1.1407-.7999-1.6407-2.42-1.6407H72.6397v3.4209Z"
       />
-      <polygon
-        class="cls-1"
-        points="7.087 0 0 4.252 7.087 8.504 7.087 0"
-      />
-      <polygon
-        class="cls-1"
-        points="7.087 8.504 14.173 4.252 7.087 0 7.087 8.504"
-      />
-      <polygon
-        class="cls-2"
-        points="7.087 17.008 0 21.26 7.087 25.512 7.087 17.008"
-      />
-      <polygon
-        class="cls-2"
-        points="7.087 25.512 14.173 21.26 7.087 17.008 7.087 25.512"
-      />
-      <polygon
-        class="cls-1"
-        points="7.087 8.511 7.093 8.507 7.087 8.504 7.087 8.511"
-      />
-      <polygon
-        class="cls-3"
-        points="0 4.252 0 12.756 7.087 8.504 0 4.252"
-      />
-      <polygon
-        class="cls-4"
-        points="7.087 8.504 7.087 17.008 14.173 12.756 7.087 8.504"
-      />
-      <polygon
-        class="cls-5"
-        points="7.087 8.504 7.087 17.008 0 12.756 7.087 8.504"
-      />
-      <polygon
-        class="cls-5"
-        points="14.173 12.756 14.173 4.252 7.087 8.504 14.173 12.756"
-      />
-      <polygon
-        class="cls-2"
-        points="0 12.756 0 21.26 7.087 17.008 0 12.756"
-      />
-      <polygon
-        class="cls-6"
-        points="14.173 21.26 14.173 12.756 7.087 17.008 14.173 21.26"
-      />
-      <polygon
-        class="cls-7"
-        points="21.26 0 14.173 4.252 21.26 8.504 21.26 0"
-      />
-      <polygon
-        class="cls-7"
-        points="21.26 8.504 28.347 4.252 21.26 0 21.26 8.504"
-      />
-      <polygon
-        class="cls-8"
-        points="21.26 17.008 14.173 21.26 21.26 25.512 21.26 17.008"
-      />
-      <polygon
-        class="cls-8"
-        points="21.26 25.512 28.347 21.26 21.26 17.008 21.26 25.512"
-      />
-      <polygon
-        class="cls-1"
-        points="21.26 8.511 21.266 8.507 21.26 8.504 21.26 8.511"
-      />
-      <polygon
-        class="cls-9"
-        points="14.173 4.252 14.173 12.756 21.26 8.504 14.173 4.252"
-      />
-      <polygon
-        class="cls-10"
-        points="21.26 8.504 21.26 17.008 28.347 12.756 21.26 8.504"
-      />
-      <polygon
-        class="cls-9"
-        points="21.26 8.504 21.26 17.008 14.173 12.756 21.26 8.504"
-      />
-      <polygon
-        class="cls-11"
-        points="28.347 12.756 28.347 4.252 21.26 8.504 28.347 12.756"
-      />
-      <polygon
-        class="cls-6"
-        points="14.173 12.756 14.173 21.26 21.26 17.008 14.173 12.756"
-      />
-      <polygon
-        class="cls-8"
-        points="28.347 21.26 28.347 12.756 21.26 17.008 28.347 21.26"
-      />
+      <polygon class="cls-1" points="7.087 0 0 4.252 7.087 8.504 7.087 0" />
+      <polygon class="cls-1" points="7.087 8.504 14.173 4.252 7.087 0 7.087 8.504" />
+      <polygon class="cls-2" points="7.087 17.008 0 21.26 7.087 25.512 7.087 17.008" />
+      <polygon class="cls-2" points="7.087 25.512 14.173 21.26 7.087 17.008 7.087 25.512" />
+      <polygon class="cls-1" points="7.087 8.511 7.093 8.507 7.087 8.504 7.087 8.511" />
+      <polygon class="cls-3" points="0 4.252 0 12.756 7.087 8.504 0 4.252" />
+      <polygon class="cls-4" points="7.087 8.504 7.087 17.008 14.173 12.756 7.087 8.504" />
+      <polygon class="cls-5" points="7.087 8.504 7.087 17.008 0 12.756 7.087 8.504" />
+      <polygon class="cls-5" points="14.173 12.756 14.173 4.252 7.087 8.504 14.173 12.756" />
+      <polygon class="cls-2" points="0 12.756 0 21.26 7.087 17.008 0 12.756" />
+      <polygon class="cls-6" points="14.173 21.26 14.173 12.756 7.087 17.008 14.173 21.26" />
+      <polygon class="cls-7" points="21.26 0 14.173 4.252 21.26 8.504 21.26 0" />
+      <polygon class="cls-7" points="21.26 8.504 28.347 4.252 21.26 0 21.26 8.504" />
+      <polygon class="cls-8" points="21.26 17.008 14.173 21.26 21.26 25.512 21.26 17.008" />
+      <polygon class="cls-8" points="21.26 25.512 28.347 21.26 21.26 17.008 21.26 25.512" />
+      <polygon class="cls-1" points="21.26 8.511 21.266 8.507 21.26 8.504 21.26 8.511" />
+      <polygon class="cls-9" points="14.173 4.252 14.173 12.756 21.26 8.504 14.173 4.252" />
+      <polygon class="cls-10" points="21.26 8.504 21.26 17.008 28.347 12.756 21.26 8.504" />
+      <polygon class="cls-9" points="21.26 8.504 21.26 17.008 14.173 12.756 21.26 8.504" />
+      <polygon class="cls-11" points="28.347 12.756 28.347 4.252 21.26 8.504 28.347 12.756" />
+      <polygon class="cls-6" points="14.173 12.756 14.173 21.26 21.26 17.008 14.173 12.756" />
+      <polygon class="cls-8" points="28.347 21.26 28.347 12.756 21.26 17.008 28.347 21.26" />
       <polyline
         class="cls-12"
         points="26.794 11.486 26.794 14.04 23.815 14.04 23.815 17.02 21.26 17.02 21.26 14.04 18.28 14.04 18.28 11.486 21.26 11.486 21.26 8.506 23.814 8.506 23.815 11.486 26.794 11.486"
@@ -106,51 +37,51 @@
 </template>
 
 <style scoped lang="scss">
-  .cls-1 {
-    fill: #723c83;
-  }
+.cls-1 {
+  fill: #723c83;
+}
 
-  .cls-2 {
-    fill: #29c3ec;
-  }
+.cls-2 {
+  fill: #29c3ec;
+}
 
-  .cls-3 {
-    fill: #956daf;
-  }
+.cls-3 {
+  fill: #956daf;
+}
 
-  .cls-4 {
-    fill: #004b60;
-  }
+.cls-4 {
+  fill: #004b60;
+}
 
-  .cls-5 {
-    fill: #3f2c7f;
-  }
+.cls-5 {
+  fill: #3f2c7f;
+}
 
-  .cls-6 {
-    fill: #007dad;
-  }
+.cls-6 {
+  fill: #007dad;
+}
 
-  .cls-7 {
-    fill: #009a7e;
-  }
+.cls-7 {
+  fill: #009a7e;
+}
 
-  .cls-8 {
-    fill: #cbdd5f;
-  }
+.cls-8 {
+  fill: #cbdd5f;
+}
 
-  .cls-9 {
-    fill: #00553c;
-  }
+.cls-9 {
+  fill: #00553c;
+}
 
-  .cls-10 {
-    fill: #c14451;
-  }
+.cls-10 {
+  fill: #c14451;
+}
 
-  .cls-11 {
-    fill: #f9a134;
-  }
+.cls-11 {
+  fill: #f9a134;
+}
 
-  .cls-12 {
-    fill: #fff;
-  }
+.cls-12 {
+  fill: #fff;
+}
 </style>
diff --git a/client/src/components/icons/Ellipses.vue b/client/src/components/icons/Ellipses.vue
index bacc88f9..70d5ea24 100644
--- a/client/src/components/icons/Ellipses.vue
+++ b/client/src/components/icons/Ellipses.vue
@@ -1,22 +1,7 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-  >
-    <circle
-      cx="18.75"
-      cy="50"
-      r="5"
-    />
-    <circle
-      cx="50"
-      cy="50"
-      r="5"
-    />
-    <circle
-      cx="81.25"
-      cy="50"
-      r="5"
-    />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <circle cx="18.75" cy="50" r="5" />
+    <circle cx="50" cy="50" r="5" />
+    <circle cx="81.25" cy="50" r="5" />
   </svg>
 </template>
diff --git a/client/src/components/icons/EyeIcon.vue b/client/src/components/icons/EyeIcon.vue
index 6b7c40b1..cd6a5fe0 100644
--- a/client/src/components/icons/EyeIcon.vue
+++ b/client/src/components/icons/EyeIcon.vue
@@ -1,9 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    id="shape"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="shape">
     <path
       d="M99.5,48.11a56.85,56.85,0,0,0-99,0,3.84,3.84,0,0,0,0,3.79,56.85,56.85,0,0,0,99,0A3.84,3.84,0,0,0,99.5,48.11ZM50,30.75A12.31,12.31,0,1,1,37.69,43.06,12.32,12.32,0,0,1,50,30.75Zm0,42.34A49.28,49.28,0,0,1,8.32,50,49.3,49.3,0,0,1,35.75,29a20,20,0,1,0,28.5,0A49.3,49.3,0,0,1,91.68,50,49.28,49.28,0,0,1,50,73.09Z"
     />
diff --git a/client/src/components/icons/Group.vue b/client/src/components/icons/Group.vue
index d4b99aa3..e0c4bf5f 100644
--- a/client/src/components/icons/Group.vue
+++ b/client/src/components/icons/Group.vue
@@ -1,9 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    id="shape"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="shape">
     <title>group</title>
     <path
       d="M84.56,47H71.69a15.5,15.5,0,0,0-7.63,2,15.85,15.85,0,0,0-5,4.46,15.61,15.61,0,0,0-2.62-.22H43.57a15.51,15.51,0,0,0-2.6.22A15.85,15.85,0,0,0,36,49a15.5,15.5,0,0,0-7.63-2H15.49A15.66,15.66,0,0,0-.1,62.55v8.73A1.77,1.77,0,0,0,1.66,73H28v4.49a1.76,1.76,0,0,0,1.76,1.76H70.28A1.76,1.76,0,0,0,72,77.52V73H98.34a1.77,1.77,0,0,0,1.76-1.76V62.55A15.66,15.66,0,0,0,84.56,47ZM72,64.5V64l-.17-.48a15.8,15.8,0,0,0-8.39-8.85A12.31,12.31,0,0,1,65.79,52a12,12,0,0,1,5.88-1.55H84.56A12.13,12.13,0,0,1,96.62,62.55v7H72V64.8ZM31.52,66.22l.26-1a12.12,12.12,0,0,1,11.47-8.33l.36-.18H56.46a12.15,12.15,0,0,1,12,10.51,3,3,0,0,0,.07.77v7.73h-37V66.22Zm5.83-11.68A15.68,15.68,0,0,0,28.12,67.3v2.2H3.43v-7A12.13,12.13,0,0,1,15.49,50.49H28.36A12,12,0,0,1,34.24,52,12.22,12.22,0,0,1,37.35,54.54Z"
diff --git a/client/src/components/icons/Hamburger.vue b/client/src/components/icons/Hamburger.vue
index 9e588f1e..84b60fb3 100644
--- a/client/src/components/icons/Hamburger.vue
+++ b/client/src/components/icons/Hamburger.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="100"
-    height="100"
-    viewBox="0 0 100 100"
-    id="shape"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" id="shape">
     <path d="M82,21H18a3,3,0,0,1,0-6H82a3,3,0,0,1,0,6Z" />
     <path d="M82,85H18a3,3,0,0,1,0-6H82a3,3,0,0,1,0,6Z" />
     <path d="M82,53H18a3,3,0,0,1,0-6H82a3,3,0,0,1,0,6Z" />
diff --git a/client/src/components/icons/HepLogo.vue b/client/src/components/icons/HepLogo.vue
index 1b82a955..f9fdceba 100644
--- a/client/src/components/icons/HepLogo.vue
+++ b/client/src/components/icons/HepLogo.vue
@@ -1,16 +1,6 @@
 <template>
-  <svg
-    data-name="Ebene 1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 147.39503 34.72434"
-    id="Ebene_1"
-  >
-    <circle
-      class="cls-1"
-      cx="17.36217"
-      cy="17.36217"
-      r="17.36217"
-    />
+  <svg data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 147.39503 34.72434" id="Ebene_1">
+    <circle class="cls-1" cx="17.36217" cy="17.36217" r="17.36217" />
     <path
       class="cls-1"
       d="M52.4432,8.634a4.55121,4.55121,0,0,0-.89344-1.506,3.95842,3.95842,0,0,0-1.37354-.97187,4.42834,4.42834,0,0,0-1.7625-.34656,4.00352,4.00352,0,0,0-1.80914.40273,3.454,3.454,0,0,0-1.30783,1.14356h-.03922V2.59971H42.62491V17.82914h2.63262V10.86921a3.046,3.046,0,0,1,.17382-1.03228,2.49255,2.49255,0,0,1,.49812-.8468,2.33973,2.33973,0,0,1,.79169-.56277,2.52558,2.52558,0,0,1,1.03016-.20561,2.30456,2.30456,0,0,1,1.72223.68041,2.663,2.663,0,0,1,.66028,1.9236v7.00338h2.63262V10.60425A5.72892,5.72892,0,0,0,52.4432,8.634Z"
@@ -67,10 +57,7 @@
       class="cls-1"
       d="M120.392,24.19429a.69831.69831,0,0,1-.50448-.20136.66738.66738,0,0,1-.20878-.49813.69925.69925,0,0,1,.20242-.50448.68231.68231,0,0,1,.51084-.20878.66738.66738,0,0,1,.49813.20878.69925.69925,0,0,1,.20242.50448.68177.68177,0,0,1-.20242.49071A.66349.66349,0,0,1,120.392,24.19429Zm-.51084.93226h1.009v6.99808h-1.009Z"
     />
-    <path
-      class="cls-1"
-      d="M123.03591,23.24323h1.01v8.8814h-1.01Z"
-    />
+    <path class="cls-1" d="M123.03591,23.24323h1.01v8.8814h-1.01Z" />
     <path
       class="cls-1"
       d="M128.79071,32.25923a3.05086,3.05086,0,0,1-1.21033-.23529,2.604,2.604,0,0,1-.956-.69949,3.36014,3.36014,0,0,1-.63272-1.1372,5.43759,5.43759,0,0,1,0-3.12227,3.36014,3.36014,0,0,1,.63272-1.1372,2.6041,2.6041,0,0,1,.956-.69949,3.051,3.051,0,0,1,1.21033-.23528,2.91444,2.91444,0,0,1,1.31949.27556,2.53874,2.53874,0,0,1,.90086.7334h.06783V23.24323h1.009v8.8814h-.80759l-.1346-.94219h-.06677a2.34,2.34,0,0,1-.93583.79487A3.084,3.084,0,0,1,128.79071,32.25923Zm.1346-.9422a1.95829,1.95829,0,0,0,1.56113-.68571,2.98585,2.98585,0,0,0,.59245-2.0052,2.98588,2.98588,0,0,0-.59245-2.00521,2.11772,2.11772,0,0,0-3.12226,0,2.99144,2.99144,0,0,0-.59139,2.00521,2.99141,2.99141,0,0,0,.59139,2.0052A1.96124,1.96124,0,0,0,128.92531,31.317Z"
@@ -83,18 +70,12 @@
       class="cls-1"
       d="M141.74294,25.12655h.80759l.1346.94219h.06677a1.90132,1.90132,0,0,1,.90828-.84045,2.84327,2.84327,0,0,1,1.1107-.23528,2.68734,2.68734,0,0,1,1.0291.195,2.43174,2.43174,0,0,1,.83409.55853,2.53823,2.53823,0,0,1,.55853.88814,3.27415,3.27415,0,0,1,.20243,1.18384v4.3061h-1.009v-4.3061a1.88054,1.88054,0,0,0-.49177-1.4,1.71979,1.71979,0,0,0-1.258-.48435,1.8029,1.8029,0,0,0-.74718.15474,2.01427,2.01427,0,0,0-.59881.41121,1.81485,1.81485,0,0,0-.39743.59881,1.88875,1.88875,0,0,0-.141.71963v4.3061h-1.009Z"
     />
-    <rect
-      class="cls-1"
-      x="42.62491"
-      y="2.59971"
-      width="2.63263"
-      height="15.22942"
-    />
+    <rect class="cls-1" x="42.62491" y="2.59971" width="2.63263" height="15.22942" />
   </svg>
 </template>
 
 <style scoped lang="scss">
-  .cls-1 {
-    fill: #002f6c;
-  }
+.cls-1 {
+  fill: #002f6c;
+}
 </style>
diff --git a/client/src/components/icons/HepLogoNoClaim.vue b/client/src/components/icons/HepLogoNoClaim.vue
index 55b8f835..b9d22781 100644
--- a/client/src/components/icons/HepLogoNoClaim.vue
+++ b/client/src/components/icons/HepLogoNoClaim.vue
@@ -1,17 +1,7 @@
 <template>
-  <svg
-    viewBox="0 0 65.3274 22.28203"
-    data-name="Ebene 1"
-    xmlns="http://www.w3.org/2000/svg"
-    id="Ebene_1"
-  >
+  <svg viewBox="0 0 65.3274 22.28203" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" id="Ebene_1">
     <title>Zeichenfläche 1</title>
-    <circle
-      class="cls-1"
-      cx="11.14101"
-      cy="11.14101"
-      r="11.14101"
-    />
+    <circle class="cls-1" cx="11.14101" cy="11.14101" r="11.14101" />
     <path
       class="cls-1"
       d="M38.24333,9.54537a4.55137,4.55137,0,0,0-.89344-1.506,3.95851,3.95851,0,0,0-1.37354-.97187,4.42839,4.42839,0,0,0-1.76251-.34656,4.00351,4.00351,0,0,0-1.80913.40273,3.454,3.454,0,0,0-1.30783,1.14356h-.03922V3.51107H28.425V18.74049h2.63262V11.78056a3.04623,3.04623,0,0,1,.17381-1.03228,2.49273,2.49273,0,0,1,.49813-.8468,2.33973,2.33973,0,0,1,.79169-.56277,2.52554,2.52554,0,0,1,1.03016-.20561,2.30456,2.30456,0,0,1,1.72223.68041,2.663,2.663,0,0,1,.66027,1.9236v7.00338h2.63263V11.5156A5.72892,5.72892,0,0,0,38.24333,9.54537Z"
@@ -28,7 +18,7 @@
 </template>
 
 <style scoped lang="scss">
-  .cls-1 {
-    fill: #002f6c;
-  }
+.cls-1 {
+  fill: #002f6c;
+}
 </style>
diff --git a/client/src/components/icons/ImageIcon.vue b/client/src/components/icons/ImageIcon.vue
index 1303438f..1c3f9462 100644
--- a/client/src/components/icons/ImageIcon.vue
+++ b/client/src/components/icons/ImageIcon.vue
@@ -1,9 +1,6 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    id="shape"
-  ><title>image</title>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="shape">
+    <title>image</title>
     <path
       d="M93,14.2H7a2,2,0,0,0-2,2v67.5a2,2,0,0,0,2,2H93a2,2,0,0,0,2-2V16.25A2,2,0,0,0,93,14.2ZM42.27,54.37,57.73,69.83a2.09,2.09,0,0,0,2.89,0,2,2,0,0,0,0-2.89l-7-7L67,45.24,90,68.38a2,2,0,0,0,.87.46V81.7H12.18ZM65.36,41,50.7,57l-6.9-6.9A2.05,2.05,0,0,0,41,50L9.09,79V18.3H90.91V63.47L68.26,40.82a2,2,0,0,0-1.47-.53A2.06,2.06,0,0,0,65.36,41Z"
     />
diff --git a/client/src/components/icons/InfoIcon.vue b/client/src/components/icons/InfoIcon.vue
index 95753e0e..c3e16f44 100644
--- a/client/src/components/icons/InfoIcon.vue
+++ b/client/src/components/icons/InfoIcon.vue
@@ -1,17 +1,9 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    id="shape"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="shape">
     <path
       d="M50,6.48A43.62,43.62,0,0,0,6.56,47.08S6.5,48.46,6.5,50s.06,2.83.06,2.92A43.52,43.52,0,1,0,50,6.48Zm0,82.15A38.62,38.62,0,1,1,88.6,50,38.67,38.67,0,0,1,50,88.62Z"
     />
     <path d="M50,46.17a2.45,2.45,0,0,0-2.45,2.45V72.49a2.45,2.45,0,1,0,4.9,0V48.62A2.45,2.45,0,0,0,50,46.17Z" />
-    <circle
-      cx="50"
-      cy="30.56"
-      r="3.5"
-    />
+    <circle cx="50" cy="30.56" r="3.5" />
   </svg>
 </template>
diff --git a/client/src/components/icons/LinkIcon.vue b/client/src/components/icons/LinkIcon.vue
index 813056c4..7dd47af6 100644
--- a/client/src/components/icons/LinkIcon.vue
+++ b/client/src/components/icons/LinkIcon.vue
@@ -1,9 +1,6 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    id="shape"
-  ><title>link</title>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="shape">
+    <title>link</title>
     <path
       d="M85.13,14.88a19.12,19.12,0,0,0-27,0l-9.61,9.61a2.68,2.68,0,0,0,3.79,3.8l9.61-9.61A13.73,13.73,0,0,1,81.33,38.08L63.4,56A13.75,13.75,0,0,1,44,56a2.68,2.68,0,0,0-3.79,3.8,19.12,19.12,0,0,0,27,0L85.13,41.88a19.14,19.14,0,0,0,0-27Z"
     />
diff --git a/client/src/components/icons/LoadingIcon.vue b/client/src/components/icons/LoadingIcon.vue
index d97f0aff..2340603d 100644
--- a/client/src/components/icons/LoadingIcon.vue
+++ b/client/src/components/icons/LoadingIcon.vue
@@ -1,10 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    width="100"
-    height="100"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
     <path
       d="M91,47.5A2.5,2.5,0,0,0,88.5,50,38.5,38.5,0,1,1,50,11.5,38.09,38.09,0,0,1,76,21.64H62.13a2.45,2.45,0,0,0,0,4.9H84.31V4.36a2.45,2.45,0,1,0-4.9,0V18A43,43,0,0,0,50,6.5,43.5,43.5,0,1,0,93.5,50,2.5,2.5,0,0,0,91,47.5Z"
     />
diff --git a/client/src/components/icons/Logo.vue b/client/src/components/icons/Logo.vue
index cef4f43e..f5a420aa 100644
--- a/client/src/components/icons/Logo.vue
+++ b/client/src/components/icons/Logo.vue
@@ -1,20 +1,15 @@
 <template>
-  <img
-    :src="img"
-    class="logo"
-    alt="Logo"
-  >
+  <img :src="img" class="logo" alt="Logo" />
 </template>
 
 <script>
-  export default {
-    computed: {
-      img() {
-        return this.$flavor.appLogo;
-      }
+export default {
+  computed: {
+    img() {
+      return this.$flavor.appLogo;
     },
-  };
+  },
+};
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/client/src/components/icons/NoteIcon.vue b/client/src/components/icons/NoteIcon.vue
index 9c33c2f6..bb802b06 100644
--- a/client/src/components/icons/NoteIcon.vue
+++ b/client/src/components/icons/NoteIcon.vue
@@ -1,9 +1,5 @@
 <template>
-  <svg
-    class="note-icon"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-  >
+  <svg class="note-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <path
       d="M81.5,88.39746H18.7627a2.49981,2.49981,0,0,1-2.5-2.5V35.35352L1.72559,20.71191A2.50054,2.50054,0,0,1,3.5,16.4502h78a2.49981,2.49981,0,0,1,2.5,2.5V85.89746A2.49981,2.49981,0,0,1,81.5,88.39746Zm-60.2373-5H79V21.4502H9.50488L20.53711,32.56152a2.5013,2.5013,0,0,1,.72559,1.76172Z"
     />
@@ -14,9 +10,9 @@
 </template>
 
 <style scoped lang="scss">
-  .note-icon {
-    width: 29px;
-    height: 25px;
-    margin-left: 2px;
-  }
+.note-icon {
+  width: 29px;
+  height: 25px;
+  margin-left: 2px;
+}
 </style>
diff --git a/client/src/components/icons/PenIcon.vue b/client/src/components/icons/PenIcon.vue
index 61606c46..29d499fb 100644
--- a/client/src/components/icons/PenIcon.vue
+++ b/client/src/components/icons/PenIcon.vue
@@ -1,8 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <path
       d="M39,85.69l.12.12L86.83,38.12a7.42,7.42,0,0,0,0-10.49L72.38,13.17a7.42,7.42,0,0,0-10.49,0L14.19,60.87l.12.12L11,89ZM65.86,17.15a1.8,1.8,0,0,1,2.54,0L82.85,31.6a1.8,1.8,0,0,1,0,2.54l-3.69,3.69-17-17ZM58.2,24.81l17,17L39.13,77.86l-17-17ZM19.38,66.05,33.95,80.62l-16.53,2Z"
     />
diff --git a/client/src/components/icons/Play.vue b/client/src/components/icons/Play.vue
index 24b749a3..e2ad313f 100644
--- a/client/src/components/icons/Play.vue
+++ b/client/src/components/icons/Play.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-  >
-    <path
-      d="M50,0a50,50,0,1,0,50,50A50,50,0,0,0,50,0ZM38,74V26L70,50Z"
-      style="fill:#17a887"
-    />
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <path d="M50,0a50,50,0,1,0,50,50A50,50,0,0,0,50,0ZM38,74V26L70,50Z" style="fill: #17a887" />
   </svg>
 </template>
diff --git a/client/src/components/icons/PlusIcon.vue b/client/src/components/icons/PlusIcon.vue
index a216ce71..e280b688 100644
--- a/client/src/components/icons/PlusIcon.vue
+++ b/client/src/components/icons/PlusIcon.vue
@@ -1,8 +1,5 @@
 <template>
-  <svg
-    viewBox="15 15 20 20"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg viewBox="15 15 20 20" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M33.855 23.7749H26.215V16.1349C26.215 15.4584 25.6666 14.9099 24.99 14.9099C24.3135 14.9099 23.765 15.4584 23.765 16.1349V23.7749H16.125C15.4485 23.7749 14.9 24.3234 14.9 24.9999C14.9 25.6765 15.4485 26.2249 16.125 26.2249H23.765V33.8649C23.765 34.5415 24.3135 35.0899 24.99 35.0899C25.6666 35.0899 26.215 34.5415 26.215 33.8649V26.2249H33.855C34.5316 26.2249 35.08 25.6765 35.08 24.9999C35.08 24.3234 34.5316 23.7749 33.855 23.7749Z"
     />
diff --git a/client/src/components/icons/ShareIcon.vue b/client/src/components/icons/ShareIcon.vue
index 75812cbe..356c49ce 100644
--- a/client/src/components/icons/ShareIcon.vue
+++ b/client/src/components/icons/ShareIcon.vue
@@ -1,9 +1,5 @@
 <template>
-  <svg
-    viewBox="0 0 50 50"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M2.26316 47.5385C2.16211 47.5385 2.06105 47.5385 1.96 47.4884C1.40421 47.3382 1 46.8377 1 46.2871C1 25.0637 9.28632 15.3529 27.7789 14.9525V3.23957C27.7789 2.73902 28.0821 2.23847 28.5874 2.0883C29.0926 1.88808 29.6484 2.03824 30.0021 2.43869L48.6968 23.9124C49.1011 24.3629 49.1011 25.0637 48.6968 25.5642L30.0021 47.0379C29.6484 47.4384 29.0926 47.5885 28.5874 47.3883C28.0821 47.1881 27.7789 46.7376 27.7789 46.237V34.0235C16.8653 34.424 7.41684 39.3795 3.37474 46.8877C3.17263 47.2882 2.71789 47.5385 2.26316 47.5385ZM29.0421 31.5208C29.7495 31.5208 30.3053 32.0714 30.3053 32.7722V42.7832L46.0695 24.6632L30.3053 6.59327V16.2039C30.3053 16.9047 29.7495 17.4553 29.0421 17.4553C12.4695 17.4553 4.68842 24.8634 3.67789 41.9823C9.08421 35.4251 18.3811 31.5208 29.0421 31.5208Z"
       fill="#333333"
diff --git a/client/src/components/icons/SpeechBubbleIcon.vue b/client/src/components/icons/SpeechBubbleIcon.vue
index 3e00154c..099fc6be 100644
--- a/client/src/components/icons/SpeechBubbleIcon.vue
+++ b/client/src/components/icons/SpeechBubbleIcon.vue
@@ -1,12 +1,9 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    id="shape"
-  ><title>q-a</title>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="shape">
+    <title>q-a</title>
     <path
       d="M88.09,10h-38A12,12,0,0,0,38,21.88V33.11H12a12.07,12.07,0,0,0-12,12v22.4A12,12,0,0,0,12,79.39H47l10.87,10a2.5,2.5,0,0,0,1.67.67,2.38,2.38,0,0,0,1-.2A2.44,2.44,0,0,0,62,87.58V56.25H88.09a11.92,11.92,0,0,0,11.91-12V21.88A11.87,11.87,0,0,0,88.09,10ZM57,82l-7.41-6.83a2.49,2.49,0,0,0-1.65-.7H12A7,7,0,0,1,5,67.51V45.11a7.1,7.1,0,0,1,7.09-7H38V64.35a2.54,2.54,0,0,0,4.23,1.83l9.1-8.29L52,57.3c.49-.45,1-.92,1.21-1.05s.71,0,1.16,0H57ZM95,44.28a7,7,0,0,1-6.95,7H54.47c-3-.06-3.55.27-5.83,2.37-.19.17-.45.37-.68.58l-5,4.5V21.88a7.06,7.06,0,0,1,7.13-7h38a6.91,6.91,0,0,1,6.95,7Z"
-      style="fill-rule:evenodd"
+      style="fill-rule: evenodd"
     />
   </svg>
 </template>
diff --git a/client/src/components/icons/TextIcon.vue b/client/src/components/icons/TextIcon.vue
index 7c24a5d7..97718c82 100644
--- a/client/src/components/icons/TextIcon.vue
+++ b/client/src/components/icons/TextIcon.vue
@@ -1,9 +1,6 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    id="shape"
-  ><title>text</title>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="shape">
+    <title>text</title>
     <path
       d="M94.86,40.16a2.5,2.5,0,0,0-2.5,2.5v6.6a19.35,19.35,0,0,0-16.08-9.1c-11,0-19.92,9.95-19.92,22.17S65.29,84.5,76.28,84.5a19.35,19.35,0,0,0,16.08-9.1V82a2.5,2.5,0,0,0,5,0V42.66A2.5,2.5,0,0,0,94.86,40.16ZM76.28,79.5c-8.23,0-14.92-7.7-14.92-17.17s6.69-17.17,14.92-17.17S91.2,52.86,91.2,62.33,84.51,79.5,76.28,79.5Z"
     />
diff --git a/client/src/components/icons/Tick.vue b/client/src/components/icons/Tick.vue
index cde654f8..508911f9 100644
--- a/client/src/components/icons/Tick.vue
+++ b/client/src/components/icons/Tick.vue
@@ -1,9 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    id="shape"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="shape">
     <polygon points="41.46 77.72 10 46.26 16.89 39.37 41.46 63.93 83.11 22.28 90 29.18 41.46 77.72" />
   </svg>
 </template>
diff --git a/client/src/components/icons/TickCircleIcon.vue b/client/src/components/icons/TickCircleIcon.vue
index 3bd6c5e7..1544cac2 100644
--- a/client/src/components/icons/TickCircleIcon.vue
+++ b/client/src/components/icons/TickCircleIcon.vue
@@ -1,8 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <path
       d="M50,6.48A43.62,43.62,0,0,0,6.56,47.08S6.5,48.46,6.5,50s.06,2.83.06,2.92A43.52,43.52,0,1,0,50,6.48Zm0,82.15A38.62,38.62,0,1,1,88.6,50,38.67,38.67,0,0,1,50,88.62Z"
     />
diff --git a/client/src/components/icons/TitleIcon.vue b/client/src/components/icons/TitleIcon.vue
index e1e151a3..e6762d7c 100644
--- a/client/src/components/icons/TitleIcon.vue
+++ b/client/src/components/icons/TitleIcon.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="50"
-    height="50"
-    viewBox="0 0 50 50"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M40.875 6.50635H9.125C8.96084 6.50634 8.79829 6.53866 8.64663 6.60147C8.49497 6.66429 8.35716 6.75636 8.24109 6.87244C8.12501 6.98851 8.03294 7.12632 7.97013 7.27798C7.90731 7.42964 7.87499 7.59219 7.875 7.75635V13.8828C7.875 14.2143 8.0067 14.5323 8.24112 14.7667C8.47554 15.0011 8.79348 15.1328 9.125 15.1328C9.45652 15.1328 9.77446 15.0011 10.0089 14.7667C10.2433 14.5323 10.375 14.2143 10.375 13.8828V9.00635H23.75V40.9936H18.4312C18.0996 40.9936 17.7817 41.1253 17.5473 41.3598C17.3128 41.5942 17.1812 41.9121 17.1812 42.2436C17.1812 42.5752 17.3128 42.8931 17.5473 43.1275C17.7817 43.3619 18.0996 43.4936 18.4312 43.4936H31.5688C31.9004 43.4936 32.2183 43.3619 32.4527 43.1275C32.6872 42.8931 32.8189 42.5752 32.8189 42.2436C32.8189 41.9121 32.6872 41.5942 32.4527 41.3598C32.2183 41.1253 31.9004 40.9936 31.5688 40.9936H26.25V9.00635H39.625V13.8828C39.625 14.2143 39.7567 14.5323 39.9911 14.7667C40.2255 15.0011 40.5435 15.1328 40.875 15.1328C41.2065 15.1328 41.5245 15.0011 41.7589 14.7667C41.9933 14.5323 42.125 14.2143 42.125 13.8828V7.75635C42.125 7.59219 42.0927 7.42964 42.0299 7.27798C41.9671 7.12632 41.875 6.98851 41.7589 6.87244C41.6428 6.75636 41.505 6.66429 41.3534 6.60147C41.2017 6.53866 41.0392 6.50634 40.875 6.50635V6.50635Z"
       fill="#333333"
diff --git a/client/src/components/icons/TrashIcon.vue b/client/src/components/icons/TrashIcon.vue
index 8963ed36..f4c9518f 100644
--- a/client/src/components/icons/TrashIcon.vue
+++ b/client/src/components/icons/TrashIcon.vue
@@ -1,8 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <path
       d="M78,81.62A8.37,8.37,0,0,1,69.64,90H30.36A8.37,8.37,0,0,1,22,81.62V23H78V81.62ZM36.2,14.92A4.91,4.91,0,0,1,41.1,10H58.9a4.91,4.91,0,0,1,4.9,4.9V18H36.2ZM87.5,18H68.79V14.92A9.9,9.9,0,0,0,58.9,5H41.1a9.9,9.9,0,0,0-9.89,9.89V18H12.5a2.5,2.5,0,1,0,0,5H17V81.62A13.37,13.37,0,0,0,30.36,95H69.64A13.37,13.37,0,0,0,83,81.62V23H87.5a2.5,2.5,0,0,0,0-5Z"
     />
diff --git a/client/src/components/icons/UserIcon.vue b/client/src/components/icons/UserIcon.vue
index e007ce34..55a3f9ed 100644
--- a/client/src/components/icons/UserIcon.vue
+++ b/client/src/components/icons/UserIcon.vue
@@ -1,9 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    data-cy="user-icon"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" data-cy="user-icon">
     <path
       d="M50,0A50.12,50.12,0,0,0,.07,46.65S0,48.23,0,50s.07,3.25.07,3.36A50,50,0,1,0,50,0ZM24.14,86V79.84A15.18,15.18,0,0,1,39.31,64.67H60.69A15.18,15.18,0,0,1,75.86,79.84V86a44.27,44.27,0,0,1-51.72,0Zm57.47-5V79.84A20.94,20.94,0,0,0,60.69,58.93H39.31A20.94,20.94,0,0,0,18.39,79.84v1.31a44.4,44.4,0,1,1,63.22-.06Z"
     />
diff --git a/client/src/components/icons/VideoIcon.vue b/client/src/components/icons/VideoIcon.vue
index 8d1dc132..b5128dde 100644
--- a/client/src/components/icons/VideoIcon.vue
+++ b/client/src/components/icons/VideoIcon.vue
@@ -1,9 +1,6 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 100 100"
-    id="shape"
-  ><title>video</title>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" id="shape">
+    <title>video</title>
     <path
       d="M70.79,83.87H29.21C7.12,83.87,2.8,74.31,2.8,57.79V42.21c0-8.62,0-14.84,3.63-19.45s10.31-6.63,22.78-6.63H70.79c12.18,0,18.67,1.8,22.39,6.22h0c3.74,4.45,4,10.75,4,19.86V57.79c0,10.54-1.76,16.72-5.89,20.67S81.35,83.87,70.79,83.87ZM29.21,20.53c-10.81,0-16.59,1.48-19.33,4.95s-2.68,9-2.68,16.73V57.79c0,15,3.18,21.68,22,21.68H70.79c9.31,0,14.37-1.21,17.48-4.19S92.8,67,92.8,57.79V42.21c0-8.14-.21-13.72-3-17s-8.43-4.65-19-4.65Zm13.34,44a5.1,5.1,0,0,1-5.1-5.1V39.77a5.1,5.1,0,0,1,7.45-4.53L63.79,45a5.1,5.1,0,0,1,0,9.05L44.92,64A5.13,5.13,0,0,1,42.55,64.55Zm0-25.48a.7.7,0,0,0-.7.7V59.45a.7.7,0,0,0,1,.62L61.76,50.2a.7.7,0,0,0,0-1.25L42.88,39.15A.7.7,0,0,0,42.55,39.07Z"
     />
diff --git a/client/src/components/illustrations/ContentsIllustration.vue b/client/src/components/illustrations/ContentsIllustration.vue
index 3dac53b2..941a41d3 100644
--- a/client/src/components/illustrations/ContentsIllustration.vue
+++ b/client/src/components/illustrations/ContentsIllustration.vue
@@ -191,64 +191,78 @@
 </template>
 
 <style scoped lang="scss">
-  .cls-1 {
-    fill: none;
-    clip-rule: evenodd;
-  }
+.cls-1 {
+  fill: none;
+  clip-rule: evenodd;
+}
 
-  .cls-10, .cls-11, .cls-12, .cls-14, .cls-16, .cls-2, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9 {
-    fill-rule: evenodd;
-  }
+.cls-10,
+.cls-11,
+.cls-12,
+.cls-14,
+.cls-16,
+.cls-2,
+.cls-4,
+.cls-5,
+.cls-6,
+.cls-7,
+.cls-8,
+.cls-9 {
+  fill-rule: evenodd;
+}
 
-  .cls-2 {
-    fill: url(#linear-gradient);
-  }
+.cls-2 {
+  fill: url(#linear-gradient);
+}
 
-  .cls-12, .cls-3 {
-    fill: #013e62;
-  }
+.cls-12,
+.cls-3 {
+  fill: #013e62;
+}
 
-  .cls-4 {
-    fill: #004e7c;
-  }
+.cls-4 {
+  fill: #004e7c;
+}
 
-  .cls-13, .cls-5 {
-    fill: #fff;
-  }
+.cls-13,
+.cls-5 {
+  fill: #fff;
+}
 
-  .cls-6 {
-    fill: #ef624d;
-  }
+.cls-6 {
+  fill: #ef624d;
+}
 
-  .cls-7 {
-    fill: #60bea2;
-  }
+.cls-7 {
+  fill: #60bea2;
+}
 
-  .cls-8 {
-    fill: #ffb800;
-  }
+.cls-8 {
+  fill: #ffb800;
+}
 
-  .cls-9 {
-    fill: #ff9f85;
-  }
+.cls-9 {
+  fill: #ff9f85;
+}
 
-  .cls-10 {
-    fill: #c64946;
-  }
+.cls-10 {
+  fill: #c64946;
+}
 
-  .cls-11 {
-    fill: #ed553d;
-  }
+.cls-11 {
+  fill: #ed553d;
+}
 
-  .cls-14 {
-    fill: #ffb49f;
-  }
+.cls-14 {
+  fill: #ffb49f;
+}
 
-  .cls-15 {
-    clip-path: url(#clip-path);
-  }
+.cls-15 {
+  clip-path: url(#clip-path);
+}
 
-  .cls-16, .cls-17 {
-    fill: #824244;
-  }
+.cls-16,
+.cls-17 {
+  fill: #824244;
+}
 </style>
diff --git a/client/src/components/illustrations/HelloIllustration.vue b/client/src/components/illustrations/HelloIllustration.vue
index a466938e..9da6e980 100644
--- a/client/src/components/illustrations/HelloIllustration.vue
+++ b/client/src/components/illustrations/HelloIllustration.vue
@@ -1,11 +1,5 @@
 <template>
-  <svg
-    width="378"
-    height="505"
-    viewBox="0 0 378 505"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="378" height="505" viewBox="0 0 378 505" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M77.314 54.9218C75.5753 54.942 73.8456 54.6715 72.1981 54.1219C70.5472 53.5344 68.9978 52.6989 67.6042 51.6449L66.8473 51.0773L72.3808 42.3045L73.3205 43.1302C73.7806 43.5581 74.3099 43.907 74.8866 44.1622C75.3693 44.348 75.8825 44.4442 76.4004 44.4461C77.4445 44.4461 78.097 44.0848 78.5147 43.2334L78.8018 42.6657L66.6907 14.567H79.7675L85.1183 29.3517L89.66 14.567H102.397L89.9993 46.2264C88.8247 49.1421 87.1542 51.3611 85.04 52.7802C82.9519 54.1993 80.3418 54.9218 77.314 54.9218ZM69.6663 50.5354C70.6721 51.2089 71.7595 51.7551 72.9028 52.161C74.3352 52.6242 75.833 52.8594 77.3401 52.8576C79.9502 52.8576 82.1428 52.2642 83.8916 51.0773C85.6403 49.8904 87.0498 48.0068 88.0678 45.4782L99.3175 16.657H91.2261L85.301 36.0087L78.3058 16.657H69.9012L81.1248 42.7689L80.3679 44.1881C79.6109 45.7104 78.2275 46.5361 76.3743 46.5361C75.5793 46.5328 74.7916 46.3841 74.0513 46.0974C73.6325 45.9181 73.2307 45.7023 72.8506 45.4524L69.6663 50.5354Z"
       fill="white"
@@ -22,18 +16,9 @@
       d="M168.622 27.4863L181.339 14.5235H168.019L157.854 24.314V3.66544H146.724V44.6367H157.854V37.213L160.555 34.495L168.762 44.6367H182.277L168.622 27.4863Z"
       fill="white"
     />
-    <path
-      d="M195.912 14.5235H184.782V44.6367H195.912V14.5235Z"
-      fill="white"
-    />
-    <path
-      d="M213.595 3.66544H202.465V44.6367H213.595V3.66544Z"
-      fill="white"
-    />
-    <path
-      d="M231.278 3.66544H220.148V44.6367H231.278V3.66544Z"
-      fill="white"
-    />
+    <path d="M195.912 14.5235H184.782V44.6367H195.912V14.5235Z" fill="white" />
+    <path d="M213.595 3.66544H202.465V44.6367H213.595V3.66544Z" fill="white" />
+    <path d="M231.278 3.66544H220.148V44.6367H231.278V3.66544Z" fill="white" />
     <path
       d="M256.907 14.0351C253.63 14.0351 250.962 14.9047 248.961 16.622V3.66542H237.831V44.6367H248.467V42.2409C250.457 44.1801 253.229 45.1253 256.907 45.1253C258.865 45.1551 260.809 44.7983 262.625 44.0757C264.442 43.3532 266.094 42.2795 267.486 40.9175C270.349 38.0572 271.863 34.1179 271.863 29.5258C271.863 24.9603 270.349 21.0467 267.485 18.2078C264.77 15.5171 261.013 14.0351 256.907 14.0351ZM254.71 36.2401C251.118 36.2401 248.797 33.6046 248.797 29.5258C248.797 25.513 251.118 22.9203 254.71 22.9203C258.302 22.9203 260.623 25.513 260.623 29.5258C260.623 33.6046 258.302 36.2401 254.71 36.2401V36.2401Z"
       fill="white"
@@ -50,7 +35,7 @@
       d="M194.372 2.52267C194.886 3.04396 195.288 3.66334 195.553 4.3431C195.818 5.02286 195.94 5.74879 195.912 6.47668C195.938 7.20432 195.815 7.92959 195.55 8.60903C195.285 9.28847 194.884 9.90808 194.372 10.4307C193.353 11.4622 192.012 11.9534 190.372 11.9534C189.632 11.9788 188.895 11.8572 188.203 11.5956C187.512 11.3341 186.881 10.9379 186.347 10.4307C185.824 9.91422 185.415 9.29624 185.146 8.61571C184.876 7.93519 184.752 7.20687 184.782 6.47668C184.755 5.74676 184.88 5.01912 185.149 4.33892C185.418 3.65873 185.826 3.04052 186.347 2.52267C186.881 2.01545 187.512 1.61932 188.203 1.35776C188.895 1.0962 189.632 0.974546 190.372 1.00001C192.036 1.00001 193.353 1.49119 194.372 2.52267Z"
       fill="white"
     />
-    <g style="mix-blend-mode:multiply">
+    <g style="mix-blend-mode: multiply">
       <path
         fill-rule="evenodd"
         clip-rule="evenodd"
@@ -58,7 +43,7 @@
         fill="#616161"
       />
     </g>
-    <g style="mix-blend-mode:multiply">
+    <g style="mix-blend-mode: multiply">
       <path
         fill-rule="evenodd"
         clip-rule="evenodd"
@@ -340,18 +325,8 @@
       d="M340.086 386.772C340.086 385.95 339.759 385.161 339.177 384.579C338.595 383.998 337.805 383.671 336.982 383.671H23.083C22.2598 383.671 21.4704 383.998 20.8883 384.579C20.3062 385.161 19.9792 385.95 19.9792 386.772V386.772C19.9792 387.595 20.3062 388.384 20.8883 388.965C21.4704 389.547 22.2598 389.874 23.083 389.874H336.982C337.805 389.874 338.595 389.547 339.177 388.965C339.759 388.384 340.086 387.595 340.086 386.772V386.772H340.086Z"
       fill="white"
     />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M291.601 385.975H286.351V503.943H291.601V385.975Z"
-      fill="white"
-    />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M72.1606 386.881H66.9111V503.93H72.1606V386.881Z"
-      fill="white"
-    />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M291.601 385.975H286.351V503.943H291.601V385.975Z" fill="white" />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M72.1606 386.881H66.9111V503.93H72.1606V386.881Z" fill="white" />
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
diff --git a/client/src/components/illustrations/HelloMyDHAIllustration.vue b/client/src/components/illustrations/HelloMyDHAIllustration.vue
index 0137ea26..b9fc97d6 100644
--- a/client/src/components/illustrations/HelloMyDHAIllustration.vue
+++ b/client/src/components/illustrations/HelloMyDHAIllustration.vue
@@ -1,9 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    viewBox="0 0 378 505"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 378 505">
     <defs>
       <clipPath id="b">
         <path
diff --git a/client/src/components/illustrations/HelloMyDHFIllustration.vue b/client/src/components/illustrations/HelloMyDHFIllustration.vue
index ec643650..0419a106 100644
--- a/client/src/components/illustrations/HelloMyDHFIllustration.vue
+++ b/client/src/components/illustrations/HelloMyDHFIllustration.vue
@@ -1,9 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    viewBox="0 0 378 505"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 378 505">
     <defs>
       <clipPath id="b">
         <path
diff --git a/client/src/components/illustrations/HelloMyKVIllustration.vue b/client/src/components/illustrations/HelloMyKVIllustration.vue
index b0d7e9aa..20752108 100644
--- a/client/src/components/illustrations/HelloMyKVIllustration.vue
+++ b/client/src/components/illustrations/HelloMyKVIllustration.vue
@@ -1,9 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    viewBox="0 0 378 505"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 378 505">
     <defs>
       <clipPath id="b">
         <path
diff --git a/client/src/components/illustrations/PortfolioIllustration.vue b/client/src/components/illustrations/PortfolioIllustration.vue
index 6226c1f4..21dced47 100644
--- a/client/src/components/illustrations/PortfolioIllustration.vue
+++ b/client/src/components/illustrations/PortfolioIllustration.vue
@@ -1,8 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 1400 1000"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1000">
     <defs>
       <linearGradient
         x1="698.62638"
@@ -12,14 +9,8 @@
         gradientUnits="userSpaceOnUse"
         id="linear-gradient"
       >
-        <stop
-          offset="0"
-          stop-color="#fff"
-        />
-        <stop
-          offset="1"
-          stop-color="#e6f4f9"
-        />
+        <stop offset="0" stop-color="#fff" />
+        <stop offset="1" stop-color="#e6f4f9" />
       </linearGradient>
     </defs>
     <g id="hintergrund">
@@ -28,10 +19,7 @@
         d="M790.58048,193.00863C668.12186,163.85091,544.06485,204.9364,487.632,322.51394c-18.8724,39.32132-27.20646,84.87125-54.41879,119.85436C388.8747,499.36968,310.57637,508.31035,273.24433,572.437c-18.87234,32.41847-26.26685,70.57793-23.81744,107.81165C258.17366,813.202,396.18153,880.93469,510.86738,904.36176c57.8334,11.8138,120.62074,12.00015,179.52571,15.07359,15.71577.82041,31.49658,1.69709,47.29807,2.4723,116.12768,5.69747,233.37033,5.90715,334.19485-62.20929,22.95567-15.509,47.53642-32.99747,61.01751-57.89225,57.95657-107.02874-37.35371-181.9064-86.2334-264.78937C986.76151,435.43276,1004.73463,292.0828,885.71433,232.19c-28.474-14.32891-95.13385-39.18137-95.13385-39.18137Z"
       />
     </g>
-    <g
-      data-name="Layer 3"
-      id="Layer_3"
-    >
+    <g data-name="Layer 3" id="Layer_3">
       <polygon
         class="cls-2"
         points="598.832 466.839 585.223 466.839 585.223 923.515 598.832 923.515 598.832 466.839 598.832 466.839"
@@ -185,59 +173,73 @@
 </template>
 
 <style scoped lang="scss">
-  .cls-1, .cls-12, .cls-14, .cls-16, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7 {
-    fill-rule: evenodd;
-  }
+.cls-1,
+.cls-12,
+.cls-14,
+.cls-16,
+.cls-2,
+.cls-3,
+.cls-4,
+.cls-5,
+.cls-6,
+.cls-7 {
+  fill-rule: evenodd;
+}
 
-  .cls-1 {
-    fill: url(#linear-gradient);
-  }
+.cls-1 {
+  fill: url(#linear-gradient);
+}
 
-  .cls-11, .cls-2 {
-    fill: #fff;
-  }
+.cls-11,
+.cls-2 {
+  fill: #fff;
+}
 
-  .cls-13, .cls-3 {
-    fill: #ffb800;
-  }
+.cls-13,
+.cls-3 {
+  fill: #ffb800;
+}
 
-  .cls-17, .cls-4 {
-    fill: #ffa861;
-  }
+.cls-17,
+.cls-4 {
+  fill: #ffa861;
+}
 
-  .cls-15, .cls-5 {
-    fill: #4fa399;
-  }
+.cls-15,
+.cls-5 {
+  fill: #4fa399;
+}
 
-  .cls-18, .cls-6 {
-    fill: #013e62;
-  }
+.cls-18,
+.cls-6 {
+  fill: #013e62;
+}
 
-  .cls-7 {
-    fill: #c64946;
-  }
+.cls-7 {
+  fill: #c64946;
+}
 
-  .cls-8 {
-    fill: #be3d3a;
-  }
+.cls-8 {
+  fill: #be3d3a;
+}
 
-  .cls-9 {
-    fill: none;
-  }
+.cls-9 {
+  fill: none;
+}
 
-  .cls-10 {
-    fill: #eda11f;
-  }
+.cls-10 {
+  fill: #eda11f;
+}
 
-  .cls-12 {
-    fill: #ef624d;
-  }
+.cls-12 {
+  fill: #ef624d;
+}
 
-  .cls-14 {
-    fill: #60bea2;
-  }
+.cls-14 {
+  fill: #60bea2;
+}
 
-  .cls-16 {
-    fill: #ffb56e;
-  }
+.cls-16 {
+  fill: #ffb56e;
+}
 </style>
diff --git a/client/src/components/illustrations/RoomsIllustration.vue b/client/src/components/illustrations/RoomsIllustration.vue
index 88e61c05..2f0b4728 100644
--- a/client/src/components/illustrations/RoomsIllustration.vue
+++ b/client/src/components/illustrations/RoomsIllustration.vue
@@ -1,8 +1,5 @@
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 1400 1000"
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1000">
     <defs>
       <linearGradient
         x1="701.07488"
@@ -12,14 +9,8 @@
         gradientUnits="userSpaceOnUse"
         id="linear-gradient"
       >
-        <stop
-          offset="0"
-          stop-color="#fff"
-        />
-        <stop
-          offset="1"
-          stop-color="#e6f4f9"
-        />
+        <stop offset="0" stop-color="#fff" />
+        <stop offset="1" stop-color="#e6f4f9" />
       </linearGradient>
     </defs>
     <g id="hintergrund">
@@ -28,10 +19,7 @@
         d="M680.89352,920.77549c-115.574,2.297-364.442-1.286-477.861-77.37818-121.207-81.31494-103.754-244.30383-42.718-370.52294,61.724-127.63892,171.318-171.035,280.697-242.27393,113.939-74.20813,180.879-149.62817,321.509-159.134,169.4-11.45118,271.191,122.5,365.855,247.33886,114.6272,151.16712,244.02807,357.62818,76.353,524.592-119.454,118.94812-328.156,73.49-523.835,77.37818Z"
       />
     </g>
-    <g
-      data-name="Layer 1"
-      id="Layer_1"
-    >
+    <g data-name="Layer 1" id="Layer_1">
       <path
         class="cls-2"
         d="M984.82349,795.9235l-55.616,34.58789,6.21814,17.582a155.23,155.23,0,0,1,28.48168-6.7854,1.58747,1.58747,0,0,1,.47852,3.13868,152.24676,152.24676,0,0,0-27.901,6.64135l3.9032,11.03638c6.80029-2.51917,13.24634-4.52087,19.49487-6.457,2.75488-.85352,5.51856-1.71,8.33008-2.61426a1.588,1.588,0,0,1,.97266,3.02344c-2.82227.9082-5.59668,1.76758-8.36231,2.624-6.22095,1.92774-12.63769,3.92066-19.376,6.41931l2.93921,8.31043-15.17907,19.84619s-8.952,2.731-18.60608,5.676a76.76728,76.76728,0,0,0-38.53992,26.73975c-2.605,3.39893-4.497,5.8689-4.497,5.8689h98.862l45.264-53.27173Z"
@@ -261,71 +249,89 @@
 </template>
 
 <style scoped lang="scss">
-  .cls-1, .cls-10, .cls-11, .cls-13, .cls-16, .cls-17, .cls-18, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9 {
-    fill-rule: evenodd;
-  }
+.cls-1,
+.cls-10,
+.cls-11,
+.cls-13,
+.cls-16,
+.cls-17,
+.cls-18,
+.cls-2,
+.cls-3,
+.cls-4,
+.cls-5,
+.cls-6,
+.cls-7,
+.cls-8,
+.cls-9 {
+  fill-rule: evenodd;
+}
 
-  .cls-1 {
-    fill: url(#linear-gradient);
-  }
+.cls-1 {
+  fill: url(#linear-gradient);
+}
 
-  .cls-2 {
-    fill: #0d0d0d;
-  }
+.cls-2 {
+  fill: #0d0d0d;
+}
 
-  .cls-15, .cls-3 {
-    fill: #fff;
-  }
+.cls-15,
+.cls-3 {
+  fill: #fff;
+}
 
-  .cls-4 {
-    fill: #d0e5ea;
-  }
+.cls-4 {
+  fill: #d0e5ea;
+}
 
-  .cls-5 {
-    fill: #abddce;
-  }
+.cls-5 {
+  fill: #abddce;
+}
 
-  .cls-14, .cls-6 {
-    fill: #824244;
-  }
+.cls-14,
+.cls-6 {
+  fill: #824244;
+}
 
-  .cls-12, .cls-7 {
-    fill: #eda11f;
-  }
+.cls-12,
+.cls-7 {
+  fill: #eda11f;
+}
 
-  .cls-8 {
-    fill: #ffb800;
-  }
+.cls-8 {
+  fill: #ffb800;
+}
 
-  .cls-9 {
-    fill: #ef624d;
-  }
+.cls-9 {
+  fill: #ef624d;
+}
 
-  .cls-10, .cls-20 {
-    fill: #013e62;
-  }
+.cls-10,
+.cls-20 {
+  fill: #013e62;
+}
 
-  .cls-11 {
-    fill: #004e7c;
-  }
+.cls-11 {
+  fill: #004e7c;
+}
 
-  .cls-13 {
-    fill: #a75557;
-  }
+.cls-13 {
+  fill: #a75557;
+}
 
-  .cls-16 {
-    fill: #ffb49f;
-  }
+.cls-16 {
+  fill: #ffb49f;
+}
 
-  .cls-17 {
-    fill: #4fa399;
-  }
+.cls-17 {
+  fill: #4fa399;
+}
 
-  .cls-18 {
-    fill: #60bea2;
-  }
+.cls-18 {
+  fill: #60bea2;
+}
 
-  .cls-19 {
-    fill: #ff9f85;
-  }
+.cls-19 {
+  fill: #ff9f85;
+}
 </style>
diff --git a/client/src/components/instruments/FilterEntry.vue b/client/src/components/instruments/FilterEntry.vue
index 05bd724c..da29c1f9 100644
--- a/client/src/components/instruments/FilterEntry.vue
+++ b/client/src/components/instruments/FilterEntry.vue
@@ -1,176 +1,164 @@
 <template>
-  <a
-    :class="typeClass"
-    class="filter-entry"
-    data-cy="filter-entry"
-    :style="categoryStyle"
-  >
+  <a :class="typeClass" class="filter-entry" data-cy="filter-entry" :style="categoryStyle">
     <span class="filter-entry__text">{{ text }}</span>
-    <span
-      :style="activeStyle"
-      class="filter-entry__icon-wrapper"
-    >
-      <chevron-right
-        :style="{fill: category.foreground}"
-        class="filter-entry__icon"
-      />
+    <span :style="activeStyle" class="filter-entry__icon-wrapper">
+      <chevron-right :style="{ fill: category.foreground }" class="filter-entry__icon" />
     </span>
-
   </a>
 </template>
 
 <script>
-  import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
+import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
 
-  const ChevronRight = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronRight');
+const ChevronRight = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronRight');
 
-  export default {
-    props: {
-      text: {
-        type: String,
-        required: true,
-      },
-      id: {
-        type: String,
-        default: '',
-      },
-      isCategory: {
-        type: Boolean,
-        default: false,
-      },
-      category: {
-        type: Object,
-        default: () => ({}),
-      },
+export default {
+  props: {
+    text: {
+      type: String,
+      required: true,
     },
-
-    components: {
-      ChevronRight,
+    id: {
+      type: String,
+      default: '',
     },
+    isCategory: {
+      type: Boolean,
+      default: false,
+    },
+    category: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
 
-    apollo: {
+  components: {
+    ChevronRight,
+  },
+
+  apollo: {
+    instrumentFilter: {
+      query: INSTRUMENT_FILTER_QUERY,
+    },
+  },
+
+  data() {
+    return {
       instrumentFilter: {
-        query: INSTRUMENT_FILTER_QUERY,
+        currentFilter: '',
       },
-    },
+    };
+  },
 
-    data() {
+  computed: {
+    isActive() {
+      if (!this.instrumentFilter.currentFilter) {
+        return this.id === '';
+      }
+      // eslint-disable-next-line
+      const [_, identifier] = this.instrumentFilter.currentFilter.split(':');
+      return this.id === identifier;
+    },
+    // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+    activeStyle() {
+      if (this.isActive) {
+        return {
+          backgroundColor: this.category.background,
+        };
+      }
+      return {};
+    },
+    // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+    categoryStyle() {
+      if (this.isCategory) {
+        return {
+          color: this.category.foreground,
+        };
+      }
+      return {};
+    },
+    // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+    typeClass() {
       return {
-        instrumentFilter: {
-          currentFilter: '',
-        },
+        'filter-entry--active': this.isActive,
+        'filter-entry--category': this.isCategory,
       };
     },
-
-    computed: {
-      isActive() {
-        if (!this.instrumentFilter.currentFilter) {
-          return this.id === '';
-        }
-        // eslint-disable-next-line
-        const [_, identifier] = this.instrumentFilter.currentFilter.split(':');
-        return this.id === identifier;
-      },
-      // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
-      activeStyle() {
-        if (this.isActive) {
-          return {
-            backgroundColor: this.category.background,
-          };
-        }
-        return {};
-      },
-      // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
-      categoryStyle() {
-        if (this.isCategory) {
-          return {
-            color: this.category.foreground,
-          };
-        }
-        return {};
-      },
-      // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
-      typeClass() {
-        return {
-          'filter-entry--active': this.isActive,
-          'filter-entry--category': this.isCategory,
-        };
-      },
-    },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .filter-entry {
+.filter-entry {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+
+  &__text {
+    @include sub-heading;
+    line-height: 1.5;
+    color: inherit;
+  }
+
+  &__icon-wrapper {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    cursor: pointer;
+    justify-content: center;
+    height: 20px;
+    width: 20px;
+    border-radius: 10px;
+  }
 
-    &__text {
-      @include sub-heading;
-      line-height: 1.5;
-      color: inherit;
+  &__icon {
+    width: 10px;
+    height: 10px;
+  }
+
+  $root: &;
+
+  @mixin filter-block($color) {
+    &#{$root}--category {
+      color: $color;
     }
 
-    &__icon-wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 20px;
-      width: 20px;
-      border-radius: 10px;
-    }
-
-    &__icon {
-      width: 10px;
-      height: 10px;
-    }
-
-    $root: &;
-
-    @mixin filter-block($color) {
-      &#{$root}--category {
-        color: $color;
-      }
-
-      &#{$root}--active {
-        #{$root}__icon-wrapper {
-          background-color: $color;
-        }
-      }
-
-      #{$root}__icon {
-        fill: $color;
-      }
-    }
-
-    &--language-communication {
-      @include filter-block($color-accent-1-dark);
-    }
-
-    &--society {
-      @include filter-block($color-accent-2-dark);
-    }
-
-    &--interdisciplinary {
-      @include filter-block($color-accent-4-dark);
-    }
-
-    &--active {
-      #{$root}__text {
-        font-weight: 600;
-      }
-
+    &#{$root}--active {
       #{$root}__icon-wrapper {
-        background-color: black;
+        background-color: $color;
       }
+    }
 
-      #{$root}__icon {
-        fill: white;
-      }
+    #{$root}__icon {
+      fill: $color;
     }
   }
+
+  &--language-communication {
+    @include filter-block($color-accent-1-dark);
+  }
+
+  &--society {
+    @include filter-block($color-accent-2-dark);
+  }
+
+  &--interdisciplinary {
+    @include filter-block($color-accent-4-dark);
+  }
+
+  &--active {
+    #{$root}__text {
+      font-weight: 600;
+    }
+
+    #{$root}__icon-wrapper {
+      background-color: black;
+    }
+
+    #{$root}__icon {
+      fill: white;
+    }
+  }
+}
 </style>
diff --git a/client/src/components/instruments/FilterGroup.vue b/client/src/components/instruments/FilterGroup.vue
index 413c5b83..e7cbad14 100644
--- a/client/src/components/instruments/FilterGroup.vue
+++ b/client/src/components/instruments/FilterGroup.vue
@@ -23,76 +23,76 @@
 </template>
 
 <script>
-  import FilterEntry from '@/components/instruments/FilterEntry';
+import FilterEntry from '@/components/instruments/FilterEntry';
 
-  import SET_FILTER_MUTATION from 'gql/local/mutations/setInstrumentFilter.gql';
-  import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
+import SET_FILTER_MUTATION from 'gql/local/mutations/setInstrumentFilter.gql';
+import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
 
-  export default {
-    props: {
-      title: {
-        type: String,
-        default: '',
-      },
-      types: {
-        type: Array,
-        default: () => [],
-      },
-      category: {
-        type: Object,
-        default: () => ({}),
-      },
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
     },
-    components: {
-      FilterEntry,
+    types: {
+      type: Array,
+      default: () => [],
     },
-
-    apollo: {
-      instrumentFilter: {
-        query: INSTRUMENT_FILTER_QUERY
-      }
+    category: {
+      type: Object,
+      default: () => ({}),
     },
-
-    data() {
-      return {
-        instrumentFilter: {
-          currentFilter: ''
-        }
-      };
   },
-    inheritAttrs: false,
+  components: {
+    FilterEntry,
+  },
 
-    methods: {
-      setCategoryFilter(category) {
-        if (category) {
-          this.setFilter(`category:${category}`);
-        } else {
-          this.setFilter(``);
-        }
+  apollo: {
+    instrumentFilter: {
+      query: INSTRUMENT_FILTER_QUERY,
+    },
+  },
+
+  data() {
+    return {
+      instrumentFilter: {
+        currentFilter: '',
       },
-      setFilter(filter) {
-        this.$apollo.mutate({
-          mutation: SET_FILTER_MUTATION,
-          variables: {
-            filter
-          }
-        });
+    };
+  },
+  inheritAttrs: false,
+
+  methods: {
+    setCategoryFilter(category) {
+      if (category) {
+        this.setFilter(`category:${category}`);
+      } else {
+        this.setFilter(``);
       }
     },
-  };
+    setFilter(filter) {
+      this.$apollo.mutate({
+        mutation: SET_FILTER_MUTATION,
+        variables: {
+          filter,
+        },
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .filter-group {
-    border-bottom: 1px solid $color-silver;
-    padding: $medium-spacing 0;
-    display: flex;
-    flex-direction: column;
+.filter-group {
+  border-bottom: 1px solid $color-silver;
+  padding: $medium-spacing 0;
+  display: flex;
+  flex-direction: column;
 
-    &__children {
-      padding-left: $medium-spacing;
-    }
+  &__children {
+    padding-left: $medium-spacing;
   }
+}
 </style>
diff --git a/client/src/components/instruments/InstrumentEntry.vue b/client/src/components/instruments/InstrumentEntry.vue
index 16137d9c..172f7cd2 100644
--- a/client/src/components/instruments/InstrumentEntry.vue
+++ b/client/src/components/instruments/InstrumentEntry.vue
@@ -2,99 +2,94 @@
   <div
     :style="{
       color: instrument.type.category.foreground,
-      backgroundColor: instrument.type.category.background
+      backgroundColor: instrument.type.category.background,
     }"
     class="instrument-entry"
   >
     <h4
       class="instrument-entry__category"
-      :style="{color: instrument.type.category.foreground}"
+      :style="{ color: instrument.type.category.foreground }"
       data-cy="instrument-subheader"
     >
       {{ categoryName }}
     </h4>
-    <h3
-      class="instrument-entry__title"
-    >
+    <h3 class="instrument-entry__title">
       {{ instrument.title }}
     </h3>
   </div>
 </template>
 
 <script>
-  import {INTERDISCIPLINARY, LANGUAGE_COMMUNICATION, SOCIETY} from '@/consts/instrument.consts';
-  import {instrumentCategory} from '@/helpers/instrumentType';
+import { INTERDISCIPLINARY, LANGUAGE_COMMUNICATION, SOCIETY } from '@/consts/instrument.consts';
+import { instrumentCategory } from '@/helpers/instrumentType';
 
-  // todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
-  export default {
-    props: {
-      instrument: {
-        type: Object,
-        required: true,
-        default: undefined,
-      },
+// todo: use dynamic css class with v-bind once we're on Vue 3: https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+export default {
+  props: {
+    instrument: {
+      type: Object,
+      required: true,
+      default: undefined,
     },
+  },
 
-    computed: {
-      typeClass() {
-        return {
-          'instrument-entry__language-communication': this.instrument.type.category === LANGUAGE_COMMUNICATION,
-          'instrument-entry__society': this.instrument.type.category === SOCIETY,
-          'instrument-entry__interdisciplinary': this.instrument.type.category === INTERDISCIPLINARY,
-        };
-      },
-      categoryName() {
-        return instrumentCategory(this.instrument);
-      },
+  computed: {
+    typeClass() {
+      return {
+        'instrument-entry__language-communication': this.instrument.type.category === LANGUAGE_COMMUNICATION,
+        'instrument-entry__society': this.instrument.type.category === SOCIETY,
+        'instrument-entry__interdisciplinary': this.instrument.type.category === INTERDISCIPLINARY,
+      };
     },
-  };
+    categoryName() {
+      return instrumentCategory(this.instrument);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .instrument-entry {
-    padding: $medium-spacing;
-    margin-bottom: $medium-spacing;
-    border-radius: 8px;
+.instrument-entry {
+  padding: $medium-spacing;
+  margin-bottom: $medium-spacing;
+  border-radius: 8px;
 
-    &__title {
-      @include heading-3;
-      margin-bottom: 0;
-    }
+  &__title {
+    @include heading-3;
+    margin-bottom: 0;
+  }
 
-    &__category {
-      @include sub-heading;
-      margin-bottom: $small-spacing;
-    }
+  &__category {
+    @include sub-heading;
+    margin-bottom: $small-spacing;
+  }
 
-    $root: &;
+  $root: &;
 
-    &__language-communication {
-      background-color: $color-accent-1-light;
-
-      #{$root}__category {
-        color: $color-accent-1-dark;
-      }
-    }
-
-    &__society {
-      background-color: $color-accent-2-light;
-
-      #{$root}__category {
-        color: $color-accent-2-dark;
-      }
-
-    }
-
-    &__interdisciplinary {
-      background-color: $color-accent-4-light;
-
-      #{$root}__category {
-        color: $color-accent-4-dark;
-      }
+  &__language-communication {
+    background-color: $color-accent-1-light;
 
+    #{$root}__category {
+      color: $color-accent-1-dark;
     }
   }
 
+  &__society {
+    background-color: $color-accent-2-light;
+
+    #{$root}__category {
+      color: $color-accent-2-dark;
+    }
+  }
+
+  &__interdisciplinary {
+    background-color: $color-accent-4-light;
+
+    #{$root}__category {
+      color: $color-accent-4-dark;
+    }
+  }
+}
 </style>
diff --git a/client/src/components/instruments/InstrumentFilter.vue b/client/src/components/instruments/InstrumentFilter.vue
index 3eddd6cf..4200b8b0 100644
--- a/client/src/components/instruments/InstrumentFilter.vue
+++ b/client/src/components/instruments/InstrumentFilter.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="instrument-filter">
-    <filter-group
-      :title="`Alle ${$flavor.textInstruments}`"
-      data-cy="filter-all-instruments"
-    />
+    <filter-group :title="`Alle ${$flavor.textInstruments}`" data-cy="filter-all-instruments" />
 
     <filter-group
       :types="category.types"
@@ -16,34 +13,33 @@
 </template>
 
 <script>
+import FilterGroup from '@/components/instruments/FilterGroup';
 
-  import FilterGroup from '@/components/instruments/FilterGroup';
+import INSTRUMENT_CATEGORIES_QUERY from 'gql/queries/instrumentCategoriesQuery.gql';
 
-  import INSTRUMENT_CATEGORIES_QUERY from 'gql/queries/instrumentCategoriesQuery.gql';
+export default {
+  components: {
+    FilterGroup,
+  },
+  data() {
+    return {
+      instrumentCategories: [],
+    };
+  },
 
-  export default {
-    components: {
-      FilterGroup,
+  apollo: {
+    instrumentCategories: {
+      query: INSTRUMENT_CATEGORIES_QUERY,
     },
-    data() {
-      return {
-        instrumentCategories: [],
-      };
-    },
-
-    apollo: {
-      instrumentCategories: {
-        query: INSTRUMENT_CATEGORIES_QUERY,
-      },
-    },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .instrument-filter {
-    display: flex;
-    flex-direction: column;
-  }
+.instrument-filter {
+  display: flex;
+  flex-direction: column;
+}
 </style>
diff --git a/client/src/components/modals/Confirm.vue b/client/src/components/modals/Confirm.vue
index e2a8a240..93866ce1 100644
--- a/client/src/components/modals/Confirm.vue
+++ b/client/src/components/modals/Confirm.vue
@@ -1,8 +1,5 @@
 <template>
-  <modal
-    class="confirm-dialog"
-    :small="true"
-  >
+  <modal class="confirm-dialog" :small="true">
     <template #header>
       <h3 class="confirm-dialog__heading">
         {{ title }}
@@ -13,73 +10,61 @@
     </p>
     <template #footer>
       <div>
-        <a
-          class="button button--primary"
-          data-cy="modal-save-button"
-          @click="confirm"
-        >
-          Bestätigen
-        </a>
-        <a
-          class="button"
-          data-cy="modal-cancel-button"
-          @click="cancel"
-        >
-          Abbrechen
-        </a>
+        <a class="button button--primary" data-cy="modal-save-button" @click="confirm"> Bestätigen </a>
+        <a class="button" data-cy="modal-cancel-button" @click="cancel"> Abbrechen </a>
       </div>
     </template>
   </modal>
 </template>
 
 <script>
-  import Modal from '@/components/Modal';
+import Modal from '@/components/Modal';
 
-  export default {
-    components: {
-      Modal,
-    },
+export default {
+  components: {
+    Modal,
+  },
 
-    computed: {
-      title() {
-        const {payload} = this.$modal.state;
-        if (payload && payload.title) {
-          return payload.title;
-        }
-        return 'Bestätigung';
-      },
-      message() {
-        const {payload} = this.$modal.state;
-        if (payload && payload.message) {
-          return payload.message;
-        }
-        return 'Wollen Sie diesen Eintrag wirklich löschen?';
+  computed: {
+    title() {
+      const { payload } = this.$modal.state;
+      if (payload && payload.title) {
+        return payload.title;
       }
+      return 'Bestätigung';
     },
+    message() {
+      const { payload } = this.$modal.state;
+      if (payload && payload.message) {
+        return payload.message;
+      }
+      return 'Wollen Sie diesen Eintrag wirklich löschen?';
+    },
+  },
 
-    methods: {
-      confirm() {
-        this.$modal.confirm();
-      },
-      cancel() {
-        this.$modal.cancel();
-      },
+  methods: {
+    confirm() {
+      this.$modal.confirm();
     },
-  };
+    cancel() {
+      this.$modal.cancel();
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .confirm-dialog {
-    &__heading {
-      @include modal-heading;
-    }
-
-    &__content {
-      display: flex;
-      flex-direction: column;
-      padding: $medium-spacing 0;
-    }
+.confirm-dialog {
+  &__heading {
+    @include modal-heading;
   }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    padding: $medium-spacing 0;
+  }
+}
 </style>
diff --git a/client/src/components/modals/index.js b/client/src/components/modals/index.js
index 723d3e7f..48229394 100644
--- a/client/src/components/modals/index.js
+++ b/client/src/components/modals/index.js
@@ -1,11 +1,11 @@
-const Modal = () => import(/* webpackChunkName: "modals" */'@/components/Modal');
-const FullscreenImage = () => import(/* webpackChunkName: "modals" */'@/components/FullscreenImage');
-const FullscreenInfographic = () => import(/* webpackChunkName: "modals" */'@/components/FullscreenInfographic');
-const FullscreenVideo = () => import(/* webpackChunkName: "modals" */'@/components/FullscreenVideo');
-const DeactivatePerson = () => import(/* webpackChunkName: "modals" */'@/components/profile/DeactivatePerson');
-const SnapshotCreated = () => import(/* webpackChunkName: "modals" */'@/components/modules/SnapshotCreated');
-const ChangeVisibility = () => import(/* webpackChunkName: "modals" */'@/components/rooms/ChangeVisibility');
-const Confirm = () => import(/* webpackChunkName: "modals" */'@/components/modals/Confirm');
+const Modal = () => import(/* webpackChunkName: "modals" */ '@/components/Modal');
+const FullscreenImage = () => import(/* webpackChunkName: "modals" */ '@/components/FullscreenImage');
+const FullscreenInfographic = () => import(/* webpackChunkName: "modals" */ '@/components/FullscreenInfographic');
+const FullscreenVideo = () => import(/* webpackChunkName: "modals" */ '@/components/FullscreenVideo');
+const DeactivatePerson = () => import(/* webpackChunkName: "modals" */ '@/components/profile/DeactivatePerson');
+const SnapshotCreated = () => import(/* webpackChunkName: "modals" */ '@/components/modules/SnapshotCreated');
+const ChangeVisibility = () => import(/* webpackChunkName: "modals" */ '@/components/rooms/ChangeVisibility');
+const Confirm = () => import(/* webpackChunkName: "modals" */ '@/components/modals/Confirm');
 
 export default {
   Modal,
diff --git a/client/src/components/modules/Module.vue b/client/src/components/modules/Module.vue
index 00648318..a9419f72 100644
--- a/client/src/components/modules/Module.vue
+++ b/client/src/components/modules/Module.vue
@@ -1,26 +1,13 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
-  <div
-    class="module"
-    v-if="module.id"
-  >
-    <h2
-      class="module__meta-title"
-      id="meta-title"
-    >
+  <div class="module" v-if="module.id">
+    <h2 class="module__meta-title" id="meta-title">
       {{ module.metaTitle }}
     </h2>
-    <h1
-      class="module__title"
-      data-cy="module-title"
-    >
+    <h1 class="module__title" data-cy="module-title">
       {{ module.title }}
     </h1>
-    <img
-      :src="module.heroImage"
-      alt=""
-      class="module__hero"
-    >
+    <img :src="module.heroImage" alt="" class="module__hero" />
 
     <div class="module__intro-wrapper">
       <bookmark-actions
@@ -33,23 +20,14 @@
         @edit-note="$emit('editNote')"
         @bookmark="$emit('bookmark', !module.bookmark)"
       />
-      <div
-        class="module__intro intro"
-        v-html="module.intro"
-      />
+      <div class="module__intro intro" v-html="module.intro" />
     </div>
 
-    <h3
-      v-if="$flavor.showObjectivesTitle && module.objectiveGroups.length"
-      id="objectives"
-    >
+    <h3 v-if="$flavor.showObjectivesTitle && module.objectiveGroups.length" id="objectives">
       <span>Lernziele</span>
     </h3>
 
-    <div
-      class="module__objective-groups"
-      v-if="module.objectiveGroups.length"
-    >
+    <div class="module__objective-groups" v-if="module.objectiveGroups.length">
       <objective-groups :groups="languageCommunicationObjectiveGroups" />
 
       <objective-groups :groups="societyObjectiveGroups" />
@@ -68,105 +46,107 @@
 </template>
 
 <script>
-  import ObjectiveGroups from '@/components/objective-groups/ObjectiveGroups.vue';
-  import Chapter from '@/components/Chapter.vue';
-  import BookmarkActions from '@/components/notes/BookmarkActions';
+import ObjectiveGroups from '@/components/objective-groups/ObjectiveGroups.vue';
+import Chapter from '@/components/Chapter.vue';
+import BookmarkActions from '@/components/notes/BookmarkActions';
 
-  export default {
-    props: {
-      module: {
-        type: Object,
-        default: () => ({}),
-      },
+export default {
+  props: {
+    module: {
+      type: Object,
+      default: () => ({}),
     },
+  },
 
-    components: {
-      BookmarkActions,
-      ObjectiveGroups,
-      Chapter,
-    },
+  components: {
+    BookmarkActions,
+    ObjectiveGroups,
+    Chapter,
+  },
 
-    computed: {
-      languageCommunicationObjectiveGroups() {
-        return this.module.objectiveGroups ? this.module.objectiveGroups
-          .filter(group => group.title.toLowerCase() === 'language_communication') : [];
-      },
-      societyObjectiveGroups() {
-        return this.module.objectiveGroups ? this.module.objectiveGroups
-          .filter(group => group.title.toLowerCase() === 'society') : [];
-      },
-      interdisciplinaryObjectiveGroups() {
-        return this.module.objectiveGroups ? this.module.objectiveGroups
-          .filter(group => group.title.toLowerCase() === 'interdisciplinary') : [];
-      },
-      note() {
-        if (!(this.module && this.module.bookmark)) {
-          return;
-        }
-        return this.module.bookmark.note;
-      },
+  computed: {
+    languageCommunicationObjectiveGroups() {
+      return this.module.objectiveGroups
+        ? this.module.objectiveGroups.filter((group) => group.title.toLowerCase() === 'language_communication')
+        : [];
     },
-  };
+    societyObjectiveGroups() {
+      return this.module.objectiveGroups
+        ? this.module.objectiveGroups.filter((group) => group.title.toLowerCase() === 'society')
+        : [];
+    },
+    interdisciplinaryObjectiveGroups() {
+      return this.module.objectiveGroups
+        ? this.module.objectiveGroups.filter((group) => group.title.toLowerCase() === 'interdisciplinary')
+        : [];
+    },
+    note() {
+      if (!(this.module && this.module.bookmark)) {
+        return;
+      }
+      return this.module.bookmark.note;
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .module {
-    display: flex;
-    justify-self: center;
-    max-width: 100vw;
+.module {
+  display: flex;
+  justify-self: center;
+  max-width: 100vw;
 
-    @include desktop {
-      width: 800px;
-    }
-    flex-direction: column;
-    padding: $large-spacing 15px;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
+  @include desktop {
+    width: 800px;
+  }
+  flex-direction: column;
+  padding: $large-spacing 15px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
 
-    &__hero {
-      margin-bottom: 35px;
-      border-radius: 12px;
-      max-width: 100%;
-    }
+  &__hero {
+    margin-bottom: 35px;
+    border-radius: 12px;
+    max-width: 100%;
+  }
 
-    &__meta-title {
-      @include meta-title;
-    }
+  &__meta-title {
+    @include meta-title;
+  }
 
-    &__intro-wrapper {
-      position: relative;
-    }
+  &__intro-wrapper {
+    position: relative;
+  }
 
-    &__intro {
-      > :deep(p) {
-        margin-bottom: $large-spacing;
-        @include lead-paragraph;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-
-      > :deep(ul) {
-        @include list-parent;
-
-        > li {
-          @include list-child;
-          @include lead-paragraph;
-        }
-      }
-
-    }
-
-    &__bookmark-actions {
-      margin-top: 3px;
-    }
-
-    &__objective-groups {
+  &__intro {
+    > :deep(p) {
       margin-bottom: $large-spacing;
+      @include lead-paragraph;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    > :deep(ul) {
+      @include list-parent;
+
+      > li {
+        @include list-child;
+        @include lead-paragraph;
+      }
     }
   }
+
+  &__bookmark-actions {
+    margin-top: 3px;
+  }
+
+  &__objective-groups {
+    margin-bottom: $large-spacing;
+  }
+}
 </style>
diff --git a/client/src/components/modules/ModuleNavigation.vue b/client/src/components/modules/ModuleNavigation.vue
index 9cfe4c4b..54d4cc81 100644
--- a/client/src/components/modules/ModuleNavigation.vue
+++ b/client/src/components/modules/ModuleNavigation.vue
@@ -1,40 +1,19 @@
 <template>
-  <nav
-    data-cy="module-navigation"
-    class="module-navigation sub-navigation"
-  >
+  <nav data-cy="module-navigation" class="module-navigation sub-navigation">
     <back-link
       :title="module.topic.title"
       :slug="module.topic.slug"
       class="module-navigation__topic-link"
       type="topic"
     />
-    <div
-      class="module-navigation__module-content"
-      v-if="false"
-    >
+    <div class="module-navigation__module-content" v-if="false">
       <!-- Do not display this for now, might be used later again though -->
-      <router-link
-        :to="moduleContentLink"
-        tag="h3"
-        class="module-navigation__heading"
-      >
+      <router-link :to="moduleContentLink" tag="h3" class="module-navigation__heading">
         Inhalte: {{ module.metaTitle }}
       </router-link>
-      <div
-        class="module-navigation__anchors"
-        v-if="onModulePage"
-      >
-        <a
-          href="#"
-          class="module-navigation__anchor"
-          v-scroll-to="'#meta-title'"
-        >Einleitung</a>
-        <a
-          href="#"
-          class="module-navigation__anchor"
-          v-scroll-to="'#objectives'"
-        >Lernziele</a>
+      <div class="module-navigation__anchors" v-if="onModulePage">
+        <a href="#" class="module-navigation__anchor" v-scroll-to="'#meta-title'">Einleitung</a>
+        <a href="#" class="module-navigation__anchor" v-scroll-to="'#objectives'">Lernziele</a>
 
         <a
           href="#"
@@ -42,12 +21,9 @@
           v-for="(chapter, index) in module.chapters"
           :key="chapter.id"
           v-scroll-to="chapterId(index)"
-        >{{ chapter.title }}</a>
-        <a
-          href="#"
-          class="module-navigation__anchor"
-          v-scroll-to="'#objectives-confirm'"
-        >Lernzielkontrolle</a>
+          >{{ chapter.title }}</a
+        >
+        <a href="#" class="module-navigation__anchor" v-scroll-to="'#objectives-confirm'">Lernzielkontrolle</a>
       </div>
     </div>
 
@@ -58,7 +34,7 @@
     >
       <snapshot-menu class="module-navigation__actions" />
       <router-link
-        :to="{name: 'module-settings'}"
+        :to="{ name: 'module-settings' }"
         class="module-navigation__actions"
         data-cy="module-settings-button"
       >
@@ -70,169 +46,170 @@
 </template>
 
 <script>
-  import BackLink from '@/components/BackLink';
-  import {moduleQuery} from '@/graphql/queries';
+import BackLink from '@/components/BackLink';
+import { moduleQuery } from '@/graphql/queries';
 
-  import ToggleEditing from '@/components/toggle-menu/ToggleEditing';
-  import me from '@/mixins/me';
-  import SnapshotMenu from '@/components/modules/SnapshotMenu';
+import ToggleEditing from '@/components/toggle-menu/ToggleEditing';
+import me from '@/mixins/me';
+import SnapshotMenu from '@/components/modules/SnapshotMenu';
 
-  export default {
-    apollo: {
-      module: moduleQuery,
+export default {
+  apollo: {
+    module: moduleQuery,
+  },
+
+  mixins: [me],
+
+  components: {
+    SnapshotMenu,
+    BackLink,
+    ToggleEditing,
+  },
+
+  data() {
+    return {
+      module: {
+        assignments: [],
+        topic: {},
+      },
+    };
+  },
+
+  computed: {
+    onModulePage() {
+      return this.$route.name === 'module';
     },
-
-    mixins: [me],
-
-    components: {
-      SnapshotMenu,
-      BackLink,
-      ToggleEditing,
+    moduleContentLink() {
+      return `/module/${this.module.slug}`;
     },
-
-    data() {
-      return {
-        module: {
-          assignments: [],
-          topic: {},
-        },
-      };
+    showResults() {
+      return this.me.permissions.includes('users.can_manage_school_class_content');
     },
-
-    computed: {
-      onModulePage() {
-        return this.$route.name === 'module';
-      },
-      moduleContentLink() {
-        return `/module/${this.module.slug}`;
-      },
-      showResults() {
-        return this.me.permissions.includes('users.can_manage_school_class_content');
-      },
-      assignments() {
-        if (!this.module.chapters) {
-          return [];
-        }
-        return this.extractAssignmentsFromChapters(this.module.chapters, []);
-      },
+    assignments() {
+      if (!this.module.chapters) {
+        return [];
+      }
+      return this.extractAssignmentsFromChapters(this.module.chapters, []);
     },
+  },
 
-    methods: {
-      chapterId(index) {
-        return `#chapter-${index}`;
-      },
-      submissionsLink(assignment) {
-        return `/module/${this.module.slug}/submissions/${assignment.value.id}`;
-      },
-      extractAssignmentsFromChapters(chapters, assignments) {
-        chapters.forEach(node => {
-          if (node.contentBlocks) { // in chapter node
-            // if chapter information is required then do it here like so:
-            // assignments.push({
-            //   chapterTitle: node.title
-            // });
-            // return this.extractAssignmentsFromChapters(node.contentBlocks, assignments);
-            assignments = this.extractAssignmentsFromChapters(node.contentBlocks, assignments);
-          } else if (node.contents) {
-            let foundAssignments = [];
-            node.contents.forEach(contentNode => {
-              foundAssignments = this.concatAssignments(foundAssignments, contentNode);
-            });
-            assignments = [...assignments, ...foundAssignments];
-          }
-        });
-        return assignments;
-      },
-      concatAssignments(foundAssignments, node) {
-        let foundAssignment = this.findAssignment(node);
-        return foundAssignment ? [...foundAssignments, ...foundAssignment] : foundAssignments;
-      },
-      findAssignment(node) {
-        if (node.type && node.type === 'assignment') {
-          return [node];
-        } else if (node.type && node.type === 'content_list_item') {
+  methods: {
+    chapterId(index) {
+      return `#chapter-${index}`;
+    },
+    submissionsLink(assignment) {
+      return `/module/${this.module.slug}/submissions/${assignment.value.id}`;
+    },
+    extractAssignmentsFromChapters(chapters, assignments) {
+      chapters.forEach((node) => {
+        if (node.contentBlocks) {
+          // in chapter node
+          // if chapter information is required then do it here like so:
+          // assignments.push({
+          //   chapterTitle: node.title
+          // });
+          // return this.extractAssignmentsFromChapters(node.contentBlocks, assignments);
+          assignments = this.extractAssignmentsFromChapters(node.contentBlocks, assignments);
+        } else if (node.contents) {
           let foundAssignments = [];
-          node.value.forEach(contentNode => {
+          node.contents.forEach((contentNode) => {
             foundAssignments = this.concatAssignments(foundAssignments, contentNode);
           });
-          return this.flattenArray(foundAssignments);
-        } else {
-          return null;
+          assignments = [...assignments, ...foundAssignments];
         }
-      },
-      flattenArray(arrayToFlatten) {
-        // https://stackoverflow.com/questions/10865025/merge-flatten-an-array-of-arrays
-        return [].concat.apply([], arrayToFlatten);
-      },
+      });
+      return assignments;
     },
-  };
+    concatAssignments(foundAssignments, node) {
+      let foundAssignment = this.findAssignment(node);
+      return foundAssignment ? [...foundAssignments, ...foundAssignment] : foundAssignments;
+    },
+    findAssignment(node) {
+      if (node.type && node.type === 'assignment') {
+        return [node];
+      } else if (node.type && node.type === 'content_list_item') {
+        let foundAssignments = [];
+        node.value.forEach((contentNode) => {
+          foundAssignments = this.concatAssignments(foundAssignments, contentNode);
+        });
+        return this.flattenArray(foundAssignments);
+      } else {
+        return null;
+      }
+    },
+    flattenArray(arrayToFlatten) {
+      // https://stackoverflow.com/questions/10865025/merge-flatten-an-array-of-arrays
+      return [].concat.apply([], arrayToFlatten);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  @mixin module-navigation-typography {
-    font-family: $sans-serif-font-family;
-    color: $color-silver-dark;
-    font-weight: $font-weight-regular;
+@mixin module-navigation-typography {
+  font-family: $sans-serif-font-family;
+  color: $color-silver-dark;
+  font-weight: $font-weight-regular;
+}
+
+.module-navigation {
+  display: none;
+  width: 100%;
+  box-sizing: border-box;
+  z-index: 11;
+  background-color: $color-white;
+  border-top: 1px solid $color-silver;
+
+  &__topic-link {
+    @include regular-text;
   }
 
-  .module-navigation {
-    display: none;
-    width: 100%;
-    box-sizing: border-box;
-    z-index: 11;
-    background-color: $color-white;
-    border-top: 1px solid $color-silver;
+  @include desktop {
+    display: flex;
+  }
 
-    &__topic-link {
-      @include regular-text;
-    }
+  &__module-content {
+    margin-bottom: 18px;
+  }
 
-    @include desktop {
-      display: flex;
-    }
+  &__heading {
+    @include module-navigation-typography;
+    margin: 0;
+    font-size: 1.0625rem;
+    cursor: pointer;
+  }
 
-    &__module-content {
-      margin-bottom: 18px;
-    }
+  &__anchors {
+    display: flex;
+    flex-direction: column;
+    padding: 16px 24px 0;
+  }
 
-    &__heading {
-      @include module-navigation-typography;
-      margin: 0;
-      font-size: 1.0625rem;
-      cursor: pointer;
-    }
+  &__anchor {
+    @include module-navigation-typography;
+    font-size: 0.875rem;
+    line-height: 1.2rem;
+    margin-bottom: 0.6875rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 
-    &__anchors {
-      display: flex;
-      flex-direction: column;
-      padding: 16px 24px 0;
-    }
-
-    &__anchor {
-      @include module-navigation-typography;
-      font-size: 0.875rem;
-      line-height: 1.2rem;
-      margin-bottom: .6875rem;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-
-      &--active {
-        color: $color-brand;
-      }
-    }
-
-    &__toggle-menu {
-      margin-left: auto;
-      display: flex;
-      align-items: center;
-    }
-
-    &__actions {
-      @include regular-text;
-      margin-right: $medium-spacing;
+    &--active {
+      color: $color-brand;
     }
   }
+
+  &__toggle-menu {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+  }
+
+  &__actions {
+    @include regular-text;
+    margin-right: $medium-spacing;
+  }
+}
 </style>
diff --git a/client/src/components/modules/ModuleSubNavigation.vue b/client/src/components/modules/ModuleSubNavigation.vue
index 708b9a4b..dde2b2be 100644
--- a/client/src/components/modules/ModuleSubNavigation.vue
+++ b/client/src/components/modules/ModuleSubNavigation.vue
@@ -1,104 +1,99 @@
 <template>
-  <nav
-    class="module-sub-navigation sub-navigation"
-  >
-    <back-link
-      :title="module.title"
-      type="module"
-    />
+  <nav class="module-sub-navigation sub-navigation">
+    <back-link :title="module.title" type="module" />
   </nav>
 </template>
 
 <script>
-  import BackLink from '@/components/BackLink';
-  import {moduleQuery} from '@/graphql/queries';
+import BackLink from '@/components/BackLink';
+import { moduleQuery } from '@/graphql/queries';
 
-  import me from '@/mixins/me';
+import me from '@/mixins/me';
 
-  export default {
-    apollo: {
-      module: moduleQuery,
-    },
+export default {
+  apollo: {
+    module: moduleQuery,
+  },
 
-    mixins: [me],
+  mixins: [me],
 
-    components: {
-      BackLink,
-    },
+  components: {
+    BackLink,
+  },
 
-    data() {
-      return {
-        module: {},
-      };
-    },
-  };
+  data() {
+    return {
+      module: {},
+    };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  @mixin module-navigation-typography {
-    font-family: $sans-serif-font-family;
-    color: $color-silver-dark;
-    font-weight: $font-weight-regular;
+@mixin module-navigation-typography {
+  font-family: $sans-serif-font-family;
+  color: $color-silver-dark;
+  font-weight: $font-weight-regular;
+}
+
+.module-sub-navigation {
+  display: none;
+  width: 100%;
+  box-sizing: border-box;
+  z-index: 11;
+  background-color: $color-white;
+  border-top: 1px solid $color-silver;
+
+  &__topic-link {
+    @include regular-text;
   }
 
-  .module-sub-navigation {
-    display: none;
-    width: 100%;
-    box-sizing: border-box;
-    z-index: 11;
-    background-color: $color-white;
-    border-top: 1px solid $color-silver;
+  @include desktop {
+    display: flex;
+  }
 
-    &__topic-link {
-      @include regular-text;
-    }
+  &__module-content {
+    margin-bottom: 18px;
+  }
 
-    @include desktop {
-      display: flex;
-    }
+  &__heading {
+    @include module-navigation-typography;
+    margin: 0;
+    font-size: 1.0625rem;
+    cursor: pointer;
+  }
 
-    &__module-content {
-      margin-bottom: 18px;
-    }
+  &__anchors {
+    display: flex;
+    flex-direction: column;
+    padding: 16px 24px 0;
+  }
 
-    &__heading {
-      @include module-navigation-typography;
-      margin: 0;
-      font-size: 1.0625rem;
-      cursor: pointer;
-    }
+  &__anchor {
+    @include module-navigation-typography;
+    font-size: 0.875rem;
+    line-height: 1.2rem;
+    margin-bottom: 0.6875rem;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 
-    &__anchors {
-      display: flex;
-      flex-direction: column;
-      padding: 16px 24px 0;
-    }
-
-    &__anchor {
-      @include module-navigation-typography;
-      font-size: 0.875rem;
-      line-height: 1.2rem;
-      margin-bottom: .6875rem;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-
-      &--active {
-        color: $color-brand;
-      }
-    }
-
-    &__toggle-menu {
-      margin-left: auto;
-      display: flex;
-      align-items: center;
-    }
-
-    &__actions {
-      @include regular-text;
-      margin-right: $medium-spacing;
+    &--active {
+      color: $color-brand;
     }
   }
+
+  &__toggle-menu {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+  }
+
+  &__actions {
+    @include regular-text;
+    margin-right: $medium-spacing;
+  }
+}
 </style>
diff --git a/client/src/components/modules/ModuleTeaser.vue b/client/src/components/modules/ModuleTeaser.vue
index 7b0ec23b..76709f84 100644
--- a/client/src/components/modules/ModuleTeaser.vue
+++ b/client/src/components/modules/ModuleTeaser.vue
@@ -1,13 +1,6 @@
 <template>
-  <router-link
-    :to="moduleLink"
-    :class="['module-teaser', {'module-teaser--small': !teaser}]"
-    tag="div"
-  >
-    <div
-      :style="{backgroundImage: 'url('+heroImage+')'}"
-      class="module-teaser__image"
-    />
+  <router-link :to="moduleLink" :class="['module-teaser', { 'module-teaser--small': !teaser }]" tag="div">
+    <div :style="{ backgroundImage: 'url(' + heroImage + ')' }" class="module-teaser__image" />
     <div class="module-teaser__body">
       <h3 class="module-teaser__meta-title">
         {{ metaTitle }}
@@ -23,68 +16,68 @@
 </template>
 
 <script>
-  export default {
-    props: ['metaTitle', 'title', 'teaser', 'id', 'slug', 'heroImage'],
+export default {
+  props: ['metaTitle', 'title', 'teaser', 'id', 'slug', 'heroImage'],
 
-    computed: {
-      moduleLink() {
-        return {
-          name: 'module',
-          params: {
-            slug: this.slug
-          }
-        };
-      }
-    }
-  };
+  computed: {
+    moduleLink() {
+      return {
+        name: 'module',
+        params: {
+          slug: this.slug,
+        },
+      };
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
-  .module-teaser {
-    box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
-    border: 1px solid #E2E2E2;
-    height: 330px;
-    max-width: 380px;
-    width: 100%;
-    border-radius: 12px;
-    overflow: hidden;
-    box-sizing: border-box;
-    cursor: pointer;
+.module-teaser {
+  box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
+  border: 1px solid #e2e2e2;
+  height: 330px;
+  max-width: 380px;
+  width: 100%;
+  border-radius: 12px;
+  overflow: hidden;
+  box-sizing: border-box;
+  cursor: pointer;
 
-    &--small {
-      height: 300px;
-    }
-
-    &__image {
-      width: 100%;
-      max-height: 150px;
-      height: 150px;
-      background-position: center;
-      background-size: 100% auto;
-      background-repeat: no-repeat;
-    }
-
-    &__body {
-      padding: 20px;
-    }
-
-    &__meta-title {
-      color: $color-silver-dark;
-      margin-bottom: $large-spacing;
-      @include regular-text;
-    }
-
-    &__title {
-      @include heading-3;
-      margin-bottom: 5px;
-    }
-
-    &__description {
-      line-height: $default-line-height;
-      font-size: 1.2rem;
-    }
+  &--small {
+    height: 300px;
   }
+
+  &__image {
+    width: 100%;
+    max-height: 150px;
+    height: 150px;
+    background-position: center;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+  }
+
+  &__body {
+    padding: 20px;
+  }
+
+  &__meta-title {
+    color: $color-silver-dark;
+    margin-bottom: $large-spacing;
+    @include regular-text;
+  }
+
+  &__title {
+    @include heading-3;
+    margin-bottom: 5px;
+  }
+
+  &__description {
+    line-height: $default-line-height;
+    font-size: 1.2rem;
+  }
+}
 </style>
diff --git a/client/src/components/modules/SnapshotCreated.vue b/client/src/components/modules/SnapshotCreated.vue
index 5c947ffb..a8f95515 100644
--- a/client/src/components/modules/SnapshotCreated.vue
+++ b/client/src/components/modules/SnapshotCreated.vue
@@ -1,13 +1,7 @@
 <template>
-  <modal
-    :hide-header="false"
-    :small="true"
-    class="snapshot-created"
-  >
+  <modal :hide-header="false" :small="true" class="snapshot-created">
     <template #header>
-      <h1 class="snapshot-created__heading">
-        Ein neuer Snapshot wurde erstellt
-      </h1>
+      <h1 class="snapshot-created__heading">Ein neuer Snapshot wurde erstellt</h1>
     </template>
     <div class="snapshot-created__content">
       <div class="snapshot-created__entry">
@@ -17,85 +11,80 @@
     </div>
     <template #footer>
       <div>
-        <a
-          class="button button--primary"
-          data-cy="show-all-snapshots-button"
-          @click="toList"
-        >Alle Snapshots anzeigen</a>
-        <a
-          class="button"
-          @click="close"
-        >Zurück zum {{ $flavor.textModule }}</a>
+        <a class="button button--primary" data-cy="show-all-snapshots-button" @click="toList"
+          >Alle Snapshots anzeigen</a
+        >
+        <a class="button" @click="close">Zurück zum {{ $flavor.textModule }}</a>
       </div>
     </template>
   </modal>
 </template>
 
 <script>
-  import Modal from '@/components/Modal';
-  import { SNAPSHOT_LIST } from '@/router/module.names';
-  import dateformat from '@/helpers/date-format';
+import Modal from '@/components/Modal';
+import { SNAPSHOT_LIST } from '@/router/module.names';
+import dateformat from '@/helpers/date-format';
 
-  export default {
-    components: {
-      Modal,
-    },
+export default {
+  components: {
+    Modal,
+  },
 
-    data() {
-      return {
-        snapshotList: {
-          name: SNAPSHOT_LIST,
-        },
-      };
-    },
+  data() {
+    return {
+      snapshotList: {
+        name: SNAPSHOT_LIST,
+      },
+    };
+  },
 
-    computed: {
-      snapshot() {
-        return this.$modal.state.payload.snapshot;
-      },
-      created() {
-        return dateformat(this.snapshot.created);
-      },
+  computed: {
+    snapshot() {
+      return this.$modal.state.payload.snapshot;
     },
+    created() {
+      return dateformat(this.snapshot.created);
+    },
+  },
 
-    methods: {
-      toList() {
-        this.$router.push(this.snapshotList);
-        this.$modal.confirm();
-      },
-      close() {
-        this.$modal.cancel();
-      },
+  methods: {
+    toList() {
+      this.$router.push(this.snapshotList);
+      this.$modal.confirm();
     },
-  };
+    close() {
+      this.$modal.cancel();
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .snapshot-created {
-    &__heading {
-      @include modal-heading;
-    }
-
-    &__content {
-      min-height: 200px;
-    }
-
-    &__entry {
-      padding: $medium-spacing;
-      background-color: $color-brand-light;
-      display: flex;
-      align-items: center;
-    }
-
-    &__title {
-      @include heading-4;
-      margin-right: $medium-spacing;
-    }
-
-    &__meta {
-      @include small-text;
-    }
+.snapshot-created {
+  &__heading {
+    @include modal-heading;
   }
+
+  &__content {
+    min-height: 200px;
+  }
+
+  &__entry {
+    padding: $medium-spacing;
+    background-color: $color-brand-light;
+    display: flex;
+    align-items: center;
+  }
+
+  &__title {
+    @include heading-4;
+    margin-right: $medium-spacing;
+  }
+
+  &__meta {
+    @include small-text;
+  }
+}
 </style>
diff --git a/client/src/components/modules/SnapshotHeader.vue b/client/src/components/modules/SnapshotHeader.vue
index b3a741e3..c59c5683 100644
--- a/client/src/components/modules/SnapshotHeader.vue
+++ b/client/src/components/modules/SnapshotHeader.vue
@@ -1,38 +1,20 @@
 <template>
-  <div
-    class="snapshot-header"
-    data-cy="snapshot-header"
-  >
+  <div class="snapshot-header" data-cy="snapshot-header">
     <h1>Snapshot {{ id }}</h1>
-    <div class="snapshot-header__meta">
-      {{ created }} – {{ snapshot.creator }}
-    </div>
+    <div class="snapshot-header__meta">{{ created }} – {{ snapshot.creator }}</div>
 
     <section class="snapshot-header__section">
-      <h2 class="snapshot-header__subtitle">
-        In diesem Snapshot sind {{ changesCount }} Anpassungen gespeichert:
-      </h2>
+      <h2 class="snapshot-header__subtitle">In diesem Snapshot sind {{ changesCount }} Anpassungen gespeichert:</h2>
       <ul class="snapshot-header__list">
-        <li class="snapshot-header__list-item">
-          {{ hiddenObjectives }} Lernziele wurden ausgeblendet
-        </li>
-        <li class="snapshot-header__list-item">
-          {{ newObjectives }} Lernziele wurde erfasst
-        </li>
-        <li class="snapshot-header__list-item">
-          {{ hiddenContentBlocks }} Inhaltsblöcke wurden
-          ausgeblendet
-        </li>
-        <li class="snapshot-header__list-item">
-          {{ newContentBlocks }} Inhaltsblock wurde erfasst
-        </li>
+        <li class="snapshot-header__list-item">{{ hiddenObjectives }} Lernziele wurden ausgeblendet</li>
+        <li class="snapshot-header__list-item">{{ newObjectives }} Lernziele wurde erfasst</li>
+        <li class="snapshot-header__list-item">{{ hiddenContentBlocks }} Inhaltsblöcke wurden ausgeblendet</li>
+        <li class="snapshot-header__list-item">{{ newContentBlocks }} Inhaltsblock wurde erfasst</li>
       </ul>
     </section>
 
     <section class="snapshot-header__section">
-      <h2 class="snapshot-header__subtitle">
-        Willst du diesen Snapshot anwenden?
-      </h2>
+      <h2 class="snapshot-header__subtitle">Willst du diesen Snapshot anwenden?</h2>
       <div>
         <checkbox
           :checked="agreement"
@@ -46,89 +28,85 @@
     <section class="snapshot-header__buttons snapshot-header__section">
       <button
         :disabled="!agreement"
-        :class="{'button--disabled-alt': !agreement}"
+        :class="{ 'button--disabled-alt': !agreement }"
         class="button button--primary"
         data-cy="apply-button"
         @click="apply"
       >
         Snapshot anwenden
       </button>
-      <button
-        class="button button--secondary"
-        @click="back"
-      >
-        Abbrechen
-      </button>
+      <button class="button button--secondary" @click="back">Abbrechen</button>
     </section>
   </div>
 </template>
 
 <script>
-  import dateformat from '@/helpers/date-format';
-  import Checkbox from '@/components/ui/Checkbox';
+import dateformat from '@/helpers/date-format';
+import Checkbox from '@/components/ui/Checkbox';
 
-  import me from '@/mixins/me';
+import me from '@/mixins/me';
 
-  import APPLY_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/applySnapshot.gql';
-  import { MODULE_PAGE } from '@/router/module.names';
+import APPLY_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/applySnapshot.gql';
+import { MODULE_PAGE } from '@/router/module.names';
 
-  const _getChange = (snapshot, index) => {
-    try {
-      return snapshot.changes[index];
-    } catch (e) {
-      return 0;
-    }
-  };
+const _getChange = (snapshot, index) => {
+  try {
+    return snapshot.changes[index];
+  } catch (e) {
+    return 0;
+  }
+};
 
-  export default {
-    props: {
-      snapshot: {
-        type: Object,
-        default: () => ({}),
-      },
+export default {
+  props: {
+    snapshot: {
+      type: Object,
+      default: () => ({}),
     },
+  },
 
-    mixins: [me],
+  mixins: [me],
 
-    components: {
-      Checkbox,
+  components: {
+    Checkbox,
+  },
+
+  data: () => ({
+    agreement: false,
+  }),
+
+  computed: {
+    created() {
+      return dateformat(this.snapshot.created);
     },
-
-    data: () => ({
-      agreement: false,
-    }),
-
-    computed: {
-      created() {
-        return dateformat(this.snapshot.created);
-      },
-      hiddenObjectives() {
-        return _getChange(this.snapshot, 'hiddenObjectives');
-      },
-      newObjectives() {
-        return _getChange(this.snapshot, 'newObjectives');
-      },
-      hiddenContentBlocks() {
-        return _getChange(this.snapshot, 'hiddenContentBlocks');
-      },
-      newContentBlocks() {
-        return _getChange(this.snapshot, 'newContentBlocks');
-      },
-      changesCount() {
-        return this.hiddenObjectives + this.newObjectives + this.hiddenContentBlocks + this.newContentBlocks;
-      },
-      id() {
-        try {
-          return atob(this.snapshot.id).split(':')[1];
-        } catch (e) {
-          return '';
-        }
-      },
+    hiddenObjectives() {
+      return _getChange(this.snapshot, 'hiddenObjectives');
     },
+    newObjectives() {
+      return _getChange(this.snapshot, 'newObjectives');
+    },
+    hiddenContentBlocks() {
+      return _getChange(this.snapshot, 'hiddenContentBlocks');
+    },
+    newContentBlocks() {
+      return _getChange(this.snapshot, 'newContentBlocks');
+    },
+    changesCount() {
+      return this.hiddenObjectives + this.newObjectives + this.hiddenContentBlocks + this.newContentBlocks;
+    },
+    id() {
+      try {
+        return atob(this.snapshot.id).split(':')[1];
+      } catch (e) {
+        return '';
+      }
+    },
+  },
 
-    methods: {
-      apply() {
-        this.$apollo.mutate({
+  methods: {
+    apply() {
+      this.$apollo
+        .mutate({
           mutation: APPLY_SNAPSHOT_MUTATION,
           variables: {
             input: {
@@ -136,53 +114,61 @@
               selectedClass: this.me.selectedClass.id,
             },
           },
-        }).then(({data: {applySnapshot: {module: {slug}}}}) => {
-          this.$router.push({
-            name: MODULE_PAGE,
-            params: {
-              slug: slug,
+        })
+        .then(
+          ({
+            data: {
+              applySnapshot: {
+                module: { slug },
+              },
             },
-          });
-        });
-      },
-      back() {
-        this.$router.go(-1);
-      },
+          }) => {
+            this.$router.push({
+              name: MODULE_PAGE,
+              params: {
+                slug: slug,
+              },
+            });
+          }
+        );
     },
-  };
+    back() {
+      this.$router.go(-1);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .snapshot-header {
-    &__subtitle {
-      @include heading-3;
-      margin-bottom: $small-spacing;
-    }
-
-    &__meta {
-      @include regular-text;
-      margin-bottom: $large-spacing;
-    }
-
-    &__list {
-      padding-left: $small-spacing;
-    }
-
-    &__list-item {
-      @include regular-text;
-      line-height: 1.5;
-      list-style-type: '–';
-      padding-left: $small-spacing;
-    }
-
-    &__section {
-      margin-bottom: $large-spacing;
-    }
-
-    &__buttons {
-
-    }
+.snapshot-header {
+  &__subtitle {
+    @include heading-3;
+    margin-bottom: $small-spacing;
   }
+
+  &__meta {
+    @include regular-text;
+    margin-bottom: $large-spacing;
+  }
+
+  &__list {
+    padding-left: $small-spacing;
+  }
+
+  &__list-item {
+    @include regular-text;
+    line-height: 1.5;
+    list-style-type: '–';
+    padding-left: $small-spacing;
+  }
+
+  &__section {
+    margin-bottom: $large-spacing;
+  }
+
+  &__buttons {
+  }
+}
 </style>
diff --git a/client/src/components/modules/SnapshotListItem.vue b/client/src/components/modules/SnapshotListItem.vue
index 775ba6ea..de397c01 100644
--- a/client/src/components/modules/SnapshotListItem.vue
+++ b/client/src/components/modules/SnapshotListItem.vue
@@ -1,42 +1,18 @@
 <template>
   <!-- eslint-disable vue/no-v-html -->
-  <div
-    data-cy="snapshot-entry"
-    class="snapshot-list-item"
-  >
-    <router-link
-      :to="snapshotRoute"
-      class="snapshot-list-item__title"
-      data-cy="snapshot-link"
-    >
+  <div data-cy="snapshot-entry" class="snapshot-list-item">
+    <router-link :to="snapshotRoute" class="snapshot-list-item__title" data-cy="snapshot-link">
       {{ snapshot.title }}
     </router-link>
-    <span
-      class="snapshot-list-item__date"
-      v-html="meta"
-    />
+    <span class="snapshot-list-item__date" v-html="meta" />
     <div class="snapshot-list-item__actions">
-      <button
-        class="icon-button"
-        data-cy="delete-snapshot-button"
-        v-if="snapshot.mine"
-        @click="deleteSnapshot"
-      >
+      <button class="icon-button" data-cy="delete-snapshot-button" v-if="snapshot.mine" @click="deleteSnapshot">
         <trash-icon class="snapshot-list-item__icon" />
       </button>
-      <button
-        class="icon-button"
-        data-cy="rename-snapshot-button"
-        v-if="snapshot.mine"
-        @click="changeTitle"
-      >
+      <button class="icon-button" data-cy="rename-snapshot-button" v-if="snapshot.mine" @click="changeTitle">
         <pen-icon class="snapshot-list-item__icon" />
       </button>
-      <a
-        class="snapshot-list-item__link"
-        v-if="snapshot.mine"
-        @click="share"
-      >
+      <a class="snapshot-list-item__link" v-if="snapshot.mine" @click="share">
         <template v-if="snapshot.shared">Nicht mehr teilen</template>
         <template v-else>Mit Team teilen</template>
       </a>
@@ -45,177 +21,209 @@
 </template>
 
 <script>
-  import dateformat from '@/helpers/date-format';
-  import {SNAPSHOT_DETAIL} from '@/router/module.names';
-  import SHARE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/share.gql';
-  import UPDATE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/update.gql';
-  import DELETE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/delete.gql';
-  import SNAPSHOTS_QUERY from 'gql/queries/moduleSnapshots.gql';
-  import gql from 'graphql-tag';
-  import PenIcon from '@/components/icons/PenIcon';
-  import TrashIcon from '@/components/icons/TrashIcon';
-  import { removeAtIndex } from '@/graphql/immutable-operations';
+import dateformat from '@/helpers/date-format';
+import { SNAPSHOT_DETAIL } from '@/router/module.names';
+import SHARE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/share.gql';
+import UPDATE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/update.gql';
+import DELETE_SNAPSHOT_MUTATION from 'gql/mutations/snapshots/delete.gql';
+import SNAPSHOTS_QUERY from 'gql/queries/moduleSnapshots.gql';
+import gql from 'graphql-tag';
+import PenIcon from '@/components/icons/PenIcon';
+import TrashIcon from '@/components/icons/TrashIcon';
+import { removeAtIndex } from '@/graphql/immutable-operations';
 
-  export default {
-    props: {
-      snapshot: {
-        type: Object,
-        default: () => ({}),
-      },
+export default {
+  props: {
+    snapshot: {
+      type: Object,
+      default: () => ({}),
     },
-    components: {
-      PenIcon,
-      TrashIcon,
+  },
+  components: {
+    PenIcon,
+    TrashIcon,
+  },
+
+  computed: {
+    meta() {
+      const created = dateformat(this.snapshot.created);
+      if (this.snapshot.mine) {
+        return created;
+      }
+      return `${created} - ${this.snapshot.creator}`;
     },
-
-    computed: {
-      meta() {
-        const created = dateformat(this.snapshot.created);
-        if (this.snapshot.mine) {
-          return created;
-        }
-        return `${created} - ${this.snapshot.creator}`;
-      },
-      snapshotRoute() {
-        return {
-          name: SNAPSHOT_DETAIL,
-          params: {
-            id: this.snapshot.id,
-          },
-        };
-      },
+    snapshotRoute() {
+      return {
+        name: SNAPSHOT_DETAIL,
+        params: {
+          id: this.snapshot.id,
+        },
+      };
     },
+  },
 
-    methods: {
-      changeTitle() {
-        this.$modal.open('edit-snapshot-title-wizard', {name: this.snapshot.title})
-          .then((title) => {
-            console.log(title);
-            this.$apollo.mutate({
-              mutation: UPDATE_SNAPSHOT_MUTATION,
-              variables: {
-                input: {
-                  id: this.snapshot.id,
-                  title: title,
-                },
+  methods: {
+    changeTitle() {
+      this.$modal
+        .open('edit-snapshot-title-wizard', { name: this.snapshot.title })
+        .then((title) => {
+          console.log(title);
+          this.$apollo.mutate({
+            mutation: UPDATE_SNAPSHOT_MUTATION,
+            variables: {
+              input: {
+                id: this.snapshot.id,
+                title: title,
               },
-              update(store, {data: {updateSnapshot: {snapshot}}}) {
-                if (snapshot.__typename === 'SnapshotNode') {
-                  const {id, title} = snapshot;
-                  store.writeFragment({
-                    id,
-                    fragment: gql`fragment SnapshotFragment on SnapshotNode {title}`,
-                    data: {
-                      title,
-                      __typename: 'SnapshotNode',
-                    },
-                  });
-                }
-              },
-            });
-          })
-          .catch();
-      },
-      deleteSnapshot() {
-        this.$modal.open('confirm', {
-            title: 'Snapshot löschen'
-          })
-          .then(() => {
-            this.$apollo.mutate({
-              mutation: DELETE_SNAPSHOT_MUTATION,
-              variables: {
-                input: {
-                  id: this.snapshot.id,
-                },
-              },
-              update: (store, {data: {deleteSnapshot: {result}}}) => {
-                if (result.__typename === 'Success') {
-                  const slug = this.$route.params.slug;
-                  const query = SNAPSHOTS_QUERY;
-                  const variables = {
-                    slug,
-                  };
-                  const {module} = store.readQuery({
-                    query,
-                    variables,
-                  });
-                  const index = module.snapshots.findIndex(snapshot => snapshot.id === this.snapshot.id);
-                  const snapshots = removeAtIndex(module.snapshots, index);
-
-                  const data = {
-                    module: {
-                      ...module,
-                      snapshots
-                    }
-                  };
-
-                  store.writeQuery({
-                    query,
-                    variables,
-                    data
-                  });
-
-                }
-              },
-            });
-          })
-          .catch(() => {});
-      },
-      share() {
-        this.$apollo.mutate({
-          mutation: SHARE_SNAPSHOT_MUTATION,
-          variables: {
-            input: {
-              snapshot: this.snapshot.id,
-              shared: !this.snapshot.shared,
             },
-          },
-          update(store, {data: {shareSnapshot: {snapshot: {id, shared}}}}) {
-            store.writeFragment({
-              id,
-              fragment: gql`fragment SnapshotFragment on SnapshotNode { shared }`,
-              data: {
-                shared,
-                __typename: 'SnapshotNode',
-              },
-            });
-          },
-        });
-      },
+            update(
+              store,
+              {
+                data: {
+                  updateSnapshot: { snapshot },
+                },
+              }
+            ) {
+              if (snapshot.__typename === 'SnapshotNode') {
+                const { id, title } = snapshot;
+                store.writeFragment({
+                  id,
+                  fragment: gql`
+                    fragment SnapshotFragment on SnapshotNode {
+                      title
+                    }
+                  `,
+                  data: {
+                    title,
+                    __typename: 'SnapshotNode',
+                  },
+                });
+              }
+            },
+          });
+        })
+        .catch();
     },
-  };
+    deleteSnapshot() {
+      this.$modal
+        .open('confirm', {
+          title: 'Snapshot löschen',
+        })
+        .then(() => {
+          this.$apollo.mutate({
+            mutation: DELETE_SNAPSHOT_MUTATION,
+            variables: {
+              input: {
+                id: this.snapshot.id,
+              },
+            },
+            update: (
+              store,
+              {
+                data: {
+                  deleteSnapshot: { result },
+                },
+              }
+            ) => {
+              if (result.__typename === 'Success') {
+                const slug = this.$route.params.slug;
+                const query = SNAPSHOTS_QUERY;
+                const variables = {
+                  slug,
+                };
+                const { module } = store.readQuery({
+                  query,
+                  variables,
+                });
+                const index = module.snapshots.findIndex((snapshot) => snapshot.id === this.snapshot.id);
+                const snapshots = removeAtIndex(module.snapshots, index);
+
+                const data = {
+                  module: {
+                    ...module,
+                    snapshots,
+                  },
+                };
+
+                store.writeQuery({
+                  query,
+                  variables,
+                  data,
+                });
+              }
+            },
+          });
+        })
+        .catch(() => {});
+    },
+    share() {
+      this.$apollo.mutate({
+        mutation: SHARE_SNAPSHOT_MUTATION,
+        variables: {
+          input: {
+            snapshot: this.snapshot.id,
+            shared: !this.snapshot.shared,
+          },
+        },
+        update(
+          store,
+          {
+            data: {
+              shareSnapshot: {
+                snapshot: { id, shared },
+              },
+            },
+          }
+        ) {
+          store.writeFragment({
+            id,
+            fragment: gql`
+              fragment SnapshotFragment on SnapshotNode {
+                shared
+              }
+            `,
+            data: {
+              shared,
+              __typename: 'SnapshotNode',
+            },
+          });
+        },
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .snapshot-list-item {
+.snapshot-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  &__title {
+    @include heading-4;
+    width: 180px;
+  }
+
+  &__date {
+    @include regular-text;
+  }
+
+  &__link {
+    @include default-link;
+    color: $color-brand;
+  }
+
+  &__icon {
+    @include default-icon;
+  }
+
+  &__actions {
     display: flex;
     align-items: center;
-    justify-content: flex-start;
-
-    &__title {
-      @include heading-4;
-      width: 180px;
-    }
-
-    &__date {
-      @include regular-text;
-    }
-
-    &__link {
-      @include default-link;
-      color: $color-brand;
-    }
-
-    &__icon {
-      @include default-icon;
-    }
-
-    &__actions {
-      display: flex;
-      align-items: center;
-      margin-left: auto;
-    }
+    margin-left: auto;
   }
+}
 </style>
diff --git a/client/src/components/modules/SnapshotMenu.vue b/client/src/components/modules/SnapshotMenu.vue
index 9b91a283..8e338085 100644
--- a/client/src/components/modules/SnapshotMenu.vue
+++ b/client/src/components/modules/SnapshotMenu.vue
@@ -1,65 +1,49 @@
 <template>
-  <div
-    class="snapshot-menu"
-    data-cy="snapshot-menu"
-  >
-    <a
-      data-cy="module-snapshots-button"
-      class="snapshot-menu__toggle"
-      @click.stop="showPopover = true"
-    >Snapshots</a>
-    <widget-popover
-      class="snapshot-menu__popover"
-      v-if="showPopover"
-      @hide-me="showPopover = false"
-    >
+  <div class="snapshot-menu" data-cy="snapshot-menu">
+    <a data-cy="module-snapshots-button" class="snapshot-menu__toggle" @click.stop="showPopover = true">Snapshots</a>
+    <widget-popover class="snapshot-menu__popover" v-if="showPopover" @hide-me="showPopover = false">
       <a
         class="popover-links__link snapshot-menu__link snapshot-menu__button snapshot-menu__button--primary"
         data-cy="create-snapshot-button"
         @click="createSnapshot"
-      >Neuen
-        Snapshot erstellen</a>
-      <router-link
-        :to="snapshotListRoute"
-        class="popover-links__link snapshot-menu__link"
+        >Neuen Snapshot erstellen</a
       >
+      <router-link :to="snapshotListRoute" class="popover-links__link snapshot-menu__link">
         Alle Snapshots anzeigen
       </router-link>
-      <a
-        class="popover-links__link snapshot-menu__link"
-        href="https://myskillbox.ch/faq"
-      >Was ist ein Snapshot?</a>
+      <a class="popover-links__link snapshot-menu__link" href="https://myskillbox.ch/faq">Was ist ein Snapshot?</a>
     </widget-popover>
   </div>
 </template>
 
 <script>
-  import WidgetPopover from '@/components/ui/WidgetPopover';
-  import {SNAPSHOT_LIST} from '@/router/module.names';
-  import me from '@/mixins/me';
+import WidgetPopover from '@/components/ui/WidgetPopover';
+import { SNAPSHOT_LIST } from '@/router/module.names';
+import me from '@/mixins/me';
 
-  import CREATE_SNAPSHOT_MUTATION from '@/graphql/gql/mutations/createSnapshot.gql';
-  import MODULE_SNAPSHOTS_QUERY from '@/graphql/gql/queries/moduleSnapshots.gql';
+import CREATE_SNAPSHOT_MUTATION from '@/graphql/gql/mutations/createSnapshot.gql';
+import MODULE_SNAPSHOTS_QUERY from '@/graphql/gql/queries/moduleSnapshots.gql';
 
-  export default {
-    mixins: [me],
+export default {
+  mixins: [me],
 
-    components: {
-      WidgetPopover,
-    },
+  components: {
+    WidgetPopover,
+  },
 
-    data() {
-      return {
-        snapshotListRoute: {
-          name: SNAPSHOT_LIST,
-        },
-        showPopover: false,
-      };
-    },
+  data() {
+    return {
+      snapshotListRoute: {
+        name: SNAPSHOT_LIST,
+      },
+      showPopover: false,
+    };
+  },
 
-    methods: {
-      createSnapshot() {
-        this.$apollo.mutate({
+  methods: {
+    createSnapshot() {
+      this.$apollo
+        .mutate({
           mutation: CREATE_SNAPSHOT_MUTATION,
           variables: {
             input: {
@@ -67,7 +51,14 @@
               selectedClass: this.me.selectedClass.id,
             },
           },
-          update: (store, {data: {createSnapshot: {snapshot}}}) => {
+          update: (
+            store,
+            {
+              data: {
+                createSnapshot: { snapshot },
+              },
+            }
+          ) => {
             const slug = this.$route.params.slug;
             const query = MODULE_SNAPSHOTS_QUERY;
             const variables = {
@@ -78,15 +69,12 @@
               variables,
             });
             if (cached) {
-              const {module} = cached;
+              const { module } = cached;
               const data = {
                 module: {
                   ...module,
-                  snapshots: [
-                    snapshot,
-                    ...module.snapshots,
-                  ],
-                }
+                  snapshots: [snapshot, ...module.snapshots],
+                },
               };
               store.writeQuery({
                 query,
@@ -95,46 +83,53 @@
               });
             }
           },
-        }).then(({data: {createSnapshot: {snapshot}}}) => {
-          this.showPopover = false;
-          this.$modal.open('snapshot-created', {
-            snapshot,
-          });
-        });
-      },
+        })
+        .then(
+          ({
+            data: {
+              createSnapshot: { snapshot },
+            },
+          }) => {
+            this.showPopover = false;
+            this.$modal.open('snapshot-created', {
+              snapshot,
+            });
+          }
+        );
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .snapshot-menu {
-    position: relative;
+.snapshot-menu {
+  position: relative;
 
-    &__toggle {
-      @include regular-text;
-      cursor: pointer;
-    }
-
-    &__popover {
-      box-sizing: border-box;
-      min-width: 300px;
-      height: 170px;
-      left: 0;
-      top: 35px;
-      padding: $medium-spacing;
-    }
-
-    &__link {
-      @include large-link;
-      line-height: 27px;
-      padding: $small-spacing 0;
-    }
-
-    &__button {
-      @include button-border;
-      padding: 5px $small-spacing;
-    }
+  &__toggle {
+    @include regular-text;
+    cursor: pointer;
   }
+
+  &__popover {
+    box-sizing: border-box;
+    min-width: 300px;
+    height: 170px;
+    left: 0;
+    top: 35px;
+    padding: $medium-spacing;
+  }
+
+  &__link {
+    @include large-link;
+    line-height: 27px;
+    padding: $small-spacing 0;
+  }
+
+  &__button {
+    @include button-border;
+    padding: 5px $small-spacing;
+  }
+}
 </style>
diff --git a/client/src/components/modules/SnapshotTeamMenu.vue b/client/src/components/modules/SnapshotTeamMenu.vue
index b14c514a..c0885bc7 100644
--- a/client/src/components/modules/SnapshotTeamMenu.vue
+++ b/client/src/components/modules/SnapshotTeamMenu.vue
@@ -2,54 +2,54 @@
   <ul class="snapshot-team-menu">
     <li class="snapshot-team-menu__item">
       <a
-        :class="{'snapshot-team-menu__link--active': selected === 'mine'}"
+        :class="{ 'snapshot-team-menu__link--active': selected === 'mine' }"
         class="snapshot-team-menu__link"
         @click="$emit('select', 'mine')"
-      >Meine Snapshots</a>
+        >Meine Snapshots</a
+      >
     </li>
-    <li
-      class="snapshot-team-menu__item"
-    >
+    <li class="snapshot-team-menu__item">
       <a
-        :class="{'snapshot-team-menu__link--active': selected === 'team'}"
+        :class="{ 'snapshot-team-menu__link--active': selected === 'team' }"
         class="snapshot-team-menu__link"
         data-cy="team-snapshots-link"
         @click="$emit('select', 'team')"
-      >Team Snapshots</a>
+        >Team Snapshots</a
+      >
     </li>
   </ul>
 </template>
 
 <script>
-  export default {
-    props: {
-      selected: {
-        type: String,
-        default: 'mine',
-      },
+export default {
+  props: {
+    selected: {
+      type: String,
+      default: 'mine',
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .snapshot-team-menu {
-    display: flex;
+.snapshot-team-menu {
+  display: flex;
 
-    &__item {
-      margin-right: $large-spacing;
-      padding: $medium-spacing 0;
-    }
+  &__item {
+    margin-right: $large-spacing;
+    padding: $medium-spacing 0;
+  }
 
-    &__link {
-      @include default-link;
-      color: $color-silver-dark;
-      cursor: pointer;
+  &__link {
+    @include default-link;
+    color: $color-silver-dark;
+    cursor: pointer;
 
-      &--active {
-        color: $color-brand;
-      }
+    &--active {
+      color: $color-brand;
     }
   }
+}
 </style>
diff --git a/client/src/components/news/NewsTeaser.vue b/client/src/components/news/NewsTeaser.vue
index eaae87b9..a03cfe15 100644
--- a/client/src/components/news/NewsTeaser.vue
+++ b/client/src/components/news/NewsTeaser.vue
@@ -1,17 +1,8 @@
 <template>
-  <div
-    class="news-teaser"
-    data-cy="news-teaser"
-  >
+  <div class="news-teaser" data-cy="news-teaser">
     <a :href="teaser.newsArticleUrl">
-      <img
-        :src="teaser.imageUrl"
-        class="news-teaser__image"
-      >
-      <a
-        :href="teaser.imageSource"
-        class="news-teaser__image-source"
-      >Quelle {{ teaser.imageSource }}</a>
+      <img :src="teaser.imageUrl" class="news-teaser__image" />
+      <a :href="teaser.imageSource" class="news-teaser__image-source">Quelle {{ teaser.imageSource }}</a>
 
       <h4 class="news-teaser__title">{{ teaser.title }}</h4>
       <p class="news-teaser__description">{{ teaser.description }}</p>
@@ -27,14 +18,14 @@ export default {
       type: Object,
       default: () => {
         return {};
-      }
-    }
-  }
+      },
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
-@import "~styles/helpers";
+@import '~styles/helpers';
 
 .news-teaser {
   position: relative;
diff --git a/client/src/components/news/NewsTeaserOld.vue b/client/src/components/news/NewsTeaserOld.vue
index 36028216..7419b515 100644
--- a/client/src/components/news/NewsTeaserOld.vue
+++ b/client/src/components/news/NewsTeaserOld.vue
@@ -1,64 +1,55 @@
 <template>
   <div class="news-teaser">
     <h4 class="small-emph">
-      <a
-        :href="url"
-        target="_blank"
-        class="teaser__title"
-      >{{ title }}</a>
+      <a :href="url" target="_blank" class="teaser__title">{{ title }}</a>
     </h4>
-    <a
-      :href="url"
-      target="_blank"
-      class="teaser__date"
-    >
+    <a :href="url" target="_blank" class="teaser__date">
       {{ date }}
     </a>
   </div>
 </template>
 
 <script>
-  export default {
-    props: ['title', 'date', 'url']
-  };
+export default {
+  props: ['title', 'date', 'url'],
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_functions.scss';
+@import '@/styles/_mixins.scss';
 
-  .news-teaser {
-    display: flex;
-    border-bottom: 1px solid $color-silver-light;
-    padding-bottom: $large-spacing;
-    text-align: center;
+.news-teaser {
+  display: flex;
+  border-bottom: 1px solid $color-silver-light;
+  padding-bottom: $large-spacing;
+  text-align: center;
 
-    @include desktop {
-      border-bottom: 0;
-      border-left: 1px solid $color-silver-light;
-      padding-bottom: 0;
-      text-align: left;
-    }
-
-    padding-left: $medium-spacing;
-    flex-direction: column;
+  @include desktop {
+    border-bottom: 0;
+    border-left: 1px solid $color-silver-light;
+    padding-bottom: 0;
+    text-align: left;
   }
 
-  .teaser {
-    &__title {
-      color: $color-white;
-      font-family: $sans-serif-font-family;
-      font-weight: $font-weight-bold;
-      line-height: $default-line-height;
-      margin-bottom: $small-spacing;
-    }
+  padding-left: $medium-spacing;
+  flex-direction: column;
+}
 
-    &__date {
-      color: $color-white;
-      font-family: $sans-serif-font-family;
-      font-size: toRem(14px);
-    }
+.teaser {
+  &__title {
+    color: $color-white;
+    font-family: $sans-serif-font-family;
+    font-weight: $font-weight-bold;
+    line-height: $default-line-height;
+    margin-bottom: $small-spacing;
   }
 
+  &__date {
+    color: $color-white;
+    font-family: $sans-serif-font-family;
+    font-size: toRem(14px);
+  }
+}
 </style>
diff --git a/client/src/components/news/NewsTeasers.vue b/client/src/components/news/NewsTeasers.vue
index 6f0f6a54..ee49748b 100644
--- a/client/src/components/news/NewsTeasers.vue
+++ b/client/src/components/news/NewsTeasers.vue
@@ -1,50 +1,45 @@
 <template>
   <div class="news-teasers">
-    <news-teaser
-      :teaser="teaser"
-      class="news-teasers__teaser teaser"
-      v-for="teaser in newsTeasers"
-      :key="teaser.id"
-    />
+    <news-teaser :teaser="teaser" class="news-teasers__teaser teaser" v-for="teaser in newsTeasers" :key="teaser.id" />
   </div>
 </template>
 
 <script>
-  import NewsTeaser from '@/components/news/NewsTeaser';
+import NewsTeaser from '@/components/news/NewsTeaser';
 
-  import news from '@/mixins/news';
+import news from '@/mixins/news';
 
-  export default {
-    mixins: [news],
+export default {
+  mixins: [news],
 
-    components: {
-      NewsTeaser
-    },
-  };
+  components: {
+    NewsTeaser,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_functions.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_functions.scss';
+@import '@/styles/_mixins.scss';
 
-  $image_height: 254px;
+$image_height: 254px;
 
-  .news-teasers {
-    display: -ms-grid;
-    @supports (display: grid) {
-      display: grid;
-    }
-    margin-bottom: $large-spacing;
-    grid-gap: $large-spacing;
-
-    @include desktop {
-      grid-column-gap: $large-spacing;
-      grid-row-gap: $section-spacing;
-      grid-template-columns: repeat(auto-fit, minmax(320px, $news-width));
-      grid-auto-rows: minmax(400px, auto);
-      grid-template-rows: auto auto;
-      -ms-grid-columns: $news-width $news-width;
-    }
+.news-teasers {
+  display: -ms-grid;
+  @supports (display: grid) {
+    display: grid;
   }
+  margin-bottom: $large-spacing;
+  grid-gap: $large-spacing;
+
+  @include desktop {
+    grid-column-gap: $large-spacing;
+    grid-row-gap: $section-spacing;
+    grid-template-columns: repeat(auto-fit, minmax(320px, $news-width));
+    grid-auto-rows: minmax(400px, auto);
+    grid-template-rows: auto auto;
+    -ms-grid-columns: $news-width $news-width;
+  }
+}
 </style>
diff --git a/client/src/components/notes/BookmarkActions.vue b/client/src/components/notes/BookmarkActions.vue
index f0bfd254..e2db25e3 100644
--- a/client/src/components/notes/BookmarkActions.vue
+++ b/client/src/components/notes/BookmarkActions.vue
@@ -1,10 +1,7 @@
 <template>
-  <div
-    class="bookmark-actions"
-    v-if="!editMode"
-  >
+  <div class="bookmark-actions" v-if="!editMode">
     <a
-      :class="{'bookmark-actions__action--bookmarked': bookmarked}"
+      :class="{ 'bookmark-actions__action--bookmarked': bookmarked }"
       class="bookmark-actions__action bookmark-actions__bookmark"
       data-cy="bookmark-action"
       @click="$emit('bookmark')"
@@ -32,73 +29,73 @@
 </template>
 
 <script>
-  const BookmarkIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/BookmarkIcon');
-  const AddNoteIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/AddNoteIcon');
-  const NoteIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/NoteIcon');
+const BookmarkIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/BookmarkIcon');
+const AddNoteIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddNoteIcon');
+const NoteIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/NoteIcon');
 
-  export default {
-    props: {
-      bookmarked: {
-        type: Boolean,
-        default: false
-      },
-      note: {
-        type: [Object, Boolean],
-        default: false
-      },
-      editMode: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  props: {
+    bookmarked: {
+      type: Boolean,
+      default: false,
     },
-    components: {
-      BookmarkIcon,
-      AddNoteIcon,
-      NoteIcon
+    note: {
+      type: [Object, Boolean],
+      default: false,
     },
-  };
+    editMode: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    BookmarkIcon,
+    AddNoteIcon,
+    NoteIcon,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .bookmark-actions {
-    height: 100%;
-    min-height: 60px;
+.bookmark-actions {
+  height: 100%;
+  min-height: 60px;
 
-    padding: 0 2*$large-spacing;
-    position: absolute;
-    right: -5*$large-spacing;
+  padding: 0 2 * $large-spacing;
+  position: absolute;
+  right: -5 * $large-spacing;
 
-    display: none;
+  display: none;
 
-    @include desktop {
-      display: flex;
-    }
+  @include desktop {
+    display: flex;
+  }
 
-    flex-direction: column;
-    align-content: center;
+  flex-direction: column;
+  align-content: center;
 
-    &__action {
-      opacity: 0;
-      transition: opacity 0.3s;
-      cursor: pointer;
-      width: 26px;
-      display: flex;
-      justify-content: center;
+  &__action {
+    opacity: 0;
+    transition: opacity 0.3s;
+    cursor: pointer;
+    width: 26px;
+    display: flex;
+    justify-content: center;
 
-      &--bookmarked, &--noted {
-        opacity: 1;
-      }
-    }
-
-    $parent: &;
-
-    &:hover {
-      #{$parent}__action {
-        opacity: 1;
-      }
+    &--bookmarked,
+    &--noted {
+      opacity: 1;
     }
   }
 
+  $parent: &;
+
+  &:hover {
+    #{$parent}__action {
+      opacity: 1;
+    }
+  }
+}
 </style>
diff --git a/client/src/components/notes/EditNoteWizard.vue b/client/src/components/notes/EditNoteWizard.vue
index 18e070d7..210ef418 100644
--- a/client/src/components/notes/EditNoteWizard.vue
+++ b/client/src/components/notes/EditNoteWizard.vue
@@ -1,40 +1,37 @@
 <template>
-  <note-form
-    :note="currentNote"
-    @save="editNote"
-    @hide="hide"
-  />
+  <note-form :note="currentNote" @save="editNote" @hide="hide" />
 </template>
 
 <script>
-  import NoteForm from '@/components/notes/NoteForm';
+import NoteForm from '@/components/notes/NoteForm';
 
-  import UPDATE_NOTE_MUTATION from '@/graphql/gql/mutations/updateNote.gql';
-  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
-  import INSTRUMENT_QUERY from '@/graphql/gql/queries/instrumentQuery.gql';
+import UPDATE_NOTE_MUTATION from '@/graphql/gql/mutations/updateNote.gql';
+import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
+import INSTRUMENT_QUERY from '@/graphql/gql/queries/instrumentQuery.gql';
 
-  import {mapGetters} from 'vuex';
+import { mapGetters } from 'vuex';
 
-  export default {
-    components: {
-      NoteForm
-    },
+export default {
+  components: {
+    NoteForm,
+  },
 
-    computed: {
-      ...mapGetters(['currentNote'])
-    },
+  computed: {
+    ...mapGetters(['currentNote']),
+  },
 
-    methods: {
-      editNote(note) {
-        const slug = this.$route.params.slug;
-        const routeName = this.$route.name;
+  methods: {
+    editNote(note) {
+      const slug = this.$route.params.slug;
+      const routeName = this.$route.name;
 
-        this.$apollo.mutate({
+      this.$apollo
+        .mutate({
           mutation: UPDATE_NOTE_MUTATION,
           variables: {
             input: {
-              note
-            }
+              note,
+            },
           },
           refetchQueries() {
             let query;
@@ -42,26 +39,27 @@
               query = {
                 query: INSTRUMENT_QUERY,
                 variables: {
-                  slug
-                }
+                  slug,
+                },
               };
             } else {
               query = {
                 query: MODULE_DETAILS_QUERY,
                 variables: {
-                  slug
-                }
+                  slug,
+                },
               };
             }
             return [query];
-          }
-        }).then(() => {
+          },
+        })
+        .then(() => {
           this.$store.dispatch('hideModal');
         });
-      },
-      hide() {
-        this.$store.dispatch('hideModal');
-      }
-    }
-  };
+    },
+    hide() {
+      this.$store.dispatch('hideModal');
+    },
+  },
+};
 </script>
diff --git a/client/src/components/notes/NewNoteWizard.vue b/client/src/components/notes/NewNoteWizard.vue
index 0f1376b3..b604dfd7 100644
--- a/client/src/components/notes/NewNoteWizard.vue
+++ b/client/src/components/notes/NewNoteWizard.vue
@@ -1,63 +1,57 @@
 <template>
-  <note-form
-    :note="note"
-    @save="addNote"
-    @hide="hide"
-  />
+  <note-form :note="note" @save="addNote" @hide="hide" />
 </template>
 
 <script>
-  import NoteForm from '@/components/notes/NoteForm';
+import NoteForm from '@/components/notes/NoteForm';
 
-  import {mapGetters} from 'vuex';
-  import {constructNoteMutation} from '@/helpers/new-note-mutation.js';
+import { mapGetters } from 'vuex';
+import { constructNoteMutation } from '@/helpers/new-note-mutation.js';
 
-  export default {
-    components: {
-      NoteForm
-    },
+export default {
+  components: {
+    NoteForm,
+  },
 
-    data() {
-      return {
-        note: {}
-      };
-    },
+  data() {
+    return {
+      note: {},
+    };
+  },
 
-    computed: {
-      ...mapGetters(['currentContent', 'currentNoteBlock', 'currentNoteParent', 'noteType'])
-    },
+  computed: {
+    ...mapGetters(['currentContent', 'currentNoteBlock', 'currentNoteParent', 'noteType']),
+  },
 
-    methods: {
-      addNote(n) {
-        const content = this.currentContent;
-        const block = this.currentNoteBlock;
-        const parent = this.currentNoteParent;
-        const type = this.noteType;
-        const text = n.text;
-        let note = {};
-        if (content > '') {
-          note = {
-            content,
-            block,
-            text,
-          };
-        } else {
-          note = {
-            parent,
-            text
-          };
-        }
-        if(type){
-          note.type = type;
-        }
-
-        this.$apollo
-          .mutate(constructNoteMutation(note))
-          .then(this.hide);
-      },
-      hide() {
-        this.$store.dispatch('hideModal');
+  methods: {
+    addNote(n) {
+      const content = this.currentContent;
+      const block = this.currentNoteBlock;
+      const parent = this.currentNoteParent;
+      const type = this.noteType;
+      const text = n.text;
+      let note = {};
+      if (content > '') {
+        note = {
+          content,
+          block,
+          text,
+        };
+      } else {
+        note = {
+          parent,
+          text,
+        };
       }
-    }
-  };
+      if (type) {
+        note.type = type;
+      }
+
+      this.$apollo.mutate(constructNoteMutation(note)).then(this.hide);
+    },
+    hide() {
+      this.$store.dispatch('hideModal');
+    },
+  },
+};
 </script>
diff --git a/client/src/components/notes/NoteForm.vue b/client/src/components/notes/NoteForm.vue
index e1bae65f..64aa5368 100644
--- a/client/src/components/notes/NoteForm.vue
+++ b/client/src/components/notes/NoteForm.vue
@@ -1,8 +1,5 @@
 <template>
-  <modal
-    :hide-header="true"
-    :small="true"
-  >
+  <modal :hide-header="true" :small="true">
     <modal-input
       :value="localNote.text"
       placeholder="Notiz erfassen"
@@ -11,40 +8,34 @@
     />
     <template #footer>
       <div>
-        <a
-          class="button button--primary"
-          data-cy="modal-save-button"
-          @click="$emit('save', localNote)"
-        >Speichern</a>
-        <a
-          class="button"
-          @click="$emit('hide')"
-        >Abbrechen</a>
+        <a class="button button--primary" data-cy="modal-save-button" @click="$emit('save', localNote)">Speichern</a>
+        <a class="button" @click="$emit('hide')">Abbrechen</a>
       </div>
     </template>
   </modal>
 </template>
 
 <script>
-  import Modal from '@/components/Modal';
-  import ModalInput from '@/components/ModalInput';
+import Modal from '@/components/Modal';
+import ModalInput from '@/components/ModalInput';
 
-  export default {
-    props: ['note'],
+export default {
+  props: ['note'],
 
-    components: {
-      Modal,
-      ModalInput
-    },
+  components: {
+    Modal,
+    ModalInput,
+  },
 
-    data() {
-      return {
-        localNote: Object.assign({},
-          {
-            ...this.note
-          }
-        )
-      };
-    }
-  };
+  data() {
+    return {
+      localNote: Object.assign(
+        {},
+        {
+          ...this.note,
+        }
+      ),
+    };
+  },
+};
 </script>
diff --git a/client/src/components/objective-groups/NewObjectiveWizard.vue b/client/src/components/objective-groups/NewObjectiveWizard.vue
index a2ee335c..590c3e40 100644
--- a/client/src/components/objective-groups/NewObjectiveWizard.vue
+++ b/client/src/components/objective-groups/NewObjectiveWizard.vue
@@ -1,79 +1,80 @@
 <template>
-  <modal
-    :hide-header="true"
-    :small="true"
-  >
-    <modal-input
-      :placeholder="'Lernziel'"
-      :value="text"
-      @input="text = $event"
-    />
+  <modal :hide-header="true" :small="true">
+    <modal-input :placeholder="'Lernziel'" :value="text" @input="text = $event" />
 
     <template #footer>
       <div>
         <a
-          :class="{'button--disabled': disableSave}"
+          :class="{ 'button--disabled': disableSave }"
           class="button button--primary"
           data-cy="modal-save-button"
           @click="save(text)"
-        >Speichern</a>
-        <a
-          class="button"
-          @click="hide()"
-        >Abbrechen</a>
+          >Speichern</a
+        >
+        <a class="button" @click="hide()">Abbrechen</a>
       </div>
     </template>
   </modal>
 </template>
 
 <script>
-  import Modal from '@/components/Modal';
-  import ModalInput from '@/components/ModalInput';
+import Modal from '@/components/Modal';
+import ModalInput from '@/components/ModalInput';
 
-  import NEW_OBJECTIVE_MUTATION from '@/graphql/gql/mutations/addObjective.gql';
-  import OBJECTIVE_GROUP_QUERY from '@/graphql/gql/queries/objectiveGroupQuery.gql';
+import NEW_OBJECTIVE_MUTATION from '@/graphql/gql/mutations/addObjective.gql';
+import OBJECTIVE_GROUP_QUERY from '@/graphql/gql/queries/objectiveGroupQuery.gql';
 
+export default {
+  components: {
+    Modal,
+    ModalInput,
+  },
 
-  export default {
-    components: {
-      Modal,
-      ModalInput,
+  data() {
+    return {
+      text: '',
+      saving: false,
+    };
+  },
+
+  computed: {
+    objectiveGroup() {
+      return this.$modal.state.payload.parent;
     },
-
-    data() {
-      return {
-        text: '',
-        saving: false,
-      };
+    disableSave() {
+      return this.saving;
     },
+  },
 
-    computed: {
-      objectiveGroup() {
-        return this.$modal.state.payload.parent;
-      },
-      disableSave() {
-        return this.saving;
-      },
-    },
-
-    methods: {
-      save(entry) {
-        this.saving = true;
-        this.$apollo.mutate({
+  methods: {
+    save(entry) {
+      this.saving = true;
+      this.$apollo
+        .mutate({
           mutation: NEW_OBJECTIVE_MUTATION,
           variables: {
             input: {
-              objective: Object.assign({}, {
-                objectiveGroup: this.objectiveGroup,
-                text: entry,
-              }),
+              objective: Object.assign(
+                {},
+                {
+                  objectiveGroup: this.objectiveGroup,
+                  text: entry,
+                }
+              ),
             },
           },
-          update: (store, {data: {addObjective: {objective}}}) => {
+          update: (
+            store,
+            {
+              data: {
+                addObjective: { objective },
+              },
+            }
+          ) => {
             try {
               const query = OBJECTIVE_GROUP_QUERY;
-              const variables = {id: this.objectiveGroup};
-              const {objectiveGroup} = store.readQuery({query, variables});
+              const variables = { id: this.objectiveGroup };
+              const { objectiveGroup } = store.readQuery({ query, variables });
               if (objectiveGroup && objectiveGroup.objectives) {
                 const objectives = [
                   ...objectiveGroup.objectives,
@@ -88,20 +89,21 @@
                     objectives,
                   },
                 };
-                store.writeQuery({query, variables, data});
+                store.writeQuery({ query, variables, data });
               }
             } catch (e) {
               // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
             }
           },
-        }).then(() => {
+        })
+        .then(() => {
           this.saving = false;
           this.$modal.confirm();
         });
-      },
-      hide() {
-        this.$modal.cancel();
-      },
     },
-  };
+    hide() {
+      this.$modal.cancel();
+    },
+  },
+};
 </script>
diff --git a/client/src/components/objective-groups/Objective.vue b/client/src/components/objective-groups/Objective.vue
index ffdebde0..d725bc58 100644
--- a/client/src/components/objective-groups/Objective.vue
+++ b/client/src/components/objective-groups/Objective.vue
@@ -1,22 +1,8 @@
 <template>
-  <li
-    :class="{'hideable-element--greyed-out': hidden}"
-    class="objective hideable-element"
-    v-if="editMode || !hidden"
-  >
-    <visibility-action
-      :block="objective"
-      :type="type"
-      v-if="editMode"
-    />
-    <div
-      class="block-actions"
-      v-if="editMode && canEdit"
-    >
-      <user-widget
-        v-bind="me"
-        class="block-actions__user-widget objective__user-widget"
-      />
+  <li :class="{ 'hideable-element--greyed-out': hidden }" class="objective hideable-element" v-if="editMode || !hidden">
+    <visibility-action :block="objective" :type="type" v-if="editMode" />
+    <div class="block-actions" v-if="editMode && canEdit">
+      <user-widget v-bind="me" class="block-actions__user-widget objective__user-widget" />
       <more-options-widget>
         <div class="popover-links__link">
           <a @click="deleteObjective(objective)">Löschen</a>
@@ -30,96 +16,98 @@
 </template>
 
 <script>
-  import VisibilityAction from '@/components/visibility/VisibilityAction';
-  import UserWidget from '@/components/UserWidget';
-  import MoreOptionsWidget from '@/components/MoreOptionsWidget';
+import VisibilityAction from '@/components/visibility/VisibilityAction';
+import UserWidget from '@/components/UserWidget';
+import MoreOptionsWidget from '@/components/MoreOptionsWidget';
 
-  import DELETE_OBJECTIVE_MUTATION from '@/graphql/gql/mutations/deleteObjective.gql';
-  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
-  import {hidden} from '@/helpers/visibility';
-  import {OBJECTIVE_TYPE} from '@/consts/types';
+import DELETE_OBJECTIVE_MUTATION from '@/graphql/gql/mutations/deleteObjective.gql';
+import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
+import { hidden } from '@/helpers/visibility';
+import { OBJECTIVE_TYPE } from '@/consts/types';
 
-  import me from '@/mixins/me';
+import me from '@/mixins/me';
 
-  export default {
-    props: {
-      objective: {
-        type: Object,
-        default: null
-      },
-      editMode: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  props: {
+    objective: {
+      type: Object,
+      default: null,
     },
-
-    mixins: [me],
-
-    components: {
-      MoreOptionsWidget,
-      VisibilityAction,
-      UserWidget
+    editMode: {
+      type: Boolean,
+      default: false,
     },
+  },
 
-    data() {
-      return {
-        type: OBJECTIVE_TYPE
-      };
+  mixins: [me],
+
+  components: {
+    MoreOptionsWidget,
+    VisibilityAction,
+    UserWidget,
+  },
+
+  data() {
+    return {
+      type: OBJECTIVE_TYPE,
+    };
+  },
+
+  computed: {
+    hidden() {
+      return hidden({
+        block: this.objective,
+        schoolClass: this.schoolClass,
+        type: this.type,
+      });
     },
-
-    computed: {
-      hidden() {
-        return hidden({
-          block: this.objective,
-          schoolClass: this.schoolClass,
-          type: this.type
-        });
-      },
-      canEdit() {
-        return this.objective.mine;
-      }
+    canEdit() {
+      return this.objective.mine;
     },
+  },
 
-    methods: {
-      deleteObjective(objective) {
-        this.$apollo.mutate({
-          mutation: DELETE_OBJECTIVE_MUTATION,
-          variables: {
-            input: {
-              id: objective.id
-            }
+  methods: {
+    deleteObjective(objective) {
+      this.$apollo.mutate({
+        mutation: DELETE_OBJECTIVE_MUTATION,
+        variables: {
+          input: {
+            id: objective.id,
           },
-          refetchQueries: [{
+        },
+        refetchQueries: [
+          {
             query: MODULE_DETAILS_QUERY,
             variables: {
-              slug: this.$route.params.slug
-            }
-          }]
-          // todo: make update work here also
-          // update(store, {data: {deleteObjective: {success}}}) {
-          //   if (success) {
-          //     const query = MODULE_DETAILS_QUERY;
-          //     const variables = {slug: this.$route.params.slug};
-          //     const data = store.readQuery({query, variables});
-          //     if (data) {
-          //       data.module.objectiveGroups.edges.
-          //       data.rooms.edges.splice(data.rooms.edges.findIndex(edge => edge.node.id === theId), 1);
-          //       store.writeQuery({query, variables, data});
-          //     }
-          //   }
-          // }
-        });
-      }
-    }
-  };
+              slug: this.$route.params.slug,
+            },
+          },
+        ],
+        // todo: make update work here also
+        // update(store, {data: {deleteObjective: {success}}}) {
+        //   if (success) {
+        //     const query = MODULE_DETAILS_QUERY;
+        //     const variables = {slug: this.$route.params.slug};
+        //     const data = store.readQuery({query, variables});
+        //     if (data) {
+        //       data.module.objectiveGroups.edges.
+        //       data.rooms.edges.splice(data.rooms.edges.findIndex(edge => edge.node.id === theId), 1);
+        //       store.writeQuery({query, variables, data});
+        //     }
+        //   }
+        // }
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  .objective {
-    min-height: 50px;
+.objective {
+  min-height: 50px;
 
-    &__user-widget {
-      margin-right: 0;
-    }
+  &__user-widget {
+    margin-right: 0;
   }
+}
 </style>
diff --git a/client/src/components/objective-groups/ObjectiveForm.vue b/client/src/components/objective-groups/ObjectiveForm.vue
index 351b3f04..c8e375f7 100644
--- a/client/src/components/objective-groups/ObjectiveForm.vue
+++ b/client/src/components/objective-groups/ObjectiveForm.vue
@@ -6,39 +6,36 @@
       placeholder="Lernziel erfassen..."
       @input="$emit('input', $event)"
     />
-    <a
-      class="icon-button"
-      @click="$emit('delete')"
-    >
+    <a class="icon-button" @click="$emit('delete')">
       <trash-icon class="icon-button__icon icon-button__icon--subtle" />
     </a>
   </div>
 </template>
 
 <script>
-  import ModalInput from '@/components/ModalInput';
-  const TrashIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon');
+import ModalInput from '@/components/ModalInput';
+const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
 
-  export default {
-    props: ['objective'],
+export default {
+  props: ['objective'],
 
-    components: {
-      ModalInput,
-      TrashIcon
-    }
-  };
+  components: {
+    ModalInput,
+    TrashIcon,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+@import '@/styles/_variables.scss';
 
-  .objective-form {
-    display: grid;
-    grid-template-columns: 1fr 50px;
-    margin-bottom: 10px;
+.objective-form {
+  display: grid;
+  grid-template-columns: 1fr 50px;
+  margin-bottom: 10px;
 
-    &__input {
-      width: $modal-input-width;
-    }
+  &__input {
+    width: $modal-input-width;
   }
+}
 </style>
diff --git a/client/src/components/objective-groups/ObjectiveGroup.vue b/client/src/components/objective-groups/ObjectiveGroup.vue
index 48eea452..04a2f596 100644
--- a/client/src/components/objective-groups/ObjectiveGroup.vue
+++ b/client/src/components/objective-groups/ObjectiveGroup.vue
@@ -1,14 +1,10 @@
 <template>
   <div
-    :class="{'hideable-element--greyed-out': hidden}"
+    :class="{ 'hideable-element--greyed-out': hidden }"
     class="objective-group hideable-element"
     v-if="editMode || !hidden"
   >
-    <visibility-action
-      :block="group"
-      :type="type"
-      v-if="editMode"
-    />
+    <visibility-action :block="group" :type="type" v-if="editMode" />
 
     <h4>{{ group.displayTitle }}</h4>
 
@@ -21,74 +17,69 @@
         :key="objective.id"
       />
     </ul>
-    <add-content-button
-      :parent="group"
-      :where="{parent: group}"
-      v-if="editMode"
-    />
+    <add-content-button :parent="group" :where="{ parent: group }" v-if="editMode" />
   </div>
 </template>
 
 <script>
-  import Objective from '@/components/objective-groups/Objective';
-  import VisibilityAction from '@/components/visibility/VisibilityAction';
-  import AddContentButton from '@/components/AddContentButton';
+import Objective from '@/components/objective-groups/Objective';
+import VisibilityAction from '@/components/visibility/VisibilityAction';
+import AddContentButton from '@/components/AddContentButton';
 
-  import me from '@/mixins/me';
+import me from '@/mixins/me';
 
-  import {OBJECTIVE_GROUP_TYPE} from '@/consts/types';
-  import {hidden} from '@/helpers/visibility';
+import { OBJECTIVE_GROUP_TYPE } from '@/consts/types';
+import { hidden } from '@/helpers/visibility';
 
-  export default {
-    props: {
-      group: {
-        required: true,
-        type: Object
-      }
+export default {
+  props: {
+    group: {
+      required: true,
+      type: Object,
     },
+  },
 
-    mixins: [me],
+  mixins: [me],
 
-    components: {
-      AddContentButton,
-      Objective,
-      VisibilityAction
+  components: {
+    AddContentButton,
+    Objective,
+    VisibilityAction,
+  },
+
+  data() {
+    return {
+      type: OBJECTIVE_GROUP_TYPE,
+    };
+  },
+
+  computed: {
+    editMode() {
+      return this.group.module.inEditMode;
     },
-
-    data() {
-      return {
-        type: OBJECTIVE_GROUP_TYPE
-      };
+    hidden() {
+      return hidden({
+        block: this.group,
+        schoolClass: this.schoolClass,
+        type: this.type,
+      });
     },
-
-    computed: {
-      editMode() {
-        return this.group.module.inEditMode;
-      },
-      hidden() {
-        return hidden({
-          block: this.group,
-          schoolClass: this.schoolClass,
-          type: this.type,
-        });
-      },
-    },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .objective-group {
-    position: relative;
-    margin-top: $large-spacing;
-
-    &__actions {
-      position: absolute;
-      left: -70px;
-      top: -4px;
-      display: grid;
-    }
+.objective-group {
+  position: relative;
+  margin-top: $large-spacing;
 
+  &__actions {
+    position: absolute;
+    left: -70px;
+    top: -4px;
+    display: grid;
   }
+}
 </style>
diff --git a/client/src/components/objective-groups/ObjectiveGroups.vue b/client/src/components/objective-groups/ObjectiveGroups.vue
index 7ecb809c..71eb95e8 100644
--- a/client/src/components/objective-groups/ObjectiveGroups.vue
+++ b/client/src/components/objective-groups/ObjectiveGroups.vue
@@ -1,70 +1,65 @@
 <template>
   <div class="objective-groups">
-    <objective-group
-      :group="group"
-      v-for="group in filteredObjectiveGroups"
-      :key="group.id"
-    />
+    <objective-group :group="group" v-for="group in filteredObjectiveGroups" :key="group.id" />
   </div>
 </template>
 
 <script>
-  import ObjectiveGroup from '@/components/objective-groups/ObjectiveGroup';
-  import {meQuery} from '@/graphql/queries';
+import ObjectiveGroup from '@/components/objective-groups/ObjectiveGroup';
+import { meQuery } from '@/graphql/queries';
 
-  export default {
-    props: {
-      groups: {
-        type: Array,
-        default: () => ([]),
-      },
+export default {
+  props: {
+    groups: {
+      type: Array,
+      default: () => [],
     },
+  },
 
-    components: {
-      ObjectiveGroup,
+  components: {
+    ObjectiveGroup,
+  },
+
+  apollo: {
+    me: meQuery,
+  },
+
+  data() {
+    return {
+      me: {},
+    };
+  },
+
+  computed: {
+    filteredObjectiveGroups() {
+      return this.objectiveGroups.filter((g) => !g.hidden);
     },
-
-    apollo: {
-      me: meQuery,
-    },
-
-    data() {
-      return {
-        me: {
-        },
-      };
-    },
-
-    computed: {
-      filteredObjectiveGroups() {
-        return this.objectiveGroups.filter(g => !g.hidden);
-      },
-      objectiveGroups() {
-        /*
+    objectiveGroups() {
+      /*
          a teacher should get multiple blocks, so he can manage the visibility for his students.
          students don't care about the blocks, so they should get just one block that contains all the objectives
          */
-        if (this.me.isTeacher || !this.groups.length) {
-          return this.groups;
-        } else {
-          // todo: maybe this can be done a bit more elegantly
-          let groups = this.groups;
-          const objectives = groups.map(g => g.objectives).flat(); // get all objectives in one array
-          const firstGroup = Object.assign({}, groups[0], {objectives});
+      if (this.me.isTeacher || !this.groups.length) {
+        return this.groups;
+      } else {
+        // todo: maybe this can be done a bit more elegantly
+        let groups = this.groups;
+        const objectives = groups.map((g) => g.objectives).flat(); // get all objectives in one array
+        const firstGroup = Object.assign({}, groups[0], { objectives });
 
-          return [firstGroup];
-        }
-      },
+        return [firstGroup];
+      }
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .objective-groups {
-    margin-bottom: $large-spacing;
-    display: flex;
-    flex-direction: column;
-  }
+.objective-groups {
+  margin-bottom: $large-spacing;
+  display: flex;
+  flex-direction: column;
+}
 </style>
diff --git a/client/src/components/page-form/PageForm.vue b/client/src/components/page-form/PageForm.vue
index 2ecea386..fa017523 100644
--- a/client/src/components/page-form/PageForm.vue
+++ b/client/src/components/page-form/PageForm.vue
@@ -1,14 +1,8 @@
 <template>
   <div class="page-form__page">
-    <form
-      class="page-form"
-      @submit.prevent="$emit('save')"
-    >
+    <form class="page-form" @submit.prevent="$emit('save')">
       <div class="page-form__content">
-        <h1
-          class="page-form__heading"
-          data-cy="form-title"
-        >
+        <h1 class="page-form__heading" data-cy="form-title">
           {{ title }}
         </h1>
         <slot />
@@ -21,54 +15,54 @@
 </template>
 
 <script>
-  export default {
-    props: ['title']
-  };
+export default {
+  props: ['title'],
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .page-form {
-    width: 710px;
-    min-height: 760px;
-    max-height: 100%;
-    box-sizing: border-box;
-    background-color: $color-white;
-    border-radius: $default-border-radius;
+.page-form {
+  width: 710px;
+  min-height: 760px;
+  max-height: 100%;
+  box-sizing: border-box;
+  background-color: $color-white;
+  border-radius: $default-border-radius;
+  display: flex;
+  flex-direction: column;
+  @supports (display: grid) {
+    display: grid;
+  }
+  grid-template-rows: 1fr 55px;
+
+  @include widget-shadow;
+
+  margin: $large-spacing 0;
+
+  &__page {
     display: flex;
-    flex-direction: column;
+    justify-content: center;
     @supports (display: grid) {
       display: grid;
     }
-    grid-template-rows: 1fr 55px;
-
-    @include widget-shadow;
-
-    margin: $large-spacing 0;
-
-    &__page {
-      display: flex;
-      justify-content: center;
-      @supports (display: grid) {
-        display: grid;
-      }
-      justify-items: center;
-      align-items: center;
-      height: 100%;
-    }
-
-    &__content {
-      padding: $medium-spacing;
-    }
-
-    &__heading {
-      @include heading-2;
-    }
-
-    &__footer {
-      border-top: 1px solid $color-silver-light;
-      padding: $small-spacing $medium-spacing;
-    }
+    justify-items: center;
+    align-items: center;
+    height: 100%;
   }
+
+  &__content {
+    padding: $medium-spacing;
+  }
+
+  &__heading {
+    @include heading-2;
+  }
+
+  &__footer {
+    border-top: 1px solid $color-silver-light;
+    padding: $small-spacing $medium-spacing;
+  }
+}
 </style>
diff --git a/client/src/components/page-form/PageFormInput.vue b/client/src/components/page-form/PageFormInput.vue
index 610976f8..a302d785 100644
--- a/client/src/components/page-form/PageFormInput.vue
+++ b/client/src/components/page-form/PageFormInput.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="page-form-input">
-    <label
-      :for="id"
-      class="page-form-input__label"
-    >{{ label }}</label>
+    <label :for="id" class="page-form-input__label">{{ label }}</label>
     <component
       :class="classes"
       :value.prop="value"
@@ -16,53 +13,54 @@
 </template>
 
 <script>
-  export default {
-    props: {
-      label: {
-        type: String
-      },
-      type: {
-        type: String,
-        default: 'input'
-      },
-      value: {
-        type: String
-      }
+export default {
+  props: {
+    label: {
+      type: String,
     },
+    type: {
+      type: String,
+      default: 'input',
+    },
+    value: {
+      type: String,
+    },
+  },
 
-    data() {
-      return {
-        id: null
-      };
-    },
+  data() {
+    return {
+      id: null,
+    };
+  },
 
-    computed: {
-      classes() {
-        return `page-form-input__${this.type} skillbox-${this.type}`;
-      },
-      cyId() {
-        return `page-form-input-${this.label.toLowerCase()}`;
-      }
+  computed: {
+    classes() {
+      return `page-form-input__${this.type} skillbox-${this.type}`;
     },
+    cyId() {
+      return `page-form-input-${this.label.toLowerCase()}`;
+    },
+  },
 
-    created() {
-      this.id = this._uid;
-    },
-  };
+  created() {
+    this.id = this._uid;
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
-  .page-form-input {
-    &__label {
-      @include page-form-input-heading;
-    }
-
-    &__input, &__textarea {
-      width: 100%;
-      margin-bottom: $large-spacing;
-    }
+.page-form-input {
+  &__label {
+    @include page-form-input-heading;
   }
+
+  &__input,
+  &__textarea {
+    width: 100%;
+    margin-bottom: $large-spacing;
+  }
+}
 </style>
diff --git a/client/src/components/portfolio/AddProjectEntry.vue b/client/src/components/portfolio/AddProjectEntry.vue
index 3908539a..842b65ee 100644
--- a/client/src/components/portfolio/AddProjectEntry.vue
+++ b/client/src/components/portfolio/AddProjectEntry.vue
@@ -1,48 +1,45 @@
 <template>
-  <a
-    class="add-project-entry"
-    @click="addProjectEntry"
-  >
+  <a class="add-project-entry" @click="addProjectEntry">
     <plus-icon class="add-project-entry__icon" />
     <span class="add-project-entry__text">Beitrag erfassen</span>
   </a>
 </template>
 
 <script>
-  const PlusIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/PlusIcon');
-  export default {
-    props: ['project'],
-    components: {PlusIcon},
+const PlusIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PlusIcon');
+export default {
+  props: ['project'],
+  components: { PlusIcon },
 
-    methods: {
-      addProjectEntry() {
-        this.$store.dispatch('addProjectEntry', this.project);
-      }
-    }
-  };
+  methods: {
+    addProjectEntry() {
+      this.$store.dispatch('addProjectEntry', this.project);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .add-project-entry {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 2px solid $color-brand;
-    border-radius: $default-border-radius;
-    cursor: pointer;
+.add-project-entry {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid $color-brand;
+  border-radius: $default-border-radius;
+  cursor: pointer;
 
-    &__icon {
-      width: 20px;
-      height: 20px;
-      fill: $color-brand;
-      margin-right: $small-spacing;
-    }
-
-    &__text {
-      @include navigation-link;
-      color: $color-brand;
-    }
+  &__icon {
+    width: 20px;
+    height: 20px;
+    fill: $color-brand;
+    margin-right: $small-spacing;
   }
+
+  &__text {
+    @include navigation-link;
+    color: $color-brand;
+  }
+}
 </style>
diff --git a/client/src/components/portfolio/CreateProjectButton.vue b/client/src/components/portfolio/CreateProjectButton.vue
index 7c558a52..cc639c98 100644
--- a/client/src/components/portfolio/CreateProjectButton.vue
+++ b/client/src/components/portfolio/CreateProjectButton.vue
@@ -1,27 +1,21 @@
 <template>
-  <router-link
-    :to="createProjectRoute"
-    class="button button--primary"
-  >
-    Projekt erstellen
-  </router-link>
+  <router-link :to="createProjectRoute" class="button button--primary"> Projekt erstellen </router-link>
 </template>
 
 <script>
-  import {NEW_PROJECT_PAGE} from '@/router/portfolio.names';
+import { NEW_PROJECT_PAGE } from '@/router/portfolio.names';
 
-  export default {
-    data() {
-      return {
-        createProjectRoute: {
-          name: NEW_PROJECT_PAGE,
-        },
-      };
-    },
-  };
+export default {
+  data() {
+    return {
+      createProjectRoute: {
+        name: NEW_PROJECT_PAGE,
+      },
+    };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
-
+@import '~styles/helpers';
 </style>
diff --git a/client/src/components/portfolio/EditProject.vue b/client/src/components/portfolio/EditProject.vue
index 81d6b13c..8c64babe 100644
--- a/client/src/components/portfolio/EditProject.vue
+++ b/client/src/components/portfolio/EditProject.vue
@@ -1,26 +1,23 @@
 <template>
-  <project-form
-    :project="project"
-    title="Projekt bearbeiten"
-    @save="updateProject"
-  />
+  <project-form :project="project" title="Projekt bearbeiten" @save="updateProject" />
 </template>
 
 <script>
-  import ProjectForm from '@/components/portfolio/ProjectForm';
+import ProjectForm from '@/components/portfolio/ProjectForm';
 
-  import UPDATE_PROJECT_MUTATION from '@/graphql/gql/mutations/updateProject.gql';
+import UPDATE_PROJECT_MUTATION from '@/graphql/gql/mutations/updateProject.gql';
 
-  export default {
-    props: ['project'],
+export default {
+  props: ['project'],
 
-    components: {
-      ProjectForm
-    },
+  components: {
+    ProjectForm,
+  },
 
-    methods: {
-      updateProject(project) {
-        this.$apollo.mutate({
+  methods: {
+    updateProject(project) {
+      this.$apollo
+        .mutate({
           mutation: UPDATE_PROJECT_MUTATION,
           variables: {
             input: {
@@ -28,14 +25,15 @@
                 slug: project.slug,
                 title: project.title,
                 description: project.description,
-                objectives: project.objectives
-              }
-            }
-          }
-        }).then(() => {
+                objectives: project.objectives,
+              },
+            },
+          },
+        })
+        .then(() => {
           this.$router.push('/portfolio');
         });
-      }
     },
-  };
+  },
+};
 </script>
diff --git a/client/src/components/portfolio/EditProjectEntryWizard.vue b/client/src/components/portfolio/EditProjectEntryWizard.vue
index 149be5e7..3b3d3342 100644
--- a/client/src/components/portfolio/EditProjectEntryWizard.vue
+++ b/client/src/components/portfolio/EditProjectEntryWizard.vue
@@ -1,61 +1,59 @@
 <template>
-  <project-entry-form
-    :project-entry="projectEntry"
-    @save="saveEntry"
-    @hide="hideModal"
-  />
+  <project-entry-form :project-entry="projectEntry" @save="saveEntry" @hide="hideModal" />
 </template>
 
 <script>
-  import ProjectEntryForm from './ProjectEntryForm.vue';
+import ProjectEntryForm from './ProjectEntryForm.vue';
 
-  import {mapGetters} from 'vuex';
+import { mapGetters } from 'vuex';
 
-  import PROJECT_ENTRY_QUERY from '@/graphql/gql/queries/projectEntryQuery.gql';
-  import UPDATE_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/updateProjectEntry.gql';
+import PROJECT_ENTRY_QUERY from '@/graphql/gql/queries/projectEntryQuery.gql';
+import UPDATE_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/updateProjectEntry.gql';
 
-  export default {
-    components: {
-      ProjectEntryForm
-    },
+export default {
+  components: {
+    ProjectEntryForm,
+  },
 
-    data() {
+  data() {
+    return {
+      projectEntry: {},
+    };
+  },
+
+  apollo: {
+    projectEntry() {
       return {
-        projectEntry: {}
+        query: PROJECT_ENTRY_QUERY,
+        variables: {
+          id: this.currentProjectEntry,
+        },
       };
     },
+  },
 
-    apollo: {
-      projectEntry() {
-        return {
-          query: PROJECT_ENTRY_QUERY,
-          variables: {
-            id: this.currentProjectEntry
-          }
-        };
-      }
-    },
+  computed: {
+    ...mapGetters(['currentProjectEntry']),
+  },
 
-    computed: {
-      ...mapGetters(['currentProjectEntry'])
-    },
-
-    methods: {
-      saveEntry(entry) {
-        this.$apollo.mutate({
+  methods: {
+    saveEntry(entry) {
+      this.$apollo
+        .mutate({
           mutation: UPDATE_PROJECT_ENTRY_MUTATION,
           variables: {
             input: {
-              projectEntry: entry
-            }
-          }
-        }).then(() => {
+              projectEntry: entry,
+            },
+          },
+        })
+        .then(() => {
           this.hideModal();
         });
-      },
-      hideModal() {
-        this.$store.dispatch('hideModal');
-      }
     },
-  };
+    hideModal() {
+      this.$store.dispatch('hideModal');
+    },
+  },
+};
 </script>
diff --git a/client/src/components/portfolio/NewProjectEntryWizard.vue b/client/src/components/portfolio/NewProjectEntryWizard.vue
index 4c8231d7..f417a2e6 100644
--- a/client/src/components/portfolio/NewProjectEntryWizard.vue
+++ b/client/src/components/portfolio/NewProjectEntryWizard.vue
@@ -1,74 +1,81 @@
 <template>
-  <project-entry-form
-    :project-entry="projectEntry"
-    @save="save"
-    @hide="hideModal"
-  />
+  <project-entry-form :project-entry="projectEntry" @save="save" @hide="hideModal" />
 </template>
 
 <script>
-  import ProjectEntryForm from './ProjectEntryForm.vue';
+import ProjectEntryForm from './ProjectEntryForm.vue';
 
-  import NEW_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/addProjectEntry.gql';
-  import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
+import NEW_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/addProjectEntry.gql';
+import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
 
-  export default {
-    components: {
-      ProjectEntryForm
-    },
+export default {
+  components: {
+    ProjectEntryForm,
+  },
 
-    data() {
-      return {
-        projectEntry: {
-          description: '',
-          documentUrl: ''
-        }
-      };
-    },
-
-    computed: {
-      project() {
-        return this.$store.state.parentProject;
+  data() {
+    return {
+      projectEntry: {
+        description: '',
+        documentUrl: '',
       },
-      slug() {
-        return this.$route.params.slug;
-      }
-    },
+    };
+  },
 
-    methods: {
-      save(entry) {
-        this.$apollo.mutate({
+  computed: {
+    project() {
+      return this.$store.state.parentProject;
+    },
+    slug() {
+      return this.$route.params.slug;
+    },
+  },
+
+  methods: {
+    save(entry) {
+      this.$apollo
+        .mutate({
           mutation: NEW_PROJECT_ENTRY_MUTATION,
           variables: {
             input: {
-              projectEntry: Object.assign({
-                project: this.project
-              }, entry)
-            }
+              projectEntry: Object.assign(
+                {
+                  project: this.project,
+                },
+                entry
+              ),
+            },
           },
-          update: (store, {data: {addProjectEntry: {projectEntry}}}) => {
+          update: (
+            store,
+            {
+              data: {
+                addProjectEntry: { projectEntry },
+              },
+            }
+          ) => {
             const query = PROJECT_QUERY;
-            const variables = {slug: this.slug};
-            const {project} = store.readQuery({query, variables});
+            const variables = { slug: this.slug };
+            const { project } = store.readQuery({ query, variables });
             if (project) {
-             const entries = [...project.entries, projectEntry];
+              const entries = [...project.entries, projectEntry];
               const data = {
                 project: {
                   ...project,
-                  entries
-                }
+                  entries,
+                },
               };
-              store.writeQuery({query, variables, data});
+              store.writeQuery({ query, variables, data });
             }
-          }
-
-        }).then(() => {
+          },
+        })
+        .then(() => {
           this.hideModal();
         });
-      },
-      hideModal() {
-        this.$store.dispatch('hideModal');
-      }
     },
-  };
+    hideModal() {
+      this.$store.dispatch('hideModal');
+    },
+  },
+};
 </script>
diff --git a/client/src/components/portfolio/OwnerWidget.vue b/client/src/components/portfolio/OwnerWidget.vue
index 512bb83b..d9c932ed 100644
--- a/client/src/components/portfolio/OwnerWidget.vue
+++ b/client/src/components/portfolio/OwnerWidget.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="owner-widget">
-    <avatar
-      :avatar-url="owner.avatarUrl"
-      class="owner-widget__avatar"
-    />
+    <avatar :avatar-url="owner.avatarUrl" class="owner-widget__avatar" />
     <span data-cy="owner-name">
       {{ name }}
     </span>
@@ -11,40 +8,40 @@
 </template>
 
 <script>
-  import Avatar from '@/components/profile/Avatar';
+import Avatar from '@/components/profile/Avatar';
 
-  export default {
-    props: ['owner'],
+export default {
+  props: ['owner'],
 
-    components: {
-      Avatar
+  components: {
+    Avatar,
+  },
+
+  computed: {
+    name() {
+      return `${this.owner.firstName} ${this.owner.lastName}`;
     },
-
-    computed: {
-      name() {
-        return `${this.owner.firstName} ${this.owner.lastName}`;
-      }
-    }
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_mixins.scss";
-  @import "@/styles/_variables.scss";
+@import '@/styles/_mixins.scss';
+@import '@/styles/_variables.scss';
 
-  .owner-widget {
-    display: flex;
-    align-items: center;
+.owner-widget {
+  display: flex;
+  align-items: center;
 
-    &__avatar {
-      width: 30px;
-      height: 30px;
-    }
-
-    & > span {
-      opacity: 0.6;
-      margin-left: $small-spacing;
-      @include room-widget-text-style;;
-    }
+  &__avatar {
+    width: 30px;
+    height: 30px;
   }
+
+  & > span {
+    opacity: 0.6;
+    margin-left: $small-spacing;
+    @include room-widget-text-style;
+  }
+}
 </style>
diff --git a/client/src/components/portfolio/PortfolioOnboarding.vue b/client/src/components/portfolio/PortfolioOnboarding.vue
index 0ae15fd2..217ae3db 100644
--- a/client/src/components/portfolio/PortfolioOnboarding.vue
+++ b/client/src/components/portfolio/PortfolioOnboarding.vue
@@ -1,25 +1,9 @@
 <template>
   <div class="portfolio-onboarding">
-    <h1
-      class="portfolio-onboarding__heading"
-      data-cy="page-title"
-    >
-      Portfolio
-    </h1>
-    <portfolio-illustration
-      data-cy="portfolio-onboarding-illustration"
-      class="portfolio-onboarding__illustration"
-    />
-    <h2
-      class="portfolio-onboarding__subheading"
-      data-cy="portfolio-onboarding-subtitle"
-    >
-      Woran denken Sie gerade?
-    </h2>
-    <p
-      class="portfolio-onboarding__text"
-      data-cy="portfolio-onboarding-text"
-    >
+    <h1 class="portfolio-onboarding__heading" data-cy="page-title">Portfolio</h1>
+    <portfolio-illustration data-cy="portfolio-onboarding-illustration" class="portfolio-onboarding__illustration" />
+    <h2 class="portfolio-onboarding__subheading" data-cy="portfolio-onboarding-subtitle">Woran denken Sie gerade?</h2>
+    <p class="portfolio-onboarding__text" data-cy="portfolio-onboarding-text">
       Hier können Sie Projekte erstellen, um Ihre Gedanken festzuhalten oder Ihre Arbeit zu dokumentieren.
     </p>
 
@@ -28,33 +12,33 @@
 </template>
 
 <script>
-  const PortfolioIllustration = () => import('@/components/illustrations/PortfolioIllustration.vue');
-  const CreateProjectButton = () => import('@/components/portfolio/CreateProjectButton.vue');
-  export default {
-    components: {CreateProjectButton, PortfolioIllustration},
-  };
+const PortfolioIllustration = () => import('@/components/illustrations/PortfolioIllustration.vue');
+const CreateProjectButton = () => import('@/components/portfolio/CreateProjectButton.vue');
+export default {
+  components: { CreateProjectButton, PortfolioIllustration },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .portfolio-onboarding {
-    @include onboarding-page;
+.portfolio-onboarding {
+  @include onboarding-page;
 
-    &__heading {
-      @include heading-1;
-    }
-
-    &__subheading {
-      @include heading-2;
-    }
-
-    &__illustration {
-      @include onboarding-illustration;
-    }
-
-    &__text {
-      @include onboarding-text;
-    }
+  &__heading {
+    @include heading-1;
   }
+
+  &__subheading {
+    @include heading-2;
+  }
+
+  &__illustration {
+    @include onboarding-illustration;
+  }
+
+  &__text {
+    @include onboarding-text;
+  }
+}
 </style>
diff --git a/client/src/components/portfolio/ProjectActions.vue b/client/src/components/portfolio/ProjectActions.vue
index 83c50679..1bc2699d 100644
--- a/client/src/components/portfolio/ProjectActions.vue
+++ b/client/src/components/portfolio/ProjectActions.vue
@@ -1,48 +1,20 @@
 <template>
-  <div
-    class="project-actions"
-    data-cy="project-actions"
-  >
-    <a
-      class="project-actions__more-link"
-      @click.stop="toggleMenu"
-    >
+  <div class="project-actions" data-cy="project-actions">
+    <a class="project-actions__more-link" @click.stop="toggleMenu">
       <ellipses />
     </a>
-    <widget-popover
-      class="project-actions__popover"
-      v-if="showMenu"
-      @hide-me="showMenu = false"
-    >
+    <widget-popover class="project-actions__popover" v-if="showMenu" @hide-me="showMenu = false">
       <li class="popover-links__link">
-        <a
-          data-cy="delete-project"
-          @click="deleteProject(slug)"
-        >Projekt löschen</a>
+        <a data-cy="delete-project" @click="deleteProject(slug)">Projekt löschen</a>
       </li>
       <li class="popover-links__link">
-        <a
-          data-cy="edit-project"
-          @click="editProject(slug)"
-        >Projekt bearbeiten</a>
+        <a data-cy="edit-project" @click="editProject(slug)">Projekt bearbeiten</a>
       </li>
-      <li
-        class="popover-links__link"
-        v-if="!final && shareButtons"
-      >
-        <a
-          data-cy="share-project"
-          @click="updateProjectShareState(slug, true)"
-        >Projekt teilen</a>
+      <li class="popover-links__link" v-if="!final && shareButtons">
+        <a data-cy="share-project" @click="updateProjectShareState(slug, true)">Projekt teilen</a>
       </li>
-      <li
-        class="popover-links__link"
-        v-if="final && shareButtons"
-      >
-        <a
-          data-cy="unshare-project"
-          @click="updateProjectShareState(slug, false)"
-        >Projekt nicht mehr teilen</a>
+      <li class="popover-links__link" v-if="final && shareButtons">
+        <a data-cy="unshare-project" @click="updateProjectShareState(slug, false)">Projekt nicht mehr teilen</a>
       </li>
     </widget-popover>
   </div>
@@ -55,8 +27,8 @@ import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
 import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
 
 import updateProjectShareState from '@/mixins/update-project-share-state';
-import {removeAtIndex} from '@/graphql/immutable-operations.ts';
-const Ellipses = () => import(/* webpackChunkName: "icons" */'@/components/icons/Ellipses.vue');
+import { removeAtIndex } from '@/graphql/immutable-operations.ts';
+const Ellipses = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Ellipses.vue');
 
 export default {
   props: {
@@ -92,42 +64,50 @@ export default {
       this.showMenu = !this.showMenu;
     },
     editProject(slug) {
-      this.$router.push({name: 'edit-project', params: {slug}});
+      this.$router.push({ name: 'edit-project', params: { slug } });
     },
     deleteProject(slug) {
-      this.$apollo.mutate({
-        mutation: DELETE_PROJECT_MUTATION,
-        variables: {
-          input: {
-            slug,
+      this.$apollo
+        .mutate({
+          mutation: DELETE_PROJECT_MUTATION,
+          variables: {
+            input: {
+              slug,
+            },
           },
-        },
-        update(store, {data: {deleteProject: {success}}}) {
-          if (success) {
-            const {projects: prevProjects} = store.readQuery({query: PROJECTS_QUERY});
-
-
-            if (prevProjects) {
-              let index = prevProjects.findIndex(project => project.slug === slug);
-              const projects = removeAtIndex(prevProjects, index);
-
-              const data = {
-                projects
-              };
-              store.writeQuery({query: PROJECTS_QUERY, data});
+          update(
+            store,
+            {
+              data: {
+                deleteProject: { success },
+              },
             }
-          }
-        },
-      }).then(() => {
-        this.$router.push('/portfolio');
-      });
+          ) {
+            if (success) {
+              const { projects: prevProjects } = store.readQuery({ query: PROJECTS_QUERY });
+
+              if (prevProjects) {
+                let index = prevProjects.findIndex((project) => project.slug === slug);
+                const projects = removeAtIndex(prevProjects, index);
+
+                const data = {
+                  projects,
+                };
+                store.writeQuery({ query: PROJECTS_QUERY, data });
+              }
+            }
+          },
+        })
+        .then(() => {
+          this.$router.push('/portfolio');
+        });
     },
   },
 };
 </script>
 
 <style scoped lang="scss">
-@import "~styles/_helpers.scss";
+@import '~styles/_helpers.scss';
 
 .project-actions {
   position: relative;
diff --git a/client/src/components/portfolio/ProjectEntry.vue b/client/src/components/portfolio/ProjectEntry.vue
index ba4d3039..19d2cbd6 100644
--- a/client/src/components/portfolio/ProjectEntry.vue
+++ b/client/src/components/portfolio/ProjectEntry.vue
@@ -1,44 +1,22 @@
 <template>
-  <div
-    class="project-entry"
-    data-cy="project-entry"
-  >
-    <more-options-widget
-      class="project-entry__more"
-      data-cy="project-entry-more"
-      v-if="!readOnly"
-    >
+  <div class="project-entry" data-cy="project-entry">
+    <more-options-widget class="project-entry__more" data-cy="project-entry-more" v-if="!readOnly">
       <li class="popover-links__link">
-        <a
-          data-cy="edit-project-entry"
-          @click="editProjectEntry()"
-        >Eintrag bearbeiten</a>
+        <a data-cy="edit-project-entry" @click="editProjectEntry()">Eintrag bearbeiten</a>
       </li>
       <li class="popover-links__link">
-        <a
-          data-cy="delete-project-entry"
-          @click="deleteProjectEntry()"
-        >Eintrag löschen</a>
+        <a data-cy="delete-project-entry" @click="deleteProjectEntry()">Eintrag löschen</a>
       </li>
     </more-options-widget>
 
-    <h3
-      class="project-entry__heading"
-      data-cy="project-entry-date"
-    >
+    <h3 class="project-entry__heading" data-cy="project-entry-date">
       {{ createdDateTime }}
     </h3>
-    <p
-      class="project-entry__paragraph"
-      data-cy="project-entry-activity"
-    >
+    <p class="project-entry__paragraph" data-cy="project-entry-activity">
       {{ description }}
     </p>
-    <p
-      class="project-entry__paragraph"
-      v-if="documentUrl"
-    >
-      <document-block :value="{url: documentUrl}" />
+    <p class="project-entry__paragraph" v-if="documentUrl">
+      <document-block :value="{ url: documentUrl }" />
     </p>
     <div class="project-entry__date">
       {{ createdDate }}
@@ -47,110 +25,116 @@
 </template>
 
 <script>
-  import MoreOptionsWidget from '@/components/MoreOptionsWidget';
+import MoreOptionsWidget from '@/components/MoreOptionsWidget';
 
-  import DELETE_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/deleteProjectEntry.gql';
-  import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
-  import {dateFilter, dateTimeFilter} from '@/filters/date-filter';
-  import {removeAtIndex} from '@/graphql/immutable-operations.ts';
+import DELETE_PROJECT_ENTRY_MUTATION from '@/graphql/gql/mutations/deleteProjectEntry.gql';
+import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
+import { dateFilter, dateTimeFilter } from '@/filters/date-filter';
+import { removeAtIndex } from '@/graphql/immutable-operations.ts';
 
-  const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');
+const DocumentBlock = () =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/DocumentBlock');
 
+export default {
+  props: ['description', 'documentUrl', 'created', 'id', 'readOnly'],
+  components: {
+    DocumentBlock,
+    MoreOptionsWidget,
+  },
 
-  export default {
-    props: ['description', 'documentUrl', 'created', 'id', 'readOnly'],
-    components: {
-      DocumentBlock,
-      MoreOptionsWidget,
+  computed: {
+    createdDate() {
+      return dateFilter(this.created);
     },
-
-    computed: {
-      createdDate() {
-        return dateFilter(this.created);
-      },
-      createdDateTime() {
-        return dateTimeFilter(this.created);
-      },
+    createdDateTime() {
+      return dateTimeFilter(this.created);
     },
+  },
 
-    methods: {
-      editProjectEntry() {
-        this.$store.dispatch('editProjectEntry', this.id);
-      },
-      deleteProjectEntry() {
-        const projectEntry = this; // otherwise we run into scope errors
-        this.$apollo.mutate({
-          mutation: DELETE_PROJECT_ENTRY_MUTATION,
-          variables: {
-            input: {
-              id: this.id,
+  methods: {
+    editProjectEntry() {
+      this.$store.dispatch('editProjectEntry', this.id);
+    },
+    deleteProjectEntry() {
+      const projectEntry = this; // otherwise we run into scope errors
+      this.$apollo.mutate({
+        mutation: DELETE_PROJECT_ENTRY_MUTATION,
+        variables: {
+          input: {
+            id: this.id,
+          },
+        },
+        update(
+          store,
+          {
+            data: {
+              deleteProjectEntry: { success },
             },
-          },
-          update(store, {data: {deleteProjectEntry: {success}}}) {
-            if (success) {
-              const query = PROJECT_QUERY;
-              const variables = {
-                slug: projectEntry.$route.params.slug,
+          }
+        ) {
+          if (success) {
+            const query = PROJECT_QUERY;
+            const variables = {
+              slug: projectEntry.$route.params.slug,
+            };
+            const { project } = store.readQuery({ query, variables });
+            if (project) {
+              const index = project.entries.findIndex((entry) => entry.id === projectEntry.id);
+              const entries = removeAtIndex(project.entries, index);
+              const data = {
+                project: {
+                  ...project,
+                  entries,
+                },
               };
-              const {project} = store.readQuery({query, variables});
-              if (project) {
-                const index = project.entries.findIndex(entry => entry.id === projectEntry.id);
-                const entries = removeAtIndex(project.entries, index);
-                const data = {
-                  project: {
-                    ...project,
-                    entries,
-                  },
-                };
-                store.writeQuery({query, variables, data});
-              }
+              store.writeQuery({ query, variables, data });
             }
-          },
-        });
-      },
+          }
+        },
+      });
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .project-entry {
-    background-color: $color-white;
-    border-radius: $default-border-radius;
-    padding: 30px 20px;
-    position: relative;
-
-    &__heading {
-      font-size: toRem(22px);
-      margin-bottom: 6px;
-    }
-
-    &__paragraph {
-      margin-bottom: 30px;
-      white-space: pre-line;
-    }
-
-    &__date {
-      font-family: $sans-serif-font-family;
-      color: $color-silver-dark;
-      font-size: toRem(17px);
-    }
-
-    &__link {
-      cursor: pointer;
-      @include heading-4;
-    }
-
-    &__more {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      display: none;
-      @include desktop {
-        display: block;
-      }
-    }
+.project-entry {
+  background-color: $color-white;
+  border-radius: $default-border-radius;
+  padding: 30px 20px;
+  position: relative;
 
+  &__heading {
+    font-size: toRem(22px);
+    margin-bottom: 6px;
   }
+
+  &__paragraph {
+    margin-bottom: 30px;
+    white-space: pre-line;
+  }
+
+  &__date {
+    font-family: $sans-serif-font-family;
+    color: $color-silver-dark;
+    font-size: toRem(17px);
+  }
+
+  &__link {
+    cursor: pointer;
+    @include heading-4;
+  }
+
+  &__more {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    display: none;
+    @include desktop {
+      display: block;
+    }
+  }
+}
 </style>
diff --git a/client/src/components/portfolio/ProjectEntryForm.vue b/client/src/components/portfolio/ProjectEntryForm.vue
index e1fe8138..a43fad91 100644
--- a/client/src/components/portfolio/ProjectEntryForm.vue
+++ b/client/src/components/portfolio/ProjectEntryForm.vue
@@ -1,12 +1,7 @@
 <template>
   <modal :hide-header="false">
     <template #header>
-      <h2
-        class="project-entry-modal__heading"
-        data-cy="modal-title"
-      >
-        Beitrag erfassen
-      </h2>
+      <h2 class="project-entry-modal__heading" data-cy="modal-title">Beitrag erfassen</h2>
     </template>
 
     <div class="project-entry-modal">
@@ -36,104 +31,100 @@
       </div>
     </div>
     <div slot="footer">
-      <a
-        class="button button--primary"
-        data-cy="modal-save-button"
-        @click="$emit('save', localProjectEntry)"
-      >Speichern</a>
-      <a
-        class="button"
-        @click="$emit('hide')"
-      >Abbrechen</a>
+      <a class="button button--primary" data-cy="modal-save-button" @click="$emit('save', localProjectEntry)"
+        >Speichern</a
+      >
+      <a class="button" @click="$emit('hide')">Abbrechen</a>
     </div>
   </modal>
 </template>
 
 <script>
-  import Modal from '@/components/Modal';
-  import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
+import Modal from '@/components/Modal';
+import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
 
-  import {PROJECT_ENTRY_TEMPLATE} from '@/consts/strings.consts';
-  const FileUpload = () => import('@/components/ui/file-upload/FileUpload.vue');
+import { PROJECT_ENTRY_TEMPLATE } from '@/consts/strings.consts';
+const FileUpload = () => import('@/components/ui/file-upload/FileUpload.vue');
 
-  export default {
-    props: {
-      projectEntry: {
-        type: Object,
-        default: null,
-      },
+export default {
+  props: {
+    projectEntry: {
+      type: Object,
+      default: null,
     },
+  },
 
-    components: {
-      FileUpload,
-      ButtonWithIconAndText,
-      Modal,
-    },
+  components: {
+    FileUpload,
+    ButtonWithIconAndText,
+    Modal,
+  },
 
-    data() {
-      return {
-        localProjectEntry: Object.assign({}, {
+  data() {
+    return {
+      localProjectEntry: Object.assign(
+        {},
+        {
           ...this.projectEntry,
-        }),
-      };
-    },
+        }
+      ),
+    };
+  },
 
-    methods: {
-      setDocumentUrl(url) {
-        this.localProjectEntry.documentUrl = url;
-      },
-      useTemplate() {
-        this.localProjectEntry.description = `${this.localProjectEntry.description}${PROJECT_ENTRY_TEMPLATE}`;
-      },
+  methods: {
+    setDocumentUrl(url) {
+      this.localProjectEntry.documentUrl = url;
     },
-  };
+    useTemplate() {
+      this.localProjectEntry.description = `${this.localProjectEntry.description}${PROJECT_ENTRY_TEMPLATE}`;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .project-entry-modal {
+.project-entry-modal {
+  display: flex;
+  flex-direction: column;
+
+  &__form-field {
+    @include inputstyle;
+    padding: 0;
     display: flex;
     flex-direction: column;
-
-    &__form-field {
-      @include inputstyle;
-      padding: 0;
-      display: flex;
-      flex-direction: column;
-      grid-template-rows: auto 1rem;
-      grid-template-columns: 1fr 1fr;
-      width: 100%;
-    }
-
-    &__textarea {
-      @include auto-grow;
-      border: 0;
-      min-height: 400px;
-      padding: $medium-spacing;
-    }
-
-    &__buttons {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      padding: $medium-spacing;
-    }
-
-    &__button {
-      @include regular-text;
-
-      &--template {
-      }
-
-      &--document {
-      }
-    }
-
-    &__heading {
-      @include heading-3;
-      margin-bottom: 0;
-    }
-
+    grid-template-rows: auto 1rem;
+    grid-template-columns: 1fr 1fr;
+    width: 100%;
   }
 
+  &__textarea {
+    @include auto-grow;
+    border: 0;
+    min-height: 400px;
+    padding: $medium-spacing;
+  }
+
+  &__buttons {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: $medium-spacing;
+  }
+
+  &__button {
+    @include regular-text;
+
+    &--template {
+    }
+
+    &--document {
+    }
+  }
+
+  &__heading {
+    @include heading-3;
+    margin-bottom: 0;
+  }
+}
 </style>
diff --git a/client/src/components/portfolio/ProjectForm.vue b/client/src/components/portfolio/ProjectForm.vue
index 4286d099..6ddc71fb 100644
--- a/client/src/components/portfolio/ProjectForm.vue
+++ b/client/src/components/portfolio/ProjectForm.vue
@@ -1,20 +1,10 @@
 <template>
-  <page-form
-    :title="title"
-    @save="$emit('save', localProject)"
-  >
-    <page-form-input
-      label="Titel"
-      v-model="localProject.title"
-    />
-    <page-form-input
-      label="Beschreibung"
-      type="textarea"
-      v-model="localProject.description"
-    />
+  <page-form :title="title" @save="$emit('save', localProject)">
+    <page-form-input label="Titel" v-model="localProject.title" />
+    <page-form-input label="Beschreibung" type="textarea" v-model="localProject.description" />
     <template slot="footer">
       <button
-        :class="{'button--disabled': !formValid}"
+        :class="{ 'button--disabled': !formValid }"
         :disabled="!formValid"
         type="submit"
         class="button button--primary"
@@ -22,56 +12,50 @@
       >
         Speichern
       </button>
-      <router-link
-        to="/portfolio"
-        tag="button"
-        class="button"
-      >
-        Abbrechen
-      </router-link>
+      <router-link to="/portfolio" tag="button" class="button"> Abbrechen </router-link>
     </template>
   </page-form>
 </template>
 
 <script>
-  import PageForm from '@/components/page-form/PageForm';
-  import PageFormInput from '@/components/page-form/PageFormInput';
+import PageForm from '@/components/page-form/PageForm';
+import PageFormInput from '@/components/page-form/PageFormInput';
 
-  export default {
-    props: {
-      project: {
-        type: Object,
-        default: () => {}
-      },
-      title: {
-        type: String,
-        default: "Neues Projekt"
-      }
+export default {
+  props: {
+    project: {
+      type: Object,
+      default: () => {},
     },
+    title: {
+      type: String,
+      default: 'Neues Projekt',
+    },
+  },
 
-    components: {
-      PageForm,
-      PageFormInput,
-    },
+  components: {
+    PageForm,
+    PageFormInput,
+  },
 
-    data() {
-      return {
-        localProject: Object.assign({}, this.project),
-      };
-    },
+  data() {
+    return {
+      localProject: Object.assign({}, this.project),
+    };
+  },
 
-    computed: {
-      formValid() {
-        return this.localProject.title;
-      }
+  computed: {
+    formValid() {
+      return this.localProject.title;
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .project-form {
-    @include widget-shadow;
-  }
+.project-form {
+  @include widget-shadow;
+}
 </style>
diff --git a/client/src/components/portfolio/ProjectList.vue b/client/src/components/portfolio/ProjectList.vue
index 0b170d99..afd7d3ad 100644
--- a/client/src/components/portfolio/ProjectList.vue
+++ b/client/src/components/portfolio/ProjectList.vue
@@ -1,8 +1,5 @@
 <template>
-  <ul
-    class="project-list"
-    data-cy="project-list"
-  >
+  <ul class="project-list" data-cy="project-list">
     <project-list-item
       :project="project"
       data-cy="project"
@@ -14,24 +11,23 @@
 </template>
 
 <script>
-  import ProjectListItem from '@/components/portfolio/ProjectListItem';
+import ProjectListItem from '@/components/portfolio/ProjectListItem';
 
-  export default {
-    props: {
-      projects: {
-        type: Array,
-        default: () => ([]),
-      },
+export default {
+  props: {
+    projects: {
+      type: Array,
+      default: () => [],
     },
-    components: {ProjectListItem},
-  };
+  },
+  components: { ProjectListItem },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
-
-  .project-list {
-    border-top: 1px solid $color-silver;
-  }
+@import '~styles/helpers';
 
+.project-list {
+  border-top: 1px solid $color-silver;
+}
 </style>
diff --git a/client/src/components/portfolio/ProjectListItem.vue b/client/src/components/portfolio/ProjectListItem.vue
index b1e5514e..faa0d0e7 100644
--- a/client/src/components/portfolio/ProjectListItem.vue
+++ b/client/src/components/portfolio/ProjectListItem.vue
@@ -1,27 +1,16 @@
 <template>
-  <li
-    class="project"
-  >
+  <li class="project">
     <router-link
-      :to="{name: 'project', params: {slug: project.slug}}"
+      :to="{ name: 'project', params: { slug: project.slug } }"
       tag="div"
       class="project__link"
       data-cy="project-link"
     >
-      <span
-        class="project__title"
-        data-cy="project-title"
-      >{{ project.title }}</span>
+      <span class="project__title" data-cy="project-title">{{ project.title }}</span>
 
-      <owner-widget
-        :owner="project.student"
-        class="project__owner"
-      />
+      <owner-widget :owner="project.student" class="project__owner" />
 
-      <entry-count-widget
-        :verbose="false"
-        :entry-count="project.entriesCount"
-      />
+      <entry-count-widget :verbose="false" :entry-count="project.entriesCount" />
     </router-link>
     <project-actions
       :final="project.final"
@@ -34,60 +23,60 @@
 </template>
 
 <script>
-  import OwnerWidget from '@/components/portfolio/OwnerWidget';
-  import ProjectActions from '@/components/portfolio/ProjectActions';
-  import EntryCountWidget from '@/components/rooms/EntryCountWidget';
+import OwnerWidget from '@/components/portfolio/OwnerWidget';
+import ProjectActions from '@/components/portfolio/ProjectActions';
+import EntryCountWidget from '@/components/rooms/EntryCountWidget';
 
-  import me from '@/mixins/me';
+import me from '@/mixins/me';
 
-  export default {
-    props: {
-      project: {
-        type: Object,
-        default: () => ({}),
-      }
+export default {
+  props: {
+    project: {
+      type: Object,
+      default: () => ({}),
     },
+  },
 
-    mixins: [me],
+  mixins: [me],
 
-    components: {
-      EntryCountWidget,
-      OwnerWidget,
-      ProjectActions,
+  components: {
+    EntryCountWidget,
+    OwnerWidget,
+    ProjectActions,
+  },
+
+  computed: {
+    isOwner() {
+      return this.project.student.id === this.me.id;
     },
-
-    computed: {
-      isOwner() {
-        return this.project.student.id === this.me.id;
-      },
-    },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .project {
+.project {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+  padding: $small-spacing 0;
+  border-bottom: 1px solid $color-silver;
+
+  &__link {
+    flex: 80%;
     display: flex;
-    justify-content: flex-start;
     align-items: center;
-    position: relative;
-    padding: $small-spacing 0;
-    border-bottom: 1px solid $color-silver;
-
-    &__link {
-      flex: 80%;
-      display: flex;
-      align-items: center;
-    }
-
-    &__title {
-      flex: 50%;
-      @include heading-4;
-    }
-
-    &__owner {
-      flex: 40%;
-    }
   }
+
+  &__title {
+    flex: 50%;
+    @include heading-4;
+  }
+
+  &__owner {
+    flex: 40%;
+  }
+}
 </style>
diff --git a/client/src/components/portfolio/ProjectWidget.vue b/client/src/components/portfolio/ProjectWidget.vue
index 90d0ddf3..42e41753 100644
--- a/client/src/components/portfolio/ProjectWidget.vue
+++ b/client/src/components/portfolio/ProjectWidget.vue
@@ -1,11 +1,7 @@
 <template>
-  <div
-    :class="widgetClass"
-    data-cy="project-widget"
-    class="project-widget"
-  >
+  <div :class="widgetClass" data-cy="project-widget" class="project-widget">
     <router-link
-      :to="{name: 'project', params: {slug: slug}}"
+      :to="{ name: 'project', params: { slug: slug } }"
       tag="div"
       class="project-widget__content"
       data-cy="project-link"
@@ -15,108 +11,95 @@
       </h3>
 
       <entry-count-widget :entry-count="entriesCount" />
-      <owner-widget
-        :owner="student"
-        class="project-widget__owner"
-      />
+      <owner-widget :owner="student" class="project-widget__owner" />
     </router-link>
-    <widget-footer
-      data-cy="project-widget-footer"
-      class="project-widget__footer"
-      v-if="isOwner"
-    >
-      <project-actions
-        :final="final"
-        data-cy="project-widget-actions"
-        v-if="!readOnly"
-        :id="id"
-      />
+    <widget-footer data-cy="project-widget-footer" class="project-widget__footer" v-if="isOwner">
+      <project-actions :final="final" data-cy="project-widget-actions" v-if="!readOnly" :id="id" />
     </widget-footer>
   </div>
 </template>
 
 <script>
-  import OwnerWidget from '@/components/portfolio/OwnerWidget';
-  import ProjectActions from '@/components/portfolio/ProjectActions';
-  import EntryCountWidget from '@/components/rooms/EntryCountWidget';
-  import WidgetFooter from '@/components/ui/WidgetFooter';
+import OwnerWidget from '@/components/portfolio/OwnerWidget';
+import ProjectActions from '@/components/portfolio/ProjectActions';
+import EntryCountWidget from '@/components/rooms/EntryCountWidget';
+import WidgetFooter from '@/components/ui/WidgetFooter';
 
-  export default {
-    props: ['title', 'appearance', 'slug', 'id', 'final', 'student', 'entriesCount', 'userId', 'readOnly'],
+export default {
+  props: ['title', 'appearance', 'slug', 'id', 'final', 'student', 'entriesCount', 'userId', 'readOnly'],
 
-    components: {
-      WidgetFooter,
-      EntryCountWidget,
-      OwnerWidget,
-      ProjectActions
+  components: {
+    WidgetFooter,
+    EntryCountWidget,
+    OwnerWidget,
+    ProjectActions,
+  },
+
+  computed: {
+    widgetClass() {
+      return `project-widget--${this.appearance}`;
     },
-
-    computed: {
-      widgetClass() {
-        return `project-widget--${this.appearance}`;
-      },
-      isOwner() {
-        return this.student.id === this.userId;
-      },
+    isOwner() {
+      return this.student.id === this.userId;
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .project-widget {
-    border-radius: $default-border-radius;
-    background-color: $color-accent-4;
-    @include widget-shadow;
-    box-sizing: border-box;
-    position: relative;
+.project-widget {
+  border-radius: $default-border-radius;
+  background-color: $color-accent-4;
+  @include widget-shadow;
+  box-sizing: border-box;
+  position: relative;
 
-    display: -ms-grid;
-    margin-bottom: $large-spacing;
-    @supports (display: grid) {
-      display: grid;
-      margin-bottom: 0;
-    }
-    grid-template-rows: 175px 1fr;
-    -ms-grid-rows: 175px 48px;
-    -ms-grid-columns: 1fr;
+  display: -ms-grid;
+  margin-bottom: $large-spacing;
+  @supports (display: grid) {
+    display: grid;
+    margin-bottom: 0;
+  }
+  grid-template-rows: 175px 1fr;
+  -ms-grid-rows: 175px 48px;
+  -ms-grid-columns: 1fr;
 
-    &__content {
-      padding: 23px;
-      cursor: pointer;
-      -ms-grid-row: 1;
+  &__content {
+    padding: 23px;
+    cursor: pointer;
+    -ms-grid-row: 1;
 
-      /*
+    /*
       * For IE10+
       */
-      display: -ms-grid;
-      -ms-grid-rows: 50px 30px 30px;
-      & > :nth-child(1) {
-        -ms-grid-row: 1;
-      }
-      & > :nth-child(2) {
-        -ms-grid-row: 2;
-      }
-      & > :nth-child(3) {
-        -ms-grid-row: 3;
-      }
-
+    display: -ms-grid;
+    -ms-grid-rows: 50px 30px 30px;
+    & > :nth-child(1) {
+      -ms-grid-row: 1;
     }
-
-    &__title {
-      font-size: toRem(22px);
-      font-weight: 600;
-    }
-
-    &__owner {
-      margin-top: $small-spacing;
-    }
-
-    &__footer {
+    & > :nth-child(2) {
       -ms-grid-row: 2;
     }
-
-    @include skillbox-colors;
+    & > :nth-child(3) {
+      -ms-grid-row: 3;
+    }
   }
+
+  &__title {
+    font-size: toRem(22px);
+    font-weight: 600;
+  }
+
+  &__owner {
+    margin-top: $small-spacing;
+  }
+
+  &__footer {
+    -ms-grid-row: 2;
+  }
+
+  @include skillbox-colors;
+}
 </style>
diff --git a/client/src/components/portfolio/ShareLink.vue b/client/src/components/portfolio/ShareLink.vue
index 7f2224da..7fab1cf8 100644
--- a/client/src/components/portfolio/ShareLink.vue
+++ b/client/src/components/portfolio/ShareLink.vue
@@ -9,35 +9,35 @@
 </template>
 
 <script>
-  const ShareIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/ShareIcon');
+const ShareIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ShareIcon');
 
-  export default {
-    props: {
-      final: {
-        type: Boolean,
-        default: false,
-      },
+export default {
+  props: {
+    final: {
+      type: Boolean,
+      default: false,
     },
-    components: {ShareIcon},
-  };
+  },
+  components: { ShareIcon },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .share-icon {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
+.share-icon {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
 
-    &__icon {
-      width: 20px;
-      height: 20px;
-      margin-right: $small-spacing;
-    }
-
-    &__text {
-      @include large-link;
-    }
+  &__icon {
+    width: 20px;
+    height: 20px;
+    margin-right: $small-spacing;
   }
+
+  &__text {
+    @include large-link;
+  }
+}
 </style>
diff --git a/client/src/components/profile/ActivityEntry.vue b/client/src/components/profile/ActivityEntry.vue
index f37b3f23..d4504441 100644
--- a/client/src/components/profile/ActivityEntry.vue
+++ b/client/src/components/profile/ActivityEntry.vue
@@ -7,63 +7,60 @@
       <slot />
     </div>
 
-    <div
-      class="activity-entry__link"
-      @click="$emit('link')"
-    >
+    <div class="activity-entry__link" @click="$emit('link')">
       <chevron-right class="activity-entry__icon" />
     </div>
   </div>
 </template>
 
 <script>
-  const ChevronRight = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronRight');
+const ChevronRight = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronRight');
 
-  export default {
-    props: ['title'],
+export default {
+  props: ['title'],
 
-    components: {
-      ChevronRight
-    }
-  };
+  components: {
+    ChevronRight,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
-  .activity-entry {
-    padding: $small-spacing 0;
-    border-bottom: 1px solid $color-silver;
-    display: flex;
-    justify-content: space-between;
+.activity-entry {
+  padding: $small-spacing 0;
+  border-bottom: 1px solid $color-silver;
+  display: flex;
+  justify-content: space-between;
 
-    &__title {
-      @include small-text;
-      // todo: make style definition for small text and silver color
-      color: $color-silver-dark;
-      margin-bottom: 0;
-    }
-
-    &__content {
-      flex-grow: 1;
-      @include regular-text;
-      line-height: $default-line-height;
-    }
-    &__link {
-      display: flex;
-      flex-grow: 0;
-      align-content: center;
-      cursor: pointer;
-    }
-
-    &__icon {
-      fill: $color-brand;
-      width: 30px;
-    }
-
-    :deep(p) {
-      @include regular-text;
-    }
+  &__title {
+    @include small-text;
+    // todo: make style definition for small text and silver color
+    color: $color-silver-dark;
+    margin-bottom: 0;
   }
+
+  &__content {
+    flex-grow: 1;
+    @include regular-text;
+    line-height: $default-line-height;
+  }
+  &__link {
+    display: flex;
+    flex-grow: 0;
+    align-content: center;
+    cursor: pointer;
+  }
+
+  &__icon {
+    fill: $color-brand;
+    width: 30px;
+  }
+
+  :deep(p) {
+    @include regular-text;
+  }
+}
 </style>
diff --git a/client/src/components/profile/ActivityFilter.vue b/client/src/components/profile/ActivityFilter.vue
index 8d53276f..1ecb8b7f 100644
--- a/client/src/components/profile/ActivityFilter.vue
+++ b/client/src/components/profile/ActivityFilter.vue
@@ -1,50 +1,51 @@
 <template>
   <div class="activity-filter">
     <a
-      :class="{'activity-filter__link--active': filter === entry.tag}"
+      :class="{ 'activity-filter__link--active': filter === entry.tag }"
       class="activity-filter__link"
       v-for="(entry, i) in filters"
       :key="i"
       @click="$emit('change-filter', entry.tag)"
-    >{{ entry.label }}</a>
+      >{{ entry.label }}</a
+    >
   </div>
 </template>
 
 <script>
-  export default {
-    props: ['filter'],
+export default {
+  props: ['filter'],
 
-    data() {
-      return {
-        filters: [
-          {tag: '', label: 'Alle'},
-          {tag: 'assignments', label: 'Ergebnisse'},
-          {tag: 'surveys', label: 'Übungen'},
-          {tag: 'bookmarks', label: 'Lesezeichen'},
-          {tag: 'notes', label: 'Notizen'},
-        ]
-      };
-    }
-  };
+  data() {
+    return {
+      filters: [
+        { tag: '', label: 'Alle' },
+        { tag: 'assignments', label: 'Ergebnisse' },
+        { tag: 'surveys', label: 'Übungen' },
+        { tag: 'bookmarks', label: 'Lesezeichen' },
+        { tag: 'notes', label: 'Notizen' },
+      ],
+    };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
-  .activity-filter {
-    display: flex;
-    justify-content: space-between;
+.activity-filter {
+  display: flex;
+  justify-content: space-between;
 
-    &__link {
-      @include small-text;
-      cursor: pointer;
-      padding: $large-spacing 0;
-      color: $color-silver-dark;
+  &__link {
+    @include small-text;
+    cursor: pointer;
+    padding: $large-spacing 0;
+    color: $color-silver-dark;
 
-      &--active {
-        color: $color-brand;
-      }
+    &--active {
+      color: $color-brand;
     }
   }
+}
 </style>
diff --git a/client/src/components/profile/Avatar.vue b/client/src/components/profile/Avatar.vue
index b6b81046..ee7ea5f2 100644
--- a/client/src/components/profile/Avatar.vue
+++ b/client/src/components/profile/Avatar.vue
@@ -2,31 +2,23 @@
   <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>
@@ -34,119 +26,121 @@
 </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
-      },
-      iconHighlighted: {},
-      editable: {
-        default: false
-      }
+export default {
+  props: {
+    avatarUrl: {
+      type: String,
     },
-    components: {
-      DefaultAvatar,
-      PenIcon
+    iconHighlighted: {},
+    editable: {
+      default: false,
     },
-    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
-            }
-          }
-        });
-      }
+  },
+  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;
+        }
+      });
     }
-  };
+  },
+  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 {
+.avatar {
+  height: $max-width;
+  width: $max-width;
+  overflow: hidden;
+  text-align: center;
+
+  &__placeholder {
     height: $max-width;
-    width: $max-width;
-    overflow: hidden;
-    text-align: center;
+    fill: $color-silver-dark;
+    border-radius: 50%;
 
-    &__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 {
-      opacity: 0;
-    }
-
-    .show-enter-to {
-      opacity: 1;
+    &--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 0.5s;
+  }
+  .fade-leave-to,
+  .show-enter {
+    opacity: 0;
+  }
+
+  .show-enter-to {
+    opacity: 1;
+  }
+}
 </style>
diff --git a/client/src/components/profile/AvatarUploadForm.vue b/client/src/components/profile/AvatarUploadForm.vue
index 2c0a1b46..bfeba975 100644
--- a/client/src/components/profile/AvatarUploadForm.vue
+++ b/client/src/components/profile/AvatarUploadForm.vue
@@ -1,31 +1,27 @@
 <template>
   <div class="avatar-upload">
-    <image-form
-      :value="value"
-      index="0"
-      @change-url="changeLinkUrl"
-    />
+    <image-form :value="value" index="0" @change-url="changeLinkUrl" />
   </div>
 </template>
 
 <script>
-  import ImageForm from '@/components/content-forms/ImageForm';
+import ImageForm from '@/components/content-forms/ImageForm';
 
-  export default {
-    components: {
-      ImageForm
+export default {
+  components: {
+    ImageForm,
+  },
+  data() {
+    return {
+      value: {
+        url: '',
+      },
+    };
+  },
+  methods: {
+    changeLinkUrl(value) {
+      this.$emit('avatarUpdate', value);
     },
-    data() {
-      return {
-        value: {
-          url: ''
-        }
-      };
-    },
-    methods: {
-      changeLinkUrl(value) {
-        this.$emit('avatarUpdate', value);
-      }
-    },
-  };
+  },
+};
 </script>
diff --git a/client/src/components/profile/ContentBookmark.vue b/client/src/components/profile/ContentBookmark.vue
index 2d4998a5..908fd124 100644
--- a/client/src/components/profile/ContentBookmark.vue
+++ b/client/src/components/profile/ContentBookmark.vue
@@ -1,15 +1,9 @@
 <template>
   <div class="content-bookmark module-activity-entry">
     <!-- eslint-disable vue/no-v-html -->
-    <div
-      v-if="content.type === 'text_block'"
-      v-html="text"
-    />
+    <div v-if="content.type === 'text_block'" v-html="text" />
     <div v-else-if="content.type === 'link_block'">
-      <link-block
-        :value="content.value"
-        :no-margin="true"
-      />
+      <link-block :value="content.value" :no-margin="true" />
     </div>
     <p v-else>
       {{ type }}
@@ -18,34 +12,34 @@
 </template>
 
 <script>
-  const LinkBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock');
+const LinkBlock = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/LinkBlock');
 
-  export default {
-    props: ['bookmark'],
-    components: {LinkBlock},
-    computed: {
-      content() {
-        return this.bookmark.contentBlock
-          ? this.bookmark.contentBlock.contents.find(e => e.id === this.bookmark.uuid)
-          : this.bookmark.instrument.contents.find(e => e.id === this.bookmark.uuid);
-      },
-      text() {
-        return this.content.value.text ? this.content.value.text : 'TO BE DEFINED';
-      },
-      type() {
-        switch (this.content.type) {
-          case 'assignment':
-            return 'Aufgabe & Ergebnis';
-          case 'link_block':
-            return this.content;
-          case 'survey':
-            return 'Übung';
-          case 'image_url_block':
-            return 'Bild';
-          default:
-            return this.content.type;
-        }
+export default {
+  props: ['bookmark'],
+  components: { LinkBlock },
+  computed: {
+    content() {
+      return this.bookmark.contentBlock
+        ? this.bookmark.contentBlock.contents.find((e) => e.id === this.bookmark.uuid)
+        : this.bookmark.instrument.contents.find((e) => e.id === this.bookmark.uuid);
+    },
+    text() {
+      return this.content.value.text ? this.content.value.text : 'TO BE DEFINED';
+    },
+    type() {
+      switch (this.content.type) {
+        case 'assignment':
+          return 'Aufgabe & Ergebnis';
+        case 'link_block':
+          return this.content;
+        case 'survey':
+          return 'Übung';
+        case 'image_url_block':
+          return 'Bild';
+        default:
+          return this.content.type;
       }
-    }
-  };
+    },
+  },
+};
 </script>
diff --git a/client/src/components/profile/DeactivatePerson.vue b/client/src/components/profile/DeactivatePerson.vue
index adec977d..4cc0c2ae 100644
--- a/client/src/components/profile/DeactivatePerson.vue
+++ b/client/src/components/profile/DeactivatePerson.vue
@@ -1,132 +1,98 @@
 <template>
-  <modal
-    :hide-header="true"
-    :small="true"
-    data-cy="deactivate-person-modal"
-    class="deactivate-user"
-  >
+  <modal :hide-header="true" :small="true" data-cy="deactivate-person-modal" class="deactivate-user">
     <h3 class="deactivate-user__heading">
-      <template v-if="myself">
-        Mich
-      </template>
-      <template v-else>
-        Person
-      </template>
+      <template v-if="myself"> Mich </template>
+      <template v-else> Person </template>
       deaktivieren
     </h3>
-    <p
-      class="deactivate-user__text deactivate-user__paragraph"
-      data-cy="modal-body-text"
-    >
+    <p class="deactivate-user__text deactivate-user__paragraph" data-cy="modal-body-text">
       <template v-if="myself">
         Möchten Sie die Klasse <strong class="deactivate-user__text--strong">{{ schoolClass }}</strong> verlassen?
       </template>
       <template v-else>
-        Möchten Sie <strong
-          class="deactivate-user__text--strong"
-        >{{ name }}</strong> in der
-        Klasse
+        Möchten Sie <strong class="deactivate-user__text--strong">{{ name }}</strong> in der Klasse
         <strong class="deactivate-user__text--strong">{{ schoolClass }}</strong> deaktivieren?
       </template>
     </p>
     <ul class="deactivate-user__list">
       <li class="deactivate-user__text deactivate-user__list-item">
-        <template v-if="myself">
-          Sie können
-        </template>
-        <template v-else>
-          Diese Person kann
-        </template>
+        <template v-if="myself"> Sie können </template>
+        <template v-else> Diese Person kann </template>
         in Zukunft keine Inhalte mehr erfassen, bearbeiten und teilen.
       </li>
       <li class="deactivate-user__text deactivate-user__list-item">
-        <template v-if="myself">
-          Sie können
-        </template>
-        <template v-else>
-          Diese Person kann
-        </template>
+        <template v-if="myself"> Sie können </template>
+        <template v-else> Diese Person kann </template>
         weiterhin {{ $flavor.textModules }} und {{ $flavor.textInstruments }} lesen.
       </li>
       <li class="deactivate-user__text deactivate-user__list-item">
-        <template v-if="myself">
-          Sie können der Klasse jederzeit wieder beitreten.
-        </template>
-        <template v-else>
-          Sie können diese Person jederzeit wieder aktivieren.
-        </template>
+        <template v-if="myself"> Sie können der Klasse jederzeit wieder beitreten. </template>
+        <template v-else> Sie können diese Person jederzeit wieder aktivieren. </template>
       </li>
     </ul>
     <template #footer>
       <div>
-        <a
-          class="button button--primary"
-          data-cy="modal-save-button"
-          @click="confirm"
-        >Speichern</a>
-        <a
-          class="button"
-          @click="cancel"
-        >Abbrechen</a>
+        <a class="button button--primary" data-cy="modal-save-button" @click="confirm">Speichern</a>
+        <a class="button" @click="cancel">Abbrechen</a>
       </div>
     </template>
   </modal>
 </template>
 
 <script>
-  import Modal from '@/components/Modal';
+import Modal from '@/components/Modal';
 
-  export default {
-    components: {
-      Modal
+export default {
+  components: {
+    Modal,
+  },
+
+  computed: {
+    myself() {
+      return this.$modal.state.payload.myself;
     },
-
-    computed: {
-      myself() {
-        return this.$modal.state.payload.myself;
-      },
-      name() {
-        return this.$modal.state.payload.name;
-      },
-      schoolClass() {
-        return this.$modal.state.payload.className;
-      }
+    name() {
+      return this.$modal.state.payload.name;
     },
+    schoolClass() {
+      return this.$modal.state.payload.className;
+    },
+  },
 
-    methods: {
-      confirm() {
-        this.$modal.confirm();
-      },
-      cancel() {
-        this.$modal.cancel();
-      }
-    }
-  };
+  methods: {
+    confirm() {
+      this.$modal.confirm();
+    },
+    cancel() {
+      this.$modal.cancel();
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .deactivate-user {
-    &__heading {
-      margin-bottom: $medium-spacing;
-    }
+.deactivate-user {
+  &__heading {
+    margin-bottom: $medium-spacing;
+  }
 
-    &__list {
-      @include list-parent;
-    }
+  &__list {
+    @include list-parent;
+  }
 
-    &__list-item {
-      @include list-child;
-    }
+  &__list-item {
+    @include list-child;
+  }
 
-    &__text {
-      @include regular-text;
-      margin-bottom: $medium-spacing;
+  &__text {
+    @include regular-text;
+    margin-bottom: $medium-spacing;
 
-      &--strong {
-        font-weight: 600;
-      }
+    &--strong {
+      font-weight: 600;
     }
   }
+}
 </style>
diff --git a/client/src/components/profile/EditGroupName.vue b/client/src/components/profile/EditGroupName.vue
index 17604134..bb33880b 100644
--- a/client/src/components/profile/EditGroupName.vue
+++ b/client/src/components/profile/EditGroupName.vue
@@ -1,31 +1,27 @@
 <template>
-  <a
-    class="edit-group-name"
-    data-cy="edit-group-name-link"
-    @click="$emit('edit')"
-  >
+  <a class="edit-group-name" data-cy="edit-group-name-link" @click="$emit('edit')">
     <pen-icon class="edit-group-name__icon" />
   </a>
 </template>
 
 <script>
-  const PenIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon');
+const PenIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PenIcon');
 
-  export default {
-    components: {
-      PenIcon
-    }
-  };
+export default {
+  components: {
+    PenIcon,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/_variables.scss";
+@import '~styles/_variables.scss';
 
-  .edit-group-name {
-    &__icon {
-      width: 20px;
-      height: 20px;
-      fill: $color-brand;
-    }
+.edit-group-name {
+  &__icon {
+    width: 20px;
+    height: 20px;
+    fill: $color-brand;
   }
+}
 </style>
diff --git a/client/src/components/profile/EditNameWizard.vue b/client/src/components/profile/EditNameWizard.vue
index 879c87a1..49be62b1 100644
--- a/client/src/components/profile/EditNameWizard.vue
+++ b/client/src/components/profile/EditNameWizard.vue
@@ -1,57 +1,41 @@
 <template>
-  <modal
-    :hide-header="false"
-    :small="true"
-  >
+  <modal :hide-header="false" :small="true">
     <template #header>
       <h4>{{ type }} bearbeiten</h4>
     </template>
 
-    <modal-input
-      :value="name"
-      :placeholder="placeholder"
-      data-cy="edit-name-input"
-      @input="$emit('input', $event)"
-    />
+    <modal-input :value="name" :placeholder="placeholder" data-cy="edit-name-input" @input="$emit('input', $event)" />
     <template #footer>
       <div slot="footer">
-        <a
-          class="button button--primary"
-          data-cy="modal-save-button"
-          @click="$emit('save')"
-        >Speichern</a>
-        <a
-          class="button"
-          @click="$emit('cancel')"
-        >Abbrechen</a>
+        <a class="button button--primary" data-cy="modal-save-button" @click="$emit('save')">Speichern</a>
+        <a class="button" @click="$emit('cancel')">Abbrechen</a>
       </div>
     </template>
   </modal>
 </template>
 
 <script>
-  import Modal from '@/components/Modal';
-  import ModalInput from '@/components/ModalInput';
+import Modal from '@/components/Modal';
+import ModalInput from '@/components/ModalInput';
 
-  export default {
-    props: {
-      name: {
-        type: String,
-        default: '',
-      },
-      type: {
-        type: String,
-        default: '',
-      },
-      placeholder: {
-        type: String,
-        default: 'Namen bearbeiten'
-      }
+export default {
+  props: {
+    name: {
+      type: String,
+      default: '',
     },
-    components: {
-      Modal,
-      ModalInput,
+    type: {
+      type: String,
+      default: '',
     },
-
-  };
+    placeholder: {
+      type: String,
+      default: 'Namen bearbeiten',
+    },
+  },
+  components: {
+    Modal,
+    ModalInput,
+  },
+};
 </script>
diff --git a/client/src/components/profile/EditTeamNameWizard.vue b/client/src/components/profile/EditTeamNameWizard.vue
index 93f7af33..5fcffc6f 100644
--- a/client/src/components/profile/EditTeamNameWizard.vue
+++ b/client/src/components/profile/EditTeamNameWizard.vue
@@ -1,69 +1,71 @@
 <template>
-  <edit-name-wizard
-    :name="name"
-    type="Team"
-    @input="name = $event"
-    @cancel="hideModal"
-    @save="save"
-  />
+  <edit-name-wizard :name="name" type="Team" @input="name = $event" @cancel="hideModal" @save="save" />
 </template>
 
 <script>
-  import me from '@/mixins/me';
-  import EditNameWizard from '@/components/profile/EditNameWizard';
-  import UPDATE_TEAM_MUTATION from '@/graphql/gql/mutations/updateTeam.gql';
-  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+import me from '@/mixins/me';
+import EditNameWizard from '@/components/profile/EditNameWizard';
+import UPDATE_TEAM_MUTATION from '@/graphql/gql/mutations/updateTeam.gql';
+import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 
-  export default {
-    mixins: [me],
+export default {
+  mixins: [me],
 
-    components: {
-      EditNameWizard,
+  components: {
+    EditNameWizard,
+  },
+
+  data() {
+    return {
+      name: '',
+    };
+  },
+
+  computed: {
+    team() {
+      return this.me.team;
     },
+  },
 
-    data() {
-      return {
-        name: ''
-      };
-    },
+  mounted() {
+    this.name = this.team ? this.team.name : '';
+  },
 
-    computed: {
-      team() {
-        return this.me.team;
-      }
-    },
-
-    mounted() {
-      this.name = this.team ? this.team.name : '';
-    },
-
-    methods: {
-      save() {
-        this.$apollo.mutate({
-          mutation: UPDATE_TEAM_MUTATION,
-          variables: {
-            input: {
-              name: this.name,
-              id: this.team.id
-            }
+  methods: {
+    save() {
+      this.$apollo.mutate({
+        mutation: UPDATE_TEAM_MUTATION,
+        variables: {
+          input: {
+            name: this.name,
+            id: this.team.id,
           },
-          update(store, {data: {updateTeam: {team: {name}}}}) {
-            const query = ME_QUERY;
-            const data = store.readQuery({query});
-            data.me.team.name = name;
-            store.writeQuery({query, data});
+        },
+        update(
+          store,
+          {
+            data: {
+              updateTeam: {
+                team: { name },
+              },
+            },
           }
-        });
-        this.hideModal();
-      },
-      hideModal() {
-        this.$store.dispatch('hideModal');
-      }
+        ) {
+          const query = ME_QUERY;
+          const data = store.readQuery({ query });
+          data.me.team.name = name;
+          store.writeQuery({ query, data });
+        },
+      });
+      this.hideModal();
     },
-  };
+    hideModal() {
+      this.$store.dispatch('hideModal');
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
-
+@import '~styles/helpers';
 </style>
diff --git a/client/src/components/profile/GroupList.vue b/client/src/components/profile/GroupList.vue
index b8abe6a9..caa28fcf 100644
--- a/client/src/components/profile/GroupList.vue
+++ b/client/src/components/profile/GroupList.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="group-list">
-    <h1
-      class="group-list__header"
-      data-cy="group-list-title"
-    >
+    <h1 class="group-list__header" data-cy="group-list-title">
       {{ title }}
     </h1>
     <router-link
@@ -17,20 +14,11 @@
 
     <div class="group-list__content">
       <h2 class="group-list__heading">
-        <span
-          class="group-list__name"
-          data-cy="group-list-name"
-        >{{ name }}</span>
-        <edit-group-name
-          v-if="canEdit && !readOnly"
-          @edit="$emit('edit')"
-        />
+        <span class="group-list__name" data-cy="group-list-name">{{ name }}</span>
+        <edit-group-name v-if="canEdit && !readOnly" @edit="$emit('edit')" />
       </h2>
       <div class="group-list__members group-list-members">
-        <ul
-          class="group-list-members__list simple-list simple-list--active"
-          data-cy="active-class-members-list"
-        >
+        <ul class="group-list-members__list simple-list simple-list--active" data-cy="active-class-members-list">
           <li
             class="simple-list__item member-item"
             data-cy="active-member"
@@ -44,23 +32,20 @@
               data-cy="leave-group"
               v-if="member.isMe && enableDeactivate"
               @click="$emit('leave', member)"
-            >Verlassen</a>
+              >Verlassen</a
+            >
             <a
               class="member-item__action simple-list__action"
               data-cy="remove-from-class"
               v-if="canEdit && enableDeactivate && !member.isMe"
               @click="$emit('remove', member)"
-            >Deaktivieren</a>
+              >Deaktivieren</a
+            >
           </li>
         </ul>
         <template v-if="inactiveMembers.length">
-          <h3 class="group-list__inactive-heading">
-            Deaktivierte Personen
-          </h3>
-          <ul
-            data-cy="inactive-class-members-list"
-            class="simple-list simple-list--inactive"
-          >
+          <h3 class="group-list__inactive-heading">Deaktivierte Personen</h3>
+          <ul data-cy="inactive-class-members-list" class="simple-list simple-list--inactive">
             <li
               class="simple-list__item member-item"
               data-cy="inactive-member"
@@ -74,13 +59,15 @@
                 data-cy="add-to-class"
                 v-if="canEdit && enableDeactivate"
                 @click="$emit('add', member)"
-              >Aktivieren</a>
+                >Aktivieren</a
+              >
               <a
                 class="member-item__action simple-list__action"
                 data-cy="rejoin-class"
                 v-if="member.isMe && member.isTeacher"
                 @click="$emit('add', member)"
-              >Aktivieren</a>
+                >Aktivieren</a
+              >
             </li>
           </ul>
         </template>
@@ -90,118 +77,117 @@
 </template>
 
 <script>
-  import EditGroupName from '@/components/profile/EditGroupName';
+import EditGroupName from '@/components/profile/EditGroupName';
 
-  export default {
-    // props: ['active-members', 'inactive-members', 'name', 'canEdit'],
-    props: {
-      title: {
-        type: String,
-        default: '',
-      },
-      showCode: {
-        type: Boolean,
-        default: false,
-      },
-      showCodeRoute: {
-        type: Object,
-        default: () => ({}),
-      },
-      readOnly: {
-        type: Boolean,
-        default: false
-      },
-      activeMembers: {
-        type: Array,
-        default: () => [],
-      },
-      inactiveMembers: {
-        type: Array,
-        default: () => [],
-      },
-      name: {
-        type: String,
-        default: '',
-      },
-      canEdit: {
-        type: Boolean,
-        default: false,
-      },
-      enableDeactivate: {
-        type: Boolean,
-        default: false
+export default {
+  // props: ['active-members', 'inactive-members', 'name', 'canEdit'],
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    showCode: {
+      type: Boolean,
+      default: false,
+    },
+    showCodeRoute: {
+      type: Object,
+      default: () => ({}),
+    },
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
+    activeMembers: {
+      type: Array,
+      default: () => [],
+    },
+    inactiveMembers: {
+      type: Array,
+      default: () => [],
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    canEdit: {
+      type: Boolean,
+      default: false,
+    },
+    enableDeactivate: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  components: {
+    EditGroupName,
+  },
+
+  methods: {
+    fullName(member) {
+      return `${member.firstName} ${member.lastName}`;
+    },
+    role({ isTeacher }) {
+      if (isTeacher === undefined) {
+        return '';
       }
+      return isTeacher ? 'Lehrperson' : 'Schüler';
     },
-
-    components: {
-      EditGroupName,
-    },
-
-    methods: {
-      fullName(member) {
-        return `${member.firstName} ${member.lastName}`;
-      },
-      role({isTeacher}) {
-        if (isTeacher === undefined) {
-          return '';
-        }
-        return isTeacher ? 'Lehrperson' : 'Schüler';
-      },
-
-    },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .group-list {
-    display: grid;
-    grid-template-columns: auto auto;
-    grid-template-rows: auto auto;
-    grid-template-areas: "h b" "c c";
+.group-list {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+  grid-template-areas: 'h b' 'c c';
 
-    &__header {
-      grid-area: h;
-    }
-
-    &__code-link {
-      grid-area: b;
-      justify-self: end;
-      align-self: center;
-    }
-
-    &__content {
-      grid-area: c;
-      width: 100%;
-      margin-bottom: $large-spacing;
-    }
-
-    &__inactive-heading {
-      @include heading-4;
-      margin-bottom: $small-spacing;
-    }
-
-    &__name {
-      @include heading-2;
-    }
+  &__header {
+    grid-area: h;
   }
 
-  .member-item {
-    &__name {
-      font-family: $sans-serif-font-family;
-      font-weight: $font-weight-bold;
-      flex: 2 1 auto;
-    }
-
-    &__role {
-      flex: 0 1 110px;
-      text-align: right;
-    }
-
-    &__action {
-      flex: 0 1 110px;
-      padding-left: $large-spacing;
-    }
+  &__code-link {
+    grid-area: b;
+    justify-self: end;
+    align-self: center;
   }
+
+  &__content {
+    grid-area: c;
+    width: 100%;
+    margin-bottom: $large-spacing;
+  }
+
+  &__inactive-heading {
+    @include heading-4;
+    margin-bottom: $small-spacing;
+  }
+
+  &__name {
+    @include heading-2;
+  }
+}
+
+.member-item {
+  &__name {
+    font-family: $sans-serif-font-family;
+    font-weight: $font-weight-bold;
+    flex: 2 1 auto;
+  }
+
+  &__role {
+    flex: 0 1 110px;
+    text-align: right;
+  }
+
+  &__action {
+    flex: 0 1 110px;
+    padding-left: $large-spacing;
+  }
+}
 </style>
diff --git a/client/src/components/profile/InstrumentActivity.vue b/client/src/components/profile/InstrumentActivity.vue
index c9eeec35..9551ecce 100644
--- a/client/src/components/profile/InstrumentActivity.vue
+++ b/client/src/components/profile/InstrumentActivity.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="instrument-activity"
-    v-if="!empty"
-  >
+  <div class="instrument-activity" v-if="!empty">
     <h3 class="instrument-activity__module-name">
       {{ type }}
     </h3>
@@ -33,91 +30,86 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex';
+import ContentBookmark from '@/components/profile/ContentBookmark';
+import ActivityEntry from '@/components/profile/ActivityEntry';
 
-  import {mapActions} from 'vuex';
-  import ContentBookmark from '@/components/profile/ContentBookmark';
-  import ActivityEntry from '@/components/profile/ActivityEntry';
+import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
+import instrumentType from '@/helpers/instrumentType';
 
-  import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
-  import instrumentType from '@/helpers/instrumentType';
-
-  export default {
-    props: ['instrument', 'filter'],
-    components: {
-      ContentBookmark,
-      ActivityEntry
+export default {
+  props: ['instrument', 'filter'],
+  components: {
+    ContentBookmark,
+    ActivityEntry,
+  },
+  computed: {
+    empty() {
+      return !this.instrument.bookmarks.length;
     },
-    computed: {
-      empty() {
-        return !this.instrument.bookmarks.length;
-      },
-      notes() {
-        return this.applyFilter('notes') ? this.instrument.bookmarks
-          .filter(b => b.note)
-          .map(b => b.note) : [];
-      },
-      bookmarks() {
-        return this.applyFilter('bookmarks') ? this.instrument.bookmarks : [];
-      },
-      type() {
-        return instrumentType(this.instrument);
-      }
+    notes() {
+      return this.applyFilter('notes') ? this.instrument.bookmarks.filter((b) => b.note).map((b) => b.note) : [];
     },
-    methods: {
-      ...mapActions(['scrollToAssignmentId']),
-      goTo(scrollTo) {
-        const url = `/instrument/${this.instrument.slug}/`;
-        this.$apollo.mutate({
-          mutation: SCROLL_TO_MUTATION,
-          variables: {
-            scrollTo
-          }
-        });
-        this.$router.push(url);
-      },
-      applyFilter(filterCriteria) {
-        return !this.filter || this.filter === filterCriteria;
-      }
-    }
-  };
+    bookmarks() {
+      return this.applyFilter('bookmarks') ? this.instrument.bookmarks : [];
+    },
+    type() {
+      return instrumentType(this.instrument);
+    },
+  },
+  methods: {
+    ...mapActions(['scrollToAssignmentId']),
+    goTo(scrollTo) {
+      const url = `/instrument/${this.instrument.slug}/`;
+      this.$apollo.mutate({
+        mutation: SCROLL_TO_MUTATION,
+        variables: {
+          scrollTo,
+        },
+      });
+      this.$router.push(url);
+    },
+    applyFilter(filterCriteria) {
+      return !this.filter || this.filter === filterCriteria;
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
-  .instrument-activity {
-    max-width: 640px;
+.instrument-activity {
+  max-width: 640px;
 
-    @include desktop {
-      max-width: 1020px;
-    }
-
-    @media (max-width: 639px) {
-      max-width: 400px;
-    }
-
-    @media (max-width: 401px) {
-      max-width: 320px;
-    }
-
-    margin-bottom: 2*$large-spacing;
-
-    &__module-name {
-      @include regular-text;
-      margin-bottom: $small-spacing;
-    }
-
-    &__title {
-      @include heading-2;
-    }
-
-    &__entry {
-      &:first-of-type {
-
-        border-top: 1px solid $color-silver;
-      }
-    }
+  @include desktop {
+    max-width: 1020px;
   }
 
+  @media (max-width: 639px) {
+    max-width: 400px;
+  }
+
+  @media (max-width: 401px) {
+    max-width: 320px;
+  }
+
+  margin-bottom: 2 * $large-spacing;
+
+  &__module-name {
+    @include regular-text;
+    margin-bottom: $small-spacing;
+  }
+
+  &__title {
+    @include heading-2;
+  }
+
+  &__entry {
+    &:first-of-type {
+      border-top: 1px solid $color-silver;
+    }
+  }
+}
 </style>
diff --git a/client/src/components/profile/JoinForm.vue b/client/src/components/profile/JoinForm.vue
index 8d42b6d3..146c5b9e 100644
--- a/client/src/components/profile/JoinForm.vue
+++ b/client/src/components/profile/JoinForm.vue
@@ -5,37 +5,23 @@
     </h1>
     <div>
       <div class="skillboxform-input">
-        <label
-          for="join-code"
-          class="skillboxform-input__label"
-        >{{ labelText }}</label>
+        <label for="join-code" class="skillboxform-input__label">{{ labelText }}</label>
         <input
-          :class="{'skillboxform-input__input--error': error}"
+          :class="{ 'skillboxform-input__input--error': error }"
           :value="value"
           class="skillbox-input skillboxform-input__input"
           data-cy="join-form-input"
           id="join-code"
           @input="$emit('input', $event)"
-        >
-        <small
-          class="skillboxform-input__error"
-          data-cy="join-form-input-error"
-          v-if="error"
-        >{{ error }}
-        </small>
+        />
+        <small class="skillboxform-input__error" data-cy="join-form-input-error" v-if="error">{{ error }} </small>
       </div>
 
       <div>
-        <a
-          class="button button--primary button--big"
-          data-cy="join-form-confirm"
-          @click="$emit('confirm', value)"
-        >{{ okText }}</a>
-        <button
-          class="button button--big"
-          data-cy="join-form-cancel"
-          @click="$emit('cancel')"
-        >
+        <a class="button button--primary button--big" data-cy="join-form-confirm" @click="$emit('confirm', value)">{{
+          okText
+        }}</a>
+        <button class="button button--big" data-cy="join-form-cancel" @click="$emit('cancel')">
           {{ cancelText }}
         </button>
       </div>
@@ -44,37 +30,36 @@
 </template>
 
 <script>
-  export default {
-    props: {
-      title: {
-        type: String,
-        default: ''
-      },
-      value: {
-        type: String,
-        default: ''
-      },
-      error: {
-        type: String,
-        default: ''
-      },
-      okText: {
-        type: String,
-        default: 'Klasse beitreten'
-      },
-      labelText: {
-        type: String,
-        default: 'Zugangscode eingeben'
-      },
-      cancelText: {
-        type: String,
-        default: 'Abmelden'
-      }
-    }
-  };
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    error: {
+      type: String,
+      default: '',
+    },
+    okText: {
+      type: String,
+      default: 'Klasse beitreten',
+    },
+    labelText: {
+      type: String,
+      default: 'Zugangscode eingeben',
+    },
+    cancelText: {
+      type: String,
+      default: 'Abmelden',
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
-
+@import '~styles/helpers';
 </style>
diff --git a/client/src/components/profile/ModuleActivity.vue b/client/src/components/profile/ModuleActivity.vue
index 09c13074..6f5bbaba 100644
--- a/client/src/components/profile/ModuleActivity.vue
+++ b/client/src/components/profile/ModuleActivity.vue
@@ -1,14 +1,9 @@
 <template>
-  <div
-    class="module-activity"
-    v-if="!empty"
-  >
+  <div class="module-activity" v-if="!empty">
     <h3 class="module-activity__module-name">
       {{ module.topic.title }}
     </h3>
-    <h2 class="module-activity__title">
-      {{ module.metaTitle }} - {{ module.title }}
-    </h2>
+    <h2 class="module-activity__title">{{ module.metaTitle }} - {{ module.title }}</h2>
     <div class="module-activity__tasks activity-tasks">
       <activity-entry
         title="Aufgabe & Ergebnis"
@@ -49,7 +44,6 @@
       <activity-entry
         title="Notiz"
         class="module-activity__entry"
-
         v-for="note in notes"
         :key="note.id"
         @link="goTo(note.id)"
@@ -61,102 +55,103 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex';
+import ContentBookmark from '@/components/profile/ContentBookmark';
+import ActivityEntry from '@/components/profile/ActivityEntry';
 
-  import {mapActions} from 'vuex';
-  import ContentBookmark from '@/components/profile/ContentBookmark';
-  import ActivityEntry from '@/components/profile/ActivityEntry';
+import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
 
-  import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
-
-  export default {
-    props: ['module', 'filter'],
-    components: {
-      ContentBookmark,
-      ActivityEntry
+export default {
+  props: ['module', 'filter'],
+  components: {
+    ContentBookmark,
+    ActivityEntry,
+  },
+  computed: {
+    empty() {
+      return !(
+        this.module.mySubmissions.length ||
+        this.module.myAnswers.length ||
+        this.module.myContentBookmarks.length ||
+        this.module.myChapterBookmarks.length ||
+        this.module.bookmark
+      );
     },
-    computed: {
-      empty() {
-        return !(this.module.mySubmissions.length ||
-          this.module.myAnswers.length ||
-          this.module.myContentBookmarks.length ||
-          this.module.myChapterBookmarks.length ||
-          this.module.bookmark);
-      },
-      notes() {
-        return this.applyFilter('notes') ? this.module.myChapterBookmarks
-          .concat(this.module.myContentBookmarks)
-          .concat([this.module.bookmark ? this.module.bookmark : {}])
-          .filter(b => b.note)
-          .map(b => b.note) : [];
-      },
-      submissions() {
-        return this.applyFilter('assignments') ? this.module.mySubmissions : [];
-      },
-      answers() {
-        return this.applyFilter('surveys') ? this.module.myAnswers : [];
-      },
-      contentBookmarks() {
-        return this.applyFilter('bookmarks') ? this.module.myContentBookmarks : [];
-      },
-      chapterBookmarks() {
-        return this.applyFilter('bookmarks') ? this.module.myChapterBookmarks : [];
-      }
+    notes() {
+      return this.applyFilter('notes')
+        ? this.module.myChapterBookmarks
+            .concat(this.module.myContentBookmarks)
+            .concat([this.module.bookmark ? this.module.bookmark : {}])
+            .filter((b) => b.note)
+            .map((b) => b.note)
+        : [];
     },
-    methods: {
-      ...mapActions(['scrollToAssignmentId']),
-      goTo(scrollTo) {
-        const url = `/module/${this.module.slug}/`;
-        this.$apollo.mutate({
-          mutation: SCROLL_TO_MUTATION,
-          variables: {
-            scrollTo
-          }
-        });
-        this.$router.push(url);
-      },
-      applyFilter(filterCriteria) {
-        return !this.filter || this.filter === filterCriteria;
-      }
-    }
-  };
+    submissions() {
+      return this.applyFilter('assignments') ? this.module.mySubmissions : [];
+    },
+    answers() {
+      return this.applyFilter('surveys') ? this.module.myAnswers : [];
+    },
+    contentBookmarks() {
+      return this.applyFilter('bookmarks') ? this.module.myContentBookmarks : [];
+    },
+    chapterBookmarks() {
+      return this.applyFilter('bookmarks') ? this.module.myChapterBookmarks : [];
+    },
+  },
+  methods: {
+    ...mapActions(['scrollToAssignmentId']),
+    goTo(scrollTo) {
+      const url = `/module/${this.module.slug}/`;
+      this.$apollo.mutate({
+        mutation: SCROLL_TO_MUTATION,
+        variables: {
+          scrollTo,
+        },
+      });
+      this.$router.push(url);
+    },
+    applyFilter(filterCriteria) {
+      return !this.filter || this.filter === filterCriteria;
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
-  .module-activity {
-    max-width: 640px;
+.module-activity {
+  max-width: 640px;
 
-    @include desktop {
-      max-width: 1020px;
-    }
-
-    @media (max-width: 639px) {
-      max-width: 400px;
-    }
-
-    @media (max-width: 401px) {
-      max-width: 320px;
-    }
-
-    margin-bottom: 2*$large-spacing;
-
-    &__module-name {
-      @include regular-text;
-      margin-bottom: $small-spacing;
-    }
-
-    &__title {
-      @include heading-2;
-    }
-
-    &__entry {
-      &:first-of-type {
-
-        border-top: 1px solid $color-silver;
-      }
-    }
+  @include desktop {
+    max-width: 1020px;
   }
 
+  @media (max-width: 639px) {
+    max-width: 400px;
+  }
+
+  @media (max-width: 401px) {
+    max-width: 320px;
+  }
+
+  margin-bottom: 2 * $large-spacing;
+
+  &__module-name {
+    @include regular-text;
+    margin-bottom: $small-spacing;
+  }
+
+  &__title {
+    @include heading-2;
+  }
+
+  &__entry {
+    &:first-of-type {
+      border-top: 1px solid $color-silver;
+    }
+  }
+}
 </style>
diff --git a/client/src/components/profile/Profile.vue b/client/src/components/profile/Profile.vue
index f90d05e6..40fba46a 100644
--- a/client/src/components/profile/Profile.vue
+++ b/client/src/components/profile/Profile.vue
@@ -1,104 +1,101 @@
 <template>
   <div class="profile">
-    <h1 class="profile__header">
-      Profilbild
-    </h1>
-    <div
-      class="profile-avatar"
-      v-if="me.avatarUrl"
-    >
+    <h1 class="profile__header">Profilbild</h1>
+    <div class="profile-avatar" v-if="me.avatarUrl">
       <div class="profile-avatar__image">
         <avatar :avatar-url="me.avatarUrl" />
       </div>
-      <a
-        class="profile-avatar__remove icon-button"
-        @click="deleteAvatar()"
-      >
+      <a class="profile-avatar__remove icon-button" @click="deleteAvatar()">
         <trash-icon class="profile-avatar__remove-icon icon-button__icon icon-button__icon--subtle" />
       </a>
     </div>
-    <avatar-upload-form
-      v-else
-      @avatarUpdate="updateAvatar"
-    />
+    <avatar-upload-form v-else @avatarUpdate="updateAvatar" />
   </div>
 </template>
 
 <script>
-  import UPDATE_AVATAR_QUERY from '@/graphql/gql/mutations/updateAvatarUrl.gql';
-  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
-  import AvatarUploadForm from '@/components/profile/AvatarUploadForm';
-  import Avatar from '@/components/profile/Avatar';
-  const TrashIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon');
+import UPDATE_AVATAR_QUERY from '@/graphql/gql/mutations/updateAvatarUrl.gql';
+import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+import AvatarUploadForm from '@/components/profile/AvatarUploadForm';
+import Avatar from '@/components/profile/Avatar';
+const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
 
-  export default {
-    components: {
-      AvatarUploadForm,
-      Avatar,
-      TrashIcon
-    },
+export default {
+  components: {
+    AvatarUploadForm,
+    Avatar,
+    TrashIcon,
+  },
 
-    data() {
-      return {
-        me: {
-          avatarUrl: ''
-        }
-      };
-    },
-    apollo: {
+  data() {
+    return {
       me: {
-        query: ME_QUERY,
+        avatarUrl: '',
       },
+    };
+  },
+  apollo: {
+    me: {
+      query: ME_QUERY,
     },
-    methods: {
-      deleteAvatar () {
-        this.updateAvatar('');
-      },
-      updateAvatar (url) {
-        this.$apollo.mutate({
+  },
+  methods: {
+    deleteAvatar() {
+      this.updateAvatar('');
+    },
+    updateAvatar(url) {
+      this.$apollo
+        .mutate({
           mutation: UPDATE_AVATAR_QUERY,
           variables: {
             input: {
-              avatarUrl: url
-            }
+              avatarUrl: url,
+            },
           },
-          update(store, {data: {updateAvatar: {success}}}) {
+          update(
+            store,
+            {
+              data: {
+                updateAvatar: { success },
+              },
+            }
+          ) {
             if (success) {
-              const {me} = store.readQuery({query: ME_QUERY});
+              const { me } = store.readQuery({ query: ME_QUERY });
               if (me) {
                 const data = {
                   me: {
                     ...me,
-                    avatarUrl: url
-                  }
+                    avatarUrl: url,
+                  },
                 };
-                store.writeQuery({query: ME_QUERY, data});
+                store.writeQuery({ query: ME_QUERY, data });
               }
             }
-          }
-        }).catch((error) => {
+          },
+        })
+        .catch((error) => {
           console.warn('UploadError', error);
         });
-      }
-    }
-  };
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+@import '@/styles/_variables.scss';
 
-  .profile-avatar {
-    display: flex;
-    flex-direction: row;
+.profile-avatar {
+  display: flex;
+  flex-direction: row;
 
-    &__image {
-      height: 230px;
-      width: 230px;
-    }
-  }
-
-  .profile-avatar {
-    margin-bottom: $large-spacing;
+  &__image {
+    height: 230px;
+    width: 230px;
   }
+}
 
+.profile-avatar {
+  margin-bottom: $large-spacing;
+}
 </style>
diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue
index 4f6e2cc7..0244e4e7 100644
--- a/client/src/components/profile/ProfileSidebar.vue
+++ b/client/src/components/profile/ProfileSidebar.vue
@@ -1,69 +1,31 @@
 <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>
@@ -76,111 +38,112 @@
 </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 {
+export default {
+  mixins: [sidebar, me],
 
-    mixins: [sidebar, me],
+  components: {
+    LogoutWidget,
+    ClassSelectionWidget,
+    ProfileWidget,
+    Cross,
+  },
 
-    components: {
-      LogoutWidget,
-      ClassSelectionWidget,
-      ProfileWidget,
-      Cross,
+  computed: {
+    myTeamPage() {
+      return {
+        name: MY_TEAM,
+      };
     },
+  },
 
-    computed: {
-      myTeamPage() {
-        return {
-          name: MY_TEAM,
-        };
-      },
+  methods: {
+    close() {
+      this.closeSidebar('profile');
     },
-
-    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%;
+  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;
     @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;
-      @include desktop {
-        right: -$desktop-width;
-      }
+      right: -$desktop-width;
     }
   }
+}
 </style>
diff --git a/client/src/components/profile/ProfileWidget.vue b/client/src/components/profile/ProfileWidget.vue
index 1e7e8110..3c21c647 100644
--- a/client/src/components/profile/ProfileWidget.vue
+++ b/client/src/components/profile/ProfileWidget.vue
@@ -1,59 +1,53 @@
 <template>
   <div class="profile-widget">
     <div class="profile-widget__avatar">
-      <avatar
-        :avatar-url="me.avatarUrl"
-        :editable="true"
-      />
+      <avatar :avatar-url="me.avatarUrl" :editable="true" />
     </div>
-    <h3 class="profile-widget__name">
-      {{ me.firstName }} {{ me.lastName }}
-    </h3>
+    <h3 class="profile-widget__name">{{ me.firstName }} {{ me.lastName }}</h3>
   </div>
 </template>
 
 <script>
-  import Avatar from '@/components/profile/Avatar';
-  import {meQuery} from '@/graphql/queries';
+import Avatar from '@/components/profile/Avatar';
+import { meQuery } from '@/graphql/queries';
 
-  export default {
-    components: {
-      Avatar
-    },
+export default {
+  components: {
+    Avatar,
+  },
 
-    apollo: {
-      me: meQuery
-    },
+  apollo: {
+    me: meQuery,
+  },
 
-    data: () => ({
-      me: {}
-    })
-  };
+  data: () => ({
+    me: {},
+  }),
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
-  .profile-widget {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
+.profile-widget {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
 
-    &__name {
-      @include heading-4;
-      text-align: center;
-      margin-bottom: $small-spacing;
-    }
-
-    &__avatar {
-      display: flex;
-      justify-content: center;
-      margin-bottom: $medium-spacing;
-      width: 120px;
-      height: 120px;
-      position: relative;
-
-    }
+  &__name {
+    @include heading-4;
+    text-align: center;
+    margin-bottom: $small-spacing;
   }
+
+  &__avatar {
+    display: flex;
+    justify-content: center;
+    margin-bottom: $medium-spacing;
+    width: 120px;
+    height: 120px;
+    position: relative;
+  }
+}
 </style>
diff --git a/client/src/components/profile/ShowCode.vue b/client/src/components/profile/ShowCode.vue
index b801331e..fb3025eb 100644
--- a/client/src/components/profile/ShowCode.vue
+++ b/client/src/components/profile/ShowCode.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="show-code">
-    <h2 class="show-code__title">
-      Zugangscode {{ type }} {{ name }}
-    </h2>
+    <h2 class="show-code__title">Zugangscode {{ type }} {{ name }}</h2>
     <h1 class="show-code__code">
       {{ code }}
     </h1>
@@ -10,37 +8,37 @@
 </template>
 
 <script>
-  export default {
-    props: {
-      code: {
-        type: String,
-        default: '',
-      },
-      type: {
-        type: String,
-        default: '',
-      },
-      name: {
-        type: String,
-        default: '',
-      },
+export default {
+  props: {
+    code: {
+      type: String,
+      default: '',
     },
-  };
+    type: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .show-code {
-    &__title {
-      @include regular-text;
-      margin-bottom: 2*$large-spacing;
-    }
-
-    &__code {
-      font-size: toRem(120px);
-      letter-spacing: toRem(20px);
-      font-weight: 600;
-    }
+.show-code {
+  &__title {
+    @include regular-text;
+    margin-bottom: 2 * $large-spacing;
   }
+
+  &__code {
+    font-size: toRem(120px);
+    letter-spacing: toRem(20px);
+    font-weight: 600;
+  }
+}
 </style>
diff --git a/client/src/components/rooms/AddRoom.vue b/client/src/components/rooms/AddRoom.vue
index f8066ca0..a4f5aae3 100644
--- a/client/src/components/rooms/AddRoom.vue
+++ b/client/src/components/rooms/AddRoom.vue
@@ -3,11 +3,11 @@
 </template>
 
 <script>
-  import AddWidget from '@/components/AddWidget';
+import AddWidget from '@/components/AddWidget';
 
-  export default {
-    components: {
-      AddWidget
-    }
-  };
+export default {
+  components: {
+    AddWidget,
+  },
+};
 </script>
diff --git a/client/src/components/rooms/AddRoomEntryButton.vue b/client/src/components/rooms/AddRoomEntryButton.vue
index 2a7157af..db0558d1 100644
--- a/client/src/components/rooms/AddRoomEntryButton.vue
+++ b/client/src/components/rooms/AddRoomEntryButton.vue
@@ -1,64 +1,60 @@
 <template>
-  <router-link
-    class="add-room-entry-button"
-    data-cy="add-room-entry-button"
-    :to="addRoomEntryRoute"
-  >
+  <router-link class="add-room-entry-button" data-cy="add-room-entry-button" :to="addRoomEntryRoute">
     <plus-icon class="add-room-entry-button__icon" />
     <span class="add-room-entry-button__text">Beitrag erfassen</span>
   </router-link>
 </template>
 
 <script>
-  import { ADD_ROOM_ENTRY_PAGE }  from '@/router/room.names';
-  const PlusIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/PlusIcon');
+import { ADD_ROOM_ENTRY_PAGE } from '@/router/room.names';
+const PlusIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PlusIcon');
 
-  export default {
-    props: ['parent'],
+export default {
+  props: ['parent'],
 
-    components: {
-      PlusIcon,
-    },
+  components: {
+    PlusIcon,
+  },
 
-    data() {
-      return {
-        addRoomEntryRoute: {
-          name: ADD_ROOM_ENTRY_PAGE,
-        },
-      };
-    },
-  };
+  data() {
+    return {
+      addRoomEntryRoute: {
+        name: ADD_ROOM_ENTRY_PAGE,
+      },
+    };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .add-room-entry-button {
-    border: 2px solid $color-white;
-    border-radius: 12px;
-    height: 150px;
-    box-sizing: border-box;
-    margin-bottom: 25px;
-    justify-content: center;
-    align-items: center;
-    break-inside: avoid-column;
-    overflow: hidden;
-    cursor: pointer;
+.add-room-entry-button {
+  border: 2px solid $color-white;
+  border-radius: 12px;
+  height: 150px;
+  box-sizing: border-box;
+  margin-bottom: 25px;
+  justify-content: center;
+  align-items: center;
+  break-inside: avoid-column;
+  overflow: hidden;
+  cursor: pointer;
 
-    display: none;
-    @include desktop {
-      display: flex;
-    }
-
-    &__icon {
-      width: 20px;
-      fill: $color-white;
-      margin-right: $small-spacing;
-    }
-
-    &__text {
-      @include regular-text;
-      color: $color-white;
-    }
+  display: none;
+  @include desktop {
+    display: flex;
   }
+
+  &__icon {
+    width: 20px;
+    fill: $color-white;
+    margin-right: $small-spacing;
+  }
+
+  &__text {
+    @include regular-text;
+    color: $color-white;
+  }
+}
 </style>
diff --git a/client/src/components/rooms/ChangeVisibility.vue b/client/src/components/rooms/ChangeVisibility.vue
index a9513bc6..ecd9ec59 100644
--- a/client/src/components/rooms/ChangeVisibility.vue
+++ b/client/src/components/rooms/ChangeVisibility.vue
@@ -1,21 +1,12 @@
 <template>
-  <modal
-    :hide-header="false"
-    :small="true"
-    class="change-visibility"
-  >
+  <modal :hide-header="false" :small="true" class="change-visibility">
     <template #header>
-      <h1
-        class="change-visibility__heading"
-        data-cy="modal-title"
-      >
-        Sichtbarkeit anpassen
-      </h1>
+      <h1 class="change-visibility__heading" data-cy="modal-title">Sichtbarkeit anpassen</h1>
     </template>
     <div class="change-visibility__content">
       <radiobutton
         :checked="!restricted"
-        :class="{'change-visibility__radio--selected': !restricted}"
+        :class="{ 'change-visibility__radio--selected': !restricted }"
         data-cy="select-option"
         class="change-visibility__radio"
         label="Raumeinträge sind für alle Lernenden sichtbar"
@@ -23,7 +14,7 @@
       />
       <radiobutton
         :checked="restricted"
-        :class="{'change-visibility__radio--selected': restricted}"
+        :class="{ 'change-visibility__radio--selected': restricted }"
         data-cy="select-option"
         class="change-visibility__radio"
         label="Lernende sehen nur die eigenen Beiträge"
@@ -32,70 +23,63 @@
     </div>
     <template #footer>
       <div>
-        <a
-          class="button button--primary"
-          data-cy="modal-save-button"
-          @click="confirm"
-        >Speichern</a>
-        <a
-          class="button"
-          @click="cancel"
-        >Abbrechen</a>
+        <a class="button button--primary" data-cy="modal-save-button" @click="confirm">Speichern</a>
+        <a class="button" @click="cancel">Abbrechen</a>
       </div>
     </template>
   </modal>
 </template>
 
 <script>
-  import Modal from '@/components/Modal';
-  import Radiobutton from '@/components/Radiobutton';
+import Modal from '@/components/Modal';
+import Radiobutton from '@/components/Radiobutton';
 
-  export default {
-    components: {
-      Radiobutton,
-      Modal,
-    },
+export default {
+  components: {
+    Radiobutton,
+    Modal,
+  },
 
-    data() {
-      return {
-        restricted: false,
-      };
-    },
+  data() {
+    return {
+      restricted: false,
+    };
+  },
 
-    mounted() {
-      this.restricted = this.$modal.state.payload.restricted;
-    },
+  mounted() {
+    this.restricted = this.$modal.state.payload.restricted;
+  },
 
-    methods: {
-      restrict(restricted) {
-        this.restricted = restricted;
-      },
-      confirm() {
-        this.$modal.confirm(this.restricted);
-      },
-      cancel() {
-        this.$modal.cancel();
-      },
+  methods: {
+    restrict(restricted) {
+      this.restricted = restricted;
     },
-  };
+    confirm() {
+      this.$modal.confirm(this.restricted);
+    },
+    cancel() {
+      this.$modal.cancel();
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .change-visibility {
-    &__heading {
-      @include modal-heading;
-    }
-
-    &__content {
-      display: flex;
-      flex-direction: column;
-      padding: $medium-spacing 0;
-    }
-
-    &__radio:first-of-type {
-      margin-bottom: $medium-spacing;
-    }
+.change-visibility {
+  &__heading {
+    @include modal-heading;
   }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    padding: $medium-spacing 0;
+  }
+
+  &__radio:first-of-type {
+    margin-bottom: $medium-spacing;
+  }
+}
 </style>
diff --git a/client/src/components/rooms/Comment.vue b/client/src/components/rooms/Comment.vue
index e7b8ad71..31768059 100644
--- a/client/src/components/rooms/Comment.vue
+++ b/client/src/components/rooms/Comment.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="comment"
-    data-cy="comment"
-  >
+  <div class="comment" data-cy="comment">
     <div class="comment__owner">
       <user-widget :avatar-url="comment.owner.avatarUrl" />
       <span class="comment__owner-name">{{ comment.owner.firstName }} {{ comment.owner.lastName }}</span>
@@ -17,55 +14,55 @@
 </template>
 
 <script>
-  import UserWidget from '@/components/UserWidget';
-  import {dateTimeFilter} from '@/filters/date-filter';
+import UserWidget from '@/components/UserWidget';
+import { dateTimeFilter } from '@/filters/date-filter';
 
-  export default {
-    props: {
-      comment: {
-        type: Object,
-        default: null,
-      },
+export default {
+  props: {
+    comment: {
+      type: Object,
+      default: null,
     },
-    components: {UserWidget},
-    computed: {
-      createdDate() {
-        return dateTimeFilter(this.comment.created);
-      }
+  },
+  components: { UserWidget },
+  computed: {
+    createdDate() {
+      return dateTimeFilter(this.comment.created);
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .comment {
-    display: grid;
-    grid-template-columns: auto auto;
-    grid-template-rows: 2rem auto;
-    grid-template-areas:
-      "o d"
-      "t t";
-    padding: $medium-spacing 0 $large-spacing 0;
-    border-bottom: 1px solid $color-silver;
-    grid-row-gap: $medium-spacing;
+.comment {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: 2rem auto;
+  grid-template-areas:
+    'o d'
+    't t';
+  padding: $medium-spacing 0 $large-spacing 0;
+  border-bottom: 1px solid $color-silver;
+  grid-row-gap: $medium-spacing;
 
-    &__owner {
-      grid-area: o;
-      display: flex;
-      align-items: center;
-    }
-
-    &__date {
-      grid-area: d;
-      justify-self: end;
-      align-self: center;
-      @include regular-text;
-    }
-
-    &__text {
-      grid-area: t;
-      @include regular-paragraph;
-    }
+  &__owner {
+    grid-area: o;
+    display: flex;
+    align-items: center;
   }
+
+  &__date {
+    grid-area: d;
+    justify-self: end;
+    align-self: center;
+    @include regular-text;
+  }
+
+  &__text {
+    grid-area: t;
+    @include regular-paragraph;
+  }
+}
 </style>
diff --git a/client/src/components/rooms/CommentInput.vue b/client/src/components/rooms/CommentInput.vue
index 43440e23..4fe3b35e 100644
--- a/client/src/components/rooms/CommentInput.vue
+++ b/client/src/components/rooms/CommentInput.vue
@@ -9,55 +9,51 @@
       v-auto-grow
       @input="updateValue($event.target.value)"
     />
-    <a
-      data-cy="submit-comment"
-      class="button button--primary"
-      @click="submit()"
-    >Kommentar teilen</a>
+    <a data-cy="submit-comment" class="button button--primary" @click="submit()">Kommentar teilen</a>
   </div>
 </template>
 
 <script>
-  import EmojiBar from '@/components/ui/EmojiBar';
+import EmojiBar from '@/components/ui/EmojiBar';
 
-  export default {
-    props: {
-      value: {
-        type: String,
-        default: '',
-      },
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '',
     },
-    components: {
-      EmojiBar,
+  },
+  components: {
+    EmojiBar,
+  },
+  data() {
+    return {
+      text: this.value,
+    };
+  },
+  methods: {
+    updateValue(text) {
+      this.text = text;
     },
-    data() {
-      return {
-        text: this.value
-      };
+    addEmoji(emoji) {
+      this.text = this.text + emoji;
     },
-    methods: {
-      updateValue(text) {
-        this.text = text;
-      },
-      addEmoji(emoji) {
-        this.text = this.text + emoji;
-      },
-      submit() {
-        this.$emit('submit', this.text);
-        this.text = '';
-      }
+    submit() {
+      this.$emit('submit', this.text);
+      this.text = '';
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .comment-input {
-    @include form-with-border;
+.comment-input {
+  @include form-with-border;
 
-    &__textarea {
-      @include borderless-textarea;
-    }
+  &__textarea {
+    @include borderless-textarea;
   }
+}
 </style>
diff --git a/client/src/components/rooms/EditRoom.vue b/client/src/components/rooms/EditRoom.vue
index 854e8f7e..aaa435b7 100644
--- a/client/src/components/rooms/EditRoom.vue
+++ b/client/src/components/rooms/EditRoom.vue
@@ -1,25 +1,23 @@
 <template>
-  <room-form
-    :room="room"
-    @save="updateRoom"
-  />
+  <room-form :room="room" @save="updateRoom" />
 </template>
 
 <script>
-  import RoomForm from '@/components/rooms/RoomForm';
+import RoomForm from '@/components/rooms/RoomForm';
 
-  import UPDATE_ROOM_MUTATION from 'gql/mutations/rooms/updateRoom.gql';
+import UPDATE_ROOM_MUTATION from 'gql/mutations/rooms/updateRoom.gql';
 
-  export default {
-    props: ['room'],
+export default {
+  props: ['room'],
 
-    components: {
-      RoomForm
-    },
+  components: {
+    RoomForm,
+  },
 
-    methods: {
-      updateRoom(room) {
-        this.$apollo.mutate({
+  methods: {
+    updateRoom(room) {
+      this.$apollo
+        .mutate({
           mutation: UPDATE_ROOM_MUTATION,
           variables: {
             input: {
@@ -29,13 +27,14 @@
                 appearance: room.appearance,
                 description: room.description,
                 schoolClass: room.schoolClass,
-              }
-            }
-          }
-        }).then(() => {
+              },
+            },
+          },
+        })
+        .then(() => {
           this.$router.push('/rooms');
         });
-      }
     },
-  };
+  },
+};
 </script>
diff --git a/client/src/components/rooms/EntryCountWidget.vue b/client/src/components/rooms/EntryCountWidget.vue
index 58d0a6d7..219b0a0c 100644
--- a/client/src/components/rooms/EntryCountWidget.vue
+++ b/client/src/components/rooms/EntryCountWidget.vue
@@ -1,55 +1,56 @@
 <template>
   <div class="entry-count-widget">
     <component :is="icon" />
-    <span data-cy="entry-count">{{ entryCount }} <template v-if="verbose">{{ entryCount === 1 ? 'Beitrag' : 'Beiträge' }}</template></span>
+    <span data-cy="entry-count"
+      >{{ entryCount }} <template v-if="verbose">{{ entryCount === 1 ? 'Beitrag' : 'Beiträge' }}</template></span
+    >
   </div>
 </template>
 
 <script>
-  import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon';
-  const Cards = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cards.vue');
+import SpeechBubbleIcon from '@/components/icons/SpeechBubbleIcon';
+const Cards = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Cards.vue');
 
-  export default {
-    props: {
-      entryCount: {
-        type: Number,
-      },
-      verbose: {
-        type: Boolean,
-        default: true,
-      },
-      icon: {
-        type: String,
-        default: 'cards'
-      }
+export default {
+  props: {
+    entryCount: {
+      type: Number,
     },
+    verbose: {
+      type: Boolean,
+      default: true,
+    },
+    icon: {
+      type: String,
+      default: 'cards',
+    },
+  },
 
-    components: {
-      'speech-bubble': SpeechBubbleIcon,
-      SpeechBubbleIcon,
-      Cards,
-    },
-  };
+  components: {
+    'speech-bubble': SpeechBubbleIcon,
+    SpeechBubbleIcon,
+    Cards,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .entry-count-widget {
-    display: flex;
-    align-items: center;
-    opacity: 0.6;
-    margin-right: $medium-spacing;
+.entry-count-widget {
+  display: flex;
+  align-items: center;
+  opacity: 0.6;
+  margin-right: $medium-spacing;
 
-    svg {
-      width: 30px;
-      fill: $color-charcoal-dark;
-      margin-right: 15px;
-    }
-
-    & > span {
-      @include room-widget-text-style;
-    }
+  svg {
+    width: 30px;
+    fill: $color-charcoal-dark;
+    margin-right: 15px;
   }
 
+  & > span {
+    @include room-widget-text-style;
+  }
+}
 </style>
diff --git a/client/src/components/rooms/MoreActions.vue b/client/src/components/rooms/MoreActions.vue
index 351eed31..4b9d3014 100644
--- a/client/src/components/rooms/MoreActions.vue
+++ b/client/src/components/rooms/MoreActions.vue
@@ -1,70 +1,66 @@
 <template>
   <div class="more-actions">
     <a
-      :class="{'more-actions__toggle--background': background}"
+      :class="{ 'more-actions__toggle--background': background }"
       class="more-actions__toggle"
       data-cy="toggle-more-actions-menu"
       @click.stop="toggleMenu"
     >
       <ellipses />
     </a>
-    <widget-popover
-      class="more-actions__popover"
-      v-if="showMenu"
-      @hide-me="showMenu = false"
-    >
+    <widget-popover class="more-actions__popover" v-if="showMenu" @hide-me="showMenu = false">
       <slot :toggle="toggleMenu" />
     </widget-popover>
   </div>
 </template>
 
 <script>
-  import WidgetPopover from '@/components/ui/WidgetPopover';
-  const Ellipses = () => import(/* webpackChunkName: "icons" */'@/components/icons/Ellipses');
+import WidgetPopover from '@/components/ui/WidgetPopover';
+const Ellipses = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Ellipses');
 
-  export default {
-    props: {
-      background: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  props: {
+    background: {
+      type: Boolean,
+      default: false,
     },
+  },
 
-    components: {
-      Ellipses,
-      WidgetPopover,
-    },
-    data() {
-      return {
-        showMenu: false,
-      };
-    },
+  components: {
+    Ellipses,
+    WidgetPopover,
+  },
+  data() {
+    return {
+      showMenu: false,
+    };
+  },
 
-    methods: {
-      toggleMenu: function () {
-        this.showMenu = !this.showMenu;
-      },
+  methods: {
+    toggleMenu: function () {
+      this.showMenu = !this.showMenu;
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .more-actions {
-    svg {
-      width: 30px;
-      fill: $color-charcoal-dark;
-      //margin-right: 15px;
-    }
+.more-actions {
+  svg {
+    width: 30px;
+    fill: $color-charcoal-dark;
+    //margin-right: 15px;
+  }
 
-    &__toggle {
-      display: flex;
-      border-radius: 5px;
+  &__toggle {
+    display: flex;
+    border-radius: 5px;
 
-      &--background {
-       background: white;
-      }
+    &--background {
+      background: white;
     }
   }
+}
 </style>
diff --git a/client/src/components/rooms/RoomActions.vue b/client/src/components/rooms/RoomActions.vue
index 895ca287..2b3ac665 100644
--- a/client/src/components/rooms/RoomActions.vue
+++ b/client/src/components/rooms/RoomActions.vue
@@ -1,141 +1,132 @@
 <template>
-  <more-actions
-    v-slot="{toggle}"
-    class="room-actions"
-    data-cy="room-actions"
-  >
-    <popover-link
-      icon="pen-icon"
-      text="Bearbeiten"
-      @link-action="editRoom()"
-    />
+  <more-actions v-slot="{ toggle }" class="room-actions" data-cy="room-actions">
+    <popover-link icon="pen-icon" text="Bearbeiten" @link-action="editRoom()" />
     <popover-link
       icon="eye-icon"
       data-cy="change-visibility"
       text="Sichtbarkeit anpassen"
       @link-action="changeVisibility()"
     />
-    <popover-link
-      icon="trash-icon"
-      text="Löschen"
-      data-cy="delete-room"
-      @link-action="deleteRoom(toggle)"
-    />
+    <popover-link icon="trash-icon" text="Löschen" data-cy="delete-room" @link-action="deleteRoom(toggle)" />
   </more-actions>
 </template>
 
 <script>
-  import DELETE_ROOM_MUTATION from 'gql/mutations/rooms/deleteRoom.gql';
-  import UPDATE_ROOM_VISIBILITY_MUTATION from 'gql/mutations/rooms/updateRoomVisibility.gql';
+import DELETE_ROOM_MUTATION from 'gql/mutations/rooms/deleteRoom.gql';
+import UPDATE_ROOM_VISIBILITY_MUTATION from 'gql/mutations/rooms/updateRoomVisibility.gql';
 
-  import ROOMS_QUERY from '@/graphql/gql/queries/roomsQuery.gql';
-  import PopoverLink from '@/components/ui/PopoverLink';
-  import {ROOMS_PAGE} from '@/router/room.names';
-  import MoreActions from '@/components/rooms/MoreActions';
+import ROOMS_QUERY from '@/graphql/gql/queries/roomsQuery.gql';
+import PopoverLink from '@/components/ui/PopoverLink';
+import { ROOMS_PAGE } from '@/router/room.names';
+import MoreActions from '@/components/rooms/MoreActions';
 
-  export default {
-    props: {
-      id: {
-        type: String,
-        default: '',
-      },
-      restricted: {
-        type: Boolean,
-        default: false,
-      },
+export default {
+  props: {
+    id: {
+      type: String,
+      default: '',
     },
-
-    components: {
-      MoreActions,
-      PopoverLink,
+    restricted: {
+      type: Boolean,
+      default: false,
     },
+  },
 
-    methods: {
-      deleteRoom(toggle) {
-        toggle();
-        this.$modal.open('confirm', {
+  components: {
+    MoreActions,
+    PopoverLink,
+  },
+
+  methods: {
+    deleteRoom(toggle) {
+      toggle();
+      this.$modal
+        .open('confirm', {
           title: 'Raum löschen',
-          message: 'Willst du diesen Raum wirklich löschen? Wenn du diesen Raum löschst, werden auch alle dazugehörigen Einträge und Kommentare gelöscht. Diese Aktion kann nicht rückgängig gemacht werden.',
-        }).then(() => {
-            this.$apollo.mutate({
-              mutation: DELETE_ROOM_MUTATION,
-              variables: {
-                input: {
-                  id: this.id,
-                },
+          message:
+            'Willst du diesen Raum wirklich löschen? Wenn du diesen Raum löschst, werden auch alle dazugehörigen Einträge und Kommentare gelöscht. Diese Aktion kann nicht rückgängig gemacht werden.',
+        })
+        .then(() => {
+          this.$apollo.mutate({
+            mutation: DELETE_ROOM_MUTATION,
+            variables: {
+              input: {
+                id: this.id,
               },
-              update: (store, {data: {deleteRoom: {success}}}) => {
-                if (success) {
-                  const {rooms} = store.readQuery({query: ROOMS_QUERY});
-                  if (rooms) {
-                    const index = rooms.findIndex(room => room.id === this.id);
-                    console.log(`found room index ${index} - rooms length ${rooms.length}`);
-                    const slicedRooms = [
-                      ...rooms.slice(0, index),
-                      ...rooms.slice(index + 1),
-                    ];
-                    console.log(`slicedRooms length ${slicedRooms.length}`);
-                    const data = {
-                      rooms: slicedRooms,
-                    };
-                    store.writeQuery({query: ROOMS_QUERY, data});
-                  }
+            },
+            update: (
+              store,
+              {
+                data: {
+                  deleteRoom: { success },
+                },
+              }
+            ) => {
+              if (success) {
+                const { rooms } = store.readQuery({ query: ROOMS_QUERY });
+                if (rooms) {
+                  const index = rooms.findIndex((room) => room.id === this.id);
+                  console.log(`found room index ${index} - rooms length ${rooms.length}`);
+                  const slicedRooms = [...rooms.slice(0, index), ...rooms.slice(index + 1)];
+                  console.log(`slicedRooms length ${slicedRooms.length}`);
+                  const data = {
+                    rooms: slicedRooms,
+                  };
+                  store.writeQuery({ query: ROOMS_QUERY, data });
                 }
-                this.$router.push({
-                  name: ROOMS_PAGE,
-                });
-              },
-            });
-          })
-          .catch(() => {
+              }
+              this.$router.push({
+                name: ROOMS_PAGE,
+              });
+            },
           });
-
-      },
-      editRoom() {
-        this.$router.push({name: 'edit-room', params: {id: this.id}});
-      },
-      changeVisibility() {
-        this.showMenu = false;
-        this.$modal.open('change-visibility', {restricted: this.restricted})
-          .then((restricted) => {
-            this.$apollo.mutate({
-              mutation: UPDATE_ROOM_VISIBILITY_MUTATION,
-              variables: {
-                input: {
-                  id: this.id,
-                  restricted,
-                },
-              },
-            });
-          })
-          .catch(() => {
-
-          });
-      },
+        })
+        .catch(() => {});
     },
-  };
+    editRoom() {
+      this.$router.push({ name: 'edit-room', params: { id: this.id } });
+    },
+    changeVisibility() {
+      this.showMenu = false;
+      this.$modal
+        .open('change-visibility', { restricted: this.restricted })
+        .then((restricted) => {
+          this.$apollo.mutate({
+            mutation: UPDATE_ROOM_VISIBILITY_MUTATION,
+            variables: {
+              input: {
+                id: this.id,
+                restricted,
+              },
+            },
+          });
+        })
+        .catch(() => {});
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  $height: 30px;
+$height: 30px;
 
-  .room-actions {
-    height: $height;
-    display: none;
-    @include desktop {
-      display: block;
-    }
-
-    &__more-link {
-      cursor: pointer;
-      height: $height;
-    }
-
-    &__popover {
-      display: flex;
-      width: max-content;
-    }
+.room-actions {
+  height: $height;
+  display: none;
+  @include desktop {
+    display: block;
   }
+
+  &__more-link {
+    cursor: pointer;
+    height: $height;
+  }
+
+  &__popover {
+    display: flex;
+    width: max-content;
+  }
+}
 </style>
diff --git a/client/src/components/rooms/RoomEntry.vue b/client/src/components/rooms/RoomEntry.vue
index 3f3f3b67..1e281460 100644
--- a/client/src/components/rooms/RoomEntry.vue
+++ b/client/src/components/rooms/RoomEntry.vue
@@ -1,150 +1,120 @@
 <template>
-  <div
-    class="room-entry"
-    data-cy="room-entry"
-  >
-    <router-link
-      :to="{name: 'article', params: { slug: slug }}"
-      class="room-entry__router-link"
-      tag="div"
-    >
-      <div
-        class="room-entry__header"
-        v-if="image"
-      >
-        <img
-          :src="image"
-          :alt="title"
-          class="room-entry__image"
-        >
+  <div class="room-entry" data-cy="room-entry">
+    <router-link :to="{ name: 'article', params: { slug: slug } }" class="room-entry__router-link" tag="div">
+      <div class="room-entry__header" v-if="image">
+        <img :src="image" :alt="title" class="room-entry__image" />
       </div>
       <div class="room-entry__content">
         <h2 class="room-entry__title">
           {{ title }}
         </h2>
         <!-- eslint-disable vue/no-v-html -->
-        <p
-          class="room-entry__teaser"
-          v-html="teaser"
-        />
+        <p class="room-entry__teaser" v-html="teaser" />
         <div class="room-entry__footer">
-          <user-meta-widget
-            v-bind="author"
-            class="room-entry__author"
-          />
-          <entry-count-widget
-            :entry-count="comments"
-            icon="speech-bubble"
-            :verbose="false"
-          />
+          <user-meta-widget v-bind="author" class="room-entry__author" />
+          <entry-count-widget :entry-count="comments" icon="speech-bubble" :verbose="false" />
         </div>
       </div>
     </router-link>
 
-    <room-entry-actions
-      data-cy="room-entry-actions"
-      class="room-entry__more"
-      :slug="slug"
-      v-if="myEntry"
-    />
+    <room-entry-actions data-cy="room-entry-actions" class="room-entry__more" :slug="slug" v-if="myEntry" />
   </div>
 </template>
 
 <script>
-  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 
-  import UserMetaWidget from '@/components/UserMetaWidget';
-  import teaser from '@/helpers/teaser';
-  import RoomEntryActions from '@/components/rooms/RoomEntryActions';
-  import EntryCountWidget from '@/components/rooms/EntryCountWidget';
+import UserMetaWidget from '@/components/UserMetaWidget';
+import teaser from '@/helpers/teaser';
+import RoomEntryActions from '@/components/rooms/RoomEntryActions';
+import EntryCountWidget from '@/components/rooms/EntryCountWidget';
 
-  export default {
-    props: ['title', 'author', 'contents', 'slug', 'id', 'comments'],
+export default {
+  props: ['title', 'author', 'contents', 'slug', 'id', 'comments'],
 
-    components: {
-      EntryCountWidget,
-      RoomEntryActions,
-      UserMetaWidget,
+  components: {
+    EntryCountWidget,
+    RoomEntryActions,
+    UserMetaWidget,
+  },
+
+  computed: {
+    image() {
+      if (this.contents) {
+        let found = this.contents.find((c) => c.type === 'image_url_block');
+        return found ? found.value.url : '';
+      }
+      return '';
     },
-
-    computed: {
-      image() {
-        if (this.contents) {
-          let found = this.contents.find(c => c.type === 'image_url_block');
-          return found ? found.value.url : '';
-        }
-        return '';
-      },
-      teaser() {
-        return teaser(this.contents);
-      },
-      myEntry() {
-        const authorId = atob(this.author.id).split(':')[1];
-        const userId = atob(this.me.id).split(':')[1];
-        return authorId === userId;
-      },
+    teaser() {
+      return teaser(this.contents);
     },
-
-    apollo: {
-      me() {
-        return {
-          query: ME_QUERY,
-        };
-      },
+    myEntry() {
+      const authorId = atob(this.author.id).split(':')[1];
+      const userId = atob(this.me.id).split(':')[1];
+      return authorId === userId;
     },
-  };
+  },
+
+  apollo: {
+    me() {
+      return {
+        query: ME_QUERY,
+      };
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .room-entry {
-    border-radius: 12px;
-    background-color: $color-white;
-    overflow: hidden;
-    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
-    page-break-inside: avoid; /* Firefox */
-    break-inside: avoid; /* IE 10+ */
-    margin-bottom: 25px;
-    cursor: pointer;
-    position: relative;
-
-    &__image {
-      max-width: 100%;
-    }
-
-    &__content {
-      padding: 15px;
-    }
-
-    &__title {
-      font-size: toRem(21px);
-      margin-bottom: 10px;
-    }
-
-    &__teaser {
-      line-height: 1.5;
-      margin-bottom: 10px;
-      min-height: 50px;
-    }
-
-    &__more {
-      position: absolute;
-      top: 10px;
-      right: 10px;
-      display: none;
-
-      @include desktop {
-        display: block;
-      }
-    }
-
-    &__footer {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-    }
+.room-entry {
+  border-radius: 12px;
+  background-color: $color-white;
+  overflow: hidden;
+  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
+  page-break-inside: avoid; /* Firefox */
+  break-inside: avoid; /* IE 10+ */
+  margin-bottom: 25px;
+  cursor: pointer;
+  position: relative;
 
+  &__image {
+    max-width: 100%;
   }
+
+  &__content {
+    padding: 15px;
+  }
+
+  &__title {
+    font-size: toRem(21px);
+    margin-bottom: 10px;
+  }
+
+  &__teaser {
+    line-height: 1.5;
+    margin-bottom: 10px;
+    min-height: 50px;
+  }
+
+  &__more {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    display: none;
+
+    @include desktop {
+      display: block;
+    }
+  }
+
+  &__footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+}
 </style>
diff --git a/client/src/components/rooms/RoomEntryActions.vue b/client/src/components/rooms/RoomEntryActions.vue
index 4e7fbdbe..1c12b5a1 100644
--- a/client/src/components/rooms/RoomEntryActions.vue
+++ b/client/src/components/rooms/RoomEntryActions.vue
@@ -1,8 +1,5 @@
 <template>
-  <more-actions
-    data-cy="room-entry-actions"
-    v-slot="{toggle}"
-  >
+  <more-actions data-cy="room-entry-actions" v-slot="{ toggle }">
     <popover-link
       icon="trash-icon"
       text="Eintrag löschen"
@@ -19,107 +16,115 @@
 </template>
 
 <script>
-  import PopoverLink from '@/components/ui/PopoverLink.vue';
-  import MoreActions from '@/components/rooms/MoreActions.vue';
-  import DELETE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/deleteRoomEntry.gql';
-  import ROOM_ENTRIES_QUERY from 'gql/queries/roomEntriesQuery.gql';
-  import {UPDATE_ROOM_ENTRY_PAGE} from '@/router/room.names';
-  import {removeAtIndex} from '@/graphql/immutable-operations';
+import PopoverLink from '@/components/ui/PopoverLink.vue';
+import MoreActions from '@/components/rooms/MoreActions.vue';
+import DELETE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/deleteRoomEntry.gql';
+import ROOM_ENTRIES_QUERY from 'gql/queries/roomEntriesQuery.gql';
+import { UPDATE_ROOM_ENTRY_PAGE } from '@/router/room.names';
+import { removeAtIndex } from '@/graphql/immutable-operations';
 
-  export default {
-    props: {
-      slug: {
-        type: String,
-        default: '',
-      },
+export default {
+  props: {
+    slug: {
+      type: String,
+      default: '',
     },
+  },
 
-    components: {
-      MoreActions,
-      PopoverLink,
-    },
+  components: {
+    MoreActions,
+    PopoverLink,
+  },
 
-    data() {
-      return {
-        showMenu: false,
-      };
-    },
+  data() {
+    return {
+      showMenu: false,
+    };
+  },
 
-    methods: {
-      deleteRoomEntry(slug, toggle) {
-        toggle();
-        this.$modal.open('confirm', {
-            title: 'Eintrag löschen',
-            message: 'Willst du diesen Eintrag wirklich löschen? Wenn du diesen Eintrag löschst, werden auch alle dazugehörigen Kommentare gelöscht. Diese Aktion kann nicht rückgängig gemacht werden.',
-          })
-          .then(() => {
-            this.$apollo.mutate({
-              mutation: DELETE_ROOM_ENTRY_MUTATION,
-              variables: {
-                input: {
-                  slug,
+  methods: {
+    deleteRoomEntry(slug, toggle) {
+      toggle();
+      this.$modal
+        .open('confirm', {
+          title: 'Eintrag löschen',
+          message:
+            'Willst du diesen Eintrag wirklich löschen? Wenn du diesen Eintrag löschst, werden auch alle dazugehörigen Kommentare gelöscht. Diese Aktion kann nicht rückgängig gemacht werden.',
+        })
+        .then(() => {
+          this.$apollo.mutate({
+            mutation: DELETE_ROOM_ENTRY_MUTATION,
+            variables: {
+              input: {
+                slug,
+              },
+            },
+            update(
+              store,
+              {
+                data: {
+                  deleteRoomEntry: { success, roomSlug },
                 },
-              },
-              update(store, {data: {deleteRoomEntry: {success, roomSlug}}}) {
-                if (success) {
-                  const query = ROOM_ENTRIES_QUERY;
-                  const variables = {slug: roomSlug};
-                  const {room} = store.readQuery({query, variables});
-                  if (room) {
-                    const index = room.roomEntries.edges.findIndex(edge => edge.node.slug === slug);
-                    const edges = removeAtIndex(room.roomEntries.edges, index);
-                    const data = {
-                      room: {
-                        ...room,
-                        roomEntries: {
-                          edges,
-                        },
+              }
+            ) {
+              if (success) {
+                const query = ROOM_ENTRIES_QUERY;
+                const variables = { slug: roomSlug };
+                const { room } = store.readQuery({ query, variables });
+                if (room) {
+                  const index = room.roomEntries.edges.findIndex((edge) => edge.node.slug === slug);
+                  const edges = removeAtIndex(room.roomEntries.edges, index);
+                  const data = {
+                    room: {
+                      ...room,
+                      roomEntries: {
+                        edges,
                       },
-                    };
-                    store.writeQuery({query, data, variables});
-                  }
+                    },
+                  };
+                  store.writeQuery({ query, data, variables });
                 }
-              },
-            });
-          })
-          .catch(() => {
+              }
+            },
           });
-      },
-      editRoomEntry(slug) {
-        this.$router.push({
-          name: UPDATE_ROOM_ENTRY_PAGE,
-          params: {
-            slug: this.$route.params.slug,
-            entrySlug: slug,
-          },
-        });
-      },
+        })
+        .catch(() => {});
     },
-  };
+    editRoomEntry(slug) {
+      this.$router.push({
+        name: UPDATE_ROOM_ENTRY_PAGE,
+        params: {
+          slug: this.$route.params.slug,
+          entrySlug: slug,
+        },
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  $height: 30px;
+$height: 30px;
 
-  .room-entry-actions {
+.room-entry-actions {
+  height: $height;
+
+  &__more-link {
+    cursor: pointer;
     height: $height;
-
-    &__more-link {
-      cursor: pointer;
-      height: $height;
-    }
-
-    &__popover {
-      display: flex;
-      width: max-content;
-    }
-
-    svg {
-      width: 30px;
-      fill: $color-charcoal-dark;
-      margin-right: 15px;
-    }
   }
+
+  &__popover {
+    display: flex;
+    width: max-content;
+  }
+
+  svg {
+    width: 30px;
+    fill: $color-charcoal-dark;
+    margin-right: 15px;
+  }
+}
 </style>
diff --git a/client/src/components/rooms/RoomForm.vue b/client/src/components/rooms/RoomForm.vue
index 5c54974c..1018eb3b 100644
--- a/client/src/components/rooms/RoomForm.vue
+++ b/client/src/components/rooms/RoomForm.vue
@@ -1,108 +1,82 @@
 <template>
-  <page-form
-    class="room-form"
-    title="Neuer Raum"
-    @save="$emit('save', localRoom)"
-  >
-    <page-form-input
-      label="Titel"
-      v-model="localRoom.title"
-    />
+  <page-form class="room-form" title="Neuer Raum" @save="$emit('save', localRoom)">
+    <page-form-input label="Titel" v-model="localRoom.title" />
 
-    <page-form-input
-      label="Beschreibung"
-      type="textarea"
-      v-model="localRoom.description"
-    />
+    <page-form-input label="Beschreibung" type="textarea" v-model="localRoom.description" />
 
-    <h2 class="room-form__property-heading">
-      Farbe
-    </h2>
-    <color-chooser
-      :selected-color="localRoom.appearance"
-      @input="updateColor"
-    />
+    <h2 class="room-form__property-heading">Farbe</h2>
+    <color-chooser :selected-color="localRoom.appearance" @input="updateColor" />
     <template #footer>
-      <button
-        type="submit"
-        data-cy="room-form-save"
-        class="button button--primary room-form__save-button"
-      >
+      <button type="submit" data-cy="room-form-save" class="button button--primary room-form__save-button">
         Speichern
       </button>
-      <router-link
-        to="/rooms"
-        tag="button"
-        class="button"
-      >
-        Abbrechen
-      </router-link>
+      <router-link to="/rooms" tag="button" class="button"> Abbrechen </router-link>
     </template>
   </page-form>
 </template>
 
 <script>
-  import ColorChooser from '@/components/ColorChooser';
-  import PageForm from '@/components/page-form/PageForm';
-  import PageFormInput from '@/components/page-form/PageFormInput';
+import ColorChooser from '@/components/ColorChooser';
+import PageForm from '@/components/page-form/PageForm';
+import PageFormInput from '@/components/page-form/PageFormInput';
 
-  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 
-  export default {
-    props: ['room'],
+export default {
+  props: ['room'],
 
-    components: {
-      ColorChooser,
-      PageForm,
-      PageFormInput
+  components: {
+    ColorChooser,
+    PageForm,
+    PageFormInput,
+  },
+
+  data() {
+    return {
+      localRoom: Object.assign({}, this.room),
+      me: {},
+    };
+  },
+
+  created() {
+    this.$store.dispatch('setSpecialContainerClass', this.localRoom.appearance);
+  },
+
+  beforeDestroy() {
+    this.$store.dispatch('setSpecialContainerClass', '');
+  },
+
+  methods: {
+    updateColor(newColor) {
+      this.localRoom.appearance = newColor;
+      this.$store.dispatch('setSpecialContainerClass', newColor);
     },
+  },
 
-    data() {
-      return {
-        localRoom: Object.assign({}, this.room),
-        me: {}
-      };
+  apollo: {
+    me: {
+      query: ME_QUERY,
     },
-
-    created() {
-      this.$store.dispatch('setSpecialContainerClass', this.localRoom.appearance);
-    },
-
-    beforeDestroy() {
-      this.$store.dispatch('setSpecialContainerClass', '');
-    },
-
-    methods: {
-      updateColor(newColor) {
-        this.localRoom.appearance = newColor;
-        this.$store.dispatch('setSpecialContainerClass', newColor);
-      }
-    },
-
-    apollo: {
-      me: {
-        query: ME_QUERY,
-      }
-    },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .room-form {
-    &__property-heading {
-      @include page-form-input-heading;
-    }
-
-    &__input,
-    &__textarea {
-      width: 100%;
-      margin-bottom: 35px;
-    }
-
-    &__save-button {
-      margin-right: 15px;
-    }
+.room-form {
+  &__property-heading {
+    @include page-form-input-heading;
   }
+
+  &__input,
+  &__textarea {
+    width: 100%;
+    margin-bottom: 35px;
+  }
+
+  &__save-button {
+    margin-right: 15px;
+  }
+}
 </style>
diff --git a/client/src/components/rooms/RoomGroupWidget.vue b/client/src/components/rooms/RoomGroupWidget.vue
index 30b28383..7ee4516d 100644
--- a/client/src/components/rooms/RoomGroupWidget.vue
+++ b/client/src/components/rooms/RoomGroupWidget.vue
@@ -8,33 +8,33 @@
 </template>
 
 <script>
-  const Group = () => import(/* webpackChunkName: "icons" */'@/components/icons/Group.vue');
+const Group = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Group.vue');
 
-  export default {
-    props: ['name'],
+export default {
+  props: ['name'],
 
-    components: {
-      Group
-    }
-  };
+  components: {
+    Group,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .room-group-widget {
-    display: flex;
-    align-items: center;
-    opacity: 0.6;
+.room-group-widget {
+  display: flex;
+  align-items: center;
+  opacity: 0.6;
 
-    svg {
-      width: 30px;
-      fill: $color-charcoal-dark;
-      margin-right: 15px;
-    }
-
-    & > span {
-      @include room-widget-text-style;;
-    }
+  svg {
+    width: 30px;
+    fill: $color-charcoal-dark;
+    margin-right: 15px;
   }
+
+  & > span {
+    @include room-widget-text-style;
+  }
+}
 </style>
diff --git a/client/src/components/rooms/RoomVisibilityWidget.vue b/client/src/components/rooms/RoomVisibilityWidget.vue
index 766b0ce6..544bdb19 100644
--- a/client/src/components/rooms/RoomVisibilityWidget.vue
+++ b/client/src/components/rooms/RoomVisibilityWidget.vue
@@ -12,42 +12,40 @@
 </template>
 
 <script>
+const EyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon');
+const ClosedEyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ClosedEyeIcon');
 
-  const EyeIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon');
-  const ClosedEyeIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/ClosedEyeIcon');
-
-  export default {
-    props: {
-      restricted: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  props: {
+    restricted: {
+      type: Boolean,
+      default: false,
     },
+  },
 
-    components: {
-      ClosedEyeIcon,
-      EyeIcon
-    }
-  };
+  components: {
+    ClosedEyeIcon,
+    EyeIcon,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .room-visibility-widget {
-    display: flex;
-    align-items: center;
-    opacity: 0.6;
+.room-visibility-widget {
+  display: flex;
+  align-items: center;
+  opacity: 0.6;
 
-    &__icon {
-      width: 30px;
-      fill: $color-charcoal-dark;
-      margin-right: 15px;
-    }
-
-    & > span {
-      @include room-widget-text-style;
-    }
+  &__icon {
+    width: 30px;
+    fill: $color-charcoal-dark;
+    margin-right: 15px;
   }
 
+  & > span {
+    @include room-widget-text-style;
+  }
+}
 </style>
diff --git a/client/src/components/rooms/RoomWidget.vue b/client/src/components/rooms/RoomWidget.vue
index e2e521f5..4057de22 100644
--- a/client/src/components/rooms/RoomWidget.vue
+++ b/client/src/components/rooms/RoomWidget.vue
@@ -1,125 +1,111 @@
 <template>
-  <div
-    :class="roomClass"
-    class="room-widget"
-  >
-    <router-link
-      :to="{name: 'room', params: {slug: slug}}"
-      tag="div"
-      class="room-widget__content"
-    >
+  <div :class="roomClass" class="room-widget">
+    <router-link :to="{ name: 'room', params: { slug: slug } }" tag="div" class="room-widget__content">
       <h2 class="room-widget__title">
         {{ title }}
       </h2>
       <room-group-widget v-bind="schoolClass" />
       <entry-count-widget :entry-count="entryCount" />
     </router-link>
-    <widget-footer
-      data-cy="widget-footer"
-      v-if="canEditRoom"
-    >
-      <room-actions
-        :restricted="restricted"
-        :id="id"
-      />
+    <widget-footer data-cy="widget-footer" v-if="canEditRoom">
+      <room-actions :restricted="restricted" :id="id" />
     </widget-footer>
   </div>
 </template>
 
 <script>
+import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
+import EntryCountWidget from '@/components/rooms/EntryCountWidget';
+import WidgetFooter from '@/components/ui/WidgetFooter';
+import RoomActions from '@/components/rooms/RoomActions';
 
-  import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
-  import EntryCountWidget from '@/components/rooms/EntryCountWidget';
-  import WidgetFooter from '@/components/ui/WidgetFooter';
-  import RoomActions from '@/components/rooms/RoomActions';
+import { meQuery } from '@/graphql/queries';
 
-  import {meQuery} from '@/graphql/queries';
+export default {
+  props: ['slug', 'title', 'entryCount', 'appearance', 'schoolClass', 'id', 'restricted'],
 
-  export default {
-    props: ['slug', 'title', 'entryCount', 'appearance', 'schoolClass', 'id', 'restricted'],
+  components: {
+    EntryCountWidget,
+    RoomGroupWidget,
+    WidgetFooter,
+    RoomActions,
+  },
 
-    components: {
-      EntryCountWidget,
-      RoomGroupWidget,
-      WidgetFooter,
-      RoomActions
-    },
-
-    data() {
-      return {
-        showMenu: false,
-        me: {
-          permissions: []
-        }
-      };
-    },
-
-    computed: {
-      roomClass() {
-        return `room-widget--${this.appearance}`;
+  data() {
+    return {
+      showMenu: false,
+      me: {
+        permissions: [],
       },
-      canEditRoom() {
-        return this.me.isTeacher && !this.me.readOnly && !this.me.selectedClass.readOnly;
-      }
-    },
+    };
+  },
 
-    apollo: {
-      me: meQuery
+  computed: {
+    roomClass() {
+      return `room-widget--${this.appearance}`;
     },
-  };
+    canEditRoom() {
+      return this.me.isTeacher && !this.me.readOnly && !this.me.selectedClass.readOnly;
+    },
+  },
+
+  apollo: {
+    me: meQuery,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .room-widget {
-    display: -ms-grid;
-    @supports (display: grid) {
-      display: grid;
-    }
-    height: 260px;
-    grid-template-rows: 210px 1fr;
-    /*overflow: hidden;*/
-    @include widget-shadow;
-    border: 0;
+.room-widget {
+  display: -ms-grid;
+  @supports (display: grid) {
+    display: grid;
+  }
+  height: 260px;
+  grid-template-rows: 210px 1fr;
+  /*overflow: hidden;*/
+  @include widget-shadow;
+  border: 0;
 
-    /*
+  /*
      * For IE10+
      */
-    -ms-grid-rows: 210px 1fr;
-    -ms-grid-columns: 1fr;
+  -ms-grid-rows: 210px 1fr;
+  -ms-grid-columns: 1fr;
 
-    @include skillbox-colors;
+  @include skillbox-colors;
 
-    svg {
-      width: 30px;
-      fill: $color-charcoal-dark;
-      margin-right: 15px;
-    }
+  svg {
+    width: 30px;
+    fill: $color-charcoal-dark;
+    margin-right: 15px;
+  }
 
-    &__content {
-      padding: 22px;
-      color: $color-charcoal-dark;
-      cursor: pointer;
+  &__content {
+    padding: 22px;
+    color: $color-charcoal-dark;
+    cursor: pointer;
 
-      /*
+    /*
       * For IE10+
       */
-      display: -ms-grid;
-      -ms-grid-rows: 80px 30px 30px;
-      & > :nth-child(1) {
-        -ms-grid-row: 1;
-      }
-      & > :nth-child(2) {
-        -ms-grid-row: 2;
-      }
-      & > :nth-child(3) {
-        -ms-grid-row: 3;
-      }
+    display: -ms-grid;
+    -ms-grid-rows: 80px 30px 30px;
+    & > :nth-child(1) {
+      -ms-grid-row: 1;
     }
-
-    &__title {
-      font-size: 1.375rem;
+    & > :nth-child(2) {
+      -ms-grid-row: 2;
+    }
+    & > :nth-child(3) {
+      -ms-grid-row: 3;
     }
   }
+
+  &__title {
+    font-size: 1.375rem;
+  }
+}
 </style>
diff --git a/client/src/components/rooms/RoomsOnboarding.vue b/client/src/components/rooms/RoomsOnboarding.vue
index 74d673f2..35a91e76 100644
--- a/client/src/components/rooms/RoomsOnboarding.vue
+++ b/client/src/components/rooms/RoomsOnboarding.vue
@@ -1,25 +1,12 @@
 <template>
   <div class="rooms-onboarding">
-    <h1
-      class="rooms-onboarding__heading"
-      data-cy="page-title"
-    >
-      Räume
-    </h1>
+    <h1 class="rooms-onboarding__heading" data-cy="page-title">Räume</h1>
     <rooms-illustration class="rooms-onboarding__illustration" />
-    <p
-      data-cy="rooms-onboarding-text"
-      class="rooms-onboarding__text"
-    >
+    <p data-cy="rooms-onboarding-text" class="rooms-onboarding__text">
       Hier können Sie Räume erstellen, damit SchülerInnen zusammenarbeiten und Beiträge teilen können.
     </p>
     <div class="rooms-onboarding__button">
-      <router-link
-        :to="newRoomRoute"
-        class="button button--primary"
-        data-cy="create-room-button"
-        v-if="isTeacher"
-      >
+      <router-link :to="newRoomRoute" class="button button--primary" data-cy="create-room-button" v-if="isTeacher">
         Raum erstellen
       </router-link>
     </div>
@@ -27,42 +14,43 @@
 </template>
 
 <script>
-  import {NEW_ROOM_PAGE} from '@/router/room.names';
-  const RoomsIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/RoomsIllustration');
+import { NEW_ROOM_PAGE } from '@/router/room.names';
+const RoomsIllustration = () =>
+  import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/RoomsIllustration');
 
-  export default {
-    props: {
-      isTeacher: {
-        type: Boolean,
-        default: false,
-      },
+export default {
+  props: {
+    isTeacher: {
+      type: Boolean,
+      default: false,
     },
-    components: {RoomsIllustration},
+  },
+  components: { RoomsIllustration },
 
-    data() {
-      return {
-        newRoomRoute: NEW_ROOM_PAGE,
-      };
-    },
-  };
+  data() {
+    return {
+      newRoomRoute: NEW_ROOM_PAGE,
+    };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .rooms-onboarding {
-    @include onboarding-page;
+.rooms-onboarding {
+  @include onboarding-page;
 
-    &__heading {
-      margin-bottom: $large-spacing;
-    }
-
-    &__illustration {
-      @include onboarding-illustration;
-    }
-
-    &__text {
-      @include onboarding-text;
-    }
+  &__heading {
+    margin-bottom: $large-spacing;
   }
+
+  &__illustration {
+    @include onboarding-illustration;
+  }
+
+  &__text {
+    @include onboarding-text;
+  }
+}
 </style>
diff --git a/client/src/components/rooms/room-entries/EditRoomEntryWizard.vue b/client/src/components/rooms/room-entries/EditRoomEntryWizard.vue
index 138010f7..74cb1f3e 100644
--- a/client/src/components/rooms/room-entries/EditRoomEntryWizard.vue
+++ b/client/src/components/rooms/room-entries/EditRoomEntryWizard.vue
@@ -10,54 +10,56 @@
 </template>
 
 <script>
-  import UPDATE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/updateRoomEntry.gql';
-  import ROOM_ENTRY_QUERY from '@/graphql/gql/queries/roomEntryByIdQuery.gql';
+import UPDATE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/updateRoomEntry.gql';
+import ROOM_ENTRY_QUERY from '@/graphql/gql/queries/roomEntryByIdQuery.gql';
 
-  import ContentsForm from '@/components/content-block-form/ContentsForm';
+import ContentsForm from '@/components/content-block-form/ContentsForm';
 
-  export default {
-    components: {
-      ContentsForm
-    },
+export default {
+  components: {
+    ContentsForm,
+  },
 
-    data() {
+  data() {
+    return {
+      entry: {},
+    };
+  },
+
+  apollo: {
+    entry() {
       return {
-        entry: {}
+        query: ROOM_ENTRY_QUERY,
+        variables: {
+          id: this.$store.state.currentRoomEntry,
+        },
+        update(data) {
+          return data.roomEntry;
+        },
       };
     },
+  },
 
-    apollo: {
-      entry() {
-        return {
-          query: ROOM_ENTRY_QUERY,
-          variables: {
-            id: this.$store.state.currentRoomEntry
-          },
-          update(data) {
-            return data.roomEntry;
-          }
-        };
-      }
-    },
+  computed: {},
 
-    computed: {},
-
-    methods: {
-      saveEntry(entry) {
-        this.$apollo.mutate({
+  methods: {
+    saveEntry(entry) {
+      this.$apollo
+        .mutate({
           mutation: UPDATE_ROOM_ENTRY_MUTATION,
           variables: {
             input: {
-              roomEntry: entry
-            }
-          }
-        }).then(() => {
+              roomEntry: entry,
+            },
+          },
+        })
+        .then(() => {
           this.hideModal();
         });
-      },
-      hideModal() {
-        this.$store.dispatch('hideModal');
-      },
-    }
-  };
+    },
+    hideModal() {
+      this.$store.dispatch('hideModal');
+    },
+  },
+};
 </script>
diff --git a/client/src/components/school-class/ClassSelectionWidget.vue b/client/src/components/school-class/ClassSelectionWidget.vue
index 0bdb539d..1df8a46c 100644
--- a/client/src/components/school-class/ClassSelectionWidget.vue
+++ b/client/src/components/school-class/ClassSelectionWidget.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="class-selection"
-    v-if="currentClassSelection"
-  >
+  <div class="class-selection" v-if="currentClassSelection">
     <div
       data-cy="class-selection"
       class="class-selection__selected-class selected-class"
@@ -11,12 +8,7 @@
       <current-class class="selected-class__text" />
       <chevron-down class="selected-class__dropdown-icon" />
     </div>
-    <widget-popover
-      :mobile="mobile"
-      class="class-selection__popover"
-      v-if="showPopover"
-      @hide-me="showPopover = false"
-    >
+    <widget-popover :mobile="mobile" class="class-selection__popover" v-if="showPopover" @hide-me="showPopover = false">
       <li
         :label="schoolClass.name"
         :item="schoolClass"
@@ -34,120 +26,105 @@
         v-if="me.isTeacher && !me.readOnly"
         @click="closeSidebar"
       >
-        <router-link
-          :to="{name: 'create-class'}"
-          tag="span"
-          class="popover-links__link-with-icon"
-        >
+        <router-link :to="{ name: 'create-class' }" tag="span" class="popover-links__link-with-icon">
           <add-icon class="popover-links__icon" />
           <span>Klasse erfassen</span>
         </router-link>
       </li>
-      <li
-        class="popover-links__link popover-links__link--large popover-links__divider"
-        @click="closeSidebar"
-      >
-        <router-link
-          :to="{name: 'old-classes'}"
-          tag="span"
-        >
-          Alte Klassen anzeigen
-        </router-link>
+      <li class="popover-links__link popover-links__link--large popover-links__divider" @click="closeSidebar">
+        <router-link :to="{ name: 'old-classes' }" tag="span"> Alte Klassen anzeigen </router-link>
       </li>
     </widget-popover>
   </div>
 </template>
 
 <script>
-  import WidgetPopover from '@/components/ui/WidgetPopover';
-  import CurrentClass from '@/components/school-class/CurrentClass';
+import WidgetPopover from '@/components/ui/WidgetPopover';
+import CurrentClass from '@/components/school-class/CurrentClass';
 
-  import updateSelectedClassMixin from '@/mixins/update-selected-class';
-  import sidebarMixin from '@/mixins/sidebar';
-  import meMixin from '@/mixins/me';
-  const ChevronDown = () => import(/* webpackChunkName: "icons" */'@/components/icons/ChevronDown');
-  const AddIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/AddIcon');
+import updateSelectedClassMixin from '@/mixins/update-selected-class';
+import sidebarMixin from '@/mixins/sidebar';
+import meMixin from '@/mixins/me';
+const ChevronDown = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ChevronDown');
+const AddIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/AddIcon');
 
-  export default {
-
-    props: {
-      mobile: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  props: {
+    mobile: {
+      type: Boolean,
+      default: false,
     },
+  },
 
-    mixins: [updateSelectedClassMixin, sidebarMixin, meMixin],
-    components: {
-      WidgetPopover,
-      ChevronDown,
-      CurrentClass,
-      AddIcon
+  mixins: [updateSelectedClassMixin, sidebarMixin, meMixin],
+  components: {
+    WidgetPopover,
+    ChevronDown,
+    CurrentClass,
+    AddIcon,
+  },
+
+  data() {
+    return {
+      showPopover: false,
+    };
+  },
+
+  computed: {
+    currentClassSelection() {
+      let currentClass = this.me.schoolClasses.find((schoolClass) => {
+        return schoolClass.id === this.me.selectedClass.id;
+      });
+      return currentClass || this.me.schoolClasses[0];
     },
+  },
 
-    data() {
-      return {
-        showPopover: false
-      };
+  methods: {
+    updateSelectedClassAndHidePopover(selectedClass) {
+      this.updateSelectedClass(selectedClass);
+      this.showPopover = false;
+      this.closeSidebar('profile');
     },
-
-    computed: {
-      currentClassSelection() {
-        let currentClass = this.me.schoolClasses.find(schoolClass => {
-          return schoolClass.id === this.me.selectedClass.id;
-        });
-        return currentClass || this.me.schoolClasses[0];
-      }
-    },
-
-    methods: {
-      updateSelectedClassAndHidePopover(selectedClass) {
-        this.updateSelectedClass(selectedClass);
-        this.showPopover = false;
-        this.closeSidebar('profile');
-      }
-    },
-
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .class-selection {
-    position: relative;
-    cursor: pointer;
-    margin-bottom: $medium-spacing;
-    border-radius: 4px;
+.class-selection {
+  position: relative;
+  cursor: pointer;
+  margin-bottom: $medium-spacing;
+  border-radius: 4px;
 
-    &__popover {
-      white-space: nowrap;
-      top: 100%;
-      left: 0;
-      transform: translateY($small-spacing);
-    }
+  &__popover {
+    white-space: nowrap;
+    top: 100%;
+    left: 0;
+    transform: translateY($small-spacing);
+  }
+}
 
+.selected-class {
+  width: 100%;
+  box-sizing: border-box;
+  padding: $small-spacing 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  &__text {
+    line-height: $large-spacing;
+    @include heading-4;
+    margin-right: $small-spacing;
   }
 
-  .selected-class {
-    width: 100%;
-    box-sizing: border-box;
-    padding: $small-spacing 0;
-
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-
-    &__text {
-      line-height: $large-spacing;
-      @include heading-4;
-      margin-right: $small-spacing;
-    }
-
-    &__dropdown-icon {
-      width: 20px;
-      height: 20px;
-      fill: $color-charcoal-dark;
-    }
+  &__dropdown-icon {
+    width: 20px;
+    height: 20px;
+    fill: $color-charcoal-dark;
   }
+}
 </style>
diff --git a/client/src/components/school-class/CurrentClass.vue b/client/src/components/school-class/CurrentClass.vue
index 80934aa4..f597a993 100644
--- a/client/src/components/school-class/CurrentClass.vue
+++ b/client/src/components/school-class/CurrentClass.vue
@@ -1,27 +1,24 @@
 <template>
-  <span
-    class="current-class"
-    data-cy="current-class-name"
-  >{{ currentClassName }}</span>
+  <span class="current-class" data-cy="current-class-name">{{ currentClassName }}</span>
 </template>
 
 <script>
-  import me from '@/mixins/me';
+import me from '@/mixins/me';
 
-  export default {
-    mixins: [me],
-  };
+export default {
+  mixins: [me],
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
-  .current-class {
-    display: flex;
-    flex-direction: column;
-    align-self: center;
-    line-height: 1;
-    @include regular-text;
-  }
+.current-class {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  line-height: 1;
+  @include regular-text;
+}
 </style>
diff --git a/client/src/components/school-class/EditClassNameWizard.vue b/client/src/components/school-class/EditClassNameWizard.vue
index e9049407..a00c8efe 100644
--- a/client/src/components/school-class/EditClassNameWizard.vue
+++ b/client/src/components/school-class/EditClassNameWizard.vue
@@ -1,72 +1,75 @@
 <template>
-  <edit-name-wizard
-    :name="name"
-    type="Klasse"
-    @input="name = $event"
-    @cancel="hideModal"
-    @save="save"
-  />
+  <edit-name-wizard :name="name" type="Klasse" @input="name = $event" @cancel="hideModal" @save="save" />
 </template>
 
 <script>
-  import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass.gql';
-  import UPDATE_SCHOOL_CLASS_MUTATION from '@/graphql/gql/mutations/updateSchoolClass.gql';
-  import EditNameWizard from '@/components/profile/EditNameWizard';
+import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass.gql';
+import UPDATE_SCHOOL_CLASS_MUTATION from '@/graphql/gql/mutations/updateSchoolClass.gql';
+import EditNameWizard from '@/components/profile/EditNameWizard';
 
-  export default {
-    components: {
-      EditNameWizard,
-    },
+export default {
+  components: {
+    EditNameWizard,
+  },
 
-    data() {
-      return {
-        name: ''
-      };
-    },
+  data() {
+    return {
+      name: '',
+    };
+  },
 
-    mounted() {
-      this.name = this.schoolClass ? this.schoolClass.name : '';
-    },
+  mounted() {
+    this.name = this.schoolClass ? this.schoolClass.name : '';
+  },
 
-    methods: {
-      save() {
-        this.$apollo.mutate({
-          mutation: UPDATE_SCHOOL_CLASS_MUTATION,
-          variables: {
-            input: {
-              name: this.name,
-              id: this.schoolClass.id
-            }
+  methods: {
+    save() {
+      this.$apollo.mutate({
+        mutation: UPDATE_SCHOOL_CLASS_MUTATION,
+        variables: {
+          input: {
+            name: this.name,
+            id: this.schoolClass.id,
           },
-          update(store, {data: {updateSchoolClass: {schoolClass: {name}}}}) {
-            const query = MY_SCHOOL_CLASS_QUERY;
-            const {me} = store.readQuery({query});
-            const data = {
-              me: {
-                ...me,
-                selectedClass: {
-                  ...me.selectedClass,
-                  name
-                }
-              }
-            };
-            store.writeQuery({query, data});
+        },
+        update(
+          store,
+          {
+            data: {
+              updateSchoolClass: {
+                schoolClass: { name },
+              },
+            },
           }
-        });
-        this.hideModal();
-      },
-      hideModal() {
-        this.$store.dispatch('hideModal');
-      }
+        ) {
+          const query = MY_SCHOOL_CLASS_QUERY;
+          const { me } = store.readQuery({ query });
+          const data = {
+            me: {
+              ...me,
+              selectedClass: {
+                ...me.selectedClass,
+                name,
+              },
+            },
+          };
+          store.writeQuery({ query, data });
+        },
+      });
+      this.hideModal();
     },
+    hideModal() {
+      this.$store.dispatch('hideModal');
+    },
+  },
 
-    apollo: {
-      schoolClass: {
-        query: MY_SCHOOL_CLASS_QUERY,
-        update({me: {selectedClass}}) {
-          return selectedClass;
-        }
-      }
+  apollo: {
+    schoolClass: {
+      query: MY_SCHOOL_CLASS_QUERY,
+      update({ me: { selectedClass } }) {
+        return selectedClass;
+      },
     },
-  };
+  },
+};
 </script>
diff --git a/client/src/components/snapshots/EditSnapshotTitleWizard.vue b/client/src/components/snapshots/EditSnapshotTitleWizard.vue
index 03eb6034..85b150ef 100644
--- a/client/src/components/snapshots/EditSnapshotTitleWizard.vue
+++ b/client/src/components/snapshots/EditSnapshotTitleWizard.vue
@@ -10,37 +10,34 @@
 </template>
 
 <script>
-  import EditNameWizard from '@/components/profile/EditNameWizard';
+import EditNameWizard from '@/components/profile/EditNameWizard';
 
-  export default {
-    components: {
-      EditNameWizard,
+export default {
+  components: {
+    EditNameWizard,
+  },
+
+  data() {
+    return {
+      name: '',
+    };
+  },
+
+  mounted() {
+    this.name = this.$modal.state.payload.name;
+  },
+
+  methods: {
+    save() {
+      this.$modal.confirm(this.name);
     },
-
-    data() {
-      return {
-        name: ''
-      };
+    hideModal() {
+      this.$modal.cancel();
     },
-
-    mounted() {
-      this.name = this.$modal.state.payload.name;
-    },
-
-    methods: {
-      save() {
-        this.$modal.confirm(this.name);
-      },
-      hideModal() {
-        this.$modal.cancel();
-      }
-    }
-
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
-
-
+@import '~styles/helpers';
 </style>
diff --git a/client/src/components/toggle-menu/ToggleEditing.vue b/client/src/components/toggle-menu/ToggleEditing.vue
index 03af29d9..d901f062 100644
--- a/client/src/components/toggle-menu/ToggleEditing.vue
+++ b/client/src/components/toggle-menu/ToggleEditing.vue
@@ -8,57 +8,55 @@
 </template>
 
 <script>
-  import Toggle from '@/components/ui/Toggle';
-  // import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
-  import { gql } from '@apollo/client/core';
-  import { setModuleEditMode } from '@/graphql/cache-operations';
+import Toggle from '@/components/ui/Toggle';
+// import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
+import { gql } from '@apollo/client/core';
+import { setModuleEditMode } from '@/graphql/cache-operations';
 
-  const QUERY = gql`
-          query ModuleEditModeQuery ($slug: String) {
-              module(slug: $slug) {
-                inEditMode @client
-                slug
-              }
-          }
-          `;
+const QUERY = gql`
+  query ModuleEditModeQuery($slug: String) {
+    module(slug: $slug) {
+      inEditMode @client
+      slug
+    }
+  }
+`;
 
-  export default {
-    components: {
-      Toggle
+export default {
+  components: {
+    Toggle,
+  },
+
+  data: () => ({
+    module: {
+      inEditMode: false,
     },
+  }),
 
-    data: () => ({
-      module: {
-        inEditMode: false
-      }
-    }),
-
-    computed: {
-      checked() {
-        return false;
-      },
-      slug() {
-        return this.$route.params.slug;
-      }
+  computed: {
+    checked() {
+      return false;
     },
-
-
-
-    apollo: {
-      module() {
-        return {
-          query: QUERY,
-          variables: {
-            slug: this.slug
-          }
-        };
-      }
+    slug() {
+      return this.$route.params.slug;
     },
+  },
 
-    methods: {
-      toggle(newChecked){
-        setModuleEditMode(this.slug, newChecked);
-      }
+  apollo: {
+    module() {
+      return {
+        query: QUERY,
+        variables: {
+          slug: this.slug,
+        },
+      };
     },
-  };
+  },
+
+  methods: {
+    toggle(newChecked) {
+      setModuleEditMode(this.slug, newChecked);
+    },
+  },
+};
 </script>
diff --git a/client/src/components/toggle-menu/ToggleSolutionsForModule.vue b/client/src/components/toggle-menu/ToggleSolutionsForModule.vue
index c009ce33..a4b1e693 100644
--- a/client/src/components/toggle-menu/ToggleSolutionsForModule.vue
+++ b/client/src/components/toggle-menu/ToggleSolutionsForModule.vue
@@ -8,69 +8,76 @@
 </template>
 
 <script>
-  import Checkbox from '@/components/ui/Checkbox';
-  import UPDATE_SOLUTION_VISIBILITY_MUTATION from '@/graphql/gql/mutations/updateSolutionVisibility.gql';
-  import MODULE_FRAGMENT from '@/graphql/gql/fragments/moduleParts.gql';
+import Checkbox from '@/components/ui/Checkbox';
+import UPDATE_SOLUTION_VISIBILITY_MUTATION from '@/graphql/gql/mutations/updateSolutionVisibility.gql';
+import MODULE_FRAGMENT from '@/graphql/gql/fragments/moduleParts.gql';
 
-  import {meQuery, moduleQuery} from '@/graphql/queries';
+import { meQuery, moduleQuery } from '@/graphql/queries';
 
-  export default {
-    components: {
-      Checkbox,
+export default {
+  components: {
+    Checkbox,
+  },
+
+  apollo: {
+    me: meQuery,
+    module: moduleQuery,
+  },
+
+  data() {
+    return {
+      me: {
+        permissions: [],
+      },
+      module: {},
+    };
+  },
+
+  computed: {
+    canToggleSolutions() {
+      return this.me.permissions.includes('users.can_manage_school_class_content');
     },
-
-    apollo: {
-      me: meQuery,
-      module: moduleQuery,
+    slug() {
+      return this.$route.params.slug;
     },
+  },
 
-    data() {
-      return {
-        me: {
-          permissions: [],
+  methods: {
+    toggleSolutions(enabled) {
+      const slug = this.slug;
+      this.$apollo.mutate({
+        mutation: UPDATE_SOLUTION_VISIBILITY_MUTATION,
+        variables: {
+          input: {
+            slug,
+            enabled,
+          },
         },
-        module: {},
-      };
-    },
-
-    computed: {
-      canToggleSolutions() {
-        return this.me.permissions.includes('users.can_manage_school_class_content');
-      },
-      slug() {
-        return this.$route.params.slug;
-      },
-    },
-
-    methods: {
-      toggleSolutions(enabled) {
-        const slug = this.slug;
-        this.$apollo.mutate({
-          mutation: UPDATE_SOLUTION_VISIBILITY_MUTATION,
-          variables: {
-            input: {
-              slug,
-              enabled,
+        update(
+          store,
+          {
+            data: {
+              updateSolutionVisibility: { success, solutionsEnabled },
             },
-          },
-          update(store, {data: {updateSolutionVisibility: {success, solutionsEnabled}}}) {
-            if (success) {
-              // https://www.apollographql.com/docs/react/caching/cache-interaction/#obtaining-an-objects-cache-id
-              const id = store.identify({
-                __typename: 'ModuleNode',
-                slug
-              });
-              const fragment = MODULE_FRAGMENT;
-              const module = store.readFragment({fragment, id});
-              const data = {
-                solutionsEnabled,
-                ...module,
-              };
-              store.writeFragment({fragment, data, id});
-            }
-          },
-        });
-      },
+          }
+        ) {
+          if (success) {
+            // https://www.apollographql.com/docs/react/caching/cache-interaction/#obtaining-an-objects-cache-id
+            const id = store.identify({
+              __typename: 'ModuleNode',
+              slug,
+            });
+            const fragment = MODULE_FRAGMENT;
+            const module = store.readFragment({ fragment, id });
+            const data = {
+              solutionsEnabled,
+              ...module,
+            };
+            store.writeFragment({ fragment, data, id });
+          }
+        },
+      });
     },
-  };
+  },
+};
 </script>
diff --git a/client/src/components/ui/BaseInput.vue b/client/src/components/ui/BaseInput.vue
index fdd75fc8..abf9b384 100644
--- a/client/src/components/ui/BaseInput.vue
+++ b/client/src/components/ui/BaseInput.vue
@@ -6,46 +6,39 @@
       class="base-input-container__input"
       data-cy="base-input-input"
       @change.prevent="$emit('input', $event.target.checked, item)"
-    >
+    />
     <span
-      :class="{'base-input-container__checkbox': type==='checkbox', 'base-input-container__radiobutton': type === 'radiobutton'}"
+      :class="{
+        'base-input-container__checkbox': type === 'checkbox',
+        'base-input-container__radiobutton': type === 'radiobutton',
+      }"
       class="base-input-container__icon checkbox"
     >
       <tick v-if="type === 'checkbox'" />
-      <circle-icon
-        data-cy="circle-icon"
-        v-if="type === 'radiobutton'"
-      />
+      <circle-icon data-cy="circle-icon" v-if="type === 'radiobutton'" />
     </span>
-    <span
-      class="base-input-container__label"
-      data-cy="base-input-label"
-      v-if="label"
-    >{{ label }}</span>
-    <slot
-      class="base-input-container__label"
-      v-if="!label"
-    />
+    <span class="base-input-container__label" data-cy="base-input-label" v-if="label">{{ label }}</span>
+    <slot class="base-input-container__label" v-if="!label" />
   </label>
 </template>
 
 <script>
-  const Tick = () => import(/* webpackChunkName: "icons" */'@/components/icons/Tick');
-  const CircleIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/CircleIcon');
+const Tick = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Tick');
+const CircleIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CircleIcon');
 
-  export default {
-    props: {
-      label: String,
-      checked: {
-        type: Boolean
-      },
-      item: Object,
-      type: String
+export default {
+  props: {
+    label: String,
+    checked: {
+      type: Boolean,
     },
+    item: Object,
+    type: String,
+  },
 
-    components: {
-      Tick,
-      CircleIcon
-    }
-  };
+  components: {
+    Tick,
+    CircleIcon,
+  },
+};
 </script>
diff --git a/client/src/components/ui/ButtonWithIconAndText.vue b/client/src/components/ui/ButtonWithIconAndText.vue
index 25e21aac..ee94dd6c 100644
--- a/client/src/components/ui/ButtonWithIconAndText.vue
+++ b/client/src/components/ui/ButtonWithIconAndText.vue
@@ -1,77 +1,74 @@
 <template>
   <button
-    :class="['button', 'button-with-icon-and-text', {'button-with-icon-and-text--large': large}]"
+    :class="['button', 'button-with-icon-and-text', { 'button-with-icon-and-text--large': large }]"
     :disabled="disabled"
     @click="$emit('click')"
   >
-    <component
-      class="button-with-icon-and-text__icon"
-      :is="icon"
-    />
+    <component class="button-with-icon-and-text__icon" :is="icon" />
     <span class="button-with-icon-and-text__text">{{ text }}</span>
   </button>
 </template>
 
 <script>
-  import formElementIcons from '@/components/ui/form-element-icons';
+import formElementIcons from '@/components/ui/form-element-icons';
 
-  export default {
-    props: {
-      icon: {
-        type: String,
-        default: ''
-      },
-      text: {
-        type: String,
-        default: ''
-      },
-      large: {
-        type: Boolean,
-        default: false
-      },
-      disabled: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  props: {
+    icon: {
+      type: String,
+      default: '',
     },
+    text: {
+      type: String,
+      default: '',
+    },
+    large: {
+      type: Boolean,
+      default: false,
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
-    components: {
-      ...formElementIcons
-    }
-  };
+  components: {
+    ...formElementIcons,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .button-with-icon-and-text {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    border: 0;
-    width: 100%;
+.button-with-icon-and-text {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  border: 0;
+  width: 100%;
 
-    &:disabled {
-      background-color: transparent;
-      opacity: 0.5;
-    }
+  &:disabled {
+    background-color: transparent;
+    opacity: 0.5;
+  }
 
-    &__icon {
-      width: 24px;
-      height: 24px;
-      margin-right: $small-spacing;
-    }
+  &__icon {
+    width: 24px;
+    height: 24px;
+    margin-right: $small-spacing;
+  }
 
-    &__text {
-      @include small-text;
-    }
+  &__text {
+    @include small-text;
+  }
 
-    $p: &;
+  $p: &;
 
-    &--large {
-     #{$p}__text {
-       @include large-link;
-     }
+  &--large {
+    #{$p}__text {
+      @include large-link;
     }
   }
+}
 </style>
diff --git a/client/src/components/ui/Checkbox.vue b/client/src/components/ui/Checkbox.vue
index 19635f0d..7ef4fc87 100644
--- a/client/src/components/ui/Checkbox.vue
+++ b/client/src/components/ui/Checkbox.vue
@@ -1,35 +1,29 @@
 <template>
-  <base-input
-    :label="label"
-    :checked="checked"
-    :item="item"
-    :type="'checkbox'"
-    @input="passOn"
-  >
+  <base-input :label="label" :checked="checked" :item="item" :type="'checkbox'" @input="passOn">
     <slot />
   </base-input>
 </template>
 
 <script>
-  import BaseInput from '@/components/ui/BaseInput';
+import BaseInput from '@/components/ui/BaseInput';
 
-  export default {
-    props: {
-      label: String,
-      checked: {
-        type: Boolean
-      },
-      item: Object
+export default {
+  props: {
+    label: String,
+    checked: {
+      type: Boolean,
     },
+    item: Object,
+  },
 
-    components: {
-      BaseInput
+  components: {
+    BaseInput,
+  },
+
+  methods: {
+    passOn() {
+      this.$emit('input', ...arguments);
     },
-
-    methods: {
-      passOn() {
-        this.$emit('input', ...arguments);
-      }
-    }
-  };
+  },
+};
 </script>
diff --git a/client/src/components/ui/EmojiBar.vue b/client/src/components/ui/EmojiBar.vue
index b700918f..7c69e1bb 100644
--- a/client/src/components/ui/EmojiBar.vue
+++ b/client/src/components/ui/EmojiBar.vue
@@ -6,37 +6,36 @@
       v-for="(emoji, index) in emojis"
       :key="index"
       @click="$emit('add-emoji', emoji)"
-    >{{ emoji }}</a>
+      >{{ emoji }}</a
+    >
   </div>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        emojis: ['🖐️', '👍', '👎', '👏', '👋', '🎉', '😍', '😮', '🤔'],
-      };
-    },
-  };
+export default {
+  data() {
+    return {
+      emojis: ['🖐️', '👍', '👎', '👏', '👋', '🎉', '😍', '😮', '🤔'],
+    };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .emoji-bar {
-    display: flex;
-    border-bottom: 1px solid $color-silver;
-    padding: $small-spacing $medium-spacing;
-    margin: (-$medium-spacing);
-    margin-bottom: $medium-spacing;
-
-    &__emoji {
-      font-size: toRem(32px);
-      margin-right: $medium-spacing;
-      display: inline-flex;
-      cursor: pointer;
-    }
+.emoji-bar {
+  display: flex;
+  border-bottom: 1px solid $color-silver;
+  padding: $small-spacing $medium-spacing;
+  margin: (-$medium-spacing);
+  margin-bottom: $medium-spacing;
 
+  &__emoji {
+    font-size: toRem(32px);
+    margin-right: $medium-spacing;
+    display: inline-flex;
+    cursor: pointer;
   }
-
+}
 </style>
diff --git a/client/src/components/ui/InputWithLabel.vue b/client/src/components/ui/InputWithLabel.vue
index 558dc957..49db5a15 100644
--- a/client/src/components/ui/InputWithLabel.vue
+++ b/client/src/components/ui/InputWithLabel.vue
@@ -7,38 +7,38 @@
       data-cy="input-with-label-input"
       class="skillbox-input"
       @input="$emit('input', $event.target.value)"
-    >
+    />
   </div>
 </template>
 
 <script>
- export default {
-   props: {
-     value: {
-       type: String,
-       default: ''
-     },
-     label: {
-       type: String,
-       default: ''
-     },
-     placeholder: {
-       type: String,
-       default: ''
-     }
-   }
- };
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '',
+    },
+    label: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-    @import '~styles/helpers';
+@import '~styles/helpers';
 
-    .input-with-label {
-      display: flex;
-      flex-direction: column;
-      &__label {
-        @include regular-text;
-        margin-bottom: $small-spacing;
-      }
-    }
+.input-with-label {
+  display: flex;
+  flex-direction: column;
+  &__label {
+    @include regular-text;
+    margin-bottom: $small-spacing;
+  }
+}
 </style>
diff --git a/client/src/components/ui/PopoverLink.vue b/client/src/components/ui/PopoverLink.vue
index 931e801c..c1a290ac 100644
--- a/client/src/components/ui/PopoverLink.vue
+++ b/client/src/components/ui/PopoverLink.vue
@@ -1,64 +1,56 @@
 <template>
-  <li
-    class="popover-links__link"
-  >
-    <a
-      class="popover-link"
-      @click="$emit('link-action')"
-    >
-      <component
-        class="popover-link__icon"
-        :is="icon"
-      />
+  <li class="popover-links__link">
+    <a class="popover-link" @click="$emit('link-action')">
+      <component class="popover-link__icon" :is="icon" />
       <span class="popover-link__text">{{ text }}</span>
     </a>
   </li>
 </template>
 
 <script>
-  const EyeIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon');
-  const TrashIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon');
-  const PenIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/PenIcon');
+const EyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon');
+const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
+const PenIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/PenIcon');
 
-  export default {
-    props: {
-      icon: {
-        type: String,
-        default: '',
-      },
-      text: {
-        type: String,
-        default: '',
-      },
+export default {
+  props: {
+    icon: {
+      type: String,
+      default: '',
     },
-    components: {
-      EyeIcon,
-      TrashIcon,
-      PenIcon,
+    text: {
+      type: String,
+      default: '',
     },
-  };
+  },
+  components: {
+    EyeIcon,
+    TrashIcon,
+    PenIcon,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .popover-link {
-    @include popover-link;
+.popover-link {
+  @include popover-link;
 
-    &__icon {
-      width: 30px;
-      fill: $color-charcoal-dark;
-      margin-right: 15px;
-      display: flex;
-      flex-basis: auto;
-      flex-shrink: 0;
-    }
-
-    &__text {
-      width: auto;
-      display: flex;
-      flex-basis: auto;
-      flex-shrink: 0;
-    }
+  &__icon {
+    width: 30px;
+    fill: $color-charcoal-dark;
+    margin-right: 15px;
+    display: flex;
+    flex-basis: auto;
+    flex-shrink: 0;
   }
+
+  &__text {
+    width: auto;
+    display: flex;
+    flex-basis: auto;
+    flex-shrink: 0;
+  }
+}
 </style>
diff --git a/client/src/components/ui/Toggle.vue b/client/src/components/ui/Toggle.vue
index ce99d1e1..f1288536 100644
--- a/client/src/components/ui/Toggle.vue
+++ b/client/src/components/ui/Toggle.vue
@@ -1,8 +1,5 @@
 <template>
-  <label
-    :for="id"
-    :class="['toggle', {'toggle--bordered': bordered}]"
-  >
+  <label :for="id" :class="['toggle', { 'toggle--bordered': bordered }]">
     <input
       :checked="checked"
       class="toggle__input"
@@ -10,94 +7,91 @@
       type="checkbox"
       :id="id"
       @change.prevent="$emit('input', $event.target.checked)"
-    >
+    />
     <span class="toggle__toggle-wrapper">
       <span class="toggle__toggle" />
     </span>
-    <span
-      class="toggle__label"
-      data-cy="toggle-label"
-    >{{ label }}</span>
+    <span class="toggle__label" data-cy="toggle-label">{{ label }}</span>
   </label>
 </template>
 
 <script>
-  export default {
-    props: {
-      label: {
-        type: String,
-        default: '',
-      },
-      checked: {
-        type: Boolean,
-        default: false,
-      },
-      bordered: {
-        type: Boolean,
-        default: true
-      }
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
     },
+    checked: {
+      type: Boolean,
+      default: false,
+    },
+    bordered: {
+      type: Boolean,
+      default: true,
+    },
+  },
 
-    data() {
-      return {
-        id: null,
-      };
-    },
-    mounted() {
-      this.id = this._uid;
-    },
-  };
+  data() {
+    return {
+      id: null,
+    };
+  },
+  mounted() {
+    this.id = this._uid;
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .toggle {
-    display: flex;
-    cursor: pointer;
+.toggle {
+  display: flex;
+  cursor: pointer;
 
-    &--bordered {
-      @include default-box-shadow;
-      border-radius: $round-border-radius;
-      border: 1px solid $color-silver;
-      padding: $small-spacing $medium-spacing;
-    }
-
-    &__toggle-wrapper {
-      background-color: $color-silver;
-      width: 42px;
-      height: 24px;
-      border-radius: $round-border-radius;
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-      padding: 0 6px;
-      margin-right: $small-spacing;
-    }
-
-    &__input {
-      display: none;
-    }
-
-    &__input:checked + &__toggle-wrapper {
-      background-color: $color-brand;
-    }
-
-    &__input:checked + &__toggle-wrapper &__toggle {
-      margin-left: 14px;
-    }
-
-    &__toggle {
-      width: 16px;
-      height: 16px;
-      border-radius: $round-border-radius;
-      background-color: $color-white;
-      margin-left: 0;
-      transition: margin-left 0.5s;
-    }
-
-    &__label {
-      @include regular-text;
-    }
+  &--bordered {
+    @include default-box-shadow;
+    border-radius: $round-border-radius;
+    border: 1px solid $color-silver;
+    padding: $small-spacing $medium-spacing;
   }
+
+  &__toggle-wrapper {
+    background-color: $color-silver;
+    width: 42px;
+    height: 24px;
+    border-radius: $round-border-radius;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 0 6px;
+    margin-right: $small-spacing;
+  }
+
+  &__input {
+    display: none;
+  }
+
+  &__input:checked + &__toggle-wrapper {
+    background-color: $color-brand;
+  }
+
+  &__input:checked + &__toggle-wrapper &__toggle {
+    margin-left: 14px;
+  }
+
+  &__toggle {
+    width: 16px;
+    height: 16px;
+    border-radius: $round-border-radius;
+    background-color: $color-white;
+    margin-left: 0;
+    transition: margin-left 0.5s;
+  }
+
+  &__label {
+    @include regular-text;
+  }
+}
 </style>
diff --git a/client/src/components/ui/WidgetFooter.vue b/client/src/components/ui/WidgetFooter.vue
index 1b011ff4..f9cb3be8 100644
--- a/client/src/components/ui/WidgetFooter.vue
+++ b/client/src/components/ui/WidgetFooter.vue
@@ -5,26 +5,26 @@
 </template>
 
 <style scoped lang="scss">
-  @import "~styles/_helpers";
+@import '~styles/_helpers';
 
-  .widget-footer {
-    background-color: $color-grey--lighter;
-    display: flex;
-    flex-direction: row-reverse;
-    align-items: center;
-    position: relative;
-    border-bottom-left-radius: $default-border-radius;
-    border-bottom-right-radius: $default-border-radius;
-    visibility: hidden;
-    padding-inline: $small-spacing;
+.widget-footer {
+  background-color: $color-grey--lighter;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+  position: relative;
+  border-bottom-left-radius: $default-border-radius;
+  border-bottom-right-radius: $default-border-radius;
+  visibility: hidden;
+  padding-inline: $small-spacing;
 
-    @include desktop {
-      visibility: visible;
-    }
+  @include desktop {
+    visibility: visible;
+  }
 
-    /*
+  /*
      * For IE10+
      */
-    -ms-grid-row: 2;
-  }
+  -ms-grid-row: 2;
+}
 </style>
diff --git a/client/src/components/ui/WidgetPopover.vue b/client/src/components/ui/WidgetPopover.vue
index 6a81ca12..bb3e32fe 100644
--- a/client/src/components/ui/WidgetPopover.vue
+++ b/client/src/components/ui/WidgetPopover.vue
@@ -1,32 +1,28 @@
 <template>
-  <div
-    :class="{'widget-popover--mobile': mobile}"
-    class="widget-popover"
-    v-click-outside="hidePopover"
-  >
-    <ul :class="['widget-popover__links popover-links', {'popover-links--no-padding': noPadding}]">
+  <div :class="{ 'widget-popover--mobile': mobile }" class="widget-popover" v-click-outside="hidePopover">
+    <ul :class="['widget-popover__links popover-links', { 'popover-links--no-padding': noPadding }]">
       <slot />
     </ul>
   </div>
 </template>
 
 <script>
-  export default {
-    props: {
-      mobile: {
-        type: Boolean,
-        default: false
-      },
-      noPadding: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  props: {
+    mobile: {
+      type: Boolean,
+      default: false,
     },
+    noPadding: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
-    methods: {
-      hidePopover() {
-        this.$emit('hide-me');
-      },
-    }
-  };
+  methods: {
+    hidePopover() {
+      this.$emit('hide-me');
+    },
+  },
+};
 </script>
diff --git a/client/src/components/ui/file-upload/FileUpload.vue b/client/src/components/ui/file-upload/FileUpload.vue
index 46c11dd0..723780ed 100644
--- a/client/src/components/ui/file-upload/FileUpload.vue
+++ b/client/src/components/ui/file-upload/FileUpload.vue
@@ -1,11 +1,7 @@
 <template>
   <div class="file-upload">
     <template v-if="document">
-      <document-block
-        :value="{url: document}"
-        show-trash-icon
-        @trash="$emit('change-document-url', '')"
-      />
+      <document-block :value="{ url: document }" show-trash-icon @trash="$emit('change-document-url', '')" />
     </template>
     <template v-else>
       <simple-file-upload
@@ -18,25 +14,24 @@
 </template>
 
 <script>
-  const SimpleFileUpload = () => import('@/components/ui/file-upload/SimpleFileUpload.vue');
-  const DocumentBlock = () => import('@/components/content-blocks/DocumentBlock.vue');
+const SimpleFileUpload = () => import('@/components/ui/file-upload/SimpleFileUpload.vue');
+const DocumentBlock = () => import('@/components/content-blocks/DocumentBlock.vue');
 
-  export default {
-    props: {
-      document: {
-        type: String,
-        default: '',
-      },
-      withText: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  props: {
+    document: {
+      type: String,
+      default: '',
     },
-    components: {SimpleFileUpload, DocumentBlock},
-  };
+    withText: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: { SimpleFileUpload, DocumentBlock },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
-
+@import '~styles/helpers';
 </style>
diff --git a/client/src/components/ui/file-upload/SimpleFileUpload.vue b/client/src/components/ui/file-upload/SimpleFileUpload.vue
index 83f56074..5b676f43 100644
--- a/client/src/components/ui/file-upload/SimpleFileUpload.vue
+++ b/client/src/components/ui/file-upload/SimpleFileUpload.vue
@@ -1,71 +1,68 @@
 <template>
   <div class="simple-file-upload">
-    <component
-      :is="button"
-      @click.native="clickUploadCare"
-    />
+    <component :is="button" @click.native="clickUploadCare" />
     <simple-file-upload-hidden-input @link-change-url="$emit('link-change-url', $event)" />
   </div>
 </template>
 
 <script>
-  const SimpleFileUploadHiddenInput = () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput.vue');
-  const SimpleFileUploadIcon = () => import('@/components/ui/file-upload/SimpleFileUploadIcon.vue');
-  const SimpleFileUploadIconAndText = () => import('@/components/ui/file-upload/SimpleFileUploadIconAndText.vue');
-  const DocumentIcon = () => import('@/components/icons/DocumentIcon.vue');
+const SimpleFileUploadHiddenInput = () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput.vue');
+const SimpleFileUploadIcon = () => import('@/components/ui/file-upload/SimpleFileUploadIcon.vue');
+const SimpleFileUploadIconAndText = () => import('@/components/ui/file-upload/SimpleFileUploadIconAndText.vue');
+const DocumentIcon = () => import('@/components/icons/DocumentIcon.vue');
 
-  export default {
-    props: {
-      value: {
-        type: String,
-        default: ''
-      },
-      withText: {
-        type: Boolean,
-        default: false
-      }
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '',
     },
+    withText: {
+      type: Boolean,
+      default: false,
+    },
+  },
 
-    components: {
-      SimpleFileUploadHiddenInput,
-      DocumentIcon,
-      SimpleFileUploadIcon,
-      SimpleFileUploadIconAndText
-    },
+  components: {
+    SimpleFileUploadHiddenInput,
+    DocumentIcon,
+    SimpleFileUploadIcon,
+    SimpleFileUploadIconAndText,
+  },
 
-    computed: {
-      button() {
-        return this.withText ? 'simple-file-upload-icon-and-text' : 'simple-file-upload-icon';
-      }
+  computed: {
+    button() {
+      return this.withText ? 'simple-file-upload-icon-and-text' : 'simple-file-upload-icon';
     },
+  },
 
-    methods: {
-      clickUploadCare() {
-        // workaround for styling the uploadcare widget
-        let button = this.$el.querySelector('.uploadcare--widget__button');
-        button.click();
-      }
+  methods: {
+    clickUploadCare() {
+      // workaround for styling the uploadcare widget
+      let button = this.$el.querySelector('.uploadcare--widget__button');
+      button.click();
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/_helpers";
+@import '~styles/_helpers';
 
-  .simple-file-upload {
-    height: 25px;
+.simple-file-upload {
+  height: 25px;
+  overflow: hidden;
+  cursor: pointer;
+
+  &__link {
+    display: inline-block;
     overflow: hidden;
-    cursor: pointer;
-
-    &__link {
-      display: inline-block;
-      overflow: hidden;
-      width: 25px;
-      height: 25px;
-    }
+    width: 25px;
+    height: 25px;
   }
+}
 
-  :deep(.uploadcare--widget) {
-    display: none;
-  }
+:deep(.uploadcare--widget) {
+  display: none;
+}
 </style>
diff --git a/client/src/components/ui/file-upload/SimpleFileUploadHiddenInput.vue b/client/src/components/ui/file-upload/SimpleFileUploadHiddenInput.vue
index 612efa59..0e3885e9 100644
--- a/client/src/components/ui/file-upload/SimpleFileUploadHiddenInput.vue
+++ b/client/src/components/ui/file-upload/SimpleFileUploadHiddenInput.vue
@@ -6,23 +6,22 @@
     name="file-upload"
     data-system-dialog
     ref="uploadcare-filedialog"
-  >
+  />
 </template>
 
 <script>
-  import uploadcareWidget from 'uploadcare-widget';
+import uploadcareWidget from 'uploadcare-widget';
 
-  export default {
-    mounted() {
-      let widget = uploadcareWidget.Widget('[role=uploadcare-uploader]');
+export default {
+  mounted() {
+    let widget = uploadcareWidget.Widget('[role=uploadcare-uploader]');
 
-      widget.onChange(result => {
-        result.done(fileInfo => {
-          let urlWithFilename = fileInfo.cdnUrl + fileInfo.name;
-          this.$emit('link-change-url', urlWithFilename);
-        });
+    widget.onChange((result) => {
+      result.done((fileInfo) => {
+        let urlWithFilename = fileInfo.cdnUrl + fileInfo.name;
+        this.$emit('link-change-url', urlWithFilename);
       });
-    },
-
-  };
+    });
+  },
+};
 </script>
diff --git a/client/src/components/ui/file-upload/SimpleFileUploadIcon.vue b/client/src/components/ui/file-upload/SimpleFileUploadIcon.vue
index e6b1d789..23369433 100644
--- a/client/src/components/ui/file-upload/SimpleFileUploadIcon.vue
+++ b/client/src/components/ui/file-upload/SimpleFileUploadIcon.vue
@@ -5,20 +5,20 @@
 </template>
 
 <script>
-  const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
+const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
 
-  export default {
-    components: {DocumentIcon},
-  };
+export default {
+  components: { DocumentIcon },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .simple-file-upload-icon {
-    &__icon {
-      width: 25px;
-      fill: $color-silver-dark;
-    }
+.simple-file-upload-icon {
+  &__icon {
+    width: 25px;
+    fill: $color-silver-dark;
   }
+}
 </style>
diff --git a/client/src/components/ui/file-upload/SimpleFileUploadIconAndText.vue b/client/src/components/ui/file-upload/SimpleFileUploadIconAndText.vue
index 7f43c1f9..ea75b227 100644
--- a/client/src/components/ui/file-upload/SimpleFileUploadIconAndText.vue
+++ b/client/src/components/ui/file-upload/SimpleFileUploadIconAndText.vue
@@ -1,13 +1,10 @@
 <template>
-  <button-with-icon-and-text
-    icon="document-icon"
-    text="Dokument hochladen"
-  />
+  <button-with-icon-and-text icon="document-icon" text="Dokument hochladen" />
 </template>
 
 <script>
-  import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
-  export default {
-    components: {ButtonWithIconAndText}
-  };
+import ButtonWithIconAndText from '@/components/ui/ButtonWithIconAndText';
+export default {
+  components: { ButtonWithIconAndText },
+};
 </script>
diff --git a/client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue b/client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue
index 58745d17..86ea2acc 100644
--- a/client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue
+++ b/client/src/components/ui/file-upload/SimpleFileUploadWithIcon.vue
@@ -12,49 +12,49 @@
 </template>
 
 <script>
-  const SimpleFileUploadHiddenInput = () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput.vue');
-  const ButtonWithIconAndText = () => import('@/components/ui/ButtonWithIconAndText.vue');
+const SimpleFileUploadHiddenInput = () => import('@/components/ui/file-upload/SimpleFileUploadHiddenInput.vue');
+const ButtonWithIconAndText = () => import('@/components/ui/ButtonWithIconAndText.vue');
 
-  export default {
-    props: ['value'],
+export default {
+  props: ['value'],
 
-    components: {
-      ButtonWithIconAndText,
-      SimpleFileUploadHiddenInput,
+  components: {
+    ButtonWithIconAndText,
+    SimpleFileUploadHiddenInput,
+  },
+
+  methods: {
+    clickUploadCare() {
+      // workaround for styling the uploadcare widget
+      let button = this.$el.querySelector('.uploadcare--widget__button');
+      button.click();
     },
-
-    methods: {
-      clickUploadCare() {
-        // workaround for styling the uploadcare widget
-        let button = this.$el.querySelector('.uploadcare--widget__button');
-        button.click();
-      },
-    },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/_helpers";
+@import '~styles/_helpers';
 
-  .simple-file-upload {
+.simple-file-upload {
+  width: 25px;
+  height: 25px;
+  overflow: hidden;
+
+  &__icon {
+    width: 25px;
+    fill: $color-silver-dark;
+  }
+
+  &__link {
+    display: inline-block;
+    overflow: hidden;
     width: 25px;
     height: 25px;
-    overflow: hidden;
-
-    &__icon {
-      width: 25px;
-      fill: $color-silver-dark;
-    }
-
-    &__link {
-      display: inline-block;
-      overflow: hidden;
-      width: 25px;
-      height: 25px;
-    }
   }
+}
 
-  :deep(.uploadcare--widget) {
-    display: none;
-  }
+:deep(.uploadcare--widget) {
+  display: none;
+}
 </style>
diff --git a/client/src/components/ui/form-element-icons.js b/client/src/components/ui/form-element-icons.js
index c14778a2..2ac03a10 100644
--- a/client/src/components/ui/form-element-icons.js
+++ b/client/src/components/ui/form-element-icons.js
@@ -1,18 +1,18 @@
-const LinkIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/LinkIcon');
-const VideoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/VideoIcon');
-const ImageIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/ImageIcon');
-const TextIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TextIcon');
-const SpeechBubbleIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/SpeechBubbleIcon');
-const DocumentIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentIcon');
-const TitleIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TitleIcon');
-const DocumentWithLinesIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/DocumentWithLinesIcon');
+const LinkIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/LinkIcon');
+const VideoIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/VideoIcon');
+const ImageIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ImageIcon');
+const TextIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TextIcon');
+const SpeechBubbleIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/SpeechBubbleIcon');
+const DocumentIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentIcon');
+const TitleIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TitleIcon');
+const DocumentWithLinesIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/DocumentWithLinesIcon');
 
-const ArrowThinBottom = () => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowThinBottom');
-const ArrowThinDown = () => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowThinDown');
-const ArrowThinTop = () => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowThinTop');
-const ArrowThinUp = () => import(/* webpackChunkName: "icons" */'@/components/icons/ArrowThinUp');
+const ArrowThinBottom = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinBottom');
+const ArrowThinDown = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinDown');
+const ArrowThinTop = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinTop');
+const ArrowThinUp = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ArrowThinUp');
 
-const TrashIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon');
+const TrashIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/TrashIcon');
 
 /*
   for icons with a single word, leave the *-icon name, to prevent conflicts
@@ -31,5 +31,5 @@ export default {
   ArrowThinDown,
   ArrowThinTop,
   ArrowThinUp,
-  TrashIcon
+  TrashIcon,
 };
diff --git a/client/src/components/validation/ValidatedInput.vue b/client/src/components/validation/ValidatedInput.vue
index b8fa8fbb..71908c15 100644
--- a/client/src/components/validation/ValidatedInput.vue
+++ b/client/src/components/validation/ValidatedInput.vue
@@ -1,14 +1,7 @@
 <template>
-  <ValidationProvider
-    v-slot="{errors}"
-    :name="name"
-    :rules="rules"
-  >
+  <ValidationProvider v-slot="{ errors }" :name="name" :rules="rules">
     <div class="skillboxform-input">
-      <label
-        :for="id"
-        class="skillboxform-input__label"
-      >{{ label }}</label>
+      <label :for="id" class="skillboxform-input__label">{{ label }}</label>
       <input
         :value="value"
         :class="{ 'skillboxform-input__input--error': errors.length }"
@@ -17,85 +10,76 @@
         autocomplete="off"
         :id="id"
         @input="$emit('input', $event.target.value)"
-      >
+      />
 
-      <small
-        :data-cy="localErrorsCy"
-        class="skillboxform-input__error"
-        v-if="errors.length"
-      >{{ errors[0] }}</small>
+      <small :data-cy="localErrorsCy" class="skillboxform-input__error" v-if="errors.length">{{ errors[0] }}</small>
 
-      <small
-        :data-cy="remoteErrorsCy"
-        class="skillboxform-input__error"
-        v-for="error in remoteErrors"
-        :key="error"
-      >{{ error }}</small>
+      <small :data-cy="remoteErrorsCy" class="skillboxform-input__error" v-for="error in remoteErrors" :key="error">{{
+        error
+      }}</small>
     </div>
   </ValidationProvider>
 </template>
 
 <script>
-  import {extend, localize, ValidationProvider} from 'vee-validate';
-  import de from 'vee-validate/dist/locale/de.json';
-  import {required} from 'vee-validate/dist/rules';
+import { extend, localize, ValidationProvider } from 'vee-validate';
+import de from 'vee-validate/dist/locale/de.json';
+import { required } from 'vee-validate/dist/rules';
 
-  extend('required', required);
+extend('required', required);
 
-  localize('de', {
-    ...de,
-    names: {
-      password: 'Passwort',
-      email: 'E-Mail',
-      coupon: 'Coupon-Code'
-    },
-  });
+localize('de', {
+  ...de,
+  names: {
+    password: 'Passwort',
+    email: 'E-Mail',
+    coupon: 'Coupon-Code',
+  },
+});
 
-  // todo: use this in beta-login, license-activation and PasswordChangeForm
-  export default {
-    props: {
-      value: {
-        type: String,
-        default: '',
-      },
-      remoteErrors: {
-        type: Array,
-        default: undefined,
-      },
-      name: {
-        type: String,
-        default: '',
-      },
-      label: {
-        type: String,
-        default: '',
-      },
-      rules: {
-        type: String,
-        default: 'required',
-      },
+// todo: use this in beta-login, license-activation and PasswordChangeForm
+export default {
+  props: {
+    value: {
+      type: String,
+      default: '',
     },
-    components: {
-      ValidationProvider,
+    remoteErrors: {
+      type: Array,
+      default: undefined,
     },
-    inheritAttrs: false,
-    computed: {
-      id() {
-        return this.$attrs.id || this._uid;
-      },
-      remoteErrorsCy() {
-        return `${this.name}-remote-errors`;
-      },
-      localErrorsCy() {
-        return `${this.name}-local-errors`;
-      },
+    name: {
+      type: String,
+      default: '',
     },
-    mounted() {
+    label: {
+      type: String,
+      default: '',
     },
-  };
+    rules: {
+      type: String,
+      default: 'required',
+    },
+  },
+  components: {
+    ValidationProvider,
+  },
+  inheritAttrs: false,
+  computed: {
+    id() {
+      return this.$attrs.id || this._uid;
+    },
+    remoteErrorsCy() {
+      return `${this.name}-remote-errors`;
+    },
+    localErrorsCy() {
+      return `${this.name}-local-errors`;
+    },
+  },
+  mounted() {},
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
-
+@import '~styles/helpers';
 </style>
diff --git a/client/src/components/videos/SrfEmbed.vue b/client/src/components/videos/SrfEmbed.vue
index 7fa38705..b8456618 100644
--- a/client/src/components/videos/SrfEmbed.vue
+++ b/client/src/components/videos/SrfEmbed.vue
@@ -8,22 +8,22 @@
 </template>
 
 <script>
-  import {getVideoId} from '@/helpers/video';
+import { getVideoId } from '@/helpers/video';
 
-  export default {
-    props: ['url'],
+export default {
+  props: ['url'],
 
-    computed: {
-      videoId() {
-        return getVideoId(this.url);
-      }
-    }
-  };
+  computed: {
+    videoId() {
+      return getVideoId(this.url);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  .srf-embed {
-    width: 100%;
-    height: 350px;
-  }
+.srf-embed {
+  width: 100%;
+  height: 350px;
+}
 </style>
diff --git a/client/src/components/videos/VimeoEmbed.vue b/client/src/components/videos/VimeoEmbed.vue
index 6c22e79a..2169f4a5 100644
--- a/client/src/components/videos/VimeoEmbed.vue
+++ b/client/src/components/videos/VimeoEmbed.vue
@@ -10,22 +10,22 @@
 </template>
 
 <script>
-  import {getVideoId} from '@/helpers/video';
+import { getVideoId } from '@/helpers/video';
 
-  export default {
-    props: ['url'],
+export default {
+  props: ['url'],
 
-    computed: {
-      videoId() {
-        return getVideoId(this.url);
-      }
-    }
-  };
+  computed: {
+    videoId() {
+      return getVideoId(this.url);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  .vimeo-embed {
-    width: 100%;
-    height: 350px;
-  }
+.vimeo-embed {
+  width: 100%;
+  height: 350px;
+}
 </style>
diff --git a/client/src/components/videos/YoutubeEmbed.vue b/client/src/components/videos/YoutubeEmbed.vue
index b146da64..e7ac1c5f 100644
--- a/client/src/components/videos/YoutubeEmbed.vue
+++ b/client/src/components/videos/YoutubeEmbed.vue
@@ -10,22 +10,22 @@
 </template>
 
 <script>
-  import {getVideoId} from '@/helpers/video';
+import { getVideoId } from '@/helpers/video';
 
-  export default {
-    props: ['url'],
+export default {
+  props: ['url'],
 
-    computed: {
-      videoId() {
-        return getVideoId(this.url);
-      }
-    }
-  };
+  computed: {
+    videoId() {
+      return getVideoId(this.url);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  .youtube-embed {
-    width: 100%;
-    height: 350px;
-  }
+.youtube-embed {
+  width: 100%;
+  height: 350px;
+}
 </style>
diff --git a/client/src/components/visibility/VisibilityAction.vue b/client/src/components/visibility/VisibilityAction.vue
index 38336aac..716a55f6 100644
--- a/client/src/components/visibility/VisibilityAction.vue
+++ b/client/src/components/visibility/VisibilityAction.vue
@@ -1,92 +1,84 @@
 <template>
   <div class="visibility-action">
-    <a
-      class="visibility-action__action-button"
-      v-if="canManageContent"
-      @click="toggleVisibility()"
-    >
-      <closed-eye-icon
-        class="visibility-action__action-icon action-icon"
-        v-if="hidden"
-      />
-      <eye-icon
-        class="visibility-action__action-icon action-icon"
-        v-else
-      />
+    <a class="visibility-action__action-button" v-if="canManageContent" @click="toggleVisibility()">
+      <closed-eye-icon class="visibility-action__action-icon action-icon" v-if="hidden" />
+      <eye-icon class="visibility-action__action-icon action-icon" v-else />
     </a>
   </div>
 </template>
 
 <script>
-  import me from '@/mixins/me';
+import me from '@/mixins/me';
 
-  import {TYPES, CONTENT_TYPE} from '@/consts/types';
-  import {createVisibilityMutation, hidden} from '@/helpers/visibility';
+import { TYPES, CONTENT_TYPE } from '@/consts/types';
+import { createVisibilityMutation, hidden } from '@/helpers/visibility';
 
-  const EyeIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon');
-  const ClosedEyeIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/ClosedEyeIcon');
+const EyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon');
+const ClosedEyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/ClosedEyeIcon');
 
-  export default {
-    props: {
-      block: {
-        type: Object,
-        default: () => ({})
+export default {
+  props: {
+    block: {
+      type: Object,
+      default: () => ({}),
+    },
+    type: {
+      type: String,
+      default: CONTENT_TYPE,
+      validator: (value) => {
+        // value must be one of TYPES
+        return TYPES.indexOf(value) !== -1;
       },
-      type: {
-        type: String,
-        default: CONTENT_TYPE,
-        validator: value => {
-          // value must be one of TYPES
-          return TYPES.indexOf(value) !== -1;
-        }
-      }
     },
+  },
 
-    mixins: [me],
+  mixins: [me],
 
-    components: {
-      EyeIcon,
-      ClosedEyeIcon
+  components: {
+    EyeIcon,
+    ClosedEyeIcon,
+  },
+
+  computed: {
+    hidden() {
+      return hidden({ type: this.type, block: this.block, schoolClass: this.schoolClass });
     },
+  },
 
-    computed: {
-      hidden() {
-        return hidden({type: this.type, block: this.block, schoolClass: this.schoolClass});
-      }
-    },
+  methods: {
+    toggleVisibility() {
+      const hidden = !this.hidden;
+      const schoolClassId = this.schoolClass.id;
 
-    methods: {
-      toggleVisibility() {
-        const hidden = !this.hidden;
-        const schoolClassId = this.schoolClass.id;
-
-        const visibility = [{
+      const visibility = [
+        {
           schoolClassId,
-          hidden
-        }];
+          hidden,
+        },
+      ];
 
-        const {mutation, variables} = createVisibilityMutation(this.type, this.block.id, visibility);
+      const { mutation, variables } = createVisibilityMutation(this.type, this.block.id, visibility);
 
-        this.$apollo.mutate({
-          mutation,
-          variables
-        });
-      },
+      this.$apollo.mutate({
+        mutation,
+        variables,
+      });
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  .visibility-action {
-    margin-top: 9px;
+.visibility-action {
+  margin-top: 9px;
 
-    position: absolute;
-    left: -70px;
-    top: 0px;
-    display: grid;
+  position: absolute;
+  left: -70px;
+  top: 0px;
+  display: grid;
 
-    &__visibility-menu {
-      top: 40px;
-    }
+  &__visibility-menu {
+    top: 40px;
   }
+}
 </style>
diff --git a/client/src/consts/types.js b/client/src/consts/types.js
index 85aefd8e..619fe096 100644
--- a/client/src/consts/types.js
+++ b/client/src/consts/types.js
@@ -3,10 +3,4 @@ export const OBJECTIVE_TYPE = 'objective';
 export const OBJECTIVE_GROUP_TYPE = 'objective-group';
 export const CHAPTER_TITLE_TYPE = 'chapter-title';
 export const CHAPTER_DESCRIPTION_TYPE = 'chapter-description';
-export const TYPES = [
-  CONTENT_TYPE,
-  OBJECTIVE_TYPE,
-  OBJECTIVE_GROUP_TYPE,
-  CHAPTER_TITLE_TYPE,
-  CHAPTER_DESCRIPTION_TYPE
-];
+export const TYPES = [CONTENT_TYPE, OBJECTIVE_TYPE, OBJECTIVE_GROUP_TYPE, CHAPTER_TITLE_TYPE, CHAPTER_DESCRIPTION_TYPE];
diff --git a/client/src/directives/auto-grow.js b/client/src/directives/auto-grow.js
index 6e462a21..650df9a5 100644
--- a/client/src/directives/auto-grow.js
+++ b/client/src/directives/auto-grow.js
@@ -14,8 +14,8 @@ export default {
   },
   unbind(el) {
     el.classList.remove('skillbox-auto-grow');
-    el.removeEventListener('input', ()  => {
+    el.removeEventListener('input', () => {
       resizeElement(el);
     });
-  }
+  },
 };
diff --git a/client/src/directives/click-outside.js b/client/src/directives/click-outside.js
index 2e9ad986..cd2ed1b5 100644
--- a/client/src/directives/click-outside.js
+++ b/client/src/directives/click-outside.js
@@ -1,7 +1,7 @@
 // taken from https://stackoverflow.com/questions/36170425/detect-click-outside-element
 export default {
   bind(el, binding, vnode) {
-    el.clickOutsideEvent = event => {
+    el.clickOutsideEvent = (event) => {
       if (!(el === event.target || el.contains(event.target))) {
         vnode.context[binding.expression](event);
       }
@@ -10,5 +10,5 @@ export default {
   },
   unbind(el) {
     document.body.removeEventListener('click', el.clickOutsideEvent);
-  }
+  },
 };
diff --git a/client/src/filters/date-filter.js b/client/src/filters/date-filter.js
index f4cb60bf..f70b405e 100644
--- a/client/src/filters/date-filter.js
+++ b/client/src/filters/date-filter.js
@@ -4,14 +4,14 @@ import 'dayjs/locale/de';
 dayjs.locale('de');
 
 // todo: test
-export const dateFilter = value => {
+export const dateFilter = (value) => {
   if (value) {
     return dayjs(String(value)).format('DD. MMMM YYYY');
   }
 };
 
 // todo: test
-export const dateTimeFilter = value => {
+export const dateTimeFilter = (value) => {
   if (value) {
     return dayjs(String(value)).format('DD. MMMM YYYY, HH:mm');
   }
diff --git a/client/src/graphql/cache-operations.js b/client/src/graphql/cache-operations.js
index 557f5924..454442d9 100644
--- a/client/src/graphql/cache-operations.js
+++ b/client/src/graphql/cache-operations.js
@@ -2,14 +2,14 @@ import cache from '@/graphql/cache';
 export const setModuleEditMode = (slug, newEditMode) => {
   const id = cache.identify({
     __typename: 'ModuleNode',
-    slug
+    slug,
   });
   cache.modify({
     id,
     fields: {
       inEditMode() {
         return newEditMode;
-      }
-    }
+      },
+    },
   });
 };
diff --git a/client/src/graphql/cache.js b/client/src/graphql/cache.js
index ad58703f..2f6a6d17 100644
--- a/client/src/graphql/cache.js
+++ b/client/src/graphql/cache.js
@@ -1,4 +1,4 @@
-import {makeVar, InMemoryCache} from '@apollo/client/core';
+import { makeVar, InMemoryCache } from '@apollo/client/core';
 import log from 'loglevel';
 
 const showNavigationSidebarVar = makeVar(false);
@@ -7,36 +7,38 @@ const scrollToElementVar = makeVar('');
 const currentFilterVar = makeVar('');
 const helloEmailVar = makeVar('');
 
-const idToRefFactory = (__typename) => (_, {args, toReference}) => {
-  log.debug(`Referencing ${__typename} with ${args.id}`);
-  return toReference({
-    __typename,
-    id: args.id
-  });
-};
+const idToRefFactory =
+  (__typename) =>
+  (_, { args, toReference }) => {
+    log.debug(`Referencing ${__typename} with ${args.id}`);
+    return toReference({
+      __typename,
+      id: args.id,
+    });
+  };
 
 const typePolicies = {
   ProjectNode: {
-    keyFields: ['slug']
+    keyFields: ['slug'],
   },
   InstrumentNode: {
-    keyFields: ['slug']
+    keyFields: ['slug'],
   },
   RoomNode: {
-    keyFields: ['slug']
+    keyFields: ['slug'],
   },
   ModuleNode: {
     fields: {
       inEditMode: {
         read(previous) {
           return previous !== undefined ? previous : false;
-        }
-      }
+        },
+      },
     },
-    keyFields: ['slug']
+    keyFields: ['slug'],
   },
   RoomEntryNode: {
-    keyFields: ['slug']
+    keyFields: ['slug'],
   },
   // https://www.apollographql.com/docs/react/local-state/managing-state-with-field-policies/#example
   Query: {
@@ -45,47 +47,46 @@ const typePolicies = {
         read() {
           return {
             profile: showProfileSidebarVar(),
-            navigation: showNavigationSidebarVar()
+            navigation: showNavigationSidebarVar(),
           };
-        }
+        },
       },
       scrollPosition: {
         read() {
           return {
-            scrollTo: scrollToElementVar()
+            scrollTo: scrollToElementVar(),
           };
-        }
+        },
       },
       instrumentFilter: {
         read() {
           return {
-            currentFilter: currentFilterVar()
+            currentFilter: currentFilterVar(),
           };
-        }
+        },
       },
       helloEmail: {
         read() {
           return {
-            email: helloEmailVar()
+            email: helloEmailVar(),
           };
-        }
+        },
       },
 
-
       // these used to be in cacheRedirects, now here
-      contentBlock: {        read: idToRefFactory('ContentBlockNode')      },
-      chapter: {read: idToRefFactory('ChapterNode')},
-      assignment: {read: idToRefFactory('AssignmentNode')},
-      objective: {read: idToRefFactory('ObjectiveNode')},
-      objectiveGroup: {read: idToRefFactory('ObjectiveGroupNode')},
-      projectEntry: {read: idToRefFactory('ProjectEntryNode')},
-    }
+      contentBlock: { read: idToRefFactory('ContentBlockNode') },
+      chapter: { read: idToRefFactory('ChapterNode') },
+      assignment: { read: idToRefFactory('AssignmentNode') },
+      objective: { read: idToRefFactory('ObjectiveNode') },
+      objectiveGroup: { read: idToRefFactory('ObjectiveGroupNode') },
+      projectEntry: { read: idToRefFactory('ProjectEntryNode') },
+    },
   },
 };
 
 const possibleTypes = {
- ContentBlockInterface: ['ContentBlockNode', 'SnapshotContentBlockNode'],
- ChapterInterface: ['ChapterNode', 'SnapshotChapterNode']
+  ContentBlockInterface: ['ContentBlockNode', 'SnapshotContentBlockNode'],
+  ChapterInterface: ['ChapterNode', 'SnapshotChapterNode'],
 };
 
 const cache = new InMemoryCache({
@@ -120,13 +121,5 @@ const cache = new InMemoryCache({
 //   }
 // };
 
-
-export {
-  showProfileSidebarVar,
-  showNavigationSidebarVar,
-  scrollToElementVar,
-  currentFilterVar,
-  helloEmailVar,
-  cache
-};
+export { showProfileSidebarVar, showNavigationSidebarVar, scrollToElementVar, currentFilterVar, helloEmailVar, cache };
 export default cache;
diff --git a/client/src/graphql/client.js b/client/src/graphql/client.js
index a5c36a2d..1ca8de57 100644
--- a/client/src/graphql/client.js
+++ b/client/src/graphql/client.js
@@ -1,15 +1,11 @@
-import {onError} from '@apollo/client/link/error';
-import {
-  ApolloClient,
-  ApolloLink,
-  createHttpLink,
-} from '@apollo/client/core';
-import {typeDefs} from '@/graphql/typedefs';
-import {resolvers} from '@/graphql/resolvers';
+import { onError } from '@apollo/client/link/error';
+import { ApolloClient, ApolloLink, createHttpLink } from '@apollo/client/core';
+import { typeDefs } from '@/graphql/typedefs';
+import { resolvers } from '@/graphql/resolvers';
 import cache from './cache';
 import log from 'loglevel';
 
-import {router} from '@/router';
+import { router } from '@/router';
 
 export default function (uri, networkErrorCallback) {
   const httpLink = createHttpLink({
@@ -24,7 +20,7 @@ export default function (uri, networkErrorCallback) {
   const consoleLink = new ApolloLink((operation, forward) => {
     log.debug('operation', operation.operationName);
 
-    return forward(operation).map(data => {
+    return forward(operation).map((data) => {
       log.debug(`returned from server for ${operation.operationName}`, data);
       return data;
     });
@@ -43,16 +39,14 @@ export default function (uri, networkErrorCallback) {
     return forward(operation);
   });
 
-  const errorLink = onError(({networkError, graphQLErrors}) => {
+  const errorLink = onError(({ networkError, graphQLErrors }) => {
     if (networkError && networkErrorCallback) {
       networkErrorCallback(networkError.statusCode);
     }
 
     if (graphQLErrors) {
-      graphQLErrors.forEach(({message, locations, path}) =>
-        log.warn(
-          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
-        ),
+      graphQLErrors.forEach(({ message, locations, path }) =>
+        log.warn(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`)
       );
     }
 
@@ -65,14 +59,14 @@ export default function (uri, networkErrorCallback) {
   });
 
   const notFoundLink = new ApolloLink((operation, forward) => {
-    return forward(operation).map(response => {
-      const {data} = response;
+    return forward(operation).map((response) => {
+      const { data } = response;
       if (data) {
         if (data.topic && data.topic.__typename === 'NotFound') {
           // redirect to general 404 page.
           // todo: specific topic not found page, with navigation?
           router.push({
-            name: 'not-found'
+            name: 'not-found',
           });
         }
       }
@@ -82,20 +76,9 @@ export default function (uri, networkErrorCallback) {
 
   let composedLink;
   if (process.env.NODE_ENV === 'production') {
-    composedLink = ApolloLink.from([
-      createOmitTypenameLink,
-      errorLink,
-      notFoundLink,
-      httpLink,
-    ]);
+    composedLink = ApolloLink.from([createOmitTypenameLink, errorLink, notFoundLink, httpLink]);
   } else {
-    composedLink = ApolloLink.from([
-      consoleLink,
-      createOmitTypenameLink,
-      errorLink,
-      notFoundLink,
-      httpLink,
-    ]);
+    composedLink = ApolloLink.from([consoleLink, createOmitTypenameLink, errorLink, notFoundLink, httpLink]);
   }
 
   // Create the apollo client
diff --git a/client/src/graphql/gql/fragments/moduleParts.gql b/client/src/graphql/gql/fragments/moduleParts.gql
index 7137d7b2..eef9c7aa 100644
--- a/client/src/graphql/gql/fragments/moduleParts.gql
+++ b/client/src/graphql/gql/fragments/moduleParts.gql
@@ -9,8 +9,8 @@ fragment ModuleParts on ModuleNode {
   solutionsEnabled
   inEditMode @client
   topic {
-      slug
-      title
+    slug
+    title
   }
   bookmark {
     note {
diff --git a/client/src/graphql/gql/local/mutations/helloEmail.gql b/client/src/graphql/gql/local/mutations/helloEmail.gql
index b171cb1b..8769ba9f 100644
--- a/client/src/graphql/gql/local/mutations/helloEmail.gql
+++ b/client/src/graphql/gql/local/mutations/helloEmail.gql
@@ -1,3 +1,3 @@
-mutation($helloEmail: String!) {
+mutation ($helloEmail: String!) {
   helloEmail(email: $helloEmail) @client
 }
diff --git a/client/src/graphql/gql/local/mutations/scrollTo.gql b/client/src/graphql/gql/local/mutations/scrollTo.gql
index cf79d083..c1e2e275 100644
--- a/client/src/graphql/gql/local/mutations/scrollTo.gql
+++ b/client/src/graphql/gql/local/mutations/scrollTo.gql
@@ -1,3 +1,3 @@
-mutation($scrollTo: String!) {
+mutation ($scrollTo: String!) {
   scrollTo(scrollTo: $scrollTo) @client
 }
diff --git a/client/src/graphql/gql/local/mutations/setInstrumentFilter.gql b/client/src/graphql/gql/local/mutations/setInstrumentFilter.gql
index bfc35931..1bcac90e 100644
--- a/client/src/graphql/gql/local/mutations/setInstrumentFilter.gql
+++ b/client/src/graphql/gql/local/mutations/setInstrumentFilter.gql
@@ -1,3 +1,3 @@
-mutation($filter: String!) {
+mutation ($filter: String!) {
   setInstrumentFilter(filter: $filter) @client
 }
diff --git a/client/src/graphql/gql/local/mutations/toggleSidebar.gql b/client/src/graphql/gql/local/mutations/toggleSidebar.gql
index c05a9221..8c611a6e 100644
--- a/client/src/graphql/gql/local/mutations/toggleSidebar.gql
+++ b/client/src/graphql/gql/local/mutations/toggleSidebar.gql
@@ -1,3 +1,3 @@
-mutation($sidebar: SidebarInput!) {
+mutation ($sidebar: SidebarInput!) {
   toggleSidebar(sidebar: $sidebar) @client
 }
diff --git a/client/src/graphql/gql/mutations/addContentBlock.gql b/client/src/graphql/gql/mutations/addContentBlock.gql
index 62eb1881..c7c802cb 100644
--- a/client/src/graphql/gql/mutations/addContentBlock.gql
+++ b/client/src/graphql/gql/mutations/addContentBlock.gql
@@ -12,7 +12,6 @@ mutation AddContentBlock($input: AddContentBlockInput!) {
   }
 }
 
-
 # input
 
 #{
diff --git a/client/src/graphql/gql/mutations/addObjective.gql b/client/src/graphql/gql/mutations/addObjective.gql
index 46b844aa..caeb5a5b 100644
--- a/client/src/graphql/gql/mutations/addObjective.gql
+++ b/client/src/graphql/gql/mutations/addObjective.gql
@@ -1,5 +1,5 @@
 #import "../fragments/objectiveParts.gql"
-mutation AddObjective($input: AddObjectiveInput!){
+mutation AddObjective($input: AddObjectiveInput!) {
   addObjective(input: $input) {
     objective {
       ...ObjectiveParts
@@ -7,7 +7,6 @@ mutation AddObjective($input: AddObjectiveInput!){
   }
 }
 
-
 #{"input": {
 #  "objective": {
 #    "objectiveGroup": "asdas",
diff --git a/client/src/graphql/gql/mutations/addProject.gql b/client/src/graphql/gql/mutations/addProject.gql
index f3d74545..ed147222 100644
--- a/client/src/graphql/gql/mutations/addProject.gql
+++ b/client/src/graphql/gql/mutations/addProject.gql
@@ -1,6 +1,6 @@
 #import "../fragments/projectParts.gql"
-mutation AddProject($input: AddProjectInput!){
-  addProject(input: $input){
+mutation AddProject($input: AddProjectInput!) {
+  addProject(input: $input) {
     project {
       ...ProjectParts
     }
diff --git a/client/src/graphql/gql/mutations/createClass.gql b/client/src/graphql/gql/mutations/createClass.gql
index 64794ab4..83011e6c 100644
--- a/client/src/graphql/gql/mutations/createClass.gql
+++ b/client/src/graphql/gql/mutations/createClass.gql
@@ -2,11 +2,11 @@ mutation CreateSchoolClass($input: CreateSchoolClassInput!) {
   createSchoolClass(input: $input) {
     result {
       __typename
-      ...on SchoolClassNode {
+      ... on SchoolClassNode {
         id
         name
       }
-      ...on DuplicateName {
+      ... on DuplicateName {
         reason
       }
     }
diff --git a/client/src/graphql/gql/mutations/createTeam.gql b/client/src/graphql/gql/mutations/createTeam.gql
index cc886695..fcacedf0 100644
--- a/client/src/graphql/gql/mutations/createTeam.gql
+++ b/client/src/graphql/gql/mutations/createTeam.gql
@@ -3,10 +3,10 @@ mutation CreateTeamMutation($input: CreateTeamInput!) {
   createTeam(input: $input) {
     result {
       __typename
-      ...on TeamNode {
+      ... on TeamNode {
         ...TeamParts
       }
-      ...on DuplicateName {
+      ... on DuplicateName {
         reason
       }
     }
diff --git a/client/src/graphql/gql/mutations/deleteProject.gql b/client/src/graphql/gql/mutations/deleteProject.gql
index 0a2e671e..2ffe4e22 100644
--- a/client/src/graphql/gql/mutations/deleteProject.gql
+++ b/client/src/graphql/gql/mutations/deleteProject.gql
@@ -4,4 +4,3 @@ mutation DeleteProject($input: DeleteProjectInput!) {
     errors
   }
 }
-
diff --git a/client/src/graphql/gql/mutations/redeemCoupon.gql b/client/src/graphql/gql/mutations/redeemCoupon.gql
index 1b9c7f9f..34153ed0 100644
--- a/client/src/graphql/gql/mutations/redeemCoupon.gql
+++ b/client/src/graphql/gql/mutations/redeemCoupon.gql
@@ -1,4 +1,4 @@
-mutation Coupon($input: CouponInput!){
+mutation Coupon($input: CouponInput!) {
   coupon(input: $input) {
     success
   }
diff --git a/client/src/graphql/gql/mutations/rooms/addRoom.gql b/client/src/graphql/gql/mutations/rooms/addRoom.gql
index a9f4b1f4..c5a6d548 100644
--- a/client/src/graphql/gql/mutations/rooms/addRoom.gql
+++ b/client/src/graphql/gql/mutations/rooms/addRoom.gql
@@ -1,9 +1,9 @@
 #import "../../fragments/roomParts.gql"
-mutation AddRoom($input: AddRoomInput!){
+mutation AddRoom($input: AddRoomInput!) {
   addRoom(input: $input) {
     room {
       ...RoomParts
-    },
+    }
     errors
   }
 }
diff --git a/client/src/graphql/gql/mutations/rooms/addRoomEntry.gql b/client/src/graphql/gql/mutations/rooms/addRoomEntry.gql
index 55ffe11d..79a36b74 100644
--- a/client/src/graphql/gql/mutations/rooms/addRoomEntry.gql
+++ b/client/src/graphql/gql/mutations/rooms/addRoomEntry.gql
@@ -1,15 +1,13 @@
 #import "../../fragments/roomEntryParts.gql"
-mutation AddRoomEntry($input: AddRoomEntryInput!){
+mutation AddRoomEntry($input: AddRoomEntryInput!) {
   addRoomEntry(input: $input) {
     roomEntry {
       ...RoomEntryParts
     }
     errors
-
   }
 }
 
-
 #{"input": {
 #  "roomEntry": {
 #    "title": "Hi",
diff --git a/client/src/graphql/gql/mutations/rooms/updateRoom.gql b/client/src/graphql/gql/mutations/rooms/updateRoom.gql
index b9810fe1..c9069ea9 100644
--- a/client/src/graphql/gql/mutations/rooms/updateRoom.gql
+++ b/client/src/graphql/gql/mutations/rooms/updateRoom.gql
@@ -1,9 +1,9 @@
 #import "../../fragments/roomParts.gql"
-mutation UpdateRoom($input: UpdateRoomInput!){
+mutation UpdateRoom($input: UpdateRoomInput!) {
   updateRoom(input: $input) {
     room {
       ...RoomParts
-    },
+    }
     errors
   }
 }
diff --git a/client/src/graphql/gql/mutations/rooms/updateRoomEntry.gql b/client/src/graphql/gql/mutations/rooms/updateRoomEntry.gql
index 8bc8a150..92685085 100644
--- a/client/src/graphql/gql/mutations/rooms/updateRoomEntry.gql
+++ b/client/src/graphql/gql/mutations/rooms/updateRoomEntry.gql
@@ -1,5 +1,5 @@
 #import "../../fragments/roomEntryParts.gql"
-mutation UpdateRoomEntry($input: UpdateRoomEntryInput!){
+mutation UpdateRoomEntry($input: UpdateRoomEntryInput!) {
   updateRoomEntry(input: $input) {
     roomEntry {
       ...RoomEntryParts
diff --git a/client/src/graphql/gql/mutations/snapshots/delete.gql b/client/src/graphql/gql/mutations/snapshots/delete.gql
index 12e80df3..f28c876e 100644
--- a/client/src/graphql/gql/mutations/snapshots/delete.gql
+++ b/client/src/graphql/gql/mutations/snapshots/delete.gql
@@ -1,13 +1,13 @@
 mutation DeleteSnapshot($input: DeleteSnapshotInput!) {
   deleteSnapshot(input: $input) {
     result {
-        __typename
-        ...on NotOwner {
-          reason
-        }
-        ...on Success {
-          message
-        }
+      __typename
+      ... on NotOwner {
+        reason
+      }
+      ... on Success {
+        message
+      }
     }
   }
 }
diff --git a/client/src/graphql/gql/mutations/snapshots/update.gql b/client/src/graphql/gql/mutations/snapshots/update.gql
index 1736fb2a..5a25d6f9 100644
--- a/client/src/graphql/gql/mutations/snapshots/update.gql
+++ b/client/src/graphql/gql/mutations/snapshots/update.gql
@@ -1,11 +1,11 @@
 mutation UpdateSnapshot($input: UpdateSnapshotInput!) {
   updateSnapshot(input: $input) {
     snapshot {
-      ...on SnapshotNode {
+      ... on SnapshotNode {
         title
         id
       }
-      ...on NotOwner {
+      ... on NotOwner {
         reason
       }
     }
diff --git a/client/src/graphql/gql/mutations/spellCheck.gql b/client/src/graphql/gql/mutations/spellCheck.gql
index 807c593a..2727704e 100644
--- a/client/src/graphql/gql/mutations/spellCheck.gql
+++ b/client/src/graphql/gql/mutations/spellCheck.gql
@@ -11,4 +11,3 @@ mutation SpellCheck($input: SpellCheckInput!) {
     }
   }
 }
-
diff --git a/client/src/graphql/gql/mutations/updateAnswer.gql b/client/src/graphql/gql/mutations/updateAnswer.gql
index a080a191..c2d4fce7 100644
--- a/client/src/graphql/gql/mutations/updateAnswer.gql
+++ b/client/src/graphql/gql/mutations/updateAnswer.gql
@@ -1,13 +1,12 @@
-mutation UpdateAnswer($input:UpdateAnswerInput!) {
-  updateAnswer(input:$input){
-   	answer {
-   	  id
-   	  data
-   	}
+mutation UpdateAnswer($input: UpdateAnswerInput!) {
+  updateAnswer(input: $input) {
+    answer {
+      id
+      data
+    }
   }
 }
 
-
 # input
 
 #{
diff --git a/client/src/graphql/gql/mutations/updateAssignmentMutation.gql b/client/src/graphql/gql/mutations/updateAssignmentMutation.gql
index c580aed7..26e72dff 100644
--- a/client/src/graphql/gql/mutations/updateAssignmentMutation.gql
+++ b/client/src/graphql/gql/mutations/updateAssignmentMutation.gql
@@ -1,6 +1,6 @@
 #import "../fragments/assignmentParts.gql"
 mutation UpdateAssignment($input: UpdateAssignmentInput!) {
-  updateAssignment(input: $input){
+  updateAssignment(input: $input) {
     updatedAssignment {
       ...AssignmentParts
     }
diff --git a/client/src/graphql/gql/mutations/updateAssignmentMutationWithSuccess.gql b/client/src/graphql/gql/mutations/updateAssignmentMutationWithSuccess.gql
index b2aec07a..5a50b629 100644
--- a/client/src/graphql/gql/mutations/updateAssignmentMutationWithSuccess.gql
+++ b/client/src/graphql/gql/mutations/updateAssignmentMutationWithSuccess.gql
@@ -1,6 +1,6 @@
 #import "../fragments/assignmentParts.gql"
 mutation UpdateAssignmentWithSuccess($input: UpdateAssignmentInput!) {
-  updateAssignment(input: $input){
+  updateAssignment(input: $input) {
     successful
     updatedAssignment {
       ...AssignmentParts
diff --git a/client/src/graphql/gql/mutations/updateChapterVisibility.gql b/client/src/graphql/gql/mutations/updateChapterVisibility.gql
index 35787dac..5842934f 100644
--- a/client/src/graphql/gql/mutations/updateChapterVisibility.gql
+++ b/client/src/graphql/gql/mutations/updateChapterVisibility.gql
@@ -13,4 +13,3 @@ mutation UpdateChapterVisibility($input: UpdateChapterVisibilityInput!) {
     }
   }
 }
-
diff --git a/client/src/graphql/gql/mutations/updateFeedback.gql b/client/src/graphql/gql/mutations/updateFeedback.gql
index 1c71915b..6ee0a9db 100644
--- a/client/src/graphql/gql/mutations/updateFeedback.gql
+++ b/client/src/graphql/gql/mutations/updateFeedback.gql
@@ -1,7 +1,7 @@
 mutation UpdateSubmissionFeedback($input: UpdateSubmissionFeedbackInput!) {
-  updateSubmissionFeedback(input: $input){
+  updateSubmissionFeedback(input: $input) {
     successful
-		updatedSubmissionFeedback {
+    updatedSubmissionFeedback {
       id
       final
     }
diff --git a/client/src/graphql/gql/mutations/updateFeedbackWithText.gql b/client/src/graphql/gql/mutations/updateFeedbackWithText.gql
index 64d0f0bc..d94c558c 100644
--- a/client/src/graphql/gql/mutations/updateFeedbackWithText.gql
+++ b/client/src/graphql/gql/mutations/updateFeedbackWithText.gql
@@ -1,7 +1,7 @@
 mutation UpdateSubmissionFeedback($input: UpdateSubmissionFeedbackInput!) {
-  updateSubmissionFeedback(input: $input){
+  updateSubmissionFeedback(input: $input) {
     successful
-		updatedSubmissionFeedback {
+    updatedSubmissionFeedback {
       id
       final
       text
diff --git a/client/src/graphql/gql/mutations/updateObjectiveGroupVisibility.gql b/client/src/graphql/gql/mutations/updateObjectiveGroupVisibility.gql
index 7f67d7da..5243273e 100644
--- a/client/src/graphql/gql/mutations/updateObjectiveGroupVisibility.gql
+++ b/client/src/graphql/gql/mutations/updateObjectiveGroupVisibility.gql
@@ -6,4 +6,3 @@ mutation UpdateObjectiveGroupVisibility($input: UpdateObjectiveGroupVisibilityIn
     }
   }
 }
-
diff --git a/client/src/graphql/gql/mutations/updateObjectiveProgress.gql b/client/src/graphql/gql/mutations/updateObjectiveProgress.gql
index 7dd9320f..242f6de1 100644
--- a/client/src/graphql/gql/mutations/updateObjectiveProgress.gql
+++ b/client/src/graphql/gql/mutations/updateObjectiveProgress.gql
@@ -1,5 +1,5 @@
 mutation UpdateObjectiveProgress($input: UpdateObjectiveProgressInput!) {
-  updateObjectiveProgress(input: $input){
+  updateObjectiveProgress(input: $input) {
     objective {
       id
       objectiveProgress {
diff --git a/client/src/graphql/gql/mutations/updateObjectiveVisibility.gql b/client/src/graphql/gql/mutations/updateObjectiveVisibility.gql
index b457519a..dbca4e62 100644
--- a/client/src/graphql/gql/mutations/updateObjectiveVisibility.gql
+++ b/client/src/graphql/gql/mutations/updateObjectiveVisibility.gql
@@ -6,4 +6,3 @@ mutation UpdateObjectiveVisibility($input: UpdateObjectiveVisibilityInput!) {
     }
   }
 }
-
diff --git a/client/src/graphql/gql/mutations/updateProject.gql b/client/src/graphql/gql/mutations/updateProject.gql
index 07da4872..c230c101 100644
--- a/client/src/graphql/gql/mutations/updateProject.gql
+++ b/client/src/graphql/gql/mutations/updateProject.gql
@@ -1,5 +1,5 @@
 #import "../fragments/projectParts.gql"
-mutation UpdateProjectMutation($input: UpdateProjectInput!){
+mutation UpdateProjectMutation($input: UpdateProjectInput!) {
   updateProject(input: $input) {
     project {
       ...ProjectParts
diff --git a/client/src/graphql/gql/mutations/updateProjectEntry.gql b/client/src/graphql/gql/mutations/updateProjectEntry.gql
index ff332906..9877591d 100644
--- a/client/src/graphql/gql/mutations/updateProjectEntry.gql
+++ b/client/src/graphql/gql/mutations/updateProjectEntry.gql
@@ -1,5 +1,5 @@
 #import "../fragments/projectEntryParts.gql"
-mutation UpdateProjectEntry($input: UpdateProjectEntryInput!){
+mutation UpdateProjectEntry($input: UpdateProjectEntryInput!) {
   updateProjectEntry(input: $input) {
     projectEntry {
       ...ProjectEntryParts
diff --git a/client/src/graphql/gql/public-client/betaLogin.gql b/client/src/graphql/gql/public-client/betaLogin.gql
index d13fee62..3275f77a 100644
--- a/client/src/graphql/gql/public-client/betaLogin.gql
+++ b/client/src/graphql/gql/public-client/betaLogin.gql
@@ -4,4 +4,3 @@ mutation BetaLogin($input: BetaLoginInput!) {
     message
   }
 }
-
diff --git a/client/src/graphql/gql/queries/allTopicsQuery.gql b/client/src/graphql/gql/queries/allTopicsQuery.gql
index 0fa05575..cb636377 100644
--- a/client/src/graphql/gql/queries/allTopicsQuery.gql
+++ b/client/src/graphql/gql/queries/allTopicsQuery.gql
@@ -1,12 +1,12 @@
 query TopicsQuery {
-	topics {
-	  edges {
-	    node {
-	      id
-	      order
+  topics {
+    edges {
+      node {
+        id
+        order
         title
         slug
-	    }
-	  }
-	}
+      }
+    }
+  }
 }
diff --git a/client/src/graphql/gql/queries/instrumentQuery.gql b/client/src/graphql/gql/queries/instrumentQuery.gql
index 603b8474..6a33935e 100644
--- a/client/src/graphql/gql/queries/instrumentQuery.gql
+++ b/client/src/graphql/gql/queries/instrumentQuery.gql
@@ -1,5 +1,5 @@
 #import "../fragments/instrumentParts.gql"
-query InstrumentQuery($slug: String!){
+query InstrumentQuery($slug: String!) {
   instrument(slug: $slug) {
     ...InstrumentParts
   }
diff --git a/client/src/graphql/gql/queries/instrumentQueryById.gql b/client/src/graphql/gql/queries/instrumentQueryById.gql
index a0c139f9..ad62b674 100644
--- a/client/src/graphql/gql/queries/instrumentQueryById.gql
+++ b/client/src/graphql/gql/queries/instrumentQueryById.gql
@@ -1,5 +1,5 @@
 #import "../fragments/instrumentParts.gql"
-query InstrumentQuery($id: ID!){
+query InstrumentQuery($id: ID!) {
   instrument(id: $id) {
     ...InstrumentParts
   }
diff --git a/client/src/graphql/gql/queries/modules/details.gql b/client/src/graphql/gql/queries/modules/details.gql
index 20dabd39..4cc196d1 100644
--- a/client/src/graphql/gql/queries/modules/details.gql
+++ b/client/src/graphql/gql/queries/modules/details.gql
@@ -1,6 +1,6 @@
 #import "../fragments/moduleParts.gql"
 query ModuleQuery($id: ID, $slug: String) {
-  module(id: $id, slug:$slug) {
+  module(id: $id, slug: $slug) {
     ...ModuleParts
     chapters {
       id
diff --git a/client/src/graphql/gql/queries/projectQuery.gql b/client/src/graphql/gql/queries/projectQuery.gql
index 3a18036a..62ffba56 100644
--- a/client/src/graphql/gql/queries/projectQuery.gql
+++ b/client/src/graphql/gql/queries/projectQuery.gql
@@ -1,6 +1,6 @@
 #import "../fragments/projectParts.gql"
 #import "../fragments/projectEntryParts.gql"
-query ProjectQuery($slug: String){
+query ProjectQuery($slug: String) {
   project(slug: $slug) {
     ...ProjectParts
     entries {
diff --git a/client/src/graphql/gql/queries/topicQuery.gql b/client/src/graphql/gql/queries/topicQuery.gql
index 37bce375..7d052aaf 100644
--- a/client/src/graphql/gql/queries/topicQuery.gql
+++ b/client/src/graphql/gql/queries/topicQuery.gql
@@ -1,6 +1,6 @@
 #import "../fragments/topicParts.gql"
 #import "../fragments/notFoundParts.gql"
-query Topic($slug: String!){
+query Topic($slug: String!) {
   topic(slug: $slug) {
     ...TopicParts
     ...NotFoundParts
diff --git a/client/src/graphql/immutable-operations.ts b/client/src/graphql/immutable-operations.ts
index a070365e..49256662 100644
--- a/client/src/graphql/immutable-operations.ts
+++ b/client/src/graphql/immutable-operations.ts
@@ -6,27 +6,16 @@ export const pushToArray = (arr: any[], el: any) => {
   return [...arr, el];
 };
 export const insertAtIndex = (arr: any[], idx: number, el: any) => {
-  return [
-    ...arr.slice(0, idx),
-    el,
-    ...arr.slice(idx)
-  ];
+  return [...arr.slice(0, idx), el, ...arr.slice(idx)];
 };
 export const removeAtIndex = (arr: any[], idx: number) => {
-  return [
-    ...arr.slice(0, idx),
-    ...arr.slice(idx + 1) ,
-  ];
+  return [...arr.slice(0, idx), ...arr.slice(idx + 1)];
 };
 export const replaceAtIndex = (arr: any[], idx: number, el: any) => {
   //todo: check array index bounds, numbers
- return [
-   ...arr.slice(0, idx),
-   el,
-   ...arr.slice(idx+1)
- ];
+  return [...arr.slice(0, idx), el, ...arr.slice(idx + 1)];
 };
-export const swapElements = (arr: any[], idx1: number, idx2: number)=>{
+export const swapElements = (arr: any[], idx1: number, idx2: number) => {
   const maxLength = arr.length - 1;
   if (idx1 < 0 || idx2 < 0 || idx1 > maxLength || idx2 > maxLength) {
     return [...arr];
@@ -34,13 +23,7 @@ export const swapElements = (arr: any[], idx1: number, idx2: number)=>{
   const [smaller, larger] = [idx1, idx2].sort(); // todo: check for numbers
   const el1 = arr[smaller];
   const el2 = arr[larger];
-  return [
-    ...arr.slice(0, smaller),
-    el2,
-    ...arr.slice(smaller+1, larger),
-    el1,
-    ...arr.slice(larger+1)
-  ];
+  return [...arr.slice(0, smaller), el2, ...arr.slice(smaller + 1, larger), el1, ...arr.slice(larger + 1)];
 };
 export const moveToIndex = (arr: any[], from: number, to: number) => {
   const maxLength = arr.length - 1;
@@ -48,10 +31,6 @@ export const moveToIndex = (arr: any[], from: number, to: number) => {
     throw new Error('Index out of bounds');
   }
   const element = arr[from];
-  const newArr = [...arr.slice(0, from), ...arr.slice(from+1)];
-  return [
-    ...newArr.slice(0, to),
-    element,
-    ...newArr.slice(to)
-  ];
+  const newArr = [...arr.slice(0, from), ...arr.slice(from + 1)];
+  return [...newArr.slice(0, to), element, ...newArr.slice(to)];
 };
diff --git a/client/src/graphql/queries.js b/client/src/graphql/queries.js
index 4d503289..4c4c4e71 100644
--- a/client/src/graphql/queries.js
+++ b/client/src/graphql/queries.js
@@ -5,13 +5,13 @@ export function moduleQuery() {
   return {
     query: MODULE_DETAILS_QUERY,
     variables: {
-      slug: this.$route.params.slug
+      slug: this.$route.params.slug,
     },
   };
 }
 
 export function meQuery() {
   return {
-    query: ME_QUERY
+    query: ME_QUERY,
   };
 }
diff --git a/client/src/graphql/resolvers.js b/client/src/graphql/resolvers.js
index 2734a92c..6341f350 100644
--- a/client/src/graphql/resolvers.js
+++ b/client/src/graphql/resolvers.js
@@ -10,25 +10,25 @@ import {
 // the parts where the mutation is called and then read. But maybe it works by itself already
 export const resolvers = {
   Mutation: {
-    scrollTo: (_, {scrollTo}) => {
+    scrollTo: (_, { scrollTo }) => {
       scrollToElementVar(scrollTo);
       return {
-        scrollTo: scrollToElementVar()
+        scrollTo: scrollToElementVar(),
       };
     },
-    helloEmail: (_, {email}) => {
+    helloEmail: (_, { email }) => {
       helloEmailVar(email);
       return {
-        email: helloEmailVar()
+        email: helloEmailVar(),
       };
     },
-    setInstrumentFilter: (_, {filter}) => {
+    setInstrumentFilter: (_, { filter }) => {
       currentFilterVar(filter);
       return {
-        currentFilter: currentFilterVar()
+        currentFilter: currentFilterVar(),
       };
     },
-    toggleSidebar: (_, {sidebar: {profile, navigation}}) => {
+    toggleSidebar: (_, { sidebar: { profile, navigation } }) => {
       if (typeof profile !== 'undefined') {
         showProfileSidebarVar(profile);
       }
@@ -37,15 +37,15 @@ export const resolvers = {
       }
       return {
         navigation: showNavigationSidebarVar(),
-        profile: showProfileSidebarVar()
+        profile: showProfileSidebarVar(),
       };
     },
     // todo: does this still work?
-    deleteModuleNodes: (_, _query, {cache}) => {
+    deleteModuleNodes: (_, _query, { cache }) => {
       Object.keys(cache.data.data)
-        .filter(prop => prop.indexOf('ModuleNode:') === 0)
-        .map(moduleName => cache.data.delete(moduleName)); // v3 uses .evict{id, fieldname}
-      return {success: true};
+        .filter((prop) => prop.indexOf('ModuleNode:') === 0)
+        .map((moduleName) => cache.data.delete(moduleName)); // v3 uses .evict{id, fieldname}
+      return { success: true };
     },
   },
 };
diff --git a/client/src/graphql/typedefs.js b/client/src/graphql/typedefs.js
index 9ec2ddf6..a0dd7ad5 100644
--- a/client/src/graphql/typedefs.js
+++ b/client/src/graphql/typedefs.js
@@ -22,7 +22,7 @@ export const typeDefs = gql`
   type InstrumentFilter {
     currentFilter: String!
   }
-  
+
   extend type ModuleNode {
     inEditMode: Boolean!
   }
diff --git a/client/src/helpers/add-team.js b/client/src/helpers/add-team.js
index 497c7bca..54e6544f 100644
--- a/client/src/helpers/add-team.js
+++ b/client/src/helpers/add-team.js
@@ -2,7 +2,7 @@ import ME_QUERY from 'gql/queries/meQuery.gql';
 
 const addTeam = (store, team) => {
   const query = ME_QUERY;
-  const data = store.readQuery({query});
+  const data = store.readQuery({ query });
   store.writeQuery({
     query,
     data: {
diff --git a/client/src/helpers/app-flavor.constants.ts b/client/src/helpers/app-flavor.constants.ts
index f986aab8..55a0f020 100644
--- a/client/src/helpers/app-flavor.constants.ts
+++ b/client/src/helpers/app-flavor.constants.ts
@@ -1,4 +1,4 @@
-import type {FlavorValues} from "@/helpers/types";
+import type { FlavorValues } from '@/helpers/types';
 
 export const defaultFlavorValues: FlavorValues = {
   appFlavor: 'skillbox',
@@ -20,7 +20,7 @@ export const defaultFlavorValues: FlavorValues = {
   showInstrumentFilterSidebar: true,
   showPortfolio: true,
   showEHB: true,
-  helloIllustration: () => import('@/components/illustrations/HelloIllustration.vue')
+  helloIllustration: () => import('@/components/illustrations/HelloIllustration.vue'),
 };
 
 export const myKvValues: FlavorValues = {
@@ -43,19 +43,18 @@ export const myKvValues: FlavorValues = {
   showInstrumentFilterSidebar: true,
   showPortfolio: true,
   showEHB: false,
-  helloIllustration: () => import('@/components/illustrations/HelloMyKVIllustration.vue')
+  helloIllustration: () => import('@/components/illustrations/HelloMyKVIllustration.vue'),
 };
 
 export const dhfValues: FlavorValues = Object.assign({}, myKvValues, {
   appFlavor: 'my-dhf',
   appLogo: 'https://skillbox-my-detailhandel-dhf-prod.s3.eu-central-1.amazonaws.com/myDHF-logo.png',
   textAppName: 'myDHF',
-  helloIllustration: () => import('@/components/illustrations/HelloMyDHFIllustration.vue')
-
+  helloIllustration: () => import('@/components/illustrations/HelloMyDHFIllustration.vue'),
 });
 export const dhaValues: FlavorValues = Object.assign({}, myKvValues, {
   appFlavor: 'my-dha',
   appLogo: 'https://skillbox-my-detailhandel-dha-prod.s3.eu-central-1.amazonaws.com/myDHA-logo.png',
   textAppName: 'myDHA',
-  helloIllustration: () => import('@/components/illustrations/HelloMyDHAIllustration.vue')
+  helloIllustration: () => import('@/components/illustrations/HelloMyDHAIllustration.vue'),
 });
diff --git a/client/src/helpers/app-flavor.ts b/client/src/helpers/app-flavor.ts
index 59eaf39d..b4ec27f5 100644
--- a/client/src/helpers/app-flavor.ts
+++ b/client/src/helpers/app-flavor.ts
@@ -1,7 +1,6 @@
 import log from 'loglevel';
-import type {FlavorValues} from "@/helpers/types";
-import {defaultFlavorValues, dhaValues, dhfValues, myKvValues} from "@/helpers/app-flavor.constants";
-
+import type { FlavorValues } from '@/helpers/types';
+import { defaultFlavorValues, dhaValues, dhfValues, myKvValues } from '@/helpers/app-flavor.constants';
 
 let flavorValues: FlavorValues;
 
@@ -21,5 +20,4 @@ switch (process.env.VUE_APP_FLAVOR) {
 
 log.debug('flavorValues', flavorValues);
 
-
 export default flavorValues;
diff --git a/client/src/helpers/date-format.js b/client/src/helpers/date-format.js
index e3dcbbf1..37d970e8 100644
--- a/client/src/helpers/date-format.js
+++ b/client/src/helpers/date-format.js
@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
 
-const dateformat = date => dayjs(date).format('DD.MM.YYYY - HH:mm');
+const dateformat = (date) => dayjs(date).format('DD.MM.YYYY - HH:mm');
 
 export default dateformat;
diff --git a/client/src/helpers/instrumentType.js b/client/src/helpers/instrumentType.js
index 40751ba3..a85a8f85 100644
--- a/client/src/helpers/instrumentType.js
+++ b/client/src/helpers/instrumentType.js
@@ -1,4 +1,4 @@
-import {typeDictionary} from '@/consts/instrument.consts';
+import { typeDictionary } from '@/consts/instrument.consts';
 import flavor from '@/helpers/app-flavor';
 
 const instrumentType = (instrument) => {
@@ -12,9 +12,9 @@ const instrumentType = (instrument) => {
 };
 
 const instrumentCategory = (instrument) => {
-    return `${flavor.textInstruments} - ${instrumentType(instrument)}`;
+  return `${flavor.textInstruments} - ${instrumentType(instrument)}`;
 };
 
 export default instrumentType;
 
-export {instrumentCategory, instrumentType};
+export { instrumentCategory, instrumentType };
diff --git a/client/src/helpers/new-note-mutation.js b/client/src/helpers/new-note-mutation.js
index 281cd2d7..f81b2b60 100644
--- a/client/src/helpers/new-note-mutation.js
+++ b/client/src/helpers/new-note-mutation.js
@@ -3,22 +3,29 @@ import CONTENT_BLOCK_QUERY from '@/graphql/gql/queries/contentBlockQuery.gql';
 import CHAPTER_QUERY from '@/graphql/gql/queries/chapterQuery.gql';
 import INSTRUMENT_FRAGMENT from '@/graphql/gql/fragments/instrumentParts.gql';
 import MODULE_FRAGMENT from '@/graphql/gql/fragments/moduleParts.gql';
-import {replaceAtIndex} from '@/graphql/immutable-operations';
+import { replaceAtIndex } from '@/graphql/immutable-operations';
 
-const compareUuid = note => element => element.uuid === note.content;
+const compareUuid = (note) => (element) => element.uuid === note.content;
 
 export const constructNoteMutation = (n) => {
-  let update = () => {
-  };
+  let update = () => {};
 
-  if (n.block) { // has a block, so it is a content block or instrument bookmark
-    update = (store, {data: {addNote: {note}}}) => {
+  if (n.block) {
+    // has a block, so it is a content block or instrument bookmark
+    update = (
+      store,
+      {
+        data: {
+          addNote: { note },
+        },
+      }
+    ) => {
       if (n.type === 'ContentBlockNode') {
         const query = CONTENT_BLOCK_QUERY;
-        const variables = {id: n.block};
-        const {contentBlock} = store.readQuery({
+        const variables = { id: n.block };
+        const { contentBlock } = store.readQuery({
           query,
-          variables
+          variables,
         });
 
         let bookmarks;
@@ -28,13 +35,9 @@ export const constructNoteMutation = (n) => {
         if (index > -1) {
           const el = {
             ...contentBlock.bookmarks[index],
-            note
+            note,
           };
-          bookmarks = [
-            ...contentBlock.bookmarks.slice(0, index),
-            el,
-            ...contentBlock.bookmarks.slice(index + 1)
-          ];
+          bookmarks = [...contentBlock.bookmarks.slice(0, index), el, ...contentBlock.bookmarks.slice(index + 1)];
         } else {
           bookmarks = [...contentBlock.bookmarks];
         }
@@ -42,24 +45,24 @@ export const constructNoteMutation = (n) => {
         const data = {
           contentBlock: {
             ...contentBlock,
-            bookmarks
-          }
+            bookmarks,
+          },
         };
 
         store.writeQuery({
           data,
           query,
-          variables
+          variables,
         });
       } else {
         const fragment = INSTRUMENT_FRAGMENT;
         const id = store.identify({
           __typename: 'InstrumentNode',
-          slug: n.block
+          slug: n.block,
         });
         const instrument = store.readFragment({
           fragment,
-          id
+          id,
         });
 
         const prevBookmarks = instrument.bookmarks;
@@ -71,37 +74,45 @@ export const constructNoteMutation = (n) => {
           let el = prevBookmarks[index];
           bookmarks = replaceAtIndex(prevBookmarks, index, {
             ...el,
-            note
+            note,
           });
         } else {
           bookmarks = [...prevBookmarks];
         }
 
-       const data = {
+        const data = {
           ...instrument,
-         bookmarks
-       };
+          bookmarks,
+        };
 
         store.writeFragment({
           data,
           fragment,
-          id
+          id,
         });
       }
     };
-  } else { // it's a chapter bookmark or a module bookmark
-    update = (store, {data: {addNote: {note}}}) => {
+  } else {
+    // it's a chapter bookmark or a module bookmark
+    update = (
+      store,
+      {
+        data: {
+          addNote: { note },
+        },
+      }
+    ) => {
       const type = n.type === 'module' ? 'module' : 'chapter';
       const isChapter = type === 'chapter';
       let query;
       let variables;
       let fromStore;
-      if(isChapter) {
-        variables = {id: n.parent};
+      if (isChapter) {
+        variables = { id: n.parent };
         query = CHAPTER_QUERY;
         fromStore = store.readQuery({
           query,
-          variables
+          variables,
         });
 
         console.log('fromStore', fromStore);
@@ -109,45 +120,44 @@ export const constructNoteMutation = (n) => {
         const entity = fromStore[type];
         let bookmark = {
           ...entity.bookmark,
-          note
+          note,
         };
 
         const data = {
           [type]: {
             ...entity,
-            bookmark
-          }
+            bookmark,
+          },
         };
 
         store.writeQuery({
           data,
           query,
-          variables
+          variables,
         });
       } else {
-        let fragment =  MODULE_FRAGMENT;
+        let fragment = MODULE_FRAGMENT;
         let id = store.identify({
-            __typename: 'ModuleNode',
-            slug: n.parent
-          });
+          __typename: 'ModuleNode',
+          slug: n.parent,
+        });
         const module = store.readFragment({
           fragment,
-          id
+          id,
+        });
+        let bookmark = {
+          ...module.bookmark,
+          note,
+        };
+        let data = {
+          ...module,
+          bookmark,
+        };
+        store.writeFragment({
+          fragment,
+          id,
+          data,
         });
-      let bookmark = {
-        ...module.bookmark,
-        note
-      };
-      let data = {
-        ...module,
-        bookmark
-      };
-      store.writeFragment({
-        fragment,
-        id,
-        data
-      });
-
       }
     };
   }
@@ -156,8 +166,8 @@ export const constructNoteMutation = (n) => {
     mutation: ADD_NOTE_MUTATION,
     variables: {
       input: {
-        note: n
-      }
+        note: n,
+      },
     },
     update,
     optimisticResponse: {
@@ -167,9 +177,9 @@ export const constructNoteMutation = (n) => {
         note: {
           __typename: 'NoteNode',
           id: -1,
-          text: n.text
-        }
-      }
-    }
+          text: n.text,
+        },
+      },
+    },
   };
 };
diff --git a/client/src/helpers/sorting.js b/client/src/helpers/sorting.js
index 079c2eb0..9d50f9c2 100644
--- a/client/src/helpers/sorting.js
+++ b/client/src/helpers/sorting.js
@@ -1 +1 @@
-export const withoutOwnerFirst = (a) => a.owner ? 1 : -1;
+export const withoutOwnerFirst = (a) => (a.owner ? 1 : -1);
diff --git a/client/src/helpers/survey-solutions.js b/client/src/helpers/survey-solutions.js
index 7d02c80f..4709f254 100644
--- a/client/src/helpers/survey-solutions.js
+++ b/client/src/helpers/survey-solutions.js
@@ -6,15 +6,15 @@ const extractAnswerFromQuestion = (previous, question) => {
   if (question.getType() === 'matrix') {
     const correctAnswer = question.correctAnswer;
     const questionRows = question.getRows();
-    const keys = questionRows.map(question => question.value); // get the keys as they appear in the question
+    const keys = questionRows.map((question) => question.value); // get the keys as they appear in the question
 
-    answer = keys.map(key => {
+    answer = keys.map((key) => {
       let keyWithoutPunctuation = /[,.!?]/.test(key.slice(-1)) ? key.slice(0, -1) : key; // the last character might be a period, comma, question or exclamation mark. If not, we just return the key as-is
       let answer = correctAnswer[key] || correctAnswer[keyWithoutPunctuation]; // the key might be with or without the punctuation, can be inconsistent depending on the survey
       return `${keyWithoutPunctuation}: ${answer}`; // return the key without punctuation, as we add the colon
     }); // return an array, it gets converted to a string further up
   }
-  return [...previous, {title: question.title, answer, type: question.getType()}];
+  return [...previous, { title: question.title, answer, type: question.getType() }];
 };
 
 export const extractSurveySolutions = (prev, element) => {
diff --git a/client/src/helpers/teaser.js b/client/src/helpers/teaser.js
index 5ffa3e92..959c37d8 100644
--- a/client/src/helpers/teaser.js
+++ b/client/src/helpers/teaser.js
@@ -1,6 +1,6 @@
 export default (contents) => {
   if (contents && contents.length) {
-    let first = contents.find(content => content.type !== 'image_url_block');
+    let first = contents.find((content) => content.type !== 'image_url_block');
     if (first && first.type) {
       let parts;
       switch (first.type) {
diff --git a/client/src/helpers/text.js b/client/src/helpers/text.js
index 14d2ec76..65d515e9 100644
--- a/client/src/helpers/text.js
+++ b/client/src/helpers/text.js
@@ -1,7 +1,7 @@
 // taken from https://gomakethings.com/how-to-sanitize-html-strings-with-vanilla-js-to-reduce-your-risk-of-xss-attacks/
-const getDocument = html => new DOMParser().parseFromString(html, 'text/html');
+const getDocument = (html) => new DOMParser().parseFromString(html, 'text/html');
 
-const removeScripts = html => {
+const removeScripts = (html) => {
   let scripts = html.querySelectorAll('script');
   for (let script of scripts) {
     script.remove();
@@ -10,11 +10,11 @@ const removeScripts = html => {
 
 // explicitly whitelist
 // todo: do we need more attributes whitelisted
-const isSafe = attr => {
+const isSafe = (attr) => {
   return ['class'].includes(attr.name);
 };
 
-const removeAttributes = node => {
+const removeAttributes = (node) => {
   let attributes = [...node.attributes];
   console.log(attributes);
   for (const attr of attributes) {
@@ -25,7 +25,7 @@ const removeAttributes = node => {
   }
 };
 
-const clean = node => {
+const clean = (node) => {
   let nodes = node.children;
   for (let node of nodes) {
     removeAttributes(node);
@@ -33,12 +33,12 @@ const clean = node => {
   }
 };
 
-export const sanitize = html => {
+export const sanitize = (html) => {
   let doc = getDocument(html);
   return doc.body.textContent || '';
 };
 
-export const sanitizeAsHtml = html => {
+export const sanitizeAsHtml = (html) => {
   let doc = getDocument(html);
   const body = doc.body || document.createElement('body');
   removeScripts(body);
@@ -46,11 +46,10 @@ export const sanitizeAsHtml = html => {
   return body.innerHTML;
 };
 
-
 export const newLineToParagraph = (text) => {
   return text
     .split(/\n+/)
-    .map(sanitize)// sanitize after the split, because the sanitizer would probably remove the newlines
-    .map(p => `<p>${p}</p>`)
+    .map(sanitize) // sanitize after the split, because the sanitizer would probably remove the newlines
+    .map((p) => `<p>${p}</p>`)
     .join('');
 };
diff --git a/client/src/helpers/types.ts b/client/src/helpers/types.ts
index 79a75b30..f3f7ff51 100644
--- a/client/src/helpers/types.ts
+++ b/client/src/helpers/types.ts
@@ -14,5 +14,5 @@ export interface FlavorValues {
   showInstrumentFilterSidebar: boolean;
   showPortfolio: boolean;
   showEHB: boolean;
-  helloIllustration: () => Promise<any>
+  helloIllustration: () => Promise<any>;
 }
diff --git a/client/src/helpers/update-content-bookmark-mutation.js b/client/src/helpers/update-content-bookmark-mutation.js
index 1c6c674b..a7576fbf 100644
--- a/client/src/helpers/update-content-bookmark-mutation.js
+++ b/client/src/helpers/update-content-bookmark-mutation.js
@@ -2,9 +2,9 @@ import UPDATE_CONTENT_BOOKMARK from '@/graphql/gql/mutations/updateContentBookma
 import UPDATE_INSTRUMENT_BOOKMARK from '@/graphql/gql/mutations/updateInstrumentBookmark.gql';
 import CONTENT_BLOCK_QUERY from '@/graphql/gql/queries/contentBlockQuery.gql';
 import INSTRUMENT_FRAGMENT from '@/graphql/gql/fragments/instrumentParts.gql';
-import {pushToArray, removeAtIndex} from '@/graphql/immutable-operations';
+import { pushToArray, removeAtIndex } from '@/graphql/immutable-operations';
 
-const compareUuid = uuid => element => element.uuid === uuid;
+const compareUuid = (uuid) => (element) => element.uuid === uuid;
 
 export const constructContentComponentBookmarkMutation = (uuid, bookmarked, parent, root) => {
   let mutation = {};
@@ -16,18 +16,18 @@ export const constructContentComponentBookmarkMutation = (uuid, bookmarked, pare
         input: {
           uuid,
           instrument: root,
-          bookmarked
-        }
+          bookmarked,
+        },
       },
       update: (store) => {
         const fragment = INSTRUMENT_FRAGMENT;
         const id = store.identify({
           __typename: 'InstrumentNode',
-          slug: root
+          slug: root,
         });
         const instrument = store.readFragment({
           fragment,
-          id
+          id,
         });
 
         let bookmarks;
@@ -36,7 +36,7 @@ export const constructContentComponentBookmarkMutation = (uuid, bookmarked, pare
           const element = {
             note: null,
             uuid,
-            __typename: 'InstrumentBookmarkNode'
+            __typename: 'InstrumentBookmarkNode',
           };
           bookmarks = pushToArray(instrument.bookmarks, element);
         } else {
@@ -50,22 +50,22 @@ export const constructContentComponentBookmarkMutation = (uuid, bookmarked, pare
 
         const data = {
           ...instrument,
-          bookmarks
+          bookmarks,
         };
 
         store.writeFragment({
           data,
           fragment,
-          id
+          id,
         });
       },
       optimisticResponse: {
         __typename: 'Mutation',
         updateInstrumentBookmark: {
           __typename: 'UpdateInstrumentBookmarkPayload',
-          success: true
-        }
-      }
+          success: true,
+        },
+      },
     };
   } else {
     mutation = {
@@ -74,15 +74,15 @@ export const constructContentComponentBookmarkMutation = (uuid, bookmarked, pare
         input: {
           uuid,
           contentBlock: root,
-          bookmarked
-        }
+          bookmarked,
+        },
       },
       update: (store) => {
         const query = CONTENT_BLOCK_QUERY;
-        const variables = {id: root};
-        const {contentBlock} = store.readQuery({
+        const variables = { id: root };
+        const { contentBlock } = store.readQuery({
           query,
-          variables
+          variables,
         });
 
         // const bookmarks = data.contentBlock.bookmarks;
@@ -92,7 +92,7 @@ export const constructContentComponentBookmarkMutation = (uuid, bookmarked, pare
           let element = {
             note: null,
             uuid,
-            __typename: 'ContentBlockBookmarkNode'
+            __typename: 'ContentBlockBookmarkNode',
           };
           bookmarks = pushToArray(contentBlock.bookmarks, element);
         } else {
@@ -107,23 +107,23 @@ export const constructContentComponentBookmarkMutation = (uuid, bookmarked, pare
         const data = {
           contentBlock: {
             ...contentBlock,
-            bookmarks
-          }
+            bookmarks,
+          },
         };
 
         store.writeQuery({
           data,
           query,
-          variables
+          variables,
         });
       },
       optimisticResponse: {
         __typename: 'Mutation',
         updateContentBookmark: {
           __typename: 'UpdateContentBookmarkPayload',
-          success: true
-        }
-      }
+          success: true,
+        },
+      },
     };
   }
   return mutation;
diff --git a/client/src/helpers/uploadcare.js b/client/src/helpers/uploadcare.js
index c406d2f9..efdaabac 100644
--- a/client/src/helpers/uploadcare.js
+++ b/client/src/helpers/uploadcare.js
@@ -1,5 +1,5 @@
-export const uploadcare = (component, callback, onStart = () => {}) => import(/* webpackChunkName: "uploadcare" */'uploadcare-widget')
-  .then(module => {
+export const uploadcare = (component, callback, onStart = () => {}) =>
+  import(/* webpackChunkName: "uploadcare" */ 'uploadcare-widget').then((module) => {
     const uploadcareWidget = module.default;
 
     const uploadcarePanel = uploadcareWidget.openPanel(component.$refs['uploadcare-panel'], null, {
@@ -10,14 +10,16 @@ export const uploadcare = (component, callback, onStart = () => {}) => import(/*
     setTimeout(() => {
       const formElem = component.$refs['documentform'];
       if (formElem.getElementsByClassName('uploadcare--text_size_extra-large').length > 1) {
-        formElem.getElementsByClassName('uploadcare--text_size_extra-large')[1].innerText = 'Ziehen Sie ein Dokument hier hinein';
-        formElem.getElementsByClassName('uploadcare--tab__action-button')[0].innerText = 'Wählen Sie ein lokales Dokument';
+        formElem.getElementsByClassName('uploadcare--text_size_extra-large')[1].innerText =
+          'Ziehen Sie ein Dokument hier hinein';
+        formElem.getElementsByClassName('uploadcare--tab__action-button')[0].innerText =
+          'Wählen Sie ein lokales Dokument';
       }
     }, 0);
 
-    return uploadcarePanel.done(panelResult => {
+    return uploadcarePanel.done((panelResult) => {
       onStart();
-      panelResult.done(fileInfo => {
+      panelResult.done((fileInfo) => {
         let urlWithFilename = fileInfo.cdnUrl + fileInfo.name;
         callback(urlWithFilename);
       });
diff --git a/client/src/helpers/urls.js b/client/src/helpers/urls.js
index cabb2ee9..4b2c7133 100644
--- a/client/src/helpers/urls.js
+++ b/client/src/helpers/urls.js
@@ -1,6 +1,8 @@
 export default function filenameFromUrl(url) {
   const index = url.lastIndexOf('/');
 
-  if (index === -1) { return url; }
+  if (index === -1) {
+    return url;
+  }
   return url.substring(index + 1);
 }
diff --git a/client/src/helpers/visibility.js b/client/src/helpers/visibility.js
index 0598d34c..57dd6931 100644
--- a/client/src/helpers/visibility.js
+++ b/client/src/helpers/visibility.js
@@ -3,7 +3,7 @@ import {
   CHAPTER_TITLE_TYPE,
   CONTENT_TYPE,
   OBJECTIVE_GROUP_TYPE,
-  OBJECTIVE_TYPE
+  OBJECTIVE_TYPE,
 } from '@/consts/types';
 import EDIT_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/editContentBlock.gql';
 import UPDATE_OBJECTIVE_VISIBILITY_MUTATION from '@/graphql/gql/mutations/updateObjectiveVisibility.gql';
@@ -19,9 +19,9 @@ export const createVisibilityMutation = (type, id, visibility) => {
         input: {
           id,
           contentBlock: {
-            visibility
-          }
-        }
+            visibility,
+          },
+        },
       };
       break;
     case OBJECTIVE_TYPE:
@@ -29,8 +29,8 @@ export const createVisibilityMutation = (type, id, visibility) => {
       variables = {
         input: {
           id,
-          visibility
-        }
+          visibility,
+        },
       };
       break;
     case OBJECTIVE_GROUP_TYPE:
@@ -38,8 +38,8 @@ export const createVisibilityMutation = (type, id, visibility) => {
       variables = {
         input: {
           id,
-          visibility
-        }
+          visibility,
+        },
       };
       break;
     case CHAPTER_TITLE_TYPE:
@@ -49,32 +49,25 @@ export const createVisibilityMutation = (type, id, visibility) => {
         input: {
           id,
           type,
-          visibility
-        }
+          visibility,
+        },
       };
       break;
   }
 
   return {
     mutation,
-    variables
+    variables,
   };
 };
 
-const containsClass = (arr = [], schoolClass) => arr.map(entry => entry.id).includes(schoolClass.id);
+const containsClass = (arr = [], schoolClass) => arr.map((entry) => entry.id).includes(schoolClass.id);
 
 export const hidden = ({
-                         type,
-                         block: {
-                           userCreated,
-                           visibleFor,
-                           hiddenFor,
-                           titleHiddenFor,
-                           descriptionHiddenFor,
-                           hidden
-                         },
-                         schoolClass
-                       }) => {
+  type,
+  block: { userCreated, visibleFor, hiddenFor, titleHiddenFor, descriptionHiddenFor, hidden },
+  schoolClass,
+}) => {
   if (hidden === true) {
     return true;
   }
@@ -83,10 +76,10 @@ export const hidden = ({
     case OBJECTIVE_TYPE:
       // is this content block / objective group user created?
       return userCreated
-        // if so, is visibility not explicitly set for this school class?
-        ? !containsClass(visibleFor, schoolClass)
-        // otherwise, is it explicitly hidden for this school class?
-        : containsClass(hiddenFor, schoolClass);
+        ? // if so, is visibility not explicitly set for this school class?
+          !containsClass(visibleFor, schoolClass)
+        : // otherwise, is it explicitly hidden for this school class?
+          containsClass(hiddenFor, schoolClass);
     case OBJECTIVE_GROUP_TYPE:
       return containsClass(hiddenFor, schoolClass);
     case CHAPTER_TITLE_TYPE:
diff --git a/client/src/layouts/BlankLayout.vue b/client/src/layouts/BlankLayout.vue
index fc6edb5d..53280f11 100644
--- a/client/src/layouts/BlankLayout.vue
+++ b/client/src/layouts/BlankLayout.vue
@@ -5,10 +5,10 @@
 </template>
 
 <style lang="scss">
-  .blank-layout {
-    /*
+.blank-layout {
+  /*
       For IE11
     */
-    display: flex;
-  }
+  display: flex;
+}
 </style>
diff --git a/client/src/layouts/DefaultFooter.vue b/client/src/layouts/DefaultFooter.vue
index c624823b..a68ad8ea 100644
--- a/client/src/layouts/DefaultFooter.vue
+++ b/client/src/layouts/DefaultFooter.vue
@@ -1,158 +1,131 @@
 <template>
-  <footer
-    class="default-footer"
-    data-cy="page-footer"
-  >
+  <footer class="default-footer" data-cy="page-footer">
     <div class="default-footer__section">
       <div class="default-footer__info">
         <div class="default-footer__who-are-we who-are-we">
-          <h5 class="who-are-we__title">
-            Wer sind wir?
-          </h5>
+          <h5 class="who-are-we__title">Wer sind wir?</h5>
           <p class="who-are-we__text">
-            mySkillbox ist ein Angebot des hep Verlags in
-            Zusammenarbeit mit der Eidgenössischen Hochschule für Berufsbildung (EHB).
+            mySkillbox ist ein Angebot des hep Verlags in Zusammenarbeit mit der Eidgenössischen Hochschule für
+            Berufsbildung (EHB).
           </p>
         </div>
 
-        <a
-          href="https://www.hep-verlag.ch/"
-          target="_blank"
-        >
+        <a href="https://www.hep-verlag.ch/" target="_blank">
           <hep-logo class="default-footer__logo-hep" />
         </a>
-        <a
-          href="https://www.ehb.swiss/"
-          target="_blank"
-        >
+        <a href="https://www.ehb.swiss/" target="_blank">
           <ehb-logo class="default-footer__logo-ehb" />
         </a>
       </div>
     </div>
     <div class="default-footer__section">
       <div class="default-footer__links">
-        <a
-          href="https://myskillbox.ch/datenschutz"
-          target="_blank"
-          class="default-footer__link"
-        >Datenschutz</a>
-        <a
-          href="https://myskillbox.ch/impressum"
-          target="_blank"
-          class="default-footer__link"
-        >Impressum</a>
-        <a
-          href="https://myskillbox.ch/agb"
-          target="_blank"
-          class="default-footer__link"
-        >AGB</a>
-        <a
-          :href="$flavor.supportLink"
-          target="_blank"
-          class="default-footer__link"
-        >Support</a>
+        <a href="https://myskillbox.ch/datenschutz" target="_blank" class="default-footer__link">Datenschutz</a>
+        <a href="https://myskillbox.ch/impressum" target="_blank" class="default-footer__link">Impressum</a>
+        <a href="https://myskillbox.ch/agb" target="_blank" class="default-footer__link">AGB</a>
+        <a :href="$flavor.supportLink" target="_blank" class="default-footer__link">Support</a>
       </div>
     </div>
   </footer>
 </template>
 
 <script>
-  const HepLogo = () => import(/* webpackChunkName: "icons" */'@/components/icons/HepLogo');
-  const EhbLogo = () => import(/* webpackChunkName: "icons" */'@/components/icons/EhbLogo');
+const HepLogo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/HepLogo');
+const EhbLogo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EhbLogo');
 
-  export default {
-    components: {
-      HepLogo,
-      EhbLogo
-    }
-  };
+export default {
+  components: {
+    HepLogo,
+    EhbLogo,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
-  .default-footer {
-    background-color: $color-silver-light;
-    max-width: 100vw;
-    overflow: hidden;
+.default-footer {
+  background-color: $color-silver-light;
+  max-width: 100vw;
+  overflow: hidden;
 
-    &__section {
-      width: 100%;
-      border-bottom: $color-silver 1px solid;
-      display: flex;
-      justify-content: center;
-    }
+  &__section {
+    width: 100%;
+    border-bottom: $color-silver 1px solid;
+    display: flex;
+    justify-content: center;
+  }
 
-    &__info {
-      width: 100%;
-      max-width: $footer-width;
-      padding: 2*$large-spacing 0;
-      display: flex;
-      flex-direction: column;
+  &__info {
+    width: 100%;
+    max-width: $footer-width;
+    padding: 2 * $large-spacing 0;
+    display: flex;
+    flex-direction: column;
 
-      @include desktop {
-        flex-direction: row;
-        justify-content: space-between;
-      }
-    }
-
-    &__who-are-we {
-      width: 100%;
-      margin-bottom: $large-spacing;
-
-      @include desktop {
-        width: 330px;
-        margin-bottom: 0;
-      }
-    }
-
-    &__logo-hep {
-      width: auto;
-      height: 35px;
-      margin-bottom: $large-spacing;
-
-      @include desktop {
-        width: 147px;
-        margin-bottom: 0;
-      }
-    }
-
-    &__logo-ehb {
-      width: 100px;
-      height: 32px;
-    }
-
-    &__links {
-      width: 100%;
-      max-width: $footer-width;
-      padding: $large-spacing 0;
-      display: flex;
-      flex-direction: column;
-
-      @include desktop {
-        flex-direction: row;
-      }
-    }
-
-    &__link {
-      @include aside-with-cheese;
-      margin-right: $large-spacing;
-      margin-bottom: $small-spacing;
-
-      @include desktop {
-        margin-bottom: 0;
-      }
+    @include desktop {
+      flex-direction: row;
+      justify-content: space-between;
     }
   }
 
-  .who-are-we {
-    &__title {
-      @include heading-4;
-    }
+  &__who-are-we {
+    width: 100%;
+    margin-bottom: $large-spacing;
 
-    &__text {
-      @include aside-text;
+    @include desktop {
+      width: 330px;
+      margin-bottom: 0;
     }
   }
+
+  &__logo-hep {
+    width: auto;
+    height: 35px;
+    margin-bottom: $large-spacing;
+
+    @include desktop {
+      width: 147px;
+      margin-bottom: 0;
+    }
+  }
+
+  &__logo-ehb {
+    width: 100px;
+    height: 32px;
+  }
+
+  &__links {
+    width: 100%;
+    max-width: $footer-width;
+    padding: $large-spacing 0;
+    display: flex;
+    flex-direction: column;
+
+    @include desktop {
+      flex-direction: row;
+    }
+  }
+
+  &__link {
+    @include aside-with-cheese;
+    margin-right: $large-spacing;
+    margin-bottom: $small-spacing;
+
+    @include desktop {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.who-are-we {
+  &__title {
+    @include heading-4;
+  }
+
+  &__text {
+    @include aside-text;
+  }
+}
 </style>
diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue
index 3de19670..3124b4f7 100644
--- a/client/src/layouts/DefaultLayout.vue
+++ b/client/src/layouts/DefaultLayout.vue
@@ -1,62 +1,50 @@
 <template>
-  <div
-    :class="specialContainerClass"
-    class="container skillbox layout"
-  >
+  <div :class="specialContainerClass" class="container skillbox layout">
     <navigation-sidebar />
     <profile-sidebar />
-    <header-bar
-      class="header layout__header"
-      v-if="showHeader"
-    />
+    <header-bar class="header layout__header" v-if="showHeader" />
 
-    <router-view
-      class="layout__content"
-      :key="$route.fullPath"
-    />
-    <default-footer
-      class="layout__footer"
-      v-if="enableFooter"
-    />
+    <router-view class="layout__content" :key="$route.fullPath" />
+    <default-footer class="layout__footer" v-if="enableFooter" />
   </div>
 </template>
 
 <script>
-  import HeaderBar from '@/components/HeaderBar';
-  import ProfileSidebar from '@/components/profile/ProfileSidebar';
-  import DefaultFooter from '@/layouts/DefaultFooter';
-  import NavigationSidebar from '@/components/book-navigation/NavigationSidebar';
+import HeaderBar from '@/components/HeaderBar';
+import ProfileSidebar from '@/components/profile/ProfileSidebar';
+import DefaultFooter from '@/layouts/DefaultFooter';
+import NavigationSidebar from '@/components/book-navigation/NavigationSidebar';
 
-  export default {
-    components: {
-      HeaderBar,
-      ProfileSidebar,
-      NavigationSidebar,
-      DefaultFooter
+export default {
+  components: {
+    HeaderBar,
+    ProfileSidebar,
+    NavigationSidebar,
+    DefaultFooter,
+  },
+
+  computed: {
+    showFilter() {
+      return this.$route.meta.filter;
     },
-
-    computed: {
-      showFilter() {
-        return this.$route.meta.filter;
-      },
-      showHeader() {
-        return !this.$route.meta.hideHeader;
-      },
-      specialContainerClass() {
-        let cls = this.$store.state.specialContainerClass;
-        let metaClass = this.$route.meta.pageClass;
-        let classes = [{'skillbox--show-filter': this.showFilter}];
-        if(cls) {
-         classes.push(`layout--${cls}`);
-        }
-        if(metaClass) {
-          classes.push(`layout--${metaClass}`);
-        }
-        return classes;
-      },
-      enableFooter() {
-        return this.$flavor.showFooter && (!this.$route.meta || !this.$route.meta.hideFooter);
+    showHeader() {
+      return !this.$route.meta.hideHeader;
+    },
+    specialContainerClass() {
+      let cls = this.$store.state.specialContainerClass;
+      let metaClass = this.$route.meta.pageClass;
+      let classes = [{ 'skillbox--show-filter': this.showFilter }];
+      if (cls) {
+        classes.push(`layout--${cls}`);
       }
-    }
-  };
+      if (metaClass) {
+        classes.push(`layout--${metaClass}`);
+      }
+      return classes;
+    },
+    enableFooter() {
+      return this.$flavor.showFooter && (!this.$route.meta || !this.$route.meta.hideFooter);
+    },
+  },
+};
 </script>
diff --git a/client/src/layouts/FullScreenLayout.vue b/client/src/layouts/FullScreenLayout.vue
index f3422db1..309c027b 100644
--- a/client/src/layouts/FullScreenLayout.vue
+++ b/client/src/layouts/FullScreenLayout.vue
@@ -1,12 +1,6 @@
 <template>
-  <div
-    :class="specialContainerClass"
-    class="container layout layout--fullscreen"
-  >
-    <div
-      class="close-button"
-      @click="back"
-    >
+  <div :class="specialContainerClass" class="container layout layout--fullscreen">
+    <div class="close-button" @click="back">
       <cross class="close-button__icon" />
     </div>
 
@@ -15,38 +9,37 @@
 </template>
 
 <script>
-  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
+const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
 
-  export default {
-    components: {
-      Cross
-    },
+export default {
+  components: {
+    Cross,
+  },
 
-    computed: {
-      specialContainerClass() {
-        let cls = this.$store.state.specialContainerClass;
-        return [cls ? `skillbox--${cls}` : ''];
-      }
+  computed: {
+    specialContainerClass() {
+      let cls = this.$store.state.specialContainerClass;
+      return [cls ? `skillbox--${cls}` : ''];
     },
-    methods: {
-      back() {
-        this.$router.go(-1);
-      }
-    }
-  };
+  },
+  methods: {
+    back() {
+      this.$router.go(-1);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  @import "@/styles/_default-layout.scss";
+@import '@/styles/_default-layout.scss';
 
-  .close-button {
-    margin-top: $medium-spacing;
-    margin-right: $medium-spacing;
-    justify-self: end;
-    cursor: pointer;
-
-    display:flex;
-    justify-content:flex-end;
-  }
+.close-button {
+  margin-top: $medium-spacing;
+  margin-right: $medium-spacing;
+  justify-self: end;
+  cursor: pointer;
 
+  display: flex;
+  justify-content: flex-end;
+}
 </style>
diff --git a/client/src/layouts/PublicLayout.vue b/client/src/layouts/PublicLayout.vue
index ce2a7640..83152953 100644
--- a/client/src/layouts/PublicLayout.vue
+++ b/client/src/layouts/PublicLayout.vue
@@ -1,79 +1,73 @@
 <template>
   <div class="layout layout--public public">
     <div class="public__logo">
-      <router-link
-        :to="{name: 'hello'}"
-        class="hep-link"
-      >
+      <router-link :to="{ name: 'hello' }" class="hep-link">
         <logo />
       </router-link>
     </div>
     <router-view class="public__content layout__content" />
-    <default-footer
-      class="skillbox__footer public__footer footer"
-      v-if="$flavor.showFooter"
-    />
+    <default-footer class="skillbox__footer public__footer footer" v-if="$flavor.showFooter" />
   </div>
 </template>
 <script>
-  import DefaultFooter from '@/layouts/DefaultFooter';
+import DefaultFooter from '@/layouts/DefaultFooter';
 
-  const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
+const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
 
-  export default {
-    components: {
-      Logo,
-      DefaultFooter
-    },
-  };
+export default {
+  components: {
+    Logo,
+    DefaultFooter,
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
-  @import "@/styles/_default-layout.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
+@import '@/styles/_default-layout.scss';
 
-  @mixin content-block {
-    padding-right: $medium-spacing;
-    padding-left: $medium-spacing;
-    max-width: 800px;
-    min-width: 320px;
-    width: 100%;
-    margin: 0 auto;
-  }
+@mixin content-block {
+  padding-right: $medium-spacing;
+  padding-left: $medium-spacing;
+  max-width: 800px;
+  min-width: 320px;
+  width: 100%;
+  margin: 0 auto;
+}
 
-  .logo {
-    position: relative;
+.logo {
+  position: relative;
 
+  width: auto;
+  height: 43px;
+}
+
+.public {
+  grid-template-areas: 'h' 'c' 'f';
+
+  &__content {
+    @include content-block();
+    margin-bottom: $large-spacing;
     width: auto;
-    height: 43px;
   }
 
-  .public {
-    grid-template-areas: "h" "c" "f";
-
-    &__content {
-      @include content-block();
-      margin-bottom: $large-spacing;
-      width: auto;
-    }
-
-    &__logo {
-      @include content-block();
-      margin-top: $medium-spacing
-    }
-
-    &__footer {
-      background-color: $color-silver-light;
-      display: block;
-    }
+  &__logo {
+    @include content-block();
+    margin-top: $medium-spacing;
   }
 
-  .footer {
-    padding: $large-spacing $medium-spacing 0;
-
-    &__content {
-      @include content-block();
-    }
+  &__footer {
+    background-color: $color-silver-light;
+    display: block;
   }
+}
+
+.footer {
+  padding: $large-spacing $medium-spacing 0;
+
+  &__content {
+    @include content-block();
+  }
+}
 </style>
diff --git a/client/src/layouts/SimpleFooter.vue b/client/src/layouts/SimpleFooter.vue
index 36342a36..e60990e4 100644
--- a/client/src/layouts/SimpleFooter.vue
+++ b/client/src/layouts/SimpleFooter.vue
@@ -1,8 +1,6 @@
 <template>
   <footer class="simple-footer">
-    <p class="simple-footer__strong">
-      Copyright © 2022 hep Verlag, in Zusammenarbeit mit der EHB
-    </p>
+    <p class="simple-footer__strong">Copyright © 2022 hep Verlag, in Zusammenarbeit mit der EHB</p>
     <p class="simple-footer__regular">
       Alle Inhalte von mySkillbox, insbesondere Texte und Grafiken, sind urheberrechtlich geschützt.
     </p>
@@ -10,33 +8,33 @@
 </template>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
-  .simple-footer {
-    width: 100%;
-    justify-self: center;
-    padding: $large-spacing $small-spacing;
-    background-color: $color-silver-light;
-    display: grid;
-    grid-template-columns: 0 1fr 0;
-    box-sizing: border-box;
-    overflow: hidden;
-    height: 105px;
+.simple-footer {
+  width: 100%;
+  justify-self: center;
+  padding: $large-spacing $small-spacing;
+  background-color: $color-silver-light;
+  display: grid;
+  grid-template-columns: 0 1fr 0;
+  box-sizing: border-box;
+  overflow: hidden;
+  height: 105px;
 
-    @include desktop {
-      grid-template-columns: 1fr $footer-width 1fr;
-    }
-
-    &__strong {
-      @include aside-with-cheese;
-      font-weight: 600;
-      grid-column: 2;
-    }
-
-    &__regular {
-      @include aside-text;
-      grid-column: 2;
-    }
+  @include desktop {
+    grid-template-columns: 1fr $footer-width 1fr;
   }
+
+  &__strong {
+    @include aside-with-cheese;
+    font-weight: 600;
+    grid-column: 2;
+  }
+
+  &__regular {
+    @include aside-text;
+    grid-column: 2;
+  }
+}
 </style>
diff --git a/client/src/layouts/SimpleLayout.vue b/client/src/layouts/SimpleLayout.vue
index 52649d8c..e161ac0c 100644
--- a/client/src/layouts/SimpleLayout.vue
+++ b/client/src/layouts/SimpleLayout.vue
@@ -1,107 +1,98 @@
 <template>
-  <div
-    :class="{'layout--full-width': $route.meta.fullWidth}"
-    class="skillbox layout layout--simple"
-  >
-    <div
-      class="close-button"
-      @click="back"
-    >
+  <div :class="{ 'layout--full-width': $route.meta.fullWidth }" class="skillbox layout layout--simple">
+    <div class="close-button" @click="back">
       <cross class="close-button__icon" />
     </div>
     <router-view class="layout__content" />
-    <simple-footer
-      class="layout__footer"
-      v-if="enableFooter"
-    />
+    <simple-footer class="layout__footer" v-if="enableFooter" />
   </div>
 </template>
 
 <script>
-  import SimpleFooter from '@/layouts/SimpleFooter';
+import SimpleFooter from '@/layouts/SimpleFooter';
 
-  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
+const Cross = () => import(/* webpackChunkName: "icons" */ '@/components/icons/CrossIcon');
 
-  export default {
-    components: {
-      Cross,
-      SimpleFooter
-    },
+export default {
+  components: {
+    Cross,
+    SimpleFooter,
+  },
 
-    computed: {
-      enableFooter() {
-        if (this.$route.meta.hideFooter) {
-          return false;
-        }
-        return this.$flavor.showFooter;
+  computed: {
+    enableFooter() {
+      if (this.$route.meta.hideFooter) {
+        return false;
       }
+      return this.$flavor.showFooter;
     },
+  },
 
-    methods: {
-      back() {
-        this.$router.go(-1);
-      }
-    }
-  };
+  methods: {
+    back() {
+      this.$router.go(-1);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .layout {
-    &--simple {
-      display: -ms-grid;
-      @supports (display: grid) {
-        display: grid;
-      }
-
-      width: 100%;
-
-      @include desktop {
-        grid-template-columns: 1fr 640px 1fr;
-        grid-template-rows: 60px auto-fill 105px;
-        -ms-grid-columns: 1fr 640px 1fr;
-
-        & > :nth-child(2) {
-          grid-column: 2;
-          -ms-grid-column: 2;
-        }
-      }
+.layout {
+  &--simple {
+    display: -ms-grid;
+    @supports (display: grid) {
+      display: grid;
     }
 
-    $parent: &;
-
-    &--full-width {
-      #{$parent}__content {
-        grid-column: 1 / span 3;
-        grid-row: 1 / span 2;
-      }
-    }
-
-    &__footer {
-      @include desktop {
-        grid-column: 1 / span 3;
-      }
-    }
-  }
-
-  .close-button {
-    justify-self: end;
-    cursor: pointer;
-
-    display:flex;
-    justify-content:flex-end;
-
-    margin-right: $small-spacing;
-    margin-top: $small-spacing;
+    width: 100%;
 
     @include desktop {
-      grid-column: 3;
-      grid-row: 1;
-      -ms-grid-column: 3;
-      -ms-grid-row: 1;
-      margin-right: $medium-spacing;
-      margin-top: $medium-spacing;
+      grid-template-columns: 1fr 640px 1fr;
+      grid-template-rows: 60px auto-fill 105px;
+      -ms-grid-columns: 1fr 640px 1fr;
+
+      & > :nth-child(2) {
+        grid-column: 2;
+        -ms-grid-column: 2;
+      }
     }
   }
+
+  $parent: &;
+
+  &--full-width {
+    #{$parent}__content {
+      grid-column: 1 / span 3;
+      grid-row: 1 / span 2;
+    }
+  }
+
+  &__footer {
+    @include desktop {
+      grid-column: 1 / span 3;
+    }
+  }
+}
+
+.close-button {
+  justify-self: end;
+  cursor: pointer;
+
+  display: flex;
+  justify-content: flex-end;
+
+  margin-right: $small-spacing;
+  margin-top: $small-spacing;
+
+  @include desktop {
+    grid-column: 3;
+    grid-row: 1;
+    -ms-grid-column: 3;
+    -ms-grid-row: 1;
+    margin-right: $medium-spacing;
+    margin-top: $medium-spacing;
+  }
+}
 </style>
diff --git a/client/src/layouts/SplitLayout.vue b/client/src/layouts/SplitLayout.vue
index f8ac6b7a..b475bd2d 100644
--- a/client/src/layouts/SplitLayout.vue
+++ b/client/src/layouts/SplitLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="['split-view', {'split-view--illustration': illustration}]">
+  <div :class="['split-view', { 'split-view--illustration': illustration }]">
     <div :class="['split-view__illustration', illustrationAlignment]">
       <component :is="illustration" />
     </div>
@@ -10,151 +10,155 @@
 </template>
 
 <script>
-  import flavorValues from '@/helpers/app-flavor';
-  const ContentsIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/ContentsIllustration');
-  const PortfolioIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/PortfolioIllustration');
-  const RoomsIllustration = () => import(/* webpackChunkName: "illustrations" */'@/components/illustrations/RoomsIllustration');
+import flavorValues from '@/helpers/app-flavor';
+const ContentsIllustration = () =>
+  import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/ContentsIllustration');
+const PortfolioIllustration = () =>
+  import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/PortfolioIllustration');
+const RoomsIllustration = () =>
+  import(/* webpackChunkName: "illustrations" */ '@/components/illustrations/RoomsIllustration');
 
+export default {
+  components: {
+    contents: ContentsIllustration,
+    portfolio: PortfolioIllustration,
+    rooms: RoomsIllustration,
+    hello: flavorValues.helloIllustration,
+  },
 
-  export default {
-    components: {
-      contents: ContentsIllustration,
-      portfolio: PortfolioIllustration,
-      rooms: RoomsIllustration,
-      hello: flavorValues.helloIllustration
+  computed: {
+    illustration() {
+      return this.$route.meta.illustration;
     },
-
-    computed: {
-      illustration() {
-        return this.$route.meta.illustration;
-      },
-      illustrationAlignment() {
-        return this.$route.meta.illustrationAlign ? `split-view__illustration--${this.$route.meta.illustrationAlign}` : '';
-      }
+    illustrationAlignment() {
+      return this.$route.meta.illustrationAlign
+        ? `split-view__illustration--${this.$route.meta.illustrationAlign}`
+        : '';
     },
-  };
+  },
+};
 </script>
 
 <style lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .split-view {
-    background-color: $color-brand;
+.split-view {
+  background-color: $color-brand;
 
-    display: flex;
-    position: relative;
-    width: 100%;
-    min-height: 100vh;
+  display: flex;
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
 
-    &--illustration {
-      &::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        top: 50%;
-        background: $color-brand-dark;
-      }
-    }
-
-    &__illustration {
-      width: 30vw;
-      min-width: 400px;
-      align-self: center;
-      background-color: $color-brand;
-      z-index: 1;
-      display: none;
-
-      &--top {
-        align-self: center;
-        margin-top: -400px;
-      }
-
-      & > svg {
-        max-width: 300px;
-        max-height: 400px;
-      }
-
-      @include desktop {
-        display: flex;
-        justify-content: center;
-      }
-    }
-
-    &__content {
-      background-color: $color-white;
-      padding: $medium-spacing;
-      display: flex;
-      flex-direction: column;
-      z-index: 1;
-      width: 100%;
-
-      @include desktop {
-        padding: 2*$large-spacing;
-      }
-    }
-
-    &__logo {
-      width: 300px;
-      height: 50px;
-      margin-bottom: $large-spacing;
-
-      @include desktop {
-        margin-bottom: 70px;
-      }
-    }
-
-    &__page-subheading {
-      @include regular-text;
-      color: $color-brand;
-      margin-bottom: $small-spacing;
-    }
-
-    &__page-heading {
-      @include heading-2;
-      color: $color-brand;
-      margin-bottom: 2*$large-spacing;
-    }
-
-    &__heading {
-      @include heading-2;
-      margin-bottom: $small-spacing;
-    }
-
-    &__claim {
-      @include heading-2;
-      margin-bottom: 70px;
-    }
-
-    &__paragraph {
-      @include regular-text;
-      margin-bottom: $medium-spacing;
-
-      &:last-of-type {
-        margin-bottom: 2*$large-spacing;
-      }
-    }
-
-    &__button {
-      @include regular-text;
-      flex-grow: 0;
-      align-self: flex-start;
-      min-width: 150px;
-      display: inline-flex;
-      box-sizing: border-box;
-      justify-content: center;
-      margin-bottom: $large-spacing;
-      cursor: pointer;
-    }
-
-    &__secondary-link {
-      @include inline-title;
-      cursor: pointer;
-
-      @include desktop {
-        margin-top: auto;
-      }
+  &--illustration {
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 50%;
+      background: $color-brand-dark;
     }
   }
+
+  &__illustration {
+    width: 30vw;
+    min-width: 400px;
+    align-self: center;
+    background-color: $color-brand;
+    z-index: 1;
+    display: none;
+
+    &--top {
+      align-self: center;
+      margin-top: -400px;
+    }
+
+    & > svg {
+      max-width: 300px;
+      max-height: 400px;
+    }
+
+    @include desktop {
+      display: flex;
+      justify-content: center;
+    }
+  }
+
+  &__content {
+    background-color: $color-white;
+    padding: $medium-spacing;
+    display: flex;
+    flex-direction: column;
+    z-index: 1;
+    width: 100%;
+
+    @include desktop {
+      padding: 2 * $large-spacing;
+    }
+  }
+
+  &__logo {
+    width: 300px;
+    height: 50px;
+    margin-bottom: $large-spacing;
+
+    @include desktop {
+      margin-bottom: 70px;
+    }
+  }
+
+  &__page-subheading {
+    @include regular-text;
+    color: $color-brand;
+    margin-bottom: $small-spacing;
+  }
+
+  &__page-heading {
+    @include heading-2;
+    color: $color-brand;
+    margin-bottom: 2 * $large-spacing;
+  }
+
+  &__heading {
+    @include heading-2;
+    margin-bottom: $small-spacing;
+  }
+
+  &__claim {
+    @include heading-2;
+    margin-bottom: 70px;
+  }
+
+  &__paragraph {
+    @include regular-text;
+    margin-bottom: $medium-spacing;
+
+    &:last-of-type {
+      margin-bottom: 2 * $large-spacing;
+    }
+  }
+
+  &__button {
+    @include regular-text;
+    flex-grow: 0;
+    align-self: flex-start;
+    min-width: 150px;
+    display: inline-flex;
+    box-sizing: border-box;
+    justify-content: center;
+    margin-bottom: $large-spacing;
+    cursor: pointer;
+  }
+
+  &__secondary-link {
+    @include inline-title;
+    cursor: pointer;
+
+    @include desktop {
+      margin-top: auto;
+    }
+  }
+}
 </style>
diff --git a/client/src/main.js b/client/src/main.js
index e5af44b6..00ee9f5b 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -62,34 +62,37 @@ const apolloProvider = new VueApollo({
 
 /* guards */
 
-
-
 function redirectUsersWithoutValidLicense() {
-  return privateApolloClient.query({
-    query: ME_QUERY,
-  }).then(({data}) => data.me.expiryDate == null);
+  return privateApolloClient
+    .query({
+      query: ME_QUERY,
+    })
+    .then(({ data }) => data.me.expiryDate == null);
 }
 
 function redirectStudentsWithoutClass() {
-  return privateApolloClient.query({
-    query: ME_QUERY,
-  }).then(({data}) => data.me.schoolClasses.length === 0 && !data.me.isTeacher);
+  return privateApolloClient
+    .query({
+      query: ME_QUERY,
+    })
+    .then(({ data }) => data.me.schoolClasses.length === 0 && !data.me.isTeacher);
 }
 
 function redirectUsersToOnboarding() {
-  return privateApolloClient.query({
-    query: ME_QUERY,
-  }).then(({data}) => !data.me.onboardingVisited);
+  return privateApolloClient
+    .query({
+      query: ME_QUERY,
+    })
+    .then(({ data }) => !data.me.onboardingVisited);
 }
 
 function networkErrorCallback(statusCode) {
   if (statusCode === 402) {
     log.debug('status code 402, redirecting');
-    router.push({name: 'licenseActivation'});
+    router.push({ name: 'licenseActivation' });
   }
 }
 
-
 router.beforeEach(async (to, from, next) => {
   log.debug('navigation guard called', to, from);
   if (to.path === '/logout') {
@@ -100,7 +103,7 @@ router.beforeEach(async (to, from, next) => {
       next(false);
       return;
     } else {
-      next({name: 'hello'});
+      next({ name: 'hello' });
       return;
     }
   }
@@ -119,23 +122,29 @@ router.beforeEach(async (to, from, next) => {
     return;
   }
 
-  if (to.name && to.name !== 'licenseActivation' && loginRequired(to) && await redirectUsersWithoutValidLicense()) {
+  if (to.name && to.name !== 'licenseActivation' && loginRequired(to) && (await redirectUsersWithoutValidLicense())) {
     log.debug('redirecting to licenseActivation', to, null);
     console.log('redirecting to licenseActivation', to, null);
-    next({name: 'licenseActivation'});
+    next({ name: 'licenseActivation' });
     return;
   }
 
-  if (!joiningClass(to) && loginRequired(to) && await redirectStudentsWithoutClass()) {
+  if (!joiningClass(to) && loginRequired(to) && (await redirectStudentsWithoutClass())) {
     log.debug('redirecting to join-class', to);
     log.debug('await redirectStudentsWithoutClass()', await redirectStudentsWithoutClass());
-    next({name: 'join-class'});
+    next({ name: 'join-class' });
     return;
   }
 
-  if ((to.name && to.name.indexOf('onboarding') === -1) && !joiningClass(to) && loginRequired(to) && await redirectUsersToOnboarding()) {
+  if (
+    to.name &&
+    to.name.indexOf('onboarding') === -1 &&
+    !joiningClass(to) &&
+    loginRequired(to) &&
+    (await redirectUsersToOnboarding())
+  ) {
     log.debug('redirecting to onboarding-start', to);
-    next({name: 'onboarding-start'});
+    next({ name: 'onboarding-start' });
     return;
   }
 
@@ -149,5 +158,5 @@ new Vue({
   store,
   router,
   apolloProvider,
-  render: h => h(App),
+  render: (h) => h(App),
 });
diff --git a/client/src/mixins/add-school-class.js b/client/src/mixins/add-school-class.js
index fd7ea6c0..f1bb8ba7 100644
--- a/client/src/mixins/add-school-class.js
+++ b/client/src/mixins/add-school-class.js
@@ -7,26 +7,23 @@ export default {
       const query = ME_QUERY;
       if (schoolClass) {
         log.debug('updating school class', schoolClass);
-        const  {me} = store.readQuery({query});
+        const { me } = store.readQuery({ query });
         if (me) {
-          let schoolClasses = [
-            ...me.schoolClasses,
-            schoolClass
-          ];
-           const selectedClass = {
+          let schoolClasses = [...me.schoolClasses, schoolClass];
+          const selectedClass = {
             id: schoolClass.id,
-            __typename: 'SchoolClassNode'
+            __typename: 'SchoolClassNode',
           };
           const data = {
             me: {
               ...me,
               schoolClasses,
-              selectedClass
-            }
+              selectedClass,
+            },
           };
-          store.writeQuery({query, data});
+          store.writeQuery({ query, data });
         }
       }
     },
-  }
+  },
 };
diff --git a/client/src/mixins/edit-module.js b/client/src/mixins/edit-module.js
index b068fdb9..57641c1d 100644
--- a/client/src/mixins/edit-module.js
+++ b/client/src/mixins/edit-module.js
@@ -1,7 +1,7 @@
-import {mapState} from 'vuex';
+import { mapState } from 'vuex';
 
 export default {
   computed: {
     ...mapState(['editModule']),
-  }
+  },
 };
diff --git a/client/src/mixins/logout.js b/client/src/mixins/logout.js
index e0e196b7..4d7c1cad 100644
--- a/client/src/mixins/logout.js
+++ b/client/src/mixins/logout.js
@@ -3,17 +3,19 @@ import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';
 export default {
   methods: {
     logout() {
-      this.$apollo.mutate({
-        mutation: LOGOUT_MUTATION,
-      }).then(({data}) => {
-        if (data.logout.success) {
-          if (process.env.LOGOUT_REDIRECT_URL) {
-            location.replace(`https://sso.hep-verlag.ch/logout?return_to=${process.env.LOGOUT_REDIRECT_URL}`);
-          } else {
-            location.replace(`/`);
+      this.$apollo
+        .mutate({
+          mutation: LOGOUT_MUTATION,
+        })
+        .then(({ data }) => {
+          if (data.logout.success) {
+            if (process.env.LOGOUT_REDIRECT_URL) {
+              location.replace(`https://sso.hep-verlag.ch/logout?return_to=${process.env.LOGOUT_REDIRECT_URL}`);
+            } else {
+              location.replace(`/`);
+            }
           }
-        }
-      });
-    }
-  }
+        });
+    },
+  },
 };
diff --git a/client/src/mixins/me.js b/client/src/mixins/me.js
index bda38c82..ce738618 100644
--- a/client/src/mixins/me.js
+++ b/client/src/mixins/me.js
@@ -10,7 +10,7 @@ export default {
         permissions: [],
         schoolClasses: [],
         isTeacher: false,
-        team: null
+        team: null,
       },
       showPopover: false,
     };
@@ -38,12 +38,10 @@ export default {
       return this.me.readOnly || this.me.selectedClass.readOnly;
     },
     currentClassName() {
-      let currentClass = this.me.schoolClasses.find(schoolClass => {
+      let currentClass = this.me.schoolClasses.find((schoolClass) => {
         return schoolClass.id === this.me.selectedClass.id;
       });
-      return currentClass
-        ? currentClass.name
-        : (this.me.schoolClasses.length ? this.me.schoolClasses[0].name : '');
+      return currentClass ? currentClass.name : this.me.schoolClasses.length ? this.me.schoolClasses[0].name : '';
     },
   },
 
@@ -54,7 +52,7 @@ export default {
         // todo: refactor
         return this.$getRidOfEdges(data).me;
       },
-      fetchPolicy: 'cache-first'
+      fetchPolicy: 'cache-first',
     },
   },
 };
diff --git a/client/src/mixins/news.js b/client/src/mixins/news.js
index 578eeb60..b5c2840c 100644
--- a/client/src/mixins/news.js
+++ b/client/src/mixins/news.js
@@ -3,12 +3,12 @@ import NEWS_TEASER_QUERY from '@/graphql/gql/queries/newsTeasersQuery.gql';
 export default {
   data() {
     return {
-      newsTeasers: []
+      newsTeasers: [],
     };
   },
   apollo: {
     newsTeasers: {
       query: NEWS_TEASER_QUERY,
-    }
-  }
+    },
+  },
 };
diff --git a/client/src/mixins/open-sidebar.js b/client/src/mixins/open-sidebar.js
index 895d1c53..8f40407c 100644
--- a/client/src/mixins/open-sidebar.js
+++ b/client/src/mixins/open-sidebar.js
@@ -3,14 +3,15 @@ import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
 export default {
   methods: {
     openSidebar(type) {
-      this.$nextTick(() => { // we don't want this to happen instantly, only almost instantly. Otherwise the click-outside-directive won't work
+      this.$nextTick(() => {
+        // we don't want this to happen instantly, only almost instantly. Otherwise the click-outside-directive won't work
         this.$apollo.mutate({
           mutation: TOGGLE_SIDEBAR,
           variables: {
             sidebar: {
-              [type]: true
-            }
-          }
+              [type]: true,
+            },
+          },
         });
       });
     },
diff --git a/client/src/mixins/room.js b/client/src/mixins/room.js
index b8c3bdbf..b30d8964 100644
--- a/client/src/mixins/room.js
+++ b/client/src/mixins/room.js
@@ -10,29 +10,28 @@ export default {
     RoomGroupWidget,
     AddRoomEntryButton,
     RoomEntry,
-    RoomActions
+    RoomActions,
   },
 
   beforeDestroy() {
     this.$store.dispatch('setSpecialContainerClass', '');
   },
 
-  created() {
-  },
+  created() {},
 
   data() {
     return {
       room: [],
-      entries: []
+      entries: [],
     };
   },
 
   computed: {
     roomEntryCount() {
-      return (this.room && this.room.roomEntries) ? this.room.roomEntries.length : 0;
+      return this.room && this.room.roomEntries ? this.room.roomEntries.length : 0;
     },
     roomAppearance() {
       return this.room ? this.room.appearance : '';
-    }
-  }
+    },
+  },
 };
diff --git a/client/src/mixins/selected-class.js b/client/src/mixins/selected-class.js
index ef7dc7b1..cfd23a3f 100644
--- a/client/src/mixins/selected-class.js
+++ b/client/src/mixins/selected-class.js
@@ -2,20 +2,20 @@ import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass.gql';
 
 export default {
   apollo: {
-      me: {
-        query: MY_SCHOOL_CLASS_QUERY,
-      }
+    me: {
+      query: MY_SCHOOL_CLASS_QUERY,
     },
+  },
 
-    data() {
-      return {
-        me: {
-          isTeacher: false,
-          selectedClass: {
-            name: '',
-            members: []
-          }
-        }
-      };
-    }
+  data() {
+    return {
+      me: {
+        isTeacher: false,
+        selectedClass: {
+          name: '',
+          members: [],
+        },
+      },
+    };
+  },
 };
diff --git a/client/src/mixins/sidebar.js b/client/src/mixins/sidebar.js
index 10609b2a..d170b8bd 100644
--- a/client/src/mixins/sidebar.js
+++ b/client/src/mixins/sidebar.js
@@ -9,9 +9,9 @@ export default {
           mutation: TOGGLE_SIDEBAR,
           variables: {
             sidebar: {
-              [type]: false
-            }
-          }
+              [type]: false,
+            },
+          },
         });
       }
     },
@@ -20,13 +20,13 @@ export default {
   apollo: {
     sidebar: {
       query: SIDEBAR,
-    }
+    },
   },
 
   data: () => ({
     sidebar: {
       profile: false,
-      navigation: false
-    }
-  })
+      navigation: false,
+    },
+  }),
 };
diff --git a/client/src/mixins/update-project-share-state.js b/client/src/mixins/update-project-share-state.js
index 73a3acda..9f470b23 100644
--- a/client/src/mixins/update-project-share-state.js
+++ b/client/src/mixins/update-project-share-state.js
@@ -15,28 +15,35 @@ export default {
         variables: {
           input,
         },
-        update: (store, {data: {updateProjectSharedState: {shared: final, errors}}}) => {
+        update: (
+          store,
+          {
+            data: {
+              updateProjectSharedState: { shared: final, errors },
+            },
+          }
+        ) => {
           if (!errors) {
             const query = PROJECT_QUERY;
             const variables = {
-              slug
+              slug,
             };
 
-            const {project} = store.readQuery({query, variables});
+            const { project } = store.readQuery({ query, variables });
             log.debug(`updating project ${project.id} ${project.title}`);
 
             if (project) {
               const data = {
                 project: {
                   ...project,
-                  final
-                }
+                  final,
+                },
               };
-              store.writeQuery({query, variables, data});
+              store.writeQuery({ query, variables, data });
             }
           }
         },
       });
-    }
-  }
+    },
+  },
 };
diff --git a/client/src/mixins/update-selected-class.js b/client/src/mixins/update-selected-class.js
index c672d752..0d549b14 100644
--- a/client/src/mixins/update-selected-class.js
+++ b/client/src/mixins/update-selected-class.js
@@ -8,46 +8,51 @@ export default {
   methods: {
     updateSelectedClass(selectedClass) {
       // const innerApollo = this.$apollo;
-      return this.$apollo.mutate({
-        mutation: UPDATE_USER_SETTING,
-        variables: {
-          input: {
-            id: selectedClass.id
-          }
-        },
-        update(store) {
-          let {me} = store.readQuery({query: ME_QUERY});
+      return this.$apollo
+        .mutate({
+          mutation: UPDATE_USER_SETTING,
+          variables: {
+            input: {
+              id: selectedClass.id,
+            },
+          },
+          update(store) {
+            let { me } = store.readQuery({ query: ME_QUERY });
 
-          console.log(`storing in cache: ${selectedClass.name}`);
-          const data = {
-            me: {
-              ...me,
-              selectedClass: {
-                readOnly: false, // assume this, it will be reloaded later anyway
-                ...selectedClass
-              }
-            }
-          };
-          console.log(`writing data`, data);
+            console.log(`storing in cache: ${selectedClass.name}`);
+            const data = {
+              me: {
+                ...me,
+                selectedClass: {
+                  readOnly: false, // assume this, it will be reloaded later anyway
+                  ...selectedClass,
+                },
+              },
+            };
+            console.log(`writing data`, data);
 
-          store.writeQuery({query: ME_QUERY, data});
+            store.writeQuery({ query: ME_QUERY, data });
 
-          // todo: still needed for anything? asking chrigu @05.09.22, but commenting it for bugfix
-        //   innerApollo.mutate({
-        //     mutation: DELETE_MODULE_NODES
-        // });
-        },
-        refetchQueries: [{
-          query: MY_SCHOOL_CLASS_QUERY
-        }, {
-        query: MODULE_DETAILS_QUERY,
-        variables: {
-          slug: this.$route.params.slug
-        }
-      }]
-      }).catch((error) => {
-        console.warn('failed to update selected class', error);
-      });
-    }
+            // todo: still needed for anything? asking chrigu @05.09.22, but commenting it for bugfix
+            //   innerApollo.mutate({
+            //     mutation: DELETE_MODULE_NODES
+            // });
+          },
+          refetchQueries: [
+            {
+              query: MY_SCHOOL_CLASS_QUERY,
+            },
+            {
+              query: MODULE_DETAILS_QUERY,
+              variables: {
+                slug: this.$route.params.slug,
+              },
+            },
+          ],
+        })
+        .catch((error) => {
+          console.warn('failed to update selected class', error);
+        });
+    },
   },
 };
diff --git a/client/src/pages/activity.vue b/client/src/pages/activity.vue
index 74911259..2e13fca3 100644
--- a/client/src/pages/activity.vue
+++ b/client/src/pages/activity.vue
@@ -1,75 +1,58 @@
 <template>
   <div class="activity">
-    <h1 class="activity__header">
-      Meine Aktivitäten
-    </h1>
-    <activity-filter
-      :filter="filter"
-      @change-filter="filter = $event"
-    />
+    <h1 class="activity__header">Meine Aktivitäten</h1>
+    <activity-filter :filter="filter" @change-filter="filter = $event" />
     <div class="modules">
-      <module-activity
-        :filter="filter"
-        :module="module"
-        class="activity"
-        v-for="(module, id) in modules"
-        :key="id"
-      />
+      <module-activity :filter="filter" :module="module" class="activity" v-for="(module, id) in modules" :key="id" />
     </div>
-    <instrument-activity
-      :filter="filter"
-      :instrument="instrument"
-      v-for="(instrument, id) in instruments"
-      :key="id"
-    />
+    <instrument-activity :filter="filter" :instrument="instrument" v-for="(instrument, id) in instruments" :key="id" />
   </div>
 </template>
 
 <script>
-  import ModuleActivity from '@/components/profile/ModuleActivity';
-  import InstrumentActivity from '@/components/profile/InstrumentActivity';
-  import ActivityFilter from '@/components/profile/ActivityFilter';
-  import MY_ACTIVITY_QUERY from '@/graphql/gql/queries/myActivity.gql';
+import ModuleActivity from '@/components/profile/ModuleActivity';
+import InstrumentActivity from '@/components/profile/InstrumentActivity';
+import ActivityFilter from '@/components/profile/ActivityFilter';
+import MY_ACTIVITY_QUERY from '@/graphql/gql/queries/myActivity.gql';
 
-  export default {
-    components: {
-      ModuleActivity,
-      InstrumentActivity,
-      ActivityFilter
-    },
+export default {
+  components: {
+    ModuleActivity,
+    InstrumentActivity,
+    ActivityFilter,
+  },
 
-    apollo: {
-      modules: {
-        query: MY_ACTIVITY_QUERY,
-        update(data) {
-          return this.$getRidOfEdges(data).myActivity;
-        },
-        pollInterval: 5000,
+  apollo: {
+    modules: {
+      query: MY_ACTIVITY_QUERY,
+      update(data) {
+        return this.$getRidOfEdges(data).myActivity;
       },
-      instruments: {
-        query: MY_ACTIVITY_QUERY,
-        update(data) {
-          return this.$getRidOfEdges(data).myInstrumentActivity;
-        },
-        pollInterval: 5000,
-      }
+      pollInterval: 5000,
     },
+    instruments: {
+      query: MY_ACTIVITY_QUERY,
+      update(data) {
+        return this.$getRidOfEdges(data).myInstrumentActivity;
+      },
+      pollInterval: 5000,
+    },
+  },
 
-    data() {
-      return {
-        modules: [],
-        instruments: [],
-        filter: ''
-      };
-    }
-  };
+  data() {
+    return {
+      modules: [],
+      instruments: [],
+      filter: '',
+    };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-
-  .module-activity {
-    margin-bottom: $large-spacing;
-  }
+@import '@/styles/_variables.scss';
 
+.module-activity {
+  margin-bottom: $large-spacing;
+}
 </style>
diff --git a/client/src/pages/article.vue b/client/src/pages/article.vue
index f9e73736..9e781ef6 100644
--- a/client/src/pages/article.vue
+++ b/client/src/pages/article.vue
@@ -4,133 +4,128 @@
       <div class="article__meta">
         <user-meta-widget v-bind="roomEntry.author" />
       </div>
-      <h1
-        data-cy="article-title"
-        class="article__title"
-      >
+      <h1 data-cy="article-title" class="article__title">
         {{ roomEntry.title }}
       </h1>
     </div>
     <div class="article__content">
-      <component
-        :is="component.type"
-        v-for="component in roomEntry.contents"
-        :key="component.id"
-        v-bind="component"
-      />
+      <component :is="component.type" v-for="component in roomEntry.contents" :key="component.id" v-bind="component" />
     </div>
     <div class="article__comments">
       <comment-input @submit="createComment" />
-      <comment
-        :comment="comment"
-        v-for="comment in comments"
-        :key="comment.id"
-      />
+      <comment :comment="comment" v-for="comment in comments" :key="comment.id" />
     </div>
   </div>
 </template>
 
 <script>
-  import UserMetaWidget from '@/components/UserMetaWidget';
-  import log from 'loglevel';
+import UserMetaWidget from '@/components/UserMetaWidget';
+import log from 'loglevel';
 
-  import ROOM_ENTRY_QUERY from '@/graphql/gql/queries/roomEntryQuery.gql';
-  import ADD_COMMENT_MUTATION from 'gql/mutations/addComment.gql';
-  import CommentInput from '@/components/rooms/CommentInput';
-  import Comment from '@/components/rooms/Comment';
-  const TextBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/TextBlock');
-  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 SubtitleBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SubtitleBlock');
+import ROOM_ENTRY_QUERY from '@/graphql/gql/queries/roomEntryQuery.gql';
+import ADD_COMMENT_MUTATION from 'gql/mutations/addComment.gql';
+import CommentInput from '@/components/rooms/CommentInput';
+import Comment from '@/components/rooms/Comment';
+const TextBlock = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/TextBlock');
+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 SubtitleBlock = () =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/SubtitleBlock');
 
-  export default {
-    components: {
-      CommentInput,
-      Comment,
-      'text_block': TextBlock,
-      'image_block': ImageBlock,
-      'image_url_block': ImageUrlBlock,
-      'video_block': VideoBlock,
-      'link_block': LinkBlock,
-      'document_block': DocumentBlock,
-      'subtitle': SubtitleBlock,
-      UserMetaWidget,
+export default {
+  components: {
+    CommentInput,
+    Comment,
+    text_block: TextBlock,
+    image_block: ImageBlock,
+    image_url_block: ImageUrlBlock,
+    video_block: VideoBlock,
+    link_block: LinkBlock,
+    document_block: DocumentBlock,
+    subtitle: SubtitleBlock,
+    UserMetaWidget,
+  },
+
+  data() {
+    return {
+      roomEntry: {
+        author: {
+          name: 'Daniel Ramos',
+          avatar:
+            'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCABkAGQDAREAAhEBAxEB/8QAHAAAAQUBAQEAAAAAAAAAAAAABwIDBQYIBAEA/8QAGgEAAgMBAQAAAAAAAAAAAAAAAAMBAgQFBv/aAAwDAQACEAMQAAABuOjn0FTM6p1JmeqDwjyJmCJ+1NF6cvsjZCLV7K3z4l4vU8lp0GpOu3TENBnhuKovSdHZyW1bBCSO4sDlNpODpaVx9i5XiedjTW2d75gvrwXZiT69LRCQ7y6AzpzOnoTJ2o26q67GRV6p5c5I3ciEbn1VqzMkICQLKDOmXTXM+zW+bpCG6iva1spAoF9NmTXS4rTcqCO8sosPUNBOLdshXTkoh21HivEpybzXunw2n4mw7CyggV3zHzeppKNt7i01ZDNLtVA85Fy6nEfmrYdJZQLDNvP32fP2ytLLdGLpKskhN+Il9HmIISQ+WUCwGmZ9Rw+jPNJkhPxT6Y59GPh6PKQCCOgn0FAqshfn9Uqq2wEKnFsIj8w363GFmrOZMmhAdAKBdZWTVKWBeHcdc3SsjUXDocrCXY5UUQWs7iIht0rf2BcS+WrNG5uxuI1H6h2ZM67MWc9C21XdZV2Ta2N3sDkT2xe0VbkSknRdp3RTH27n06t26S5cVEf/xAAmEAABBAIBAwUAAwAAAAAAAAABAgMEBQAGERASIQcTFCAiFRY1/9oACAEBAAEFAuM2yY7HiHuWoJ/SVBavY90ILsdXuBzKy8XUutLS80cPQjxuc19ieAVua9qL9u9E9P61l7+nVLgsNDryxZ1ogPL7iNEnLkwSM4zjOM3mheek6yyn5dWPjYw57hSCA55G7VzrL55GaK98a4Izjpxi2kuJXHTUXUN1uTBGyohIHqPIckQbd6Yh1tLyL6AIdpSzUw7sj676h1FxT7NLq8r4jEqBb6YXLWupWWllHA2HVxY2Duj1sCuHBQc46DN5hIkU0hCeyk/zJAGNfjHFDgeFGMGHSgIw/TYIiptOfLlFs7cyFEdefbCfyBjnjLPfJVXXxefjZx9NihIj2+t2cOC2xepWWZPeEnHlcjeIfzb3jgcfXdqxT8XW0hpmCpQZ7vK5CWxHJkGTXB5zwR9SkKSK40mwMXjCUTNhDqq2It0xme8eoOziogafsqW0H7bBbRa2LHkJlTFusNJqQqyctrJihq7GyetZ3fxlLvHxI7W0VbyOgxDZdVteqpkQYvKHNcrpOwT6/wBlEb1buO5/uwr5IOd3QdIZ7ZMwd0e/iNxrD00SBrkOU5/PbXKcl7FhxOc5/8QAIxEAAQQBBQEAAwEAAAAAAAAAAQACAxEhBBASIDFBEyJRI//aAAgBAwEBPwFM97ubfaNu0cLnIQNCLR/EGj+KRvE7PGerHUtO0F2UAiKRKap2E5Gz+2mdRtWnlYukG7SN4uTvEerPFFMWpziCpYmzZBpN/wAhxCBUkXPKihhLgx/1aiL8EpZ1Z7S4ik5Rp37Jo/qJxSa/kOLlrHc5ierDTtsPHJYGV9RK+KaT8fiOezHYWnia5tBSaUtyuNIoLVYHeN1YWmmLWcWhPPI25FDKOFqqLRvXXSyfCnkFXfiApSScfFPJWFG/4e4F+KP3O0svAUPU91CynW42VxTXH6uQ6jCaUZSArtTGzSq0BXUIIqEJ3uzsuQ6f/8QAIhEAAgIBBQEBAAMAAAAAAAAAAAECEQMQEiAhMUEEEyIw/9oACAECAQE/ASfNPbyn7WjyL4PI9GQekOM19MzExaMhLSHvLMu9InY6ekH0J98ppbieO+0JEZOA6m7JIjOuiU5JXExz/kgpccvllsXhIiSem2vDCtsEuORXHTzpjK6KvSCsXKcaY0/um4QzD3zyxvsbL0en57v/AAzY6EXQ3ZjhZ+fFud/DLj+rnKSXpLvTHj3EY29qIVBUjcThb/qbXxaU0NEYWyqMC63Fjdi4sj6Z+iHg/CPUVrEZ/8QAMxAAAgECAwYFAwIHAQAAAAAAAQIDABEEEiETICIxQVEQIzJhcQUUQpGxFSQwQ1JicoH/2gAIAQEABj8CrZwkh3F9Daj1N609VWtxdL0TlytQHfpVyPMNBlZtn+SdDSyIbqwuDumDNdAuh660LdaTP5MQ5tSuwZyO5riwwv3FXw8eWReWvOnDA5ugo6WqaB2zbJuH4O793EpdcvFbpS5gCTyvR0t42oyZC0LdR0PhLF0lT9t0qwup0IqWMeiN9Kzrrw0bRGR+gFbIYNYz1zNelzxqD25UVYXBHI1NEPSG0rCzOTYPY299N5mXyo9mpzf5UObRHTWoZtmLut+VM4uysb5rVtQoiJ/BOX6eEUkfDtjkkPbTnUjQ4KPFuozM0pOdvgjkaVlOZGUEH23dqRxRMP0NQqFtrUH/ACKBt4aVejJCMmc3e3Wgg0CgLu4mJNXtcD41pQ2mtJDhEWSZeHI5y158IgcfiGzDxNYdJsDs8dPHoSeEGos3qyi996YZCI817UIeTK2a/elAw0xvyKrWoIPv4/R0tcEsLd99cVHzj0f470VQX19NL5WTStRark6VnIsg5V9yVHkg8Z6d6BGoPXeIIuDzFFfTh5OKI9PimV3VCO9BMMrTMeoGlCSdszdugr/Wv4fhj/NTrrb8EpcBimsP7Uh/bftPGuIdvTCRehPMqqpfVF0ApRHbKeVqyxXXDpo8vf2FTYqTSOJdFHU9BU2Lna8spufb28EgxiPIF0Ei87Vm+7RfZ9DuZF9RppU1mUXv3qRGHvSRqSuFi1lft7CkjhQRommQdKw305G0QbVx79P6EfzTg8qGQW4Gai1uJpmuf0qVL8DXGWvqMkhu23Zf/AbD9t3/xAAkEAEAAgICAgIDAQEBAAAAAAABABEhMUFRYXEQkaGxwYHw8f/aAAgBAQABPyFrM0QDeASaxZ2ijLUzQXLirTRzHLArZfMrA6e0Mg0YNaiwzR/cEFQcLNjBUwjLkGI6QxZx4XCjfgRLGxz+oSx9Yr7jd4erqWWAZlrekzgmmx+Ybe68sAiSXycH3MUfgcYFcKgcI98LKFfN44iUhjuGLn+5CtmaV+aEKCs1XZDpVrnhy+BiqjINiWOSWqWv8uf7LwFrFSorBpXDvqBPqOKMvZJ2DBV1zDGq/TRcyKDeRb+viSUSpUFxWg5anLEwUqhlzyLLmnlkKPFShNC8N++F+ghnGc4Iutv5iwjYft/qUt7QfaiyD4VBFVpKzdlV91FHSWXllgV/8oTicyhbCI6IaekPbobHZ8rCS0YdUVBE+AgvWeeUU/EK0pyZXSnAtd14ga0qQ/4MHcgX4gqui5cfBxqaut+agTJUy2WsxJSVAgQP4KpWEvHjcAwX+21VWMy5Jaafw1Er6HtKJc9uJvvB0YUhROoxUqBAhPKLV3/iJRfZKg7GJarA1MCFU5FuWDH1xw4tQAWBu4nwQhADGpCxI67/AOTepcgMbRwYVpfbFDPm0NVgYWNhix8rC+3J9wV5NNwef8+CfBKuEcZhBBe29EJSWrSvglEHBBFaNDl+/t4gEnHZ1D7ZfO3q6DwGJkzAEVth6BHddwgbvEh+PgguHukHqErGipsJS+yU9ps6fsYAllRohNeRO1j8LmESjR2yo2vuEVFCKo3j94h7kKhxWKHm6hzB5MopNDkThjn3KVcPxSvoRd+5tGpLT//aAAwDAQACAAMAAAAQufyh/kpD8oJ4mJ5VRHNNNAuQ9soqm/acpGqO7cAJOvgiYFtgmahgtuyOkJJtdOqoptTJvYx5fWSpiaLEEoxK/wD/xAAfEQEBAQADAAMBAQEAAAAAAAABABEQITEgQXFRYYH/2gAIAQMBAT8Q9geoy+uDpvbLLYnvLwSbfl2qdS+xfBJcYKcEaJk5Do3Q0AYRBWJeof2A+qzLyPDw/k92Ap33bGBtq0M/Zzv6k0S2QuyLH1xlvDTqymLpYAsXQ+7+lnXuFAiZQ6bO39M8YwZP/pInDLIgfySqW1hOTwJh7c8u/wDeEeQBb0CHMfJyA9sr4siHdQLfTdivyZI92oO4vtbfcV8LpPBj/ZPjt1YhfsrJ3MODquuPZfW/IexipJbsrpEHcXT1OHXbDlHwDbqZdrqNQGw1NSlAE+RjJ/tyWbD2Q7lmD2UtfbFP1Z7QjZ7dyz4PV5YFdvW8ZKLAIkzj/8QAHhEBAQEAAgMBAQEAAAAAAAAAAQARITEQIEFhUbH/2gAIAQIBAT8Qkhh46n+2zn2OOpFpDpp5w8JhQNYnEQZGp3JzuV8PTPOvhVxKGEm62mDCfFk4+HyPblEGceOo05JcD3BjbFbIPt3hEPpEms7iaT0eITkkjaw5fsHqMH8Wy6wmOJBEmEZ9kcvrv200I/I1wFeo7GNOZMcs/NgA9tsJrBT5OiWHg957pwzDyy3qFeG4ZDpZPji/PbuRaQQkcpFzJzernPT/AGUfWWImcCnE98WnXqcvCNk4YdIn88KHd3zdTI+yhjd91YOFipwZVcDu08JsdXS40iM+318IBE73N2m7f//EACUQAQACAgIDAAICAwEAAAAAAAEAESExQVFhcYGRobHB0eHx8P/aAAgBAQABPxBuFwiqKZbXYlmWxw1TZcAqtVta/wCWoMLrTsd3j5CWXkG2jAPvVyiABmCDGOB/mBda0ooLEzzqMeqirQHb/cs/CBclNmB4urNjsXUkXQliP2NAdIqdX8iOLJQ7pjxpgZVtrXhFKrCmnICmICUlPRUTMCyl7uoMXVXGTbvPGoOpt7Cc3WH7KRnQcDalunpNepk3N5dmMW+4WGXHnq7qceoQUqvAH8yxYqYtXcR5iQCXixScq6qv5jPwpBrPEpmqiApeSH1Uy8JnZTnMdlmgm+yEN4Zg9eL32eaZbHiaaE6e6R97heshGhlMclXCRax1O0I2UEB49x/qwbEMlQqzZmruDror8h13kGRqAB6BovLxXMIl2rK9AfpqCmYypOAMedeY0cRgiJSTHsgNLLa6zDGq4Nmtr808RS37mVsW2ww79sL+ouo4VOdVXN0Ss4qv0z4zLX5LBf2gzEgktqbxNGSms9RnUqOMU8RaWx1FgboxEsCj5dMPSPKkWsq9WVOAExQyU5bnDUji0a5pL8zwxy7+wwuB1DcgWBAfwmemA3Yil3tgxYDDjXUumqwgVOPcF0zn/sMFEEVc7XMFiCtB0GhjziH1EF0KnyqgovfiWu6lMS+YuMEm6keUYeUhrRFpQZ/UtIKLFEc3/Vx6VK4eQqx8hFosxm5ag9JhltPw4jBDsqM3ubafCwtGLUkqfN3PETJsm05IFZIzWNuQzfcg9eJgqdlEVhblesxoTQcXzYrzqOWIbKreph6s7jVW8PyuILSJrYPqEG/Fzb+AZZwbiXf7griOAqfCHnejkTHolHoR4Y8wB0bLarLCwHQFL/PMAIU/cwBt3uYqHhp4muo3Mv6vBQuNFq6BlWfBQDpE2JzM2MesRa4/cHcH48QRcUiSRSI7ExUI5Ne2DnLlNd1XcaqyBDA+fE5ROGO6a+EWVoEfQH9wQpbocvIeoqTys2PwM+thMSZ0gVb3Ra2e66gq8UksYDzrVwB7hUu4GqywDMdOEYaO6vqM5KwLsawCI06UCg3j5Fk0RKzLf6B7Zn7HFh9FA8ZXTLsfgcWi8GAdHc6RXLeYQ1h8kCiX0ytKvt5LZTHSP8FJSMHmAKiWVaoxhv0b+TK8JmqDJ+pnyAjmpP3+o4X01S83JlFaLeC9KZ1jn222q5VVVtiWr+NWTfQf3zBurvPJGAqz/wBEcvyEUIZPgmw0QVUWOqPcyfphCWlHYx82dGFmz8WVjRIzUW9C/mMAROOOwHlz5ZZySaFAHQT8vMSlyUiq3IKS8W3jM6mp/9k=',
+          date: '4. Juli 2018 - 09:23',
+        },
+      },
+    };
+  },
+
+  computed: {
+    comments() {
+      console.log(this.roomEntry);
+      return this.roomEntry && this.roomEntry.comments ? this.roomEntry.comments : [];
     },
+  },
 
-    data() {
+  methods: {
+    createComment(text) {
+      log.debug(`createComment ${text}`);
+      const input = {
+        roomEntry: this.roomEntry.id,
+        comment: text,
+      };
+      log.debug(`input `, input);
+      this.$apollo.mutate({
+        mutation: ADD_COMMENT_MUTATION,
+        variables: {
+          input,
+        },
+        update: (
+          store,
+          {
+            data: {
+              addComment: { success, comment },
+            },
+          }
+        ) => {
+          if (success) {
+            const query = ROOM_ENTRY_QUERY;
+            const variables = {
+              slug: this.roomEntry.slug,
+            };
+            const { roomEntry } = store.readQuery({
+              query,
+              variables,
+            });
+            if (roomEntry) {
+              const comments = [comment, ...roomEntry.comments];
+              const data = {
+                roomEntry: {
+                  ...roomEntry,
+                  comments,
+                },
+              };
+              store.writeQuery({ query, variables, data });
+            }
+          }
+        },
+      });
+    },
+  },
+
+  apollo: {
+    roomEntry() {
       return {
-        roomEntry: {
-          author: {
-            name: 'Daniel Ramos',
-            avatar: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wgARCABkAGQDAREAAhEBAxEB/8QAHAAAAQUBAQEAAAAAAAAAAAAABwIDBQYIBAEA/8QAGgEAAgMBAQAAAAAAAAAAAAAAAAMBAgQFBv/aAAwDAQACEAMQAAABuOjn0FTM6p1JmeqDwjyJmCJ+1NF6cvsjZCLV7K3z4l4vU8lp0GpOu3TENBnhuKovSdHZyW1bBCSO4sDlNpODpaVx9i5XiedjTW2d75gvrwXZiT69LRCQ7y6AzpzOnoTJ2o26q67GRV6p5c5I3ciEbn1VqzMkICQLKDOmXTXM+zW+bpCG6iva1spAoF9NmTXS4rTcqCO8sosPUNBOLdshXTkoh21HivEpybzXunw2n4mw7CyggV3zHzeppKNt7i01ZDNLtVA85Fy6nEfmrYdJZQLDNvP32fP2ytLLdGLpKskhN+Il9HmIISQ+WUCwGmZ9Rw+jPNJkhPxT6Y59GPh6PKQCCOgn0FAqshfn9Uqq2wEKnFsIj8w363GFmrOZMmhAdAKBdZWTVKWBeHcdc3SsjUXDocrCXY5UUQWs7iIht0rf2BcS+WrNG5uxuI1H6h2ZM67MWc9C21XdZV2Ta2N3sDkT2xe0VbkSknRdp3RTH27n06t26S5cVEf/xAAmEAABBAIBAwUAAwAAAAAAAAABAgMEBQAGERASIQcTFCAiFRY1/9oACAEBAAEFAuM2yY7HiHuWoJ/SVBavY90ILsdXuBzKy8XUutLS80cPQjxuc19ieAVua9qL9u9E9P61l7+nVLgsNDryxZ1ogPL7iNEnLkwSM4zjOM3mheek6yyn5dWPjYw57hSCA55G7VzrL55GaK98a4Izjpxi2kuJXHTUXUN1uTBGyohIHqPIckQbd6Yh1tLyL6AIdpSzUw7sj676h1FxT7NLq8r4jEqBb6YXLWupWWllHA2HVxY2Duj1sCuHBQc46DN5hIkU0hCeyk/zJAGNfjHFDgeFGMGHSgIw/TYIiptOfLlFs7cyFEdefbCfyBjnjLPfJVXXxefjZx9NihIj2+t2cOC2xepWWZPeEnHlcjeIfzb3jgcfXdqxT8XW0hpmCpQZ7vK5CWxHJkGTXB5zwR9SkKSK40mwMXjCUTNhDqq2It0xme8eoOziogafsqW0H7bBbRa2LHkJlTFusNJqQqyctrJihq7GyetZ3fxlLvHxI7W0VbyOgxDZdVteqpkQYvKHNcrpOwT6/wBlEb1buO5/uwr5IOd3QdIZ7ZMwd0e/iNxrD00SBrkOU5/PbXKcl7FhxOc5/8QAIxEAAQQBBQEAAwEAAAAAAAAAAQACAxEhBBASIDFBEyJRI//aAAgBAwEBPwFM97ubfaNu0cLnIQNCLR/EGj+KRvE7PGerHUtO0F2UAiKRKap2E5Gz+2mdRtWnlYukG7SN4uTvEerPFFMWpziCpYmzZBpN/wAhxCBUkXPKihhLgx/1aiL8EpZ1Z7S4ik5Rp37Jo/qJxSa/kOLlrHc5ierDTtsPHJYGV9RK+KaT8fiOezHYWnia5tBSaUtyuNIoLVYHeN1YWmmLWcWhPPI25FDKOFqqLRvXXSyfCnkFXfiApSScfFPJWFG/4e4F+KP3O0svAUPU91CynW42VxTXH6uQ6jCaUZSArtTGzSq0BXUIIqEJ3uzsuQ6f/8QAIhEAAgIBBQEBAAMAAAAAAAAAAAECEQMQEiAhMUEEEyIw/9oACAECAQE/ASfNPbyn7WjyL4PI9GQekOM19MzExaMhLSHvLMu9InY6ekH0J98ppbieO+0JEZOA6m7JIjOuiU5JXExz/kgpccvllsXhIiSem2vDCtsEuORXHTzpjK6KvSCsXKcaY0/um4QzD3zyxvsbL0en57v/AAzY6EXQ3ZjhZ+fFud/DLj+rnKSXpLvTHj3EY29qIVBUjcThb/qbXxaU0NEYWyqMC63Fjdi4sj6Z+iHg/CPUVrEZ/8QAMxAAAgECAwYFAwIHAQAAAAAAAQIDABEEEiETICIxQVEQIzJhcQUUQpGxFSQwQ1JicoH/2gAIAQEABj8CrZwkh3F9Daj1N609VWtxdL0TlytQHfpVyPMNBlZtn+SdDSyIbqwuDumDNdAuh660LdaTP5MQ5tSuwZyO5riwwv3FXw8eWReWvOnDA5ugo6WqaB2zbJuH4O793EpdcvFbpS5gCTyvR0t42oyZC0LdR0PhLF0lT9t0qwup0IqWMeiN9Kzrrw0bRGR+gFbIYNYz1zNelzxqD25UVYXBHI1NEPSG0rCzOTYPY299N5mXyo9mpzf5UObRHTWoZtmLut+VM4uysb5rVtQoiJ/BOX6eEUkfDtjkkPbTnUjQ4KPFuozM0pOdvgjkaVlOZGUEH23dqRxRMP0NQqFtrUH/ACKBt4aVejJCMmc3e3Wgg0CgLu4mJNXtcD41pQ2mtJDhEWSZeHI5y158IgcfiGzDxNYdJsDs8dPHoSeEGos3qyi996YZCI817UIeTK2a/elAw0xvyKrWoIPv4/R0tcEsLd99cVHzj0f470VQX19NL5WTStRark6VnIsg5V9yVHkg8Z6d6BGoPXeIIuDzFFfTh5OKI9PimV3VCO9BMMrTMeoGlCSdszdugr/Wv4fhj/NTrrb8EpcBimsP7Uh/bftPGuIdvTCRehPMqqpfVF0ApRHbKeVqyxXXDpo8vf2FTYqTSOJdFHU9BU2Lna8spufb28EgxiPIF0Ei87Vm+7RfZ9DuZF9RppU1mUXv3qRGHvSRqSuFi1lft7CkjhQRommQdKw305G0QbVx79P6EfzTg8qGQW4Gai1uJpmuf0qVL8DXGWvqMkhu23Zf/AbD9t3/xAAkEAEAAgICAgIDAQEBAAAAAAABABEhMUFRYXEQkaGxwYHw8f/aAAgBAQABPyFrM0QDeASaxZ2ijLUzQXLirTRzHLArZfMrA6e0Mg0YNaiwzR/cEFQcLNjBUwjLkGI6QxZx4XCjfgRLGxz+oSx9Yr7jd4erqWWAZlrekzgmmx+Ybe68sAiSXycH3MUfgcYFcKgcI98LKFfN44iUhjuGLn+5CtmaV+aEKCs1XZDpVrnhy+BiqjINiWOSWqWv8uf7LwFrFSorBpXDvqBPqOKMvZJ2DBV1zDGq/TRcyKDeRb+viSUSpUFxWg5anLEwUqhlzyLLmnlkKPFShNC8N++F+ghnGc4Iutv5iwjYft/qUt7QfaiyD4VBFVpKzdlV91FHSWXllgV/8oTicyhbCI6IaekPbobHZ8rCS0YdUVBE+AgvWeeUU/EK0pyZXSnAtd14ga0qQ/4MHcgX4gqui5cfBxqaut+agTJUy2WsxJSVAgQP4KpWEvHjcAwX+21VWMy5Jaafw1Er6HtKJc9uJvvB0YUhROoxUqBAhPKLV3/iJRfZKg7GJarA1MCFU5FuWDH1xw4tQAWBu4nwQhADGpCxI67/AOTepcgMbRwYVpfbFDPm0NVgYWNhix8rC+3J9wV5NNwef8+CfBKuEcZhBBe29EJSWrSvglEHBBFaNDl+/t4gEnHZ1D7ZfO3q6DwGJkzAEVth6BHddwgbvEh+PgguHukHqErGipsJS+yU9ps6fsYAllRohNeRO1j8LmESjR2yo2vuEVFCKo3j94h7kKhxWKHm6hzB5MopNDkThjn3KVcPxSvoRd+5tGpLT//aAAwDAQACAAMAAAAQufyh/kpD8oJ4mJ5VRHNNNAuQ9soqm/acpGqO7cAJOvgiYFtgmahgtuyOkJJtdOqoptTJvYx5fWSpiaLEEoxK/wD/xAAfEQEBAQADAAMBAQEAAAAAAAABABEQITEgQXFRYYH/2gAIAQMBAT8Q9geoy+uDpvbLLYnvLwSbfl2qdS+xfBJcYKcEaJk5Do3Q0AYRBWJeof2A+qzLyPDw/k92Ap33bGBtq0M/Zzv6k0S2QuyLH1xlvDTqymLpYAsXQ+7+lnXuFAiZQ6bO39M8YwZP/pInDLIgfySqW1hOTwJh7c8u/wDeEeQBb0CHMfJyA9sr4siHdQLfTdivyZI92oO4vtbfcV8LpPBj/ZPjt1YhfsrJ3MODquuPZfW/IexipJbsrpEHcXT1OHXbDlHwDbqZdrqNQGw1NSlAE+RjJ/tyWbD2Q7lmD2UtfbFP1Z7QjZ7dyz4PV5YFdvW8ZKLAIkzj/8QAHhEBAQEAAgMBAQEAAAAAAAAAAQARITEQIEFhUbH/2gAIAQIBAT8Qkhh46n+2zn2OOpFpDpp5w8JhQNYnEQZGp3JzuV8PTPOvhVxKGEm62mDCfFk4+HyPblEGceOo05JcD3BjbFbIPt3hEPpEms7iaT0eITkkjaw5fsHqMH8Wy6wmOJBEmEZ9kcvrv200I/I1wFeo7GNOZMcs/NgA9tsJrBT5OiWHg957pwzDyy3qFeG4ZDpZPji/PbuRaQQkcpFzJzernPT/AGUfWWImcCnE98WnXqcvCNk4YdIn88KHd3zdTI+yhjd91YOFipwZVcDu08JsdXS40iM+318IBE73N2m7f//EACUQAQACAgIDAAICAwEAAAAAAAEAESExQVFhcYGRobHB0eHx8P/aAAgBAQABPxBuFwiqKZbXYlmWxw1TZcAqtVta/wCWoMLrTsd3j5CWXkG2jAPvVyiABmCDGOB/mBda0ooLEzzqMeqirQHb/cs/CBclNmB4urNjsXUkXQliP2NAdIqdX8iOLJQ7pjxpgZVtrXhFKrCmnICmICUlPRUTMCyl7uoMXVXGTbvPGoOpt7Cc3WH7KRnQcDalunpNepk3N5dmMW+4WGXHnq7qceoQUqvAH8yxYqYtXcR5iQCXixScq6qv5jPwpBrPEpmqiApeSH1Uy8JnZTnMdlmgm+yEN4Zg9eL32eaZbHiaaE6e6R97heshGhlMclXCRax1O0I2UEB49x/qwbEMlQqzZmruDror8h13kGRqAB6BovLxXMIl2rK9AfpqCmYypOAMedeY0cRgiJSTHsgNLLa6zDGq4Nmtr808RS37mVsW2ww79sL+ouo4VOdVXN0Ss4qv0z4zLX5LBf2gzEgktqbxNGSms9RnUqOMU8RaWx1FgboxEsCj5dMPSPKkWsq9WVOAExQyU5bnDUji0a5pL8zwxy7+wwuB1DcgWBAfwmemA3Yil3tgxYDDjXUumqwgVOPcF0zn/sMFEEVc7XMFiCtB0GhjziH1EF0KnyqgovfiWu6lMS+YuMEm6keUYeUhrRFpQZ/UtIKLFEc3/Vx6VK4eQqx8hFosxm5ag9JhltPw4jBDsqM3ubafCwtGLUkqfN3PETJsm05IFZIzWNuQzfcg9eJgqdlEVhblesxoTQcXzYrzqOWIbKreph6s7jVW8PyuILSJrYPqEG/Fzb+AZZwbiXf7griOAqfCHnejkTHolHoR4Y8wB0bLarLCwHQFL/PMAIU/cwBt3uYqHhp4muo3Mv6vBQuNFq6BlWfBQDpE2JzM2MesRa4/cHcH48QRcUiSRSI7ExUI5Ne2DnLlNd1XcaqyBDA+fE5ROGO6a+EWVoEfQH9wQpbocvIeoqTys2PwM+thMSZ0gVb3Ra2e66gq8UksYDzrVwB7hUu4GqywDMdOEYaO6vqM5KwLsawCI06UCg3j5Fk0RKzLf6B7Zn7HFh9FA8ZXTLsfgcWi8GAdHc6RXLeYQ1h8kCiX0ytKvt5LZTHSP8FJSMHmAKiWVaoxhv0b+TK8JmqDJ+pnyAjmpP3+o4X01S83JlFaLeC9KZ1jn222q5VVVtiWr+NWTfQf3zBurvPJGAqz/wBEcvyEUIZPgmw0QVUWOqPcyfphCWlHYx82dGFmz8WVjRIzUW9C/mMAROOOwHlz5ZZySaFAHQT8vMSlyUiq3IKS8W3jM6mp/9k=',
-            date: '4. Juli 2018 - 09:23',
-          },
+        query: ROOM_ENTRY_QUERY,
+        variables: {
+          slug: this.$route.params.slug,
         },
       };
     },
-
-    computed: {
-      comments() {
-        console.log(this.roomEntry);
-        return (this.roomEntry && this.roomEntry.comments) ? this.roomEntry.comments : [];
-      },
-    },
-
-    methods: {
-      createComment(text) {
-        log.debug(`createComment ${text}`);
-        const input = {
-              roomEntry: this.roomEntry.id,
-              comment: text,
-            };
-        log.debug(`input `, input);
-        this.$apollo.mutate({
-          mutation: ADD_COMMENT_MUTATION,
-          variables: {
-            input,
-          },
-          update: (store, {data: {addComment: {success, comment}}}) => {
-            if (success) {
-              const query = ROOM_ENTRY_QUERY;
-              const variables = {
-                slug: this.roomEntry.slug,
-              };
-              const {roomEntry} = store.readQuery({
-                query,
-                variables,
-              });
-              if (roomEntry) {
-                const comments = [
-                  comment,
-                  ...roomEntry.comments
-                ];
-                const data = {
-                  roomEntry: {
-                    ...roomEntry,
-                    comments
-                  }
-                };
-                store.writeQuery({query, variables, data});
-              }
-            }
-          },
-        });
-      },
-    },
-
-    apollo: {
-      roomEntry() {
-        return {
-          query: ROOM_ENTRY_QUERY,
-          variables: {
-            slug: this.$route.params.slug,
-          },
-
-        };
-      },
-    },
-  };
+  },
+};
 </script>
diff --git a/client/src/pages/beta-login.vue b/client/src/pages/beta-login.vue
index a5d059de..d5ce9361 100644
--- a/client/src/pages/beta-login.vue
+++ b/client/src/pages/beta-login.vue
@@ -1,14 +1,8 @@
 <template>
   <div class="login public-page">
-    <h1 class="login__title public-page__title">
-      Melden Sie sich jetzt an
-    </h1>
-    <ValidationObserver v-slot="{handleSubmit}">
-      <form
-        class="login__form login-form"
-        novalidate
-        @submit.prevent="handleSubmit(validateBeforeSubmit)"
-      >
+    <h1 class="login__title public-page__title">Melden Sie sich jetzt an</h1>
+    <ValidationObserver v-slot="{ handleSubmit }">
+      <form class="login__form login-form" novalidate @submit.prevent="handleSubmit(validateBeforeSubmit)">
         <validated-input
           :remote-errors="emailErrors"
           rules="required"
@@ -30,19 +24,10 @@
         />
 
         <div class="skillboxform-input">
-          <small
-            class="skillboxform-input__error"
-            data-cy="login-error"
-            v-if="loginError"
-          >{{ loginError }}</small>
+          <small class="skillboxform-input__error" data-cy="login-error" v-if="loginError">{{ loginError }}</small>
         </div>
         <div class="actions">
-          <button
-            class="button button--primary button--big actions__submit"
-            data-cy="login-button"
-          >
-            Anmelden
-          </button>
+          <button class="button button--primary button--big actions__submit" data-cy="login-button">Anmelden</button>
         </div>
       </form>
     </ValidationObserver>
@@ -50,46 +35,47 @@
 </template>
 
 <script>
-  import BETA_LOGIN_MUTATION from 'gql/public-client/betaLogin.gql';
-  import {ValidationObserver} from 'vee-validate';
+import BETA_LOGIN_MUTATION from 'gql/public-client/betaLogin.gql';
+import { ValidationObserver } from 'vee-validate';
 
-  const ValidatedInput = () => import('@/components/validation/ValidatedInput');
+const ValidatedInput = () => import('@/components/validation/ValidatedInput');
 
-  export default {
-    components: {
-      ValidatedInput,
-      ValidationObserver,
-    },
+export default {
+  components: {
+    ValidatedInput,
+    ValidationObserver,
+  },
 
-    data() {
-      return {
-        email: '',
-        password: '',
-        emailErrors: [],
-        passwordErrors: [],
-        loginError: '',
-        submitted: false,
+  data() {
+    return {
+      email: '',
+      password: '',
+      emailErrors: [],
+      passwordErrors: [],
+      loginError: '',
+      submitted: false,
+    };
+  },
+
+  methods: {
+    validateBeforeSubmit() {
+      this.submitted = true;
+
+      const variables = {
+        input: {
+          usernameInput: this.email,
+          passwordInput: this.password,
+        },
       };
-    },
 
-    methods: {
-      validateBeforeSubmit() {
-        this.submitted = true;
+      const redirectUrl = this.$route.query.redirect ? this.$route.query.redirect : '/';
 
-        const variables = {
-          input: {
-            usernameInput: this.email,
-            passwordInput: this.password,
-          },
-        };
-
-        const redirectUrl = this.$route.query.redirect ? this.$route.query.redirect : '/';
-
-        this.$apollo.mutate({
+      this.$apollo
+        .mutate({
           client: 'publicClient',
           mutation: BETA_LOGIN_MUTATION,
           variables,
-          update: (store, {data: {betaLogin}}) => {
+          update: (store, { data: { betaLogin } }) => {
             try {
               if (betaLogin.success) {
                 console.log(this);
@@ -100,7 +86,8 @@
               this.loginError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie nochmals.';
             }
           },
-        }).catch(error => {
+        })
+        .catch((error) => {
           const firstError = error.graphQLErrors[0];
           switch (firstError.message) {
             case 'invalid_credentials':
@@ -111,30 +98,28 @@
               break;
           }
         });
-      },
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .text-link {
-    font-family: $sans-serif-font-family;
-    color: $color-brand;
+.text-link {
+  font-family: $sans-serif-font-family;
+  color: $color-brand;
+}
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+
+  &__reset {
+    display: inline-block;
+    margin-left: $large-spacing;
+    padding: 15px;
+    line-height: 19px;
   }
-
-  .actions {
-
-    display: flex;
-    justify-content: space-between;
-
-    &__reset {
-      display: inline-block;
-      margin-left: $large-spacing;
-      padding: 15px;
-      line-height: 19px;
-    }
-  }
-
+}
 </style>
diff --git a/client/src/pages/createClass.vue b/client/src/pages/createClass.vue
index 0451a3e1..2ac0380e 100644
--- a/client/src/pages/createClass.vue
+++ b/client/src/pages/createClass.vue
@@ -14,58 +14,65 @@
 </template>
 
 <script>
-  import addSchoolClassMixin from '@/mixins/add-school-class';
+import addSchoolClassMixin from '@/mixins/add-school-class';
 
-  import CREATE_CLASS_MUTATION from '@/graphql/gql/mutations/createClass.gql';
-  import JoinForm from '@/components/profile/JoinForm';
+import CREATE_CLASS_MUTATION from '@/graphql/gql/mutations/createClass.gql';
+import JoinForm from '@/components/profile/JoinForm';
 
-  export default {
-    mixins: [addSchoolClassMixin],
+export default {
+  mixins: [addSchoolClassMixin],
 
-    components: {
-      JoinForm,
+  components: {
+    JoinForm,
+  },
+
+  data: () => ({
+    name: '',
+    error: '',
+  }),
+
+  methods: {
+    updateName(event) {
+      this.name = event.target.value;
+      this.error = '';
     },
-
-    data: () => ({
-      name: '',
-      error: '',
-    }),
-
-    methods: {
-      updateName(event) {
-        this.name = event.target.value;
-        this.error = '';
-      },
-      createClass(name) {
-        this.$apollo.mutate({
-          mutation: CREATE_CLASS_MUTATION,
-          variables: {
-            input: {
-              name,
+    createClass(name) {
+      this.$apollo.mutate({
+        mutation: CREATE_CLASS_MUTATION,
+        variables: {
+          input: {
+            name,
+          },
+        },
+        update: (
+          store,
+          {
+            data: {
+              createSchoolClass: { result },
             },
-          },
-          update: (store, {data: {createSchoolClass: {result}}}) => {
-            if (result.__typename === 'DuplicateName') {
-              this.error = result.reason;
-            } else {
-              this.addSchoolClass(store, result);
-              this.$router.push({
-                name: 'my-class',
-              });
-            }
-          },
-        });
-      },
-      cancel() {
-        this.$router.go(-1);
-      },
+          }
+        ) => {
+          if (result.__typename === 'DuplicateName') {
+            this.error = result.reason;
+          } else {
+            this.addSchoolClass(store, result);
+            this.$router.push({
+              name: 'my-class',
+            });
+          }
+        },
+      });
     },
-  };
+    cancel() {
+      this.$router.go(-1);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .create-class {
-  }
+.create-class {
+}
 </style>
diff --git a/client/src/pages/createContentBlock.vue b/client/src/pages/createContentBlock.vue
index 13e1aa55..e9e3fa0b 100644
--- a/client/src/pages/createContentBlock.vue
+++ b/client/src/pages/createContentBlock.vue
@@ -1,85 +1,82 @@
 <template>
-  <content-block-form
-    title="Inhaltsblock erfassen"
-    :content-block="contentBlock"
-    @back="goToModule"
-    @save="save"
-  />
+  <content-block-form title="Inhaltsblock erfassen" :content-block="contentBlock" @back="goToModule" @save="save" />
 </template>
 
 <script>
-  import Vue from 'vue';
+import Vue from 'vue';
 
-  import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
-  import {setUserBlockType} from '@/helpers/content-block';
-  import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';
-  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
-  import {cleanUpContents} from '@/components/content-block-form/helpers';
+import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
+import { setUserBlockType } from '@/helpers/content-block';
+import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';
+import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
+import { cleanUpContents } from '@/components/content-block-form/helpers';
 
-  export default Vue.extend({
-    props: {
-      parent: {
-        type: String,
-        default: ''
-      },
-      after: {
-        type: String,
-        default: ''
-      }
+export default Vue.extend({
+  props: {
+    parent: {
+      type: String,
+      default: '',
     },
-
-    components: {
-      ContentBlockForm,
+    after: {
+      type: String,
+      default: '',
     },
+  },
 
-    data: () => ({
-      contentBlock: {
-        title: '',
-        isAssignment: false,
-        contents: [
-        ]},
-    }),
+  components: {
+    ContentBlockForm,
+  },
 
-    methods: {
-      save({title, contents, isAssignment}) {
-        let cleanedContents = cleanUpContents(contents);
-        const contentBlock = {
-          title: title,
-          contents: cleanedContents,
-          type: setUserBlockType(isAssignment),
+  data: () => ({
+    contentBlock: {
+      title: '',
+      isAssignment: false,
+      contents: [],
+    },
+  }),
+
+  methods: {
+    save({ title, contents, isAssignment }) {
+      let cleanedContents = cleanUpContents(contents);
+      const contentBlock = {
+        title: title,
+        contents: cleanedContents,
+        type: setUserBlockType(isAssignment),
+      };
+      let input;
+      const { parent, after, slug } = this.$route.params;
+      if (after) {
+        input = {
+          contentBlock,
+          after,
         };
-        let input;
-        const { parent, after, slug } = this.$route.params;
-        if(after) {
-          input = {
-            contentBlock,
-            after
-          };
-        } else {
-          input = {
-            contentBlock,
-            parent
-          };
-        }
-        this.$apollo.mutate({
+      } else {
+        input = {
+          contentBlock,
+          parent,
+        };
+      }
+      this.$apollo
+        .mutate({
           mutation: NEW_CONTENT_BLOCK_MUTATION,
           variables: {
-            input
+            input,
           },
-          refetchQueries: [{
-            query: MODULE_DETAILS_QUERY,
-            variables: {
-              slug
-            }
-          }]
-        }).then(this.goToModule);
-      },
-      goToModule() {
-        // use the history, so the scroll position is preserved
-        this.$router.go(-1);
-      }
-    }
-
-
-  });
+          refetchQueries: [
+            {
+              query: MODULE_DETAILS_QUERY,
+              variables: {
+                slug,
+              },
+            },
+          ],
+        })
+        .then(this.goToModule);
+    },
+    goToModule() {
+      // use the history, so the scroll position is preserved
+      this.$router.go(-1);
+    },
+  },
+});
 </script>
diff --git a/client/src/pages/editContentBlock.vue b/client/src/pages/editContentBlock.vue
index ef98c1c7..2e02c89a 100644
--- a/client/src/pages/editContentBlock.vue
+++ b/client/src/pages/editContentBlock.vue
@@ -1,95 +1,91 @@
 <template>
-  <component
-    :is="component"
-    v-bind="componentProps"
-    @save="save"
-    @back="goToModule"
-  />
+  <component :is="component" v-bind="componentProps" @save="save" @back="goToModule" />
 </template>
 
 <script>
-  import CONTENT_BLOCK_QUERY from '@/graphql/gql/queries/contentBlockQuery.gql';
-  import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
+import CONTENT_BLOCK_QUERY from '@/graphql/gql/queries/contentBlockQuery.gql';
+import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
 
-  import EDIT_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/editContentBlock.gql';
-  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
-  import {setUserBlockType} from '@/helpers/content-block';
-  import {cleanUpContents, simplifyContents} from '@/components/content-block-form/helpers';
+import EDIT_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/editContentBlock.gql';
+import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
+import { setUserBlockType } from '@/helpers/content-block';
+import { cleanUpContents, simplifyContents } from '@/components/content-block-form/helpers';
 
-  // import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
+// import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
 
-
-  export default {
-    props: {
-      id: {
-        type: String,
-        required: true
-      },
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true,
     },
-    components: {ContentBlockForm},
+  },
+  components: { ContentBlockForm },
 
-    data: ()=>({
-      contentBlock: null,
-    }),
+  data: () => ({
+    contentBlock: null,
+  }),
 
-    computed: {
-      // only display component once the prop is loaded
-      component() {
-        if (this.contentBlock) {
-          return 'content-block-form';
-        }
-        return '';
-      },
-      componentProps() {
+  computed: {
+    // only display component once the prop is loaded
+    component() {
+      if (this.contentBlock) {
+        return 'content-block-form';
+      }
+      return '';
+    },
+    componentProps() {
+      return {
+        title: 'Inhalte bearbeiten',
+        contentBlock: this.contentBlock,
+      };
+    },
+  },
+
+  apollo: {
+    contentBlock: {
+      query: CONTENT_BLOCK_QUERY,
+      variables() {
         return {
-          title: 'Inhalte bearbeiten',
-          contentBlock: this.contentBlock
+          id: this.id,
         };
-      }
+      },
     },
+  },
 
-
-    apollo: {
-      contentBlock: {
-        query: CONTENT_BLOCK_QUERY,
-        variables()  {
-          return {
-              id: this.id
-          };
-        }
-      }
-    },
-
-    methods: {
-      save({title, contents, isAssignment, id}) {
-        const cleanedContents = cleanUpContents(contents);
-        const simplifiedContents = simplifyContents(cleanedContents);
-        const contentBlock = {
-          title: title,
-          contents: simplifiedContents,
-          type: setUserBlockType(isAssignment),
-        };
-        const { slug } = this.$route.params;
-        const input = {
-          id,
-          contentBlock
-        };
-        this.$apollo.mutate({
+  methods: {
+    save({ title, contents, isAssignment, id }) {
+      const cleanedContents = cleanUpContents(contents);
+      const simplifiedContents = simplifyContents(cleanedContents);
+      const contentBlock = {
+        title: title,
+        contents: simplifiedContents,
+        type: setUserBlockType(isAssignment),
+      };
+      const { slug } = this.$route.params;
+      const input = {
+        id,
+        contentBlock,
+      };
+      this.$apollo
+        .mutate({
           mutation: EDIT_CONTENT_BLOCK_MUTATION,
           variables: {
-            input
+            input,
           },
-          refetchQueries: [{
-            query: MODULE_DETAILS_QUERY,
-            variables: { slug }
-          }]
-        }).then(this.goToModule);
-      },
-      goToModule() {
-        // use the history, so the scroll position is preserved
-        this.$router.go(-1);
-      }
-    }
-
-  };
+          refetchQueries: [
+            {
+              query: MODULE_DETAILS_QUERY,
+              variables: { slug },
+            },
+          ],
+        })
+        .then(this.goToModule);
+    },
+    goToModule() {
+      // use the history, so the scroll position is preserved
+      this.$router.go(-1);
+    },
+  },
+};
 </script>
diff --git a/client/src/pages/hello.vue b/client/src/pages/hello.vue
index 7470b34f..d00a29c0 100644
--- a/client/src/pages/hello.vue
+++ b/client/src/pages/hello.vue
@@ -1,64 +1,39 @@
 <template>
-  <div
-    class="hello"
-    data-cy="hello-page"
-  >
+  <div class="hello" data-cy="hello-page">
     <div class="about">
       <div class="about__logos logos">
-        <a
-          href="https://www.hep-verlag.ch/"
-          target="_blank"
-        >
+        <a href="https://www.hep-verlag.ch/" target="_blank">
           <hep-logo-no-claim class="logos__logo" />
         </a>
-        <a
-          href="https://www.ehb.swiss/"
-          target="_blank"
-          v-if="$flavor.showEHB"
-        >
+        <a href="https://www.ehb.swiss/" target="_blank" v-if="$flavor.showEHB">
           <ehb-logo class="logos__logo" />
         </a>
       </div>
       <p class="about__text">
         <template v-if="$flavor.showEHB">
-          {{ $flavor.textAppName }} ist ein Angebot des hep Verlags in
-          Zusammenarbeit mit der Eidgenössischen Hochschule für Berufsbildung (EHB).
-        </template>
-        <template v-else>
-          {{ $flavor.textAppName }} ist ein Angebot des hep Verlags.
+          {{ $flavor.textAppName }} ist ein Angebot des hep Verlags in Zusammenarbeit mit der Eidgenössischen Hochschule
+          für Berufsbildung (EHB).
         </template>
+        <template v-else> {{ $flavor.textAppName }} ist ein Angebot des hep Verlags. </template>
       </p>
     </div>
     <logo class="logo" />
     <div class="login-actions">
-      <h2
-        class="login-actions__title"
-        data-cy="hello-title"
-      >
+      <h2 class="login-actions__title" data-cy="hello-title">
         Wollen Sie {{ $flavor.textAppName }} im Unterricht verwenden?
       </h2>
-      <a
-        class="button button--primary button--big actions__submit"
-        href="/api/oauth/login/"
-        data-cy="oauth-login"
-      >Mit hep Konto anmelden</a>
+      <a class="button button--primary button--big actions__submit" href="/api/oauth/login/" data-cy="oauth-login"
+        >Mit hep Konto anmelden</a
+      >
 
       <div class="login-actions__register register">
         <p>Haben Sie noch kein hep Konto?</p>
-        <a
-          class="hep-link"
-          href="/api/oauth/login/"
-          data-cy="oauth-login"
-        >Jetzt registrieren</a>
+        <a class="hep-link" href="/api/oauth/login/" data-cy="oauth-login">Jetzt registrieren</a>
       </div>
     </div>
     <div class="information">
       <p>Was ist ein hep Konto und wie kann ich mich dafür registrieren?</p>
-      <a
-        class="hep-link"
-        href="https://myskillbox.ch/anleitung"
-        data-cy="oauth-login"
-      >Anleitung anschauen</a>
+      <a class="hep-link" href="https://myskillbox.ch/anleitung" data-cy="oauth-login">Anleitung anschauen</a>
     </div>
     <div class="links">
       <ul class="links__list">
@@ -77,132 +52,131 @@
 </template>
 
 <script>
-  const HepLogoNoClaim = () => import(/* webpackChunkName: "icons" */'@/components/icons/HepLogoNoClaim');
-  const EhbLogo = () => import(/* webpackChunkName: "icons" */'@/components/icons/EhbLogo');
-  const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
+const HepLogoNoClaim = () => import(/* webpackChunkName: "icons" */ '@/components/icons/HepLogoNoClaim');
+const EhbLogo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EhbLogo');
+const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
 
-  export default {
-    components: {
-      HepLogoNoClaim,
-      EhbLogo,
-      Logo
-    },
+export default {
+  components: {
+    HepLogoNoClaim,
+    EhbLogo,
+    Logo,
+  },
 
-    data() {
-      return {
-        email: '',
-        submitted: false,
-        loading: false
-      };
-    },
-
-  };
+  data() {
+    return {
+      email: '',
+      submitted: false,
+      loading: false,
+    };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  $hello-block-margin: 2*$medium-spacing;
+$hello-block-margin: 2 * $medium-spacing;
 
-  .hello {
+.hello {
+  max-width: 600px;
+  margin: 0 auto;
+  @include desktop {
     max-width: 600px;
     margin: 0 auto;
-    @include desktop {
-      max-width: 600px;
-      margin: 0 auto;
-    }
   }
+}
 
-  .logo {
-    display: block;
-    width: 300px;
-    margin: $small-spacing auto $hello-block-margin;
+.logo {
+  display: block;
+  width: 300px;
+  margin: $small-spacing auto $hello-block-margin;
 
-    @include desktop {
-      display: none;
-    }
-  }
-
-  .about {
+  @include desktop {
     display: none;
-    margin-bottom: $hello-block-margin;
+  }
+}
+
+.about {
+  display: none;
+  margin-bottom: $hello-block-margin;
+
+  @include desktop {
+    display: block;
+  }
+
+  &__text {
+    margin-top: $medium-spacing;
+    @include regular-text;
+  }
+
+  &__logos {
+    & a:first-child {
+      margin-right: $large-spacing;
+    }
+  }
+}
+
+.logos {
+  &__logo {
+    height: 30px;
+  }
+}
+
+.login-actions {
+  @include widget-shadow;
+  padding: $medium-spacing;
+  margin-bottom: $hello-block-margin;
+
+  &__title {
+    font-size: 2.125rem; // 34px
+    font-weight: 700;
+  }
+
+  &__register {
+    margin-top: $large-spacing;
+
+    > p,
+    a {
+      @include regular-text;
+    }
+  }
+}
+
+.information {
+  margin-top: $hello-block-margin;
+  > p,
+  a {
+    @include regular-text;
+  }
+}
+
+.links {
+  margin-top: $hello-block-margin;
+  display: flex;
+
+  &__list-item {
+    color: $color-silver-dark;
+
+    > a {
+      @include regular-text;
+    }
+
+    flex-direction: column;
+    margin-top: $medium-spacing;
+
+    &:first-child {
+      margin-top: 0;
+    }
 
     @include desktop {
-      display: block;
-    }
+      display: inline-block;
+      flex-direction: row;
 
-    &__text {
-      margin-top: $medium-spacing;
-      @include regular-text;
-    }
-
-    &__logos {
-      & a:first-child {
-        margin-right: $large-spacing;
+      &:not(:last-child) {
+        margin-right: 1rem;
       }
     }
   }
-
-  .logos {
-    &__logo {
-      height: 30px;
-    }
-  }
-
-  .login-actions {
-    @include widget-shadow;
-    padding: $medium-spacing;
-    margin-bottom: $hello-block-margin;
-
-    &__title {
-        font-size: 2.125rem; // 34px
-        font-weight: 700;
-    }
-
-    &__register {
-      margin-top: $large-spacing;
-
-      > p, a {
-        @include regular-text;
-      }
-    }
-  }
-
-  .information {
-    margin-top: $hello-block-margin;
-    > p, a {
-      @include regular-text;
-    }
-  }
-
-  .links {
-    margin-top: $hello-block-margin;
-    display: flex;
-
-    &__list-item {
-
-      color: $color-silver-dark;
-
-      > a {
-        @include regular-text;
-      }
-
-      flex-direction: column;
-      margin-top: $medium-spacing;
-
-      &:first-child {
-        margin-top: 0;
-      }
-
-      @include desktop {
-        display: inline-block;
-        flex-direction: row;
-
-        &:not(:last-child) {
-          margin-right: 1rem;
-        }
-     }
-    }
-  }
-
+}
 </style>
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 754794f2..45537d35 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -3,14 +3,10 @@
     <h3>Pages</h3>
     <ul>
       <li>
-        <router-link to="/book">
-          Book
-        </router-link>
+        <router-link to="/book"> Book </router-link>
       </li>
       <li>
-        <router-link to="/book/topic">
-          Topic
-        </router-link>
+        <router-link to="/book/topic"> Topic </router-link>
       </li>
       <li>
         <router-link to="/module">
@@ -18,35 +14,33 @@
         </router-link>
       </li>
       <li>
-        <router-link to="/rooms">
-          Räume
-        </router-link>
+        <router-link to="/rooms"> Räume </router-link>
       </li>
     </ul>
   </div>
 </template>
 
 <script>
-  import ALL_MODULES from '@/graphql/gql/queries/allModules.gql';
+import ALL_MODULES from '@/graphql/gql/queries/allModules.gql';
 
-  export default {
-    data() {
-      return {
-        modules: []
-      };
-    },
+export default {
+  data() {
+    return {
+      modules: [],
+    };
+  },
 
-    apollo: {
-      modules: {
-        query: ALL_MODULES,
-        // prefetch: true,
-        manual: true,
-        result({data, loading}) {
-          if (!loading) {
-            this.modules = this.$getRidOfEdges(data).modules;
-          }
+  apollo: {
+    modules: {
+      query: ALL_MODULES,
+      // prefetch: true,
+      manual: true,
+      result({ data, loading }) {
+        if (!loading) {
+          this.modules = this.$getRidOfEdges(data).modules;
         }
-      }
-    }
-  };
+      },
+    },
+  },
+};
 </script>
diff --git a/client/src/pages/instrument.vue b/client/src/pages/instrument.vue
index 8c9354d5..d3865ea9 100644
--- a/client/src/pages/instrument.vue
+++ b/client/src/pages/instrument.vue
@@ -1,18 +1,11 @@
 <template>
   <div class="instrument">
-    <h1
-      class="instrument__title"
-      data-cy="instrument-title"
-    >
+    <h1 class="instrument__title" data-cy="instrument-title">
       {{ instrument.title }}
     </h1>
 
     <!-- eslint-disable vue/no-v-html -->
-    <div
-      class="instrument__intro intro"
-      data-cy="instrument-intro"
-      v-html="instrument.intro"
-    />
+    <div class="instrument__intro intro" data-cy="instrument-intro" v-html="instrument.intro" />
 
     <content-component
       :component="component"
@@ -27,79 +20,80 @@
 </template>
 
 <script>
-  import INSTRUMENT_QUERY from '@/graphql/gql/queries/instrumentQuery.gql';
+import INSTRUMENT_QUERY from '@/graphql/gql/queries/instrumentQuery.gql';
 
-  const ContentComponent = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentComponent');
+const ContentComponent = () =>
+  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/ContentComponent');
 
-  export default {
-    apollo: {
-      instrument() {
-        return {
-          query: INSTRUMENT_QUERY,
-          variables: {
-            slug: this.$route.params.slug
-          }
-        };
-      }
-    },
-
-    components: {
-      ContentComponent
-    },
-
-    data() {
+export default {
+  apollo: {
+    instrument() {
       return {
-        instrument: {}
+        query: INSTRUMENT_QUERY,
+        variables: {
+          slug: this.$route.params.slug,
+        },
       };
-    }
-  };
+    },
+  },
+
+  components: {
+    ContentComponent,
+  },
+
+  data() {
+    return {
+      instrument: {},
+    };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .instrument {
-    &__title {
-      font-size: toRem(35px);
+.instrument {
+  &__title {
+    font-size: toRem(35px);
+    margin-bottom: $large-spacing;
+    line-height: $default-heading-line-height;
+  }
+
+  & :deep() {
+    & p {
       margin-bottom: $large-spacing;
-      line-height: $default-heading-line-height;
     }
 
-    & :deep() {
-      & p {
-        margin-bottom: $large-spacing;
-      }
+    & p:last-child {
+      margin-bottom: 0;
+    }
 
-      & p:last-child {
-        margin-bottom: 0;
-      }
+    & ul {
+      @include list-parent;
+    }
 
-      & ul {
-        @include list-parent;
-      }
+    & p + ul {
+      margin-top: -30px;
+    }
 
-      & p + ul {
-        margin-top: -30px;
-      }
+    & li {
+      @include list-child;
+      line-height: 1.5;
+    }
 
-      & li {
-        @include list-child;
-        line-height: 1.5;
-      }
+    & b {
+      font-weight: 600;
+    }
 
-      & b {
-        font-weight: 600;
-      }
+    .brand {
+      color: $color-brand;
+      font-weight: 600;
+    }
 
-      .brand {
-        color: $color-brand;
-        font-weight: 600;
-      }
-
-      .secondary {
-        color: $color-accent-2;
-        font-weight: 600;
-      }
+    .secondary {
+      color: $color-accent-2;
+      font-weight: 600;
     }
   }
+}
 </style>
diff --git a/client/src/pages/instrumentOverview.vue b/client/src/pages/instrumentOverview.vue
index e93f6041..2a240e4b 100644
--- a/client/src/pages/instrumentOverview.vue
+++ b/client/src/pages/instrumentOverview.vue
@@ -5,13 +5,10 @@
       v-if="$flavor.showInstrumentFilterSidebar"
       @filter="updateFilter"
     />
-    <div
-      class="instrument-overview__filter"
-      v-else
-    />
+    <div class="instrument-overview__filter" v-else />
     <div class="instrument-overview__list">
       <router-link
-        :to="{name: 'instrument', params: {slug: instrument.slug}}"
+        :to="{ name: 'instrument', params: { slug: instrument.slug } }"
         data-cy="instrument"
         tag="div"
         v-for="instrument in filteredInstruments"
@@ -24,96 +21,95 @@
 </template>
 
 <script>
-  import InstrumentFilter from '@/components/instruments/InstrumentFilter';
-  import InstrumentEntry from '@/components/instruments/InstrumentEntry';
-  import INSTRUMENTS_QUERY from '@/graphql/gql/queries/instrumentsQuery.gql';
-  import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
+import InstrumentFilter from '@/components/instruments/InstrumentFilter';
+import InstrumentEntry from '@/components/instruments/InstrumentEntry';
+import INSTRUMENTS_QUERY from '@/graphql/gql/queries/instrumentsQuery.gql';
+import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
 
-  export default {
-    components: {
-      InstrumentFilter,
-      InstrumentEntry,
-    },
+export default {
+  components: {
+    InstrumentFilter,
+    InstrumentEntry,
+  },
 
-    apollo: {
-      instruments: {
-        query: INSTRUMENTS_QUERY,
-        update(data) {
-          return this.$getRidOfEdges(data).instruments;
-        },
+  apollo: {
+    instruments: {
+      query: INSTRUMENTS_QUERY,
+      update(data) {
+        return this.$getRidOfEdges(data).instruments;
       },
-      instrumentFilter: {
-        query: INSTRUMENT_FILTER_QUERY,
-        update({instrumentFilter}) {
-          const {currentFilter} = instrumentFilter;
-          if (currentFilter && currentFilter.indexOf(':') > -1) {
-            const [filterType, identifier] = currentFilter.split(':');
-            if(filterType === 'type') {
-              this.filter = i => i.type.id === identifier;
-            } else {
-              this.filter = i => i.type.category.id === identifier;
-            }
+    },
+    instrumentFilter: {
+      query: INSTRUMENT_FILTER_QUERY,
+      update({ instrumentFilter }) {
+        const { currentFilter } = instrumentFilter;
+        if (currentFilter && currentFilter.indexOf(':') > -1) {
+          const [filterType, identifier] = currentFilter.split(':');
+          if (filterType === 'type') {
+            this.filter = (i) => i.type.id === identifier;
           } else {
-            this.filter = i => i; // identity
+            this.filter = (i) => i.type.category.id === identifier;
           }
-          return instrumentFilter;
-        },
+        } else {
+          this.filter = (i) => i; // identity
+        }
+        return instrumentFilter;
       },
     },
+  },
 
-    data() {
-      return {
-        instruments: [],
-        filter: i => i, // identity
-        instrumentFilter: {
-          currentFilter: '',
-        },
-      };
-    },
-
-    computed: {
-      filteredInstruments() {
-        return this.instruments.filter(i => this.filter(i));
+  data() {
+    return {
+      instruments: [],
+      filter: (i) => i, // identity
+      instrumentFilter: {
+        currentFilter: '',
       },
-    },
+    };
+  },
 
-    methods: {
-      updateFilter(filter) {
-        this.filter = filter;
-      },
+  computed: {
+    filteredInstruments() {
+      return this.instruments.filter((i) => this.filter(i));
     },
-  };
+  },
+
+  methods: {
+    updateFilter(filter) {
+      this.filter = filter;
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .instrument-overview {
-    display: grid;
-    //grid-template-rows: auto auto 1fr;
-    grid-template-columns: 300px auto;
-    grid-column-gap: $small-spacing;
-    //@include centered(800px);
-    padding: 0 $small-spacing;
+.instrument-overview {
+  display: grid;
+  //grid-template-rows: auto auto 1fr;
+  grid-template-columns: 300px auto;
+  grid-column-gap: $small-spacing;
+  //@include centered(800px);
+  padding: 0 $small-spacing;
 
-    &__filter {
-
-    }
-
-    &__list {
-      padding: $large-spacing 0;
-      max-width: $screen-width;
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-self: center;
-    }
-
-    &__list-item {
-      padding: $medium-spacing 0;
-
-      @include regular-text;
-      @include table-row($color-silver);
-    }
+  &__filter {
   }
+
+  &__list {
+    padding: $large-spacing 0;
+    max-width: $screen-width;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-self: center;
+  }
+
+  &__list-item {
+    padding: $medium-spacing 0;
+
+    @include regular-text;
+    @include table-row($color-silver);
+  }
+}
 </style>
diff --git a/client/src/pages/joinClass.vue b/client/src/pages/joinClass.vue
index 9731bb73..c4bec183 100644
--- a/client/src/pages/joinClass.vue
+++ b/client/src/pages/joinClass.vue
@@ -12,57 +12,63 @@
 </template>
 
 <script>
-  import JOIN_CLASS_MUTATION from '@/graphql/gql/mutations/joinClass.gql';
-  import log from 'loglevel';
-  import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass.gql';
+import JOIN_CLASS_MUTATION from '@/graphql/gql/mutations/joinClass.gql';
+import log from 'loglevel';
+import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass.gql';
 
-  import addSchoolClass from '@/mixins/add-school-class';
-  import logout from '@/mixins/logout';
+import addSchoolClass from '@/mixins/add-school-class';
+import logout from '@/mixins/logout';
 
-  import JoinForm from '@/components/profile/JoinForm';
+import JoinForm from '@/components/profile/JoinForm';
 
-  export default {
-    mixins: [addSchoolClass, logout],
-    components: {JoinForm},
+export default {
+  mixins: [addSchoolClass, logout],
+  components: { JoinForm },
 
-    data: () => ({
-      code: '',
-      error: '',
-    }),
+  data: () => ({
+    code: '',
+    error: '',
+  }),
 
-    methods: {
-      updateCode(event) {
-        this.code = event.target.value;
-        this.error = '';
-      },
-      joinClass(code) {
-        log.debug('joining class');
-        this.$apollo.mutate({
-            mutation: JOIN_CLASS_MUTATION,
-            variables: {
-              input: {
-                code,
-              },
-            },
-            update: (store, {data: {joinClass: {schoolClass}}}) => {
-              this.addSchoolClass(store, schoolClass);
-              log.debug('added school class');
-              this.$router.push({name: 'my-class'});
-            },
-            refetchQueries: [{query: MY_SCHOOL_CLASS_QUERY}],
-          })
-          .then(() => {
-
-          })
-          .catch(e => {
-            console.debug(e);
-            if (e.message.indexOf('[CAJ]') > -1) {
-              this.error = 'Sie sind dieser Klasse bereits beigetreten.';
-            } else {
-              this.error = 'Dieser Zugangscode ist nicht gültig.';
-            }
-          });
-      },
+  methods: {
+    updateCode(event) {
+      this.code = event.target.value;
+      this.error = '';
     },
-  };
+    joinClass(code) {
+      log.debug('joining class');
+      this.$apollo
+        .mutate({
+          mutation: JOIN_CLASS_MUTATION,
+          variables: {
+            input: {
+              code,
+            },
+          },
+          update: (
+            store,
+            {
+              data: {
+                joinClass: { schoolClass },
+              },
+            }
+          ) => {
+            this.addSchoolClass(store, schoolClass);
+            log.debug('added school class');
+            this.$router.push({ name: 'my-class' });
+          },
+          refetchQueries: [{ query: MY_SCHOOL_CLASS_QUERY }],
+        })
+        .then(() => {})
+        .catch((e) => {
+          console.debug(e);
+          if (e.message.indexOf('[CAJ]') > -1) {
+            this.error = 'Sie sind dieser Klasse bereits beigetreten.';
+          } else {
+            this.error = 'Dieser Zugangscode ist nicht gültig.';
+          }
+        });
+    },
+  },
+};
 </script>
diff --git a/client/src/pages/license-activation.vue b/client/src/pages/license-activation.vue
index 1f06743a..b7c00d8d 100644
--- a/client/src/pages/license-activation.vue
+++ b/client/src/pages/license-activation.vue
@@ -2,14 +2,11 @@
   <div class="license-activation public-page">
     <header class="info-header">
       <p class="info-header__text small-emph">
-        Für <span class="info-header__emph">{{ me.email }}</span> haben wir keine
-        gültige Lizenz gefunden
+        Für <span class="info-header__emph">{{ me.email }}</span> haben wir keine gültige Lizenz gefunden
       </p>
     </header>
     <section class="coupon">
-      <ValidationObserver
-        v-slot="{handleSubmit}"
-      >
+      <ValidationObserver v-slot="{ handleSubmit }">
         <form
           class="license-activation__form license-activation-form"
           novalidate
@@ -33,12 +30,7 @@
               data-cy="coupon-button"
               label="Coupon abschicken"
             />
-            <a
-              class="button button--big"
-              data-cy="license-activation-cancel"
-              @click="logout"
-            >Abmelden
-            </a>
+            <a class="button button--big" data-cy="license-activation-cancel" @click="logout">Abmelden </a>
           </div>
         </form>
       </ValidationObserver>
@@ -47,16 +39,10 @@
       <h2>Oder, kaufen Sie eine Lizenz</h2>
       <ul class="license-links">
         <li class="license-links__item">
-          <a
-            :href="teacherEditionUrl"
-            class="hep-link"
-          >{{ $flavor.textAppName }} für Lehrpersonen</a>
+          <a :href="teacherEditionUrl" class="hep-link">{{ $flavor.textAppName }} für Lehrpersonen</a>
         </li>
         <li class="license-links__item">
-          <a
-            :href="studentEditionUrl"
-            class="hep-link"
-          >{{ $flavor.textAppName }} für Lernende</a>
+          <a :href="studentEditionUrl" class="hep-link">{{ $flavor.textAppName }} für Lernende</a>
         </li>
       </ul>
     </section>
@@ -64,102 +50,101 @@
 </template>
 
 <script>
+import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql';
+import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+import LoadingButton from '@/components/LoadingButton';
+import { ValidationObserver } from 'vee-validate';
 
-  import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql';
-  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
-  import LoadingButton from '@/components/LoadingButton';
-  import {ValidationObserver} from 'vee-validate';
+import me from '@/mixins/me';
+import logout from '@/mixins/logout';
 
-  import me from '@/mixins/me';
-  import logout from '@/mixins/logout';
+const ValidatedInput = () => import('@/components/validation/ValidatedInput.vue');
 
-  const ValidatedInput = () => import('@/components/validation/ValidatedInput.vue');
+export default {
+  mixins: [me, logout],
+  components: {
+    LoadingButton,
+    ValidationObserver,
+    ValidatedInput,
+  },
 
-  export default {
-    mixins: [me, logout],
-    components: {
-      LoadingButton,
-      ValidationObserver,
-      ValidatedInput,
-    },
-
-    data() {
-      return {
-        coupon: '',
-        couponErrors: [],
-        loginError: '',
-        submitted: false,
-        me: {
-          email: '',
-        },
-        teacherEditionUrl: `${process.env.HEP_URL}/myskillbox-lehrpersonen`,
-        studentEditionUrl: `${process.env.HEP_URL}/myskillbox-fur-lernende`,
-        loading: false,
-      };
-    },
-    methods: {
-      validateBeforeSubmit() {
-        this.submitted = true;
-        this.loading = true;
-        this.$apollo.mutate({
+  data() {
+    return {
+      coupon: '',
+      couponErrors: [],
+      loginError: '',
+      submitted: false,
+      me: {
+        email: '',
+      },
+      teacherEditionUrl: `${process.env.HEP_URL}/myskillbox-lehrpersonen`,
+      studentEditionUrl: `${process.env.HEP_URL}/myskillbox-fur-lernende`,
+      loading: false,
+    };
+  },
+  methods: {
+    validateBeforeSubmit() {
+      this.submitted = true;
+      this.loading = true;
+      this.$apollo
+        .mutate({
           mutation: REDEEM_COUPON,
           variables: {
             input: {
               couponCode: this.coupon,
             },
           },
-          update: (
-            store,
-            {
-              data: {coupon},
-            },
-          ) => {
+          update: (store, { data: { coupon } }) => {
             if (coupon.success) {
               this.couponErrors = [];
-              this.$apollo.query({
-                query: ME_QUERY,
-                fetchPolicy: 'network-only',
-              }).then(() => this.$router.push('/'));
+              this.$apollo
+                .query({
+                  query: ME_QUERY,
+                  fetchPolicy: 'network-only',
+                })
+                .then(() => this.$router.push('/'));
             }
           },
-        }).catch(({message}) => {
-            if (message.indexOf('invalid_coupon') > -1) {
-              this.couponErrors = ['Der angegebene Coupon-Code ist ungültig.'];
-            } else {
-              this.couponErrors = ['Es ist ein Fehler aufgetreten. Bitte versuchen Sie es nochmals oder kontaktieren Sie den Administrator.'];
-            }
-          })
-          .finally(() => {
-            this.loading = false;
-          });
-      },
+        })
+        .catch(({ message }) => {
+          if (message.indexOf('invalid_coupon') > -1) {
+            this.couponErrors = ['Der angegebene Coupon-Code ist ungültig.'];
+          } else {
+            this.couponErrors = [
+              'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es nochmals oder kontaktieren Sie den Administrator.',
+            ];
+          }
+        })
+        .finally(() => {
+          this.loading = false;
+        });
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .text-link {
-    font-family: $sans-serif-font-family;
-    color: $color-brand;
+.text-link {
+  font-family: $sans-serif-font-family;
+  color: $color-brand;
+}
+
+.actions {
+  &__reset {
+    display: inline-block;
+    margin-left: $large-spacing;
   }
+}
 
-  .actions {
-    &__reset {
-      display: inline-block;
-      margin-left: $large-spacing;
-    }
+.get-license {
+  margin-top: $large-spacing;
+}
+
+.license-links {
+  &__item {
+    margin-bottom: $medium-spacing;
   }
-
-  .get-license {
-    margin-top: $large-spacing
-  }
-
-  .license-links {
-    &__item {
-      margin-bottom: $medium-spacing;
-    }
-  }
-
+}
 </style>
diff --git a/client/src/pages/login-error.vue b/client/src/pages/login-error.vue
index acff8c1b..32fa852b 100644
--- a/client/src/pages/login-error.vue
+++ b/client/src/pages/login-error.vue
@@ -1,62 +1,41 @@
 <template>
   <div class="login-error">
     <header class="info-header">
-      <h1
-        class="public-page__title"
-        data-cy="login-error-title"
-      >
+      <h1 class="public-page__title" data-cy="login-error-title">
         {{ title }}
       </h1>
     </header>
-    <main
-      class="login-error__content content"
-      data-cy="login-error-text"
-    >
-      <p
-        class="content__instructions"
-        v-for="message in errorMessages"
-        :key="message"
-      >
+    <main class="login-error__content content" data-cy="login-error-text">
+      <p class="content__instructions" v-for="message in errorMessages" :key="message">
         {{ message }}
       </p>
-      <p
-        class="extra-link"
-        v-if="alternateLink"
-      >
-        <a
-          :href="alternateLink"
-          class="hep-link"
-        >
+      <p class="extra-link" v-if="alternateLink">
+        <a :href="alternateLink" class="hep-link">
           {{ alternateLinkMessage }}
         </a>
       </p>
       <p v-else>
-        <router-link
-          :to="{name: 'hello'}"
-          class="hep-link"
-        >
-          Startseite anzeigen
-        </router-link>
+        <router-link :to="{ name: 'hello' }" class="hep-link"> Startseite anzeigen </router-link>
       </p>
     </main>
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'LoginErrorPage',
-    props: ['title', 'errorMessage', 'alternateLink', 'alternateLinkMessage', 'extraMessages'],
-    computed: {
-      errorMessages() {
-        return this.extraMessages ? [this.errorMessage, ...this.extraMessages] : [this.errorMessage];
-      }
-    }
-  };
+export default {
+  name: 'LoginErrorPage',
+  props: ['title', 'errorMessage', 'alternateLink', 'alternateLinkMessage', 'extraMessages'],
+  computed: {
+    errorMessages() {
+      return this.extraMessages ? [this.errorMessage, ...this.extraMessages] : [this.errorMessage];
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
 .content__instructions {
   margin: $medium-spacing 0;
diff --git a/client/src/pages/me/createTeam.vue b/client/src/pages/me/createTeam.vue
index 1b570170..d2eba2dd 100644
--- a/client/src/pages/me/createTeam.vue
+++ b/client/src/pages/me/createTeam.vue
@@ -14,52 +14,58 @@
 </template>
 
 <script>
-  import JoinForm from '@/components/profile/JoinForm';
+import JoinForm from '@/components/profile/JoinForm';
 
-  import CREATE_TEAM_MUTATION from '@/graphql/gql/mutations/createTeam.gql';
-  import {MY_TEAM} from '@/router/me.names';
-  import addTeam from '@/helpers/add-team';
+import CREATE_TEAM_MUTATION from '@/graphql/gql/mutations/createTeam.gql';
+import { MY_TEAM } from '@/router/me.names';
+import addTeam from '@/helpers/add-team';
 
-  export default {
+export default {
+  components: {
+    JoinForm,
+  },
 
-    components: {
-      JoinForm,
+  data: () => ({
+    name: '',
+    error: '',
+  }),
+
+  methods: {
+    updateName(event) {
+      this.name = event.target.value;
+      this.error = '';
     },
-
-    data: () => ({
-      name: '',
-      error: '',
-    }),
-
-    methods: {
-      updateName(event) {
-        this.name = event.target.value;
-        this.error = '';
-      },
-      createTeam(name) {
-        this.$apollo.mutate({
-          mutation: CREATE_TEAM_MUTATION,
-          variables: {
-            input: {
-              name,
+    createTeam(name) {
+      this.$apollo.mutate({
+        mutation: CREATE_TEAM_MUTATION,
+        variables: {
+          input: {
+            name,
+          },
+        },
+        update: (
+          store,
+          {
+            data: {
+              createTeam: { result },
             },
-          },
-          update: (store, {data: {createTeam: {result}}}) => {
-            if(result.__typename === 'DuplicateName') {
-              this.error = result.reason;
-            } else {
-              addTeam(store, result);
+          }
+        ) => {
+          if (result.__typename === 'DuplicateName') {
+            this.error = result.reason;
+          } else {
+            addTeam(store, result);
 
-              this.$router.push({
-                name: MY_TEAM,
-              });
-            }
-          },
-        });
-      },
-      cancel() {
-        this.$router.go(-1);
-      },
+            this.$router.push({
+              name: MY_TEAM,
+            });
+          }
+        },
+      });
     },
-  };
+    cancel() {
+      this.$router.go(-1);
+    },
+  },
+};
 </script>
diff --git a/client/src/pages/me/joinTeam.vue b/client/src/pages/me/joinTeam.vue
index 39bd3810..e7bbcd37 100644
--- a/client/src/pages/me/joinTeam.vue
+++ b/client/src/pages/me/joinTeam.vue
@@ -12,54 +12,60 @@
 </template>
 
 <script>
-  import JOIN_TEAM_MUTATION from '@/graphql/gql/mutations/joinTeam.gql';
+import JOIN_TEAM_MUTATION from '@/graphql/gql/mutations/joinTeam.gql';
 
-  import JoinForm from '@/components/profile/JoinForm';
-  import {MY_TEAM} from '@/router/me.names';
-  import addTeam from '@/helpers/add-team';
+import JoinForm from '@/components/profile/JoinForm';
+import { MY_TEAM } from '@/router/me.names';
+import addTeam from '@/helpers/add-team';
 
-  export default {
-    components: {
-      JoinForm,
+export default {
+  components: {
+    JoinForm,
+  },
+
+  data() {
+    return {
+      code: '',
+      error: '',
+      teamRoute: {
+        name: MY_TEAM,
+      },
+    };
+  },
+
+  methods: {
+    updateCode(event) {
+      this.code = event.target.value;
+      this.error = '';
     },
-
-    data() {
-      return {
-        code: '',
-        error: '',
-        teamRoute: {
-          name: MY_TEAM,
+    cancel() {
+      this.$router.push(this.teamRoute);
+    },
+    joinTeam(code) {
+      this.$apollo.mutate({
+        mutation: JOIN_TEAM_MUTATION,
+        variables: {
+          input: {
+            code: code,
+          },
         },
-      };
-    },
-
-    methods: {
-      updateCode(event) {
-        this.code = event.target.value;
-        this.error = '';
-      },
-      cancel() {
-        this.$router.push(this.teamRoute);
-      },
-      joinTeam(code) {
-        this.$apollo.mutate({
-          mutation: JOIN_TEAM_MUTATION,
-          variables: {
-            'input': {
-              'code': code,
+        update: (
+          store,
+          {
+            data: {
+              joinTeam: { team },
             },
-          },
-          update: (store, {data: {joinTeam: {team}}}) => {
-            addTeam(store, team);
-            this.$router.push({name: MY_TEAM});
-          },
-        });
-      },
+          }
+        ) => {
+          addTeam(store, team);
+          this.$router.push({ name: MY_TEAM });
+        },
+      });
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
-
+@import '~styles/helpers';
 </style>
diff --git a/client/src/pages/me/myTeam.vue b/client/src/pages/me/myTeam.vue
index d8377042..79cb84d7 100644
--- a/client/src/pages/me/myTeam.vue
+++ b/client/src/pages/me/myTeam.vue
@@ -14,29 +14,14 @@
       />
     </template>
     <template v-else>
-      <h1 class="my-team__heading">
-        Mein Team
-      </h1>
+      <h1 class="my-team__heading">Mein Team</h1>
       <div class="my-team__section">
-        <h2 class="my-team__subheading">
-          Willst du einem bestehenden Team beitreten?
-        </h2>
-        <router-link
-          :to="joinTeamRoute"
-          class="button button--primary"
-        >
-          Zugangscode eingeben
-        </router-link>
+        <h2 class="my-team__subheading">Willst du einem bestehenden Team beitreten?</h2>
+        <router-link :to="joinTeamRoute" class="button button--primary"> Zugangscode eingeben </router-link>
       </div>
       <div class="my-team__section">
-        <h2 class="my-team__subheading">
-          Willst du ein neues Team erfassen?
-        </h2>
-        <router-link
-          :to="createTeamRoute"
-          data-cy="create-team-button"
-          class="button button--primary"
-        >
+        <h2 class="my-team__subheading">Willst du ein neues Team erfassen?</h2>
+        <router-link :to="createTeamRoute" data-cy="create-team-button" class="button button--primary">
           Team erfassen
         </router-link>
       </div>
@@ -45,64 +30,71 @@
 </template>
 
 <script>
-  import {CREATE_TEAM, JOIN_TEAM, SHOW_TEAM_CODE} from '@/router/me.names';
-  import me from '@/mixins/me';
-  import GroupList from '@/components/profile/GroupList';
-  import LEAVE_TEAM_MUTATION from 'gql/mutations/me/leaveTeam.gql';
-  import addTeam from '@/helpers/add-team';
+import { CREATE_TEAM, JOIN_TEAM, SHOW_TEAM_CODE } from '@/router/me.names';
+import me from '@/mixins/me';
+import GroupList from '@/components/profile/GroupList';
+import LEAVE_TEAM_MUTATION from 'gql/mutations/me/leaveTeam.gql';
+import addTeam from '@/helpers/add-team';
 
-  export default {
-    mixins: [me],
-    components: {GroupList},
+export default {
+  mixins: [me],
+  components: { GroupList },
 
-    data() {
-      return {
-        joinTeamRoute: {
-          name: JOIN_TEAM,
-        },
-        createTeamRoute: {
-          name: CREATE_TEAM,
-        },
-        showCodeRoute: {
-          name: SHOW_TEAM_CODE,
-        },
-      };
-    },
-
-    methods: {
-      editTeamName() {
-        // todo: use this.$modal
-        this.$store.dispatch('editTeamName');
+  data() {
+    return {
+      joinTeamRoute: {
+        name: JOIN_TEAM,
       },
-      leaveTeam() {
-        this.$apollo.mutate({
-          mutation: LEAVE_TEAM_MUTATION,
-          update(store, {data: {leaveTeam: {success}}}) {
-            if (success){
-              addTeam(store, null);
-            }
-          },
-        });
+      createTeamRoute: {
+        name: CREATE_TEAM,
       },
+      showCodeRoute: {
+        name: SHOW_TEAM_CODE,
+      },
+    };
+  },
+
+  methods: {
+    editTeamName() {
+      // todo: use this.$modal
+      this.$store.dispatch('editTeamName');
     },
-  };
+    leaveTeam() {
+      this.$apollo.mutate({
+        mutation: LEAVE_TEAM_MUTATION,
+        update(
+          store,
+          {
+            data: {
+              leaveTeam: { success },
+            },
+          }
+        ) {
+          if (success) {
+            addTeam(store, null);
+          }
+        },
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .my-team {
-    &__heading {
-      margin-bottom: $section-spacing;
-    }
-
-    &__section {
-      margin-bottom: $section-spacing;
-    }
-
-    &__subheading {
-      @include heading-3;
-      margin-bottom: $large-spacing;
-    }
+.my-team {
+  &__heading {
+    margin-bottom: $section-spacing;
   }
+
+  &__section {
+    margin-bottom: $section-spacing;
+  }
+
+  &__subheading {
+    @include heading-3;
+    margin-bottom: $large-spacing;
+  }
+}
 </style>
diff --git a/client/src/pages/me/showSchoolClassCode.vue b/client/src/pages/me/showSchoolClassCode.vue
index ed178efb..fe4f7108 100644
--- a/client/src/pages/me/showSchoolClassCode.vue
+++ b/client/src/pages/me/showSchoolClassCode.vue
@@ -1,18 +1,13 @@
 <template>
-  <show-code
-    :name="me.selectedClass.name"
-    :code="me.selectedClass.code"
-    class="show-school-class-code"
-    type="Klasse"
-  />
+  <show-code :name="me.selectedClass.name" :code="me.selectedClass.code" class="show-school-class-code" type="Klasse" />
 </template>
 
 <script>
-  import selectedClassMixin from '@/mixins/selected-class';
-  import ShowCode from '@/components/profile/ShowCode';
+import selectedClassMixin from '@/mixins/selected-class';
+import ShowCode from '@/components/profile/ShowCode';
 
-  export default {
-    mixins: [selectedClassMixin],
-    components: {ShowCode},
-  };
+export default {
+  mixins: [selectedClassMixin],
+  components: { ShowCode },
+};
 </script>
diff --git a/client/src/pages/me/showTeamCode.vue b/client/src/pages/me/showTeamCode.vue
index b587214a..8075b3c0 100644
--- a/client/src/pages/me/showTeamCode.vue
+++ b/client/src/pages/me/showTeamCode.vue
@@ -1,18 +1,13 @@
 <template>
-  <show-code
-    :name="me.team.name"
-    :code="me.team.code"
-    class="show-school-class-code"
-    type="Team"
-  />
+  <show-code :name="me.team.name" :code="me.team.code" class="show-school-class-code" type="Team" />
 </template>
 
 <script>
-  import me from '@/mixins/me';
-  import ShowCode from '@/components/profile/ShowCode';
+import me from '@/mixins/me';
+import ShowCode from '@/components/profile/ShowCode';
 
-  export default {
-    mixins: [me],
-    components: {ShowCode},
-  };
+export default {
+  mixins: [me],
+  components: { ShowCode },
+};
 </script>
diff --git a/client/src/pages/module/module-base.vue b/client/src/pages/module/module-base.vue
index d30e96f0..3c9b7945 100644
--- a/client/src/pages/module/module-base.vue
+++ b/client/src/pages/module/module-base.vue
@@ -7,54 +7,54 @@
 </template>
 
 <script>
-  import ModuleNavigation from '@/components/modules/ModuleNavigation.vue';
-  import ModuleSubNavigation from '@/components/modules/ModuleSubNavigation.vue';
+import ModuleNavigation from '@/components/modules/ModuleNavigation.vue';
+import ModuleSubNavigation from '@/components/modules/ModuleSubNavigation.vue';
 
-  export default {
-    components: {
-      ModuleNavigation,
-      ModuleSubNavigation
+export default {
+  components: {
+    ModuleNavigation,
+    ModuleSubNavigation,
+  },
+
+  computed: {
+    showNavigation() {
+      return !this.$route.meta.hideNavigation && !this.$route.meta.showSubNavigation;
     },
-
-    computed: {
-      showNavigation() {
-        return !this.$route.meta.hideNavigation && !this.$route.meta.showSubNavigation;
-      },
-      showSubNavigation() {
-        return !!this.$route.meta.showSubNavigation;
-      }
-    }
-  };
+    showSubNavigation() {
+      return !!this.$route.meta.showSubNavigation;
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .module-page {
-    display: flex;
-    @supports (display: grid) {
-      display: grid;
-    }
-    justify-items: center;
+.module-page {
+  display: flex;
+  @supports (display: grid) {
+    display: grid;
+  }
+  justify-items: center;
 
-    grid-auto-rows: max-content;
+  grid-auto-rows: max-content;
 
-    @include desktop {
-      grid-template-columns: 1fr;
-    }
+  @include desktop {
+    grid-template-columns: 1fr;
+  }
 
-    /*
+  /*
      * For IE10+
      */
-    -ms-grid-columns: 2fr 6fr 2fr;
+  -ms-grid-columns: 2fr 6fr 2fr;
 
-    & > :nth-child(1) {
-      -ms-grid-column: 1;
-      -ms-grid-column-align: center;
-    }
-    & > :nth-child(2) {
-      -ms-grid-column: 2;
-      -ms-grid-column-align: center;
-    }
+  & > :nth-child(1) {
+    -ms-grid-column: 1;
+    -ms-grid-column-align: center;
   }
+  & > :nth-child(2) {
+    -ms-grid-column: 2;
+    -ms-grid-column-align: center;
+  }
+}
 </style>
diff --git a/client/src/pages/module/module.vue b/client/src/pages/module/module.vue
index 7050f0d7..acb98bf7 100644
--- a/client/src/pages/module/module.vue
+++ b/client/src/pages/module/module.vue
@@ -1,223 +1,228 @@
 <template>
-  <module
-    :module="module"
-    @editNote="editNote"
-    @addNote="addNote"
-    @bookmark="bookmark"
-  />
+  <module :module="module" @editNote="editNote" @addNote="addNote" @bookmark="bookmark" />
 </template>
 
 <script>
-  import Module from '@/components/modules/Module';
-  import log from 'loglevel';
+import Module from '@/components/modules/Module';
+import log from 'loglevel';
 
-  import UPDATE_LAST_MODULE_MUTATION from '@/graphql/gql/mutations/updateLastModule.gql';
-  import UPDATE_MODULE_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateModuleBookmark.gql';
-  // import ME_QUERY from '@/graphql/gql/meQuery.gql';
-  import MODULE_FRAGMENT from '@/graphql/gql/fragments/moduleParts.gql';
-  import SCROLL_POSITION from '@/graphql/gql/local/scrollPosition.gql';
-  import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
+import UPDATE_LAST_MODULE_MUTATION from '@/graphql/gql/mutations/updateLastModule.gql';
+import UPDATE_MODULE_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateModuleBookmark.gql';
+// import ME_QUERY from '@/graphql/gql/meQuery.gql';
+import MODULE_FRAGMENT from '@/graphql/gql/fragments/moduleParts.gql';
+import SCROLL_POSITION from '@/graphql/gql/local/scrollPosition.gql';
+import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
 
-  import meMixin from '@/mixins/me';
-  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
-  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
-  import {setModuleEditMode} from '@/graphql/cache-operations';
+import meMixin from '@/mixins/me';
+import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
+import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+import { setModuleEditMode } from '@/graphql/cache-operations';
 
-  export default {
-    mixins: [meMixin],
+export default {
+  mixins: [meMixin],
 
-    components: {
-      Module,
-    },
+  components: {
+    Module,
+  },
 
-    data() {
+  data() {
+    return {
+      module: {},
+      updateSent: false,
+    };
+  },
+
+  beforeRouteLeave(to, from, next) {
+    // toggle edit mode if leaving the module subtree
+    if (this.module.inEditMode && to.path.indexOf('/module/') === -1) {
+      setModuleEditMode(this.module.slug, false);
+    }
+    next();
+  },
+
+  apollo: {
+    module() {
       return {
-        module: {},
-        updateSent: false
+        query: MODULE_DETAILS_QUERY,
+        variables: {
+          slug: this.$route.params.slug,
+        },
+        result({
+          data: {
+            module: { id },
+          },
+        }) {
+          if (!this.updateSent) {
+            log.debug(`=== updating result for module ${id} ===`);
+            this.updateLastVisitedModule(id);
+            this.updateSent = true;
+          }
+        },
+        fetchPolicy: 'cache-first',
       };
     },
+    scrollPosition: {
+      query: SCROLL_POSITION,
+    },
+  },
 
-    beforeRouteLeave(to, from, next) {
-      // toggle edit mode if leaving the module subtree
-      if(this.module.inEditMode && to.path.indexOf('/module/') === -1) {
-        setModuleEditMode(this.module.slug, false);
+  methods: {
+    updateLastVisitedModule(moduleId) {
+      log.debug(`updating last visited module for module ${moduleId}`);
+      if (!moduleId) {
+        log.warn('no module id');
+        return;
       }
-      next();
-    },
 
-    apollo: {
-      module() {
-        return {
-          query: MODULE_DETAILS_QUERY,
-          variables: {
-            slug: this.$route.params.slug,
+      if (this.me.lastModule && this.me.lastModule.id === moduleId) {
+        log.debug('same module already set as last module');
+        return;
+      }
+
+      this.$apollo.mutate({
+        mutation: UPDATE_LAST_MODULE_MUTATION,
+        variables: {
+          input: {
+            id: moduleId,
           },
-          result({data: {module: {id}}}) {
-            if (!this.updateSent) {
-              log.debug(`=== updating result for module ${id} ===`);
-              this.updateLastVisitedModule(id);
-              this.updateSent = true;
-            }
-          },
-          fetchPolicy: 'cache-first',
-        };
-      },
-      scrollPosition: {
-        query: SCROLL_POSITION,
-      },
-    },
-
-    methods: {
-      updateLastVisitedModule(moduleId) {
-        log.debug(`updating last visited module for module ${moduleId}`);
-        if (!moduleId) {
-          log.warn('no module id');
-          return;
-        }
-
-        if (this.me.lastModule && this.me.lastModule.id === moduleId) {
-          log.debug('same module already set as last module');
-          return;
-        }
-
-        this.$apollo.mutate({
-          mutation: UPDATE_LAST_MODULE_MUTATION,
-          variables: {
-            input: {
-              id: moduleId,
+        },
+        update: (
+          store,
+          {
+            data: {
+              updateLastModule: { lastModule },
             },
-          },
-          update: (store, {data: {updateLastModule: {lastModule}}}) => {
-            const {id, slug} = lastModule;
-            log.debug('updating last module', id, slug);
-            const query = ME_QUERY;
-            let {me} = store.readQuery({
-              query,
-            });
-            // me.lastModule = {
-            //   id,
-            //   slug,
-            //   __typename: 'ModuleNode',
-            // };
+          }
+        ) => {
+          const { id, slug } = lastModule;
+          log.debug('updating last module', id, slug);
+          const query = ME_QUERY;
+          let { me } = store.readQuery({
+            query,
+          });
+          // me.lastModule = {
+          //   id,
+          //   slug,
+          //   __typename: 'ModuleNode',
+          // };
 
-            let edges = [...me.recentModules.edges];
-            const foundIndex = edges.findIndex(edge => edge.node.slug === slug);
-            if (foundIndex > -1) {
-              edges = [...edges.slice(0, foundIndex), ...edges.slice(foundIndex + 1, edges.length)];
-            }
-            edges = [
-              {
-                node: lastModule,
-                __typename: 'ModuleNodeEdge',
-              },
-              ...edges.slice(0, 2),
-            ];
-            const recentModules = {
-              __typename: 'ModuleNodeConnection',
-              edges
-            };
-            const data = {
-              me: {
-                ...me,
-                recentModules,
-                lastModule: {
-                  ...lastModule,
-                  // todo: do we really need this? shouldn't the lastModule property already include this?
-                  '__typename': 'ModuleNode'
-                }
-              }
-            };
-            store.writeQuery({
-              query,
-              data
-            });
-          },
-
-        });
-      },
-      bookmark(bookmarked) {
-        const slug = this.module.slug;
-        this.$apollo.mutate({
-          mutation: UPDATE_MODULE_BOOKMARK_MUTATION,
-          variables: {
-            input: {
-              module: slug,
-              bookmarked,
+          let edges = [...me.recentModules.edges];
+          const foundIndex = edges.findIndex((edge) => edge.node.slug === slug);
+          if (foundIndex > -1) {
+            edges = [...edges.slice(0, foundIndex), ...edges.slice(foundIndex + 1, edges.length)];
+          }
+          edges = [
+            {
+              node: lastModule,
+              __typename: 'ModuleNodeEdge',
             },
-          },
-          update: (store) => {
-            const fragment = MODULE_FRAGMENT;
-            const id = store.identify({
-              __typename: 'ModuleNode',
-              slug: slug
-            });
-
-            const module = store.readFragment({
-              fragment,
-              id,
-            });
-
-            let bookmark;
-
-            if (bookmarked) {
-              bookmark = {
-                __typename: 'ModuleBookmarkNode',
-                note: null,
-              };
-            } else {
-              bookmark = null;
-            }
-
-            const data = {
-              ...module,
-              bookmark
-            };
-
-            store.writeFragment({
-              data,
-              fragment,
-              id,
-            });
-          },
-          optimisticResponse: {
-            __typename: 'Mutation',
-            updateModuleBookmark: {
-              __typename: 'UpdateModuleBookmarkPayload',
-              success: true,
-            },
-          },
-        });
-      },
-      addNote(id) {
-        this.$store.dispatch('addNote', {
-          content: id,
-          parent: this.module.slug,
-          type: 'module'
-        });
-      },
-      editNote() {
-        this.$store.dispatch('editNote', this.module.bookmark.note);
-      },
-      scrollTo() {
-        if (this.scrollPosition && this.scrollPosition.scrollTo) {
-          let options = {
-            container: 'body',
-            easing: 'ease',
-            offset: -60,
-            x: false,
-            y: true,
+            ...edges.slice(0, 2),
+          ];
+          const recentModules = {
+            __typename: 'ModuleNodeConnection',
+            edges,
           };
-          setTimeout(() => {
-            this.$scrollTo(`[data-scrollto="${this.scrollPosition.scrollTo}"]`, 1000, options);
-            this.$apollo.mutate({
-              mutation: SCROLL_TO_MUTATION,
-              variables: {
-                scrollTo: '',
+          const data = {
+            me: {
+              ...me,
+              recentModules,
+              lastModule: {
+                ...lastModule,
+                // todo: do we really need this? shouldn't the lastModule property already include this?
+                __typename: 'ModuleNode',
               },
-            });
-          }, 250); // unfortunately this timeout is needed as it is hard to tell when everything is rendered
-        }
-      },
+            },
+          };
+          store.writeQuery({
+            query,
+            data,
+          });
+        },
+      });
     },
-  };
+    bookmark(bookmarked) {
+      const slug = this.module.slug;
+      this.$apollo.mutate({
+        mutation: UPDATE_MODULE_BOOKMARK_MUTATION,
+        variables: {
+          input: {
+            module: slug,
+            bookmarked,
+          },
+        },
+        update: (store) => {
+          const fragment = MODULE_FRAGMENT;
+          const id = store.identify({
+            __typename: 'ModuleNode',
+            slug: slug,
+          });
+
+          const module = store.readFragment({
+            fragment,
+            id,
+          });
+
+          let bookmark;
+
+          if (bookmarked) {
+            bookmark = {
+              __typename: 'ModuleBookmarkNode',
+              note: null,
+            };
+          } else {
+            bookmark = null;
+          }
+
+          const data = {
+            ...module,
+            bookmark,
+          };
+
+          store.writeFragment({
+            data,
+            fragment,
+            id,
+          });
+        },
+        optimisticResponse: {
+          __typename: 'Mutation',
+          updateModuleBookmark: {
+            __typename: 'UpdateModuleBookmarkPayload',
+            success: true,
+          },
+        },
+      });
+    },
+    addNote(id) {
+      this.$store.dispatch('addNote', {
+        content: id,
+        parent: this.module.slug,
+        type: 'module',
+      });
+    },
+    editNote() {
+      this.$store.dispatch('editNote', this.module.bookmark.note);
+    },
+    scrollTo() {
+      if (this.scrollPosition && this.scrollPosition.scrollTo) {
+        let options = {
+          container: 'body',
+          easing: 'ease',
+          offset: -60,
+          x: false,
+          y: true,
+        };
+        setTimeout(() => {
+          this.$scrollTo(`[data-scrollto="${this.scrollPosition.scrollTo}"]`, 1000, options);
+          this.$apollo.mutate({
+            mutation: SCROLL_TO_MUTATION,
+            variables: {
+              scrollTo: '',
+            },
+          });
+        }, 250); // unfortunately this timeout is needed as it is hard to tell when everything is rendered
+      }
+    },
+  },
+};
 </script>
diff --git a/client/src/pages/module/moduleRoom.vue b/client/src/pages/module/moduleRoom.vue
index 463a54fb..835a0369 100644
--- a/client/src/pages/module/moduleRoom.vue
+++ b/client/src/pages/module/moduleRoom.vue
@@ -13,72 +13,65 @@
       </div>
     </div>
     <div class="room__content">
-      <add-room-entry-button
-        :parent="room"
-        v-if="room.id"
-      >
+      <add-room-entry-button :parent="room" v-if="room.id">
         <!--
         the v-if is there for the case where the room hasn't loaded yet, but there is already an attempt to create
         a new room entry. mainly happens during cypress testing, but could also happen on a very slow connection
         -->
       </add-room-entry-button>
-      <room-entry
-        v-for="entry in room.roomEntries"
-        v-bind="entry"
-        :key="entry.id"
-      />
+      <room-entry v-for="entry in room.roomEntries" v-bind="entry" :key="entry.id" />
     </div>
   </div>
 </template>
 
 <script>
-  import MODULE_ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/moduleRoomEntryQuery.gql';
-  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
-  import roomMixin from '@/mixins/room';
+import MODULE_ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/moduleRoomEntryQuery.gql';
+import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+import roomMixin from '@/mixins/room';
 
-  export default {
-    props: ['slug'],
-    mixins: [roomMixin],
+export default {
+  props: ['slug'],
+  mixins: [roomMixin],
 
-    data() {
-      return {
-        room: [],
-        entries: [],
-        me: {
-          selectedClass: {
-            id: ''
-          },
-          permissions: []
-        }
-      };
-    },
-
-    apollo: {
-      moduleRoom: {
-        query: MODULE_ROOM_ENTRIES_QUERY,
-        variables() {
-          return {
-            slug: this.slug,
-            classId: this.me.selectedClass.id
-          };
-        },
-        // manual: true,
-        // todo: do we really need manual here? update should do the trick too
-        result({data, loading}) {
-          if (!loading) {
-            this.room = Object.assign({}, this.$getRidOfEdges(data).moduleRoom);
-            this.$store.dispatch('setSpecialContainerClass', this.room.appearance);
-          }
-        },
-        pollInterval: 5000,
-      },
+  data() {
+    return {
+      room: [],
+      entries: [],
       me: {
-        query: ME_QUERY,
-      }
-    }
-  };
+        selectedClass: {
+          id: '',
+        },
+        permissions: [],
+      },
+    };
+  },
+
+  apollo: {
+    moduleRoom: {
+      query: MODULE_ROOM_ENTRIES_QUERY,
+      variables() {
+        return {
+          slug: this.slug,
+          classId: this.me.selectedClass.id,
+        };
+      },
+      // manual: true,
+      // todo: do we really need manual here? update should do the trick too
+      result({ data, loading }) {
+        if (!loading) {
+          this.room = Object.assign({}, this.$getRidOfEdges(data).moduleRoom);
+          this.$store.dispatch('setSpecialContainerClass', this.room.appearance);
+        }
+      },
+      pollInterval: 5000,
+    },
+    me: {
+      query: ME_QUERY,
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/_room.scss";
+@import '~styles/_room.scss';
 </style>
diff --git a/client/src/pages/module/moduleSettings.vue b/client/src/pages/module/moduleSettings.vue
index 2a5529a2..e10927db 100644
--- a/client/src/pages/module/moduleSettings.vue
+++ b/client/src/pages/module/moduleSettings.vue
@@ -1,33 +1,22 @@
 <template>
   <div class="module-settings">
-    <h1 class="module-settings__page-title">
-      Einstellungen
-    </h1>
+    <h1 class="module-settings__page-title">Einstellungen</h1>
     <section class="module-settings__section">
-      <h2 class="module-settings__heading">
-        Lösungen
-      </h2>
+      <h2 class="module-settings__heading">Lösungen</h2>
       <p class="module-settings__paragraph">
         Wollen Sie die Lösungen in diesem {{ $flavor.textModule }} für die Lernenden der ausgewählten Klasse anzeigen?
       </p>
       <toggle-solutions-for-module />
     </section>
     <section class="module-settings__section">
-      <h2 class="module-settings__heading">
-        Sichtbarkeit
-      </h2>
+      <h2 class="module-settings__heading">Sichtbarkeit</h2>
       <p class="module-settings__paragraph">
-        Haben Sie die Sichtbarkeit für eine andere Klasse bereits angepasst? Dann
-        können Sie diese Anpassungen hier
+        Haben Sie die Sichtbarkeit für eine andere Klasse bereits angepasst? Dann können Sie diese Anpassungen hier
         übernehmen
       </p>
     </section>
     <section class="module-settings__section">
-      <router-link
-        :to="{name: 'visibility'}"
-        data-cy="select-school-class-button"
-        class="button button--primary"
-      >
+      <router-link :to="{ name: 'visibility' }" data-cy="select-school-class-button" class="button button--primary">
         Klasse auswählen
       </router-link>
     </section>
@@ -35,19 +24,19 @@
 </template>
 
 <script>
-  import ToggleSolutionsForModule from '@/components/toggle-menu/ToggleSolutionsForModule';
+import ToggleSolutionsForModule from '@/components/toggle-menu/ToggleSolutionsForModule';
 
-  export default {
-    components: {
-      ToggleSolutionsForModule,
-    }
-  };
+export default {
+  components: {
+    ToggleSolutionsForModule,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/_helpers';
+@import '~styles/_helpers';
 
-  .module-settings {
-    @include settings-page;
-  }
+.module-settings {
+  @include settings-page;
+}
 </style>
diff --git a/client/src/pages/module/moduleVisibility.vue b/client/src/pages/module/moduleVisibility.vue
index 28c561d1..5f4fa23b 100644
--- a/client/src/pages/module/moduleVisibility.vue
+++ b/client/src/pages/module/moduleVisibility.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="module-visibility">
-    <h1 class="module-visibility__page-title">
-      Sichtbarkeit
-    </h1>
+    <h1 class="module-visibility__page-title">Sichtbarkeit</h1>
     <div class="module-visibility__section">
       <p class="module-visibility__paragraph">
         Wollen Sie die angepasste Sichtbarkeit (
@@ -18,126 +16,113 @@
         class="skillbox-input skillbox-dropdown module-visibility__dropdown"
         @change="select($event.target.value)"
       >
-        <option
-          value=""
-          selected
-        >
-          -
-        </option>
-        <option
-          :value="schoolClass.id"
-          v-for="schoolClass in schoolClasses"
-          :key="schoolClass.id"
-        >
+        <option value="" selected>-</option>
+        <option :value="schoolClass.id" v-for="schoolClass in schoolClasses" :key="schoolClass.id">
           {{ schoolClass.name }}
         </option>
       </select>
       für {{ currentClassName }} übernehmen.
     </div>
     <div class="module-visibility__section">
-      <a
-        class="button button--primary"
-        data-cy="save-visibility-button"
-        @click="sync"
-      >Anpassungen übernehmen</a>
+      <a class="button button--primary" data-cy="save-visibility-button" @click="sync">Anpassungen übernehmen</a>
     </div>
   </div>
 </template>
 
 <script>
-  import me from '@/mixins/me';
+import me from '@/mixins/me';
 
-  import SYNC_VISIBILITY_MUTATION from '@/graphql/gql/mutations/syncModuleVisibility.gql';
-  import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
-  import {MODULE_PAGE} from '@/router/module.names';
+import SYNC_VISIBILITY_MUTATION from '@/graphql/gql/mutations/syncModuleVisibility.gql';
+import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
+import { MODULE_PAGE } from '@/router/module.names';
 
-  const EyeIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/EyeIcon');
+const EyeIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/EyeIcon');
 
-  export default {
+export default {
+  mixins: [me],
+  components: {
+    EyeIcon,
+  },
 
-    mixins: [me],
-    components: {
-      EyeIcon,
+  data() {
+    return {
+      selectedClassId: '',
+    };
+  },
+
+  computed: {
+    schoolClasses() {
+      return this.me.schoolClasses.filter((schoolClass) => schoolClass.id !== this.me.selectedClass.id);
     },
-
-    data() {
-      return {
-        selectedClassId: '',
-      };
+    slug() {
+      return this.$route.params.slug;
     },
+  },
 
-    computed: {
-      schoolClasses() {
-        return this.me.schoolClasses.filter(schoolClass => schoolClass.id !== this.me.selectedClass.id);
-      },
-      slug() {
-        return this.$route.params.slug;
-      }
+  methods: {
+    select(selectedClassId) {
+      this.selectedClassId = selectedClassId;
     },
-
-    methods: {
-      select(selectedClassId) {
-        this.selectedClassId = selectedClassId;
-      },
-      sync() {
-        if (this.selectedClassId) {
-          const slug = this.slug;
-          this.$apollo.mutate({
-              mutation: SYNC_VISIBILITY_MUTATION,
-              variables: {
-                input: {
-                  module: slug,
-                  templateSchoolClass: this.selectedClassId,
-                  schoolClass: this.me.selectedClass.id,
+    sync() {
+      if (this.selectedClassId) {
+        const slug = this.slug;
+        this.$apollo
+          .mutate({
+            mutation: SYNC_VISIBILITY_MUTATION,
+            variables: {
+              input: {
+                module: slug,
+                templateSchoolClass: this.selectedClassId,
+                schoolClass: this.me.selectedClass.id,
+              },
+            },
+            refetchQueries: [
+              {
+                query: MODULE_DETAILS_QUERY,
+                variables: {
+                  slug,
                 },
               },
-              refetchQueries: [
-                {
-                  query: MODULE_DETAILS_QUERY,
-                  variables: {
-                    slug,
-                  },
-                },
-              ],
-            },
-          ).then(() => {
+            ],
+          })
+          .then(() => {
             this.$router.push({
               name: MODULE_PAGE,
               params: {
-                slug
-              }
+                slug,
+              },
             });
           });
-        }
-      },
+      }
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/_helpers';
+@import '~styles/_helpers';
 
-  .module-visibility {
-    @include settings-page;
+.module-visibility {
+  @include settings-page;
 
-    margin: 0 auto;
+  margin: 0 auto;
 
-    &__inline-icon {
-      width: 25px;
-      height: 25px;
-      vertical-align: middle;
-    }
-
-    &__dropdown {
-      width: 200px;
-      margin: 0 $medium-spacing;
-    }
-
-    &__form {
-      display: flex;
-      align-items: center;
-      @include regular-text;
-      font-weight: 600;
-    }
+  &__inline-icon {
+    width: 25px;
+    height: 25px;
+    vertical-align: middle;
   }
+
+  &__dropdown {
+    width: 200px;
+    margin: 0 $medium-spacing;
+  }
+
+  &__form {
+    display: flex;
+    align-items: center;
+    @include regular-text;
+    font-weight: 600;
+  }
+}
 </style>
diff --git a/client/src/pages/myClass.vue b/client/src/pages/myClass.vue
index 9834c657..abaf0ad7 100644
--- a/client/src/pages/myClass.vue
+++ b/client/src/pages/myClass.vue
@@ -2,8 +2,8 @@
   <div class="my-class">
     <group-list
       :name="me.selectedClass.name"
-      :active-members="me.selectedClass.members.filter(member => member.active)"
-      :inactive-members="me.selectedClass.members.filter(member => !member.active)"
+      :active-members="me.selectedClass.members.filter((member) => member.active)"
+      :inactive-members="me.selectedClass.members.filter((member) => !member.active)"
       :show-code="me.isTeacher"
       :show-code-route="showCodeRoute"
       :read-only="me.readOnly"
@@ -20,115 +20,121 @@
 </template>
 
 <script>
-  import GroupList from '@/components/profile/GroupList';
+import GroupList from '@/components/profile/GroupList';
 
-  import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass.gql';
-  import ADD_REMOVE_MEMBER_MUTATION from '@/graphql/gql/mutations/addRemoveMember.gql';
-  import selectedClassMixin from '@/mixins/selected-class';
-  import {SHOW_SCHOOL_CLASS_CODE} from '@/router/me.names';
+import MY_SCHOOL_CLASS_QUERY from '@/graphql/gql/queries/mySchoolClass.gql';
+import ADD_REMOVE_MEMBER_MUTATION from '@/graphql/gql/mutations/addRemoveMember.gql';
+import selectedClassMixin from '@/mixins/selected-class';
+import { SHOW_SCHOOL_CLASS_CODE } from '@/router/me.names';
 
-  export default {
-    mixins: [selectedClassMixin],
+export default {
+  mixins: [selectedClassMixin],
 
-    components: {
-      GroupList,
-    },
+  components: {
+    GroupList,
+  },
 
-    data() {
-      return {
-        showCodeRoute: {
-          name: SHOW_SCHOOL_CLASS_CODE,
+  data() {
+    return {
+      showCodeRoute: {
+        name: SHOW_SCHOOL_CLASS_CODE,
+      },
+    };
+  },
+
+  methods: {
+    changeMember(member, active) {
+      this.$apollo.mutate({
+        mutation: ADD_REMOVE_MEMBER_MUTATION,
+        variables: {
+          input: {
+            member: member.id,
+            schoolClass: this.me.selectedClass.id,
+            active,
+          },
         },
-      };
-    },
-
-    methods: {
-      changeMember(member, active) {
-        this.$apollo.mutate({
-          mutation: ADD_REMOVE_MEMBER_MUTATION,
-          variables: {
-            input: {
-              member: member.id,
-              schoolClass: this.me.selectedClass.id,
-              active,
+        update(
+          store,
+          {
+            data: {
+              addRemoveMember: { success },
             },
-          },
-          update(store, {data: {addRemoveMember: {success}}}) {
-            if (success) {
-              const query = MY_SCHOOL_CLASS_QUERY;
-              const {me} = store.readQuery({query});
-              let memberIndex = me.selectedClass.members.findIndex(m => m.id === member.id);
-              const members = [
-                ...me.selectedClass.members.slice(0, memberIndex),
-                {...member, active},
-                ...me.selectedClass.members.slice(memberIndex + 1),
-              ];
+          }
+        ) {
+          if (success) {
+            const query = MY_SCHOOL_CLASS_QUERY;
+            const { me } = store.readQuery({ query });
+            let memberIndex = me.selectedClass.members.findIndex((m) => m.id === member.id);
+            const members = [
+              ...me.selectedClass.members.slice(0, memberIndex),
+              { ...member, active },
+              ...me.selectedClass.members.slice(memberIndex + 1),
+            ];
 
-              // if we changed the currently selected class of the logged in user, we need to change this property too
-              const readOnly = member.isMe ? !active : me.selectedClass.readOnly;
-              const data = {
-                me: {
-                  ...me,
-                  selectedClass: {
-                    ...me.selectedClass,
-                    readOnly,
-                    members
-                  }
-                }
-              };
-              store.writeQuery({query, data});
-            }
-          },
-        });
-      },
-      add(member) {
-        this.changeMember(member, true);
-      },
-      remove(member) {
-        const memberId = atob(member.id).split(':')[1];
-        const meId = atob(this.me.id).split(':')[1];
-        this.$modal.open('deactivate-person', {
-            myself: memberId === meId,
-            name: `${member.firstName} ${member.lastName}`,
-            className: this.me.selectedClass.name,
-          })
-          .then(() => {
-            this.changeMember(member, false);
-          })
-          .catch(() => {
-          });
-      },
-      editClassName() {
-        this.$store.dispatch('editClassName');
-      },
+            // if we changed the currently selected class of the logged in user, we need to change this property too
+            const readOnly = member.isMe ? !active : me.selectedClass.readOnly;
+            const data = {
+              me: {
+                ...me,
+                selectedClass: {
+                  ...me.selectedClass,
+                  readOnly,
+                  members,
+                },
+              },
+            };
+            store.writeQuery({ query, data });
+          }
+        },
+      });
     },
-  };
+    add(member) {
+      this.changeMember(member, true);
+    },
+    remove(member) {
+      const memberId = atob(member.id).split(':')[1];
+      const meId = atob(this.me.id).split(':')[1];
+      this.$modal
+        .open('deactivate-person', {
+          myself: memberId === meId,
+          name: `${member.firstName} ${member.lastName}`,
+          className: this.me.selectedClass.name,
+        })
+        .then(() => {
+          this.changeMember(member, false);
+        })
+        .catch(() => {});
+    },
+    editClassName() {
+      this.$store.dispatch('editClassName');
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .my-class {
-    display: grid;
-    grid-template-columns: auto auto;
-    grid-template-rows: auto auto;
-    grid-template-areas: "h b" "c c";
+.my-class {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
+  grid-template-areas: 'h b' 'c c';
 
-    &__header {
-      grid-area: h;
-    }
-
-    &__code-link {
-      grid-area: b;
-      justify-self: end;
-      align-self: center;
-    }
-
-    &__class {
-      grid-area: c;
-      width: 100%;
-      margin-bottom: $large-spacing;
-    }
+  &__header {
+    grid-area: h;
   }
 
+  &__code-link {
+    grid-area: b;
+    justify-self: end;
+    align-self: center;
+  }
+
+  &__class {
+    grid-area: c;
+    width: 100%;
+    margin-bottom: $large-spacing;
+  }
+}
 </style>
diff --git a/client/src/pages/news.vue b/client/src/pages/news.vue
index 6860e8ad..e0c52a8b 100644
--- a/client/src/pages/news.vue
+++ b/client/src/pages/news.vue
@@ -1,34 +1,30 @@
 <template>
   <div class="news">
-    <h1 class="news__heading">
-      News
-    </h1>
+    <h1 class="news__heading">News</h1>
     <news-teasers />
   </div>
 </template>
 
 <script>
+import NewsTeasers from '@/components/news/NewsTeasers';
 
-  import NewsTeasers from '@/components/news/NewsTeasers';
-
-  export default {
-    components: {NewsTeasers},
-  };
+export default {
+  components: { NewsTeasers },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
-  .news {
-    padding: 0 $large-spacing;
-    max-width: 800px;
-    margin: 0 auto;
+.news {
+  padding: 0 $large-spacing;
+  max-width: 800px;
+  margin: 0 auto;
 
-    @include desktop {
-      max-width: unset;
-      margin: 0;
-    }
+  @include desktop {
+    max-width: unset;
+    margin: 0;
   }
-
+}
 </style>
diff --git a/client/src/pages/oldClasses.vue b/client/src/pages/oldClasses.vue
index dd439675..dc071408 100644
--- a/client/src/pages/oldClasses.vue
+++ b/client/src/pages/oldClasses.vue
@@ -1,66 +1,55 @@
 <template>
   <div class="old-classes">
-    <h1 class="old-classes__title">
-      Alte Klassen
-    </h1>
+    <h1 class="old-classes__title">Alte Klassen</h1>
     <ul class="old-classes__list simple-list">
-      <li
-        class="simple-list__item"
-        data-cy="old-class-item"
-        v-for="schoolClass in me.oldClasses"
-        :key="schoolClass.id"
-      >
-        <span
-          class="old-classes__class-name"
-        >{{ schoolClass.name }}</span> <a
-          class="simple-list__action"
-          @click="updateSelectedClassAndGoToClassList(schoolClass)"
-        >Anzeigen</a>
+      <li class="simple-list__item" data-cy="old-class-item" v-for="schoolClass in me.oldClasses" :key="schoolClass.id">
+        <span class="old-classes__class-name">{{ schoolClass.name }}</span>
+        <a class="simple-list__action" @click="updateSelectedClassAndGoToClassList(schoolClass)">Anzeigen</a>
       </li>
     </ul>
   </div>
 </template>
 
 <script>
-  import OLD_CLASSES_QUERY from '@/graphql/gql/queries/oldClasses.gql';
+import OLD_CLASSES_QUERY from '@/graphql/gql/queries/oldClasses.gql';
 
-  import updateSelectedClassMixin from '@/mixins/update-selected-class';
+import updateSelectedClassMixin from '@/mixins/update-selected-class';
 
-  export default {
-    mixins: [updateSelectedClassMixin],
+export default {
+  mixins: [updateSelectedClassMixin],
 
-    data: () => ({
-      me: {
-        oldClasses: []
-      }
-    }),
-
-    methods: {
-      updateSelectedClassAndGoToClassList(selectedClass) {
-        this.updateSelectedClass(selectedClass).then(() => {
-          this.$router.push({name: 'my-class'});
-        });
-      }
+  data: () => ({
+    me: {
+      oldClasses: [],
     },
+  }),
 
-    // todo: test this in front- and backend
-    apollo: {
-      me: {
-        query: OLD_CLASSES_QUERY,
-        update(data) {
-          return this.$getRidOfEdges(data).me;
-        }
-      }
+  methods: {
+    updateSelectedClassAndGoToClassList(selectedClass) {
+      this.updateSelectedClass(selectedClass).then(() => {
+        this.$router.push({ name: 'my-class' });
+      });
     },
-  };
+  },
+
+  // todo: test this in front- and backend
+  apollo: {
+    me: {
+      query: OLD_CLASSES_QUERY,
+      update(data) {
+        return this.$getRidOfEdges(data).me;
+      },
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
+@import '@/styles/_variables.scss';
 
-  .old-classes {
-    &__class-name {
-      font-family: $sans-serif-font-family;
-    }
+.old-classes {
+  &__class-name {
+    font-family: $sans-serif-font-family;
   }
+}
 </style>
diff --git a/client/src/pages/onboarding.vue b/client/src/pages/onboarding.vue
index 0d7f99c1..48eb8e35 100644
--- a/client/src/pages/onboarding.vue
+++ b/client/src/pages/onboarding.vue
@@ -1,178 +1,178 @@
 <template>
-  <div
-    class="onboarding__content"
-    data-cy="onboarding-page"
-  >
+  <div class="onboarding__content" data-cy="onboarding-page">
     <router-view />
-    <a
-      class="onboarding__button button button--primary button--big"
-      data-cy="onboarding-next-link"
-      @click="next"
-    >{{ nextLabel }}
+    <a class="onboarding__button button button--primary button--big" data-cy="onboarding-next-link" @click="next"
+      >{{ nextLabel }}
     </a>
-    <a
-      class="onboarding__secondary-link"
-      data-cy="onboarding-skip-link"
-      @click.prevent="completeOnboarding"
-    >Einführung überspringen</a>
+    <a class="onboarding__secondary-link" data-cy="onboarding-skip-link" @click.prevent="completeOnboarding"
+      >Einführung überspringen</a
+    >
   </div>
 </template>
 
 <script>
+import UPDATE_ONBOARDING_PROGRESS from '@/graphql/gql/mutations/updateOnboardingProgress.gql';
+import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 
-  import UPDATE_ONBOARDING_PROGRESS from '@/graphql/gql/mutations/updateOnboardingProgress.gql';
-  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
-
-  export default {
-    computed: {
-      nextLabel() {
-        return this.$route.name === 'onboarding-start' ? 'Einführung starten' : 'Weiter';
-      },
-      illustration() {
-        return this.$route.meta.illustration;
-      },
+export default {
+  computed: {
+    nextLabel() {
+      return this.$route.name === 'onboarding-start' ? 'Einführung starten' : 'Weiter';
     },
+    illustration() {
+      return this.$route.meta.illustration;
+    },
+  },
 
-    methods: {
-      next() {
-        const next = this.$route.meta.next;
-        if (next === 'home') {
-          this.completeOnboarding();
-        } else {
-          this.$router.push({name: next});
-        }
-      },
-      completeOnboarding() {
-        this.$apollo.mutate({
+  methods: {
+    next() {
+      const next = this.$route.meta.next;
+      if (next === 'home') {
+        this.completeOnboarding();
+      } else {
+        this.$router.push({ name: next });
+      }
+    },
+    completeOnboarding() {
+      this.$apollo
+        .mutate({
           mutation: UPDATE_ONBOARDING_PROGRESS,
-          update(store, {data: {updateOnboardingProgress: {success: onboardingVisited}}}) {
+          update(
+            store,
+            {
+              data: {
+                updateOnboardingProgress: { success: onboardingVisited },
+              },
+            }
+          ) {
             const query = ME_QUERY;
-            const {me} = store.readQuery({query});
+            const { me } = store.readQuery({ query });
             if (me) {
               const data = {
                 me: {
                   ...me,
-                  onboardingVisited
-                }
+                  onboardingVisited,
+                },
               };
-              store.writeQuery({query, data});
+              store.writeQuery({ query, data });
             }
           },
-        }).then(() => {
-          this.$router.push({name: 'home'});
+        })
+        .then(() => {
+          this.$router.push({ name: 'home' });
         });
-      },
     },
-  };
+  },
+};
 </script>
 
 <style lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .onboarding {
-    background-color: $color-brand;
+.onboarding {
+  background-color: $color-brand;
 
-    display: flex;
-    position: relative;
+  display: flex;
+  position: relative;
 
-    &--illustration {
-      &::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        top: 50%;
-        background: $color-brand-dark;
-      }
-    }
-
-    &__illustration {
-      width: 30vw;
-      min-width: 400px;
-      align-self: center;
-      background-color: $color-brand;
-      z-index: 1;
-      display: none;
-
-      @include desktop {
-        display: flex;
-        justify-content: center;
-      }
-    }
-
-    &__content {
-      background-color: $color-white;
-      padding: $medium-spacing;
-      display: flex;
-      flex-direction: column;
-      z-index: 1;
-
-      @include desktop {
-        padding: 2*$large-spacing;
-      }
-    }
-
-    &__logo {
-      max-width: 300px;
-      height: 50px;
-      margin-bottom: $large-spacing;
-
-      @include desktop {
-        margin-bottom: 70px;
-      }
-    }
-
-    &__page-subheading {
-      @include regular-text;
-      color: $color-brand;
-      margin-bottom: $small-spacing;
-    }
-
-    &__page-heading {
-      @include heading-2;
-      color: $color-brand;
-      margin-bottom: 2*$large-spacing;
-    }
-
-    &__heading {
-      @include heading-2;
-      margin-bottom: $small-spacing;
-    }
-
-    &__claim {
-      @include heading-2;
-      margin-bottom: 70px;
-    }
-
-    &__paragraph {
-      @include regular-text;
-      margin-bottom: $medium-spacing;
-
-      &:last-of-type {
-        margin-bottom: 2*$large-spacing;
-      }
-    }
-
-    &__button {
-      @include regular-text;
-      flex-grow: 0;
-      align-self: flex-start;
-      min-width: 150px;
-      display: inline-flex;
-      box-sizing: border-box;
-      justify-content: center;
-      margin-bottom: $large-spacing;
-      cursor: pointer;
-    }
-
-    &__secondary-link {
-      @include inline-title;
-      cursor: pointer;
-
-      @include desktop {
-        margin-top: auto;
-      }
+  &--illustration {
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: 50%;
+      background: $color-brand-dark;
     }
   }
+
+  &__illustration {
+    width: 30vw;
+    min-width: 400px;
+    align-self: center;
+    background-color: $color-brand;
+    z-index: 1;
+    display: none;
+
+    @include desktop {
+      display: flex;
+      justify-content: center;
+    }
+  }
+
+  &__content {
+    background-color: $color-white;
+    padding: $medium-spacing;
+    display: flex;
+    flex-direction: column;
+    z-index: 1;
+
+    @include desktop {
+      padding: 2 * $large-spacing;
+    }
+  }
+
+  &__logo {
+    max-width: 300px;
+    height: 50px;
+    margin-bottom: $large-spacing;
+
+    @include desktop {
+      margin-bottom: 70px;
+    }
+  }
+
+  &__page-subheading {
+    @include regular-text;
+    color: $color-brand;
+    margin-bottom: $small-spacing;
+  }
+
+  &__page-heading {
+    @include heading-2;
+    color: $color-brand;
+    margin-bottom: 2 * $large-spacing;
+  }
+
+  &__heading {
+    @include heading-2;
+    margin-bottom: $small-spacing;
+  }
+
+  &__claim {
+    @include heading-2;
+    margin-bottom: 70px;
+  }
+
+  &__paragraph {
+    @include regular-text;
+    margin-bottom: $medium-spacing;
+
+    &:last-of-type {
+      margin-bottom: 2 * $large-spacing;
+    }
+  }
+
+  &__button {
+    @include regular-text;
+    flex-grow: 0;
+    align-self: flex-start;
+    min-width: 150px;
+    display: inline-flex;
+    box-sizing: border-box;
+    justify-content: center;
+    margin-bottom: $large-spacing;
+    cursor: pointer;
+  }
+
+  &__secondary-link {
+    @include inline-title;
+    cursor: pointer;
+
+    @include desktop {
+      margin-top: auto;
+    }
+  }
+}
 </style>
diff --git a/client/src/pages/onboarding/start.vue b/client/src/pages/onboarding/start.vue
index 971b4026..38f60e1c 100644
--- a/client/src/pages/onboarding/start.vue
+++ b/client/src/pages/onboarding/start.vue
@@ -1,22 +1,18 @@
 <template>
   <div>
     <logo class="onboarding__logo" />
-    <h1 class="onboarding__heading">
-      Herzlich willkommen!
-    </h1>
+    <h1 class="onboarding__heading">Herzlich willkommen!</h1>
 
-    <p class="onboarding__claim">
-      Schauen Sie sich die Einführung an und lernen Sie {{ $flavor.textAppName }} kennen.
-    </p>
+    <p class="onboarding__claim">Schauen Sie sich die Einführung an und lernen Sie {{ $flavor.textAppName }} kennen.</p>
   </div>
 </template>
 
 <script>
-  const Logo = () => import(/* webpackChunkName: "icons" */'@/components/icons/Logo');
+const Logo = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Logo');
 
-  export default {
-    components: {
-      Logo
-    },
-  };
+export default {
+  components: {
+    Logo,
+  },
+};
 </script>
diff --git a/client/src/pages/onboarding/step1.vue b/client/src/pages/onboarding/step1.vue
index dd4abdd0..b093d200 100644
--- a/client/src/pages/onboarding/step1.vue
+++ b/client/src/pages/onboarding/step1.vue
@@ -1,11 +1,7 @@
 <template>
   <div>
-    <h3 class="onboarding__page-subheading">
-      Einführung: Schritt 1 von 3
-    </h3>
-    <h1 class="onboarding__page-heading">
-      Ihr Lernbereich
-    </h1>
+    <h3 class="onboarding__page-subheading">Einführung: Schritt 1 von 3</h3>
+    <h1 class="onboarding__page-heading">Ihr Lernbereich</h1>
     <h2 class="onboarding__heading">
       {{ $flavor.textTopics }}
     </h2>
@@ -16,11 +12,10 @@
       {{ $flavor.textInstruments }}
     </h2>
     <p class="onboarding__paragraph">
-      Die «{{ $flavor.textInstruments }}» helfen Ihnen dabei, Aufträge und Situationen zu bearbeiten. Zudem erweitern Sie so Ihre Kompetenzen.
+      Die «{{ $flavor.textInstruments }}» helfen Ihnen dabei, Aufträge und Situationen zu bearbeiten. Zudem erweitern
+      Sie so Ihre Kompetenzen.
     </p>
-    <h2 class="onboarding__heading">
-      News
-    </h2>
+    <h2 class="onboarding__heading">News</h2>
     <p class="onboarding__paragraph">
       Unter «News» werden regelmässig Artikel zu aktuellen Ereignissen veröffentlicht.
     </p>
diff --git a/client/src/pages/onboarding/step2.vue b/client/src/pages/onboarding/step2.vue
index 29e4067b..76344898 100644
--- a/client/src/pages/onboarding/step2.vue
+++ b/client/src/pages/onboarding/step2.vue
@@ -1,14 +1,8 @@
 <template>
   <div>
-    <h3 class="onboarding__page-subheading">
-      Einführung: Schritt 2 von 3
-    </h3>
-    <h1 class="onboarding__page-heading">
-      Ihr Bereich für Zusammenarbeit
-    </h1>
-    <h2 class="onboarding__heading">
-      Räume
-    </h2>
+    <h3 class="onboarding__page-subheading">Einführung: Schritt 2 von 3</h3>
+    <h1 class="onboarding__page-heading">Ihr Bereich für Zusammenarbeit</h1>
+    <h2 class="onboarding__heading">Räume</h2>
     <p class="onboarding__paragraph">
       In den Räumen können Sie in grossen und kleinen Gruppen zusammenarbeiten und Beiträge teilen.
     </p>
diff --git a/client/src/pages/onboarding/step3.vue b/client/src/pages/onboarding/step3.vue
index 39254892..8e3aa6c8 100644
--- a/client/src/pages/onboarding/step3.vue
+++ b/client/src/pages/onboarding/step3.vue
@@ -1,16 +1,8 @@
 <template>
   <div>
-    <h3 class="onboarding__page-subheading">
-      Einführung: Schritt 3 von 3
-    </h3>
-    <h1 class="onboarding__page-heading">
-      Ihr persönlicher Bereich
-    </h1>
-    <h2 class="onboarding__heading">
-      Portfolio
-    </h2>
-    <p class="onboarding__paragraph">
-      Dokumentieren Sie Ihre Arbeiten und Projekte. Reflektieren Sie Ihr Vorgehen.
-    </p>
+    <h3 class="onboarding__page-subheading">Einführung: Schritt 3 von 3</h3>
+    <h1 class="onboarding__page-heading">Ihr persönlicher Bereich</h1>
+    <h2 class="onboarding__heading">Portfolio</h2>
+    <p class="onboarding__paragraph">Dokumentieren Sie Ihre Arbeiten und Projekte. Reflektieren Sie Ihr Vorgehen.</p>
   </div>
 </template>
diff --git a/client/src/pages/p404.vue b/client/src/pages/p404.vue
index 286011c9..6fc475de 100644
--- a/client/src/pages/p404.vue
+++ b/client/src/pages/p404.vue
@@ -1,21 +1,14 @@
 <template>
   <div class="page-not-found">
-    <h2 class="">
-      Leider können wir die gewünschte Seite nicht finden.
-    </h2>
-    <router-link
-      :to="'/'"
-      class="button button--primary"
-    >
-      Zur Startseite
-    </router-link>
+    <h2 class="">Leider können wir die gewünschte Seite nicht finden.</h2>
+    <router-link :to="'/'" class="button button--primary"> Zur Startseite </router-link>
   </div>
 </template>
 
 <style scoped lang="scss">
-  @import "@/styles/_helpers.scss";
+@import '@/styles/_helpers.scss';
 
-  .page-not-found {
-    padding: $medium-spacing;
-  }
+.page-not-found {
+  padding: $medium-spacing;
+}
 </style>
diff --git a/client/src/pages/portfolio/editProject.vue b/client/src/pages/portfolio/editProject.vue
index af4b2232..7b8d7b69 100644
--- a/client/src/pages/portfolio/editProject.vue
+++ b/client/src/pages/portfolio/editProject.vue
@@ -1,40 +1,37 @@
 <template>
   <div class="edit-project-page">
-    <edit-project
-      :project="project"
-      v-if="project.id"
-    />
+    <edit-project :project="project" v-if="project.id" />
   </div>
 </template>
 
 <script>
-  // todo: refactor this, we don't need 2 components, remove editRoom or EditRoom component
-  import EditProject from '@/components/portfolio/EditProject';
+// todo: refactor this, we don't need 2 components, remove editRoom or EditRoom component
+import EditProject from '@/components/portfolio/EditProject';
 
-  import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
+import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
 
-  export default {
-    props: ['slug'],
+export default {
+  props: ['slug'],
 
-    components: {
-      EditProject
+  components: {
+    EditProject,
+  },
+
+  data() {
+    return {
+      project: {},
+    };
+  },
+
+  apollo: {
+    project: {
+      query: PROJECT_QUERY,
+      variables() {
+        return {
+          slug: this.slug,
+        };
+      },
     },
-
-    data() {
-      return {
-        project: {}
-      };
-    },
-
-    apollo: {
-      project: {
-        query: PROJECT_QUERY,
-        variables() {
-          return {
-            slug: this.slug
-          };
-        }
-      }
-    }
-  };
+  },
+};
 </script>
diff --git a/client/src/pages/portfolio/newProject.vue b/client/src/pages/portfolio/newProject.vue
index eecd0587..5242325a 100644
--- a/client/src/pages/portfolio/newProject.vue
+++ b/client/src/pages/portfolio/newProject.vue
@@ -1,59 +1,62 @@
 <template>
-  <project-form
-    :project="project"
-    @save="saveProject"
-  />
+  <project-form :project="project" @save="saveProject" />
 </template>
 
 <script>
-  import ProjectForm from '@/components/portfolio/ProjectForm';
+import ProjectForm from '@/components/portfolio/ProjectForm';
 
-  import ADD_PROJECT_MUTATION from '@/graphql/gql/mutations/addProject.gql';
-  import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
+import ADD_PROJECT_MUTATION from '@/graphql/gql/mutations/addProject.gql';
+import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
 
-  export default {
-    components: {
-      ProjectForm
+export default {
+  components: {
+    ProjectForm,
+  },
+
+  computed: {
+    project() {
+      return {
+        title: '',
+        description: '',
+        objectives: '',
+      };
     },
+  },
 
-    computed: {
-      project() {
-        return {
-          title: '',
-          description: '',
-          objectives: '',
-        };
-      }
-    },
-
-    methods: {
-      saveProject(project) {
-        this.$apollo.mutate({
+  methods: {
+    saveProject(project) {
+      this.$apollo
+        .mutate({
           mutation: ADD_PROJECT_MUTATION,
           variables: {
             input: {
-              project: project
-            }
+              project: project,
+            },
           },
-          update: (store, {data: {addProject: {project}}}) => {
+          update: (
+            store,
+            {
+              data: {
+                addProject: { project },
+              },
+            }
+          ) => {
             try {
-              const {projects} = store.readQuery({query: PROJECTS_QUERY});
+              const { projects } = store.readQuery({ query: PROJECTS_QUERY });
               if (projects) {
-                const expandedProjects = [
-                  project,
-                  ...projects
-                ];
-                const data = {projects:expandedProjects};
-                store.writeQuery({query: PROJECTS_QUERY, data});
+                const expandedProjects = [project, ...projects];
+                const data = { projects: expandedProjects };
+                store.writeQuery({ query: PROJECTS_QUERY, data });
               }
             } catch (e) {
               // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
             }
-          }
-        }).then(() => {
+          },
+        })
+        .then(() => {
           this.$router.push('/portfolio');
         });
-      }
-    }
-  };
+    },
+  },
+};
 </script>
diff --git a/client/src/pages/portfolio/portfolio.vue b/client/src/pages/portfolio/portfolio.vue
index d457237f..e0084e72 100644
--- a/client/src/pages/portfolio/portfolio.vue
+++ b/client/src/pages/portfolio/portfolio.vue
@@ -2,19 +2,11 @@
   <div class="portfolio__page">
     <template v-if="projects.length > 0">
       <div class="portfolio">
-        <h1 data-cy="page-title">
-          Portfolio
-        </h1>
+        <h1 data-cy="page-title">Portfolio</h1>
 
-        <create-project-button
-          data-cy="create-project-button"
-          class="portfolio__create-button"
-          v-if="!isReadOnly"
-        />
+        <create-project-button data-cy="create-project-button" class="portfolio__create-button" v-if="!isReadOnly" />
 
-        <project-list
-          :projects="projects"
-        />
+        <project-list :projects="projects" />
       </div>
     </template>
     <portfolio-onboarding v-else />
@@ -22,89 +14,88 @@
 </template>
 
 <script>
-  import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
-  import PortfolioOnboarding from '@/components/portfolio/PortfolioOnboarding';
-  import CreateProjectButton from '@/components/portfolio/CreateProjectButton';
-  import ProjectList from '@/components/portfolio/ProjectList';
+import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
+import PortfolioOnboarding from '@/components/portfolio/PortfolioOnboarding';
+import CreateProjectButton from '@/components/portfolio/CreateProjectButton';
+import ProjectList from '@/components/portfolio/ProjectList';
 
-  import me from '@/mixins/me';
+import me from '@/mixins/me';
 
-  export default {
+export default {
+  mixins: [me],
+  components: {
+    ProjectList,
+    CreateProjectButton,
+    PortfolioOnboarding,
+  },
 
-    mixins: [me],
-    components: {
-      ProjectList,
-      CreateProjectButton,
-      PortfolioOnboarding,
+  apollo: {
+    projects: {
+      query: PROJECTS_QUERY,
+      pollInterval: 5000,
     },
+  },
 
-    apollo: {
-      projects: {
-        query: PROJECTS_QUERY,
-        pollInterval: 5000,
-      }
-    },
+  data() {
+    return {
+      projects: [],
+    };
+  },
 
-    data() {
-      return {
-        projects: [],
-      };
+  computed: {
+    userId() {
+      return this.me.id;
     },
-
-    computed: {
-      userId() {
-        return this.me.id;
-      }
-    },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .portfolio {
+.portfolio {
+  display: flex;
+  flex-direction: column;
+  @supports (display: grid) {
+    display: grid;
+    grid-template-columns: minmax(min-content, 840px);
+    grid-template-rows: auto;
+  }
+  grid-row-gap: 30px;
+  grid-auto-rows: auto;
+  max-width: 840px;
+  width: 100vw;
+  /*justify-self: center;*/
+  box-sizing: border-box;
+  padding: $large-spacing $medium-spacing;
+
+  &__create-button {
+    display: none;
+    width: 150px;
+    @include desktop {
+      display: inline-flex;
+    }
+  }
+
+  &__page {
     display: flex;
     flex-direction: column;
     @supports (display: grid) {
       display: grid;
-      grid-template-columns: minmax(min-content, 840px);
-      grid-template-rows: auto;
+      align-content: flex-start;
+      justify-content: center;
     }
-    grid-row-gap: 30px;
-    grid-auto-rows: auto;
-    max-width: 840px;
-    width: 100vw;
-    /*justify-self: center;*/
-    box-sizing: border-box;
-    padding: $large-spacing $medium-spacing;
+    align-items: center;
 
-    &__create-button {
-      display: none;
-      width: 150px;
-      @include desktop {
-        display: inline-flex;
-      }
-    }
+    padding-top: $large-spacing;
+  }
 
-    &__page {
-      display: flex;
-      flex-direction: column;
-      @supports (display: grid) {
-        display: grid;
-        align-content: flex-start;
-        justify-content: center;
-      }
-      align-items: center;
-
-      padding-top: $large-spacing;
-    }
-
-    /*IE10*/
-    &__add-project {
-      margin-bottom: $large-spacing;
-      @supports (display: grid) {
-        margin-bottom: 0;
-      }
+  /*IE10*/
+  &__add-project {
+    margin-bottom: $large-spacing;
+    @supports (display: grid) {
+      margin-bottom: 0;
     }
   }
+}
 </style>
diff --git a/client/src/pages/portfolio/project.vue b/client/src/pages/portfolio/project.vue
index 3e150c1f..82cd1e40 100644
--- a/client/src/pages/portfolio/project.vue
+++ b/client/src/pages/portfolio/project.vue
@@ -1,14 +1,7 @@
 <template>
-  <div
-    :class="specialContainerClass"
-    class="project"
-  >
+  <div :class="specialContainerClass" class="project">
     <div class="project__header">
-      <back-link
-        class="project__back"
-        title="Zurück zur Übersicht"
-        type="portfolio"
-      />
+      <back-link class="project__back" title="Zurück zur Übersicht" type="portfolio" />
 
       <div class="project__actions">
         <share-link
@@ -18,18 +11,10 @@
           @click.native="updateProjectShareState(project.slug, !project.final)"
         />
 
-        <project-actions
-          :share-buttons="false"
-          class="project__more"
-          :slug="project.slug"
-          v-if="canEdit"
-        />
+        <project-actions :share-buttons="false" class="project__more" :slug="project.slug" v-if="canEdit" />
       </div>
 
-      <h1
-        class="project__title"
-        data-cy="project-title"
-      >
+      <h1 class="project__title" data-cy="project-title">
         {{ project.title }}
       </h1>
       <p class="project__description">
@@ -48,192 +33,186 @@
         data-cy="add-project-entry"
         v-if="isOwner && !me.readOnly && !me.selectedClass.readOnly"
       />
-      <project-entry
-        v-bind="entry"
-        :read-only="!canEdit"
-        v-for="(entry, index) in project.entries"
-        :key="index"
-      />
+      <project-entry v-bind="entry" :read-only="!canEdit" v-for="(entry, index) in project.entries" :key="index" />
     </div>
   </div>
 </template>
 
 <script>
-  import ProjectEntry from '@/components/portfolio/ProjectEntry';
-  import ProjectActions from '@/components/portfolio/ProjectActions';
-  import AddProjectEntry from '@/components/portfolio/AddProjectEntry';
-  import EntryCountWidget from '@/components/rooms/EntryCountWidget';
-  import OwnerWidget from '@/components/portfolio/OwnerWidget';
+import ProjectEntry from '@/components/portfolio/ProjectEntry';
+import ProjectActions from '@/components/portfolio/ProjectActions';
+import AddProjectEntry from '@/components/portfolio/AddProjectEntry';
+import EntryCountWidget from '@/components/rooms/EntryCountWidget';
+import OwnerWidget from '@/components/portfolio/OwnerWidget';
 
-  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
-  import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
-  import BackLink from '@/components/BackLink';
-  import ShareLink from '@/components/portfolio/ShareLink';
+import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
+import BackLink from '@/components/BackLink';
+import ShareLink from '@/components/portfolio/ShareLink';
 
-  import updateProjectShareState from '@/mixins/update-project-share-state';
+import updateProjectShareState from '@/mixins/update-project-share-state';
 
-  export default {
-    props: ['slug'],
+export default {
+  props: ['slug'],
 
-    mixins: [updateProjectShareState],
+  mixins: [updateProjectShareState],
 
-    components: {
-      ShareLink,
-      BackLink,
-      AddProjectEntry,
-      ProjectEntry,
-      ProjectActions,
-      EntryCountWidget,
-      OwnerWidget,
-    },
+  components: {
+    ShareLink,
+    BackLink,
+    AddProjectEntry,
+    ProjectEntry,
+    ProjectActions,
+    EntryCountWidget,
+    OwnerWidget,
+  },
 
-    data() {
-      return {
-        project: {
-          student: {
-            id: '',
-          },
-        },
-        me: {
+  data() {
+    return {
+      project: {
+        student: {
           id: '',
         },
-      };
-    },
-
-    computed: {
-      objectives() {
-        return this.project.objectives ? this.project.objectives.split('\n') : [];
-      },
-      specialContainerClass() {
-        const cls = this.project.appearance;
-        return [cls ? `project--${cls}` : ''];
-      },
-      isOwner() {
-        return this.me.id === this.project.student.id;
-      },
-      projectEntryCount() {
-        return this.project.entries ? this.project.entries.length : 0;
-      },
-      canEdit() {
-        return !this.me.readOnly && !this.me.selectedClass.readOnly && this.isOwner;
-      },
-    },
-
-    apollo: {
-      project: {
-        query: PROJECT_QUERY,
-        variables() {
-          return {
-            slug: this.slug,
-          };
-        },
-        pollInterval: 5000,
       },
       me: {
-        query: ME_QUERY,
+        id: '',
       },
-    },
+    };
+  },
 
-  };
+  computed: {
+    objectives() {
+      return this.project.objectives ? this.project.objectives.split('\n') : [];
+    },
+    specialContainerClass() {
+      const cls = this.project.appearance;
+      return [cls ? `project--${cls}` : ''];
+    },
+    isOwner() {
+      return this.me.id === this.project.student.id;
+    },
+    projectEntryCount() {
+      return this.project.entries ? this.project.entries.length : 0;
+    },
+    canEdit() {
+      return !this.me.readOnly && !this.me.selectedClass.readOnly && this.isOwner;
+    },
+  },
+
+  apollo: {
+    project: {
+      query: PROJECT_QUERY,
+      variables() {
+        return {
+          slug: this.slug,
+        };
+      },
+      pollInterval: 5000,
+    },
+    me: {
+      query: ME_QUERY,
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .project {
-    &__header {
-      padding: $large-spacing;
-      border-bottom: 1px solid $color-silver;
+.project {
+  &__header {
+    padding: $large-spacing;
+    border-bottom: 1px solid $color-silver;
 
-      display: grid;
-      grid-template-areas:
-        "b a"
-        "t t"
-        "d d"
-        "m m"
-    }
+    display: grid;
+    grid-template-areas:
+      'b a'
+      't t'
+      'd d'
+      'm m';
+  }
 
-    &__back {
-      grid-area: b;
-    }
+  &__back {
+    grid-area: b;
+  }
 
-    &__actions {
-      grid-area: a;
-      display: flex;
+  &__actions {
+    grid-area: a;
+    display: flex;
 
-      justify-self: end;
-    }
+    justify-self: end;
+  }
 
-    &__more {
-      display: none;
-      @include desktop {
-        display: block;
-      }
-    }
-
-    &__share {
-      margin-right: $medium-spacing;
-    }
-
-    &__title {
-      grid-area: t;
-    }
-
-    &__description {
-      grid-area: d;
-      font-family: $sans-serif-font-family;
-    }
-
-    &__add-entry {
-      height: 120px;
-
-      display: none;
-      @include desktop {
-        display:flex;
-      }
-    }
-
-    &__description {
-      margin-bottom: 30px;
-    }
-
-    &__meta {
-      grid-area: m;
-
-      display: flex;
-      flex-direction: column;
-      @include desktop {
-        flex-direction: row-reverse;
-      }
-      justify-content: flex-start;
-      position: relative;
-      align-items: center;
-
-      & > :first-child {
-        margin-left: $large-spacing;
-      }
-
-      & > :nth-child(2) {
-        margin-left: $large-spacing;
-      }
-    }
-
-    &__content {
-      display: flex;
-      flex-direction: column;
-      /*max-width: 840px;*/
-      width: 100%;
-      min-height: 75vh;
-      align-content: flex-start;
-      margin: 0 auto;
-      @supports (display: grid) {
-        display: grid;
-        width: auto;
-      }
-      grid-template-columns: minmax(min-content, 840px);
-      grid-row-gap: 30px;
-      justify-content: center;
-      padding: $large-spacing $medium-spacing;
+  &__more {
+    display: none;
+    @include desktop {
+      display: block;
     }
   }
+
+  &__share {
+    margin-right: $medium-spacing;
+  }
+
+  &__title {
+    grid-area: t;
+  }
+
+  &__description {
+    grid-area: d;
+    font-family: $sans-serif-font-family;
+  }
+
+  &__add-entry {
+    height: 120px;
+
+    display: none;
+    @include desktop {
+      display: flex;
+    }
+  }
+
+  &__description {
+    margin-bottom: 30px;
+  }
+
+  &__meta {
+    grid-area: m;
+
+    display: flex;
+    flex-direction: column;
+    @include desktop {
+      flex-direction: row-reverse;
+    }
+    justify-content: flex-start;
+    position: relative;
+    align-items: center;
+
+    & > :first-child {
+      margin-left: $large-spacing;
+    }
+
+    & > :nth-child(2) {
+      margin-left: $large-spacing;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    /*max-width: 840px;*/
+    width: 100%;
+    min-height: 75vh;
+    align-content: flex-start;
+    margin: 0 auto;
+    @supports (display: grid) {
+      display: grid;
+      width: auto;
+    }
+    grid-template-columns: minmax(min-content, 840px);
+    grid-row-gap: 30px;
+    justify-content: center;
+    padding: $large-spacing $medium-spacing;
+  }
+}
 </style>
diff --git a/client/src/pages/profile.vue b/client/src/pages/profile.vue
index 10dfff57..c3c5f7e9 100644
--- a/client/src/pages/profile.vue
+++ b/client/src/pages/profile.vue
@@ -5,18 +5,18 @@
 </template>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .profile {
-    padding: $large-spacing;
-    max-width: 640px;
+.profile {
+  padding: $large-spacing;
+  max-width: 640px;
+  margin: 0 auto;
+  width: 100%;
+  box-sizing: border-box;
+
+  @include desktop {
+    max-width: 800px;
     margin: 0 auto;
-    width: 100%;
-    box-sizing: border-box;
-
-    @include desktop {
-      max-width: 800px;
-      margin: 0 auto;
-    }
   }
+}
 </style>
diff --git a/client/src/pages/rooms/editRoom.vue b/client/src/pages/rooms/editRoom.vue
index f281151e..96a9101c 100644
--- a/client/src/pages/rooms/editRoom.vue
+++ b/client/src/pages/rooms/editRoom.vue
@@ -1,47 +1,44 @@
 <template>
   <div class="edit-room-page">
-    <edit-room
-      :room="room"
-      v-if="room.id"
-    />
+    <edit-room :room="room" v-if="room.id" />
   </div>
 </template>
 
 <script>
-  // todo: refactor this, we don't need 2 components, remove editRoom or EditRoom component
-  import EditRoom from '@/components/rooms/EditRoom';
+// todo: refactor this, we don't need 2 components, remove editRoom or EditRoom component
+import EditRoom from '@/components/rooms/EditRoom';
 
-  import ROOM_QUERY from 'gql/queries/roomQuery.gql';
+import ROOM_QUERY from 'gql/queries/roomQuery.gql';
 
-  export default {
-    props: ['id'],
+export default {
+  props: ['id'],
 
-    components: {
-      EditRoom
+  components: {
+    EditRoom,
+  },
+
+  data() {
+    return {
+      room: {},
+    };
+  },
+
+  apollo: {
+    room: {
+      query: ROOM_QUERY,
+      variables() {
+        return {
+          id: this.id,
+        };
+      },
+      // manual: true,
+      // result({data, loading, networkStatus}) {
+      //   if (!loading) {
+      //     this.room = Object.assign({}, this.$getRidOfEdges(data).room);
+      //     this.$store.dispatch('setSpecialContainerClass', this.room.appearance);
+      //   }
+      // }
     },
-
-    data() {
-      return {
-        room: {}
-      };
-    },
-
-    apollo: {
-      room: {
-        query: ROOM_QUERY,
-        variables() {
-          return {
-            id: this.id
-          };
-        },
-        // manual: true,
-        // result({data, loading, networkStatus}) {
-        //   if (!loading) {
-        //     this.room = Object.assign({}, this.$getRidOfEdges(data).room);
-        //     this.$store.dispatch('setSpecialContainerClass', this.room.appearance);
-        //   }
-        // }
-      }
-    }
-  };
+  },
+};
 </script>
diff --git a/client/src/pages/rooms/editRoomEntry.vue b/client/src/pages/rooms/editRoomEntry.vue
index ad630a8c..403cbc88 100644
--- a/client/src/pages/rooms/editRoomEntry.vue
+++ b/client/src/pages/rooms/editRoomEntry.vue
@@ -1,110 +1,109 @@
 <template>
-  <content-block-form
-    :content-block="roomEntry"
-    :features="features"
-    v-if="roomEntry.id"
-    @save="save"
-    @back="goBack"
-  />
+  <content-block-form :content-block="roomEntry" :features="features" v-if="roomEntry.id" @save="save" @back="goBack" />
 </template>
 
 <script>
-  import Vue from 'vue';
+import Vue from 'vue';
 
-  import ROOM_ENTRY_QUERY from 'gql/queries/roomEntryQuery.gql';
-  import ROOM_ENTRY_FRAGMENT from 'gql/fragments/roomEntryParts.gql';
-  import UPDATE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/updateRoomEntry.gql';
+import ROOM_ENTRY_QUERY from 'gql/queries/roomEntryQuery.gql';
+import ROOM_ENTRY_FRAGMENT from 'gql/fragments/roomEntryParts.gql';
+import UPDATE_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/updateRoomEntry.gql';
 
-  import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
-  import {ROOMS_FEATURE_SET} from '@/consts/features.consts';
-  import {ROOM_PAGE} from '@/router/room.names';
+import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
+import { ROOMS_FEATURE_SET } from '@/consts/features.consts';
+import { ROOM_PAGE } from '@/router/room.names';
 
-  export default Vue.extend( {
-    props: {
-      slug: {
-        type: String,
-        required: true
-      },
-      entrySlug: {
-        type: String,
-        required: true
-      }
+export default Vue.extend({
+  props: {
+    slug: {
+      type: String,
+      required: true,
     },
-
-    components: {
-      ContentBlockForm,
+    entrySlug: {
+      type: String,
+      required: true,
     },
+  },
 
-    data() {
-      return {
-        features: ROOMS_FEATURE_SET,
-        roomEntry: {
-          title: '',
-          contents: [],
-        },
-      };
-    },
+  components: {
+    ContentBlockForm,
+  },
 
-    apollo: {
+  data() {
+    return {
+      features: ROOMS_FEATURE_SET,
       roomEntry: {
-        query: ROOM_ENTRY_QUERY,
-        variables() {
-          return {
-            slug: this.entrySlug
-          };
-        }
-      }
-    },
-
-    methods: {
-      goBack() {
-        this.$router.push({
-          name: ROOM_PAGE,
-          params: {
-            slug: this.slug
-          }
-        });
+        title: '',
+        contents: [],
       },
-      save({title, contents}) {
-        const entry = {
-          slug: this.roomEntry.slug,
-          title,
-          contents,
+    };
+  },
+
+  apollo: {
+    roomEntry: {
+      query: ROOM_ENTRY_QUERY,
+      variables() {
+        return {
+          slug: this.entrySlug,
         };
-        this.$apollo.mutate({
+      },
+    },
+  },
+
+  methods: {
+    goBack() {
+      this.$router.push({
+        name: ROOM_PAGE,
+        params: {
+          slug: this.slug,
+        },
+      });
+    },
+    save({ title, contents }) {
+      const entry = {
+        slug: this.roomEntry.slug,
+        title,
+        contents,
+      };
+      this.$apollo
+        .mutate({
           mutation: UPDATE_ROOM_ENTRY_MUTATION,
           variables: {
             input: {
               roomEntry: entry,
-            }
+            },
           },
-          update: (store, {data: {updateRoomEntry: {roomEntry}}}) => {
+          update: (
+            store,
+            {
+              data: {
+                updateRoomEntry: { roomEntry },
+              },
+            }
+          ) => {
             try {
               const fragment = ROOM_ENTRY_FRAGMENT;
               const id = store.identify(roomEntry);
-              const cachedEntry = store.readQuery({fragment, id});
+              const cachedEntry = store.readQuery({ fragment, id });
               const data = Object.assign({}, cachedEntry, roomEntry);
               store.writeFragment({
                 id,
                 fragment,
-                data
+                data,
               });
             } catch (e) {
               // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
             }
-          }
-        }).then(() => {
+          },
+        })
+        .then(() => {
           this.goBack();
         });
-
-      }
     },
-  } );
-
+  },
+});
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
-
-
+@import '~styles/helpers';
 </style>
diff --git a/client/src/pages/rooms/newRoom.vue b/client/src/pages/rooms/newRoom.vue
index 7314aa07..5dae5e3d 100644
--- a/client/src/pages/rooms/newRoom.vue
+++ b/client/src/pages/rooms/newRoom.vue
@@ -1,64 +1,67 @@
 <template>
-  <room-form
-    :room="room"
-    @save="addRoom"
-  />
+  <room-form :room="room" @save="addRoom" />
 </template>
 
 <script>
-  import RoomForm from '@/components/rooms/RoomForm';
+import RoomForm from '@/components/rooms/RoomForm';
 
-  import ADD_ROOM_MUTATION from 'gql/mutations/rooms/addRoom.gql';
-  import ROOMS_QUERY from 'gql/queries/roomsQuery.gql';
+import ADD_ROOM_MUTATION from 'gql/mutations/rooms/addRoom.gql';
+import ROOMS_QUERY from 'gql/queries/roomsQuery.gql';
 
-  const defaultAppearance = 'blue';
+const defaultAppearance = 'blue';
 
-  export default {
-    components: {
-      RoomForm
-    },
+export default {
+  components: {
+    RoomForm,
+  },
 
-    data() {
-      return {
-        room: {
-          appearance: defaultAppearance,
-          title: '',
-          description: '',
-          schoolClass: {}
-        }
-      };
-    },
+  data() {
+    return {
+      room: {
+        appearance: defaultAppearance,
+        title: '',
+        description: '',
+        schoolClass: {},
+      },
+    };
+  },
 
-    methods: {
-      addRoom(room) {
-        this.$apollo.mutate({
+  methods: {
+    addRoom(room) {
+      this.$apollo
+        .mutate({
           mutation: ADD_ROOM_MUTATION,
           variables: {
             input: {
-              room: room
-            }
+              room: room,
+            },
           },
-          update: (store, {data: {addRoom: {room}}}) => {
+          update: (
+            store,
+            {
+              data: {
+                addRoom: { room },
+              },
+            }
+          ) => {
             try {
-              const {rooms} = store.readQuery({query: ROOMS_QUERY});
+              const { rooms } = store.readQuery({ query: ROOMS_QUERY });
               if (rooms) {
-                const expandedRooms = [
-                  ...rooms,
-                  room
-                ];
+                const expandedRooms = [...rooms, room];
                 const data = {
-                  rooms: expandedRooms
+                  rooms: expandedRooms,
                 };
-                store.writeQuery({query: ROOMS_QUERY, data});
+                store.writeQuery({ query: ROOMS_QUERY, data });
               }
             } catch (e) {
               // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
             }
-          }
-        }).then(() => {
+          },
+        })
+        .then(() => {
           this.$router.push('/rooms');
         });
-      }
     },
-  };
+  },
+};
 </script>
diff --git a/client/src/pages/rooms/newRoomEntry.vue b/client/src/pages/rooms/newRoomEntry.vue
index 04c46636..ec4c20bd 100644
--- a/client/src/pages/rooms/newRoomEntry.vue
+++ b/client/src/pages/rooms/newRoomEntry.vue
@@ -1,107 +1,104 @@
 <template>
-  <content-block-form
-    :content-block="roomEntry"
-    :features="features"
-    @save="save"
-    @back="goBack"
-  />
+  <content-block-form :content-block="roomEntry" :features="features" @save="save" @back="goBack" />
 </template>
 
 <script>
-  import Vue from 'vue';
+import Vue from 'vue';
 
-  import NEW_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/addRoomEntry.gql';
-  import ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/roomEntriesQuery.gql';
+import NEW_ROOM_ENTRY_MUTATION from 'gql/mutations/rooms/addRoomEntry.gql';
+import ROOM_ENTRIES_QUERY from '@/graphql/gql/queries/roomEntriesQuery.gql';
 
-  import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
-  import {ROOMS_FEATURE_SET} from '@/consts/features.consts';
-  import {ROOM_PAGE} from '@/router/room.names';
+import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
+import { ROOMS_FEATURE_SET } from '@/consts/features.consts';
+import { ROOM_PAGE } from '@/router/room.names';
 
-  export default Vue.extend( {
-    props: {
-      slug: {
-        type: String,
-        required: true
-      }
+export default Vue.extend({
+  props: {
+    slug: {
+      type: String,
+      required: true,
     },
+  },
 
-    components: {
-      ContentBlockForm,
-    },
+  components: {
+    ContentBlockForm,
+  },
 
-    data() {
-      return {
-        features: ROOMS_FEATURE_SET,
-        roomEntry: {
-          title: '',
-          contents: [],
-        },
-      };
-    },
-
-    methods: {
-      goBack() {
-        this.$router.push({
-          name: ROOM_PAGE,
-          params: {
-            slug: this.slug
-          }
-        });
+  data() {
+    return {
+      features: ROOMS_FEATURE_SET,
+      roomEntry: {
+        title: '',
+        contents: [],
       },
-      save({title, contents}) {
-        const entry = {
-          title,
-          contents,
-          roomSlug: this.slug
-        };
-        this.$apollo.mutate({
+    };
+  },
+
+  methods: {
+    goBack() {
+      this.$router.push({
+        name: ROOM_PAGE,
+        params: {
+          slug: this.slug,
+        },
+      });
+    },
+    save({ title, contents }) {
+      const entry = {
+        title,
+        contents,
+        roomSlug: this.slug,
+      };
+      this.$apollo
+        .mutate({
           mutation: NEW_ROOM_ENTRY_MUTATION,
           variables: {
             input: {
               roomEntry: entry,
-            }
+            },
           },
-          update: (store, {data: {addRoomEntry: {roomEntry}}}) => {
+          update: (
+            store,
+            {
+              data: {
+                addRoomEntry: { roomEntry },
+              },
+            }
+          ) => {
             try {
               const query = ROOM_ENTRIES_QUERY;
-              const variables = {slug: this.slug};
-              const {room} = store.readQuery({query, variables});
+              const variables = { slug: this.slug };
+              const { room } = store.readQuery({ query, variables });
               if (room && room.roomEntries) {
-                const newEdge ={
+                const newEdge = {
                   node: roomEntry,
-                  __typename: 'RoomEntryNodeEdge'
+                  __typename: 'RoomEntryNodeEdge',
                 };
-                const edges = [
-                  newEdge,
-                  ...room.roomEntries.edges
-                ];
+                const edges = [newEdge, ...room.roomEntries.edges];
                 const data = {
                   room: {
                     ...room,
                     roomEntries: {
                       ...room.roomEntries,
-                      edges
-                    }
-                  }
+                      edges,
+                    },
+                  },
                 };
-                store.writeQuery({query, variables, data});
+                store.writeQuery({ query, variables, data });
               }
             } catch (e) {
               // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
             }
-          }
-        }).then(() => {
+          },
+        })
+        .then(() => {
           this.goBack();
         });
-
-      }
     },
-  } );
-
+  },
+});
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
-
-
+@import '~styles/helpers';
 </style>
diff --git a/client/src/pages/rooms/room.vue b/client/src/pages/rooms/room.vue
index dfca2470..1a13ed6e 100644
--- a/client/src/pages/rooms/room.vue
+++ b/client/src/pages/rooms/room.vue
@@ -1,111 +1,86 @@
 <template>
   <div class="room">
     <div class="room__back">
-      <back-link
-        type="room"
-        title="Zurück zur Übersicht"
-      />
+      <back-link type="room" title="Zurück zur Übersicht" />
     </div>
     <div class="room__context-menu">
-      <room-actions
-        :restricted="room.restricted"
-        class="room__actions"
-        v-if="canEdit"
-        :id="room.id"
-      />
+      <room-actions :restricted="room.restricted" class="room__actions" v-if="canEdit" :id="room.id" />
     </div>
     <div class="room__header">
-      <h1
-        class="room__title"
-        data-cy="room-title"
-      >
+      <h1 class="room__title" data-cy="room-title">
         {{ room.title }}
       </h1>
       <p class="room__intro">
         {{ room.description }}
       </p>
       <div class="room__meta">
-        <room-visibility-widget
-          :restricted="room.restricted"
-          data-cy="room-visibility-status"
-        />
+        <room-visibility-widget :restricted="room.restricted" data-cy="room-visibility-status" />
         <room-group-widget v-bind="room.schoolClass" />
         <entry-count-widget :entry-count="roomEntryCount" />
       </div>
     </div>
     <div class="room__content">
-      <add-room-entry-button
-        :parent="room"
-        v-if="room.id && !isReadOnly"
-      >
+      <add-room-entry-button :parent="room" v-if="room.id && !isReadOnly">
         <!--
         the v-if is there for the case where the room hasn't loaded yet, but there is already an attempt to create
         a new room entry. mainly happens during cypress testing, but could also happen on a very slow connection
         -->
       </add-room-entry-button>
-      <room-entry
-        v-bind="entry"
-        :comments="entry.comments.length"
-        v-for="entry in room.roomEntries"
-        :key="entry.id"
-      />
+      <room-entry v-bind="entry" :comments="entry.comments.length" v-for="entry in room.roomEntries" :key="entry.id" />
     </div>
   </div>
 </template>
 
 <script>
-  import ROOM_ENTRIES_QUERY from 'gql/queries/roomEntriesQuery.gql';
-  import room from '@/mixins/room';
-  import me from '@/mixins/me';
-  import BackLink from '@/components/BackLink';
-  import RoomVisibilityWidget from '@/components/rooms/RoomVisibilityWidget';
-  import {ROOMS_PAGE} from '@/router/room.names';
+import ROOM_ENTRIES_QUERY from 'gql/queries/roomEntriesQuery.gql';
+import room from '@/mixins/room';
+import me from '@/mixins/me';
+import BackLink from '@/components/BackLink';
+import RoomVisibilityWidget from '@/components/rooms/RoomVisibilityWidget';
+import { ROOMS_PAGE } from '@/router/room.names';
 
-  export default {
-    props: ['slug'],
-    mixins: [room, me],
-    components: {RoomVisibilityWidget, BackLink},
+export default {
+  props: ['slug'],
+  mixins: [room, me],
+  components: { RoomVisibilityWidget, BackLink },
 
-    computed: {
-      canEdit() {
-        return this.me.isTeacher && !this.isReadOnly;
-      },
-      isReadOnly() {
-        return this.me.readOnly || this.me.selectedClass.readOnly;
-      },
+  computed: {
+    canEdit() {
+      return this.me.isTeacher && !this.isReadOnly;
     },
-
-    mounted() {
-      this.$watch(
-        'me.selectedClass.id',
-        (newValue) => {
-          if (this.room.schoolClass.id !== newValue) {
-            this.$router.push({
-              name: ROOMS_PAGE,
-            });
-          }
-        },
-      );
+    isReadOnly() {
+      return this.me.readOnly || this.me.selectedClass.readOnly;
     },
+  },
 
-    apollo: {
-      room: {
-        query: ROOM_ENTRIES_QUERY,
-        variables() {
-          return {
-            slug: this.slug,
-          };
-        },
-        update({room}) {
-          this.$store.dispatch('setSpecialContainerClass', room.appearance);
-          return this.$getRidOfEdges(room);
-        },
-        pollInterval: 5000,
+  mounted() {
+    this.$watch('me.selectedClass.id', (newValue) => {
+      if (this.room.schoolClass.id !== newValue) {
+        this.$router.push({
+          name: ROOMS_PAGE,
+        });
+      }
+    });
+  },
+
+  apollo: {
+    room: {
+      query: ROOM_ENTRIES_QUERY,
+      variables() {
+        return {
+          slug: this.slug,
+        };
       },
+      update({ room }) {
+        this.$store.dispatch('setSpecialContainerClass', room.appearance);
+        return this.$getRidOfEdges(room);
+      },
+      pollInterval: 5000,
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/room";
+@import '~styles/room';
 </style>
diff --git a/client/src/pages/rooms/rooms.vue b/client/src/pages/rooms/rooms.vue
index 461c1367..d12383d3 100644
--- a/client/src/pages/rooms/rooms.vue
+++ b/client/src/pages/rooms/rooms.vue
@@ -8,119 +8,113 @@
         v-for="room in filteredRooms"
         :key="room.name"
       />
-      <add-room
-        class="rooms-page__add-room"
-        data-cy="add-room"
-        v-if="canAddRoom"
-      />
+      <add-room class="rooms-page__add-room" data-cy="add-room" v-if="canAddRoom" />
     </template>
-    <rooms-onboarding
-      :is-teacher="me.isTeacher"
-      v-else
-    />
+    <rooms-onboarding :is-teacher="me.isTeacher" v-else />
   </div>
 </template>
 
 <script>
-  import ROOMS_QUERY from 'gql/queries/roomsQuery.gql';
-  import ME_QUERY from 'gql/queries/meQuery.gql';
+import ROOMS_QUERY from 'gql/queries/roomsQuery.gql';
+import ME_QUERY from 'gql/queries/meQuery.gql';
 
-  import RoomWidget from '@/components/rooms/RoomWidget.vue';
-  import AddRoom from '@/components/rooms/AddRoom.vue';
-  import RoomsOnboarding from '@/components/rooms/RoomsOnboarding';
+import RoomWidget from '@/components/rooms/RoomWidget.vue';
+import AddRoom from '@/components/rooms/AddRoom.vue';
+import RoomsOnboarding from '@/components/rooms/RoomsOnboarding';
 
-  export default {
-    components: {
-      RoomsOnboarding,
-      RoomWidget,
-      AddRoom
-    },
+export default {
+  components: {
+    RoomsOnboarding,
+    RoomWidget,
+    AddRoom,
+  },
 
-    data() {
-      return {
-        rooms: [],
-        me: {
-          selectedClass: {
-            id: ''
-          },
-          permissions: []
-        }
-      };
-    },
-
-    computed: {
-      filteredRooms() {
-        return this.rooms.filter(room => this.visibleFor(room, this.currentFilter));
-      },
-      currentFilter() {
-        return this.me.selectedClass.id;
-      },
-      canAddRoom() {
-        return this.me.isTeacher && !this.me.readOnly && !this.me.selectedClass.readOnly;
-      }
-    },
-
-    methods: {
-      visibleFor(room, schoolClass) {
-        return !schoolClass || room.schoolClass.id === schoolClass;
-      }
-    },
-
-    apollo: {
-      rooms: {
-        query: ROOMS_QUERY,
-        pollInterval: 5000,
-      },
+  data() {
+    return {
+      rooms: [],
       me: {
-        query: ME_QUERY,
+        selectedClass: {
+          id: '',
+        },
+        permissions: [],
       },
+    };
+  },
+
+  computed: {
+    filteredRooms() {
+      return this.rooms.filter((room) => this.visibleFor(room, this.currentFilter));
     },
-  };
+    currentFilter() {
+      return this.me.selectedClass.id;
+    },
+    canAddRoom() {
+      return this.me.isTeacher && !this.me.readOnly && !this.me.selectedClass.readOnly;
+    },
+  },
+
+  methods: {
+    visibleFor(room, schoolClass) {
+      return !schoolClass || room.schoolClass.id === schoolClass;
+    },
+  },
+
+  apollo: {
+    rooms: {
+      query: ROOMS_QUERY,
+      pollInterval: 5000,
+    },
+    me: {
+      query: ME_QUERY,
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .rooms-page {
-    display: flex;
-    flex-wrap: wrap;
-    align-content: flex-start;
+.rooms-page {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
 
-    @supports (display: grid) {
-      display: grid;
-    }
+  @supports (display: grid) {
+    display: grid;
+  }
+
+  padding: 50px 15px;
+  @include desktop {
+    grid-template-columns: repeat(3, 1fr);
+    -ms-grid-columns: 1fr 30px 1fr 30px 1fr;
+    padding: 50px 45px;
+  }
+  grid-column-gap: 30px;
+  grid-row-gap: 30px;
+  grid-auto-rows: 260px;
+  max-width: 1440px;
+  width: 100%;
+  justify-self: center;
+  box-sizing: border-box;
+
+  &__add-room {
+    visibility: hidden;
 
-    padding: 50px 15px;
     @include desktop {
-      grid-template-columns: repeat(3, 1fr);
-      -ms-grid-columns: 1fr 30px 1fr 30px 1fr;
-      padding: 50px 45px;
-    }
-    grid-column-gap: 30px;
-    grid-row-gap: 30px;
-    grid-auto-rows: 260px;
-    max-width: 1440px;
-    width: 100%;
-    justify-self: center;
-    box-sizing: border-box;
-
-    &__add-room {
-      visibility: hidden;
-
-      @include desktop {
-        visibility: visible;
-      }
-    }
-
-    &__widget, &__add-room {
-      flex: 0 0 30%;
-      margin-bottom: $large-spacing;
-      margin-right: 1%;
-
-      @supports (display: grid) {
-        margin-bottom: inherit;
-        margin-right: inherit;
-      }
+      visibility: visible;
     }
   }
+
+  &__widget,
+  &__add-room {
+    flex: 0 0 30%;
+    margin-bottom: $large-spacing;
+    margin-right: 1%;
+
+    @supports (display: grid) {
+      margin-bottom: inherit;
+      margin-right: inherit;
+    }
+  }
+}
 </style>
diff --git a/client/src/pages/snapshot/snapshot.vue b/client/src/pages/snapshot/snapshot.vue
index 985ccce3..abe8a84b 100644
--- a/client/src/pages/snapshot/snapshot.vue
+++ b/client/src/pages/snapshot/snapshot.vue
@@ -1,74 +1,63 @@
 <template>
   <div class="snapshot">
-    <header
-      class="snapshot__header"
-    >
-      <snapshot-header
-        :snapshot="snapshot"
-        v-if="snapshot"
-      />
+    <header class="snapshot__header">
+      <snapshot-header :snapshot="snapshot" v-if="snapshot" />
     </header>
 
-    <module
-      :module="snapshot"
-      class="snapshot__module"
-      v-if="snapshot"
-    />
+    <module :module="snapshot" class="snapshot__module" v-if="snapshot" />
   </div>
 </template>
 
 <script>
-  import SNAPSHOT_DETAIL_QUERY from '@/graphql/gql/queries/snapshots/detail.gql';
+import SNAPSHOT_DETAIL_QUERY from '@/graphql/gql/queries/snapshots/detail.gql';
 
-  import Module from '@/components/modules/Module';
-  import SnapshotHeader from '@/components/modules/SnapshotHeader';
+import Module from '@/components/modules/Module';
+import SnapshotHeader from '@/components/modules/SnapshotHeader';
 
-  export default {
-    props: {
-      id: {
-        type: String,
-        default: '',
+export default {
+  props: {
+    id: {
+      type: String,
+      default: '',
+    },
+  },
+
+  components: {
+    SnapshotHeader,
+    Module,
+  },
+
+  apollo: {
+    snapshot: {
+      query: SNAPSHOT_DETAIL_QUERY,
+      variables() {
+        return {
+          id: this.id,
+        };
       },
     },
-
-    components: {
-      SnapshotHeader,
-      Module,
-    },
-
-    apollo: {
-      snapshot: {
-        query: SNAPSHOT_DETAIL_QUERY,
-        variables() {
-          return {
-            id: this.id,
-          };
-        },
-      },
-
-    },
-
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .snapshot {
-    width: 100%;
-    display: grid;
-    grid-template-columns: 1fr 800px 1fr;
-    grid-template-rows: auto auto;
+.snapshot {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 800px 1fr;
+  grid-template-rows: auto auto;
 
-    &__header {
-      background-color: $color-brand-light;
-      grid-column: 1 / span 3;
-      display: flex;
-      justify-content: center;
-    }
-
-    &__module {
-      grid-column: 2;
-    }
+  &__header {
+    background-color: $color-brand-light;
+    grid-column: 1 / span 3;
+    display: flex;
+    justify-content: center;
   }
+
+  &__module {
+    grid-column: 2;
+  }
+}
 </style>
diff --git a/client/src/pages/snapshot/snapshots.vue b/client/src/pages/snapshot/snapshots.vue
index 2f015f07..b3e2d828 100644
--- a/client/src/pages/snapshot/snapshots.vue
+++ b/client/src/pages/snapshot/snapshots.vue
@@ -4,14 +4,8 @@
     <p class="snapshots__details">
       {{ $flavor.textTopic }}: {{ module.topic.title }} - {{ module.metaTitle }}: {{ module.title }}
     </p>
-    <snapshot-team-menu
-      :selected="selectedLink"
-      @select="selectedLink=$event"
-    />
-    <div
-      data-cy="snapshot-list"
-      class="snapshots__list"
-    >
+    <snapshot-team-menu :selected="selectedLink" @select="selectedLink = $event" />
+    <div data-cy="snapshot-list" class="snapshots__list">
       <snapshot-list-item
         :snapshot="snapshot"
         class="snapshots__snapshot"
@@ -23,74 +17,74 @@
 </template>
 
 <script>
-  import SnapshotListItem from '@/components/modules/SnapshotListItem';
-  import MODULE_SNAPSHOTS_QUERY from '@/graphql/gql/queries/moduleSnapshots.gql';
-  import SnapshotTeamMenu from '@/components/modules/SnapshotTeamMenu';
+import SnapshotListItem from '@/components/modules/SnapshotListItem';
+import MODULE_SNAPSHOTS_QUERY from '@/graphql/gql/queries/moduleSnapshots.gql';
+import SnapshotTeamMenu from '@/components/modules/SnapshotTeamMenu';
 
-  const defaultModule = {topic: {}, snapshots: []};
+const defaultModule = { topic: {}, snapshots: [] };
 
-  export default {
-    components: {
-      SnapshotTeamMenu,
-      SnapshotListItem,
-    },
-    data() {
-      return {
-        module: defaultModule,
-        selectedLink: 'mine',
-      };
-    },
+export default {
+  components: {
+    SnapshotTeamMenu,
+    SnapshotListItem,
+  },
+  data() {
+    return {
+      module: defaultModule,
+      selectedLink: 'mine',
+    };
+  },
 
-    computed: {
-      snapshots() {
-        if (this.selectedLink === 'mine') {
-          return this.module.snapshots.filter(snapshot => snapshot.mine);
-        } else {
-          return this.module.snapshots.filter(snapshot => snapshot.shared);
-        }
+  computed: {
+    snapshots() {
+      if (this.selectedLink === 'mine') {
+        return this.module.snapshots.filter((snapshot) => snapshot.mine);
+      } else {
+        return this.module.snapshots.filter((snapshot) => snapshot.shared);
       }
     },
+  },
 
-    apollo: {
-      module: {
-        query: MODULE_SNAPSHOTS_QUERY,
-        variables() {
-          return {
-            slug: this.$route.params.slug,
-          };
-        },
-        error(error, vm, key, type, options) {
-          console.log(error, vm, key, type, options);
-        },
-        update(data) {
-          return data.module || defaultModule;
-        },
+  apollo: {
+    module: {
+      query: MODULE_SNAPSHOTS_QUERY,
+      variables() {
+        return {
+          slug: this.$route.params.slug,
+        };
+      },
+      error(error, vm, key, type, options) {
+        console.log(error, vm, key, type, options);
+      },
+      update(data) {
+        return data.module || defaultModule;
       },
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
+@import '~styles/helpers';
 
-  .snapshots {
-    @include centered(800px);
-    display: flex;
-    flex-direction: column;
-    padding: $section-spacing 0;
-    align-items: flex-start;
+.snapshots {
+  @include centered(800px);
+  display: flex;
+  flex-direction: column;
+  padding: $section-spacing 0;
+  align-items: flex-start;
 
-    &__details {
-      @include regular-text;
-      margin-bottom: $large-spacing;
-    }
-
-    &__list {
-      width: 100%;
-    }
-
-    &__snapshot {
-      @include table-row;
-    }
+  &__details {
+    @include regular-text;
+    margin-bottom: $large-spacing;
   }
+
+  &__list {
+    width: 100%;
+  }
+
+  &__snapshot {
+    @include table-row;
+  }
+}
 </style>
diff --git a/client/src/pages/start.vue b/client/src/pages/start.vue
index ebf7ba8e..835d2892 100644
--- a/client/src/pages/start.vue
+++ b/client/src/pages/start.vue
@@ -1,21 +1,9 @@
 <template>
   <div class="start-page">
     <div class="start-page__content">
-      <div
-        class="start-page__modules start-sections"
-        data-cy="start-modules-list"
-      >
-        <h2
-          class="start-page__heading"
-          data-cy="start-page-heading"
-        >
-          Letzte {{ $flavor.textModules }}
-        </h2>
-        <h3
-          class="start-page__no-modules"
-          data-cy="no-modules-yet"
-          v-if="!me.recentModules.length"
-        >
+      <div class="start-page__modules start-sections" data-cy="start-modules-list">
+        <h2 class="start-page__heading" data-cy="start-page-heading">Letzte {{ $flavor.textModules }}</h2>
+        <h3 class="start-page__no-modules" data-cy="no-modules-yet" v-if="!me.recentModules.length">
           Sie haben sich noch kein {{ $flavor.textModule }} angeschaut. Legen Sie jetzt los!
         </h3>
         <div class="start-page__modules-list">
@@ -29,215 +17,138 @@
             :key="index"
           />
         </div>
-        <router-link
-          :to="topicRoute"
-          tag="div"
-          class="button"
-        >
-          Alle {{ $flavor.textModules }} anzeigen
-        </router-link>
+        <router-link :to="topicRoute" tag="div" class="button"> Alle {{ $flavor.textModules }} anzeigen </router-link>
       </div>
-      <div
-        class="start-page__news news"
-        data-cy="news-teasers"
-        v-if="!me.readOnly"
-      >
-        <h2 class="start-page__heading">
-          News
-        </h2>
+      <div class="start-page__news news" data-cy="news-teasers" v-if="!me.readOnly">
+        <h2 class="start-page__heading">News</h2>
         <div class="news__list">
-          <news-teaser
-            :teaser="teaser"
-            v-for="teaser in teasers"
-            :key="teaser.id"
-          />
+          <news-teaser :teaser="teaser" v-for="teaser in teasers" :key="teaser.id" />
         </div>
 
-        <router-link
-          :to="{name: 'news'}"
-          class="button"
-        >
-          Alle News anzeigen
-        </router-link>
+        <router-link :to="{ name: 'news' }" class="button"> Alle News anzeigen </router-link>
       </div>
 
       <div class="start-page__onboarding">
-        <h2 class="start-page__heading">
-          Kennen Sie schon alle Bereiche von {{ $flavor.textAppName }}?
-        </h2>
-        <p class="start-page__paragraph">
-          Schauen Sie sich jetzt die Einführung zu {{ $flavor.textAppName }} an.
-        </p>
-        <router-link
-          :to="{name: 'onboarding-start'}"
-          class="button button--primary"
-        >
-          Los geht's
-        </router-link>
+        <h2 class="start-page__heading">Kennen Sie schon alle Bereiche von {{ $flavor.textAppName }}?</h2>
+        <p class="start-page__paragraph">Schauen Sie sich jetzt die Einführung zu {{ $flavor.textAppName }} an.</p>
+        <router-link :to="{ name: 'onboarding-start' }" class="button button--primary"> Los geht's </router-link>
       </div>
     </div>
   </div>
 </template>
 <script>
-  import NewsTeaser from '@/components/news/NewsTeaser.vue';
-  import ModuleTeaser from '@/components/modules/ModuleTeaser';
+import NewsTeaser from '@/components/news/NewsTeaser.vue';
+import ModuleTeaser from '@/components/modules/ModuleTeaser';
 
-  import meQuery from '@/mixins/me';
-  import news from '@/mixins/news';
+import meQuery from '@/mixins/me';
+import news from '@/mixins/news';
 
-  export default {
+export default {
+  mixins: [meQuery, news],
 
-    mixins: [meQuery, news],
+  components: {
+    NewsTeaser,
+    ModuleTeaser,
+  },
 
-    components: {
-      NewsTeaser,
-      ModuleTeaser,
+  computed: {
+    moduleRoute() {
+      if (this.me.lastModule && this.me.lastModule.slug) {
+        return `/module/${this.me.lastModule.slug}`;
+      }
+      return '/book/topic/berufliche-grundbildung';
     },
-
-    computed: {
-      moduleRoute() {
-        if (this.me.lastModule && this.me.lastModule.slug) {
-          return `/module/${this.me.lastModule.slug}`;
-        }
-        return '/book/topic/berufliche-grundbildung';
-      },
-      moduleText() {
-        if (this.me.lastModule && this.me.lastModule.slug) {
-          return `Aktuelles ${this.$flavor.textModule} anzeigen`;
-        }
-        return 'Alle Inhalte anzeigen';
-      },
-      teasers() {
-        return this.newsTeasers.slice(0, 2);
-      },
+    moduleText() {
+      if (this.me.lastModule && this.me.lastModule.slug) {
+        return `Aktuelles ${this.$flavor.textModule} anzeigen`;
+      }
+      return 'Alle Inhalte anzeigen';
     },
-
-  };
+    teasers() {
+      return this.newsTeasers.slice(0, 2);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .start-page {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    @supports (display: grid) {
-      display: grid;
-      justify-content: center;
-    }
-    grid-template-rows: auto 1fr auto;
-    min-height: 100vh;
-    width: 100vw;
+.start-page {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  @supports (display: grid) {
+    display: grid;
+    justify-content: center;
+  }
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+  width: 100vw;
+  box-sizing: border-box;
+
+  &__title {
+    color: $color-brand;
+    text-align: center;
+    border-bottom: 1px solid $color-silver-light;
+    padding-bottom: 30px;
+    margin-left: 30px;
+    margin-right: 30px;
+    margin-bottom: 60px;
+  }
+
+  &__heading {
+    width: 100%;
+    @include meta-title;
+  }
+
+  &__paragraph {
+    @include regular-text;
+    margin-bottom: $large-spacing;
+  }
+
+  &__content {
+    padding-top: 2 * $large-spacing;
     box-sizing: border-box;
-
-    &__title {
-      color: $color-brand;
-      text-align: center;
-      border-bottom: 1px solid $color-silver-light;
-      padding-bottom: 30px;
-      margin-left: 30px;
-      margin-right: 30px;
-      margin-bottom: 60px;
-    }
-
-    &__heading {
-      width: 100%;
-      @include meta-title;
-    }
-
-    &__paragraph {
-      @include regular-text;
-      margin-bottom: $large-spacing;
-    }
-
-    &__content {
-      padding-top: 2*$large-spacing;
-      box-sizing: border-box;
-      max-width: 100%;
-      @include desktop {
-        max-width: $screen-width;
-        margin: 0 auto;
-      }
-    }
-
-    &__no-modules {
-      @include heading-3;
-      margin-bottom: 0;
-    }
-
-    &__modules {
-      margin-bottom: $section-spacing;
-    }
-
-    &__modules-list {
-      display: -ms-grid;
-      -ms-grid-column-align: center;
-      -ms-grid-columns: 1fr 1fr 1fr;
-      width: 100%;
-      margin-bottom: $large-spacing;
-
-      @supports (display: grid) {
-        display: grid;
-      }
-      @include desktop {
-        grid-template-columns: 1fr 1fr 1fr;
-        grid-template-rows: max-content;
-      }
-
-      grid-row-gap: 15px;
-      grid-column-gap: 50px;
-      justify-items: start;
-      align-items: center;
-
-      /*
-       * For IE10+
-       */
-      & > :nth-child(1) {
-        -ms-grid-row: 1;
-        -ms-grid-column: 1;
-      }
-
-      & > :nth-child(2) {
-        -ms-grid-row: 1;
-        -ms-grid-column: 2;
-      }
-
-      & > :nth-child(3) {
-        -ms-grid-row: 1;
-        -ms-grid-column: 3;
-      }
-    }
-
-    &__news {
-      margin-bottom: $section-spacing;
+    max-width: 100%;
+    @include desktop {
+      max-width: $screen-width;
+      margin: 0 auto;
     }
   }
 
-  .news {
-    padding-bottom: $large-spacing;
+  &__no-modules {
+    @include heading-3;
+    margin-bottom: 0;
+  }
 
-    &__list {
-      display: flex;
+  &__modules {
+    margin-bottom: $section-spacing;
+  }
 
-      grid-row-gap: $large-spacing;
-      grid-column-gap: $large-spacing;
+  &__modules-list {
+    display: -ms-grid;
+    -ms-grid-column-align: center;
+    -ms-grid-columns: 1fr 1fr 1fr;
+    width: 100%;
+    margin-bottom: $large-spacing;
 
-      margin-bottom: $large-spacing;
-
-      @supports (display: grid) {
-        display: grid;
-        grid-template-columns: 1fr;
-      }
-
-      @include desktop {
-        grid-template-columns: repeat(2, 1fr);
-      }
+    @supports (display: grid) {
+      display: grid;
+    }
+    @include desktop {
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-rows: max-content;
     }
 
+    grid-row-gap: 15px;
+    grid-column-gap: 50px;
+    justify-items: start;
+    align-items: center;
+
     /*
-     * For IE10+
-     */
+       * For IE10+
+       */
     & > :nth-child(1) {
       -ms-grid-row: 1;
       -ms-grid-column: 1;
@@ -252,40 +163,85 @@
       -ms-grid-row: 1;
       -ms-grid-column: 3;
     }
+  }
 
-    & > :nth-child(4) {
-      -ms-grid-row: 1;
-      -ms-grid-column: 4;
+  &__news {
+    margin-bottom: $section-spacing;
+  }
+}
+
+.news {
+  padding-bottom: $large-spacing;
+
+  &__list {
+    display: flex;
+
+    grid-row-gap: $large-spacing;
+    grid-column-gap: $large-spacing;
+
+    margin-bottom: $large-spacing;
+
+    @supports (display: grid) {
+      display: grid;
+      grid-template-columns: 1fr;
     }
 
     @include desktop {
-      /*padding-left: 120px;*/
-      /*padding-right: 120px;*/
-    }
-
-    &__title {
-      font-family: $sans-serif-font-family;
-      font-weight: $font-weight-bold;
-      text-transform: uppercase;
-      font-size: 2.1875rem;
-      padding-bottom: 24px;
-      text-align: center;
-      color: inherit;
-      margin-bottom: 0;
-    }
-
-    &__more {
-      color: $color-white;
-      font-family: $sans-serif-font-family;
-      line-height: $default-line-height;
-      padding-left: $medium-spacing;
-      font-weight: $font-weight-bold;
-      text-align: center;
-
-      @include desktop {
-        text-align: left;
-        border-left: 1px solid $color-silver-light;
-      }
+      grid-template-columns: repeat(2, 1fr);
     }
   }
+
+  /*
+     * For IE10+
+     */
+  & > :nth-child(1) {
+    -ms-grid-row: 1;
+    -ms-grid-column: 1;
+  }
+
+  & > :nth-child(2) {
+    -ms-grid-row: 1;
+    -ms-grid-column: 2;
+  }
+
+  & > :nth-child(3) {
+    -ms-grid-row: 1;
+    -ms-grid-column: 3;
+  }
+
+  & > :nth-child(4) {
+    -ms-grid-row: 1;
+    -ms-grid-column: 4;
+  }
+
+  @include desktop {
+    /*padding-left: 120px;*/
+    /*padding-right: 120px;*/
+  }
+
+  &__title {
+    font-family: $sans-serif-font-family;
+    font-weight: $font-weight-bold;
+    text-transform: uppercase;
+    font-size: 2.1875rem;
+    padding-bottom: 24px;
+    text-align: center;
+    color: inherit;
+    margin-bottom: 0;
+  }
+
+  &__more {
+    color: $color-white;
+    font-family: $sans-serif-font-family;
+    line-height: $default-line-height;
+    padding-left: $medium-spacing;
+    font-weight: $font-weight-bold;
+    text-align: center;
+
+    @include desktop {
+      text-align: left;
+      border-left: 1px solid $color-silver-light;
+    }
+  }
+}
 </style>
diff --git a/client/src/pages/studentSubmission.vue b/client/src/pages/studentSubmission.vue
index 952ef10a..d6c4d59e 100644
--- a/client/src/pages/studentSubmission.vue
+++ b/client/src/pages/studentSubmission.vue
@@ -8,15 +8,8 @@
       <h2>Ergebnis von {{ fullName }}</h2>
       <!-- eslint-disable-next-line vue/no-v-html -->
       <p v-html="text" />
-      <p
-        class="article-content__document"
-        v-if="studentSubmission.document && studentSubmission.document.length > 0"
-      >
-        <a
-          :href="studentSubmission.document"
-          class="entry-document__link link"
-          target="_blank"
-        >
+      <p class="article-content__document" v-if="studentSubmission.document && studentSubmission.document.length > 0">
+        <a :href="studentSubmission.document" class="entry-document__link link" target="_blank">
           <student-submission-document :document="studentSubmission.document" />
         </a>
       </p>
@@ -34,110 +27,109 @@
         @saveInput="saveInput"
         @reopen="reopen"
       >
-        <emoji-bar
-          class="feedback-submission__emojis emojis"
-          v-if="!final"
-          @add-emoji="addEmoji"
-        />
+        <emoji-bar class="feedback-submission__emojis emojis" v-if="!final" @add-emoji="addEmoji" />
       </submission-form>
     </div>
   </div>
 </template>
 
 <script>
-  import {newLineToParagraph} from '@/helpers/text';
-  import debounce from 'lodash/debounce';
-  import cloneDeep from 'lodash/cloneDeep';
-  import log from 'loglevel';
+import { newLineToParagraph } from '@/helpers/text';
+import debounce from 'lodash/debounce';
+import cloneDeep from 'lodash/cloneDeep';
+import log from 'loglevel';
 
-  import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
-  import STUDENT_SUBMISSIONS_QUERY from '@/graphql/gql/queries/studentSubmissionQuery.gql';
-  import UPDATE_FEEDBACK_MUTATION from '@/graphql/gql/mutations/updateFeedback.gql';
-  import UPDATE_FEEDBACK_WITH_TEXT_MUTATION from '@/graphql/gql/mutations/updateFeedbackWithText.gql';
-  import SubmissionForm from '@/components/content-blocks/assignment/SubmissionForm.vue';
+import StudentSubmissionDocument from '@/components/StudentSubmissionDocument';
+import STUDENT_SUBMISSIONS_QUERY from '@/graphql/gql/queries/studentSubmissionQuery.gql';
+import UPDATE_FEEDBACK_MUTATION from '@/graphql/gql/mutations/updateFeedback.gql';
+import UPDATE_FEEDBACK_WITH_TEXT_MUTATION from '@/graphql/gql/mutations/updateFeedbackWithText.gql';
+import SubmissionForm from '@/components/content-blocks/assignment/SubmissionForm.vue';
 
-  import me from '@/mixins/me';
-  import EmojiBar from '@/components/ui/EmojiBar';
+import me from '@/mixins/me';
+import EmojiBar from '@/components/ui/EmojiBar';
 
-  export default {
+export default {
+  mixins: [me],
+  components: {
+    EmojiBar,
+    StudentSubmissionDocument,
+    SubmissionForm,
+  },
 
-    mixins: [me],
-    components: {
-      EmojiBar,
-      StudentSubmissionDocument,
-      SubmissionForm,
-    },
-
-    data() {
-      return {
-        studentSubmission: {
-          assignment: {
-            title: '',
-          },
-          student: {
-            firstName: '',
-            lastName: '',
-          },
-          text: '',
-          document: '',
-          submissionFeedback: {
-            text: '',
-            final: false,
-          },
+  data() {
+    return {
+      studentSubmission: {
+        assignment: {
+          title: '',
         },
-        unsaved: false,
-        saving: 0,
-      };
-    },
-
-    computed: {
-      final() {
-        return !!this.studentSubmission && this.studentSubmission.final;
-      },
-      text() {
-        return newLineToParagraph(this.studentSubmission.text);
-      },
-      fullName() {
-        return `${this.studentSubmission.student.firstName} ${this.studentSubmission.student.lastName}`;
-      },
-      feedback() {
-        return this.studentSubmission.submissionFeedback ? this.studentSubmission.submissionFeedback : {
+        student: {
+          firstName: '',
+          lastName: '',
+        },
+        text: '',
+        document: '',
+        submissionFeedback: {
           text: '',
           final: false,
-        };
+        },
       },
-      readOnly() {
-        return this.me.readOnly || this.me.selectedClass.readOnly;
-      }
-    },
+      unsaved: false,
+      saving: 0,
+    };
+  },
 
-    apollo: {
-      studentSubmission() {
-        return {
-          query: STUDENT_SUBMISSIONS_QUERY,
-          variables() {
-            return {
-              id: this.$route.params.id,
-            };
-          },
-          result({data: {studentSubmission}}) {
-            if (!studentSubmission.submissionFeedback) { // create something for the cache to find
-              this.create();
-            }
-            this.studentSubmission = cloneDeep(studentSubmission); // we don't want to update the value when the server updates
-          },
-        };
-      },
+  computed: {
+    final() {
+      return !!this.studentSubmission && this.studentSubmission.final;
     },
+    text() {
+      return newLineToParagraph(this.studentSubmission.text);
+    },
+    fullName() {
+      return `${this.studentSubmission.student.firstName} ${this.studentSubmission.student.lastName}`;
+    },
+    feedback() {
+      return this.studentSubmission.submissionFeedback
+        ? this.studentSubmission.submissionFeedback
+        : {
+            text: '',
+            final: false,
+          };
+    },
+    readOnly() {
+      return this.me.readOnly || this.me.selectedClass.readOnly;
+    },
+  },
 
-    methods: {
-      addEmoji(emoji) {
-        const feedbackText = this.feedback.text + emoji;
-        this.updateFeedbackText(feedbackText);
-      },
-      _save: debounce(function () {
-        this.saving++;
-        this.$apollo.mutate({
+  apollo: {
+    studentSubmission() {
+      return {
+        query: STUDENT_SUBMISSIONS_QUERY,
+        variables() {
+          return {
+            id: this.$route.params.id,
+          };
+        },
+        result({ data: { studentSubmission } }) {
+          if (!studentSubmission.submissionFeedback) {
+            // create something for the cache to find
+            this.create();
+          }
+          this.studentSubmission = cloneDeep(studentSubmission); // we don't want to update the value when the server updates
+        },
+      };
+    },
+  },
+
+  methods: {
+    addEmoji(emoji) {
+      const feedbackText = this.feedback.text + emoji;
+      this.updateFeedbackText(feedbackText);
+    },
+    _save: debounce(function () {
+      this.saving++;
+      this.$apollo
+        .mutate({
           mutation: UPDATE_FEEDBACK_MUTATION,
           variables: {
             input: {
@@ -148,138 +140,146 @@
             },
           },
           update: this.updateCache,
-        }).then(() => {
+        })
+        .then(() => {
           this.saving--;
           if (this.saving === 0) {
             this.unsaved = false;
           }
         });
-      }, 500),
-      saveInput: function (feedbackText) {
-        this.unsaved = true;
-        /*
+    }, 500),
+    saveInput: function (feedbackText) {
+      this.unsaved = true;
+      /*
           We update the assignment on this component, so the changes are reflected on it. The server does not return
           the updated entity, to prevent the UI to update when the user is entering his input
          */
-        this.updateFeedbackText(feedbackText);
-        this._save();
-      },
-      update({withText, text, final}) {
-        if (this.readOnly) {
-          log.debug('read-only');
-          return;
-        }
-        let mutation = withText ? UPDATE_FEEDBACK_WITH_TEXT_MUTATION : UPDATE_FEEDBACK_MUTATION;
-        this.$apollo.mutate({
-          mutation,
-          variables: {
-            input: {
-              submissionFeedback: {
-                studentSubmission: this.studentSubmission.id,
-                text: text,
-                final: final,
-              },
+      this.updateFeedbackText(feedbackText);
+      this._save();
+    },
+    update({ withText, text, final }) {
+      if (this.readOnly) {
+        log.debug('read-only');
+        return;
+      }
+      let mutation = withText ? UPDATE_FEEDBACK_WITH_TEXT_MUTATION : UPDATE_FEEDBACK_MUTATION;
+      this.$apollo.mutate({
+        mutation,
+        variables: {
+          input: {
+            submissionFeedback: {
+              studentSubmission: this.studentSubmission.id,
+              text: text,
+              final: final,
             },
           },
-          update: this.updateCache,
-        });
-      },
-      create() {
-        log.debug('create');
-        this.update({
-          withText: true,
-          text: '',
-          final: false,
-        });
-      },
-      turnIn() {
-        log.debug('turnIn');
-        this.update({
-          withText: true,
-          text: this.studentSubmission.submissionFeedback.text,
-          final: true,
-        });
-      },
-      reopen() {
-        log.debug('reopen');
-        if (!this.studentSubmission.id) {
-          return;
-        }
-
-        this.update({
-          withText: false,
-          text: this.studentSubmission.submissionFeedback.text,
-          final: false,
-        });
-      },
-      updateCache(store, {data: {updateSubmissionFeedback: {successful, updatedSubmissionFeedback}}}) {
-        try {
-          if (successful) {
-            const query = STUDENT_SUBMISSIONS_QUERY;
-            const variables = {
-              id: this.studentSubmission.id,
-            };
-            const { studentSubmission } = store.readQuery({query, variables});
-
-            if (studentSubmission) {
-              let text;
-
-              if (updatedSubmissionFeedback.text !== undefined) {
-                // text is only being set on create and on turning in, then we'll update the cache with it. Otherwise, we'll trust the local state, as to not overwrite the input field
-                text = updatedSubmissionFeedback.text;
-              } else {
-                text = this.studentSubmission.submissionFeedback ? this.studentSubmission.submissionFeedback.text : '';
-              }
-
-              const submissionFeedback = Object.assign({}, studentSubmission.submissionFeedback, {
-                id: updatedSubmissionFeedback.id,
-                final: updatedSubmissionFeedback.final,
-                '__typename': 'SubmissionFeedbackNode',
-                text
-              });
-
-              const data = {
-                studentSubmission: {
-                  ...studentSubmission,
-                  submissionFeedback
-                }
-              };
-
-              store.writeQuery({query, variables, data});
-            }
-          }
-        } catch (e) {
-          console.error(e);
-          // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
-        }
-      },
-      updateFeedbackText(text) {
-        this.studentSubmission = Object.assign({}, this.studentSubmission, {
-          submissionFeedback: Object.assign({}, this.studentSubmission.submissionFeedback, {text: text}),
-        });
-      },
+        },
+        update: this.updateCache,
+      });
     },
-  };
+    create() {
+      log.debug('create');
+      this.update({
+        withText: true,
+        text: '',
+        final: false,
+      });
+    },
+    turnIn() {
+      log.debug('turnIn');
+      this.update({
+        withText: true,
+        text: this.studentSubmission.submissionFeedback.text,
+        final: true,
+      });
+    },
+    reopen() {
+      log.debug('reopen');
+      if (!this.studentSubmission.id) {
+        return;
+      }
+
+      this.update({
+        withText: false,
+        text: this.studentSubmission.submissionFeedback.text,
+        final: false,
+      });
+    },
+    updateCache(
+      store,
+      {
+        data: {
+          updateSubmissionFeedback: { successful, updatedSubmissionFeedback },
+        },
+      }
+    ) {
+      try {
+        if (successful) {
+          const query = STUDENT_SUBMISSIONS_QUERY;
+          const variables = {
+            id: this.studentSubmission.id,
+          };
+          const { studentSubmission } = store.readQuery({ query, variables });
+
+          if (studentSubmission) {
+            let text;
+
+            if (updatedSubmissionFeedback.text !== undefined) {
+              // text is only being set on create and on turning in, then we'll update the cache with it. Otherwise, we'll trust the local state, as to not overwrite the input field
+              text = updatedSubmissionFeedback.text;
+            } else {
+              text = this.studentSubmission.submissionFeedback ? this.studentSubmission.submissionFeedback.text : '';
+            }
+
+            const submissionFeedback = Object.assign({}, studentSubmission.submissionFeedback, {
+              id: updatedSubmissionFeedback.id,
+              final: updatedSubmissionFeedback.final,
+              __typename: 'SubmissionFeedbackNode',
+              text,
+            });
+
+            const data = {
+              studentSubmission: {
+                ...studentSubmission,
+                submissionFeedback,
+              },
+            };
+
+            store.writeQuery({ query, variables, data });
+          }
+        }
+      } catch (e) {
+        console.error(e);
+        // Query did not exist in the cache, and apollo throws a generic Error. Do nothing
+      }
+    },
+    updateFeedbackText(text) {
+      this.studentSubmission = Object.assign({}, this.studentSubmission, {
+        submissionFeedback: Object.assign({}, this.studentSubmission.submissionFeedback, { text: text }),
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .submission-page {
-    &__content {
-      margin-top: 1.5*$large-spacing;
-    }
-
-    &__feedback {
-      margin-top: $large-spacing;
-    }
+.submission-page {
+  &__content {
+    margin-top: 1.5 * $large-spacing;
   }
 
-  .emojis {
-    font-size: toRem(32px);
-
-    &__emoji {
-      cursor: pointer;
-    }
+  &__feedback {
+    margin-top: $large-spacing;
   }
+}
+
+.emojis {
+  font-size: toRem(32px);
+
+  &__emoji {
+    cursor: pointer;
+  }
+}
 </style>
diff --git a/client/src/pages/styleguide.vue b/client/src/pages/styleguide.vue
index 01ee435d..d65f8c98 100644
--- a/client/src/pages/styleguide.vue
+++ b/client/src/pages/styleguide.vue
@@ -1,69 +1,54 @@
 <template>
   <div class="style-guide">
     <h1>Styleguide</h1>
-    <h1 class="style-guide__main-title">
-      Main Title - 64px Bold - 700
-    </h1>
-    <h2 class="style-guide__heading-1">
-      Title 1 - 44px Semibold - 600
-    </h2>
-    <h3 class="style-guide__heading-2">
-      Title 2 - 34px Semibold- 600
-    </h3>
-    <h4 class="style-guide__heading-3">
-      Title 3 - 22px Semibold - 600
-    </h4>
-    <h5 class="style-guide__heading-4">
-      Title 4 - 18px Semibold - 600
-    </h5>
-    <p class="style-guide__regular-text">
-      Text - 18px Regular - 400
-    </p>
-    <p class="style-guide__small-text">
-      Text Small -  16px Regular - 400
-    </p>
-    <h2 class="style-guide__meta-title">
-      Meta Title - 42px Book
-    </h2>
+    <h1 class="style-guide__main-title">Main Title - 64px Bold - 700</h1>
+    <h2 class="style-guide__heading-1">Title 1 - 44px Semibold - 600</h2>
+    <h3 class="style-guide__heading-2">Title 2 - 34px Semibold- 600</h3>
+    <h4 class="style-guide__heading-3">Title 3 - 22px Semibold - 600</h4>
+    <h5 class="style-guide__heading-4">Title 4 - 18px Semibold - 600</h5>
+    <p class="style-guide__regular-text">Text - 18px Regular - 400</p>
+    <p class="style-guide__small-text">Text Small - 16px Regular - 400</p>
+    <h2 class="style-guide__meta-title">Meta Title - 42px Book</h2>
     <p class="style-guide__lead-paragraph">
-      Lead paragraph - 26px<br>
-      Vor wenigen Monaten haben Sie Ihren ersten Lohn bekommen – ein befriedigendes Gefühl, für seine Arbeit Geld zu erhalten.
+      Lead paragraph - 26px<br />
+      Vor wenigen Monaten haben Sie Ihren ersten Lohn bekommen – ein befriedigendes Gefühl, für seine Arbeit Geld zu
+      erhalten.
     </p>
   </div>
 </template>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
-  .style-guide {
-    &__main-title {
-      @include main-title;
-    }
-
-    &__heading-1 {
-      @include heading-1;
-    }
-    &__heading-2 {
-      @include heading-2;
-    }
-    &__heading-3 {
-      @include heading-3;
-    }
-    &__heading-4 {
-      @include heading-4;
-    }
-    &__regular-text {
-      @include regular-text;
-    }
-    &__small-text {
-      @include small-text;
-    }
-    &__meta-title {
-      @include meta-title;
-    }
-    &__lead-paragraph {
-      @include lead-paragraph;
-    }
+.style-guide {
+  &__main-title {
+    @include main-title;
   }
+
+  &__heading-1 {
+    @include heading-1;
+  }
+  &__heading-2 {
+    @include heading-2;
+  }
+  &__heading-3 {
+    @include heading-3;
+  }
+  &__heading-4 {
+    @include heading-4;
+  }
+  &__regular-text {
+    @include regular-text;
+  }
+  &__small-text {
+    @include small-text;
+  }
+  &__meta-title {
+    @include meta-title;
+  }
+  &__lead-paragraph {
+    @include lead-paragraph;
+  }
+}
 </style>
diff --git a/client/src/pages/submissions.vue b/client/src/pages/submissions.vue
index b3cb8618..071f8fe3 100644
--- a/client/src/pages/submissions.vue
+++ b/client/src/pages/submissions.vue
@@ -1,75 +1,68 @@
 <template>
   <div class="submissions-page">
-    <h2 class="submissions-page__heading">
-      Aufgabe
-    </h2>
-    <assignment-with-submissions
-      :assignment="assignment"
-      v-if="!$apollo.queries.assignment.loading"
-      @back="back"
-    />
+    <h2 class="submissions-page__heading">Aufgabe</h2>
+    <assignment-with-submissions :assignment="assignment" v-if="!$apollo.queries.assignment.loading" @back="back" />
   </div>
 </template>
 
 <script>
-  import AssignmentWithSubmissions from '@/components/AssignmentWithSubmissions';
-  import ASSIGNMENT_WITH_SUBMISSIONS_QUERY from '@/graphql/gql/queries/assignmentWithSubmissionsQuery.gql';
+import AssignmentWithSubmissions from '@/components/AssignmentWithSubmissions';
+import ASSIGNMENT_WITH_SUBMISSIONS_QUERY from '@/graphql/gql/queries/assignmentWithSubmissionsQuery.gql';
 
-  export default {
-    components: {
-      AssignmentWithSubmissions,
-    },
+export default {
+  components: {
+    AssignmentWithSubmissions,
+  },
 
-    apollo: {
-      assignment() {
-        return {
-          query: ASSIGNMENT_WITH_SUBMISSIONS_QUERY,
-          variables() {
-            return {
-              id: this.$route.params.id,
-            };
-          },
-          fetchPolicy: 'no-cache',
-          pollInterval: 30000,
-        };
-      },
-    },
-
-    data() {
+  apollo: {
+    assignment() {
       return {
-        assignment: {
-          submissions: [],
+        query: ASSIGNMENT_WITH_SUBMISSIONS_QUERY,
+        variables() {
+          return {
+            id: this.$route.params.id,
+          };
         },
+        fetchPolicy: 'no-cache',
+        pollInterval: 30000,
       };
     },
+  },
 
-    methods: {
-      back() {
-        this.$router.go(-1);
+  data() {
+    return {
+      assignment: {
+        submissions: [],
       },
+    };
+  },
+
+  methods: {
+    back() {
+      this.$router.go(-1);
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_mixins.scss";
-  @import "@/styles/_variables.scss";
+@import '@/styles/_mixins.scss';
+@import '@/styles/_variables.scss';
 
-  .submissions-page {
-    display: grid;
-    width: 100%;
-    max-width: $screen-width;
+.submissions-page {
+  display: grid;
+  width: 100%;
+  max-width: $screen-width;
 
-    grid-template-rows: auto 1fr;
+  grid-template-rows: auto 1fr;
 
-    margin-top: 2rem;
-    margin-left: $large-spacing;
-    margin-right: $large-spacing;
-
-    @include desktop {
-      margin-left: $medium-spacing;
-      margin-right: $medium-spacing;
-    }
+  margin-top: 2rem;
+  margin-left: $large-spacing;
+  margin-right: $large-spacing;
 
+  @include desktop {
+    margin-left: $medium-spacing;
+    margin-right: $medium-spacing;
   }
+}
 </style>
diff --git a/client/src/pages/survey.vue b/client/src/pages/survey.vue
index 82d9f0e4..62aff446 100644
--- a/client/src/pages/survey.vue
+++ b/client/src/pages/survey.vue
@@ -5,279 +5,282 @@
     </h1>
     <div id="survey" />
 
-    <solution
-      :value="solution"
-      v-if="showSolution"
-    />
+    <solution :value="solution" v-if="showSolution" />
     <div v-if="surveyComplete">
-      <a
-        class="button button--primary"
-        @click="reopen"
-      >Übung bearbeiten</a>
+      <a class="button button--primary" @click="reopen">Übung bearbeiten</a>
     </div>
   </div>
 </template>
 
 <script>
-  import '@/styles/survey.modern.css';
-  import '@/styles/survey.reset.css';
-  import {css} from '@/survey.config';
-  import gql from 'graphql-tag';
-  import {Model, StylesManager} from 'survey-knockout';
-  // we are switching to the knockout version because the Vue version only works with Vue 2 (as of July 2022)
+import '@/styles/survey.modern.css';
+import '@/styles/survey.reset.css';
+import { css } from '@/survey.config';
+import gql from 'graphql-tag';
+import { Model, StylesManager } from 'survey-knockout';
+// we are switching to the knockout version because the Vue version only works with Vue 2 (as of July 2022)
 
-  import SURVEY_QUERY from '@/graphql/gql/queries/surveyQuery.gql';
-  import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
+import SURVEY_QUERY from '@/graphql/gql/queries/surveyQuery.gql';
+import UPDATE_ANSWER from '@/graphql/gql/mutations/updateAnswer.gql';
 
-  import {extractSurveySolutions} from '@/helpers/survey-solutions';
-  import {isTeacher} from '@/helpers/is-teacher';
+import { extractSurveySolutions } from '@/helpers/survey-solutions';
+import { isTeacher } from '@/helpers/is-teacher';
 
-  import {meQuery} from '@/graphql/queries';
+import { meQuery } from '@/graphql/queries';
 
-  const Solution = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution');
-  StylesManager.applyTheme('modern');
+const Solution = () => import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/Solution');
+StylesManager.applyTheme('modern');
 
-  const MODULE_QUERY = gql`
-    query ModuleSolutions($slug: String) {
-        module(slug: $slug) {
-            solutionsEnabled
-            slug
-        }
+const MODULE_QUERY = gql`
+  query ModuleSolutions($slug: String) {
+    module(slug: $slug) {
+      solutionsEnabled
+      slug
     }
+  }
 `;
 
-  export default {
-    props: ['id'],
-    components: {
-      Solution,
-    },
+export default {
+  props: ['id'],
+  components: {
+    Solution,
+  },
 
-    data() {
+  data() {
+    return {
+      survey: this.initSurvey(),
+      currentPage: null,
+      surveyData: null,
+      title: '',
+      module: {},
+      completed: false,
+      me: {
+        permissions: [],
+      },
+      saveDisabled: false,
+    };
+  },
+
+  computed: {
+    surveyComplete() {
+      return this.survey && this.survey.isCompleted;
+    },
+    showSolution() {
+      return (this.module.solutionsEnabled || this.isTeacher) && !this.survey.isCompleted;
+    },
+    solution() {
+      // todo: should this be done inside of Solution.vue?
       return {
-        survey: this.initSurvey(),
-        currentPage: null,
-        surveyData: null,
-        title: '',
-        module: {},
-        completed: false,
-        me: {
-          permissions: [],
-        },
-        saveDisabled: false,
-      };
-    },
-
-    computed: {
-      surveyComplete() {
-        return this.survey && this.survey.isCompleted;
-      },
-      showSolution() {
-        return (this.module.solutionsEnabled || this.isTeacher) && !this.survey.isCompleted;
-      },
-      solution() {
-        // todo: should this be done inside of Solution.vue?
-        return {
-          text: this.answers.reduce((previous, answer) => {
-            if (!answer.answer) {
-              return previous;
-            }
-            if (answer.type === 'matrix' || answer.type === 'checkbox') {
-              // wrap all the answers inside li tags and convert to a single string
-              const answerText = answer.answer.map(a => `<li class="solution-text__list-item">${a}</li>`).join('');
-              return `
+        text: this.answers.reduce((previous, answer) => {
+          if (!answer.answer) {
+            return previous;
+          }
+          if (answer.type === 'matrix' || answer.type === 'checkbox') {
+            // wrap all the answers inside li tags and convert to a single string
+            const answerText = answer.answer.map((a) => `<li class="solution-text__list-item">${a}</li>`).join('');
+            return `
             ${previous}
             <h2 class="solution-text__heading">${answer.title}</h2>
             <ul class="solution-text__answer solution-text__list">${answerText}</ul>
             `;
-            } else {
-              return `
+          } else {
+            return `
             ${previous}
              <h2 class="solution-text__heading">${answer.title}</h2>
              <p class="solution-text__answer">${answer.answer}</p>
              `;
-            }
-          }, ''),
-        };
-      },
-      answers() {
-        return this.currentPage && this.currentPage.elements
-          ? this.currentPage.elements.reduce(extractSurveySolutions, [])
-          : [];
-      },
-      isTeacher() {
-        return isTeacher(this);
-      },
+          }
+        }, ''),
+      };
     },
+    answers() {
+      return this.currentPage && this.currentPage.elements
+        ? this.currentPage.elements.reduce(extractSurveySolutions, [])
+        : [];
+    },
+    isTeacher() {
+      return isTeacher(this);
+    },
+  },
 
-    mounted() {
-      if(this.surveyData) {
-        this.loadSurveyFromServer(this.surveyData);
+  mounted() {
+    if (this.surveyData) {
+      this.loadSurveyFromServer(this.surveyData);
+    }
+  },
+
+  destroyed() {},
+
+  methods: {
+    initSurvey(data, answers) {
+      let survey = new Model(data);
+      const flatAnswers = {};
+      for (let k in answers) {
+        flatAnswers[k] = answers[k].answer;
+      }
+      if (Object.keys(flatAnswers).length > 0) {
+        // answers are not empty
+        survey.data = flatAnswers;
       }
-    },
 
-    destroyed() {
-    },
+      this.currentPage = survey.currentPage;
 
-    methods: {
-      initSurvey(data, answers) {
-        let survey = new Model(data);
-        const flatAnswers = {};
-        for (let k in answers) {
-          flatAnswers[k] = answers[k].answer;
-        }
-        if (Object.keys(flatAnswers).length > 0) {
-          // answers are not empty
-          survey.data = flatAnswers;
+      const updatePage = (sender, { oldCurrentPage, newCurrentPage }) => {
+        console.log(oldCurrentPage, newCurrentPage);
+        this.currentPage = newCurrentPage;
+      };
+
+      const saveSurvey = (sender, { exit }) => {
+        if (this.saveDisabled) {
+          return;
         }
 
-        this.currentPage = survey.currentPage;
+        this.completed = true;
 
-        const updatePage = (sender, {oldCurrentPage, newCurrentPage}) => {
-          console.log(oldCurrentPage, newCurrentPage);
-          this.currentPage = newCurrentPage;
+        const data = {};
+
+        for (let k in survey.data) {
+          // if (survey.data.hasOwnProperty(k)) {
+          if (Object.prototype.hasOwnProperty.call(survey.data, k)) {
+            let question = sender.getQuestionByName(k);
+            data[k] = {
+              answer: survey.data[k],
+              correct: question && question.correctAnswer ? question.correctAnswer : '',
+            };
+          }
+        }
+        if (Object.keys(data).length === 0) {
+          // data is empty
+          return;
+        }
+        const answer = {
+          surveyId: this.id,
+          data: JSON.stringify(data),
         };
 
-        const saveSurvey = (sender, {exit}) => {
-          if (this.saveDisabled) {
-            return;
-          }
-
-          this.completed = true;
-
-          const data = {};
-
-          for (let k in survey.data) {
-            // if (survey.data.hasOwnProperty(k)) {
-              if (Object.prototype.hasOwnProperty.call(survey.data, k)) {
-              let question = sender.getQuestionByName(k);
-              data[k] = {
-                answer: survey.data[k],
-                correct: question && question.correctAnswer ? question.correctAnswer : '',
-              };
-            }
-          }
-          if (Object.keys(data).length === 0) {
-            // data is empty
-            return;
-          }
-          const answer = {
-            surveyId: this.id,
-            data: JSON.stringify(data),
-          };
-
-          this.$apollo.mutate({
+        this.$apollo
+          .mutate({
             mutation: UPDATE_ANSWER,
             variables: {
               input: {
                 answer,
               },
             },
-            update: (store, {data: {updateAnswer: {answer}}}) => {
+            update: (
+              store,
+              {
+                data: {
+                  updateAnswer: { answer },
+                },
+              }
+            ) => {
               const query = SURVEY_QUERY;
-              const variables = {id: this.id};
-              const {survey} = store.readQuery({query, variables});
+              const variables = { id: this.id };
+              const { survey } = store.readQuery({ query, variables });
               if (survey) {
-                const newData = { // data is already in use in parent scope
+                const newData = {
+                  // data is already in use in parent scope
                   survey: {
                     ...survey,
-                    answer
-                  }
+                    answer,
+                  },
                 };
-                store.writeQuery({query, variables, data: newData});
+                store.writeQuery({ query, variables, data: newData });
               }
             },
-          }).then(() => {
+          })
+          .then(() => {
             if (exit) {
               this.$router.go(-1);
             }
           });
-        };
+      };
 
-        survey.onComplete.add((sender, options) => {
-          saveSurvey(sender, {
-            ...options,
-            exit: true
-          });
+      survey.onComplete.add((sender, options) => {
+        saveSurvey(sender, {
+          ...options,
+          exit: true,
         });
-        survey.onCurrentPageChanged.add(saveSurvey);
-        survey.onCurrentPageChanged.add(updatePage);
+      });
+      survey.onCurrentPageChanged.add(saveSurvey);
+      survey.onCurrentPageChanged.add(updatePage);
 
-        survey.css = css;
-        survey.locale = 'de';
-        survey.showProgressBar = 'bottom';
-        survey.pageNextText = 'Speichern & Weiter';
-        survey.render('survey');
-        return survey;
-      },
-      reopen() {
-        this.saveDisabled = true; // disable saving, because resetting triggers a page change which we don't want to save
-        this.completed = false;
-        let data = this.survey.data; // save the data
-        this.survey.clear();
-        this.survey.data = data; // reapply it
-        this.saveDisabled = false;
-      },
-      loadSurveyFromServer(survey) {
-        let json = JSON.parse(survey.data);
-        json.showTitle = false;
-        json.showProgressBar = 'bottom';
-        let answer = {};
-        if (survey.answer && survey.answer.data) {
-          answer = JSON.parse(survey.answer.data);
-        }
-
-        if (!this.completed) {
-          this.survey = this.initSurvey(json, answer);
-        }
-        this.title = json.title;
+      survey.css = css;
+      survey.locale = 'de';
+      survey.showProgressBar = 'bottom';
+      survey.pageNextText = 'Speichern & Weiter';
+      survey.render('survey');
+      return survey;
+    },
+    reopen() {
+      this.saveDisabled = true; // disable saving, because resetting triggers a page change which we don't want to save
+      this.completed = false;
+      let data = this.survey.data; // save the data
+      this.survey.clear();
+      this.survey.data = data; // reapply it
+      this.saveDisabled = false;
+    },
+    loadSurveyFromServer(survey) {
+      let json = JSON.parse(survey.data);
+      json.showTitle = false;
+      json.showProgressBar = 'bottom';
+      let answer = {};
+      if (survey.answer && survey.answer.data) {
+        answer = JSON.parse(survey.answer.data);
       }
+
+      if (!this.completed) {
+        this.survey = this.initSurvey(json, answer);
+      }
+      this.title = json.title;
     },
+  },
 
-    apollo: {
-      survey: {
-        query: SURVEY_QUERY,
-        variables() {
-          return {
-            id: this.id,
-          };
-        },
-        manual: true,
-        result({data, loading }) {
-          if (!loading) {
-            this.surveyData = data.survey;
-            this.loadSurveyFromServer(data.survey);
-            const module = data.survey.module;
-
-            this.$apollo.addSmartQuery('module', {
-              query: MODULE_QUERY,
-              variables: {
-                slug: module.slug
-              },
-            });
-          }
-        },
+  apollo: {
+    survey: {
+      query: SURVEY_QUERY,
+      variables() {
+        return {
+          id: this.id,
+        };
+      },
+      manual: true,
+      result({ data, loading }) {
+        if (!loading) {
+          this.surveyData = data.survey;
+          this.loadSurveyFromServer(data.survey);
+          const module = data.survey.module;
+
+          this.$apollo.addSmartQuery('module', {
+            query: MODULE_QUERY,
+            variables: {
+              slug: module.slug,
+            },
+          });
+        }
       },
-      me: meQuery,
     },
-  };
+    me: meQuery,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "~styles/helpers";
+@import '~styles/helpers';
 
-  .survey-page {
-    max-width: 800px;
-    display: grid;
-    grid-template-rows: auto 1fr;
-    grid-auto-rows: auto;
-    grid-row-gap: $large-spacing;
-    justify-self: center;
-    padding: 100px 0;
-    width: 100%;
+.survey-page {
+  max-width: 800px;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  grid-auto-rows: auto;
+  grid-row-gap: $large-spacing;
+  justify-self: center;
+  padding: 100px 0;
+  width: 100%;
 
-    &__title {
-      @include meta-title;
-      margin: 0;
-    }
+  &__title {
+    @include meta-title;
+    margin: 0;
   }
+}
 </style>
diff --git a/client/src/pages/test.vue b/client/src/pages/test.vue
index f7b85f08..7abd23da 100644
--- a/client/src/pages/test.vue
+++ b/client/src/pages/test.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <button @click="makeQuery">
-      Normal Query
-    </button>
+    <button @click="makeQuery">Normal Query</button>
     <pre>
     {{ module }}
     </pre>
@@ -10,69 +8,65 @@
 </template>
 
 <script>
-  import gql from 'graphql-tag';
-  // import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
-  // import MODULE_PARTS from '@/graphql/gql/fragments/moduleParts.gql';
-
-  const moduleParts = gql`
-fragment ModuleParts on ModuleNode {
-  id
-  title
-}
+import gql from 'graphql-tag';
+// import MODULE_DETAILS_QUERY from '@/graphql/gql/moduleDetailsQuery.gql';
+// import MODULE_PARTS from '@/graphql/gql/fragments/moduleParts.gql';
 
+const moduleParts = gql`
+  fragment ModuleParts on ModuleNode {
+    id
+    title
+  }
 `;
 
-  const moduleQuery = gql`
-${moduleParts}
-query ModuleQuery {
+const moduleQuery = gql`
+  ${moduleParts}
+  query ModuleQuery {
     module(slug: "lohn-und-budget") {
-        ...ModuleParts
+      ...ModuleParts
     }
-}
-
+  }
 `;
 
-  const moduleAndObjectivesQuery = gql`
-${moduleParts}
-query ModuleQuery {
+const moduleAndObjectivesQuery = gql`
+  ${moduleParts}
+  query ModuleQuery {
     module(slug: "lohn-und-budget") {
-        ...ModuleParts
-        objectiveGroups {
+      ...ModuleParts
+      objectiveGroups {
         edges {
           node {
             id
           }
         }
+      }
     }
-    }
-}
-
+  }
 `;
 
-  export default {
-    data() {
-      return {
-        objectiveGroups: {},
-        module: {},
-      };
-    },
+export default {
+  data() {
+    return {
+      objectiveGroups: {},
+      module: {},
+    };
+  },
 
-    methods: {
-      makeQuery() {
-        console.log('click');
-        this.$apollo.query({query: moduleQuery});
-      },
+  methods: {
+    makeQuery() {
+      console.log('click');
+      this.$apollo.query({ query: moduleQuery });
     },
+  },
 
-    apollo: {
-      // me: ME_QUERY
-      // objectiveGroups: gql,
-      module: moduleAndObjectivesQuery,
-    },
-  };
+  apollo: {
+    // me: ME_QUERY
+    // objectiveGroups: gql,
+    module: moduleAndObjectivesQuery,
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import '~styles/helpers';
-
+@import '~styles/helpers';
 </style>
diff --git a/client/src/pages/topic-page.vue b/client/src/pages/topic-page.vue
index c9d67c28..379f6b89 100644
--- a/client/src/pages/topic-page.vue
+++ b/client/src/pages/topic-page.vue
@@ -5,21 +5,14 @@
     </div>
 
     <div class="topic__content">
-      <h1
-        data-cy="topic-title"
-        class="topic__title"
-      >
+      <h1 data-cy="topic-title" class="topic__title">
         {{ topic.title }}
       </h1>
       <p class="topic__teaser">
         {{ topic.teaser }}
       </p>
       <div class="topic__links">
-        <div
-          class="topic__video-link topic__link"
-          v-if="topic.vimeoId"
-          @click="openVideo"
-        >
+        <div class="topic__video-link topic__link" v-if="topic.vimeoId" @click="openVideo">
           <play-icon class="topic__video-link-icon topic__link-icon" />
           <span class="topic__link-description">Video schauen</span>
         </div>
@@ -34,184 +27,187 @@
         </a>
       </div>
       <div class="topic__modules">
-        <module-teaser
-          v-for="module in modules"
-          :key="module.slug"
-          v-bind="module"
-        />
+        <module-teaser v-for="module in modules" :key="module.slug" v-bind="module" />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
-  import TOPIC_QUERY from '@/graphql/gql/queries/topicQuery.gql';
-  import me from '@/mixins/me';
-  import TopicNavigation from '@/components/book-navigation/TopicNavigation';
+import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
+import TOPIC_QUERY from '@/graphql/gql/queries/topicQuery.gql';
+import me from '@/mixins/me';
+import TopicNavigation from '@/components/book-navigation/TopicNavigation';
 
-  import UPDATE_LAST_TOPIC_MUTATION from '@/graphql/gql/mutations/updateLastTopic.gql';
-  import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
+import UPDATE_LAST_TOPIC_MUTATION from '@/graphql/gql/mutations/updateLastTopic.gql';
+import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
 
-  const PlayIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/Play');
-  const BulbIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/BulbIcon');
+const PlayIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/Play');
+const BulbIcon = () => import(/* webpackChunkName: "icons" */ '@/components/icons/BulbIcon');
 
-  export default {
+export default {
+  mixins: [me],
+  components: {
+    TopicNavigation,
+    ModuleTeaser,
+    PlayIcon,
+    BulbIcon,
+  },
 
-    mixins: [me],
-    components: {
-      TopicNavigation,
-      ModuleTeaser,
-      PlayIcon,
-      BulbIcon,
-    },
-
-    apollo: {
-      topic() {
-        return {
-          query: TOPIC_QUERY,
-          variables: {
-            slug: this.$route.params.topicSlug,
-          },
-          update(data) {
-            return this.$getRidOfEdges(data).topic || {};
-          },
-          result() {
-            if (this.saveMe) {
-              this.saveMe = false;
-              this.updateLastVisitedTopic(this.topic.id);
-            }
-          },
-        };
-      },
-    },
-
-    data() {
+  apollo: {
+    topic() {
       return {
-        topic: {
-          modules: {
-            edges: [],
-          },
+        query: TOPIC_QUERY,
+        variables: {
+          slug: this.$route.params.topicSlug,
+        },
+        update(data) {
+          return this.$getRidOfEdges(data).topic || {};
+        },
+        result() {
+          if (this.saveMe) {
+            this.saveMe = false;
+            this.updateLastVisitedTopic(this.topic.id);
+          }
         },
-        saveMe: false,
       };
     },
+  },
 
-    computed: {
-      modules() {
-        return this.topic.modules;
+  data() {
+    return {
+      topic: {
+        modules: {
+          edges: [],
+        },
       },
-    },
+      saveMe: false,
+    };
+  },
 
-    mounted() {
-      if (!this.topic.id) { // component was loaded before topic, apollo not ready yet
-        this.saveMe = true; // needs saving, apollo will do this
-      } else {
-        this.updateLastVisitedTopic(this.topic.id);
+  computed: {
+    modules() {
+      return this.topic.modules;
+    },
+  },
+
+  mounted() {
+    if (!this.topic.id) {
+      // component was loaded before topic, apollo not ready yet
+      this.saveMe = true; // needs saving, apollo will do this
+    } else {
+      this.updateLastVisitedTopic(this.topic.id);
+    }
+  },
+
+  methods: {
+    openVideo() {
+      this.$store.dispatch('showFullscreenVideo', this.topic.vimeoId);
+    },
+    updateLastVisitedTopic(topicId) {
+      if (!topicId) {
+        return;
       }
-    },
-
-    methods: {
-      openVideo() {
-        this.$store.dispatch('showFullscreenVideo', this.topic.vimeoId);
-      },
-      updateLastVisitedTopic(topicId) {
-        if (!topicId) {
-          return;
-        }
-        this.$apollo.mutate({
-          mutation: UPDATE_LAST_TOPIC_MUTATION,
-          variables: {
-            input: {
-              id: topicId,
+      this.$apollo.mutate({
+        mutation: UPDATE_LAST_TOPIC_MUTATION,
+        variables: {
+          input: {
+            id: topicId,
+          },
+        },
+        update(
+          store,
+          {
+            data: {
+              updateLastTopic: { topic },
             },
-          },
-          update(store, {data: {updateLastTopic: {topic}}}) {
-            if (topic) {
-              const query = ME_QUERY;
-              const {me} = store.readQuery({query});
-              if (me) {
-                const data = {
-                  me: {
-                    ...me,
-                    lastTopic: topic,
-                  },
-                };
-                store.writeQuery({query, data});
-              }
+          }
+        ) {
+          if (topic) {
+            const query = ME_QUERY;
+            const { me } = store.readQuery({ query });
+            if (me) {
+              const data = {
+                me: {
+                  ...me,
+                  lastTopic: topic,
+                },
+              };
+              store.writeQuery({ query, data });
             }
-          },
-        });
-      },
+          }
+        },
+      });
     },
-  };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+@import '@/styles/_variables.scss';
+@import '@/styles/_mixins.scss';
 
-  .topic {
-    display: grid;
-    padding: $large-spacing 0;
-    grid-template-columns: 1fr;
+.topic {
+  display: grid;
+  padding: $large-spacing 0;
+  grid-template-columns: 1fr;
+  @include desktop {
+    grid-template-columns: 300px 1fr;
+  }
+
+  &__navigation {
+    padding: 0 $medium-spacing;
+    display: none;
     @include desktop {
-      grid-template-columns: 300px 1fr;
-    }
-
-    &__navigation {
-      padding: 0 $medium-spacing;
-      display: none;
-      @include desktop {
-        display: block;
-      }
-    }
-
-    &__teaser {
-      color: $color-charcoal-dark;
-      width: 90%;
-      @include lead-paragraph;
-      margin-bottom: $large-spacing;
-    }
-
-    &__links {
-      margin-bottom: $large-spacing;
-      display: flex;
-    }
-
-    &__link {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-    }
-
-    &__video-link {
-      margin-right: $large-spacing;
-    }
-
-    &__link-icon {
-      width: 40px;
-      height: 40px;
-      margin-right: $medium-spacing;
-    }
-
-    &__link-description {
-      @include heading-3;
-    }
-
-    &__modules {
-      margin-top: 40px;
-      display: flex;
-      flex-wrap: wrap;
-      @supports (display: grid) {
-        display: grid;
-      }
-      grid-column-gap: $large-spacing;
-      grid-row-gap: $large-spacing;
-
-      @include desktop {
-        grid-template-columns: repeat(3, minmax(auto, 380px));
-      }
+      display: block;
     }
   }
+
+  &__teaser {
+    color: $color-charcoal-dark;
+    width: 90%;
+    @include lead-paragraph;
+    margin-bottom: $large-spacing;
+  }
+
+  &__links {
+    margin-bottom: $large-spacing;
+    display: flex;
+  }
+
+  &__link {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  &__video-link {
+    margin-right: $large-spacing;
+  }
+
+  &__link-icon {
+    width: 40px;
+    height: 40px;
+    margin-right: $medium-spacing;
+  }
+
+  &__link-description {
+    @include heading-3;
+  }
+
+  &__modules {
+    margin-top: 40px;
+    display: flex;
+    flex-wrap: wrap;
+    @supports (display: grid) {
+      display: grid;
+    }
+    grid-column-gap: $large-spacing;
+    grid-row-gap: $large-spacing;
+
+    @include desktop {
+      grid-template-columns: repeat(3, minmax(auto, 380px));
+    }
+  }
+}
 </style>
diff --git a/client/src/plugins/edges.js b/client/src/plugins/edges.js
index 65849410..ed53732e 100644
--- a/client/src/plugins/edges.js
+++ b/client/src/plugins/edges.js
@@ -6,7 +6,7 @@ const getRidOfEdges = (collection) => {
     for (const k in collection) {
       if (Object.prototype.hasOwnProperty.call(collection, k)) {
         if (k === 'edges') {
-          return collection.edges.map(edge => getRidOfEdges(edge.node));
+          return collection.edges.map((edge) => getRidOfEdges(edge.node));
         } else {
           newObj[k] = getRidOfEdges(collection[k]);
           if (newObj[k]) {
@@ -24,7 +24,7 @@ const getRidOfEdges = (collection) => {
 const EdgesPlugin = {
   install(Vue) {
     Vue.prototype.$getRidOfEdges = getRidOfEdges;
-  }
+  },
 };
 
 export default EdgesPlugin;
diff --git a/client/src/plugins/flavor.js b/client/src/plugins/flavor.js
index 63e412bd..93357f05 100644
--- a/client/src/plugins/flavor.js
+++ b/client/src/plugins/flavor.js
@@ -3,5 +3,5 @@ import flavorValues from '@/helpers/app-flavor';
 export default {
   install: (Vue) => {
     Vue.prototype.$flavor = Object.assign({}, flavorValues);
-  }
+  },
 };
diff --git a/client/src/plugins/modal.ts b/client/src/plugins/modal.ts
index 019afaec..8f8f2b00 100644
--- a/client/src/plugins/modal.ts
+++ b/client/src/plugins/modal.ts
@@ -1,17 +1,16 @@
 // adapted from
 // https://stackoverflow.com/questions/41791193/vuejs-reactive-binding-for-a-plugin-how-to/41801107#41801107
-import Vue, {VueConstructor} from 'vue';
+import Vue, { VueConstructor } from 'vue';
 
-
-class ModalStore  {
+class ModalStore {
   vm: Vue;
 
   constructor() {
     this.vm = new Vue({
       data: () => ({
         component: '',
-        payload: {}
-      })
+        payload: {},
+      }),
     });
   }
 
@@ -21,19 +20,19 @@ class ModalStore  {
 }
 
 interface Modal {
-  state: any,
-  component: string,
-  payload?: any,
-  confirm: (res: any)  => void,
-  open: (component: string, payload?: any) => Promise<(resolve: () => any, reject: () => any) => void>,
-  cancel: () => void,
-  _resolve: (r?: any) => any,
-  _reject: (r?: any) => any
+  state: any;
+  component: string;
+  payload?: any;
+  confirm: (res: any) => void;
+  open: (component: string, payload?: any) => Promise<(resolve: () => any, reject: () => any) => void>;
+  cancel: () => void;
+  _resolve: (r?: any) => any;
+  _reject: (r?: any) => any;
 }
 
 declare module 'vue/types/vue' {
   interface Vue {
-    $modal: Modal
+    $modal: Modal;
   }
 }
 
@@ -66,14 +65,12 @@ const ModalPlugin = {
         reset();
         this._reject();
       },
-      _resolve: () => {
-      },
-      _reject: () => {
-      },
+      _resolve: () => {},
+      _reject: () => {},
     };
 
     Vue.prototype.$modal = modal;
-  }
+  },
 };
 
 export default ModalPlugin;
diff --git a/client/src/router/auth.routes.js b/client/src/router/auth.routes.js
index 22101a89..54a38d75 100644
--- a/client/src/router/auth.routes.js
+++ b/client/src/router/auth.routes.js
@@ -1,9 +1,9 @@
-import {LICENSE_ACTIVATION} from '@/router/auth.names';
+import { LICENSE_ACTIVATION } from '@/router/auth.names';
 
-const hello = () => import(/* webpackChunkName: "auth" */'@/pages/hello');
-const betaLogin = () => import(/* webpackChunkName: "auth" */'@/pages/beta-login');
-const loginError = () => import(/* webpackChunkName: "auth" */'@/pages/login-error');
-const licenseActivation = () => import(/* webpackChunkName: "auth" */'@/pages/license-activation');
+const hello = () => import(/* webpackChunkName: "auth" */ '@/pages/hello');
+const betaLogin = () => import(/* webpackChunkName: "auth" */ '@/pages/beta-login');
+const loginError = () => import(/* webpackChunkName: "auth" */ '@/pages/login-error');
+const licenseActivation = () => import(/* webpackChunkName: "auth" */ '@/pages/license-activation');
 
 export default [
   {
@@ -32,14 +32,15 @@ export default [
     name: 'verifyEmail',
     props: {
       title: 'Bitte schauen Sie in Ihr Postfach',
-      errorMessage: 'Ihre E-Mail-Adresse ist noch nicht verifiziert. Wir haben eine E-Mail mit einem Aktivierungslink an Sie verschickt.',
+      errorMessage:
+        'Ihre E-Mail-Adresse ist noch nicht verifiziert. Wir haben eine E-Mail mit einem Aktivierungslink an Sie verschickt.',
       alternateLink: 'https://www.hep-verlag.ch/',
       alternateLinkMessage: 'hep Verlag Webseite besuchen',
       extraMessages: [
         'Haben Sie keine E-Mail erhalten?',
         'Sie haben die Möglichkeit die E-Mail mit dem Aktivierungslink erneut anzufordern.\n' +
-        'Besuchen Sie dafür die Webseite des hep Verlags und beachten Sie den roten Hinweis.'
-      ]
+          'Besuchen Sie dafür die Webseite des hep Verlags und beachten Sie den roten Hinweis.',
+      ],
     },
     meta: {
       public: true,
@@ -52,7 +53,8 @@ export default [
     name: 'unknownAuthError',
     props: {
       title: 'Es ist ein Fehler aufgetreten',
-      errorMessage: 'Es tut uns leid, dass mySkillbox im Moment nicht wie erwartet funktioniert. Bitte versuchen Sie es später nochmals.',
+      errorMessage:
+        'Es tut uns leid, dass mySkillbox im Moment nicht wie erwartet funktioniert. Bitte versuchen Sie es später nochmals.',
     },
     meta: {
       public: true,
diff --git a/client/src/router/guards.ts b/client/src/router/guards.ts
index d3def2bc..69c7e6ac 100644
--- a/client/src/router/guards.ts
+++ b/client/src/router/guards.ts
@@ -1,4 +1,4 @@
-import {Route} from "vue-router";
+import { Route } 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
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 0a9b6191..e2dc764c 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -10,18 +10,18 @@ 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');
@@ -52,22 +52,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 +76,7 @@ const routes = [
   },
   {
     path: '/oauth-redirect',
-    redirect: to => {
+    redirect: (to) => {
       switch (to.query.state) {
         case EMAIL_NOT_VERIFIED_STATE:
           return '/verify-email';
@@ -94,15 +94,15 @@ const routes = [
       }
     },
   },
-  {path: '/styleguide', component: styleGuidePage},
+  { path: '/styleguide', component: styleGuidePage },
   {
     path: '/not-found',
     name: 'not-found',
-    ...notFoundRoute
+    ...notFoundRoute,
   },
   {
     path: '*',
-    ...notFoundRoute
+    ...notFoundRoute,
   },
 ];
 
@@ -115,7 +115,7 @@ const router = new Router({
     if (savedPosition) {
       return savedPosition;
     }
-    return {x: 0, y: 0};
+    return { x: 0, y: 0 };
   },
 });
 
@@ -124,4 +124,4 @@ router.afterEach(() => {
   store.dispatch('showMobileNavigation', false);
 });
 
-export {router, postLoginRedirectUrlKey};
+export { router, postLoginRedirectUrlKey };
diff --git a/client/src/router/me.routes.js b/client/src/router/me.routes.js
index 4d7bc2f8..26c08c23 100644
--- a/client/src/router/me.routes.js
+++ b/client/src/router/me.routes.js
@@ -1,55 +1,60 @@
-import {CREATE_TEAM, JOIN_TEAM, MY_TEAM, SHOW_SCHOOL_CLASS_CODE, SHOW_TEAM_CODE} from './me.names';
-import {LAYOUT_SIMPLE} from '@/router/core.constants';
+import { CREATE_TEAM, JOIN_TEAM, MY_TEAM, SHOW_SCHOOL_CLASS_CODE, SHOW_TEAM_CODE } from './me.names';
+import { LAYOUT_SIMPLE } from '@/router/core.constants';
 
-const profilePage = () => import(/* webpackChunkName: "profile" */'@/pages/profile');
-const profile = () => import(/* webpackChunkName: "profile" */'@/components/profile/Profile');
-const myClass = () => import(/* webpackChunkName: "profile" */'@/pages/myClass');
-const activity = () => import(/* webpackChunkName: "profile" */'@/pages/activity');
-const oldClasses = () => import(/* webpackChunkName: "profile" */'@/pages/oldClasses');
-const createClass = () => import(/* webpackChunkName: "profile" */'@/pages/createClass');
-const showSchoolClassCode = () => import(/* webpackChunkName: "profile" */'@/pages/me/showSchoolClassCode');
-const showTeamCode = () => import(/* webpackChunkName: "profile" */'@/pages/me/showTeamCode');
-const myTeam = () => import(/* webpackChunkName: "profile" */'@/pages/me/myTeam');
-const joinTeam = () => import(/* webpackChunkName: "profile" */'@/pages/me/joinTeam');
-const createTeam = () => import(/* webpackChunkName: "profile" */'@/pages/me/createTeam');
+const profilePage = () => import(/* webpackChunkName: "profile" */ '@/pages/profile');
+const profile = () => import(/* webpackChunkName: "profile" */ '@/components/profile/Profile');
+const myClass = () => import(/* webpackChunkName: "profile" */ '@/pages/myClass');
+const activity = () => import(/* webpackChunkName: "profile" */ '@/pages/activity');
+const oldClasses = () => import(/* webpackChunkName: "profile" */ '@/pages/oldClasses');
+const createClass = () => import(/* webpackChunkName: "profile" */ '@/pages/createClass');
+const showSchoolClassCode = () => import(/* webpackChunkName: "profile" */ '@/pages/me/showSchoolClassCode');
+const showTeamCode = () => import(/* webpackChunkName: "profile" */ '@/pages/me/showTeamCode');
+const myTeam = () => import(/* webpackChunkName: "profile" */ '@/pages/me/myTeam');
+const joinTeam = () => import(/* webpackChunkName: "profile" */ '@/pages/me/joinTeam');
+const createTeam = () => import(/* webpackChunkName: "profile" */ '@/pages/me/createTeam');
 
 export default [
   {
     path: '/me',
     component: profilePage,
     children: [
-      {path: 'profile', name: 'profile', component: profile, meta: {isProfile: true}},
-      {path: 'class', alias: 'my-class', name: 'my-class', component: myClass, meta: {isProfile: true}},
-      {path: 'activity', name: 'activity', component: activity, meta: {isProfile: true}},
-      {path: '', name: 'profile-activity', component: activity, meta: {isProfile: true}},
+      { path: 'profile', name: 'profile', component: profile, meta: { isProfile: true } },
+      { path: 'class', alias: 'my-class', name: 'my-class', component: myClass, meta: { isProfile: true } },
+      { path: 'activity', name: 'activity', component: activity, meta: { isProfile: true } },
+      { path: '', name: 'profile-activity', component: activity, meta: { isProfile: true } },
       {
         path: 'old-classes',
         name: 'old-classes',
         component: oldClasses,
-        meta: {isProfile: true},
+        meta: { isProfile: true },
       },
       {
         path: 'class/create',
         alias: 'create-class',
         name: 'create-class',
         component: createClass,
-        meta: {layout: LAYOUT_SIMPLE},
+        meta: { layout: LAYOUT_SIMPLE },
       },
       {
         path: 'class/code',
         alias: 'show-code',
         name: SHOW_SCHOOL_CLASS_CODE,
         component: showSchoolClassCode,
-        meta: {layout: LAYOUT_SIMPLE},
+        meta: { layout: LAYOUT_SIMPLE },
+      },
+      { path: 'team', name: MY_TEAM, component: myTeam, meta: { isProfile: true } },
+      { path: 'team/join', name: JOIN_TEAM, component: joinTeam, meta: { isProfile: true, layout: LAYOUT_SIMPLE } },
+      {
+        path: 'team/create',
+        name: CREATE_TEAM,
+        component: createTeam,
+        meta: { isProfile: true, layout: LAYOUT_SIMPLE },
       },
-      {path: 'team', name: MY_TEAM, component: myTeam, meta: {isProfile: true}},
-      {path: 'team/join', name: JOIN_TEAM, component: joinTeam, meta: {isProfile: true, layout: LAYOUT_SIMPLE}},
-      {path: 'team/create', name: CREATE_TEAM, component: createTeam, meta: {isProfile: true, layout: LAYOUT_SIMPLE}},
       {
         path: 'team/code',
         name: SHOW_TEAM_CODE,
         component: showTeamCode,
-        meta: {layout: LAYOUT_SIMPLE},
+        meta: { layout: LAYOUT_SIMPLE },
       },
     ],
   },
diff --git a/client/src/router/module.routes.js b/client/src/router/module.routes.js
index 3f38ffdb..d2f47975 100644
--- a/client/src/router/module.routes.js
+++ b/client/src/router/module.routes.js
@@ -9,17 +9,17 @@ import {
   SUBMISSIONS_PAGE,
   VISIBILITY_PAGE,
 } from '@/router/module.names';
-import {LAYOUT_SIMPLE} from '@/router/core.constants';
+import { LAYOUT_SIMPLE } from '@/router/core.constants';
 import createContentBlock from '@/pages/createContentBlock';
 import editContentBlock from '@/pages/editContentBlock';
 
-const moduleBase = () => import(/* webpackChunkName: "modules" */'@/pages/module/module-base');
-const module = () => import(/* webpackChunkName: "modules" */'@/pages/module/module');
-const submissions = () => import(/* webpackChunkName: "modules" */'@/pages/submissions');
-const moduleVisibility = () => import(/* webpackChunkName: "modules" */'@/pages/module/moduleVisibility');
-const settingsPage = () => import(/* webpackChunkName: "modules" */'@/pages/module/moduleSettings');
-const snapshots = () => import(/* webpackChunkName: "modules" */'@/pages/snapshot/snapshots');
-const snapshot = () => import(/* webpackChunkName: "modules" */'@/pages/snapshot/snapshot');
+const moduleBase = () => import(/* webpackChunkName: "modules" */ '@/pages/module/module-base');
+const module = () => import(/* webpackChunkName: "modules" */ '@/pages/module/module');
+const submissions = () => import(/* webpackChunkName: "modules" */ '@/pages/submissions');
+const moduleVisibility = () => import(/* webpackChunkName: "modules" */ '@/pages/module/moduleVisibility');
+const settingsPage = () => import(/* webpackChunkName: "modules" */ '@/pages/module/moduleSettings');
+const snapshots = () => import(/* webpackChunkName: "modules" */ '@/pages/snapshot/snapshots');
+const snapshot = () => import(/* webpackChunkName: "modules" */ '@/pages/snapshot/snapshot');
 
 const contentBlockFormMeta = {
   // layout: LAYOUT_SIMPLE,
@@ -43,7 +43,7 @@ export default [
         path: '',
         name: MODULE_PAGE,
         component: module,
-        meta: {filter: true},
+        meta: { filter: true },
       },
       {
         path: 'submissions/:id',
diff --git a/client/src/router/onboarding.routes.js b/client/src/router/onboarding.routes.js
index f6d3921a..3e97a3b7 100644
--- a/client/src/router/onboarding.routes.js
+++ b/client/src/router/onboarding.routes.js
@@ -1,10 +1,10 @@
-import {ONBOARDING_STEP_1, ONBOARDING_STEP_2, ONBOARDING_STEP_3} from '@/router/onboarding.names';
+import { ONBOARDING_STEP_1, ONBOARDING_STEP_2, ONBOARDING_STEP_3 } from '@/router/onboarding.names';
 
 const onboarding = () => import('@/pages/onboarding.vue');
 const onboardingStart = () => import('@/pages/onboarding/start.vue');
-const onboardingStep1 = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding/step1.vue');
-const onboardingStep2 = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding/step2.vue');
-const onboardingStep3 = () => import(/* webpackChunkName: "onboarding" */'@/pages/onboarding/step3.vue');
+const onboardingStep1 = () => import(/* webpackChunkName: "onboarding" */ '@/pages/onboarding/step1.vue');
+const onboardingStep2 = () => import(/* webpackChunkName: "onboarding" */ '@/pages/onboarding/step2.vue');
+const onboardingStep3 = () => import(/* webpackChunkName: "onboarding" */ '@/pages/onboarding/step3.vue');
 
 export default [
   {
@@ -51,5 +51,5 @@ export default [
         },
       },
     ],
-  }
+  },
 ];
diff --git a/client/src/router/portfolio.routes.js b/client/src/router/portfolio.routes.js
index d03ab8c4..31a91ee8 100644
--- a/client/src/router/portfolio.routes.js
+++ b/client/src/router/portfolio.routes.js
@@ -1,16 +1,16 @@
 import { NEW_PROJECT_PAGE, PROJECTS_PAGE } from '@/router/portfolio.names';
 import flavorValues from '@/helpers/app-flavor';
 
-const portfolio = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/portfolio');
-const project = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/project');
-const newProject = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/newProject');
-const editProject = () => import(/* webpackChunkName: "portfolio" */'@/pages/portfolio/editProject');
+const portfolio = () => import(/* webpackChunkName: "portfolio" */ '@/pages/portfolio/portfolio');
+const project = () => import(/* webpackChunkName: "portfolio" */ '@/pages/portfolio/project');
+const newProject = () => import(/* webpackChunkName: "portfolio" */ '@/pages/portfolio/newProject');
+const editProject = () => import(/* webpackChunkName: "portfolio" */ '@/pages/portfolio/editProject');
 
 const portfolioRoutes = [
-  {path: '/portfolio', name: PROJECTS_PAGE, component: portfolio, meta: {hideFooter: true}},
-  {path: '/portfolio/:slug', name: 'project', component: project, props: true},
-  {path: '/new-project/', name: NEW_PROJECT_PAGE, component: newProject},
-  {path: '/edit-project/:slug', name: 'edit-project', component: editProject, props: true},
+  { path: '/portfolio', name: PROJECTS_PAGE, component: portfolio, meta: { hideFooter: true } },
+  { path: '/portfolio/:slug', name: 'project', component: project, props: true },
+  { path: '/new-project/', name: NEW_PROJECT_PAGE, component: newProject },
+  { path: '/edit-project/:slug', name: 'edit-project', component: editProject, props: true },
 ];
 
 const routes = flavorValues.showPortfolio ? portfolioRoutes : [];
diff --git a/client/src/router/room.routes.js b/client/src/router/room.routes.js
index c1f15b50..7614fd11 100644
--- a/client/src/router/room.routes.js
+++ b/client/src/router/room.routes.js
@@ -1,25 +1,25 @@
-import {NEW_ROOM_PAGE, ROOMS_PAGE, ADD_ROOM_ENTRY_PAGE, ROOM_PAGE, UPDATE_ROOM_ENTRY_PAGE} from '@/router/room.names';
+import { NEW_ROOM_PAGE, ROOMS_PAGE, ADD_ROOM_ENTRY_PAGE, ROOM_PAGE, UPDATE_ROOM_ENTRY_PAGE } from '@/router/room.names';
 
-const rooms = () => import(/* webpackChunkName: "rooms" */'@/pages/rooms/rooms');
-const newRoom = () => import(/* webpackChunkName: "rooms" */'@/pages/rooms/newRoom');
-const editRoom = () => import(/* webpackChunkName: "rooms" */'@/pages/rooms/editRoom');
-const room = () => import(/* webpackChunkName: "rooms" */'@/pages/rooms/room');
-const newRoomEntry = () => import(/* webpackChunkName: "rooms" */'@/pages/rooms/newRoomEntry');
-const editRoomEntry = () => import(/* webpackChunkName: "rooms" */'@/pages/rooms/editRoomEntry');
-const moduleRoom = () => import(/* webpackChunkName: "rooms" */'@/pages/module/moduleRoom');
+const rooms = () => import(/* webpackChunkName: "rooms" */ '@/pages/rooms/rooms');
+const newRoom = () => import(/* webpackChunkName: "rooms" */ '@/pages/rooms/newRoom');
+const editRoom = () => import(/* webpackChunkName: "rooms" */ '@/pages/rooms/editRoom');
+const room = () => import(/* webpackChunkName: "rooms" */ '@/pages/rooms/room');
+const newRoomEntry = () => import(/* webpackChunkName: "rooms" */ '@/pages/rooms/newRoomEntry');
+const editRoomEntry = () => import(/* webpackChunkName: "rooms" */ '@/pages/rooms/editRoomEntry');
+const moduleRoom = () => import(/* webpackChunkName: "rooms" */ '@/pages/module/moduleRoom');
 
 export default [
-  {path: '/rooms', name: ROOMS_PAGE, component: rooms, meta: {filter: true, hideFooter: true}},
-  {path: '/new-room/', name: NEW_ROOM_PAGE, component: newRoom},
-  {path: '/edit-room/:id', name: 'edit-room', component: editRoom, props: true},
-  {path: '/room/:slug', name: ROOM_PAGE, component: room, props: true},
-  {path: '/room/:slug/add', name: ADD_ROOM_ENTRY_PAGE, component: newRoomEntry, props: true},
-  {path: '/room/:slug/edit/:entrySlug', name: UPDATE_ROOM_ENTRY_PAGE, component: editRoomEntry, props: true},
+  { path: '/rooms', name: ROOMS_PAGE, component: rooms, meta: { filter: true, hideFooter: true } },
+  { path: '/new-room/', name: NEW_ROOM_PAGE, component: newRoom },
+  { path: '/edit-room/:id', name: 'edit-room', component: editRoom, props: true },
+  { path: '/room/:slug', name: ROOM_PAGE, component: room, props: true },
+  { path: '/room/:slug/add', name: ADD_ROOM_ENTRY_PAGE, component: newRoomEntry, props: true },
+  { path: '/room/:slug/edit/:entrySlug', name: UPDATE_ROOM_ENTRY_PAGE, component: editRoomEntry, props: true },
   {
     path: '/module-room/:slug',
     name: 'moduleRoom',
     component: moduleRoom,
     props: true,
-    meta: {layout: 'fullScreen'},
-  }
+    meta: { layout: 'fullScreen' },
+  },
 ];
diff --git a/client/src/router/router.d.ts b/client/src/router/router.d.ts
index a2e8e45c..ba70fb40 100644
--- a/client/src/router/router.d.ts
+++ b/client/src/router/router.d.ts
@@ -2,7 +2,6 @@ import 'vue-router';
 
 declare module 'vue-router' {
   interface RouteMeta {
-
     public?: boolean;
   }
 }
diff --git a/client/src/shims-vue.d.ts b/client/src/shims-vue.d.ts
index 98623ac3..cbcbd6f8 100644
--- a/client/src/shims-vue.d.ts
+++ b/client/src/shims-vue.d.ts
@@ -1,5 +1,5 @@
 // from https://stackoverflow.com/questions/64213461/vuejs-typescript-cannot-find-module-components-navigation-or-its-correspon
-declare module "*.vue" {
+declare module '*.vue' {
   import Vue from 'vue';
   export default Vue;
 }
diff --git a/client/src/store/index.js b/client/src/store/index.js
index 37d2f7c2..293ac9d8 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -26,7 +26,7 @@ export default new Vuex.Store({
     imageUrl: '',
     infographic: {
       id: 0,
-      type: ''
+      type: '',
     },
     vimeoId: null,
     scrollToAssignmentId: '',
@@ -39,39 +39,39 @@ export default new Vuex.Store({
   },
 
   getters: {
-    showModal: state => state.showModal,
-    showMobileNavigation: state => state.showMobileNavigation,
-    scrollToAssignmentId: state => state.scrollToAssignmentId,
-    scrollToAssignmentReady: state => state.scrollToAssignmentReady,
-    scrollingToAssignment: state => state.scrollingToAssignment,
-    currentProjectEntry: state => state.currentProjectEntry,
-    currentContent: state => state.currentContent,
-    currentNoteBlock: state => state.currentNoteBlock,
-    currentNote: state => state.currentNote,
-    currentNoteParent: state => state.currentNoteParent,
-    noteType: state => state.noteType,
-    modulePayload: state => state.modulePayload
+    showModal: (state) => state.showModal,
+    showMobileNavigation: (state) => state.showMobileNavigation,
+    scrollToAssignmentId: (state) => state.scrollToAssignmentId,
+    scrollToAssignmentReady: (state) => state.scrollToAssignmentReady,
+    scrollingToAssignment: (state) => state.scrollingToAssignment,
+    currentProjectEntry: (state) => state.currentProjectEntry,
+    currentContent: (state) => state.currentContent,
+    currentNoteBlock: (state) => state.currentNoteBlock,
+    currentNote: (state) => state.currentNote,
+    currentNoteParent: (state) => state.currentNoteParent,
+    noteType: (state) => state.noteType,
+    modulePayload: (state) => state.modulePayload,
   },
 
   // todo: clean up
   actions: {
-    setSpecialContainerClass({commit}, payload) {
+    setSpecialContainerClass({ commit }, payload) {
       commit('setSpecialContainerClass', payload);
     },
-    confirmModal({dispatch, state}) {
+    confirmModal({ dispatch, state }) {
       dispatch('hideModal');
       state.modalResolve();
     },
-    cancelModal({dispatch, state}) {
+    cancelModal({ dispatch, state }) {
       dispatch('hideModal');
       state.modalReject();
     },
-    hideModal({commit, dispatch}) {
+    hideModal({ commit, dispatch }) {
       document.body.classList.remove('no-scroll'); // won't get at the body any other way
       commit('setModal', false);
       dispatch('resetModalState');
     },
-    resetModalState({commit}) {
+    resetModalState({ commit }) {
       commit('setCurrentRoomEntry', '');
       commit('setCurrentContent', '');
       commit('setCurrentNoteBlock', '');
@@ -84,32 +84,32 @@ export default new Vuex.Store({
       commit('setImageUrl', '');
       commit('setInfographic', {
         id: 0,
-        type: ''
+        type: '',
       });
       commit('setVimeoId', null);
       commit('setCurrentNote', null);
       commit('setNoteType', '');
       commit('setModulePayload', []);
     },
-    resetContentBlockPosition({commit}) {
+    resetContentBlockPosition({ commit }) {
       commit('setContentBlockPosition', {});
     },
-    resetCurrentNoteBlock({commit}) {
+    resetCurrentNoteBlock({ commit }) {
       commit('setCurrentNoteBlock', '');
     },
-    editContentBlock({commit, dispatch}, payload) {
+    editContentBlock({ commit, dispatch }, payload) {
       commit('setCurrentNoteBlock', payload);
       dispatch('showModal', 'edit-content-block-wizard');
     },
-    addContentBlock({commit, dispatch}, payload) {
+    addContentBlock({ commit, dispatch }, payload) {
       commit('setContentBlockPosition', payload);
       dispatch('showModal', 'new-content-block-wizard');
     },
-    editRoomEntry({commit, dispatch}, payload) {
+    editRoomEntry({ commit, dispatch }, payload) {
       commit('setCurrentRoomEntry', payload);
       dispatch('showModal', 'edit-room-entry-wizard');
     },
-    showModal({commit}, payload) {
+    showModal({ commit }, payload) {
       document.body.classList.add('no-scroll'); // won't get at the body any other way
 
       commit('setModal', payload);
@@ -118,52 +118,52 @@ export default new Vuex.Store({
         commit('setModalReject', reject);
       });
     },
-    addProjectEntry({commit, dispatch}, payload) {
+    addProjectEntry({ commit, dispatch }, payload) {
       commit('setParentProject', payload);
       dispatch('showModal', 'new-project-entry-wizard');
     },
-    editProjectEntry({commit, dispatch}, payload) {
+    editProjectEntry({ commit, dispatch }, payload) {
       commit('setCurrentProjectEntry', payload);
       dispatch('showModal', 'edit-project-entry-wizard');
     },
-    addNote({commit, dispatch}, payload) {
+    addNote({ commit, dispatch }, payload) {
       if (payload.block) {
         commit('setCurrentNoteBlock', payload.block);
         commit('setCurrentContent', payload.content);
       } else {
         commit('setCurrentNoteParent', payload.parent);
       }
-      if(payload.type) {
+      if (payload.type) {
         commit('setNoteType', payload.type);
       }
       dispatch('showModal', 'new-note-wizard');
     },
-    editNote({commit, dispatch}, payload) {
+    editNote({ commit, dispatch }, payload) {
       commit('setCurrentNote', payload);
       dispatch('showModal', 'edit-note-wizard');
     },
-    showFullscreenImage({commit, dispatch}, payload) {
+    showFullscreenImage({ commit, dispatch }, payload) {
       commit('setImageUrl', payload);
       dispatch('showModal', 'fullscreen-image');
     },
-    showFullscreenInfographic({commit, dispatch}, payload) {
+    showFullscreenInfographic({ commit, dispatch }, payload) {
       commit('setInfographic', payload);
       dispatch('showModal', 'fullscreen-infographic');
     },
-    showFullscreenVideo({commit, dispatch}, payload) {
+    showFullscreenVideo({ commit, dispatch }, payload) {
       commit('setVimeoId', payload);
       dispatch('showModal', 'fullscreen-video');
     },
-    showMobileNavigation({commit}, payload) {
+    showMobileNavigation({ commit }, payload) {
       commit('setShowMobileNavigation', payload);
     },
-    scrollToAssignmentId({commit}, payload) {
+    scrollToAssignmentId({ commit }, payload) {
       commit('setScrollToAssignmentId', payload);
     },
-    scrollToAssignmentReady({commit}, payload) {
+    scrollToAssignmentReady({ commit }, payload) {
       commit('setScrollToAssignmentReady', payload);
     },
-    scrollingToAssignment({commit, state, dispatch}, payload) {
+    scrollingToAssignment({ commit, state, dispatch }, payload) {
       if (payload && !state.scrollingToAssignment) {
         commit('setScrollingToAssignment', true);
       }
@@ -173,19 +173,19 @@ export default new Vuex.Store({
         dispatch('scrollToAssignmentId', '');
       }
     },
-    editModule({commit}, payload) {
+    editModule({ commit }, payload) {
       commit('setEditModule', payload);
     },
-    editClassName({dispatch}) {
+    editClassName({ dispatch }) {
       dispatch('showModal', 'edit-class-name-wizard');
     },
-    editTeamName({dispatch}) {
+    editTeamName({ dispatch }) {
       dispatch('showModal', 'edit-team-name-wizard');
     },
-    deactivateUser({commit, dispatch}, payload) {
+    deactivateUser({ commit, dispatch }, payload) {
       commit('setModulePayload', payload);
       return dispatch('showModal', 'deactivate-person');
-    }
+    },
   },
 
   mutations: {
@@ -263,6 +263,6 @@ export default new Vuex.Store({
     },
     setModalReject(state, payload) {
       state.modalReject = payload;
-    }
-  }
+    },
+  },
 });
diff --git a/client/src/styles/_accessability.scss b/client/src/styles/_accessability.scss
index f58e2c69..19868fb4 100644
--- a/client/src/styles/_accessability.scss
+++ b/client/src/styles/_accessability.scss
@@ -5,7 +5,6 @@
   footer > * {
     transform: scale(0.8);
   }
-
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.76) {
diff --git a/client/src/styles/_buttons.scss b/client/src/styles/_buttons.scss
index 415004c3..7f364816 100644
--- a/client/src/styles/_buttons.scss
+++ b/client/src/styles/_buttons.scss
@@ -49,18 +49,18 @@
   border: 0;
   background: transparent;
 
-  & > &__icon { // need to be specific, to override local svg component styles
+  & > &__icon {
+    // need to be specific, to override local svg component styles
     @include default-icon;
     cursor: pointer;
     justify-self: center;
 
     &--subtle {
-       fill: $color-silver-dark;
+      fill: $color-silver-dark;
     }
 
     &--small {
       @include small-icon;
     }
-
   }
 }
diff --git a/client/src/styles/_default-layout.scss b/client/src/styles/_default-layout.scss
index 864f2acb..4f4b01db 100644
--- a/client/src/styles/_default-layout.scss
+++ b/client/src/styles/_default-layout.scss
@@ -1,4 +1,4 @@
-@import "~styles/helpers";
+@import '~styles/helpers';
 
 .layout {
   $footer-height: 287px;
@@ -15,14 +15,14 @@
     display: grid;
   }
   grid-template-rows: auto 1fr max-content;
-  grid-template-areas: "h" "c" "f";
+  grid-template-areas: 'h' 'c' 'f';
   min-height: 100vh;
   grid-auto-rows: 1fr;
 
   &--show-filter {
     grid-template-rows: auto auto 1fr $footer-height;
     -ms-grid-rows: 50px 50px 30px 1fr $footer-height; // 1 extra row for gap
-    grid-template-areas: "h" "." "c" "f";
+    grid-template-areas: 'h' '.' 'c' 'f';
   }
 
   /*
@@ -53,13 +53,12 @@
     }
   }
 
-
   &__footer {
     grid-area: f;
     // we usually set the margin to the bottom and the right, but here we want the footer to always have
     // this margin, and we don't want to set it on every content element. And we don't want to set it on
     // the content element, for if there's no footer.
-    margin-top: 3*$large-spacing;
+    margin-top: 3 * $large-spacing;
 
     padding: 0 $small-spacing;
 
diff --git a/client/src/styles/_forms.scss b/client/src/styles/_forms.scss
index acf7197e..ae23ccb9 100644
--- a/client/src/styles/_forms.scss
+++ b/client/src/styles/_forms.scss
@@ -1,4 +1,3 @@
-
 $icon-size: 20px;
 
 .skillbox-input {
@@ -7,7 +6,6 @@ $icon-size: 20px;
   &--error {
     border-color: $color-accent-3-dark;
   }
-
 }
 
 .skillbox-dropdown {
diff --git a/client/src/styles/_functions.scss b/client/src/styles/_functions.scss
index 43b0ae36..32887211 100644
--- a/client/src/styles/_functions.scss
+++ b/client/src/styles/_functions.scss
@@ -1,4 +1,4 @@
-@import "variables";
+@import 'variables';
 
 @function toRem($px) {
   //@return $px / $base-font-size-pixels * 1rem;
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index eb4ee833..38d52460 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -24,7 +24,7 @@
 }
 
 @mixin input-box-shadow {
-  border: 1px solid #DBDBDB;
+  border: 1px solid #dbdbdb;
   box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.15);
 }
 
@@ -42,7 +42,6 @@
     & .widget-footer {
       background-color: $color-accent-2-dark;
     }
-
   }
   &--red {
     background-color: $color-accent-3;
@@ -58,7 +57,6 @@
       background-color: $color-accent-4-dark;
     }
   }
-
 }
 
 @mixin content-box-base {
@@ -82,7 +80,7 @@
 
 @mixin desktop {
   @media (min-width: 1200px) {
-    @content
+    @content;
   }
 }
 
@@ -141,7 +139,6 @@
   }
 }
 
-
 @mixin button-border {
   border: 2px solid $color-silver-dark;
   border-radius: 3px;
@@ -159,7 +156,6 @@
   }
 }
 
-
 @mixin centered($width: 800px) {
   width: $width;
   max-width: 100%;
@@ -176,7 +172,6 @@
   }
 }
 
-
 @mixin form-with-border {
   @include input-box-shadow;
   background-color: $color-white;
@@ -253,7 +248,6 @@
   height: $small-icon-dimension;
 }
 
-
 @mixin list-parent {
   padding-left: $medium-spacing;
 }
diff --git a/client/src/styles/_nested-content-lists.scss b/client/src/styles/_nested-content-lists.scss
index 9c133d5e..e57ba528 100644
--- a/client/src/styles/_nested-content-lists.scss
+++ b/client/src/styles/_nested-content-lists.scss
@@ -1,7 +1,6 @@
 .content-list {
   /* https://stackoverflow.com/questions/1632005/ordered-list-html-lower-alpha-with-right-parentheses */
 
-
   // parent element needs to reset the counter-increment
   // either use this class, or use the attribute on it
   &__parent {
@@ -13,7 +12,7 @@
     position: relative;
     padding: 0 0 0 $large-spacing;
     &:before {
-      content: counter(content-items, lower-alpha) ")";
+      content: counter(content-items, lower-alpha) ')';
       counter-increment: content-items;
       position: absolute;
       font-weight: 600;
diff --git a/client/src/styles/_objective-group.scss b/client/src/styles/_objective-group.scss
index 162fd23a..b83ed931 100644
--- a/client/src/styles/_objective-group.scss
+++ b/client/src/styles/_objective-group.scss
@@ -20,5 +20,4 @@
       @include light-border(bottom);
     }
   }
-
 }
diff --git a/client/src/styles/_password_forms.scss b/client/src/styles/_password_forms.scss
index d7b4a076..40480484 100644
--- a/client/src/styles/_password_forms.scss
+++ b/client/src/styles/_password_forms.scss
@@ -1,5 +1,4 @@
 .skillboxform-input {
-
   margin-bottom: 20px;
   font-family: $sans-serif-font-family;
 
diff --git a/client/src/styles/_reset.scss b/client/src/styles/_reset.scss
index 4f1fd7fb..5e9bead6 100644
--- a/client/src/styles/_reset.scss
+++ b/client/src/styles/_reset.scss
@@ -4,19 +4,87 @@
 //  License: none (public domain)
 // adjusted by Ramon Wenger
 
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
   margin: 0;
   padding: 0;
   border: 0;
@@ -24,8 +92,17 @@ time, mark, audio, video {
 }
 
 // HTML5 display-role reset for older browsers
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
   display: block;
 }
 
@@ -33,17 +110,21 @@ body {
   line-height: normal;
 }
 
-ol, ul {
+ol,
+ul {
   list-style: none;
   margin: 0;
 }
 
-blockquote, q {
+blockquote,
+q {
   quotes: none;
 }
 
-blockquote:before, blockquote:after,
-q:before, q:after {
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
   content: '';
   content: none;
 }
diff --git a/client/src/styles/_room.scss b/client/src/styles/_room.scss
index e957922c..5388fc67 100644
--- a/client/src/styles/_room.scss
+++ b/client/src/styles/_room.scss
@@ -1,13 +1,13 @@
-@import "~styles/helpers";
+@import '~styles/helpers';
 
 .room {
   display: grid;
   grid-template-rows: 30px max-content 1fr;
   grid-template-columns: 1fr 1fr;
   grid-template-areas:
-    "b m"
-    "h h"
-    "c c";
+    'b m'
+    'h h'
+    'c c';
   margin-bottom: -90px;
   padding: $medium-spacing;
 
diff --git a/client/src/styles/_simple-list.scss b/client/src/styles/_simple-list.scss
index 543d33b4..73a36d8d 100644
--- a/client/src/styles/_simple-list.scss
+++ b/client/src/styles/_simple-list.scss
@@ -1,10 +1,10 @@
-@import "variables";
+@import 'variables';
 
 .simple-list {
   border-top: 1px solid $color-silver-dark;
 
   &--active {
-    margin-bottom: 2*$large-spacing;
+    margin-bottom: 2 * $large-spacing;
   }
 
   &__item {
diff --git a/client/src/styles/_student-submission.scss b/client/src/styles/_student-submission.scss
index a4edc392..ca98234e 100644
--- a/client/src/styles/_student-submission.scss
+++ b/client/src/styles/_student-submission.scss
@@ -1,4 +1,4 @@
-@import "~styles/helpers";
+@import '~styles/helpers';
 
 .student-submission-row {
   display: grid;
diff --git a/client/src/styles/_survey.scss b/client/src/styles/_survey.scss
index b1750b56..462eefa2 100644
--- a/client/src/styles/_survey.scss
+++ b/client/src/styles/_survey.scss
@@ -1,7 +1,7 @@
 .survey {
   &__page-title {
     @include main-title;
-    margin-bottom: $large-spacing*2;
+    margin-bottom: $large-spacing * 2;
 
     span {
       @include main-title;
@@ -15,7 +15,8 @@
     margin-bottom: $large-spacing;
     font-size: 1rem;
 
-    > span > span { // weird survey.js html structure
+    > span > span {
+      // weird survey.js html structure
       @include heading-4;
     }
   }
@@ -24,10 +25,10 @@
     @include heading-4;
     margin-bottom: $medium-spacing;
 
-    > span > span { // weird survey.js html structure
+    > span > span {
+      // weird survey.js html structure
       @include heading-4;
       line-height: $default-line-height;
-
     }
   }
 
@@ -76,11 +77,11 @@
       text-align: right;
       bottom: -2em;
       @include regular-text;
-
     }
   }
 
-  &__radiogroup-group, &__checkbox-group {
+  &__radiogroup-group,
+  &__checkbox-group {
     display: flex;
     flex-direction: column;
   }
@@ -92,7 +93,6 @@
 
     > span {
     }
-
   }
 
   &__error {
@@ -113,7 +113,6 @@
   &__matrix {
     width: 100%;
   }
-
 }
 
 @mixin table-row {
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index 224e995a..32ec4206 100644
--- a/client/src/styles/_typography.scss
+++ b/client/src/styles/_typography.scss
@@ -1,6 +1,6 @@
-@import "variables";
-@import "functions";
-@import "mixins";
+@import 'variables';
+@import 'functions';
+@import 'mixins';
 
 * {
   font-size: $base-font-size;
@@ -8,14 +8,19 @@
   color: $color-charcoal-dark;
 }
 
-h1, h2, h3, h4, h5 {
+h1,
+h2,
+h3,
+h4,
+h5 {
   font-family: $sans-serif-font-family;
   font-weight: 600;
-  color: $header-color
+  color: $header-color;
 }
 
-p, a, li {
-
+p,
+a,
+li {
   font-family: $serif-font-family;
   font-size: toRem(18px);
   font-weight: 300;
@@ -67,7 +72,10 @@ h5 {
   margin-bottom: $large-spacing;
 }
 
-input, textarea, select, button {
+input,
+textarea,
+select,
+button {
   font-family: $sans-serif-font-family;
   font-weight: $font-weight-regular;
   box-sizing: border-box;
@@ -87,4 +95,3 @@ input, textarea, select, button {
   font-family: $sans-serif-font-family;
   color: $color-brand-dark;
 }
-
diff --git a/client/src/styles/_uploadcare_overwrite.scss b/client/src/styles/_uploadcare_overwrite.scss
index 791301d4..3c0b05dd 100644
--- a/client/src/styles/_uploadcare_overwrite.scss
+++ b/client/src/styles/_uploadcare_overwrite.scss
@@ -1,4 +1,4 @@
-@import "variables";
+@import 'variables';
 
 .uploadcare--panel {
   background: $color-white;
diff --git a/client/src/styles/_variables.scss b/client/src/styles/_variables.scss
index c9929bca..bfab997e 100644
--- a/client/src/styles/_variables.scss
+++ b/client/src/styles/_variables.scss
@@ -3,32 +3,32 @@
 */
 
 /* accent */
-$color-accent-1-dark: #DAA009 !default;
-$color-accent-1: #FFB800 !default;
-$color-accent-1-light: #FFF5D9 !default;
-$color-accent-2-dark: #0F7CAC !default;
-$color-accent-2: #078CC6 !default;
-$color-accent-2-light: #DBEEF6 !default;
-$color-accent-3-dark: #D66655 !default;
-$color-accent-3: #FA715C !default;
-$color-accent-3-light: #FFEAE7 !default;
-$color-accent-4-dark: #99B53E !default;
-$color-accent-4: #AFD240 !default;
-$color-accent-4-light: #F3F9E3 !default;
-$color-accent-5-dark: #09496F !default;
-$color-accent-5: #004E7C !default;
-$color-accent-5: #DBE6EC !default;
+$color-accent-1-dark: #daa009 !default;
+$color-accent-1: #ffb800 !default;
+$color-accent-1-light: #fff5d9 !default;
+$color-accent-2-dark: #0f7cac !default;
+$color-accent-2: #078cc6 !default;
+$color-accent-2-light: #dbeef6 !default;
+$color-accent-3-dark: #d66655 !default;
+$color-accent-3: #fa715c !default;
+$color-accent-3-light: #ffeae7 !default;
+$color-accent-4-dark: #99b53e !default;
+$color-accent-4: #afd240 !default;
+$color-accent-4-light: #f3f9e3 !default;
+$color-accent-5-dark: #09496f !default;
+$color-accent-5: #004e7c !default;
+$color-accent-5: #dbe6ec !default;
 
 $color-accent-1-list: $color-accent-1 $color-accent-1-light $color-accent-1-dark;
 $color-accent-2-list: $color-accent-2 $color-accent-2-light $color-accent-2-dark;
 $color-accent-4-list: $color-accent-4 $color-accent-4-light $color-accent-4-dark;
 
 /* brand */
-$color-brand-dark: #138E72 !default;
-$color-brand: #17A887 !default;
-$color-brand-light: #DCF2ED !default;
+$color-brand-dark: #138e72 !default;
+$color-brand: #17a887 !default;
+$color-brand-light: #dcf2ed !default;
 
-$color-error: #C02108 !default;
+$color-error: #c02108 !default;
 
 /* greyscale */
 $color-silver: #d0d0d0 !default;
@@ -47,7 +47,7 @@ $header-color: $color-charcoal-dark;
 $intro-color: $color-silver-dark;
 
 $sans-serif-font-family: 'Montserrat', Arial, sans-serif;
-$serif-font-family: "ff-meta-serif-web-pro", serif;
+$serif-font-family: 'ff-meta-serif-web-pro', serif;
 $base-font-size: 100%; // 16px in most browsers
 $base-font-size-pixels: 16px; // used to calculate rem
 
diff --git a/client/src/styles/_visibility.scss b/client/src/styles/_visibility.scss
index 42d3f7cd..dc483bfd 100644
--- a/client/src/styles/_visibility.scss
+++ b/client/src/styles/_visibility.scss
@@ -14,4 +14,3 @@
     }
   }
 }
-
diff --git a/client/src/styles/_widget-popover.scss b/client/src/styles/_widget-popover.scss
index edeb0e1c..0923befb 100644
--- a/client/src/styles/_widget-popover.scss
+++ b/client/src/styles/_widget-popover.scss
@@ -1,5 +1,5 @@
-@import "variables";
-@import "mixins";
+@import 'variables';
+@import 'mixins';
 
 .widget-popover {
   position: absolute;
@@ -50,7 +50,6 @@
     flex-grow: 1;
     width: auto;
 
-
     & > a {
       @include popover-link;
     }
@@ -59,7 +58,8 @@
       line-height: 40px;
       padding: $small-spacing $medium-spacing;
 
-      & > a, & {
+      & > a,
+      & {
         @include small-text;
       }
     }
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index 63e67cdf..dc789999 100644
--- a/client/src/styles/main.scss
+++ b/client/src/styles/main.scss
@@ -3,29 +3,29 @@
   - https://css-tricks.com/bem-101/
   - https://seesparkbox.com/foundry/bem_by_example
  */
-@import "reset";
-@import "typography";
-@import "helpers";
-@import "default-layout";
-@import "buttons";
-@import "forms";
-@import "uploadcare_overwrite";
-@import "help-text";
-@import "objective-group";
-@import "article";
-@import "actions";
-@import "navigation";
-@import "survey";
-@import "visibility";
-@import "solutions";
-@import "password_forms";
-@import "public-page";
-@import "student-submission";
-@import "module-activity";
-@import "info-header";
-@import "book-subnavigation";
-@import "simple-list";
-@import "widget-popover";
-@import "intro";
-@import "nested-content-lists";
-@import "accessability";
+@import 'reset';
+@import 'typography';
+@import 'helpers';
+@import 'default-layout';
+@import 'buttons';
+@import 'forms';
+@import 'uploadcare_overwrite';
+@import 'help-text';
+@import 'objective-group';
+@import 'article';
+@import 'actions';
+@import 'navigation';
+@import 'survey';
+@import 'visibility';
+@import 'solutions';
+@import 'password_forms';
+@import 'public-page';
+@import 'student-submission';
+@import 'module-activity';
+@import 'info-header';
+@import 'book-subnavigation';
+@import 'simple-list';
+@import 'widget-popover';
+@import 'intro';
+@import 'nested-content-lists';
+@import 'accessability';
diff --git a/client/src/styles/survey.defaultV2.css b/client/src/styles/survey.defaultV2.css
index 79b44d90..6f4b7ef7 100644
--- a/client/src/styles/survey.defaultV2.css
+++ b/client/src/styles/survey.defaultV2.css
@@ -3,4 +3,3438 @@
  * Copyright (c) 2015-2022 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
-@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;src:local("Open Sans Semibold"),local("OpenSans-Semibold"),url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;src:local("Open Sans Bold"),local("OpenSans-Bold"),url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFW50bbck.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.svc-logic-question-value,.sd-element--with-frame:not(.sd-element--collapsed){border-radius:calc(0.5 * var(--base-unit, 8px));box-sizing:border-box;padding-left:var(--sd-base-padding);padding-right:var(--sd-base-padding);padding-bottom:var(--sd-base-padding);background:var(--background, #fff);box-shadow:0px 1px 2px rgba(0,0,0,.15)}.svc-logic-question-value>.sd-question__erbox--outside-question,.sd-element--with-frame:not(.sd-element--collapsed)>.sd-question__erbox--outside-question{margin-left:calc(-1*var(--sd-base-padding));margin-right:calc(-1*var(--sd-base-padding));width:calc(100% + 2*var(--sd-base-padding))}.svc-logic-question-value.sd-question--paneldynamic,.sd-element--with-frame:not(.sd-element--collapsed).sd-question--paneldynamic{padding-bottom:0}.svc-logic-question-value.sd-question--paneldynamic>.sd-question__erbox--below-question,.sd-element--with-frame:not(.sd-element--collapsed).sd-question--paneldynamic>.sd-question__erbox--below-question{bottom:0;margin-top:0}.sd-element--with-frame>.sd-question__erbox--above-question{margin-top:calc(-1*var(--sd-base-vertical-padding))}.svc-logic-question-value,.sd-element:not(.sd-element--collapsed){padding-top:var(--sd-base-vertical-padding)}.sd-table__cell--detail-panel .sd-element:not(.sd-element--collapsed){padding-top:calc(0.5 * var(--base-unit, 8px))}.sd-element.sd-element--complex{padding-top:0}.sd-element--expanded>.sd-element__header,.sd-element--collapsed>.sd-element__header{cursor:pointer}.sd-element--collapsed>.sd-element__header{padding:calc(2 * var(--base-unit, 8px)) var(--sd-base-padding);box-sizing:border-box;background-color:var(--background, #fff)}.sd-element--collapsed.sd-element--with-frame>.sd-element__header{box-shadow:0px 1px 2px rgba(0,0,0,.15);border-radius:calc(0.5 * var(--base-unit, 8px))}.sd-element--collapsed>.sd-element__header:focus-within,.sd-element--collapsed>.sd-element__header:hover{background-color:var(--background-dim-light, #f9f9f9)}.sd-element__title{outline:none}.sd-element__title.sd-element__title--disabled{opacity:.25}.sd-root--readonly .sd-element__title.sd-element__title--disabled{opacity:1}.sd-element--collapsed:not(.sd-element--with-frame)>.sd-element__header{margin-left:calc(-1*var(--sd-base-padding));width:calc(100% + 2*var(--sd-base-padding))}.sd-element--complex:not(.sd-element--collapsed)>.sd-element__header--location-top{padding-top:var(--sd-base-vertical-padding);padding-bottom:var(--sd-base-vertical-padding)}.sd-element--complex:not(.sd-element--collapsed)>.sd-element__header--location-top:after{content:" ";display:block;position:relative;bottom:calc(-1*var(--sd-base-vertical-padding));height:1px;background:var(--border-light, #eaeaea)}.sd-element--complex.sd-element--with-frame>.sd-element__header--location-top:after{content:" ";left:calc(-1*var(--sd-base-padding));width:calc(100% + 2*var(--sd-base-padding))}.sd-element--nested.sd-element--complex>.sd-element__header--location-top{padding-bottom:calc(.5*var(--sd-base-vertical-padding))}.sd-element--nested.sd-element--complex>.sd-element__header--location-top:after{bottom:calc(-0.5*var(--sd-base-vertical-padding))}.sd-element--nested.sd-panel,.sd-element--nested.sd-question--paneldynamic{border:1px solid var(--border-light, #eaeaea);box-sizing:border-box;padding-left:var(--sd-base-padding);padding-right:var(--sd-base-padding);margin-top:var(--sd-base-vertical-padding)}.sd-element--nested.sd-panel>.sd-element__header--location-top,.sd-element--nested.sd-question--paneldynamic>.sd-element__header--location-top{padding-top:calc(.5*var(--sd-base-vertical-padding));padding-bottom:calc(.5*var(--sd-base-vertical-padding))}.sd-element--nested.sd-panel>.sd-element__header--location-top:after,.sd-element--nested.sd-question--paneldynamic>.sd-element__header--location-top:after{left:calc(-1*var(--sd-base-padding));width:calc(100% + 2*var(--sd-base-padding));bottom:calc(-0.5*var(--sd-base-vertical-padding))}.sd-element--nested.sd-panel>.sd-question__erbox--outside-question,.sd-element--nested.sd-question--paneldynamic>.sd-question__erbox--outside-question{margin-left:calc(-1*var(--sd-base-padding));margin-right:calc(-1*var(--sd-base-padding));width:calc(100% + 2*var(--sd-base-padding))}.sd-element--nested.sd-panel>.sd-question__erbox--below-question,.sd-element--nested.sd-question--paneldynamic>.sd-question__erbox--below-question{bottom:0;margin-top:0}.sd-element--nested.sd-panel:not(.sd-element--collapsed){padding-bottom:var(--sd-base-padding)}.svc-question__content .sd-element{padding-top:0}.svc-question__content .sd-element--complex>.sd-element__header--location-top{padding-bottom:calc(.5*var(--sd-base-vertical-padding));padding-top:0}.svc-question__content .sd-element--complex>.sd-element__header--location-top:after{display:none}.sd-element--invisible{opacity:.35}.sd-element__title{font-size:0;line-height:0;position:static;font-weight:600;margin:0}.sd-element__title .sd-element__num{font-size:calc(1.5 * var(--base-unit, 8px));line-height:calc(2 * var(--base-unit, 8px))}.sd-element__title span{font-size:calc(2 * var(--base-unit, 8px));line-height:calc(3 * var(--base-unit, 8px))}.sd-element__title .sv-title-actions__title{font-size:0;line-height:0}.sd-element__title .svc-string-editor{display:inline-block;max-width:100%}.sd-element__title .sv-string-editor{max-width:100%;white-space:normal}.sd-element__title .sv-title-actions__title{white-space:nowrap}.sd-element__title .sv-string-viewer{white-space:normal}.sd-element__num{float:left;padding:calc(0.625 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px)) calc(0.375 * var(--base-unit, 8px));width:calc(4 * var(--base-unit, 8px));font-size:calc(1.5 * var(--base-unit, 8px));line-height:calc(2 * var(--base-unit, 8px));color:var(--foreground-light, #909090);margin-inline-start:calc(-4 * var(--base-unit, 8px));text-align:right;box-sizing:border-box;white-space:nowrap;flex-shrink:0}.sd-element__num+span{float:left;width:0}div:not(:only-of-type)>.sd-element:not(.sd-question--paneldynamic)>.sd-question__header .sd-action-bar,.sd-element__title--expandable .sd-action-bar{margin-right:0}div:not(:only-of-type)>.sd-element:not(.sd-question--paneldynamic)>.sd-question__header .sd-element__num,.sd-element__title--expandable .sd-element__num{float:none;margin-left:0;width:auto;padding-left:0;padding-right:0}div:not(:only-of-type)>.sd-element:not(.sd-question--paneldynamic)>.sd-question__header .sd-element__num+span,.sd-element__title--expandable .sd-element__num+span{float:none;width:auto}.sd-element__title--expandable.sd-element__title--expandable{position:relative;display:block}.sd-element__title--expandable:before{content:"";display:inline-block;background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 14L5 13L10 8L5 3L6 2L12 8L6 14Z' fill='%23909090'/%3E%3C/svg%3E%0A");background-repeat:no-repeat;background-position:center center;height:calc(2 * var(--base-unit, 8px));width:calc(2 * var(--base-unit, 8px));position:absolute;left:calc(-3 * var(--base-unit, 8px));top:calc(0.5 * var(--base-unit, 8px))}.sd-element__title--expandable.sd-element__title--expanded:before{transform:rotate(90deg)}.sd-question{position:relative}.sd-question__erbox{padding:calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px));border-radius:calc(0.5 * var(--base-unit, 8px));font-weight:600;line-height:calc(2 * var(--base-unit, 8px));font-size:calc(1.5 * var(--base-unit, 8px));white-space:normal;text-align:left}.sd-question__erbox--outside-question{width:100%;color:var(--red, #e60a3e);background-color:var(--red-light, rgba(230, 10, 62, 0.1));box-sizing:border-box}.sd-question__erbox--above-question{border-radius:calc(0.5 * var(--base-unit, 8px)) calc(0.5 * var(--base-unit, 8px)) 0 0;margin-bottom:calc(var(--sd-base-vertical-padding) - var(--base-unit, 8px))}.sd-question__erbox--below-question{margin-top:calc(1 * var(--base-unit, 8px))}.sd-element--with-frame>.sd-question__erbox--below-question{position:relative;margin-top:0;bottom:calc(-1*var(--sd-base-padding));border-radius:0 0 calc(0.5 * var(--base-unit, 8px)) calc(0.5 * var(--base-unit, 8px))}.sd-root-modern--mobile .sd-question__erbox--below-question{margin-top:calc(1 * var(--base-unit, 8px))}.sd-question__header{width:100%}.sd-question__header--location-top{padding-bottom:calc(.5*var(--sd-base-vertical-padding))}.sd-scrollable .sd-question__content{overflow-x:auto;padding:calc(2 * var(--base-unit, 8px)) 0}.sd-question__header--location--left{display:inline-block;width:auto;max-width:50%;vertical-align:top;margin-top:calc(1.5 * var(--base-unit, 8px))}.sd-question--left{display:flex}.sd-question__content--left{display:inline-block;padding-left:calc(3 * var(--base-unit, 8px));flex:1}.sd-question__required-text{color:var(--red, #e60a3e);vertical-align:top}.sd-question__form-group{margin-top:calc(2 * var(--base-unit, 8px))}.sd-question__erbox--tooltip{display:none;position:fixed;height:auto;width:auto;max-width:calc(29 * var(--base-unit, 8px));background-color:var(--background, #fff);color:var(--foreground, #161616);opacity:.75;box-shadow:0px 2px 6px rgba(0,0,0,.1);z-index:1000}.sd-question__content:hover:not(:focus-within)>.sd-question__erbox--tooltip{display:block}.sd-question__erbox--location--top,.sd-question__erbox--location--bottom{display:block;color:var(--red, #e60a3e);padding-left:0;padding-right:0;text-align:left}.sd-question--complex .sd-question__erbox--above-question{margin-top:0}.sd-question--complex .sd-question__erbox--above-question~.sd-question__header--location-top{padding-top:calc(1 * var(--base-unit, 8px))}.sd-question--empty.sd-question--complex>.sd-question__header--location-top{padding-bottom:calc(.5*var(--sd-base-vertical-padding))}.sd-question--empty.sd-question--complex>.sd-question__header--location-top:after{display:none}.sd-question__placeholder{display:flex;flex-direction:column;align-items:center;text-align:center;gap:calc(0.5 * var(--base-unit, 8px));justify-content:center;min-height:calc(24 * var(--base-unit, 8px));line-height:calc(3 * var(--base-unit, 8px));font-size:calc(2 * var(--base-unit, 8px));color:var(--foreground-light, #909090)}.sd-question__placeholder>div .sv-string-viewer,.sd-question__placeholder>span .sv-string-viewer{white-space:pre-line}.sd-question--empty.sd-question--complex>.sd-question__content{padding-top:0;padding-bottom:0}.sd-question--empty.sd-question--complex>.sd-question__content:first-child{padding-top:var(--sd-base-padding)}.sd-scrollable-container:not(.sd-scrollable-container--compact){width:max-content;overflow-x:hidden;max-width:100%}.sd-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:static;width:100%;height:calc(6 * var(--base-unit, 8px));box-sizing:border-box;padding:calc(1.5 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));line-height:calc(3 * var(--base-unit, 8px));font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:calc(2 * var(--base-unit, 8px));color:var(--foreground, #161616);background-color:var(--background-dim-light, #f9f9f9);box-shadow:inset 0px 1px 2px rgba(0,0,0,.15);border:none;border-radius:3px;text-align:left}.sd-input.sd-input:focus{outline:none}.sd-input--disabled{background-color:var(--background-dim-light, #f9f9f9);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sd-input::placeholder{color:var(--foreground-light, #909090);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.sd-input--disabled,.sd-input--disabled::placeholder{color:var(--foreground-disabled, rgba(22, 22, 22, 0.25))}.sd-root--readonly .sd-input--disabled,.sd-root--readonly .sd-input--disabled::placeholder{color:var(--foreground, #161616)}.sd-input:focus{box-shadow:0 0 0 2px var(--primary, #19b394),inset 0px 1px 2px var(--border-inside, rgba(0, 0, 0, 0.16))}.sd-input--error{background-color:var(--red-light, rgba(230, 10, 62, 0.1))}.sd-comment{display:block;height:auto;min-width:calc(6 * var(--base-unit, 8px));min-height:calc(6 * var(--base-unit, 8px));max-width:100%}.sd-panel{position:relative}.sd-panel .sd-row{margin-top:calc(1 * var(--base-unit, 8px))}.sd-panel .sd-row:first-of-type{margin-top:0}.sd-panel__required-text{color:var(--red, #e60a3e)}.sd-panel__footer{box-sizing:border-box;padding-left:calc(var(--sd-base-padding) - 3 * var(--base-unit, 8px));margin-left:calc(-1*var(--sd-base-padding));width:calc(100% + 2*var(--sd-base-padding));margin-bottom:calc(-1*var(--sd-base-padding) + .5*var(--sd-base-vertical-padding));margin-top:calc(.5*var(--sd-base-vertical-padding));border-top:1px solid var(--border-light, #eaeaea);padding-top:calc(.5*var(--sd-base-vertical-padding))}.sjs_sp_placeholder{color:var(--foreground-light, #909090)}.sjs_sp_container{border:1px dashed var(--border, #d6d6d6)}.sjs_sp_controls.sd-signaturepad__controls{right:calc(1 * var(--base-unit, 8px));top:calc(1 * var(--base-unit, 8px));left:auto;bottom:auto}.sd-question--signature:not(.sd-question--answered) .sd-signaturepad__controls{display:none}.sd-question--signature.sd-question--error .sjs_sp_placeholder{background-color:var(--red-light, rgba(230, 10, 62, 0.1))}.sd-checkbox__decorator{border-radius:3px}.sd-checkbox__svg{display:none;width:calc(2.5 * var(--base-unit, 8px));height:calc(2.5 * var(--base-unit, 8px))}.sd-checkbox--checked .sd-checkbox__svg{display:block}.sd-checkbox--checked .sd-checkbox__svg use{fill:var(--primary-foreground, #fff)}.sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__svg use{fill:var(--border, #d6d6d6)}.sd-checkbox--checked .sd-checkbox__control:focus+.sd-checkbox__decorator .sd-checkbox__svg use{fill:var(--primary, #19b394)}.sd-matrixdynamic__btn.sd-matrixdynamic__add-btn{position:sticky;left:calc(-3 * var(--base-unit, 8px));margin-left:calc(-3 * var(--base-unit, 8px));z-index:12}.sd-matrixdynamic__footer:first-child{padding-bottom:calc(2 * var(--base-unit, 8px))}.sd-matrixdynamic__footer{padding-top:calc(1 * var(--base-unit, 8px))}.sd-action.sd-matrixdynamic__remove-btn{opacity:.5}.sd-matrixdynamic__btn{appearance:none;background:rgba(0,0,0,0);border:none;line-height:calc(3 * var(--base-unit, 8px));font-size:calc(2 * var(--base-unit, 8px));font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:600;padding:calc(1 * var(--base-unit, 8px)) 0}.sd-matrixdynamic__drag-element{padding:calc(2 * var(--base-unit, 8px))}.sd-matrixdynamic__drag-element:hover{background-color:var(--background, #fff)}.sd-matrixdynamic__drag-element:after{content:" ";display:block;height:calc(0.5 * var(--base-unit, 8px));width:calc(2 * var(--base-unit, 8px));border:1px solid var(--border, #d6d6d6);box-sizing:border-box;border-radius:10px}.sd-matrixdynamic__placeholder .sd-matrixdynamic__add-btn{margin-left:0}.sd-drag-element__svg{width:calc(2 * var(--base-unit, 8px));height:calc(2 * var(--base-unit, 8px));display:block}.sd-drag-element__svg use{fill:var(--foreground-light, #909090)}.sd-table{width:100%;background-color:var(--background, #fff);border-collapse:collapse;white-space:normal}.sd-table--align-top .sd-table__cell{vertical-align:top}.sd-table--alternate-rows .sd-table__row:nth-of-type(odd)>td,.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type{background-color:var(--background-dim-light, #f9f9f9)}.sd-table--alternate-rows .sd-table__row:nth-of-type(odd)>td .sd-input,.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-input{background-color:var(--primary-foreground, #fff)}.sd-table--alternate-rows .sd-table__row:nth-of-type(odd)>td .sd-item__decorator,.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item__decorator{--sd-item-default-background: $primary-foreground}.sd-table__cell{font-weight:normal;font-size:calc(2 * var(--base-unit, 8px));line-height:calc(3 * var(--base-unit, 8px));padding:calc(1 * var(--base-unit, 8px));color:var(--foreground, #161616);text-align:center}.sd-question--disabled .sd-table__cell{opacity:.25}.sd-root--readonly .sd-question--disabled .sd-table__cell{opacity:1}.sd-table__cell--header{font-weight:600;vertical-align:top;padding:calc(1.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px)) calc(2.5 * var(--base-unit, 8px))}.sd-table__cell--header:not(.sd-table__cell--empty){min-width:calc(14 * var(--base-unit, 8px))}.sd-matrixdropdown .sd-table__cell--header.sd-table__cell--empty{min-width:calc(14 * var(--base-unit, 8px));width:calc(14 * var(--base-unit, 8px))}.sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty){min-width:calc(14 * var(--base-unit, 8px));width:calc(14 * var(--base-unit, 8px))}.sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty).sd-table__cell--dropdown,.sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty).sd-table__cell--rating{min-width:calc(22 * var(--base-unit, 8px));width:calc(22 * var(--base-unit, 8px))}.sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty).sd-table__cell--boolean{min-width:calc(18 * var(--base-unit, 8px));width:calc(18 * var(--base-unit, 8px))}.sd-table__cell--detail-panel{padding:0 calc(1 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px))}.sd-table__cell--actions .sv-action-bar,.sd-matrixdynamic__add-btn .sv-action-bar{overflow:visible}.sd-table__cell--actions .svc-string-editor__button--done,.sd-matrixdynamic__add-btn .svc-string-editor__button--done{width:calc(2 * var(--base-unit, 8px))}.svc-question__content .sd-table__cell--actions .sv-action-bar-item:disabled{background:var(--background, #fff);opacity:1}.svc-question__content .sd-table__cell--actions .sv-action-bar-item:disabled use{fill:var(--foreground-light, #909090)}.sd-table__cell--actions:not(.sd-table__cell--vertical){width:0}.sd-table__cell--detail-button{border:none;background:rgba(0,0,0,0);border-radius:calc(2 * var(--base-unit, 8px));width:calc(4 * var(--base-unit, 8px));height:calc(4 * var(--base-unit, 8px));padding:calc(1 * var(--base-unit, 8px))}.sd-table__cell--detail-button svg{width:calc(2 * var(--base-unit, 8px));height:calc(2 * var(--base-unit, 8px));fill:var(--foreground-light, #909090)}.sd-table__cell--detail-button:hover{background:var(--green-light, rgba(25, 179, 148, 0.1))}.sd-table__cell--detail-button:hover svg{fill:var(--primary, #19b394)}.sd-table__cell--actions{white-space:nowrap}.sd-table__cell--actions.sd-table__cell--vertical .sd-action-bar{justify-content:center}.sd-table__cell--row-text{font-weight:600;text-align:left;min-width:calc(12 * var(--base-unit, 8px));padding:calc(2.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px))}.sd-table__question-wrapper:not(:focus-within):hover{position:relative}.sd-table__question-wrapper:not(:focus-within):hover .sd-question__erbox--tooltip{display:inline-block}.sd-table__cell--actions:not(.sd-table__cell--vertical),.sd-table__cell--empty,.sd-table__cell--row-text,.sd-matrix__cell:first-of-type,.sd-matrix tr>td:first-of-type{position:sticky;background:var(--background, #fff);z-index:12}.sd-table__cell--actions:not(.sd-table__cell--vertical):first-of-type,.sd-table__cell--empty:first-of-type,.sd-table__cell--row-text:first-of-type,.sd-matrix__cell:first-of-type:first-of-type,.sd-matrix tr>td:first-of-type:first-of-type{left:calc(-1 * var(--base-unit, 8px))}.sd-table__cell--actions:not(.sd-table__cell--vertical):last-of-type,.sd-table__cell--empty:last-of-type,.sd-table__cell--row-text:last-of-type,.sd-matrix__cell:first-of-type:last-of-type,.sd-matrix tr>td:first-of-type:last-of-type{right:calc(-1 * var(--base-unit, 8px))}.sd-table__cell--actions:not(.sd-table__cell--vertical):last-child .sd-action-bar{margin-right:calc(-3 * var(--base-unit, 8px));justify-content:flex-end;background:var(--background, #fff)}.sd-question.sd-question--table{position:relative;overflow-x:auto}.sd-question--table>.sd-question__content{display:flex;padding-top:calc(2.5 * var(--base-unit, 8px));margin:0 calc(-1*var(--sd-base-padding));width:fit-content;min-width:calc(100% + 2*var(--sd-base-padding))}.sd-question--table>.sd-question__content:before,.sd-question--table>.sd-question__content:after{content:"";display:block;position:sticky;min-height:100%;width:calc(var(--sd-base-padding) - var(--base-unit, 8px));flex-shrink:0;background:var(--background, #fff);z-index:11}.sd-question--table>.sd-question__content::before{left:calc(-1*var(--sd-base-padding))}.sd-question--table>.sd-question__content:after{right:calc(-1*var(--sd-base-padding))}.sd-question--table>.sd-question__content>div{flex-basis:100%}.sd-question--table>.sd-question__header{position:sticky;left:0}.sd-question--table:not(.sd-element--with-frame){padding-right:var(--sd-base-padding);margin-right:calc(-1*var(--sd-base-padding));padding-left:var(--sd-base-padding);margin-left:calc(-1*var(--sd-base-padding));box-sizing:content-box}.sd-question--scroll{overflow-x:scroll}.sd-matrixdropdown.sd-table{table-layout:fixed}.sd-body--responsive .sd-page{padding:calc(5 * var(--base-unit, 8px)) var(--sd-page-vertical-padding) calc(2 * var(--base-unit, 8px))}.sd-body--responsive .sd-page.sd-page__empty-header{padding-top:calc(3 * var(--base-unit, 8px))}.sd-root-modern--mobile .sd-page{padding-top:calc(2 * var(--base-unit, 8px))}.sd-page{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:calc(5 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));width:100%;box-sizing:border-box}.sd-page__title{position:static;font-size:calc(3 * var(--base-unit, 8px));line-height:calc(4 * var(--base-unit, 8px));margin:calc(0.5 * var(--base-unit, 8px)) 0px}.sd-page__description{position:static;font-size:calc(2 * var(--base-unit, 8px));line-height:calc(3 * var(--base-unit, 8px));margin:calc(0.5 * var(--base-unit, 8px)) 0px}.sd-row{display:flex;flex-direction:row;width:100%;box-sizing:border-box;margin-top:calc(2 * var(--base-unit, 8px))}.sd-page__row.sd-row--multiple,.svc-row>.sd-row--multiple{background:var(--background, #fff);box-shadow:0px 1px 2px rgba(0,0,0,.15);border-radius:calc(0.5 * var(--base-unit, 8px))}:not(.svc-row)>.sd-row--multiple{row-gap:calc(1 * var(--base-unit, 8px));margin-left:calc(-2 * var(--base-unit, 8px));width:calc(100% + 2 * var(--base-unit, 8px));flex-wrap:wrap}:not(.svc-row)>.sd-row--multiple>div{box-sizing:border-box;padding-left:calc(2 * var(--base-unit, 8px))}:not(.svc-row)>.sd-page__row.sd-row--multiple{padding:0 var(--sd-base-padding) var(--sd-base-padding) calc(var(--sd-base-padding) - 2 * var(--base-unit, 8px));margin-left:0;width:100%}.svc-row .sd-row--multiple{overflow:auto;margin-top:calc(2 * var(--base-unit, 8px))}.svc-row--multiple .sd-row--multiple{gap:calc(1 * var(--base-unit, 8px))}:not(.svc-row--ghost)>.sd-row{min-height:50px}.sd-row__panel{box-sizing:border-box;width:100%}.sd-row__question{box-sizing:border-box;width:100%;white-space:nowrap}.svc-tab-designer .sd-title{display:flex}.sd-title{display:block;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;color:var(--foreground, #161616);flex-direction:row;white-space:normal;word-break:break-word}.sd-title.sd-container-modern__title{display:flex;align-items:center;padding:var(--sd-page-vertical-padding) var(--sd-page-vertical-padding);overflow:auto;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;gap:calc(4 * var(--base-unit, 8px));box-shadow:0px 2px 0px var(--primary, #19b394)}.sd-title.sd-container-modern__title .sd-logo__image{margin-top:calc(1 * var(--base-unit, 8px))}.sd-header__text{display:flex;flex-direction:column;gap:calc(1 * var(--base-unit, 8px));flex-grow:1}.sd-header__text h3{font-size:calc(4 * var(--base-unit, 8px));font-weight:700;line-height:calc(5 * var(--base-unit, 8px));color:var(--primary, #19b394)}.sd-header__text h5{font-size:calc(2 * var(--base-unit, 8px));font-weight:400;line-height:calc(3 * var(--base-unit, 8px))}.sd-title .sv-title-actions{width:100%;justify-content:space-between}.sd-root-modern:not(.svc-tab-designer) .sd-container-modern__title{background-color:var(--background, #fff)}.sd-root-modern .sd-container-modern__title .sd-header__text h3{margin:0}.sd-root-modern .sd-container-modern__title .sd-description{margin:0}.sd-title .sv-title-actions{align-items:flex-start;width:calc(100% + 3 * var(--base-unit, 8px))}.sd-title .sv-title-actions .sv-title-actions__title{flex-wrap:wrap;flex:0 1 auto;max-width:calc(100% - 3 * var(--base-unit, 8px));white-space:initial;min-width:unset}.sd-action-title-bar{flex:1 9 auto;min-width:calc(6 * var(--base-unit, 8px));justify-content:flex-end;margin:calc(-1 * var(--base-unit, 8px)) 0}.sd-action-title-bar .sv-action{flex:0 0 auto}.sd-action-title-bar.sd-action-bar--empty{min-width:0}.sd-description{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-weight:normal;color:var(--foreground-light, #909090);white-space:normal;word-break:break-word}.sd-item{padding:calc(1.5 * var(--base-unit, 8px)) 0}.sd-item--disabled.sd-item--disabled .sd-item__decorator,.sd-item__decorator{display:flex;align-items:center;justify-content:center;width:calc(3 * var(--base-unit, 8px));height:calc(3 * var(--base-unit, 8px));box-sizing:border-box;box-shadow:inset 0px 1px 2px var(--border-inside, rgba(0, 0, 0, 0.16));background:var(--sd-item-default-background, var(--background-dim-light, #f9f9f9));box-shadow:inset 0px 1px 2px rgba(0,0,0,.15);border:none;flex-shrink:0}.sd-item--checked .sd-item__decorator{box-shadow:none}.sd-item__control:focus+.sd-item__decorator,.sd-item--allowhover .sd-selectbase__label:hover .sd-item__decorator{box-shadow:0 0 0 2px var(--primary, #19b394);outline:none}.sd-item__control:focus+.sd-item__decorator,.sd-item--allowhover .sd-selectbase__label:hover .sd-item__decorator{background:var(--background, #fff)}.sd-item--checked .sd-item__decorator{background:var(--primary, #19b394)}.sd-item__control-label{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-weight:normal;line-height:calc(3 * var(--base-unit, 8px));font-size:calc(2 * var(--base-unit, 8px));color:var(--foreground, #161616);white-space:normal;word-break:break-word;width:100%;text-align:left}.sd-item--disabled .sd-item__control-label{color:var(--foreground-disabled, rgba(22, 22, 22, 0.25))}.sd-root--readonly .sd-item--disabled .sd-item__control-label{color:var(--foreground, #161616)}.sd-item--error .sd-item__decorator{background:var(--red-light, rgba(230, 10, 62, 0.1))}.sd-selectbase{border:none;margin:0;padding:0}.sd-selectbase--row{border:none;margin:0;padding:0;display:flex;flex-wrap:wrap;column-gap:calc(4 * var(--base-unit, 8px))}.sd-selectbase--multi-column{display:flex;flex:1 1 0px}.sd-selectbase__label{display:flex;position:relative;gap:calc(1 * var(--base-unit, 8px))}.sd-selectbase__column{vertical-align:top}.sd-selectbase__column{display:block;box-sizing:border-box;word-break:break-word;flex:1 1 0px}.sd-selectbase__column:not(:last-child){padding-right:calc(2 * var(--base-unit, 8px))}.sd-selectbase__column.sv-q-column-1{width:100%}.sd-selectbase__other{margin-top:calc(2 * var(--base-unit, 8px))}.sd-selectbase__item .sd-selectbase__other{margin-top:calc(3.5 * var(--base-unit, 8px))}.sd-selectbase__item:last-child .sd-selectbase__other{margin-bottom:calc(-2 * var(--base-unit, 8px))}.sd-checkbox__decorator{border-radius:3px}.sd-checkbox__svg{display:none;width:calc(2.5 * var(--base-unit, 8px));height:calc(2.5 * var(--base-unit, 8px))}.sd-checkbox--checked .sd-checkbox__svg{display:block}.sd-checkbox--checked .sd-checkbox__svg use{fill:var(--primary-foreground, #fff)}.sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__svg use{fill:var(--border, #d6d6d6)}.sd-checkbox--checked .sd-checkbox__control:focus+.sd-checkbox__decorator .sd-checkbox__svg use{fill:var(--primary, #19b394)}.sd-radio__decorator{border-radius:50%}.sd-radio--checked .sd-radio__decorator:after{content:" ";display:block;width:calc(1 * var(--base-unit, 8px));height:calc(1 * var(--base-unit, 8px));border-radius:50%;background-color:var(--primary-foreground, #fff)}.sd-radio--checked.sd-radio--disabled .sd-radio__decorator:after{background-color:var(--border, #d6d6d6)}.sd-radio--checked .sd-radio__control:focus+.sd-radio__decorator:after{background-color:var(--primary, #19b394)}.sd-radio__svg{display:none}.sd-visuallyhidden{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px)}.sd-matrix fieldset{border:none;padding:0;margin:0}.sd-matrix__label{display:flex;justify-content:center}.sd-matrix__text{padding:calc(2 * var(--base-unit, 8px))}.sd-matrix__text--checked{background-color:var(--primary-light, rgba(25, 179, 148, 0.1));padding:calc(2 * var(--base-unit, 8px))}.sd-matrix__cell:first-of-type{font-weight:600;text-align:left}.sd-rating{overflow-x:auto;min-height:calc(8 * var(--base-unit, 8px))}.sd-rating fieldset{display:flex;border:none;padding:0 0 calc(2 * var(--base-unit, 8px)) 0;flex-wrap:nowrap;gap:calc(1 * var(--base-unit, 8px))}.sd-rating.sd-rating--wrappable fieldset{flex-wrap:wrap}.sd-rating__item{position:relative;background:var(--background, #fff);box-shadow:0px 1px 2px rgba(0,0,0,.15);border-radius:calc(12.5 * var(--base-unit, 8px));white-space:nowrap;padding:calc(1.25 * var(--base-unit, 8px));box-sizing:border-box;min-width:calc(6 * var(--base-unit, 8px));text-align:center;border:2px solid var(--background, #fff);color:var(--foreground, #161616)}.sd-rating__item--error{background-color:var(--red-light, rgba(230, 10, 62, 0.1));box-shadow:0px 1px 2px rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.sd-rating__item.sd-rating__item--disabled{color:var(--foreground-disabled, rgba(22, 22, 22, 0.25))}.sd-rating__item.sd-rating__item--selected.sd-rating__item--disabled{color:var(--primary-foreground-disabled, rgba(255, 255, 255, 0.25))}.sd-rating__item--allowhover:hover,.sd-rating__item:focus-within{border-color:var(--primary, #19b394)}.sd-rating__item--selected{background-color:var(--primary, #19b394);border-color:var(--primary, #19b394);color:var(--primary-foreground, #fff)}.sd-rating__item--selected:focus-within{box-shadow:inset 0 0 0 2px var(--background, #fff)}.sd-rating__item-text.sd-rating__item-text{line-height:calc(3 * var(--base-unit, 8px));min-width:calc(3 * var(--base-unit, 8px));display:inline-block}.sd-rating__item-text.sd-rating__item-text.sd-rating__min-text,.sd-rating__item-text.sd-rating__item-text.sd-rating__max-text{margin-top:calc(1.25 * var(--base-unit, 8px));margin-bottom:calc(1.25 * var(--base-unit, 8px));border:2px solid var(--background, #fff);color:var(--foreground-light, #909090)}.sd-rating__item-text.sd-rating__item-text.sd-rating__min-text{margin-right:calc(1 * var(--base-unit, 8px));margin-left:calc(2 * var(--base-unit, 8px))}.sd-rating__item-text.sd-rating__item-text.sd-rating__max-text{margin-right:calc(2 * var(--base-unit, 8px));margin-left:calc(1 * var(--base-unit, 8px))}.sd-rating__item-text.sd-rating__item-text .sv-string-editor{white-space:nowrap}.sv-ranking-item--error .sv-ranking-item__index{background-color:var(--red-light, rgba(230, 10, 62, 0.1));box-shadow:0px 1px 2px rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.sd-element--with-frame .sv-ranking-item{left:calc(-5 * var(--base-unit, 8px))}.sd-element--with-frame .sv-ranking-item__icon{margin-left:7px}.sd-element--with-frame .sv-ranking-item__icon-container{width:calc(3 * var(--base-unit, 8px));height:calc(3 * var(--base-unit, 8px));margin-right:calc(1 * var(--base-unit, 8px));margin-left:calc(1 * var(--base-unit, 8px))}.sd-element--with-frame .sv-ranking--mobile .sv-ranking-item__icon-container{margin-left:0;margin-right:calc(1 * var(--base-unit, 8px))}.sd-element--with-frame .sv-ranking--mobile .sv-ranking-item{left:0}.sv-ranking-item__text{color:var(--foreground, #161616)}.sd-ranking--disabled .sv-ranking-item__text{color:var(--foreground-disabled, rgba(22, 22, 22, 0.16))}.sv-ranking-item__content.sd-ranking-item__content{line-height:calc(3 * var(--base-unit, 8px))}.sd-dropdown{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:calc(6 * var(--base-unit, 8px));background-position:right calc(1.5 * var(--base-unit, 8px)) top 50%,0 0;background-repeat:no-repeat;background-size:calc(3 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15L17 10H7L12 15Z' fill='%23909090'/%3E%3C/svg%3E%0A");opacity:1;display:flex;justify-content:space-between}.sd-dropdown[disabled]{pointer-events:none}.sd-dropdown--empty:not(.sd-input--disabled),.sd-dropdown--empty:not(.sd-input--disabled) .sd-dropdown__value{color:var(--foreground-light, #909090)}.sd-dropdown__input-field-component{height:auto}.sd-dropdown option{color:var(--foreground, #161616);font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:calc(2 * var(--base-unit, 8px))}.sd-dropdown__value{width:100%;min-height:calc(3 * var(--base-unit, 8px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:calc(2 * var(--base-unit, 8px));color:var(--foreground, #161616);position:relative}.sd-dropdown_clean-button{padding:0 calc(1 * var(--base-unit, 8px));margin:auto 0}.sd-dropdown_clean-button-svg{width:calc(3 * var(--base-unit, 8px));height:calc(3 * var(--base-unit, 8px))}.sd-dropdown use{fill:var(--foreground-light, #909090)}.sd-input.sd-dropdown:focus-within{box-shadow:0 0 0 2px var(--primary, #19b394),inset 0px 1px 2px var(--border-inside, rgba(0, 0, 0, 0.16))}.sd-input.sd-dropdown:focus-within .sd-dropdown__filter-string-input{z-index:2000}.sd-dropdown__filter-string-input{position:absolute;left:0;top:0;height:100%;width:100%;max-width:100%;border:none;outline:none;padding:0;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:calc(2 * var(--base-unit, 8px));background-color:rgba(0,0,0,0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;line-height:calc(3 * var(--base-unit, 8px));appearance:none}.sd-dropdown--empty:not(.sd-input--disabled) .sd-dropdown__filter-string-input::placeholder{color:var(--foreground-light, #909090)}.sd-dropdown__filter-string-input::placeholder{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:calc(2 * var(--base-unit, 8px));color:var(--foreground, #161616);width:100%;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;line-height:calc(3 * var(--base-unit, 8px));appearance:none}.sd-input.sd-tagbox:not(.sd-tagbox--empty):not(.sd-input--disabled){height:auto;padding:calc(0.5 * var(--base-unit, 8px));padding-right:calc(6 * var(--base-unit, 8px))}.sd-tagbox.sd-tagbox--empty{padding:calc(0.5 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px)) calc(0.5 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px))}.sd-tagbox_clean-button{height:calc(3 * var(--base-unit, 8px));padding:calc(1 * var(--base-unit, 8px));margin:auto 0}.sd-input.sd-tagbox:focus-within{box-shadow:0 0 0 2px var(--primary, #19b394),inset 0px 1px 2px var(--border-inside, rgba(0, 0, 0, 0.16))}.sv-tagbox__item{position:relative;display:flex;height:calc(3 * var(--base-unit, 8px));padding:calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px));background-color:var(--primary, #19b394);border-radius:calc(0.25 * var(--base-unit, 8px))}.sv-tagbox__item-text{color:var(--primary-foreground, #fff);min-width:calc(5.5 * var(--base-unit, 8px));text-align:center}.sv-tagbox__item:hover .sd-tagbox-item_clean-button,.sv-tagbox__item:focus .sd-tagbox-item_clean-button,.sv-tagbox__item:focus-within .sd-tagbox-item_clean-button{display:block}.sd-tagbox-item_clean-button{display:none;position:absolute;inset-inline-end:calc(1.5 * var(--base-unit, 8px));height:calc(3 * var(--base-unit, 8px));padding:0px 0px 0px calc(4 * var(--base-unit, 8px));background:linear-gradient(270deg, var(--primary, #19b394) 53.12%, rgba(25, 179, 148, 0) 100%)}.sd-tagbox-item_clean-button-svg{padding:calc(0.5 * var(--base-unit, 8px))}.sd-tagbox-item_clean-button-svg:hover{border-radius:100px;background:var(--primary-foreground-disabled, rgba(255, 255, 255, 0.25))}.sd-tagbox-item_clean-button-svg use{fill:var(--primary-foreground, #fff)}.sd-tagbox__value.sd-dropdown__value{position:relative;gap:calc(0.5 * var(--base-unit, 8px));display:flex;flex-wrap:wrap;flex-grow:1;padding-inline:unset;margin-inline:unset;margin-block:unset}.sd-tagbox__filter-string-input{width:auto;display:flex;flex-grow:1;height:calc(5 * var(--base-unit, 8px));position:initial}.sd-tagbox__placeholder{position:absolute;top:0;left:0;max-width:100%;width:auto;height:100%;text-align:left;cursor:text;pointer-events:none;color:var(--foreground-light, #909090)}.sd-imagepicker{display:flex;flex-wrap:wrap;padding:0;border:none;gap:calc(2 * var(--base-unit, 8px));width:100%;margin:0}.sd-imagepicker--column{align-items:flex-start;flex-direction:column}@supports not (aspect-ratio: 1/1){.sd-imagepicker>div{margin-right:calc(2 * var(--base-unit, 8px))}}.sd-imagepicker__item img,.sd-imagepicker__item .sd-imagepicker__image-container>div{border-radius:calc(0.5 * var(--base-unit, 8px));background-color:var(--background-dim, #f3f3f3)}.sd-imagepicker__item-decorator{position:relative;display:flex;flex-direction:column;align-items:center}.sd-imagepicker__image-container{position:relative}.sd-imagepicker__item--checked .sd-imagepicker__image-container::before{display:block;position:absolute;content:" ";top:calc(1 * var(--base-unit, 8px));right:calc(1 * var(--base-unit, 8px));width:calc(6 * var(--base-unit, 8px));height:calc(6 * var(--base-unit, 8px));box-sizing:border-box;border-radius:calc(12.5 * var(--base-unit, 8px));background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='17' viewBox='0 0 23 17' fill='none'%3E%3Cpath d='M8.33331 16.1L0.333313 8L2.43331 5.9L8.33331 11.9L20.2333 0L22.3333 2.1L8.33331 16.1Z' fill='%2319B394'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:22px calc(2 * var(--base-unit, 8px));background-color:var(--background, #fff);z-index:1}.sd-imagepicker_>_item--error .sd-imagepicker__image-container::before{display:block;position:absolute;content:" ";left:0;top:0;width:100%;height:100%;background-color:var(--red-light, rgba(230, 10, 62, 0.1));border-radius:calc(0.5 * var(--base-unit, 8px));background:linear-gradient(0deg, var(--red-light, rgba(230, 10, 62, 0.1)), var(--red-light, rgba(230, 10, 62, 0.1)))}.sd-imagepicker__item:focus-within .sd-imagepicker__image,.sd-imagepicker__item--allowhover .sd-imagepicker__image:hover{opacity:.5}.sd-imagepicker__image{display:block;box-sizing:border-box;max-width:100%}.sd-imagepicker__text{line-height:calc(3 * var(--base-unit, 8px));margin-top:calc(1 * var(--base-unit, 8px));color:var(--foreground, #161616)}.sd-imagepicker__no-image{display:flex;background-color:var(--background-dim-light, #f9f9f9)}.sd-imagepicker__no-image-svg{height:calc(6 * var(--base-unit, 8px));width:calc(6 * var(--base-unit, 8px));margin:auto}.sd-imagepicker__no-image-svg use{fill:var(--foreground-light, #909090)}.sd-imagepicker__column{display:flex;flex-direction:column;gap:calc(2 * var(--base-unit, 8px));align-items:flex-start;padding-right:0}.sd-selectbase__column.sd-imagepicker__column:not(:last-child){padding-right:0}.sd-image__image{display:block;max-width:100%;border-radius:calc(0.5 * var(--base-unit, 8px))}.sd-image__image--adaptive{width:100%;height:auto;max-width:calc(80 * var(--base-unit, 8px))}.sd-html{white-space:initial}.sd-progress{height:2px;background-color:var(--border-light, #eaeaea);position:relative}.sd-progress__bar{position:relative;height:100%;background-color:var(--primary, #19b394);overflow:hidden}.sd-progress__text{position:absolute;margin-top:calc(1 * var(--base-unit, 8px));right:calc(3 * var(--base-unit, 8px));color:var(--foreground-light, #909090);font-size:calc(1.5 * var(--base-unit, 8px));line-height:calc(2 * var(--base-unit, 8px));font-weight:600}@media only screen and (min-width: calc(125 * var(--base-unit, 8px))){.sd-progress__text{margin-left:5%}}@media only screen and (max-width: calc(125 * var(--base-unit, 8px))){.sd-progress__text{margin-left:10px}}.sd-boolean{display:flex;width:max-content;position:relative;padding:calc(0.5 * var(--base-unit, 8px));background:var(--background-dim-light, #f9f9f9);box-shadow:inset 0px 1px 2px rgba(0,0,0,.15);border-radius:calc(12.5 * var(--base-unit, 8px))}.sd-boolean__thumb,.sd-boolean__label{display:block;color:var(--foreground-light, #909090);font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:calc(2 * var(--base-unit, 8px));line-height:calc(3 * var(--base-unit, 8px));padding:calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px))}.sd-boolean__switch{display:flex;padding:calc(0.5 * var(--base-unit, 8px));align-items:center;position:absolute;left:0;top:0;width:100%;height:100%;box-sizing:border-box;border-radius:calc(12.5 * var(--base-unit, 8px))}.sd-boolean__control:focus~.sd-boolean__switch{box-shadow:inset 0 0 0 2px var(--primary, #19b394)}.sd-boolean--indeterminate .sd-boolean__thumb{display:none}.sd-boolean__thumb{background:var(--background, #fff);box-shadow:0px 1px 2px rgba(0,0,0,.15);border-radius:calc(12.5 * var(--base-unit, 8px));transition-duration:.2s;transition-property:margin-left,transform;transition-timing-function:linear;color:var(--primary, #19b394);font-weight:600;margin-left:0%;transform:translateX(0)}.sd-boolean--checked .sd-boolean__thumb{margin-left:100%;transform:translateX(-100%)}.sd-boolean--disabled .sd-boolean__thumb,.sd-boolean--disabled .sd-boolean__label{color:var(--foreground-disabled, rgba(22, 22, 22, 0.25))}.svc-question__content .sd-boolean:not(.sd-boolean--checked):not(.sd-boolean--indeterminate) .sd-boolean__label:nth-of-type(1),.svc-question__content .sd-boolean--checked .sd-boolean__label:nth-of-type(2){color:var(--primary, #19b394);font-weight:600;background:var(--background, #fff);box-shadow:0px 1px 2px rgba(0,0,0,.15);border-radius:calc(12.5 * var(--base-unit, 8px))}.svc-question__content .sd-boolean__switch{display:none}.sd-boolean--error{background-color:var(--red-light, rgba(230, 10, 62, 0.1))}.sd-paneldynamic .sd-progress{position:absolute;left:0;right:0;height:2px;z-index:2;transform:translateY(-1px)}.sd-paneldynamic>.sd-panel{padding-top:1px;padding-bottom:calc(.5*var(--sd-base-vertical-padding))}.sd-paneldynamic>.sd-panel+.sd-paneldynamic__remove-btn{margin-bottom:calc(.5*var(--sd-base-vertical-padding))}.sd-paneldynamic .sd-paneldynamic__panel-wrapper>.sd-panel>.sd-panel__header{padding-bottom:0;padding-top:calc(0.5 * var(--sd-base-vertical-padding) + var(--base-unit, 8px))}.sd-paneldynamic .sd-paneldynamic__panel-wrapper>.sd-panel>.sd-panel__header:after{display:none}.sd-paneldynamic .sd-paneldynamic__panel-wrapper>.sd-panel>.sd-panel__header>.sd-panel__title{color:var(--foreground-light, #909090)}.sd-paneldynamic .sd-paneldynamic__panel-wrapper>.sd-panel>.sd-panel__header~.sd-panel__content{margin-top:calc(1 * var(--base-unit, 8px))}.sd-question__content:first-child>.sd-paneldynamic>.sd-paneldynamic__panel-wrapper>.sd-panel>.sd-panel__header{padding-top:var(--sd-base-vertical-padding)}.sd-paneldynamic__separator{display:block;position:absolute;left:0;right:0;margin:0;border-color:var(--border-light, #eaeaea);background:var(--border-light, #eaeaea);height:1px;border:none}.sd-paneldynamic__panel-wrapper{padding-bottom:calc(1*var(--sd-base-padding))}.sd-paneldynamic__panel-wrapper:after{display:table;clear:both;content:" "}.sd-paneldynamic__panel-wrapper--in-row{display:flex;flex-direction:row;align-items:center}.sd-paneldynamic__remove-btn{float:right;position:relative;top:calc(.5*var(--sd-base-vertical-padding));margin-bottom:calc(-1 * var(--base-unit, 8px));margin-right:calc(-3 * var(--base-unit, 8px))}.sd-paneldynamic__footer{clear:both}.sd-paneldynamic__footer .sd-paneldynamic__prev-btn,.sd-paneldynamic__footer .sd-paneldynamic__next-btn{display:block}.sd-paneldynamic__footer .sd-paneldynamic__prev-btn svg,.sd-paneldynamic__footer .sd-paneldynamic__next-btn svg{width:calc(2 * var(--base-unit, 8px));height:calc(2 * var(--base-unit, 8px))}.sd-paneldynamic__footer .sd-paneldynamic__add-btn,.sd-paneldynamic__footer .sd-paneldynamic__progress-text,.sd-paneldynamic__footer .sd-paneldynamic__progress--bottom{display:initial}.sd-paneldynamic__buttons-container{display:flex;align-items:center;padding:calc(var(--sd-base-vertical-padding) - var(--base-unit, 8px)) 0}.sd-paneldynamic__progress-container{display:flex;align-items:center;margin-left:auto;margin-right:calc(-1 * var(--base-unit, 8px))}.sd-paneldynamic__progress-text{color:var(--foreground-light, #909090);margin:0;margin-right:calc(3 * var(--base-unit, 8px))}.sd-paneldynamic__prev-btn,.sd-paneldynamic__next-btn{width:calc(2 * var(--base-unit, 8px));height:calc(2 * var(--base-unit, 8px))}.sd-paneldynamic__prev-btn .sv-svg-icon,.sd-paneldynamic__next-btn .sv-svg-icon{display:block}.sd-paneldynamic__prev-btn{margin-right:calc(2 * var(--base-unit, 8px))}.sd-paneldynamic__next-btn{margin-left:calc(-1 * var(--base-unit, 8px));margin-right:calc(2 * var(--base-unit, 8px));transform:rotate(180deg)}.sd-paneldynamic__placeholder .sd-paneldynamic__add-btn{display:initial;margin-left:0}.sd-question--empty.sd-question--paneldynamic>.sd-question__content{padding-bottom:var(--sd-base-padding)}.svc-question__content .sd-paneldynamic__panel-wrapper{padding:0}.sd-paneldynamic__buttons-container .sd-action-bar{width:100%;margin:0 calc(-3 * var(--base-unit, 8px));width:calc(100% + 6 * var(--base-unit, 8px))}.sd-file{min-height:calc(36 * var(--base-unit, 8px));position:relative;font-size:calc(2 * var(--base-unit, 8px));line-height:calc(3 * var(--base-unit, 8px))}.sd-file .sv-action-bar{padding:calc(1 * var(--base-unit, 8px)) 0;justify-content:center;position:absolute;width:100%;bottom:0}.sd-file .sv-action-bar .sv-action-bar-item{height:calc(4 * var(--base-unit, 8px));color:var(--foreground-light, #909090);border-radius:calc(2 * var(--base-unit, 8px))}.sd-file .sv-action-bar #fileIndex .sv-action-bar-item{padding:calc(0.5 * var(--base-unit, 8px)) 0}.sd-file .sv-action-bar #fileIndex .sv-action-bar-item:hover{background-color:var(--background, #fff)}.sd-file .sv-action-bar #fileIndex .sv-action-bar-item:disabled{opacity:initial}.sd-file__decorator{display:flex;flex-direction:column;position:absolute;width:100%;height:100%;box-sizing:border-box;border:1px dashed var(--border, #d6d6d6);justify-content:center;align-items:center}.sd-file__decorator--drag{border:1px solid var(--primary, #19b394);box-shadow:inset 0 0 0 1px var(--primary, #19b394);background:var(--primary-light, rgba(25, 179, 148, 0.1));z-index:1}.sd-file__no-file-chosen{display:none}.sd-file__drag-area-placeholder{word-break:break-word;white-space:normal;color:var(--foreground-light, #909090)}.sd-file__choose-btn--text{display:block;margin-top:calc(1 * var(--base-unit, 8px));font-weight:600;color:var(--primary, #19b394);cursor:pointer}.sd-question--answered .sd-file__drag-area-placeholder{display:none}.sd-file__choose-btn--text svg{display:none}.sd-file__choose-btn--icon{z-index:2}.sd-file__choose-btn--icon span:first-child{display:none}.sd-file__choose-btn--icon,.sd-file__clean-btn{top:calc(1 * var(--base-unit, 8px));position:absolute}.sd-file__clean-btn{z-index:2;right:calc(1 * var(--base-unit, 8px))}.sd-file__clean-btn span:first-child{display:none}.sd-file__choose-btn--icon{right:calc(8 * var(--base-unit, 8px))}.sd-file__list{overflow:auto;display:flex;box-sizing:content-box;flex-direction:row;align-items:stretch;justify-content:space-between;padding:calc(10.5 * var(--base-unit, 8px)) 0;min-height:calc(15 * var(--base-unit, 8px));max-height:calc(15 * var(--base-unit, 8px));position:absolute;width:100%}.sd-file__preview{position:relative;display:flex;align-items:center;flex-direction:column;min-height:100%;margin:0 auto}.sd-file__preview .sd-file__default-image{width:calc(7 * var(--base-unit, 8px));height:90px}.sd-file__preview img:hover+.sd-file__remove-file-button,.sd-file__preview svg:hover+.sd-file__remove-file-button,.sd-file__preview .sd-file__remove-file-button:hover{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.sd-file__sign{margin-top:calc(1 * var(--base-unit, 8px));text-align:center;font-size:calc(1.5 * var(--base-unit, 8px));line-height:calc(2 * var(--base-unit, 8px))}.sd-file__sign a{display:block;text-decoration:none;color:var(--foreground, #161616);white-space:normal;word-break:break-all;width:calc(12 * var(--base-unit, 8px));overflow:hidden;max-height:calc(6 * var(--base-unit, 8px));text-overflow:ellipsis;line-height:calc(2 * var(--base-unit, 8px));display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}.sd-file__remove-file-button{display:none}.sd-file__decorator--error{background-color:var(--red-light, rgba(230, 10, 62, 0.1))}.sd-file__image-wrapper{position:relative;text-align:center;min-width:calc(12 * var(--base-unit, 8px));min-height:calc(12 * var(--base-unit, 8px))}.sd-file__image-wrapper img:not(.sd-file__default-image){display:block;width:calc(12 * var(--base-unit, 8px));height:calc(12 * var(--base-unit, 8px));object-fit:contain;background:var(--background-dim, #f3f3f3)}.sd-file--single img:hover+.sd-file__remove-file-button{display:none}.sd-file--mobile .sd-file__list{height:calc(100% - 4 * var(--base-unit, 8px))}.sd-file--single-image{height:calc(36 * var(--base-unit, 8px))}.sd-file--single-image .sd-file__preview{width:100%;margin:0}.sd-file--single-image .sd-file__list{padding:0;height:100%;max-height:100%;width:100%}.sd-file--single-image .sd-file__image-wrapper{min-height:100%;min-width:100%}.sd-file--single-image .sd-file__image-wrapper img{width:100%;height:100%;background-color:var(--background-dim-light, #f9f9f9)}.sd-file--single-image .sd-file__sign{position:absolute;margin:0;width:100%;min-height:100%}.sd-file--single-image .sd-file__sign a{color:rgba(0,0,0,0);width:100%;height:100%;outline:none}.sd-file>input:focus+.sd-file__decorator .sd-file__choose-btn.sd-file__choose-btn--icon use{fill:var(--primary, #19b394)}.sd-file>input:focus+.sd-file__decorator .sd-file__choose-btn:not(.sd-file__choose-btn--icon){background-color:var(--primary-light, rgba(25, 179, 148, 0.1))}.sd-file__drag-area{position:absolute;width:100%;height:100%}.sd-hidden{display:none !important}.sd-body__navigation .sd-btn{padding:calc(2 * var(--base-unit, 8px)) calc(8 * var(--base-unit, 8px))}.sd-root-modern--mobile .sd-body__navigation .sv-action:not(.sv-action--hidden),.sd-root-modern--mobile .sd-body__navigation .sd-btn{flex-grow:1}.sd-root-modern--mobile .sd-body__navigation .sd-btn{padding:calc(2 * var(--base-unit, 8px)) calc(4 * var(--base-unit, 8px))}.sd-body__navigation .sv-action--hidden{display:none}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;src:local("Open Sans Semibold"),local("OpenSans-Semibold"),url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;src:local("Open Sans Bold"),local("OpenSans-Bold"),url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFW50bbck.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.sd-btn{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding:calc(2 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));background:var(--background, #fff);box-shadow:0px 1px 2px rgba(0,0,0,.15);border-radius:calc(0.5 * var(--base-unit, 8px));cursor:pointer;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-weight:600;font-size:calc(2 * var(--base-unit, 8px));line-height:calc(3 * var(--base-unit, 8px));text-align:center;color:var(--primary, #19b394);border:2px solid rgba(0,0,0,0);outline:none}.sd-btn:not(:disabled):hover,.sd-btn:not(:disabled):focus{box-shadow:0 0 0 2px var(--primary, #19b394)}.sd-btn:disabled{color:var(--foreground-disabled, rgba(22, 22, 22, 0.16));cursor:default}.sd-btn--action{background-color:var(--primary, #19b394);color:var(--primary-foreground, #fff)}.sd-btn--action:not(:disabled):hover,.sd-btn--action:not(:disabled):focus{color:var(--primary, #19b394);background-color:var(--background, #fff)}.sd-btn--action:disabled{color:var(--primary-foreground-disabled, rgba(255, 255, 255, 0.25))}.sd-body{width:100%}.sd-body .sd-body__page{min-width:calc(300px + 6 * var(--base-unit, 8px))}.sd-body .sd-body__timer{padding:calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) 0;box-sizing:border-box}.sd-body.sd-body--static{max-width:calc(84 * var(--base-unit, 8px));margin-left:auto;margin-right:auto}.sd-body.sd-body--static .sd-body__timer,.sd-body.sd-body--static .sd-body__navigation,.sd-body.sd-body--static .sd-body__page{margin-left:0;margin-right:0}.sd-body.sd-body--responsive{max-width:initial}.sd-body.sd-body--responsive .sd-body__timer,.sd-body.sd-body--responsive .sd-body__navigation{padding:calc(2 * var(--base-unit, 8px)) var(--sd-page-vertical-padding)}.sd-body__navigation.sd-action-bar{box-sizing:border-box;padding:calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));flex-wrap:wrap;gap:calc(2 * var(--base-unit, 8px))}.sd-body__progress{margin-bottom:calc(4 * var(--base-unit, 8px))}.sd-body--empty{min-height:400px;text-align:center;padding-top:180px;box-sizing:border-box}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format("woff2");unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;src:local("Open Sans Semibold"),local("OpenSans-Semibold"),url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;src:local("Open Sans Bold"),local("OpenSans-Bold"),url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2212,U+2215,U+E0FF,U+EFFD,U+F000}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFW50bbck.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;src:local("Open Sans Regular"),local("OpenSans-Regular"),url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.sd-multipletext{width:100%;table-layout:fixed;border-spacing:0;height:1px}.sd-multipletext__cell{height:100%}.sd-multipletext__cell:not(:last-child){padding-right:calc(2 * var(--base-unit, 8px))}.sd-multipletext__item-container.sd-input:focus-within{box-shadow:inset 0 0 0 2px var(--primary, #19b394),inset 0px 1px 2px var(--border-inside, rgba(0, 0, 0, 0.16))}.sd-multipletext__item-container{display:flex;align-items:flex-start;height:100%;padding-top:0;padding-bottom:0}.sd-multipletext__item-container .sd-input{padding-top:0;padding-right:0;padding-bottom:0;border:none;box-shadow:none;height:calc(3 * var(--base-unit, 8px))}.sd-multipletext__item-container .sd-input,.sd-multipletext__item-title{margin-top:calc(1.5 * var(--base-unit, 8px));margin-bottom:calc(1.5 * var(--base-unit, 8px))}.sd-multipletext__item-title{height:calc(100% - var(--base-unit, 8px) * 3);max-width:30%;padding-right:calc(2 * var(--base-unit, 8px));border-right:1px solid var(--border, #d6d6d6);word-break:break-word;white-space:normal;color:var(--foreground-light, #909090)}.sd-multipletext__item{flex-grow:1}.sd-multipletext__item-container--error{background-color:var(--red-light, rgba(230, 10, 62, 0.1))}.sd-multipletext__item-container--error .sd-input--error{background-color:rgba(0,0,0,0)}.sd-multipletext__item-container:hover:not(:focus-within)>.sd-question__erbox--tooltip{display:inline-block}.sd-multipletext tr:not(:last-child) .sd-multipletext__cell{padding-bottom:calc(2 * var(--base-unit, 8px))}.sd-action{appearance:none;border:none;background:rgba(0,0,0,0);padding:calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));color:var(--primary, #19b394);border-radius:calc(12.5 * var(--base-unit, 8px));font-weight:600;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-size:calc(2 * var(--base-unit, 8px));line-height:calc(3 * var(--base-unit, 8px));outline:none}.sd-action--negative{color:var(--red, #e60a3e)}.sd-action--icon{padding:calc(1 * var(--base-unit, 8px))}.sd-action--icon use{fill:var(--foreground-light, #909090)}svg.sd-action--icon{fill:var(--foreground-light, #909090)}.sd-action:disabled,.sd-action--disabled{color:var(--foreground, #161616);cursor:default;opacity:.25;cursor:default;pointer-events:none}.sd-action:hover,.sd-action:focus{outline:none;background-color:var(--primary-light, rgba(25, 179, 148, 0.1));cursor:pointer;opacity:1}.sd-action:hover.sd-action--icon,.sd-action:focus.sd-action--icon{background-color:var(--background-dim, #f3f3f3)}.sd-action:hover.sd-action--negative,.sd-action:focus.sd-action--negative{background-color:var(--red-light, rgba(230, 10, 62, 0.1))}.sd-action:hover.sd-action--negative.sd-action--icon use,.sd-action:focus.sd-action--negative.sd-action--icon use{fill:var(--red, #e60a3e)}.sd-action:hover:active,.sd-action:focus:active{opacity:.5}.sd-action__icon{display:block;width:calc(3 * var(--base-unit, 8px));height:calc(3 * var(--base-unit, 8px))}.sd-action--pressed{background-color:var(--background-dim, #f3f3f3);opacity:.5}.sd-action-bar{display:flex;align-items:center}.sd-action-bar .sv-action:not(:last-child) .sv-action__content{padding-right:0}.sd-context-btn{background-color:var(--background, #fff);padding:calc(1.5 * var(--base-unit, 8px));border-radius:calc(12.5 * var(--base-unit, 8px));border:none;outline:none;cursor:pointer}.sd-context-btn svg{display:block;width:calc(3 * var(--base-unit, 8px));height:calc(3 * var(--base-unit, 8px))}.sd-context-btn use{fill:var(--foreground-light, #909090)}.sd-context-btn:hover use,.sd-context-btn:focus use{fill:var(--primary, #19b394)}.sd-context-btn:hover.sd-context-btn--negative use,.sd-context-btn:focus.sd-context-btn--negative use{fill:var(--red, #e60a3e)}.sd-context-btn:disabled{opacity:.25}.sd-completedpage{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:bold;box-sizing:border-box;text-align:center;height:auto}.sd-completedpage h3{font-size:calc(3 * var(--base-unit, 8px))}.sd-completedpage:before,.sd-completedpage:after{display:block;width:calc(9 * var(--base-unit, 8px));margin-left:calc(50% - 4.5 * var(--base-unit, 8px));content:""}.sd-completedpage:before{height:calc(13 * var(--base-unit, 8px))}.sd-completedpage:after{height:calc(2 * var(--base-unit, 8px))}.sd-progress-buttons__image-button-left{display:none}.sd-progress-buttons__image-button-right{display:none}.sd-progress-buttons__image-button--hidden{visibility:hidden}.sd-progress-buttons__list{display:flex;list-style-type:none;margin:0;padding:0}.sd-progress-buttons__list li{text-align:center;flex-grow:1;text-decoration:none;border-top:2px solid var(--border-light, #eaeaea);padding-top:calc(2 * var(--base-unit, 8px));padding-bottom:calc(4 * var(--base-unit, 8px));cursor:pointer}.sd-progress-buttons__list li:hover .sd-progress-buttons__page-title{text-decoration-line:underline}.sd-progress-buttons__list .sd-progress-buttons__list-element--current,.sd-progress-buttons__list .sd-progress-buttons__list-element--passed{border-top:2px solid var(--primary, #19b394)}.sd-progress-buttons__list-element--nonclickable .sd-progress-buttons__page-title{color:var(--foreground-light, #909090)}.sd-progress-buttons__list-element--current .sd-progress-buttons__page-title,.sd-progress-buttons__list-element--current .sd-progress-buttons__page-description{color:var(--primary, #19b394)}.sd-progress-buttons__page-title{width:100%;font-size:calc(2 * var(--base-unit, 8px));font-weight:600;line-height:calc(3 * var(--base-unit, 8px))}.sd-progress-buttons__page-description{width:100%;font-size:calc(1.5 * var(--base-unit, 8px));line-height:calc(2 * var(--base-unit, 8px));font-weight:600;color:var(--foreground-light, #909090)}.sv-list{padding:0;margin:0;overflow-y:auto;background:var(--background, #fff);font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;list-style-type:none}.sv-list__empty-container{width:100%;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;box-sizing:border-box;padding:calc(1.5 * var(--base-unit, 8px)) calc(8 * var(--base-unit, 8px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sv-list__empty-text{line-height:calc(3 * var(--base-unit, 8px));font-size:calc(2 * var(--base-unit, 8px));font-weight:400;text-align:center;color:var(--foreground-light, #909090)}.sv-list__item{width:100%;align-items:center;box-sizing:border-box;color:var(--foreground, #161616);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sv-list__item-body{width:100%;align-items:center;box-sizing:border-box;padding:calc(1 * var(--base-unit, 8px)) calc(8 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));color:var(--foreground, #161616);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sv-list__item.sv-list__item--focused,.sv-list__item:hover,.sv-list__item:focus{outline:none}.sv-list__item.sv-list__item--focused .sv-list__item-body,.sv-list__item:hover .sv-list__item-body,.sv-list__item:focus .sv-list__item-body{background-color:var(--background-dim, #f3f3f3)}.sv-list__item--with-icon.sv-list__item--with-icon{padding:0}.sv-list__item--with-icon.sv-list__item--with-icon .sv-list__item-body{padding-top:calc(1.5 * var(--base-unit, 8px));padding-bottom:calc(1.5 * var(--base-unit, 8px))}.sv-list__item-icon{float:left;width:calc(3 * var(--base-unit, 8px));height:calc(3 * var(--base-unit, 8px));margin-right:calc(2 * var(--base-unit, 8px))}.sv-list__item-icon svg{display:block}.sv-list__item-icon use{fill:var(--foreground-light, #909090)}.sv-list__item-separator{margin:calc(1 * var(--base-unit, 8px)) 0;height:1px;background-color:var(--border, #d6d6d6)}.sv-list__item.sv-list__item--selected .sv-list__item-body{background-color:var(--primary, #19b394);color:var(--background, #fff)}.sv-list__item.sv-list__item--selected .sv-list__item-icon use{fill:var(--background, #fff)}.sv-list__item.sv-list__item--selected.sv-list__item--focused .sv-list__item-body,.sv-list__item.sv-list__item--selected:hover .sv-list__item-body,li:focus .sv-list__item.sv-list__item--selected .sv-list__item-body{background-color:var(--primary, #19b394);color:var(--primary-foreground, #fff)}.sv-list__item.sv-list__item--disabled .sv-list__item-body{cursor:default;color:var(--foreground-light, #909090)}.sv-list__item span{white-space:nowrap}.sv-list__container{position:relative;display:flex;height:100%;flex-direction:column;display:flex;flex-direction:column;min-height:0}.sv-list__filter{border-bottom:1px solid var(--border-inside, rgba(0, 0, 0, 0.16));background:var(--background, #fff);padding-bottom:calc(1 * var(--base-unit, 8px))}.sv-list__filter-icon{display:block;position:absolute;top:calc(1.5 * var(--base-unit, 8px));left:calc(2 * var(--base-unit, 8px))}.sv-list__filter-icon .sv-svg-icon{width:calc(3 * var(--base-unit, 8px));height:calc(3 * var(--base-unit, 8px))}.sv-list__filter-icon .sv-svg-icon use{fill:var(--foreground-light, #909090)}.sv-list__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;background:var(--background, #fff);box-sizing:border-box;width:100%;outline:none;font-size:1em;color:var(--foreground, #161616);padding:calc(1.5 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px)) calc(7 * var(--base-unit, 8px));line-height:calc(3 * var(--base-unit, 8px))}.sv-list__input::placeholder{color:var(--foreground-light, #909090)}.sv-list__input:disabled,.sv-list__input:disabled::placeholder{color:var(--foreground-light, #909090)}.sd-list{padding-right:calc(0.5 * var(--base-unit, 8px));padding-left:calc(0.5 * var(--base-unit, 8px))}.sd-list__item.sd-list__item{padding:0}.sd-list__item.sd-list__item .sd-list__item-body{padding-top:calc(1.5 * var(--base-unit, 8px));padding-bottom:calc(1.5 * var(--base-unit, 8px));border-radius:3px}.sd-list__item--selected.sd-list__item--selected .sd-list__item-body{background-color:var(--primary-light, rgba(25, 179, 148, 0.1));color:var(--foreground, #161616)}.sd-list__item--selected:hover .sd-list__item-body,.sd-list__item--selected:focus .sd-list__item-body{background-color:var(--primary, #19b394);color:var(--primary-foreground, #fff)}.sv-action-bar{display:flex;box-sizing:content-box;position:relative;align-items:center;margin-left:auto;overflow:hidden;white-space:nowrap}.sv-action-bar-separator{display:inline-block;width:1px;height:24px;vertical-align:middle;margin-right:16px;background-color:var(--border, #d6d6d6)}.sv-action-bar--default-size-mode .sv-action-bar-separator{margin:0 calc(1 * var(--base-unit, 8px))}.sv-action-bar--small-size-mode .sv-action-bar-separator{margin:0 calc(0.5 * var(--base-unit, 8px))}.sv-action-bar-item{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;padding:calc(1 * var(--base-unit, 8px));box-sizing:border-box;border:none;border-radius:2px;background-color:rgba(0,0,0,0);color:var(--foreground, #161616);cursor:pointer;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;overflow-x:hidden;white-space:nowrap}button.sv-action-bar-item{overflow:hidden}.sv-action-bar--default-size-mode .sv-action-bar-item{height:calc(5 * var(--base-unit, 8px));font-size:calc(2 * var(--base-unit, 8px));line-height:calc(3 * var(--base-unit, 8px));margin:0 calc(1 * var(--base-unit, 8px))}.sv-action-bar--small-size-mode .sv-action-bar-item{height:calc(4 * var(--base-unit, 8px));font-size:calc(1.5 * var(--base-unit, 8px));line-height:calc(2 * var(--base-unit, 8px));margin:0 calc(0.5 * var(--base-unit, 8px))}.sv-action:first-of-type .sv-action-bar-item{margin-inline-start:0}.sv-action:last-of-type .sv-action-bar-item{margin-inline-end:0}.sv-action-bar--default-size-mode .sv-action-bar-item__title--with-icon{margin-inline-start:calc(1 * var(--base-unit, 8px))}.sv-action-bar--small-size-mode .sv-action-bar-item__title--with-icon{margin-inline-start:calc(0.5 * var(--base-unit, 8px))}.sv-action-bar-item__icon svg{display:block}.sv-action-bar-item__icon use{fill:var(--foreground-light, #909090)}.sv-action-bar-item:hover,.sv-action-bar-item:focus{outline:none;background-color:var(--background-dim, #f3f3f3)}.sv-action-bar-item:active{opacity:.5}.sv-action-bar-item:disabled{opacity:.25;cursor:default}.sv-action-bar-item:disabled .sv-action-bar-item__icon use{fill:var(--foreground, #161616)}.sv-action-bar-item__title{color:inherit;vertical-align:middle;white-space:nowrap}.sv-action-bar-item--secondary .sv-action-bar-item__icon use{fill:var(--secondary, #ff9814)}.sv-action-bar-item--active .sv-action-bar-item__icon use{fill:var(--primary, #19b394)}.sv-action-bar-item-dropdown{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:flex;height:calc(5 * var(--base-unit, 8px));padding:calc(1 * var(--base-unit, 8px));box-sizing:border-box;border:none;border-radius:2px;background-color:rgba(0,0,0,0);cursor:pointer;line-height:calc(3 * var(--base-unit, 8px));font-size:calc(2 * var(--base-unit, 8px));font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.sv-expand-action:before{content:"";display:inline-block;background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23404040;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='2,2 0,4 5,9 10,4 8,2 5,5 '/%3E%3C/svg%3E%0A");background-repeat:no-repeat;background-position:center center;height:10px;width:12px;margin:auto 8px}.sv-expand-action--expanded:before{transform:rotate(180deg)}.sv-dots{width:48px}.sv-dots__item{width:100%}.sv-dots__item .sv-action-bar-item__icon{margin:auto}.sv-action--hidden{width:0px;height:0px;overflow:hidden;visibility:hidden}.sv-action__content{display:flex;flex-direction:row;align-items:center}.sv-action__content>*{flex:0 0 auto}.sv-action--space{margin-left:auto}.sv-action-bar-item--pressed{background-color:var(--background-dim, #f3f3f3);opacity:50%}sv-popup{display:block;position:absolute;z-index:-1}.sv-popup{position:fixed;left:0;top:0;width:100vw;height:100vh;outline:none;z-index:1500}.sv-popup__container{box-shadow:0px 2px 6px rgba(0,0,0,.1);position:absolute;padding:0}.sv-popup__shadow{width:100%;height:100%;border-radius:calc(1 * var(--base-unit, 8px))}.sv-popup__body-content{background-color:var(--background, #fff);border-radius:calc(0.5 * var(--base-unit, 8px));width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column;max-height:90vh;max-width:90vw}.sv-popup--modal{display:flex;align-items:center;justify-content:center;background-color:var(--background-semitransparent, rgba(144, 144, 144, 0.5));padding:calc(11 * var(--base-unit, 8px)) calc(15 * var(--base-unit, 8px));box-sizing:border-box}.sv-popup--modal .sv-popup__container{position:static}.sv-popup--modal .sv-popup__body-content{padding:calc(4 * var(--base-unit, 8px))}.sv-popup--overlay{width:100%}.sv-popup--overlay .sv-popup__container{background:var(--background-semitransparent, rgba(144, 144, 144, 0.5));max-width:100vw;max-height:calc(100vh - 1 * var(--base-unit, 8px));height:calc(100vh - 1 * var(--base-unit, 8px));width:100%;padding-top:calc(2 * var(--base-unit, 8px));border:unset}.sv-popup--overlay .sv-popup__body-content{max-height:100vh;max-width:100vw;border-radius:calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) 0px 0px;background:var(--background, #fff);box-shadow:0px calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) rgba(0,0,0,.1);padding:calc(3 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));height:calc(100% - (1 * var(--base-unit, 8px)))}.sv-popup--overlay .sv-popup__scrolling-content{height:calc(100% - 10*var(--base-unit, 8px))}.sv-popup--overlay .sv-popup__body-footer{margin-top:calc(2 * var(--base-unit, 8px))}.sv-popup--overlay .sv-popup__body-footer .sv-action-bar{width:100%}.sv-popup--overlay .sv-popup__body-footer .sv-action{width:100%}.sv-popup--overlay .sv-popup__body-footer-item{width:100%}.sv-popup--overlay .sv-popup__button{background-color:var(--primary, #19b394);border:2px solid var(--primary, #19b394);color:var(--primary-foreground, #fff)}.sv-popup--modal .sv-popup__scrolling-content{padding:2px;margin:-2px}.sv-popup__scrolling-content{height:100%;overflow:auto;display:flex;flex-direction:column}.sv-popup__scrolling-content::-webkit-scrollbar,.sv-popup__scrolling-content *::-webkit-scrollbar{height:6px;width:6px;background-color:var(--background-dim, #f3f3f3)}.sv-popup__scrolling-content::-webkit-scrollbar-thumb,.sv-popup__scrolling-content *::-webkit-scrollbar-thumb{background:var(--primary-light, rgba(25, 179, 148, 0.1))}.sv-popup__content{min-width:100%;height:100%;display:flex;flex-direction:column;min-height:0}.sv-popup--show-pointer.sv-popup--top .sv-popup__pointer{transform:translate(calc(-1 * var(--base-unit, 8px))) rotate(180deg)}.sv-popup--show-pointer.sv-popup--bottom .sv-popup__pointer{transform:translate(calc(-1 * var(--base-unit, 8px)), calc(-1 * var(--base-unit, 8px)))}.sv-popup--show-pointer.sv-popup--right{transform:translate(calc(1 * var(--base-unit, 8px)))}.sv-popup--show-pointer.sv-popup--right .sv-popup__pointer{transform:translate(-12px, -4px) rotate(-90deg)}.sv-popup--show-pointer.sv-popup--left{transform:translate(calc(-1 * var(--base-unit, 8px)))}.sv-popup--show-pointer.sv-popup--left .sv-popup__pointer{transform:translate(-4px, -4px) rotate(90deg)}.sv-popup__pointer{display:block;position:absolute}.sv-popup__pointer:after{content:" ";display:block;width:0;height:0;border-left:calc(1 * var(--base-unit, 8px)) solid rgba(0,0,0,0);border-right:calc(1 * var(--base-unit, 8px)) solid rgba(0,0,0,0);border-bottom:calc(1 * var(--base-unit, 8px)) solid var(--background, #fff);align-self:center}.sv-popup__body-header{font-family:Open Sans;font-size:calc(3 * var(--base-unit, 8px));line-height:calc(4 * var(--base-unit, 8px));font-style:normal;font-weight:700;margin-bottom:calc(2 * var(--base-unit, 8px));color:var(--foreground, #161616)}.sv-popup__body-footer{display:flex;margin-top:calc(4 * var(--base-unit, 8px))}.sv-popup__body-footer .sv-action-bar{gap:calc(1.5 * var(--base-unit, 8px))}.sv-popup__button{padding:calc(2 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));background:var(--background, #fff);box-shadow:0px 1px 2px rgba(0,0,0,.15);border-radius:4px;margin:2px;cursor:pointer;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-style:normal;font-weight:600;font-size:calc(2 * var(--base-unit, 8px));line-height:calc(3 * var(--base-unit, 8px));text-align:center;color:var(--primary, #19b394);border:none;outline:none}.sv-popup__button:hover{box-shadow:0 0 0 2px var(--primary, #19b394)}.sv-popup__button:disabled{color:var(--foreground-disabled, rgba(22, 22, 22, 0.16));cursor:default}.sv-popup__button:disabled:hover{box-shadow:0px 1px 2px rgba(0,0,0,.15)}.sv-popup__button--apply{background-color:var(--primary, #19b394);color:var(--primary-foreground, #fff)}.sv-popup__button--apply:disabled{background-color:var(--background-dim, #f3f3f3)}.sv-popup--modal .sv-list__filter,.sv-popup--overlay .sv-list__filter{padding-top:calc(1 * var(--base-unit, 8px))}.sv-popup--modal .sv-list__filter-icon,.sv-popup--overlay .sv-list__filter-icon{top:calc(2.5 * var(--base-unit, 8px))}.sv-button-group{display:flex;align-items:center;flex-direction:row;font-size:calc(2 * var(--base-unit, 8px));overflow:auto;border:1px solid var(--border, #d6d6d6)}.sv-button-group:focus-within{box-shadow:0 0 0 1px var(--primary, #19b394);border-color:var(--primary, #19b394)}.sv-button-group__item{display:flex;box-sizing:border-box;flex-direction:row;justify-content:center;align-items:center;appearance:none;width:100%;padding:11px calc(2 * var(--base-unit, 8px));line-height:calc(3 * var(--base-unit, 8px));outline:none;font-size:calc(2 * var(--base-unit, 8px));font-weight:400;background:var(--background, #fff);cursor:pointer;overflow:hidden;color:var(--foreground, #161616);position:relative}.sv-button-group__item:not(:last-of-type){border-right:1px solid var(--border, #d6d6d6)}.sv-button-group__item--hover:hover{background-color:var(--background-dim, #f3f3f3)}.sv-button-group__item-icon{display:block;height:calc(3 * var(--base-unit, 8px))}.sv-button-group__item-icon use{fill:var(--foreground-light, #909090)}.sv-button-group__item--selected{font-weight:600;color:var(--primary, #19b394)}.sv-button-group__item--selected .sv-button-group__item-icon use{fill:var(--primary, #19b394)}.sv-button-group__item--selected:hover{background-color:var(--background, #fff)}.sv-button-group__item-decorator{display:flex;align-items:center;max-width:100%}.sv-button-group__item-caption{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sv-button-group__item-icon+.sv-button-group__item-caption{margin-left:calc(1 * var(--base-unit, 8px))}.sv-button-group__item--disabled{color:var(--foreground-disabled, rgba(22, 22, 22, 0.16));cursor:default}.sv-button-group__item--disabled .sv-button-group__item-icon use{fill:var(--foreground-disabled, rgba(22, 22, 22, 0.16))}.sv-button-group__item--disabled:hover{background-color:var(--background, #fff)}.sv-button-group:focus-within{box-shadow:0 0 0 1px var(--primary, #19b394);border-color:var(--primary, #19b394)}.sv-visuallyhidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.sv-hidden{display:none !important}.sv-title-actions{display:flex;align-items:center;width:100%}.sv-title-actions__title{flex-wrap:wrap;max-width:90%;min-width:50%;white-space:initial}.sv-action-title-bar{min-width:56px}.sv-title-actions .sv-title-actions__title{flex-wrap:wrap;flex:0 0 auto;max-width:unset;min-width:unset}.sv-title-actions .sv-action-title-bar{flex:1 1 auto;justify-content:flex-end;min-width:unset}.sv_window{position:fixed;bottom:3px;right:10px;background-color:#5f9ea0;padding:1px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-style:normal;font-weight:400;line-height:1.42857143;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;word-wrap:normal;white-space:normal;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);line-break:auto;z-index:100}.sv_window_title{padding:8px 14px;margin:0;font-size:14px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}.sv_window_content{padding:8px;margin:0;max-height:80vh;overflow-y:auto}.sv_window_title a,.sv_window_title a:link,.sv_window_title a:visited{text-decoration:none;font-size:14px;font-style:normal;color:#000}.sjs_sp_container{position:relative}.sjs_sp_controls{position:absolute;left:0;bottom:0}.sjs_sp_controls>button{user-select:none}.sjs_sp_container>div>canvas:focus{outline:none}.sjs_sp_placeholder{display:flex;align-items:center;justify-content:center;position:absolute;z-index:0;user-select:none;pointer-events:none;width:100%;height:100%}.sd-root-modern,.svc-logic-question-value{--sd-base-padding: calc(5 * var(--base-unit, 8px));--sd-base-vertical-padding: calc(4 * var(--base-unit, 8px));--sd-page-vertical-padding: calc(3 * var(--base-unit, 8px))}.svc-creator--mobile .sd-root-modern,.sd-root-modern.sd-root-modern--mobile{--sd-base-padding: calc(3 * var(--base-unit, 8px));--sd-base-vertical-padding: calc(2 * var(--base-unit, 8px));--sd-page-vertical-padding: calc(2 * var(--base-unit, 8px))}.sd-root-modern.sd-root-modern--mobile .sd-element__num{float:none;margin-left:0;width:auto;padding-left:0;padding-right:0}.sd-root-modern.sd-root-modern--mobile .sd-element__num+span{float:none;width:auto}.sd-root-modern.sd-root-modern--mobile .sd-element__title--expandable:before{left:calc(-2.5 * var(--base-unit, 8px))}.sd-root-modern.sd-root-modern--mobile .sd-title.sd-container-modern__title{flex-direction:column}.sd-root-modern.sd-root-modern--mobile .sd-header__text{min-width:100%}.sd-root-modern.sd-root-modern--mobile .sd-multipletext__cell{display:block}.sd-root-modern.sd-root-modern--mobile .sd-multipletext__cell:not(:last-child){padding-right:0;padding-bottom:calc(2 * var(--base-unit, 8px))}.sd-root-modern.sd-root-modern--mobile .sd-multipletext__item-container{flex-direction:column}.sd-root-modern.sd-root-modern--mobile .sd-multipletext__item-title{font-size:12px;line-height:16px;height:16px;padding-right:0;border-right:none;margin-bottom:0;margin-top:calc(1 * var(--base-unit, 8px));width:100%;max-width:none}.sd-root-modern.sd-root-modern--mobile .sd-multipletext__item{width:100%}.sd-root-modern.sd-root-modern--mobile .sd-multipletext__item .sd-input{padding-right:0;padding-left:0;margin-top:0;margin-bottom:calc(1 * var(--base-unit, 8px))}.sd-root-modern.sd-root-modern--mobile .sd-selectbase--multi-column{flex-direction:column}.sd-root-modern.sd-root-modern--mobile .sd-selectbase--multi-column .sd-selectbase__column:not(:last-child){padding-right:0}.sd-root-modern.sd-root-modern--mobile .sd-question.sd-question--table>.sd-question__content{padding-top:0}.sd-root-modern.sd-root-modern--mobile .sd-question--table,.sd-root-modern.sd-root-modern--mobile .sd-question--scroll{overflow-x:visible}.sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-matrix__cell{display:flex;align-items:flex-start}.sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-matrix__cell .sd-matrix__responsive-title{margin-left:calc(1 * var(--base-unit, 8px));text-align:left}.sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-matrix__cell:first-of-type{padding-top:calc(2 * var(--base-unit, 8px));padding-bottom:calc(1 * var(--base-unit, 8px))}.sd-root-modern.sd-root-modern--mobile .sd-table thead{display:none}.sd-root-modern.sd-root-modern--mobile .sd-table tr{display:block}.sd-root-modern.sd-root-modern--mobile .sd-matrix__table tr+tr{margin-top:calc(1 * var(--base-unit, 8px))}.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr{padding-bottom:calc(1 * var(--base-unit, 8px))}.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr::after{z-index:12;content:" ";display:block;position:relative;height:1px;background-color:var(--border-light, #eaeaea);left:calc(-2 * var(--base-unit, 8px));bottom:calc(-1 * var(--base-unit, 8px));width:calc(100% + 4 * var(--base-unit, 8px));z-index:12}.sd-root-modern.sd-root-modern--mobile .sd-matrix__label{justify-content:start}.sd-root-modern.sd-root-modern--mobile .sd-table__cell{display:block;padding-top:0;padding-bottom:0}.sd-root-modern.sd-root-modern--mobile .sd-table__cell:not(.sd-matrix__cell):not(:first-of-type){margin-top:calc(1 * var(--base-unit, 8px))}.sd-root-modern.sd-root-modern--mobile .sd-table__cell:not(.sd-matrix__cell):not(.sd-table__cell--actions):not(.sd-table__cell--row-text)::before{padding-top:calc(2 * var(--base-unit, 8px));padding-bottom:calc(1 * var(--base-unit, 8px));content:attr(data-responsive-title);font-weight:600;display:block;text-align:left}.sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-table__cell--actions{width:auto}.sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-table__cell--actions .sd-action-bar{margin-right:calc(-3 * var(--base-unit, 8px));justify-content:flex-end;background:var(--background, #fff)}.sd-root-modern.sd-root-modern--mobile .sd-action.sd-action.sd-matrixdynamic__remove-btn{opacity:1;padding:calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px))}.sd-root-modern.sd-root-modern--mobile .sd-action.sd-action.sd-matrixdynamic__remove-btn .sd-action__icon{display:none}.sd-root-modern.sd-root-modern--mobile .sd-action.sd-action.sd-matrixdynamic__remove-btn:after{content:attr(title)}.sd-root-modern.sd-root-modern--mobile .sd-matrixdynamic__footer{padding-top:calc(1 * var(--base-unit, 8px));margin-bottom:calc(-2 * var(--base-unit, 8px))}.sd-root-modern.sd-root-modern--mobile .sd-table__cell--row-text:not(.sd-matrix__cell){color:var(--foreground-light, #909090);padding-top:calc(2 * var(--base-unit, 8px))}.sd-root-modern.sd-root-modern--mobile .sd-matrixdropdown.sd-table tr:not(:last-child){padding-bottom:calc(2 * var(--base-unit, 8px))}.sd-root-modern.sd-root-modern--mobile .sd-matrixdropdown.sd-table tr::after{bottom:calc(-2 * var(--base-unit, 8px))}.sd-root-modern.sd-root-modern--mobile .sd-matrixdropdown.sd-table tr:last-child:after{content:none}.sd-root-modern.sd-root-modern--mobile .sd-matrixdynamic__btn.sd-matrixdynamic__add-btn{margin-left:calc(-2 * var(--base-unit, 8px))}.sd-root-modern.sd-root-modern--mobile .sv-ranking-item{left:calc(-3 * var(--base-unit, 8px))}.sd-root-modern.sd-root-modern--mobile .sv-ranking-item__icon-container{margin-left:0;margin-right:0}.sv-brand-info{width:100%;font-family:"Open Sans",sans-serif;text-align:center;color:#161616;padding:150px 32px 150px 32px;background:#fff}.sv-brand-info a{color:#161616}.sv-brand-info__text{line-height:24px;font-size:16px}.sv-brand-info__logo{display:inline-block}.sv-brand-info__logo img{width:200px}.sv-brand-info__terms{line-height:16px;font-size:12px}body{--sv-defaultV2-mark: true}.sd-root-modern{--sd-mobile-width: 600px;--sd-imagepicker-gap: 16px;width:100%;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;background-color:var(--background-dim, #f3f3f3)}.sd-root-modern *{scrollbar-width:thin;scrollbar-color:var(--border, #d6d6d6) rgba(0,0,0,0)}.sd-root-modern ::-webkit-scrollbar{width:12px;height:12px;background-color:rgba(0,0,0,0)}.sd-root-modern ::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:32px;background-color:var(--border, #d6d6d6)}.sd-root-modern ::-webkit-scrollbar-track{background:rgba(0,0,0,0)}.sd-root-modern ::-webkit-scrollbar-thumb:hover{border:2px solid rgba(0,0,0,0);background-color:var(--foreground-light, #909090)}.sv-popup .sv-popup__scrolling-content{scrollbar-width:thin;scrollbar-color:var(--border, #d6d6d6) rgba(0,0,0,0)}.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar,.sv-popup .sv-popup__scrolling-content::-webkit-scrollbar{width:12px;height:12px;background-color:var(--background, #fff)}.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-thumb,.sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-thumb{border:4px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:32px;background-color:var(--border, #d6d6d6)}.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-track,.sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-track{background:rgba(0,0,0,0)}.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-thumb:hover,.sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-thumb:hover{border:2px solid rgba(0,0,0,0);background-color:var(--foreground-light, #909090)}.sv-popup.sv-popup--dropdown .sv-popup__shadow{box-shadow:0px calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) rgba(0,0,0,.1)}.sv-popup.sv-popup--dropdown .sv-popup__body-content{background-color:var(--background, #fff);padding:calc(1 * var(--base-unit, 8px)) 0}.sv-popup.sv-popup--modal .sv-popup__body-content{box-shadow:0px calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) rgba(0,0,0,.1);background-color:var(--background-dim-light, #f9f9f9)}.sv-popup.sv-popup--modal .sv-popup__body-footer{padding-bottom:2px}.sv-popup.sv-popup--overlay .sv-popup__body-content{background-color:var(--background-dim, #f3f3f3)}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
+    url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215,
+    U+E0FF, U+EFFD, U+F000;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'),
+    url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215,
+    U+E0FF, U+EFFD, U+F000;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+.svc-logic-question-value,
+.sd-element--with-frame:not(.sd-element--collapsed) {
+  border-radius: calc(0.5 * var(--base-unit, 8px));
+  box-sizing: border-box;
+  padding-left: var(--sd-base-padding);
+  padding-right: var(--sd-base-padding);
+  padding-bottom: var(--sd-base-padding);
+  background: var(--background, #fff);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+}
+.svc-logic-question-value > .sd-question__erbox--outside-question,
+.sd-element--with-frame:not(.sd-element--collapsed) > .sd-question__erbox--outside-question {
+  margin-left: calc(-1 * var(--sd-base-padding));
+  margin-right: calc(-1 * var(--sd-base-padding));
+  width: calc(100% + 2 * var(--sd-base-padding));
+}
+.svc-logic-question-value.sd-question--paneldynamic,
+.sd-element--with-frame:not(.sd-element--collapsed).sd-question--paneldynamic {
+  padding-bottom: 0;
+}
+.svc-logic-question-value.sd-question--paneldynamic > .sd-question__erbox--below-question,
+.sd-element--with-frame:not(.sd-element--collapsed).sd-question--paneldynamic > .sd-question__erbox--below-question {
+  bottom: 0;
+  margin-top: 0;
+}
+.sd-element--with-frame > .sd-question__erbox--above-question {
+  margin-top: calc(-1 * var(--sd-base-vertical-padding));
+}
+.svc-logic-question-value,
+.sd-element:not(.sd-element--collapsed) {
+  padding-top: var(--sd-base-vertical-padding);
+}
+.sd-table__cell--detail-panel .sd-element:not(.sd-element--collapsed) {
+  padding-top: calc(0.5 * var(--base-unit, 8px));
+}
+.sd-element.sd-element--complex {
+  padding-top: 0;
+}
+.sd-element--expanded > .sd-element__header,
+.sd-element--collapsed > .sd-element__header {
+  cursor: pointer;
+}
+.sd-element--collapsed > .sd-element__header {
+  padding: calc(2 * var(--base-unit, 8px)) var(--sd-base-padding);
+  box-sizing: border-box;
+  background-color: var(--background, #fff);
+}
+.sd-element--collapsed.sd-element--with-frame > .sd-element__header {
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+  border-radius: calc(0.5 * var(--base-unit, 8px));
+}
+.sd-element--collapsed > .sd-element__header:focus-within,
+.sd-element--collapsed > .sd-element__header:hover {
+  background-color: var(--background-dim-light, #f9f9f9);
+}
+.sd-element__title {
+  outline: none;
+}
+.sd-element__title.sd-element__title--disabled {
+  opacity: 0.25;
+}
+.sd-root--readonly .sd-element__title.sd-element__title--disabled {
+  opacity: 1;
+}
+.sd-element--collapsed:not(.sd-element--with-frame) > .sd-element__header {
+  margin-left: calc(-1 * var(--sd-base-padding));
+  width: calc(100% + 2 * var(--sd-base-padding));
+}
+.sd-element--complex:not(.sd-element--collapsed) > .sd-element__header--location-top {
+  padding-top: var(--sd-base-vertical-padding);
+  padding-bottom: var(--sd-base-vertical-padding);
+}
+.sd-element--complex:not(.sd-element--collapsed) > .sd-element__header--location-top:after {
+  content: ' ';
+  display: block;
+  position: relative;
+  bottom: calc(-1 * var(--sd-base-vertical-padding));
+  height: 1px;
+  background: var(--border-light, #eaeaea);
+}
+.sd-element--complex.sd-element--with-frame > .sd-element__header--location-top:after {
+  content: ' ';
+  left: calc(-1 * var(--sd-base-padding));
+  width: calc(100% + 2 * var(--sd-base-padding));
+}
+.sd-element--nested.sd-element--complex > .sd-element__header--location-top {
+  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+}
+.sd-element--nested.sd-element--complex > .sd-element__header--location-top:after {
+  bottom: calc(-0.5 * var(--sd-base-vertical-padding));
+}
+.sd-element--nested.sd-panel,
+.sd-element--nested.sd-question--paneldynamic {
+  border: 1px solid var(--border-light, #eaeaea);
+  box-sizing: border-box;
+  padding-left: var(--sd-base-padding);
+  padding-right: var(--sd-base-padding);
+  margin-top: var(--sd-base-vertical-padding);
+}
+.sd-element--nested.sd-panel > .sd-element__header--location-top,
+.sd-element--nested.sd-question--paneldynamic > .sd-element__header--location-top {
+  padding-top: calc(0.5 * var(--sd-base-vertical-padding));
+  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+}
+.sd-element--nested.sd-panel > .sd-element__header--location-top:after,
+.sd-element--nested.sd-question--paneldynamic > .sd-element__header--location-top:after {
+  left: calc(-1 * var(--sd-base-padding));
+  width: calc(100% + 2 * var(--sd-base-padding));
+  bottom: calc(-0.5 * var(--sd-base-vertical-padding));
+}
+.sd-element--nested.sd-panel > .sd-question__erbox--outside-question,
+.sd-element--nested.sd-question--paneldynamic > .sd-question__erbox--outside-question {
+  margin-left: calc(-1 * var(--sd-base-padding));
+  margin-right: calc(-1 * var(--sd-base-padding));
+  width: calc(100% + 2 * var(--sd-base-padding));
+}
+.sd-element--nested.sd-panel > .sd-question__erbox--below-question,
+.sd-element--nested.sd-question--paneldynamic > .sd-question__erbox--below-question {
+  bottom: 0;
+  margin-top: 0;
+}
+.sd-element--nested.sd-panel:not(.sd-element--collapsed) {
+  padding-bottom: var(--sd-base-padding);
+}
+.svc-question__content .sd-element {
+  padding-top: 0;
+}
+.svc-question__content .sd-element--complex > .sd-element__header--location-top {
+  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+  padding-top: 0;
+}
+.svc-question__content .sd-element--complex > .sd-element__header--location-top:after {
+  display: none;
+}
+.sd-element--invisible {
+  opacity: 0.35;
+}
+.sd-element__title {
+  font-size: 0;
+  line-height: 0;
+  position: static;
+  font-weight: 600;
+  margin: 0;
+}
+.sd-element__title .sd-element__num {
+  font-size: calc(1.5 * var(--base-unit, 8px));
+  line-height: calc(2 * var(--base-unit, 8px));
+}
+.sd-element__title span {
+  font-size: calc(2 * var(--base-unit, 8px));
+  line-height: calc(3 * var(--base-unit, 8px));
+}
+.sd-element__title .sv-title-actions__title {
+  font-size: 0;
+  line-height: 0;
+}
+.sd-element__title .svc-string-editor {
+  display: inline-block;
+  max-width: 100%;
+}
+.sd-element__title .sv-string-editor {
+  max-width: 100%;
+  white-space: normal;
+}
+.sd-element__title .sv-title-actions__title {
+  white-space: nowrap;
+}
+.sd-element__title .sv-string-viewer {
+  white-space: normal;
+}
+.sd-element__num {
+  float: left;
+  padding: calc(0.625 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px)) calc(0.375 * var(--base-unit, 8px));
+  width: calc(4 * var(--base-unit, 8px));
+  font-size: calc(1.5 * var(--base-unit, 8px));
+  line-height: calc(2 * var(--base-unit, 8px));
+  color: var(--foreground-light, #909090);
+  margin-inline-start: calc(-4 * var(--base-unit, 8px));
+  text-align: right;
+  box-sizing: border-box;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+.sd-element__num + span {
+  float: left;
+  width: 0;
+}
+div:not(:only-of-type) > .sd-element:not(.sd-question--paneldynamic) > .sd-question__header .sd-action-bar,
+.sd-element__title--expandable .sd-action-bar {
+  margin-right: 0;
+}
+div:not(:only-of-type) > .sd-element:not(.sd-question--paneldynamic) > .sd-question__header .sd-element__num,
+.sd-element__title--expandable .sd-element__num {
+  float: none;
+  margin-left: 0;
+  width: auto;
+  padding-left: 0;
+  padding-right: 0;
+}
+div:not(:only-of-type) > .sd-element:not(.sd-question--paneldynamic) > .sd-question__header .sd-element__num + span,
+.sd-element__title--expandable .sd-element__num + span {
+  float: none;
+  width: auto;
+}
+.sd-element__title--expandable.sd-element__title--expandable {
+  position: relative;
+  display: block;
+}
+.sd-element__title--expandable:before {
+  content: '';
+  display: inline-block;
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 14L5 13L10 8L5 3L6 2L12 8L6 14Z' fill='%23909090'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-position: center center;
+  height: calc(2 * var(--base-unit, 8px));
+  width: calc(2 * var(--base-unit, 8px));
+  position: absolute;
+  left: calc(-3 * var(--base-unit, 8px));
+  top: calc(0.5 * var(--base-unit, 8px));
+}
+.sd-element__title--expandable.sd-element__title--expanded:before {
+  transform: rotate(90deg);
+}
+.sd-question {
+  position: relative;
+}
+.sd-question__erbox {
+  padding: calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px));
+  border-radius: calc(0.5 * var(--base-unit, 8px));
+  font-weight: 600;
+  line-height: calc(2 * var(--base-unit, 8px));
+  font-size: calc(1.5 * var(--base-unit, 8px));
+  white-space: normal;
+  text-align: left;
+}
+.sd-question__erbox--outside-question {
+  width: 100%;
+  color: var(--red, #e60a3e);
+  background-color: var(--red-light, rgba(230, 10, 62, 0.1));
+  box-sizing: border-box;
+}
+.sd-question__erbox--above-question {
+  border-radius: calc(0.5 * var(--base-unit, 8px)) calc(0.5 * var(--base-unit, 8px)) 0 0;
+  margin-bottom: calc(var(--sd-base-vertical-padding) - var(--base-unit, 8px));
+}
+.sd-question__erbox--below-question {
+  margin-top: calc(1 * var(--base-unit, 8px));
+}
+.sd-element--with-frame > .sd-question__erbox--below-question {
+  position: relative;
+  margin-top: 0;
+  bottom: calc(-1 * var(--sd-base-padding));
+  border-radius: 0 0 calc(0.5 * var(--base-unit, 8px)) calc(0.5 * var(--base-unit, 8px));
+}
+.sd-root-modern--mobile .sd-question__erbox--below-question {
+  margin-top: calc(1 * var(--base-unit, 8px));
+}
+.sd-question__header {
+  width: 100%;
+}
+.sd-question__header--location-top {
+  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+}
+.sd-scrollable .sd-question__content {
+  overflow-x: auto;
+  padding: calc(2 * var(--base-unit, 8px)) 0;
+}
+.sd-question__header--location--left {
+  display: inline-block;
+  width: auto;
+  max-width: 50%;
+  vertical-align: top;
+  margin-top: calc(1.5 * var(--base-unit, 8px));
+}
+.sd-question--left {
+  display: flex;
+}
+.sd-question__content--left {
+  display: inline-block;
+  padding-left: calc(3 * var(--base-unit, 8px));
+  flex: 1;
+}
+.sd-question__required-text {
+  color: var(--red, #e60a3e);
+  vertical-align: top;
+}
+.sd-question__form-group {
+  margin-top: calc(2 * var(--base-unit, 8px));
+}
+.sd-question__erbox--tooltip {
+  display: none;
+  position: fixed;
+  height: auto;
+  width: auto;
+  max-width: calc(29 * var(--base-unit, 8px));
+  background-color: var(--background, #fff);
+  color: var(--foreground, #161616);
+  opacity: 0.75;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+.sd-question__content:hover:not(:focus-within) > .sd-question__erbox--tooltip {
+  display: block;
+}
+.sd-question__erbox--location--top,
+.sd-question__erbox--location--bottom {
+  display: block;
+  color: var(--red, #e60a3e);
+  padding-left: 0;
+  padding-right: 0;
+  text-align: left;
+}
+.sd-question--complex .sd-question__erbox--above-question {
+  margin-top: 0;
+}
+.sd-question--complex .sd-question__erbox--above-question ~ .sd-question__header--location-top {
+  padding-top: calc(1 * var(--base-unit, 8px));
+}
+.sd-question--empty.sd-question--complex > .sd-question__header--location-top {
+  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+}
+.sd-question--empty.sd-question--complex > .sd-question__header--location-top:after {
+  display: none;
+}
+.sd-question__placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: calc(0.5 * var(--base-unit, 8px));
+  justify-content: center;
+  min-height: calc(24 * var(--base-unit, 8px));
+  line-height: calc(3 * var(--base-unit, 8px));
+  font-size: calc(2 * var(--base-unit, 8px));
+  color: var(--foreground-light, #909090);
+}
+.sd-question__placeholder > div .sv-string-viewer,
+.sd-question__placeholder > span .sv-string-viewer {
+  white-space: pre-line;
+}
+.sd-question--empty.sd-question--complex > .sd-question__content {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.sd-question--empty.sd-question--complex > .sd-question__content:first-child {
+  padding-top: var(--sd-base-padding);
+}
+.sd-scrollable-container:not(.sd-scrollable-container--compact) {
+  width: max-content;
+  overflow-x: hidden;
+  max-width: 100%;
+}
+.sd-input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  position: static;
+  width: 100%;
+  height: calc(6 * var(--base-unit, 8px));
+  box-sizing: border-box;
+  padding: calc(1.5 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
+  line-height: calc(3 * var(--base-unit, 8px));
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: calc(2 * var(--base-unit, 8px));
+  color: var(--foreground, #161616);
+  background-color: var(--background-dim-light, #f9f9f9);
+  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
+  border: none;
+  border-radius: 3px;
+  text-align: left;
+}
+.sd-input.sd-input:focus {
+  outline: none;
+}
+.sd-input--disabled {
+  background-color: var(--background-dim-light, #f9f9f9);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.sd-input::placeholder {
+  color: var(--foreground-light, #909090);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.sd-input--disabled,
+.sd-input--disabled::placeholder {
+  color: var(--foreground-disabled, rgba(22, 22, 22, 0.25));
+}
+.sd-root--readonly .sd-input--disabled,
+.sd-root--readonly .sd-input--disabled::placeholder {
+  color: var(--foreground, #161616);
+}
+.sd-input:focus {
+  box-shadow: 0 0 0 2px var(--primary, #19b394), inset 0px 1px 2px var(--border-inside, rgba(0, 0, 0, 0.16));
+}
+.sd-input--error {
+  background-color: var(--red-light, rgba(230, 10, 62, 0.1));
+}
+.sd-comment {
+  display: block;
+  height: auto;
+  min-width: calc(6 * var(--base-unit, 8px));
+  min-height: calc(6 * var(--base-unit, 8px));
+  max-width: 100%;
+}
+.sd-panel {
+  position: relative;
+}
+.sd-panel .sd-row {
+  margin-top: calc(1 * var(--base-unit, 8px));
+}
+.sd-panel .sd-row:first-of-type {
+  margin-top: 0;
+}
+.sd-panel__required-text {
+  color: var(--red, #e60a3e);
+}
+.sd-panel__footer {
+  box-sizing: border-box;
+  padding-left: calc(var(--sd-base-padding) - 3 * var(--base-unit, 8px));
+  margin-left: calc(-1 * var(--sd-base-padding));
+  width: calc(100% + 2 * var(--sd-base-padding));
+  margin-bottom: calc(-1 * var(--sd-base-padding) + 0.5 * var(--sd-base-vertical-padding));
+  margin-top: calc(0.5 * var(--sd-base-vertical-padding));
+  border-top: 1px solid var(--border-light, #eaeaea);
+  padding-top: calc(0.5 * var(--sd-base-vertical-padding));
+}
+.sjs_sp_placeholder {
+  color: var(--foreground-light, #909090);
+}
+.sjs_sp_container {
+  border: 1px dashed var(--border, #d6d6d6);
+}
+.sjs_sp_controls.sd-signaturepad__controls {
+  right: calc(1 * var(--base-unit, 8px));
+  top: calc(1 * var(--base-unit, 8px));
+  left: auto;
+  bottom: auto;
+}
+.sd-question--signature:not(.sd-question--answered) .sd-signaturepad__controls {
+  display: none;
+}
+.sd-question--signature.sd-question--error .sjs_sp_placeholder {
+  background-color: var(--red-light, rgba(230, 10, 62, 0.1));
+}
+.sd-checkbox__decorator {
+  border-radius: 3px;
+}
+.sd-checkbox__svg {
+  display: none;
+  width: calc(2.5 * var(--base-unit, 8px));
+  height: calc(2.5 * var(--base-unit, 8px));
+}
+.sd-checkbox--checked .sd-checkbox__svg {
+  display: block;
+}
+.sd-checkbox--checked .sd-checkbox__svg use {
+  fill: var(--primary-foreground, #fff);
+}
+.sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__svg use {
+  fill: var(--border, #d6d6d6);
+}
+.sd-checkbox--checked .sd-checkbox__control:focus + .sd-checkbox__decorator .sd-checkbox__svg use {
+  fill: var(--primary, #19b394);
+}
+.sd-matrixdynamic__btn.sd-matrixdynamic__add-btn {
+  position: sticky;
+  left: calc(-3 * var(--base-unit, 8px));
+  margin-left: calc(-3 * var(--base-unit, 8px));
+  z-index: 12;
+}
+.sd-matrixdynamic__footer:first-child {
+  padding-bottom: calc(2 * var(--base-unit, 8px));
+}
+.sd-matrixdynamic__footer {
+  padding-top: calc(1 * var(--base-unit, 8px));
+}
+.sd-action.sd-matrixdynamic__remove-btn {
+  opacity: 0.5;
+}
+.sd-matrixdynamic__btn {
+  appearance: none;
+  background: rgba(0, 0, 0, 0);
+  border: none;
+  line-height: calc(3 * var(--base-unit, 8px));
+  font-size: calc(2 * var(--base-unit, 8px));
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: 600;
+  padding: calc(1 * var(--base-unit, 8px)) 0;
+}
+.sd-matrixdynamic__drag-element {
+  padding: calc(2 * var(--base-unit, 8px));
+}
+.sd-matrixdynamic__drag-element:hover {
+  background-color: var(--background, #fff);
+}
+.sd-matrixdynamic__drag-element:after {
+  content: ' ';
+  display: block;
+  height: calc(0.5 * var(--base-unit, 8px));
+  width: calc(2 * var(--base-unit, 8px));
+  border: 1px solid var(--border, #d6d6d6);
+  box-sizing: border-box;
+  border-radius: 10px;
+}
+.sd-matrixdynamic__placeholder .sd-matrixdynamic__add-btn {
+  margin-left: 0;
+}
+.sd-drag-element__svg {
+  width: calc(2 * var(--base-unit, 8px));
+  height: calc(2 * var(--base-unit, 8px));
+  display: block;
+}
+.sd-drag-element__svg use {
+  fill: var(--foreground-light, #909090);
+}
+.sd-table {
+  width: 100%;
+  background-color: var(--background, #fff);
+  border-collapse: collapse;
+  white-space: normal;
+}
+.sd-table--align-top .sd-table__cell {
+  vertical-align: top;
+}
+.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td,
+.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type {
+  background-color: var(--background-dim-light, #f9f9f9);
+}
+.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-input,
+.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-input {
+  background-color: var(--primary-foreground, #fff);
+}
+.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) > td .sd-item__decorator,
+.sd-table--alternate-rows .sd-table__row:nth-of-type(odd) td:first-of-type .sd-item__decorator {
+  --sd-item-default-background: $primary-foreground;
+}
+.sd-table__cell {
+  font-weight: normal;
+  font-size: calc(2 * var(--base-unit, 8px));
+  line-height: calc(3 * var(--base-unit, 8px));
+  padding: calc(1 * var(--base-unit, 8px));
+  color: var(--foreground, #161616);
+  text-align: center;
+}
+.sd-question--disabled .sd-table__cell {
+  opacity: 0.25;
+}
+.sd-root--readonly .sd-question--disabled .sd-table__cell {
+  opacity: 1;
+}
+.sd-table__cell--header {
+  font-weight: 600;
+  vertical-align: top;
+  padding: calc(1.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px)) calc(2.5 * var(--base-unit, 8px));
+}
+.sd-table__cell--header:not(.sd-table__cell--empty) {
+  min-width: calc(14 * var(--base-unit, 8px));
+}
+.sd-matrixdropdown .sd-table__cell--header.sd-table__cell--empty {
+  min-width: calc(14 * var(--base-unit, 8px));
+  width: calc(14 * var(--base-unit, 8px));
+}
+.sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty) {
+  min-width: calc(14 * var(--base-unit, 8px));
+  width: calc(14 * var(--base-unit, 8px));
+}
+.sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty).sd-table__cell--dropdown,
+.sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty).sd-table__cell--rating {
+  min-width: calc(22 * var(--base-unit, 8px));
+  width: calc(22 * var(--base-unit, 8px));
+}
+.sd-matrixdropdown .sd-table__cell--header:not(.sd-table__cell--empty).sd-table__cell--boolean {
+  min-width: calc(18 * var(--base-unit, 8px));
+  width: calc(18 * var(--base-unit, 8px));
+}
+.sd-table__cell--detail-panel {
+  padding: 0 calc(1 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
+}
+.sd-table__cell--actions .sv-action-bar,
+.sd-matrixdynamic__add-btn .sv-action-bar {
+  overflow: visible;
+}
+.sd-table__cell--actions .svc-string-editor__button--done,
+.sd-matrixdynamic__add-btn .svc-string-editor__button--done {
+  width: calc(2 * var(--base-unit, 8px));
+}
+.svc-question__content .sd-table__cell--actions .sv-action-bar-item:disabled {
+  background: var(--background, #fff);
+  opacity: 1;
+}
+.svc-question__content .sd-table__cell--actions .sv-action-bar-item:disabled use {
+  fill: var(--foreground-light, #909090);
+}
+.sd-table__cell--actions:not(.sd-table__cell--vertical) {
+  width: 0;
+}
+.sd-table__cell--detail-button {
+  border: none;
+  background: rgba(0, 0, 0, 0);
+  border-radius: calc(2 * var(--base-unit, 8px));
+  width: calc(4 * var(--base-unit, 8px));
+  height: calc(4 * var(--base-unit, 8px));
+  padding: calc(1 * var(--base-unit, 8px));
+}
+.sd-table__cell--detail-button svg {
+  width: calc(2 * var(--base-unit, 8px));
+  height: calc(2 * var(--base-unit, 8px));
+  fill: var(--foreground-light, #909090);
+}
+.sd-table__cell--detail-button:hover {
+  background: var(--green-light, rgba(25, 179, 148, 0.1));
+}
+.sd-table__cell--detail-button:hover svg {
+  fill: var(--primary, #19b394);
+}
+.sd-table__cell--actions {
+  white-space: nowrap;
+}
+.sd-table__cell--actions.sd-table__cell--vertical .sd-action-bar {
+  justify-content: center;
+}
+.sd-table__cell--row-text {
+  font-weight: 600;
+  text-align: left;
+  min-width: calc(12 * var(--base-unit, 8px));
+  padding: calc(2.5 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px));
+}
+.sd-table__question-wrapper:not(:focus-within):hover {
+  position: relative;
+}
+.sd-table__question-wrapper:not(:focus-within):hover .sd-question__erbox--tooltip {
+  display: inline-block;
+}
+.sd-table__cell--actions:not(.sd-table__cell--vertical),
+.sd-table__cell--empty,
+.sd-table__cell--row-text,
+.sd-matrix__cell:first-of-type,
+.sd-matrix tr > td:first-of-type {
+  position: sticky;
+  background: var(--background, #fff);
+  z-index: 12;
+}
+.sd-table__cell--actions:not(.sd-table__cell--vertical):first-of-type,
+.sd-table__cell--empty:first-of-type,
+.sd-table__cell--row-text:first-of-type,
+.sd-matrix__cell:first-of-type:first-of-type,
+.sd-matrix tr > td:first-of-type:first-of-type {
+  left: calc(-1 * var(--base-unit, 8px));
+}
+.sd-table__cell--actions:not(.sd-table__cell--vertical):last-of-type,
+.sd-table__cell--empty:last-of-type,
+.sd-table__cell--row-text:last-of-type,
+.sd-matrix__cell:first-of-type:last-of-type,
+.sd-matrix tr > td:first-of-type:last-of-type {
+  right: calc(-1 * var(--base-unit, 8px));
+}
+.sd-table__cell--actions:not(.sd-table__cell--vertical):last-child .sd-action-bar {
+  margin-right: calc(-3 * var(--base-unit, 8px));
+  justify-content: flex-end;
+  background: var(--background, #fff);
+}
+.sd-question.sd-question--table {
+  position: relative;
+  overflow-x: auto;
+}
+.sd-question--table > .sd-question__content {
+  display: flex;
+  padding-top: calc(2.5 * var(--base-unit, 8px));
+  margin: 0 calc(-1 * var(--sd-base-padding));
+  width: fit-content;
+  min-width: calc(100% + 2 * var(--sd-base-padding));
+}
+.sd-question--table > .sd-question__content:before,
+.sd-question--table > .sd-question__content:after {
+  content: '';
+  display: block;
+  position: sticky;
+  min-height: 100%;
+  width: calc(var(--sd-base-padding) - var(--base-unit, 8px));
+  flex-shrink: 0;
+  background: var(--background, #fff);
+  z-index: 11;
+}
+.sd-question--table > .sd-question__content::before {
+  left: calc(-1 * var(--sd-base-padding));
+}
+.sd-question--table > .sd-question__content:after {
+  right: calc(-1 * var(--sd-base-padding));
+}
+.sd-question--table > .sd-question__content > div {
+  flex-basis: 100%;
+}
+.sd-question--table > .sd-question__header {
+  position: sticky;
+  left: 0;
+}
+.sd-question--table:not(.sd-element--with-frame) {
+  padding-right: var(--sd-base-padding);
+  margin-right: calc(-1 * var(--sd-base-padding));
+  padding-left: var(--sd-base-padding);
+  margin-left: calc(-1 * var(--sd-base-padding));
+  box-sizing: content-box;
+}
+.sd-question--scroll {
+  overflow-x: scroll;
+}
+.sd-matrixdropdown.sd-table {
+  table-layout: fixed;
+}
+.sd-body--responsive .sd-page {
+  padding: calc(5 * var(--base-unit, 8px)) var(--sd-page-vertical-padding) calc(2 * var(--base-unit, 8px));
+}
+.sd-body--responsive .sd-page.sd-page__empty-header {
+  padding-top: calc(3 * var(--base-unit, 8px));
+}
+.sd-root-modern--mobile .sd-page {
+  padding-top: calc(2 * var(--base-unit, 8px));
+}
+.sd-page {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: calc(5 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
+  width: 100%;
+  box-sizing: border-box;
+}
+.sd-page__title {
+  position: static;
+  font-size: calc(3 * var(--base-unit, 8px));
+  line-height: calc(4 * var(--base-unit, 8px));
+  margin: calc(0.5 * var(--base-unit, 8px)) 0px;
+}
+.sd-page__description {
+  position: static;
+  font-size: calc(2 * var(--base-unit, 8px));
+  line-height: calc(3 * var(--base-unit, 8px));
+  margin: calc(0.5 * var(--base-unit, 8px)) 0px;
+}
+.sd-row {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  box-sizing: border-box;
+  margin-top: calc(2 * var(--base-unit, 8px));
+}
+.sd-page__row.sd-row--multiple,
+.svc-row > .sd-row--multiple {
+  background: var(--background, #fff);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+  border-radius: calc(0.5 * var(--base-unit, 8px));
+}
+:not(.svc-row) > .sd-row--multiple {
+  row-gap: calc(1 * var(--base-unit, 8px));
+  margin-left: calc(-2 * var(--base-unit, 8px));
+  width: calc(100% + 2 * var(--base-unit, 8px));
+  flex-wrap: wrap;
+}
+:not(.svc-row) > .sd-row--multiple > div {
+  box-sizing: border-box;
+  padding-left: calc(2 * var(--base-unit, 8px));
+}
+:not(.svc-row) > .sd-page__row.sd-row--multiple {
+  padding: 0 var(--sd-base-padding) var(--sd-base-padding) calc(var(--sd-base-padding) - 2 * var(--base-unit, 8px));
+  margin-left: 0;
+  width: 100%;
+}
+.svc-row .sd-row--multiple {
+  overflow: auto;
+  margin-top: calc(2 * var(--base-unit, 8px));
+}
+.svc-row--multiple .sd-row--multiple {
+  gap: calc(1 * var(--base-unit, 8px));
+}
+:not(.svc-row--ghost) > .sd-row {
+  min-height: 50px;
+}
+.sd-row__panel {
+  box-sizing: border-box;
+  width: 100%;
+}
+.sd-row__question {
+  box-sizing: border-box;
+  width: 100%;
+  white-space: nowrap;
+}
+.svc-tab-designer .sd-title {
+  display: flex;
+}
+.sd-title {
+  display: block;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-style: normal;
+  color: var(--foreground, #161616);
+  flex-direction: row;
+  white-space: normal;
+  word-break: break-word;
+}
+.sd-title.sd-container-modern__title {
+  display: flex;
+  align-items: center;
+  padding: var(--sd-page-vertical-padding) var(--sd-page-vertical-padding);
+  overflow: auto;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  gap: calc(4 * var(--base-unit, 8px));
+  box-shadow: 0px 2px 0px var(--primary, #19b394);
+}
+.sd-title.sd-container-modern__title .sd-logo__image {
+  margin-top: calc(1 * var(--base-unit, 8px));
+}
+.sd-header__text {
+  display: flex;
+  flex-direction: column;
+  gap: calc(1 * var(--base-unit, 8px));
+  flex-grow: 1;
+}
+.sd-header__text h3 {
+  font-size: calc(4 * var(--base-unit, 8px));
+  font-weight: 700;
+  line-height: calc(5 * var(--base-unit, 8px));
+  color: var(--primary, #19b394);
+}
+.sd-header__text h5 {
+  font-size: calc(2 * var(--base-unit, 8px));
+  font-weight: 400;
+  line-height: calc(3 * var(--base-unit, 8px));
+}
+.sd-title .sv-title-actions {
+  width: 100%;
+  justify-content: space-between;
+}
+.sd-root-modern:not(.svc-tab-designer) .sd-container-modern__title {
+  background-color: var(--background, #fff);
+}
+.sd-root-modern .sd-container-modern__title .sd-header__text h3 {
+  margin: 0;
+}
+.sd-root-modern .sd-container-modern__title .sd-description {
+  margin: 0;
+}
+.sd-title .sv-title-actions {
+  align-items: flex-start;
+  width: calc(100% + 3 * var(--base-unit, 8px));
+}
+.sd-title .sv-title-actions .sv-title-actions__title {
+  flex-wrap: wrap;
+  flex: 0 1 auto;
+  max-width: calc(100% - 3 * var(--base-unit, 8px));
+  white-space: initial;
+  min-width: unset;
+}
+.sd-action-title-bar {
+  flex: 1 9 auto;
+  min-width: calc(6 * var(--base-unit, 8px));
+  justify-content: flex-end;
+  margin: calc(-1 * var(--base-unit, 8px)) 0;
+}
+.sd-action-title-bar .sv-action {
+  flex: 0 0 auto;
+}
+.sd-action-title-bar.sd-action-bar--empty {
+  min-width: 0;
+}
+.sd-description {
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  color: var(--foreground-light, #909090);
+  white-space: normal;
+  word-break: break-word;
+}
+.sd-item {
+  padding: calc(1.5 * var(--base-unit, 8px)) 0;
+}
+.sd-item--disabled.sd-item--disabled .sd-item__decorator,
+.sd-item__decorator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(3 * var(--base-unit, 8px));
+  height: calc(3 * var(--base-unit, 8px));
+  box-sizing: border-box;
+  box-shadow: inset 0px 1px 2px var(--border-inside, rgba(0, 0, 0, 0.16));
+  background: var(--sd-item-default-background, var(--background-dim-light, #f9f9f9));
+  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
+  border: none;
+  flex-shrink: 0;
+}
+.sd-item--checked .sd-item__decorator {
+  box-shadow: none;
+}
+.sd-item__control:focus + .sd-item__decorator,
+.sd-item--allowhover .sd-selectbase__label:hover .sd-item__decorator {
+  box-shadow: 0 0 0 2px var(--primary, #19b394);
+  outline: none;
+}
+.sd-item__control:focus + .sd-item__decorator,
+.sd-item--allowhover .sd-selectbase__label:hover .sd-item__decorator {
+  background: var(--background, #fff);
+}
+.sd-item--checked .sd-item__decorator {
+  background: var(--primary, #19b394);
+}
+.sd-item__control-label {
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-style: normal;
+  font-weight: normal;
+  line-height: calc(3 * var(--base-unit, 8px));
+  font-size: calc(2 * var(--base-unit, 8px));
+  color: var(--foreground, #161616);
+  white-space: normal;
+  word-break: break-word;
+  width: 100%;
+  text-align: left;
+}
+.sd-item--disabled .sd-item__control-label {
+  color: var(--foreground-disabled, rgba(22, 22, 22, 0.25));
+}
+.sd-root--readonly .sd-item--disabled .sd-item__control-label {
+  color: var(--foreground, #161616);
+}
+.sd-item--error .sd-item__decorator {
+  background: var(--red-light, rgba(230, 10, 62, 0.1));
+}
+.sd-selectbase {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+.sd-selectbase--row {
+  border: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: calc(4 * var(--base-unit, 8px));
+}
+.sd-selectbase--multi-column {
+  display: flex;
+  flex: 1 1 0px;
+}
+.sd-selectbase__label {
+  display: flex;
+  position: relative;
+  gap: calc(1 * var(--base-unit, 8px));
+}
+.sd-selectbase__column {
+  vertical-align: top;
+}
+.sd-selectbase__column {
+  display: block;
+  box-sizing: border-box;
+  word-break: break-word;
+  flex: 1 1 0px;
+}
+.sd-selectbase__column:not(:last-child) {
+  padding-right: calc(2 * var(--base-unit, 8px));
+}
+.sd-selectbase__column.sv-q-column-1 {
+  width: 100%;
+}
+.sd-selectbase__other {
+  margin-top: calc(2 * var(--base-unit, 8px));
+}
+.sd-selectbase__item .sd-selectbase__other {
+  margin-top: calc(3.5 * var(--base-unit, 8px));
+}
+.sd-selectbase__item:last-child .sd-selectbase__other {
+  margin-bottom: calc(-2 * var(--base-unit, 8px));
+}
+.sd-checkbox__decorator {
+  border-radius: 3px;
+}
+.sd-checkbox__svg {
+  display: none;
+  width: calc(2.5 * var(--base-unit, 8px));
+  height: calc(2.5 * var(--base-unit, 8px));
+}
+.sd-checkbox--checked .sd-checkbox__svg {
+  display: block;
+}
+.sd-checkbox--checked .sd-checkbox__svg use {
+  fill: var(--primary-foreground, #fff);
+}
+.sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__svg use {
+  fill: var(--border, #d6d6d6);
+}
+.sd-checkbox--checked .sd-checkbox__control:focus + .sd-checkbox__decorator .sd-checkbox__svg use {
+  fill: var(--primary, #19b394);
+}
+.sd-radio__decorator {
+  border-radius: 50%;
+}
+.sd-radio--checked .sd-radio__decorator:after {
+  content: ' ';
+  display: block;
+  width: calc(1 * var(--base-unit, 8px));
+  height: calc(1 * var(--base-unit, 8px));
+  border-radius: 50%;
+  background-color: var(--primary-foreground, #fff);
+}
+.sd-radio--checked.sd-radio--disabled .sd-radio__decorator:after {
+  background-color: var(--border, #d6d6d6);
+}
+.sd-radio--checked .sd-radio__control:focus + .sd-radio__decorator:after {
+  background-color: var(--primary, #19b394);
+}
+.sd-radio__svg {
+  display: none;
+}
+.sd-visuallyhidden {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  clip: rect(1px, 1px, 1px, 1px);
+}
+.sd-matrix fieldset {
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+.sd-matrix__label {
+  display: flex;
+  justify-content: center;
+}
+.sd-matrix__text {
+  padding: calc(2 * var(--base-unit, 8px));
+}
+.sd-matrix__text--checked {
+  background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
+  padding: calc(2 * var(--base-unit, 8px));
+}
+.sd-matrix__cell:first-of-type {
+  font-weight: 600;
+  text-align: left;
+}
+.sd-rating {
+  overflow-x: auto;
+  min-height: calc(8 * var(--base-unit, 8px));
+}
+.sd-rating fieldset {
+  display: flex;
+  border: none;
+  padding: 0 0 calc(2 * var(--base-unit, 8px)) 0;
+  flex-wrap: nowrap;
+  gap: calc(1 * var(--base-unit, 8px));
+}
+.sd-rating.sd-rating--wrappable fieldset {
+  flex-wrap: wrap;
+}
+.sd-rating__item {
+  position: relative;
+  background: var(--background, #fff);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+  border-radius: calc(12.5 * var(--base-unit, 8px));
+  white-space: nowrap;
+  padding: calc(1.25 * var(--base-unit, 8px));
+  box-sizing: border-box;
+  min-width: calc(6 * var(--base-unit, 8px));
+  text-align: center;
+  border: 2px solid var(--background, #fff);
+  color: var(--foreground, #161616);
+}
+.sd-rating__item--error {
+  background-color: var(--red-light, rgba(230, 10, 62, 0.1));
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0);
+  border-color: rgba(0, 0, 0, 0);
+}
+.sd-rating__item.sd-rating__item--disabled {
+  color: var(--foreground-disabled, rgba(22, 22, 22, 0.25));
+}
+.sd-rating__item.sd-rating__item--selected.sd-rating__item--disabled {
+  color: var(--primary-foreground-disabled, rgba(255, 255, 255, 0.25));
+}
+.sd-rating__item--allowhover:hover,
+.sd-rating__item:focus-within {
+  border-color: var(--primary, #19b394);
+}
+.sd-rating__item--selected {
+  background-color: var(--primary, #19b394);
+  border-color: var(--primary, #19b394);
+  color: var(--primary-foreground, #fff);
+}
+.sd-rating__item--selected:focus-within {
+  box-shadow: inset 0 0 0 2px var(--background, #fff);
+}
+.sd-rating__item-text.sd-rating__item-text {
+  line-height: calc(3 * var(--base-unit, 8px));
+  min-width: calc(3 * var(--base-unit, 8px));
+  display: inline-block;
+}
+.sd-rating__item-text.sd-rating__item-text.sd-rating__min-text,
+.sd-rating__item-text.sd-rating__item-text.sd-rating__max-text {
+  margin-top: calc(1.25 * var(--base-unit, 8px));
+  margin-bottom: calc(1.25 * var(--base-unit, 8px));
+  border: 2px solid var(--background, #fff);
+  color: var(--foreground-light, #909090);
+}
+.sd-rating__item-text.sd-rating__item-text.sd-rating__min-text {
+  margin-right: calc(1 * var(--base-unit, 8px));
+  margin-left: calc(2 * var(--base-unit, 8px));
+}
+.sd-rating__item-text.sd-rating__item-text.sd-rating__max-text {
+  margin-right: calc(2 * var(--base-unit, 8px));
+  margin-left: calc(1 * var(--base-unit, 8px));
+}
+.sd-rating__item-text.sd-rating__item-text .sv-string-editor {
+  white-space: nowrap;
+}
+.sv-ranking-item--error .sv-ranking-item__index {
+  background-color: var(--red-light, rgba(230, 10, 62, 0.1));
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0);
+  border-color: rgba(0, 0, 0, 0);
+}
+.sd-element--with-frame .sv-ranking-item {
+  left: calc(-5 * var(--base-unit, 8px));
+}
+.sd-element--with-frame .sv-ranking-item__icon {
+  margin-left: 7px;
+}
+.sd-element--with-frame .sv-ranking-item__icon-container {
+  width: calc(3 * var(--base-unit, 8px));
+  height: calc(3 * var(--base-unit, 8px));
+  margin-right: calc(1 * var(--base-unit, 8px));
+  margin-left: calc(1 * var(--base-unit, 8px));
+}
+.sd-element--with-frame .sv-ranking--mobile .sv-ranking-item__icon-container {
+  margin-left: 0;
+  margin-right: calc(1 * var(--base-unit, 8px));
+}
+.sd-element--with-frame .sv-ranking--mobile .sv-ranking-item {
+  left: 0;
+}
+.sv-ranking-item__text {
+  color: var(--foreground, #161616);
+}
+.sd-ranking--disabled .sv-ranking-item__text {
+  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+}
+.sv-ranking-item__content.sd-ranking-item__content {
+  line-height: calc(3 * var(--base-unit, 8px));
+}
+.sd-dropdown {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  padding-right: calc(6 * var(--base-unit, 8px));
+  background-position: right calc(1.5 * var(--base-unit, 8px)) top 50%, 0 0;
+  background-repeat: no-repeat;
+  background-size: calc(3 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
+  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 15L17 10H7L12 15Z' fill='%23909090'/%3E%3C/svg%3E%0A");
+  opacity: 1;
+  display: flex;
+  justify-content: space-between;
+}
+.sd-dropdown[disabled] {
+  pointer-events: none;
+}
+.sd-dropdown--empty:not(.sd-input--disabled),
+.sd-dropdown--empty:not(.sd-input--disabled) .sd-dropdown__value {
+  color: var(--foreground-light, #909090);
+}
+.sd-dropdown__input-field-component {
+  height: auto;
+}
+.sd-dropdown option {
+  color: var(--foreground, #161616);
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: calc(2 * var(--base-unit, 8px));
+}
+.sd-dropdown__value {
+  width: 100%;
+  min-height: calc(3 * var(--base-unit, 8px));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: calc(2 * var(--base-unit, 8px));
+  color: var(--foreground, #161616);
+  position: relative;
+}
+.sd-dropdown_clean-button {
+  padding: 0 calc(1 * var(--base-unit, 8px));
+  margin: auto 0;
+}
+.sd-dropdown_clean-button-svg {
+  width: calc(3 * var(--base-unit, 8px));
+  height: calc(3 * var(--base-unit, 8px));
+}
+.sd-dropdown use {
+  fill: var(--foreground-light, #909090);
+}
+.sd-input.sd-dropdown:focus-within {
+  box-shadow: 0 0 0 2px var(--primary, #19b394), inset 0px 1px 2px var(--border-inside, rgba(0, 0, 0, 0.16));
+}
+.sd-input.sd-dropdown:focus-within .sd-dropdown__filter-string-input {
+  z-index: 2000;
+}
+.sd-dropdown__filter-string-input {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  border: none;
+  outline: none;
+  padding: 0;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: calc(2 * var(--base-unit, 8px));
+  background-color: rgba(0, 0, 0, 0);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  line-height: calc(3 * var(--base-unit, 8px));
+  appearance: none;
+}
+.sd-dropdown--empty:not(.sd-input--disabled) .sd-dropdown__filter-string-input::placeholder {
+  color: var(--foreground-light, #909090);
+}
+.sd-dropdown__filter-string-input::placeholder {
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: calc(2 * var(--base-unit, 8px));
+  color: var(--foreground, #161616);
+  width: 100%;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  line-height: calc(3 * var(--base-unit, 8px));
+  appearance: none;
+}
+.sd-input.sd-tagbox:not(.sd-tagbox--empty):not(.sd-input--disabled) {
+  height: auto;
+  padding: calc(0.5 * var(--base-unit, 8px));
+  padding-right: calc(6 * var(--base-unit, 8px));
+}
+.sd-tagbox.sd-tagbox--empty {
+  padding: calc(0.5 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px)) calc(0.5 * var(--base-unit, 8px))
+    calc(2 * var(--base-unit, 8px));
+}
+.sd-tagbox_clean-button {
+  height: calc(3 * var(--base-unit, 8px));
+  padding: calc(1 * var(--base-unit, 8px));
+  margin: auto 0;
+}
+.sd-input.sd-tagbox:focus-within {
+  box-shadow: 0 0 0 2px var(--primary, #19b394), inset 0px 1px 2px var(--border-inside, rgba(0, 0, 0, 0.16));
+}
+.sv-tagbox__item {
+  position: relative;
+  display: flex;
+  height: calc(3 * var(--base-unit, 8px));
+  padding: calc(1 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px));
+  background-color: var(--primary, #19b394);
+  border-radius: calc(0.25 * var(--base-unit, 8px));
+}
+.sv-tagbox__item-text {
+  color: var(--primary-foreground, #fff);
+  min-width: calc(5.5 * var(--base-unit, 8px));
+  text-align: center;
+}
+.sv-tagbox__item:hover .sd-tagbox-item_clean-button,
+.sv-tagbox__item:focus .sd-tagbox-item_clean-button,
+.sv-tagbox__item:focus-within .sd-tagbox-item_clean-button {
+  display: block;
+}
+.sd-tagbox-item_clean-button {
+  display: none;
+  position: absolute;
+  inset-inline-end: calc(1.5 * var(--base-unit, 8px));
+  height: calc(3 * var(--base-unit, 8px));
+  padding: 0px 0px 0px calc(4 * var(--base-unit, 8px));
+  background: linear-gradient(270deg, var(--primary, #19b394) 53.12%, rgba(25, 179, 148, 0) 100%);
+}
+.sd-tagbox-item_clean-button-svg {
+  padding: calc(0.5 * var(--base-unit, 8px));
+}
+.sd-tagbox-item_clean-button-svg:hover {
+  border-radius: 100px;
+  background: var(--primary-foreground-disabled, rgba(255, 255, 255, 0.25));
+}
+.sd-tagbox-item_clean-button-svg use {
+  fill: var(--primary-foreground, #fff);
+}
+.sd-tagbox__value.sd-dropdown__value {
+  position: relative;
+  gap: calc(0.5 * var(--base-unit, 8px));
+  display: flex;
+  flex-wrap: wrap;
+  flex-grow: 1;
+  padding-inline: unset;
+  margin-inline: unset;
+  margin-block: unset;
+}
+.sd-tagbox__filter-string-input {
+  width: auto;
+  display: flex;
+  flex-grow: 1;
+  height: calc(5 * var(--base-unit, 8px));
+  position: initial;
+}
+.sd-tagbox__placeholder {
+  position: absolute;
+  top: 0;
+  left: 0;
+  max-width: 100%;
+  width: auto;
+  height: 100%;
+  text-align: left;
+  cursor: text;
+  pointer-events: none;
+  color: var(--foreground-light, #909090);
+}
+.sd-imagepicker {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0;
+  border: none;
+  gap: calc(2 * var(--base-unit, 8px));
+  width: 100%;
+  margin: 0;
+}
+.sd-imagepicker--column {
+  align-items: flex-start;
+  flex-direction: column;
+}
+@supports not (aspect-ratio: 1/1) {
+  .sd-imagepicker > div {
+    margin-right: calc(2 * var(--base-unit, 8px));
+  }
+}
+.sd-imagepicker__item img,
+.sd-imagepicker__item .sd-imagepicker__image-container > div {
+  border-radius: calc(0.5 * var(--base-unit, 8px));
+  background-color: var(--background-dim, #f3f3f3);
+}
+.sd-imagepicker__item-decorator {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.sd-imagepicker__image-container {
+  position: relative;
+}
+.sd-imagepicker__item--checked .sd-imagepicker__image-container::before {
+  display: block;
+  position: absolute;
+  content: ' ';
+  top: calc(1 * var(--base-unit, 8px));
+  right: calc(1 * var(--base-unit, 8px));
+  width: calc(6 * var(--base-unit, 8px));
+  height: calc(6 * var(--base-unit, 8px));
+  box-sizing: border-box;
+  border-radius: calc(12.5 * var(--base-unit, 8px));
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='17' viewBox='0 0 23 17' fill='none'%3E%3Cpath d='M8.33331 16.1L0.333313 8L2.43331 5.9L8.33331 11.9L20.2333 0L22.3333 2.1L8.33331 16.1Z' fill='%2319B394'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 22px calc(2 * var(--base-unit, 8px));
+  background-color: var(--background, #fff);
+  z-index: 1;
+}
+.sd-imagepicker_ > _item--error .sd-imagepicker__image-container::before {
+  display: block;
+  position: absolute;
+  content: ' ';
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--red-light, rgba(230, 10, 62, 0.1));
+  border-radius: calc(0.5 * var(--base-unit, 8px));
+  background: linear-gradient(0deg, var(--red-light, rgba(230, 10, 62, 0.1)), var(--red-light, rgba(230, 10, 62, 0.1)));
+}
+.sd-imagepicker__item:focus-within .sd-imagepicker__image,
+.sd-imagepicker__item--allowhover .sd-imagepicker__image:hover {
+  opacity: 0.5;
+}
+.sd-imagepicker__image {
+  display: block;
+  box-sizing: border-box;
+  max-width: 100%;
+}
+.sd-imagepicker__text {
+  line-height: calc(3 * var(--base-unit, 8px));
+  margin-top: calc(1 * var(--base-unit, 8px));
+  color: var(--foreground, #161616);
+}
+.sd-imagepicker__no-image {
+  display: flex;
+  background-color: var(--background-dim-light, #f9f9f9);
+}
+.sd-imagepicker__no-image-svg {
+  height: calc(6 * var(--base-unit, 8px));
+  width: calc(6 * var(--base-unit, 8px));
+  margin: auto;
+}
+.sd-imagepicker__no-image-svg use {
+  fill: var(--foreground-light, #909090);
+}
+.sd-imagepicker__column {
+  display: flex;
+  flex-direction: column;
+  gap: calc(2 * var(--base-unit, 8px));
+  align-items: flex-start;
+  padding-right: 0;
+}
+.sd-selectbase__column.sd-imagepicker__column:not(:last-child) {
+  padding-right: 0;
+}
+.sd-image__image {
+  display: block;
+  max-width: 100%;
+  border-radius: calc(0.5 * var(--base-unit, 8px));
+}
+.sd-image__image--adaptive {
+  width: 100%;
+  height: auto;
+  max-width: calc(80 * var(--base-unit, 8px));
+}
+.sd-html {
+  white-space: initial;
+}
+.sd-progress {
+  height: 2px;
+  background-color: var(--border-light, #eaeaea);
+  position: relative;
+}
+.sd-progress__bar {
+  position: relative;
+  height: 100%;
+  background-color: var(--primary, #19b394);
+  overflow: hidden;
+}
+.sd-progress__text {
+  position: absolute;
+  margin-top: calc(1 * var(--base-unit, 8px));
+  right: calc(3 * var(--base-unit, 8px));
+  color: var(--foreground-light, #909090);
+  font-size: calc(1.5 * var(--base-unit, 8px));
+  line-height: calc(2 * var(--base-unit, 8px));
+  font-weight: 600;
+}
+@media only screen and (min-width: calc(125 * var(--base-unit, 8px))) {
+  .sd-progress__text {
+    margin-left: 5%;
+  }
+}
+@media only screen and (max-width: calc(125 * var(--base-unit, 8px))) {
+  .sd-progress__text {
+    margin-left: 10px;
+  }
+}
+.sd-boolean {
+  display: flex;
+  width: max-content;
+  position: relative;
+  padding: calc(0.5 * var(--base-unit, 8px));
+  background: var(--background-dim-light, #f9f9f9);
+  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.15);
+  border-radius: calc(12.5 * var(--base-unit, 8px));
+}
+.sd-boolean__thumb,
+.sd-boolean__label {
+  display: block;
+  color: var(--foreground-light, #909090);
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: calc(2 * var(--base-unit, 8px));
+  line-height: calc(3 * var(--base-unit, 8px));
+  padding: calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
+}
+.sd-boolean__switch {
+  display: flex;
+  padding: calc(0.5 * var(--base-unit, 8px));
+  align-items: center;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: calc(12.5 * var(--base-unit, 8px));
+}
+.sd-boolean__control:focus ~ .sd-boolean__switch {
+  box-shadow: inset 0 0 0 2px var(--primary, #19b394);
+}
+.sd-boolean--indeterminate .sd-boolean__thumb {
+  display: none;
+}
+.sd-boolean__thumb {
+  background: var(--background, #fff);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+  border-radius: calc(12.5 * var(--base-unit, 8px));
+  transition-duration: 0.2s;
+  transition-property: margin-left, transform;
+  transition-timing-function: linear;
+  color: var(--primary, #19b394);
+  font-weight: 600;
+  margin-left: 0%;
+  transform: translateX(0);
+}
+.sd-boolean--checked .sd-boolean__thumb {
+  margin-left: 100%;
+  transform: translateX(-100%);
+}
+.sd-boolean--disabled .sd-boolean__thumb,
+.sd-boolean--disabled .sd-boolean__label {
+  color: var(--foreground-disabled, rgba(22, 22, 22, 0.25));
+}
+.svc-question__content
+  .sd-boolean:not(.sd-boolean--checked):not(.sd-boolean--indeterminate)
+  .sd-boolean__label:nth-of-type(1),
+.svc-question__content .sd-boolean--checked .sd-boolean__label:nth-of-type(2) {
+  color: var(--primary, #19b394);
+  font-weight: 600;
+  background: var(--background, #fff);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+  border-radius: calc(12.5 * var(--base-unit, 8px));
+}
+.svc-question__content .sd-boolean__switch {
+  display: none;
+}
+.sd-boolean--error {
+  background-color: var(--red-light, rgba(230, 10, 62, 0.1));
+}
+.sd-paneldynamic .sd-progress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2px;
+  z-index: 2;
+  transform: translateY(-1px);
+}
+.sd-paneldynamic > .sd-panel {
+  padding-top: 1px;
+  padding-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+}
+.sd-paneldynamic > .sd-panel + .sd-paneldynamic__remove-btn {
+  margin-bottom: calc(0.5 * var(--sd-base-vertical-padding));
+}
+.sd-paneldynamic .sd-paneldynamic__panel-wrapper > .sd-panel > .sd-panel__header {
+  padding-bottom: 0;
+  padding-top: calc(0.5 * var(--sd-base-vertical-padding) + var(--base-unit, 8px));
+}
+.sd-paneldynamic .sd-paneldynamic__panel-wrapper > .sd-panel > .sd-panel__header:after {
+  display: none;
+}
+.sd-paneldynamic .sd-paneldynamic__panel-wrapper > .sd-panel > .sd-panel__header > .sd-panel__title {
+  color: var(--foreground-light, #909090);
+}
+.sd-paneldynamic .sd-paneldynamic__panel-wrapper > .sd-panel > .sd-panel__header ~ .sd-panel__content {
+  margin-top: calc(1 * var(--base-unit, 8px));
+}
+.sd-question__content:first-child > .sd-paneldynamic > .sd-paneldynamic__panel-wrapper > .sd-panel > .sd-panel__header {
+  padding-top: var(--sd-base-vertical-padding);
+}
+.sd-paneldynamic__separator {
+  display: block;
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: 0;
+  border-color: var(--border-light, #eaeaea);
+  background: var(--border-light, #eaeaea);
+  height: 1px;
+  border: none;
+}
+.sd-paneldynamic__panel-wrapper {
+  padding-bottom: calc(1 * var(--sd-base-padding));
+}
+.sd-paneldynamic__panel-wrapper:after {
+  display: table;
+  clear: both;
+  content: ' ';
+}
+.sd-paneldynamic__panel-wrapper--in-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.sd-paneldynamic__remove-btn {
+  float: right;
+  position: relative;
+  top: calc(0.5 * var(--sd-base-vertical-padding));
+  margin-bottom: calc(-1 * var(--base-unit, 8px));
+  margin-right: calc(-3 * var(--base-unit, 8px));
+}
+.sd-paneldynamic__footer {
+  clear: both;
+}
+.sd-paneldynamic__footer .sd-paneldynamic__prev-btn,
+.sd-paneldynamic__footer .sd-paneldynamic__next-btn {
+  display: block;
+}
+.sd-paneldynamic__footer .sd-paneldynamic__prev-btn svg,
+.sd-paneldynamic__footer .sd-paneldynamic__next-btn svg {
+  width: calc(2 * var(--base-unit, 8px));
+  height: calc(2 * var(--base-unit, 8px));
+}
+.sd-paneldynamic__footer .sd-paneldynamic__add-btn,
+.sd-paneldynamic__footer .sd-paneldynamic__progress-text,
+.sd-paneldynamic__footer .sd-paneldynamic__progress--bottom {
+  display: initial;
+}
+.sd-paneldynamic__buttons-container {
+  display: flex;
+  align-items: center;
+  padding: calc(var(--sd-base-vertical-padding) - var(--base-unit, 8px)) 0;
+}
+.sd-paneldynamic__progress-container {
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  margin-right: calc(-1 * var(--base-unit, 8px));
+}
+.sd-paneldynamic__progress-text {
+  color: var(--foreground-light, #909090);
+  margin: 0;
+  margin-right: calc(3 * var(--base-unit, 8px));
+}
+.sd-paneldynamic__prev-btn,
+.sd-paneldynamic__next-btn {
+  width: calc(2 * var(--base-unit, 8px));
+  height: calc(2 * var(--base-unit, 8px));
+}
+.sd-paneldynamic__prev-btn .sv-svg-icon,
+.sd-paneldynamic__next-btn .sv-svg-icon {
+  display: block;
+}
+.sd-paneldynamic__prev-btn {
+  margin-right: calc(2 * var(--base-unit, 8px));
+}
+.sd-paneldynamic__next-btn {
+  margin-left: calc(-1 * var(--base-unit, 8px));
+  margin-right: calc(2 * var(--base-unit, 8px));
+  transform: rotate(180deg);
+}
+.sd-paneldynamic__placeholder .sd-paneldynamic__add-btn {
+  display: initial;
+  margin-left: 0;
+}
+.sd-question--empty.sd-question--paneldynamic > .sd-question__content {
+  padding-bottom: var(--sd-base-padding);
+}
+.svc-question__content .sd-paneldynamic__panel-wrapper {
+  padding: 0;
+}
+.sd-paneldynamic__buttons-container .sd-action-bar {
+  width: 100%;
+  margin: 0 calc(-3 * var(--base-unit, 8px));
+  width: calc(100% + 6 * var(--base-unit, 8px));
+}
+.sd-file {
+  min-height: calc(36 * var(--base-unit, 8px));
+  position: relative;
+  font-size: calc(2 * var(--base-unit, 8px));
+  line-height: calc(3 * var(--base-unit, 8px));
+}
+.sd-file .sv-action-bar {
+  padding: calc(1 * var(--base-unit, 8px)) 0;
+  justify-content: center;
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+}
+.sd-file .sv-action-bar .sv-action-bar-item {
+  height: calc(4 * var(--base-unit, 8px));
+  color: var(--foreground-light, #909090);
+  border-radius: calc(2 * var(--base-unit, 8px));
+}
+.sd-file .sv-action-bar #fileIndex .sv-action-bar-item {
+  padding: calc(0.5 * var(--base-unit, 8px)) 0;
+}
+.sd-file .sv-action-bar #fileIndex .sv-action-bar-item:hover {
+  background-color: var(--background, #fff);
+}
+.sd-file .sv-action-bar #fileIndex .sv-action-bar-item:disabled {
+  opacity: initial;
+}
+.sd-file__decorator {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: 1px dashed var(--border, #d6d6d6);
+  justify-content: center;
+  align-items: center;
+}
+.sd-file__decorator--drag {
+  border: 1px solid var(--primary, #19b394);
+  box-shadow: inset 0 0 0 1px var(--primary, #19b394);
+  background: var(--primary-light, rgba(25, 179, 148, 0.1));
+  z-index: 1;
+}
+.sd-file__no-file-chosen {
+  display: none;
+}
+.sd-file__drag-area-placeholder {
+  word-break: break-word;
+  white-space: normal;
+  color: var(--foreground-light, #909090);
+}
+.sd-file__choose-btn--text {
+  display: block;
+  margin-top: calc(1 * var(--base-unit, 8px));
+  font-weight: 600;
+  color: var(--primary, #19b394);
+  cursor: pointer;
+}
+.sd-question--answered .sd-file__drag-area-placeholder {
+  display: none;
+}
+.sd-file__choose-btn--text svg {
+  display: none;
+}
+.sd-file__choose-btn--icon {
+  z-index: 2;
+}
+.sd-file__choose-btn--icon span:first-child {
+  display: none;
+}
+.sd-file__choose-btn--icon,
+.sd-file__clean-btn {
+  top: calc(1 * var(--base-unit, 8px));
+  position: absolute;
+}
+.sd-file__clean-btn {
+  z-index: 2;
+  right: calc(1 * var(--base-unit, 8px));
+}
+.sd-file__clean-btn span:first-child {
+  display: none;
+}
+.sd-file__choose-btn--icon {
+  right: calc(8 * var(--base-unit, 8px));
+}
+.sd-file__list {
+  overflow: auto;
+  display: flex;
+  box-sizing: content-box;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: space-between;
+  padding: calc(10.5 * var(--base-unit, 8px)) 0;
+  min-height: calc(15 * var(--base-unit, 8px));
+  max-height: calc(15 * var(--base-unit, 8px));
+  position: absolute;
+  width: 100%;
+}
+.sd-file__preview {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  min-height: 100%;
+  margin: 0 auto;
+}
+.sd-file__preview .sd-file__default-image {
+  width: calc(7 * var(--base-unit, 8px));
+  height: 90px;
+}
+.sd-file__preview img:hover + .sd-file__remove-file-button,
+.sd-file__preview svg:hover + .sd-file__remove-file-button,
+.sd-file__preview .sd-file__remove-file-button:hover {
+  display: block;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.sd-file__sign {
+  margin-top: calc(1 * var(--base-unit, 8px));
+  text-align: center;
+  font-size: calc(1.5 * var(--base-unit, 8px));
+  line-height: calc(2 * var(--base-unit, 8px));
+}
+.sd-file__sign a {
+  display: block;
+  text-decoration: none;
+  color: var(--foreground, #161616);
+  white-space: normal;
+  word-break: break-all;
+  width: calc(12 * var(--base-unit, 8px));
+  overflow: hidden;
+  max-height: calc(6 * var(--base-unit, 8px));
+  text-overflow: ellipsis;
+  line-height: calc(2 * var(--base-unit, 8px));
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+.sd-file__remove-file-button {
+  display: none;
+}
+.sd-file__decorator--error {
+  background-color: var(--red-light, rgba(230, 10, 62, 0.1));
+}
+.sd-file__image-wrapper {
+  position: relative;
+  text-align: center;
+  min-width: calc(12 * var(--base-unit, 8px));
+  min-height: calc(12 * var(--base-unit, 8px));
+}
+.sd-file__image-wrapper img:not(.sd-file__default-image) {
+  display: block;
+  width: calc(12 * var(--base-unit, 8px));
+  height: calc(12 * var(--base-unit, 8px));
+  object-fit: contain;
+  background: var(--background-dim, #f3f3f3);
+}
+.sd-file--single img:hover + .sd-file__remove-file-button {
+  display: none;
+}
+.sd-file--mobile .sd-file__list {
+  height: calc(100% - 4 * var(--base-unit, 8px));
+}
+.sd-file--single-image {
+  height: calc(36 * var(--base-unit, 8px));
+}
+.sd-file--single-image .sd-file__preview {
+  width: 100%;
+  margin: 0;
+}
+.sd-file--single-image .sd-file__list {
+  padding: 0;
+  height: 100%;
+  max-height: 100%;
+  width: 100%;
+}
+.sd-file--single-image .sd-file__image-wrapper {
+  min-height: 100%;
+  min-width: 100%;
+}
+.sd-file--single-image .sd-file__image-wrapper img {
+  width: 100%;
+  height: 100%;
+  background-color: var(--background-dim-light, #f9f9f9);
+}
+.sd-file--single-image .sd-file__sign {
+  position: absolute;
+  margin: 0;
+  width: 100%;
+  min-height: 100%;
+}
+.sd-file--single-image .sd-file__sign a {
+  color: rgba(0, 0, 0, 0);
+  width: 100%;
+  height: 100%;
+  outline: none;
+}
+.sd-file > input:focus + .sd-file__decorator .sd-file__choose-btn.sd-file__choose-btn--icon use {
+  fill: var(--primary, #19b394);
+}
+.sd-file > input:focus + .sd-file__decorator .sd-file__choose-btn:not(.sd-file__choose-btn--icon) {
+  background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
+}
+.sd-file__drag-area {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.sd-hidden {
+  display: none !important;
+}
+.sd-body__navigation .sd-btn {
+  padding: calc(2 * var(--base-unit, 8px)) calc(8 * var(--base-unit, 8px));
+}
+.sd-root-modern--mobile .sd-body__navigation .sv-action:not(.sv-action--hidden),
+.sd-root-modern--mobile .sd-body__navigation .sd-btn {
+  flex-grow: 1;
+}
+.sd-root-modern--mobile .sd-body__navigation .sd-btn {
+  padding: calc(2 * var(--base-unit, 8px)) calc(4 * var(--base-unit, 8px));
+}
+.sd-body__navigation .sv-action--hidden {
+  display: none;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
+    url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215,
+    U+E0FF, U+EFFD, U+F000;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'),
+    url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215,
+    U+E0FF, U+EFFD, U+F000;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+.sd-btn {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  padding: calc(2 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
+  background: var(--background, #fff);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+  border-radius: calc(0.5 * var(--base-unit, 8px));
+  cursor: pointer;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: calc(2 * var(--base-unit, 8px));
+  line-height: calc(3 * var(--base-unit, 8px));
+  text-align: center;
+  color: var(--primary, #19b394);
+  border: 2px solid rgba(0, 0, 0, 0);
+  outline: none;
+}
+.sd-btn:not(:disabled):hover,
+.sd-btn:not(:disabled):focus {
+  box-shadow: 0 0 0 2px var(--primary, #19b394);
+}
+.sd-btn:disabled {
+  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  cursor: default;
+}
+.sd-btn--action {
+  background-color: var(--primary, #19b394);
+  color: var(--primary-foreground, #fff);
+}
+.sd-btn--action:not(:disabled):hover,
+.sd-btn--action:not(:disabled):focus {
+  color: var(--primary, #19b394);
+  background-color: var(--background, #fff);
+}
+.sd-btn--action:disabled {
+  color: var(--primary-foreground-disabled, rgba(255, 255, 255, 0.25));
+}
+.sd-body {
+  width: 100%;
+}
+.sd-body .sd-body__page {
+  min-width: calc(300px + 6 * var(--base-unit, 8px));
+}
+.sd-body .sd-body__timer {
+  padding: calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) 0;
+  box-sizing: border-box;
+}
+.sd-body.sd-body--static {
+  max-width: calc(84 * var(--base-unit, 8px));
+  margin-left: auto;
+  margin-right: auto;
+}
+.sd-body.sd-body--static .sd-body__timer,
+.sd-body.sd-body--static .sd-body__navigation,
+.sd-body.sd-body--static .sd-body__page {
+  margin-left: 0;
+  margin-right: 0;
+}
+.sd-body.sd-body--responsive {
+  max-width: initial;
+}
+.sd-body.sd-body--responsive .sd-body__timer,
+.sd-body.sd-body--responsive .sd-body__navigation {
+  padding: calc(2 * var(--base-unit, 8px)) var(--sd-page-vertical-padding);
+}
+.sd-body__navigation.sd-action-bar {
+  box-sizing: border-box;
+  padding: calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
+  flex-wrap: wrap;
+  gap: calc(2 * var(--base-unit, 8px));
+}
+.sd-body__progress {
+  margin-bottom: calc(4 * var(--base-unit, 8px));
+}
+.sd-body--empty {
+  min-height: 400px;
+  text-align: center;
+  padding-top: 180px;
+  box-sizing: border-box;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Open Sans Semibold'), local('OpenSans-Semibold'),
+    url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215,
+    U+E0FF, U+EFFD, U+F000;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'),
+    url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215,
+    U+E0FF, U+EFFD, U+F000;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+.sd-multipletext {
+  width: 100%;
+  table-layout: fixed;
+  border-spacing: 0;
+  height: 1px;
+}
+.sd-multipletext__cell {
+  height: 100%;
+}
+.sd-multipletext__cell:not(:last-child) {
+  padding-right: calc(2 * var(--base-unit, 8px));
+}
+.sd-multipletext__item-container.sd-input:focus-within {
+  box-shadow: inset 0 0 0 2px var(--primary, #19b394), inset 0px 1px 2px var(--border-inside, rgba(0, 0, 0, 0.16));
+}
+.sd-multipletext__item-container {
+  display: flex;
+  align-items: flex-start;
+  height: 100%;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.sd-multipletext__item-container .sd-input {
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+  border: none;
+  box-shadow: none;
+  height: calc(3 * var(--base-unit, 8px));
+}
+.sd-multipletext__item-container .sd-input,
+.sd-multipletext__item-title {
+  margin-top: calc(1.5 * var(--base-unit, 8px));
+  margin-bottom: calc(1.5 * var(--base-unit, 8px));
+}
+.sd-multipletext__item-title {
+  height: calc(100% - var(--base-unit, 8px) * 3);
+  max-width: 30%;
+  padding-right: calc(2 * var(--base-unit, 8px));
+  border-right: 1px solid var(--border, #d6d6d6);
+  word-break: break-word;
+  white-space: normal;
+  color: var(--foreground-light, #909090);
+}
+.sd-multipletext__item {
+  flex-grow: 1;
+}
+.sd-multipletext__item-container--error {
+  background-color: var(--red-light, rgba(230, 10, 62, 0.1));
+}
+.sd-multipletext__item-container--error .sd-input--error {
+  background-color: rgba(0, 0, 0, 0);
+}
+.sd-multipletext__item-container:hover:not(:focus-within) > .sd-question__erbox--tooltip {
+  display: inline-block;
+}
+.sd-multipletext tr:not(:last-child) .sd-multipletext__cell {
+  padding-bottom: calc(2 * var(--base-unit, 8px));
+}
+.sd-action {
+  appearance: none;
+  border: none;
+  background: rgba(0, 0, 0, 0);
+  padding: calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
+  color: var(--primary, #19b394);
+  border-radius: calc(12.5 * var(--base-unit, 8px));
+  font-weight: 600;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-style: normal;
+  font-size: calc(2 * var(--base-unit, 8px));
+  line-height: calc(3 * var(--base-unit, 8px));
+  outline: none;
+}
+.sd-action--negative {
+  color: var(--red, #e60a3e);
+}
+.sd-action--icon {
+  padding: calc(1 * var(--base-unit, 8px));
+}
+.sd-action--icon use {
+  fill: var(--foreground-light, #909090);
+}
+svg.sd-action--icon {
+  fill: var(--foreground-light, #909090);
+}
+.sd-action:disabled,
+.sd-action--disabled {
+  color: var(--foreground, #161616);
+  cursor: default;
+  opacity: 0.25;
+  cursor: default;
+  pointer-events: none;
+}
+.sd-action:hover,
+.sd-action:focus {
+  outline: none;
+  background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
+  cursor: pointer;
+  opacity: 1;
+}
+.sd-action:hover.sd-action--icon,
+.sd-action:focus.sd-action--icon {
+  background-color: var(--background-dim, #f3f3f3);
+}
+.sd-action:hover.sd-action--negative,
+.sd-action:focus.sd-action--negative {
+  background-color: var(--red-light, rgba(230, 10, 62, 0.1));
+}
+.sd-action:hover.sd-action--negative.sd-action--icon use,
+.sd-action:focus.sd-action--negative.sd-action--icon use {
+  fill: var(--red, #e60a3e);
+}
+.sd-action:hover:active,
+.sd-action:focus:active {
+  opacity: 0.5;
+}
+.sd-action__icon {
+  display: block;
+  width: calc(3 * var(--base-unit, 8px));
+  height: calc(3 * var(--base-unit, 8px));
+}
+.sd-action--pressed {
+  background-color: var(--background-dim, #f3f3f3);
+  opacity: 0.5;
+}
+.sd-action-bar {
+  display: flex;
+  align-items: center;
+}
+.sd-action-bar .sv-action:not(:last-child) .sv-action__content {
+  padding-right: 0;
+}
+.sd-context-btn {
+  background-color: var(--background, #fff);
+  padding: calc(1.5 * var(--base-unit, 8px));
+  border-radius: calc(12.5 * var(--base-unit, 8px));
+  border: none;
+  outline: none;
+  cursor: pointer;
+}
+.sd-context-btn svg {
+  display: block;
+  width: calc(3 * var(--base-unit, 8px));
+  height: calc(3 * var(--base-unit, 8px));
+}
+.sd-context-btn use {
+  fill: var(--foreground-light, #909090);
+}
+.sd-context-btn:hover use,
+.sd-context-btn:focus use {
+  fill: var(--primary, #19b394);
+}
+.sd-context-btn:hover.sd-context-btn--negative use,
+.sd-context-btn:focus.sd-context-btn--negative use {
+  fill: var(--red, #e60a3e);
+}
+.sd-context-btn:disabled {
+  opacity: 0.25;
+}
+.sd-completedpage {
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-weight: bold;
+  box-sizing: border-box;
+  text-align: center;
+  height: auto;
+}
+.sd-completedpage h3 {
+  font-size: calc(3 * var(--base-unit, 8px));
+}
+.sd-completedpage:before,
+.sd-completedpage:after {
+  display: block;
+  width: calc(9 * var(--base-unit, 8px));
+  margin-left: calc(50% - 4.5 * var(--base-unit, 8px));
+  content: '';
+}
+.sd-completedpage:before {
+  height: calc(13 * var(--base-unit, 8px));
+}
+.sd-completedpage:after {
+  height: calc(2 * var(--base-unit, 8px));
+}
+.sd-progress-buttons__image-button-left {
+  display: none;
+}
+.sd-progress-buttons__image-button-right {
+  display: none;
+}
+.sd-progress-buttons__image-button--hidden {
+  visibility: hidden;
+}
+.sd-progress-buttons__list {
+  display: flex;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+.sd-progress-buttons__list li {
+  text-align: center;
+  flex-grow: 1;
+  text-decoration: none;
+  border-top: 2px solid var(--border-light, #eaeaea);
+  padding-top: calc(2 * var(--base-unit, 8px));
+  padding-bottom: calc(4 * var(--base-unit, 8px));
+  cursor: pointer;
+}
+.sd-progress-buttons__list li:hover .sd-progress-buttons__page-title {
+  text-decoration-line: underline;
+}
+.sd-progress-buttons__list .sd-progress-buttons__list-element--current,
+.sd-progress-buttons__list .sd-progress-buttons__list-element--passed {
+  border-top: 2px solid var(--primary, #19b394);
+}
+.sd-progress-buttons__list-element--nonclickable .sd-progress-buttons__page-title {
+  color: var(--foreground-light, #909090);
+}
+.sd-progress-buttons__list-element--current .sd-progress-buttons__page-title,
+.sd-progress-buttons__list-element--current .sd-progress-buttons__page-description {
+  color: var(--primary, #19b394);
+}
+.sd-progress-buttons__page-title {
+  width: 100%;
+  font-size: calc(2 * var(--base-unit, 8px));
+  font-weight: 600;
+  line-height: calc(3 * var(--base-unit, 8px));
+}
+.sd-progress-buttons__page-description {
+  width: 100%;
+  font-size: calc(1.5 * var(--base-unit, 8px));
+  line-height: calc(2 * var(--base-unit, 8px));
+  font-weight: 600;
+  color: var(--foreground-light, #909090);
+}
+.sv-list {
+  padding: 0;
+  margin: 0;
+  overflow-y: auto;
+  background: var(--background, #fff);
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  list-style-type: none;
+}
+.sv-list__empty-container {
+  width: 100%;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  box-sizing: border-box;
+  padding: calc(1.5 * var(--base-unit, 8px)) calc(8 * var(--base-unit, 8px));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sv-list__empty-text {
+  line-height: calc(3 * var(--base-unit, 8px));
+  font-size: calc(2 * var(--base-unit, 8px));
+  font-weight: 400;
+  text-align: center;
+  color: var(--foreground-light, #909090);
+}
+.sv-list__item {
+  width: 100%;
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--foreground, #161616);
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sv-list__item-body {
+  width: 100%;
+  align-items: center;
+  box-sizing: border-box;
+  padding: calc(1 * var(--base-unit, 8px)) calc(8 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px))
+    calc(2 * var(--base-unit, 8px));
+  color: var(--foreground, #161616);
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sv-list__item.sv-list__item--focused,
+.sv-list__item:hover,
+.sv-list__item:focus {
+  outline: none;
+}
+.sv-list__item.sv-list__item--focused .sv-list__item-body,
+.sv-list__item:hover .sv-list__item-body,
+.sv-list__item:focus .sv-list__item-body {
+  background-color: var(--background-dim, #f3f3f3);
+}
+.sv-list__item--with-icon.sv-list__item--with-icon {
+  padding: 0;
+}
+.sv-list__item--with-icon.sv-list__item--with-icon .sv-list__item-body {
+  padding-top: calc(1.5 * var(--base-unit, 8px));
+  padding-bottom: calc(1.5 * var(--base-unit, 8px));
+}
+.sv-list__item-icon {
+  float: left;
+  width: calc(3 * var(--base-unit, 8px));
+  height: calc(3 * var(--base-unit, 8px));
+  margin-right: calc(2 * var(--base-unit, 8px));
+}
+.sv-list__item-icon svg {
+  display: block;
+}
+.sv-list__item-icon use {
+  fill: var(--foreground-light, #909090);
+}
+.sv-list__item-separator {
+  margin: calc(1 * var(--base-unit, 8px)) 0;
+  height: 1px;
+  background-color: var(--border, #d6d6d6);
+}
+.sv-list__item.sv-list__item--selected .sv-list__item-body {
+  background-color: var(--primary, #19b394);
+  color: var(--background, #fff);
+}
+.sv-list__item.sv-list__item--selected .sv-list__item-icon use {
+  fill: var(--background, #fff);
+}
+.sv-list__item.sv-list__item--selected.sv-list__item--focused .sv-list__item-body,
+.sv-list__item.sv-list__item--selected:hover .sv-list__item-body,
+li:focus .sv-list__item.sv-list__item--selected .sv-list__item-body {
+  background-color: var(--primary, #19b394);
+  color: var(--primary-foreground, #fff);
+}
+.sv-list__item.sv-list__item--disabled .sv-list__item-body {
+  cursor: default;
+  color: var(--foreground-light, #909090);
+}
+.sv-list__item span {
+  white-space: nowrap;
+}
+.sv-list__container {
+  position: relative;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.sv-list__filter {
+  border-bottom: 1px solid var(--border-inside, rgba(0, 0, 0, 0.16));
+  background: var(--background, #fff);
+  padding-bottom: calc(1 * var(--base-unit, 8px));
+}
+.sv-list__filter-icon {
+  display: block;
+  position: absolute;
+  top: calc(1.5 * var(--base-unit, 8px));
+  left: calc(2 * var(--base-unit, 8px));
+}
+.sv-list__filter-icon .sv-svg-icon {
+  width: calc(3 * var(--base-unit, 8px));
+  height: calc(3 * var(--base-unit, 8px));
+}
+.sv-list__filter-icon .sv-svg-icon use {
+  fill: var(--foreground-light, #909090);
+}
+.sv-list__input {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  background: var(--background, #fff);
+  box-sizing: border-box;
+  width: 100%;
+  outline: none;
+  font-size: 1em;
+  color: var(--foreground, #161616);
+  padding: calc(1.5 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px))
+    calc(7 * var(--base-unit, 8px));
+  line-height: calc(3 * var(--base-unit, 8px));
+}
+.sv-list__input::placeholder {
+  color: var(--foreground-light, #909090);
+}
+.sv-list__input:disabled,
+.sv-list__input:disabled::placeholder {
+  color: var(--foreground-light, #909090);
+}
+.sd-list {
+  padding-right: calc(0.5 * var(--base-unit, 8px));
+  padding-left: calc(0.5 * var(--base-unit, 8px));
+}
+.sd-list__item.sd-list__item {
+  padding: 0;
+}
+.sd-list__item.sd-list__item .sd-list__item-body {
+  padding-top: calc(1.5 * var(--base-unit, 8px));
+  padding-bottom: calc(1.5 * var(--base-unit, 8px));
+  border-radius: 3px;
+}
+.sd-list__item--selected.sd-list__item--selected .sd-list__item-body {
+  background-color: var(--primary-light, rgba(25, 179, 148, 0.1));
+  color: var(--foreground, #161616);
+}
+.sd-list__item--selected:hover .sd-list__item-body,
+.sd-list__item--selected:focus .sd-list__item-body {
+  background-color: var(--primary, #19b394);
+  color: var(--primary-foreground, #fff);
+}
+.sv-action-bar {
+  display: flex;
+  box-sizing: content-box;
+  position: relative;
+  align-items: center;
+  margin-left: auto;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.sv-action-bar-separator {
+  display: inline-block;
+  width: 1px;
+  height: 24px;
+  vertical-align: middle;
+  margin-right: 16px;
+  background-color: var(--border, #d6d6d6);
+}
+.sv-action-bar--default-size-mode .sv-action-bar-separator {
+  margin: 0 calc(1 * var(--base-unit, 8px));
+}
+.sv-action-bar--small-size-mode .sv-action-bar-separator {
+  margin: 0 calc(0.5 * var(--base-unit, 8px));
+}
+.sv-action-bar-item {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: flex;
+  padding: calc(1 * var(--base-unit, 8px));
+  box-sizing: border-box;
+  border: none;
+  border-radius: 2px;
+  background-color: rgba(0, 0, 0, 0);
+  color: var(--foreground, #161616);
+  cursor: pointer;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  overflow-x: hidden;
+  white-space: nowrap;
+}
+button.sv-action-bar-item {
+  overflow: hidden;
+}
+.sv-action-bar--default-size-mode .sv-action-bar-item {
+  height: calc(5 * var(--base-unit, 8px));
+  font-size: calc(2 * var(--base-unit, 8px));
+  line-height: calc(3 * var(--base-unit, 8px));
+  margin: 0 calc(1 * var(--base-unit, 8px));
+}
+.sv-action-bar--small-size-mode .sv-action-bar-item {
+  height: calc(4 * var(--base-unit, 8px));
+  font-size: calc(1.5 * var(--base-unit, 8px));
+  line-height: calc(2 * var(--base-unit, 8px));
+  margin: 0 calc(0.5 * var(--base-unit, 8px));
+}
+.sv-action:first-of-type .sv-action-bar-item {
+  margin-inline-start: 0;
+}
+.sv-action:last-of-type .sv-action-bar-item {
+  margin-inline-end: 0;
+}
+.sv-action-bar--default-size-mode .sv-action-bar-item__title--with-icon {
+  margin-inline-start: calc(1 * var(--base-unit, 8px));
+}
+.sv-action-bar--small-size-mode .sv-action-bar-item__title--with-icon {
+  margin-inline-start: calc(0.5 * var(--base-unit, 8px));
+}
+.sv-action-bar-item__icon svg {
+  display: block;
+}
+.sv-action-bar-item__icon use {
+  fill: var(--foreground-light, #909090);
+}
+.sv-action-bar-item:hover,
+.sv-action-bar-item:focus {
+  outline: none;
+  background-color: var(--background-dim, #f3f3f3);
+}
+.sv-action-bar-item:active {
+  opacity: 0.5;
+}
+.sv-action-bar-item:disabled {
+  opacity: 0.25;
+  cursor: default;
+}
+.sv-action-bar-item:disabled .sv-action-bar-item__icon use {
+  fill: var(--foreground, #161616);
+}
+.sv-action-bar-item__title {
+  color: inherit;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+.sv-action-bar-item--secondary .sv-action-bar-item__icon use {
+  fill: var(--secondary, #ff9814);
+}
+.sv-action-bar-item--active .sv-action-bar-item__icon use {
+  fill: var(--primary, #19b394);
+}
+.sv-action-bar-item-dropdown {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: flex;
+  height: calc(5 * var(--base-unit, 8px));
+  padding: calc(1 * var(--base-unit, 8px));
+  box-sizing: border-box;
+  border: none;
+  border-radius: 2px;
+  background-color: rgba(0, 0, 0, 0);
+  cursor: pointer;
+  line-height: calc(3 * var(--base-unit, 8px));
+  font-size: calc(2 * var(--base-unit, 8px));
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+.sv-expand-action:before {
+  content: '';
+  display: inline-block;
+  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23404040;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='2,2 0,4 5,9 10,4 8,2 5,5 '/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-position: center center;
+  height: 10px;
+  width: 12px;
+  margin: auto 8px;
+}
+.sv-expand-action--expanded:before {
+  transform: rotate(180deg);
+}
+.sv-dots {
+  width: 48px;
+}
+.sv-dots__item {
+  width: 100%;
+}
+.sv-dots__item .sv-action-bar-item__icon {
+  margin: auto;
+}
+.sv-action--hidden {
+  width: 0px;
+  height: 0px;
+  overflow: hidden;
+  visibility: hidden;
+}
+.sv-action__content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.sv-action__content > * {
+  flex: 0 0 auto;
+}
+.sv-action--space {
+  margin-left: auto;
+}
+.sv-action-bar-item--pressed {
+  background-color: var(--background-dim, #f3f3f3);
+  opacity: 50%;
+}
+sv-popup {
+  display: block;
+  position: absolute;
+  z-index: -1;
+}
+.sv-popup {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  outline: none;
+  z-index: 1500;
+}
+.sv-popup__container {
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
+  position: absolute;
+  padding: 0;
+}
+.sv-popup__shadow {
+  width: 100%;
+  height: 100%;
+  border-radius: calc(1 * var(--base-unit, 8px));
+}
+.sv-popup__body-content {
+  background-color: var(--background, #fff);
+  border-radius: calc(0.5 * var(--base-unit, 8px));
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  max-width: 90vw;
+}
+.sv-popup--modal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
+  padding: calc(11 * var(--base-unit, 8px)) calc(15 * var(--base-unit, 8px));
+  box-sizing: border-box;
+}
+.sv-popup--modal .sv-popup__container {
+  position: static;
+}
+.sv-popup--modal .sv-popup__body-content {
+  padding: calc(4 * var(--base-unit, 8px));
+}
+.sv-popup--overlay {
+  width: 100%;
+}
+.sv-popup--overlay .sv-popup__container {
+  background: var(--background-semitransparent, rgba(144, 144, 144, 0.5));
+  max-width: 100vw;
+  max-height: calc(100vh - 1 * var(--base-unit, 8px));
+  height: calc(100vh - 1 * var(--base-unit, 8px));
+  width: 100%;
+  padding-top: calc(2 * var(--base-unit, 8px));
+  border: unset;
+}
+.sv-popup--overlay .sv-popup__body-content {
+  max-height: 100vh;
+  max-width: 100vw;
+  border-radius: calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) 0px 0px;
+  background: var(--background, #fff);
+  box-shadow: 0px calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) rgba(0, 0, 0, 0.1);
+  padding: calc(3 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
+  height: calc(100% - (1 * var(--base-unit, 8px)));
+}
+.sv-popup--overlay .sv-popup__scrolling-content {
+  height: calc(100% - 10 * var(--base-unit, 8px));
+}
+.sv-popup--overlay .sv-popup__body-footer {
+  margin-top: calc(2 * var(--base-unit, 8px));
+}
+.sv-popup--overlay .sv-popup__body-footer .sv-action-bar {
+  width: 100%;
+}
+.sv-popup--overlay .sv-popup__body-footer .sv-action {
+  width: 100%;
+}
+.sv-popup--overlay .sv-popup__body-footer-item {
+  width: 100%;
+}
+.sv-popup--overlay .sv-popup__button {
+  background-color: var(--primary, #19b394);
+  border: 2px solid var(--primary, #19b394);
+  color: var(--primary-foreground, #fff);
+}
+.sv-popup--modal .sv-popup__scrolling-content {
+  padding: 2px;
+  margin: -2px;
+}
+.sv-popup__scrolling-content {
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+.sv-popup__scrolling-content::-webkit-scrollbar,
+.sv-popup__scrolling-content *::-webkit-scrollbar {
+  height: 6px;
+  width: 6px;
+  background-color: var(--background-dim, #f3f3f3);
+}
+.sv-popup__scrolling-content::-webkit-scrollbar-thumb,
+.sv-popup__scrolling-content *::-webkit-scrollbar-thumb {
+  background: var(--primary-light, rgba(25, 179, 148, 0.1));
+}
+.sv-popup__content {
+  min-width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.sv-popup--show-pointer.sv-popup--top .sv-popup__pointer {
+  transform: translate(calc(-1 * var(--base-unit, 8px))) rotate(180deg);
+}
+.sv-popup--show-pointer.sv-popup--bottom .sv-popup__pointer {
+  transform: translate(calc(-1 * var(--base-unit, 8px)), calc(-1 * var(--base-unit, 8px)));
+}
+.sv-popup--show-pointer.sv-popup--right {
+  transform: translate(calc(1 * var(--base-unit, 8px)));
+}
+.sv-popup--show-pointer.sv-popup--right .sv-popup__pointer {
+  transform: translate(-12px, -4px) rotate(-90deg);
+}
+.sv-popup--show-pointer.sv-popup--left {
+  transform: translate(calc(-1 * var(--base-unit, 8px)));
+}
+.sv-popup--show-pointer.sv-popup--left .sv-popup__pointer {
+  transform: translate(-4px, -4px) rotate(90deg);
+}
+.sv-popup__pointer {
+  display: block;
+  position: absolute;
+}
+.sv-popup__pointer:after {
+  content: ' ';
+  display: block;
+  width: 0;
+  height: 0;
+  border-left: calc(1 * var(--base-unit, 8px)) solid rgba(0, 0, 0, 0);
+  border-right: calc(1 * var(--base-unit, 8px)) solid rgba(0, 0, 0, 0);
+  border-bottom: calc(1 * var(--base-unit, 8px)) solid var(--background, #fff);
+  align-self: center;
+}
+.sv-popup__body-header {
+  font-family: Open Sans;
+  font-size: calc(3 * var(--base-unit, 8px));
+  line-height: calc(4 * var(--base-unit, 8px));
+  font-style: normal;
+  font-weight: 700;
+  margin-bottom: calc(2 * var(--base-unit, 8px));
+  color: var(--foreground, #161616);
+}
+.sv-popup__body-footer {
+  display: flex;
+  margin-top: calc(4 * var(--base-unit, 8px));
+}
+.sv-popup__body-footer .sv-action-bar {
+  gap: calc(1.5 * var(--base-unit, 8px));
+}
+.sv-popup__button {
+  padding: calc(2 * var(--base-unit, 8px)) calc(6 * var(--base-unit, 8px));
+  background: var(--background, #fff);
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  margin: 2px;
+  cursor: pointer;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-style: normal;
+  font-weight: 600;
+  font-size: calc(2 * var(--base-unit, 8px));
+  line-height: calc(3 * var(--base-unit, 8px));
+  text-align: center;
+  color: var(--primary, #19b394);
+  border: none;
+  outline: none;
+}
+.sv-popup__button:hover {
+  box-shadow: 0 0 0 2px var(--primary, #19b394);
+}
+.sv-popup__button:disabled {
+  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  cursor: default;
+}
+.sv-popup__button:disabled:hover {
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15);
+}
+.sv-popup__button--apply {
+  background-color: var(--primary, #19b394);
+  color: var(--primary-foreground, #fff);
+}
+.sv-popup__button--apply:disabled {
+  background-color: var(--background-dim, #f3f3f3);
+}
+.sv-popup--modal .sv-list__filter,
+.sv-popup--overlay .sv-list__filter {
+  padding-top: calc(1 * var(--base-unit, 8px));
+}
+.sv-popup--modal .sv-list__filter-icon,
+.sv-popup--overlay .sv-list__filter-icon {
+  top: calc(2.5 * var(--base-unit, 8px));
+}
+.sv-button-group {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  font-size: calc(2 * var(--base-unit, 8px));
+  overflow: auto;
+  border: 1px solid var(--border, #d6d6d6);
+}
+.sv-button-group:focus-within {
+  box-shadow: 0 0 0 1px var(--primary, #19b394);
+  border-color: var(--primary, #19b394);
+}
+.sv-button-group__item {
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  appearance: none;
+  width: 100%;
+  padding: 11px calc(2 * var(--base-unit, 8px));
+  line-height: calc(3 * var(--base-unit, 8px));
+  outline: none;
+  font-size: calc(2 * var(--base-unit, 8px));
+  font-weight: 400;
+  background: var(--background, #fff);
+  cursor: pointer;
+  overflow: hidden;
+  color: var(--foreground, #161616);
+  position: relative;
+}
+.sv-button-group__item:not(:last-of-type) {
+  border-right: 1px solid var(--border, #d6d6d6);
+}
+.sv-button-group__item--hover:hover {
+  background-color: var(--background-dim, #f3f3f3);
+}
+.sv-button-group__item-icon {
+  display: block;
+  height: calc(3 * var(--base-unit, 8px));
+}
+.sv-button-group__item-icon use {
+  fill: var(--foreground-light, #909090);
+}
+.sv-button-group__item--selected {
+  font-weight: 600;
+  color: var(--primary, #19b394);
+}
+.sv-button-group__item--selected .sv-button-group__item-icon use {
+  fill: var(--primary, #19b394);
+}
+.sv-button-group__item--selected:hover {
+  background-color: var(--background, #fff);
+}
+.sv-button-group__item-decorator {
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+}
+.sv-button-group__item-caption {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sv-button-group__item-icon + .sv-button-group__item-caption {
+  margin-left: calc(1 * var(--base-unit, 8px));
+}
+.sv-button-group__item--disabled {
+  color: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+  cursor: default;
+}
+.sv-button-group__item--disabled .sv-button-group__item-icon use {
+  fill: var(--foreground-disabled, rgba(22, 22, 22, 0.16));
+}
+.sv-button-group__item--disabled:hover {
+  background-color: var(--background, #fff);
+}
+.sv-button-group:focus-within {
+  box-shadow: 0 0 0 1px var(--primary, #19b394);
+  border-color: var(--primary, #19b394);
+}
+.sv-visuallyhidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+}
+.sv-hidden {
+  display: none !important;
+}
+.sv-title-actions {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.sv-title-actions__title {
+  flex-wrap: wrap;
+  max-width: 90%;
+  min-width: 50%;
+  white-space: initial;
+}
+.sv-action-title-bar {
+  min-width: 56px;
+}
+.sv-title-actions .sv-title-actions__title {
+  flex-wrap: wrap;
+  flex: 0 0 auto;
+  max-width: unset;
+  min-width: unset;
+}
+.sv-title-actions .sv-action-title-bar {
+  flex: 1 1 auto;
+  justify-content: flex-end;
+  min-width: unset;
+}
+.sv_window {
+  position: fixed;
+  bottom: 3px;
+  right: 10px;
+  background-color: #5f9ea0;
+  padding: 1px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1.42857143;
+  text-align: left;
+  text-align: start;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+  letter-spacing: normal;
+  word-break: normal;
+  word-spacing: normal;
+  word-wrap: normal;
+  white-space: normal;
+  background-color: #fff;
+  -webkit-background-clip: padding-box;
+  background-clip: padding-box;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  line-break: auto;
+  z-index: 100;
+}
+.sv_window_title {
+  padding: 8px 14px;
+  margin: 0;
+  font-size: 14px;
+  background-color: #f7f7f7;
+  border-bottom: 1px solid #ebebeb;
+  border-radius: 5px 5px 0 0;
+}
+.sv_window_content {
+  padding: 8px;
+  margin: 0;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+.sv_window_title a,
+.sv_window_title a:link,
+.sv_window_title a:visited {
+  text-decoration: none;
+  font-size: 14px;
+  font-style: normal;
+  color: #000;
+}
+.sjs_sp_container {
+  position: relative;
+}
+.sjs_sp_controls {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+.sjs_sp_controls > button {
+  user-select: none;
+}
+.sjs_sp_container > div > canvas:focus {
+  outline: none;
+}
+.sjs_sp_placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 0;
+  user-select: none;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+}
+.sd-root-modern,
+.svc-logic-question-value {
+  --sd-base-padding: calc(5 * var(--base-unit, 8px));
+  --sd-base-vertical-padding: calc(4 * var(--base-unit, 8px));
+  --sd-page-vertical-padding: calc(3 * var(--base-unit, 8px));
+}
+.svc-creator--mobile .sd-root-modern,
+.sd-root-modern.sd-root-modern--mobile {
+  --sd-base-padding: calc(3 * var(--base-unit, 8px));
+  --sd-base-vertical-padding: calc(2 * var(--base-unit, 8px));
+  --sd-page-vertical-padding: calc(2 * var(--base-unit, 8px));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-element__num {
+  float: none;
+  margin-left: 0;
+  width: auto;
+  padding-left: 0;
+  padding-right: 0;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-element__num + span {
+  float: none;
+  width: auto;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-element__title--expandable:before {
+  left: calc(-2.5 * var(--base-unit, 8px));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-title.sd-container-modern__title {
+  flex-direction: column;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-header__text {
+  min-width: 100%;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-multipletext__cell {
+  display: block;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-multipletext__cell:not(:last-child) {
+  padding-right: 0;
+  padding-bottom: calc(2 * var(--base-unit, 8px));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-multipletext__item-container {
+  flex-direction: column;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-multipletext__item-title {
+  font-size: 12px;
+  line-height: 16px;
+  height: 16px;
+  padding-right: 0;
+  border-right: none;
+  margin-bottom: 0;
+  margin-top: calc(1 * var(--base-unit, 8px));
+  width: 100%;
+  max-width: none;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-multipletext__item {
+  width: 100%;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-multipletext__item .sd-input {
+  padding-right: 0;
+  padding-left: 0;
+  margin-top: 0;
+  margin-bottom: calc(1 * var(--base-unit, 8px));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-selectbase--multi-column {
+  flex-direction: column;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-selectbase--multi-column .sd-selectbase__column:not(:last-child) {
+  padding-right: 0;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-question.sd-question--table > .sd-question__content {
+  padding-top: 0;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-question--table,
+.sd-root-modern.sd-root-modern--mobile .sd-question--scroll {
+  overflow-x: visible;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-matrix__cell {
+  display: flex;
+  align-items: flex-start;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-matrix__cell .sd-matrix__responsive-title {
+  margin-left: calc(1 * var(--base-unit, 8px));
+  text-align: left;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-matrix__cell:first-of-type {
+  padding-top: calc(2 * var(--base-unit, 8px));
+  padding-bottom: calc(1 * var(--base-unit, 8px));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table thead {
+  display: none;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table tr {
+  display: block;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-matrix__table tr + tr {
+  margin-top: calc(1 * var(--base-unit, 8px));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr {
+  padding-bottom: calc(1 * var(--base-unit, 8px));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table:not(.sd-matrix__table) tr::after {
+  z-index: 12;
+  content: ' ';
+  display: block;
+  position: relative;
+  height: 1px;
+  background-color: var(--border-light, #eaeaea);
+  left: calc(-2 * var(--base-unit, 8px));
+  bottom: calc(-1 * var(--base-unit, 8px));
+  width: calc(100% + 4 * var(--base-unit, 8px));
+  z-index: 12;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-matrix__label {
+  justify-content: start;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell {
+  display: block;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell:not(.sd-matrix__cell):not(:first-of-type) {
+  margin-top: calc(1 * var(--base-unit, 8px));
+}
+.sd-root-modern.sd-root-modern--mobile
+  .sd-table__cell:not(.sd-matrix__cell):not(.sd-table__cell--actions):not(.sd-table__cell--row-text)::before {
+  padding-top: calc(2 * var(--base-unit, 8px));
+  padding-bottom: calc(1 * var(--base-unit, 8px));
+  content: attr(data-responsive-title);
+  font-weight: 600;
+  display: block;
+  text-align: left;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-table__cell--actions {
+  width: auto;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell.sd-table__cell--actions .sd-action-bar {
+  margin-right: calc(-3 * var(--base-unit, 8px));
+  justify-content: flex-end;
+  background: var(--background, #fff);
+}
+.sd-root-modern.sd-root-modern--mobile .sd-action.sd-action.sd-matrixdynamic__remove-btn {
+  opacity: 1;
+  padding: calc(1 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-action.sd-action.sd-matrixdynamic__remove-btn .sd-action__icon {
+  display: none;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-action.sd-action.sd-matrixdynamic__remove-btn:after {
+  content: attr(title);
+}
+.sd-root-modern.sd-root-modern--mobile .sd-matrixdynamic__footer {
+  padding-top: calc(1 * var(--base-unit, 8px));
+  margin-bottom: calc(-2 * var(--base-unit, 8px));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-table__cell--row-text:not(.sd-matrix__cell) {
+  color: var(--foreground-light, #909090);
+  padding-top: calc(2 * var(--base-unit, 8px));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-matrixdropdown.sd-table tr:not(:last-child) {
+  padding-bottom: calc(2 * var(--base-unit, 8px));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-matrixdropdown.sd-table tr::after {
+  bottom: calc(-2 * var(--base-unit, 8px));
+}
+.sd-root-modern.sd-root-modern--mobile .sd-matrixdropdown.sd-table tr:last-child:after {
+  content: none;
+}
+.sd-root-modern.sd-root-modern--mobile .sd-matrixdynamic__btn.sd-matrixdynamic__add-btn {
+  margin-left: calc(-2 * var(--base-unit, 8px));
+}
+.sd-root-modern.sd-root-modern--mobile .sv-ranking-item {
+  left: calc(-3 * var(--base-unit, 8px));
+}
+.sd-root-modern.sd-root-modern--mobile .sv-ranking-item__icon-container {
+  margin-left: 0;
+  margin-right: 0;
+}
+.sv-brand-info {
+  width: 100%;
+  font-family: 'Open Sans', sans-serif;
+  text-align: center;
+  color: #161616;
+  padding: 150px 32px 150px 32px;
+  background: #fff;
+}
+.sv-brand-info a {
+  color: #161616;
+}
+.sv-brand-info__text {
+  line-height: 24px;
+  font-size: 16px;
+}
+.sv-brand-info__logo {
+  display: inline-block;
+}
+.sv-brand-info__logo img {
+  width: 200px;
+}
+.sv-brand-info__terms {
+  line-height: 16px;
+  font-size: 12px;
+}
+body {
+  --sv-defaultV2-mark: true;
+}
+.sd-root-modern {
+  --sd-mobile-width: 600px;
+  --sd-imagepicker-gap: 16px;
+  width: 100%;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  background-color: var(--background-dim, #f3f3f3);
+}
+.sd-root-modern * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border, #d6d6d6) rgba(0, 0, 0, 0);
+}
+.sd-root-modern ::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+  background-color: rgba(0, 0, 0, 0);
+}
+.sd-root-modern ::-webkit-scrollbar-thumb {
+  border: 4px solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+  border-radius: 32px;
+  background-color: var(--border, #d6d6d6);
+}
+.sd-root-modern ::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0);
+}
+.sd-root-modern ::-webkit-scrollbar-thumb:hover {
+  border: 2px solid rgba(0, 0, 0, 0);
+  background-color: var(--foreground-light, #909090);
+}
+.sv-popup .sv-popup__scrolling-content {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border, #d6d6d6) rgba(0, 0, 0, 0);
+}
+.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar,
+.sv-popup .sv-popup__scrolling-content::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+  background-color: var(--background, #fff);
+}
+.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-thumb,
+.sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-thumb {
+  border: 4px solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+  border-radius: 32px;
+  background-color: var(--border, #d6d6d6);
+}
+.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-track,
+.sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0);
+}
+.sv-popup .sv-popup__scrolling-content *::-webkit-scrollbar-thumb:hover,
+.sv-popup .sv-popup__scrolling-content::-webkit-scrollbar-thumb:hover {
+  border: 2px solid rgba(0, 0, 0, 0);
+  background-color: var(--foreground-light, #909090);
+}
+.sv-popup.sv-popup--dropdown .sv-popup__shadow {
+  box-shadow: 0px calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) rgba(0, 0, 0, 0.1);
+}
+.sv-popup.sv-popup--dropdown .sv-popup__body-content {
+  background-color: var(--background, #fff);
+  padding: calc(1 * var(--base-unit, 8px)) 0;
+}
+.sv-popup.sv-popup--modal .sv-popup__body-content {
+  box-shadow: 0px calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px)) rgba(0, 0, 0, 0.1);
+  background-color: var(--background-dim-light, #f9f9f9);
+}
+.sv-popup.sv-popup--modal .sv-popup__body-footer {
+  padding-bottom: 2px;
+}
+.sv-popup.sv-popup--overlay .sv-popup__body-content {
+  background-color: var(--background-dim, #f3f3f3);
+}
diff --git a/client/src/styles/survey.modern.css b/client/src/styles/survey.modern.css
index e09df6b6..e1c98e01 100644
--- a/client/src/styles/survey.modern.css
+++ b/client/src/styles/survey.modern.css
@@ -5,47 +5,55 @@
  */
 /* latin-ext */
 @font-face {
-  font-family: "Raleway";
+  font-family: 'Raleway';
   font-style: normal;
   font-weight: 400;
-  src: local("Raleway"), local("Raleway-Regular"), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format("woff2");
+  src: local('Raleway'), local('Raleway-Regular'),
+    url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyCMIT5lu.woff2) format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-  font-family: "Raleway";
+  font-family: 'Raleway';
   font-style: normal;
   font-weight: 400;
-  src: local("Raleway"), local("Raleway-Regular"), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ITw.woff2) format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  src: local('Raleway'), local('Raleway-Regular'),
+    url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ITw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* latin-ext */
 @font-face {
-  font-family: "Raleway";
+  font-family: 'Raleway';
   font-style: normal;
   font-weight: 700;
-  src: local("Raleway Bold"), local("Raleway-Bold"), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqhPAMif.woff2) format("woff2");
+  src: local('Raleway Bold'), local('Raleway-Bold'),
+    url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqhPAMif.woff2) format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-  font-family: "Raleway";
+  font-family: 'Raleway';
   font-style: normal;
   font-weight: 700;
-  src: local("Raleway Bold"), local("Raleway-Bold"), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqZPAA.woff2) format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  src: local('Raleway Bold'), local('Raleway-Bold'),
+    url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqZPAA.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
+    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
-  font-family: "Raleway";
+  font-family: 'Raleway';
   font-style: normal;
   font-weight: 400;
-  src: local("Raleway"), local("Raleway-Regular"), url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ISQ.woff) format("woff");
+  src: local('Raleway'), local('Raleway-Regular'),
+    url(https://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0ISQ.woff) format('woff');
 }
 @font-face {
-  font-family: "Raleway";
+  font-family: 'Raleway';
   font-style: normal;
   font-weight: 700;
-  src: local("Raleway Bold"), local("Raleway-Bold"), url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqZPBg.woff) format("woff");
+  src: local('Raleway Bold'), local('Raleway-Bold'),
+    url(https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqZPBg.woff) format('woff');
 }
 .sv-dragdrop-movedown {
   transform: translate(0, 0);
@@ -183,12 +191,14 @@ sv-popup {
   display: flex;
   flex-direction: column;
 }
-.sv-popup__scrolling-content::-webkit-scrollbar, .sv-popup__scrolling-content *::-webkit-scrollbar {
+.sv-popup__scrolling-content::-webkit-scrollbar,
+.sv-popup__scrolling-content *::-webkit-scrollbar {
   height: 6px;
   width: 6px;
   background-color: var(--background-dim, #f3f3f3);
 }
-.sv-popup__scrolling-content::-webkit-scrollbar-thumb, .sv-popup__scrolling-content *::-webkit-scrollbar-thumb {
+.sv-popup__scrolling-content::-webkit-scrollbar-thumb,
+.sv-popup__scrolling-content *::-webkit-scrollbar-thumb {
   background: var(--primary-light, rgba(25, 179, 148, 0.1));
 }
 
@@ -227,7 +237,7 @@ sv-popup {
   position: absolute;
 }
 .sv-popup__pointer:after {
-  content: " ";
+  content: ' ';
   display: block;
   width: 0;
   height: 0;
@@ -263,7 +273,7 @@ sv-popup {
   border-radius: 4px;
   margin: 2px;
   cursor: pointer;
-  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-style: normal;
   font-weight: 600;
   font-size: calc(2 * var(--base-unit, 8px));
@@ -294,17 +304,19 @@ sv-popup {
   background-color: var(--background-dim, #f3f3f3);
 }
 
-.sv-popup--modal .sv-list__filter, .sv-popup--overlay .sv-list__filter {
+.sv-popup--modal .sv-list__filter,
+.sv-popup--overlay .sv-list__filter {
   padding-top: calc(1 * var(--base-unit, 8px));
 }
-.sv-popup--modal .sv-list__filter-icon, .sv-popup--overlay .sv-list__filter-icon {
+.sv-popup--modal .sv-list__filter-icon,
+.sv-popup--overlay .sv-list__filter-icon {
   top: calc(2.5 * var(--base-unit, 8px));
 }
 
 .sv-container-modern {
   color: #404040;
   font-size: 16px;
-  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 .sv-container-modern__title {
@@ -358,16 +370,16 @@ sv-popup {
 }
 @media only screen and (min-width: 1000px) {
   .sv-body__timer,
-.sv-body__page,
-.sv-body__footer.sv-footer.sv-action-bar {
+  .sv-body__page,
+  .sv-body__footer.sv-footer.sv-action-bar {
     margin-right: 5%;
     margin-left: 5%;
   }
 }
 @media only screen and (max-width: 1000px) {
   .sv-body__timer,
-.sv-body__page,
-.sv-body__footer.sv-footer.sv-action-bar {
+  .sv-body__page,
+  .sv-body__footer.sv-footer.sv-action-bar {
     margin-right: 10px;
     margin-left: 10px;
   }
@@ -435,7 +447,7 @@ sv-popup {
 }
 
 .sv-panel__title--expandable:after {
-  content: "";
+  content: '';
   display: block;
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23404040;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='2,2 0,4 5,9 10,4 8,2 5,5 '/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
@@ -456,7 +468,7 @@ sv-popup {
 }
 
 .sv-panel__icon:before {
-  content: "";
+  content: '';
   display: inline-block;
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23404040;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='2,2 0,4 5,9 10,4 8,2 5,5 '/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
@@ -501,8 +513,8 @@ sv-popup {
   margin-top: -18px;
 }
 
-[dir=rtl] .sv-paneldynamic__add-btn,
-[style*="direction:rtl"] .sv-paneldynamic__add-btn {
+[dir='rtl'] .sv-paneldynamic__add-btn,
+[style*='direction:rtl'] .sv-paneldynamic__add-btn {
   float: left;
 }
 
@@ -594,51 +606,58 @@ sv-popup {
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   .sv-row > .sv-row__panel,
-.sv-row__question:not(:last-child) {
+  .sv-row__question:not(:last-child) {
     float: left;
   }
 }
-@media only screen and (-ms-high-contrast: active) and (max-width: 600px), only screen and (-ms-high-contrast: none) and (max-width: 600px) {
+@media only screen and (-ms-high-contrast: active) and (max-width: 600px),
+  only screen and (-ms-high-contrast: none) and (max-width: 600px) {
   .sv-row > .sv-row__panel,
-.sv-row__question:not(:last-child) {
+  .sv-row__question:not(:last-child) {
     padding-bottom: 2.5em;
     float: none;
   }
 }
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  [dir=rtl] .sv-row__question:not(:last-child),
-[style*="direction:rtl"] .sv-row__question:not(:last-child) {
+  [dir='rtl'] .sv-row__question:not(:last-child),
+  [style*='direction:rtl'] .sv-row__question:not(:last-child) {
     float: right;
   }
 }
-@media only screen and (-ms-high-contrast: active) and (max-width: 6000px), only screen and (-ms-high-contrast: none) and (max-width: 6000px) {
+@media only screen and (-ms-high-contrast: active) and (max-width: 6000px),
+  only screen and (-ms-high-contrast: none) and (max-width: 6000px) {
   .sv-row__question--small:only-child {
     max-width: 3000px;
   }
 }
-@media only screen and (-ms-high-contrast: active) and (max-width: 3000px), only screen and (-ms-high-contrast: none) and (max-width: 3000px) {
+@media only screen and (-ms-high-contrast: active) and (max-width: 3000px),
+  only screen and (-ms-high-contrast: none) and (max-width: 3000px) {
   .sv-row__question--small:only-child {
     max-width: 1200px;
   }
 }
-@media only screen and (-ms-high-contrast: active) and (max-width: 2000px), only screen and (-ms-high-contrast: none) and (max-width: 2000px) {
+@media only screen and (-ms-high-contrast: active) and (max-width: 2000px),
+  only screen and (-ms-high-contrast: none) and (max-width: 2000px) {
   .sv-row__question--small:only-child {
     max-width: 700px;
   }
 }
-@media only screen and (-ms-high-contrast: active) and (max-width: 1000px), only screen and (-ms-high-contrast: none) and (max-width: 1000px) {
+@media only screen and (-ms-high-contrast: active) and (max-width: 1000px),
+  only screen and (-ms-high-contrast: none) and (max-width: 1000px) {
   .sv-row__question--small:only-child {
     max-width: 500px;
   }
 }
-@media only screen and (-ms-high-contrast: active) and (max-width: 500px), only screen and (-ms-high-contrast: none) and (max-width: 500px) {
+@media only screen and (-ms-high-contrast: active) and (max-width: 500px),
+  only screen and (-ms-high-contrast: none) and (max-width: 500px) {
   .sv-row__question--small:only-child {
     max-width: 300px;
   }
 }
-@media only screen and (-ms-high-contrast: active) and (max-width: 600px), only screen and (-ms-high-contrast: none) and (max-width: 600px) {
+@media only screen and (-ms-high-contrast: active) and (max-width: 600px),
+  only screen and (-ms-high-contrast: none) and (max-width: 600px) {
   .sv-row > .sv-row__panel,
-.sv-row__question {
+  .sv-row__question {
     width: 100% !important;
     padding-right: 0 !important;
   }
@@ -730,8 +749,8 @@ sv-popup {
   margin-right: 0.875em;
 }
 
-[dir=rtl] .sv-question__header--location--left,
-[style*="direction:rtl"] .sv-question__header--location--left {
+[dir='rtl'] .sv-question__header--location--left,
+[style*='direction:rtl'] .sv-question__header--location--left {
   float: right;
 }
 
@@ -767,7 +786,7 @@ sv-popup {
 }
 
 .sv-question__title--expandable:after {
-  content: "";
+  content: '';
   display: block;
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23404040;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='2,2 0,4 5,9 10,4 8,2 5,5 '/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
@@ -788,7 +807,7 @@ sv-popup {
 }
 
 .sv-question__icon:before {
-  content: "";
+  content: '';
   display: inline-block;
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23404040;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='2,2 0,4 5,9 10,4 8,2 5,5 '/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
@@ -835,7 +854,7 @@ sv-popup {
 }
 
 .sv-title {
-  font-family: "Raleway";
+  font-family: 'Raleway';
   font-weight: 700;
   font-style: normal;
   font-stretch: normal;
@@ -875,8 +894,8 @@ sv-popup {
   min-height: 30px;
 }
 
-[dir=rtl] .sv-selectbase__label,
-[style*="direction:rtl"] .sv-selectbase__label {
+[dir='rtl'] .sv-selectbase__label,
+[style*='direction:rtl'] .sv-selectbase__label {
   margin-right: 41px;
   margin-left: 0;
 }
@@ -886,8 +905,8 @@ sv-popup {
   left: -41px;
 }
 
-[dir=rtl] .sv-selectbase__decorator.sv-item__decorator,
-[style*="direction:rtl"] .sv-selectbase__decorator.sv-item__decorator {
+[dir='rtl'] .sv-selectbase__decorator.sv-item__decorator,
+[style*='direction:rtl'] .sv-selectbase__decorator.sv-item__decorator {
   left: initial;
   right: -41px;
 }
@@ -991,7 +1010,7 @@ sv-popup {
 }
 
 .sv-detail-panel__icon:before {
-  content: "";
+  content: '';
   display: block;
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 20' style='enable-background:new 0 0 20 20;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%239A9A9A;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='19,6 17,4 10,11 3,4 1,6 10,15 '/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
@@ -1139,24 +1158,24 @@ sv-popup {
   float: left;
 }
 
-[dir=rtl] .sv-footer__complete-btn,
-[style*="direction:rtl"] .sv-footer__complete-btn {
+[dir='rtl'] .sv-footer__complete-btn,
+[style*='direction:rtl'] .sv-footer__complete-btn {
   float: left;
 }
-[dir=rtl] .sv-footer__preview-btn,
-[style*="direction:rtl"] .sv-footer__preview-btn {
+[dir='rtl'] .sv-footer__preview-btn,
+[style*='direction:rtl'] .sv-footer__preview-btn {
   float: left;
 }
-[dir=rtl] .sv-footer__next-btn,
-[style*="direction:rtl"] .sv-footer__next-btn {
+[dir='rtl'] .sv-footer__next-btn,
+[style*='direction:rtl'] .sv-footer__next-btn {
   float: left;
 }
-[dir=rtl] .sv-footer__prev-btn,
-[style*="direction:rtl"] .sv-footer__prev-btn {
+[dir='rtl'] .sv-footer__prev-btn,
+[style*='direction:rtl'] .sv-footer__prev-btn {
   float: right;
 }
-[dir=rtl] .sv-footer__edit-btn,
-[style*="direction:rtl"] .sv-footer__edit-btn {
+[dir='rtl'] .sv-footer__edit-btn,
+[style*='direction:rtl'] .sv-footer__edit-btn {
   float: right;
 }
 
@@ -1300,8 +1319,8 @@ sv-popup {
   outline-offset: 1px;
 }
 
-[dir=rtl] .sv-boolean__switch,
-[style*="direction:rtl"] .sv-boolean__switch {
+[dir='rtl'] .sv-boolean__switch,
+[style*='direction:rtl'] .sv-boolean__switch {
   float: right;
 }
 
@@ -1329,17 +1348,17 @@ sv-popup {
   float: left;
 }
 
-[dir=rtl] .sv-boolean__label,
-[style*="direction:rtl"] .sv-boolean__label {
+[dir='rtl'] .sv-boolean__label,
+[style*='direction:rtl'] .sv-boolean__label {
   float: right;
 }
 
-[dir=rtl] .sv-boolean--indeterminate .sv-boolean__slider,
-[style*="direction:rtl"] .sv-boolean--indeterminate .sv-boolean__slider {
+[dir='rtl'] .sv-boolean--indeterminate .sv-boolean__slider,
+[style*='direction:rtl'] .sv-boolean--indeterminate .sv-boolean__slider {
   margin-right: calc(50% - 0.625em);
 }
-[dir=rtl] .sv-boolean--checked .sv-boolean__slider,
-[style*="direction:rtl"] .sv-boolean--checked .sv-boolean__slider {
+[dir='rtl'] .sv-boolean--checked .sv-boolean__slider,
+[style*='direction:rtl'] .sv-boolean--checked .sv-boolean__slider {
   margin-right: calc(100% - 1.25em);
 }
 
@@ -1470,7 +1489,7 @@ sv-popup {
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 100%;
-  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: inherit;
   color: #404040;
   position: relative;
@@ -1498,7 +1517,7 @@ sv-popup {
   border: none;
   outline: none;
   padding: 0;
-  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: inherit;
   background-color: transparent;
   width: 100%;
@@ -1515,7 +1534,7 @@ sv-popup {
 }
 
 .sv-dropdown--empty:not(.sv-input--disabled) .sv-dropdown__filter-string-input::placeholder {
-  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   color: #404040;
 }
 
@@ -1649,7 +1668,7 @@ sv-popup {
   color: #404040;
 }
 
-.sv-text[type=date] {
+.sv-text[type='date'] {
   padding-right: 2px;
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23404040;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='2,2 0,4 5,9 10,4 8,2 5,5 '/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat, repeat;
@@ -1657,20 +1676,20 @@ sv-popup {
   background-size: 0.57em auto, 100%;
 }
 
-.sv-text[type=date]:focus {
+.sv-text[type='date']:focus {
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%231AB394;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='2,2 0,4 5,9 10,4 8,2 5,5 '/%3E%3C/svg%3E ");
 }
 
-.sv-text[type=date]::-webkit-calendar-picker-indicator {
+.sv-text[type='date']::-webkit-calendar-picker-indicator {
   color: transparent;
   background: transparent;
 }
 
-.sv-text[type=date]::-webkit-clear-button {
+.sv-text[type='date']::-webkit-clear-button {
   display: none;
 }
 
-.sv-text[type=date]::-webkit-inner-spin-button {
+.sv-text[type='date']::-webkit-inner-spin-button {
   display: none;
 }
 
@@ -1862,7 +1881,7 @@ sv-popup {
 }
 
 .sv-clearfix:after {
-  content: "";
+  content: '';
   display: table;
   clear: both;
 }
@@ -1885,7 +1904,7 @@ sv-popup {
   width: 72px;
   height: 72px;
   margin-left: calc(50% - 36px);
-  content: "";
+  content: '';
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.6, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 72 72' style='enable-background:new 0 0 72 72;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%239A9A9A;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M11.9,72c-0.6-0.1-1.2-0.3-1.8-0.4C4.2,70.1,0,64.7,0,58.6c0-15.1,0-30.1,0-45.2C0,6,6,0,13.4,0 c12,0,24,0,36,0c2.4,0,4.4,1.7,4.6,4c0.2,2.4-1.3,4.4-3.6,4.9C50,9,49.7,9,49.4,9C37.6,9,25.8,9,14,9c-1.5,0-2.8,0.4-3.9,1.5 c-0.8,0.9-1.2,2-1.2,3.2c0,8.2,0,16.4,0,24.6C9,45,9,51.6,9,58.2c0,2.9,1.9,4.8,4.8,4.8c14.9,0,29.7,0,44.6,0c2.6,0,4.6-2,4.6-4.6 c0-5.9,0-11.8,0-17.7c0-2.4,1.6-4.3,3.9-4.6c2.3-0.3,4.3,1,5,3.4c0,0.1,0.1,0.2,0.1,0.2c0,6.8,0,13.6,0,20.4c0,0.1-0.1,0.3-0.1,0.4 c-0.8,5.4-4.7,9.8-10.1,11.2c-0.6,0.1-1.2,0.3-1.8,0.4C44,72,28,72,11.9,72z'/%3E%3Cpath class='st0' d='M35.9,38.8c0.4-0.4,0.5-0.7,0.7-0.9c8.4-8.4,16.8-16.8,25.2-25.2c1.9-1.9,4.5-2,6.3-0.4 c1.9,1.6,2.1,4.6,0.4,6.4c-0.2,0.2-0.3,0.3-0.5,0.5c-9.5,9.5-19.1,19.1-28.6,28.6c-2.2,2.2-4.8,2.2-7,0 c-5.1-5.1-10.2-10.2-15.4-15.4c-1.3-1.3-1.7-2.8-1.2-4.5c0.5-1.7,1.6-2.8,3.4-3.1c1.6-0.4,3.1,0.1,4.2,1.3c4,4,7.9,7.9,11.9,11.9 C35.6,38.2,35.7,38.5,35.9,38.8z'/%3E%3C/g%3E%3C/svg%3E%0A");
 }
 
@@ -1940,13 +1959,13 @@ sv-popup {
   margin: 0;
   overflow-y: auto;
   background: var(--background, #fff);
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   list-style-type: none;
 }
 
 .sv-list__empty-container {
   width: 100%;
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   box-sizing: border-box;
   padding: calc(1.5 * var(--base-unit, 8px)) calc(8 * var(--base-unit, 8px));
   overflow: hidden;
@@ -1977,7 +1996,8 @@ sv-popup {
   width: 100%;
   align-items: center;
   box-sizing: border-box;
-  padding: calc(1 * var(--base-unit, 8px)) calc(8 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px)) calc(2 * var(--base-unit, 8px));
+  padding: calc(1 * var(--base-unit, 8px)) calc(8 * var(--base-unit, 8px)) calc(1 * var(--base-unit, 8px))
+    calc(2 * var(--base-unit, 8px));
   color: var(--foreground, #161616);
   cursor: pointer;
   overflow: hidden;
@@ -2088,7 +2108,8 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-body {
   outline: none;
   font-size: 1em;
   color: var(--foreground, #161616);
-  padding: calc(1.5 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px)) calc(7 * var(--base-unit, 8px));
+  padding: calc(1.5 * var(--base-unit, 8px)) calc(3 * var(--base-unit, 8px)) calc(1.5 * var(--base-unit, 8px))
+    calc(7 * var(--base-unit, 8px));
   line-height: calc(3 * var(--base-unit, 8px));
 }
 
@@ -2242,7 +2263,7 @@ li:focus .sv-list__item.sv-list__item--selected .sv-list__item-body {
   right: 10px;
   background-color: cadetblue;
   padding: 1px;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -2404,7 +2425,7 @@ td.td.sv_matrix_cell .sv_qbln .sv-boolean {
   background-color: transparent;
   color: var(--foreground, #161616);
   cursor: pointer;
-  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   overflow-x: hidden;
   white-space: nowrap;
 }
@@ -2496,11 +2517,11 @@ button.sv-action-bar-item {
   cursor: pointer;
   line-height: calc(3 * var(--base-unit, 8px));
   font-size: calc(2 * var(--base-unit, 8px));
-  font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 .sv-expand-action:before {
-  content: "";
+  content: '';
   display: inline-block;
   background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 10 10' style='enable-background:new 0 0 10 10;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23404040;%7D%0A%3C/style%3E%3Cpolygon class='st0' points='2,2 0,4 5,9 10,4 8,2 5,5 '/%3E%3C/svg%3E%0A");
   background-repeat: no-repeat;
@@ -2581,7 +2602,7 @@ button.sv-action-bar-item {
 
 .sv-brand-info {
   width: 100%;
-  font-family: "Open Sans", sans-serif;
+  font-family: 'Open Sans', sans-serif;
   text-align: center;
   color: #161616;
   padding: 150px 32px 150px 32px;
@@ -2613,14 +2634,35 @@ button.sv-action-bar-item {
   display: block;
   width: 100% !important;
 }
-.sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question .sv-question__header--location--left,
-.sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question .sv-question__header--location--left {
+.sv_m600
+  .sv-root-modern
+  .sv-container-modern
+  .sv-body
+  .sv-page
+  .sv-row
+  .sv-question
+  .sv-question__header--location--left,
+.sv_m600
+  .sv-root-modern
+  .sv-container-modern
+  .sv-body
+  .sv-page
+  .sv-row
+  .sv-row__question
+  .sv-question__header--location--left {
   float: none;
 }
 .sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question .sv-selectbase__item--inline,
 .sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question .sv-imagepicker__item--inline,
 .sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question .sv-selectbase__item--inline,
-.sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question .sv-imagepicker__item--inline {
+.sv_m600
+  .sv-root-modern
+  .sv-container-modern
+  .sv-body
+  .sv-page
+  .sv-row
+  .sv-row__question
+  .sv-imagepicker__item--inline {
   display: block;
 }
 .sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-table,
@@ -2631,8 +2673,24 @@ button.sv-action-bar-item {
 .sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-table thead {
   display: none;
 }
-.sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-table td.sv-table__cell--choice,
-.sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-table td.sv-table__cell--choice {
+.sv_m600
+  .sv-root-modern
+  .sv-container-modern
+  .sv-body
+  .sv-page
+  .sv-row
+  .sv-question
+  table.sv-table
+  td.sv-table__cell--choice,
+.sv_m600
+  .sv-root-modern
+  .sv-container-modern
+  .sv-body
+  .sv-page
+  .sv-row
+  .sv-row__question
+  table.sv-table
+  td.sv-table__cell--choice {
   text-align: initial;
 }
 .sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-table tbody,
@@ -2645,75 +2703,169 @@ button.sv-action-bar-item {
 }
 .sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-matrixdropdown td:before,
 .sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-matrixdynamic td:before,
-.sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-matrixdropdown td:before,
-.sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-matrixdynamic td:before {
+.sv_m600
+  .sv-root-modern
+  .sv-container-modern
+  .sv-body
+  .sv-page
+  .sv-row
+  .sv-row__question
+  table.sv-matrixdropdown
+  td:before,
+.sv_m600
+  .sv-root-modern
+  .sv-container-modern
+  .sv-body
+  .sv-page
+  .sv-row
+  .sv-row__question
+  table.sv-matrixdynamic
+  td:before {
   content: attr(data-responsive-title);
 }
-.sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-matrix-root td label.sv-matrix__label,
-.sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-matrix-root td label.sv-matrix__label {
+.sv_m600
+  .sv-root-modern
+  .sv-container-modern
+  .sv-body
+  .sv-page
+  .sv-row
+  .sv-question
+  table.sv-matrix-root
+  td
+  label.sv-matrix__label,
+.sv_m600
+  .sv-root-modern
+  .sv-container-modern
+  .sv-body
+  .sv-page
+  .sv-row
+  .sv-row__question
+  table.sv-matrix-root
+  td
+  label.sv-matrix__label {
   display: inline;
 }
 .sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-matrix-root td:after,
-.sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-matrix-root td:after {
+.sv_m600
+  .sv-root-modern
+  .sv-container-modern
+  .sv-body
+  .sv-page
+  .sv-row
+  .sv-row__question
+  table.sv-matrix-root
+  td:after {
   content: attr(data-responsive-title);
 }
-.sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-matrix-root .sv-matrix__cell,
-.sv_m600 .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-matrix-root .sv-matrix__cell {
+.sv_m600
+  .sv-root-modern
+  .sv-container-modern
+  .sv-body
+  .sv-page
+  .sv-row
+  .sv-question
+  table.sv-matrix-root
+  .sv-matrix__cell,
+.sv_m600
+  .sv-root-modern
+  .sv-container-modern
+  .sv-body
+  .sv-page
+  .sv-row
+  .sv-row__question
+  table.sv-matrix-root
+  .sv-matrix__cell {
   text-align: initial;
 }
 
 @media (max-width: 600px) {
   .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question {
+  .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question {
     display: block;
     width: 100% !important;
   }
   .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question .sv-question__header--location--left,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question .sv-question__header--location--left {
+  .sv-root-modern
+    .sv-container-modern
+    .sv-body
+    .sv-page
+    .sv-row
+    .sv-row__question
+    .sv-question__header--location--left {
     float: none;
   }
   .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question .sv-selectbase__item--inline,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question .sv-imagepicker__item--inline,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question .sv-selectbase__item--inline,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question .sv-imagepicker__item--inline {
+  .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question .sv-imagepicker__item--inline,
+  .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question .sv-selectbase__item--inline,
+  .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question .sv-imagepicker__item--inline {
     display: block;
   }
   .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-table,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-table {
+  .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-table {
     display: block;
   }
   .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-table thead,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-table thead {
+  .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-table thead {
     display: none;
   }
   .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-table td.sv-table__cell--choice,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-table td.sv-table__cell--choice {
+  .sv-root-modern
+    .sv-container-modern
+    .sv-body
+    .sv-page
+    .sv-row
+    .sv-row__question
+    table.sv-table
+    td.sv-table__cell--choice {
     text-align: initial;
   }
   .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-table tbody,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-table tr,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-table td,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-table tbody,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-table tr,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-table td {
+  .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-table tr,
+  .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-table td,
+  .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-table tbody,
+  .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-table tr,
+  .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-table td {
     display: block;
   }
   .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-matrixdropdown td:before,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-matrixdynamic td:before,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-matrixdropdown td:before,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-matrixdynamic td:before {
+  .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-matrixdynamic td:before,
+  .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-matrixdropdown td:before,
+  .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-matrixdynamic td:before {
     content: attr(data-responsive-title);
   }
-  .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-matrix-root td label.sv-matrix__label,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-matrix-root td label.sv-matrix__label {
+  .sv-root-modern
+    .sv-container-modern
+    .sv-body
+    .sv-page
+    .sv-row
+    .sv-question
+    table.sv-matrix-root
+    td
+    label.sv-matrix__label,
+  .sv-root-modern
+    .sv-container-modern
+    .sv-body
+    .sv-page
+    .sv-row
+    .sv-row__question
+    table.sv-matrix-root
+    td
+    label.sv-matrix__label {
     display: inline;
   }
   .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-matrix-root td:after,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-matrix-root td:after {
+  .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-matrix-root td:after {
     content: attr(data-responsive-title);
   }
   .sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-question table.sv-matrix-root .sv-matrix__cell,
-.sv-root-modern .sv-container-modern .sv-body .sv-page .sv-row .sv-row__question table.sv-matrix-root .sv-matrix__cell {
+  .sv-root-modern
+    .sv-container-modern
+    .sv-body
+    .sv-page
+    .sv-row
+    .sv-row__question
+    table.sv-matrix-root
+    .sv-matrix__cell {
     text-align: initial;
   }
 }
diff --git a/client/src/styles/survey.reset.css b/client/src/styles/survey.reset.css
index 1e9a8520..47fa2e1e 100644
--- a/client/src/styles/survey.reset.css
+++ b/client/src/styles/survey.reset.css
@@ -20,35 +20,35 @@
   color: inherit;
 }
 
-
 .sv-action-bar {
   display: block;
 }
 
-
 .sv-radio__svg {
   display: none !important;
 }
 
-table, tbody, thead, tr {
+table,
+tbody,
+thead,
+tr {
   box-sizing: border-box;
 }
 
-tbody, thead, tr {
+tbody,
+thead,
+tr {
   display: flex;
   flex-flow: row wrap;
 }
 
-td, th {
+td,
+th {
   flex: 1;
 }
 
-
-
 .sv-table__cell,
 .sv-table__cell:not(:first-child),
-.sv-table__cell:not(:last-child)
-{
+.sv-table__cell:not(:last-child) {
   padding: 0;
 }
-
diff --git a/client/src/styles/themes/_my-dha.scss b/client/src/styles/themes/_my-dha.scss
index 9b3af1f1..358adf6b 100644
--- a/client/src/styles/themes/_my-dha.scss
+++ b/client/src/styles/themes/_my-dha.scss
@@ -1,22 +1,22 @@
 /* --- myDHA --- */
 /* accent */
-$color-accent-1-dark: #CB2A79;
-$color-accent-1: #E54292;
-$color-accent-1-light: #FDEDF5;
-$color-accent-2-dark: #C8A804;
-$color-accent-2: #FEE531;
-$color-accent-2-light: #FFF9D1;
-$color-accent-3-dark: #29A386;
-$color-accent-3: #47D0AF;
-$color-accent-3-light: #DEF6F7;
-$color-accent-4-dark: #0F7EB3;
-$color-accent-4: #139EE0;
-$color-accent-4-light: #D0EDFB;
-$color-accent-5-dark: #0F2552;
-$color-accent-5: #17387D;
-$color-accent-5: #E2EEF8;
+$color-accent-1-dark: #cb2a79;
+$color-accent-1: #e54292;
+$color-accent-1-light: #fdedf5;
+$color-accent-2-dark: #c8a804;
+$color-accent-2: #fee531;
+$color-accent-2-light: #fff9d1;
+$color-accent-3-dark: #29a386;
+$color-accent-3: #47d0af;
+$color-accent-3-light: #def6f7;
+$color-accent-4-dark: #0f7eb3;
+$color-accent-4: #139ee0;
+$color-accent-4-light: #d0edfb;
+$color-accent-5-dark: #0f2552;
+$color-accent-5: #17387d;
+$color-accent-5: #e2eef8;
 
 /* brand */
-$color-brand-dark: #15893E;
-$color-brand: #1BAB4E;
-$color-brand-light: #D8F3E2;
+$color-brand-dark: #15893e;
+$color-brand: #1bab4e;
+$color-brand-light: #d8f3e2;
diff --git a/client/src/styles/themes/_my-dhf.scss b/client/src/styles/themes/_my-dhf.scss
index 8267ad4a..7c8f101b 100644
--- a/client/src/styles/themes/_my-dhf.scss
+++ b/client/src/styles/themes/_my-dhf.scss
@@ -1,22 +1,22 @@
 /* --- myDHF --- */
 /* accent */
-$color-accent-1-dark: #CB2A79;
-$color-accent-1: #E54292;
-$color-accent-1-light: #FDEDF5;
-$color-accent-2-dark: #C8A804;
-$color-accent-2: #FEE531;
-$color-accent-2-light: #FFF9D1;
-$color-accent-3-dark: #29A386;
-$color-accent-3: #47D0AF;
-$color-accent-3-light: #DEF6F7;
-$color-accent-4-dark: #15893E;
-$color-accent-4: #1BAB4E;
-$color-accent-4-light: #D8F3E2;
-$color-accent-5-dark: #0F2552;
-$color-accent-5: #17387D;
-$color-accent-5: #E2EEF8;
+$color-accent-1-dark: #cb2a79;
+$color-accent-1: #e54292;
+$color-accent-1-light: #fdedf5;
+$color-accent-2-dark: #c8a804;
+$color-accent-2: #fee531;
+$color-accent-2-light: #fff9d1;
+$color-accent-3-dark: #29a386;
+$color-accent-3: #47d0af;
+$color-accent-3-light: #def6f7;
+$color-accent-4-dark: #15893e;
+$color-accent-4: #1bab4e;
+$color-accent-4-light: #d8f3e2;
+$color-accent-5-dark: #0f2552;
+$color-accent-5: #17387d;
+$color-accent-5: #e2eef8;
 
 /* brand */
-$color-brand-dark: #0F7EB3;
-$color-brand: #139EE0;
-$color-brand-light: #D0EDFB;
+$color-brand-dark: #0f7eb3;
+$color-brand: #139ee0;
+$color-brand-light: #d0edfb;
diff --git a/client/src/styles/themes/_my-kv.scss b/client/src/styles/themes/_my-kv.scss
index 30901bb0..06a1e970 100644
--- a/client/src/styles/themes/_my-kv.scss
+++ b/client/src/styles/themes/_my-kv.scss
@@ -1,22 +1,22 @@
 /* --- myKV --- */
 /* accent */
-$color-accent-1-dark: #0CA87D;
-$color-accent-1: #0FD6A0;
-$color-accent-1-light: #CFF2E8;
-$color-accent-2-dark: #C3A509;
-$color-accent-2: #FBDF4D;
-$color-accent-2-light: #FDF7D8;
-$color-accent-3-dark: #D8742C;
-$color-accent-3: #F0924E;
-$color-accent-3-light: #FDEEE3;
-$color-accent-4-dark: #13A2B9;
-$color-accent-4: #6BE7FC;
-$color-accent-4-light: #D7F9FE;
-$color-accent-5-dark: #161E5A;
-$color-accent-5: #212D8C;
-$color-accent-5: #E2EEF8;
+$color-accent-1-dark: #0ca87d;
+$color-accent-1: #0fd6a0;
+$color-accent-1-light: #cff2e8;
+$color-accent-2-dark: #c3a509;
+$color-accent-2: #fbdf4d;
+$color-accent-2-light: #fdf7d8;
+$color-accent-3-dark: #d8742c;
+$color-accent-3: #f0924e;
+$color-accent-3-light: #fdeee3;
+$color-accent-4-dark: #13a2b9;
+$color-accent-4: #6be7fc;
+$color-accent-4-light: #d7f9fe;
+$color-accent-5-dark: #161e5a;
+$color-accent-5: #212d8c;
+$color-accent-5: #e2eef8;
 
 /* brand */
-$color-brand-dark: #1458C8;
-$color-brand: #2075FF;
-$color-brand-light: #CCDFFF;
+$color-brand-dark: #1458c8;
+$color-brand: #2075ff;
+$color-brand-light: #ccdfff;
diff --git a/client/src/styles/themes/_whitelabel.scss b/client/src/styles/themes/_whitelabel.scss
index 6b575cba..f25cff21 100644
--- a/client/src/styles/themes/_whitelabel.scss
+++ b/client/src/styles/themes/_whitelabel.scss
@@ -1,21 +1,21 @@
 /* accent */
-$color-accent-1-dark: #2B8C68;
-$color-accent-1: #37B284;
-$color-accent-1-light: #C1ECDC;
-$color-accent-2-dark: #C6551F;
-$color-accent-2: #F27F48;
-$color-accent-2-light: #FCE4D9;
-$color-accent-3-dark: #D66655;
-$color-accent-3: #35529E;
-$color-accent-3-light: #CCDAFD;
-$color-accent-4-dark: #C7A631;
-$color-accent-4: #F3D56C;
-$color-accent-4-light: #FBF2D2;
-$color-accent-5-dark: #55A7B2;
-$color-accent-5: #80D5E1;
-$color-accent-5: #D4F3F7;
+$color-accent-1-dark: #2b8c68;
+$color-accent-1: #37b284;
+$color-accent-1-light: #c1ecdc;
+$color-accent-2-dark: #c6551f;
+$color-accent-2: #f27f48;
+$color-accent-2-light: #fce4d9;
+$color-accent-3-dark: #d66655;
+$color-accent-3: #35529e;
+$color-accent-3-light: #ccdafd;
+$color-accent-4-dark: #c7a631;
+$color-accent-4: #f3d56c;
+$color-accent-4-light: #fbf2d2;
+$color-accent-5-dark: #55a7b2;
+$color-accent-5: #80d5e1;
+$color-accent-5: #d4f3f7;
 
 /* brand */
-$color-brand-dark: #8FA62B;
-$color-brand: #B0CB39;
-$color-brand-light: #E8F0C6;
+$color-brand-dark: #8fa62b;
+$color-brand: #b0cb39;
+$color-brand-light: #e8f0c6;
diff --git a/client/src/survey.config.js b/client/src/survey.config.js
index b2313962..6af610b6 100644
--- a/client/src/survey.config.js
+++ b/client/src/survey.config.js
@@ -575,175 +575,175 @@
  *
  */
 export const css = {
-  'root': 'survey',
-  'header': 'survey__header',
-  'body': 'survey__body',
-  'bodyEmpty': '',
-  'footer': 'survey__footer',
-  'navigationButton': 'button button--primary',
-  'completedPage': 'survey__body--completed',
-  'navigation': {
-    'complete': 'button button--primary',
-    'prev': 'button button--primary',
-    'next': 'button button--primary',
-    'start': 'button button--primary',
+  root: 'survey',
+  header: 'survey__header',
+  body: 'survey__body',
+  bodyEmpty: '',
+  footer: 'survey__footer',
+  navigationButton: 'button button--primary',
+  completedPage: 'survey__body--completed',
+  navigation: {
+    complete: 'button button--primary',
+    prev: 'button button--primary',
+    next: 'button button--primary',
+    start: 'button button--primary',
   },
-  'progress': 'survey__progress',
-  'progressBar': 'survey__progress-bar',
-  'page': {
-    'root': 'survey__page',
-    'title': 'survey__page-title',
-    'description': 'survey__page-description',
+  progress: 'survey__progress',
+  progressBar: 'survey__progress-bar',
+  page: {
+    root: 'survey__page',
+    title: 'survey__page-title',
+    description: 'survey__page-description',
   },
-  'pageTitle': 'survey__page-title',
-  'pageDescription': 'survey__page-description',
-  'row': 'sv_row',
-  'question': {
-    'mainRoot': 'survey__question question',
-    'flowRoot': 'sv_q_flow sv_qstn',
-    'titleLeftRoot': 'sv_qstn_left',
-    'title': 'survey__question-title',
-    'titleOnError': 'survey__question-title--error',
-    'content': 'survey__question-content',
-    'number': 'sv_q_num',
+  pageTitle: 'survey__page-title',
+  pageDescription: 'survey__page-description',
+  row: 'sv_row',
+  question: {
+    mainRoot: 'survey__question question',
+    flowRoot: 'sv_q_flow sv_qstn',
+    titleLeftRoot: 'sv_qstn_left',
+    title: 'survey__question-title',
+    titleOnError: 'survey__question-title--error',
+    content: 'survey__question-content',
+    number: 'sv_q_num',
     'survey__question-description': 'small',
-    'comment': 'survey__question-input skillbox-input question__input',
-    'required': '',
-    'titleRequired': '',
-    'hasError': 'survey__question--error question--error',
-    'indent': 20,
+    comment: 'survey__question-input skillbox-input question__input',
+    required: '',
+    titleRequired: '',
+    hasError: 'survey__question--error question--error',
+    indent: 20,
   },
-  'panel': {
-    'title': 'survey__panel-title',
-    'titleOnError': 'survey__panel-title--error',
-    'description': 'small survey__panel-description',
-    'container': 'sv_p_container',
+  panel: {
+    title: 'survey__panel-title',
+    titleOnError: 'survey__panel-title--error',
+    description: 'small survey__panel-description',
+    container: 'sv_p_container',
   },
-  'error': {
-    'root': 'alert alert-danger',
-    'icon': 'glyphicon glyphicon-exclamation-sign',
-    'item': 'survey__error-item',
-    'locationTop': 'survey__error survey__error--top',
-    'locationBottom': 'survey__error survey__error--bottom',
+  error: {
+    root: 'alert alert-danger',
+    icon: 'glyphicon glyphicon-exclamation-sign',
+    item: 'survey__error-item',
+    locationTop: 'survey__error survey__error--top',
+    locationBottom: 'survey__error survey__error--bottom',
   },
-  'boolean': {
-    'root': 'sv_qbln form-inline checkbox',
-    'item': '',
-    'label': '',
-    'materialDecorator': 'checkbox-material',
+  boolean: {
+    root: 'sv_qbln form-inline checkbox',
+    item: '',
+    label: '',
+    materialDecorator: 'checkbox-material',
   },
-  'checkbox': {
-    'root': 'survey__checkbox-group',
-    'item': 'base-input-container base-input-container--survey',
-    'itemControl': 'base-input-container__input',
-    "itemChecked": "base-input-container__input--checked",
-    "itemDecorator": "",
-    'label': 'base-input-container__label-container',
-    'controlLabel': 'base-input-container__label',
-    'materialDecorator': 'base-input-container__checkbox base-input-container__icon',
-    'other': 'sv_q_checkbox_other skillbox-input',
-    'column': 'sv_q_select_column',
+  checkbox: {
+    root: 'survey__checkbox-group',
+    item: 'base-input-container base-input-container--survey',
+    itemControl: 'base-input-container__input',
+    itemChecked: 'base-input-container__input--checked',
+    itemDecorator: '',
+    label: 'base-input-container__label-container',
+    controlLabel: 'base-input-container__label',
+    materialDecorator: 'base-input-container__checkbox base-input-container__icon',
+    other: 'sv_q_checkbox_other skillbox-input',
+    column: 'sv_q_select_column',
   },
-  'comment': 'survey__input skillbox-input question__input',
-  'dropdown': {
-    'root': '',
-    'control': 'survey__input skillbox-input skillbox-dropdown',
-    'other': 'sv_q_dd_other skillbox-input',
+  comment: 'survey__input skillbox-input question__input',
+  dropdown: {
+    root: '',
+    control: 'survey__input skillbox-input skillbox-dropdown',
+    other: 'sv_q_dd_other skillbox-input',
   },
-  'html': {
-    'root': '',
+  html: {
+    root: '',
   },
-  'matrix': {
-    'root': 'survey__matrix matrix',
-    'label': 'base-input-container__label-container matrix__label',
-    'item': 'survey__matrix-item',
-    'itemValue': 'survey__matrix-item matrix__item base-input-container__input',
-    'headerCell': 'matrix__header-cell',
-    'materialDecorator': 'base-input-container__radiobutton base-input-container__icon matrix__radio',
-    'row': 'survey__radiogroup-group matrix__row',
-    'cell': 'base-input-container base-input-container--survey base-input-container--matrix matrix__cell',
-    'cellText': 'survey__matrix-cell-text',
-    'cellTextSelected': 'survey__matrix-cell-text--selected',
-    'cellLabel': 'survey__matrix-cell-label',
+  matrix: {
+    root: 'survey__matrix matrix',
+    label: 'base-input-container__label-container matrix__label',
+    item: 'survey__matrix-item',
+    itemValue: 'survey__matrix-item matrix__item base-input-container__input',
+    headerCell: 'matrix__header-cell',
+    materialDecorator: 'base-input-container__radiobutton base-input-container__icon matrix__radio',
+    row: 'survey__radiogroup-group matrix__row',
+    cell: 'base-input-container base-input-container--survey base-input-container--matrix matrix__cell',
+    cellText: 'survey__matrix-cell-text',
+    cellTextSelected: 'survey__matrix-cell-text--selected',
+    cellLabel: 'survey__matrix-cell-label',
   },
-  'matrixdropdown': {
-    'root': 'table',
+  matrixdropdown: {
+    root: 'table',
   },
-  'matrixdynamic': {
-    'root': 'table',
-    'button': 'button',
-    'buttonAdd': '',
-    'buttonRemove': '',
-    'iconAdd': '',
-    'iconRemove': '',
+  matrixdynamic: {
+    root: 'table',
+    button: 'button',
+    buttonAdd: '',
+    buttonRemove: '',
+    iconAdd: '',
+    iconRemove: '',
   },
-  'paneldynamic': {
-    'root': '',
-    'button': 'button',
-    'buttonPrev': '',
-    'buttonNext': '',
-    'buttonAdd': '',
-    'buttonRemove': '',
+  paneldynamic: {
+    root: '',
+    button: 'button',
+    buttonPrev: '',
+    buttonNext: '',
+    buttonAdd: '',
+    buttonRemove: '',
   },
-  'multipletext': {
-    'root': 'table',
-    'itemTitle': '',
-    'itemValue': 'sv_q_mt_item_value skillbox-input',
+  multipletext: {
+    root: 'table',
+    itemTitle: '',
+    itemValue: 'sv_q_mt_item_value skillbox-input',
   },
-  'radiogroup': {
-    'root': 'survey__radiogroup-group',
-    'item': 'base-input-container base-input-container--survey',
-    'label': 'base-input-container__label-container',
-    'itemControl': 'base-input-container__input',
-    'controlLabel': 'base-input-container__label',
-    'materialDecorator': 'base-input-container__radiobutton base-input-container__icon',
-    'other': 'sv_q_radiogroup_other skillbox-input',
-    'clearButton': 'sv_q_radiogroup_clear button',
-    'column': 'sv_q_select_column',
+  radiogroup: {
+    root: 'survey__radiogroup-group',
+    item: 'base-input-container base-input-container--survey',
+    label: 'base-input-container__label-container',
+    itemControl: 'base-input-container__input',
+    controlLabel: 'base-input-container__label',
+    materialDecorator: 'base-input-container__radiobutton base-input-container__icon',
+    other: 'sv_q_radiogroup_other skillbox-input',
+    clearButton: 'sv_q_radiogroup_clear button',
+    column: 'sv_q_select_column',
   },
-  'imagepicker': {
-    'root': 'sv_imgsel',
-    'item': 'sv_q_imgsel',
-    'label': 'sv_q_imgsel_label',
-    'itemControl': 'sv_q_imgsel_control_item',
-    'image': 'sv_q_imgsel_image',
-    'itemText': 'sv_q_imgsel_text',
-    'clearButton': 'sv_q_radiogroup_clear',
+  imagepicker: {
+    root: 'sv_imgsel',
+    item: 'sv_q_imgsel',
+    label: 'sv_q_imgsel_label',
+    itemControl: 'sv_q_imgsel_control_item',
+    image: 'sv_q_imgsel_image',
+    itemText: 'sv_q_imgsel_text',
+    clearButton: 'sv_q_radiogroup_clear',
   },
-  'rating': {
-    'root': 'btn-group',
-    'item': 'btn btn-default btn-secondary',
-    'selected': 'active',
-    'minText': '',
-    'itemText': '',
-    'maxText': '',
+  rating: {
+    root: 'btn-group',
+    item: 'btn btn-default btn-secondary',
+    selected: 'active',
+    minText: '',
+    itemText: '',
+    maxText: '',
   },
-  'text': 'survey__input skillbox-input question__input',
-  'expression': 'survey__input skillbox-input',
-  'file': {
-    'root': 'sv_q_file',
-    'placeholderInput': 'sv_q_file_placeholder',
-    'preview': 'sv_q_file_preview',
-    'removeButton': 'sv_q_file_remove_button',
-    'fileInput': 'sv_q_file_input',
-    'removeFile': 'sv_q_file_remove',
+  text: 'survey__input skillbox-input question__input',
+  expression: 'survey__input skillbox-input',
+  file: {
+    root: 'sv_q_file',
+    placeholderInput: 'sv_q_file_placeholder',
+    preview: 'sv_q_file_preview',
+    removeButton: 'sv_q_file_remove_button',
+    fileInput: 'sv_q_file_input',
+    removeFile: 'sv_q_file_remove',
   },
-  'saveData': {
-    'root': 'save-data',
-    'saving': 'alert alert-info',
-    'error': 'alert alert-danger',
-    'success': 'alert alert-success',
-    'saveAgainButton': '',
+  saveData: {
+    root: 'save-data',
+    saving: 'alert alert-info',
+    error: 'alert alert-danger',
+    success: 'alert alert-success',
+    saveAgainButton: '',
   },
-  'window': {
-    'root': 'modal-content',
-    'body': 'modal-body',
-    'header': {
-      'root': 'modal-header panel-title',
-      'title': 'pull-left',
-      'button': 'glyphicon pull-right',
-      'buttonExpanded': 'glyphicon pull-right glyphicon-chevron-up',
-      'buttonCollapsed': 'glyphicon pull-right glyphicon-chevron-down',
+  window: {
+    root: 'modal-content',
+    body: 'modal-body',
+    header: {
+      root: 'modal-header panel-title',
+      title: 'pull-left',
+      button: 'glyphicon pull-right',
+      buttonExpanded: 'glyphicon pull-right glyphicon-chevron-up',
+      buttonCollapsed: 'glyphicon pull-right glyphicon-chevron-down',
     },
   },
 };
diff --git a/client/tests/unit/.eslintrc.js b/client/tests/unit/.eslintrc.js
index 958d51ba..6052da08 100644
--- a/client/tests/unit/.eslintrc.js
+++ b/client/tests/unit/.eslintrc.js
@@ -1,5 +1,5 @@
 module.exports = {
   env: {
-    jest: true
-  }
-}
+    jest: true,
+  },
+};
diff --git a/client/tests/unit/checkbox.spec.js b/client/tests/unit/checkbox.spec.js
index a9160e23..b97e0cb3 100644
--- a/client/tests/unit/checkbox.spec.js
+++ b/client/tests/unit/checkbox.spec.js
@@ -1,19 +1,18 @@
-import {createLocalVue, mount} from '@vue/test-utils';
+import { createLocalVue, mount } from '@vue/test-utils';
 import Checkbox from '@/components/ui/BaseInput';
 
 const localVue = createLocalVue();
 
 describe('Checkbox.vue', () => {
-
   it('should display the provided props', async () => {
     const props = {
       label: 'Lonely label',
       checked: false,
-      item: null
+      item: null,
     };
     const wrapper = mount(Checkbox, {
       propsData: props,
-      localVue
+      localVue,
     });
 
     const input = wrapper.find('[data-cy="base-input-input"]');
@@ -26,20 +25,19 @@ describe('Checkbox.vue', () => {
   it.skip('should emit updated value', async () => {
     // todo: failed after update from jest@25 to jest@27, probably already at jest@26
     const labelText = 'Lonely label';
-    const item = {name: 'bla'};
+    const item = { name: 'bla' };
     const props = {
       label: labelText,
       checked: false,
-      item
+      item,
     };
     const wrapper = mount(Checkbox, {
       propsData: props,
-      localVue
+      localVue,
     });
 
     wrapper.element.click();
 
     expect(wrapper.emitted()['input'][0]).toEqual([!props.checked, item]);
   });
-
 });
diff --git a/client/tests/unit/class-selection-widget.spec.js b/client/tests/unit/class-selection-widget.spec.js
index 56ab5a18..54bea500 100644
--- a/client/tests/unit/class-selection-widget.spec.js
+++ b/client/tests/unit/class-selection-widget.spec.js
@@ -1,4 +1,4 @@
-import {createLocalVue, mount} from '@vue/test-utils';
+import { createLocalVue, mount } from '@vue/test-utils';
 import { createMockClient } from 'mock-apollo-client';
 
 import SIDEBAR from '@/graphql/gql/local/sidebar.gql';
@@ -11,8 +11,6 @@ import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQue
 import VueApollo from 'vue-apollo';
 import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
 
-
-
 // https://dev.to/n_tepluhina/testing-vue-apollo-2020-edition-2l2p
 
 const localVue = createLocalVue();
@@ -22,100 +20,98 @@ const updateSettingsResponse = {
   data: {
     updateSetting: {
       success: true,
-      errors:null,
-      __typename: 'UpdateSettingPayload'
-    }
-  }
+      errors: null,
+      __typename: 'UpdateSettingPayload',
+    },
+  },
 };
 
 const querySidebarResponse = {
-  data: {}
+  data: {},
 };
 
 const deleteModulesResponse = {
-  data: {}
+  data: {},
 };
 
 const meQueryResponse = {
   data: {
     me: {
-      __typename: "PrivateUserNode",
-      id: "UHJpdmF0ZVVzZXJOb2RlOjI=",
+      __typename: 'PrivateUserNode',
+      id: 'UHJpdmF0ZVVzZXJOb2RlOjI=',
       pk: 2,
-      username: "ross.geller",
-      email: "ross.geller@skillbox.example",
-      firstName: "Ross",
-      lastName: "Geller",
-      avatarUrl: "https://ucarecdn.com/fe10f9cc-a509-4170-9396-258abc418247/",
-      expiryDate: "2021-11-29",
+      username: 'ross.geller',
+      email: 'ross.geller@skillbox.example',
+      firstName: 'Ross',
+      lastName: 'Geller',
+      avatarUrl: 'https://ucarecdn.com/fe10f9cc-a509-4170-9396-258abc418247/',
+      expiryDate: '2021-11-29',
       readOnly: false,
       lastModule: null,
       lastTopic: {
-        id: "VG9waWNOb2RlOjQ5",
-        slug: "berufliche-grundbildung",
-        __typename: "TopicNode"
+        id: 'VG9waWNOb2RlOjQ5',
+        slug: 'berufliche-grundbildung',
+        __typename: 'TopicNode',
       },
       selectedClass: {
-        id: "U2Nob29sQ2xhc3NOb2RlOjM=",
+        id: 'U2Nob29sQ2xhc3NOb2RlOjM=',
         readOnly: false,
-        __typename: "SchoolClassNode"
+        __typename: 'SchoolClassNode',
       },
       recentModules: {
         edges: [],
-        __typename: "ModuleNodeConnection"
+        __typename: 'ModuleNodeConnection',
       },
       schoolClasses: {
         edges: [
           {
             node: {
-              id: "U2Nob29sQ2xhc3NOb2RlOjE=",
-              name: "Friends",
-              __typename: "SchoolClassNode"
+              id: 'U2Nob29sQ2xhc3NOb2RlOjE=',
+              name: 'Friends',
+              __typename: 'SchoolClassNode',
             },
-            __typename: "SchoolClassNodeEdge"
+            __typename: 'SchoolClassNodeEdge',
           },
           {
             node: {
-              id: "U2Nob29sQ2xhc3NOb2RlOjM=",
-              name: "ghfgfh",
-              __typename: "SchoolClassNode"
+              id: 'U2Nob29sQ2xhc3NOb2RlOjM=',
+              name: 'ghfgfh',
+              __typename: 'SchoolClassNode',
             },
-            __typename: "SchoolClassNodeEdge"
-          }
+            __typename: 'SchoolClassNodeEdge',
+          },
         ],
-        __typename: "SchoolClassNodeConnection"
+        __typename: 'SchoolClassNodeConnection',
       },
       team: null,
       isTeacher: true,
-      permissions: [
-        "users.can_manage_school_class_content"
-      ],
-      onboardingVisited: true
-    }
-  }
+      permissions: ['users.can_manage_school_class_content'],
+      onboardingVisited: true,
+    },
+  },
 };
 
 const mySchoolClassResponse = {
-  data: {}
+  data: {},
 };
 
 const moduleDetailResponse = {
-  data: {}
+  data: {},
 };
 
 const slug = '/some/123';
 const schoolClasses = [
   {
     id: 'abcd123',
-    name: 'Hello'
-  },{
+    name: 'Hello',
+  },
+  {
     id: 'xyz098',
-    name: 'Kitty'
-  }
+    name: 'Kitty',
+  },
 ];
 
 describe('ClassSelectionWidget.vue', () => {
-
   let mockClient;
   let apolloProvider;
   let wrapper;
@@ -129,9 +125,8 @@ describe('ClassSelectionWidget.vue', () => {
     moduleDetailHandler: jest.fn().mockResolvedValueOnce(moduleDetailResponse),
   };
 
-
   const createComponent = () => {
-    mockClient =  createMockClient();
+    mockClient = createMockClient();
     mockClient.cache.writeQuery = jest.fn();
 
     mockClient.setRequestHandler(UPDATE_USER_SETTING, requestHandlers.updateSettingsHandler);
@@ -151,28 +146,25 @@ describe('ClassSelectionWidget.vue', () => {
       mocks: {
         $route: {
           params: {
-            slug
-          }
-        }
-      }
+            slug,
+          },
+        },
+      },
     });
 
     wrapper.vm.me.schoolClass = schoolClasses;
-
   };
 
-
   it('should delete the modules cache and query the current module on a class change', async () => {
-
     createComponent();
 
-    wrapper.vm.me.selectedClass = {id: 'abcd123'};
+    wrapper.vm.me.selectedClass = { id: 'abcd123' };
     wrapper.vm.updateSelectedClassAndHidePopover(schoolClasses[1]);
 
     expect(requestHandlers.updateSettingsHandler).toHaveBeenCalledWith({
       input: {
-        id: schoolClasses[1].id
-      }
+        id: schoolClasses[1].id,
+      },
     });
 
     await wrapper.vm.$nextTick();
@@ -183,7 +175,6 @@ describe('ClassSelectionWidget.vue', () => {
     // expect(requestHandlers.mySchoolClassHandler).toHaveBeenCalled();
     // current module is being refetched
     // expect(requestHandlers.moduleDetailHandler).toHaveBeenCalledWith({slug});
-
   });
 
   afterEach(() => {
@@ -191,6 +182,4 @@ describe('ClassSelectionWidget.vue', () => {
     mockClient = null;
     apolloProvider = null;
   });
-
-
 });
diff --git a/client/tests/unit/comment-input.spec.js b/client/tests/unit/comment-input.spec.js
index 78f9a931..a66a5fdf 100644
--- a/client/tests/unit/comment-input.spec.js
+++ b/client/tests/unit/comment-input.spec.js
@@ -1,16 +1,15 @@
-import {createLocalVue, shallowMount} from '@vue/test-utils';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
 import CommentInput from '@/components/rooms/CommentInput';
 
 const localVue = createLocalVue();
 localVue.directive('auto-grow', {});
 
 describe('CommentInput.vue', () => {
-
   it('should clear input after submit', async () => {
     const inputText = 'some value';
 
     const wrapper = shallowMount(CommentInput, {
-      localVue
+      localVue,
     });
 
     const textInput = wrapper.find('[data-cy="comment-textarea"]');
@@ -20,5 +19,4 @@ describe('CommentInput.vue', () => {
 
     expect(wrapper.emitted()['submit'][0]).toEqual([inputText]);
   });
-
 });
diff --git a/client/tests/unit/module-navigation.spec.js b/client/tests/unit/module-navigation.spec.js
index 189ae32b..ee4f5d58 100644
--- a/client/tests/unit/module-navigation.spec.js
+++ b/client/tests/unit/module-navigation.spec.js
@@ -5,10 +5,10 @@ describe('ModuleNavigation.vue', () => {
   it('should flatten an array', () => {
     const props = {
       modules: [],
-      me: {}
+      me: {},
     };
     const wrapper = shallowMount(ModuleNavigation, {
-      propsData: props
+      propsData: props,
     });
 
     let arrayToFlatten = [[1], [2, 3], [4, 5, 6], [7]];
@@ -19,15 +19,15 @@ describe('ModuleNavigation.vue', () => {
   it('should find top level assignment', () => {
     const props = {
       modules: [],
-      me: {}
+      me: {},
     };
     const wrapper = shallowMount(ModuleNavigation, {
-      propsData: props
+      propsData: props,
     });
 
     let nodeData = {
       type: 'assignment',
-      id: 1
+      id: 1,
     };
 
     let assignment = wrapper.vm.findAssignment(nodeData);
@@ -37,31 +37,30 @@ describe('ModuleNavigation.vue', () => {
   it('should find content list assignments', () => {
     const props = {
       modules: [],
-      me: {}
+      me: {},
     };
     const wrapper = shallowMount(ModuleNavigation, {
-      propsData: props
+      propsData: props,
     });
 
     let assignments = [
       {
         type: 'assignment',
-        id: 2
+        id: 2,
       },
       {
         type: 'assignment',
-        id: 3
-      }
+        id: 3,
+      },
     ];
 
     let nodeData = {
       type: 'content_list_item',
       id: 1,
-      value: assignments
+      value: assignments,
     };
 
     let foundAssignments = wrapper.vm.findAssignment(nodeData);
     expect(foundAssignments).toEqual(assignments);
   });
-
 });
diff --git a/client/tests/unit/text-form.spec.js b/client/tests/unit/text-form.spec.js
index b7ebfb1f..c4264ddd 100644
--- a/client/tests/unit/text-form.spec.js
+++ b/client/tests/unit/text-form.spec.js
@@ -1,19 +1,18 @@
-import {createLocalVue, shallowMount} from '@vue/test-utils';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
 import TextForm from '@/components/content-forms/TextForm';
 
 const localVue = createLocalVue();
 
 describe('TextForm.vue', () => {
-
   it('should emit user input and its index', async () => {
     const inputText = 'some value';
     const props = {
       value: { text: '' },
-      index: 1
+      index: 1,
     };
     const wrapper = shallowMount(TextForm, {
       propsData: props,
-      localVue
+      localVue,
     });
 
     const textInput = wrapper.find('[data-cy="text-form-input"]');
@@ -21,5 +20,4 @@ describe('TextForm.vue', () => {
 
     expect(wrapper.emitted()['change-text'][0]).toEqual([inputText, props.index]);
   });
-
 });
diff --git a/client/tests/unit/toggle.spec.js b/client/tests/unit/toggle.spec.js
index 1e7932be..955550a6 100644
--- a/client/tests/unit/toggle.spec.js
+++ b/client/tests/unit/toggle.spec.js
@@ -1,8 +1,7 @@
-import {mount} from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Toggle from '@/components/ui/Toggle';
 
 describe('Toggle.vue', () => {
-
   it.skip('should toggle the input value from true to false and back', async () => {
     //todo: fix this, started failing after upgrade vom jest@25 to jest@27, probably already at jest@26
     let checked = false;
@@ -11,10 +10,9 @@ describe('Toggle.vue', () => {
       checked: checked,
     };
     const wrapper = mount(Toggle, {
-      propsData: props
+      propsData: props,
     });
 
-
     const label = wrapper.find('[data-cy=toggle-label]');
     expect(label.text()).toContain('Some toggle label');
     const input = wrapper.find('[data-cy=toggle-checkbox');
@@ -29,5 +27,4 @@ describe('Toggle.vue', () => {
     expect(wrapper.emitted().input.length).toBe(2);
     expect(wrapper.emitted().input).toEqual([[true], [false]]);
   });
-
 });
diff --git a/client/tsconfig.json b/client/tsconfig.json
index 70cae8ab..4a672b84 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -10,8 +10,8 @@
     "moduleResolution": "node",
     "baseUrl": "./src",
     "paths": {
-      "@/*": ["./*"],
-    },
+      "@/*": ["./*"]
+    }
   },
   "exclude": ["./cypress"]
 }