diff --git a/src/web/src/components/Header.vue b/src/web/src/components/Header.vue
index deb565383..68b443a7e 100644
--- a/src/web/src/components/Header.vue
+++ b/src/web/src/components/Header.vue
@@ -33,6 +33,7 @@
     <b-navbar-toggle
       id="header-navbar-collapse-toggle"
       target="header-navbar-collapse"
+      :class="darkMode === true ? 'dark-mode-toggle' : darkMode === false ? 'light-mode-toggle' : ''"
     >
       <font-awesome-icon icon="bars" />
     </b-navbar-toggle>
@@ -270,10 +271,12 @@ export default {
   padding: calc(8px - 0.2em);
   border: 0.2em solid var(--dark-blue-secondary);
 }
-// no idea why but need to manually set this for it to show up
-.dark #header-navbar-collapse-toggle {
+.dark-mode-toggle {
   color: var(--dark-text-primary) !important;
 }
+.light-mode-toggle {
+  color: var(--light-text-primary) !important;
+}
 .drop-down-item {
   background: hsl(211, 100%, 60%) !important;
 }
diff --git a/src/web/src/pages/NewCourseScheduler.vue b/src/web/src/pages/NewCourseScheduler.vue
index fc0094ce1..c98761105 100644
--- a/src/web/src/pages/NewCourseScheduler.vue
+++ b/src/web/src/pages/NewCourseScheduler.vue
@@ -21,11 +21,140 @@
             </button>
           </slot>
         </div>
+        <b-form-select
+          v-if="
+            !loading &&
+            scheduler.scheduleSubsemesters &&
+            scheduler.scheduleSubsemesters.length > 1
+          "
+          v-model="selectedScheduleSubsemester"
+          :options="scheduler.scheduleSubsemesters"
+          text-field="display_string"
+          value-field="display_string"
+        ></b-form-select>
+        <div id="allScheduleData" class="justify-content-right">
+          <!-- Made two seperate schedule navigators which turn on and off depending on mobile view -->
+          <div>
+            <!-- Desktop view - Display Message between the two change schedule buttons -->
+            <b-row class="justify-content-between align-items-center desktop-schedule-navigation">
+              <b-col cols="auto" class="schedule-navigation">
+                <b-button
+                  @click="
+                    changeSchedule(-1);
+                    updateIndexCookie();
+                  "
+                  size="sm"
+                >
+                  Prev
+                </b-button>
+              </b-col>
+              <b-col cols="auto">
+                <span v-if="scheduleDisplayMessage === 2">
+                  Add some sections to generate schedules!
+                </span>
+                <span v-else-if="scheduleDisplayMessage === 3">
+                  Can't display because of course conflict!
+                </span>
+                <span v-else>
+                  Displaying schedule {{ this.index + 1 }} out of
+                  {{ this.possibilities.length }}
+                </span>
+              </b-col>
+              <b-col cols="auto" class="schedule-navigation">
+                <b-button
+                  @click="
+                    changeSchedule(1);
+                    updateIndexCookie();
+                  "
+                  size="sm"
+                >
+                  Next
+                </b-button>
+              </b-col>
+            </b-row>
+
+            <!-- Mobile view  - Display Message First then change schedule buttons -->
+            <b-row
+              class="d-flex flex-column align-items-center text-center mobile-schedule-navigation"
+            >
+              <b-col cols="12" class="pt-2">
+                <span v-if="scheduleDisplayMessage === 2">
+                  Add some sections to generate schedules!
+                </span>
+                <span v-else-if="scheduleDisplayMessage === 3">
+                  Can't display because of course conflict!
+                </span>
+                <span v-else>
+                  Displaying schedule {{ this.index + 1 }} out of
+                  {{ this.possibilities.length }}
+                </span>
+              </b-col>
+              <b-row class="w-100 justify-content-between">
+                <b-col cols="auto" class="schedule-navigation">
+                  <b-button
+                    @click="
+                      changeSchedule(-1);
+                      updateIndexCookie();
+                    "
+                    size="sm"
+                  >
+                    Prev
+                  </b-button>
+                </b-col>
+                <b-col cols="auto" class="schedule-navigation">
+                  <b-button
+                    @click="
+                      changeSchedule(1);
+                      updateIndexCookie();
+                    "
+                    size="sm"
+                  >
+                    Next
+                  </b-button>
+                </b-col>
+              </b-row>
+            </b-row>
+
+            <Schedule v-if="loading" />
+            <Schedule v-else :possibility="possibilities[index]"></Schedule>
+            <b-row class="align-items-center">
+              <!-- CRNs and Credits -->
+              <b-col class="m-2">
+                <h5>CRNs: {{ selectedCrns }}</h5>
+                <h5>Credits: {{ totalCredits }}</h5>
+              </b-col>
+              <!-- Color Blind Assistance -->
+              <b-col class="m-2 d-flex flex-column align-items-end">
+                <b-form-checkbox
+                  class="mt-2"
+                  size="sm"
+                  :checked="$store.state.colorBlindAssist"
+                  @change="toggleColors()"
+                  switch
+                >
+                  Color Blind Assistance
+                </b-form-checkbox>
+                <!-- Export Data with dropdown aligned to the right -->
+                <b-dropdown text="Export Data" class="mt-2" right>
+                  <b-dropdown-item @click="exportScheduleToIcs">
+                    <font-awesome-icon :icon="exportIcon" />
+                    Export To ICS
+                  </b-dropdown-item>
+                  <b-dropdown-item @click="exportScheduleToImage">
+                    <font-awesome-icon :icon="exportIcon" />
+                    Export To Image
+                  </b-dropdown-item>
+                </b-dropdown>
+              </b-col>
+            </b-row>
+          </div>
+        </div>
         <div class="sidebar">
