diff --git a/src/pages/course-selection/course-selection.ts b/src/pages/course-selection/course-selection.ts
index cc81f24..8edf745 100644
--- a/src/pages/course-selection/course-selection.ts
+++ b/src/pages/course-selection/course-selection.ts
@@ -123,6 +123,22 @@ export default class CourseSelection extends Vue
         this.openedPage = this.openedPage == 'settings' ? '' : 'settings';
     }
 
+    /**
+     * Open course page.
+     */
+    openCourse(course: UniqueCourse)
+    {
+        if (this.activeCourse == course)
+        {
+            this.openedPage = '';
+        }
+        else
+        {
+            this.activeCourse = course;
+            this.openedPage = 'course'
+        }
+    }
+
     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 0f8313a..3a55817 100644
--- a/src/pages/course-selection/course-selection.vue
+++ b/src/pages/course-selection/course-selection.vue
@@ -24,7 +24,9 @@
                     <!-- Actual course list -->
                     <div class="list padding-fix" :style="{height: courseListHeight + 'px'}">
                         <!-- Every course -->
-                        <div v-for="(course, index) in uniqueCourses" class="item vertical-center">
+                        <div v-for="(course, index) in uniqueCourses" class="item vertical-center"
+                             @click="openCourse(course)">
+
                             <div class="name">{{course.name}}</div>
                             <div class="data">
                                 <span class="classes"><i class="el-icon-s-home"/> {{course.classes.length}}</span>