diff --git a/src/web/src/components/CourseList.vue b/src/web/src/components/CourseList.vue
index 3ec84265f..c34b0c291 100644
--- a/src/web/src/components/CourseList.vue
+++ b/src/web/src/components/CourseList.vue
@@ -1,38 +1,55 @@
 <template>
   <div class="d-flex flex-column flex-grow-1">
     <div class="course-search">
-      <b-form-group label="Search" label-for="search">
+      <!--label="Search"-->
+      <b-form-group label-for="search">
         <b-form-input
           id="search"
           v-model="textSearch"
           :debounce="debounceTime"
-          placeholder="Intro to College - COLG 1030"
+          placeholder="Search: Intro to College - COLG 1030"
           list="list-id"
         ></b-form-input>
       </b-form-group>
 
-      <b-row>
-        <!-- >2 b/c default ALL option always present -->
-        <b-col v-if="subsemesterOptions.length > 2">
-          <b-form-group label="Filter Sub-Semester" for="sub-semester">
-            <b-form-select
-              v-model="selectedSubsemester"
-              :options="subsemesterOptions"
-            ></b-form-select>
-          </b-form-group>
-        </b-col>
-        <b-col>
-          <b-form-group label="Filter Department" for="department">
-            <b-form-select
-              v-model="selectedDepartment"
-              :options="departmentOptions"
-            ></b-form-select>
-          </b-form-group>
-        </b-col>
-      </b-row>
+      <b-button
+        @click="toggleFilterPrompt();"
+        size="sm"
+        style="margin-right: 5px;"
+        >
+        Filters
+      </b-button>
+      <b-button
+        @click="resetFilters();"
+        size="sm"
+        variant="danger"
+        >
+        Reset
+      </b-button>
+      <b-modal id="courseFilters" title="Course Filters" size="sm">
+          <b-col>
+            <b-row v-if="subsemesterOptions.length > 2">
+              <b-form-group label="Filter Sub-Semester" for="sub-semester">
+                <b-form-select
+                  v-model="selectedSubsemester"
+                  :options="subsemesterOptions"
+                ></b-form-select>
+              </b-form-group>
+            </b-row>
+            <b-row>
+              <b-form-group label="Filter Department" for="department">
+                <b-form-select
+                  v-model="selectedDepartment"
+                  :options="departmentOptions"
+                ></b-form-select>
+              </b-form-group>
+            </b-row>
+          </b-col>
+      </b-modal>
+
     </div>
     <!-- Start of Dynamic Scrolling Rendering To Account For Varying Course Data. > -->
-    <hr />
+    <hr>
     <div id="scroll-box" data-cy="course-list">
       <div v-if="filterCourses.length == 0" class="no-courses">
         Oops, no results!
@@ -124,8 +141,12 @@ export default {
     });
   },
   methods: {
-    courseInfoModalToggle(course) {
-      this.$emit("showCourseInfo", course);
+    resetFilters() {
+      this.selectedDepartment=null;
+      this.selectedSubsemester=null;
+    },
+    toggleFilterPrompt() {
+      this.$root.$emit("bv::show::modal", "courseFilters");
     },
     /* wrapper for querying with search */
     // todo: get courses should be changed
diff --git a/src/web/src/components/Login.vue b/src/web/src/components/Login.vue
index 51b2db7cf..c6c3ea985 100644
--- a/src/web/src/components/Login.vue
+++ b/src/web/src/components/Login.vue
@@ -109,4 +109,4 @@ export default {
 };
 </script>
 
-<style></style>
+<style></style>
\ No newline at end of file
diff --git a/src/web/src/pages/NewCourseScheduler.vue b/src/web/src/pages/NewCourseScheduler.vue
index fc0094ce1..4174d30af 100644
--- a/src/web/src/pages/NewCourseScheduler.vue
+++ b/src/web/src/pages/NewCourseScheduler.vue
@@ -34,7 +34,7 @@
                   <b-card no-body class="h-100">
                     <b-tabs card class="h-100 d-flex flex-column flex-grow-1">
                       <b-tab
-                        title="Course Search"
+                        title="Search"
                         active
                         class="flex-grow-1 w-100"
                         data-cy="course-search-tab"
@@ -64,7 +64,7 @@
                             class="text-center"
                             data-cy="selected-courses-tab-header"
                           >
-                            Selected Courses
+                            Selected
                             <b-badge
                               variant="light"
                               data-cy="num-selected-courses"
@@ -74,7 +74,7 @@
                           </div>
                         </template>
                         <b-card-text
-                          class="w-100 d-flex flex-grow-1 flex-column"
+                          class="w-1500 d-flex flex-grow-1 flex-column"
                         >
                           <SelectedCourses
                             :courses="selectedCourses"