diff --git a/src/components/APIErrorCard.vue b/src/components/APIErrorCard.vue
index 162756abab62fc5b323c3a0d316a8bea61110c31..b35b6f3b3d42476ce3a80bce0067d8c2920e7793 100644
--- a/src/components/APIErrorCard.vue
+++ b/src/components/APIErrorCard.vue
@@ -19,7 +19,7 @@
       </v-card-text>
       <v-btn
         href="https://jira.il2.dso.mil/servicedesk/customer/portal/1/create/137"
-        target = "_blank"
+        target="_blank"
         id="help_desk"
         class="primary mb-5"
         >Submit Ticket
@@ -39,7 +39,7 @@
         <v-col class="d-flex justify-center align-center">
           <v-btn
             href="https://jira.il2.dso.mil/servicedesk/customer/portal/1/create/137"
-            target = "_blank"
+            target="_blank"
             id="help_desk"
             class="primary"
             >Submit Ticket
diff --git a/src/components/CourseSelect.vue b/src/components/CourseSelect.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0db2adfc39fa45262e0db71c5d303a8b08807a05
--- /dev/null
+++ b/src/components/CourseSelect.vue
@@ -0,0 +1,175 @@
+<template>
+  <v-autocomplete
+    v-model="model"
+    ref="courseAutocomplete"
+    :loading="loading"
+    :items="Array.isArray(items) ? items : []"
+    :search-input.sync="search"
+    :rules="rules"
+    :multiple="multiple"
+    :label="label"
+    item-text="name"
+    return-object
+    required
+    :hint="hint"
+    :persistent-hint="true"
+    clearable
+    hide-no-data
+    hide-selected
+    @change="modelChanged"
+    placeholder="Start typing to find course"
+    @click:prepend="setInputElementFocus($refs.courseAutocomplete)"
+    class="course-select-component"
+  >
+    <template v-slot:selection="data">
+      <v-chip
+        v-bind="data.attr"
+        :input-value="data.selected"
+        :close="multiple"
+        @click:close="remove(data.item)"
+      >
+        <span v-text="data.item.name"></span>
+      </v-chip>
+    </template>
+
+    <template v-slot:item="{ item }">
+      <v-list-item-content>
+        <v-list-item-title
+          class="text-left"
+          v-html="item.name"
+        ></v-list-item-title>
+        <v-list-item-subtitle
+          class="text-left"
+          v-html="item.email"
+        ></v-list-item-subtitle>
+      </v-list-item-content>
+    </template>
+  </v-autocomplete>
+</template>
+
+<script>
+import TrainingService from "@/api/services/training";
+import uniq from "lodash/uniq";
+import { setInputElementFocus } from "@/utils/events";
+import { SET_ERROR_MESSAGE } from "@/store/mutation-types";
+
+export default {
+  props: {
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    preload: {
+      type: Boolean,
+      default: false,
+    },
+    rules: Array,
+    label: String,
+    value: [Object, Array],
+    preloadData: Array,
+    onChange: Function,
+  },
+  data: () => ({
+    loading: false,
+    items: [],
+    search: "",
+    model: null, // array of selected courses if multiple===true
+  }),
+  created() {
+    if (this.value) {
+      this.model = this.value;
+      this.items = this.value;
+    }
+  },
+  computed: {
+    hint() {
+      if (this.loading) {
+        return "";
+      }
+      if (this.items.length === 0 && this.search) {
+        return "No matching courses found";
+      }
+      return "";
+    },
+  },
+  watch: {
+    search(val) {
+      if (val) {
+        this.queryDebounced(val);
+      }
+    },
+  },
+  methods: {
+    setInputElementFocus,
+    clear() {
+      this.search = null;
+      this.model = null;
+      this.items = [];
+    },
+    remove(item) {
+      const index = this.model.indexOf(item);
+      if (index >= 0) {
+        this.model.splice(index, 1);
+      }
+      this.modelChanged();
+    },
+    modelChanged() {
+      this.$emit("input", this.model);
+      // reset the search text
+      this.search = null;
+      // sync the items based on the current model
+      if (this.multiple) {
+        this.items = this.model;
+      } else if (this.model) {
+        this.items = [this.model];
+      } else {
+        this.items = [];
+      }
+      if (this.onChange) {
+        this.onChange(this.model);
+      }
+    },
+    queryDebounced(val) {
+      // cancel pending call
+      clearTimeout(this._timerId);
+
+      this.loading = true;
+      // delay new call
+      this._timerId = setTimeout(() => {
+        this.query(val);
+      }, 400);
+    },
+    async query(val) {
+      try {
+        const newItems = await TrainingService.getCourses({
+          q: val,
+          registeredCount: true,
+        });
+        if (this.model) {
+          if (Array.isArray(this.model)) {
+            this.items = uniq([...newItems.courses, ...this.model]);
+          } else {
+            this.items = uniq([...newItems.courses, this.model]);
+          }
+        } else {
+          this.items = newItems.courses;
+        }
+      } catch (error) {
+        this.$store.commit(SET_ERROR_MESSAGE, error);
+        this.items = [];
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.course-select-component {
+  padding-top: 14px;
+}
+</style>
diff --git a/src/views/Team.vue b/src/views/Team.vue
index 4478231f25a5988808ed616b0d80c65bb670e857..5d10df656d494932604b93cc062a8ca1bebca919 100644
--- a/src/views/Team.vue
+++ b/src/views/Team.vue
@@ -104,52 +104,82 @@
             </div>
 
             <v-dialog
-              v-model="state.isAdding"
+              v-if="state.isAddingCourse"
+              v-model="state.isAddingCourse"
               persistent
               no-click-animation
               max-width="500px"
+              content-class="mx-0 mx-sm-4"
             >
               <v-card>
-                <v-card-title>
-                  <span class="headline"
-                    >Add new member to {{ team.name }}</span
-                  >
+                <v-card-title class="d-flex flex-column mb-8">
+                  <div class="mt-2 mb-1">
+                    <img
+                      src="@/assets/images/logos/Logo_P1_Yodahead-WH.png"
+                      alt="Platform One Smokey"
+                    />
+                  </div>
+                  <h3>Add to Course</h3>
                 </v-card-title>
 
                 <v-card-text>
+                  <CourseSelect
+                    ref="courseSelect"
+                    v-model="addToCourse.course"
+                    :rules="[inputRules.required]"
+                    :onChange="onCourseChange"
+                  />
+                  <v-select
+                    :placeholder="
+                      !startDateList || startDateList.length === 0
+                        ? 'No start date for current course'
+                        : 'Start date'
+                    "
+                    v-model="addToCourse.startDate"
+                    :rules="[inputRules.required]"
+                    :items="startDateList"
+                    prepend-icon="mdi-calendar"
+                  >
+                  </v-select>
                   <UserSelect
                     ref="userSelect"
-                    v-model="membersToAdd"
+                    v-model="membersToAddToCourse"
                     multiple
-                    :rules="[
-                      inputRules.required,
-                      inputRules.duplicates(
-                        membersToAdd,
-                        team.members,
-                        'User is already a member of this team'
-                      ),
-                    ]"
+                    :value="addToCourse.alreadyRegisteredUsers"
+                    :rules="[inputRules.required]"
                   />
+                  <span
+                    class="align-start pr-5 available-seats"
+                    v-if="availableCourseSeats"
+                  >
+                    You have
+                    {{ availableCourseSeats }}
+                    available seat reservation{{
+                      availableCourseSeats === 1 ? "" : "s"
+                    }}
+                  </span>
                 </v-card-text>
 
-                <v-card-actions>
-                  <v-spacer></v-spacer>
+                <v-card-actions class="justify-content-center pb-10">
                   <v-btn
-                    color=""
-                    :disabled="state.isAddingBusy"
-                    text
-                    @click="cancelAddMember()"
+                    :disabled="addBusy"
+                    @click="cancelAddUsersToCourse()"
+                    color="secondary"
                   >
                     Cancel
                   </v-btn>
                   <v-btn
-                    :disabled="state.isAddingDuplicate || !membersToAdd"
+                    :disabled="
+                      !addToCourse.course ||
+                      !addToCourse.startDate ||
+                      !membersToAddToCourse ||
+                      membersToAddToCourse.length === 0
+                    "
                     color="primary"
-                    :loading="state.isAddingBusy"
-                    text
-                    @click="addMember()"
+                    :loading="addBusy"
+                    @click="addUsersToCourse()"
                   >
-                    Add Member
+                    Add to Course
                   </v-btn>
                 </v-card-actions>
               </v-card>
@@ -190,7 +220,7 @@
                 Remove Selected
               </v-btn>
               <v-btn
-                class="no-link"
+                class="no-link mr-3"
                 :link="false"
                 :href="emailSelectedHref"
                 target="_blank"
@@ -199,6 +229,15 @@
                 <v-icon class="mr-2">mdi-email</v-icon>
                 Email Selected
               </v-btn>
+              <v-btn
+                class="no-link"
+                :disabled="availableSlots === 0 || state.isUndoingDelete"
+                @click="state.isAddingCourse = true"
+                v-if="permission"
+              >
+                <v-icon class="mr-2">mdi-plus-circle</v-icon>
+                Add to Course
+              </v-btn>
             </div>
           </template>
         </v-data-table>
@@ -252,15 +291,17 @@
 import Vue from "vue";
 import TeamService from "@/api/services/team";
 import UserSelect from "@/components/UserSelect";
+import CourseSelect from "@/components/CourseSelect";
 import AddTeam from "@/components/AddTeam";
 import { defaultSnackbarTimeout } from "@/config/config";
 import inputRules from "@/utils/inputRules";
 import Permission from "@/config/user-permissions";
+import TrainingService from "@/api/services/training";
 import ErrorMessage from "@/components/APIErrorDialog";
 import { SET_ERROR_MESSAGE, SET_ERROR_DIALOG } from "@/store/mutation-types";
 
 export default {
-  components: { UserSelect, AddTeam, ErrorMessage },
+  components: { UserSelect, CourseSelect, AddTeam, ErrorMessage },
   data: () => ({
     editValid: false,
     editValues: {},
@@ -276,6 +317,15 @@ export default {
       teamDetails: false,
       timeout: defaultSnackbarTimeout,
     },
+    addBusy: false,
+    addToCourse: {
+      course: null,
+      className: "",
+      startDate: "",
+      selectedCourse: "",
+      alreadyRegisteredUsers: [],
+    },
+    startDateList: [],
     state: {
       // edit team details flags
       showEditDialog: false,
@@ -290,6 +340,7 @@ export default {
       isAdding: false,
       isAddingDuplicate: false,
       isAddingBusy: false,
+      isAddingCourse: false,
     },
     headers: [
       { text: "Name", value: "name", width: "200px", fixed: true },
@@ -300,12 +351,50 @@ export default {
     selectedMembers: [],
     deletingMembers: [],
     membersToAdd: null,
+    membersToAddToCourse: null,
     inputRules,
   }),
   async mounted() {
     this.init();
   },
   methods: {
+    cancelAddUsersToCourse() {
+      this.state.isAddingCourse = false;
+      this.addToCourse.startDate = "";
+      this.membersToAddToCourse = null;
+    },
+    async addUsersToCourse() {
+      this.addBusy = true;
+      try {
+        const courseId = this.coursesByName.find(
+          ({ startDate }) => this.addToCourse.startDate === startDate
+        ).id;
+        await TrainingService.addStudents(courseId, this.membersToAddToCourse);
+      } catch (error) {
+        this.$store.commit(SET_ERROR_MESSAGE, error);
+      }
+      this.addBusy = false;
+      this.cancelAddUsersToCourse();
+    },
+    async onCourseChange(course) {
+      try {
+        this.addToCourse.startDate = "";
+        if (course && course.name) {
+          const response = await TrainingService.getCourses({
+            q: course.name,
+            registrations: true,
+          });
+          this.coursesByName = response.courses;
+          this.startDateList = this.coursesByName
+            ? this.coursesByName.map(({ startDate }) => startDate)
+            : [];
+        } else {
+          this.startDateList = [];
+        }
+      } catch (error) {
+        this.$store.commit(SET_ERROR_MESSAGE, error);
+      }
+    },
     async init() {
       let isTeamLead = false;
       try {
@@ -449,6 +538,13 @@ export default {
     },
   },
   computed: {
+    availableCourseSeats() {
+      return this.addToCourse?.course?.registeredCount !== undefined &&
+        this.addToCourse?.course?.capacity !== undefined
+        ? this.addToCourse.course.capacity -
+            this.addToCourse.course.registeredCount
+        : null;
+    },
     canEdit() {
       // TODO: pull this from user info
       return true;
diff --git a/src/views/super-admin/Training.vue b/src/views/super-admin/Training.vue
index 06e7d7486a41906c956cc37fa2d2a137d89a99fc..eb6ac4e87d34623fb28c17a0003f771cd302ca22 100644
--- a/src/views/super-admin/Training.vue
+++ b/src/views/super-admin/Training.vue
@@ -90,6 +90,7 @@
                       @change="fetchDebounced()"
                       v-model="filter.courseType"
                       label="Filter by Course Type"
+                      class="mt-3"
                     ></v-select>
                   </div>
                 </v-col>
@@ -490,10 +491,6 @@ export default {
 };
 </script>
 <style lang="scss">
-#app .v-select__selections {
-  height: 39px;
-}
-
 #training-table {
   .availability-bar {
     min-width: 120px;
diff --git a/tests/unit/components/CourseSelect.spec.js b/tests/unit/components/CourseSelect.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..dbd042231c9f4dcb854b7bb4e68faf127f6b3031
--- /dev/null
+++ b/tests/unit/components/CourseSelect.spec.js
@@ -0,0 +1,199 @@
+import { mount } from "@vue/test-utils";
+import Vuetify from "vuetify";
+import CourseSelect from "@/components/CourseSelect";
+import TrainingService from "@/api/services/training";
+
+describe("CourseSelect", () => {
+  // vuetify has to be mocked for the v-autocomplete to not crash
+  let vuetify;
+  beforeEach(() => {
+    vuetify = new Vuetify();
+  });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should clear items on clear", async () => {
+    const wrapper = mount(CourseSelect, {
+      propsData: { value: [] },
+      vuetify,
+      mocks: {
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+    });
+    wrapper.vm.items = [1, 2, 3];
+
+    wrapper.vm.clear();
+    expect(wrapper.vm.items).toHaveLength(0);
+  });
+
+  it("should accept blank value prop", async () => {
+    const wrapper = mount(CourseSelect, {
+      propsData: {},
+      vuetify,
+      mocks: {
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+    });
+    expect(wrapper.vm.model).toBeNull();
+  });
+
+  it("should compute hint", async () => {
+    const wrapper = mount(CourseSelect, {
+      propsData: {},
+      vuetify,
+      mocks: {
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+      data() {
+        return { search: "" };
+      },
+    });
+
+    wrapper.vm.loading = true;
+    expect(wrapper.vm.hint).toEqual("");
+
+    wrapper.vm.loading = false;
+    expect(wrapper.vm.hint).toEqual("");
+
+    wrapper.vm.search = "mock";
+    expect(wrapper.vm.hint).toEqual("No matching courses found");
+  });
+
+  it("should remove items", async () => {
+    const value = ["a", "b", "c"];
+    const wrapper = mount(CourseSelect, {
+      propsData: { value },
+      vuetify,
+      mocks: {
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+    });
+
+    wrapper.vm.remove("a");
+    await wrapper.vm.$nextTick();
+    expect(value).toEqual(["b", "c"]);
+
+    wrapper.vm.remove("d");
+    await wrapper.vm.$nextTick();
+    expect(value).toEqual(["b", "c"]);
+  });
+
+  it("should set items on model change", async () => {
+    let wrapper = mount(CourseSelect, {
+      vuetify,
+      mocks: {
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+      propsData: {
+        onChange: jest.fn(),
+      },
+    });
+
+    wrapper.vm.items = null;
+    wrapper.vm.model = "a";
+    wrapper.vm.modelChanged();
+    expect(wrapper.vm.items).toEqual(["a"]);
+
+    wrapper.vm.items = null;
+    wrapper.vm.model = null;
+    wrapper.vm.modelChanged();
+    expect(wrapper.vm.items).toEqual([]);
+
+    wrapper = mount(CourseSelect, {
+      propsData: {
+        multiple: true,
+      },
+      vuetify,
+      mocks: {
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+    });
+
+    wrapper.vm.model = ["a", "b", "c"];
+    wrapper.vm.items = null;
+    wrapper.vm.multiple = true;
+    wrapper.vm.modelChanged();
+    expect(wrapper.vm.items).toEqual(["a", "b", "c"]);
+  });
+
+  it("should set items on query results", async () => {
+    const wrapper = mount(CourseSelect, {
+      vuetify,
+      mocks: {
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+    });
+
+    TrainingService.getCourses = jest
+      .fn()
+      .mockResolvedValue({ courses: ["a"] });
+
+    // multiple model
+    wrapper.vm.model = ["b", "c"];
+    await wrapper.vm.query();
+    expect(wrapper.vm.items).toEqual(["a", "b", "c"]);
+
+    // single model
+    wrapper.vm.model = "b";
+    await wrapper.vm.query();
+    expect(wrapper.vm.items).toEqual(["a", "b"]);
+
+    // null model
+    wrapper.vm.model = null;
+    await wrapper.vm.query();
+    expect(wrapper.vm.items).toEqual(["a"]);
+  });
+  it("should set items to empty array on error", async () => {
+    console.error = jest.fn(); // mock console.error when expecting error messages
+    TrainingService.getCourses = jest.fn().mockRejectedValue("mock error");
+    const wrapper = mount(CourseSelect, {
+      vuetify,
+      mocks: {
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
+    });
+    await wrapper.vm.query();
+    expect(wrapper.vm.items).toEqual([]);
+  });
+});
diff --git a/tests/unit/views/Team.spec.js b/tests/unit/views/Team.spec.js
index 62320a51cf922e78e715b73c44b8c4786102edc3..30ce1c09765680eaf3d6a4d2aa1585dd6559a22e 100644
--- a/tests/unit/views/Team.spec.js
+++ b/tests/unit/views/Team.spec.js
@@ -3,6 +3,7 @@ import Vuex from "vuex";
 import Permission from "@/config/user-permissions";
 import Team from "@/views/Team.vue";
 import TeamService from "@/api/services/team";
+import TrainingService from "@/api/services/training";
 import flushPromises from "flush-promises";
 import { SET_ERROR_MESSAGE } from "@/store/mutation-types";
 
@@ -148,7 +149,16 @@ describe("Team", () => {
     });
 
     const wrapper = shallowMount(Team, {
-      mocks: { $route: blankRoute, $router },
+      mocks: {
+        $route: blankRoute,
+        $router,
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
       store,
       localVue,
     });
@@ -168,7 +178,15 @@ describe("Team", () => {
 
     TeamService.getTeamForUser = jest.fn().mockRejectedValue("mock error");
     const wrapper = shallowMount(Team, {
-      mocks: { $route },
+      mocks: {
+        $route,
+        $store: {
+          state: {
+            error: {},
+          },
+          commit: jest.fn(),
+        },
+      },
       store,
       localVue,
     });
@@ -681,4 +699,256 @@ describe("undo delete team member", () => {
       "mock error"
     );
   });
+
+  describe("add users to course", () => {
+    it("should cancel add users to course", () => {
+      TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+        data() {
+          return {
+            state: { isAddingCourse: true },
+            addToCourse: {
+              startDate: "2021-10-10",
+            },
+            membersToAddToCourse: [],
+          };
+        },
+      });
+      wrapper.vm.cancelAddUsersToCourse();
+
+      expect(wrapper.vm.state.isAddingCourse).toEqual(false);
+      expect(wrapper.vm.addToCourse.startDate).toEqual("");
+      expect(wrapper.vm.membersToAddToCourse).toEqual(null);
+    });
+    it("should add users to course", async () => {
+      TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
+      TrainingService.addStudents = jest.fn().mockResolvedValue({ id: 1 });
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+        data() {
+          return {
+            state: { isAddingCourse: true },
+            addToCourse: {
+              startDate: "2021-10-10",
+            },
+            membersToAddToCourse: [{ id: 1 }],
+            coursesByName: [
+              { id: 1, name: "3 Day Course", startDate: "2021-10-10" },
+            ],
+          };
+        },
+      });
+      wrapper.vm.cancelAddUsersToCourse = jest.fn();
+      await flushPromises();
+      await wrapper.vm.addUsersToCourse();
+
+      expect(wrapper.vm.cancelAddUsersToCourse).toHaveBeenCalled();
+    });
+    it("should handle error for add users to course", async () => {
+      TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
+      TrainingService.addStudents = jest.fn().mockRejectedValue("mock error");
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+        data() {
+          return {
+            state: { isAddingCourse: true },
+            addToCourse: {
+              startDate: "2021-10-10",
+            },
+            membersToAddToCourse: [{ id: 1 }],
+            coursesByName: [
+              { id: 1, name: "3 Day Course", startDate: "2021-10-10" },
+            ],
+            addBusy: true,
+          };
+        },
+      });
+      wrapper.vm.cancelAddUsersToCourse = jest.fn();
+      await flushPromises();
+      await wrapper.vm.addUsersToCourse();
+
+      expect(wrapper.vm.addBusy).toEqual(false);
+    });
+  });
+  describe("get courses by name on course change", () => {
+    it("should get courses on course change", async () => {
+      TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
+      TrainingService.getCourses = jest.fn().mockResolvedValue({
+        courses: [
+          {
+            id: 1,
+            name: "3 Day Course",
+            startDate: "2021-10-10",
+            registeredCount: 5,
+            capacity: 20,
+          },
+          {
+            id: 2,
+            name: "3 Day Course",
+            startDate: "2021-10-15",
+            registeredCount: 2,
+            capacity: 20,
+          },
+        ],
+      });
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+        data() {
+          return {
+            state: { isAddingCourse: true },
+            addToCourse: {
+              startDate: "2021-10-10",
+              course: {
+                id: 3,
+                name: "3 Day Course",
+                registeredCount: 5,
+                capacity: 20,
+              },
+            },
+            membersToAddToCourse: [{ id: 1 }],
+            coursesByName: [
+              { id: 1, name: "3 Day Course", startDate: "2021-10-10" },
+            ],
+            addBusy: true,
+          };
+        },
+      });
+      await wrapper.vm.onCourseChange({ name: "3 Day Course" });
+
+      expect(wrapper.vm.startDateList).toEqual(["2021-10-10", "2021-10-15"]);
+      expect(wrapper.vm.availableCourseSeats).toEqual(15);
+    });
+
+    it("should set startDateList to empty array when no course", async () => {
+      TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
+      TrainingService.getCourses = jest.fn().mockResolvedValue({
+        courses: [
+          { id: 1, name: "3 Day Course", startDate: "2021-10-10" },
+          { id: 2, name: "3 Day Course", startDate: "2021-10-15" },
+        ],
+      });
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+        data() {
+          return {
+            state: { isAddingCourse: true },
+            addToCourse: {
+              startDate: "2021-10-10",
+            },
+            membersToAddToCourse: [{ id: 1 }],
+            coursesByName: [
+              { id: 1, name: "3 Day Course", startDate: "2021-10-10" },
+            ],
+            addBusy: true,
+          };
+        },
+      });
+      await wrapper.vm.onCourseChange({});
+
+      expect(wrapper.vm.startDateList).toEqual([]);
+    });
+    it("should set startDateList to empty array when no courses returned", async () => {
+      TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
+      TrainingService.getCourses = jest.fn().mockResolvedValue({});
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+        data() {
+          return {
+            state: { isAddingCourse: true },
+            addToCourse: {
+              startDate: "2021-10-10",
+            },
+            membersToAddToCourse: [{ id: 1 }],
+            coursesByName: [
+              { id: 1, name: "3 Day Course", startDate: "2021-10-10" },
+            ],
+            addBusy: true,
+          };
+        },
+      });
+      await wrapper.vm.onCourseChange({ name: "3 Day Course" });
+
+      expect(wrapper.vm.startDateList).toEqual([]);
+    });
+    it("should handle error for on course change", async () => {
+      TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
+      TrainingService.getCourses = jest.fn().mockRejectedValue("mock error");
+      const wrapper = shallowMount(Team, {
+        mocks: {
+          $route,
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+        data() {
+          return {
+            state: { isAddingCourse: true },
+            addToCourse: {
+              startDate: "2021-10-10",
+            },
+            membersToAddToCourse: [{ id: 1 }],
+            coursesByName: [
+              { id: 1, name: "3 Day Course", startDate: "2021-10-10" },
+            ],
+            addBusy: true,
+          };
+        },
+      });
+      await wrapper.vm.onCourseChange({ name: "3 Day Course" });
+
+      expect(wrapper.vm.addToCourse.startDate).toEqual("");
+    });
+  });
 });