diff --git a/src/components/AddTeam.vue b/src/components/AddTeam.vue
index 63c172f1df2cc22ce416bbbe79c2aa6238fed27d..2ca0c5fcc3c415d1d7f3cd22183706ff24381564 100644
--- a/src/components/AddTeam.vue
+++ b/src/components/AddTeam.vue
@@ -3,16 +3,7 @@
     :show-dialog="showDialog"
     :dialog-title="editMode ? `Edit team` : `Add a new team`"
   >
-    <v-form
-      v-model="valid"
-      id="add-team"
-      :style="{
-        padding: '2em',
-        'margin-bottom': '2em',
-        paddingTop: '0',
-        height: '425px',
-      }"
-    >
+    <v-form v-model="valid" id="add-team" class="add-team-form">
       <v-text-field
         label="Team name"
         v-model="toAdd.name"
diff --git a/src/components/CourseSelect.vue b/src/components/CourseSelect.vue
index 784287bc822f8f1cfc96307cab8a2954b8f468f8..19f372a1fd0625d809d9267546c06e24a8b2bb5c 100644
--- a/src/components/CourseSelect.vue
+++ b/src/components/CourseSelect.vue
@@ -19,7 +19,7 @@
     hide-selected
     aria-required="true"
     @change="modelChanged"
-    placeholder="Class name"
+    placeholder="Course name"
     @click:prepend="setInputElementFocus($refs.courseAutocomplete)"
     class="course-select-component"
   >