+          <!-- Side bar or course selector and code below is for future changes in case-->
           <!--<div class="sidebar-backdrop" v-if="isNavOpen"></div>-->
           <transition name="slide">
             <div v-if="isNavOpen" class="sidebar-panel">
-              <div class="sidebar-panal-nav" style="height: 100%;">
+              <div class="sidebar-panel-nav" style="height: 100%;">
                 <b-col
                   class="d-flex flex-column"
                   ref="sidebar"
@@ -48,7 +177,6 @@
                             loadingMessage="Courses"
                             :topSpacing="0"
                           />
-
                           <CourseList
                             v-if="!loading"
                             @addCourse="addCourse"
@@ -92,92 +220,6 @@
             </div>
           </transition>
         </div>
-        <b-form-select
-          v-if="
-            !loading &&
-            scheduler.scheduleSubsemesters &&
-            scheduler.scheduleSubsemesters.length > 1
-          "
-          v-model="selectedScheduleSubsemester"
-          :options="scheduler.scheduleSubsemesters"
-          text-field="display_string"
-          value-field="display_string"
-        ></b-form-select>
-        <div id="allScheduleData" class="justify-content-right">
-          <div>
-            <b-row>
-              <b-col class="m-2">
-                <b-button
-                  @click="
-                    changeSchedule(-1);
-                    updateIndexCookie();
-                  "
-                  size="sm"
-                >
-                  Prev
-                </b-button>
-              </b-col>
-              <b-col cols="8" class="m-2 text-center">
-                <span v-if="scheduleDisplayMessage === 2">
-                  Add some sections to generate schedules!
-                </span>
-                <span v-else-if="scheduleDisplayMessage === 3">
-                  Can't display because of course conflict!
-                </span>
-                <span v-else>
-                  Displaying schedule {{ this.index + 1 }} out of
-                  {{ this.possibilities.length }}
-                </span>
-              </b-col>
-              <b-col class="m-2 text-right">
-                <b-button
-                  @click="
-                    changeSchedule(1);
-                    updateIndexCookie();
-                  "
-                  size="sm"
-                >
-                  Next
-                </b-button>
-              </b-col>
-            </b-row>
-            <Schedule v-if="loading" />
-            <Schedule v-else :possibility="possibilities[index]"></Schedule>
-
-            <b-row>
-              <b-col class="m-2">
-                <h5>CRNs: {{ selectedCrns }}</h5>
-                <h5>Credits: {{ totalCredits }}</h5>
-              </b-col>
-
-              <b-col md="3" justify="end">
-                <b-row>
-                  <b-form-checkbox
-                    class="mt-2"
-                    size="sm"
-                    :checked="$store.state.colorBlindAssist"
-                    @change="toggleColors()"
-                    switch
-                  >
-                    Color Blind Assistance
-                  </b-form-checkbox>
-                </b-row>
-                <b-row>
-                  <b-dropdown text="Export Data" class="mt-2">
-                    <b-dropdown-item @click="exportScheduleToIcs">
-                      <font-awesome-icon :icon="exportIcon" />
-                      Export To ICS
-                    </b-dropdown-item>
-                    <b-dropdown-item @click="exportScheduleToImage">
-                      <font-awesome-icon :icon="exportIcon" />
-                      Export To Image
-                    </b-dropdown-item>
-                  </b-dropdown>
-                </b-row>
-              </b-col>
-            </b-row>
-          </div>
-        </div>
       </div>
     </b-row>
 
