diff --git a/package-lock.json b/package-lock.json
index 4f58fc5a2a05f1db0b4936fb3a6dcfca353dce27..cdf4f44670bd8a4c0571b6f8c882688b271b1ebc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3800,16 +3800,36 @@
       }
     },
     "@vue/cli-plugin-e2e-cypress": {
-      "version": "4.5.11",
-      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-e2e-cypress/-/cli-plugin-e2e-cypress-4.5.11.tgz",
-      "integrity": "sha512-0SjUlNpjXHyZRdBMrOSsSuWDIi4DyRVmJhkkBLUpGHJt1SSyWOY70NRfemhef2yJZVWyFA4GjN9Mn6xYAH6z/w==",
+      "version": "4.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/cli-plugin-e2e-cypress/-/cli-plugin-e2e-cypress-4.5.13.tgz",
+      "integrity": "sha512-7AyqCgDqgCj93QxkJYJG5YuXW07enHAYCdGZHPBHZKniIiq8VfvA6/ZT6TTU7DRr2/QxoIbXtbGnmNyDF/Urww==",
       "dev": true,
       "requires": {
-        "@vue/cli-shared-utils": "^4.5.11",
+        "@vue/cli-shared-utils": "^4.5.13",
         "cypress": "^3.8.3",
         "eslint-plugin-cypress": "^2.10.3"
       },
       "dependencies": {
+        "@vue/cli-shared-utils": {
+          "version": "4.5.13",
+          "resolved": "https://registry.npmjs.org/@vue/cli-shared-utils/-/cli-shared-utils-4.5.13.tgz",
+          "integrity": "sha512-HpnOrkLg42RFUsQGMJv26oTG3J3FmKtO2WSRhKIIL+1ok3w9OjGCtA3nMMXN27f9eX14TqO64M36DaiSZ1fSiw==",
+          "dev": true,
+          "requires": {
+            "@hapi/joi": "^15.0.1",
+            "chalk": "^2.4.2",
+            "execa": "^1.0.0",
+            "launch-editor": "^2.2.1",
+            "lru-cache": "^5.1.1",
+            "node-ipc": "^9.1.1",
+            "open": "^6.3.0",
+            "ora": "^3.4.0",
+            "read-pkg": "^5.1.1",
+            "request": "^2.88.2",
+            "semver": "^6.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
         "bluebird": {
           "version": "3.5.0",
           "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.0.tgz",
@@ -3863,6 +3883,21 @@
             "yauzl": "2.10.0"
           },
           "dependencies": {
+            "execa": {
+              "version": "0.10.0",
+              "resolved": "https://registry.npmjs.org/execa/-/execa-0.10.0.tgz",
+              "integrity": "sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==",
+              "dev": true,
+              "requires": {
+                "cross-spawn": "^6.0.0",
+                "get-stream": "^3.0.0",
+                "is-stream": "^1.1.0",
+                "npm-run-path": "^2.0.0",
+                "p-finally": "^1.0.0",
+                "signal-exit": "^3.0.0",
+                "strip-eof": "^1.0.0"
+              }
+            },
             "lodash": {
               "version": "4.17.21",
               "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -3875,11 +3910,33 @@
               "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
               "dev": true
             },
-            "moment": {
-              "version": "2.24.0",
-              "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
-              "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
-              "dev": true
+            "request": {
+              "version": "2.88.0",
+              "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
+              "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
+              "dev": true,
+              "requires": {
+                "aws-sign2": "~0.7.0",
+                "aws4": "^1.8.0",
+                "caseless": "~0.12.0",
+                "combined-stream": "~1.0.6",
+                "extend": "~3.0.2",
+                "forever-agent": "~0.6.1",
+                "form-data": "~2.3.2",
+                "har-validator": "~5.1.0",
+                "http-signature": "~1.2.0",
+                "is-typedarray": "~1.0.0",
+                "isstream": "~0.1.2",
+                "json-stringify-safe": "~5.0.1",
+                "mime-types": "~2.1.19",
+                "oauth-sign": "~0.9.0",
+                "performance-now": "^2.1.0",
+                "qs": "~6.5.2",
+                "safe-buffer": "^5.1.2",
+                "tough-cookie": "~2.4.3",
+                "tunnel-agent": "^0.6.0",
+                "uuid": "^3.3.2"
+              }
             }
           }
         },
@@ -3892,60 +3949,34 @@
             "ms": "^2.1.1"
           }
         },
-        "execa": {
-          "version": "0.10.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-0.10.0.tgz",
-          "integrity": "sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==",
-          "dev": true,
-          "requires": {
-            "cross-spawn": "^6.0.0",
-            "get-stream": "^3.0.0",
-            "is-stream": "^1.1.0",
-            "npm-run-path": "^2.0.0",
-            "p-finally": "^1.0.0",
-            "signal-exit": "^3.0.0",
-            "strip-eof": "^1.0.0"
-          }
-        },
         "get-stream": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
           "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
           "dev": true
         },
+        "lodash": {
+          "version": "4.17.21",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+          "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+        },
+        "moment": {
+          "version": "2.24.0",
+          "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+          "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
+          "dev": true
+        },
         "punycode": {
           "version": "1.4.1",
           "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
           "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
           "dev": true
         },
-        "request": {
-          "version": "2.88.0",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.88.0.tgz",
-          "integrity": "sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==",
-          "dev": true,
-          "requires": {
-            "aws-sign2": "~0.7.0",
-            "aws4": "^1.8.0",
-            "caseless": "~0.12.0",
-            "combined-stream": "~1.0.6",
-            "extend": "~3.0.2",
-            "forever-agent": "~0.6.1",
-            "form-data": "~2.3.2",
-            "har-validator": "~5.1.0",
-            "http-signature": "~1.2.0",
-            "is-typedarray": "~1.0.0",
-            "isstream": "~0.1.2",
-            "json-stringify-safe": "~5.0.1",
-            "mime-types": "~2.1.19",
-            "oauth-sign": "~0.9.0",
-            "performance-now": "^2.1.0",
-            "qs": "~6.5.2",
-            "safe-buffer": "^5.1.2",
-            "tough-cookie": "~2.4.3",
-            "tunnel-agent": "^0.6.0",
-            "uuid": "^3.3.2"
-          }
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
         },
         "tough-cookie": {
           "version": "2.4.3",
@@ -9278,9 +9309,9 @@
       }
     },
     "eslint-plugin-cypress": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-2.11.2.tgz",
-      "integrity": "sha512-1SergF1sGbVhsf7MYfOLiBhdOg6wqyeV9pXUAIDIffYTGMN3dTBQS9nFAzhLsHhO+Bn0GaVM1Ecm71XUidQ7VA==",
+      "version": "2.11.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-2.11.3.tgz",
+      "integrity": "sha512-hOoAid+XNFtpvOzZSNWP5LDrQBEJwbZwjib4XJ1KcRYKjeVj0mAmPmucG4Egli4j/aruv+Ow/acacoloWWCl9Q==",
       "dev": true,
       "requires": {
         "globals": "^11.12.0"
@@ -9788,6 +9819,11 @@
             "pend": "~1.2.0"
           }
         },
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+        },
         "mkdirp": {
           "version": "0.5.1",
           "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
@@ -18312,9 +18348,9 @@
           }
         },
         "faye-websocket": {
-          "version": "0.11.3",
-          "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.3.tgz",
-          "integrity": "sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==",
+          "version": "0.11.4",
+          "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+          "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
           "dev": true,
           "requires": {
             "websocket-driver": ">=0.5.1"
@@ -21365,9 +21401,9 @@
           },
           "dependencies": {
             "faye-websocket": {
-              "version": "0.11.3",
-              "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.3.tgz",
-              "integrity": "sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==",
+              "version": "0.11.4",
+              "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+              "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
               "dev": true,
               "requires": {
                 "websocket-driver": ">=0.5.1"
diff --git a/package.json b/package.json
index 214c33608b24b897287617ac3de300f5903e11d9..70faff0e2ae0fb958ce3d7503c0619c8523786fc 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "@babel/plugin-transform-strict-mode": "^7.12.13",
     "@mdi/font": "^5.9.55",
     "@vue/cli-plugin-babel": "^4.5.11",
-    "@vue/cli-plugin-e2e-cypress": "^4.5.11",
+    "@vue/cli-plugin-e2e-cypress": "^4.5.13",
     "@vue/cli-plugin-eslint": "^4.5.11",
     "@vue/cli-plugin-router": "^4.5.11",
     "@vue/cli-plugin-unit-jest": "^4.5.11",
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index ade1a8600d4ed3f5e24f133956a00256c33a2a1c..bb162c6ae048577461166b69a926245f79047ea8 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,8 +1,7 @@
 <template>
-  <div>
+  <div class="lb-nav">
     <v-app-bar
       id="app-bar"
-      app
       flat
       :hide-on-scroll="!menuVisible"
       height="102"
@@ -86,6 +85,21 @@
         </router-link>
       </div>
     </v-navigation-drawer>
+    <v-alert
+      dark
+      v-model="betaMessage"
+      dismissible
+      class="mb-0"
+      close-icon="mdi-close"
+      color="#15283A"
+    >
+      The Launchboard Team Management feature will be replaced by Keycloak
+      groups in the near future. At the time, membership will no longer be set
+      inside Launchboard. You may continue to use the Launchboard Team
+      Management feature for now and consider it a beta feature, but those
+      setting will be overridden by Keyclaok once it is used at the source of
+      truth for Teams in Launchboard.
+    </v-alert>
   </div>
 </template>
 <script>
@@ -118,6 +132,7 @@ export default {
   components: { Burger, TutorialTooltip },
   data: () => ({
     menuVisible: false,
+    betaMessage: true,
   }),
   computed: {
     navItems() {
@@ -199,7 +214,6 @@ export default {
   font-weight: 600;
   .nav-item {
     padding: 8px 6px;
-    margin: 0 16px;
     line-height: 16px;
     font-size: 1rem;
     font-weight: bold;
@@ -209,6 +223,12 @@ export default {
   }
 }
 
+.lb-nav {
+  .v-alert__wrapper {
+    align-items: baseline;
+  }
+}
+
 #app-bar {
   #p1-nav-logo {
     width: 220px;
@@ -225,5 +245,8 @@ export default {
       opacity: 0;
     }
   }
+  .v-alert__wrapper {
+    align-items: baseline;
+  }
 }
 </style>
diff --git a/src/scss/custom.scss b/src/scss/custom.scss
index 61767c93e7a8f02f39fb100a3980c9990d15da58..fd20a7beea844b47110c9f4562b1eeb56461717c 100644
--- a/src/scss/custom.scss
+++ b/src/scss/custom.scss
@@ -61,6 +61,12 @@ body {
       text-decoration: none;
     }
   }
+  .v-date-picker-table--month td .v-btn {
+    min-width: 40px !important;
+  }
+  .v-autocomplete.v-select--is-menu-active .v-input__icon--append .v-icon {
+    transform: none;
+  }
 
   .v-btn {
     height: 40px;
diff --git a/src/views/super-admin/Training.vue b/src/views/super-admin/Training.vue
index 2288f81fe63af76de3fd16fedfb252206fdbc223..7c5cfbdda6d5beef8ebe1eb2710e19dd5897ce11 100644
--- a/src/views/super-admin/Training.vue
+++ b/src/views/super-admin/Training.vue
@@ -51,7 +51,6 @@
                         min-width="auto"
                         transition="scale-transition"
                         offset-y
-                        class="mt-4 pb-6 custom-label-color"
                       >
                         <template v-slot:activator="{ on, attrs }" light>
                           <v-text-field
@@ -61,7 +60,7 @@
                             placeholder="By Date"
                             append-icon="mdi-menu-down"
                             readonly
-                            :clearable="filter.date"
+                            clearable
                             single-line
                             hide-details
                             @click:append="
@@ -75,6 +74,7 @@
                         </template>
                         <v-date-picker
                           v-model="filter.date"
+                          type="month"
                           @input="
                             show.filterDate = false;
                             fetchDebounced();
@@ -83,9 +83,10 @@
                         ></v-date-picker>
                       </v-menu>
                     </v-col>
-                    <v-col cols="12" sm="4" class="filter-input pr-sm-1">
-                      <v-text-field
+                    <v-col cols="12" sm="4" class="filter-input">
+                      <v-autocomplete
                         v-model="filter.search"
+                        :items="coursesName"
                         ref="filterSearch"
                         append-icon="mdi-magnify"
                         @keyup="fetchDebounced"
@@ -94,12 +95,14 @@
                         clearable
                         single-line
                         hide-details
-                      ></v-text-field>
+                      ></v-autocomplete>
                     </v-col>
                   </v-row>
                 </v-col>
-                <v-col cols="12" md="3" class="text-right pr-0">
+                <v-col cols="12" sm="1" />
+                <v-col cols="12" sm="1" md="2">
                   <v-btn
+                    block
                     color="primary"
                     :disabled="state.isUndoingDelete"
                     @click="
@@ -287,6 +290,7 @@ import {
 } from "@/config/table-constants";
 import { createDefaultPaginationParams } from "@/utils/tableHelpers";
 import { SET_ERROR_MESSAGE, SET_ERROR_DIALOG } from "@/store/mutation-types";
+import moment from "moment";
 
 export default {
   components: {
@@ -316,6 +320,7 @@ export default {
       ],
     },
     courses: [],
+    coursesName: [],
     total: 0,
     loading: false,
     snackbars: {
@@ -385,24 +390,47 @@ export default {
         this.fetchData();
       }, debounceTimeout);
     },
+    async fetchAutoCompleteList() {
+      try {
+        const response = await TrainingService.getCourses();
+        this.coursesName = response.courses.map(function (course) {
+          return course.name;
+        });
+      } catch (error) {
+        this.$store.commit(SET_ERROR_MESSAGE, error);
+        this.$store.commit(SET_ERROR_DIALOG, true);
+        console.error("!training error!", error);
+      } finally {
+        this.loading = false;
+        this.fetchingData = false;
+      }
+    },
     async fetchData() {
       if (this.initialLoad) {
         this.loading = true;
         this.initialLoad = false;
       }
-
-      this.params = {
+      console.log("date", this.filter.date);
+      const endDate = new moment(this.filter.date)
+        .endOf("month")
+        .format("YYYY-MM-DD");
+      let params = {
         ...this.params,
         registeredCount: true,
         instructors: true,
-        dateFrom: this.filter.date,
-        dateTo: this.filter.date,
         q: this.filter.search,
         courseType: this.filter.courseType,
       };
-
+      if (this.filter.date !== null) {
+        params = {
+          ...this.params,
+          dateFrom: this.filter.date + "-01",
+          dateTo: endDate,
+        };
+      }
       try {
-        const response = await TrainingService.getCourses(this.params);
+        const response = await TrainingService.getCourses(params);
+        await this.fetchAutoCompleteList();
         this.courses = response.courses;
         this.total = response.meta.total;
       } catch (error) {
@@ -509,13 +537,5 @@ export default {
       display: none;
     }
   }
-
-  .v-picker--date {
-    button.v-btn {
-      min-width: unset !important;
-      box-shadow: none !important;
-      border: none !important;
-    }
-  }
 }
 </style>
diff --git a/tests/unit/views/super-admin/Training.spec.js b/tests/unit/views/super-admin/Training.spec.js
index a5dd02ddaa0201fb45b8b7523abf355f25dace0d..a2461ff33935e5265d06483a1aeb24e748267a5a 100644
--- a/tests/unit/views/super-admin/Training.spec.js
+++ b/tests/unit/views/super-admin/Training.spec.js
@@ -11,14 +11,16 @@ const localVue = createLocalVue();
 localVue.use(Vuex);
 
 describe("Training", () => {
-  const mockCoursesResult = { courses: [], meta: { total: 0 } };
+  const mockCoursesResult = {
+    courses: [{ name: "mock 1" }, { name: "mock 2" }],
+    meta: { total: 0 },
+  };
   afterEach(() => {
     jest.restoreAllMocks();
   });
 
   it("should debounce getCourses", async () => {
     TrainingService.getCourses = jest.fn().mockResolvedValue(mockCoursesResult);
-
     const wrapper = shallowMount(Training, {
       created() {
         this.$vuetify.lang = {
@@ -36,7 +38,7 @@ describe("Training", () => {
       setTimeout(resolve, 500);
     });
 
-    expect(TrainingService.getCourses).toHaveBeenCalledTimes(1);
+    expect(TrainingService.getCourses).toHaveBeenCalledTimes(2);
 
     wrapper.vm.fetchDebounced();
     wrapper.vm.fetchDebounced();
@@ -45,9 +47,8 @@ describe("Training", () => {
     await new Promise((resolve) => {
       setTimeout(resolve, 500);
     });
-    expect(TrainingService.getCourses).toHaveBeenCalledTimes(2);
+    expect(TrainingService.getCourses).toHaveBeenCalledTimes(4);
   });
-
   it("should handle error on getCourses", async () => {
     console.error = jest.fn(); // mock console.error when expecting error messages
     TrainingService.getCourses = jest.fn().mockRejectedValue("mock error");
@@ -86,6 +87,80 @@ describe("Training", () => {
       "mock error"
     );
   });
+  it("should handle error in fetchAutoCompleteList.", async () => {
+    console.error = jest.fn(); // mock console.error when expecting error messages
+    TrainingService.getCourses = jest.fn().mockRejectedValue("mock error");
+
+    const wrapper = shallowMount(
+      Training,
+      {
+        created() {
+          this.$vuetify.lang = {
+            t: () => {},
+          };
+          this.$vuetify.theme = { dark: true };
+        },
+        mocks: {
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+      },
+      localVue
+    );
+    wrapper.vm.fetchData();
+
+    // wait for debounce to trigger
+    await new Promise((resolve) => {
+      setTimeout(resolve, 500);
+    });
+    expect(wrapper.vm.$store.commit).toHaveBeenCalledWith(
+      SET_ERROR_MESSAGE,
+      "mock error"
+    );
+  });
+
+  it("should handle error on getCourses", async () => {
+    console.error = jest.fn(); // mock console.error when expecting error messages
+    TrainingService.getCourses = jest.fn().mockRejectedValue("mock error");
+
+    const wrapper = shallowMount(
+      Training,
+      {
+        created() {
+          this.$vuetify.lang = {
+            t: () => {},
+          };
+          this.$vuetify.theme = { dark: true };
+        },
+        mocks: {
+          $store: {
+            state: {
+              error: {},
+            },
+            commit: jest.fn(),
+          },
+        },
+      },
+      localVue
+    );
+    wrapper.vm.fetchAutoCompleteList();
+
+    // wait for debounce to trigger
+    await new Promise((resolve) => {
+      setTimeout(resolve, 500);
+    });
+
+    expect(wrapper.vm.loading).toEqual(false);
+    expect(wrapper.vm.fetchingData).toEqual(false);
+    expect(wrapper.vm.$store.commit).toHaveBeenCalledWith(
+      SET_ERROR_MESSAGE,
+      "mock error"
+    );
+  });
 
   it("should add course", async () => {
     TrainingService.addCourse = jest.fn().mockResolvedValue();