diff --git a/src/components/Dialogs/AddStudentsToCourseDialog.vue b/src/components/Dialogs/AddStudentsToCourseDialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..71f7be8b95feef328dc801e4d63270aeac4b6849
--- /dev/null
+++ b/src/components/Dialogs/AddStudentsToCourseDialog.vue
@@ -0,0 +1,124 @@
+<template>
+  <BaseDialog :show-dialog="showDialog" dialog-title="Add Student to Course">
+    <v-card-text class="d-flex flex-column justify-end pt-7 pb-7">
+      <CourseNameDate
+        :course-name="course.name"
+        :course-date="course.startDate"
+      />
+      <div class="mt-3"></div>
+      <UserSelectForCourse
+        :are-no-available-seats="
+          availableSeatsInCourse(
+            this.course.capacity,
+            this.courseMembers,
+            this.courseRegistrations
+          ) < 0
+        "
+        :available-seats-in-course="
+          availableSeatsInCourse(
+            this.course.capacity,
+            this.courseMembers,
+            this.courseRegistrations
+          )
+        "
+        :update-course-members="updateCourseMembers"
+        :is-course-selected="true"
+      />
+    </v-card-text>
+
+    <template v-slot:actions>
+      <v-btn
+        color="secondary"
+        :disabled="state.isAddingBusy"
+        text
+        @click="cancel()"
+      >
+        Cancel
+      </v-btn>
+      <v-btn
+        :disabled="!canSubmit"
+        color="primary"
+        :loading="state.isAddingBusy"
+        text
+        @click="addSelectedUsersToSelectedCourses"
+      >
+        Add To Course
+      </v-btn>
+    </template>
+  </BaseDialog>
+</template>
+<script>
+import BaseDialog from "@/components/Dialogs/BaseDialog";
+import UserSelectForCourse from "@/components/Dialogs/DialogComponents/UserSelectForCourse";
+import CourseNameDate from "@/components/Dialogs/DialogComponents/CourseNameDate";
+import CourseService from "@/api/services/training";
+import { SET_ERROR_MESSAGE, SET_ERROR_DIALOG } from "@/store/mutation-types";
+import { availableSeatsInCourse, canAddStudentsToCourse } from "@/utils/course";
+
+export default {
+  name: "AddStudentsToCourseDialog",
+  components: { BaseDialog, UserSelectForCourse, CourseNameDate },
+  props: {
+    showDialog: Boolean,
+    courseId: Number,
+  },
+  methods: {
+    availableSeatsInCourse,
+    canAddStudentsToCourse,
+    async addSelectedUsersToSelectedCourses() {
+      this.isAddingBusy = true;
+      try {
+        await CourseService.addStudents(this.courseId, this.courseMembers);
+        this.$emit("update-students");
+      } catch (error) {
+        console.error("!add courses error!", error);
+        this.$store.commit(SET_ERROR_MESSAGE, error);
+        this.$store.commit(SET_ERROR_DIALOG, true);
+      } finally {
+        this.$refs.courseSelect && this.$refs.courseSelect.clear();
+        this.isAddingBusy = false;
+        this.isAdding = false;
+        this.course = { name: "", startDate: "" };
+        this.updateCourseMembers([]);
+        this.$emit("close-dialog");
+      }
+    },
+    updateCourseMembers(members) {
+      this.courseMembers = members;
+    },
+    cancel() {
+      this.$emit("close-dialog");
+    },
+  },
+  data() {
+    return {
+      state: {
+        isAddingBusy: false,
+      },
+      course: {
+        name: "",
+        startDate: "",
+      },
+      courseRegistrations: [],
+      courseMembers: [],
+    };
+  },
+  computed: {
+    canSubmit() {
+      return this.canAddStudentsToCourse(
+        true,
+        this.course.capacity,
+        this.courseMembers,
+        this.course.registrations
+      );
+    },
+  },
+  async created() {
+    this.course = await CourseService.getCourse(this.courseId);
+    const result = await CourseService.getCourseRegistrationsById(
+      this.course.id
+    );
+    this.courseRegistrations = result.registrations;
+  },
+};
+</script>
diff --git a/src/components/Dialogs/BaseDialog.vue b/src/components/Dialogs/BaseDialog.vue
index f4bae4be8a92cecd410fff3fa714d75a40a791a3..5fb2599a211155a1d1216dc3f0d1e7521980e7e5 100644
--- a/src/components/Dialogs/BaseDialog.vue
+++ b/src/components/Dialogs/BaseDialog.vue
@@ -70,14 +70,13 @@ export default {
 
 .v-card__actions {
   bottom: 0;
-  position: absolute;
   width: 100%;
   text-align: center;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  margin-bottom: 40px;
+  padding-bottom: 40px !important;
 }
 
 .v-card__actions .v-btn:last-child {
diff --git a/src/components/Dialogs/CourseSelectDialog.vue b/src/components/Dialogs/CourseSelectDialog.vue
index 5d6da01496e5455d009a3b2a420b5211ef0320cb..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 100644
--- a/src/components/Dialogs/CourseSelectDialog.vue
+++ b/src/components/Dialogs/CourseSelectDialog.vue
@@ -1,205 +0,0 @@
-<template>
-  <BaseDialog :show-dialog="showDialog" dialog-title="Add To Course">
-    <v-card-text :style="{ height: '400px' }">
-      <CourseSelect
-        v-on:input="updateCourseSelected"
-        ref="courseSelect"
-        v-model="
-          state.addToSelectedCourseFeature.data.coursesToAddSelectedUsersTo
-        "
-        multiple
-      />
-
-      <v-text-field
-        ref="startDate"
-        v-model="courseStartDate"
-        prepend-icon="mdi-calendar-today"
-        label="Start Date"
-        hint="* Required"
-        :persistent-hint="true"
-      >
-      </v-text-field>
-      <UserSelect
-        :force-error="areNoAvailableSeats"
-        :force-error-message="
-          areNoAvailableSeats ? ['No more available seats'] : []
-        "
-        multiple
-        ref="userSelect"
-        class="course-select-dialog-user-select"
-        v-on:input="updateCourseMembers"
-        v-bind:value="internalSelectedMembers"
-      />
-      <label
-        v-if="isCourseSelected && !areNoAvailableSeats"
-        class="text-left w-100 d-block text--white available-seats-label"
-        style="
-          width: 81%;
-          display: block;
-          position: relative;
-          left: 33px;
-          bottom: 11px;
-        "
-        >You have
-        {{ availableSeatsInCourse - internalSelectedMembers.length }}
-        available seat reservations</label
-      >
-    </v-card-text>
-
-    <template v-slot:actions>
-      <v-btn
-        color=""
-        class="primary"
-        :disabled="state.isAddingBusy"
-        text
-        @click="cancel()"
-      >
-        Cancel
-      </v-btn>
-      <v-btn
-        :disabled="
-          !isCourseSelected ||
-          !internalSelectedMembers.length ||
-          areNoAvailableSeats
-        "
-        color="primary"
-        :loading="state.isAddingBusy"
-        text
-        @click="addSelectedUsersToSelectedCourses()"
-      >
-        Add To Course
-      </v-btn>
-    </template>
-  </BaseDialog>
-</template>
-<script>
-import BaseDialog from "@/components/Dialogs/BaseDialog";
-import CourseSelect from "@/components/CourseSelect";
-import { setInputElementFocus } from "@/utils/events";
-import { SET_ERROR_MESSAGE, SET_ERROR_DIALOG } from "@/store/mutation-types";
-import CourseService from "@/api/services/training";
-import UserSelect from "@/components/UserSelect";
-
-export default {
-  name: "CourseSelectDialog",
-  props: {
-    addBusy: Boolean,
-    showDialog: Boolean,
-    selectedMembers: [Array, Object],
-  },
-  watch: {
-    selectedMembers(members) {
-      this.updateCourseMembers(members);
-    },
-  },
-  components: {
-    BaseDialog,
-    UserSelect,
-    CourseSelect,
-  },
-  data: () => ({
-    isUserSelectError: false,
-    userSelectErrorMessage: [],
-    availableSeatsInCourse: 0,
-    internalSelectedMembers: [],
-    courseStartDate: "",
-    state: {
-      /* Feature: Adding User To Course
-      controls the state of the adding user to selected course dialog */
-      addToSelectedCourseFeature: {
-        //for controlling dialog
-        ui: {
-          //dialog open/close
-          isAdding: false,
-          //allows the user to click the button to submit
-          isAddingDuplicate: false,
-          //loading
-          isAddingBusy: false,
-        },
-        //data for CourseSelect component
-        data: {
-          coursesToAddSelectedUsersTo: null,
-        },
-      },
-    },
-  }),
-  methods: {
-    updateCourseMembers(members) {
-      this.internalSelectedMembers = members;
-    },
-    async updateCourseSelected(model) {
-      const course = model[0];
-      if (course) {
-        this.courseStartDate = course.startDate;
-        const courseRegistrations = await CourseService.getCourseRegistrationsById(
-          course.id
-        );
-        const capacity = course.capacity,
-          registrations = courseRegistrations.registrations;
-        const seatsLeft = capacity - registrations.length;
-        this.availableSeatsInCourse = seatsLeft;
-      }
-    },
-    async addSelectedUsersToSelectedCourses() {
-      this.state.addToSelectedCourseFeature.ui.isAddingBusy = true;
-      try {
-        await CourseService.addStudentsToCourses(
-          this.state.addToSelectedCourseFeature.data
-            .coursesToAddSelectedUsersTo,
-          this.selectedMembers
-        );
-      } catch (error) {
-        console.error("!add courses error!", error);
-        this.$store.commit(SET_ERROR_MESSAGE, error);
-        this.$store.commit(SET_ERROR_DIALOG, true);
-      } finally {
-        this.$refs.courseSelect && this.$refs.courseSelect.clear();
-        this.state.addToSelectedCourseFeature.ui.isAddingBusy = false;
-        this.state.addToSelectedCourseFeature.ui.isAdding = false;
-        this.state.addToSelectedCourseFeature.data.coursesToAddSelectedUsersTo = null;
-        this.selectedMembers = [];
-        this.$emit("close-dialog");
-      }
-    },
-    cancel() {
-      this.clear();
-      this.$emit("close-dialog");
-    },
-    clear() {
-      //clear all values
-      this.$refs.courseSelect.clear();
-      this.courseStartDate = "";
-    },
-    setInputElementFocus,
-  },
-  computed: {
-    areNoAvailableSeats() {
-      return (
-        this.isCourseSelected &&
-        this.availableSeatsInCourse - this.internalSelectedMembers.length < 0
-      );
-    },
-    isCourseSelected() {
-      return (
-        Array.isArray(
-          this.state.addToSelectedCourseFeature.data.coursesToAddSelectedUsersTo
-        ) &&
-        this.state.addToSelectedCourseFeature.data.coursesToAddSelectedUsersTo
-          .length > 0
-      );
-    },
-    areMultipleCoursesSelected() {
-      return (
-        this.isCourseSelected &&
-        this.state.addToSelectedCourseFeature.data.coursesToAddSelectedUsersTo
-          .length > 1
-      );
-    },
-  },
-};
-</script>
-<style scoped>
-.course-select-dialog-user-select {
-  margin-top: 40px;
-}
-</style>
diff --git a/src/components/Dialogs/DialogComponents/CourseNameDate.vue b/src/components/Dialogs/DialogComponents/CourseNameDate.vue
new file mode 100644
index 0000000000000000000000000000000000000000..95a57c980a4b477df9d867669aee0241f06a0f0c
--- /dev/null
+++ b/src/components/Dialogs/DialogComponents/CourseNameDate.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="course-name-date d-flex flex-row justify-space-between">
+    <span class="course-name font-weight-bold">{{ courseName }}</span
+    ><span class="course-date">{{ courseDate }}</span>
+  </div>
+</template>
+<script>
+export default {
+  name: "CourseNameDate",
+  components: {},
+  props: {
+    courseName: {
+      type: String,
+      default: "No Course Name",
+    },
+    courseDate: {
+      type: String,
+      default: "No Course Date",
+    },
+  },
+  data() {
+    return {};
+  },
+};
+</script>
+<style scoped lang="scss">
+.course-name-date {
+  padding: 0 3em;
+}
+
+.course-name {
+  font-size: 15px;
+}
+
+.course-date {
+  font-size: 15px;
+  color: white;
+}
+
+.theme--light {
+  .course-name {
+    color: black;
+  }
+  .course-date {
+    color: black;
+  }
+}
+</style>
diff --git a/src/components/Dialogs/DialogComponents/UserSelectForCourse.vue b/src/components/Dialogs/DialogComponents/UserSelectForCourse.vue
new file mode 100644
index 0000000000000000000000000000000000000000..44f50e436dbe1ee00fdb3dabf4d514814b2aaca6
--- /dev/null
+++ b/src/components/Dialogs/DialogComponents/UserSelectForCourse.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <UserSelect
+      :force-error="areNoAvailableSeats"
+      :force-error-message="
+        areNoAvailableSeats ? ['No more available seats'] : []
+      "
+      multiple
+      ref="userSelect"
+      class="course-select-dialog-user-select"
+      v-on:input="updateCourseMembers"
+      v-bind:value="selectedMembers"
+    />
+    <label
+      v-if="isCourseSelected && !areNoAvailableSeats"
+      class="text-left w-100 d-block text--white available-seats-label"
+      >You have
+      {{ availableSeatsInCourse }}
+      available seat reservation{{
+        availableSeatsInCourse === 1 ? "" : "s"
+      }}</label
+    >
+  </div>
+</template>
+<script>
+import UserSelect from "@/components/UserSelect";
+
+export default {
+  name: "UserSelectForCourse",
+  components: { UserSelect },
+  props: {
+    selectedMembers: {
+      type: Array,
+      default: () => [],
+    },
+    areNoAvailableSeats: {
+      type: Boolean,
+      default: false,
+    },
+    availableSeatsInCourse: {
+      type: Number,
+      default: 0,
+    },
+    courseStartDate: {
+      type: String,
+      default: "Select Course",
+    },
+    updateCourseMembers: {
+      type: Function,
+      default: () => {},
+    },
+    isCourseSelected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      state: {
+        isAddingBusy: false,
+      },
+    };
+  },
+};
+</script>
+<style>
+.available-seats-label {
+  width: 81% !important;
+  display: block !important;
+  position: relative !important;
+  left: 33px !important;
+  bottom: 11px !important;
+}
+</style>
diff --git a/src/components/Dialogs/SelectAddStudentsToCourseDialog.vue b/src/components/Dialogs/SelectAddStudentsToCourseDialog.vue
new file mode 100644
index 0000000000000000000000000000000000000000..4e7bc12fcccb82ab56adc0fd83d364ff1900ce73
--- /dev/null
+++ b/src/components/Dialogs/SelectAddStudentsToCourseDialog.vue
@@ -0,0 +1,170 @@
+<template>
+  <BaseDialog :show-dialog="showDialog" dialog-title="Add To Course">
+    <v-card-text id="select-add-student-dialog-text">
+      <CourseSelect
+        v-on:input="updateCourseSelected"
+        ref="courseSelect"
+        multiple
+      />
+      <v-text-field
+        ref="startDate"
+        v-model="course.startDate"
+        prepend-icon="mdi-calendar-today"
+        label="Start Date"
+        hint="* Required"
+        :persistent-hint="true"
+      ></v-text-field>
+      <div id="select-add-student-dialog-text-divider"></div>
+      <UserSelectForCourse
+        :are-no-available-seats="
+          availableSeatsInCourse(
+            this.course.capacity,
+            this.courseMembers,
+            this.courseRegistrations
+          ) < 0
+        "
+        :available-seats-in-course="
+          availableSeatsInCourse(
+            this.course.capacity,
+            this.courseMembers,
+            this.courseRegistrations
+          )
+        "
+        :course-start-date="course.startDate"
+        :update-course-members="updateCourseMembers"
+        :is-course-selected="isCourseSelected"
+        :selected-members="courseMembers"
+      />
+    </v-card-text>
+
+    <template v-slot:actions>
+      <v-btn color="secondary" :disabled="isAddingBusy" text @click="cancel()">
+        Cancel
+      </v-btn>
+      <v-btn
+        :disabled="!canSubmit"
+        color="primary"
+        :loading="isAddingBusy"
+        text
+        @click="addSelectedUsersToSelectedCourses()"
+      >
+        Add To Course
+      </v-btn>
+    </template>
+  </BaseDialog>
+</template>
+<script>
+import BaseDialog from "@/components/Dialogs/BaseDialog";
+import CourseSelect from "@/components/CourseSelect";
+import { setInputElementFocus } from "@/utils/events";
+import { SET_ERROR_MESSAGE, SET_ERROR_DIALOG } from "@/store/mutation-types";
+import CourseService from "@/api/services/training";
+import UserSelectForCourse from "@/components/Dialogs/DialogComponents/UserSelectForCourse";
+import { availableSeatsInCourse, canAddStudentsToCourse } from "@/utils/course";
+
+export default {
+  name: "SelectAddStudentsToCourseDialog",
+  props: {
+    addBusy: Boolean,
+    showDialog: Boolean,
+    selectedMembers: [Array, Object],
+  },
+  watch: {
+    selectedMembers(members) {
+      this.updateCourseMembers(members);
+    },
+  },
+  components: {
+    BaseDialog,
+    CourseSelect,
+    UserSelectForCourse,
+  },
+  data: () => ({
+    course: { name: "", startDate: "" },
+    courseRegistrations: [],
+    courseMembers: [],
+    isUserSelectError: false,
+    userSelectErrorMessage: [],
+    isAdding: false,
+    isAddingDuplicate: false,
+    isAddingBusy: false,
+  }),
+  methods: {
+    canAddStudentsToCourse,
+    availableSeatsInCourse,
+    updateCourseMembers(members) {
+      this.courseMembers = members;
+      this.$emit("update-selected-members", members);
+    },
+    async updateCourseSelected(courses) {
+      if (Array.isArray(courses) && courses.length > 0) {
+        this.course = courses[0];
+        if (!isNaN(this.course.id)) {
+          const result = await CourseService.getCourseRegistrationsById(
+            this.course.id
+          );
+          this.courseRegistrations = result.registrations;
+        }
+      } else {
+        this.course = { name: "", startDate: "" };
+      }
+    },
+    async addSelectedUsersToSelectedCourses() {
+      this.isAddingBusy = true;
+      try {
+        await CourseService.addStudentsToCourses(
+          [this.course],
+          this.selectedMembers
+        );
+        this.$emit("update-students");
+      } catch (error) {
+        console.error("!add courses error!", error);
+        this.$store.commit(SET_ERROR_MESSAGE, error);
+        this.$store.commit(SET_ERROR_DIALOG, true);
+      } finally {
+        this.$refs.courseSelect && this.$refs.courseSelect.clear();
+        this.isAddingBusy = false;
+        this.isAdding = false;
+        this.course = { name: "", startDate: "" };
+        this.updateCourseMembers([]);
+        this.$emit("close-dialog");
+      }
+    },
+    cancel() {
+      this.clear();
+      this.$emit("close-dialog");
+    },
+    clear() {
+      //clear all values
+      this.$refs.courseSelect.clear();
+      this.courseStartDate = "";
+    },
+    setInputElementFocus,
+  },
+  computed: {
+    canSubmit() {
+      return this.canAddStudentsToCourse(
+        this.isCourseSelected,
+        this.course.capacity,
+        this.courseMembers,
+        this.course.registrations
+      );
+    },
+    isCourseSelected() {
+      return this.course.name !== "";
+    },
+  },
+};
+</script>
+<style scoped>
+.course-select-dialog-user-select {
+  margin-top: 40px;
+}
+#select-add-student-dialog-text {
+  height: 400px !important;
+}
+
+#select-add-student-dialog-text-divider {
+  height: 40px !important;
+}
+</style>
diff --git a/src/components/Training/TrainingAttendance.vue b/src/components/Training/TrainingAttendance.vue
index b395b61853f98b76d78359d0806722ef178ca26d..a93717bc1df7255ec10542597a35fda13644e39c 100644
--- a/src/components/Training/TrainingAttendance.vue
+++ b/src/components/Training/TrainingAttendance.vue
@@ -118,10 +118,17 @@
         Email Selected
       </v-btn>
     </div>
