diff --git a/dev.Dockerfile b/dev.Dockerfile
index 3b238d2c..6e320c46 100644
--- a/dev.Dockerfile
+++ b/dev.Dockerfile
@@ -44,7 +44,7 @@ RUN docker-php-ext-install zip gd mysqli pdo pdo_mysql
 WORKDIR /var/www/html
 
 # Set dev env variables
-ENV CANVAS_HOST=http://localhost
+ENV CANVAS_HOST=https://*.instructure.com
 
 # Add application
 COPY --from=nodeBuild --chown=www-data /var/www/html /var/www/html
diff --git a/resources/js/components/Box.vue b/resources/js/components/Box.vue
new file mode 100644
index 00000000..95a8dc48
--- /dev/null
+++ b/resources/js/components/Box.vue
@@ -0,0 +1,48 @@
+<template>
+  <div :class="['box', `box--${type}`]">
+    <div class="box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Box',
+  props: {
+    type: {
+      type: String,
+      default: 'grey',
+      validator: (value) => ['grey', 'green', 'red'].includes(value),
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.box {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  &--grey {
+    background-color: #E3F2EB;
+    border-top-left-radius: 0.5rem;
+    border-top-right-radius: 0.5rem;
+  }
+
+  &--green {
+    background-color: #E3F2EB;
+  }
+
+  &--red {
+    background-color: #ffebee;
+  }
+
+  .box-content {
+    width: 100%;
+    max-width: 960px; // Adjust the maximum width according to your design
+    padding: 1.25rem; // Adjust the padding according to your design
+  }
+}
+</style>
diff --git a/resources/js/components/CourseSettingsCategoryCreate.vue b/resources/js/components/CourseSettingsCategoryCreate.vue
index 21363948..379c5fb6 100644
--- a/resources/js/components/CourseSettingsCategoryCreate.vue
+++ b/resources/js/components/CourseSettingsCategoryCreate.vue
@@ -6,15 +6,19 @@
     <p>Kategoritema: <input type="text" v-model="category_color"/> (Kategoritema theme_*number* må finnes som tema i frontend)</p>
 
     <button @click="createCategory">Opprett kategori</button>
-    <div v-if="responseCode == 200" class='alert alert-success kpasAlert'>Oppdateringen var vellykket!</div>
-    <div v-if="error" class='alert alert-danger kpasAlert'>{{ error }}</div>
+    <Message type="success" v-if="responseCode == 200" class='alert alert-success kpasAlert'>Oppdateringen var vellykket!</Message>
+    <Message type="error" v-if="error" class='alert alert-danger kpasAlert'>{{ error }}</Message>
 </template>
 
 <script>
 import api from '../api';
+import Message from './Message.vue';
 
 export default{
     name: "CourseSettingsCategoryCreate",
+    components: {
+      Message
+    },
     data() {
         return {
             category_name: '',
diff --git a/resources/js/components/CourseSettingsFilterCreate.vue b/resources/js/components/CourseSettingsFilterCreate.vue
index f46aca7f..9d50dc8e 100644
--- a/resources/js/components/CourseSettingsFilterCreate.vue
+++ b/resources/js/components/CourseSettingsFilterCreate.vue
@@ -11,17 +11,21 @@
         ></v-select>
     </section>
     <button @click="createFilter">Opprett filter</button>
-    <div v-if="responseCode == 200" class='alert alert-success kpasAlert'>Oppdateringen var vellykket!</div>
-    <div v-if="error" class='alert alert-danger kpasAlert'>{{ error }}</div>
+    <Message type="success" v-if="responseCode == 200" class='alert alert-success kpasAlert'>Oppdateringen var vellykket!</Message>
+    <Message type="error" v-if="error">{{ error }}</Message>
 
 
 </template>
 
 <script>
 import api from '../api';
+import Message from './Message.vue';
 
 export default{
     name: "CourseSettingsFilterCreate",
+    components: {
+      Message
+    },
     props: {
         filterTypes: []
     },
diff --git a/resources/js/components/CurrentGroup.vue b/resources/js/components/CurrentGroup.vue
deleted file mode 100644
index 3aac652e..00000000
--- a/resources/js/components/CurrentGroup.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
-
-    <ul class="list-group mt-3 mb-3" v-if="groupsLoaded && sorted.length">
-        <li
-          class="list-group-item"
-          v-for="group in sorted"
-        >
-          {{ group.category }} : {{group.name}}
-        </li>
-        <div></div>
-    </ul>
-    <div v-else-if="groupsLoaded && !sorted.length"
-        class="alert alert-warning">Du er ikke med i noen grupper. <p>For å være med i gruppediskusjoner må du velge din tilhørighet lenger ned på denne siden.</p>
-    </div>
-    <p v-else>
-      Laster inn dine grupper...
-    </p>
-
-</template>
-
-<script>
-
-  export default {
-    name: "CurrentGroup",
-
-    props: {
-      groups: Object,
-      groupsLoaded: Boolean
-    },
-    data() {
-      return {
-        sorted: []
-      }
-    },
-    methods: {
-      groupsSort() {
-        let sortedGroups = []
-        if(this.groups["Fylke"]) { sortedGroups.push({...this.groups["Fylke"], ...{"category" : "Fylke"}}) };
-        if(this.groups["Kommune"]) { sortedGroups.push({...this.groups["Kommune"], ...{"category" : "Kommune"}}) };
-        if(this.groups["Skole"]) { sortedGroups.push({...this.groups["Skole"], ...{"category" : "Skole"}}) };
-        if(this.groups["Barnehage"]) { sortedGroups.push({...this.groups["Barnehage"], ...{"category" : "Barnehage"}}) };
-        if(this.groups["Leder/eier (fylke)"]) { sortedGroups.push({...this.groups["Leder/eier (fylke)"], ...{"category" : "Leder/eier (fylke)"}}) };
-        if(this.groups["Leder/eier (kommune)"]) { sortedGroups.push({...this.groups["Leder/eier (kommune)"], ...{"category" : "Leder/eier (kommune)"}}) };
-        if(this.groups["Faggruppe nasjonalt"]) { sortedGroups.push({...this.groups["Faggruppe nasjonalt"], ...{"category" : "Faggruppe nasjonalt"}}) };
-        if(this.groups["Faggruppe fylke"]) { sortedGroups.push({...this.groups["Faggruppe fylke"], ...{"category" : "Faggruppe fylke"}}) };
-        if(this.groups["Faggruppe kommune"]) { sortedGroups.push({...this.groups["Faggruppe kommune"], ...{"category" : "Faggruppe kommune"}}) };
-        this.sorted = sortedGroups
-
-      }
-
-    },
-    watch: {
-      groups() {
-        this.groupsSort()
-      }
-    },
-    mounted() {
-      this.groupsSort()
-    }
-  }
-</script>
diff --git a/resources/js/components/CurrentRole.vue b/resources/js/components/CurrentRole.vue
deleted file mode 100644
index bbc818ca..00000000
--- a/resources/js/components/CurrentRole.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div>
-      <span v-html="information"></span>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "CurrentRole",
-  props: {
-      isPrincipal: Boolean,
-      information: String
-  }
-}
-</script>
diff --git a/resources/js/components/DashboardGroupSelect.vue b/resources/js/components/DashboardGroupSelect.vue
index 805badbe..66acdf4b 100644
--- a/resources/js/components/DashboardGroupSelect.vue
+++ b/resources/js/components/DashboardGroupSelect.vue
@@ -109,8 +109,7 @@
 			</v-select>
 		</label>
 	</section>
-
-	<div v-if="isError" class='alert alert-danger kpasAlert'> {{error}} </div>
+<Message type="error" v-if="isError">{{error}}</Message>
 
 </template>
 
@@ -118,9 +117,13 @@
 import api from '../api';
 import 'floating-vue/dist/style.css';
 import "vue-select/dist/vue-select.css";
+import Message from './Message.vue';
 
 export default {
 	name: "DashboardGroupSelect",
+	components: {
+      Message
+    },
 	props: {
 		settings: Object,
 		categories: Array,
diff --git a/resources/js/components/FacultySelector.vue b/resources/js/components/FacultySelector.vue
index 3d722862..52edebf8 100644
--- a/resources/js/components/FacultySelector.vue
+++ b/resources/js/components/FacultySelector.vue
@@ -1,9 +1,10 @@
 <template>
-  <div v-bind:style=" chosenFaculty || !faculties.length ? 'border: none;' : 'padding: 10px; border: 1px solid red;' ">
-    <div
+  <div class="faculty-selector" v-bind:style=" chosenFaculty || !faculties.length ? 'border: none;' : 'padding: 10px; border: 1px solid red;' ">
+    <div class="faculty-item"
       v-for="faculty in faculties"
       :key="faculty"
     >
+    <Message type="default">
       <label>
         <input
           name="faculty"
@@ -11,21 +12,30 @@
           :value="faculty"
 
           v-model="chosenFaculty"
-          @input="this.$emit('update:modelValue', faculty)" 
+          @input="this.$emit('update:modelValue', faculty)"
         />
         {{ faculty }}
       </label>
+    </Message>
     </div>
   </div>
 </template>
 
 <script>
+import Message from './Message.vue';
   export default {
     name: "FacultySelector",
-
+    components: {
+      Message
+    },
     props: {
       faculties: { type: Array, default: () => [] },
-      modelValue: String
+      modelValue: String,
+      currentFaculty: String
+    },
+    created() {
+      console.log("current Faculty: ", this.currentFaculty);
+      this.chosenFaculty = this.faculties.find(faculty => faculty === this.currentFaculty);
     },
 
     data() {
@@ -41,3 +51,35 @@
     }
   }
 </script>
+
+<style scoped>
+  .message {
+    padding: 0;
+    margin: 5px;
+    width: 100%;
+  }
+  label {
+    margin: 0;
+    display: inline-block;
+    width: 100%;
+  }
+  .faculty-selector {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+  .faculty-item {
+    width: 50%;
+    box-sizing: border-box;
+    padding: 5px;
+  }
+  @media only screen and (max-width: 900px) {
+    .faculty-item {
+      width: 100%;
+    }
+    .faculty-selector {
+      flex-direction: column;
+    }
+  }
+
+</style>
\ No newline at end of file
diff --git a/resources/js/components/GroupSelector.vue b/resources/js/components/GroupSelector.vue
index 42acb377..9b3ec0cd 100644
--- a/resources/js/components/GroupSelector.vue
+++ b/resources/js/components/GroupSelector.vue
@@ -1,22 +1,24 @@
 <template>
   <div>
-    <div v-bind:style=" chosenCounty && chosenCommunity && (chosenInstitution || !institutionType)? 'border: none;' : 'padding: 10px; border: 1px solid red;' " >
-
-      <span v-if="institutionType === 'school'" v-tooltip.top-center="`
-      Listene viser alle fylker, kommuner og organisasjoner i Nasjonalt skoleregister.`">&#9432;</span>
-      <span v-else-if="institutionType === 'kindergarten'" v-tooltip.top-center="`
-      Listene viser alle fylker, kommuner og organisasjoner i Nasjonalt barnehageregister.
-      `">&#9432;</span>
-
+      <span v-if="institutionType === 'school'">
+        Listene viser alle fylker, kommuner og organisasjoner i Nasjonalt skoleregister.
+      </span>
+      <span v-if="institutionType === 'kindergarten'">
+        Listene viser alle fylker, kommuner og organisasjoner i Nasjonalt barnehageregister.
+      </span>
 
+      <Message type="error" v-if="hasFormError">
+        Feltene er obligatoriske, vennligst velg en på alle feltene.
+      </Message>
       <label class="select-county col-sm">Fylke:<br/>
         <v-select
           v-model="chosenCounty"
           :options="counties"
           label="Navn"
-          placeholder="--- Fylke ---"
+          :placeholder="placeholderCounty"
           :close-on-select="true"
-          :clearable="true">
+          @blur="validateOnBlur(chosenCounty)"
+          :clearable="false">
         </v-select>
       </label>
       <label class="select-community col-sm">
@@ -26,9 +28,10 @@
           :disabled="!communities.length"
           :options="communities"
           label="Navn"
-          placeholder="--- Kommune ---"
+          :placeholder="placeholderCommunity"
           :close-on-select="true"
-          :clearable="true"
+          :clearable="false"
+           @blur="validateOnBlur(chosenCommunity)"
           :reset-on-options-change="true">
         </v-select>
       </label>
@@ -39,9 +42,10 @@
           :disabled="!schools.length"
           :options="schools"
           label="FulltNavn"
-          placeholder="--- Skole ---"
+          :placeholder="placeholderSchool"
           :close-on-select="true"
-          :clearable="true"
+          :clearable="false"
+           @blur="validateOnBlur(chosenInstitution)"
           :reset-on-options-change="true">
         </v-select>
       </label>
@@ -52,29 +56,35 @@
           :disabled="!kindergartens.length"
           :options="kindergartens"
           label="FulltNavn"
-          placeholder="--- Barnehage ---"
+          :placeholder="placeholderKindergarten"
           :close-on-select="true"
-          :clearable="true"
+          :clearable="false"
+           @blur="validateOnBlur(chosenInstitution)"
           :reset-on-options-change="true">
         </v-select>
       </label>
     </div>
-    <div v-if="error"
-         class="alert alert-danger">{{error}}
-    </div>
-  </div>
+
+    <Message type="error" v-if="error">
+      {{error}}
+    </Message>
 </template>
 
 <script>
   import api from '../api';
   import 'floating-vue/dist/style.css';
   import "vue-select/dist/vue-select.css";
+  import Message from './Message.vue';
 
   export default {
-    name: "GroupSelector",
+  name: "GroupSelector",
+    components: {
+      Message
+    },
     props: {
       courseId: Number,
-      institutionType: String
+      institutionType: String,
+      currentGroups: Object
     },
 
     data() {
@@ -89,12 +99,18 @@
         chosenCommunity: null,
         chosenInstitution: null,
         error: '',
+        hasFormError: false,
+        placeholderSchool: this.currentGroups['Skole'] ? this.currentGroups['Skole'].name : 'Skole',
+        placeholderKindergarten: this.currentGroups['Barnehage'] ? this.currentGroups['Barnehage'].name : 'Barnehage',
+        placeholderCommunity: this.currentGroups['Kommune'] ? this.currentGroups['Kommune'].name : 'Kommune',
+        placeholderCounty: this.currentGroups['Fylke'] ? this.currentGroups['Fylke'].name : 'Fylke',
       }
     },
 
     methods: {
       clearError() {
         this.error = "";
+        this.hasFormError = false;
       },
       reportError(e) {
         this.error = e + " Prøv igjen senere og ta kontakt med kompetansesupport@udir.no dersom feilen vedvarer.";
@@ -147,6 +163,11 @@
           orgNr: `${this.chosenCounty.OrgNr}`,
         };
       },
+      validateOnBlur(formValue) {
+        if (formValue === null || formValue.length < 1) {
+        this.hasFormError=true
+      }
+    },
       getCommunityGroup() {
         return {
           name: `${this.chosenCommunity.Navn}`,
@@ -174,6 +195,7 @@
 
     async created() {
       await this.getCounties();
+      console.log(this.currentGroups)
     },
     updated() {
       this.$emit('update');
@@ -192,6 +214,10 @@
         this.assignToGroups();
 
         await this.getCommunities(county.Fylkesnr);
+        this.placeholderCommunity = 'Kommune';
+        this.placeholderSchool = 'Skole';
+        this.placeholderKindergarten = 'Barnehage';
+
       },
       async chosenCommunity(community) {
         delete this.selectedgroups.institution;
diff --git a/resources/js/components/MergeUserConflicts.vue b/resources/js/components/MergeUserConflicts.vue
index ced94ac2..15e81889 100644
--- a/resources/js/components/MergeUserConflicts.vue
+++ b/resources/js/components/MergeUserConflicts.vue
@@ -1,25 +1,31 @@
 <template>
-
+  <Message type="error" v-if="conflictsLoaded && Object.keys(conflicts).length">
     <ul class="list-group mt-3 mb-3" v-if="conflictsLoaded && Object.keys(conflicts).length">
-        <li
-          class="list-group-item"
-          v-for="conflict in conflicts"
-        >
-            <strong>{{ conflict.courseName }}</strong>
-        </li>
-      <div></div>
-    </ul>
-    <div v-else-if="conflictsLoaded && !Object.keys(conflicts).length"
-        class="alert alert-info">Ingen konflikter funnet.
-    </div>
+      <li
+      class="list-group-item"
+      v-for="conflict in conflicts"
+      >
+      <strong>{{ conflict.courseName }}</strong>
+    </li>
+  </ul>
+</Message >
+
+<Message  v-else-if="conflictsLoaded && !Object.keys(conflicts).length" type="info">
+  Ingen konflikter funnet.
+</Message>
 </template>
 
 <script>
-  export default {
-    name: "MergeUserConflicts",
-    props: {
-      conflicts: Array,
-      conflictsLoaded: Boolean
-    },
-  }
+import Message from './Message.vue';
+export default {
+  name: "MergeUserConflicts",
+
+  components: {
+    Message
+  },
+  props: {
+    conflicts: Array,
+    conflictsLoaded: Boolean
+  },
+}
 </script>
diff --git a/resources/js/components/Message.vue b/resources/js/components/Message.vue
new file mode 100644
index 00000000..49832b41
--- /dev/null
+++ b/resources/js/components/Message.vue
@@ -0,0 +1,52 @@
+<template>
+  <div :class="['message', `message--${type}`]">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'default',
+      validator: (value) => ['default', 'error', 'success', 'info', 'warn'].includes(value),
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.message {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 15px;
+  // margin-bottom: 15px;
+  margin: 15px 0 15px 0;
+  border-radius: 0.5rem;
+
+  &--default {
+    background-color: #f1f1f1;
+    // border: 2px solid #999999;
+  }
+
+  &--error {
+    background-color: #ffebee;
+    // border: 2px solid #c62828;
+  }
+
+  &--success {
+    background-color: #E3F2EB;
+    // border: 2px solid #254b38;
+  }
+  &--info{
+    background-color: #f5f7f9;
+    // border: 2px solid #2e3c51;
+  }
+  &--warn{
+    background-color:#fff3e0;
+    // border:2px solid #EF6C00;
+  }
+}
+</style>
diff --git a/resources/js/components/RoleSelector.vue b/resources/js/components/RoleSelector.vue
index e03e5633..de5ab05b 100644
--- a/resources/js/components/RoleSelector.vue
+++ b/resources/js/components/RoleSelector.vue
@@ -1,19 +1,30 @@
 <template>
   <div>
-      <input type="radio" id="radioSkoleleder" name="role" :value=true v-model="wantToBePrincipal" @input="$emit('update:modelValue', true)">
-      <label for="radioSkoleleder">{{leaderDescription}}</label>
-      <br>
-      <input type="radio" id="deltager" name="role" :value=false v-model="wantToBePrincipal" @input="$emit('update:modelValue', false)">
-      <label for="deltager">{{participantDescription}}</label>
-    <div v-if="wantToBePrincipal && institutionType" class="alert alert-info">{{principalWarning}}
-    </div>
+    <Message type="default">
+      <span>
+        <input type="radio" id="radioSkoleleder" name="role" :value=true v-model="wantToBePrincipal" @input="$emit('update:modelValue', true)">
+        <label for="radioSkoleleder" class="role-label">{{leaderDescription}}</label>
+      </span>
+      <p>Velg denne rollen dersom du skal ha tilgang til prossesstøtte for gjennomføring av kompetansepakken.</p>
+    </Message>
+    <Message type="default">
+      <span>
+        <input type="radio" id="deltager" name="role" :value=false v-model="wantToBePrincipal" @input="$emit('update:modelValue', false)">
+        <label for="deltager" class="role-label ">{{participantDescription}}</label>
+      </span>
+      <p>Velg denne rollen dersom du skal gjennomføre en kompetansepakke.</p>
+    </Message>
 
     </div>
 </template>
 
 <script lang="js">
+import Message from './Message.vue';
   export default {
-    name: "RoleSelector",
+  name: "RoleSelector",
+  components: {
+      Message
+    },
     props: {
         isPrincipal: Boolean,
         institutionType: String,
@@ -49,3 +60,9 @@
     }
   }
 </script>
+<style scoped>
+  .role-label {
+    font-weight: bold;
+    font-size: 18px;
+  }
+</style>
\ No newline at end of file
diff --git a/resources/js/views/GroupEnrollView.vue b/resources/js/views/GroupEnrollView.vue
index 6f4b9e6d..5fbb699e 100644
--- a/resources/js/views/GroupEnrollView.vue
+++ b/resources/js/views/GroupEnrollView.vue
@@ -1,32 +1,7 @@
 <template>
-  <div v-if="everythingIsReady">
-      <h2>Din rolle</h2>
-      <current-role
-        :isPrincipal="isPrincipal"
-        :institutionType="institutionType"
-        :information="information"
-      ></current-role>
-      <div v-if="roleError"
-        class="alert alert-danger">{{roleError}}
-      </div>
-      <hr/>
-      <h2>Dine grupper</h2>
-      <div v-if="preKommunereform2024">
-        <div style="font-size: 14px;" class="alert alert-danger">
-          Per 01.01.2024 ble <a style="font-size: 14px;" href="https://www.regjeringen.no/no/tema/kommuner-og-regioner/kommunestruktur/nye-kommune-og-fylkesnummer-fra-1.-januar-2024/id2924701/" target="_blank">Kommunereformen 2024</a> innført. Dersom du jobber i ett fylke eller kommune som er berørt av kommunereformen 2024 må du velge nye grupper. Du finner oppdaterte kommuner i gruppevalget nedenfor.
-          Merk: Vestfold og Telemark, Viken og Troms og Finnmark er ikke gyldige valg lengre, disse er fjernet fra listen.
-          Når du bytter gruppe blir historikken din flyttet til ny gruppe.
-        </div>
-      </div>
-      <current-group
-        :groups="currentGroups"
-        :groupsLoaded="currentGroupsLoaded"
-      ></current-group>
-      <div v-if="groupError"
-        class="alert alert-danger">{{groupError}}
-      </div>
-      <hr/>
+  <div class="group-tool" v-if="everythingIsReady">
       <h2>Velg rolle</h2>
+      <Message v-if="roleError" type="error"><span>{{roleError}}</span></Message>
       <role-selector
         :isPrincipal="isPrincipal"
         :institutionType="institutionType"
@@ -34,21 +9,34 @@
         :participantDescription="participantDescription"
         v-model="wantToBePrincipal"
       ></role-selector>
-    <hr/>
       <h2>Velg grupper</h2>
+      <Message type="error" v-if="wantToBePrincipal && institutionType">{{principalWarning}}
+      </Message>
+      <div v-if="groupError"
+        class="alert alert-danger">{{groupError}}
+      </div>
+      <div v-if="preKommunereform2024">
+        <Message type="error">
+          <span>
+          Per 01.01.2024 ble <a style="font-size: 14px;" href="https://www.regjeringen.no/no/tema/kommuner-og-regioner/kommunestruktur/nye-kommune-og-fylkesnummer-fra-1.-januar-2024/id2924701/" target="_blank">Kommunereformen 2024</a> innført. Dersom du jobber i ett fylke eller kommune som er berørt av kommunereformen 2024 må du velge nye grupper. Du finner oppdaterte kommuner i gruppevalget nedenfor.
+          Merk: Vestfold og Telemark, Viken og Troms og Finnmark er ikke gyldige valg lengre, disse er fjernet fra listen.
+          Når du bytter gruppe blir historikken din flyttet til ny gruppe.
+        </span>
+        </Message>
+      </div>
       <faculty-selector
         @updateFaculty="updateFaculty"
         :faculties="faculties"
+        :currentFaculty="currentGroups['Faggruppe nasjonalt']? currentGroups['Faggruppe nasjonalt'].name : ''"
         v-model="faculty"
       />
-    <hr/>
       <group-selector
         @updateGroups="updateGroups"
         :courseId="courseId"
         :institutionType="institutionType"
+        :currentGroups="currentGroups"
         v-model="groups"
       ></group-selector>
-    <hr/>
       <div class="update-button">
         <button
           class="btn"
@@ -64,12 +52,11 @@
       </div>
 
 
-      <div v-if="isLoading" class="alert alert-warning kpasAlert">Oppdaterer din rolle og gruppetilhørighet. Dette kan ta litt tid. Ikke lukk nettleseren.<div class="spinner-border text-danger"></div></div>
-      <div v-if="enrollResult == ENROLL_FAILED" class='alert alert-danger kpasAlert'>Kunne ikke oppdatere rollen din. Prøv igjen senere eller ta kontakt med kompetansesupport@udir.no for å få hjelp.</div>
-      <div v-if="getRoleResult == ENROLL_GET_FAILED" class='alert alert-danger kpasAlert'>Du er ikke registrert med noen rolle i kompetansepakken og kan derfor ikke endre den eller melde deg inn i noen grupper.</div>
-      <div v-if="groupResult == ADDTO_GROUPS_FAILED" class='alert alert-danger kpasAlert'>Kunne ikke melde deg inn i gruppene. Prøv igjen senere eller ta kontakt med kompetansesupport@udir.no for å få hjelp.</div>
-      <div v-if="enrollResult == ENROLLED && !settings.deep && groupResult == ADDED_TO_GROUPS" class='alert alert-success kpasAlert'>Oppdateringen var vellykket! Klikk på fanen <i>Forside</i> for å fortsette å jobbe med kompetansepakken.</div>
-      <div v-if="enrollResult == ENROLLED && settings.deep && groupResult == ADDED_TO_GROUPS" class='alert alert-success kpasAlert'>Oppdateringen var vellykket!</div>
+      <Message v-if="isLoading" type="warn"><span>Oppdaterer din rolle og gruppetilhørighet. Dette kan ta litt tid. Ikke lukk nettleseren.<div class="spinner-border text-danger"></div></span></Message>
+      <Message v-if="enrollResult == ENROLL_FAILED" type="error"><span>Kunne ikke oppdatere rollen din. Prøv igjen senere eller ta kontakt med kompetansesupport@udir.no for å få hjelp.</span></Message>
+      <Message v-if="getRoleResult == ENROLL_GET_FAILED" type="error"><span>Du er ikke registrert med noen rolle i kompetansepakken og kan derfor ikke endre den eller melde deg inn i noen grupper.</span></Message>
+      <Message v-if="groupResult == ADDTO_GROUPS_FAILED" type="error"><span>Kunne ikke melde deg inn i gruppene. Prøv igjen senere eller ta kontakt med kompetansesupport@udir.no for å få hjelp.</span></Message>
+      <Message v-if="enrollResult == ENROLLED && groupResult == ADDED_TO_GROUPS" type="success"><span>Oppdateringen var vellykket!</span></Message>
 
   </div>
   <div v-else>
@@ -80,19 +67,17 @@
 <script>
   import api from '../api';
   import RoleSelector from "../components/RoleSelector";
-  import CurrentRole from "../components/CurrentRole";
   import GroupSelector from "../components/GroupSelector";
-  import CurrentGroup from "../components/CurrentGroup";
   import FacultySelector from "../components/FacultySelector";
+  import Message from "../components/Message";
 
   export default {
     name: "GroupEnrollView",
     components: {
       RoleSelector,
-      CurrentRole,
       GroupSelector,
-      CurrentGroup,
       FacultySelector,
+      Message
     },
     computed: {
       studentText() {
@@ -101,6 +86,14 @@
       principalText() {
         return this.leaderDescription;
       },
+      principalWarning() {
+        if(this.institutionType == "school") {
+          return "NB! Dersom du er skoleeier kan du velge tilhørighet til Annet/Annen fylke/kommune/skole.";
+        } else if(this.institutionType == "kindergarten") {
+          return "NB! Dersom du er barnehageeier kan du velge tilhørighet til Annet/Annen fylke/kommune/barnehage.";
+        }
+        return "";
+      },
     },
     data() {
       return {
@@ -112,7 +105,7 @@
         groupsLoaded: false,
         categoriesLoaded: false,
         isPrincipal: false,
-        wantToBePrincipal: false,
+        wantToBePrincipal: undefined,
         institutionType: null,
         leaderDescription: null,
         participantDescription: null,
@@ -128,7 +121,7 @@
         roleIsSet: true,
         groupResult: 0,
         getRoleResult: 0,
-        preKommunereform2024: false,
+        preKommunereform2024: false
       }
     },
 
@@ -184,7 +177,7 @@
       },
       iframeresize() {
         this.$nextTick(function () {
-          var h = document.body.clientHeight + 100;
+          var h = document.body.clientHeight + 250;
           parent.postMessage(JSON.stringify({ subject:"lti.frameResize", height: h }), "*");
         });
       },
@@ -261,7 +254,6 @@
             this.groupResult = this.ADDED_TO_GROUPS;
           } catch(e) {
             this.groupResult = this.ADDTO_GROUPS_FAILED;
-//            this.reportError("groupError", "Kunne ikke melde deg inn i gruppen(e).");
             this.iframeresize();
           }
         }
@@ -343,6 +335,7 @@
         } catch(e)
         {
           this.getRoleResult = this.ENROLL_GET_FAILED;
+          this.wantToBePrincipal = undefined;
           this.reportError("roleError", "Kunne ikke hente rolle.");
         }
       },
@@ -386,6 +379,9 @@
       }
 
     },
+    updated() {
+      this.iframeresize();
+    },
     async created() {
       this.ENROLLED = 1;
       this.ADDED_TO_GROUPS = 2;
@@ -432,8 +428,59 @@
   }
 </script>
 
-<style>
-  .update-button {
-    padding-bottom: 2em;
+<style scoped>
+
+
+  h2{
+    margin-top: .5em;
+    margin-bottom: .5em;
+    font-weight: bold;
+    font-size: 22px;
   }
+
+  .btn-primary {
+    cursor: pointer;
+    position: relative;
+    background: #303030;
+    color: white;
+    border: none;
+    border-radius: 0.1875rem;
+    font-weight: 700;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    bottom: -0.05rem;
+    padding: 0.5rem 1.375rem 0.5rem 1.375rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+  .btn-primary:hover {
+    background: #00468e;
+    color: white;
+  }
+
+  .btn-secondary {
+    cursor: pointer;
+    position: relative;
+    background: #737373;
+    color: white;
+    border: none;
+    border-radius: 0.1875rem;
+    font-weight: 700;
+    line-height: 1;
+    display: flex;
+    align-items: center;
+    bottom: -0.05rem;
+    padding: 0.5rem 1.375rem 0.5rem 1.375rem;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  .group-tool {
+    padding: 1rem 1rem 3rem 1rem;
+    gap: .5rem;
+    display: flex;
+    flex-direction: column;
+  }
+
 </style>