diff --git a/src/js/__tests__/parsers.js b/src/js/__tests__/parsers.js
index 4b94ddaf..8d85618e 100644
--- a/src/js/__tests__/parsers.js
+++ b/src/js/__tests__/parsers.js
@@ -2,6 +2,8 @@
  *
  * @copyright Copyright (c) 2019-2020 Gary Kim <gary@garykim.dev>
  *
+ * @copyright Copyright (c) 2021 Suhas Hariharan <contact@suhas.net>
+ *
  * @author Gary Kim <gary@garykim.dev>
  *
  * @license GNU AGPL version 3 only
@@ -190,84 +192,85 @@ test('Grade to Final Percent', t => {
 test('Extract Final Percent from Class Page', t => {
     const test_cases = [
         {
-            i: "<tbody><tr>\n" +
-                "            \t<td><strong>Final\n" +
-                "                        Letter Grade<sup>1</sup>:</strong></td><td>A</td>\n" +
-                "            </tr>\n" +
-                "\t\t\t<!-- \n" +
-                "            <tr>\n" +
-                "                [if.1=0]<td><strong>\n" +
-                "                        Final Percent:\n" +
-                "                        </strong></td>\n" +
-                "                 <td>\n" +
-                "                        <script type=\"text/javascript\">\n" +
-                "                            if (\"A\" == \"--\") {\n" +
-                "                                document.write(\"&nbsp;\");\n" +
-                "                            }\n" +
-                "                            else {\n" +
-                "                                document.write(\"[decode;004887413;031@;.;81.25] &nbsp;\");\n" +
-                "                            }\n" +
-                "                        </script>\n" +
-                "\t\t\t\t</td>\n" +
-                "\t\t\t\t[/if]\n" +
-                "\t\t\t</tr>\n" +
-                "\t\t\t-->\t\n" +
-                "                        </tbody>",
-            o: 81.25,
-        },
-        {
-            i: "<table class=\"linkDescList\">\n" +
-                "            <colgroup><col><col></colgroup>\n" +
-                "            <tbody><tr>\n" +
-                "            \t<td><strong>Final\n" +
-                "                        Letter Grade<sup>1</sup>:</strong></td><td>_</td>\n" +
-                "            </tr>\n" +
-                "\t\t\t<!-- \n" +
-                "            <tr>\n" +
-                "                [if.1=0]<td><strong>\n" +
-                "                        Final Percent:\n" +
-                "                        </strong></td>\n" +
-                "                 <td>\n" +
-                "                        <script type=\"text/javascript\">\n" +
-                "                            if (\"_\" == \"--\") {\n" +
-                "                                document.write(\"&nbsp;\");\n" +
-                "                            }\n" +
-                "                            else {\n" +
-                "                                document.write(\"[decode;004888554;031@;.;_] &nbsp;\");\n" +
-                "                            }\n" +
-                "                        </script>\n" +
-                "\t\t\t\t</td>\n" +
-                "\t\t\t\t[/if]\n" +
-                "\t\t\t</tr>\n" +
-                "\t\t\t-->\t\n" +
-                "                        </tbody></table>",
+
+            i: `<tbody>
+                    <tr>
+                        <td><strong>Final
+                                Letter Grade<sup>1</sup>:</strong></td>
+                        <td>A</td>
+                    </tr>
+                    <!--
+                            <tr>
+                                [if.1=0]<td><strong>
+                                        Final Percent:
+                                        </strong></td>
+                                <td>
+                                        <script type="text/javascript">
+                                            if ("A" == "--") {
+                                                document.write("&nbsp;");
+                                            }
+                                            else {
+                                                document.write("[decode;0041052333;031@;;82.5] &nbsp;");
+                                            }
+                                        </script>
+                                </td>
+                                [/if]
+                            </tr>
+                            -->
+                </tbody>`,
+            o: 82.5,
+        },
+        {
+            i: `<tbody><tr>
+                        <td><strong>Final
+                                Letter Grade<sup>1</sup>:</strong></td><td>A</td>
+                    </tr>
+                    <!--
+                    <tr>
+                        [if.1=0]<td><strong>
+                                Final Percent:
+                                </strong></td>
+                        <td>
+                                <script type="text/javascript">
+                                    if ("A" == "--") {
+                                        document.write("&nbsp;");
+                                    }
+                                    else {
+                                        document.write("[decode;004976938;031@;;] &nbsp;");
+                                    }
+                                </script>
+                        </td>
+                        [/if]
+                    </tr>
+                    -->
+                </tbody>`,
             o: undefined,
         },
         {
-            i: "<tbody><tr>\n" +
-                "            \t<td><strong>Final\n" +
-                "                        Letter Grade<sup>1</sup>:</strong></td><td>A</td>\n" +
-                "            </tr>\n" +
-                "\t\t\t<!-- \n" +
-                "            <tr>\n" +
-                "                [if.1=0]<td><strong>\n" +
-                "                        Final Percent:\n" +
-                "                        </strong></td>\n" +
-                "                 <td>\n" +
-                "                        <script type=\"text/javascript\">\n" +
-                "                            if (\"A\" == \"--\") {\n" +
-                "                                document.write(\"&nbsp;\");\n" +
-                "                            }\n" +
-                "                            else {\n" +
-                "                                document.write(\"[decode;004925338;031@;.;75] &nbsp;\");\n" +
-                "                            }\n" +
-                "                        </script>\n" +
-                "\t\t\t\t</td>\n" +
-                "\t\t\t\t[/if]\n" +
-                "\t\t\t</tr>\n" +
-                "\t\t\t-->\t\n" +
-                "                        </tbody>",
-            o: 75,
+            i: `<tbody><tr>
+                        <td><strong>Final
+                                Letter Grade<sup>1</sup>:</strong></td><td>A+</td>
+                    </tr>
+                    <!--
+                    <tr>
+                        [if.1=0]<td><strong>
+                                Final Percent:
+                                </strong></td>
+                        <td>
+                                <script type="text/javascript">
+                                    if ("A+" == "--") {
+                                        document.write("&nbsp;");
+                                    }
+                                    else {
+                                        document.write("[decode;004976943;031@;;90] &nbsp;");
+                                    }
+                                </script>
+                        </td>
+                        [/if]
+                    </tr>
+                    -->
+                </tbody>`,
+            o: 90,
         },
     ];
 
diff --git a/src/js/components/CategoryWeighting.vue b/src/js/components/CategoryWeighting.vue
index becc064d..971d89f5 100644
--- a/src/js/components/CategoryWeighting.vue
+++ b/src/js/components/CategoryWeighting.vue
@@ -46,10 +46,18 @@
                     :bgcolor="(index % 2 == 0) ? '#edf3fe' : '#fff'"
                 >
                     <td v-if="category.newc">
-                        <input v-model="category.category" @change="changeCategory(index, category.category)">
-                        <button @click="delCategory(index)">Delete</button>
+                        <input
+                            v-model="category.category"
+                            @change="changeCategory(index, category.category)"
+                        >
+                        <button @click="delCategory(index)">
+                            Delete
+                        </button>
                     </td>
-                    <td v-else v-html="category.category" />
+                    <td
+                        v-else
+                        v-html="category.category"
+                    />
                     <td>
                         <input
                             v-model.number="category.weighting"
@@ -61,7 +69,10 @@
                 </tr>
             </tbody>
         </table>
-        <button style="margin-left: 20px" @click="addCategory();">
+        <button
+            style="margin-left: 20px"
+            @click="addCategory();"
+        >
             Add Category
         </button>
         <label v-if="categorySum != 100">Category weightings do not sum to 100%</label>
@@ -71,8 +82,12 @@
         >
             Save Weighting
         </button>
-        <h2 v-if="categorySum==100">{{ hypo.grade }} ({{ hypo.fp }})<br></h2>
-        <div v-if="categorySum!=100"><br></div>
+        <h2 v-if="categorySum==100">
+            {{ hypo.grade }} ({{ hypo.fp }})<br>
+        </h2>
+        <div v-if="categorySum!=100">
+            <br>
+        </div>
         <p>Note: Since teachers can adjust the weighting of each assignment as well, this number is not necessarily accurate. In addition, early in the year some categories(i.e the exam category) may contain no grades and the percentages would need to be adjusted accordingly.</p>
     </div>
 </template>
@@ -132,9 +147,13 @@ export default {
                     catmap[e] = { weighting: 0, category: e };
                 });
             }
+            const category_set = new Set(this.categories);
             for (var cat in catmap) {
+                category_set.add(cat);
                 this.renderWeights.push(catmap[cat]);
             }
+            this.categories = Array.from(category_set);
+            this.gradetable.updateCategories(this.categories);
         },
         saveCategoryWeightingLocal () {
             saveCategoryWeighting(this.getCategoryMap());
@@ -159,7 +178,7 @@ export default {
         },
         changeCategory (c, nc) {
             this.gradetable.changeCategory(this.categories[c], nc);
-            this.categories[c] = nc;
+            this.$set(this.categories, c, nc);
         },
     },
 };
