diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 00000000..dce3ca74
--- /dev/null
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,27 @@
+Provide a short description about the changes.
+
+---
+
+Added
+
+-   List new features, functionality
+
+Changed
+
+-   List changes to existing functionality
+
+Removed
+
+-   List features or functionality removed
+
+Fixed
+
+-   List features or functionality that has been fixed
+
+---
+
+## Checklist
+
+-   [ ] Add a short description of the changes. (will be used for public changelog)
+-   [ ] Fill out Added, Changed, Removed, Fixed and remove any unused lists (will be used for public changelog)
+-   [ ] Make sure both security and lint tests have passed since continue-on-error is enabled.
diff --git a/src/js/3party/vimeo.js b/src/js/3party/vimeo.js
index 5447ec06..6751b28c 100644
--- a/src/js/3party/vimeo.js
+++ b/src/js/3party/vimeo.js
@@ -334,9 +334,8 @@ export default (function() {
 					var buttonImg = button.getElementsByTagName('img')[0];
 					buttonImg.src = buttonImg.src.includes('expand_more') ? expandLess : expandMore;
 					var transcriptSelect = document.getElementById(transcript.getTranscriptSelectId());
-					transcriptSelect.style.display = transcriptSelect.style.display === 'none' ? 'block' : 'none';
+					$(transcriptSelect).fadeToggle(250);
 					transcriptSelect.style.marginTop = '1rem';
-
 					var body = document.getElementById(transcriptContentId);
 					var iframe = document.getElementById(iframeId);
 					var bodyDisplayStyle = getComputedStyle(body).display;
@@ -346,19 +345,15 @@ export default (function() {
 					} else {
 						slideDownAndAdjustIframe(400, body, iframe);
 					}
-
-
 					event.preventDefault();
 				});
 
 				function slideUpAndAdjustIframe(duration, element, iframe) {
-					element.style.display = 'none';
-					element.classList.remove('uob-box');
+					$(element).slideToggle(250);
 				}
 
 				function slideDownAndAdjustIframe(duration, element, iframe) {
-					element.style.display = 'block';
-					element.classList.add('uob-box');
+					$(element).slideToggle(250);
 				}
 
 				return { transcriptArea: p, transcriptContentArea: e };
diff --git a/src/js/account-theme.js b/src/js/account-theme.js
index f24da2a6..6623c361 100644
--- a/src/js/account-theme.js
+++ b/src/js/account-theme.js
@@ -3,12 +3,34 @@ import { createApp } from 'vue';
 import utilRoot from './utilRoot';
 
 var udirDesignLoaded;
-
+var themeCookieName = 'use_localhost_theme';
 
 jQuery.extend({
+  getCookie: function (name) {
+    var value = '; ' + document.cookie;
+    var parts = value.split('; ' + name + '=');
+    if (parts.length === 2) return parts.pop().split(';').shift();
+    return null;
+  },
+
+  setCookie: function (name, value, days) {
+    var expires = '';
+    if (days) {
+      var date = new Date();
+      date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+      expires = '; expires=' + date.toUTCString();
+    }
+    document.cookie = name + '=' + value + expires + '; path=/';
+  },
+
+  deleteCookie: function (name) {
+    document.cookie =
+      name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+  },
+
   getScript: function (url, callback) {
-    var head = document.getElementsByTagName("head")[0];
-    var script = document.createElement("script");
+    var head = document.getElementsByTagName('head')[0];
+    var script = document.createElement('script');
     script.src = url;
 
     // Handle Script loading
@@ -20,8 +42,8 @@ jQuery.extend({
         if (
           !done &&
           (!this.readyState ||
-            this.readyState == "loaded" ||
-            this.readyState == "complete")
+            this.readyState == 'loaded' ||
+            this.readyState == 'complete')
         ) {
           done = true;
           if (callback) callback();
@@ -40,24 +62,103 @@ jQuery.extend({
 });
 
 jQuery(document).ready(function ($) {
-  console.log("START.");
+  console.log('START.');
 
   var redirected = false;
+  var themeSettings = {
+    url: SERVER,
+    js: DESIGNJS,
+    css: DESIGNCSS,
+  };
+
+  var useLocalhostTheme = $.getCookie(themeCookieName) === 'true';
+  if (useLocalhostTheme) {
+    themeSettings.url = 'http://localhost:9000/';
+    themeSettings.css = 'kompetanseportalen-localhost.css';
+    themeSettings.js = 'kompetanseportalen-localhost.js';
+    console.log('Using localhost theme:', themeSettings);
+  } else {
+    console.log('Using default theme:', themeSettings);
+  }
+
+  var isBrandConfigPage =
+    window.location.pathname === '/accounts/1/brand_configs';
+  if (isBrandConfigPage) {
+    try {
+      if (isBrandConfigPage) {
+        var intervalTime = 1000;
+        var checkInterval;
+
+        function runWhenTemaVisible() {
+          var isThemeHeadingVisible = $("h1:contains('Tema')").is(':visible');
+
+          if (isThemeHeadingVisible) {
+            var content = $('#content');
+            if (content.length) {
+              var buttonWrapper = $(
+                '<div id="theme-toggle-wrapper" style="margin-bottom: 20px;display: flex;justify-content: flex-end;"></div>',
+              );
+
+              function getButtonLabel() {
+                var cookieValue = $.getCookie(themeCookieName);
+                return cookieValue === 'true'
+                  ? 'Switch to default theme'
+                  : 'Switch to localhost theme';
+              }
+
+              var themeSwitchButton = $('<button>', {
+                class: 'Button Button--primary',
+                type: 'button',
+                text: getButtonLabel(),
+                click: function () {
+                  var currentCookie = $.getCookie(themeCookieName);
+                  if (currentCookie === 'true') {
+                    $.deleteCookie(themeCookieName);
+                  } else {
+                    $.setCookie(themeCookieName, 'true', 15);
+                  }
+
+                  window.location.reload();
+                  $(this).text(getButtonLabel());
+                },
+              });
+
+              buttonWrapper.append(themeSwitchButton);
+              content.prepend(buttonWrapper);
+            }
+
+            clearInterval(checkInterval);
+          } else {
+            console.log(
+              '<h1>Tema</h1> is still not visible. Checking again...',
+            );
+          }
+        }
+
+        checkInterval = setInterval(runWhenTemaVisible, intervalTime);
+      }
+    } catch (error) {
+      console.error('Error in brand config page', error);
+    }
+  }
 
   // Redirect if necessary
-  if (document.location.pathname == "/search/all_courses" && document.location.search.includes('?enroll_code')) {
+  if (
+    document.location.pathname == '/search/all_courses' &&
+    document.location.search.includes('?enroll_code')
+  ) {
     window.location.href = '/courses' + document.location.search;
     redirected = true;
-  } else if (document.location.pathname == "/login/canvas") {
-    if (document.referrer.includes("/logout")) {
+  } else if (document.location.pathname == '/login/canvas') {
+    if (document.referrer.includes('/logout')) {
       window.location.href = '/search/all_courses';
       redirected = true;
-    } else if (!document.referrer.includes("/login/canvas")) {
-      $(".ic-Login").hide();
-/*       $("#f1_container").hide(); // Small screens */
+    } else if (!document.referrer.includes('/login/canvas')) {
+      $('.ic-Login').hide();
+      /*       $("#f1_container").hide(); // Small screens */
       redirected = utilRoot.redirectFeideAuthIfEnrollReferrer();
       if (!redirected) {
-        if (!document.location.search.includes("normalLogin=1")) {
+        if (!document.location.search.includes('normalLogin=1')) {
           if (document.getElementById('wrapper')) {
             document.getElementById('wrapper').remove();
           }
@@ -68,52 +169,53 @@ jQuery(document).ready(function ($) {
           if (parent) {
             parent.appendChild(login);
           }
-          customLogin.mount("#login-component");
+          customLogin.mount('#login-component');
         } else {
-          $(".ic-Login").show();
-          $("#f1_container").show(); // Small screens
+          $('.ic-Login').show();
+          $('#f1_container').show(); // Small screens
         }
       }
     }
-  } else if (document.location.pathname == "/courses") {
+  } else if (document.location.pathname == '/courses') {
     redirected = utilRoot.redirectToEnrollIfCodeParamPassed();
   } else if (document.location.href.indexOf('?login_success=1') != -1) {
     window.location.href = '/search/all_courses';
-  } else if (document.location.pathname == "/") {
+  } else if (document.location.pathname == '/') {
     setTimeout(function () {
-      if (!$(".ic-DashboardCard__header_hero").length) {
+      if (!$('.ic-DashboardCard__header_hero').length) {
         let html = `
         <div class="card card-body">
         <h3>Er det tomt her?</h3>
           <p>Dersom du har valgt å logge inn med Feide og ikke finner innholdet ditt kan det hende det er fordi du
           vanligvis har logget på med en annen bruker ved å bruke epost og passord. Logg ut og inn igjen ved å benytte "Ikke Feide" - knappen.
           </p>
-          <img src="${SERVER}bitmaps/nyinnlogging.png" width="70%" alt="Ny innloggingsskjerm"/>
+          <img src="${themeSettings.url}bitmaps/nyinnlogging.png" width="70%" alt="Ny innloggingsskjerm"/>
         </div>
         `;
-        document.getElementById('dashboard-activity').insertAdjacentHTML('beforebegin', html);
+        document
+          .getElementById('dashboard-activity')
+          .insertAdjacentHTML('beforebegin', html);
       }
-    }, 1000)
+    }, 1000);
   }
 
   if (!redirected) {
     if (window.udirDesignLoaded === undefined) {
       window.udirDesignLoaded = true;
-      console.log("Loading udir design.");
+      console.log('Loading udir design.');
 
-      var filename = SERVER + DESIGNCSS;
+      var filename = `${themeSettings.url}${themeSettings.css}`;
 
-      var fileref = document.createElement("link")
-      fileref.setAttribute("rel", "stylesheet")
-      fileref.setAttribute("type", "text/css")
-      fileref.setAttribute("href", filename)
+      var fileref = document.createElement('link');
+      fileref.setAttribute('rel', 'stylesheet');
+      fileref.setAttribute('type', 'text/css');
+      fileref.setAttribute('href', filename);
       fileref.onload = (_) => {
-        $.getScript(SERVER + DESIGNJS);
-      }
-      document.getElementsByTagName("head")[0].appendChild(fileref)
+        $.getScript(`${themeSettings.url}${themeSettings.js}`);
+      };
+      document.getElementsByTagName('head')[0].appendChild(fileref);
     } else {
-      console.log("Udir design already loaded.");
+      console.log('Udir design already loaded.');
     }
   }
-
 });
diff --git a/src/js/api/api.js b/src/js/api/api.js
index 17194716..6af0e199 100755
--- a/src/js/api/api.js
+++ b/src/js/api/api.js
@@ -1,8 +1,8 @@
-import settings from "../settings";
-import util from "../modules/util";
-import utilRoot from "../utilRoot";
+import settings from '../settings';
+import util from '../modules/util';
+import utilRoot from '../utilRoot';
 
-export default (function() {
+export default (function () {
   let _urlToTypeMapping = [];
 
   _urlToTypeMapping['quizzes'] = 'Quiz';
@@ -47,7 +47,7 @@ export default (function() {
         data: params,
         success(response) {
           if ('student_id' in params) {
-            response = response.map(el => {
+            response = response.map((el) => {
               el.student_id = params.student_id;
               return el;
             });
@@ -56,7 +56,7 @@ export default (function() {
             const groupId = uri.split('/groups/');
             groupId = groupId[1].split('/users');
             groupId = parseInt(groupId[0]);
-            response = response.map(el => {
+            response = response.map((el) => {
               el.group_id = groupId;
               return el;
             });
@@ -65,10 +65,10 @@ export default (function() {
         },
         error(XMLHttpRequest, textStatus, errorThrown) {
           console.log('Error during GET');
-          if(customError) {
+          if (customError) {
             customError(XMLHttpRequest.responseText);
           }
-        }
+        },
       });
     },
 
@@ -90,7 +90,7 @@ export default (function() {
         },
         error(XMLHttpRequest, textStatus, errorThrown) {
           console.log('Error during PUT');
-        }
+        },
       });
     },
 
@@ -108,7 +108,7 @@ export default (function() {
         },
         error(XMLHttpRequest, textStatus, errorThrown) {
           console.log('Error during DELETE');
-        }
+        },
       });
     },
 
@@ -120,7 +120,7 @@ export default (function() {
      */
     listModulesForCourse(callback, error, cid) {
       let href = `/api/v1/courses/${cid}/modules?per_page=100`;
-      $.getJSON(href, modules => {
+      $.getJSON(href, (modules) => {
         const noOfModules = modules.length;
         let asyncsDone = 0;
         modules.forEach((module, index) => {
@@ -129,14 +129,14 @@ export default (function() {
           }/items?per_page=100`;
           $.getJSON(
             href,
-            (function(j) {
-              return function(items) {
+            (function (j) {
+              return function (items) {
                 modules[j].items = items;
                 asyncsDone++;
 
                 asyncsDone === noOfModules && callback(modules);
               };
-            })(index) // calling the function with the current value
+            })(index), // calling the function with the current value
           );
         });
       });
@@ -156,7 +156,7 @@ export default (function() {
 
         moduleId = q.substring(
           q.indexOf(paramName) + paramName.length + 1,
-          q.length
+          q.length,
         );
         if (moduleId.indexOf('&') != -1)
           moduleId = moduleId.substring(0, moduleId.indexOf('&'));
@@ -190,34 +190,30 @@ export default (function() {
 
     getAllCourses(callback, error) {
       this._get({
-        callback: function(courses) {
-          const filteredCourses = courses.filter(
-            util.filterSearchAllCourse
-          );
+        callback: function (courses) {
+          const filteredCourses = courses.filter(util.filterSearchAllCourse);
           callback(filteredCourses);
         },
         error: error,
         uri: '/search/all_courses',
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
 
-    getAllPublicCourses: function(callback, error) {
+    getAllPublicCourses: function (callback, error) {
       this._get({
-        callback: function(courses) {
-          var filteredCourses = courses.filter(
-            util.filterSearchAllCourse
-          );
+        callback: function (courses) {
+          var filteredCourses = courses.filter(util.filterSearchAllCourse);
           callback(filteredCourses);
         },
         error: error,
         // if not authenticated, it displays only courses with Open Enrollment enabled
         uri: '/search/all_courses?open_enrollment_only=true',
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
 
-    getEnrolledCourses: function(callback, error) {
+    getEnrolledCourses: function (callback, error) {
       // returns empty set if a user is not authenticated
       if (!util.isAuthenticated()) {
         callback([]);
@@ -225,8 +221,8 @@ export default (function() {
       }
 
       this._get({
-        callback: function(courses) {
-          if(settings.filterCourses) {
+        callback: function (courses) {
+          if (settings.filterCourses) {
             const filteredCourses = courses.filter(util.filterCourse);
             callback(filteredCourses);
           } else {
@@ -237,8 +233,8 @@ export default (function() {
         uri: '/courses?include[]=public_description',
         params: {
           include: ['syllabus_body', 'course_progress'],
-          per_page: '100'
-        }
+          per_page: '100',
+        },
       });
     },
 
@@ -261,7 +257,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: `/courses/${courseId}/modules`,
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
 
@@ -270,17 +266,16 @@ export default (function() {
         callback: callback,
         error: error,
         uri: `/courses/${courseId}/modules?include[]=items`,
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
 
-
     getItemsForModuleId(callback, error, courseId, moduleId, params) {
       this._get({
         callback: callback,
         error: error,
         uri: `/courses/${courseId}/modules/${moduleId}/items`,
-        params: params
+        params: params,
       });
     },
 
@@ -290,10 +285,12 @@ export default (function() {
     },
     getModuleItemSequence(courseId, moduleItemId, callback, error) {
       this._get({
-        callback: function(moduleItemSequence) {callback(courseId, moduleItemSequence)},
+        callback: function (moduleItemSequence) {
+          callback(courseId, moduleItemSequence);
+        },
         error: error,
         uri: `/courses/${courseId}/module_item_sequence`,
-        params: { asset_id: moduleItemId, asset_type: "ModuleItem" }
+        params: { asset_id: moduleItemId, asset_type: 'ModuleItem' },
       });
     },
 
@@ -301,21 +298,21 @@ export default (function() {
       this._get({
         callback: callback,
         error: error,
-        uri: `/courses/${courseId}?include[]=self_enrollment_code`,
-        params: {}
+        uri: `/courses/${courseId}?include[]=self_enrollment_code&include[]=course_image`,
+        params: {},
       });
     },
     //Note that in newer versions of Canvas, worked on 8.2.2019.
     //we can use ENV to check this.
-    isGroupDiscussion: function(courseId, contentId, callback) {
-        if (typeof ENV.DISCUSSION.IS_GROUP !== 'undefined') {
-          callback(ENV.DISCUSSION.IS_GROUP);
-        } else {
-          //Fallback for older versions.
-          this.getDiscussionTopic(courseId, contentId, function(discussion) {
-            callback(discussion.group_category_id ? true : false);
-          });
-        }
+    isGroupDiscussion: function (courseId, contentId, callback) {
+      if (typeof ENV.DISCUSSION.IS_GROUP !== 'undefined') {
+        callback(ENV.DISCUSSION.IS_GROUP);
+      } else {
+        //Fallback for older versions.
+        this.getDiscussionTopic(courseId, contentId, function (discussion) {
+          callback(discussion.group_category_id ? true : false);
+        });
+      }
     },
 
     getCurrentGroupId() {
@@ -332,7 +329,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: `/groups/${groupId}`,
-        params: {}
+        params: {},
       });
     },
 
@@ -341,7 +338,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: `/groups/${groupId}/users`,
-        params: { include: ['avatar_url'], per_page: 999 }
+        params: { include: ['avatar_url'], per_page: 999 },
       });
     },
 
@@ -349,9 +346,9 @@ export default (function() {
       moduleItemId,
       typeAndContentId,
       callback,
-      error
+      error,
     ) {
-      this.getModulesForCurrentCourse(modules => {
+      this.getModulesForCurrentCourse((modules) => {
         let bCurrentItemFound = false;
         let currentHeaderItem = null;
         for (let i = 0; i < modules.length; i++) {
@@ -444,26 +441,26 @@ export default (function() {
       this.getSpecificGroupDiscussionTopic(
         groupId,
         groupTopicId,
-        groupDiscussion => {
-          _this.getUserGroups(groups => {
+        (groupDiscussion) => {
+          _this.getUserGroups((groups) => {
             for (let i = 0; i < groups.length; i++) {
               if (groups[i].id == groupId) {
                 const moduleItemId = null;
                 const currentTypeAndContentId = {
                   contentId: groupDiscussion.root_topic_id,
-                  type: 'Discussion'
+                  type: 'Discussion',
                 };
                 _this.getCurrentModuleForItemOrTypeAndContentId(
                   moduleItemId,
                   currentTypeAndContentId,
                   callback,
-                  error
+                  error,
                 );
                 break; //We found the correct group, no need to check the rest.
               }
             } //end for all the groups
           }); //getUserGroups
-        }
+        },
       ); //getSpecificGroupDiscussionTopic
     },
 
@@ -487,7 +484,7 @@ export default (function() {
           currentModuleItemId,
           currentTypeAndContentId,
           callback,
-          error
+          error,
         );
       }
     },
@@ -513,7 +510,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: '/users/self/profile',
-        params: {}
+        params: {},
       });
     },
     getActivityStreamForUser(callback, error) {
@@ -521,16 +518,12 @@ export default (function() {
         callback: callback,
         error: error,
         uri: '/users/self/activity_stream',
-        params: {}
+        params: {},
       });
     },
 
     currentPageIsAnnouncement() {
-      return (
-        $('#section-tabs')
-          .find('a.announcements.active')
-          .size() == 1
-      );
+      return $('#section-tabs').find('a.announcements.active').size() == 1;
     },
 
     currentPageIsModuleItem() {
@@ -551,7 +544,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: '/conversations/unread_count',
-        params: {}
+        params: {},
       });
     },
     //api/v1/search/recipients?search=&per_page=20&permissions[]=send_messages_all&messageable_only=true&synthetic_contexts=true&context=course_1_sections
@@ -567,8 +560,8 @@ export default (function() {
           messageable_only: true,
           synthetic_contexts: true,
           context: recipientsContext,
-          per_page: 999
-        }
+          per_page: 999,
+        },
       });
     },
 
@@ -578,7 +571,7 @@ export default (function() {
       subject,
       body,
       callback,
-      error
+      error,
     ) {
       const courseContext = `course_${courseId}`;
       this._post({
@@ -589,8 +582,8 @@ export default (function() {
           course: courseContext,
           recipients: [recipient],
           subject: subject,
-          body: body
-        }
+          body: body,
+        },
       });
     },
 
@@ -599,7 +592,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: '/accounts',
-        params: {}
+        params: {},
       });
     },
 
@@ -608,7 +601,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: `/accounts/${account}/users`,
-        params: {}
+        params: {},
       });
     },
     getCoursesForAccount(account, callback, error) {
@@ -616,7 +609,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: `/accounts/${account}/courses`,
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
 
@@ -625,7 +618,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: '/courses',
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
 
@@ -634,7 +627,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: `/accounts/${account}/group_categories`,
-        params: {}
+        params: {},
       });
     },
 
@@ -643,7 +636,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: `/courses/${course}/group_categories`,
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
 
@@ -657,7 +650,7 @@ export default (function() {
         const next = xhr
           .getResponseHeader('Link')
           .split(',')
-          .find(e => {
+          .find((e) => {
             return e.match('rel="next"');
           });
         if (next === undefined) {
@@ -668,11 +661,11 @@ export default (function() {
             callback: that._getGroupsForAccountHelper(
               accumulatedGroups,
               callback,
-              error
+              error,
             ),
             error: error,
             uri: fullURI.split('api/v1')[1],
-            params: {}
+            params: {},
           });
         }
       };
@@ -683,7 +676,7 @@ export default (function() {
         callback: this._getGroupsForAccountHelper([], callback, error),
         error: error,
         uri: `/accounts/${account}/groups`,
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
 
@@ -693,7 +686,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: `/group_categories/${categoryID}`,
-        params: {}
+        params: {},
       });
     },
 
@@ -703,7 +696,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: `/group_categories/${categoryID}/groups`,
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
 
@@ -713,7 +706,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: `/courses/${courseID}/groups`,
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
 
@@ -722,21 +715,20 @@ export default (function() {
         callback: callback,
         error: error,
         uri: '/users/self/groups',
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
     getUserGroupsForCourse(courseId, callback, error) {
-      this.getUserGroups(groups => {
-          let usersGroups = [];
-          for (let i = 0; i < groups.length; i++) {
-            const group = groups[i];
-            if (group.course_id == courseId) {
-              usersGroups.push(group);
-            }
+      this.getUserGroups((groups) => {
+        let usersGroups = [];
+        for (let i = 0; i < groups.length; i++) {
+          const group = groups[i];
+          if (group.course_id == courseId) {
+            usersGroups.push(group);
           }
-          callback(usersGroups);
         }
-      );
+        callback(usersGroups);
+      });
     },
 
     // /api/v1/courses/:course_id/sections
@@ -745,7 +737,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: `/courses/${courseID}/sections`,
-        params: params
+        params: params,
       });
     },
 
@@ -755,7 +747,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: `/sections/${sectionID}`,
-        params: {}
+        params: {},
       });
     },
 
@@ -766,7 +758,7 @@ export default (function() {
         error: error,
         uri: `/courses/${courseId}/assignments/${assignmentId}`,
         // "params": {"include": ["submission", "assignment_visibility", "overrides", "observed_users"]},
-        params: {}
+        params: {},
       });
     },
 
@@ -776,14 +768,14 @@ export default (function() {
         callback: callback,
         error: error,
         uri: `/courses/${courseId}/assignments`,
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
     getPagesForCourse(courseId, callback) {
       this._get({
         callback: callback,
         uri: `/courses/${courseId}/pages`,
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
 
@@ -791,14 +783,14 @@ export default (function() {
       this._get({
         callback: callback,
         uri: `/courses/${courseId}/discussion_topics`,
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
     getQuizzesForCourse(courseId, callback) {
       this._get({
         callback: callback,
         uri: `/courses/${courseId}/quizzes`,
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
 
@@ -808,7 +800,7 @@ export default (function() {
       assignmentId,
       user_id,
       callback,
-      error
+      error,
     ) {
       this._get({
         callback: callback,
@@ -821,9 +813,9 @@ export default (function() {
             'rubric_assessment',
             'visibility',
             'course',
-            'user'
-          ]
-        }
+            'user',
+          ],
+        },
         // "params": {"include": ["rubric_assessment", "visibility"]},
       });
     },
@@ -835,7 +827,7 @@ export default (function() {
       assignmentId,
       submission_id,
       callback,
-      error
+      error,
     ) {
       // Returns only the student's peer reviews if you are a student. Returns all peer reviews if you are a teacher or admin
       this._get({
@@ -843,7 +835,7 @@ export default (function() {
         error: error,
         uri: `/courses/${courseId}/assignments/${assignmentId}/submissions/${submission_id}/peer_reviews`,
         // "params": {"include": ["submission_comments", "user"]},
-        params: { include: ['user'] }
+        params: { include: ['user'] },
       });
     },
 
@@ -853,7 +845,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: `/courses/${courseId}/assignments/${assignmentId}/peer_reviews`,
-        params: { include: ['user'] }
+        params: { include: ['user'] },
       });
     },
 
@@ -863,19 +855,19 @@ export default (function() {
       submissionID,
       userID,
       callback,
-      error
+      error,
     ) {
       this._post({
         callback: callback,
         error: error,
         uri: `/courses/${courseID}/assignments/${assignmentID}/submissions/${submissionID}/peer_reviews`,
-        params: { user_id: userID }
+        params: { user_id: userID },
       });
     },
 
     //https://kurs.iktsenteret.no/api/v1/courses/41/enrollments?enrollment%5Bself_enrollment_code%5D=WJTLML&enrollment%5Buser_id%5D=self
     enrollUser(enrollAction, callback) {
-      const jqxhr = $.post(enrollAction, data => {
+      const jqxhr = $.post(enrollAction, (data) => {
         callback(data);
       });
     },
@@ -889,8 +881,8 @@ export default (function() {
           'enrollment[user_id]': userId,
           'enrollment[type]': etype,
           'enrollment[enrollment_state]': 'active',
-          'enrollment[limit_privileges_to_course_section]': true
-        }
+          'enrollment[limit_privileges_to_course_section]': true,
+        },
       });
       return true;
     },
@@ -900,8 +892,8 @@ export default (function() {
         error: error,
         uri: `/group_categories/${categoryId}/groups`,
         params: {
-          name: groupName
-        }
+          name: groupName,
+        },
       });
     },
     createSection(courseId, sectionName, callback, error) {
@@ -910,8 +902,8 @@ export default (function() {
         error: error,
         uri: `/courses/${courseId}/sections`,
         params: {
-          'course_section[name]': sectionName
-        }
+          'course_section[name]': sectionName,
+        },
       });
     },
 
@@ -920,7 +912,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: `/groups/${gid}/memberships`,
-        params: { user_id: uid }
+        params: { user_id: uid },
       });
     },
 
@@ -931,7 +923,7 @@ export default (function() {
         callback: callback,
         error: error,
         uri: `/accounts/${account_id}/logins`,
-        params: params
+        params: params,
       });
     },
 
@@ -939,7 +931,7 @@ export default (function() {
       this._get({
         callback: callback,
         uri: `/courses/${courseId}/discussion_topics/${contentId}`,
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
 
@@ -947,7 +939,7 @@ export default (function() {
       this._get({
         callback: callback,
         uri: `/courses/${courseId}/quizzes/${contentId}`,
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
 
@@ -955,7 +947,7 @@ export default (function() {
       this._get({
         callback: callback,
         uri: `/groups/${groupId}/discussion_topics/${contentId}`,
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
 
@@ -963,7 +955,7 @@ export default (function() {
       this._get({
         callback: callback,
         uri: `/groups/${contentId}/discussion_topics/`,
-        params: { per_page: 999 }
+        params: { per_page: 999 },
       });
     },
 
@@ -971,7 +963,7 @@ export default (function() {
       this._get({
         callback: callback,
         uri: `/courses/${courseId}/discussion_topics`,
-        params: { only_announcements: true, per_page: 999 }
+        params: { only_announcements: true, per_page: 999 },
       });
     },
 
@@ -979,47 +971,47 @@ export default (function() {
       this._get({
         callback: callback,
         uri: `/courses/${courseId}/enrollments`,
-        params: params
+        params: params,
       });
     },
     postEnrollmentAcceptInvite(courseId, enrollmentId, params, callback) {
       this._post({
         callback: callback,
         uri: `/courses/${courseId}/enrollments/${enrollmentId}/accept`,
-        params: params
+        params: params,
       });
     },
     postEnrollmentRejectInvite(courseId, enrollmentId, params, callback) {
       this._post({
         callback: callback,
         uri: `/courses/${courseId}/enrollments/${enrollmentId}/reject`,
-        params: params
+        params: params,
       });
     },
     getEnrollmentsForSection(sectionId, params, callback) {
       this._get({
         callback: callback,
         uri: `/sections/${sectionId}/enrollments`,
-        params: params
+        params: params,
       });
     },
     getUsersEnrollmentsForCourse(courseId, callback) {
       this._get({
-        callback: courses => {
+        callback: (courses) => {
           const filteredCourses = courses.filter(
-            course => course.course_id == courseId
+            (course) => course.course_id == courseId,
           );
           callback(filteredCourses);
         },
         uri: `/users/self/enrollments`,
-        params: {per_page: 999}
+        params: { per_page: 999 },
       });
     },
     getEnrollmentsForSection(sectionId, params, callback) {
       this._get({
         callback: callback,
         uri: `/sections/${sectionId}/enrollments`,
-        params: params
+        params: params,
       });
     },
     deleteUserCustomData(callback) {
@@ -1027,8 +1019,8 @@ export default (function() {
         callback: callback,
         uri: `/users/self/custom_data`,
         params: {
-          "ns": "no.udir.kompetanse"
-        }
+          ns: 'no.udir.kompetanse',
+        },
       });
     },
 
@@ -1037,11 +1029,11 @@ export default (function() {
         callback: callback,
         uri: `/users/self/custom_data`,
         params: {
-          "ns": "no.udir.kompetanse",
-          "data": {
-            "privacyPolicyVersion": privacyPolicyVersion,
-          }
-        }
+          ns: 'no.udir.kompetanse',
+          data: {
+            privacyPolicyVersion: privacyPolicyVersion,
+          },
+        },
       });
     },
 
@@ -1055,8 +1047,8 @@ export default (function() {
         error: error,
         uri: `/users/self/custom_data`,
         params: {
-          "ns": "no.udir.kompetanse",
-        }
+          ns: 'no.udir.kompetanse',
+        },
       });
     },
 
@@ -1068,7 +1060,7 @@ export default (function() {
       this._get({
         callback: callback,
         uri: '/calendar_events/',
-        params: params
+        params: params,
       });
     },
 
@@ -1076,8 +1068,8 @@ export default (function() {
       this._put({
         callback: callback,
         uri: `/courses/${courseId}/discussion_topics/${contentId}/read_all`,
-        params: { forced_read_state: 'false' }
+        params: { forced_read_state: 'false' },
       });
-    }
+    },
   };
 })();
diff --git a/src/js/modules/coursepagebanner.js b/src/js/modules/coursepagebanner.js
index 62c6008a..0b548964 100644
--- a/src/js/modules/coursepagebanner.js
+++ b/src/js/modules/coursepagebanner.js
@@ -1,43 +1,55 @@
-import CoursePageBanner from "../../vue/components/course-page-banner/CoursePageBanner.vue";
-import api from "../api/api";
-import coursepage from "./coursepage";
-import { createApp } from "vue";
-import kpasApi from "../api/kpas-api";
+import CoursePageBanner from '../../vue/components/course-page-banner/CoursePageBanner.vue';
+import api from '../api/api';
+import coursepage from './coursepage';
+import { createApp } from 'vue';
+import kpasApi from '../api/kpas-api';
 
-export default (function() {
-    return {
+export default (function () {
+  return {
     insertCourseBanner: function (courseId, courseUnenrollmentUuid) {
-        let currentCourseId  = ENV.COURSE_ID? ENV.COURSE_ID : ENV.course_id ? ENV.course_id : ENV.COURSE.id;
-        let isEnrolled = ENV.current_user_is_student? ENV.current_user_is_student || ENV.COURSE.is_student : false;
-        let isFrontPage = false;
-        if(window.location.pathname ==  "/courses/" + currentCourseId){
-            isFrontPage = true;
-        }
-        api.getCourse (currentCourseId, function(course) {
-            kpasApi.getSettingsCurrentCourse(currentCourseId, function(settings) {
+      let currentCourseId = ENV.COURSE_ID
+        ? ENV.COURSE_ID
+        : ENV.course_id
+          ? ENV.course_id
+          : ENV.COURSE.id;
+      let isEnrolled = ENV.current_user_is_student
+        ? ENV.current_user_is_student || ENV.COURSE.is_student
+        : false;
+      let isFrontPage = false;
+      if (window.location.pathname == '/courses/' + currentCourseId) {
+        isFrontPage = true;
+      }
+      api.getCourse(currentCourseId, function (course) {
+        kpasApi.getSettingsCurrentCourse(currentCourseId, function (settings) {
+          console.log(
+            'Course settings',
+            course?.image_download_url,
+            settings.image.path,
+          );
 
-                let wrapper = document.getElementById("wrapper");
-                let parent = wrapper.parentNode;
+          let wrapper = document.getElementById('wrapper');
+          let parent = wrapper.parentNode;
 
-                const app = createApp(CoursePageBanner, {
-                    theme: settings.course_category.category.color_code,
-                    imageUrl: settings.image.path,
-                    title: course.name,
-                    isEnrolled: isEnrolled,
-                    isFrontPage: isFrontPage,
-                    languages: settings.multilang.toLowerCase(),
-                    courseId: courseId,
-                    unenrollmentUuid: courseUnenrollmentUuid
-                });
-                let coursePageBannerWrapper = document.createElement("div");
-                coursePageBannerWrapper.id =  "course-page-banner-wrapper";
-                parent.insertBefore(coursePageBannerWrapper, wrapper);
-                app.mount("#course-page-banner-wrapper");
-                coursepage.overrideUnregisterDialog();
-
-            });
-
-    });
-    }
-    }
+          const app = createApp(CoursePageBanner, {
+            theme: settings.course_category.category.color_code,
+            imageUrl:
+              course?.image_download_url != null
+                ? course?.image_download_url
+                : settings.image.path,
+            title: course.name,
+            isEnrolled: isEnrolled,
+            isFrontPage: isFrontPage,
+            languages: settings.multilang.toLowerCase(),
+            courseId: courseId,
+            unenrollmentUuid: courseUnenrollmentUuid,
+          });
+          let coursePageBannerWrapper = document.createElement('div');
+          coursePageBannerWrapper.id = 'course-page-banner-wrapper';
+          parent.insertBefore(coursePageBannerWrapper, wrapper);
+          app.mount('#course-page-banner-wrapper');
+          coursepage.overrideUnregisterDialog();
+        });
+      });
+    },
+  };
 })();
diff --git a/src/js/modules/reveal.js b/src/js/modules/reveal.js
index fa474f51..7a0210da 100644
--- a/src/js/modules/reveal.js
+++ b/src/js/modules/reveal.js
@@ -88,14 +88,14 @@ export default (function() {
                             var options;
 
                             if (document.querySelector(body).style.display !== 'none') {
-                                document.querySelector(body).style.display = 'none';
+                                $(body).slideToggle(250);
                                 var hideLink = document.querySelector(body + ' .hide_youtube_embed_link');
                                 if (hideLink) {
                                     hideLink.click();
                                 }
                                 options = { icons: { secondary: 'ui-icon-triangle-1-e' } };
                             } else {
-                                document.querySelector(body).style.display = 'flex';
+                                $(body).slideToggle(250);
                                 document.getElementsByClassName("custom-reveal-wrapper")[0].style.width = 'unset';
                                 options = { icons: { secondary: 'ui-icon-triangle-1-s' } };
                             }
diff --git a/src/js/modules/tooltip.js b/src/js/modules/tooltip.js
index d4e1585f..ca244e79 100644
--- a/src/js/modules/tooltip.js
+++ b/src/js/modules/tooltip.js
@@ -20,7 +20,7 @@ export default (function() {
                         var tooltipSpan = document.createElement("span");
                         tooltipSpan.classList.add("tooltip");
                         tooltipSpan.id = "tooltip-" + count;
-
+                        
                         var textSpan = document.createElement("span");
                         textSpan.classList.add("tooltiptext-box");
                         textSpan.id = "tooltiptext-box-" + count;
@@ -46,14 +46,13 @@ export default (function() {
                         tooltipSpan.appendChild(underLineSpan);
                         tooltipSpan.appendChild(questionMarkSpan);
                         tooltipSpan.appendChild(textSpan);
-
-
                         el.innerHTML = el.innerHTML.replace(matches[0], tooltipSpan.outerHTML);
                         matches = re.exec(el.innerHTML);
                         count++;
                     }
                     for (var j = 0; j < count; j++) {
                         var tooltip = document.getElementById("tooltip-" + j);
+                        tooltip.tabIndex = 1;
                         tooltip.addEventListener("click", function (e) {
                             e.stopPropagation();
                             var tooltipText = this.querySelector(".tooltiptext-box");
diff --git a/src/js/modules/util.js b/src/js/modules/util.js
index 1ef3631b..ff4eff86 100755
--- a/src/js/modules/util.js
+++ b/src/js/modules/util.js
@@ -1,5 +1,5 @@
-import api from '../api/api.js'
-import settings from "../settings";
+import api from '../api/api.js';
+import settings from '../settings';
 
 export default (function () {
   return {
@@ -8,17 +8,17 @@ export default (function () {
       allCoursesList: 2,
       myCoursesList: 3,
       dataportenCallback: 4,
-      uidpCallback: 5
+      uidpCallback: 5,
     },
 
     mapCourseSettings: function (courses, courseSettings) {
-      courses.forEach(course => {
-        var cc = courseSettings.find(x => x.course_id === course.id)
+      courses.forEach((course) => {
+        var cc = courseSettings.find((x) => x.course_id === course.id);
         if (cc) {
-          course.course_settings = cc
+          course.course_settings = cc;
         }
       });
-      return courses
+      return courses;
     },
     mmoocLoadScript: function (mmoocScript) {
       var mmoocScriptElement = document.createElement('script');
@@ -27,18 +27,18 @@ export default (function () {
       document.body.appendChild(mmoocScriptElement);
     },
 
-
     isMobileOrTablet: function () {
-      if (navigator.userAgent.match(/Android/i)
-        || navigator.userAgent.match(/webOS/i)
-        || navigator.userAgent.match(/iPhone/i)
-        || navigator.userAgent.match(/iPad/i)
-        || navigator.userAgent.match(/iPod/i)
-        || navigator.userAgent.match(/BlackBerry/i)
-        || navigator.userAgent.match(/Windows Phone/i)) {
+      if (
+        navigator.userAgent.match(/Android/i) ||
+        navigator.userAgent.match(/webOS/i) ||
+        navigator.userAgent.match(/iPhone/i) ||
+        navigator.userAgent.match(/iPad/i) ||
+        navigator.userAgent.match(/iPod/i) ||
+        navigator.userAgent.match(/BlackBerry/i) ||
+        navigator.userAgent.match(/Windows Phone/i)
+      ) {
         return true;
-      }
-      else {
+      } else {
         return false;
       }
     },
@@ -71,7 +71,9 @@ export default (function () {
       if (!settings.filterCourses) {
         return true;
       }
-      return settings.filterCoursesOnAccountId.includes(course.course.account_id);
+      return settings.filterCoursesOnAccountId.includes(
+        course.course.account_id,
+      );
     },
     callWhenElementIsPresent: function (classId, callback) {
       var checkExist = setInterval(function () {
@@ -145,7 +147,7 @@ export default (function () {
       var scrollHeight =
         Number(
           document.getElementById(frameId).contentWindow.document.body
-            .scrollHeight
+            .scrollHeight,
         ) + 20;
       document.getElementsByClassName(containerId)[0].style.height =
         scrollHeight + 'px';
@@ -153,7 +155,9 @@ export default (function () {
 
     isEnrolledAsStudent: function (enrollments) {
       for (var i = 0; i < enrollments.length; i++) {
-        if (enrollments[i].role == 'StudentEnrollment') {
+        var isStudent = enrollments[i].role == 'StudentEnrollment';
+        var isPreviewStudent = enrollments[i].role == 'StudentViewEnrollment';
+        if (isStudent || isPreviewStudent) {
           return true;
         }
       }
@@ -170,7 +174,7 @@ export default (function () {
     enrollmentsHasRoleInCourse: function (enrollments, role) {
       for (let i = 0; i < enrollments.length; i++) {
         let enrollment = enrollments[i];
-        if (enrollment["role"] == role) {
+        if (enrollment['role'] == role) {
           return true;
         }
       }
@@ -178,31 +182,33 @@ export default (function () {
     },
     hasRoleInCourse: function (courseId, role, callback) {
       let self = this;
-      return function (callback, role) {
+      return (function (callback, role) {
         api.getUsersEnrollmentsForCourse(courseId, function (enrollments) {
           callback(self.enrollmentsHasRoleInCourse(enrollments, role));
         });
-      }(callback, role)
-    },
-    isTeacherOrAdmin: function () {
-      var roles = api.getRoles();
-      return (
-        roles != null &&
-        (roles.indexOf('teacher') != -1 || roles.indexOf('admin') != -1)
-      );
+      })(callback, role);
     },
     isAdmin: function () {
       var roles = api.getRoles();
-      return (
-        roles != null &&
-        (roles.indexOf('admin') != -1)
-      );
+      return roles != null && roles.indexOf('admin') != -1;
     },
     isObserver: function (course) {
       if (course && course.enrollments) {
         return this.isEnrolledAsObserver(course.enrollments);
       }
     },
+    isTeacher: function () {
+      var roles = api.getRoles();
+      return roles != null && roles.indexOf('teacher') != -1;
+    },
+    isTeacherOrAdmin: function () {
+      var roles = api.getRoles();
+      return (
+        roles != null &&
+        (roles.indexOf('teacher') != -1 || roles.indexOf('admin') != -1)
+      );
+    },
+
     isEnrolledWithRole(course, role) {
       if (course && course.enrollments) {
         for (var i = 0; i < course.enrollments.length; i++) {
@@ -214,23 +220,35 @@ export default (function () {
       return false;
     },
 
-    isMultilangCourse() { return this.course.kpas.multilang != "NONE" },
-    isNynorskCourse() { return this.course.kpas.multilang == "NN" },
-    isSamiskCourse() { return this.course.kpas.multilang == "SE" },
+    isMultilangCourse() {
+      return this.course.kpas.multilang != 'NONE';
+    },
+    isNynorskCourse() {
+      return this.course.kpas.multilang == 'NN';
+    },
+    isSamiskCourse() {
+      return this.course.kpas.multilang == 'SE';
+    },
     isPrincipal() {
-      return (this.isTeacherOrAdmin() || this.isEnrolledWithRole(this.course, settings.principalRoleType));
+      return (
+        this.isTeacher() ||
+        this.isEnrolledWithRole(this.course, settings.principalRoleType)
+      );
+    },
+    isRoleBasedCourse() {
+      return this.course.kpas.role_support == 1;
     },
-    isRoleBasedCourse() { return this.course.kpas.role_support == 1 },
     isMMOOCLicense() {
       return this.course.kpas.licence == 1;
     },
     postModuleProcessing() {
       try {
-        let html = '<div class="login-box" style="position: fixed">Laster diskusjonen</div>';
-        $("#wrapper").append(html);
+        let html =
+          '<div class="login-box" style="position: fixed">Laster diskusjonen</div>';
+        $('#wrapper').append(html);
         setInterval(function () {
-          console.log("postModuleProcessing intervall timer called")
-          $(".login-box").append(".");
+          console.log('postModuleProcessing intervall timer called');
+          $('.login-box').append('.');
         }, 1000);
       } catch (e) {
         console.log(e);
@@ -238,31 +256,31 @@ export default (function () {
     },
 
     getBannerType() {
-      console.log(this.course)
+      console.log(this.course);
       if (this.course && this.course.kpas && this.course.kpas.banner_type) {
         return this.course.kpas.banner_type;
       }
-      return "NONE";
+      return 'NONE';
     },
     getAlertMsg() {
       if (this.course) {
-        if (this.course.kpas.banner_type == "ALERT") {
+        if (this.course.kpas.banner_type == 'ALERT') {
           return this.course.kpas.banner_text;
         }
       }
-      return "";
+      return '';
     },
     getUnmaintainedMsg() {
       if (this.course) {
-        if (this.course.kpas.banner_type == "UNMAINTAINED") {
+        if (this.course.kpas.banner_type == 'UNMAINTAINED') {
           return this.course.kpas.banner_text;
         }
       }
-      return "";
+      return '';
     },
     getUnmaintainedSinceDate() {
       if (this.course) {
-        if (this.course.kpas.banner_type == "UNMAINTAINED") {
+        if (this.course.kpas.banner_type == 'UNMAINTAINED') {
           return this.course.kpas.unmaintained_since;
         }
       }
@@ -270,26 +288,26 @@ export default (function () {
     },
     getNotificationMsg() {
       if (this.course) {
-        if (this.course.kpas.banner_type == "NOTIFICATION") {
+        if (this.course.kpas.banner_type == 'NOTIFICATION') {
           return this.course.kpas.banner_text;
         }
       }
-      return "";
+      return '';
     },
     getFeedbackMsg() {
       if (this.course) {
-        if (this.course.kpas.banner_type == "FEEDBACK") {
+        if (this.course.kpas.banner_type == 'FEEDBACK') {
           return this.course.kpas.banner_text;
         }
       }
-      return "";
+      return '';
     },
 
     //description":"courseId:360:community:1902:940101808"
     getCountyOrCommunityNumber(groupDescription) {
-      var arr = groupDescription.split(":");
+      var arr = groupDescription.split(':');
       for (var i = 0; i < arr.length; i++) {
-        if ((arr[i] == "community") || (arr[i] == "county")) {
+        if (arr[i] == 'community' || arr[i] == 'county') {
           return parseInt(arr[i + 1], 10);
         }
       }
@@ -299,7 +317,7 @@ export default (function () {
       return window.location.href.includes('/enroll/');
     },
     isMemberOfExpiredCommunity(course, callback) {
-      let self = this
+      let self = this;
       if (!course) {
         return;
       }
@@ -308,9 +326,13 @@ export default (function () {
         if (groups.length) {
           for (var i = 0; i < groups.length; i++) {
             var group = groups[i];
-            var countyOrCommunityNumber = self.getCountyOrCommunityNumber(group.description);
+            var countyOrCommunityNumber = self.getCountyOrCommunityNumber(
+              group.description,
+            );
             if (countyOrCommunityNumber) {
-              if (fknr.utgaatteKommuneNr.indexOf(countyOrCommunityNumber) > -1) {
+              if (
+                fknr.utgaatteKommuneNr.indexOf(countyOrCommunityNumber) > -1
+              ) {
                 memberOfUtgaattKommune = true;
                 break;
               }
@@ -328,10 +350,12 @@ export default (function () {
     },
 
     getCourseUnenrollmentUuid() {
-      const unenrollmentLink = document.querySelector("#self_unenrollment_dialog a.btn-primary.action");
+      const unenrollmentLink = document.querySelector(
+        '#self_unenrollment_dialog a.btn-primary.action',
+      );
       if (!unenrollmentLink) return null;
 
-      const hrefValue = unenrollmentLink.getAttribute("href") ?? "";
+      const hrefValue = unenrollmentLink.getAttribute('href') ?? '';
       const match = hrefValue.match(/\/self_unenrollment\/([^/]+)/);
 
       const unenrollmentUuid = match ? match[1] : null;
@@ -341,10 +365,10 @@ export default (function () {
       var groupsInfo = {};
       for (var i = 0; i < groups.length; i++) {
         if (groups[i].description) {
-          var s = groups[i].description.split(":");
-          if (s[2] == "community") {
+          var s = groups[i].description.split(':');
+          if (s[2] == 'community') {
             groupsInfo.municipalityId = s[3];
-          } else if (s[2] == "county") {
+          } else if (s[2] == 'county') {
             groupsInfo.countyId = s[3];
           }
         }
@@ -387,7 +411,7 @@ export default (function () {
         'sep',
         'okt',
         'nov',
-        'des'
+        'des',
       ];
       return months[date.getMonth()];
     },
@@ -412,14 +436,14 @@ export default (function () {
     },
     sortCourses: function (courses) {
       return courses.sort(function (a, b) {
-        var aParams = a.course_code.split("::");
+        var aParams = a.course_code.split('::');
         if (aParams.length < 2) {
           return 1;
         }
 
         var aCourseCode = aParams[aParams.length - 1];
 
-        var bParams = b.course_code.split("::");
+        var bParams = b.course_code.split('::');
         if (bParams.length < 2) {
           return -1;
         }
@@ -440,7 +464,8 @@ export default (function () {
     debounce: function (func, wait, immediate) {
       var timeout;
       return function () {
-        var context = this, args = arguments;
+        var context = this,
+          args = arguments;
         var later = function () {
           timeout = null;
           if (!immediate) func.apply(context, args);
@@ -453,16 +478,14 @@ export default (function () {
     },
     filter: function (arr, fun) {
       var len = arr.length;
-      if (typeof fun != "function")
-        throw new TypeError();
+      if (typeof fun != 'function') throw new TypeError();
 
       var res = new Array();
       var thisp = arguments[1];
       for (var i = 0; i < len; i++) {
         if (i in arr) {
           var val = arr[i];
-          if (fun.call(thisp, val, i, arr))
-            res.push(val);
+          if (fun.call(thisp, val, i, arr)) res.push(val);
         }
       }
 
@@ -474,29 +497,28 @@ export default (function () {
       const hash = location.hash.substring(1);
       return JSON.parse(
         '{"' + hash.replace(/&/g, '","').replace(/=/g, '":"') + '"}',
-        (key, value) => key === "" ? value : decodeURIComponent(value)
+        (key, value) => (key === '' ? value : decodeURIComponent(value)),
       );
     },
     updateRightMenuButtons: function () {
-      $("#course_show_secondary > a").each(function () {
+      $('#course_show_secondary > a').each(function () {
         var $this = $(this);
-        var _href = $this.attr("href");
-        if (_href.includes("/calendar?")) {
+        var _href = $this.attr('href');
+        if (_href.includes('/calendar?')) {
           $this.remove();
-        }
-        else {
-          $this.attr("href", _href);
+        } else {
+          $this.attr('href', _href);
         }
       });
     },
     removeRecentFeedback: function () {
-      $(".recent_feedback").each(function () {
+      $('.recent_feedback').each(function () {
         var $this = $(this);
-        $this.remove()
+        $this.remove();
       });
     },
     getLinkToAvailableCourses: function () {
-      var linkToAvailableCourses = "/search/all_courses";
+      var linkToAvailableCourses = '/search/all_courses';
       //ETH20190409 By making sure the root account loads our design, we do not need a front page.
       /*
               if (allCoursesFrontpageCourseID > 0) {
@@ -539,7 +561,7 @@ export default (function () {
     fetchWithSwr: function (key, fetcher, callback) {
       //return stale content while data is revalidating in the background
       //clear cache if data is not valid json/corrupted
-      let storageKey = `swr_${key}`
+      let storageKey = `swr_${key}`;
       let initStorageDataIsSent = false;
       let storageData = window.localStorage.getItem(storageKey);
       if (storageData != null) {
@@ -556,10 +578,22 @@ export default (function () {
       //execute fetch data call right away if there is no cache response in storage
       if (window.document.readyState != 'complete' && initStorageDataIsSent) {
         window.addEventListener('load', () => {
-          this.swrFetcher(storageKey, fetcher, callback, storageData, initStorageDataIsSent);
+          this.swrFetcher(
+            storageKey,
+            fetcher,
+            callback,
+            storageData,
+            initStorageDataIsSent,
+          );
         });
       } else {
-        this.swrFetcher(storageKey, fetcher, callback, storageData, initStorageDataIsSent);
+        this.swrFetcher(
+          storageKey,
+          fetcher,
+          callback,
+          storageData,
+          initStorageDataIsSent,
+        );
       }
     },
     swrFetcher: function (key, fetcher, callback, stringData, init) {
@@ -572,6 +606,6 @@ export default (function () {
           window.localStorage.setItem(key, newStorageDataString);
         }
       });
-    }
+    },
   };
 })();
diff --git a/src/vue/components/Banner.vue b/src/vue/components/Banner.vue
index 2fedcc95..230153fb 100644
--- a/src/vue/components/Banner.vue
+++ b/src/vue/components/Banner.vue
@@ -40,6 +40,8 @@ const server= SERVER
   img {
     width: webkit-fill-available;
     height: webkit-fill-available;
+    width: moz-available;
+    height: moz-available;
     flex-grow: 0;
     object-fit: contain;
   }
diff --git a/src/vue/components/Button.vue b/src/vue/components/Button.vue
index 1458dd41..68fa7ecd 100644
--- a/src/vue/components/Button.vue
+++ b/src/vue/components/Button.vue
@@ -119,6 +119,6 @@ const isFullWidth = props.fullWidth;
   width: 1em;
   height: 1em;
   margin-right: 0.5em;
-  margin-top: -0.5em;
+  margin-top: -0.1em;
 }
 </style>
diff --git a/src/vue/components/CardFilter.vue b/src/vue/components/CardFilter.vue
index d6708d4b..20869572 100644
--- a/src/vue/components/CardFilter.vue
+++ b/src/vue/components/CardFilter.vue
@@ -132,14 +132,14 @@ const clearFilters = () => {
 
 /* Style the checkmark/indicator */
 .checkbox-label .checkmark:after {
-  left: 0.5rem;
-  top: 0.125rem;
+  left: 0.43rem;
   width: 0.5rem;
   height: 1rem;
   border: solid white;
-  border-width: 0 0.25rem 0.25rem 0;
-  -webkit-transform: rotate(45deg);
-  -ms-transform: rotate(45deg);
-  transform: rotate(45deg);
+  border-radius: 0rem 0.1rem 0rem 0.1rem;
+  border-width: 0 0.2rem 0.2rem 0;
+  -webkit-transform: rotate(40deg);
+  -ms-transform: rotate(40deg);
+  transform: rotate(40deg);
 }
 </style>
diff --git a/src/vue/components/CardList.vue b/src/vue/components/CardList.vue
index 2bdc083d..93bb5e64 100644
--- a/src/vue/components/CardList.vue
+++ b/src/vue/components/CardList.vue
@@ -4,7 +4,7 @@
     <div class="card-instance card-container-wrapper" v-for="course in courses" :key="course.id">
       <Card class="card-item"
         :theme="course.course_settings ? course.course_settings?.course_category?.category.color_code : 'theme_0'"
-        :courseIllustration="course.course_settings ? course.course_settings?.image.path : ''"
+        :courseIllustration="thumbnail(course)"
         :label="course.name"
         :filters="course.course_settings ? course.course_settings.course_filter : []"
         :requirementsCompleted="course?.course_progress?.requirement_completed_count ?? 0"
@@ -51,7 +51,7 @@
           <div class="course-illustration-box" :class="course.course_settings ? course.course_settings?.course_category?.category.color_code : 'theme_0'">
             <img
               class="course-illustration-box-image"
-              :src="course.course_settings ? course.course_settings?.image.path : ''"
+              :src="thumbnail(course)"
               alt=""
             />
           </div>
@@ -117,6 +117,10 @@ export default {
     console.log(this.courses)
   },
   methods: {
+    thumbnail(course) {
+      if (course.image_download_url != null) return course.image_download_url;
+      return course.course_settings ? course.course_settings?.image.path : '';
+    },
     isInvitedCourse,
     enrollToCourse(enrollCode) {
       window.location.href = this.domain + '/enroll/' + enrollCode;
diff --git a/src/vue/components/NotLoggedInIntro.vue b/src/vue/components/NotLoggedInIntro.vue
index 8cea982d..8fddadde 100644
--- a/src/vue/components/NotLoggedInIntro.vue
+++ b/src/vue/components/NotLoggedInIntro.vue
@@ -12,7 +12,7 @@
 
       <CardHighlighted class="card-highlighted"
         :theme="newestCourse.course_settings ? newestCourse.course_settings?.course_category?.category.color_code : 'theme_0'"
-        :courseIllustration="newestCourse.course_settings ? newestCourse.course_settings?.image.path : ''"
+        :courseIllustration="thumbnail"
         :label="newestCourse.name"
         :filters="newestCourse.course_settings ? newestCourse.course_settings.course_filter : []"
       >
@@ -35,7 +35,7 @@
           <div class="course-illustration-box" :class="newestCourse.course_settings ? newestCourse.course_settings?.course_category?.category.color_code : 'theme_0'">
             <img
               class="course-illustration-box-image"
-              :src="newestCourse.course_settings ? newestCourse.course_settings?.image.path : ''"
+              :src="thumbnail"
               alt=""
             />
           </div>
@@ -92,6 +92,12 @@ export default {
       domain: window.location.origin,
     }
   },
+  computed: {
+    thumbnail() {
+      if (this.newestCourse?.image_download_url != null) return this.newestCourse.image_download_url;
+      return this.newestCourse.course_settings ? this.newestCourse.course_settings?.image.path : '';
+    },
+  },
   methods: {
     enrollToCourse(enrollCode) {
       window.location.href = this.domain + '/enroll/' + enrollCode;
diff --git a/src/vue/components/header/NavBar.vue b/src/vue/components/header/NavBar.vue
index 21f9f7e0..e830c40d 100644
--- a/src/vue/components/header/NavBar.vue
+++ b/src/vue/components/header/NavBar.vue
@@ -25,6 +25,7 @@ const {logged_in, admin, mainContentId} = defineProps(['logged_in', 'admin', 'ma
 
 .nav-bar-container {
   width: 100%;
+  z-index: 3;
 }
 .logged_out {
   display: none;
@@ -43,6 +44,8 @@ const {logged_in, admin, mainContentId} = defineProps(['logged_in', 'admin', 'ma
   left: 50%;
   position: absolute;
   transform: translateY(-100%);
+  opacity: 0;
+  cursor: default;
 }
 }
 
diff --git a/src/vue/components/login-choice/LoginDirectLink.vue b/src/vue/components/login-choice/LoginDirectLink.vue
index f5f34bbf..b5e36a5b 100644
--- a/src/vue/components/login-choice/LoginDirectLink.vue
+++ b/src/vue/components/login-choice/LoginDirectLink.vue
@@ -64,8 +64,9 @@ export default {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    width: 60rem;
     height: 30rem;
+    max-width: 60rem;
+    width: 100%;
     background-color: white;
     border: 1px solid #e0e0e0;
     border-radius: 0.5rem;
@@ -99,5 +100,24 @@ export default {
 .login-logo {
     height: 6rem;
     cursor: pointer;
+    @media screen and (max-width: 768px) {
+        height: 6vh;
+    }
+
+}
+
+.login-header-title {
+    font-size: 2,25rem;
+    line-height: unset;
+    @media screen and (max-width: 768px) {
+        font-size: 4vw;
+    }
+}
+
+.login-header-description {
+    font-size: 1.5rem;
+    @media screen and (max-width: 768px) {
+        font-size: 3vw;
+    }
 }
 </style>
diff --git a/src/vue/design/override-base-Canvas-elements.scss b/src/vue/design/override-base-Canvas-elements.scss
index af7dc0d4..457c2910 100644
--- a/src/vue/design/override-base-Canvas-elements.scss
+++ b/src/vue/design/override-base-Canvas-elements.scss
@@ -1,6 +1,12 @@
 @import "./colors.scss";
 @import "./override-login-logout-Canvas-elements";
 
+
+// Uncomment this to see the positioning and size of all elements
+/* * {
+  outline: .0625rem solid darkslategrey !important;
+}  */
+
 .ic-app-course-menu {
   width: fit-content !important;
   position: relative !important;
@@ -14,6 +20,75 @@
 
 }
 
+.ef-quota-usage {
+  min-width: unset !important;
+  justify-content: center !important;
+} 
+.ef-main {
+  border: 1px solid rgb(199, 205, 209);
+}
+.ef-header {
+  border-bottom: unset !important;
+}
+
+.ef-footer {
+  border-top: unset !important;
+}
+
+.ef-actions {
+  max-width: -webkit-fill-available !important;
+}
+
+.ef-search-form {
+  .Button {
+    max-height: 38px;
+  }
+}
+.ef-select-col {
+  display:none;
+}
+.ef-links-col {
+  .al-trigger {
+    opacity: 1 !important;
+  }
+  button {
+    padding: 8px !important;
+  }
+  .hiddenState, .unpublished, .published {
+    margin-right: 8px;
+  }
+}
+
+#content > div > div.ef-footer.grid-row {
+  margin-left: unset !important;
+  margin-right: unset !important;
+}
+
+#content > div > div.ef-footer {
+  padding: unset !important;
+  .grid-row {
+    margin: unset !important;
+  }
+}
+
+#content > div > div.ef-footer.grid-row > .col-xs-6 {
+  flex-basis: unset !important;
+  width: 100% !important;
+  max-width: unset !important;
+  padding: unset !important;
+  
+  .col-xs-3 {
+    flex-basis: unset !important;
+    max-width: 70%;
+    width: 100%;
+  }
+  .col-xs-9 {
+    flex-basis: unset !important;
+    max-width: unset;
+
+  }
+}
+
 body.with-left-side:not(.useFullWidth) {
   #application.ic-app {
     #main {
@@ -82,8 +157,7 @@ body.with-left-side:not(.useFullWidth) {
 #application.ic-app {
   margin-left: unset !important;
   margin-right: unset !important;
-  justify-content: center !important;
-
+  justify-content: space-between !important;
   display: flex !important;
   flex-direction: column !important;
 
@@ -94,13 +168,84 @@ body.with-left-side:not(.useFullWidth) {
 
 .ic-app-main-content {
   margin-top: 1rem !important;
-  width: fit-content !important;
   min-height: 85vh !important;
-  max-width: 100rem !important;
   justify-content: center;
   box-sizing: border-box !important;
 }
 
+#access_tokens_holder {
+  overflow-x: auto !important;
+}
+
+#not_right_side {
+  #content {
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: center !important;
+    #qr_login_container {
+      max-width: fit-content !important;
+      align-self: center !important;
+    }
+    .css-1rcgr3a-view--flex-flex, .css-mum2ig-text {
+      align-self: center !important;
+    }
+    .css-1fnhbjn-view-flexItem {
+      max-width: 85%;
+    }
+    .css-pljkwv-view-heading {
+      font-size: 1.7rem;
+    }
+    .css-mum2ig-text {
+      font-size: 16px;
+    }
+    .button-area-block {
+      width: unset !important;
+      flex-direction: unset !important;
+      margin-top: 9px;
+    }
+    p:nth-child(8) {
+      display: flex;
+      gap: 1rem;
+    }
+    // Instillinger -> Funksjonsvalg 
+    .css-10d73cs-view--flex-flex {
+      flex-direction: column !important;
+      max-width: 450px;
+    }
+    .css-183j57y-formFieldLayout {
+      flex-direction: column !important;
+      width: 100% !important;
+    }
+    .css-dz0svk-view-flexItem, .css-10inoki-formFieldLayout {
+      width: 100% !important;
+    }
+    .css-1iimhyf-view--inlineBlock-baseButton {
+      width: 100% !important;
+    }
+    //Instillinger -> Table
+    .profile_table {
+      border-collapse: separate;
+      border-spacing: 0 12px;
+      th {
+        display: flex;
+        text-align: left;
+        label {
+          font-weight: bold;
+          position: relative;
+
+        }
+      }
+      td {
+        line-height: 18px;
+        .edit_or_show_data {
+          font-style: italic !important;
+          color: #949292;
+        }
+      }
+    }
+  }
+}
+
 .useFullWidth{
   min-width: unset !important;
 }
@@ -119,7 +264,6 @@ body.with-left-side:not(.useFullWidth) {
     min-width: unset !important;
   }
 }
-
 .ic-Layout-columns {
   width: 100% !important;
   display: flex !important;
diff --git a/src/vue/design/override-mobile.scss b/src/vue/design/override-mobile.scss
index fece2433..895b660f 100644
--- a/src/vue/design/override-mobile.scss
+++ b/src/vue/design/override-mobile.scss
@@ -1,9 +1,3 @@
-
-// Uncomment this to see the positioning and size of all elements
-/*  * {
-   outline: .0625rem solid darkslategrey !important;
-}  */
-
 // Styles for desktop devices related to mobile
 @media (min-width: 30rem) {
   .desktop-hide {
@@ -276,6 +270,12 @@
       font-weight: 600;
     }
   }
+  .uob-box {
+    flex-direction: column !important;
+    p {
+      display: block !important;
+    }
+  }
 
   // Modal
   .backdrop {
@@ -332,15 +332,13 @@
     }
   }
   .custom-reveal-wrapper {
-    p {
-      display: flex;
+    td {
+      width: unset !important;
     }
     a {
-      width: 100%;
-      justify-content: space-evenly;
+      justify-content: space-between;
     }
     .custom-reveal-content {
-      display: flex !important;
       width: 80vw;
       overflow-wrap: anywhere;
   }
@@ -350,4 +348,4 @@
       gap: 16px !important;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/vue/design/re-styles/tooltip.scss b/src/vue/design/re-styles/tooltip.scss
index 526c850a..47ed7bda 100644
--- a/src/vue/design/re-styles/tooltip.scss
+++ b/src/vue/design/re-styles/tooltip.scss
@@ -5,6 +5,12 @@
     display: inline-flex;
 }
 
+.tooltip:focus-visible {
+    outline: 3px solid dimgray;
+    .tooltiptext-box {
+        display: inline !important;
+    }
+}
 
 .tooltip-underline {
     border-bottom: 0.5px dashed #00468E;
diff --git a/src/vue/design/reveal.scss b/src/vue/design/reveal.scss
index 6dda3120..cc731a7d 100644
--- a/src/vue/design/reveal.scss
+++ b/src/vue/design/reveal.scss
@@ -20,6 +20,7 @@
     align-items: center;
     justify-content: space-between;
     width: -webkit-fill-available;
+    width: -moz-available;
     padding: 0.5rem;
     border: solid 2px $color-black;
     font-family: Roboto;
diff --git a/tests/utils/shared.js b/tests/utils/shared.js
index a098853d..064b25c3 100644
--- a/tests/utils/shared.js
+++ b/tests/utils/shared.js
@@ -12,9 +12,13 @@ export const useDesktopViewport = () => {
 };
 
 export const getEnv = () => {
-  const env = process.env.APP_ENV;
+  let env = process.env.APP_ENV;
   expect(env).toBeDefined();
 
+  const validEnvironments = ['stage', 'production'];
+  if (env === 'development') env = 'stage';
+  expect(validEnvironments).toContain(env);
+
   return env;
 };
 
diff --git a/webpack.config.js b/webpack.config.js
index 6bb3cab7..70594efe 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -26,7 +26,7 @@ module.exports = (env) => {
         './src/js/settingsRoot.js',
         './src/js/account-theme.js',
       ],
-      'kompetanseportal-udirdesign': [
+      'kompetanseportalen-udirdesign': [
         './src/js/3party/matomo.js',
         './src/js/main.js',
       ],
@@ -43,8 +43,8 @@ module.exports = (env) => {
       }),
       new webpack.DefinePlugin({
         VUECSS: JSON.stringify('index.css'),
-        DESIGNCSS: JSON.stringify('kompetanseportal-udirdesign.css'),
-        DESIGNJS: JSON.stringify('kompetanseportal-udirdesign.js'),
+        DESIGNCSS: JSON.stringify('kompetanseportalen-udirdesign.css'),
+        DESIGNJS: JSON.stringify('kompetanseportalen-udirdesign.js'),
         SERVER: JSON.stringify(cdnBaseUrl),
         KPASAPIURL: JSON.stringify(apiBaseUrl),
         ACCOUNTID: [99, 100, 102, 103, 137, 138, 139, 145],