diff --git a/src/pages/course-selection/course-selection.scss b/src/pages/course-selection/course-selection.scss
new file mode 100644
index 0000000..28644ec
--- /dev/null
+++ b/src/pages/course-selection/course-selection.scss
@@ -0,0 +1,88 @@
+
+#info
+{
+    margin: 20px 20px 10px;
+
+    .header
+    {
+        margin-top: 15px;
+        margin-bottom: 10px;
+
+        font-size: 30px;
+        color: #8c85ea;
+    }
+
+    .content
+    {
+        margin-bottom: 15px;
+    }
+}
+
+#course-list
+{
+    margin-right: 20px;
+    height: 70vh;
+
+    .padding-fix
+    {
+        // Fix width issue
+        padding-left: 20px;
+        padding-right: 20px;
+        border-radius: 4px;
+    }
+
+    .header
+    {
+
+        .text
+        {
+            margin-top: 15px;
+            margin-bottom: 10px;
+
+            font-size: 24px;
+        }
+
+        .search
+        {
+            margin-bottom: 20px;
+        }
+    }
+
+    .list
+    {
+        overflow: scroll;
+        overflow-x: hidden;
+        height: 377px;
+    }
+
+    // Remove scrollbar
+    .list::-webkit-scrollbar
+    {
+        width: 0;
+    }
+
+    .item
+    {
+        height: 30px;
+        text-align: left;
+        margin-bottom: 10px;
+
+        background: #fbfbfb;
+        border-radius: 4px;
+        padding-left: 10px;
+
+        .name
+        {
+            // Text too long
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+    }
+}
+
+// Cards
+.left
+{
+    margin-left: 20px;
+}
diff --git a/src/pages/course-selection/course-selection.vue b/src/pages/course-selection/course-selection.vue
index 9762dec..02a43f0 100644
--- a/src/pages/course-selection/course-selection.vue
+++ b/src/pages/course-selection/course-selection.vue
@@ -182,92 +182,4 @@
     }
 </script>
 
-<style lang="scss" scoped>
-    #info
-    {
-        margin: 20px 20px 10px;
-
-        .header
-        {
-            margin-top: 15px;
-            margin-bottom: 10px;
-
-            font-size: 30px;
-            color: #8c85ea;
-        }
-
-        .content
-        {
-            margin-bottom: 15px;
-        }
-    }
-
-    #course-list
-    {
-        margin-right: 20px;
-        height: 70vh;
-
-        .padding-fix
-        {
-            // Fix width issue
-            padding-left: 20px;
-            padding-right: 20px;
-            border-radius: 4px;
-        }
-
-        .header
-        {
-
-            .text
-            {
-                margin-top: 15px;
-                margin-bottom: 10px;
-
-                font-size: 24px;
-            }
-
-            .search
-            {
-                margin-bottom: 20px;
-            }
-        }
-
-        .list
-        {
-            overflow: scroll;
-            overflow-x: hidden;
-            height: 377px;
-        }
-
-        // Remove scrollbar
-        .list::-webkit-scrollbar
-        {
-            width: 0;
-        }
-
-        .item
-        {
-            height: 30px;
-            text-align: left;
-            margin-bottom: 10px;
-
-            background: #fbfbfb;
-            border-radius: 4px;
-            padding-left: 10px;
-
-            .name
-            {
-                // Text too long
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-            }
-        }
-    }
-
-    // Cards
-    .left
-    {
-        margin-left: 20px;
-    }
-</style>
+<style src="./course-selection.scss" lang="scss" scoped/>