@@ -715,12 +757,6 @@ export default {
 // This means that all v-tabs in this app will have flexbox content
 // Hopefully this doesn't screw up someone's debugging later lol
 
-@media (min-width: 1025px) {
-  .main-body {
-    min-height: 100vh;
-  }
-}
-
 .d-flex flex-column {
   transition: 0.5s;
   background-color: #111;
@@ -744,6 +780,11 @@ export default {
   display: flex;
 }
 
+// This is for the button for navigating each schedule option
+.schedule-navigation {
+  margin: 8px;
+}
+
 .card {
   border: none !important;
   font-size: 17px;
@@ -773,6 +814,11 @@ sidebar-panel-nav {
   background: #3d4959 !important;
 }
 
+.b-dropdown .dropdown-menu {
+  // shifts export data menu left
+  transform: translateX(-10px);
+}
+
 .slide-enter-active,
 .slide-leave-active {
   transition: transform 0.2s ease;
@@ -911,4 +957,61 @@ button:focus {
 #burger.active .burger-bar {
   background-color: #32aad8;
 }
+
+.desktop-schedule-navigation {
+  display: flex;
+}
+
+.mobile-schedule-navigation {
+  display: none;
+  height: 0;
+  overflow: hidden;
+}
+
+@media (min-width: 1025px) {
+  .main-body {
+    min-height: 100vh;
+  }
+}
+
+@media (max-width: 768px) {
+  // basically mobile view showing sidebar at bottom instead so its no longer a sidebar
+  .main-body {
+    display: block;
+    flex-direction: column;
+  }
+
+  h5 {
+    font-size: .9em;
+  }
+
+  // the arrow that makes the sidebar appear or not
+  #burger {
+    display: none;
+  }
+
+  .sidebar-panel {
+    position: static;
+    width: 100%;
+    margin: 0;
+  }
+
+  .sidebar {
+    padding: 0;
+  }
+
+  .schedule-navigation {
+    margin: 0px;
+  }
+  
+  .desktop-schedule-navigation {
+    display: none;
+  }
+
+  .mobile-schedule-navigation {
+    display: flex;
+    height: auto;
+  }
+}
+
 </style>
diff --git a/src/web/src/pages/Pathway.vue b/src/web/src/pages/Pathway.vue
index bbad23709..c602cad58 100644
--- a/src/web/src/pages/Pathway.vue
+++ b/src/web/src/pages/Pathway.vue
@@ -3,29 +3,12 @@
     <b-breadcrumb :items="breadcrumbNav"></b-breadcrumb>
 
     <!-- button to switch between alphabet order and category order -->
-    <div style="float: left;" class="w-10">
-      <b-button
-        @click="listAlphabet()"
-        style="
-          margin-top: 10px;
-          color: #007bff;
-          border: solid #007bff;
-          background-color: transparent;
-        "
-      >
-        List by Alphabet
+    <div class="filter-buttons w-10" style="float: left;">
+      <b-button @click="listAlphabet()"> 
+        List by Alphabet 
       </b-button>
-      <br />
-      <b-button
-        @click="listCate()"
-        style="
-          margin-top: 10px;
-          color: #007bff;
-          border: solid #007bff;
-          background-color: transparent;
-        "
-      >
-        List by Category
+      <b-button @click="listCate()"> 
+        List by Category 
       </b-button>
     </div>
     <div v-if="categories.length > 0" class="mx-auto w-75">
@@ -317,6 +300,22 @@ export default {
 </script>
 
 <style>
+
+.filter-buttons {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.filter-buttons button {
+  color: #007bff;
+  border: solid #007bff;
+  background-color: transparent;
+  width: 100%;
+}
+
 .gridContainer {
   display: inline-grid;
   grid-template-columns: auto auto;
@@ -325,7 +324,7 @@ export default {
 }
 
 .categoryBox {
-  text-align: center;
+  text-align: left;
 }
 
 .category-title {
@@ -338,7 +337,7 @@ export default {
   display: inline-block;
   background: white;
   border-style: none;
-  text-align: justify;
+  text-align: left;
   width: 95%;
 }
 
@@ -353,4 +352,18 @@ export default {
 .courseInPath:hover {
   background-color: rgba(39, 130, 230, 0.5);
 }
+
+@media (max-width: 768px) {
+  /* in mobile mode move filters above pathways so mobile view doesn't get smushed */
+  .filter-buttons {
+    float: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 20px;
+    gap: 5px;
+  }
+}
 </style>
diff --git a/src/web/src/pages/ProfExplorer.vue b/src/web/src/pages/ProfExplorer.vue
index 21534b06d..cd3fed079 100644
--- a/src/web/src/pages/ProfExplorer.vue
+++ b/src/web/src/pages/ProfExplorer.vue
@@ -3,31 +3,12 @@
     <b-breadcrumb :items="breadcrumbNav"></b-breadcrumb>
 
     <!-- button to switch between alphabet order and department order -->
-    <div style="float: left;" class="w-10">
-      <b-button
-        @click="listAlphabet()"
-        style="
-          margin-top: 10px;
-          color: #007bff;
-          border: solid #007bff;
-          background-color: transparent;
-          width: 100%;
-        "
-      >
-        List by Alphabet
+    <div class="filter-buttons w-10" style="float: left;">
+      <b-button @click="listAlphabet()"> 
+        List by Alphabet 
       </b-button>
-      <br />
-      <b-button
-        @click="listDepartment()"
-        style="
-          margin-top: 10px;
-          color: #007bff;
-          border: solid #007bff;
-          background-color: transparent;
-          width: 100%;
-        "
-      >
-        List by Department
+      <b-button @click="listDepartment()"> 
+        List by Department 
       </b-button>
     </div>
 
@@ -371,6 +352,22 @@ export default {
 </script>
 
 <style>
+
+.filter-buttons {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.filter-buttons button {
+  color: #007bff;
+  border: solid #007bff;
+  background-color: transparent;
+  width: 100%;
+}
+
 .gridContainer {
   display: inline-grid;
   grid-template-columns: auto auto;
@@ -388,7 +385,7 @@ export default {
   display: inline-block;
   background: white;
   border-style: none;
-  text-align: justify;
+  text-align: left;
   width: 95%;
   padding-top: 0;
   padding-bottom: 0;
@@ -401,4 +398,18 @@ export default {
 .h3 {
   text-align: left;
 }
+
+@media (max-width: 768px) {
+  .filter-buttons {
+    /* in mobile mode move filters above professors so mobile view doesn't get smushed */
+    float: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 20px;
+    gap: 5px;
+  }
+}
 </style>