diff --git a/src/pages/overall/overall-course/course-head/course-head.scss b/src/pages/overall/overall-course/course-head/course-head.scss
new file mode 100644
index 0000000..9d64353
--- /dev/null
+++ b/src/pages/overall/overall-course/course-head/course-head.scss
@@ -0,0 +1,92 @@
+// Main card content
+.course-card-content.main
+{
+    padding: 0 20px 0 20px;
+    height: 90px;
+
+    // Main color
+    background: white;
+}
+
+.course-col-name
+{
+    // Align left
+    text-align: left;
+    float: left;
+
+    .course-name
+    {
+        overflow: hidden;
+        font-size: 22px;
+        color: var(--main);
+    }
+
+    .course-teacher
+    {
+        font-size: 12px;
+        color: #999999;
+        font-style: italic;
+    }
+}
+
+.course-col-grade
+{
+    // Align right
+    text-align: right;
+    float: right;
+
+    // Adjust position
+    margin-top: -2px;
+
+    .course-grade
+    {
+        font-size: 21px;
+    }
+
+    .course-updates
+    {
+        font-size: 14px;
+
+        .unread-number
+        {
+            display: inline-block;
+            width: 20px;
+            text-align: center;
+            border-radius: 5px;
+
+            padding-left: 3px;
+            padding-right: 3px;
+
+            margin-right: 3px;
+        }
+
+        .unread-text
+        {
+            font-style: italic;
+        }
+    }
+
+    .course-updates.unread
+    {
+        .unread-number
+        {
+            background: var(--unread);
+            color: white;
+        }
+
+        .unread-text
+        {
+            color: var(--unread);
+        }
+    }
+
+    .course-updates.none
+    {
+        color: #999999;
+
+        .unread-number
+        {
+            background: #eeeeee;
+        }
+    }
+}
diff --git a/src/pages/overall/overall-course/course-head/course-head.vue b/src/pages/overall/overall-course/course-head/course-head.vue
index 22d1483..6892f38 100644
--- a/src/pages/overall/overall-course/course-head/course-head.vue
+++ b/src/pages/overall/overall-course/course-head/course-head.vue
@@ -51,97 +51,4 @@
     }
 </script>
 
-<style lang="scss">
-    // Main card content
-    .course-card-content.main
-    {
-        padding: 0 20px 0 20px;
-        height: 90px;
-
-        // Main color
-        background: white;
-    }
-
-    .course-col-name
-    {
-        // Align left
-        text-align: left;
-        float: left;
-
-        .course-name
-        {
-            overflow: hidden;
-            font-size: 22px;
-            color: var(--main);
-        }
-
-        .course-teacher
-        {
-            font-size: 12px;
-            color: #999999;
-            font-style: italic;
-        }
-    }
-
-    .course-col-grade
-    {
-        // Align right
-        text-align: right;
-        float: right;
-
-        // Adjust position
-        margin-top: -2px;
-
-        .course-grade
-        {
-            font-size: 21px;
-        }
-
-        .course-updates
-        {
-            font-size: 14px;
-
-            .unread-number
-            {
-                display: inline-block;
-                width: 20px;
-                text-align: center;
-                border-radius: 5px;
-
-                padding-left: 3px;
-                padding-right: 3px;
-
-                margin-right: 3px;
-            }
-
-            .unread-text
-            {
-                font-style: italic;
-            }
-        }
-
-        .course-updates.unread
-        {
-            .unread-number
-            {
-                background: var(--unread);
-                color: white;
-            }
-
-            .unread-text
-            {
-                color: var(--unread);
-            }
-        }
-
-        .course-updates.none
-        {
-            color: #999999;
-
-            .unread-number
-            {
-                background: #eeeeee;
-            }
-        }
-    }
-</style>
+<style src="./course-head.scss" lang="scss"></style>