+    <AddStudentsToCourseDialog
+      :course-id="currentCourseId"
+      :show-dialog="state.isAddingStudent"
+      v-on:close-dialog="closeAddStudentDialog"
+      v-on:update-students="fetchDebounced"
+    />
   </v-container>
 </template>
 
 <script>
+import AddStudentsToCourseDialog from "@/components/Dialogs/AddStudentsToCourseDialog";
 import TrainingService from "@/api/services/training";
 import { debounceTimeout } from "@/config/config";
 import inputRules from "@/utils/inputRules";
@@ -139,6 +146,7 @@ import { minimumWait } from "@/utils/timing";
 const minCheckBoxWaitTime = 500; // ms
 export default {
   name: "TrainingAttendance",
+  components: { AddStudentsToCourseDialog },
   props: {
     trainingCourse: {
       type: Object,
@@ -176,6 +184,9 @@ export default {
     await this.fetchData();
   },
   methods: {
+    closeAddStudentDialog() {
+      this.state.isAddingStudent = false;
+    },
     fetchDebounced() {
       // cancel pending call
       clearTimeout(this._timerId);
diff --git a/src/scss/custom.scss b/src/scss/custom.scss
index da71fff1cae9c794614d4972e8778f7571444002..146ea514ef1520fd46857aa424ae9c7b8774c896 100644
--- a/src/scss/custom.scss
+++ b/src/scss/custom.scss
@@ -540,3 +540,9 @@ body {
     word-break: normal;
   }
 }
+
+.v-dialog .v-form {
+  padding: 2em !important;
+  padding-top: 0 !important;
+  margin-bottom: 0 !important;
+}
diff --git a/src/utils/course.js b/src/utils/course.js
new file mode 100644
index 0000000000000000000000000000000000000000..e5a2ea701148eb6e7e7a0871a4a7024576b0ca8b
--- /dev/null
+++ b/src/utils/course.js
@@ -0,0 +1,50 @@
+export const availableSeatsInCourse = (
+  capacity,
+  selectedMembers,
+  registrations
+) => {
+  if (!Number.isInteger(capacity)) {
+    console.warn("capacity was not an integer so default course capacity is 0");
+    return 0;
+  }
+  if (Array.isArray(selectedMembers)) {
+    capacity -= selectedMembers.length;
+  }
+  if (Array.isArray(registrations)) {
+    capacity -= registrations.length;
+  }
+  return capacity;
+};
+
+export const canAddStudentsToCourse = (
+  isCourseSelected,
+  capacity,
+  selectedMembers,
+  registrations
+) => {
+  //default to allow
+  let canAddToCourse = true;
+
+  //check if course is selected
+  if (!isCourseSelected) {
+    canAddToCourse = false;
+  }
+
+  //check if seats are available
+  const seatsAvailable = availableSeatsInCourse(
+    capacity,
+    selectedMembers,
+    registrations
+  );
+  if (seatsAvailable < 0) {
+    canAddToCourse = false;
+  }
+
+  //check if selected members is an array
+  if (!Array.isArray(selectedMembers) || selectedMembers.length <= 0) {
+    canAddToCourse = false;
+  }
+
+  //return boolean
+  return canAddToCourse;
+};
diff --git a/src/views/Team.vue b/src/views/Team.vue
index f71f64f05ce3da05b6c69baf6633b94be43e7c55..9a1db5efef8497579514b0f7b8f1792613ad4e71 100644
--- a/src/views/Team.vue
+++ b/src/views/Team.vue
@@ -105,7 +105,7 @@
             <!--
               COURSE SELECT DIALOG
             -->
-            <CourseSelectDialog
+            <SelectAddStudentsToCourseDialog
               :style="{ height: '600px' }"
               ref="courseSelectDialog"
               v-bind:selected-members="selectedMembers"
@@ -276,7 +276,7 @@
 </template>
 <script>
 import Vue from "vue";
-import CourseSelectDialog from "@/components/Dialogs/CourseSelectDialog";
+import SelectAddStudentsToCourseDialog from "@/components/Dialogs/SelectAddStudentsToCourseDialog";
 import TeamService from "@/api/services/team";
 import UserSelect from "@/components/UserSelect";
 import AddTeam from "@/components/AddTeam";
@@ -289,7 +289,7 @@ import BaseDialog from "@/components/Dialogs/BaseDialog";
 export default {
   components: {
     UserSelect,
-    CourseSelectDialog,
+    SelectAddStudentsToCourseDialog,
     AddTeam,
     BaseDialog,
   },
diff --git a/tests/unit/components/Dialogs/AddStudentsToCourseDialog.spec.js b/tests/unit/components/Dialogs/AddStudentsToCourseDialog.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..c90698a26a40740c748306fcfe80030727ec7cde
--- /dev/null
+++ b/tests/unit/components/Dialogs/AddStudentsToCourseDialog.spec.js
@@ -0,0 +1,111 @@
+import { createLocalVue, shallowMount } from "@vue/test-utils";
+import Vuetify from "vuetify";
+import Vuex from "vuex";
+import AddStudentsToCourseDialog from "@/components/Dialogs/AddStudentsToCourseDialog";
+import CourseService from "@/api/services/training";
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const getShallowMount = (vuetify) => {
+  return shallowMount(AddStudentsToCourseDialog, {
+    propsData: {
+      showDialog: true,
+      courseId: 1,
+    },
+    mocks: {
+      $store: {
+        state: {
+          user: {
+            user: {
+              permission: "Admin",
+            },
+          },
+          tutorial: {
+            tooltipName: "test",
+          },
+          userPreferences: {
+            userPreference: {
+              darkMode: true,
+            },
+          },
+        },
+      },
+    },
+    vuetify,
+  });
+};
+
+const checkHtml = (html, checkText) => {
+  return html.indexOf(checkText) !== -1;
+};
+
+const checkWrapperForHtml = (wrapper, text) => {
+  const html = wrapper.html();
+  expect(checkHtml(html, text)).toEqual(true);
+};
+
+describe("SelectAddStudentsToCourseDialog", () => {
+  // vuetify has to be mocked for the v-autocomplete to not crash
+  let vuetify;
+  const wrapper = getShallowMount(vuetify);
+  beforeEach(() => {
+    vuetify = new Vuetify();
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it("should have basedialog", () => {
+    checkWrapperForHtml(wrapper, "basedialog-stub");
+  });
+  it("dialog title should be add student to course", () => {
+    checkWrapperForHtml(wrapper, `dialogtitle="Add Student to Course"`);
+  });
+  it("should have user select", () => {
+    checkWrapperForHtml(wrapper, `userselectforcourse-stub`);
+  });
+  it("should call addStudents", async () => {
+    wrapper.vm.courseId = 1;
+    wrapper.vm.courseMembers = [{ id: 1 }];
+    CourseService.addStudents = jest.fn();
+    wrapper.vm.addSelectedUsersToSelectedCourses();
+    expect(CourseService.addStudents).toHaveBeenCalledTimes(1);
+  });
+  it("should call addStudents", async () => {
+    wrapper.vm.courseId = 1;
+    wrapper.vm.courseMembers = [{ id: 1 }];
+    CourseService.addStudents = jest.fn().mockResolvedValue({});
+    wrapper.vm.addSelectedUsersToSelectedCourses();
+    expect(CourseService.addStudents).toHaveBeenCalledTimes(1);
+  });
+  it("should handle error", async () => {
+    wrapper.vm.courseId = 1;
+    wrapper.vm.courseMembers = [{ id: 1 }];
+    wrapper.vm.$store.commit = jest.fn();
+    console.error = jest.fn();
+    CourseService.addStudents = jest.fn().mockRejectedValue({});
+    await wrapper.vm.addSelectedUsersToSelectedCourses();
+    expect(CourseService.addStudents).toHaveBeenCalledTimes(1);
+    expect(console.error).toHaveBeenCalled();
+    expect(wrapper.vm.$store.commit).toHaveBeenCalled();
+  });
+  it("cancel should emit close dialog", async () => {
+    wrapper.vm.$emit = jest.fn();
+    wrapper.vm.cancel();
+    expect(wrapper.vm.$emit).toHaveBeenCalledTimes(1);
+  });
+  it("can submit should return false if no available seats or no course members", async () => {
+    wrapper.vm.course.capacity = 0;
+    wrapper.vm.courseMembers = [];
+    wrapper.vm.courseRegistrations = [];
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.canSubmit).toEqual(false);
+  });
+  it("can submit should return true if available seats or and course members", async () => {
+    wrapper.vm.course.capacity = 10;
+    wrapper.vm.courseMembers = [{ id: 1 }];
+    wrapper.vm.courseRegistrations = [];
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.canSubmit).toEqual(true);
+  });
+});
diff --git a/tests/unit/components/Dialogs/BaseDialog.spec.js b/tests/unit/components/Dialogs/BaseDialog.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..219bdd7c0e91e98ad9ba1686d186478f3e08d7f4
--- /dev/null
+++ b/tests/unit/components/Dialogs/BaseDialog.spec.js
@@ -0,0 +1,56 @@
+import { createLocalVue, shallowMount } from "@vue/test-utils";
+import Vuetify from "vuetify";
+import Vuex from "vuex";
+import BaseDialog from "@/components/Dialogs/BaseDialog";
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe("BaseDialog", () => {
+  // vuetify has to be mocked for the v-autocomplete to not crash
+  let vuetify;
+  beforeEach(() => {
+    vuetify = new Vuetify();
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should find dialog title in html", () => {
+    const wrapper = shallowMount(BaseDialog, {
+      propsData: {
+        dialogTitle: "123456789",
+      },
+      vuetify,
+    });
+    const html = wrapper.html();
+    expect(html.indexOf("123456789") !== -1).toBe(true);
+  });
+
+  it("should find v-dialog in html", () => {
+    const wrapper = shallowMount(BaseDialog, {
+      propsData: {
+        dialogTitle: "123456789",
+      },
+      vuetify,
+    });
+    const html = wrapper.html();
+    expect(html.indexOf("v-dialog-stub") !== -1).toBe(true);
+  });
+
+  it("should find yoda head in html", () => {
+    const wrapper = shallowMount(BaseDialog, {
+      propsData: {
+        dialogTitle: "123456789",
+      },
+      vuetify,
+    });
+
+    const html = wrapper.html();
+    expect(
+      html.indexOf(
+        `<div class="hide-overflow-container"><img src="@/assets/images/logos/YodaHead.png" alt="Yoda Head" class="yoda-head"></div>`
+      ) !== -1
+    ).toBe(true);
+  });
+});
diff --git a/tests/unit/components/Dialogs/CourseSelectDialog.spec.js b/tests/unit/components/Dialogs/CourseSelectDialog.spec.js
deleted file mode 100644
index eb9107f9682ed50ece7281ec3be4267165b38472..0000000000000000000000000000000000000000
--- a/tests/unit/components/Dialogs/CourseSelectDialog.spec.js
+++ /dev/null
@@ -1,119 +0,0 @@
-import { createLocalVue, shallowMount } from "@vue/test-utils";
-import Vuetify from "vuetify";
-import Vuex from "vuex";
-import CourseSelectDialog from "@/components/Dialogs/CourseSelectDialog";
-
-const localVue = createLocalVue();
-localVue.use(Vuex);
-
-const testUser = { name: "test" };
-const testCourse = { name: "test" };
-
-describe("CourseSelectDialog", () => {
-  // vuetify has to be mocked for the v-autocomplete to not crash
-  let vuetify;
-  beforeEach(() => {
-    vuetify = new Vuetify();
-  });
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("should update internal course members when selected members changes", async () => {
-    const wrapper = shallowMount(CourseSelectDialog, {
-      propsData: {
-        value: [],
-        selectedMembers: [testUser, testUser, testUser, testUser],
-      },
-      vuetify,
-    });
-    // wrapper.vm.selectedMembers = [testUser, testUser, testUser, testUser];
-
-    await wrapper.vm.$nextTick();
-    expect(wrapper.props().selectedMembers).toHaveLength(4);
-  });
-
-  it("if areNoAvailableSeats is true then should show error on UserSelect", async () => {
-    const wrapper = shallowMount(CourseSelectDialog, {
-      propsData: {
-        value: [],
-        selectedMembers: [testUser, testUser, testUser, testUser],
-        showDialog: true,
-      },
-      vuetify,
-    });
-    wrapper.vm.state.addToSelectedCourseFeature.data.coursesToAddSelectedUsersTo = [
-      testCourse,
-      testCourse,
-      testCourse,
-    ];
-    wrapper.vm.availableSeatsInCourse = 0;
-    await wrapper.vm.$nextTick();
-    const userSelectWrapper = wrapper.find(".user-select-component");
-    expect(userSelectWrapper.exists()).toBe(false);
-  });
-
-  it("availableSeatsInCourse should appear in label under UserSelect if course is selected", async () => {
-    const wrapper = shallowMount(CourseSelectDialog, {
-      propsData: {
-        value: [],
-        selectedMembers: [testUser, testUser, testUser, testUser],
-        showDialog: true,
-      },
-      vuetify,
-    });
-    wrapper.vm.state.addToSelectedCourseFeature.data.coursesToAddSelectedUsersTo = [
-      testCourse,
-      testCourse,
-      testCourse,
-    ];
-    wrapper.vm.availableSeatsInCourse = 10;
-    await wrapper.vm.$nextTick();
-    const userSelectWrapper = wrapper.find(".available-seats-label");
-    const text = userSelectWrapper.html();
-    expect(text.indexOf("available seat reservations") !== -1).toBe(true);
-  });
-
-  it("internalSelectedMembers should start as empty array", async () => {
-    const wrapper = shallowMount(CourseSelectDialog, {
-      propsData: {
-        value: [],
-        selectedMembers: [testUser, testUser, testUser, testUser],
-        showDialog: true,
-      },
-      vuetify,
-    });
-    wrapper.vm.state.addToSelectedCourseFeature.data.coursesToAddSelectedUsersTo = [
-      testCourse,
-      testCourse,
-      testCourse,
-    ];
-    wrapper.vm.availableSeatsInCourse = 10;
-    await wrapper.vm.$nextTick();
-    expect(
-      Array.isArray(wrapper.vm.internalSelectedMembers) &&
-        wrapper.vm.internalSelectedMembers.length === 0
-    ).toBe(true);
-  });
-
-  it("internalSelectedMembers should be equal to selectedMembers", async () => {
-    const wrapper = shallowMount(CourseSelectDialog, {
-      propsData: {
-        value: [],
-        selectedMembers: [testUser, testUser, testUser, testUser],
-        showDialog: true,
-      },
-      vuetify,
-    });
-    wrapper.vm.state.addToSelectedCourseFeature.data.coursesToAddSelectedUsersTo = [
-      testCourse,
-      testCourse,
-      testCourse,
-    ];
-    wrapper.vm.availableSeatsInCourse = 10;
-    await wrapper.vm.$nextTick();
-    expect(
-      wrapper.vm.selectedMembers == wrapper.vm.internalSelectedMembers
-    ).toBe(false);
-  });
-});
diff --git a/tests/unit/components/Dialogs/DialogComponents/CourseNameDate.spec.js b/tests/unit/components/Dialogs/DialogComponents/CourseNameDate.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..c3568e72448f1ca7d77c9d9e3b94a2f4443863ed
--- /dev/null
+++ b/tests/unit/components/Dialogs/DialogComponents/CourseNameDate.spec.js
@@ -0,0 +1,31 @@
+import { createLocalVue, shallowMount } from "@vue/test-utils";
+import Vuetify from "vuetify";
+import Vuex from "vuex";
+import CourseNameDate from "@/components/Dialogs/DialogComponents/CourseNameDate";
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe("CourseNameDate", () => {
+  // vuetify has to be mocked for the v-autocomplete to not crash
+  let vuetify;
+  beforeEach(() => {
+    vuetify = new Vuetify();
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it("course name and could be in html", async () => {
+    const wrapper = shallowMount(CourseNameDate, {
+      propsData: {
+        courseName: "testCourseName",
+        courseDate: "testCourseDate",
+      },
+      vuetify,
+    });
+
+    const html = wrapper.html();
+    expect(html.indexOf("testCourseName") !== -1).toBe(true);
+    expect(html.indexOf("testCourseDate") !== -1).toBe(true);
+  });
+});
diff --git a/tests/unit/components/Dialogs/DialogComponents/UserSelectForCourse.spec.js b/tests/unit/components/Dialogs/DialogComponents/UserSelectForCourse.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..4156ae67ee562ddcf6a9888fac8da598352c8333
--- /dev/null
+++ b/tests/unit/components/Dialogs/DialogComponents/UserSelectForCourse.spec.js
@@ -0,0 +1,56 @@
+import { createLocalVue, shallowMount } from "@vue/test-utils";
+import Vuetify from "vuetify";
+import Vuex from "vuex";
+import UserSelectForCourse from "@/components/Dialogs/DialogComponents/UserSelectForCourse";
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const testUser = { name: "test" };
+
+describe("UserSelectForCourse", () => {
+  // vuetify has to be mocked for the v-autocomplete to not crash
+  let vuetify;
+  beforeEach(() => {
+    vuetify = new Vuetify();
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it("should have select user html", async () => {
+    const wrapper = shallowMount(UserSelectForCourse, {
+      propsData: {
+        availableSeatsInCourse: 100,
+        areNoAvailableSeats: false,
+        courseStartDate: "test",
+        updateCourseMembers: () => {},
+        isCourseSelected: true,
+        value: [],
+        selectedMembers: [testUser, testUser, testUser, testUser],
+      },
+      vuetify,
+    });
+
+    const html = wrapper.html();
+    const isFound = html.indexOf("userselect-stub") !== -1;
+    expect(isFound).toEqual(true);
+  });
+
+  it("should have select label with available seat reservations", async () => {
+    const wrapper = shallowMount(UserSelectForCourse, {
+      propsData: {
+        availableSeatsInCourse: 123456789,
+        areNoAvailableSeats: false,
+        courseStartDate: "test",
+        updateCourseMembers: () => {},
+        isCourseSelected: true,
+        value: [],
+        selectedMembers: [testUser, testUser, testUser, testUser],
+      },
+      vuetify,
+    });
+
+    const html = wrapper.html();
+    const isFound = html.indexOf("123456789") !== -1;
+    expect(isFound).toEqual(true);
+  });
+});
diff --git a/tests/unit/components/Dialogs/SelectAddStudentsToCourseDialog.spec.js b/tests/unit/components/Dialogs/SelectAddStudentsToCourseDialog.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..25201eaf6a1147123460be36465382b726259fb6
--- /dev/null
+++ b/tests/unit/components/Dialogs/SelectAddStudentsToCourseDialog.spec.js
@@ -0,0 +1,163 @@
+import { createLocalVue, shallowMount } from "@vue/test-utils";
+import Vuetify from "vuetify";
+import Vuex from "vuex";
+import SelectAddStudentsToCourseDialog from "@/components/Dialogs/SelectAddStudentsToCourseDialog";
+import CourseService from "@/api/services/training";
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+const testUser = { name: "test" };
+const testCourse = { name: "test", capacity: 100 };
+
+describe("SelectAddStudentsToCourseDialog", () => {
+  // vuetify has to be mocked for the v-autocomplete to not crash
+  let vuetify;
+  beforeEach(() => {
+    vuetify = new Vuetify();
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should update internal course members when selected members changes", async () => {
+    const wrapper = shallowMount(SelectAddStudentsToCourseDialog, {
+      propsData: {
+        value: [],
+        selectedMembers: [testUser, testUser, testUser, testUser],
+      },
+      vuetify,
+    });
+    // wrapper.vm.selectedMembers = [testUser, testUser, testUser, testUser];
+
+    await wrapper.vm.$nextTick();
+    expect(wrapper.props().selectedMembers).toHaveLength(4);
+  });
+  it("if areNoAvailableSeats is true then should show error on UserSelect", async () => {
+    const wrapper = shallowMount(SelectAddStudentsToCourseDialog, {
+      propsData: {
+        value: [],
+        selectedMembers: [testUser, testUser, testUser, testUser],
+        showDialog: true,
+      },
+      vuetify,
+    });
+    wrapper.vm.course = testCourse;
+    await wrapper.vm.$nextTick();
+    const userSelectWrapper = wrapper.find(".user-select-component");
+    expect(userSelectWrapper.exists()).toBe(false);
+  });
+  it("courseMembers should start as empty array", async () => {
+    const wrapper = shallowMount(SelectAddStudentsToCourseDialog, {
+      propsData: {
+        value: [],
+        selectedMembers: [testUser, testUser, testUser, testUser],
+        showDialog: true,
+      },
+      vuetify,
+    });
+    wrapper.vm.course = testCourse;
+    await wrapper.vm.$nextTick();
+    expect(
+      Array.isArray(wrapper.vm.courseMembers) &&
+        wrapper.vm.courseMembers.length === 0
+    ).toBe(true);
+  });
+  it("internalSelectedMembers should be equal to selectedMembers", async () => {
+    const wrapper = shallowMount(SelectAddStudentsToCourseDialog, {
+      propsData: {
+        value: [],
+        selectedMembers: [testUser, testUser, testUser, testUser],
+        showDialog: true,
+      },
+      vuetify,
+    });
+    wrapper.vm.course = testCourse;
+    await wrapper.vm.$nextTick();
+    expect(
+      wrapper.vm.selectedMembers == wrapper.vm.internalSelectedMembers
+    ).toBe(false);
+  });
+  it("updateCourseMembers should call emit", async () => {
+    const wrapper = shallowMount(SelectAddStudentsToCourseDialog, {
+      propsData: {
+        value: [],
+        selectedMembers: [],
+      },
+      vuetify,
+    });
+    wrapper.vm.$emit = jest.fn();
+    wrapper.vm.updateCourseMembers([{ test: "test" }]);
+    expect(wrapper.vm.courseMembers).toEqual([{ test: "test" }]);
+    expect(wrapper.vm.$emit).toHaveBeenCalled();
+  });
+  it("updateCourseSelected should call getCourseRegistrationsById", async () => {
+    const wrapper = shallowMount(SelectAddStudentsToCourseDialog, {
+      propsData: {
+        value: [],
+        selectedMembers: [],
+      },
+      vuetify,
+    });
+    wrapper.vm.$emit = jest.fn();
+    CourseService.getCourseRegistrationsById = jest
+      .fn()
+      .mockResolvedValue({ registrations: [{ id: 1 }] });
+    await wrapper.vm.updateCourseSelected([{ id: 1, test: "test" }]);
+    expect(wrapper.vm.courseRegistrations).toEqual([{ id: 1 }]);
+    expect(wrapper.vm.$emit).toHaveBeenCalled();
+
+    await wrapper.vm.updateCourseSelected(false);
+    expect(wrapper.vm.course).toEqual({ name: "", startDate: "" });
+  });
+  it("addSelectedUsersToSelectedCourses should call addStudentsToCourses", async () => {
+    const wrapper = shallowMount(SelectAddStudentsToCourseDialog, {
+      propsData: {
+        value: [],
+        selectedMembers: [],
+      },
+      vuetify,
+    });
+    wrapper.vm.$emit = jest.fn();
+    CourseService.addStudentsToCourses = jest.fn();
+    wrapper.vm.updateCourseMembers = jest.fn();
+    wrapper.vm.$refs.courseSelect.clear = jest.fn();
+    await wrapper.vm.addSelectedUsersToSelectedCourses();
+    expect(CourseService.addStudentsToCourses).toHaveBeenCalled();
+    expect(wrapper.vm.isAddingBusy).toEqual(false);
+    expect(wrapper.vm.isAdding).toEqual(false);
+    expect(wrapper.vm.course).toEqual({ name: "", startDate: "" });
+    expect(wrapper.vm.updateCourseMembers).toHaveBeenCalled();
+    expect(wrapper.vm.$emit).toHaveBeenCalled();
+    expect(wrapper.vm.$refs.courseSelect.clear).toHaveBeenCalled();
+  });
+  it("addSelectedUsersToSelectedCourses should handle error call addStudentsToCourses ", async () => {
+    const wrapper = shallowMount(SelectAddStudentsToCourseDialog, {
+      propsData: {
+        value: [],
+        selectedMembers: [],
+      },
+      mocks: {
+        $store: {
+          commit: jest.fn(),
+        },
+      },
+      vuetify,
+    });
+    wrapper.vm.$emit = jest.fn();
+    console.error = jest.fn();
+    CourseService.addStudentsToCourses = jest.fn().mockRejectedValue();
+    wrapper.vm.updateCourseMembers = jest.fn();
+    wrapper.vm.$refs.courseSelect.clear = jest.fn();
+    await wrapper.vm.addSelectedUsersToSelectedCourses();
+    expect(console.error).toHaveBeenCalled();
+    expect(wrapper.vm.$store.commit).toHaveBeenCalled();
+    expect(CourseService.addStudentsToCourses).toHaveBeenCalled();
+    expect(wrapper.vm.isAddingBusy).toEqual(false);
+    expect(wrapper.vm.isAdding).toEqual(false);
+    expect(wrapper.vm.course).toEqual({ name: "", startDate: "" });
+    expect(wrapper.vm.updateCourseMembers).toHaveBeenCalled();
+    expect(wrapper.vm.$emit).toHaveBeenCalled();
+    expect(wrapper.vm.$refs.courseSelect.clear).toHaveBeenCalled();
+  });
+});
diff --git a/tests/unit/components/Training/TrainingAttendance.spec.js b/tests/unit/components/Training/TrainingAttendance.spec.js
index 0ef6d355670ef4b1dcee4ccdd22ed58ab729a434..cce70caf465359e7502b07940ac3496493f1cf72 100644
--- a/tests/unit/components/Training/TrainingAttendance.spec.js
+++ b/tests/unit/components/Training/TrainingAttendance.spec.js
@@ -455,6 +455,7 @@ describe("TrainingAttendance", () => {
     });
     expect(wrapper.vm.$store.commit).toHaveBeenCalledTimes(1);
   });
+
   it("should call fetchDebounced when options change", async () => {
     TrainingService.getCourseRegistrationsById = jest
       .fn()
@@ -482,71 +483,6 @@ describe("TrainingAttendance", () => {
 
     wrapper.vm.fetchDebounced = jest.fn();
 
-    // trigger the watch for wrapper.vm.options
-    const mockOptions = { itemsPerPage: 46 };
-    wrapper.vm.options = mockOptions;
-    await wrapper.vm.$nextTick();
-
-    expect(wrapper.vm.fetchDebounced).toHaveBeenCalledTimes(1);
-    expect(wrapper.vm.params.pageSize).toEqual(mockOptions.itemsPerPage);
-  });
-
-  it("should not call fetchDebounced if options don't change", async () => {
-    TrainingService.getCourseRegistrationsById = jest
-      .fn()
-      .mockResolvedValue({ registrations: [] });
-    const wrapper = shallowMount(TrainingAttendance, {
-      mocks: {
-        $store: {
-          state: {
-            error: {},
-          },
-          commit: jest.fn(),
-        },
-      },
-      propsData,
-      localVue,
-      vuetify,
-    });
-    await flushPromises();
-
-    wrapper.vm.fetchDebounced = jest.fn();
-
-    // trigger the watch for wrapper.vm.options
-    wrapper.vm.options = { ...wrapper.vm.options };
-    await wrapper.vm.$nextTick();
-
-    // since the old and new options are equal, fetchDebounced should not hae been called
-    expect(wrapper.vm.fetchDebounced).toHaveBeenCalledTimes(0);
-  });
-
-  it("should call fetchDebounced when reload changes", async () => {
-    TrainingService.getCourseRegistrationsById = jest
-      .fn()
-      .mockResolvedValue({ registrations: [] });
-    const wrapper = shallowMount(TrainingAttendance, {
-      mocks: {
-        $store: {
-          state: {
-            error: {},
-          },
-          commit: jest.fn(),
-        },
-      },
-      data() {
-        return {
-          selectedUsers: [{ userId: 1 }, { userId: 2 }],
-          listItems: [{ userId: 1 }, { userId: 2 }, { userId: 3 }],
-        };
-      },
-      propsData: { ...propsData, reload: 0 },
-      localVue,
-      vuetify,
-    });
-    await flushPromises();
-
-    wrapper.vm.fetchDebounced = jest.fn();
-
     // trigger the watch for wrapper.vm.options
     await wrapper.setProps({ reload: 1 });
     expect(wrapper.vm.fetchDebounced).toHaveBeenCalledTimes(1);