diff --git a/src/pages/course-selection/course-selection.ts b/src/pages/course-selection/course-selection.ts
index 8c11420..2eedeb4 100644
--- a/src/pages/course-selection/course-selection.ts
+++ b/src/pages/course-selection/course-selection.ts
@@ -5,8 +5,9 @@ import {GPAUtils} from '@/logic/utils/gpa-utils';
 // @ts-ignore
 import SearchSettingsComponent, {SearchSettings} from '@/pages/course-selection/pages/search-settings.vue';
 import Welcome from '@/pages/course-selection/pages/welcome.vue';
+import CourseDetail from '@/pages/course-selection/pages/course-detail.vue';
 
-@Component({components: {SearchSettings: SearchSettingsComponent, Welcome}})
+@Component({components: {SearchSettings: SearchSettingsComponent, Welcome, CourseDetail}})
 export default class CourseSelection extends Vue
 {
     @Prop({required: true}) app: App
@@ -23,6 +24,7 @@ export default class CourseSelection extends Vue
 
     openedPage: string = '';
     settings: SearchSettings = new SearchSettings();
+    activeCourseIndex: number = -1;
 
     /**
      * Called before rendering
diff --git a/src/pages/course-selection/course-selection.vue b/src/pages/course-selection/course-selection.vue
index 10179b8..49b9e1d 100644
--- a/src/pages/course-selection/course-selection.vue
+++ b/src/pages/course-selection/course-selection.vue
@@ -3,8 +3,9 @@
         <el-row>
             <el-col :span="16" class="overall-span">
                 <el-card class="left" :style="{height: cardsHeight + 'px'}">
-                    <SearchSettings ref="settings" :settings="settings" v-if="openedPage === 'settings'"></SearchSettings>
-                    <Welcome :app="app" v-if="openedPage === ''"></Welcome>
+                    <SearchSettings v-if="openedPage === 'settings'" ref="settings" :settings="settings"/>
+                    <Welcome v-if="openedPage === ''" :app="app"/>
+                    <CourseDetail v-if="openedPage === 'course'" :course-info="courseInfo[activeCourseIndex]"/>
                 </el-card>
             </el-col>
 
@@ -16,7 +17,7 @@
 
                         <!-- Search -->
                         <el-input class="search" placeholder="Search..." prefix-icon="el-icon-search" v-model="search">
-                            <el-button slot="append" icon="el-icon-s-tools" @click="openSettings"></el-button>
+                            <el-button slot="append" icon="el-icon-s-tools" @click="openSettings"/>
                         </el-input>
                     </div>