diff --git a/src/pages/course-selection/search-settings/search-settings.vue b/src/pages/course-selection/search-settings/search-settings.vue
index 45b57ac..c09ee92 100644
--- a/src/pages/course-selection/search-settings/search-settings.vue
+++ b/src/pages/course-selection/search-settings/search-settings.vue
@@ -2,8 +2,21 @@
     <div id="settings">
         <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="settings.showAllCourses" active-text="Show all courses (including the ones you can't take next year)"/>
+            <el-switch v-model="settings.showAllCourses" class="item"
+                       active-text="Show all courses (including the ones not listed on your grade level)"/>
+
+            <div class="item">
+                <div>Sort by...</div>
+                <el-radio-group v-model="settings.sortBy">
+                    <el-radio-button label="Name"></el-radio-button>
+                    <el-radio-button label="Popularity"></el-radio-button>
+                    <el-radio-button label="Classes"></el-radio-button>
+                    <el-radio-button label="Level"></el-radio-button>
+                    <el-radio-button disabled label="Peer Rating (Coming soon)"></el-radio-button>
+                </el-radio-group>
+            </div>
         </div>
     </div>
 </template>
@@ -21,6 +34,7 @@
     export class SearchSettings
     {
         showAllCourses: boolean = false
+        sortBy: string = 'Name'
     }
 </script>