diff --git a/src/api/services/training.js b/src/api/services/training.js
index 23e980018897546cf051dcac4181a3a74c14452c..7c3bc9ec0e9cd3a9f4fb92165e50fcb645efba3f 100644
--- a/src/api/services/training.js
+++ b/src/api/services/training.js
@@ -50,10 +50,14 @@ export default {
       await this.addStudent(courseId, { userId: student.id });
     }
   },
+  async addStudentsToCourses(courses, students) {
+    for (const { id: courseId } of courses) {
+      await this.addStudents(courseId, students);
+    }
+  },
   async exportCourses() {
     window.open("/api/courses/export");
   },
-
   async getCourseRegistrationsById(courseId, params) {
     return await HTTP.get(`/courses/${courseId}/registrations`, {
       params,
diff --git a/src/components/CourseSelect.vue b/src/components/CourseSelect.vue
new file mode 100644
index 0000000000000000000000000000000000000000..30e1f07f84e28dccbcdc104fb50192cf466f7e72
--- /dev/null
+++ b/src/components/CourseSelect.vue
@@ -0,0 +1,191 @@
+<template>
+  <v-autocomplete
+    v-model="model"
+    ref="courseAutocomplete"
+    :loading="loading"
+    :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 a course"
+    prepend-icon="mdi-television-guide"
+    @click:prepend="setInputElementFocus($refs.courseAutocomplete)"
+    class="course-select-component"
+  >
+    <ErrorMessage />
+    <template v-slot:selection="data">
+      <v-chip
+        v-bind="data.attr"
+        :input-value="data.selected"
+        :close="multiple"
+        @click:close="remove(data.item)"
+      >
+        <v-avatar left>
+          <img
+            v-if="data.item.avatar"
+            :src="data.item.avatar"
+            :alt="data.item.name"
+          />
+          <!-- change this icon to something for a course -->
+          <v-icon v-else>mdi-television-guide</v-icon>
+        </v-avatar>
+        <span v-text="data.item.name"></span>
+      </v-chip>
+    </template>
+
+    <template v-slot:item="{ item }">
+      <!-- do courses need an avatar? not sure -->
+      <v-list-item-avatar>
+        <img v-if="item.avatar" :src="item.avatar" :alt="data.item.name" />
+        <!-- change this icon to something for a course -->
+        <v-icon x-large v-else>mdi-television-guide</v-icon>
+      </v-list-item-avatar>
+      <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 CourseService from "@/api/services/training";
+import uniq from "lodash/uniq";
+import { setInputElementFocus } from "@/utils/events";
+import ErrorMessage from "@/components/APIErrorDialog";
+import { SET_ERROR_MESSAGE, SET_ERROR_DIALOG } 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,
+  },
+  components: {
+    ErrorMessage,
+  },
+  data: () => ({
+    loading: false,
+    items: [],
+    search: "",
+    model: null, // array of selected courses
+  }),
+  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 = [];
+      }
+    },
+    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 CourseService.getCourses({ q: val });
+        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 (e) {
+        this.$store.commit(SET_ERROR_MESSAGE, e);
+        this.$store.commit(SET_ERROR_DIALOG, true);
+        console.error("unable to get courses", e);
+        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..1db421bb31bfb29dda64379be0faceb7b4111e3f 100644
--- a/src/views/Team.vue
+++ b/src/views/Team.vue
@@ -103,6 +103,68 @@
               </div>
             </div>
 
+            <!-- 
+              COURSE SELECT DIALOG
+            -->
+            <v-dialog
+              v-model="state.addToSelectedCourseFeature.ui.isAdding"
+              persistent
+              no-click-animation
+              max-width="500px"
+            >
+              <v-card>
+                <v-card-title>
+                  <span class="headline"
+                    >Add selected users to the following selected courses</span
+                  >
+                </v-card-title>
+
+                <v-card-text>
+                  <CourseSelect
+                    ref="courseSelect"
+                    v-model="
+                      state.addToSelectedCourseFeature.data
+                        .coursesToAddSelectedUsersTo
+                    "
+                    multiple
+                  />
+                </v-card-text>
+
+                <v-card-actions>
+                  <v-spacer></v-spacer>
+                  <v-btn
+                    color=""
+                    :disabled="state.isAddingBusy"
+                    text
+                    @click="closeDialogAddUsersToCourse()"
+                  >
+                    Cancel
+                  </v-btn>
+                  <v-btn
+                    :disabled="!isCourseSelected"
+                    color="primary"
+                    :loading="state.isAddingBusy"
+                    text
+                    @click="addSelectedUsersToSelectedCourses()"
+                  >
+                    {{
+                      isCourseSelected
+                        ? "Add To Course" +
+                          (areMultipleCoursesSelected ? "s" : "")
+                        : "No Course Selected"
+                    }}
+                  </v-btn>
+                </v-card-actions>
+              </v-card>
+            </v-dialog>
+
+            <!-- 
+              COURSE SELECT DIALOG END              
+            -->
+
+            <!-- 
+              USER SELECT DIALOG
+             -->
             <v-dialog
               v-model="state.isAdding"
               persistent
@@ -154,6 +216,9 @@
                 </v-card-actions>
               </v-card>
             </v-dialog>
+            <!-- 
+              USER SELECT DIALOG END 
+             -->
           </template>
 
           <template v-slot:[`item.name`]="{ item }">
@@ -190,7 +255,7 @@
                 Remove Selected
               </v-btn>
               <v-btn
-                class="no-link"
+                class="no-link mr-3"
                 :link="false"
                 :href="emailSelectedHref"
                 target="_blank"
@@ -199,6 +264,15 @@
                 <v-icon class="mr-2">mdi-email</v-icon>
                 Email Selected
               </v-btn>
+              <v-btn
+                class="no-link"
+                :link="false"
+                @click="openDialogAddUsersToCourse()"
+                :disabled="selectedMembers.length === 0"
+              >
+                <v-icon class="mr-2">mdi-plus</v-icon>
+                Add To Course
+              </v-btn>
             </div>
           </template>
         </v-data-table>
@@ -251,7 +325,9 @@
 <script>
 import Vue from "vue";
 import TeamService from "@/api/services/team";
+import CourseService from "@/api/services/training";
 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";
@@ -260,7 +336,7 @@ 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: {},
@@ -290,6 +366,23 @@ export default {
       isAdding: false,
       isAddingDuplicate: false,
       isAddingBusy: false,
+      /* 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,
+        },
+      },
     },
     headers: [
       { text: "Name", value: "name", width: "200px", fixed: true },
@@ -306,6 +399,35 @@ export default {
     this.init();
   },
   methods: {
+    async openDialogAddUsersToCourse() {
+      this.state.addToSelectedCourseFeature.ui.isAdding = true;
+      this.state.addToSelectedCourseFeature.ui.isAddingDuplicate = false;
+    },
+    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 = [];
+      }
+    },
+    async closeDialogAddUsersToCourse() {
+      this.$refs.courseSelect && this.$refs.courseSelect.clear();
+      this.state.addToSelectedCourseFeature.ui.isAdding = false;
+      this.state.addToSelectedCourseFeature.ui.isAddingDuplicate = false;
+    },
     async init() {
       let isTeamLead = false;
       try {
@@ -449,6 +571,22 @@ export default {
     },
   },
   computed: {
+    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
+      );
+    },
     canEdit() {
       // TODO: pull this from user info
       return true;
diff --git a/tests/unit/components/CourseSelect.spec.js b/tests/unit/components/CourseSelect.spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..e0adc2dfd9663acbc6a6b8e694c1edc99f9cec8c
--- /dev/null
+++ b/tests/unit/components/CourseSelect.spec.js
@@ -0,0 +1,143 @@
+import { mount, createLocalVue } from "@vue/test-utils";
+import Vuetify from "vuetify";
+import Vuex from "vuex";
+import CourseSelect from "@/components/CourseSelect";
+import CourseService from "@/api/services/training";
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+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,
+    });
+    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,
+    });
+    expect(wrapper.vm.model).toBeNull();
+  });
+
+  it("should compute hint", async () => {
+    const wrapper = mount(CourseSelect, {
+      propsData: {},
+      vuetify,
+    });
+
+    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,
+    });
+
+    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,
+    });
+
+    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,
+    });
+
+    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,
+    });
+
+    CourseService.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
+    const wrapper = mount(
+      CourseSelect,
+      {
+        vuetify,
+        mocks: {
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+      },
+      localVue
+    );
+    CourseService.getCourses = jest.fn().mockRejectedValue("mock error");
+    await wrapper.vm.query();
+    expect(wrapper.vm.items).toEqual([]);
+  });
+});