diff --git a/src/components/app/app.ts b/src/components/app/app.ts
index 8ed2f8b..fa91bb0 100644
--- a/src/components/app/app.ts
+++ b/src/components/app/app.ts
@@ -9,7 +9,7 @@ import {HttpUtils} from '@/utils/http-utils';
 import {CourseUtils} from '@/utils/course-utils';
 import {GPAUtils} from '@/utils/gpa-utils';
 import Loading from '@/components/loading/loading.vue';
-import CoursePage from '@/pages/course/course-page';
+import CoursePage from '@/pages/course/course-page.vue';
 
 
 /**
diff --git a/src/pages/course/course-page.ts b/src/pages/course/course-page.ts
deleted file mode 100644
index 2263ad5..0000000
--- a/src/pages/course/course-page.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {Component, Prop, Vue} from 'vue-property-decorator';
-import {Assignment, Course} from '@/components/app/app';
-import CourseHead from '@/pages/overall/overall-course/course-head/course-head.vue';
-import CourseScatter from '@/pages/course/course-scatter/course-scatter';
-
-@Component({
-    components: {CourseHead, CourseScatter}
-})
-export default class CoursePage extends Vue
-{
-    @Prop({required: true}) course: Course;
-
-    private unread: number = -1;
-    private unreadAssignments: Assignment[] = [];
-
-    /**
-     * Count the number of unread assignments with cache
-     */
-    countUnread(): number
-    {
-        if (this.unread == -1)
-        {
-            this.unreadAssignments = this.course.assignments.filter(a => a.unread);
-            return this.unread = this.unreadAssignments.length;
-        }
-        else return this.unread;
-    }
-}
diff --git a/src/pages/course/course-page.vue b/src/pages/course/course-page.vue
index dd730a8..93635d8 100644
--- a/src/pages/course/course-page.vue
+++ b/src/pages/course/course-page.vue
@@ -17,5 +17,35 @@
     </el-card>
 </template>
 
-<script src="./course-page.ts" lang="ts"></script>
+<script lang="ts">
+    import {Component, Prop, Vue} from 'vue-property-decorator';
+    import {Assignment, Course} from '@/components/app/app';
+    import CourseHead from '@/pages/overall/overall-course/course-head/course-head.vue';
+    import CourseScatter from '@/pages/course/course-scatter/course-scatter';
+
+    @Component({
+        components: {CourseHead, CourseScatter}
+    })
+    export default class CoursePage extends Vue
+    {
+        @Prop({required: true}) course: Course;
+
+        private unread: number = -1;
+        private unreadAssignments: Assignment[] = [];
+
+        /**
+         * Count the number of unread assignments with cache
+         */
+        countUnread(): number
+        {
+            if (this.unread == -1)
+            {
+                this.unreadAssignments = this.course.assignments.filter(a => a.unread);
+                return this.unread = this.unreadAssignments.length;
+            }
+            else return this.unread;
+        }
+    }
+</script>
+
 <style src="./course-page.scss" lang="scss" scoped></style>