diff --git a/src/js/components/GradeRow.vue b/src/js/components/GradeRow.vue
index 1ce642d4..8f9c5860 100644
--- a/src/js/components/GradeRow.vue
+++ b/src/js/components/GradeRow.vue
@@ -21,7 +21,7 @@
  -->
 
 <template>
-    <tr :bgcolor="(assignment.id % 2 == 0) ? '#edf3fe' : '#fff'">
+    <tr :bgcolor="assignment.id % 2 == 0 ? '#edf3fe' : '#fff'">
         <td v-html="assignment.date" />
         <td
             v-if="!assignment.hypo"
@@ -60,14 +60,14 @@
                 alt="Missing"
             >
         </td>
-        <td width="14">
+        <td width="35">
             <img
                 v-if="assignment.exempt"
                 src="/images/icon_exempt.gif"
                 alt="Exempt"
             >
         </td>
-        <td width="19">
+        <td width="35">
             <img
                 v-if="assignment.excluded"
                 src="/images/icon_excluded.gif"
@@ -124,10 +124,10 @@
     </tr>
 </template>
 <script>
-import { avaliableGrades } from '../helpers';
-import ClassAssignment from '../models/ClassAssignment';
+import { avaliableGrades } from "../helpers";
+import ClassAssignment from "../models/ClassAssignment";
 export default {
-    name: 'GradeRow',
+    name: "GradeRow",
     props: {
         assignment: {
             type: ClassAssignment,
diff --git a/src/js/components/GradeTable.vue b/src/js/components/GradeTable.vue
index e2251103..25c03bfa 100644
--- a/src/js/components/GradeTable.vue
+++ b/src/js/components/GradeTable.vue
@@ -49,14 +49,16 @@
                     <th class="center">
                         Grd
                     </th>
-                    <th v-if="categoryWeighting">Exmp</th>
+                    <th v-if="categoryWeighting">
+                        Exmp
+                    </th>
                 </tr>
                 <grade-row
                     v-for="assignment in assignments"
                     :key="assignment.id"
                     :assignment="assignment"
                     :categories="categories"
-                    :categoryWeighting="categoryWeighting"
+                    :category-weighting="categoryWeighting"
                 />
                 <tr>
                     <td
@@ -87,7 +89,10 @@
                 </tr>
             </tbody>
         </table>
-        <button v-if="categoryWeighting" @click="addAssignment();">
+        <button
+            v-if="categoryWeighting"
+            @click="addAssignment();"
+        >
             Add Assignment
         </button>
     </div>
@@ -133,7 +138,7 @@ export default {
                 }
                 let missing = 0;
                 for (var cat in catmap) {
-                    if (grade[cat] == null) {
+                    if (grade[cat] === undefined || grade[cat] === null || grade[cat].every((element) => element === -1)) {
                         if (catmap[cat].weighting !== "") {
                             missing += catmap[cat].weighting;
                         }
@@ -142,11 +147,15 @@ export default {
                 let percent = 0;
                 for (cat in grade) {
                     let sum = 0;
+                    let grade_count = 0;
                     for (i = 0; i < grade[cat].length; i++) {
-                        sum += grade[cat][i];
+                        if (grade[cat][i] !== -1) {
+                            sum += grade[cat][i];
+                            grade_count++;
+                        }
                     }
-                    if (catmap[cat].weighting !== "") {
-                        percent += sum / grade[cat].length * catmap[cat].weighting;
+                    if (catmap[cat].weighting !== "" && grade_count !== 0) {
+                        percent += (sum / grade_count) * catmap[cat].weighting;
                     }
                 }
                 if (missing === 100) {
@@ -166,6 +175,9 @@ export default {
                 }
             }
         },
+        updateCategories (categories) {
+            this.categories = categories;
+        },
         changeCategory (oc, nc) {
             for (var i = 0; i < this.assignments.length; i++) {
                 if (this.assignments[i].category === oc) {
diff --git a/src/js/helpers.js b/src/js/helpers.js
index fa777a0e..1a82573b 100644
--- a/src/js/helpers.js
+++ b/src/js/helpers.js
@@ -150,7 +150,7 @@ function extractFinalPercent (html) {
         let current_string = html.match(/(?=document\.write).*/g)[1];
         current_string = /\[.*\]/g.exec(current_string)[0].slice(1, -1);
         const temp = current_string.split(";");
-        number = Math.max(isNaN(temp[temp.length - 2]) ? -Infinity : parseFloat(temp[temp.length - 2]), isNaN(temp[temp.length - 1]) ? -Infinity : parseFloat(temp[temp.length - 1]));
+        number = Math.max(isNaN(temp[temp.length - 2]) || temp[temp.length - 2] ? parseFloat(temp[temp.length - 2]) : -Infinity, isNaN(temp[temp.length - 1]) || temp[temp.length - 1] ? parseFloat(temp[temp.length - 1]) : -Infinity);
     } catch (e) {
         return;
     }
@@ -160,22 +160,41 @@ function extractFinalPercent (html) {
     return number;
 }
 
+/**
+ * Extract the final percent from the course page html.
+ * @param {Number} frn course id used to get course percent
+ * @param {String} semester string representing semester that the request is for
+ * @returns {Number|undefined} The final percent
+ */
+async function getFinalPercent (frn, semester) {
+    let number;
+    try {
+        await fetch(`https://powerschool.sas.edu.sg/guardian/scores_ms_guardian.html?frn=${frn}&fg=${semester}`, { credentials: "same-origin" }).then(response => response.text()).then(response => {
+            const page = document.implementation.createHTMLDocument();
+            page.documentElement.innerHTML = response;
+            number = extractFinalPercent(page.querySelector('table.linkDescList').innerHTML);
+        });
+    } catch (e) {
+        return;
+    }
+    if (number === null) {
+        return;
+    }
+    return number;
+}
+
 /**
  * Extract all grade categories from the course page html.
- * @param {String} html course page html
+ * @param {Node} table node representing table
  * @returns {String[]} List of all categories
  */
-function extractGradeCategories (html) {
-    const cat = [];
-    let match;
-    html = html.replace(/(\r\n|\n|\r)/gm, "");
-    const reg = /(?:[0-9][0-9]\/[0-9][0-9]\/[0-9][0-9][0-9][0-9]<\/td> *<td>)(.+?(?=<\/td>))/g;
-    match = reg.exec(html);
-    while (match !== null) {
-        if (!cat.includes(match[1])) cat.push(match[1]);
-        match = reg.exec(html);
+function extractGradeCategories (table) {
+    const table_rows = table.getElementsByTagName("tr");
+    const category_set = new Set();
+    for (let i = 1; i < table_rows.length - 1; i++) {
+        category_set.add(table_rows[i].getElementsByTagName("td")[1].getElementsByTagName("a")[0].innerText);
     }
-    return cat;
+    return Array.from(category_set);
 }
 
 /**
@@ -187,7 +206,7 @@ function extractAssignmentList () {
     const assignments = [];
     [...table.querySelectorAll('tr')].slice(1, -1).forEach((e, i) => {
         const curr = e.querySelectorAll('td');
-        assignments.push(new ClassAssignment(i, curr[0].innerHTML, curr[1].innerHTML, curr[2].innerHTML, isIndicatorPresent(curr[3]), isIndicatorPresent(curr[4]), isIndicatorPresent(curr[5]), isIndicatorPresent(curr[6]), isIndicatorPresent(curr[7]), curr[8].innerHTML, curr[10].innerHTML));
+        assignments.push(new ClassAssignment(i, curr[0].innerHTML, curr[1].innerText, curr[2].innerHTML, isIndicatorPresent(curr[3]), isIndicatorPresent(curr[4]), isIndicatorPresent(curr[5]), isIndicatorPresent(curr[6]), isIndicatorPresent(curr[7]), curr[9].innerHTML, curr[11].innerHTML));
     });
     return assignments;
 }
@@ -344,6 +363,7 @@ export {
     getSavedCategoryWeighting,
     saveCategoryWeighting,
     extractFinalPercent,
+    getFinalPercent,
     extractGradeCategories,
     extractAssignmentList,
     assignments,
diff --git a/src/js/saspowerschoolff.js b/src/js/saspowerschoolff.js
index b6acbb47..0a3792ed 100644
--- a/src/js/saspowerschoolff.js
+++ b/src/js/saspowerschoolff.js
@@ -34,7 +34,7 @@ const browser = require('webextension-polyfill');
 import {
     assignments,
     calculate_gpa,
-    extractFinalPercent,
+    getFinalPercent,
     extractGradeCategories,
     gradeToGPA,
     saveGradesLocally,
@@ -74,22 +74,21 @@ function main () {
     });
 
     const page_url = window.location.href.split('#')[0];
-    if (page_url === "https://powerschool.sas.edu.sg/guardian/homeHS.html") {
+    if (page_url === "https://powerschool.sas.edu.sg/guardian/home.html" || page_url === "https://powerschool.sas.edu.sg/guardian/homeHS.html") {
         main_page();
     } else if (page_url.match("https://powerschool.sas.edu.sg/guardian/scores") != null) {
         class_page();
-    } else if (page_url === "https://powerschool.sas.edu.sg/guardian/home.html" || page_url === "https://powerschool.sas.edu.sg/public/" || page_url === "https://powerschool.sas.edu.sg/public/home.html") {
+    } else if (page_url === "https://powerschool.sas.edu.sg/public/" || page_url === "https://powerschool.sas.edu.sg/public/home.html") {
         login_page();
     }
 }
 
-function main_page () {
+async function main_page () {
     const student_name = getStudentName();
     const { sem1_col, sem2_col } = getSemesterCols();
     const second_semester = isSecondSemester(sem2_col);
     const current_term = getCurrentTerm();
-    const { courses, promises_grade_calc_list } = getCourses(second_semester, sem1_col, sem2_col);
-
+    const { courses, promises_grade_calc_list } = await getCourses(second_semester, sem1_col, sem2_col);
     showCurrentGPA(second_semester, courses, promises_grade_calc_list);
 
     if (second_semester) {
@@ -110,9 +109,10 @@ function main_page () {
     });
 }
 
-function class_page () {
+async function class_page () {
     // Show final percent
-    const number = extractFinalPercent($("table.linkDescList").html());
+    const currentUrl = new URL(document.location.href);
+    const number = await getFinalPercent(currentUrl.searchParams.get("frn"), currentUrl.searchParams.get("fg")) || "";
     if (!number) {
         return;
     }
@@ -120,8 +120,7 @@ function class_page () {
 
     addHypoAssignment(number);
     addVueGrades();
-
-    document.querySelector('div.box-round').insertAdjacentHTML('afterend', `<select style="margin-left:20px; text-align-last: center; border-radius: 4px;" id='hypo-select'><option value='none'>Hypothetical Assigment Mode</option><option value='single'>Add Single Assignment</option><option value='category'>Category Weighting (beta)</option></select>`);
+    document.querySelector('div.box-round').insertAdjacentHTML('afterend', `<select style="margin-left:20px; text-align-last: center; border-radius: 4px;" id='hypo-select'><option value='none'>Hypothetical Assigment Mode</option><option value='single'>Add Single Assignment</option><option value='category'>Category Weighting (beta)</option></select><br><br>`);
     gt.setCategoryWeighting(false);
     document.getElementById('saspes-hypo-assignment').style.display = "none";
     document.getElementById('saspes-categories').style.display = "none";
@@ -291,7 +290,7 @@ function getCurrentTerm () {
  * @param sem2_col The column of the second semester
  * @returns {Course[]} array of Course objects representing the Courses of the user
  */
-function getCourses (second_semester, sem1_col, sem2_col) {
+async function getCourses (second_semester, sem1_col, sem2_col) {
     const $grade_rows = $('#quickLookup table.grid').find('tr');
     const courses = [];
     const promises_grade_calc_list = [];
@@ -300,48 +299,58 @@ function getCourses (second_semester, sem1_col, sem2_col) {
         let $course;
         if (second_semester) {
             const $cells = $grade_rows.eq(i).find('td');
-            $course = $cells.eq(sem2_col).find('a[href^="scores.html"]');
-            const $first_grade = $cells.eq(sem1_col).find('a[href^="scores.html"]');
+            $course = $cells.eq(sem2_col).find('a[href*="scores.html"]');
+            const $first_grade = $cells.eq(sem1_col).find('a[href*="scores.html"]');
             if ($first_grade.length === 1) {
                 if (gradeToGPA($first_grade.text()) !== -1) {
                     promises_grade_calc_list.push(new Promise((resolve, reject) => {
-                        fetch(`https://powerschool.sas.edu.sg/guardian/${$first_grade.attr('href')}`, { credentials: "same-origin" }).then(response => response.text()).then(response => {
-                            const page = document.implementation.createHTMLDocument();
-                            page.documentElement.innerHTML = response;
-                            const finalPercent = extractFinalPercent(page.querySelector('table.linkDescList').innerHTML) || "";
-                            if (gradeToGPA($first_grade.text()) !== -1) {
-                                new (Vue.extend(ClassGrade))({
-                                    propsData: {
-                                        course: new Course("", `https://powerschool.sas.edu.sg/guardian/${$first_grade.attr('href')}`, $first_grade.text(), finalPercent),
-                                    },
-                                }).$mount($first_grade.get(0));
+                        const currentUrlString = `https://powerschool.sas.edu.sg/guardian/${$first_grade.attr('href')}`;
+                        const currentUrl = new URL(currentUrlString);
+                        getFinalPercent(currentUrl.searchParams.get("frn"), currentUrl.searchParams.get("fg")).then(finalPercent => {
+                            if (!finalPercent) {
+                                finalPercent = "";
                             }
-                            resolve("Success");
+                            fetch(currentUrlString, { credentials: "same-origin" }).then(response => response.text()).then(response => {
+                                if (gradeToGPA($first_grade.text()) !== -1) {
+                                    new (Vue.extend(ClassGrade))({
+                                        propsData: {
+                                            course: new Course("", currentUrlString, $first_grade.text(), finalPercent),
+                                        },
+                                    }).$mount($first_grade.get(0));
+                                }
+                                resolve("Success");
+                            });
                         });
                     }));
                 }
             }
         } else {
-            $course = $grade_rows.eq(i).find('td a[href^="scores.html"]').eq(0);
+            $course = $grade_rows.eq(i).find('td a[href*="scores.html"]').eq(0);
         }
         if ($course.length === 1) {
             const temp = $course.parents().eq(1).children("td[align=left]").text().match(".*(?=Details)")[0];
             if (gradeToGPA($course.text()) !== -1) {
                 promises_grade_calc_list.push(new Promise((resolve, reject) => {
-                    fetch(`https://powerschool.sas.edu.sg/guardian/${$course.attr('href')}`, { credentials: "same-origin" }).then(response => response.text()).then(response => {
-                        const page = document.implementation.createHTMLDocument();
-                        page.documentElement.innerHTML = response;
-                        const finalPercent = extractFinalPercent(page.querySelector('table.linkDescList').innerHTML) || "";
-                        const assignment_list = assignments(page.querySelector('body'));
-                        courses.push(new Course(temp.trim(), `https://powerschool.sas.edu.sg/guardian/${$course.attr('href')}`, $course.text(), finalPercent, assignment_list));
-                        if (gradeToGPA($course.text()) !== -1) {
-                            new (Vue.extend(ClassGrade))({
-                                propsData: {
-                                    course: courses[courses.length - 1],
-                                },
-                            }).$mount($course.get(0));
+                    const currentUrlString = `https://powerschool.sas.edu.sg/guardian/${$course.attr('href')}`;
+                    const currentUrl = new URL(currentUrlString);
+                    getFinalPercent(currentUrl.searchParams.get("frn"), currentUrl.searchParams.get("fg")).then(finalPercent => {
+                        if (!finalPercent) {
+                            finalPercent = "";
                         }
-                        resolve("Success");
+                        fetch(currentUrlString, { credentials: "same-origin" }).then(response => response.text()).then(response => {
+                            const page = document.implementation.createHTMLDocument();
+                            page.documentElement.innerHTML = response;
+                            const assignment_list = assignments(page.querySelector('body'));
+                            courses.push(new Course(temp.trim(), currentUrlString, $course.text(), finalPercent, assignment_list));
+                            if (gradeToGPA($course.text()) !== -1) {
+                                new (Vue.extend(ClassGrade))({
+                                    propsData: {
+                                        course: courses[courses.length - 1],
+                                    },
+                                }).$mount($course.get(0));
+                            }
+                            resolve("Success");
+                        });
                     });
                 }));
             }
@@ -414,9 +423,9 @@ function addHypoGradeCalc (courses) {
 /**
  * Add a category weighting widget.
  */
-function addVueGrades () {
+async function addVueGrades () {
     const assignments = extractAssignmentList();
-    const cat = extractGradeCategories(document.querySelector("#content-main > div.box-round > table:nth-child(4) > tbody").innerHTML);
+    const cat = extractGradeCategories(document.querySelector("#content-main > div.box-round > table:nth-child(4) > tbody"));
     gt = new (Vue.extend(GradeTable))({ // remake grade table to easily read grades
         propsData: {
             categories: cat,