diff --git a/package-lock.json b/package-lock.json
index d2ec40958c655774456dba5880817947a8c55dd4..4d7b77158d2fd4be4825a18a341675e518d3b478 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10607,12 +10607,6 @@
       "integrity": "sha512-HRcs+2mr52W0K+x8RzcLzuPPmVIKMSv97RGHy0Ea9y/mpcaK+xTrjICA04KAHi4GRzxliNqNJEFYWHghy3rSfQ==",
       "dev": true
     },
-    "hosted-git-info": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
-      "integrity": "sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==",
-      "dev": true
-    },
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -13612,7 +13606,6 @@
           "version": "3.0.8",
           "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
           "integrity": "sha512-aXpmwoOhRBrw6X3j0h5RloK4x1OzsxMPyxqIHyNfSe2pypkVTZFpEiRoSipPEPlMrh0HW/XsjkJ5WgnCirpNUw==",
-          "dev": true,
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -13621,7 +13614,6 @@
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
           "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-          "dev": true,
           "requires": {
             "yallist": "^4.0.0"
           }
@@ -13636,6 +13628,17 @@
             "resolve": "^1.17.0",
             "semver": "^7.3.2",
             "validate-npm-package-license": "^3.0.1"
+          },
+          "dependencies": {
+            "hosted-git-info": {
+              "version": "3.0.8",
+              "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
+              "integrity": "sha512-aXpmwoOhRBrw6X3j0h5RloK4x1OzsxMPyxqIHyNfSe2pypkVTZFpEiRoSipPEPlMrh0HW/XsjkJ5WgnCirpNUw==",
+              "dev": true,
+              "requires": {
+                "lru-cache": "^6.0.0"
+              }
+            }
           }
         },
         "read-pkg-up": {
@@ -13675,8 +13678,7 @@
         "yallist": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-          "dev": true
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
         },
         "yargs-parser": {
           "version": "18.1.3",
@@ -14261,6 +14263,32 @@
         "resolve": "^1.10.0",
         "semver": "2 || 3 || 4 || 5",
         "validate-npm-package-license": "^3.0.1"
+      },
+      "dependencies": {
+        "hosted-git-info": {
+          "version": "3.0.8",
+          "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.8.tgz",
+          "integrity": "sha512-aXpmwoOhRBrw6X3j0h5RloK4x1OzsxMPyxqIHyNfSe2pypkVTZFpEiRoSipPEPlMrh0HW/XsjkJ5WgnCirpNUw==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
+        }
       }
     },
     "normalize-path": {
diff --git a/package.json b/package.json
index 3f7063c2c6d6e75f3f456346c2476f0b37395634..6e37f4b3bc7bcc253f8a152b830e059b4635f331 100644
--- a/package.json
+++ b/package.json
@@ -149,6 +149,7 @@
     "ajv": "^6.12.6",
     "browserslist": "^4.16.5",
     "faye-websocket": "^0.11.3",
+    "hosted-git-info": "^3.0.8",
     "http-proxy": "^1.18.1",
     "ini": "^1.3.6",
     "is-svg": "^4.3.1",
diff --git a/src/components/InstructorCourses.vue b/src/components/InstructorCourses.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d8d3750b39af12b58309aaf5f76d226f98baeaa2
--- /dev/null
+++ b/src/components/InstructorCourses.vue
@@ -0,0 +1,107 @@
+<template>
+  <v-container class="curriculum-schedule text-left px-2">
+    <v-skeleton-loader :loading="loading" type="paragraph@5" class="w-100">
+      <ErrorMessage v-if="error" v-bind:errorMessage="errorMessage" />
+      <v-card v-if="emptyString">
+        <v-card-title
+          >There currently are no current or upcoming courses.</v-card-title
+        >
+        <v-card-text
+          >Courses in progress or upcoming will appear here.</v-card-text
+        >
+      </v-card>
+      <v-container class="px-6" v-else>
+        <div
+          v-for="(item, index) in schedule"
+          :key="index"
+          :class="{ last: index == schedule.length - 1 }"
+        >
+          <div
+            v-if="inDateRange(item.startDate, item.endDate)"
+            class="dot dot-white"
+          ></div>
+          <div v-else class="dot dot-green"></div>
+          <div class="d-flex col-12 py-0 class-container">
+            <div
+              v-if="inDateRange(item.startDate, item.endDate)"
+              class="dot-border dot-border-white col-1 d-inline-block"
+            ></div>
+            <div
+              v-else
+              class="dot-border dot-border-green col-1 d-inline-block"
+            ></div>
+
+            <div
+              class="col-sm col-3 d-inline-block d-flex align-start class-name"
+            >
+              {{ item.name }}
+            </div>
+
+            <div class="col-sm col-4 d-inline-block resText">
+              {{ item.startDate }} - {{ item.endDate }}
+            </div>
+            <div class="col-sm col-4 d-inline-block resText">
+              <div v-if="inDateRange(item.startDate, item.endDate)">
+                In Progress
+              </div>
+              <div v-else>
+                {{ seatsRemaining(item.capacity, item.registeredCount) }}
+                remaining seats
+              </div>
+            </div>
+          </div>
+        </div>
+      </v-container>
+    </v-skeleton-loader>
+  </v-container>
+</template>
+
+<script>
+import TrainingService from "@/api/services/training";
+import moment from "moment";
+import { SET_ERROR_MESSAGE } from "@/store/mutation-types";
+import ErrorMessage from "@/components/APIErrorCard";
+export default {
+  components: {
+    ErrorMessage,
+  },
+  data: () => ({
+    loading: false,
+    schedule: [],
+    emptyString: false,
+    errorMessage: null,
+    error: false,
+  }),
+  async mounted() {
+    this.params = {
+      registeredCount: true,
+      instructorOf: true,
+      dateFrom: `${moment().format("YYYY-MM-DD")}`,
+      dateTo: `${moment().add(6, "months").format("YYYY-MM-DD")}`,
+      sort: "startDate",
+    };
+    try {
+      this.loading = true;
+      const response = await TrainingService.getCourses(this.params);
+      this.schedule = response.courses;
+      if (this.schedule.length === 0) {
+        this.emptyString = true;
+      }
+    } catch (error) {
+      this.error = true;
+      this.$store.commit(SET_ERROR_MESSAGE, error);
+      this.errorMessage = error;
+    } finally {
+      this.loading = false;
+    }
+  },
+  methods: {
+    inDateRange(startDate, endDate) {
+      return moment().isBetween(startDate, endDate);
+    },
+    seatsRemaining(capacity, registered) {
+      return capacity - registered;
+    },
+  },
+};
+</script>