diff --git a/src/pages/course-selection/course-selection.ts b/src/pages/course-selection/course-selection.ts
index 717c901..b194902 100644
--- a/src/pages/course-selection/course-selection.ts
+++ b/src/pages/course-selection/course-selection.ts
@@ -20,6 +20,7 @@ export default class CourseSelection extends Vue
     cardsHeight: number = 0;
 
     openedPage: string = '';
+    settings: SearchSettings = new SearchSettings();
 
     /**
      * Called before rendering
@@ -120,11 +121,6 @@ export default class CourseSelection extends Vue
         this.openedPage = this.openedPage == 'settings' ? '' : 'settings';
     }
 
-    get settings(): SearchSettings
-    {
-        return <SearchSettings> this.$refs['settings'];
-    }
-
     get filteredCourses()
     {
         let year = GPAUtils.getSchoolYear();
diff --git a/src/pages/course-selection/course-selection.vue b/src/pages/course-selection/course-selection.vue
index 5dfcabd..6e191fc 100644
--- a/src/pages/course-selection/course-selection.vue
+++ b/src/pages/course-selection/course-selection.vue
@@ -16,7 +16,7 @@
         <el-row>
             <el-col :span="16" class="overall-span">
                 <el-card class="left" :style="{height: cardsHeight + 'px'}">
-                    <SearchSettings ref="settings" v-if="openedPage == 'settings'"></SearchSettings>
+                    <SearchSettings ref="settings" :settings="settings" v-if="openedPage === 'settings'"></SearchSettings>
                 </el-card>
             </el-col>
 
diff --git a/src/pages/course-selection/search-settings/search-settings.vue b/src/pages/course-selection/search-settings/search-settings.vue
index 39c108c..45b57ac 100644
--- a/src/pages/course-selection/search-settings/search-settings.vue
+++ b/src/pages/course-selection/search-settings/search-settings.vue
@@ -3,18 +3,19 @@
         <div class="header">Settings</div>
         <el-divider class="divider"><i class="el-icon-s-tools"></i></el-divider>
         <div class="content">
-            <el-switch v-model="showAllCourses" active-text="Show all courses (including the ones you can't take next year)"/>
+            <el-switch v-model="settings.showAllCourses" active-text="Show all courses (including the ones you can't take next year)"/>
         </div>
     </div>
 </template>
 
 <script lang="ts">
-    import {Component, Vue} from 'vue-property-decorator'
+    import {Component, Prop, Vue} from 'vue-property-decorator'
 
     @Component
     export default class SearchSettingsComponent extends Vue
     {
-        showAllCourses = false;
+        @Prop({required: true}) settings: SearchSettings;
+        // TODO: Show all courses option
     }
 
     export class SearchSettings